ProcessMaker 4.1
ProcessMaker API Documentation
ProcessMaker Examples
Powered By GitBook
Screen Design Best and Worst Practices
Follow best practices, and avoid worst practices, when designing Screens.

Screen Builder Best Practices

Follow these best practices when designing Screens in Screen Builder.

Naming Request Variables for ProcessMaker Screen Controls

Controls that have the Variable Name setting use this value as a variable name in the Screen in which that control is used. Use unique Variable Name settings from any other control of the same type in all Screens in your organization. Why? If a Process uses two different Screens in which two controls of the same type have the same Variable Name setting, the value of the first Screen's control overwrites the value of the second during Requests.
For example, suppose you have a Process that uses two different Screens that have a Line Input control with the setting FirstName. During a Request, the first Line Input control receives a value. As the Request continues, that Line Input control's value automatically overwrites any value in the second Screen's Line Input control because they have the same Variable Name setting. This may be unintended. This is why it is helpful to experiment with JSON data models in Preview mode.
To avoid this issue, establish a naming convention with all Process Owners in your organization for Variable Name settings. For example, use a naming convention such as <ScreenName>_<FieldName>. This naming convention minimizes two controls of the same type in different Screens to have identical names.

CSS Selector Naming 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.

Visibility Rules Override Custom CSS Settings

If a Screen control affected by a visibility rule is hidden by default from custom CSS, the visibility rule overrides the custom CSS design. For example, if custom CSS is designed to hide a Screen control by default when that control's visibility rule dictates that it be visible, the visibility rule overrides the custom CSS to display that control. As a best practice, use visibility rules instead of custom CSS to hide a control by default.

Duplicate the JSON Array in a Select List Control Used in a Loop Control

When using a Select List control that gets its options as a JSON array from a data source, and that Select List control is used in a Loop control, follow this best practice:
    Configure the Select List control to get the JSON object of the array, not only values.
    Within the Loop control, duplicate the JSON object so that JSON object elements match those of the Select List control's.
Consider this example. The following is a JSON object that contains the JSON array from which a Select List control could use as its options when configured to reference the JSON object.
"selectList": [
"value": "Value 1",
"content": "Content 1"
"value": "Value 2",
"content": "Content 2"
"value": "Value 3",
"content": "Content 3"
"value": "Value 4",
"content": "Content 4"
Download and then import the following Screen into Screen Builder. Preview the Screen to observe how the Select List control functions within the Loop control: select an option, and then enter values. Observe the JSON array that displays in the Preview panel.

Screen Builder Worst Practices

Avoid these worst practices when designing Screens in Screen Builder.

Avoid JavaScript Custom Coding

Avoid adding custom JavaScript when designing Screens for the following reasons:
    Custom JavaScript implementations are not under the ProcessMaker Support scope: Because custom JavaScript implementations are not under the ProcessMaker Support Scope, Support agents will not support custom JavaScript implementations.
    Custom JavaScript implementations creates an unmaintainable business solution: By introducing custom JavaScript into Screen design that may affect workflow routing behavior outside of that Screen, you make that business solution much more difficult to maintain.

Related Topics

Last modified 2mo ago