Overview
In the Dynaform designer, the main container of the form is represented by the light gray canvas where the rows are added and the design of the Dynaform is built. Forms inside the designer depend on properties that may define the entire behavior of the Dynaform. It is inside forms that JavaScript code and External Libraries can be added inside forms in order to enable extra functionality for the current Dynaform. Also, inside the properties of the form, the "Language" property allows selecting the translations of the form content, after uploading custom /po files to it. This functionality is fully explained at the following page: Dynaform Multi-language Support. Finally, the view mode of the form can affect the way elements will be displayed.
When entering the designer for the first time:
Properties
Click on any light gray space of the Form or Sub Form to view and work on its properties.
| Property | Description |
|---|---|
| Type | form (readonly) |
| ID | Auto generated HTML unique ID (readonly). A string of 32 characters. |
| Name | Name of the form. |
| Mode | [Required] Display mode of the form:
|
| Description | Brief description of what the form is about. |
| JavaScript | Opens the JavaScript editor used to insert JavaScript code in the form. |
| Language | If there are many languages saved for the form, the dropdown will list them and will render the form in the language selected. |
| External Libs | Area where the external libraries can be defined to be used in the execution time. |
| Print Dynaform | Check this option to have the ability to print the Dynaform. This property also adds a printer icon at the top right side of the Dynaform when it is rendered. Available Version: Available from 3.0.1.7 |
Description
This property allows designers to add a brief description of what the Dynaform is about.
JavaScript
This property uses JavaScript code to enhance and give more functionality to the form behavior.
To add JavaScript commands to the form, click on the "edit..." button of the property.
A editor window opens where the JavaScript code must be added. For example, let's add a simple alert when the form is loaded:
Save the code inserted by clicking on "Save" at the lower part of the editor. When the Dynaform opens while running a case, this message is shown:
To view more examples using JavaScript in Dynaforms, the scope of the property and a better explanation of the use of the code, take a look at the explanation below for JavaScript in forms
External Libs
This property allows users to add external library files to the Dynaform to add additional functionalities, content or styles to the Dynaform. This property is useful to add JavaScript or CSS (Cascading Style Sheets) files to the Dynaform, so they can be accessed by HTML code placed in a Panel's content property.
Libraries can be added using their web address, but note that if ProcessMaker works with the HTTPS protocol, the libraries added to this property must work with the HTTPS protocol as well. To know more about the HTTPS protocol recommendation, see Preventing Mixed Content.
To add more than one library file, simply add commas (,) to separate the addresses inside the value of the property
| Warning: The loader.js library from the gstatic site does NOT work as an external library. |
For examples on how to use external library files, see External JavaScript Files and Panel Examples.
Language
This property allows the selection of the language the form will be rendered when running a case. All Dynaforms include the "English" language by default. Nevertheless, if more languages have been uploaded to the Dynaform, this dropdown will list all of them.
For example, a Dynaform created with the "English" language.
Let's change the language by selecting "es"
When rendering the form, the following is shown
To learn how to add translations to Dynaforms, see Dynaform Multi-language Support.
Print Dynaform
Available on: ProcessMaker 3.0.1.7 on
This property enables end users to print the entire content of a Dynaform (using the current field values) when running cases, by adding the 
icon to the top right corner of the form.
To enable this icon, select the form in the Dynaform designer and check the print dynaform option.
When rendering this form (running a case or previewing the design), the icon is shown at the top right corner of the form.
Click on this icon to print the form. All current content in the form will be printed, no matter how extensive the form is. The page header contains the current date at the top left corner, with the "PMDynaform" text in the center. The footer contains the URL address where it was printed from.
Page 1
Page 2
JavaScript in Forms
To learn how to add custom code to Dynaforms, see JavaScript in Dynaforms
Form Functions
Note: TO VIEW CODE EXAMPLES OF EACH OF THE FUNCTIONS OF THE TABLE BELOW, SEE http://wiki.processmaker.com/3.0/JavaScript_Functions_and_Methods.
| Functions | Description |
|---|---|
$("#formid").setOnChange(functionName) |
Define a function that is executed when any of the fields in the Dynaform change. The function has the following format: functionName(fieldID, newValue, oldValue){ } |
$("#formid").submitForm() |
Submit the Dynaform and moves to the next step |
$("#formid").saveForm() |
Save the values entered into a Dynaform to the ProcessMaker database without closing the Dynaform |
