[Vue3] > Using Native Object Renderer > Avoid group renderer

General
1

Hey there,

When using the native object renderer for Vue3, is there any way to avoid the wrapping design around the fields inside the object? See following screenshot to see what I mean by wrapping design:

Screenshot 2024-04-15 at 11.54.46

Basically, is there a way to avoid the line wrapping around both fields and the Name header?
Or do I have to create a custom renderer to avoid this?

Thank you

2

Hi @adamsilva01,

Our group renderer renders a fieldset, which is where the “wrapping” design is coming from.

You can do one of the following:

  • Use CSS to customize fieldset styling as you like, or
  • Implement a custom group renderer which does not render a fieldset, or
  • Provide a detail UI Schema for the object in your UI Schema or via the uischemas registry. In there you then not use a Group but a regular VerticalLayout.
3

Hey @sdirix ,

Thanks for the quick response!

The most native option seems to be the last one so I’m trying that. However, my UISchema was already declaring a VerticalLayout instead of a Group. Here is the UI Schema:

{"type":"VerticalLayout","elements":[{"type":"Control","scope":"#/properties/~1personal~1address","options":{}}]}

Here is the schema for this field just in case:

"/personal/address": {
      "title": "Address",
      "description": "Full address from anything between street address and country",
      "type": "object",
      "properties": {
        "country": {
          "title": "Country",
          "type": "string",
          "minLength": 1,
          "maxLength": 3
        },
        "city": {
          "title": "City",
          "type": "string",
          "minLength": 1,
          "maxLength": 500
        }
      },
      "required": [
        "country",
        "city"
      ]
    }
  },

What do you mean by providing a detail UI Schema? If that’s a property inside the UI Schema type I can’t seem to find it anywhere.

4

See here for the docs.

This is how the UI Schema could look like:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/~1personal~1address",
      "options": {
        "detail": {
          "type": "VerticalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/country"
            },
            {
              "type": "Control",
              "scope": "#/properties/city"
            }
          ]
        }
      }
    }
  ]
}

Alternatively you can also “bypass” the object:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/~1personal~1address/properties/country"
    },
    {
      "type": "Control",
      "scope": "#/properties/~1personal~1address/properties/city"
    }
  ]
}

Implementing custom renderers is what most consumers do at some point, often even replacing the whole off-the-shelf renderer set over time. Implementing them is rather straightforward and gives you full control over the UI.

1 Like
5

Hey @sdirix ,

Thanks again for the quick response and detailed answer! That has solved my issue!

1 Like