Screen Builder Modes
Understand each of Screen Builder's modes.
Use Design mode to design your Screen. Design mode is the default mode when a Screen is created or edited. While in Design mode, use the Design setting section to configure controls that you place into your Screen Builder canvas.
Screen Builder in Design mode
Furthermore, test how the Screen's controls you configured in Design mode interact with JSON data models. ProcessMaker represents Screens as JSON data models. You can view any JSON data model in Preview mode to test how a Process's JSON data model or another Screen's data model interacts with your Screen. Viewing the JSON data model can be helpful to see how values are entered into the Screen as well as to use that JSON data model in your Scripts.
Screen Builder in Preview mode
Configure the Calculated Properties for a ProcessMaker Screen in Calculated Properties mode
Use the Custom CSS mode to add custom CSS styles to a Screen.
Use Watchers mode to add Watchers to that Screen. During a Request or while previewing the Screen, a Watcher monitors when the value of a control in that Screen changes or receives a value, acts upon a Data Connector or runs a Script using that control's value, and then outputs its result to another Screen control.
ProcessMaker Script runs when student ID is entered, then returns student name, in Watchers mode