Nested Layouts & Types

General
1

I have a schema like this:

export const uischema = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'HorizontalLayout',
      elements: [
        {
          type: 'Control',
          scope: '#/properties/contractTitle',
          label: 'Contract Title',
          options: {
            columnWidth: 2,
          },
        },
        {
          type: 'Control',
          scope: '#/properties/contractNumber',
          label: 'Contract Number',
          options: {
            columnWidth: 1,
          },
        },
        {
          type: 'Control',
          scope: '#/properties/currency',
          label: 'Currency',
          options: {
            columnWidth: 1,
            placeholder: 'Select a currency',
          },
        },
      ],
    },
  ],
}

I wanted to type it like this:

export const uischema: UISchemaElement

Or Layout or something, but I get a TS error because of the nested layouts. Can I assign a type to the uischema const?

2

Hi @liteninkiran,

Sadly our types are structured in a way which is not very compatible with Typescripts automatic type inference.

You can assign the “correct” type to your uischema by manually typing all the subparts too, e.g.

export const uischema: VerticalLayout = {
  type: 'VerticalLayout',
  elements: [
    {
      type: 'HorizontalLayout',
      elements: [
        {
          type: 'Control',
          scope: '#/properties/contractTitle',
          label: 'Contract Title',
          options: {
            columnWidth: 2,
          },
        } as ControlElement,
        {
          type: 'Control',
          scope: '#/properties/contractNumber',
          label: 'Contract Number',
          options: {
            columnWidth: 1,
          },
        } as ControlElement,
        {
          type: 'Control',
          scope: '#/properties/currency',
          label: 'Currency',
          options: {
            columnWidth: 1,
            placeholder: 'Select a currency',
          },
        } as ControlElement,
      ],
    } as HorizontalLayout,
  ],
};