Json Schema Form rwesponsive layouts

[FalkWolsky]

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

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation Update (if none of the other choices apply)

Checklist

• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)
• Any dependent changes have been merged and published in downstream modules

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' },
  ],
}

[netlify]

✅ Deploy Preview for lowcoder-test ready!

Name	Link
🔨 Latest commit	36709ac
🔍 Latest deploy log	https://app.netlify.com/sites/lowcoder-test/deploys/673b68c626df4200084ffb0b
😎 Deploy Preview	https://deploy-preview-1316--lowcoder-test.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.