processmaker-builder

{ "name": "form-example", "items": [ { "type":"form", "items": [ [ { "type": "title", "colSpan": 12, "name": "title", "label": "PMDynaform 1 - Basic Fields" } ], [ { "type": "button", "id": "myModalButton", "label": "Show window" } ], [ { "type": "subtitle", "colSpan": 12, "name": "subtitle", "label": "<textarea>Basic fields without validations" } ], [ { "var_name": "plainVariable", "var_uid": "752292886541b20d3325955025125925", "dataType": "string", "colSpan": 12, "name": "users_1", "id": "users_1", "label": "Variable associated 1", "defaultValue": "", "required": false, "hint": "", "dependentFields": [], "mode": "parent", "options": [], "type": "text" } ], [ { "var_name": "plainVariable", "var_uid": "752292886541b20d3325955025125925", "dataType": "string", "colSpan": 12, "name": "users_1", "id": "users_1", "label": "Variable associated 2", "defaultValue": "", "required": false, "hint": "", "mode": "parent", "type": "textarea" } ], [ { "type": "form", "colSpan": 12, "name": "subform-name", "id": "1234567890", "items": [ [ { "type": "title", "colSpan": 12, "name": "title", "label": "SubForm" } ], [ { "var_name": "users", "var_uid": "752292886541b20d3325955025125925", "dataType": "string", "colSpan": 12, "name": "users23", "id": "users23", "label": "Variable associated 3", "defaultValue": "", "required": false, "hint": "", "dependentFields": [], "mode": "parent", "options": [ { "label": "Omar Suca", "value": "suca" }, { "label": "Carlos Enrique", "value": "quique" } ], "type": "dropdown" } ], [ { "var_name": "country", "var_uid": "943312492541b2101075730071729173", "dataType": "string", "colSpan": 12, "name": "country", "id": "country", "label": "country", "defaultValue": "", "required": false, "hint": "", "dependentFields": [ "location", "subdivision" ], "mode": "parent", "options": [ { "label": "My Country", "value": "newcountry" }, { "label": "My Second Country", "value": "newsecondcountry" } ], "type": "dropdown" } ], [ { "type": "text", "colSpan":12, "name": "varname", "var_name": "varname", "var_uid": "752292886541b20d3325955025125927", "defaultValue": "", "disabled": false, "label": "Data type - String", "required": true, "dataType": "string", "hint": "Text field example with string validation" } ] ] } ], [ { "var_name": "optionsvariable", "var_uid": "109090183545298e8505313008393063", "dataType": "string", "colSpan": 12, "name": "users_3", "id": "users_3", "label": "CheckBox Field", "defaultValue": "", "required": false, "hint": "", "dependentFields": [], "mode": "parent", "options": [ { "label": "First Value", "value": "firstvalue", "selected" : true }, { "label": "Second Value", "value": "secondvalue", "selected" : true } ], "type": "checkbox" } ], [ { "var_name": "simplevariabletwo", "var_uid": "992707483545248537300e5085346250", "dataType": "string", "colSpan": 12, "name": "RadioField1", "id": "RadioField1", "label": "Field associated to others fields 1", "defaultValue": "", "required": false, "hint": "", "dependentFields": [], "mode": "parent", "options": [ { "label": "Option by default", "value": "default" }, { "label": "first Option", "value": "option1" }, { "label": "Second Option", "value": "option2" } ], "type": "dropdown" } ], [ { "var_name": "simplevariabletwo", "var_uid": "992707483545248537300e5085346250", "dataType": "string", "colSpan": 12, "name": "RadioField1", "id": "RadioField1", "label": "Field associated to others fields 2", "defaultValue": "", "required": false, "hint": "", "dependentFields": [], "mode": "parent", "options": [ { "label": "first Option", "value": "option1" }, { "label": "Second Option", "value": "option2" } ], "type": "radio" } ], [ { "var_name": "simplevariabletwo", "var_uid": "992707483545248537300e5085346250", "dataType": "string", "colSpan": 12, "name": "users_3", "id": "users_3", "label": "Checkbox", "defaultValue": "", "required": false, "hint": "", "dependentFields": [], "mode": "parent", "options": [ { "label": "First Value", "value": "option1" }, { "label": "Second Value", "value": "option2" } ], "type": "checkbox", "selected" : ["option1", "option2"] } ], [ { "var_name": "simplevariablethree", "var_uid": "101", "dataType": "string", "colSpan": 12, "name": "fieldNameDatetime1", "id": "fieldNameDatetime1", "label": "DateTime", "defaultValue": "", "required": false, "hint": "", "dependentFields": [], "mode": "parent", "pickType": "datetime", "type": "datetime" } ], [ { "var_name": "simplevariablethree", "var_uid": "102", "dataType": "string", "colSpan": 12, "name": "dateTimeName", "id": "dateTimeId", "label": "Date", "defaultValue": "", "required": false, "hint": "", "dependentFields": [], "mode": "parent", "pickType": "date", "type": "datetime" } ], [ { "var_name": "simplevariablethree", "var_uid": "103", "dataType": "string", "colSpan": 12, "name": "dateTimeName", "id": "dateTimeId", "label": "Time", "defaultValue": "", "required": false, "hint": "", "dependentFields": [], "mode": "parent", "pickType": "time", "type": "datetime" } ], [ { "var_name": "country", "var_uid": "943312492541b2101075730071729173", "dataType": "string", "colSpan": 12, "name": "country", "id": "country", "label": "country", "defaultValue": "", "required": false, "hint": "", "dependentFields": [ "location", "subdivision" ], "mode": "parent", "options": [ { "label": "My Country", "value": "newcountry" }, { "label": "My Second Country", "value": "newsecondcountry" } ], "type": "dropdown" } ], [ { "var_name": "subdivision", "var_uid": "562853519541b20e79b6960026331275", "dataType": "string", "colSpan": 12, "name": "subdivision", "id": "subdivision", "label": "subdivision", "defaultValue": "", "required": false, "hint": "", "dependentFields": [ "location" ], "mode": "parent", "options": [ { "label": "new division", "value": "newdivision" } ], "type": "dropdown" } ], [ { "var_name": "location", "var_uid": "448293955541b20b5e393c3052081446", "dataType": "string", "colSpan": 12, "name": "location", "id": "location", "label": "location", "defaultValue": "", "required": false, "hint": "", "dependentFields": [], "mode": "parent", "options": [ { "label": "Newlocation", "value": "newvalue" } ], "type": "dropdown" } ], [ { "var_name": "country", "var_uid": "943312492541b2101075730071729173", "dataType": "string", "colSpan": 12, "name": "country_1", "id": "country_1", "label": "country", "defaultValue": "", "required": false, "hint": "", "dependentFields": [], "mode": "parent", "type": "text" } ], [ { "var_name": "variablegridone", "var_uid": "8391557125458eb60509b60057650758", "dataType": "string", "colSpan": 12, "name": "variablegridone", "id": "variablegridone", "label": "variablegridone", "defaultValue": "", "required": false, "hint": "", "dependentFields": [], "textTransform": "none", "validate": "any", "mask": "", "maxLength": 100, "formula": "", "mode": "parent", "type": "text" } ], [ { "type": "grid", "colSpan": 12, "name": "GridName", "id": "GridNameId", "label": "GridField with pager and form mode", "required": false, "rows": 3, "layout": "form", "pageSize": 3, "mode": "edit", "hint": "This is a grid example", "columns": [ { "var_name": "variablegridone", "var_uid": "8391557125458eb60509b60057650758", "type": "text", "name": "textname", "id": "textnameId", "placeholder": "mask #### - ### - ###", "defaultValue": "111111111", "title": "TextInput", "required": false }, { "var_name": "variablegridtwo", "var_uid": "5746882395458eb6b8b54a2015704374", "type": "text", "name": "textname2", "placeholder": "mask #### - ### - ###", "defaultValue": "22222222", "title": "TextInput", "required": true }, { "var_name": "variablegridthree", "var_uid": "5532828265458eb76ebf700002684261", "type": "text", "name": "textname3", "placeholder": "mask #### - ### - ###", "defaultValue": "333333333", "title": "TextInput", "required": true }, { "var_name": "variablegridfour", "var_uid": "6551198965458ebe28477c5094393260", "type": "dropdown", "title": "Options", "name": "dropdownname", "defaultValue": "option2", "value": "option2", "options": [ { "label": "Option 1", "value": "option1" }, { "label": "Option 2", "value": "option2" }, { "label": "Option 3", "value": "option3" } ] }, { "var_name": "variablegridfour", "var_uid": "6551198965458ebe28477c5094393260", "type": "radio", "title": "Options Radio", "name": "dropdownname", "defaultValue": "option2", "value": "option2", "options": [ { "label": "Option 1", "value": "option1" }, { "label": "Option 2", "value": "option2" }, { "label": "Option 3", "value": "option3" } ] } ] } ], [ { "type" : "button", "colSpan" : 12, "label":"Button" } ], [ { "type" : "submit", "colSpan" : 12, "label" : "Submit" } ] ], "variables": [ { "var_acceptedValues": [], "var_dbConnection": "workflow", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "users", "var_name": "plainVariable", "var_allowNull": 1, "var_sql": "SELECT USR_UID, USR_USERNAME\nFROM USERS\nWHERE USR_USERNAME <> \" \"", "var_uid": "12345" }, { "var_acceptedValues": [], "var_dbConnection": "workflow", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "users", "var_name": "textareavariable", "var_allowNull": 1, "var_sql": "SELECT USR_UID, USR_USERNAME\nFROM USERS\nWHERE USR_USERNAME <> \" \"", "var_uid": "1234" }, { "var_acceptedValues": [], "var_dbConnection": "workflow", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "users", "var_name": "users", "var_allowNull": 1, "var_sql": "SELECT USR_UID, USR_USERNAME\nFROM USERS\nWHERE USR_USERNAME <> \" \"", "var_uid": "752292886541b20d3325955025125925" }, { "var_acceptedValues": [], "var_dbConnection": "workflow", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "country", "var_name": "country", "var_allowNull": 1, "var_sql": "SELECT IC_UID,IC_NAME \nFROM ISO_COUNTRY WHERE IC_NAME <> \" \"", "var_uid": "943312492541b2101075730071729173" }, { "var_acceptedValues": [], "var_dbConnection": "workflow", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "subdivision", "var_name": "subdivision", "var_allowNull": 1, "var_sql": "SELECT \nIS_UID,\nIS_NAME FROM ISO_SUBDIVISION WHERE IC_UID = \"@#country\" AND IS_NAME <> \" \"", "var_uid": "562853519541b20e79b6960026331275" }, { "var_acceptedValues": [], "var_dbConnection": "workflow", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "location", "var_name": "location", "var_allowNull": 1, "var_sql": "SELECT IL_UID, IL_NAME\nFROM ISO_LOCATION\nWHERE IS_UID = \"@#subdivision\" AND IL_NAME <> \" \" AND IC_UID = \"@#country\"", "var_uid": "448293955541b20b5e393c3052081446" }, { "var_acceptedValues": [], "var_dbConnection": "workflow", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "varname", "var_name": "varname", "var_allowNull": 1, "var_sql": "", "var_uid": "752292886541b20d3325955025125927" }, { "var_acceptedValues": [], "var_dbConnection": "none", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "simplevariable", "var_name": "simplevariable", "var_allowNull": 1, "var_sql": "", "var_uid": "299463130541b212c93a3d7047589419" }, { "var_acceptedValues": [], "var_dbConnection": "none", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "Simple Variable Two", "var_name": "simplevariabletwo", "var_allowNull": 1, "var_sql": "", "var_uid": "992707483545248537300e5085346250" }, { "var_acceptedValues": [], "var_dbConnection": "none", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "datetime", "var_label": "Simple Variable Three", "var_name": "simplevariablethree", "var_allowNull": 1, "var_sql": "", "var_uid": "31319212954524865487616020584523" }, { "var_acceptedValues": [ { "value": "First Value", "keyValue": "firstvalue" }, { "value": "Second Value", "keyValue": "secondvalue" } ], "var_dbConnection": "none", "var_defaultValue": "", "var_fieldSize": 100, "var_fieldType": "string", "var_label": "optionsvariable", "var_name": "optionsvariable", "var_allowNull": 1, "var_sql": "", "var_uid": "109090183545298e8505313008393063" }, { "var_acceptedValues": [], "var_dbConnection": "none", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "variablegridone", "var_name": "variablegridone", "var_allowNull": 1, "var_sql": "", "var_uid": "8391557125458eb60509b60057650758" }, { "var_acceptedValues": [], "var_dbConnection": "none", "var_defaultValue": "", "var_fieldSize": 100, "var_fieldType": "string", "var_label": "variablegridtwo", "var_name": "variablegridtwo", "var_allowNull": 1, "var_sql": "", "var_uid": "5746882395458eb6b8b54a2015704374" }, { "var_acceptedValues": [], "var_dbConnection": "none", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "variablegridthree", "var_name": "variablegridthree", "var_allowNull": 1, "var_sql": "", "var_uid": "5532828265458eb76ebf700002684261" }, { "var_acceptedValues": [], "var_dbConnection": "none", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "variablegridthree", "var_name": "var-datetime", "var_allowNull": 1, "var_sql": "", "var_uid": "101" }, { "var_acceptedValues": [], "var_dbConnection": "none", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "variablegridthree", "var_name": "var-date", "var_allowNull": 1, "var_sql": "", "var_uid": "102" }, { "var_acceptedValues": [], "var_dbConnection": "none", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "variablegridthree", "var_name": "var-time", "var_allowNull": 1, "var_sql": "", "var_uid": "103" }, { "var_acceptedValues": [ { "value": "variable option 1", "keyValue": "variable_option_1" }, { "value": "variable option 2", "keyValue": "variable_option_2" }, { "value": "variable option 3", "keyValue": "variable_option_3" } ], "var_dbConnection": "none", "var_defaultValue": "", "var_fieldSize": 10, "var_fieldType": "string", "var_label": "variablegridfour", "var_name": "variablegridfour", "var_allowNull": 1, "var_sql": "", "var_uid": "6551198965458ebe28477c5094393260" } ], "data": { "users": "quique", "country": "newsecondcountry", "subdivision": "newdivision", "varname": "Omar", "simplevariabletwo": "option2", "variablegridone": [ "111111111", "222222222", "333333333" ], "variablegridtwo": [ "First Value II", "Second Value II" ], "variablegridthree": [ "", "Second Value III" ], "variablegridfour": [ "value1", "value2", "value3" ] }, "script": { "type": "js", "code": "showWindow = function () {\n var modal = '<div class=\"modal\" id=\\\"myModal\\\" tabindex=\\\"-1\\\" role=\\\"dialog\\\" aria-labelledby=\\\"myModalLabel\\\" aria-hidden=\\\"true\\\">' \n +'<div class=\\\"modal-dialog\\\">'\n + '<div class=\\\"modal-content\\\">'\n + '<div class=\\\"modal-header\\\">'\n + '<button type=\\\"button\\\" class=\\\"close\\\" data-dismiss=\\\"modal\\\"><span aria-hidden=\\\"true\\\">×</span><span class=\\\"sr-only\\\">Close</span></button>'\n + '<h2 class=\\\"modal-title\\\" id=\\\"myModalLabel\\\">FrontEnd Developer</h2>'\n + '</div>'\n + '<div class=\\\"modal-body\\\">... <h5>Omar Suca</h5><i>PMDynaform Library</i>... <div id=\\\"modal-body-fields\\\"> </div></div>'\n + '<div class=\\\"modal-footer\\\">'\n + '<button type=\\\"button\\\" class=\\\"btn btn-default\\\" data-dismiss=\\\"modal\\\">Close</button>'\n + '<button type=\\\"button\\\" class=\\\"btn btn-primary\\\">Save changes</button>'\n + '</div>'\n + '</div>'\n + '</div>'\n +'</div>';\n $('#myModal').remove();\n $(document.body).append(modal);\n};\n\ngetFieldById('myModalButton').on('click', function(){\n console.log('Init Click callback');\n showWindow();\n $('#myModal').modal('toggle');\n $('#myModal').css(\"display\", \"block\");\n console.log('End Click callback');\n\n formModel = new PMDynaform.model.FormPanel({\n type: \"form\",\n items: [\n [\n {\n type: \"title\",\n colSpan: 12,\n name: \"title\",\n label: \"PMDynaform - My Fields\"\n }\n ], \n [\n {\n type: \"subtitle\",\n colSpan: 12,\n name: \"subtitle\",\n label: \"Basic fields without validations\"\n }\n ],\n [\n {\n var_name: \"simplevariable\",\n var_uid: \"111\",\n dataType: \"string\",\n colSpan: 6,\n name: \"users_1\",\n id: \"users_1\",\n label: \"Field Label 1\",\n defaultValue: \"\",\n required: false,\n hint: \"\",\n dependentFields: [],\n mode: \"parent\",\n options: [],\n type: \"text\"\n },\n {\n var_name: \"simplevariable\",\n var_uid: \"111\",\n dataType: \"string\",\n colSpan: 6,\n name: \"users_2\",\n id: \"users_2\",\n label: \"Field Label 2\",\n defaultValue: \"\",\n required: true,\n hint: \"\",\n dependentFields: [],\n mode: \"parent\",\n options: [],\n type: \"text\"\n }\n ],\n [{\n var_name: \"simplevariable\",\n var_uid: \"111\",\n dataType: \"string\",\n colSpan: 12,\n name: \"textarea\",\n id: \"textareaid \",\n label: \"My Textarea\",\n defaultValue: \"\",\n required: true,\n hint: \"\",\n dependentFields: [],\n mode: \"parent\",\n options: [],\n type: \"textarea\"\n }]\n ],\n variables: [\n {\n \"var_acceptedValues\": [],\n \"var_dbConnection\": \"none\",\n \"var_defaultValue\": \"\",\n \"var_fieldSize\": 10,\n \"var_fieldType\": \"string\",\n \"var_label\": \"simplevariable\",\n \"var_name\": \"simplevariable\",\n \"var_allowNull\": 1,\n \"var_sql\": \"\",\n \"var_uid\": \"111\"\n }\n ]\n });\n formView = new PMDynaform.view.FormPanel({model: formModel });\n \n $(\"#modal-body-fields\").append(formView.render().el);\n\n});" } } ] }