# Nested Fields

## **Specs**

<table><thead><tr><th width="320">Label</th><th>Value</th></tr></thead><tbody><tr><td><strong>Version</strong></td><td>1.2.0 (updated on 2025-01-10)</td></tr><tr><td><strong>Developer</strong></td><td>Labii Inc.</td></tr><tr><td><strong>Type</strong></td><td>Column</td></tr><tr><td><strong>Support Configuration</strong></td><td>Yes</td></tr><tr><td><strong>Support Readonly view</strong></td><td>Yes</td></tr><tr><td><strong>Support Edit view</strong></td><td>Yes</td></tr><tr><td><strong>Support Form view</strong></td><td>Yes</td></tr><tr><td><strong>Support Default value</strong></td><td>Yes</td></tr><tr><td><strong>Support Import</strong></td><td>Yes</td></tr><tr><td><strong>Allow multiple</strong></td><td>Yes</td></tr></tbody></table>

## Overview

Labii’s **Nested Fields** feature allows users to track and manage multiple related items using custom-defined fields, providing flexibility and precision in data organization. With Nested Fields, you can define a list of items and associate specific attributes with each item, such as tracking the number of books ordered by setting up fields for “Book” and “Number Ordered.” This feature streamlines complex data tracking needs by enabling users to store detailed, hierarchical information directly within the application.

## Use case

1. Use this widget to record different social accounts with their id for contact.
2. Use this widget to track the products and quantity ordered
3. Use this widget to display specific IDs with certain components

## Configuration

The widget will function without additional setup, but you have the option to utilize the configuration to customize the button.

* **Schema -** The schema of nested fields. Use the properties from <https://react-jsonschema-form.readthedocs.io/en/latest/>. Use 'order' to sort the fields inside the properties.
  * To handle a list of items: Set `type=array`
  * To handle a single item: Set `type=object`
* **Display -** How to display the nested fields.
  * Key-Value by comma
  * Key-Value by linebreak
  * Value by comma
  * Value by linebreak
  * Value by dash
  * Value by nothing

### Examples:

```json
{
    "schema": { # use the propterties from https://react-jsonschema-form.readthedocs.io/en/latest/
      "properties": { # (required)
        "book": {
          "type": "string",
          "title": "Book",
          "description": "Select a book.",
          "enum": ["Book 1", "Book 2"],
          "enumNames": ["Book 1", "Book 2"],
          "widget": "MaterialFormSelect",
          "default": "Book 1",
          "order": 1
        },
        "quantity": {
          "type": "number",
          "title": "Quantity",
          "description": "The quantity book to order.",
          "widget": "MaterialFormNumber",
          "min": 1,
          "default": 1,
          "order": 2
        }
      },
      "minItems": 1, # number of nested fields to load on default
      "items": [], # (optional), if provided, it will overwrite the properties
      "required": [
        "test",
        "quantity"
      ]
    }
}
```

## Views

See the interface of the widget in the following views.

### **Readonly view**

Readonly view display the values of the column.

<figure><img src="https://3607108856-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LHVg57XIRcjV-Vbubtn%2Fuploads%2Fgit-blob-cfd10999c8d506fcabdd386c96d9e4674a2869de%2Fwidget-column-nested-fields-readonly.webp?alt=media" alt=""><figcaption></figcaption></figure>

### **Edit view**

The Edit view is the interface that allows you to modify the value.

<figure><img src="https://3607108856-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LHVg57XIRcjV-Vbubtn%2Fuploads%2Fgit-blob-aa7d5ca7d12132b9eb33eed4ce2fc84beeafc57c%2Fwidget-column-nested-fields-edit.webp?alt=media" alt="" width="563"><figcaption></figcaption></figure>

### **Form view**

The Form view is the field integrated into the add form for collecting values when creating a new record.

The form view is the same as the Edit view.

## Data

Each widget in Labii stores data in a unique manner; refer below to understand how data from this widget is stored.

### Data format

JSON

```json
{
    "field_1": "xxx",
    "field_2": "xxx"
}
```

### **Default value**

The Default Value field within the column allows you to specify the default value when a record is created.

Default value shall be the JSON

### **Import value**

The Import Value is the value you need to include in your Excel table for it to be imported into Labii.

Import value shall be the JSON
