Follow these best practices when designing ProcessMaker Screens in your organization:
Variable Name setting best practice for controls: Controls that have the Variable Name setting use this value as a variable name in the ProcessMaker Screen in which that control is used. Use unique Variable Name settings from any other control of the same type in all ProcessMaker Screens in your organization. Why? If a Process uses two different ProcessMaker Screens in which two controls of the same type have the same Variable Name setting, the value of the first ProcessMaker Screen's control overwrites the value of the second during Requests.
For example, suppose you have a Process that uses two different ProcessMaker 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 ProcessMaker 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 ProcessMaker Screens to have identical names.
CSS Selector Name setting for controls: 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: If a ProcessMaker 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 ProcessMaker 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.