Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Understand how to use controls to design your Screens.
Add a control that has BootstrapVue Component library support.
ProcessMaker Platform supports adding BootstrapVue components in Forms. Use BootstrapVue to display responsive, mobile-first, and ARIA-accessible forms projects on the Web.
This control is only available for Form-type Screens. See Screen Types.
Watch the following product tours to learn how to use a Bootstrap Component control.
Follow these steps to add this control to the Screen:
Configure the Bootstrap Component control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
The Image control has the following panels that contain settings:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Use these rules to describe how to validate your Screen controls.
Use validation rules in a control to constitute what is a valid value entered for that control.
If a control that has a Validation Rules setting but does not contain any value or properly structured validation rule, that control automatically passes validation.
If a control is hidden using Visibility Rules, any Validation Rules associated with that control are not evaluated upon submission of the Screen.
The following Screen Builder controls use the validation rules:
Line Input control
Textarea control
Select List control
Checkbox control
Date Picker control
Follow these steps to add a validation rule to a Screen Builder control that provides validation:
Access the Variable panel for the control while in Design mode, and then locate the Validation Rules setting.
Select the rule that this control validates against.
Click Save. Parameters for the selected rule display. Parameter settings display which ones are required to properly configure the rule.
Enter the parameter settings that this control uses to validate against. See Validation Rule Settings, and then locate the validation rule for its parameters.
If you want a validation to fail for undefined or ''
, use the required rule.
Use the Accepted
validation rule to validate acknowledgement of this control. This is useful to validate "Terms of Service" acceptance.
Follow these steps to configure the parameter(s) for an Accepted
validation rule:
From the Select drop-down menu in the Validation Rules setting, select Accepted. The Accepted
validation rule has no parameters.
Use the After Date
validation rule to validate that the value entered into this control must be after (later than) a specified date. If the entered value is in datetime format, then the time format is ignored.
The value entered into this control must be in one of the following formats:
Date format: YYYY-MM-DD
. Example: "2020-07-01"
Datetime format: YYYY-MM-DD HH:MM:SS
. Example: "2020-07-01 14:25:15"
Follow these steps to configure the parameter(s) for an After Date
validation rule:
In the Date setting, enter the date in date format that this control's value must be after (later than). This is a required setting.
Use the After or Equal to Date
validation rule to validate that the value entered into this control must be the same or after (later than) a specified date. If the entered value is in datetime format, then the time format is ignored.
The value entered into this control must be in one of the following formats:
Date format: YYYY-MM-DD
. Example: "2020-07-01"
Datetime format: YYYY-MM-DD HH:MM:SS
. Example: "2020-07-01 14:25:15"
Follow these steps to configure the parameter(s) for an After or Equal to Date
validation rule:
In the Date setting, enter the date in date format that this control's value must be the same or after (later than). This is a required setting.
Use the Alpha
validation rule to validate that the value entered into this control must be contain only alphabetic characters.
Follow these steps to configure the parameter(s) for an Alpha
validation rule:
From the Select drop-down menu in the Validation Rules setting, select Alpha. The Alpha
validation rule has no parameters.
Use the Alpha-Numeric
validation rule to validate that the value entered into this control must contain only alphanumeric characters.
Follow these steps to configure the parameter(s) for an Alpha-Numeric
validation rule:
From the Select drop-down menu in the Validation Rules setting, select Alpha-Numeric. The Alpha-Numeric
validation rule has no parameters.
Use the Before Date
validation rule to validate that the value entered into this control must be before (earlier than) a specified date. If the entered value is in datetime format, then the time format is ignored.
The value entered into this control must be in one of the following formats:
Date format: YYYY-MM-DD
. Example: "2020-07-01"
Datetime format: YYYY-MM-DD HH:MM:SS
. Example: "2020-07-01 14:25:15"
Follow these steps to configure the parameter(s) for a Before Date
validation rule:
In the Date setting, enter the date in date format that this control's value must be before (earlier than). This is a required setting.
Use the Before or Equal to Date
validation rule to validate that the value entered into this control must be the same or before (earlier than) a specified date. If the entered value is in datetime format, then the time format is ignored.
The value entered into this control must be in one of the following formats:
Date format: YYYY-MM-DD
. Example: "2020-07-01"
Datetime format: YYYY-MM-DD HH:MM:SS
. Example: "2020-07-01 14:25:15"
Follow these steps to configure the parameter(s) for a Before or Equal to Date
validation rule:
In the Date setting, enter the date in date format that this control's value must be the same or before (earlier than). This is a required setting.
Use the Between Min & Max
validation rule to validate that the numerical value that this control contains is between the specified minimum value and a maximum value.
The Between Min & Max
validation rule evaluates the following:
integers
file sizes
The Between Min & Max
validation rule does not evaluate the number of characters in a text, but only the value of an entered number. Use one or both of the following to validate the number of characters in a text:
Furthermore, the Between Min & Max
validation rule does not evaluate calendar dates, such as when an entered value in that control is between two dates. Use any of the following to validate date-related values:
Follow these steps to configure the parameter(s) for a Between Min & Max
validation rule:
In the Min parameter setting, enter the numeric value that this control's value must be equal to or no lower than. This is a required setting.
In the Max parameter setting, enter the numeric value that this control's value must be equal to or no greater than. This is a required setting.
Use the Date
validation rule to validate that the value entered into this control is in date or datetime format.
One of the following formats validates that the entered value is a date:
Date format: YYYY-MM-DD
. Example: "2020-07-01"
Datetime format: YYYY-MM-DD HH:MM:SS
. Example: "2020-07-01 14:25:15"
Follow these steps to configure the parameter(s) for an Date
validation rule:
From the Select drop-down menu in the Validation Rules setting, select Date. The Date
validation rule has no parameters.
Use the Email
validation rule to validate that the value entered into this control is formatted as an email address.
Follow these steps to configure the parameter(s) for an Email
validation rule:
From the Select drop-down menu in the Validation Rules setting, select Email. The EMail
validation rule has no parameters.
Use the In
validation rule to validate that the value entered into this control exactly matches the given parameter setting. The validation rule evaluates the entire value entered in the control and considers case-sensitivity and empty spaces. The control's scope of evaluation may be within an array or a string. See In
Validation Rule Examples.
Follow these steps to configure the parameter(s) for an In
validation rule:
In the Values parameter setting, enter the value to evaluate if it exactly matches the control's selected or entered value. This is a required setting.
Format a list in the Values parameter setting by separating the values with commas only, no spaces:
value1,value2,value3
In
Validation Rule ExamplesThe following JSON Request data represents the JSON array for a Select List control under evaluation.
The Select List control contains the following settings:
This control is configured to return the value of the property name
. Therefore, the doctors' names display as options in the Select List control.
This control has an In
validation rule to evaluate if Mindy Smith
is included in that control's selection.
If the Request participant selects the Mindy Smith option from that Select List control, then that control passes validation.
A Line Input control under evaluation has the following validation rule:
The validation rule is evaluated as follows:
Use the Max Length
validation rule to validate that the value entered into this control is no greater than a specified length.
The Max Length
validation rule evaluates the following:
a maximum number of characters in a string
a maximum integer value
a maximum file size
The Max Length
validation rule does not evaluate calendar dates, such as when an entered value in that control is no later than a particular date.
Follow these steps to configure the parameter(s) for a Max Length
validation rule:
In the Max Input parameter setting, enter the numeric value that this control's value must be equal to or no greater than. This is a required setting.
Use the Min Length
validation rule to validate that the value entered into this control is no less than a specified length.
The Min Length
validation rule evaluates the following:
a minimum number of characters in a string
a minimum integer value
a maximum file size
The Min Length
validation rule does not evaluate calendar dates, such as when an entered value in that control is no earlier than a particular date.
Follow these steps to configure the parameter(s) for a Min Length
validation rule:
In the Min Input parameter setting, enter the numeric value that this control's value must be equal to or no less than. This is a required setting.
Use the Not In
validation rule to validate that the value entered into this control does not match the given parameter setting. The validation rule evaluates the entire value entered in the control and considers case-sensitivity and empty spaces. The control's scope of evaluation may be within an array or a string. See Not In
Validation Rule Examples.
Follow these steps to configure the parameter(s) for a Not In
validation rule:
In the Values parameter setting, enter the value to evaluate if it is not within the control's selected or entered value. This is a required setting.
Format a list in the Values parameter setting by separating the values with commas only, no spaces:
value1,value2,value3
Not In
Validation Rule ExamplesThe following JSON Request data represents the JSON array for a Select List control under evaluation.
The Select List control contains the following settings:
This control is configured to return the value of the property name
. Therefore, the doctors' names display as options in the Select List control.
This control is configured to allow multiple selections.
This control has a Not In
validation rule to evaluate if Mindy Smith
is not included in that control's selection.
If the Request participant selects multiple options from that Select List control, but the Mindy Smith option is not among them, then that control passes validation.
A Line Input control under evaluation has the following Validation Rule:
The Validation Rule is evaluated as follows:
Use the Regex
validation rule to validate that this control's value contains content as determined by a specified regular expression. A regular expression, abbreviated as regex, is a sequence of letters and symbols that defines a logical search pattern from which to search this control's content to validate that strings meet the defined pattern. This validation rule is useful to parse the contents of a control's value even if that control's Request variable contains programming code such as HTML or JSON.
Follow these steps to configure the parameter(s) for a Regex
validation rule:
In the Regex Pattern setting, enter the regular expression from which to validate this control's value contains that content. This is a required setting.
Use the Required
validation rule to validate that this control has a value and is not empty.
A control constitutes as having no value in the following circumstances:
The value is null
.
The value is an empty string that contains no characters.
The value is an empty JSON array or empty JSON object.
The value is an uploaded file with no path.
Follow these steps to configure the parameter(s) for a Required
validation rule:
From the Select drop-down menu in the Validation Rules setting, select Required. The Required
validation rule has no parameters.
Use the Required If
validation rule to validate that this control has a value and is not empty if another control in that Screen page contains a specific value. If the control being monitored contains a specific value, then the control under evaluation is required. See Required If
Validation Rule Examples.
The Required If
validation rule is the inverse of the Required Unless
rule.
A control constitutes as having no value in the following circumstances:
The value is null
.
The value is an empty string that contains no characters.
The value is an empty JSON array or empty JSON object.
The value is an uploaded file with no path.
Follow these steps to configure the parameter(s) for a Required If
validation rule:
In the Variable Name parameter setting, enter the Variable Name setting value to monitor for its value. This is a required setting.
In the Variable Value parameter setting, enter the value that must be entered into that control to make this control required. This is a required setting.
Required If
Validation Rule ExamplesA Request participant enters information into a Task for a job application. If that Task assignee selects from a Select List control in which country that person lives. If the Task assignee selects the option United States (US), then another Select List control becomes required to select from which US state that person lives.
This example demonstrates depending controls: one control depends on another to be required. This example also demonstrates how a control depends on the specific value of another.
See the following .json
files below for this example:
List of countries in JSON format: Countries for Select List Control "Required If" Validation Example
List of US states and territories in JSON format: US States for Select List Control "Required If" Validation Example
Follow these steps to implement this example:
Add a Select List control to your Screen, and then configure its settings. Make note of its Variable Name setting value you set for that control. This control displays the list of countries as its options.
Provide the options for this Select List control. In doing so, edit options as JSON:
Download the file below Countries for Select List Control "Required If" Validation Example.
Review the JSON data. Notice that each JSON object contains the following:
content: A property called content
represents the label for each option (in this example, a country name). The label for each Select List option may contain any string as long as it is in the content
property of each JSON object.
value: A property called value
that contains a numeric value that corresponds with each label option. The value
property may contain any string as long as it is in the value
property of each JSON object. Notice that the JSON object that contains the content
property value of United States
has a value property of 232
. In this example, if the option corresponding with the 232
value is selected, then the second Select List control is required.
Copy this file's JSON data.
Paste it into the JSON Data setting.
Add a second Select List control to the same Screen page, and then configure its settings. This control displays the list of US states and territories as its options, and represents the required control if a specific setting in the first Select List control contains a specific value.
Provide the options for this Select List control. In doing so, edit options as JSON:
Download the file below US States for Select List Control "Required If" Validation Example.
Copy this file's JSON data.
Paste it into the JSON Data setting.
Add a Required If
validation rule to the second Select List control that displays the list of US states and territories.
In the Variable Name setting of the Required If
validation rule, enter the Variable Name setting value for the first Select List control that displays the list of countries as its options.
In the Variable Value setting of the Required If
validation rule, enter 232
, which is the value
property value that corresponds with the content
property value United States
.
Add a Submit Button control to the same Screen page, and then configure its settings.
A Request participant enters information into a Task for a job application. If that Task assignee selects the Yes option from a Select List control labeled Have you been convicted of a felony within the past 10 years?, a Textarea control labeled Describe your felony conviction. becomes required. The Task assignee cannot submit the form without describing the felony conviction(s).
This example demonstrates depending controls: one control depends on another to be required. This example also demonstrates how a control depends on the specific value of another.
Follow these steps to implement this example:
Add a Select List control to your Screen, and then configure its settings. Make note of its Variable Name setting value you set for that control.
Provide the options for this Select List control. In doing so, provide the following values:
No:
Value: 0
Content: No, I do not have a felony conviction within the past 10 years.
Yes:
Value: 1
Content: Yes, I have a felony conviction within the past 10 years.
The Value settings represent the values the Textarea control evaluates to determine if that control is required; these settings may contain any value, not necessarily Boolean values. The Content settings represent the label for each option. In this example, if the option corresponding with the 1
value is selected, then the Textarea control is required.
Add a Textarea control to the same Screen page, and then configure its settings.
Add a Required If
validation rule to the Textarea control.
In the Variable Name setting of the Required If
validation rule, enter the Variable Name setting value for the Select List control.
In the Variable Value setting of the Required If
validation rule, enter 1
.
Add a Submit Button control to the same Screen page, and then configure its settings.
Use the Required Unless
validation rule to validate that this control has a value and is not empty unless another control in that Screen page contains a specific value. If the control being monitored for its value has a specific value, then the control under evaluation is not required. See Required Unless Validation Rule Examples.
The Required Unless
validation rule is the inverse of the Required If
rule.
A control constitutes as having no value in the following circumstances:
The value is null
.
The value is an empty string that contains no characters.
The value is an empty JSON array or empty JSON object.
The value is an uploaded file with no path.
Follow these steps to configure the parameter(s) for a Required Unless
validation rule:
In the Variable Name parameter setting, enter the Variable Name setting value to monitor for its value. This is a required setting.
In the Variable Value parameter setting, enter the value that must be entered into that control to exempt this control from being required. This is a required setting.
Required Unless
Validation Rule ExamplesA Request participant enters information for a Task regarding United States (US) federal taxes. If that Task assignee selects from a Select List control that person lives in California, then that person is exempt from a federal tax credit. If the Task assignee selects the option California, then a Line Input control becomes required to enter tax information. If any other option is selected, then the Line Input control is not required.
This example demonstrates depending controls: one control depends on another to be required. This example also demonstrates how a control depends on the specific value of another.
See the following .json
file below for this example: US States for Select List Control "Required Unless" Validation Example.
Follow these steps to implement this example:
Add a Select List control to your Screen, and then configure its settings. Make note of its Variable Name setting value you set for that control. This control displays the list of US states and territories as its options.
Provide the options for this Select List control. In doing so, edit options as JSON:
Download the file below US States for Select List Control "Required Unless" Validation Example.
Review the JSON data. Notice that each JSON object contains the following:
content: A property called content
represents the label for each option (in this example, a US state or territory). The label for each Select List option may contain any string as long as it is in the content
property of each JSON object.
value: A property called value
that contains a numeric value that corresponds with each label option. The value
property may contain any string as long as it is in the value
property of each JSON object. Notice that the JSON object that contains the content
property value of California
has a value property of 6
. In this example, if the option corresponding with the 6
value is selected, then the Line Input control is not required.
Copy this file's JSON data.
Paste it into the JSON Data setting.
Add a Line Input control to the same Screen page, and then configure its settings. The Request participant enters into this control required information unless a specific setting in the Select List control contains a specific value.
Add a Required Unless
validation rule to the Line Input control control.
In the Variable Name setting of the Required Unless
validation rule, enter the Variable Name setting value for the Select List control that displays the list of US states and territories as its options.
In the Variable Value setting of the Required Unless
validation rule, enter 6
, which is the value
property value that corresponds with the content
property value California
.
Add a Submit Button control to the same Screen page, and then configure its settings.
A Request participant enters information for a Task that solicits viewer feedback for a streaming video. The organization soliciting viewer feedback is particularly interested in viewer feedback for a particular demographic: if that viewer indicates that she or he is in a specific age group, then that person does is not required to provide feedback on a particular question.
If that Task assignee selects from a Select List control the option 65 years old or older, then a Textarea control is not required. If any other option is selected, then the Textarea control is required.
This example demonstrates depending controls: one control depends on another to be required. This example also demonstrates how a control depends on the specific value of another.
Follow these steps to implement this example:
Add a Select List control to your Screen, and then configure its settings. Make note of its Variable Name setting value you set for that control.
Provide the options for this Select List control. In doing so, provide the following values that represent demographic age groups:
Option 1:
Value: 1
Content: 18 years old or younger
Option 2:
Value: 2
Content: 19 to 35 years old
Option 3:
Value: 3
Content: 36 to 64 years old
Option 4:
Value: 4
Content: 65 years old or older
The Value settings represent the values the Textarea control evaluates to determine if that control is required; these settings may contain any value, not necessarily Boolean values. The Content settings represent the label for each option. In this example, if the option corresponding with the 4
value is selected, then the Textarea control is not required.
Add a Textarea control to the same Screen page, and then configure its settings.
Add a Required Unless
validation rule to the Textarea control.
In the Variable Name setting of the Required Unless
validation rule, enter the Variable Name setting value for the Select List control.
In the Variable Value setting of the Required Unless
validation rule, enter 4
.
Add a Submit Button control to the same Screen page, and then configure its settings.
Use the Same
validation rule to validate that the value entered into this control matches the value of a specified control.
Follow these steps to configure the parameter(s) for a Same
validation rule:
In the Variable Name parameter setting, enter the Variable Name setting value to evaluate if the control under evaluation matches its value. This is a required setting.
Use the URL
validation rule to validate that the value entered into this control is formatted as a Uniform Resource Locator (URL).
Follow these steps to configure the parameter(s) for a URL
validation rule:
From the Select drop-down menu in the Validation Rules setting, select URL. The URL
validation rule has no parameters.
Add a control that has Bootstrap Wrapper support.
Bootstrap wrapper controls enable users to group multiple controls into a single, collapsible container, which helps save space on a form. This feature is particularly useful for organizing complex forms, improving readability, and enhancing user experience by allowing sections of the form to be expanded or collapsed as needed.
This control is only available for Form-type Screens. See Screen Types.
Watch the following product tour to learn how to use a Bootstrap Wrapper control.
Follow these steps to add this control to the Screen:
Configure the Bootstrap Wrapper control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
The Image control has the following panels that contain settings:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a control from which the Request participant can select or deselect an option.
The Checkbox control adds a checkbox from which the Request participant can select or deselect an option. Multiple Checkbox controls can be grouped together to function as one set of options whereby separate Checkbox controls with the same name maintain the same selected or deselected state.
Watch the following product tour to learn how to use a Checkbox control.
The following screen includes a Checkbox control, allowing users to select the option to work from home.
The Checkbox control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Design panel from the Properties Panel on the right to configure the following properties:
For instance, the checkbox field Working from home? has a success text color, a primary background hue, and a toggle design.
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a control that has Google Captcha support.
The Captcha control is used to distinguish between human users and automated bots. Use this control to confirm that the human is filling out the form and prevent spam, fraud, and other malicious activities.
Watch the following product tour to learn how to use a Captcha control.
Follow these steps to add this control to a Screen:
The following screen uses a Captcha control to verify that the new hire is human.
The Captcha control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
From the Controls Menu on the left, expand the Advanced category, and then locate the Bootstrap Component icon .
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this Screen and contains at least one letter. This is a required setting.
Edit the default label that displays for this control if necessary. New Bootstrap Component is the default value.
Enter the validation rule(s) the Request participant must comply with to properly enter a valid value into this control. This setting has no default value. If there are no configured validation rules the following message displays: No validation rule(s). See Validation Rules for "Validation" Control Settings.
Click the Add Rule button. The Select drop-down menu displays.
Click the Edit iconfor the validation rule to edit if that rule can be edited. Validation rules that do not have parameters cannot be edited. The parameter settings for that validation rule displays.
Click the Delete iconfor the validation rule to delete. A message displays to confirm deletion of the validation rule.
Select to indicate that this control is required. This option is not selected by default. This is a quick way to add the Required validation rule.
In the Screen preview or during a Request if you submit the Screen without selecting this required Bootstrap Component control, this control displays Field is required in red-colored text.
The Form Tags setting is selected by default.
In the Config setting, enter component BootstrapVue properties in JSON format.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Click the Add Rule button. The Select drop-down menu displays.
From the Select drop-down menu in the Validation Rules setting, select After Date. The Date setting displays.
From the Select drop-down menu in the Validation Rules setting, select After or Equal to Date. The Date setting displays.
From the Select drop-down menu in the Validation Rules setting, select Before Date. The Date setting displays.
From the Select drop-down menu in the Validation Rules setting, select Before or Equal to Date. The Date setting displays.
From the Select drop-down menu in the Validation Rules setting, select Between Min & Max. The Min and Max parameter settings display.
From the Select drop-down menu in the Validation Rules setting, select In. The Values parameter setting displays.
Entered Value | Validation Rule Evaluation |
---|---|
From the Select drop-down menu in the Validation Rules setting, select Max Length. The Max Input parameter setting displays.
From the Select drop-down menu in the Validation Rules setting, select Min Length. The Min Input parameter setting displays.
From the Select drop-down menu in the Validation Rules setting, select Not In. The Values parameter setting displays.
Entered Value | Validation Rule evaluation |
---|---|
From the Select drop-down menu in the Validation Rules setting, select Regex. The Regex Pattern setting displays.
From the Select drop-down menu in the Validation Rules setting, select Required If. The Variable Name and Variable Value parameter settings display.
From the Select drop-down menu in the Validation Rules setting, select Required Unless. The Variable Name and Variable Value parameter settings display.
From the Select drop-down menu in the Validation Rules setting, select Same. The Values parameter setting displays.
From the Controls Menu on the left, expand the Advanced category, and then locate the Bootstrap Wrapper icon .
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this Screen and contains at least one letter. This is a required setting.
Edit the default label that displays for this control if necessary. New Bootstrap Wrapper is the default value.
The Modal setting is selected by default.
In the page setting, select a page created in the same Screen to use in the component selected previously.
In the Config setting, enter component BootstrapVue properties in JSON format.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
This control is only available for Form-type Screens. See .
See of using a check box control in a screen.
See the permissions or ask your Administrator for assistance.
Follow these steps to add this control to a :
or
From the Controls Menu on the left, expand the Fields category, and then locate the Checkbox control .
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Configure the Checkbox control. See .
Validate that the control is configured correctly. See .
The Variable Name setting is used to reference control data during Requests. Ensure that the Variable Name setting value is a unique name in this and contains at least one letter. This is a required setting.
The Checkbox control is selected: The key's value is true.
Reference this control's value in a different Screen Builder control. To do so, use and reference this control's Variable Name value in the target control. Example: {{ CheckboxControl }}
.
Reference this value in .
See when editing a Request variable name.
The Label property displays on the top of the control in the screen. Use it to explain the purpose of the control.
Enter the validation rule(s) the Request participant must comply with to properly enter a valid value into this control. This setting has no default value. If there are no configured validation rules the following message displays: No validation rule(s). See for details on how to use validation rules.
Click the Add Rule button.
Enter the parameter settings that this control uses to validate against. See , and then locate the validation rule for its parameters.
Access the while in Design mode, and then locate the Validation Rules setting.
Click the Edit icon for the validation rule to edit if that rule can be edited. Validation rules that do not have parameters cannot be edited. The parameter settings for that validation rule displays.
Edit the parameter settings that this control uses to validate against. See , and then locate the validation rule for its parameters.
Access the while in Design mode, and then locate the Validation Rules setting.
Click the Delete iconfor the validation rule to delete. A message displays to confirm deletion of the validation rule.
Select to indicate that this control is required. This option is not selected by default. This is a quick way to add the validation rule.
If you submit the Screen without selecting this required Checkbox, this control displays Field is required in red-colored text.
Select to indicate that this control is selected by default such that its value is true
. This option is not selected by default.
Select to indicate that this control cannot be edited. This option is not selected by default.
Enter text that provides additional guidance on this control's use. This setting has no default value.
For example, if you enter Approve total investment, the checkbox displays as follows:
Select the text color that displays for this control. Click the Clear Color Selection option to remove the selected color.
Select the background color that displays for this control. Click the Clear Color Selection option to remove the selected color.
Select to display a toggle key control instead of a checkbox control for each checkbox option. See a .
Specify an expression that indicates the condition(s) under which this control displays. See . If this setting does not have an expression, then this control displays by default.
For example, this control displays if the variable value tip is 1. For a detailed example of the Visibility Rule setting, see .
.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Then, use this name in the feature to apply CSS styling to this control as follows:
The Aria Label setting value replaces the value. For example, if a control has both a Label setting value and an Aria Label setting value, assistive technology only uses the Aria Label setting value.
.
Enter the number for the sequential keyboard navigation order that this control takes focus amongst other controls on this Screen.
This control is only available for Form-type Screens. See .
See the permissions or ask your Administrator for assistance.
or
From the Controls Menu on the left, expand the Advanced category, and then locate the Captcha control .
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Configure the Captcha control. See .
Validate that the control is configured correctly. See .
The Variable Name setting is used to reference control data during Requests. Ensure that the Variable Name setting value is a unique name in this and contains at least one letter. This is a required setting.
Reference this control's value in a different Screen Builder control. To do so, use and reference this control's Variable Name value in the target control. Example: {{ captcha }}
.
Reference this value in .
See when editing a Request variable name.
Select to indicate that this control is required. This option is selected by default.
In the Google reCaptcha Sitekey setting, enter an available Google site key. For more information on how to get a site key, see .
An example of a site key is 6Ld9r3opAAAAACkK_pLxthCAmr-Hqkhj2DJFSLly
.
The Captcha control displays an error if the site key is invalid.
Specify an expression that indicates the condition(s) under which this control displays. See . If this setting does not have an expression, then this control displays by default.
For example, this control displays if the variable value tip is 1. For a detailed example of the Visibility Rule setting, see .
.
Both: The control will be displayed on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter a value representing this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Then, use this name in the feature to apply CSS styling to this control as follows:
NA
True
North America
True
NA,North America
False
This is North America
False
Niagara Falls, NA
False
NA
False
North America
False
NA,North America
True
This is North America
True
Niagara Falls, NA
True
Add a control from which the Request participant can download files to a local computer.
The File Download control adds an area in the Screen from which the Request participant can download a file to a local computer that was attached to the Request via a File Upload control in a different Screen in that Request.
This control is only available for the following Screen types:
Display type
Form type
See Screen Types.
Watch the following product tour to learn how to use a File Download control.
For a documented example of using the File Download control, see Preview or Download Multiple Files Uploaded from a Previous Task.
Follow these steps to add this control to the Screen:
Configure the File Download control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
The following screen uses a File Download control where you can download details of a license purchase.
The File Download control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Preview a file that has been uploaded from a previous Task via a File Upload control in that Request.
The File Preview control allows the Request participant to configure a file preview that has been previously uploaded to that Request via a File Upload control. After adding the control in the Screen to where to display the file preview, configure the Name setting value for the File Upload control from which to preview the file it uploaded to that Request.
This control is only available for the following Screen types:
Display type
Form type
See Screen Types.
For a documented example of using the File Preview control, see Preview or Download Multiple Files Uploaded from a Previous Task.
Follow these steps to add this control to the Screen:
Configure the File Preview control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
When used in a published process, the File Preview control will display the file configured in its settings.
The File Preview controls supports the following file formats:
Text Documents (TXT, RTF)
Audio Files (MP3, AAC, M4A, WAV, AIFF, AIF)
Archive Files (ZIP, TAR, GZ, CAB, BZ2, TAR.GZ, TAR.BZ2)
Code Files (PHP, JS, JSON, SH, HTML, CSS)
Spreadsheet Files (XLS, XLSX, ODS)
Image Files (GIF, JPG, JPEG, PNG, SVG, TIFF, RAW, PSD)
PDF Documents (PDF, ODF, PS, EPS)
Presentation Files (PPT, PPTX, ODP)
Video Files (MP4, MOV, MPEG, WEBM, MPG, MP2, OGG, AVI, WMV, MKV)
Word Documents (DOC, DOCX, ODT)
The File Preview control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a Date Picker control that allows the Request participant to select dates from a Screen through an interactive calendar.
The Date Picker control allows the Request participant to select a date from a pop-up calendar. After the user selects a date from the control, the calendar hides and the control shows the selected date.
Configure the Date Picker control to accept one of the following data types:
Datetime: The control accepts a datetime, which includes both date and time components: YYYY-MM-DD HH:MM:SS
. Example: "2020-07-01 14:25:15"
Date: The control accepts a date: YYYY-MM-DD
. Example: "2020-07-01"
The display format of the Date Picker control is determined by the Date Format settings in a user's profile.
This control is only available for Form-type Screens. See Screen Types.
Watch the following product tours to learn how to use a Date Picker control.
To display the current date in a form, enter the following JavaScript code in the Default Value setting of the Date Picker control. Otherwise, add the code in a Calculated Property as shown in the demo.
The Date Picker control can also be used to validate datetime format such as for Vocabularies.
Follow these steps to add this control to the Screen:
Configure the Date Picker control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
The following screen uses a Date Picker control to select leave dates.
The Date Picker control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Design panel from the Properties Panel on the right to configure the following properties:
For instance, the date picker field Date has a red text color, and a yellow background hue.
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a control to which the Request participant can upload a file from a local computer.
When a file is uploaded to a Screen during an in-progress Request, then submitted, that file can be downloaded from the Files tab in that Request's summary. The file remains available from that Request's summary regardless of that Request's status.
The File Upload control is not available in Preview mode.
Watch the following product tour to learn how to use a File Download control.
The following screen uses a File Upload control where you can upload invoice documents.
The File Upload control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a control that displays an image.
The Image control has the following functionality:
The Image control displays a specified image that is GIF, JPG, or PNG file types.
This control is only available for the following Screen types:
Display type
Form type
Watch the following product tour to learn how to use a Image control.
Follow these steps to add this control to the Screen:
Below is an Image control used in the top bar and configured in three columns.
The Image control has the following configurable settings in the Properties Panel:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a control from which the Request participant can auto-complete an entered address, location, or business.
Start entering an address, location, or business name into a Screen control, then allow the Google API to auto-complete that address or location. The Google Place control stores the selected address in the Request data as well as all the returned data from the Google API.
View and/or select from one or more geographical locations in a Google map.
Below are a few ways to use the Google Places control:
Follow these steps to add this control to the Screen:
The following screen uses a Google Places control where you can enter the work location for an employee offer.
The Google Places control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Review the Google's JSON API response often as Google revises it often and without notice.
Add a control that displays the logged on user's Tasks, Requests, or Requests that can be started.
Below is a List Table control displaying My Tasks.
The List Table control has the following configurable settings in the Properties Panel:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a Loop control that contains multiple controls that loop multiple times to allow entering multiple items, each of which requires multiple pieces of information.
For example, use a Loop control when a university registrar's office must enter the following information for each new university student enrolling to the university:
Do not place another Loop control inside the first Loop control.
_parent
JSON Key to Reference Request Data from Controls in a Loop ControlThe Loop control uses a unique JSON key available to any control placed within the Loop control to reference Request data. Controls that are placed into a Loop control for duplication are within a container and may only access another control's data that is in the same Loop control. Use the _parent
JSON key in a control's settings placed within a Loop control to reference Request data outside of that Loop control.
Consider the following examples:
This control is only available for the following Screen types:
Display type
Form type
Watch the following product tour to learn how to use a Loop control.
Drag and place the Screen control(s) into the Loop control that you intend the Request participant to enter information each time the Loop control repeats. As a best practice, do not do the following:
Do not place another Loop control inside the first Loop control.
Below is a Loop control containing two controls, repeating twice.
The Loop control has the following configurable settings in the Properties Panel:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a control that displays a text field that allows the Request participant to enter plain text or a password.
The Line Input control is a text field that the Request participant can use to enter information. The Line Input control can be configured to accept the following data types:
Text: The control only accepts alphanumeric characters.
Integer: The control only accepts integers.
Currency: The control only accepts a currency value.
Percentage: The control only accepts a percentage value.
Decimal: The control only accepts any number, both positive and negative.
Datetime: The control only accepts a datetime, which is includes both date and time components.
Date: The control only accepts a date.
Password: The control accepts a password. Entered text is hidden.
This control is only available for the following Screen types:
Conversational type
Form type
Watch the following product tour to learn how to use a Line Input control.
Below is form with the Line Input controls for Title, Start Date, Salary, and Work Location.
The Line Input control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a Nested Screen control into which select a separate Screen that is in your ProcessMaker Platform instance.
The Screen containing the Nested Screen control is the parent Screen. The Screen that is nested is the child Screen.
A nested Screen has the following attributes that vary from how it may have been designed:
CSS takes precedent: Any CSS designed in Custom CSS mode in the parent Screen takes precedent over any CSS designed in the child (nested) Screens. The Request participant experiences one design experience without a variety of design styles.
Two Screens cannot reference each other indefinitely: A child Screen that has already displayed within a parent Screen cannot display again in the same Request. This prevents an infinite loop whereby two Screens using Nested Screen controls reference each other indefinitely.
Only Display- and Form-type Screens may be selected for nesting into a Nested Screen control.
Screen designers can easily build a Screen by placing modular components into one Screen. For example, in a Screen designed for a purchase request, use Nested Screen controls as placeholders for the following components that are designed in separate Screens. Each of these Screens are nested into its own Nested Screen control.
Nested Screen control for Screen 1: Personal information
Nested Screen control for Screen 2: Payment information
Nested Screen control for Screen 3: Billing information
Nested Screen control for Screen 4: Shipping information
Watch the following product tour to learn how to use a Nested Screen control.
Below is a Nested Screen in the Leave Approval section.
The Nested Screen control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
From the Controls Menu on the left, expand the Files category, and then locate the File Download icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Edit the default label that displays for this control if necessary. New File Download is the default value.
Enter the name of the download file. This setting has no default value.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
The Aria Label setting value replaces the Label setting value. For example, if a control has both a Label setting value and an Aria Label setting value, assistive technology only uses the Aria Label setting value.
Enter the number for the sequential keyboard navigation order that this control takes focus amongst other controls in this Screen.
From the Controls Menu on the left, expand the Files category, and then locate the File Preview icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this Screen and contains at least one letter. This is a required setting.
Enter the Name setting value for the File Upload control from which to preview its file that was previously uploaded to this Request. Do not use mustache syntax when entering the File Upload control's Name setting. This setting has no default value.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Use the Date Picker control for Request participants to select a date or datetime through a user interface.
From the Controls Menu on the left, expand the Input Fields category, and then locate the Date Picker icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this Screen and contains at least one letter. This is a required setting.
Reference this control by its Variable Name setting's value. The Data Preview panel in Preview mode corresponds with the Date Picker control's entered datetime with that Date Picker control's Variable Name value. In the example below, DatePickerControl
is the Variable Name setting's value.
Edit the default label that displays for this control if necessary. New Date Picker is the default value.
Datetime: The control accepts both date and time inputs. For example, select the date in your form and then choose the time.
This is a required setting.
Enter the validation rule(s) the Request participant must comply with to properly enter a valid value into this control. This setting has no default value. If there are no configured validation rules the following message displays: No validation rule(s). See Validation Rules for "Validation" Control Settings.
Click the Add Rule button. The Select drop-down menu displays.
Click the Edit icon for the validation rule to edit if that rule can be edited. Validation rules that do not have parameters cannot be edited. The parameter settings for that validation rule displays.
Click the Delete icon for the validation rule to delete. A message displays to confirm deletion of the validation rule.
Select to indicate that this control is required. This option is not selected by default. This is a quick way to add the Required validation rule.
In the Screen preview or during a Request, the control displays with a red-colored asterisk. If you submit the Screen without selecting this required Checkbox, this control displays Field is required in red-colored text.
Select to indicate that this control cannot be edited. This option is not selected by default.
Enter the Minimum Date to specify the earliest date available for selection from the pop-up calendar. Supported formats include ISO8601 or mustache syntax.
Enter the Maximum Date to specify the latest date available for selection from the pop-up calendar. Supported formats include ISO8601 or mustache syntax.
Enter placeholder text to display in this control when no value has been provided. This setting has no default value.
Enter text that provides additional guidance on this control's use. This setting has no default value.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Enter the default value as text or use a Request variable in mustache syntax.
Enter the default value as JavaScript, especially if a Calculated Property might change this default value setting. Ensure to use the this.
JavaScript keyword preceding the Screen control reference. Example: this.date
when date
is the Variable Name setting value for the control to set its default value.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
The Aria Label setting value replaces the Label setting value. For example, if a control has both a Label setting value and an Aria Label setting value, assistive technology only uses the Aria Label setting value.
Enter the number for the sequential keyboard navigation order that this control takes focus amongst other controls in this Screen.
The File Upload control adds an area in the to which the Request participant can upload one or more files from a local computer or accessible network location. The Request participant can drag and place the file(s) on the control or select a button from which to locate the file(s) for upload. The uploaded file(s) can be referenced in a later step in a Request.
If the is selected for a File Upload control, the Screen user may upload multiple files. After uploading multiple files, any uploaded file may be removed from the File Upload control by clicking the Remove iconfor that file prior to submitting that Screen.
This control is only available for Form-type Screens. See .
Need a solution to upload multiple files to a Screen that limits the number of files that maybe uploaded to a File Upload control? See how to use a control to .
See the permissions or ask your Administrator for assistance.
Follow these steps to add this control to the :
or
From the Controls Menu on the left, expand the Files category, and then locate the File Upload icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Configure the File Upload control. See .
Validate that the control is configured correctly. See .
Enter the name of the uploaded file.
Edit the default label that displays for this control if necessary. New File Upload is the default value.
Select the Required setting to require a file be uploaded before the Screen can be submitted. This setting is not selected by default.
Enter the file type(s) this control accepts to upload by referencing its .
Specify an expression that indicates the condition(s) under which this control displays. See . If this setting does not have an expression, then this control displays by default.
For example, this control displays if the variable value tip is 1. For a detailed example of the Visibility Rule setting, see .
.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Then, use this name in the feature to apply CSS styling to this control as follows:
The Aria Label setting value replaces the value. For example, if a control has both a Label setting value and an Aria Label setting value, assistive technology only uses the Aria Label setting value.
.
Enter the number for the sequential keyboard navigation order that this control takes focus amongst other controls in this Screen.
The image control may reference another control's setting to display its value, such as to display the signature saved in a control. The Signature control saves the signature as a PNG image.
See .
See the permissions or ask your Administrator for assistance.
or
From the Controls Menu on the left, expand the Content Fields category and then locate the Image icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Configure the Image control. See .
Validate that the control is configured correctly. See .
Enter the alphanumeric name that identifies the image in this .
Preview the uploaded image.
Select the Render image from a variable name setting to render as an image the content of another control by referencing that control's Variable Name setting value. For example, render an image of a signature from the control.
Do not use this setting to display a file referenced from a control.
After selecting the Render image from a variable name setting, the Variable Name setting displays.
In the Variable Name setting, enter the name setting value of the content to display as an image in the Image control. This Request variable must contain the content of the image. For example, to display a digital signature entered into a control with a Variable Name setting of SignDocument
, enter SignDocument
. If the Signature control has been signed, that digital signature displays in the Image control when it displays.
Enter text that provides additional guidance on this control's use. This setting has no default value.
Enter the height of the uploaded image in pixels. If the setting has no value, the Image control adjusts the uploaded image to the Height setting value.
Enter the width of the uploaded image in pixels. If the setting has no value, the Image control adjusts the uploaded image to the Width setting value.
Specify an expression that indicates the condition(s) under which this control displays. See . If this setting does not have an expression, then this control displays by default.
For example, this control displays if the variable value tip is 1. For a detailed example of the Visibility Rule setting, see .
.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Then, use this name in the feature to apply CSS styling to this control as follows:
Use the Google Places to allow Request participants to do the following in Form-type :
This control is only available for Form-type Screens. See .
Allow Request participants to easily enter a shipping or billing address.
Enter a business name into the Google Places control to select a business location.
Enter well-known monuments or international airport names to get their addresses or locations when requesting to travel.
See the permissions or ask your Administrator for assistance.
or
From the Controls Menu on the left, expand the Advanced category, and then locate the Google Places icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Configure the Google Places control. See .
Validate that the control is configured correctly. See .
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this and contains at least one letter. This is a required setting.
Reference this control by its Variable Name setting's value. The Data Preview panel in Preview mode corresponds the Google Places control's textual content with that Google Places control's Variable Name value. In the example below, google_places_1
is the Variable Name setting's value.
Reference this control's value in a different Screen Builder control. To do so, use and reference this control's Variable Name value in the target control. Example: {{ google_places_1 }}
. See .
Reference this value in .
See when editing a Request variable name.
Edit the default label that displays for this control if necessary. New Google Places is the default value.
Enter the validation rule(s) the Request participant must comply with to properly enter a valid value into this control. This setting has no default value. If there are no configured validation rules the following message displays: No validation rule(s). See .
Access the while in Design mode, and then locate the Validation Rules setting.
Click the Add Rule button. The Select drop-down menu displays.
Enter the parameter settings that this control uses to validate against. See , and then locate the validation rule for its parameters.
Access the while in Design mode, and then locate the Validation Rules setting.
Click the Edit iconfor the validation rule to edit if that rule can be edited. Validation rules that do not have parameters cannot be edited. The parameter settings for that validation rule displays.
Edit the parameter settings that this control uses to validate against. See , and then locate the validation rule for its parameters.
Access the while in Design mode, and then locate the Validation Rules setting.
Click the Delete iconfor the validation rule to delete. A message displays to confirm deletion of the validation rule.
Enter the placeholder text that displays in this control when no value has been provided. This setting has no default value.
Enter text that provides additional guidance on this control's use. This setting has no default value.
Select to enable Google Maps in this Screen. This setting is disabled by default.
Hide the address bar that displays above the map to enter an address to display in the map. This setting is disabled by default to display the address bar. Note that this setting is not available unless the is selected.
Allow the Request participant to select a location in the map. When this setting is disabled, the is available to enter the geo-location by longitude and latitude to center the map view. The Enable Geolocate setting is disabled by default. Note that the Enable Geolocate setting is not available unless the is selected.
Displays the zoom controls in the lower-right of the map view used to zoom into and out of the map view. This setting is disabled by default to hide the zoom controls. Note that this setting is not available unless the is selected.
Displays the Map or Satellite options in the upper-left of the map view used to toggle between viewing the map or the satellite image of the viewing area. This setting is disabled by default to display the Map options. Note that this setting is not available unless the is selected.
Displays the control in the upper-right of the map view to toggle full screen mode. This setting is disabled by default to hide this control. Note that this setting is not available unless the is selected.
Displays the Street View Pegman control to view the street view of the displayed map area. This setting is disabled by default to hide this control. Note that this setting is not available unless the is selected.
Displays the center geographical location of the map view by longitude and latitude coordinates. The default longitude and latitude coordinates are -93
by 39
. Note that this setting is not available unless the is selected and the is not selected.
Sets the initial map zoom level that ranges from 0 (no zoom) to 19 (maximum zoom). The default zoom setting is 3
. Note that this setting is not available unless the is selected.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Specify an expression that indicates the condition(s) under which this control displays. See . If this setting does not have an expression, then this control displays by default.
For example, this control displays if the variable value tip is 1. For a detailed example of the Visibility Rule setting, see .
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Then, use this name in the feature to apply CSS styling to this control as follows:
The Google Places control receives its source data from the Google API response after the Request participant selects an address or location. The Google Places control stores the in the Request data. See the to determine how to use JSON key name values in the response for Request data.
Follow these guidelines to reference key names and/or from Google's returned data object in other controls.
Reference the following JSON key name for the entire selected address or location that includes the entire value in the Google Places control as indicated in :
variable_name
represents the value for the Google Places control being referenced.
If a control references this Google Places control's entire selected address, use the following syntax in the Rich Text control's content using :
Reference the following JSON key name for the main text for the selected address or location as indicated in :
variable_name
represents the value for the Google Places control being referenced.
If a control references this Google Places control's main text for the selected address, use the following syntax in the Rich Text control's content using :
Reference the following JSON key name for the secondary text for the selected address or location as indicated in :
variable_name
represents the value for the Google Places control being referenced.
If a control references this Google Places control's secondary text for the selected address, use the following syntax in the Rich Text control's content using :
Reference the following JSON array for the for the selected address or location as indicated in :
variable_name
represents the value for the Google Places control being referenced.
If a control references this Google Places control's secondary text for the selected address, use the following syntax in the Rich Text control's content using :
The List Table control displays the logged on user's Tasks, Requests, or Requests that can be started. Use this control to easily design a custom .
This control is only available for the Display-type Screen. See .
See the permissions or ask your Administrator for assistance.
Follow these steps to add this control to the :
or
From the Controls Menu on the left, expand the Files category, and then locate the List Table icon in the panel to the left of the Screen Builder canvas.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Configure the List Table control. See .
Validate that the control is configured correctly. See .
One List Table control may display one list. Note that this control should not be used on an anonymous Web Entry Task.
Specify an expression that indicates the condition(s) under which this control displays. See . If this setting does not have an expression, then this control displays by default.
For example, this control displays if the variable value tip is 1. For a detailed example of the Visibility Rule setting, see .
.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Then, use this name in the feature to apply CSS styling to this control as follows:
Use the Loop control to contain one or more controls to duplicate the contained set of controls a specified number of times, thereby minimizing the design work to duplicate that set of controls in a Screen. Use the Loop control when the Request participant must enter multiple instances of the same set of information, each of which contain multiple components.
During the in-progress Request, the Loop control displays the set of controls contained in the Loop control a specified number of times so that the university registrar's office may enter the same information for each new student from one Screen page. The control to submit the Screen must be placed outside of the Loop control. Otherwise, a Submit Button control displays in each set of controls placed into the Loop control.
The _parent
JSON key only applies to controls placed into a Loop control or control.
A Line Input control placed within a Loop control requires a default value to display from another Line Input control used during that Request of which its Variable Name setting is Line_Input_Data
. From the Line Input control placed within the Loop control, enter the following into the : {{ _parent.Line_Input_Data }}
.
A Select List control placed within a Loop control requires its options to display from another Select List control's options used during that Request of which its Variable Name setting is Select_List_Options
. While configuring the Select List control placed within the Loop control to , enter the following into the Options Variable setting: _parent.Select_List_Options
.
See .
For a documented example of using the Loop control, see .
See the permissions or ask your Administrator for assistance.
Follow these steps to add this control to the :
or
From the Controls Menu on the left, expand the Content Fields category, and then locate the Loop icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Configure the Loop control. See .
Do not place a control inside the Loop control.
See for an example.
Configure each control placed into the Loop control. If a control placed into the Loop control requires to use Request data, use the parent
JSON key. See .
Validate that the control is configured correctly. See .
Make note of when configuring a Loop control that contains a Select List control. If the Select List control references a from a data source, configure the Select List control to reference the containing the JSON array and not its values. Then duplicate the JSON array in the Loop control. See .
Select the New Array of Objects option from the Data Source setting to place Screen controls into the Loop control while in Design mode.
When this option is selected, the displays to indicate how many times to repeat the control(s) that the Loop control contains. See a .
Select the Existing Array option from the Data Source setting to reference a JSON array from the Request data that the Loop control contains.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this and contains at least one letter. This is a required setting.
Reference this control by its Variable Name setting's value. The Data Preview panel in Preview mode corresponds with the Loop control's Variable Name value. In the example below, LoopControl
is the Variable Name setting's value.
Reference this control's value in a different Screen Builder control. To do so, use and reference this control's Variable Name value in the target control. Example: {{ LoopControl }}
.
Reference this value in .
See when editing a Request variable name.
Enter the number of times to repeat the control(s) that the Loop control contains. 3 is the default value.
Select to allow additional loops during in-progress Requests if necessary.
If this setting is selected, then the Add Loop icondisplays below the looped container of controls that allows the Request participant to add a new loop for the Task. See a .
Specify an expression that indicates the condition(s) under which this control displays. See . If this setting does not have an expression, then this control displays by default.
For example, this control displays if the variable value tip is 1. For a detailed example of the Visibility Rule setting, see .
.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Then, use this name in the feature to apply CSS styling to this control as follows:
As a best practice when a validates the JSON in a Screen for a datetime value, use a control instead of a Line Input control.
See .
See the permissions or ask your Administrator for assistance.
Follow these steps to add this control to the :
or
From the Controls Menu on the left, expand the Input Fields category, and then locate the Line Input icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Configure the Line Input control. See .
Validate that the control is configured correctly. See .
See the permissions or ask your Administrator for assistance.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this and contains at least one letter. This is a required setting.
Reference this control by its Variable Name setting's value. The Data Preview panel in Preview mode corresponds the Line Input control's textual content with that Line Input control's Variable Name value. In the example below, form_input_1
is the Variable Name setting's value.
Reference this control's value in a different Screen Builder control. To do so, use and reference this control's Variable Name value in the target control. Example: {{ form_input_1 }}
.
Reference this value in .
See when editing a Request variable name.
Edit the default label that displays for this control if necessary. New Input is the default value.
Ensure that all Line Input controls implemented in a Conversational-type Screen contain Label setting values. See .
Enter the validation rule(s) the Request participant must comply with to properly enter a valid value into this control. This setting has no default value. If there are no configured validation rules the following message displays: No validation rule(s). See .
Click the Add Rule button. The Select drop-down menu displays.
Enter the parameter settings that this control uses to validate against. See , and then locate the validation rule for its parameters.
Click the Edit iconfor the validation rule to edit if that rule can be edited. Validation rules that do not have parameters cannot be edited. The parameter settings for that validation rule displays.
Edit the parameter settings that this control uses to validate against. See , and then locate the validation rule for its parameters.
Click the Delete iconfor the validation rule to delete. A message displays to confirm deletion of the validation rule.
Select to indicate that this control is required. This option is not selected by default. This is a quick way to add the validation rule.
In the Screen preview or during a Request, the control displays with a red-colored asterisk. If you submit the Screen without selecting this required Checkbox, this control displays Field is required in red-colored text.
Select to indicate that this control cannot be edited. This option is not selected by default.
Enter the placeholder text that displays in this control when no value has been provided. This setting has no default value.
Enter text that provides additional guidance on this control's use. This setting has no default value.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Enter the default value this control displays. The default value can be assigned as a Request variable, text or JavaScript. When the Screen submits, the Request uses this control's default value unless the Request participant changes it. When using a in the Default Value setting, consider the following:
The Default Value setting supports using Request variables in . For example, if the Default Value setting is {{ FirstName }} {{ LastName }}
from which a Request participant entered her first name and last name in separate controls (respectively) earlier in that Request, this control displays the contents of those controls by default during the Request.
Enter the default value as text or use a Request variable in mustache syntax.
Enter the default value as JavaScript, especially if a Calculated Property might change this default value setting. Ensure to use the this. JavaScript keyword preceding the Screen control reference. Example: this.FullName when FullName is the Variable Value setting value for the control to set its default value. Numbers as a string are concatenated. To set the expected number result as the default value using JavaScript, enter return 0; instead of 0.
Specify an expression that indicates the condition(s) under which this control displays. See . If this setting does not have an expression, then this control displays by default.
For example, this control displays if the variable value tip is 1. For a detailed example of the Visibility Rule setting, see .
.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter a mask pattern to require a custom input format. If this setting does not have a mask pattern, then this control adds plain text without formatting.
Set the Social Security Number (SSN) using the mask pattern ###-##-####
. Then, the Line Input control only allows numeric values with that pattern.
Set a US phone number using the mask pattern +1 (###) ###-####
. Then, the Line Input control only allows numeric values preceding the US telephone code by default.
Set a car license plate that complies with the format for a specific US state, such as AAA ###
. Then, the Line Input control only allows upper case alphabetic characters followed by numeric values.
The panel displays the entered text without the mask patterns.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Then, use this name in the feature to apply CSS styling to this control as follows:
The Aria Label setting value replaces the Label setting value. For example, if a control has both a Label setting value and an Aria Label setting value, assistive technology only uses the Aria Label setting value.
.
Enter the number for the sequential keyboard navigation order that this control takes focus amongst other controls in this Screen.
Use the Nested Screen control to nest a separate into that control. In doing so, the separate Screen embeds into the Nested Screen control. The Nested Screen control is a placeholder for the embedded Screen such that the Request participant experiences the nested Screen as designed. When the Task loads the Screen using a Nested Screen control, the Nested Screen loads the latest version of the referenced Screen.
During an in-progress Requests, both Request and data pass to a child Screen when it displays within the parent Screen. Furthermore, information that is entered into a child Screen displays in Request summaries that use the parent Screen.
Submit Button control in nested Screens is hidden: During in-progress Requests, the control is hidden in child Screens so that the Request participant uses the parent Screen's Submit Button control to submit the Task.
This control is only available for Form-type Screens. See .
See the permissions or ask your Administrator for assistance.
Follow these steps to add this control to the :
or
From the Controls Menu on the left, expand the Content Fields category, and then locate the Nested Screen icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Configure the Nested Screen control. See .
Validate that the control is configured correctly. See .
Select which Screen to nest into this control. The nested Screen becomes the child Screen to the parent Screen that uses the Nested Screen control. Any Screen type may be selected for nesting into a Nested Screen control. However, only Form- and Display-type Screens preview in either Design or Preview modes.
After selecting a screen, you can open it to in another window.
Specify an expression that indicates the condition(s) under which this control displays. See . If this setting does not have an expression, then this control displays by default.
For example, this control displays if the variable value tip is 1. For a detailed example of the Visibility Rule setting, see .
.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Then, use this name in the feature to apply CSS styling to this control as follows:
Information | Screen Control |
First Name |
Last Name | Line Input control |
Age | Line Input control |
Sex |
Housing Dormitory | Select List control |
Add a Page Navigation control from which the Request participant can go to another page in a multi-page Screen.
The Page Navigation control adds a button from which the Request participant can go to another page in a multi-page Screen. See a design example.
This control is only available for Form-type Screens. See Screen Types.
Watch the following product tour to learn how to use a Page Navigation control.
For a documented example of using this control, see Page Navigation Control to Design a Multi-Page Screen.
Follow these steps to add this control to the Screen:
Configure the Page Navigation control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Page Navigation control using the "Secondary" Variant option.
For a documented example of using this control, see Page Navigation Control to Design a Multi-Page Screen.
The Page Navigation control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a control that captures a photo or video from the Screen user.
The Photo/Video control has the following functionality:
Designing the control: While designing the Screen as a Process Designer, select whether a selected Photo/Video control is used to capture a photo or video when the Screen user interacts with that control. Optionally select a custom overlay that displays over the real-time capture area.
Using the control: Based on how the Process Designer configured that Photo/Video control, the Screen user may capture one photo or video directly from a laptop camera or mobile device. While doing so, an overlay image can display over the control to guide the Screen user to frame what the control captures. That user may evaluate in real-time with the control overlay whether the capture is appropriate and adequate quality. For example, the overlay can help frame taking a photograph of oneself or a national ID card to submit for an application process.
Send the captured video or photo to ProcessMaker IDP: After the photo or video is captured, send it to a ProcessMaker IDP folder for processing using a specified document type. Note that prior to the Screen user capturing a photo or video, ensure to configure which ProcessMaker IDP folder(s) the captured photo or video may be sent after capture. You may need to ask your ProcessMaker IDP Administrator for assistance.
This control is only available for Form-type Screens. See Screen Types.
Watch the following product tour to learn how to use a Photo/Video control.
Follow these steps to add this control to the Screen:
Configure the Photo/Video control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Photo/Video control.
The Image control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a control from which the Request participant can insert several values in a list.
The Record List control functions differently in Form- and Display-type Screens:
This control is available for the following Screen types:
Display type
Email type
Form type
See Screen Types.
In the Form-type Screen, the Record List control records a record list. The record list is composed of multiple records, of which the Request participant enters data components for each record. The controls used to record each record's data components are designed in a second page of the same Screen containing the Record List control. The page that records the data components of each record cannot be on the same page as the Record List control.
When configuring the Record List control, specify how the record list displays information after the control has recorded each record for the list:
Column Headers: Specify each column header that represents the data components for each record. For example, label a column header First Name
to indicate that this data component displays each person's first name for each record in the list.
Values: For each specified column header, reference the Variable Name setting value for the control on the second page that receives a data component for each record corresponding with each column header. For example, use a Line Input control with a Variable Name setting value of LineInputFirstName
to receive each person's first name for each record in the list, and then associate that LineInputFirstName
value with the First Name
column.
After configuring the columns for the record list, sort the order in which they are to display in the record list.
Alternatively, use JSON format to configure the columns and their corresponding Variable Name setting values in their respective order to display in the Record List control.
Optionally, values can be edited after the Request participant initially enters the record(s) in the record list. However, after the Request participant submits the Screen, the record list cannot be changed.
Expect a similar experience as a Request participant when using a properly configured Record List control during a Request as follows:
Enter information for each data component for the record.
Click the OK button and ignore the Submit control.
Submit the Screen to save the record list in the Request. After the Task is submitted, the record list cannot be changed.
In the Display-type Screen, the Record List control displays a record list previously entered into a Form-type Screen in a previous Task of that Request.
When configuring the Record List control, specify how the record list displays information in the Display-type Screen:
Column Headers: Specify each column header that represents the data components for each record in the list. For example, if the record list had recorded first names, then label a column header First Name
.
Values: For each specified column header, reference the Variable Name setting value for the control that corresponds with that specified column header's record data component. To do so, open the Screen that contains the Record List control that recorded the list, then locate the control that corresponds with the specified column header's record data component. For example, if a Line Input control with a Variable Name setting value of LineInputFirstName
is used to record each person's first name for each record in the list, associate that LineInputFirstName
with the specified First Name
column header.
Repeat this procedure for each column header and its corresponding control that received a record data component for the record list. Make note of each control's Variable Name setting value, as you must provide this same value when configuring each column header in the record list.
After configuring the column headers for the record list, sort the order in which they are to display in the record list.
Alternatively, use JSON format to configure the column headers and their corresponding Variable Name setting values in their respective order to display in the Record List control.
After opening a Task or Manual Task with a Display-type Screen using a Record List control, the record list displays each record as entered in a Form-type Screen in a previous Task of that Request.
_parent
JSON Key to Reference Request Data from Controls in a Record List ControlThe Record List control uses a unique JSON key available to any control placed into the secondary page from which the Record List control references its values so that those controls can reference Request data. Controls that are placed into that secondary page function within a container and may only access another control's data that is in the same secondary page. Use the _parent
JSON key in a control's settings placed into the secondary page to reference Request data outside of that Record List control.
The _parent
JSON key only applies to controls placed into a Record List control or Loop control.
Consider the following examples:
A Line Input control placed into the secondary page requires a default value to display from another Line Input control used during that Request of which its Variable Name setting is Line_Input_Data
. From the Line Input control placed into the secondary page, enter the following into the Default Value setting: {{ _parent.Line_Input_Data }}
.
A Select List control placed within the secondary page requires its options to display from another Select List control's options used during that Request of which its Variable Name setting is Select_List_Options
. While configuring the Select List control placed into the secondary page to use Request data as its data source, enter the following into the Options Variable setting: {{ _parent.Select_List_Options }}
.
Follow these steps to add this control to the Screen:
Do one of the following depending on whether you are using the Record List control on a Form- or Display-type Screen:
Form-type Screen:
Create a new page in this Screen. Use this page to design how the Request participant enters data that the Record List control records. The page that records the submitted records cannot be on the same page as the Record List control. See Add a New Page to a Screen.
On the new page, design the form using controls from which the Request participant enters the data component that the Record List control receives for each record. In each of the controls that receive a data component for each record, make note of the Variable Name setting values for each control; these values correspond with how the Record List control displays the record list in the Value parameter for each column. Do not place a Submit Button control on the new page; otherwise, the Task cannot be submitted during a Request.
Configure each of the controls placed on the new page. If a control placed into this page requires to use Request data, use the parent
JSON key. See Use the parent
JSON Key to Reference Request Data from Controls in a Loop Control.
Return to the page that the Record List control is placed, and then configure the Record List control. See Settings. Ensure to add a Submit Button or Page Navigation control on the page containing the Record List control so that the Task can be submitted after all records have been added to the record list during a Request.
Display-type Screen:
Configure the Record List control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Consider the following example how to use a Record List control in a Form-type Screen. Configure a Record List control to record the following data components about registrars for a conference. The table below shows how the Record List control displays the record list. Configuring each column and the Variable Name setting value for each control that records the data component that displays in that column is the same for both Form- and Display-type Screens.
On a second page in the same Screen, use Screen controls for Request participants to enter data components for each record. Ensure the following:
The Record List control references the specified controls on the second page. The controls that receive the record data components cannot be on the same page as the Record List control.
In each of the controls that receives a data component for each record, make note of the Variable Name setting values for each control; these values correspond with how the Record List control displays the record list in the Value parameter for each column. This setting is in the Columns panel. See Settings.
The following table outlines how to configure the Column Header and Value settings for each column in the Record List control for this example.
The following image shows the Column Header and Value setting values in the Record List control to reference the Line Input control with the Variable Name setting value of firstname
.
The following image shows the column configuration for the Record List control. See Settings for the Record List control setting descriptions.
Below is the secondary page in Preview mode for each conference attendee to enter a record.
The Record List control has the following configurable settings in the Properties Panel for Form-type Screens:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Columns panel from the Properties Panel on the right.
See the following procedures how to configure the column header(s) that display the record list data and from which control(s) on the additional page in this Screen to reference data components of each record for this control.
Follow these steps to add a column to this control:
Ensure that the Edit as Options List option displays. If the Edit as JSON option displays, click the Edit as Option List option.
In the Column Header setting, enter the column header label that displays in the record list. This column header represents a data component for each record in the record list.
In the Value setting, enter the Variable Name setting value for the control on the second page of this Screen that receives a data component for each record that corresponds with this column header. For example, use a Line Input control with a Variable Name setting value of LineInputFirstName
to receive each person's first name for each record in the list, and then associate that LineInputFirstName
value with a column header labeled First Name
.
Follow these steps to add a column to this control:
Ensure that the Column list label displays. If the JSON Data option displays, click the Edit as Option List option.
In the Column Header setting, edit the column header label that displays in the record list as necessary. This column header represents a data component for each record in the record list.
In the Value setting, edit the Variable Name setting value for the control on the second page of this Screen that receives a data component for each record that corresponds with this column header as necessary. For example, use a Line Input control with a Variable Name setting value of LineInputFirstName
to receive each person's first name for each record in the list, and then associate that LineInputFirstName
value with a column header labeled First Name
.
Click Update. The edited column displays below the Column list label.
Follow these steps to delete a column from in this control:
Ensure that the Column list label displays. If the JSON Data option displays, click the Edit as Option List option.
Click Delete.
Follow these steps to sort the order of the columns that display in this control:
Ensure that the Column list label displays. If the JSON Data option displays, click the Edit as Option List option.
Follow these steps to add a column to this control using a JSON schema:
The JSON Data setting displays. If a valid JSON schema has been configured previously, the JSON Data setting displays the JSON. Otherwise the setting is empty.
Enter your control columns in the order they are to display in this control using JSON format. Use the scroll panel to the right of the JSON to scroll to different sections of the JSON if necessary. This is useful especially when you are editing a long JSON.
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
The Record List control has the following configurable settings in the Properties Panel for Display-type Screens:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Follow these steps before configuring columns in this Record List control:
Save setting configurations in this Record List control if necessary.
While in Design mode, open the Screen that contains the Record List control that recorded the list.
Locate each control that corresponds with each specified column header. Each of these controls received a record data component when the record list was recorded in a Request. Make note of each control's Variable Name setting value, as you must provide this same value when configuring each column header in this Record List control.
Expand the Columns panel from the Properties Panel on the right.
See the following procedures how to configure the column header(s) that display the record list data and from which control(s) on the additional page in this Screen to reference data components of each record for this control.
Follow these steps to add a column to this control:
Ensure that the Column list label displays. If the JSON Data option displays, click the Edit as Option List option.
In the Column Header setting, enter the column header label that displays in the record list. This column header represents a data component for each record in the record list.
In the Value setting, enter the Variable Name setting value for the control on the second page of this Screen that receives a data component for each record that corresponds with this column header. For example, use a Line Input control with a Variable Name setting value of LineInputFirstName
to receive each person's first name for each record in the list, and then associate that LineInputFirstName
value with a column header labeled First Name
.
Follow these steps to add a column to this control:
Ensure that the Column list label displays. If the JSON Data option displays, click the Edit as Option List option.
In the Column Header setting, edit the column header label that displays in the record list as necessary. This column header represents a data component for each record in the record list.
In the Value setting, edit the Variable Name setting value for the control on the second page of this Screen that receives a data component for each record that corresponds with this column header as necessary. For example, use a Line Input control with a Variable Name setting value of LineInputFirstName
to receive each person's first name for each record in the list, and then associate that LineInputFirstName
value with a column header labeled First Name
.
Click Update. The edited column displays below the Column list label.
Follow these steps to delete a column from in this control:
Ensure that the Column list label displays. If the JSON Data option displays, click the Edit as Option List option.
Click Delete.
Follow these steps to sort the order of the columns that display in this control:
Ensure that the Column list label displays. If the JSON Data option displays, click the Edit as Option List option.
Follow these steps to add a column to this control using a JSON schema:
The JSON Data setting displays. If a valid JSON schema has been configured previously, the JSON Data setting displays the JSON. Otherwise the setting is empty.
Enter your control columns in the order they are to display in this control using JSON format. Use the scroll panel to the right of the JSON to scroll to different sections of the JSON if necessary. This is useful especially when you are editing a long JSON.
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a control that displays HTML-formatted text.
The Rich Text control displays HTML-formatted text and images. Use the What-You-See-Is-What-You-Get (WYSIWYG) editor to display a variety of text styles for the Request participant. Reference an image to display in the Rich Text control using HTML syntax. See a design example.
Aside from rich text styles and images, the Rich Text control can display the following information regarding in-progress Requests:
Request data: Display the value of another control in the same or different Screen by referencing that control's Variable Value setting value using mustache syntax: encapsulate the Variable Name setting value between {{
and }}
that represent mustache syntax. In doing so, you are referencing Request data. Spaces surrounding the Request data reference are allowed. During the Request, the Rich Text control references the Request data to locate that control's value to display it in the Rich Text control.
Include your own HTML syntax in the Rich Text control along with Request data references. Example: Full Name: <p>{{ FullName }}</p>
Magic Variable values: Display the value of a Magic Variable by referencing the Magic Variable using mustache syntax. Example: {{ _user.fullname }}
. Spaces surrounding the Magic Variable reference are allowed.
This control is available for all type of Screens. See Screen Types.
Watch the following product tour to learn how to use a Rich Text control.
For documented examples of using this control, see:
Follow these steps to add this control to the Screen:
Configure the Rich Text control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Rich Text control where you are emebeding a map.
The Rich Text control has the following configurable settings in the Properties Panel:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a control that displays a Saved Search chart.
The Saved Search Chart control embeds a chart from a Saved Search into a Screen. The Saved Search chart visualizes the latest Saved Search result data at the time the Screen displays. The Saved Search chart is interactive as if it were in the Charts tab of its Saved Search. By embedding a Saved Search chart into a Screen widens that chart's viewability to more stakeholders or even individuals who are not users in your organization by allowing anonymous users access ProcessMaker via the Web Entry.
Use the Saved Search Chart control to visualize Saved Search results directly within Screens in the following ways:
Request participants can view the current chart configured for a Saved Search using the latest Request data at the time the Request participant views the Screen.
Request participants who do not have access to Collections can view charts for Saved Searches based on a Collection.
This control is only available for the following Screen types:
Display type
Form type
See Screen Types.
Follow these steps to add this control to the Screen:
Configure the Saved Search Chart control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below are Saved Search Chart controls that display in the Count of records and Answers.
The Saved Search Chart control has the following configurable settings in the Properties Panel:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add a control that displays a digital signature in Screens.
The Signature control allows the Request participant to sign and her or his signature in a Screen. The entered signature automatically saves, but is not committed until the signer submits the Screen. The signer may undo the entered signature prior to submitting the Screen. The submitted signature is recorded as a PNG image that may be referenced from an Image control by referencing the Signature control's Variable Name setting value.
This control is only available for Form-type Screens. See Screen Types.
Watch the following product tour to learn how to use a Signature control.
Follow these steps to add this control to the Screen:
Configure the Image control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below are digital Signatures to approve a request.
The Signature control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
Add either a checkbox- or multi-select drop-down menu-style control from which the Request participant selects one or more options.
The Select List control provides either a checkbox- or multi-select drop-down menu-style control from which the Request participant selects one or more options.
Set options that display in this control in one of the following ways:
Provide each option: For each option, enter a unique value that represents the option, and then enter the text that displays as the option. After your options are configured, sort the order in which they are to display in the control. Alternatively, provide options in the control in JSON format.
Reference data in a Request Variable: Reference data from the in-progress Request as options in this control. This data object must be part of the Request's JSON data model.
Reference a data source in the JSON data model: Reference data from a Data Connector that displays in this control as its options. Specify the data name, value, and content from the Data Connector. See a design example. Optionally, use a PMQL expression to limit which data to use as options based on the PMQL expression's criteria. The order that data objects present in the data object determines the order these options display in the control; options cannot be manually reordered.
Reference data in a Collection: Reference data from a Collection and display it as options in this control. Optionally, use a PMQL expression to filter the displayed options in real-time.
This control is only available for the following Screen types:
Conversational-type
Form-type
See Screen Types.
For documented examples of using this control, see:
When using the Select List control with checkboxes, the control functions similarly to multiple Checkbox controls whereby multiple options may be selected. Unlike using multiple Checkbox controls, the Select List control includes all selected options as an array in the order that options are selected. This array becomes part of the JSON data model as shown in the example below in Preview mode.
When using the Select List control as the drop-down menu, multiple options may be selected one at a time. Selected options have the following attributes:
Each selected option displays in the control.
Each selected option displays in bold-style text in the drop-down menu. Furthermore, a red-colored highlight displays when hovering over a selected option, rather than the default green-colored highlight for deselected options.
Follow these guidelines to deselect an item from the Select List control when using the drop-down menu style:
Select the option again from the drop-down menu.
The Select List control includes all selected options as an array in the order that options are selected. This array becomes part of the JSON data model as shown in the example below in Preview mode.
Follow these steps to add this control to the Screen:
Configure the Select List control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Select List control where you can select a method to receive notifications.
The Select List control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Data Source panel from the Properties Panel on the right to configure the following properties:
From the Data Source panel, select one of the following methods to specify options that display in the Select List control:
Provide options: Enter a unique value that represents each option, and then enter the text that displays as the option. After your options are configured, sort the order in which they are to display in this control. Alternatively, provide options in this control in JSON format.
Request data: Reference data from the in-progress Request as options in this control. This data object must be part of the Request's JSON data model. During the in-progress Request, the Select List control references a specified data array and object in the Request's JSON data model to display its values as options in that control. The order that data objects are in the Request's JSON data model determines the order these options display in the control; options cannot be manually reordered. See the following related topics:
Data Connector: Reference the data from a Data Connector's Endpoint as options in this control. These Endpoints a Data Connector references may be Application Program Interface (API) endpoints, Collection records, or other data source endpoints. During the in-progress Request, when the Select List control references data from the Data Connector, the control maps the Data Connector data to a specified JSON data array, variable or key name, or data object to become part of that Request's data. Data maps to the JSON data array in the same order it is retrieved from the Data Connector. Optionally, use a PMQL expression to limit which data to use as options based on the PMQL expression's criteria. The order that data objects return from the Data Connector determines the order these options display in the control; options cannot be manually reordered.
See Example: Dependent Select List Controls Display Countries and Regions.
Collection: Reference data saved in a Collection and display records from a Collection column. Optionally, use a PMQL expression to limit which data to use as options based on the PMQL expression's criteria. For an example, see Example: Dependent Select List Controls Display Countries and Regions from a Collection.
See the following procedures how to provide options for a Select List control.
Follow these steps to add an option that displays in this control using Screen Builder:
Access the Data Source panel for this control while in Design mode, and then locate the Data Source setting.
In the Value setting, enter a value to represent the option in the Request data. This value must be unique from other values in this control. If the value is not unique to other Value settings in this control, the following message displays: An item with the same key already exists.
In the Content setting, enter the option that displays in this control.
Follow these steps to edit an option that displays in this control using Screen Builder:
In the Value setting, edit the value to represent the option in the JSON data model during in-progress Requests for Processes that use this Screen as necessary. This value must be unique from other values in this control. If the value is not unique to other Value settings in this control, the following message displays: An item with the same key already exists.
In the Content setting, edit the option that displays in this control as necessary.
Click Update. The edited option displays below the Options list label.
Follow these steps to delete an option from in this control using Screen Builder:
Click Delete.
Follow these steps to sort the order of the options that display in this control using Screen Builder:
Follow these steps to set whether multiple selections can be selected from this control and how the options display:
From the Render Options As drop-down menu, select one of the following options:
Dropdown/Multiselect: Select the Dropdown/Multiselect option to display the control as a drop-down menu.
Follow these steps to provide options that display in this control using a JSON schema:
Access the Data Source panel for this control while in Design mode, and then locate the Data Source setting.
The JSON Data setting displays. If a valid JSON schema has been configured previously, the JSON Data setting displays the JSON. Otherwise, this setting is empty.
Enter your control options in the order they are to display in this control using JSON format. Use the scroll panel to the right of the JSON to scroll to different sections of the JSON if necessary. This is useful especially when you are editing a long JSON.
Follow these steps to set whether multiple selections can be selected from this control and how the options display:
From the Render Options As drop-down menu, select one of the following options:
Dropdown/Multiselect: Select the Dropdown/Multiselect option to display the control as a drop-down menu.
Make note of best practices when configuring a Select List control's options when that control is within a Loop control. When referencing a JSON array from a data source, configure the Select List control to reference the JSON object containing the JSON array and not its values. Then duplicate the JSON array in the Loop control. See Duplicate the JSON Array in a Select List Control Used in a Loop Control.
Make note of best practices when editing a Collection record using a Select List control in a Loop control, configure the Select List control's Type of Value Returned setting with the Single Value option. See Use Single Value instead Object in a Select List.
Make note of practices to avoid when referencing Request data for the options in a Select List control.
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
When the Select List control is configured with Provide Options, the Default Value setting compares numerical values as a string.
If the Select List is configured with Provide Options Using a JSON Schema, take care to enclose the numerical values in quotation marks (such as "1"
) because this can cause errors when comparing against the Default Value setting value.
If you need to compare default values other than a String-type value, enter the default value using JavaScript.
As opposite to the default setting, the JavaScript setting accepts values different to a String. Then if the Select List is configured with Provide Options Using a JSON Schema, then enter the Default Value as in the JSON schema. For example enter return 2;
if the JSON values are integers like:
Add a control from which the Request participant can insert more than three lines of text.
The Textarea control allows the Request participant to insert more than three lines of text. Though this control displays a vertical scroll bar if more than three lines are inserted, the input box can be expanded as necessary. To do this, click the lower right-hand corner of the input box of the Textarea control, hold, and then drag to enlarge or shrink the control size as necessary. Release when you have adjusted the Textarea control to your required size.
Watch the following product tour to learn how to use a Page Navigation control.
Below is a Textarea control to request feedback.
The Textarea control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
There are two ways to enter the default value this control displays.
Add a control from which the Request participant submits the Screen.
Do Not Submit, Set Value: Sets this control's value as specified from the Value setting, but does not submit the Screen.
Below is a form with two Submit Button controls.
The Submit Button control has the following configurable settings in the Properties Panel:
Expand the Variable panel from the Properties Panel on the right to configure the following properties:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
control
control
From the Controls Menu on the left, expand the Navigation category, and then locate the Page Navigation icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Enter the text label that displays for this control. Page Navigation is the default value.
Select the destination page to which to navigate in a multi-page Screen. Current pages in the multi-page Screen display. If the Screen contains only one page, the Destination Screen setting displays No Data Available when selected.
Link: White-colored background with blue-colored Button Label text.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
The Aria Label setting value replaces the Label setting value. For example, if a control has both a Label setting value and an Aria Label setting value, assistive technology only uses the Aria Label setting value.
Enter the number for the sequential keyboard navigation order that this control takes focus amongst other controls in this Screen.
From the Controls Menu on the left, expand the Input Fields category, and then locate the Photo/Video icon .
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this Screen and contains at least one letter. This is a required setting.
Edit the default label that displays for this control if necessary. New Photo Video is the default value.
Select Make Required to indicate that this control is required for the user to submit the Screen. This option is not selected by default.
Enter text that provides additional guidance on this control's use. This setting has no default value.
Video: Select the Video option to capture a video from the device.
Enable the Send to IDP toggle key. The Document Type setting displays.
Enter the file name that the control saves the capture. Optionally use mustache syntax to set this value. This is a required setting.
Below is an example in Preview mode.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Open the Task with the Screen using the Record List control. The Record List control displays an empty record list.
Click the Add Record button to add a record to the record list. A screen displays to enter data components for one record. In doing so, the Record List control references the controls on the secondary page of the Screen. In this example, enter a record for registrars for a conference.
Repeat Steps 2 through 4 for each record in the record list. As you enter each record, it displays in the record list. If the Record List control is configured to be editable (as shown below), then the Edit buttonand Delete buttondisplay to edit or delete a record, respectively. Otherwise, these buttons do not display and records cannot be changed after they are added.
From the Controls Menu on the left, expand the Content Fields category, and then locate the Record List icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this Screen and contains at least one letter. This is a required setting.
Edit the default label that displays for this control if necessary. New Record List is the default value.
Select to indicate that records in the list can be edited or deleted with the Editand Deleteicons, respectively. Otherwise, deselect to indicate that after each record is added to the record list, it cannot be changed. Note that after the Task is submitted, the record list cannot be changed. This setting is not selected by default.
Select from which Screen page to reference the controls that receive data components for each record. The page with these controls that receive the data components cannot be on the same page as the Record List control.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Click the iconbeside the Column label. The Add Column screen displays.
Click Save. The column header displays in the Column list label.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Click theicon for the column to change its settings. The Edit Option screen displays.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Click theicon for the column to be deleted from this control. A message displays to confirm deletion of the option.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Drag theicon for each column up or down to sort the order they display in this control as necessary.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Click the Edit as JSON option below the Column list label if this option does not currently displayed.
Click the iconbeside the JSON Data option. The Script Config Editor displays.
Click Close or the Close icon. The control columns are saved.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this Screen and contains at least one letter. This is a required setting.
Edit the default label that displays for this control if necessary. New Record List is the default value.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Click the iconbeside the Column label. The Add Column screen displays.
Click Save. The column header displays in the Column list label.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Click theicon for a column to change its settings. The Edit Option screen displays.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Click theicon for the column to be deleted from this control. A message displays to confirm deletion of the option.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Drag theicon for each column up or down to sort the order they display in this control as necessary.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Click the Edit as JSON option below the Column list label if this option does not currently displayed.
Click the iconbeside the JSON Data option. The Script Config Editor displays.
Click Close or the Close icon. The control columns are saved.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components for "Visibility Rule" Control Settings. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
From the Controls Menu on the left, expand the Content Fields category, and then locate the Rich Text icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Enter the text and/or image to display in the Rich Text control using HTML syntax (see a design example) and/or mustache syntax. Rich text editor paragraph is the default value. See this control's description for information how to use mustache syntax.
Undo changes: Click on theicon to undo the last action.
Redo changes: Click on theicon to redo the last undone action.
Insert/Edit links: Click on theicon to convert the selected text into a hyperlink. Follow these steps to create a hyperlink:
Click on theicon. The Insert/Edit Link screen displays.
From the editor toolbar, select theicon.
From the editor toolbar, select theicon.
Change text color: Use the Text Color drop-down to change text color. Click on theicon. The color palette displays. Do one of the following:
Click theicon to select a custom color from the Color Picker.
Click theicon to reset the text to its default color.
From the editor toolbar, use theicon to left- align text.
From the editor toolbar, use theicon to center-align text.
From the editor toolbar, use theicon to right-align text.
From the editor toolbar, use theicon to justify text.
Insert a bullet list: Use theicon to format text as a bulleted list.
Insert a numbered list: Use theicon to format text as a numbered list.
Indent text: Click on theicon to increase text indenting.
Outdent text: Click on theicon to decrease text indenting.
Select the Render HTML from a Variable setting to not show HTML syntax, but instead render the HTML syntax. If the Render HTML from a Variable setting is not selected, then the Rich Text control displays the HTML syntax. If a Request variable from which the Rich Text control references its data contains HTML syntax, select this setting to render that HTML.
Enter an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
From the Controls Menu on the left, expand the Dashboards category, and then locate the Saved Search Chart icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Select the Saved Search chart to display in the Screen. If you are not that Saved Search's owner nor have not been shared the Saved Search associated with the chart, that chart does not display in the Chart setting.
Enter an additional ProcessMaker Query Language (PMQL) query from which to filter Saved Search results to display in the chart.
Enable the Title toggle key to display the Saved Search chart's title above the chart. The Title toggle key is enabled by default.
Enable the Border toggle key to display a border around the Saved Search chart. The Border toggle key is enabled by default.
Enable the Enable Link toggle key to display theicon that, when clicked, displays the Saved Search from which the chart visualizes data in a new browser window. The Enable Link toggle key is disabled by default.
Select the size of the Saved Search chart.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
From the Controls Menu on the left, expand the Input Fields category, and then locate the Signature icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control. ​​
Reference this control by its Variable Name setting's value. The Data Preview panel in Preview mode corresponds the Signature control's textual content with that Textarea control's Variable Name value. In the example below, SignatureControl
is the Variable Name setting's value.
Set the vertical spacing of the Signature control's pad: the space into which the signature is entered.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Click the imagefor the option to be removed.
From the Controls Menu on the left, expand the Input Fields category, and then locate the Select List icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this Screen and contains at least one letter. This is a required setting.
View the selection made in this control by its Variable Name setting's value. The Data Preview panel in Preview mode corresponds the option(s) the Request participant selects in the Select List control with that Select List control's Variable Name value. The Variable Name setting contains the selected option(s) as an array. In the example below, form_select_list_1
is the Variable Name setting's value.
Consider the following example. A Select List control with Variable Name setting value account
displays a list of accounts available at your bank.
When a user makes a selection, you want to display the selected account in a Line Input control on this Screen. Use the following best practice to reference the value of the Select List control.
Insert a Line Input control and set its Variable Name value. This example uses the Variable Name value AccountName
.
Edit the default label that displays for this control if necessary. New Select List is the default value.
Enter the validation rule(s) the Request participant must comply with to properly enter a valid value into this control. This setting has no default value. If there are no configured validation rules the following message displays: No validation rule(s). See Validation Rules for "Validation" Control Settings.
Click the Add Rule button. The Select drop-down menu displays.
Click the Edit iconfor the validation rule to edit if that rule can be edited. Validation rules that do not have parameters cannot be edited. The parameter settings for that validation rule displays.
Click the Delete iconfor the validation rule to delete. A message displays to confirm deletion of the validation rule.
Select to indicate that this control is required. This option is not selected by default. This is a quick way to add the Required validation rule.
In the Screen preview or during a Request, the control displays with a red-colored asterisk. If you submit the Screen without selecting this required Checkbox, this control displays Field is required in red-colored text.
Select to indicate that this control cannot be edited. This option is not selected by default.
Enter the placeholder text that displays in this control when no value has been provided. This setting has no default value.
Enter text that provides additional guidance on this control's use. This setting has no default value.
From the Data Source drop-down menu, select Provide Values if this setting is not selected. This is the default setting.
Ensure that the Options list label displays. If the JSON Data option displays, click the Edit as Option List option.
Click the iconbeside the Options list label. The Add Option screen displays.
Click Save. The option displays below the Options list label.
Access the Data Source panel for this control while in Design mode, and then ensure that the Data Source setting uses the Provide Values option.
Ensure that the Options list label displays. If the JSON Data option displays, click the Edit as Option List option.
Click theicon for an option to edit its settings. The Edit Option screen displays.
Access the Data Source panel for this control while in Design mode, and then ensure that the Data Source setting uses the Provide Values option.
Ensure that the Options list label displays. If the JSON Data option displays, click the Edit as Option List option.
Click theicon for the option to be deleted from this control. A message displays to confirm deletion of the option.
Access the Data Source panel for this control while in Design mode, and then ensure that the Data Source setting uses the Provide Values option.
Ensure that the Options list label displays. If the JSON Data option displays, click the Edit as Option List option.
Drag theicon for each option up or down to sort the order they display in this control as necessary.
Access the Data Source panel for this control while in Design mode, and then ensure that the Data Source setting uses the Provide Values option.
Click the Allow multiple selections setting to allow multiple options to be selected from this control. Otherwise, only one option can be selected.
Radio/Checkbox Group: Select the Radio/Checkbox Group option to display the control as a group of checkboxes.
From the Data Source drop-down menu, select Provide Values if this setting is not selected. This is the default setting.
Click the Edit as JSON option below the Options list label. If the JSON Data setting displays, skip this step.
Click the iconbeside the JSON Data option. The Script Config Editor displays.
Click Close or the Close icon. The control options are saved.
Access the Data Source panel for this control while in Design mode, and then ensure that the Data Source setting uses the Provide Values option.
Click the Allow multiple selections setting to allow multiple options to be selected from this control. Otherwise, only one option can be selected.
Radio/Checkbox Group: Select the Radio/Checkbox Group option to display the control as a group of checkboxes.
From the Data Source drop-down menu, select Request Data.
In the Options Variable setting, enter from which Request variable, based on its Variable Name setting value, to use as options for this control. The Request variable from which to use as options must be an array. The options in the Select List control display in the same order as the Request variable lists items in its array. Optionally, use mustache syntax to indicate the Request variable name, especially if each option in this control derives from combining multiple properties within an array where each of its items contains one or more objects. response is the default setting. See Dependent Field Design Example Using Select List Controls.
Optionally, use mustache syntax to indicate the JSON object key name from within the JSON array. content is the default value.
Radio/Checkbox Group: Select the Radio/Checkbox Group option to display the control as a group of checkboxes.
Select the Allow multiple selections option to allow multiple options to be selected from this control. Otherwise, only one option can be selected.
Object: Select the Object option to indicate that the entire JSON object within each item of the array displays as each option in this control.
If the Single Value option from the Type of Value Returned setting is selected, the Variable Data Property setting displays. In the Variable Data Property setting, enter the JSON object key name from within the JSON array containing the JSON response that this control stores in that Request's data when this Screen submits. To use all items in the JSON array, do not enter a value into the Variable Data Property setting. Use JSON dot notation as necessary if the relevant JSON array containing the object key name is embedded in other JSON objects and/or arrays. Optionally, use mustache syntax to indicate the JSON key name from within the JSON array. value is the default value. See Dependent Field Design Example Using Select List Controls.
From the Data Source drop-down menu, select Data Connector.
In the Options Variable setting, enter the name of the JSON array containing the API's JSON response from which to reference its objects as options that display in this control after the Data Connector's Resource interacts with the API endpoint. The name of the JSON array is called response
by default. Use JSON dot notation as necessary if the relevant JSON array containing the object key name is embedded in other JSON objects and/or arrays. response is the default value.
Radio/Checkbox Group: Select the Radio/Checkbox Group option to display the control as a group of checkboxes.
Select the Allow multiple selections option to allow multiple selections from this control. Otherwise, only one option can be selected.
Object: Select the Object option to indicate that the entire JSON object within each item of the array displays as each option in this control.
If the Single Value option from the Type of Value Returned setting is selected, the Value setting displays. In the Value setting, enter the JSON object key name from within the JSON array containing the JSON response that this control stores in that Request's data when this Screen submits. To use all items in the JSON array, do not enter a value into the Value setting. Use JSON dot notation as necessary if the relevant JSON array containing the object key name is embedded in other JSON objects and/or arrays. Optionally, use mustache syntax to indicate the JSON key name from within the JSON array. value is the default setting. See Dependent Field Design Example Using Select List Controls.
content is the default value.
From the Data Connector drop-down menu, select from which Data Connector to reference as a data source. If a Data Connector does not exist, this setting has no options.
From the End Point drop-down menu, select which Resource to reference from the selected Data Connector. A Resource is a Data Connector asset with which to interact with a data source, also called an End Point. These Resources are configured from the Data Connector itself. Depending on the Data Connector selected from the Data Connector Name drop-down menu, these Resources may reference Application Program Interface (API) endpoints, Collection records, or other data source endpoints.
In the PMQL setting, optionally enter a PMQL expression to filter which data in the JSON data array to display as options in this control based on which JSON objects in that array meet the PMQL expression's criteria.
From the Data Source drop-down menu, select Collection.
From the Collection drop-down menu, select the name of the Collection from which to retrieve data.
From the Label drop-down menu, select the name of the Collection column that contains the data to be displayed as options in the Select List control.
From the Value drop-down menu, select the name of the Collection column that contains the data to be saved into Request data when a user makes a selection.
The Label and Value drop-down menus can have the same or different Collection columns selected. Consider an example of a Collection with columns City Name
and Zip Code
. The Select List control can be configured in the following ways:
In the PMQL setting, optionally enter a PMQL expression to filter the data being retrieved from the Collection. If a filter criteria is specified here, the Select List control dynamically filters in real-time based on the specified PMQL expression.
Select the Ignore duplicates in list option to display repeating data only once in the Select List control.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Enter the default value as text or a Request variable in mustache syntax.
Enter the default value as JavaScript, especially if a Calculated Property might change this default value setting. Ensure to use the this.
JavaScript keyword preceding the Screen control reference. Example: this.FullName
when FullName
is the Variable Value setting value for the control to set its default value.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
The Aria Label setting value replaces the Label setting value. For example, if a control has both a Label setting value and an Aria Label setting value, assistive technology only uses the Aria Label setting value.
Enter the number for the sequential keyboard navigation order that this control takes focus amongst other controls in this Screen.
This control is only available for Form-type Screens. See .
See the permissions or ask your Administrator for assistance.
Follow these steps to add this control to the :
or
From the Controls Menu on the left, expand the Input Fields category, and then locate the Textarea icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Configure the Textarea control. See .
Validate that the control is configured correctly. See .
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this and contains at least one letter. This is a required setting.
Reference this control by its Variable Name setting's value. The Data Preview panel in Preview mode corresponds the Textarea control's textual content with that Textarea control's Variable Name value. In the example below, form_text_area_1
is the Variable Name setting's value.
Reference this control's value in a different Screen Builder control. To do so, use and reference this control's Variable Name value in the target control. Example: {{ form_text_area_1 }}
.
Reference this value in .
See when editing a Request variable name.
Edit the default label that displays for this control if necessary. New Textarea is the default value.
Enter the validation rule(s) the Request participant must comply with to properly enter a valid value into this control. This setting has no default value. If there are no configured validation rules the following message displays: No validation rule(s). See .
Access the while in Design mode, and then locate the Validation Rules setting.
Click the Add Rule button. The Select drop-down menu displays.
Enter the parameter settings that this control uses to validate against. See , and then locate the validation rule for its parameters.
Access the while in Design mode, and then locate the Validation Rules setting.
Click the Edit iconfor the validation rule to edit if that rule can be edited. Validation rules that do not have parameters cannot be edited. The parameter settings for that validation rule displays.
Edit the parameter settings that this control uses to validate against. See , and then locate the validation rule for its parameters.
Access the while in Design mode, and then locate the Validation Rules setting.
Click the Delete iconfor the validation rule to delete. A message displays to confirm deletion of the validation rule.
Select to indicate that this control is required. This option is not selected by default. It is a quick way to add the validation rule.
In the Screen preview or during a Request, the control displays with a red-colored asterisk. If you submit the Screen without selecting this required Checkbox, this control displays Field is required in red-colored text.
Select to indicate that this control cannot be edited. This option is not selected by default.
Enter the placeholder text that displays in this control when no value has been provided. This setting has no default value.
Enter text that provides additional guidance on this control's use. This setting has no default value.
Select the Rich Text checkbox to display the What-You-See-Is-What-You-Get (WYSIWYG) rich text editor to allow the Request participant can enter rich text. This option is not selected by default.
Enter the number of rows to provide for input. 2 is the default value.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Enter the default value this control displays. The default value can be assigned as a Request variable, text or JavaScript. When the Screen submits, the Request uses this control's default value unless the Request participant changes it. When using a in the Default Value setting, consider the following:
The Default Value setting supports using Request variables in . For example, if the Default Value setting is {{ FirstName }} {{ LastName }}
from which a Request participant entered her first name and last name in separate controls (respectively) earlier in that Request, this control displays the contents of those controls by default during the Request.
Enter the default value as text or as a Request variable in mustache syntax.
Enter the default value as JavaScript, especially if a might change this default value setting. Ensure to use the preceding the Screen control reference. Example: this.FullName
when FullName
is the Variable Value setting value for the control to set its default value.
Specify an expression that indicates the condition(s) under which this control displays. See . If this setting does not have an expression, then this control displays by default.
For example, this control displays if the variable value tip is 1. For a detailed example of the Visibility Rule setting, see .
.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Then, use this name in the feature to apply CSS styling to this control as follows:
The Aria Label setting value replaces the value. For example, if a control has both a Label setting value and an Aria Label setting value, assistive technology only uses the Aria Label setting value.
.
Enter the number for the sequential keyboard navigation order that this control takes focus amongst other controls in this Screen.
The Submit Button control adds a button to the . The Submit Button control has two functions:
Submit: Submits the Screen whilst setting this control's value as specified from the . This is the default setting.
This control is only available for Form-type Screens. See .
See how to so the Screen cannot be submitted after the first click.
For a documented example of using this control, see .
See the permissions or ask your Administrator for assistance.
Follow these steps to add this control to the :
or
From the Controls Menu on the left, expand the Input Fields category, and then locate the Submit Button icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Configure the Submit Button control. See .
Validate that the control is configured correctly. See .
Edit the default label that displays for this control if necessary. New Submit is the default value.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this and contains at least one letter. This is a required setting.
Reference this control by its Variable Name setting's value. The Data Preview panel in Preview mode corresponds the Submit Button control's Variable Name value. In the example below, SubmitButtonControl
is the Variable Name setting's value when the button is clicked.
Reference this control's value in a different Screen Builder control. To do so, use and reference this control's Variable Name value in the target control. Example: {{ SubmitButtonControl }}
.
Reference this value in .
See when editing a Request variable name.
Enter any alphanumeric value that represents data when the Request participant selects the Submit Button control. This value can be evaluated in a or in a .
See how to so the Screen cannot be submitted after the first click.
Submit: Submits the whilst setting this control's value as specified from the . This is the default setting.
Do Not Submit, Set Value: Sets this control's value as specified from the Value setting, but does not submit the Screen.
Enable the Loading Submit Button option, and then edit the default Loading Label setting text as necessary. The Loading Submit Button option replaces the and instead displays the text entered in the Loading Label option along with a spinner within the button; the Screen does not refresh entirely until the next Task's Screen is ready to load. If this option is disabled, the interstitial Screen works as configured in the Form Task/Manual Task element.
Configure a tooltip that displays when hovering over the Submit Button control.
In the Tooltip Contains setting, enter the text that the tooltip displays. This setting supports both HTML and .
Link: White-colored background with blue-colored Label text.
Specify an expression that indicates the condition(s) under which this control displays. See . If this setting does not have an expression, then this control displays by default.
For example, this control displays if the variable value tip is 1. For a detailed example of the Visibility Rule setting, see .
.
See how to so the Screen cannot be submitted after the first click.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Then, use this name in the feature to apply CSS styling to this control as follows:
The Aria Label setting value replaces the value. For example, if a control has both a Label setting value and an Aria Label setting value, assistive technology only uses the Aria Label setting value.
.
Enter the number for the sequential keyboard navigation order that this control takes focus amongst other controls in this Screen.
Control Type
Control's "Variable Name" Value
Record List "Column Header" Value
Record List "Value" Value
What It Represents
Line Input
firstname
First Name
firstname
Registrar's first name
Line Input
lastname
Last Name
lastname
Registrar's last name
Line Input
Email Address
Registrar's email address
Select
confirmation
Confirmation
confirmation
Attendance confirmation
Add a control that displays avatar from the user profile of the logged in user.
The User Avatar control displays the profile picture set as the avatar for the currently logged-in user. This control can be used to display user avatars on dashboards, welcome screens, or other display-type screens.
This control is only available for the Display-type Screen. See Screen Types.
Follow these steps to add this control to the Screen:
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Configure properties for the User Avatar control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a User Avatar control displayed in a user's welcome screen.
The User Avatar control has the following configurable settings in the Properties Panel:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
From the Controls Menu on the left, expand the Dashboards category, and then locate the User Avatar icon .
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Add a control to display a container of two or more columns from which other controls display.
The Multicolumn / Table control adds a layout element with two or more columns. Drag and place other controls into any of the columns to display them to the width of the Multicolumn / Table control column.
Specify the width of each column in colspan
HTML attribute settings. The total of all colspan
attribute settings must be divisible by 12. The control contains two columns of six (6) colspan
HTML attribute setting each by default. See a design example.
This control is only available for the following Screen types:
Display type
Form type
See Screen Types.
Watch the following product tour to learn how to use a Multicolumn / Table control.
For a documented example of using the Multicolumn / Table control, see Show or Hide Controls Based on Button Selection.
Follow these steps to add this control to the Screen:
Configure the Multicolumn / Table control. See Settings.
Drag and place others controls into a column. Configure and validate each control's settings.
Below is a Multicolumn / Table control that contains information details in the left column and an upload File Control in the right column.
The Multicolumn / Table control has the following configurable settings in the Properties Panel:
Expand the Configuration panel from the Properties Panel on the right to configure the following properties:
Expand the Design panel from the Properties Panel on the right to configure the following properties:
Expand the Advanced panel from the Properties Panel on the right to configure the following properties:
From the Controls Menu on the left, expand the Content Fields category, and then locate the Multicolumn / Table icon.
Drag and drop the control to the Screen Builder canvas. Existing controls in the Screen will adjust positioning based on where you drag the control.
Remove: Click the Removeicon to remove the column.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.