Labels for array of strings

General
1

I have raw data that is an array of strings:

"rule_dimensions: ["A", "B", "C"]

My UI Schema is:

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "label": true,
      "scope": "#/properties/rule_dimensions",
      "options": {
        "detail": "GENERATED"
      }
    }
  ]
}

This shows as:

Screenshot 2022-04-04 3.27.48 PM
Screenshot 2022-04-04 3.27.48 PM898×830 47.3 KB

What I want you to notice is that none of the rows show labels. Is it possible to create labels for these as the values of the string?

2

The label of each array layout element is determined either via the UI Schema option elementLabelProp or via the first primitive attribute it can find.

In your case I would expect that the string content is shown. As that doesn’t work this is a bug with the code here. My guess is that the “first primitive attribute finder” is not being able to find the “items root” as a primitive. We probably did not notice that yet because we typically don’t use the array layout rendering for a single primitive type as the UI is less than ideal for that.

Is there a particular reason you are invoking "detail": "GENERATED" here? If not using that the table renderer instead of the array layout renderer would be used.

3

When I tried without a detail entry, the array showed up fully expanded. My hope was to have them collapsed to give the “circle” icon to the left.

4

We have two different renderers for arrays: A table-like renderer for primitive and flat objects and a layout renderer in which each entry is rendered separately within a collapsible.

By using detail: "GENERATED the use of the layout-renderer is forced. The layout renderer takes up strictly more space as the table renderer, as instead of a single row for each entry you get a whole collapsible.

5

If you are using vuetify… there is an issue:

Here is the control i created to just render the strings.:

Screen Shot 2022-04-11 at 12.21.52 PM
Screen Shot 2022-04-11 at 12.21.52 PM2586×996 111 KB

6

Thanks for the report! Yes in the code base we accidentally both use elementLabelProp and childLabelProp at the same time. This was not intended, we’ll check for a backward compatible solution.