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:

  • edit: the control is enabled for editing when it is rendered.
  • view: the control can only be viewed when it is rendered. The content can’t be edited.
  • disabled: the control is displayed as disabled. The control is displayed in gray in order to indicate the disabled mode. The content can't be edited either.
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:

alert("Hello User!");

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 adding external library files to the DynaForm in order to add extra functionality, content or styles to the DynaForm. This property is especially useful if needing 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. 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)

used to 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() Submits the DynaForm and moves to the next step
$("#formid").saveForm() Saves the values entered into a DynaForm to the ProcessMaker database without closing the DynaForm