Preview a Screen and Its JSON Data Model

Preview your Screen to evaluate and test how users would interact with your Screen and enter control data into the JSON data model during Requests.

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 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 Vocabulary from Which to Evaluate Your Screen's Compliance

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 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 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. To denote that the content of a Line Input control is of String data type, those Request variable values display with one backslash (\) preceding and following single- and double-quotation marks (` and ", respectively) that may be within the string of that Request variable value so as to indicate that these punctuation marks are interpreted as part of the literal string instead of functioning as punctuation. For example, a Line Input control with a text value of ""Louis Canera" has been employed at "Company" from '2015' until '2023'" displays in the preview as "\"Louis Canera\" has been employed at \"Company\" from \'2015\' until \'2023\'".

   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

pageWhat is Screen Builder?pageScreen TypespageScreen Builder ModespageValidate Your ScreenpageEdit Your ScreenpageView ScreenspageAdd, Delete or Rename a PagepageManage Calculated PropertiespageAdd Custom CSS to a ScreenpageManage WatcherspageUndo and Redo Changes in Your ScreenpageSave Your ScreenpageScreen Design Best and Worst PracticespageWhat is a Process?pageWhat is a Request?pageWhat is a Script?