Overview

DynaForms are stored in JSON (JavaScript Object Notation), which is a text format understood by JavaScript. It is possible to edit the JSON code for a DynaForm by first exporting the DynaForm and then editing it in a plain text editor. When done editing, the JSON file can be reimported into ProcessMaker.

It is generally recommended to create DynaForms using the graphical DynaForm Editor inside ProcessMaker, but it can be useful to edit a DynaForm's JSON code after it has been created. Editing the JSON code allows:

  • Insertion of variables inside the DynaForm,
  • Edition of specialized properties which are not available in the graphical interface,
  • Edition with a text editor, which is faster than using the graphical interface when making changes in many different controls.

Exporting and Editing DynaForms

In order to edit a DynaForm, first export it. Open the DynaForm to edit it, and then click on the button in the toolbar to export the DynaForm.

By default, the JSON file will be saved in the file dynaform-title.json. Depending on the configuration of your web browser, it may either download the file automatically to the default download directory or allow the filename and file location be changed by the user.

Then, open the DynaForm's JSON file with a plain text editor. It is recommended to use a code editor, such as Notepad++, Eclipse, Bluefish or Sublime which has code highlighting, in order to avoid making mistakes. Code highlighting helps to catch errors, such as forgetting to end strings with a " (double quotation mark) or forgetting to include closing ] (brackets) and } (curly braces).

If the code editor doesn't automatically recognize the JSON format, set it to use the JavaScript language.

When done editing the JSON code, then open a DynaForm for editing and click on the button in the toolbar to import the edited JSON file. Importing will overwrite the contents of the DynaForm (although it will keep the DynaForm's existing title). Any variables used in the DynaForm, which don't already exist, will be automatically created when importing the DynaForm.

Understanding JSON format

Before editing the JSON code for a DynaForm, it may be useful to understand the format.

In JSON, strings are enclosed in double quotation marks:
"This is a string"
To include double quotation marks inside a string, escape them by preceding them with \ (a backslash):
"Say \"hello\" to your client"
Tabs are represented in strings as \t and new lines are represented as \n:
"New Client List:\n\tAcme, Inc.\n\tWidgets Corp.\n\tDawkins & Baileys"
Integers are numbers without a decimal point and floating-point numbers are numbers with a decimal point, which is represented with a . (period). Do NOT use the European practice of separating the decimal numbers with , (a comma).
A boolean is a variable which is either set to true or false. In addition, JSON supports the use of null (no value) and undefined.
An array is a list of values separated by , (commas). Arrays are enclosed in [ ] (square brackets). The values in an array can be any data type such as strings, integers, floating-point numbers, nulls, and even include arrays and objects embedded inside the array:

["John Doe", 101, 724.99, null, undefined, ["embedded array", 4], "Jane Roe"]
Objects are enclosed in { } (curly braces) and contain name-value pairs which are separated by : (colons). The values can also be of any data type, included embedded arrays and objects:
{
  "name":      "John Doe",
  "salary":    48387.50,
  "NoClients": 2,
  "clients":   ["Sally Smith", "Bill Bland"],
  "salesArea": {"code": "TX", "name": "Texas"}
}
Note that spacing outside of strings is ignored in JSON so the above object can also be represented as:
{"name":"John Doe","salary":48387.50,"NoClients":2,"clients":["Sally Smith","Bill Bland"],"salesArea":{"code":"TX","name":"Texas"}}

Format of DynaForm files

The JSON code in a DynaForm file is organized in a topmost object which contains the name, description and items properties. The complete information about the DynaForm is enclosed in items. The most important of its properties is another items, which holds an array of objects with information about the controls in the DynaForm. The properties for each type of control are listed below. The other important property is variables, which is an array of objects with information about the variables which are assigned to controls in the DynaForm.

Here is the basic structure of a DynaForm file:

Example JSONDescription
{
"name": "Client Info", The title of the DynaForm.
"description": "Enter information about a client", The description of the DynaForm.
"items": [ An array of forms. Note: Future versions of ProcessMaker will support multi-part forms, but currently there can only be one form in a DynaForm.
{ An object containing the form's properties.
"type": "form", The type, which for DynaForms is "form".
"gridStore": false, Always set to false.
"variable": "", DynaForms do not have an associated variable, so always set to "" (empty string).
"var_uid": "", DynaForms do not have an associated variable, so always set to "" (empty string)
"dataType": "", DynaForms do not have a data type, so always set to "" (empty string)
"id": "315000439561bfbb2880516004635450",The unique ID of the DynaForm, which is automatically generated by ProcessMaker.
"name": "Client Info", The title of the DynaForm.
"description": "Enter information about a client",The description of the DynaForm.
"mode": "edit", The DynaForm's mode, which can be:
"edit" (controls which have "parent" mode will be editable),
"view" (controls with "parent" mode will be viewable, but not editable),
"disabled" (controls with "parent" mode will be greyed out)
"script": { Object holding information about any custom code added to the DynaForm
"type": "js", The type of code is always "js" (JavaScript).
"code": "$(\"#amount\").setValue(99);\n" The custom JavaScript code added to the DynaForm.
},
"language": "en", The ISO code for the language of the DynaForm, such as "es" (english) or "pt_BR" (Brazilian Portuguese). If set to a language which doesn't have a PO translation file, then it will use the language in which the form was created.
"externalLibs":"http://example.com/clientCode.js",The external JavaScript files which will be loaded with the DynaForm. If needing to load multiple JavaScript files, separate them with , (commas).
"items": [ An array of the rows in the DynaForm.
[ Start the row array.
{ Start the first control object.
"type": "text", The type of control which can be: "text", "textarea", "suggest", "dropdown", "radio", "checkbox", "checkgroup", "file", "datetime", "grid", "title", "subtitle", "annotation" (label), "image", "link", "panel", "button", "submit", "hidden", "form" (subform).
"variable": "firstName", The name of the variable associated with the control.
"var_uid": "940990699561c032de52c00036095595",The unique ID of the variable associated with the control.
"dataType": "string", The type of variable associated with the control, which can be: "" (no variable), "string", "integer", "float", "array", "file", "datetime", "boolean", "grid".
"id": "firstName", The control's ID.
"name": "firstName", The control's name, which is set to the name of its associated variable. If the control doesn't have a variable, then it is set to "type000000000X".
"label": "Client's First Name", The label, which is the text displayed above or to the left of the control.
"defaultValue": "Sally Rowe", The value which is inserted in the control by default.
"placeholder": "Enter the client name", Text which appears inside a field when it is empty to guide the user what to enter in the field.
"hint": "External clients only!", The text which is displayed when the user hovers the mouse over the question mark icon to the right of the control.
"required": true, If set to true, the field cannot be left blank when the DynaForm is submitted.
"textTransform": "none", Indicates how the entered text should be transformed: "none", "upper", "lower", "titleCase" or "capitalizePhrase"
"validate": "[a-zA-Z0-9]+", Regular expression which checks the value in the field when the DynaForm is submitted.
"validateMessage": "No spaces allowed!", Message to display in red if the value doesn't match the regular expression in the validate property.
"maxLength": 1000, The maximum number of characters which can be entered in the field. Note that this attribute is only used for textboxes, and always set to null for suggest and textareas.
"formula": "(price - discount) * 0.1",The text of the formula, which sets the value in a textbox, based on the values in other fields.
"mode": "parent", The mode of the control, which can be:
"edit" (user may change value),
"view" (user may only view the value),
"disabled" (control is grayed out) or
"parent" (control's mode is inherited from its parent which can be a DynaForm, subform or grid).
"operation": "", Always set to "" (empty string).
"dbConnection": "3875963975654db81bf8ef0031093386",The unique ID of the database connection used to populate the field with an SQL query. If not set to a custom database connection, then set to "workflow" for the current workspace database in MySQL.
"dbConnectionLabel":"[localhost:3306] mysql: clients",The label of the database connection use to populate the field with an SQL query. The label contains the following information: "[ip-address:port] database-type: database-name"
If not using a custom database connection, then set to "PM Database" for the default wf_workspace database for the current workspace.
"sql": "SELECT NAME FROM CLT WHERE X=@@Y",SQL query used to populate the field. With textboxes, textareas, datetimes and hiddens the first field in the first record returned by the query is inserted as the value of the field when the form loads. For dropdowns, checkgroups (and checkboxes before version 3.0.1.4), radio buttons, and suggest boxes, the SQL query populates the list of options and the first field is the key and the second field is the label. If SQL queries for suggest boxes have an optional third field, it is displayed as the description below each option. If the SQL query contains a reference to another field in the DynaForm as @@fieldName or @#fieldName, then the current control is a dependent field and when the value of that referenced field changes, the SQL query is reexecuted.
"var_name": "clientName", The name of the variable associated with the control. Set to "" if no associated variable.
"colSpan": 12 Number of columns of width the control occupies in the DynaForm. 12 is the maximum and the default width. If the control occupies half the row, then set to 6. If occupying a third, set to 4.
}, End the object for first control in the row.
... Any additional controls in the row.
], End of row.
... Any additional rows in the DynaForm.
], End of the items array.
"variables":[ An array of the variables which are associated with controls in the DynaForm.
{ Start first variable object.
"var_uid": "940990699561c032de52c00036095595",The unique ID of the variable.
"prj_uid": "962481013561bf991911cb6077262632",The unique ID of the project.
"var_name": "firstName", The variable's name.
"var_field_type": "string", The type of variable, which can be: "string", "integer", "float", "array", "file", "datetime", "boolean", "grid"
"var_field_size": 10, Not used and always set to 10.
"var_label": "string", Not used and always set to "string".
"var_dbconnection": "workflow", The unique ID of the database connection used to populate the field with an SQL query. See the description of "dbConnection" above.
"var_dbconnection_label": "PM Database", The label of the database connection use to populate the field with an SQL query. See the description of "dbConnectionLabel" above.
"var_sql": "", SQL query used to populate the field. See the description of "sql" above.
"var_null": 0, If set to 1, then the variable may be set to null (no value).
"var_default": "", The default value for the variable at the start of a new case.
"var_accepted_values": "[{\"value\":\"CA\",\"label\":\"Canada\"}, {\"value\":\"MX\",\"label\":\"Mexico\"}]"A serialized array of the accepted values for the variable. Each accepted value is an object with value and label properties. If the variable is used by a textbox, textarea, hidden or date field, the value and the label should be the same.
}, End variable object.
... Any additional variable objects.
] End array of variables.
} End items object.
]
}

Textboxes

For the JSON format of textboxes, see the example listed above.

Textareas

The JSON format of textareas is similar to textboxes, but it has an additional rows property and does not have the formula, maxLength, operation and textTransform properties.

Example JSONDescription
"rows": "5"The number of rows to display in the textarea, which is 5 by default. Note that the vertical size of a textarea can be expanded by pulling down on its lower right corner, so rows is only the initial size of the textarea. The amount of text entered in a textarea is only limited by the size of the wf_<WORKSPACE>.APPLICATION.APP_DATA field in the MySQL database, which can hold up to 16MB.

Example:

{
  "type":             "textarea",
  "variable":         "clientAddress",
  "var_uid":          "460857154561c03404fad20006766130",
  "dataType":         "string",
  "id":               "clientAddress",
  "name":             "clientAddress",
  "label":            "Address",
  "defaultValue":     "",
  "placeholder":      "",
  "hint":             "",
  "required":         false,
  "validate":         "",
  "validateMessage":  "",
  "mode":             "parent",
  "dbConnection":     "workflow",
  "dbConnectionLabel":"PM Database",
  "sql":              "",
  "rows":             "5",
  "var_name":         "clientAddress",
  "colSpan":          12
}

Dropdowns

The JSON format of dropdown boxes is similar to textboxes, but it does not have the formula, maxLength, operation and textTransform properties. If using a query in the sql property, make sure that it returns two fields to populate for the keys and labels in the list of options.

Example:

{
  "type":             "serviceType",
  "variable":         "serviceType",
  "var_uid":          "775261651561c0358b8a805027753985",
  "dataType":         "string",
  "id":               "serviceType",
  "name":             "serviceType",
  "label":            "Type of service",
  "defaultValue":     "",
  "placeholder":      "",
  "hint":             "",
  "required":         false,
  "mode":             "parent",
  "dbConnection":     "3875963975654db81bf8ef0031093386",
  "dbConnectionLabel":"[localhost:3306] mysql: clients",
  "sql":              "select SERVICE_TYPE, SERVICE_NAME from CLIENTS",
  "options": [
    {
      "value":"accounting",
      "label":"Accounting"
    },
    {
      "value":"financing",
      "label":"Financial Advice"
    },
    {
      "value":"it",
      "label":"IT Services"},
    {
      "value":"legal",
      "label":"Legal Advice"
    }
  ],
  "var_name":         "serviceType",
  "colSpan":          12
}

Checkbox (version 3.0.1.4+)

The JSON format of checkboxes changed in version 3.0.1.4 and later, so they only have one checkable box and are based on boolean variables.

Example JSONDescription
"defaultValue": "true",Set to "true" or "1" to mark the checkbox by default. Set to "false", "0" or "" to not mark the checkbox by default.
"options": [ { "value": "1", "label": "Yes" }, { "value": "0", "label": "No" } ], The options property sets the labels for a marked checkbox which has a value of "1" or an unmarked box which has a value of "0". If set to [], then the labels are "true" and "false" by default.

Example:

{
  "type":        "checkbox",
  "variable":    "has",
  "var_uid":     "657414710561c0369d4a910031306722",
  "dataType":    "",
  "id":          "hasContract",
  "name":        "hasContract",
  "label":       "Has contract?",
  "defaultValue":"true",
  "hint":        "",
  "required":    false,
  "mode":        "parent",
  "options":     [
    {
      "value":   "1",
      "label":   "Yes"
    },
    {
      "value":    "0",
      "label":    "No"
    }
  ],
  "colSpan":     12
}

Checkgroup (version 3.0.1.4+)

Checkgroups were added in version 3.0.1.4. They are based on array variables and allow for multiple checkable boxes. Note that more than one option can be marked by default by separating the values in the defaultValue property with | (vertical bars), such as "US|MX|CA". If using a query in the sql property, make sure that it returns two fields to populate for the keys and labels in the list of options.

Example:

{
  "type":             "checkgroup",
  "variable":         "selectCountry",
  "var_uid":          "383038449561c037b230df1076919631",
  "dataType":         "array",
  "id":               "selectCountry",
  "name":             "selectCountry",
  "label":            "Select Country",
  "defaultValue":     "US|MX",
  "hint":             "",
  "required":         false,
  "mode":             "parent",
  "dbConnection":     "3875963975654db81bf8ef0031093386",
  "dbConnectionLabel":"[localhost:3306] mysql: countries",
  "sql":              "SELECT COUNTRY_CODE, COUNTRY_NAME FROM MORE_COUNTRIES",
  "options": [
    {
      "value":"CA",
      "label":"Canada"
    },
    {
      "value":"US",
      "label":"United States"
    },
    {
      "value":"MX",
      "label":"Mexico"
    }
  ],
  "var_name":         "selectCountry",
  "colSpan":          12
}

Radio

The JSON format of radio buttons is the same as dropdown boxes.

Example:

{
  "type":             "radio",
  "variable":         "howContact",
  "var_uid":          "759977003561c03dcb8ec08070509219",
  "dataType":         "string",
  "id":               "howContact",
  "name":             "howContact",
  "label":            "How to contact client",
  "defaultValue":     "telephone",
  "hint":             "",
  "required":         false,
  "mode":             "parent",
  "dbConnection":     "workflow",
  "dbConnectionLabel":"PM Database",
  "sql":              "",
  "options": [
    {
      "value":        "telephone",
      "label":        "Telephone"
    },
    {
      "value":        "email",
      "label":        "Email"
    },
    {
      "value":        "visit",
      "label":        "Home Visit"
    }
  ],
  "var_name":         "howContact",
  "colSpan":          12
}

Datetime

Datetimes have a number of special properties to control the formating and the appearance of the date picker.

Example JSONDescription
"format": "YYYY-MM-DD W gg e",The format of the displayed datetime.
"dayViewHeaderFormat":"MMMM YYYY",Format for date at top of date picker.
"stepping": 1,Always set to 1.
"minDate": "2015-11-08",The minimum allowed date in YYYY-MM-DD format which is allowed in the date picker.
"maxDate": "2015-11-24",The maximum allowed date in YYYY-MM-DD format which is allowed in the date picker.
"useCurrent": "month",The initial selection date when the date picker is first shown, which can be:
"true" (the current date and time, which is the default),
"day" (the current day),
"month" (the first day of the current month),
"year" (January 1 of the current year),
"hour" (the current hour if the format includes hours),
"minute" (the current minute if the format includes minutes)
"collapse": true,Always set to true.
"locale": "",Set the datepicker to use a locale, such as "ru" (Russian) or "pt_BR" (Portuguese from Brazil).
"defaultDate": "2015-11-23",A default date for the datetime control in "YYYY-MM-DD" or "YYYY-MM-DD HH:MM:SS" format. If there is no default date, then set to false.
"disabledDates": false,A list of dates not shown in the date picker.
"enabledDates": false,A list of dates which are shown in the date picker.
"icons": { "time": "glyphicon glyphicon-time", "date": "glyphicon glyphicon-calendar", "up": "glyphicon glyphicon-chevron-up", "down": "glyphicon glyphicon-chevron-down", "previous": "glyphicon glyphicon-chevron-left", "next": "glyphicon glyphicon-chevron-right", "today": "glyphicon glyphicon-screenshot", "clear": "glyphicon glyphicon-trash" },The styles for the different elements in the date picker.
"useStrict": false,
"sideBySide": false,Always set to false.
"daysOfWeekDisabled": [],An array of days of the week which are not displayed in the date picker.
"calendarWeeks": false,Always set to false.
"viewMode": "days"The date picker view mode, which can be: "days" (default), "months" or "years".
"toolbarPlacement": "default",The placement of the toolbar in the datepicker, which is always set to "default".
"showTodayButton": false,If set to true, then a button is shown to select today's date.
"showClear": "true", If set to true, then a trashcan icon is shown in the lower-right hand corner of the date picker to clear the date.
"widgetPositioning": { "horizontal": "auto", "vertical": "auto" },The horizontal and vertical position of the date picker, which can be set in pixels.
"keepOpen": false,Set to false if the date picker is automatically closed after selecting a datetime. If true, then the date picker stays open after selecting the date.

Example:

{
  "type":               "datetime",
  "variable":           "contractDue",
  "var_uid":            "538916843561c03edd91e28008570672",
  "dataType":           "datetime",
  "id":                 "contractDue",
  "name":               "contractDue",
  "label":              "Contract Due Date",
  "placeholder":        "",
  "hint":               "Select date when the contract should be finished",
  "required":           true,
  "mode":               "parent",
  "format":             "YYYY-MM-DD",
  "dayViewHeaderFormat":"MMMM YYYY",
  "extraFormats":       false,
  "stepping":           1,
  "minDate":            "2015-11-08",
  "maxDate":            "2015-11-24",
  "useCurrent":         "month",
  "collapse":           true,
  "locale":             "",
  "defaultDate":        "2015-11-23",
  "disabledDates":      false,
  "enabledDates":       false,
  "icons": {
    "time":             "glyphicon glyphicon-time",
    "date":             "glyphicon glyphicon-calendar",
    "up":               "glyphicon glyphicon-chevron-up",
    "down":             "glyphicon glyphicon-chevron-down",
    "previous":         "glyphicon glyphicon-chevron-left",
    "next":             "glyphicon glyphicon-chevron-right",
    "today":            "glyphicon glyphicon-screenshot",
    "clear":            "glyphicon glyphicon-trash"
  },
  "useStrict":          false,
  "sideBySide":         false,
  "daysOfWeekDisabled": [],
  "calendarWeeks":      false,
  "viewMode":           "days",
  "toolbarPlacement":   "default",
  "showTodayButton":    false,
  "showClear":          "true",
  "widgetPositioning": {
    "horizontal":       "auto",
    "vertical":         "auto"
  },
  "widgetParent":       null,
  "keepOpen":           false,
  "var_name":           "contractDue",
  "colSpan":            12
}

Suggest

Suggest boxes are similar to textboxes, but they lack the formula, maxLength, operation, textTransform validate and validateMessage properties.

Example:

{
  "type":             "suggest",
  "variable":         "user",
  "var_uid":          "990461695561c03fa433dc4018122102",
  "dataType":         "string",
  "id":               "user",
  "name":             "user",
  "label":            "Enter User",
  "defaultValue":     "",
  "placeholder":      "",
  "hint":             "",
  "required":         false,
  "mode":             "parent",
  "dbConnection":     "workflow",
  "dbConnectionLabel":"PM Database",
  "sql":              "select USR_USERNAME, CONCAT(USR_FIRSTNAME, ' ', USR_LASTNAME) from USERS;",
  "options":          [],
  "var_name":         "user",
  "colSpan":          12
}

Hidden

The JSON format of hidden fields is simpler than other types of controls since there are no visual elements to configure.

Example:

{
  "type":             "hidden",
  "variable":         "approvedPurchase",
  "var_uid":          "819670620561c06d06bdce5054422350",
  "dataType":         "string",
  "id":               "approvedPurchase",
  "name":             "approvedPurchase",
  "defaultValue":     "",
  "dbConnection":     "workflow",
  "dbConnectionLabel":"PM Database",
  "sql":              "",
  "var_name":         "approvedPurchase",
  "colSpan":          12
}

Title

Example:

{
  "type":   "title",
  "id":     "formTitle",
  "label":  "Client Information",
  "colSpan":12
}

Subtitle

The JSON format of subtitles is the same as titles.

Example:

{
  "type":   "subtitle",
  "id":     "addressSection",
  "label":  "Client Address",
  "colSpan":12
}

Label

The JSON format of labels is the same as titles.

Example:

{
  "type":   "label",
  "id":     "additionalInfo",
  "label":  "Enter the client code found on the last page of the documentation.",
  "colSpan":12
}

Link

Example JSONDescription
"value": "Coyote Trap",The displayed text of the hyperlink.
"href": "http://www.acme.com/widgets/coyoteTrap.html",The URL (address) of the hyperlink.

Example:

{
  "type":   "link",
  "id":     "productLink",
  "name":   "productLink",
  "label":  "Product",
  "value":  "Coyote Trap",
  "href":   "http://www.acme.com/widgets/coyoteTrap.html",
  "hint":   "",
  "colSpan":12
}

Image

The JSON format of images have a number of unique properties related to the source, shape, and the text associated with images.

Example JSONDescription
"src": "http://www.acme.com/trap.gif",
"shape": "thumbnail",The shape of the image, which can be:
"thumbnail" (the image has a border around it, which is the default),
"rounded" (the image has rounded edges),
"circle" (the image is in the shape of a circle)
"alternateText": "Roadrunner Trap",This property currently doesn't work.
"comment": "Improved Trap",Text which is displayed under the image.
"alt": "New Roadrunner Trap",The text in the Title (mouseover) property which is displayed if the image can't be loaded, but it doesn't display by the mouse hovering over the image.

Example:

{
  "type":         "image",
  "id":           "productImage",
  "name":         "productImage",
  "label":        "Product",
  "hint":         "",
  "src":          "http://www.acme.com/widgets/roadrunnerTrap.gif",
  "shape":        "thumbnail",
  "alternateText":"Image of the improved Roadrunner Trap",
  "comment":      "The improved Roadrunner Trap",
  "mode":         "parent",
  "alt":          "See the new Roadrunner Trap",
  "colSpan":      12
}

File

Example JSONDescription
"dnd": false,Set to true to allow files to be uploaded by dragging-and-dropping files onto the file control.
"extensions": ".docx,.doc,.od*",The list of allowed extensions for files which are uploaded to a file control. Multiple options can be separated with commas (,) and asterisks (*) can be used as wild cards to represent any number of characters.
"size": "25",The maximum size of files uploaded to the file control. Set to 0 to allow unlimited file sizes.
"sizeUnity": "MB",The unit used for the maximum file size, which can be "KB" or "MB".
"multiple": false,If set to true, multiple files may be uploaded to a file control.
"inp_doc_uid":"5354113815643a15c72ad74018208129",The 32 hexidecimal character unique ID for the Input Document which will store the file when the DynaForm is submitted. This Input Document is associated with the file control's variable.

Example:

{
  "type":       "file",
  "variable":   "receipt",
  "var_uid":    "903632234561c2ba8b98d63054621185",
  "dataType":   "file",
  "id":         "receipt",
  "name":       "receipt",
  "label":      "Receipt for purchased item",
  "hint":       "Upload a scanned copy of the receipt",
  "required":   true,
  "dnd":        false,
  "extensions": ".docx,.doc,.od*",
  "size":       "25",
  "sizeUnity":  "MB",
  "mode":       "parent",
  "multiple":   false,
  "inp_doc_uid":"5354113815643a15c72ad74018208129",
  "var_name":   "receipt",
  "colSpan":    12
}

Submit

For submit controls, the label is the text which appears in the button.

Example:

{
  "type":   "submit",
  "id":     "submitInfo",
  "name":   "submitInfo",
  "label":  "Submit",
  "colSpan":12
}

Button

The JSON format of generic buttons is that same as submit buttons.

Example:

{
  "type":   "button",
  "id":     "showAddress",
  "name":   "showAddress",
  "label":  "Show Address",
  "colSpan":12
}

Grid

The JSON format of grids includes not only the definition of the grid, but also an array of all the fields inside the grid.

Example JSONDescription
"columns": [ {...}, {...} ]An array of the control objects in the grid. The variable, var_uid and dataType properties of these controls are set to "" (empty string) because controls inside grids cannot be assigned a variable. Instead, their values are stored in the variable for the grid. Otherwise, the properties of controls inside grids are just like normal controls.
"layout": "responsive",The type of layout used by the grid, which can be:
"responsive" (fields automatically adjust to the width of the grid),
"static" (the width of the fields is fixed and a horizontal scroll bar appears if wider than the grid),
"form" (eliminated in version 3.0.1.5 and later)
"pageSize": "5",The number of rows per page in a grid, which is the number of rows to be shown at a time. If set to "0", then pages will not be used and an unlimited number of rows will be shown at a time.
"addRow": true,Set to true if the grid will contain a "+ New" button to add new rows to the grid.
"deleteRow": true,Set to true if grid rows have a button on the right-hand side to delete the row.

Example:

{
  "type":     "grid",
  "variable": "officeSupplies",
  "var_uid":  "60145232056427c02cee508068904897",
  "dataType": "grid",
  "id":       "officeSupplies",
  "name":     "officeSupplies",
  "label":    "Office Supplies",
  "hint":     "",
  "columns": [
    {
      "type":               "datetime",
      "variable":           "",
      "var_uid":            "",
      "dataType":           "",
      "id":                 "dateBought",
      "name":               "dateBought",
      "label":              "Date Bought",
      "placeholder":        "",
      "hint":               "",
      "required":           true,
      "mode":               "edit",
      "format":             "YYYY-MM-DD",
      "dayViewHeaderFormat":"MMMM YYYY",
      "extraFormats":       false,
      "stepping":           1,
      "minDate":            "",
      "maxDate":            "",
      "useCurrent":         "true",
      "collapse":           true,
      "locale":             "",
      "defaultDate":        "",
      "disabledDates":      false,
      "enabledDates":       false,
      "icons": {
        "time":             "glyphicon glyphicon-time",
        "date":             "glyphicon glyphicon-calendar",
        "up":               "glyphicon glyphicon-chevron-up",
        "down":             "glyphicon glyphicon-chevron-down",
        "previous":         "glyphicon glyphicon-chevron-left",
        "next":             "glyphicon glyphicon-chevron-right",
        "today":            "glyphicon glyphicon-screenshot",
        "clear":            "glyphicon glyphicon-trash"
      },
      "useStrict":          false,
      "sideBySide":         false,
      "daysOfWeekDisabled": [],
      "calendarWeeks":      false,
      "viewMode":           "days",
      "toolbarPlacement":   "default",
      "showTodayButton":    false,
      "showClear":          "false",
      "widgetPositioning": {
        "horizontal":       "auto",
        "vertical":         "auto"
      },
      "widgetParent":       null,
      "keepOpen":           false,
      "columnWidth":        "20",
      "width":              100,
      "title":              "Date Bought"
    },
    {
      "type":             "text",
      "variable":         "",
      "var_uid":          "",
      "dataType":         "",
      "id":               "product",
      "name":             "product",
      "label":            "Product",
      "defaultValue":     "",
      "placeholder":      "",
      "hint":             "",
      "required":         false,
      "textTransform":    "none",
      "validate":         "",
      "validateMessage":  "",
      "maxLength":        1000,
      "formula":          "",
      "mode":             "parent",
      "operation":        "",
      "dbConnection":     "workflow",
      "dbConnectionLabel":"PM Database",
      "sql":              "",
      "columnWidth":      "20",
      "width":            100,
      "title":            "Product"
    },
    {
      "type":        "checkbox",
      "variable":    "",
      "var_uid":     "",
      "dataType":    "",
      "id":          "hasReceipt",
      "name":        "hasReceipt",
      "label":       "Has Receipt?",
      "defaultValue":"",
      "hint":        "",
      "required":    false,
      "mode":        "parent",
      "options":     [],
      "columnWidth": "15",
      "width":       100,
      "title":       "Has Receipt?"
    }
  ],
  "data":      [],
  "mode":      "parent",
  "layout":    "responsive",
  "pageSize":  "5",
  "addRow":    true,
  "deleteRow": true,
  "title":     "office Supplies",
  "colSpan":   12
}

Panel

Example JSONDescription
"content": "<div>Information</div>"The HTML code in the panel. Double quotation marks are escaped, hard returns are represented as \n, and greater than and less than signs are represented as HTML entities.
"border": "1px"The width in pixels of the border around the panel. For no border set it to "0".

Example:

{
  "type":    "panel",
  "id":      "confirmationDialog",
  "content": "<div id=\"mydialog\" title=\"Confirm\">\n   <p>Should a new client be added?</p>\n</div>",
  "border":  "1px",
  "colSpan": 12
}

Subform

The JSON code for a subform is the same as the code for a normal form, except that it has the colSpan property to set the width of the subform.

Example:

{
  "type":        "form",
  "gridStore":   false,
  "variable":    "",
  "var_uid":     "",
  "dataType":    "",
  "id":          "437944507565f15d332a548016910309",
  "name":        "details",
  "description": "",
  "mode":        "edit",
  "script":      "",
  "language":    "en",
  "externalLibs":"",
  "items": [
    [  
      {
        "type":             "text",
        "variable":         "productName",
        "var_uid":          "158861394565762e1d755c5078115321",
        "dataType":         "string",
        "id":               "productName",
        "name":             "productName",
        "label":            "Product",
        "defaultValue":     "",
        "placeholder":      "",
        "hint":             "",
        "required":         false,
        "textTransform":    "none",
        "validate":         "",
        "validateMessage":  "",
        "maxLength":        1000,
        "formula":          "",
        "mode":             "parent",
        "operation":        "",
        "dbConnection":     "workflow",
        "dbConnectionLabel":"PM Database",
        "sql":              "",
        "colSpan":          12
      }
    ],
    [
      {
        "type":         "checkbox",
        "variable":     "inStock",
        "var_uid":      "897449820565c7743efdac1004444746",
        "dataType":     "boolean",
        "id":           "inStock",
        "name":         "inStock",
        "label":        "In stock?",
        "defaultValue": "",
        "hint":         "",
        "required":     false,
        "mode":         "parent",
        "options":      [],
        "colSpan":      12
      }
    ]
  ],
  "variables": [
    {
      "var_uid":               "158861394565762e1d755c5078115321",
      "prj_uid":               "5452682595654d6ff324a43034919884",
      "var_name":              "productName",
      "var_field_type":        "string",
      "var_field_size":        10,
      "var_label":             "string",
      "var_dbconnection":      "workflow",
      "var_dbconnection_label":"PM Database",
      "var_sql":               "",
      "var_null":              0,
      "var_default":           "",
      "var_accepted_values":   "[]"
    },
    {
      "var_uid":               "897449820565c7743efdac1004444746",
      "prj_uid":               "5452682595654d6ff324a43034919884",
      "var_name":              "inStock",
      "var_field_type":        "boolean",
      "var_field_size":        10,
      "var_label":             "string",
      "var_dbconnection":      "workflow",
      "var_dbconnection_label":"PM Database",
      "var_sql":               "",
      "var_null":              0,
      "var_default":           "",
      "var_accepted_values":   "[{\"value\":\"1\",\"label\":\"Yes\"},{\"value\":\"0\",\"label\":\"No\"}]"
    }
  ],
  "colSpan":     12
}

Inserting case and system variables

Case and system variables can be inserted in the JSON code in order to generate dynamic content in the DynaForm.

To insert a variable in the JSON code, place @@variable inside double quotation marks in the code. The value of the variable will be inserted in the JSON code when the DynaForm is generated.

Note: Variables can only be inserted inside strings which are enclosed in double quotation marks.

Example:

In a contracting process, a trigger sets the type of organization in the @@organizationType variable, depending on the quantity of the @%amount:

if (@%amount < 500) {
  @@organizationType = "NGO";
}
elseif (@%amount >= 500 and @%amount <= 10000) {
  @@organizationType = "Credit union";
}
elseif (@%amount > 10000) {
  @@organizationType = "International bank";
}

This trigger is set to execute before a DynaForm containing a textbox with the ID "organizationName".

In the JSON code of this DynaForm, the "organizationName" field has the following definition:

{
  "type":      "text",
  "variable":  "organizationName",
  "var_uid":   "158861394565762e1d755c5078115321",
  "dataType":  "string",
  "id":        "organizationName",
  "name":      "organizationName",
  "label":     "Organization name",

To insert the type of organization in the label of the "organizationName" field, change this JSON code to:

{
  "type":      "text",
  "variable":  "organizationName",
  "var_uid":   "158861394565762e1d755c5078115321",
  "dataType":  "string",
  "id":        "organizationName",
  "name":      "organizationName",
  "label":     "@@organizationType name",

Then, open the DynaForm for editing and import the modified JSON file. When a case is run, it will change the label of the "organizationName" field, depending on the quantity of the @%amount variable. For example, if the @%amount is set to 1235 when running a case, then it will display "Credit union name":