Object

The Object component handles nested form structures, allowing users to add, modify, and manage items dynamically. This component supports nested objects and arrays, making it versatile for complex form data handling. It leverages Material-UI's components to provide a structured and organized user experience.

Schema

warning

Warning: Avoid using . (dot) in the name property as it can cause issues with nested field paths in the form state.

Examples of accepted naming conventions:

• obj_item
• objItem1
• anyname

{
    "name": "cart",
    "meta": {
        "displayType": "object",
        "displayName": "Cart Items",
        "readOnly": false,
        "children": [
            {
                "name": "accessoreis",
                "meta": {
                    "htmlProps": {
                        "allowDynamic": true
                    },
                    "displayType": "object",
                    "displayName": "Accessories",
                    "children": [
                        {
                            "name": "SKU_PHONE",
                            "meta": {
                                "validation": { "required": true },
                                "displayType": "text",
                                "displayName": "SKU Phone"
                            }
                        },
                        {
                            "name": "SKU_ADDRESS",
                            "meta": {
                                "validation": {
                                    "required": false
                                },
                                "displayType": "textarea",
                                "displayName": "SKU Address"
                            }
                        }
                    ]
                }
            }
        ]
    }
}

Example Component

Cart Items (Optional)

Accessories

SKU Phone



SKU Address (Optional)

​

---

---

Form Data:

{}

Props

meta object

The meta object defines the display characteristics and behavior of the Object component.

Name	Description	Type
displayName	The name to display as the section header	string
htmlProps	Properties for HTML behavior, like allowDynamic	object
children	Array of child fields contained within the Object	array
displayType	Type of the field display, which is "object" in this case	string
readOnly	A readonly field is not editable and value cannot be changed	boolean

Example JSON Structures

Nested Object

{
    "name": "items",
    "meta": {
        "displayType": "object",
        "displayName": "Items",
        "htmlProps": {
            "allowDynamic": true,
            "allowAdd": true
        },
        "validation": {
            "max": 5
        },
        "children": [
            {
                "name": "itemName",
                "meta": {
                    "displayType": "text",
                    "displayName": "Item Name",
                    "validation": {
                        "required": true
                    }
                }
            },
            {
                "name": "items",
                "meta": {
                    "displayType": "object",
                    "displayName": "Items",
                    "htmlProps": {
                        "allowDynamic": true,
                        "allowAdd": true
                    },
                    "validation": {
                        "max": 5
                    },
                    "children": [
                        {
                            "name": "itemName",
                            "meta": {
                                "displayType": "text",
                                "displayName": "Item Name",
                                "validation": {
                                    "required": true
                                }
                            }
                        },
                        {
                            "name": "itemQuantity",
                            "meta": {
                                "displayType": "number",
                                "displayName": "Item Quantity",
                                "validation": {
                                    "required": true,
                                    "min": 1
                                }
                            }
                        }
                    ]
                }
            },
            {
                "name": "itemQuantity",
                "meta": {
                    "displayType": "number",
                    "displayName": "Item Quantity",
                    "validation": {
                        "required": true,
                        "min": 1
                    }
                }
            }
        ]
    }
}

This schema and example component outline the use of an Object component with nested structures, supporting dynamic item addition and validation handling.