Preview a Screen and Its JSON Data Model

Overview
To allow Screens to be used among any Process, they are represented in JSON format. Processes are also represented as JSON data models that pass Request data to Tasks defined in the Process model. Preview, evaluate, and test how data in your Screen is passed to JSON data models before using that Screen in Processes.
Screen Builder preview mode that includes the Vocabulary package
Preview Your ProcessMaker Screen
Your user account or group membership must have the following permissions to preview a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
See the Screens permissions or ask your Administrator for assistance.
Select a ProcessMaker Vocabulary from Which to Evaluate Your ProcessMaker Screen's Compliance
ProcessMaker Package Required
To use a Vocabulary from which to preview your Screen, the Vocabularies package must be installed.
Optionally, use a Vocabulary from which to preview your Screen to ensure that it complies with any regulatory compliance that Tasks using this Screen must comply. A Vocabulary is a JSON schema. The JSON schema describes the data objects, types, and structure that you want in both a machine- and human-readable format. The Vocabulary from which to preview your Screen must already exist.
Follow these steps to use a Vocabulary during your Screen preview and testing:
1.
​Open the Screen. The Screen is in Design mode.
2.
Click the Preview button.
3.
Expand the Vocabulary panel that is on the right-side of the Screen Builder canvas if it is not already.
 
4.
From the Select a vocabulary drop-down menu, select the Vocabulary from which to verify that your Screen complies with its JSON schema. Screen Builder loads the Vocabulary, and then evaluates if it is a valid JSON schema. One of the following messages display below the Select a vocabulary drop-down menu:
Valid JSON schema: If the JSON schema is valid, the following message displays: Data Valid for JSON Schema.
Invalid JSON schema: If the JSON schema is not valid, then the Vocabulary panel displays the errors that render the JSON schema invalid.
5.
Enter or review data in the Screen controls as you would for a Task during a Request. Evaluate if your Screen processes the Vocabulary's JSON schema appropriately.
6.
During your Screen evaluation, optionally do the following:
​Enter mock Request data into your. Screen to evaluate if your Screen processes expected Request data appropriately​
​Preview the JSON data model your Screen generates for Requests​
Enter Mock Request Data Coming Into Your ProcessMaker Screen
Optionally, enter mock Request data into your Screen to evaluate if your Screen processes expected Request data appropriately. 
In the Data Input section, enter a JSON data model as your Screen's data input to evaluate how JSON data models for different Processes interact with the JSON data model for your Screen.
Follow these guidelines to enter mock Request data into your Screen to evaluate how your Screen processes expected Request data:
1.
​Open the Screen. The Screen is in Design mode.
2.
Click the Preview button.
3.
Expand the Data Input panel that is on the right-side of the Screen Builder canvas if it is not already.
 
4.
Enter a JSON data model into the Data Input panel. This JSON data model may come from a Process's Request data or another Screen. As you enter a JSON data model, the Screen Validation indicator displays if your JSON schema has any errors that prevents validation.  
​
​
5.
Enter or review data in the Screen controls as you would for a Task during a Request. Evaluate if your Screen processes the mock Request data appropriately.
6.
During your Screen evaluation, optionally do the following:
​Select a Vocabulary from which to evaluate your Screen's compliance​
​Preview the JSON data model your Screen generates for Requests​
Screen Builder displaying JSON input and output data models in Preview mode
Preview the JSON Data Model Your ProcessMaker Screen Generates for Requests
Follow these guidelines to preview the JSON data model your Screen generates:
1.
​Open the Screen. The Screen is in Design mode.
2.
Click the Preview button.
3.
Expand the Data Preview panel that is on the right-side of the Screen Builder canvas if it is not already.
 
4.
Enter or review data in the Screen controls as you would for a Task during a Request. When data is entered into each control, the Data Preview panel adds that control value into a JSON data model using the Variable Name setting value of that control. During an in-progress Request, this JSON data model would incorporate into that Request's data model.
5.
Evaluate if your Screen generates data appropriately. Calculated properties also display in the Data Preview panel as part of the JSON data model if you submit the Screen by clicking the Submit Button control in Form-type Screens. See Manage Calculated Properties.
6.
During your Screen evaluation, optionally do the following:
​Select a Vocabulary from which to evaluate your Screen's compliance​
​Enter mock Request data into your Screen to evaluate if your Screen processes expected Request data appropriately​
Screen Builder displaying JSON input and output data models in Preview mode
Related Topics
What is Screen Builder?
Screen Types
Screen Builder Modes
Validate Your Screen
Edit Your Screen
View Screens
Add, Delete or Rename a Page
Manage Calculated Properties
Add Custom CSS to a Screen
Manage Watchers
Undo and Redo Changes in Your Screen
Save Your Screen
Screen Design Best and Worst Practices
What is a Process?
What is a Request?
Broken link
What is a Script?

Add, Delete or Rename a Page

Manage Calculated Properties

Last modified 4mo ago

Export as PDF

Copy link

Contents

Overview

Preview Your ProcessMaker Screen

Select a ProcessMaker Vocabulary from Which to Evaluate Your ProcessMaker Screen's Compliance

Enter Mock Request Data Coming Into Your ProcessMaker Screen

Preview the JSON Data Model Your ProcessMaker Screen Generates for Requests