Proposed changes
Till now the Responsiveness of a JSON Schema Form was bound to the Screensize by CSS Media Query.
This is good, but it would be even better, if bound to the Component Width. This PR solves exactly this.
Types of changes
Checklist
Further comments
We work further to enable Categorization Type Layouts too.
As for now, a user can make use of this combination:
Schema
{ title: 'Sales CRM Form', type: 'object', properties: { customerDetails: { type: 'object', title: 'Customer Details', properties: { firstName: { type: 'string', title: 'First Name' }, lastName: { type: 'string', title: 'Last Name' }, email: { type: 'string', format: 'email', title: 'Email' }, phoneNumber: { type: 'string', title: 'Phone Number', pattern: '^[+]?[0-9]{1,4}?[-.\\s]?[(]?[0-9]{1,3}?[)]?[-.\\s]?[0-9]{1,4}[-.\\s]?[0-9]{1,4}[-.\\s]?[0-9]{1,9}$', // Pattern for phone number }, companyName: { type: 'string', title: 'Company Name' }, companySize: { type: 'string', title: 'Company Size', enum: [ "1-5", "6-10", "11-20", "21-30", "31-40", "41-50", "51-60", "61-70", "71-80", "81-90", "91-100", "101-150", "151-200", "201-250", "251-300", "301-350", "351-400", "401-450", "451-500", "501+"], }, }, }, opportunityDetails: { type: 'object', title: 'Opportunity Details', properties: { opportunityName: { type: 'string', title: 'Opportunity Name' }, expectedRevenue: { type: 'number', title: 'Expected Revenue (in USD)' }, probability: { type: 'integer', title: 'Probability of Closure (%)', minimum: 0, maximum: 100 }, nextSteps: { type: 'string', title: 'Next Steps', default: 'Follow up' }, closeDate: { type: 'string', format: 'date', title: 'Expected Close Date' }, }, }, teamMembers: { type: 'array', title: 'Team Members', items: { type: 'object', properties: { name: { type: 'string', title: 'Name' }, role: { type: 'string', title: 'Role', enum: ['Sales Rep', 'Account Manager', 'Sales Engineer', 'Executive Sponsor'], }, email: { type: 'string', format: 'email', title: 'Email' }, }, }, }, notes: { type: 'array', title: 'Notes and Comments', items: { type: 'object', properties: { date: { type: 'string', format: 'date-time', title: 'Date' }, comment: { type: 'string', title: 'Comment' }, }, }, }, }, required: ['customerDetails', 'opportunityDetails', 'teamMembers'],}
UI Schema
{ "customerDetails": { "ui:props": { "rowGutter": 16 }, "ui:grid": [ { "firstName": { "xs": 24, "sm": 24, "md": 12, "lg": 8, "xl": 8 } }, { "lastName": { "xs": 24, "sm": 24, "md": 12, "lg": 8, "xl": 8 } }, { "email": { "xs": 24, "sm": 24, "md": 12, "lg": 8, "xl": 8 } }, { "phoneNumber": { "xs": 24, "sm": 24, "md": 12, "lg": 8, "xl": 8 } }, { "companySize": { "xs": 24, "sm": 24, "md": 12, "lg": 8, "xl": 8 } } ], "ui:colSpan": { "xs": 24, "sm": 24, "md": 24, "lg": 24, "xl": 24 }, "firstName": { "ui:placeholder": "John" }, "lastName": { "ui:placeholder": "Doe" }, "email": { "ui:widget": "email", "ui:placeholder": "john.doe@example.com" }, "phoneNumber": { "ui:widget": "text", "ui:placeholder": "+1 (123) 456-7890", "ui:help": "Please enter your phone number in the format: +1 (123) 456-7890" }, "companyName" : { "ui:widget": "text" }, "companySize": { "ui:widget": "searchableSelect", "ui:placeholder": "Select or type to search company size" } }, "opportunityDetails": { "ui:props": { "rowGutter": 32 }, "ui:grid": [ { "opportunityName": { "xs": 24, "sm": 24, "md": 24, "lg": 24, "xl": 24 } }, { "nextSteps": { "xs": 24, "sm": 24, "md": 24, "lg": 16, "xl": 16 } }, { "expectedRevenue": { "xs": 24, "sm": 24, "md": 12, "lg": 8, "xl": 8 } }, { "probability": { "xs": 24, "sm": 24, "md": 12, "lg": 8, "xl": 8 } }, { "closeDate": { "xs": 24, "sm": 24, "md": 12, "lg": 8, "xl": 8 } } ], "ui:colSpan": { "xs": 24, "sm": 24, "md": 24, "lg": 24, "xl": 24 }, "expectedRevenue": { "ui:widget": "updown", "ui:help": "Enter revenue in USD" }, "probability": { "ui:widget": "range", "ui:help": "Enter a value between 0 and 100" }, "closeDate": { "ui:widget": "date" } }, "teamMembers": { "ui:props": { "rowGutter": 16 }, "ui:grid": [ { "name": { "xs": 24, "sm": 24, "md": 12, "lg": 8, "xl": 8 } }, { "role": { "xs": 24, "sm": 24, "md": 12, "lg": 8, "xl": 8 } }, { "email": { "xs": 24, "sm": 24, "md": 12, "lg": 8, "xl": 8 } } ], "ui:colSpan": { "xs": 24, "sm": 24, "md": 24, "lg": 24, "xl": 24 }, "items": { "name": { "ui:placeholder": "Name" }, "role": { "ui:widget": "select" }, "email": { "ui:widget": "email" } } }, "notes": { "ui:props": { "rowGutter": 16 }, "ui:grid": [ { "comment": { "xs": 24, "sm": 24, "md": 24, "lg": 24, "xl": 24 } } ], "ui:colSpan": { "xs": 24, "sm": 24, "md": 24, "lg": 24, "xl": 24 }, "items": { "comment": { "ui:widget": "textarea", "ui:placeholder": "Enter your comment here...", "ui:props": { "colSpan": { "xs": 24, "sm": 24, "md": 24, "lg": 24, "xl": 24 } } } } }}
prefilled Data
{ customerDetails: { firstName: 'Jane', lastName: 'Doe', email: 'jane.doe@example.com', phoneNumber: '+1 (234) 567-8901', companyName: 'Acme Corp', companySize: '11-50', }, opportunityDetails: { opportunityName: 'New Product Launch', expectedRevenue: 50000, probability: 75, nextSteps: 'Schedule meeting with the client', closeDate: '2023-12-15', }, teamMembers: [ { name: 'John Smith', role: 'Sales Rep', email: 'john.smith@acmecorp.com' }, { name: 'Emily Johnson', role: 'Account Manager', email: 'emily.johnson@acmecorp.com' }, ], notes: [ { date: '2023-10-01T10:00:00Z', comment: 'Initial meeting with the client' }, { date: '2023-10-15T11:00:00Z', comment: 'Discussed contract terms and requirements' }, ],}
Proposed changes
Till now the Responsiveness of a JSON Schema Form was bound to the Screensize by CSS Media Query.
This is good, but it would be even better, if bound to the Component Width. This PR solves exactly this.
Types of changes
Checklist
Further comments
We work further to enable Categorization Type Layouts too.
As for now, a user can make use of this combination:
Schema
UI Schema
prefilled Data