> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.itential.com/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.itential.com/_mcp/server. # Understand JSON form elements > Build and edit JSON Forms using the Form Builder canvas in Itential Platform Studio. 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. ![](/_fern-img/9a78f64f8547ce1fad870b0733cc5ae45026d926adcd0c63487d24e77fdafd7a.webp) ## 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. ![](/_fern-img/22b105a76f913260c0cba2f0582c5b982ac37580df6df4f8d60d2e160a7f2786.webp) ## Edit element properties Hover over an element and click the grid icon next to the element name. ![](/_fern-img/6b9337b728973d471b6ad20f6eacdff1291c2d3818b11a6334198335942364aa.webp) A **Configure** dialog opens. Click **Save** to apply your changes. ![](/_fern-img/761a86a89ca2bd640e7916a98eab1fcef6839013df4ed4b564c96aec254d508c.webp) To rename a layout element, edit the **Label** field. The following tables list the properties available for each element type. | Element | Properties | | :----------- | :----------------------------------------------------------------------------------------------------------------- | | Text Field | Label, Placeholder, Description, Required, Pattern Validation, Dynamic Validation | | Text Area | Label, Placeholder, Description, Required, Pattern Validation, Dynamic Validation | | Number Field | Label, Placeholder, Description, Required, Dynamic Validation | | Checkbox | Label, Description, Checked | | Dropdown | Label, Placeholder, Description, Required, Static Options, Dynamic Options, Pattern Validation, Dynamic Validation | | Property | Description | | :----------------- | :---------------------------------------------------------------------------------------------------------- | | Label | The name of the field. | | Placeholder | Hint text displayed inside the input field before data is entered. | | Description | A short description displayed below the field label. | | Static Options | A fixed list of values for dropdown options. | | Dynamic Options | A list of values populated at runtime via an HTTP request, using a request configuration and value mapping. | | Checked | When set to yes, the checkbox defaults to true. | | Required | The field requires a value. | | Pattern Validation | A regular expression that validates the input value. | | Dynamic Validation | Input 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. ![](/_fern-img/867a0721af887b3a46ce443739f9bba194228081890a8244596f2cdbbca22777.webp) ### Dynamic options Set the following fields to configure a dynamic dropdown: | Property | Description | | :-------------- | :---------------------------------------------------------------------- | | Method | The request method. | | Request Body | The JSON request body. | | Base URL | The request scheme/protocol + authority + optional port. | | API Route | The request path + optional query. | | Source Property | The response property containing the array to use as dropdown options. | | Property Key | The property on each array object that becomes a dropdown option value. | #### Select a method Select a **Method**. If you select POST, enter the **Request Body**. #### Enter the URL and route Enter the **Base URL** and **API Route**. #### Make the API call Click **Make API Call** to view the response. #### Map the data Select the **Source Property** and **Property Key**. #### Preview the options Click **Query Data** to preview the values that will populate the dropdown. #### Finish Click **Back**. ![](/_fern-img/ae1b33a1d92f80cb39274e675d13e3d8ac90abf3f05477c697aeede16dd530e2.webp) ### 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](/itential-platform/studio/json-forms/use-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. ![](/_fern-img/f51f4358860b3b7e99c5cd0120ede73c8b8a69a2aaede924b6452c9573be1731.webp) 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. ![](/_fern-img/c704dba307d612c5b5ab1ff9ddf76e51e81dd695fdd2465cd0b64391c2934d91.webp) ### Pattern validation Enter a regular expression in the **Pattern** field. ### Dynamic validation Set the following fields to configure dynamic validation: | Property | Description | | :---------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Method | The request method. | | Request Body | The JSON request body. | | Base URL | The request scheme/protocol + authority + optional port. | | API Route | The request path + optional query. | | Source Property | The 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 Property | The request body property whose value is replaced by the input being validated. | | Error Message | The message displayed when the input value is invalid. | #### 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. #### Enter the URL and route Enter the **Base URL** and **API Route**. #### Make the API call Click **Make API Call** to view the response. #### Select the source property Select the **Source Property**. #### Preview the result Click **Query Data** to preview the boolean value that determines valid input. #### Select the dynamic request body property Select the **Dynamic Request Body Property**. #### Enter the error message Enter the **Error Message**. #### 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. | Keyword | Behavior | | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------ | | `anyOf` | The user can fill out any one of the options. | | `allOf` | The user must fill out all options. All options are displayed simultaneously with no dropdown selection needed. | | `oneOf` | The 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. | ![](/_fern-img/f6376c08b16674c6180d6321617e7215b7d06c1bf64a5e75cf32eee3ba408c25.webp) Click the **Format** dropdown on the element and select a keyword. ![](/_fern-img/fcb2dad861924623b5788d6464ec5fe2352edd19ea04454abeec56c31b26e890.webp) When filling out the form, the element renders a dropdown for selecting an option. The corresponding sub-schema is then shown. ![](/_fern-img/2336ce74c8879e5cd6648a9c3815405c67cfeef647db62b06d331dbe73c79eba.webp) ### 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. ![](/_fern-img/c29287853e595fbe877fddd3f703fbac903c3259619830e33072a0748bcc0a93.webp) #### `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. ![](/_fern-img/61d3b65a26897e3baa2885daa88c1efa6d13f866265cfb0fd508d49759d78e41.webp) #### `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. ![](/_fern-img/1ca00ed54d5834074a6c25d59e88fc03b899fc1fb1fd5426a67d95cf2e0daf1a.webp) ## 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. ![](/_fern-img/0d7579b7746879557029fcc22dcbbce7659bae045367fe9afa98cefa0f62fb47.webp) ### 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. ![](/_fern-img/886d06d05f5d886a8a273ecbfd0054e673d19d824f1a643cd16646e4b144c923.webp) ## 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. ![](/_fern-img/19835f2870bc102badb7885807dbb85bff289f977a3274968b3e27e09a6fe86c.webp) ### 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. ![](/_fern-img/df27f6e5f14b9948ce5b958f9a28d434a14f43471d4bcb9d487a1187563d9d30.webp)