# 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](https://ginkgobioworks.github.io/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**

## 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

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.

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

- [JS Object to JSON](https://transform.tools/js-object-to-json)
- Any reliable online conversion tool

#### 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

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.

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

- [JS Object to JSON](https://transform.tools/js-object-to-json)
- Any reliable online conversion tool

#### 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](https://docs.rafay.co/env_manager/templates/contexts/)**

> 💡 **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.

---