Screen Builder
Design your Screen for Request participants to interact with Request data.
Overview
Use Screen Builder to design Screens for your Processes. Screens are designed independent of Processes: any Screen can be used in any Process, even those that you did not design. Screens can be exported and then shared with other Process designers so they may import them for their Processes.
While Screen Builder has an easy-to-use drag-and-place design interface to edit and preview Screens, ProcessMaker Platform represents them as JSON data models. You can view the JSON data model while in Preview mode.
You can use four types of Screens: Form, Display, Email, and Conversational. For details on these types, see Screen Types.
Screens are composed of controls. Use controls to provide your Screen with specific functionality. See Control Descriptions and Inspector Settings.
Below are a few examples of these controls:
Display text.
Provide a group of radio buttons to allow the Request participant to select an option.
Provide a drop-down menu to allow the Request participant to approve or reject a Request.
Provide a text area where the Request participant can enter text.
Provide a date control where the Request participant can select a date.
Screen Builder Modes
The Screen Builder can be used in one of the following 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.
Learn How to Configure Controls
See Control Descriptions and Inspector Settings.
Learn How to Create a Multi-Page Screen
Using the Screen Builder
Add a Control to a Screen
Create a Screen or edit a Screen in which to add the control.
Expand a category in the Controls Menu on the left and locate a control to add.
Click-and-drag the control into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Drop the control into the Screen Builder canvas where you want the control to display.
View the Screen Controls section for detailed information on all available screen controls.
Move a Control on a Screen
After adding a control to a Screen page, you may move it to another location on that page such that it is above or below other controls placed on that page. A control cannot be moved to another Screen page.
Follow these steps to move a control to another location on that Screen page:
Place the control at the location on the page you want it. The other control(s) on the page automatically adjust position.
Copy a Control with its Settings
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.
Delete a Control from a 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.
Undo and Redo Changes in Your Screen
Follow these steps to use the Undo button in Screen Builder:
Make a change in the Screen or any of its controls' settings. The Undo/Redo buttons are enabled.
Click the Undo button to undo the most recent change if necessary. Continue using the Undo button as many times as necessary or until the Screen's state when the Screen was created/opened.
Click the Redo button to redo any revision undone by the Undo button up to the current state.
Discard Changes to Your Screen
Screen Builder automatically saves your Screen every five (5) seconds when changes are made to any of the configuration panels. Regardless of whether you publish your Screen prior to leaving Screen Builder, the next time you edit that Screen, the changes since its last publication remain intact.
If necessary, discard the changes to your Screen since its last publication.
Follow these steps to discard changes to your Screen since its last publication:
Click the Discard button. Screen Builder discards the changes since last starting to edit that Screen, and then closes. The Scripts page displays.
Close Screen Builder with Your Saved Changes
Since Screen Builder saves changes to your Screen automatically when changes are made to any of the configuration panels, it is not necessary to manually save your changes. However, you may close Screen Builder without publishing your changes, but keep all your changes intact.
While in Screen Builder, click the Close button. Screen Builder closes with your saved changes. The Screens page displays.