Understand how to use controls to design your Screens.
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
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:
See Screen Types.
To add a File Preview control to a Screen, the File Manager package must be installed.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
See the Screens permissions or ask your Administrator for assistance.
A ProcessMaker Platform package is required to do this.
Permissions are required to do this.
Avoid designing with more than 25 controls in one Screen.
See this example how to preview multiple files that have been uploaded from a previous Task in that Request.
Follow these steps to add this control to the Screen:
View the Screen page to which to add the control.
Drag the File Preview icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Configure the File Preview control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a File Preview control in Preview mode.
After adding a control to a Screen page, you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another Screen page.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.
Follow these steps to copy a control:
Select the control to be copied.
As a best practice, after copying a control, change the Variable Name setting value for the copied control to its own unique variable value. Otherwise, in-progress Requests that use this Screen read from and send data to both controls.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Follow these steps to delete a control from a Screen page:
Select the control to be deleted.
The File Preview control has the following panels that contain settings:
Click the control while in Design mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
Below is the setting for the File Preview control in the Variable panel:
Use the Variable Name setting value to reference this value in Visibility Rule setting expressions.
See best practices when editing a Request variable name.
Click the control while in Design mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
Below is the setting for the File Preview control in the Configuration panel:
Click the control while in Design mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Line Input control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Create a new Screen or click the Edit iconto edit the selected Screen. The Screen is in Design mode.
Locate the File Preview iconin the panel to the left of the Screen Builder canvas.
Place into the Screen Builder canvas where you want this control to display the file preview on the Screen.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
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.
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 from which the Request participant can select or deselect an option. Multiple Checkbox controls can be grouped together.
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. See a design example.
This control is only available for Form-type Screens. See Screen Types.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
See the Screens permissions or ask your Administrator for assistance.
Follow these steps to add this control to the Screen:
View the Screen page to which to add the control.
Drag the Checkbox icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Configure the Checkbox control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below are two Checkbox controls in Preview mode.
After adding a control to a Screen page, you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another Screen page.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.
Follow these steps to copy a control:
Select the control to be copied.
As a best practice, after copying a control, change the Variable Name setting value for the copied control to its own unique variable value. Otherwise, in-progress Requests that use this Screen read from and send data to both controls.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Follow these steps to delete a control from a Screen page:
Select the control to be deleted.
The Checkbox control has the following panels that contain settings:
Click the control while in Design mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Checkbox control in the Variable panel:
Use the Variable Name setting value in the following ways:
Reference this control by its Variable Name setting's value. The Data Preview panel in Preview mode represents the state of the Checkbox control using its Variable Name value in the Request's JSON data model in the following ways:
The Checkbox control is selected: The key's value is true
(shown below).
Reference this control's value in a different Screen Builder control. To do so, use mustache syntax and reference this control's Variable Name value in the target control. Example: {{ CheckboxControl }}
.
Reference this value in Visibility Rule setting expressions.
See best practices when editing a Request variable name.
Follow these steps to add a validation rule to this control:
Access the Variable panel for this 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.
Follow these steps to edit a validation rule for this control:
Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.
Edit the parameter settings that this control uses to validate against. See Validation Rule Settings, and then locate the validation rule for its parameters.
Follow these steps to delete a validation rule for this control:
Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.
Click Delete.
Click the control while in Design mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
Below is the setting for the Checkbox control in the Configuration panel:
Click the control while in Design mode, and then click the Design panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Checkbox control in the Design panel:
Click the control while in Design mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Checkbox control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Enter the string that provides a text alternative to this control for the following purposes:
Assistive technology, such as screen readers, read the Aria Label setting value.
This control has a visual indication of its purpose, such as a button that uses a graphic instead of text, but still needs to clarify that purpose for anyone who cannot access the visual indication.
Tab order determines the sequential navigation order to navigate a Screen's controls using a keyboard interface. Assistive technology users often use a keyboard for navigation.
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 click the control and select a date from a calendar pop-up. 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"
Use the Date Picker control to validate datetime format such as for Vocabularies.
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.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
See the Screens permissions or ask your Administrator for assistance.
Follow these steps to add this control to the Screen:
View the Screen page to which to add the control.
Drag the Date Picker icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Configure the Date Picker control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Date Picker control in Preview mode.
After adding a control to a Screen page, you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another Screen page.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.
Follow these steps to copy a control:
Select the control to be copied.
As a best practice, after copying a control, change the Variable Name setting value for the copied control to its own unique variable value. Otherwise, in-progress Requests that use this Screen read from and send data to both controls.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Follow these steps to delete a control from a Screen page:
Select the control to be deleted.
The Date Picker control has the following panels that contain settings:
Click the control while in Design mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Date Picker control in the Variable panel:
Use the Variable Name setting value in the following ways:
Reference this control's value in a different Screen Builder control. To do so, use mustache syntax and reference this control's Variable Name value in the target control. Example: {{ DatePickerControl }}
.
Reference this value in Visibility Rule setting expressions.
See best practices when editing a Request variable name.
Select one of the following data type options this control accepts when the Request participant enters content into this control:
Datetime: This control accepts a datetime, which is includes both date and time components.
Date: The control accepts a date.
Follow these steps to add a validation rule to this control:
Access the Variable panel for this 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.
Follow these steps to edit a validation rule for this control:
Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.
Edit the parameter settings that this control uses to validate against. See Validation Rule Settings, and then locate the validation rule for its parameters.
Follow these steps to delete a validation rule for this control:
Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.
Click Delete.
Click the control while in Design mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Date Picker control in the Configuration panel:
Click the control while in Design mode, and then click the Design panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Date Picker control in the Design panel:
Click the control while in Design mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Date Picker control in the Advanced panel:
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 Request variable in the Default Value setting, consider the following:
If the Request variable is empty, the control does not display any value by default.
When the Request variable is assigned a value for the first time, this value becomes the permanent default value of the control.
Any further changes to the Request variable do not affect the default value of the control.
The Default Value setting supports using Request variables in mustache syntax. 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.
There are two ways to enter the default value this control displays.
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Enter the string that provides a text alternative to this control for the following purposes:
Assistive technology, such as screen readers, read the Aria Label setting value.
This control has a visual indication of its purpose, such as a button that uses a graphic instead of text, but still needs to clarify that purpose for anyone who cannot access the visual indication.
Tab order determines the sequential navigation order to navigate a Screen's controls using a keyboard interface. Assistive technology users often use a keyboard for navigation.
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:
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.
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
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
View the Screen page to which to add the control.
Drag the Nested Screen icon into the Screen Builder canvas. Existing controls on the Screens Builder canvas adjust positioning based on where you drag the control.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Follow these steps to copy a control:
Select the control to be copied.
Consider the following when deleting a configured Nested Screen control:
Deleting a Nested Screen control also deletes the nested Screen.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Select the control to be deleted.
The Nested Screen control has the following panels that contain settings:
Below is the setting for the Nested Screen control in the Variable panel:
Below are settings for the Nested Screen control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
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:
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
View the Screen page to which to add the control.
Drag the Loop icon into the Screen Builder canvas. Existing controls on the Screens Builder canvas adjust positioning based on where you drag the 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.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Follow these steps to copy a control:
Select the control to be copied.
Consider the following when deleting a configured Loop control:
Deleting a Loop control also deletes the controls placed into it.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Select the control to be deleted.
The Loop control has the following panels that contain settings:
Below are settings for the Loop control in the Configuration panel:
Select whether to create a new array of JSON objects designed from Screen controls within the Loop control or to reference an existing JSON array of objects:
New array of JSON objects designed from Screen controls
Existing JSON array of objects
When this option is selected the Default Loop Count setting does not display since the JSON array specifies how many times to repeat the control(s) that the Loop control contains.
Use the Variable Name setting value in the following ways:
Below are settings for the Loop control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Add a control that displays a text field that allows the Request participant to enter plain text or a password.
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.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
View the Screen page to which to add the control.
Drag the Line Input icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Follow these steps to copy a control:
Select the control to be copied.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Select the control to be deleted.
The Line Input control has the following panels that contain settings:
Below are settings for the Line Input control in the Variable panel:
Use the Variable Name setting value in the following ways:
Select one of the following data type options this control accepts when the Request participant enters content into this control:
Text: The control only accepts alphanumeric characters. Text is the default setting.
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.
For the Currency and the Percentage data types, data formatting is not saved in the Request variable linked to the Line Input control. As a result, the formatting is not available if the variable is used elsewhere in that Request. For example, instead of $50.00
, the Request variable only saves the value 50
.
The following message displays below the control if the Request participant enters content that does not comply with this control's data type: The format is invalid..
Follow these steps to add a validation rule to this control:
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.
Follow these steps to edit a validation rule for this control:
Follow these steps to delete a validation rule for this control:
Click Delete.
Below are settings for the Line Input control in the Configuration panel:
Below are settings for the Line Input control in the Design panel:
Below are settings for the Line Input control in the Advanced panel:
If the Request variable is empty, the control does not display any value by default.
When the Request variable is assigned a value for the first time, this value becomes the permanent default value of the control.
Any further changes to the Request variable do not affect the default value of the control.
There are two ways to enter the default value this control displays.
Numbers as a string are concatenated. To set the expected number result as the default value using JavaScript, enter return 0;
instead of 0
.
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
Date, SSN and Phone mask pattern display as examples.
Use the following mask components to compose your mask pattern:
Examples
Additionally, use the Min Length and Max Length Validation Rules to define character length boundaries for this control.
Additionally, use the Min Length and Max Length Validation Rules to define character length boundaries for this control.
See the following best practices regarding custom CSS in Screens:
Enter the string that provides a text alternative to this control for the following purposes:
Assistive technology, such as screen readers, read the Aria Label setting value.
This control has a visual indication of its purpose, such as a button that uses a graphic instead of text, but still needs to clarify that purpose for anyone who cannot access the visual indication.
Tab order determines the sequential navigation order to navigate a Screen's controls using a keyboard interface. Assistive technology users often use a keyboard for navigation.
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.
This control is only available for the following Screen types:
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
View the Screen page to which to add the control.
Drag the Multicolumn / Table icon into the Screen Builder canvas. Existing controls on the Screens Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Follow these steps to copy a control:
Select the control to be copied.
Deleting a control deletes configuration for that control as well as any controls placed into the Multicolumn / Table control. If you add another control, it will have default settings.
Select the control to be deleted.
The Multicolumn / Table control has the following panels that contain settings:
Below is the setting for the Multicolumn / Table control in the Configuration panel:
Each option has the following settings:
Column: Column is the internal designation for the column that only the form designer views at design time.
Colspan: Colspan is the width of the column in colspan
HTML attribute settings.
Follow these steps to add a column and specify its width:
Click Add Column from below the Column Width setting. The Add New Column screen displays.
In the Column Width setting, enter the width of the column (as described above).
Click OK. The column displays below the existing columns in Column Width.
Below are settings for the Multicolumn / Table control in the Design panel:
Below are settings for the Multicolumn / Table control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Create a new Screen or click the Edit iconto edit the selected Screen. The Screen is in Design mode.
Locate the Checkbox iconin the panel to the left of the Screen Builder canvas.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
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.
The Checkbox control is not selected: The key's value is false
.
Edit the default label that displays for this control if necessary. New Checkbox 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 selected by default such that its key's 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.
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.
Select to display a toggle key control instead of a checkbox control for each checkbox option. See a design example.
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.
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 Submit Button 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 Date Picker control for Request participants to select a date or datetime through a user interface.
Create a new Screen or click the Edit iconto edit the selected Screen. The Screen is in Design mode.
Locate the Date Picker iconin the panel to the left of the Screen Builder canvas.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
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.
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.
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 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 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 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.
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.
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 Submit Button 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 participant experiences the nested Screen as designed. When the 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 that use the parent Screen.
CSS takes precedent: Any CSS designed in 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.
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.
Only - and -type Screens may be selected for nesting into a Nested Screen control.
This control is only available for -type Screens. See .
See the permissions or ask your Administrator for assistance.
.
.
Follow these steps to add this control to the :
or click the Edit iconto edit the selected parent Screen to which to add the Nested Screen control. The Screen is in .
Locate the Nested Screen iconin the panel to the left of the Screen Builder canvas.
Place into the Screen Builder canvas where you want the control to display on the Screen. Ensure that the control's placement accounts for the Screen you intend to nest into this control.
Configure the Nested Screen control. See .
Validate that the control is configured correctly. See .
Below is a Nested Screen control in .
After , you may move it to another location on that page such that it is above or below other controls placed on that page. Consider when moving this control that it displays a child (nested) Screen during in-progress . A control cannot be moved to another page.
.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that page.
.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
.
Follow these steps to delete a control from a page:
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
.
Click the control while in mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
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 may be selected for nesting into a Nested Screen control. However, only - and -type Screens preview in either or modes.
Click the control while in mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
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.
.
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.
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 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. See a .
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 the permissions or ask your Administrator for assistance.
.
.
Follow these steps to add this control to the :
or click the Edit iconto edit the selected Screen. The Screen is in .
Locate the Loop iconin the panel to the left of the Screen Builder canvas.
Place into the Screen Builder canvas where you want the control to display on the Screen. Ensure that the control's placement accounts for the set of controls you intend to this control to contain.
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 .
Below is a Loop control in .
After , you may move it to another location on that page such that it is above or below other controls placed on that page. Consider when moving this control that it contains a set of controls that become duplicated during in-progress . A control cannot be moved to another page.
.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that page.
.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
As a best practice, after copying a control, change the value for the copied control to its own unique variable value. Otherwise, in-progress that use this Screen read from and send data to both controls.
.
Follow these steps to delete a control from a page:
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
.
Click the control while in mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
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 .
This setting is not available in since the content in these Screens is not editable.
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 . 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 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.
This setting is not available in since the content in these Screens is not editable.
Enter the number of times to repeat the control(s) that the Loop control contains. 3 is the default value.
This setting is not available in since the content in these Screens is not editable.
Select to allow additional loops during in-progress 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 . See a .
Click the control while in mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
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.
.
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.
The Line Input control is a text field that the participant can enter information. Configure the Line Input control to accept one of the following data types:
As a best practice when a validates the JSON in a Screen for a datetime value, use a control instead of a control.
See the permissions or ask your Administrator for assistance.
.
.
Follow these steps to add this control to the :
or click the Edit iconto edit the selected Screen. The Screen is in .
Locate the Line Input iconin the panel to the left of the Screen Builder canvas.
Configure the Line Input control. See .
Validate that the control is configured correctly. See .
Below is a Line Input control in .
After , you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another page.
.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that page.
.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
As a best practice, after copying a control, change the value for the copied control to its own unique variable value. Otherwise, in-progress that use this Screen read from and send data to both controls.
.
Follow these steps to delete a control from a page:
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
.
Click the control while in mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during . 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 corresponds the Line Input control's textual content with that Line Input control's Variable Name value. In the example below, LineInputControl
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: {{ LineInputControl }}
.
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 -type Screen contain Label setting values. See .
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 .
Access the while in 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 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 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 cannot be edited. This option is not selected by default.
Click the control while in mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
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.
Click the control while in mode, and then click the Design panel that is on the right-side of the Screen Builder canvas.
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.
Click the control while in mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
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 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.
.
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.
Additionally, to ensure that users enter the correct number of digits, use to set Max Length and Min Length of this control to 9
.
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.
This custom format input overrides any other formatting set by default, including the one described when using .
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.
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.
Specify the width of each column in colspan
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 .
type
type
See .
See the permissions or ask your Administrator for assistance.
.
.
Follow these steps to add this control to the :
or click the Edit iconto edit the selected Screen. The Screen is in .
Locate the Multicolumn / Table iconin the panel to the left of the Screen Builder canvas.
Configure the Multicolumn / Table control. See .
Drag and place others controls into a column. Configure and validate each control's settings.
Below is a Multicolumn / Table control in .
After , you may move it to another location on that page such that it is above or below other controls placed on that page. Consider when moving this control that it contains other controls. A control cannot be moved to another page.
.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that page.
.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
.
Follow these steps to delete a control from a page:
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
.
Click the control while in mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
Specify the column width for each column in the control. Add each column and its width specification in the order they are to display from left to right in the control. Specify the width of each column in colspan
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 .
Use the Show in Json Format toggle to display these settings in JSON.
Remove: Click the Removeicon to remove the column.
Click the control while in mode, and then click the Design panel that is on the right-side of the Screen Builder canvas.
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.
Click the control while in mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
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.
.
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.
Token | Pattern |
# | Positive integer values [0-9] |
X | [0-9, a-z, A-Z] |
S | [a-z, A-Z] |
A | All text convert to upper case |
a | All text convert to lower case |
! | Set undefined value |
Information | Screen Control |
First Name |
Last Name | Line Input control |
Age | Line Input control |
Sex |
Housing Dormitory | Select List control |
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 package.
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:
See Screen Types.
To add a Saved Search Chart control to a Screen, the Saved Searches package must be installed.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
See the Screens permissions or ask your Administrator for assistance.
To select a Saved Search Chart from a Saved Search Chart control, you must be that Saved Search's owner or have been shared the Saved Search.
A ProcessMaker Platform package is required to do this.
Permissions are required to do this.
Follow these steps to add this control to the Screen:
View the Screen page to which to add the control.
Drag the Saved Search Chart icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Configure the Saved Search Chart control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Saved Search Chart control in Preview mode.
After adding a control to a Screen page, you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another Screen page.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.
Follow these steps to copy a control:
Select the control to be copied.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Follow these steps to delete a control from a Screen page:
Select the control to be deleted.
The Saved Search Chart control has the following panel that contains settings:
Click the control while in Design mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
Below are the settings for the Saved Search Chart control in the Configuration panel:
The Size setting options are based on the height of the Saved Search chart. The width of the chart adjusts accordingly. Select from the following options:
Half: The Half option displays the chart by half its height.
Standard: The Standard option displays the chart in its default height. The Standard option is the default setting.
Double: The Double option displays the chart double its default height.
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 (requires the Send Email package)
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 }}
.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
See the Screens permissions or ask your Administrator for assistance.
Follow these steps to add this control to the Screen:
View the Screen page to which to add the control.
Drag the Record List icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on 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.
After adding a control to a Screen page, you may move it to another location on that page such that it is above or below other controls placed on that page. Consider when moving this control that it contains the set of records during in-progress Requests. A control cannot be moved to another Screen page.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.
Follow these steps to copy a control:
Select the control to be copied.
As a best practice, after copying a control, change the Variable Name setting value for the copied control to its own unique variable value. Otherwise, in-progress Requests that use this Screen read from and send data to both controls.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Follow these steps to delete a control from a Screen page:
Select the control to be deleted.
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 panels that contain settings for Form-type Screens:
Click the control while in Design mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Record List control in the Variable panel:
Use the Variable Name setting value in the following ways:
Reference this control by its Variable Name setting's value.
Reference this control's value in a different Screen Builder control. To do so, use mustache syntax and reference this control's Variable Name value in the target control. Example: {{ RecordListControl }}
.
Reference this value in Visibility Rule setting expressions.
See best practices when editing a Request variable name.
Click the control while in Design mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Record List control in the Configuration panel:
The following message displays if no additional pages exist in this Screen from which to reference other controls: No Data Available.
Click the control while in Design mode, and then click the Columns panel that is on the right-side of the Screen Builder canvas.
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.
Click the control while in Design mode, and then click the Design panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Record List control in the Design panel:
Click the control while in Design mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Record List control in the Advanced panel:
Do not to use visibility rules with Email-type Screens. Some email clients that do not render natively from a web browser, such as Microsoft Outlook or Mozilla Thunderbird for the desktop, alter the HTML during rendering and may break visibility rules.
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
The Record List control has the following panels that contain settings for Display-type Screens:
Click the control while in Design mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Record List control in the Variable panel:
Use the Variable Name setting value in the following ways:
Reference this control by its Variable Name setting's value.
Reference this control's value in a different Screen Builder control. To do so, use mustache syntax and reference this control's Variable Name value in the target control. Example: {{ RecordListControl }}
.
Reference this value in Visibility Rule setting expressions.
See best practices when editing a Request variable name.
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.
Click the control while in Design mode, and then click the Columns panel that is on the right-side of the Screen Builder canvas.
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.
Click the control while in Design mode, and then click the Design panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Record List control in the Design panel:
Click the control while in Design mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Record List control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Add a control from which the Request participant can insert more than three lines of text.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
View the Screen page to which to add the control.
Drag the Textarea icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Follow these steps to copy a control:
Select the control to be copied.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Select the control to be deleted.
The Textarea control has the following panels that contain settings:
Below are settings for the Textarea control in the Variable panel:
Use the Variable Name setting value in the following ways:
Follow these steps to add a validation rule to this control:
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.
Follow these steps to edit a validation rule for this control:
Follow these steps to delete a validation rule for this control:
Click Delete.
Below are settings for the Textarea control in the Configuration panel:
Below are settings for the Textarea control in the Design panel:
Below are settings for the Textarea control in the Advanced panel:
If the Request variable is empty, the control does not display any value by default.
When the Request variable is assigned a value for the first time, this value becomes the permanent default value of the control.
Any further changes to the Request variable do not affect the default value of the control.
There are two ways to enter the default value this control displays.
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Enter the string that provides a text alternative to this control for the following purposes:
Assistive technology, such as screen readers, read the Aria Label setting value.
This control has a visual indication of its purpose, such as a button that uses a graphic instead of text, but still needs to clarify that purpose for anyone who cannot access the visual indication.
Tab order determines the sequential navigation order to navigate a Screen's controls using a keyboard interface. Assistive technology users often use a keyboard for navigation.
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.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
View the Screen page to which to add the control.
Drag the Submit Button icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Follow these steps to copy a control:
Select the control to be copied.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Select the control to be deleted.
The Submit Button control has the following panels that contain settings:
Below are settings for the Submit Button control in the Variable panel:
Use the Variable Name setting value in the following ways:
Below are the settings for the Submit Button control in the Configuration panel:
Select from the following options how the Submit Button control functions when the control is clicked:
Follow these steps to configure how the tooltip displays for the Submit Button control:
From the Position drop-down menu, select the position of the tooltip relative to the Submit Button control from the following options:
Top
Top Left
Top Right
Right
Right Top
Right Bottom
Bottom
Bottom Left
Bottom Right
Left
Left Top
Left Bottom
From the Variant drop-down menu, select the style for the tooltip:
Primary: Blue-colored background with white-colored Label text. This is the default option.
Secondary: Gray-colored background with white-colored Label text.
Success: Green-colored background with white-colored Label text.
Danger: Red-colored background with white-colored Label text.
Warning: Yellow-colored background with black-colored Label text.
Info: Teal-colored background with white-colored Label text.
Light: White-colored background with black-colored Label text.
Dark: Black-colored background with white-colored Label text.
Below is the setting for the Submit Button control in the Design panel:
Select the style for the Submit Button control. The style changes the control's appearance but otherwise has no functional difference. Select from the following options:
Primary: Blue-colored background with white-colored Label text. This is the default option.
Secondary: Gray-colored background with white-colored Label text.
Success: Green-colored background with white-colored Label text.
Danger: Red-colored background with white-colored Label text.
Warning: Yellow-colored background with black-colored Label text.
Info: Teal-colored background with white-colored Label text.
Light: White-colored background with black-colored Label text.
Dark: Black-colored background with white-colored Label text.
Below are settings for the Submit Button control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Enter the string that provides a text alternative to this control for the following purposes:
Assistive technology, such as screen readers, read the Aria Label setting value.
This control has a visual indication of its purpose, such as a button that uses a graphic instead of text, but still needs to clarify that purpose for anyone who cannot access the visual indication.
Tab order determines the sequential navigation order to navigate a Screen's controls using a keyboard interface. Assistive technology users often use a keyboard for navigation.
control
control
Create a new Screen or click the Edit iconto edit the selected Screen. The Screen is in Design mode.
Locate the Saved Search Chart iconin the panel to the left of the Screen Builder canvas.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
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.
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.
Create a new Screen or click the Edit iconto edit the selected Screen. The Screen is in Design mode.
Locate the Record List iconin the panel to the left of the Screen Builder canvas.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
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.
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.
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 Textarea control allows the 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.
This control is only available for -type Screens. See .
See the permissions or ask your Administrator for assistance.
.
.
Follow these steps to add this control to the :
or click the Edit iconto edit the selected Screen. The Screen is in .
Locate the Textarea iconin the panel to the left of the Screen Builder canvas.
Configure the Textarea control. See .
Validate that the control is configured correctly. See .
Below is a Textarea control in .
After , you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another page.
.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that page.
.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
As a best practice, after copying a control, change the value for the copied control to its own unique variable value. Otherwise, in-progress that use this Screen read from and send data to both controls.
.
Follow these steps to delete a control from a page:
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
.
Click the control while in mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during . 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 corresponds the Textarea control's textual content with that Textarea control's Variable Name value. In the example below, TextareaControl
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: {{ TextareaControl }}
.
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 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 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 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 cannot be edited. This option is not selected by default.
Click the control while in mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
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.
Click the control while in mode, and then click the Design panel that is on the right-side of the Screen Builder canvas.
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.
Click the control while in mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
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.
.
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.
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 -type Screens. See .
See how to so the Screen cannot be submitted after the first click.
See the permissions or ask your Administrator for assistance.
.
.
Follow these steps to add this control to the :
or click the Edit iconto edit the selected Screen. The Screen is in .
Locate the Submit Button iconin the panel to the left of the Screen Builder canvas.
Configure the Submit Button control. See .
Validate that the control is configured correctly. See .
Below is a Submit Button control in .
After , you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another page.
.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that page.
.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
As a best practice, after copying a control, change the value for the copied control to its own unique variable value. Otherwise, in-progress that use this Screen read from and send data to both controls.
.
Follow these steps to delete a control from a page:
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
.
Click the control while in mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during . 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 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.
Edit the default label that displays for this control if necessary. New Submit is the default value.
Enter any alphanumeric value that represents data when the 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.
Click the control while in mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
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.
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 .
Click the control while in mode, and then click the Design panel that is on the right-side of the Screen Builder canvas.
Link: White-colored background with blue-colored Label text.
Click the control while in mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
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.
.
See how to so the Screen cannot be submitted after the first click.
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.
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 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 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.
This control is only available for the following Screen types:
Conversational-type
Form-type
See Screen Types.
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.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
See the Screens permissions or ask your Administrator for assistance.
Follow these steps to add this control to the Screen:
View the Screen page to which to add the control.
Drag the Select List icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Configure the Select List control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Select List control in Preview mode.
After adding a control to a Screen page, you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another Screen page.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.
Follow these steps to copy a control:
Select the control to be copied.
As a best practice, after copying a control, change the Variable Name setting value for the copied control to its own unique variable value. Otherwise, in-progress Requests that use this Screen read from and send data to both controls.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Follow these steps to delete a control from a Screen page:
Select the control to be deleted.
The Select List control has the following panels that contain settings:
Click the control while in Design mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Select List control in the Variable panel:
Use the Variable Name setting value in the following ways:
Reference this value in Visibility Rule setting expressions.
Reference a property from the selected value when the Select List control is of type object
in the current Screen or with a Nested Screen control. To do so, first reference this control's Variable Name value in a Calculated Property, then use this Calculated Property in the target control. As a best practice, do not directly reference the Variable Name setting of a Select List control.
Create a Calculated Property and set the Property Name setting to accountName
.
In the JavaScript setting, enter the following JavaScript code:
See best practices when editing a Request variable name.
Ensure that all Select List controls implemented in a Conversational-type Screen contain Label setting values. See Controls in Conversational-Type Screens Require Labels.
Follow these steps to add a validation rule to this control:
Access the Variable panel for this 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.
Follow these steps to edit a validation rule for this control:
Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.
Edit the parameter settings that this control uses to validate against. See Validation Rule Settings, and then locate the validation rule for its parameters.
Follow these steps to delete a validation rule for this control:
Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.
Click Delete.
Click the control while in Design mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Select List control in the Configuration panel:
Click the control while in Design mode, and then click the Data Source panel that is on the right-side of the Screen Builder canvas.
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. Note that the Data Connector package must be installed for this option to be available.
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.
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 Request data, 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.
Follow these steps to reference data from the in-progress Request as options in this control:
Access the Data Source panel for this control while in Design mode.
In the Option Label Shown setting, enter the JSON object key name from within the JSON array containing the Request variable from which to display as each option in this control. To use all JSON object key names in the JSON object, do not enter a value into the Option Label Shown setting. Use JSON dot notation as necessary.
For example, consider the following JSON array within Request data named accountTypes
that contains two JSON objects, both of which their key names are type
:
"accountTypes": [
{"type": "Life"},
{"type": "Medical"}
]
To reference both values from the key name type
as options in the Select List control, use the following JSON dot notation in the Option Label Shown setting: data.accountTypes
. The JSON array must contain JSON objects composed of key names and corresponding values, not just values like the following:
"accountTypes": [
"Life", "Medical"
]
From the Show Control 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.
From the Type of Value Returned drop-down menu, select one of the following options:
Single Value: Select the Single Value option to indicate that only a part of the JSON object specified from the Option Label Shown displays as each option in this control. As a best and general practice, use single-value JSON objects.
Note that the Data Connector package must be installed for this option to be available. T
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.
Follow these steps to reference data from a Data Connector as options in this control:
Access the Data Source panel for this control while in Design mode.
From the Show Control 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.
From the Type of Value Returned drop-down menu, select one of the following options:
Single Value: Select the Single Value option to indicate that only a part of the JSON object specified from the Option Label Shown displays as each option in this control.
In the Content setting, enter the JSON object key name from within the JSON array containing the JSON response to display as each option in this control. To use all JSON object key names in the JSON object, do not enter a value into the Content setting. Use JSON dot notation as necessary. Optionally, use mustache syntax to indicate the JSON object key name from within the JSON array.
Consider the following example of doctors who work in a clinic.
Use the following settings to reference this data array as options for this control:
Element Name: doctors
Value: id
Content: name
Suppose that a new patient at the clinic indicates that she wants to see a female doctor. To filter doctors from this JSON data array who are female in the clinic so that only those objects display as options in a Select List control, use the following PMQL expression in the PMQL setting of that control:
gender = "female"
Click the control while in Design mode, and then click the Design panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Select List control in the Design panel:
Click the control while in Design mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Select List in the Advanced panel:
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 Request variable in the Default Value setting, consider the following:
If the Request variable is empty, the control does not display any value by default.
When the Request variable is assigned a value for the first time, this value becomes the permanent default value of the control.
Any further changes to the Request variable do not affect the default value of the control.
The Default Value setting supports using Request variables in mustache syntax. 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.
There are two ways to enter the default value this control displays.
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:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Enter the string that provides a text alternative to this control for the following purposes:
Assistive technology, such as screen readers, read the Aria Label setting value.
This control has a visual indication of its purpose, such as a button that uses a graphic instead of text, but still needs to clarify that purpose for anyone who cannot access the visual indication.
Tab order determines the sequential navigation order to navigate a Screen's controls using a keyboard interface. Assistive technology users often use a keyboard for navigation.
Add a control to which the Request participant can upload a file from a local computer.
The File Upload control adds an area in the Screen 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.
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.
This control is only available for Form-type Screens. See Screen Types.
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 Loop control to limit how many files may be uploaded to a Screen.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
See the Screens permissions or ask your Administrator for assistance.
Follow these steps to add this control to the Screen:
View the Screen page to which to add the control.
Drag the File Upload icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Configure the File Upload control. See Settings.
Below is a File Upload control in Preview mode.
After adding a control to a Screen page, you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another Screen page.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.
Follow these steps to copy a control:
Select the control to be copied.
As a best practice, after copying a control, change the Variable Name setting value for the copied control to its own unique variable value. Otherwise, in-progress Requests that use this Screen read from and send data to both controls.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Follow these steps to delete a control from a Screen page:
Select the control to be deleted.
The File Upload control has the following panels that contain settings:
Click the control while in Design mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
Below are settings for the File Upload control in the Variable panel:
Select the Upload multiple files setting to allow the Screen user to upload multiple files at once using this File Upload control.
Click the control while in Design mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
Below is the setting for the File Upload control in the Configuration panel:
Separate multiple file types with commas (,
). One space after each comma is acceptable. Example: application/msword, image/gif, image/jpeg, application/pdf, application/vnd.ms-powerpoint, application/vnd.ms-excel, text/plain
Click the control while in Design mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
Below are settings for the File Upload control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Enter the string that provides a text alternative to this control for the following purposes:
Assistive technology, such as screen readers, read the Aria Label setting value.
This control has a visual indication of its purpose, such as a button that uses a graphic instead of text, but still needs to clarify that purpose for anyone who cannot access the visual indication.
Tab order determines the sequential navigation order to navigate a Screen's controls using a keyboard interface. Assistive technology users often use a keyboard for navigation.
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:
See Screen Types.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
See the Screens permissions or ask your Administrator for assistance.
Permissions are required to do this.
Avoid designing with more than 25 controls in one Screen.
See this example how to download multiple files that have been uploaded from a previous Task in that Request.
Follow these steps to add this control to the Screen:
View the Screen page to which to add the control.
Drag the File Download icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Configure the File Download control. See Settings.
Below is a File Download control in Preview mode. The File Download control displays No files available for download until this control references a downloadable file in the Process or during a Process's Request.
After adding a control to a Screen page, you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another Screen page.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.
Follow these steps to copy a control:
Select the control to be copied.
As a best practice, after copying a control, change the Variable Name setting value for the copied control to its own unique variable value. Otherwise, in-progress Requests that use this Screen read from and send data to both controls.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Follow these steps to delete a control from a Screen page:
Select the control to be deleted.
The File Download control has the following panels that contain settings:
Click the control while in Design mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
Below are settings for the File Download control in the Variable panel:
Click the control while in Design mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
Below are settings for the File Download control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Enter the string that provides a text alternative to this control for the following purposes:
Assistive technology, such as screen readers, read the Aria Label setting value.
This control has a visual indication of its purpose, such as a button that uses a graphic instead of text, but still needs to clarify that purpose for anyone who cannot access the visual indication.
Tab order determines the sequential navigation order to navigate a Screen's controls using a keyboard interface. Assistive technology users often use a keyboard for navigation.
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.
The image control may reference another control's Variable Name setting to display its value, such as to display the signature saved in a Signature control. The Signature control saves the signature as a PNG image.
This control is only available for the following Screen types:
See Screen Types.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
See the Screens permissions or ask your Administrator for assistance.
Follow these steps to add this control to the Screen:
View the Screen page to which to add the control.
Drag the Image icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Configure the Image control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is an Image control in Preview mode.
After adding a control to a Screen page, you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another Screen page.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.
Follow these steps to copy a control:
Select the control to be copied.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Follow these steps to delete a control from a Screen page:
Select the control to be deleted.
The Image control has the following panels that contain settings:
Click the control while in Design mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Image control in the Configuration panel:
Click the Upload button to browse for the GIF, JPG, or PNG file type image to upload to the Image control.
Do not use this setting to display a file referenced from a File Upload control.
In the Variable Name setting, enter the Request variable 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 Signature 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.
Click the control while in Design mode, and then click the Design panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Image control in the Design panel:
Click the control while in Design mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Image control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Add a control from which the Request participant can auto-complete an entered address, location, or business.
Use the Google Places package to allow Request participants to do the following in Form-type Screens:
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.
This control is only available for Form-type Screens. See Screen Types.
Below are a few ways to use the Google Places control:
To add a Google Places control to a Screen, the Google Places package must be installed.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
See the Screens permissions or ask your Administrator for assistance.
A ProcessMaker Platform package is required to do this.
Permissions are required to do this.
Follow these steps to add this control to the Screen:
View the Screen page to which to add the control.
Drag the Google Places icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Configure the Google Places control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Google Places control in Preview mode.
After adding a control to a Screen page, you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another Screen page.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.
Follow these steps to copy a control:
Select the control to be copied.
As a best practice, after copying a control, change the Variable Name setting value for the copied control to its own unique variable value. Otherwise, in-progress Requests that use this Screen read from and send data to both controls.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Follow these steps to delete a control from a Screen page:
Select the control to be deleted.
The Google Places control has the following panels that contain settings:
Click the control while in Design mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Line Input control in the Variable panel:
Use the Variable Name setting value in the following ways:
Reference this control's value in a different Screen Builder control. To do so, use mustache syntax and reference this control's Variable Name value in the target control. Example: {{ GooglePlacesControl }}
. See Reference Request Data from the Google Places Control in Other Controls.
Reference this value in Visibility Rule setting expressions.
See best practices when editing a Request variable name.
Follow these steps to add a validation rule to this control:
Access the Variable panel for this 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.
Follow these steps to edit a validation rule for this control:
Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.
Edit the parameter settings that this control uses to validate against. See Validation Rule Settings, and then locate the validation rule for its parameters.
Follow these steps to delete a validation rule for this control:
Access the Variable panel for this control while in Design mode, and then locate the Validation Rules setting.
Click Delete.
Click the control while in Design mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
Below are the settings for the Google Places control in the Configuration panel:
The following settings are available below the Enable Maps setting to configure the Google Map settings and the map's geographical location when the map displays:
Click the control while in Design mode, and then click the Design panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Google Places control in the Design panel:
Click the control while in Design mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Google Places control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
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 entire JSON data object that the Google API returns in the Request data. See the Google JSON API response key name descriptions to determine how to use JSON key name values in the response for Request data.
Review the Google's JSON API response often as Google revises it often and without notice.
Follow these guidelines to reference JSON object key names and/or arrays from Google's returned data object in other Screen 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 JSON dot notation:
variable_name
represents the Variable Name setting value for the Google Places control being referenced.
Below is the Google Places control selection for this example. The Google Places control's Variable Name setting value is the default google_places_1
.
If a Rich Text control references this Google Places control's entire selected address, use the following syntax in the Rich Text control's content using mustache syntax:
Reference the following JSON key name for the main text for the selected address or location as indicated in JSON dot notation:
variable_name
represents the Variable Name setting value for the Google Places control being referenced.
The Rich Text control displays the following during a Request:
Below is the Google Places control selection for this example. The Google Places control's Variable Name setting value is the default google_places_1
.
If a Rich Text 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 mustache syntax:
The Rich Text control displays the following during a Request:
Reference the following JSON key name for the secondary text for the selected address or location as indicated in JSON dot notation:
variable_name
represents the Variable Name setting value for the Google Places control being referenced.
The Rich Text control displays the following during a Request:
Below is the Google Places control selection for this example. The Google Places control's Variable Name setting value is the default google_places_1
.
If a Rich Text 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 mustache syntax:
The Rich Text control displays the following during a Request:
Reference the following JSON array for the place type(s) for the selected address or location as indicated in JSON dot notation:
variable_name
represents the Variable Name setting value for the Google Places control being referenced.
The Rich Text control displays the following during a Request:
Below is the Google Places control selection for this example. The Google Places control's Variable Name setting value is the default google_places_1
.
If a Rich Text 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 mustache syntax:
The Rich Text control displays the following during a Request:
Add a Page Navigation control from which the Request participant can go to another page in a multi-page Screen.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
View the Screen page to which to add the control.
Drag the Page Navigation icon into the Screen Builder canvas. Existing controls on the Screens Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Follow these steps to copy a control:
Select the control to be copied.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Select the control to be deleted.
The Page Navigation control has the following panels that contain settings:
Below is the setting for the Page Navigation control in the Variable panel:
Below is the setting for the Page Navigation control in the Configuration panel:
Below is the setting for the Page Navigation control in the Design panel:
Select the style for the Page Navigation control. The style changes the control's appearance but otherwise has no functional difference. Select from the following options:
Primary: Blue-colored background with white-colored Button Label text. This is the default option.
Secondary: Gray-colored background with white-colored Button Label text.
Success: Green-colored background with white-colored Button Label text.
Danger: Red-colored background with white-colored Button Label text.
Warning: Yellow-colored background with black-colored Button Label text.
Info: Teal-colored background with white-colored Button Label text.
Light: White-colored background with black-colored Button Label text.
Dark: Black-colored background with white-colored Button Label text.
Below are settings for the Page Navigation control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Enter the string that provides a text alternative to this control for the following purposes:
Assistive technology, such as screen readers, read the Aria Label setting value.
This control has a visual indication of its purpose, such as a button that uses a graphic instead of text, but still needs to clarify that purpose for anyone who cannot access the visual indication.
Tab order determines the sequential navigation order to navigate a Screen's controls using a keyboard interface. Assistive technology users often use a keyboard for navigation.
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:
Follow these steps to add a validation rule to a Screen Builder control that provides validation:
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.
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.
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 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.
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 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.
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 ExamplesThis 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:
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.
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.
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
.
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:
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.
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
.
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 ExamplesThis 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:
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.
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
.
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:
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.
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
.
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 displays a digital signature in Screens.
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
Follow these steps to add this control to the Screen:
View the Screen page to which to add the control.
Drag the Signature icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Follow these steps to copy a control:
Select the control to be copied.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Select the control to be deleted.
The Signature control has the following panels that contains settings:
Below are settings for the Signature control in the Variable panel:
Use the Variable Name setting value in the following ways:
Select the Required setting to clarify that the signature is required to submit the form.
Below is the setting for the Signature control in the Configuration panel:
The height may be set in any of the following units:
em unit, based upon the relative font-size of the parent font size (em)
inches (in)
percentage (%)
pixels (px)
relative to the viewpoint's height (vh)
relative to the viewpoint's width (vw)
rem unit, based upon the font-size value of the root element (rem)
100px is the default height setting.
If the entered value is not in the correct format, the following validation error displays: The Pad Height format is invalid..
Below are the settings for the Signature control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Add a control that displays HTML-formatted text.
Aside from rich text styles and images, the Rich Text control can display the following information regarding in-progress Requests:
Include your own HTML syntax in the Rich Text control along with Request data references. Example: Full Name: <p>{{ FullName }}</p>
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
View the Screen page to which to add the control.
Drag the Rich Text icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Follow these steps to copy a control:
Select the control to be copied.
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Select the control to be deleted.
The Rich Text control has the following panels that contain settings:
Below is the setting for the Rich Text control in the Configuration panel:
Alternatively, use the What-You-See-Is-What-You-Get (WYSIWYG) rich text editor to enter your text. Reference images in your content using HTML syntax. The WYSIWYG rich text editor also supports mustache syntax. Your text and/or images display in the Content setting using HTML syntax.
Follow these guidelines to use the WYSIWYG rich text editor to stylize your text:
Select the required text from the Rich Text control.
In the URL setting, enter the destination URL.
In the Text to display setting, edit or enter the text displayed in the Rich Text control.
In the Title setting, enter the text to display when a user hovers over the displayed text.
From Open link in… drop-down menu, select one of these options:
New window: Select this option to open the destination page in a new browser window.
Current window: Select this option to open the destination page in the current browser window.
Format text: Follow these guidelines to format text:
Headings: From the Formats menu, select Headings and then select a heading size.
Bold: Do one of the following:
From the Formats menu, select Inline and then Bold.
Italics: Do one of the following:
From the Formats menu, select Inline and then Italic.
Underline: From the Formats menu, select Inline and then Underline.
Strikethrough: From the Formats menu, select Inline and then Strikethrough.
Superscript: From the Formats menu, select Inline and then Superscript.
Subscript: From the Formats menu, select Inline and then Subscript.
Code: From the Formats menu, select Inline and then Code.
Paragraph: From the Formats menu, select Blocks and then Paragraph.
Blockquote: From the Formats menu, select Blocks and then Blockquote.
Division: From the Formats menu, select Blocks and then Div.
Preformatted: From the Formats menu, select Blocks and then Pre.
Select one of the color swatches from the color palette. The selected text changes to that color.
Align text: Follow these guidelines to align text:
Left align: Do one of the following:
From the Formats menu, select Align and then Left.
Center align: Do one of the following:
From the Formats menu, select Align and then Center.
Right align: Do one of the following:
From the Formats menu, select Align and then Right.
Justify: Do one of the following:
From the Formats menu, select Align and then Justify.
Below are settings for the Rich Text control in the Advanced panel:
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
See the following best practices regarding custom CSS in Screens:
Click the imagefor the option to be removed.
Create a new Screen or click the Edit iconto edit the selected Screen. The Screen is in Design mode.
Locate the Select List iconin the panel to the left of the Screen Builder canvas.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, and then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
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, SelectListControl
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.
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.
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.
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 Submit Button 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.
If the Upload multiple files setting 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.
Create a new Screen or click the Edit iconto edit the selected Screen. The Screen is in Design mode.
Locate the File Upload iconin the panel to the left of the Screen Builder canvas.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
Enter the name of the uploaded file. This setting has no default value.
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 MIME type.
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.
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 Submit Button 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.
Create a new Screen or click the Edit iconto edit the selected Screen. The Screen is in Design mode.
Locate the File Download iconin the panel to the left of the Screen Builder canvas.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
Enter the name of the download file. This setting has no default value.
Edit the default label that displays for this control if necessary. New File Download is the 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.
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 Submit Button 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.
Create a new Screen or click the Edit iconto edit the selected Screen. The Screen is in Design mode.
Locate the Image iconin the panel to the left of the Screen Builder canvas.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
Enter the alphanumeric name that identifies the image in this Screen.
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 Signature control.
After selecting the Render image from a variable name setting, the Variable Name setting 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 Width 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 Height 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 Expression Syntax Components. If this setting does not have an expression, then this control displays 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.
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.
Create a new Screen or click the Edit iconto edit the selected Screen. The Screen is in Design mode.
Locate the Google Places iconin the panel to the left of the Screen Builder canvas.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
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.
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, GooglePlacesControl
is the Variable Name setting's value.
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 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.
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 Enable Maps setting is selected.
Allow the Request participant to select a location in the map. When this setting is disabled, the Center Map setting 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 Enable Maps setting 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 Enable Maps setting 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 Enable Maps setting 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 Enable Maps setting 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 Enable Maps setting 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 Enable Maps setting is selected and the Enable Geolocate setting 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 Enable Maps setting 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 Expression Syntax Components. If this setting does not have an expression, then this control displays 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 Page Navigation control adds a button from which the participant can go to another page in a multi-page . See a .
This control is only available for -type Screens. See .
See the permissions or ask your Administrator for assistance.
.
.
Follow these steps to add this control to the :
or click the Edit iconto edit the selected Screen. The Screen is in .
Locate the Page Navigation iconin the panel to the left of the Screen Builder canvas.
Configure the Page Navigation control. See .
Validate that the control is configured correctly. See .
Below is a Page Navigation control in .
After , you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another page.
.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that page.
.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
.
Follow these steps to delete a control from a page:
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
.
Click the control while in mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
Enter the text label that displays for this control. Page Navigation is the default value. See a .
Click the control while in mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
Select the destination page to which to navigate in a multi-page . 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.
Click the control while in mode, and then click the Design panel that is on the right-side of the Screen Builder canvas.
Link: White-colored background with blue-colored Button Label text.
Click the control while in mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
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.
.
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.
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
control
control
control
control
Access the Variable panel for the control while in 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.
If you want a validation to fail for undefined or ''
, use the rule.
.
.
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.
.
.
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 .
.
From the Select drop-down menu in the Validation Rules setting, select In. The Values parameter setting displays.
The following JSON Request data represents the JSON array for a control under evaluation.
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.
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 .
.
From the Select drop-down menu in the Validation Rules setting, select Not In. The Values parameter setting displays.
The following JSON Request data represents the JSON array for a control under evaluation.
Entered Value | Validation Rule evaluation |
---|
Need a primer on regular expression syntax? See this , and then use to learn, build, and test your regular expressions.
.
From the Select drop-down menu in the Validation Rules setting, select Regex. The Regex Pattern setting displays.
.
Use the Required If
validation rule to validate that this control has a value and is not empty if another control in that page contains a specific value. If the control being monitored contains a specific value, then the control under evaluation is required. See .
The Required If
validation rule is the inverse of the .
.
From the Select drop-down menu in the Validation Rules setting, select Required If. The Variable Name and Variable Value parameter settings display.
A participant enters information into a for a job application. If that Task assignee selects from a 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.
Add a , and then . Make note of its Variable Name setting value you set for that control. This control displays the list of countries as its options.
. In doing so, edit options as JSON:
. In doing so, edit options as JSON:
Add a Required If
to the second Select List control that displays the list of US states and territories.
to the same Screen page, and then .
A participant enters information into a for a job application. If that Task assignee selects the Yes option from a control labeled Have you been convicted of a felony within the past 10 years?, a control labeled Describe your felony conviction. becomes required. The Task assignee cannot submit the form without describing the felony conviction(s).
Add a , and then . Make note of its Variable Name setting value you set for that control.
. In doing so, provide the following values:
to the same Screen page, and then .
Add a Required If
to the Textarea control.
to the same Screen page, and then .
Use the Required Unless
validation rule to validate that this control has a value and is not empty unless another control in that 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 .
The Required Unless
validation rule is the inverse of the .
.
From the Select drop-down menu in the Validation Rules setting, select Required Unless. The Variable Name and Variable Value parameter settings display.
A participant enters information for a regarding United States (US) federal taxes. If that Task assignee selects from a 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 control becomes required to enter tax information. If any other option is selected, then the Line Input control is not required.
Add a , and then . 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.
. In doing so, edit options as JSON:
Add a Required Unless
to the Line Input control control.
to the same Screen page, and then .
A participant enters information for a 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 control the option 65 years old or older, then a control is not required. If any other option is selected, then the Textarea control is required.
Add a , and then . Make note of its Variable Name setting value you set for that control.
. In doing so, provide the following values that represent demographic age groups:
to the same Screen page, and then .
Add a Required Unless
to the Textarea control.
to the same Screen page, and then .
.
From the Select drop-down menu in the Validation Rules setting, select Same. The Values parameter setting displays.
.
The Signature control allows the 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 control by .
This control is only available for -type Screens. See .
To add a Signature control to a Screen, the must be installed.
See the permissions or ask your Administrator for assistance.
.
.
.
​ or click the Edit iconto edit the selected Screen. The Screen is in .
Locate the Signature iconin the panel to the left of the Screen Builder canvas.
​​
Configure the Image control. See .
Validate that the control is configured correctly. See .
Below is a digital Signature added in .
After , you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another page.
.
.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that page.
.
.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
As a best practice, after copying a control, change the value for the copied control to its own unique variable value. Otherwise, in-progress that use this Screen read from and send data to both controls.
.
.
Follow these steps to delete a control from a page:
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
.
.
​
Click the control while in mode, and then click the Variable panel that is on the right-side of the Screen Builder canvas.
​
​
Enter the alphanumeric name that identifies this. This field is required.
Reference this control by its Variable Name setting's value. The Data Preview panel in 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.
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: {{ SignatureControl }}
.
Reference this value in .
See when editing a Request variable name.
Click the control while in mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
Set the vertical spacing of the Signature control's pad: the space into which the signature is entered.
Click the control while in mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
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.
.
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.
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 participant. Reference an image to display in the Rich Text control using HTML syntax. See a .
Request data: Display the value of another control in the same or different by referencing that control's Variable Value setting value using : 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.
Magic Variable values: Display the value of a by referencing the Magic Variable using mustache syntax. Example: {{ _user.fullname }}
. Spaces surrounding the Magic Variable reference are allowed.
See the permissions or ask your Administrator for assistance.
.
.
Follow these steps to add this control to the :
or click the Edit iconto edit the selected Screen. The Screen is in .
Locate the Rich Text iconin the panel to the left of the Screen Builder canvas.
Configure the Rich Text control. See .
Validate that the control is configured correctly. See .
Below is a Rich Text control in .
After , you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another page.
.
Place your cursor anywhere on the control not displaying the Duplicate Controlor Delete Controlbuttons.
Hold your cursor, then drag the control above or below other controls on that Screen page. Screen Builder previews where the control would display on the page based on how you position the control above or below other controls. If the control cannot be placed in a location because your cursor is above an existing control or too far to the left or right of the page, theicon displays in the preview.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that page.
.
Click the Duplicate Control button. The control copies with its current settings, and then displays below other controls placed on that page.
.
Follow these steps to delete a control from a page:
Click the Delete button. The control deletes. Other controls on that Screen page adjust their locations automatically.
.
Click the control while in mode, and then click the Configuration panel that is on the right-side of the Screen Builder canvas.
Enter the text and/or image to display in the Rich Text control using HTML syntax (see a ) and/or . Rich text editor is the default value. See this for information how to use mustache syntax.
Ensure that all Rich Text controls implemented in a -type Screen contain content in their Content settings. See .
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.
Click the control while in mode, and then click the Advanced panel that is on the right-side of the Screen Builder canvas.
Enter 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.
Do not to use visibility rules with Screens. Some email clients that do not render natively from a web browser, such as Microsoft Outlook or Mozilla Thunderbird for the desktop, alter the HTML during rendering and may break visibility rules.
.
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.
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 |