Show data object horizontally

General
1

I have this in my schema:
schema = {
“type”: “object”,
“properties”: {
“Name”: {
“type”: “object”,
“properties”: {
“Last Name”: {
“type”: “string”,
},
“First Name”: {
“type”: “string”,
“description”: “Enter your name”
}
}
}, …

And in my uischema:
{
type: ‘Control’,
scope: ‘#/properties/Name’,
label: false
},

It renders the 2 fields vertically.
I need them to be horizontal.

How can I define that?

2

Hi @martin-shn,

You can either specify a UI Schema for them directly, e.g.

{
  "type": "HorizontalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/Name/properties/First Name"
    },
    {
      "type": "Control",
      "scope": "#/properties/Name/properties/Last Name"
    }
  ]
}

Or use a detail UI Schema for the Name property, e.g.

{
  "type": "Control",
  "scope": "#/properties/Name",
  "options": {
    "detail": {
      "type": "HorizontalLayout",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/First Name"
        },
        {
          "type": "Control",
          "scope": "#/properties/Last Name"
        }
      ]
    }
  }
}

For more details and options, please check the documentation

3

yea… this is what i did but I thought there is a better and shorter way. its just the orientation of the display so I wanted to avoid of each field manually.

4

Using a custom renderer for the object type you can implement arbitrary layouting without maintaining an additional UI Schema.