Screen Builder Modes

Understand each of Screen Builder's modes.

Design Mode

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

Learn How to Configure Controls

See Control Descriptions and Inspector Settings.

Learn How to Create a Multi-Page Screen

See Add a New Page to a Screen.

Preview Mode

Use Preview mode to view and test your Screen. Test how your controls function as a form user would experience your Screen during a Request.

Furthermore, test how the Screen's controls you configured in Design mode interact with JSON data models. ProcessMaker Platform 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

See Preview a Screen and Its JSON Data Model.

Calculated Properties Mode

Use Calculated Properties mode to add Calculated Properties to that Screen. A Calculated Property is any value, mathematical calculation, or formula. A Calculated Property's determines its value either through a mathematical formula or valid JavaScript, and may include values from Screen control values and Magic Variables during that Request. Likewise, a Calculated Property's value can display in a Screen control during that Request. Calculated Properties can only be used within and only affect the Screen to which the Calculated Property is defined.

Configure the Calculated Properties for a Screen in Calculated Properties mode

See Manage Calculated Properties.

Custom CSS Mode

Use the Custom CSS mode to add custom CSS styles to a Screen.

See Add Custom CSS to a Screen.

Watchers Mode

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.

A Script runs when student ID is entered, then returns student name, in Watchers mode

See Manage Watchers.

Related Topics

pageWhat is Screen Builder?pageScreen TypespageScreen Builder ModespageValidate Your ScreenpageEdit Your ScreenpageAdd, Delete or Rename a PagepagePreview a Screen and Its JSON Data ModelpageManage Calculated PropertiespageAdd Custom CSS to a ScreenpageManage WatcherspageUndo and Redo Changes in Your ScreenpageSave Your ScreenpageScreen Design Best and Worst PracticespageWhat is a Script?pageWhat is a Process?