mq/examples/app/complex.json

{
    "$schema": "https://json-schema.org/draft/2020-12/schema",
    "type": "object",
    "title": "Company Registration",
    "properties": {
        "session_id": {
            "type": "string",
            "title": "Session ID",
            "ui": {
                "element": "input",
                "type": "hidden",
                "name": "session_id",
                "value": "{{session_id}}"
            }
        },
        "task_id": {
            "type": "string",
            "title": "Task ID",
            "ui": {
                "element": "input",
                "type": "hidden",
                "name": "task_id",
                "value": "{{task_id}}"
            }
        },
        "company": {
            "type": "object",
            "properties": {
                "name": {
                    "type": "string",
                    "title": "Company Name",
                    "ui": {
                        "element": "input",
                        "type": "text",
                        "name": "name",
                        "class": "form-group",
                        "order": 1
                    }
                },
                "address": {
                    "type": "object",
                    "properties": {
                        "street": {
                            "type": "string",
                            "title": "Street Address",
                            "ui": {
                                "element": "input",
                                "type": "text",
                                "class": "form-group",
                                "order": 2
                            }
                        },
                        "city": {
                            "type": "string",
                            "title": "City",
                            "ui": {
                                "element": "input",
                                "type": "text",
                                "class": "form-group",
                                "order": 3
                            }
                        },
                        "country": {
                            "type": "string",
                            "title": "Country",
                            "enum": [ "US", "CA", "UK", "DE", "FR" ],
                            "ui": {
                                "element": "select",
                                "class": "form-group",
                                "order": 4,
                                "options": [
                                    { "value": "US", "text": "United States" },
                                    { "value": "CA", "text": "Canada" },
                                    { "value": "UK", "text": "United Kingdom" },
                                    { "value": "DE", "text": "Germany" },
                                    { "value": "FR", "text": "France" }
                                ]
                            }
                        },
                        "zipCode": {
                            "type": "string",
                            "title": "ZIP/Postal Code",
                            "pattern": "^[0-9]{5}(-[0-9]{4})?$",
                            "ui": {
                                "element": "input",
                                "type": "text",
                                "class": "form-group",
                                "order": 5
                            }
                        }
                    },
                    "required": [ "street", "city", "country" ]
                },
                "contact": {
                    "type": "object",
                    "properties": {
                        "email": {
                            "type": "string",
                            "format": "email",
                            "title": "Contact Email",
                            "ui": {
                                "element": "input",
                                "type": "email",
                                "class": "form-group",
                                "order": 6
                            }
                        },
                        "phone": {
                            "type": "string",
                            "title": "Phone Number",
                            "ui": {
                                "element": "input",
                                "type": "tel",
                                "class": "form-group",
                                "order": 7
                            }
                        }
                    },
                    "required": [ "email" ]
                }
            },
            "required": [ "name", "address", "contact" ]
        }
    },
    "required": [ "company" ],
    "form": {
        "class": "company-registration-form",
        "action": "/process",
        "method": "POST",
        "groups": [
            {
                "title": {
                    "text": "Company Information",
                    "class": "group-header"
                },
                "class": "company-info",
                "fields": [ "company.name" ]
            },
            {
                "title": {
                    "text": "Address Details",
                    "class": "group-header"
                },
                "class": "flex items-start gap-4 address-info",
                "fields": [ "company.address.street", "company.address.city", "company.address.country", "company.address.zipCode" ]
            },
            {
                "title": {
                    "text": "Contact Information",
                    "class": "group-header"
                },
                "class": "flex items-start gap-4 contact-info",
                "fields": [ "company.contact.email", "company.contact.phone" ]
            }
        ],
        "submit": {
            "label": "Register Company",
            "class": "btn btn-success btn-lg px-4 py-2"
        }
    }
}