Skip to content

Data Schema and UI Schema Examples

Overview

The following examples demonstrate how to generate Data Schema and UI Schema using the React JSON Schema Form Builder. Each example outlines the process of defining input data, creating corresponding form elements, and converting the schema into the required JSON format. These steps help structure data for various configurations, ensuring compatibility with form-based user interfaces.

Access the Tool

  • Open the React JSON Schema Form Builder
  • Navigate to the Visual Form Builder tab
  • Provide a Form Name and Form Description
  • Click the + icon button to create a new form
  • Depending on the requirements, users can:
    • Select Form element for simple key-value pairs
    • Select Form section for more complex structures
  • Click Create

Env Temp

Add Form Elements

Example 1

Object 1

  • Provide an Object Name machine_type, along with a Display Name and Description
  • Select the Input Type as Dropdown and add the below options
    • "e2-standard-2"
    • "e2-standard-4"
    • "n2-standard-2"
    • "n2-standard-4"

Object 2

  • Add another object called test_data along with a Display Name and Description
  • Select the Input Type as Short Answer
  • For additional configuration, click the Edit (✏️) icon at the bottom to access additional configuration options
  • Enable the Required checkbox to make this field mandatory. Users will not be able to submit the form without selecting or entering a value

Env Temp

Once the form is designed, switch to the Edit Schema tab

Convert Data Schema and UI Schema to JSON Format

The DataSchema and UI Schema are ready, but neither of the schemas is in JSON format.

Env Temp

To convert the schemas (JavaScript object) into JSON format, use:

Final Output

After conversion, both the Data Schema and UI Schema will be in JSON format, ready for implementation

DataSchema

{
  "type": "object",
  "title": "Machine Configuration",
  "description": "Select the type of machine for deployment.",
  "properties": {
    "machine_type": {
      "enum": [
        "e2-standard-2",
        "e2-standard-4",
        "n2-standard-2",
        "n2-standard-4"
      ],
      "title": "Machine Type",
      "type": "string"
    },
    "test_data": {
      "title": "Test Data",
      "type": "string"
    }
  },
  "dependencies": {},
  "required": [
    "machine_type",
    "test_data"
  ]
}

UI Schema

{
  "ui:order": [
    "machine_type",
    "test_data"
  ]
}

Example 2

Object 1

  • Provide an Object Name instance_type, along with a Display Name and Description
  • Select the Input Type as Dropdown and add the below options
    • "t3.micro"
    • "t3.small"
    • "t3.large"

Object 2

  • Add the second object called aws_region_az along with a Display Name and Description
  • Select the Input Type as Dropdown and add the below options
    • "us-east-1a"
    • "us-east-1b"
    • "us-west-1c"

Object 3

  • Add the third object called email_id along with a Display Name and Description
  • Select the Input Type as Short Answer and add the below options
    • "us-east-1a"
    • "us-east-1b"
    • "us-west-1c"
  • For additional configuration, click the Edit (✏️) icon at the bottom to access additional configuration options
  • Enable the Required checkbox to make this field mandatory. Users will not be able to submit the form without selecting or entering a value

Env Temp

Once the form is designed, switch to the Edit Schema tab

Convert Data Schema and UI Schema to JSON Format

The Data Schema and UI Schema are ready, but neither of the schemas is in JSON format.

Env Temp

To convert the schemas (JavaScript object) into JSON format, use:

Final Output

After conversion, both the Data Schema and UI Schema will be in JSON format, ready for implementation

DataSchema

{
  "type": "object",
  "title": "Config Form",
  "description": "Config Input Variable Form",
  "properties": {
    "instance_type": {
      "enum": [
        "t3.micro",
        "t3.small",
        "t3.large"
      ],
      "title": "Instance Type",
      "type": "string"
    },
    "aws_region_az": {
      "enum": [
        "us-east-1a",
        "us-east-1b",
        "us-west-1c"
      ],
      "title": "AWS Region AZ",
      "type": "string"
    },
    "email_id": {
      "title": "Email ID",
      "type": "string"
    }
  },
  "dependencies": {},
  "required": []
}

UI Schema

{
  "ui:order": [
    "instance_type",
    "aws_region_az",
    "email_id"
  ]
}

Apply Schema in Controller

Once the schemas are ready, users can use them in Environment Manager -> Config Context -> Input Variables

Env Temp

💡 Note: The user must provide schemas only if they intend to use the input variable as part of the config context in actions. The Data Schema is mandatory, while the UI Schema is optional.