Overview

Note: In ProcessMaker version 3.0.1, this control changed its name from "Annotation" to "Label".

This control adds comment-like fields which contain any text inside.

A comment in the Dynaform Designer looks as follows:

While previewing a Dynaform or running a case, a cooment looks as follows:

Label Properties

After adding a label to the design, set the text which represents its content. The properties of this control are the following:

Property Description
Type label (readonly)
ID Control unique identifier (set by default as label000000000X where X represents the numbering of the label controls added in the design) which can be changed
Name Control name (set by default as label000000000X where X represents the numbering of the label controls added in the design) which can be changed
Text Content of the label

Note: Follow the link of the properties to learn how to work with each one of them. Also, from version 3.0.1.5 the "name" property has been removed.

Text

The text set in this textarea field will be the content of the comment.

Label Control Example

For this example drag and drop a "label" control into de Dynaform canvas.

Click on any empty space within the control to display its properties on the left side panel.

The "id" property is set by default, but it can be used with Javascript code to add additional functionality to the control. For example, click on the grey border on the Dynaform to display the properties of the Dynaform on the left side panel. Click on the "edit" button on the "javascript" property. This will open a JavaScript editor.

Once in the editor, add the following code to return a specific value:

jQuery('#label0000000001').setLabel('www.google.com');

Notice that, as result of this code, the text of the label has been modified to 'www.google.com'.

The final property in this control is the "text" property which will become its content. For example, try adding text similar to a "Terms and Conditions" policy. Also, a checkbox can be added so the user can click on it if she/he agrees with the conditions read in the "label" control.

JavaScript in Labels

To learn how to manipulate DynaForm controls using JavaScript, see JavaScript in DynaForms.

Label controls in ProcessMaker 3 have the following field components:

  • Label: The text in the label, which is displayed to the user.
  • Value: The same as the label.
  • Text: The same as the label.

JavaScript Methods

Some of the JavaScript methods to manipulate label controls include:

Method Description
jQuery("#fieldID").getValue() Returns the text of the label.
jQuery("#fieldID").getText() Returns the text of the label.
jQuery("#fieldID").getLabel() Returns the text of the label.
jQuery("#fieldID").setValue("newValue") Sets the text of the label.

To see code examples for these methods, see JavaScript Functions and Methods.

Note: If needing to include HTML code in the label, then search for a <p> inside the label's div with the "pmdynaform-control-label" class and set the contents of the <span> inside with the html() function. For example, this JavaScript code sets large, red text inside a label with the ID "mylabel":
$("#mylabel").find("p.pmdynaform-control-label").find("span").html("<big><font color=red>Warning:</font> Use at your own risk.</big>");