Horizontal Layout on array Items

General
1

Hi I am trying to setup a UI schema for the following schema

    type: 'object',
    properties: {
      periods: {
        type: 'array',
        minItems: 1,
        items: {
          type: 'object',
          properties: {
            duration: {
              description: 'Duration',
              type: 'integer'
            },
            interestRate: { type: 'number' },
            type: { type: 'string', enum: [ 'FIXED', 'VARIABLE'] },
            baseRate: { type: 'number' }
          },
          required: ['duration', 'type', 'interestRate'],
          title: 'LoanPeriod'
        }
      }
    }
  }

the UI Schema I need for the array items to be of a horizontalLayout such that they appear as “rows” . How can i achieve this, as I tried all sort of ways in vain.

2

Figured out using the options key in the control

{
"type": "VerticalLayout",
    "elements": [
      {
        "type": "Control",
        "scope": "#/properties/periods",
        "options": {
            "childLabelProp": "",
            "detail": {
              "type": "HorizontalLayout",
              "elements": [
                {
                  "type": "Control",
                  "scope": "#/properties/type"
                },
                {
                  "type": "Control",
                  "scope": "#/properties/interestRate"
                },
                {
                  "type": "Control",
                  "scope": "#/properties/duration"
                },
                {
                  "type": "Control",
                  "scope": "#/properties/baseRate"
                }
              ]
            }
          }
      
      },
      
    ]
}
2 Likes