AppsStudioJSON forms

Understand JSON form elements

In JSON Forms you can update a form’s name, add and modify elements, reorder elements by drag and drop, and preview the form at any point during editing.

JSON Form Builder canvas with the element bin on the right

Layout elements

Layout elements group other elements or provide data structures. They do not capture input directly. There are three types:

  • Tables — Group elements into repeatable rows. Each element added to a table becomes a column. When the form renders, users can add rows made up of those sub-elements.
  • Schema Combinations — Combine schemas and group them into selectable options.
  • Containers — Group related elements and render them vertically.

Fields

Fields capture input values. There are seven types:

  • Text Input — Captures short string values.
  • Text Area — Captures long string values.
  • Number Input — Captures integer or decimal values.
  • Checkbox — Captures boolean values.
  • Dropdown — Captures a string from a set of options. Supports multiple selections.
  • Radio — Captures a string from a set of options. Renders as buttons; supports single selection.
  • File Upload — Captures a file upload input.

YANG models

The YANG Models tab contains a dropdown listing YANG-based models from NSO. Selecting a model populates a list of its top-level elements, which can be dragged onto the canvas.

Add an element

Drag an element from the element bin and drop it onto the Drop elements here zone on the canvas.

Canvas with a Dropdown element added to the form

Edit element properties

Hover over an element and click the grid icon next to the element name.

Hover state showing the grid icon to open element properties

A Configure dialog opens. Click Save to apply your changes.

Configure dialog for a form element

To rename a layout element, edit the Label field. The following tables list the properties available for each element type.

ElementProperties
Text FieldLabel, Placeholder, Description, Required, Pattern Validation, Dynamic Validation
Text AreaLabel, Placeholder, Description, Required, Pattern Validation, Dynamic Validation
Number FieldLabel, Placeholder, Description, Required, Dynamic Validation
CheckboxLabel, Description, Checked
DropdownLabel, Placeholder, Description, Required, Static Options, Dynamic Options, Pattern Validation, Dynamic Validation
PropertyDescription
LabelThe name of the field.
PlaceholderHint text displayed inside the input field before data is entered.
DescriptionA short description displayed below the field label.
Static OptionsA fixed list of values for dropdown options.
Dynamic OptionsA list of values populated at runtime via an HTTP request, using a request configuration and value mapping.
CheckedWhen set to yes, the checkbox defaults to true.
RequiredThe field requires a value.
Pattern ValidationA regular expression that validates the input value.
Dynamic ValidationInput validation performed via an HTTP request, using a request configuration and value mapping.

Add dropdown options

Static options

Set the options type to Static. Click + Option to add items, then enter a value for each. Use the drag handle to reorder items and the trashcan icon to remove them.

Static Options editor with draggable list items

Dynamic options

Set the following fields to configure a dynamic dropdown:

PropertyDescription
MethodThe request method.
Request BodyThe JSON request body.
Base URLThe request scheme/protocol + authority + optional port.
API RouteThe request path + optional query.
Source PropertyThe response property containing the array to use as dropdown options.
Property KeyThe property on each array object that becomes a dropdown option value.
1

Select a method

Select a Method. If you select POST, enter the Request Body.

2

Enter the URL and route

Enter the Base URL and API Route.

3

Make the API call

Click Make API Call to view the response.

4

Map the data

Select the Source Property and Property Key.

5

Preview the options

Click Query Data to preview the values that will populate the dropdown.

6

Finish

Click Back.

Dynamic Options editor

Field dependencies

Parts of a dynamic dropdown’s API request can source their values from other fields in the form. These are called field dependencies. Their behavior depends on the request method:

  • GET — Field dependencies replace route parameters. For example, in /json-forms/forms/:id, :id is replaced by the sourced field’s value.
  • POST — Field dependencies replace request body properties. For example, given { "entries": 1 }, if /entries is parameterized, 1 is replaced by the sourced field’s value.
Field dependency configuration panel

When the form renders, sourced field values are passed to the dropdown’s API request and the options update immediately.

Field dependencies became compatible with POST requests in Platform 6. In earlier versions, they only worked with GET requests.

Add validation

Click + Validation on a form element to add pattern validation, dynamic validation, or both.

Validation editor showing pattern and dynamic configuration panels

Pattern validation

Enter a regular expression in the Pattern field.

Dynamic validation

Set the following fields to configure dynamic validation:

PropertyDescription
MethodThe request method.
Request BodyThe JSON request body.
Base URLThe request scheme/protocol + authority + optional port.
API RouteThe request path + optional query.
Source PropertyThe response property containing a boolean that indicates whether the input is valid. Only truthy properties are supported — isValid works, but isInvalid does not.
Dynamic Request Body PropertyThe request body property whose value is replaced by the input being validated.
Error MessageThe message displayed when the input value is invalid.
1

Select POST and enter the request body

Select POST as the method and enter the Request Body. This is a mock body used when the request runs during field input.

2

Enter the URL and route

Enter the Base URL and API Route.

3

Make the API call

Click Make API Call to view the response.

4

Select the source property

Select the Source Property.

5

Preview the result

Click Query Data to preview the boolean value that determines valid input.

6

Select the dynamic request body property

Select the Dynamic Request Body Property.

7

Enter the error message

Enter the Error Message.

8

Finish

Click Back.

Add schema combinations

Use the schema combinations element to combine JSON schemas using allOf, oneOf, or anyOf.

Use a unique name for each option within a schema combination. If two options share the same name, only the first is displayed.

KeywordBehavior
anyOfThe user can fill out any one of the options.
allOfThe user must fill out all options. All options are displayed simultaneously with no dropdown selection needed.
oneOfThe user must fill out exactly one option. The input must match exactly one schema. If it matches none or more than one, the result is a failure.
Schema Combination element on the canvas

Click the Format dropdown on the element and select a keyword.

Format dropdown showing anyOf, allOf, and oneOf options

When filling out the form, the element renders a dropdown for selecting an option. The corresponding sub-schema is then shown.

Schema combination rendered as a dropdown in form preview

Examples

anyOf

The user selects any one option from the dropdown (name, email, id, or nickname) and fills it in. Click Show Form Data to display the result.

anyOf with four options in a dropdown selector

allOf

All four options (name, email, id, and nickname) are displayed at once. The user fills in all fields. Click Show Form Data to display the result.

allOf with all four options displayed simultaneously

oneOf

The user selects exactly one option from the dropdown (name, email, id, or nickname) and fills it in. Click Show Form Data to display the result.

oneOf with a single-option selector dropdown

Add YANG model elements

In the YANG Models tab, drag top-level elements from the list onto the canvas. Elements retain their names and properties from the YANG definition.

YANG lists become tables in JSON Forms. YANG containers become containers. All child elements are included when the parent is dropped onto the canvas.

Form canvas built from a YANG model

Dynamic references in YANG-based forms

JSON Forms replicates YANG xpath-based behavior in the UI. Leafref-defined data references render as dropdowns. when expressions control conditional field rendering. Validations run on form submission.

YANG-based form preview showing dynamic field references

Reorder elements

Drag an element using its drag handle to move it to a new position.

Delete an element

Click the trashcan icon on the element.

Save changes

Click Save.

Preview the form

Click the eye icon on the canvas to open a live preview of the form as it’s being built.

Form preview showing the rendered form

Inspect generated schemas

In the preview footer, click Show Form Data to display the JSON Schema, UI Schema, Binding Schema, Validation Schema, and other schema inputs. Click Show Form to return to the preview.

Schema view showing all generated schema inputs