Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Understand how to use controls to design your Screens.
Add a control that uses ProcessMaker's Artificial Intelligence (AI) to generate Screen components that use natural language to describe how they work.
Use ProcessMaker's AI Assistant to generate a Screen without knowing how to use Screen Builder controls. From within Screen Builder, use the AI Generated control to use ProcessMaker Artificial Intelligence (AI) to generate functional Screen controls by describing in natural language how those controls function.
AI Generated controls are a no-code way to design a Screen quickly:
Add an AI Generated control to your Screen.
Enter text into the AI Generated control using almost any natural language that describes the functional needs of a section or the entirety of your Screen. You may enter your natural language Screen description in one language, but specify that the Screen user interface labels be in a different language. Multiple AI Controls may be used in a Screen, one to describe and generate different sections of that Screen without even understanding what each Screen Builder control does.
The AI Generated control previews the layout of the Screen based on its interpretation of your natural language.
Optionally regenerate a new preview based on the same or different description, or accept the layout.
After accepting the layout preview, the AI Generated control renders the preview into functional controls that are ready to use. You may further configure those controls if necessary: these are now standard controls like any other.
The following Screen Builder controls are supported. These are listed in alphabetical order.
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 AI Generated icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
After the AI Control renders the control(s) for your Screen, review configuration settings and then validate your Screen.
The AI Control does not render in Preview mode until the AI-generated components are applied to the Screen. In Preview mode the following message displays: AI Assistant is unavailable until you apply changes.
After adding an AI Generated control to a Screen page, enter a functional natural language description for the Screen components that the AI Generated control will generate.
Follow these steps to describe how the Screen components are to function:
Select the AI Generated control into which to enter your natural language description of its functionality.
In the Description setting, enter a functional natural language description for the components that the AI Generated control will generate. One AI Generated control description may use no more than 1000 tokens. A token is a common sequence of characters found in text for a particular language. Generally, one token corresponds to approximately four (4) characters of common English-language text. This corresponds to approximately 100 tokens to about 75 words in English. To the right of the Description label displays how many tokens your description currently uses. If your description exceeds 1000 tokens, shorten the length of your description.
Click the Generate button. The AI Generated control displays a progress bar for the percentage completion of a Screen preview based on your description. When complete, a preview of your Screen control(s) displays within the AI Generated control. Use this preview to evaluate if the AI Generated control provides the control(s) you intended.
Do one of the following:
Regenerate the preview: Revise and/or regenerate the AI Generated control's preview of the Screen layout based on the same or a different description.
Accept the preview: Click the Apply Changes button above the preview. The AI Generated control immediately renders the preview as functional controls which can be configured from the default settings the AI Generated control provides. The Variable Name setting for each rendered control uses a placeholder value since this setting is required for all controls.
See Move a Control on the Page.
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 AI Generated control has the following panels that contain settings:
Enter a functional natural language description for the components that the AI Generated control will generate. As you enter a description, the number of tokens that the AI Generated control will use to generate those components displays. A maximum of 1000 tokens may be used per AI Generated control. See Describe the Functional Components for Your Screen Using Natural Language.
Below are settings for the AI Generated 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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
The AI Generated control does not render in Preview mode until the AI-generated components are applied to the Screen. In Preview mode the following message displays: AI Assistant is unavailable until you apply changes.
See the following best practices regarding custom CSS in Screens:
Add a control that has Bootstrap Wrapper support.
ProcessMaker Platform supports BootstrapVue components to add in Forms. Use BootstrapVue to display responsive, mobile-first, and ARIA accessible forms projects on the Web. Configure Bootstrap Wrapper control calling another Page through another component using JSON format.
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:
Create a Form Screen or edit a Form Screen in which to add the control.
Drag the Bootstrap Wrapper 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. The Bootstrap Wrapper displays as follows.
Configure the Bootstrap Wrapper control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
See Move a Control on the Page.
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 Variable panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Image 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 Bootstrap Component control using its Variable Name value in the Request's JSON data model.
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: {{ BootstrapWrapperComponent }}
.
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 Bootstrap Wrapper control in the Configuration panel:
In the Bootstrap vue component setting, select one of the following BootstrapVue components for the wrap supported by ProcessMaker Platform. The following hyperlinks reference BootstrapVue documentation for their descriptions:
Refer to the following BootstrapVue documentation for property descriptions to each available wrap component:
For example, if using the property ok-title
and size
, enter:
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:
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
Add a control that has BootstrapVue Component library support.
ProcessMaker Platform supports BootstrapVue components to add in Forms. Use BootstrapVue to display responsive, mobile-first, and ARIA accessible forms projects on the Web. Configure the Bootstrap Component control using the component properties in JSON format.
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:
Create a Form Screen or edit a Form Screen in which to add the control.
Drag the Bootstrap Component 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. The Bootstrap Component control displays as follows.
Configure the Bootstrap Component control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
See Move a Control on the Page.
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 Variable panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Image 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 Bootstrap Component control using its Variable Name value in the Request's JSON data model.
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: {{ BootstrapFormComponent }}
.
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 settings for the Bootstrap Component control in the Configuration panel:
In the Bootstrap vue component setting, select one of the following BootstrapVue components ProcessMaker Platform supports. The following hyperlinks reference BootstrapVue documentation for their descriptions:
Refer to the following BootstrapVue documentation for property descriptions to each available component:
For example, if using the property src
and fluid
, enter:
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:
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
Add a control that has Google Captcha support.
The Captcha control is used to distinguish between human users and automated bots. Use this control to confirm that the human is filling out the form and prevent spam, fraud, and other malicious activities.
Watch the following product tour to learn how to use a Captcha control.
Follow these steps to add this control to the Screen:
Drag the Captcha 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. The Captcha displays as follows.
The Captcha control has the following panels that contain settings:
Below are the settings for the Captcha control in the Variable panel:
Use the Variable Name setting value in the following ways:
Below are the 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:
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
Follow these steps to copy a control:
Select the control to be copied.
Deleting a control also deletes the configuration for that control. If you add another control, it will have default settings.
Select the control to be deleted.
Expand the AI Assistant category to the left of the Screen Builder canvas, and then locate the AI Generated icon .
Place into the Screen Builder canvas where you want the control to display on the Screen.
Expand the Configuration panel to the right of the right-side of the Screen Builder canvas if it is not already. The Description setting displays.
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.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Expand the Advanced category to the left of the Screen Builder canvas, and then locate the Bootstrap Wrapper icon .
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 Bootstrap Wrapper is the default value.
The Modal setting is selected by default.
In the page setting, select a page created in the same Screen to use in the component selected previously.
In the Config setting, enter in JSON format component BootstrapVue properties.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Expand the Advanced category to the left of the Screen Builder canvas, and then locate the Bootstrap Component icon .
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 Bootstrap Component is the default value.
Enter the validation rule(s) the Request participant must comply with to properly enter a valid value into this control. This setting has no default value. If there are no configured validation rules the following message displays: No validation rule(s). See Validation Rules for "Validation" Control Settings.
Click the Add Rule button. The Select drop-down menu displays.
Click the Edit iconfor the validation rule to edit if that rule can be edited. Validation rules that do not have parameters cannot be edited. The parameter settings for that validation rule displays.
Click the Delete iconfor the validation rule to delete. A message displays to confirm deletion of the validation rule.
Select to indicate that this control is required. This option is not selected by default. This is a quick way to add the Required validation rule.
In the Screen preview or during a Request if you submit the Screen without selecting this required Bootstrap Component control, this control displays Field is required in red-colored text.
The Form Tags setting is selected by default.
In the Config setting, enter in JSON format component BootstrapVue properties.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
This control is only available for -type Screens. See .
See the permissions or ask your Administrator for assistance.
.
or in which to add the control.
Expand the Advanced category to the left of the Screen Builder canvas, and then locate the Captcha icon .
Configure the Captcha control. See .
Validate that the control is configured correctly. See .
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 represents the state of the Captcha control using its Variable Name value in the Request's JSON data model.
Reference this control's value in a different Screen Builder control. To do so, use and reference this control's Variable Name value in the target control. Example: {{ Captcha }}
.
Reference this value in .
See when editing a Request variable name.
Select to indicate that this control is required. This option is selected by default.
Click the control while in mode, and then click the Configuration panel that is on the right side of the Screen Builder canvas. Below is a setting for the Captcha control in the Configuration panel.
In the Google reCaptcha Sitekey setting, enter the Google site key. For more information on how to get a site key, see .
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.
.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
See .
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.
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.
See Move a Control on the Page.
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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
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 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.
See Move a Control on the Page.
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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
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.
See Move a Control on the Page.
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.
Below is a demo using Validation Rules in a Date Picker control.
Below is another demo using Validation Rules in a Date Picker control with Calculated Properties as variables.
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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
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.
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.
See Move a Control on the Page.
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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
See the following best practices regarding custom CSS in Screens:
Add a control to which the Request participant can upload a file from a local computer.
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 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.
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 File Upload control has the following panels that contain settings:
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.
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 1:
Example 2:
To successfully upload .DOCX
files, add the MIME type for .DOCX
to the file accepted configuration:
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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
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.
Expand the Files category to the left of the Screen Builder canvas, and then locate the File Download icon.
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.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
The Aria Label setting value replaces the Label setting value. For example, if a 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.
Expand the Input Fields category to the left of the Screen Builder canvas, and then locate the Checkbox icon.
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 required. This option is not selected by default. This is a quick way to add the Required validation rule.
In the Screen preview or during a Request, the control displays with a red-colored asterisk. If you submit the Screen without selecting this required Checkbox, this control displays Field is required in red-colored text.
Select to indicate that this control 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.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
The Aria Label setting value replaces the Label setting value. For example, if a 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.
Expand the Input Fields category to the left of the Screen Builder canvas, and then locate the Date Picker icon.
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 is required. This option is not selected by default. This is a quick way to add the Required validation rule.
In the Screen preview or during a Request, the control displays with a red-colored asterisk. If you submit the Screen without selecting this required Checkbox, this control displays Field is required in red-colored text.
Select to indicate that this control cannot be edited. This option is not selected by default.
Enter the placeholder text that displays in this control when no value has been provided. This setting has no default value.
Enter text that provides additional guidance on this control's use. This setting has no default value.
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.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
The Aria Label setting value replaces the Label setting value. For example, if a 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.
Expand the Files category to the left of the Screen Builder canvas, and then locate the File Preview icon.
Place into the Screen Builder canvas where you want this control to display the file preview on the Screen.
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.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
The File Upload control adds an area in the to which the 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 . The file remains available from that Request's summary regardless of that Request's status.
If the is selected for a File Upload control, the Screen user may upload multiple files. After uploading multiple files, any uploaded file may be removed from the File Upload control by clicking the Remove iconfor that file prior to submitting that Screen.
The File Upload control is not available in .
This control is only available for -type Screens. See .
Need a solution to upload multiple files to a Screen that limits the number of files that maybe uploaded to a File Upload control? See how to use a control to .
See the permissions or ask your Administrator for assistance.
.
.
Follow these steps to add this control to the :
Expand the Files category to the left of the Screen Builder canvas, and then locate the File Upload icon.
Configure the File Upload control. See .
Below is a File Upload control in .
See .
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 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.
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 file type(s) this control accepts to upload by referencing its .
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.
.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
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.
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.
See Move a Control on the Page.
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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
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 control that displays the logged on user's Tasks, Requests, or Requests that can be started.
The List Table control displays the logged on user's Tasks, Requests, or Requests that can be started. Use this control to easily design a custom Request participant Welcome Screen.
This control is only available for the Display-type Screen. 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 List Table icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Configure the List Table control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a List Table control in Preview mode.
See Move a Control on the Page.
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.
Permissions are required to do this.
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 List Table 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 is the setting for the List Table control in the Configuration panel:
Select one of the following options that displays the selected list for the logged on user:
My Tasks: Select the My Tasks option to display the logged on user's Task list. By default, assigned Tasks display.
My Requests: Select the My Requests option to display the logged on user's Request list. This list displays both Requests the logged on user started and is a participant. By default, in-progress Requests display.
Start new Request: Select the Start new Request option to display Requests that the logged on user may start.
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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
See the following best practices regarding custom CSS in Screens:
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.
See Move a Control on the Page.
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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
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.
The Line Input control is a text field that the Request participant can enter information. Configure the Line Input control to accept one of the following data types:
Text: The control only accepts alphanumeric characters.
Integer: The control only accepts integers.
Currency: The control only accepts a currency value.
Percentage: The control only accepts a percentage value.
Decimal: The control only accepts any number, both positive and negative.
Datetime: The control only accepts a datetime, which is includes both date and time components.
Date: The control only accepts a date.
Password: The control accepts a password. Entered text is hidden.
As a best practice when a Vocabulary validates the JSON in a Screen for a datetime value, use a Date Picker control instead of a Line Input control.
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 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.
Configure the Line Input control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Line Input control in Preview mode.
See Move a Control on the Page.
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 Line Input 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: {{ LineInputControl }}
.
Reference this value in Visibility Rule setting expressions.
See best practices when editing a Request variable name.
Ensure that all Line Input controls implemented in a Conversational-type Screen contain Label setting values. See Controls in Conversational-Type Screens Require Labels.
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:
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 Line Input 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 Line Input 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 Line Input 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.
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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
Date, SSN and Phone mask pattern display as examples.
Use the following mask components to compose your mask pattern:
Examples
Additionally, to ensure that users enter the correct number of digits, use Validation Rules to set Max Length and Min Length of this control to 9
.
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.
This custom format input overrides any other formatting set by default, including the one described when using scripts.
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 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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
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 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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
See the following best practices regarding custom CSS in Screens:
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.
Expand the Advanced category to the left of the Screen Builder canvas, and then locate the Google Places icon.
Place into the Screen Builder canvas where you want the control to display on the Screen.
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.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Expand the Files category to the left of the Screen Builder canvas, and then locate the List Table icon in 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.
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.
One List Table control may display one list. Note that this control should not be used on an anonymous Web Entry Task.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Expand the Content Fields category to the left of the Screen Builder canvas, and then locate the Image icon.
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.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Expand the Input Fields category to the left of the Screen Builder canvas, and then locate the Line Input icon.
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 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.
Edit the default label that displays for this control if necessary. New Input 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 is required. This option is not selected by default. This is a quick way to add the Required validation rule.
In the Screen preview or during a Request, the control displays with a red-colored asterisk. If you submit the Screen without selecting this required Checkbox, this control displays Field is required in red-colored text.
Select to indicate that this control cannot be edited. This option is not selected by default.
Enter the placeholder text that displays in this control when no value has been provided. This setting has no default value.
Enter text that provides additional guidance on this control's use. This setting has no default value.
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.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter a mask pattern to require a custom input format. If this setting does not have a mask pattern, then this control adds plain text without formatting.
Set the Social Security Number (SSN) using the mask pattern ###-##-####
. Then, the Line Input control only allows numeric values with that pattern.
Set a US phone number using the mask pattern +1 (###) ###-####
. Then, the Line Input control only allows numeric values preceding the US telephone code by default.
Set a car license plate that complies with the format for a specific US state, such as AAA ###
. Then, the Line Input control only allows upper case alphabetic characters followed by numeric values.
The Data Preview panel displays the entered text without the mask patterns.
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.
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 :
Expand the Content Fields category to the left of the Screen Builder canvas, and then locate the Multicolumn / Table icon.
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 .
See .
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.
.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
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 :
Expand the Content Fields category to the left of the Screen Builder canvas, and then locate the Loop icon.
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 .
See .
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.
.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
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 Nested Screen control into which select a separate Screen that is in your ProcessMaker Platform instance.
Use the Nested Screen control to nest a separate Screen into that control. In doing so, the separate Screen embeds into the Nested Screen control. The Nested Screen control is a placeholder for the embedded Screen such that the Request participant experiences the nested Screen as designed. When the Task loads the Screen using a Nested Screen control, the Nested Screen loads the latest version of the referenced Screen.
The Screen containing the Nested Screen control is the parent Screen. The Screen that is nested is the child Screen.
During an in-progress Requests, both Request and Magic Variable data pass to a child Screen when it displays within the parent Screen. Furthermore, information that is entered into a child Screen displays in Request summaries that use the parent Screen.
A nested Screen has the following attributes that vary from how it may have been designed:
CSS takes precedent: Any CSS designed in Custom CSS mode in the parent Screen takes precedent over any CSS designed in the child (nested) Screens. The Request participant experiences one design experience without a variety of design styles.
Submit Button control in nested Screens is hidden: During in-progress Requests, the Submit Button control is hidden in child Screens so that the Request participant uses the parent Screen's Submit Button control to submit the Task.
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
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 Nested Screen icon into the Screen Builder canvas. Existing controls on the Screens Builder canvas adjust positioning based on where you drag the control.
Configure the Nested Screen control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Nested Screen control in Preview mode.
See Move a Control on the Page.
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.
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.
Follow these steps to delete a control from a Screen page:
Select the control to be deleted.
The Nested Screen 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 Nested Screen 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 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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
See the following best practices regarding custom CSS in Screens:
Add a Page Navigation control from which the Request participant can go to another page in a multi-page Screen.
The Page Navigation control adds a button from which the Request participant can go to another page in a multi-page Screen. See a design example.
This control is only available for Form-type Screens. See Screen Types.
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 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.
Configure the Page Navigation control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Page Navigation control in Preview mode.
See Move a Control on the Page.
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 Page Navigation 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 Page Navigation control in the Variable panel:
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 Page Navigation 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 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.
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 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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
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 captures a photo or video from the Screen user.
The Photo/Video control has the following functionality:
Designing the control: While designing the Screen as a Process Designer, select whether a selected Photo/Video control is used to capture a photo or video when the Screen user interacts with that control. Optionally select a custom overlay that displays over the real-time capture area.
Using the control: Based on how the Process Designer configured that Photo/Video control, the Screen user may capture one photo or video directly from a laptop camera or mobile device. While doing so, an overlay image can display over the control to guide the Screen user to frame what the control captures. That user may evaluate in real-time with the control overlay whether the capture is appropriate and adequate quality. For example, the overlay can help frame taking a photograph of oneself or a national ID card to submit for an application process.
Send the captured video or photo to ProcessMaker IDP: After the photo or video is captured, send it to a ProcessMaker IDP folder for processing using a specified document type. Note that prior to the Screen user capturing a photo or video, ensure to configure which ProcessMaker IDP folder(s) the captured photo or video may be sent after capture. You may need to ask your ProcessMaker IDP Administrator for assistance.
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 Photo/Video 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. The following message displays in the control to indicate that the Photo/Video control does not capture while in Design mode: Photo/Video is unavailable in design mode..
Configure the Photo/Video control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Photo/Video control in Preview mode.
See Move a Control on the Page.
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 Variable panel that is on the right-side of the Screen Builder canvas.
Below are settings for the Image 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 Photo/Video control using its Variable Name value in the Request's JSON data model.
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: {{ PhotoVideoControl }}
.
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 Photo/Video control in the Configuration panel:
Select one of the following that this control captures:
Photo: Select the Photo option to capture a still image from the device. Use this option to record a photograph of the face or a national ID card. This is the default option.
If the device has more than one camera available, such as a front and rear camera, optionally switch between them in Preview mode and during use.
Enable the Send to IDP toggle key to send the captured photo or video to a pre-configured ProcessMaker IDP folder.
If the Send to IDP toggle key is enabled but at least one ProcessMaker IDP folder is not already configured, then the following message displays when the Screen opens: 401 Unauthorized: Unable to access the IDP folders. The folders may not be configured for your environment or may not exist. Please contact your administrator. Ensure to configure a ProcessMaker IDP folder prior to deploying this Screen to production.
Understand How to Specify a Document Type
Use a Request variable to indicate the name of the Document_Type
Domain's Name setting value in ProcessMaker IDP that the IDP connector uses to process the document(s). This setting does not refer to a file type, such as PDF
or DOCX
. Instead, this setting refers to the name of the document type in ProcessMaker IDP that has been previously trained to process document(s) in your Dossier. Note that this setting requires the Document_Type
Domain's Name setting value, not its Pretty Name setting value. Reference this Request variable using mustache syntax.
To see the document types available on your ProcessMaker IDP instance, see the note Determine Which Document Type to Use in Enter the Document Type to Process section.
Understand How to Configure to Which ProcessMaker IDP Folder to Store the Processed Document(s)
Configure to which existing ProcessMaker IDP folder to store the processed document(s). Configure this folder in one of two ways:
Enter a Request variable that contains reference to the folder.
Select the folder from the Select Destination drop-down menu. Note the following:
The folder must already exist in ProcessMaker IDP. This setting does not create the folder.
In the IDP tab within Settings, the destination folder(s) must be configured to be available for use in ProcessMaker Platform.
Follow these steps to use intelligent capturing:
In the Document Type setting, enter using mustache syntax the Request variable that indicates the Entity in ProcessMaker IDP that the IDP connector uses to process the document(s).
From the Select Destination setting, do one of the following:
Use a Request Variable to configure the folder:
Select the Use Request Variable setting. An edit box replaces the drop-down menu.
In the edit box, enter the Request variable name without mustache syntax that specifies the folder name and then press Enter.
Select the folder:
Ensure that the Use Request Variable setting is not selected.
From the drop-down menu, select to which ProcessMaker IDP folder to store processed documents.
Optionally, click the Upload Overlay button to upload a custom overlay that displays over the real-time capture area prior to recording the photo or video. The following file types are supported:
GIF
JPG
PNG
WebP
When an overlay is uploaded, a preview displays below the Upload Overlay button.
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:
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
Add a control that displays HTML-formatted text.
The Rich Text control displays HTML-formatted text and images. Use the What-You-See-Is-What-You-Get (WYSIWYG) editor to display a variety of text styles for the Request participant. Reference an image to display in the Rich Text control using HTML syntax. See a design example.
Aside from rich text styles and images, the Rich Text control can display the following information regarding in-progress Requests:
Request data: Display the value of another control in the same or different Screen by referencing that control's Variable Value setting value using mustache syntax: encapsulate the Variable Name setting value between {{
and }}
that represent mustache syntax. In doing so, you are referencing Request data. Spaces surrounding the Request data reference are allowed. During the Request, the Rich Text control references the Request data to locate that control's value to display it in the Rich Text control.
Include your own HTML syntax in the Rich Text control along with Request data references. Example: Full Name: <p>{{ FullName }}</p>
Magic Variable values: Display the value of a Magic Variable by referencing the Magic Variable using mustache syntax. Example: {{ _user.fullname }}
. Spaces surrounding the Magic Variable reference are allowed.
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 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.
Configure the Rich Text control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Rich Text control in Preview mode.
See Move a Control on the Page.
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 Rich Text 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 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.
Ensure that all Rich Text controls implemented in a Conversational-type Screen contain content in their Content settings. See Controls in Conversational-Type Screens Require Labels.
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.
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 Rich Text 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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
See the following best practices regarding custom CSS in Screens:
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.
See Move a Control on the Page.
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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
See the following best practices regarding custom CSS in Screens:
Add a control that displays a Saved Search chart.
Use the Saved Search Chart control to visualize Saved Search results directly within Screens in the following ways:
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:
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
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.
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.
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 Saved Search Chart control has the following panels that contains settings:
Below are the settings for the Saved Search Chart control in the Configuration panel:
Select the type of chart. These are the options:
Saved Search: Select this option to display charts in Form Screens.
Analytics: Select this option to display charts in the Analytic Dashboard.
Home Page: Select this option to display charts in the home page.
When the Analytics option is selected in the Type setting, the Analytics Management setting displays, as shown below. Use this setting to select which Dashboard tab displays the chart.
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.
Below is the setting for the Saved Search Chart control in the Advanced panel:
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
Add either a checkbox- or multi-select drop-down menu-style control from which the Request participant selects one or more options.
Set options that display in this control in one of the following ways:
Provide each option: For each option, enter a unique value that represents the option, and then enter the text that displays as the option. After your options are configured, sort the order in which they are to display in the control. Alternatively, provide options in the control in JSON format.
Reference data in a Request Variable: Reference data from the in-progress Request as options in this control. This data object must be part of the Request's JSON data model.
This control is only available for the following Screen types:
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.
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 Select List icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
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 Select List control has the following panels that contain settings:
Below are settings for the Select List control in the Variable panel:
Use the Variable Name setting value in the following ways:
Create a Calculated Property and set the Property Name setting to accountName
.
In the JavaScript setting, enter the following JavaScript code:
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 Select List control in the Configuration panel:
From the Data Source panel, select one of the following methods to specify options that display in the Select List control:
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:
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:
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.
Follow these steps to reference data from the in-progress Request as options in this control:
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:
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"
Selecting City Name
in Label and Value displays the name of all cities in the Select List control and save the name of the selected city in Request data.
Selecting City Name
in Label and Zip Code
in Value, displays a list of cities, but saves the Zip Code of the selected city in Request data.
Below are settings for the Select List control in the Design panel:
Below are settings for the Select List 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.
If you need to compare default values other than a String-type value, enter the default value using JavaScript.
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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
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
Expand the Content Fields category to the left of the Screen Builder canvas, and then locate the Nested Screen icon.
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.
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 which Screen to nest into this control. The nested Screen becomes the child Screen to the parent Screen that uses the Nested Screen control. Any Screen type may be selected for nesting into a Nested Screen control. However, only Form- and Display-type Screens preview in either Design or Preview modes.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Expand the Navigation category to the left of the Screen Builder canvas, and then locate the Page Navigation icon.
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 text label that displays for this control. Page Navigation is the default value. See a design example.
Select the destination page to which to navigate in a multi-page Screen. Current pages in the multi-page Screen display. If the Screen contains only one page, the Destination Screen setting displays No Data Available when selected.
Link: White-colored background with blue-colored Button Label text.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
The Aria Label setting value replaces the Label setting value. For example, if a 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.
Expand the Input Fields category to the left of the Screen Builder canvas, and then locate the Photo/Video icon .
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 Photo Video is the default value.
Select to indicate that this control is required for the user to submit the Screen. This option is not selected by default.
Enter text that provides additional guidance on this control's use. This setting has no default value.
Video: Select the Video option to capture a video from the device.
Enable the Send to IDP toggle key. The Document Type setting displays.
Enter the file name that the control saves the capture. Optionally use mustache syntax to set this value. This is a required setting.
Below is an example in Preview mode.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Expand the Content Fields category to the left of the Screen Builder canvas, and then locate the Rich Text icon.
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 text and/or image to display in the Rich Text control using HTML syntax (see a design example) and/or mustache syntax. Rich text editor is the default value. See this control's description for information how to use mustache syntax.
Undo changes: Click on theicon to undo the last action.
Redo changes: Click on theicon to redo the last undone action.
Insert/Edit links: Click on theicon to convert the selected text into a hyperlink. Follow these steps to create a hyperlink:
Click on theicon. The Insert/Edit Link screen displays.
From the editor toolbar, select theicon.
From the editor toolbar, select theicon.
Change text color: Use the Text Color drop-down to change text color. Click on theicon. The color palette displays. Do one of the following:
Click theicon to select a custom color from the Color Picker.
Click theicon to reset the text to its default color.
From the editor toolbar, use theicon to left- align text.
From the editor toolbar, use theicon to center-align text.
From the editor toolbar, use theicon to right-align text.
From the editor toolbar, use theicon to justify text.
Insert a bullet list: Use theicon to format text as a bulleted list.
Insert a numbered list: Use theicon to format text as a numbered list.
Indent text: Click on theicon to increase text indenting.
Outdent text: Click on theicon to decrease text indenting.
Select the Render HTML from a Variable setting to not show HTML syntax, but instead render the HTML syntax. If the Render HTML from a Variable setting is not selected, then the Rich Text control displays the HTML syntax. If a Request variable from which the Rich Text control references its data contains HTML syntax, select this setting to render that HTML.
Enter an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
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.
Expand the Content Fields category to the left of the Screen Builder canvas, and then locate the Record List icon.
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.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Edit the default Variable Name setting value for this control if necessary. The Variable Name setting value represents data in this control during Requests. Ensure that the Variable Name setting value is a unique name from other controls in this Screen and contains at least one letter. This is a required setting.
Edit the default label that displays for this control if necessary. New Record List is the default value.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Click the iconbeside the Column label. The Add Column screen displays.
Click Save. The column header displays in the Column list label.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Click theicon for a column to change its settings. The Edit Option screen displays.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Click theicon for the column to be deleted from this control. A message displays to confirm deletion of the option.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Drag theicon for each column up or down to sort the order they display in this control as necessary.
Access the Columns panel for this control while in Design mode, and then locate the Column setting.
Click the Edit as JSON option below the Column list label if this option does not currently displayed.
Click the iconbeside the JSON Data option. The Script Config Editor displays.
Click Close or the Close icon. The control columns are saved.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components for "Visibility Rule" Control Settings. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
The Saved Search Chart control embeds a from a into a . 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 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 in your organization by allowing anonymous users access ProcessMaker via the .
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.
type
type
See .
To add a Saved Search Chart control to a Screen, the must be installed.
See the permissions or ask your Administrator for assistance.
.
.
.
Expand the Dashboards category to the left of the Screen Builder canvas, and then locate the Saved Search Chart icon.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Configure the Saved Search Chart control. See .
Validate that the control is configured correctly. See .
Below is a Saved Search Chart control in .
.
See .
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.
Select the to display in the . 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 () query from which to filter Saved Search results to display in the chart.
Enable the Title toggle key to display the Saved Search chart's title above the chart. The Title toggle key is enabled by default.
Enable the Border toggle key to display a border around the Saved Search chart. The Border toggle key is enabled by default.
Enable the Enable Link toggle key to display theicon that, when clicked, displays the Saved Search from which the chart visualizes data in a new browser window. The Enable Link toggle key is disabled by default.
Select the size of the Saved Search chart.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
The Select List control provides either a checkbox- or multi-select drop-down menu-style control from which the participant selects one or more options.
Reference a data source in the JSON data model: Reference data from a that displays in this control as its options. Specify the data name, value, and content from the Data Connector. See a . Optionally, use a expression to limit which data to use as options based on the PMQL expression's criteria. The order that data objects present in the data object determines the order these options display in the control; options cannot be manually reordered.
Reference data in a Collection: Reference data from a and display it as options in this control. Optionally, use a PMQL expression to filter the displayed options in real-time. For an example, see .
-type
-type
See .
When using the Select List control with checkboxes, the control functions similarly to multiple 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 .
Click the imagefor the option to be removed.
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 .
See the permissions or ask your Administrator for assistance.
.
.
Follow these steps to add this control to the :
Expand the Input Fields category to the left of the Screen Builder canvas, and then locate the Select List icon.
Place into the Screen Builder canvas where you want the control to display on the Screen.
Configure the Select List control. See .
Validate that the control is configured correctly. See .
Below is a Select List control in .
See .
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.
View the selection made in this control by its Variable Name setting's value. The Data Preview panel in 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.
Reference this value in .
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 , 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.
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 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
.
See when editing a Request variable name.
Edit the default label that displays for this control if necessary. New Select List is the default value.
Ensure that all Select List controls implemented in a -type Screen contain Label setting values. See .
Enter the validation rule(s) the Request participant must comply with to properly enter a valid value into this control. This setting has no default value. If there are no configured validation rules the following message displays: No validation rule(s). See .
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 is required. This option is not selected by default. This is a quick way to add the validation rule.
In the Screen preview or during a Request, the control displays with a red-colored asterisk. If you submit the Screen without selecting this required Checkbox, this control displays Field is required in red-colored text.
Select to indicate that this control cannot be edited. This option is not selected by default.
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 Data Source panel that is on the right-side of the Screen Builder canvas.
: 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.
: 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:
Example: .
: Reference the data from a Data Connector's as options in this control. Note that the package must be installed for this option to be available.
These Endpoints a 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 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: .
: Reference data saved in a and display records from a Collection column. Optionally, use a expression to limit which data to use as options based on the PMQL expression's criteria. For an example, see .
Access the while in mode, and then locate the Data Source setting.
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.
In the Value setting, enter a value to represent the option in the 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.
Click Save. The option displays below the Options list label.
Access the while in 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 while in 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 while in 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 while in 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.
Access the while in mode, and then locate the Data Source setting.
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 while in 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.
Make note of when configuring a Select List control's options when that control is within a control. When referencing a from Request data, 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 .
Make note of when editing a record using a in a , configure the Select List control's with the Single Value option. See .
Make note of .
Access the while in mode.
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 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 .
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 as necessary.
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.
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. .
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 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 .
Note that the package must be installed for this option to be available. T
Make note of when configuring a Select List control's options when that control is within a control. When referencing 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 .
Make note of when editing a record using a in a , configure the Select List control's with the Single Value option. See .
Follow these steps to reference data from a as options in this control:
Access the while in mode.
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 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 to indicate the JSON key name from within the JSON array. value is the default setting. See .
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 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 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.
Note that the package must be installed for this option to be available.
Follow these steps to reference data from a as options in this control:
Access the while in mode.
From the Data Source drop-down menu, select Collection.
From the Collection drop-down menu, select the name of the Collection from which to retrieve data.
From the Label drop-down menu, select the name of the Collection column that contains the data to be displayed as options in the Select List control.
From the Value drop-down menu, select the name of the Collection column that contains the data to be saved into when a user makes a selection.
The Label and Value drop-down menus can have the same or different Collection columns selected. Consider an example of a Collection with columns City Name
and Zip Code
. The Select List control can be configured in the following ways:
In the PMQL setting, optionally enter a expression to filter the data being retrieved from the Collection. If a filter criteria is specified here, the Select List control dynamically filters in real-time based on the specified PMQL expression.
Select the Ignore duplicates in list option to display repeating data only once in the Select List control.
See .
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 a Request variable in mustache syntax.
When the Select List control is configured with , the Default Value setting compares numerical values as a string.
If the Select List is configured with , 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.
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.
As opposite to the default setting, the JavaScript setting accepts values different to a String. Then if the Select List is configured with , then enter the Default Value as in the JSON schema. For example enter return 2;
if the JSON values are integers like:
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.
.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
The Aria Label setting value replaces the value. For example, if a control has both a Label setting value and an Aria Label setting value, assistive technology only uses the Aria Label setting value.
.
Enter the number for the sequential keyboard navigation order that this control takes focus amongst other controls in this Screen.
Control Type
Control's "Variable Name" Value
Record List "Column Header" Value
Record List "Value" Value
What It Represents
Line Input
firstname
First Name
firstname
Registrar's first name
Line Input
lastname
Last Name
lastname
Registrar's last name
Line Input
Email Address
Registrar's email address
Select
confirmation
Confirmation
confirmation
Attendance confirmation
Add a control that displays a digital signature in Screens.
The Signature control allows the Request participant to sign and her or his signature in a Screen. The entered signature automatically saves, but is not committed until the signer submits the Screen. The signer may undo the entered signature prior to submitting the Screen. The submitted signature is recorded as a PNG image that may be referenced from an Image control by referencing the Signature control's Variable Name setting value.
This control is only available for Form-type Screens. See Screen Types.
To add a Signature control to a Screen, the Signature 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 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.
Configure the Image control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a digital Signature added in Preview mode.
See Move a Control on the Page.
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 Signature control has the following panels that contains 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 Signature control in the Variable panel:
​Required
Enter the alphanumeric name that identifies this Screen. This field is required.
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: {{ SignatureControl }}
.
Reference this value in Visibility Rule setting expressions.
See best practices when editing a Request variable name.
Select the Required setting to clarify that the signature is required to submit the form.
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 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..
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 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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
See the following best practices regarding custom CSS in Screens:
Add a control from which the Request participant submits the Screen.
The Submit Button control adds a button to the Screen. The Submit Button control has two functions:
Submit: Submits the Screen whilst setting this control's value as specified from the Value setting. 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.
This control is only available for Form-type Screens. See Screen Types.
See how to configure a Submit Button control that prevents the Request participant from clicking on that control multiple times so the Screen cannot be submitted after the first click.
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 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.
Configure the Submit Button control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Submit Button control in Preview mode.
See Move a Control on the Page.
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 Submit Button 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 Submit Button 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: {{ SubmitButtonControl }}
.
Reference this value in Visibility Rule setting expressions.
See best practices when editing a Request variable name.
See how to configure a Submit Button control that prevents the Request participant from clicking on that control multiple times so the Screen cannot be submitted after the first click.
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 Submit Button control in the Configuration panel:
Select from the following options how the Submit Button control functions when the control is clicked:
Submit: Submits the Screen whilst setting this control's value as specified from the Value setting. This is the default setting.
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.
In the Tooltip Contains setting, enter the text that the tooltip displays. This setting supports both HTML and mustache syntax.
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 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.
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 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 how to configure a Submit Button control that prevents the Request participant from clicking on that control multiple times so the Screen cannot be submitted after the first click.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
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 insert more than three lines of text.
The Textarea control allows the Request participant to insert more than three lines of text. Though this control displays a vertical scroll bar if more than three lines are inserted, the input box can be expanded as necessary. To do this, click the lower right-hand corner of the input box of the Textarea control, hold, and then drag to enlarge or shrink the control size as necessary. Release when you have adjusted the Textarea control to your required size.
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 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.
Configure the Textarea control. See Settings.
Validate that the control is configured correctly. See Validate Your Screen.
Below is a Textarea control in Preview mode.
See Move a Control on the Page.
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 Textarea 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 Textarea 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: {{ TextareaControl }}
.
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 settings for the Textarea 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 Textarea 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 Textarea 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.
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
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:
Line Input control
Textarea control
Select List control
Checkbox control
Date Picker control
Follow these steps to add a validation rule to a Screen Builder control that provides validation:
Access the Variable panel for the control while in Design mode, and then locate the Validation Rules setting.
Select the rule that this control validates against.
Click Save. Parameters for the selected rule display. Parameter settings display which ones are required to properly configure the rule.
Enter the parameter settings that this control uses to validate against. See Validation Rule Settings, and then locate the validation rule for its parameters.
If you want a validation to fail for undefined or ''
, use the required rule.
Use the Accepted
validation rule to validate acknowledgement of this control. This is useful to validate "Terms of Service" acceptance.
Follow these steps to configure the parameter(s) for an Accepted
validation rule:
From the Select drop-down menu in the Validation Rules setting, select Accepted. The Accepted
validation rule has no parameters.
Use the After Date
validation rule to validate that the value entered into this control must be after (later than) a specified date. If the entered value is in datetime format, then the time format is ignored.
The value entered into this control must be in one of the following formats:
Date format: YYYY-MM-DD
. Example: "2020-07-01"
Datetime format: YYYY-MM-DD HH:MM:SS
. Example: "2020-07-01 14:25:15"
Follow these steps to configure the parameter(s) for an After Date
validation rule:
In the Date setting, enter the date in date format that this control's value must be after (later than). This is a required setting.
Use the After or Equal to Date
validation rule to validate that the value entered into this control must be the same or after (later than) a specified date. If the entered value is in datetime format, then the time format is ignored.
The value entered into this control must be in one of the following formats:
Date format: YYYY-MM-DD
. Example: "2020-07-01"
Datetime format: YYYY-MM-DD HH:MM:SS
. Example: "2020-07-01 14:25:15"
Follow these steps to configure the parameter(s) for an After or Equal to Date
validation rule:
In the Date setting, enter the date in date format that this control's value must be the same or after (later than). This is a required setting.
Use the Alpha
validation rule to validate that the value entered into this control must be contain only alphabetic characters.
Follow these steps to configure the parameter(s) for an Alpha
validation rule:
From the Select drop-down menu in the Validation Rules setting, select Alpha. The Alpha
validation rule has no parameters.
Use the Alpha-Numeric
validation rule to validate that the value entered into this control must contain only alphanumeric characters.
Follow these steps to configure the parameter(s) for an Alpha-Numeric
validation rule:
From the Select drop-down menu in the Validation Rules setting, select Alpha-Numeric. The Alpha-Numeric
validation rule has no parameters.
Use the Before Date
validation rule to validate that the value entered into this control must be before (earlier than) a specified date. If the entered value is in datetime format, then the time format is ignored.
The value entered into this control must be in one of the following formats:
Date format: YYYY-MM-DD
. Example: "2020-07-01"
Datetime format: YYYY-MM-DD HH:MM:SS
. Example: "2020-07-01 14:25:15"
Follow these steps to configure the parameter(s) for a Before Date
validation rule:
In the Date setting, enter the date in date format that this control's value must be before (earlier than). This is a required setting.
Use the Before or Equal to Date
validation rule to validate that the value entered into this control must be the same or before (earlier than) a specified date. If the entered value is in datetime format, then the time format is ignored.
The value entered into this control must be in one of the following formats:
Date format: YYYY-MM-DD
. Example: "2020-07-01"
Datetime format: YYYY-MM-DD HH:MM:SS
. Example: "2020-07-01 14:25:15"
Follow these steps to configure the parameter(s) for a Before or Equal to Date
validation rule:
In the Date setting, enter the date in date format that this control's value must be the same or before (earlier than). This is a required setting.
Use the Between Min & Max
validation rule to validate that the numerical value that this control contains is between the specified minimum value and a maximum value.
The Between Min & Max
validation rule evaluates the following:
integers
file sizes
The Between Min & Max
validation rule does not evaluate the number of characters in a text, but only the value of an entered number. Use one or both of the following to validate the number of characters in a text:
Furthermore, the Between Min & Max
validation rule does not evaluate calendar dates, such as when an entered value in that control is between two dates. Use any of the following to validate date-related values:
Follow these steps to configure the parameter(s) for a Between Min & Max
validation rule:
In the Min parameter setting, enter the numeric value that this control's value must be equal to or no lower than. This is a required setting.
In the Max parameter setting, enter the numeric value that this control's value must be equal to or no greater than. This is a required setting.
Use the Date
validation rule to validate that the value entered into this control is in date or datetime format.
One of the following formats validates that the entered value is a date:
Date format: YYYY-MM-DD
. Example: "2020-07-01"
Datetime format: YYYY-MM-DD HH:MM:SS
. Example: "2020-07-01 14:25:15"
Follow these steps to configure the parameter(s) for an Date
validation rule:
From the Select drop-down menu in the Validation Rules setting, select Date. The Date
validation rule has no parameters.
Use the Email
validation rule to validate that the value entered into this control is formatted as an email address.
Follow these steps to configure the parameter(s) for an Email
validation rule:
From the Select drop-down menu in the Validation Rules setting, select Email. The EMail
validation rule has no parameters.
Use the In
validation rule to validate that the value entered into this control exactly matches the given parameter setting. The validation rule evaluates the entire value entered in the control and considers case-sensitivity and empty spaces. The control's scope of evaluation may be within an array or a string. See In
Validation Rule Examples.
Follow these steps to configure the parameter(s) for an In
validation rule:
In the Values parameter setting, enter the value to evaluate if it exactly matches the control's selected or entered value. This is a required setting.
Format a list in the Values parameter setting by separating the values with commas only, no spaces:
value1,value2,value3
In
Validation Rule ExamplesThe following JSON Request data represents the JSON array for a Select List control under evaluation.
The Select List control contains the following settings:
This control is configured to return the value of the property name
. Therefore, the doctors' names display as options in the Select List control.
This control has an In
validation rule to evaluate if Mindy Smith
is included in that control's selection.
If the Request participant selects the Mindy Smith option from that Select List control, then that control passes validation.
A Line Input control under evaluation has the following validation rule:
The validation rule is evaluated as follows:
Use the Max Length
validation rule to validate that the value entered into this control is no greater than a specified length.
The Max Length
validation rule evaluates the following:
a maximum number of characters in a string
a maximum integer value
a maximum file size
The Max Length
validation rule does not evaluate calendar dates, such as when an entered value in that control is no later than a particular date.
Follow these steps to configure the parameter(s) for a Max Length
validation rule:
In the Max Input parameter setting, enter the numeric value that this control's value must be equal to or no greater than. This is a required setting.
Use the Min Length
validation rule to validate that the value entered into this control is no less than a specified length.
The Min Length
validation rule evaluates the following:
a minimum number of characters in a string
a minimum integer value
a maximum file size
The Min Length
validation rule does not evaluate calendar dates, such as when an entered value in that control is no earlier than a particular date.
Follow these steps to configure the parameter(s) for a Min Length
validation rule:
In the Min Input parameter setting, enter the numeric value that this control's value must be equal to or no less than. This is a required setting.
Use the Not In
validation rule to validate that the value entered into this control does not match the given parameter setting. The validation rule evaluates the entire value entered in the control and considers case-sensitivity and empty spaces. The control's scope of evaluation may be within an array or a string. See Not In
Validation Rule Examples.
Follow these steps to configure the parameter(s) for a Not In
validation rule:
In the Values parameter setting, enter the value to evaluate if it is not within the control's selected or entered value. This is a required setting.
Format a list in the Values parameter setting by separating the values with commas only, no spaces:
value1,value2,value3
Not In
Validation Rule ExamplesThe following JSON Request data represents the JSON array for a Select List control under evaluation.
The Select List control contains the following settings:
This control is configured to return the value of the property name
. Therefore, the doctors' names display as options in the Select List control.
This control is configured to allow multiple selections.
This control has a Not In
validation rule to evaluate if Mindy Smith
is not included in that control's selection.
If the Request participant selects multiple options from that Select List control, but the Mindy Smith option is not among them, then that control passes validation.
A Line Input control under evaluation has the following Validation Rule:
The Validation Rule is evaluated as follows:
Use the Regex
validation rule to validate that this control's value contains content as determined by a specified regular expression. A regular expression, abbreviated as regex, is a sequence of letters and symbols that defines a logical search pattern from which to search this control's content to validate that strings meet the defined pattern. This validation rule is useful to parse the contents of a control's value even if that control's Request variable contains programming code such as HTML or JSON.
Follow these steps to configure the parameter(s) for a Regex
validation rule:
In the Regex Pattern setting, enter the regular expression from which to validate this control's value contains that content. This is a required setting.
Use the Required
validation rule to validate that this control has a value and is not empty.
A control constitutes as having no value in the following circumstances:
The value is null
.
The value is an empty string that contains no characters.
The value is an empty JSON array or empty JSON object.
The value is an uploaded file with no path.
Follow these steps to configure the parameter(s) for a Required
validation rule:
From the Select drop-down menu in the Validation Rules setting, select Required. The Required
validation rule has no parameters.
Use the Required If
validation rule to validate that this control has a value and is not empty if another control in that Screen page contains a specific value. If the control being monitored contains a specific value, then the control under evaluation is required. See Required If
Validation Rule Examples.
The Required If
validation rule is the inverse of the Required Unless
rule.
A control constitutes as having no value in the following circumstances:
The value is null
.
The value is an empty string that contains no characters.
The value is an empty JSON array or empty JSON object.
The value is an uploaded file with no path.
Follow these steps to configure the parameter(s) for a Required If
validation rule:
In the Variable Name parameter setting, enter the Variable Name setting value to monitor for its value. This is a required setting.
In the Variable Value parameter setting, enter the value that must be entered into that control to make this control required. This is a required setting.
Required If
Validation Rule ExamplesA Request participant enters information into a Task for a job application. If that Task assignee selects from a Select List control in which country that person lives. If the Task assignee selects the option United States (US), then another Select List control becomes required to select from which US state that person lives.
This example demonstrates depending controls: one control depends on another to be required. This example also demonstrates how a control depends on the specific value of another.
See the following .json
files below for this example:
List of countries in JSON format: Countries for Select List Control "Required If" Validation Example
List of US states and territories in JSON format: US States for Select List Control "Required If" Validation Example
Follow these steps to implement this example:
Add a Select List control to your Screen, and then configure its settings. Make note of its Variable Name setting value you set for that control. This control displays the list of countries as its options.
Provide the options for this Select List control. In doing so, edit options as JSON:
Download the file below Countries for Select List Control "Required If" Validation Example.
Review the JSON data. Notice that each JSON object contains the following:
content: A property called content
represents the label for each option (in this example, a country name). The label for each Select List option may contain any string as long as it is in the content
property of each JSON object.
value: A property called value
that contains a numeric value that corresponds with each label option. The value
property may contain any string as long as it is in the value
property of each JSON object. Notice that the JSON object that contains the content
property value of United States
has a value property of 232
. In this example, if the option corresponding with the 232
value is selected, then the second Select List control is required.
Copy this file's JSON data.
Paste it into the JSON Data setting.
Add a second Select List control to the same Screen page, and then configure its settings. This control displays the list of US states and territories as its options, and represents the required control if a specific setting in the first Select List control contains a specific value.
Provide the options for this Select List control. In doing so, edit options as JSON:
Download the file below US States for Select List Control "Required If" Validation Example.
Copy this file's JSON data.
Paste it into the JSON Data setting.
Add a Required If
validation rule to the second Select List control that displays the list of US states and territories.
In the Variable Name setting of the Required If
validation rule, enter the Variable Name setting value for the first Select List control that displays the list of countries as its options.
In the Variable Value setting of the Required If
validation rule, enter 232
, which is the value
property value that corresponds with the content
property value United States
.
Add a Submit Button control to the same Screen page, and then configure its settings.
A Request participant enters information into a Task for a job application. If that Task assignee selects the Yes option from a Select List control labeled Have you been convicted of a felony within the past 10 years?, a Textarea control labeled Describe your felony conviction. becomes required. The Task assignee cannot submit the form without describing the felony conviction(s).
This example demonstrates depending controls: one control depends on another to be required. This example also demonstrates how a control depends on the specific value of another.
Follow these steps to implement this example:
Add a Select List control to your Screen, and then configure its settings. Make note of its Variable Name setting value you set for that control.
Provide the options for this Select List control. In doing so, provide the following values:
No:
Value: 0
Content: No, I do not have a felony conviction within the past 10 years.
Yes:
Value: 1
Content: Yes, I have a felony conviction within the past 10 years.
The Value settings represent the values the Textarea control evaluates to determine if that control is required; these settings may contain any value, not necessarily Boolean values. The Content settings represent the label for each option. In this example, if the option corresponding with the 1
value is selected, then the Textarea control is required.
Add a Textarea control to the same Screen page, and then configure its settings.
Add a Required If
validation rule to the Textarea control.
In the Variable Name setting of the Required If
validation rule, enter the Variable Name setting value for the Select List control.
In the Variable Value setting of the Required If
validation rule, enter 1
.
Add a Submit Button control to the same Screen page, and then configure its settings.
Use the Required Unless
validation rule to validate that this control has a value and is not empty unless another control in that Screen page contains a specific value. If the control being monitored for its value has a specific value, then the control under evaluation is not required. See Required Unless Validation Rule Examples.
The Required Unless
validation rule is the inverse of the Required If
rule.
A control constitutes as having no value in the following circumstances:
The value is null
.
The value is an empty string that contains no characters.
The value is an empty JSON array or empty JSON object.
The value is an uploaded file with no path.
Follow these steps to configure the parameter(s) for a Required Unless
validation rule:
In the Variable Name parameter setting, enter the Variable Name setting value to monitor for its value. This is a required setting.
In the Variable Value parameter setting, enter the value that must be entered into that control to exempt this control from being required. This is a required setting.
Required Unless
Validation Rule ExamplesA Request participant enters information for a Task regarding United States (US) federal taxes. If that Task assignee selects from a Select List control that person lives in California, then that person is exempt from a federal tax credit. If the Task assignee selects the option California, then a Line Input control becomes required to enter tax information. If any other option is selected, then the Line Input control is not required.
This example demonstrates depending controls: one control depends on another to be required. This example also demonstrates how a control depends on the specific value of another.
See the following .json
file below for this example: US States for Select List Control "Required Unless" Validation Example.
Follow these steps to implement this example:
Add a Select List control to your Screen, and then configure its settings. Make note of its Variable Name setting value you set for that control. This control displays the list of US states and territories as its options.
Provide the options for this Select List control. In doing so, edit options as JSON:
Download the file below US States for Select List Control "Required Unless" Validation Example.
Review the JSON data. Notice that each JSON object contains the following:
content: A property called content
represents the label for each option (in this example, a US state or territory). The label for each Select List option may contain any string as long as it is in the content
property of each JSON object.
value: A property called value
that contains a numeric value that corresponds with each label option. The value
property may contain any string as long as it is in the value
property of each JSON object. Notice that the JSON object that contains the content
property value of California
has a value property of 6
. In this example, if the option corresponding with the 6
value is selected, then the Line Input control is not required.
Copy this file's JSON data.
Paste it into the JSON Data setting.
Add a Line Input control to the same Screen page, and then configure its settings. The Request participant enters into this control required information unless a specific setting in the Select List control contains a specific value.
Add a Required Unless
validation rule to the Line Input control control.
In the Variable Name setting of the Required Unless
validation rule, enter the Variable Name setting value for the Select List control that displays the list of US states and territories as its options.
In the Variable Value setting of the Required Unless
validation rule, enter 6
, which is the value
property value that corresponds with the content
property value California
.
Add a Submit Button control to the same Screen page, and then configure its settings.
A Request participant enters information for a Task that solicits viewer feedback for a streaming video. The organization soliciting viewer feedback is particularly interested in viewer feedback for a particular demographic: if that viewer indicates that she or he is in a specific age group, then that person does is not required to provide feedback on a particular question.
If that Task assignee selects from a Select List control the option 65 years old or older, then a Textarea control is not required. If any other option is selected, then the Textarea control is required.
This example demonstrates depending controls: one control depends on another to be required. This example also demonstrates how a control depends on the specific value of another.
Follow these steps to implement this example:
Add a Select List control to your Screen, and then configure its settings. Make note of its Variable Name setting value you set for that control.
Provide the options for this Select List control. In doing so, provide the following values that represent demographic age groups:
Option 1:
Value: 1
Content: 18 years old or younger
Option 2:
Value: 2
Content: 19 to 35 years old
Option 3:
Value: 3
Content: 36 to 64 years old
Option 4:
Value: 4
Content: 65 years old or older
The Value settings represent the values the Textarea control evaluates to determine if that control is required; these settings may contain any value, not necessarily Boolean values. The Content settings represent the label for each option. In this example, if the option corresponding with the 4
value is selected, then the Textarea control is not required.
Add a Textarea control to the same Screen page, and then configure its settings.
Add a Required Unless
validation rule to the Textarea control.
In the Variable Name setting of the Required Unless
validation rule, enter the Variable Name setting value for the Select List control.
In the Variable Value setting of the Required Unless
validation rule, enter 4
.
Add a Submit Button control to the same Screen page, and then configure its settings.
Use the Same
validation rule to validate that the value entered into this control matches the value of a specified control.
Follow these steps to configure the parameter(s) for a Same
validation rule:
In the Variable Name parameter setting, enter the Variable Name setting value to evaluate if the control under evaluation matches its value. This is a required setting.
Use the URL
validation rule to validate that the value entered into this control is formatted as a Uniform Resource Locator (URL).
Follow these steps to configure the parameter(s) for a URL
validation rule:
From the Select drop-down menu in the Validation Rules setting, select URL. The URL
validation rule has no parameters.
Expand the Input Fields category to the left of the Screen Builder canvas, and then locate the Signature icon.
​​
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.
Reference this control by its Variable Name setting's value. The Data Preview panel in Preview mode corresponds the Signature control's textual content with that Textarea control's Variable Name value. In the example below, SignatureControl
is the Variable Name setting's value.
Set the vertical spacing of the Signature control's pad: the space into which the signature is entered.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
Expand the Input Fields category to the left of the Screen Builder canvas, and then locate the Submit Button icon.
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 Submit Button control's Variable Name value. In the example below, SubmitButtonControl
is the Variable Name setting's value when the button is clicked.
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 Request participant selects the Submit Button control. This value can be evaluated in a Visibility Rule setting expression or in a Sequence Flow element's condition(s) to trigger.
Do Not Submit, Set Value: Sets this control's value as specified from the Value setting, but does not submit the Screen.
Enable the Loading Submit Button option, and then edit the default Loading Label setting text as necessary. The Loading Submit Button option replaces the interstitial Screen and instead displays the text entered in the Loading Label option along with a spinner within the button; the Screen does not refresh entirely until the next Task's Screen is ready to load. If this option is disabled, the interstitial Screen works as configured in the Form Task/Manual Task element.
Configure a tooltip that displays when hovering over the Submit Button control.
Link: White-colored background with blue-colored Label text.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
The Aria Label setting value replaces the Label setting value. For example, if a 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.
Expand the Input Fields category to the left of the Screen Builder canvas, and then locate the Textarea icon.
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 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.
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 Validation Rules for "Validation" Control Settings.
Click the Add Rule button. The Select drop-down menu displays.
Click the Edit iconfor the validation rule to edit if that rule can be edited. Validation rules that do not have parameters cannot be edited. The parameter settings for that validation rule displays.
Click the Delete iconfor the validation rule to delete. A message displays to confirm deletion of the validation rule.
Select to indicate that this control is required. This option is not selected by default. It is a quick way to add the Required validation rule.
In the Screen preview or during a Request, the control displays with a red-colored asterisk. If you submit the Screen without selecting this required Checkbox, this control displays Field is required in red-colored text.
Select to indicate that this control cannot be edited. This option is not selected by default.
Enter the placeholder text that displays in this control when no value has been provided. This setting has no default value.
Enter text that provides additional guidance on this control's use. This setting has no default value.
Select the Rich Text checkbox to display the What-You-See-Is-What-You-Get (WYSIWYG) rich text editor to allow the Request participant can enter rich text. This option is not selected by default.
Enter the number of rows to provide for input. 2 is the default value.
Select the text color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Select the background color that displays for this control. Optionally, click the Clear Color Selection option to remove the selected color.
Enter the default value as text or as a Request variable in mustache syntax.
Enter the default value as JavaScript, especially if a Calculated Property might change this default value setting. Ensure to use the this.
JavaScript keyword preceding the Screen control reference. Example: this.FullName
when FullName
is the Variable Value setting value for the control to set its default value.
Specify an expression that indicates the condition(s) under which this control displays. See Expression Syntax Components. If this setting does not have an expression, then this control displays by default.
Both: The control displays on both desktop and mobile devices. Both toggle keys are enabled by default.
Enter the value to represent this control in custom CSS syntax when in Custom CSS mode. As a best practice, use the same CSS Selector Name value on different controls of the same type to apply the same custom CSS style to all those controls.
The Aria Label setting value replaces the Label setting value. For example, if a 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.
Click the Add Rule button. The Select drop-down menu displays.
From the Select drop-down menu in the Validation Rules setting, select After Date. The Date setting displays.
From the Select drop-down menu in the Validation Rules setting, select After or Equal to Date. The Date setting displays.
From the Select drop-down menu in the Validation Rules setting, select Before Date. The Date setting displays.
From the Select drop-down menu in the Validation Rules setting, select Before or Equal to Date. The Date setting displays.
From the Select drop-down menu in the Validation Rules setting, select Between Min & Max. The Min and Max parameter settings display.
From the Select drop-down menu in the Validation Rules setting, select In. The Values parameter setting displays.
Entered Value | Validation Rule Evaluation |
---|---|
From the Select drop-down menu in the Validation Rules setting, select Max Length. The Max Input parameter setting displays.
From the Select drop-down menu in the Validation Rules setting, select Min Length. The Min Input parameter setting displays.
From the Select drop-down menu in the Validation Rules setting, select Not In. The Values parameter setting displays.
Entered Value | Validation Rule evaluation |
---|---|
From the Select drop-down menu in the Validation Rules setting, select Regex. The Regex Pattern setting displays.
It is useful when defining a password or code field that requires matching characters in the range a to m and case-sensitive for example. Then, in the Regex Pattern setting, enter [a-m]
. When entering values in the screen field, it validates the Regex Pattern as follows:
From the Select drop-down menu in the Validation Rules setting, select Required If. The Variable Name and Variable Value parameter settings display.
From the Select drop-down menu in the Validation Rules setting, select Required Unless. The Variable Name and Variable Value parameter settings display.
From the Select drop-down menu in the Validation Rules setting, select Same. The Values parameter setting displays.
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