# Labels for array of strings

**URL:** <https://jsonforms.discourse.group/t/labels-for-array-of-strings/707>\
**Category:** General\
**Created:** [April 4, 2022, 8:37pm UTC](https://jsonforms.discourse.group/t/labels-for-array-of-strings/707 "2022-04-04T20:37:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kolban-google](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/kolban-google/32/283_2.png) [@kolban-google](https://jsonforms.discourse.group/u/kolban-google)\
**Post date:** [April 4, 2022, 8:37pm UTC](https://jsonforms.discourse.group/t/labels-for-array-of-strings/707/1 "2022-04-04T20:37:25Z")

</div>

I have raw data that is an array of strings:

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

```

My UI Schema is:

```auto
{
  "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](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/c1d3bbc85a492f46f69ee8fc83b2a23ff0c48c1b.png)

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?

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [April 5, 2022, 11:05am UTC](https://jsonforms.discourse.group/t/labels-for-array-of-strings/707/2 "2022-04-05T11:05:43Z")

</div>

The label of each array layout element is determined either via the UI Schema option [`elementLabelProp`](https://github.com/eclipsesource/jsonforms/blob/d65d7eb8a5050c6de7a4e086e01237bd2488f64c/packages/material/src/layouts/MaterialArrayLayout.tsx#L99) or via the [first primitive attribute it can find](https://github.com/eclipsesource/jsonforms/blob/d65d7eb8a5050c6de7a4e086e01237bd2488f64c/packages/material/src/layouts/ExpandPanelRenderer.tsx#L264-L266).

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.

---

<div class="post-metadata">

**Author:** ![kolban-google](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/kolban-google/32/283_2.png) [@kolban-google](https://jsonforms.discourse.group/u/kolban-google)\
**Post date:** [April 5, 2022, 1:47pm UTC](https://jsonforms.discourse.group/t/labels-for-array-of-strings/707/3 "2022-04-05T13:47:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [April 6, 2022, 7:06am UTC](https://jsonforms.discourse.group/t/labels-for-array-of-strings/707/4 "2022-04-06T07:06:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![valentinedwv](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/valentinedwv/32/244_2.png) [@valentinedwv](https://jsonforms.discourse.group/u/valentinedwv)\
**Post date:** [April 11, 2022, 7:17pm UTC](https://jsonforms.discourse.group/t/labels-for-array-of-strings/707/5 "2022-04-11T19:17:17Z")

</div>

If you are using vuetify… there is an issue:

> <https://github.com/eclipsesource/jsonforms-vuetify-renderers/issues/45>
>
> JSONFORMS UI Schema... says elementLabelProp
> https://jsonforms.io/docs/uischema…/controls/#label-for-array-elements-elementlabelprop
> 
> Vuetify, at least for ArrayLayoutRenderer using childLabelProp
> https://github.com/eclipsesource/jsonforms-vuetify-renderers/blob/a3b1927813ef8e0cefc424e3025850ecda3cdd67/vue2-vuetify/src/util/composition.ts#L163

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

 ![Screen Shot 2022-04-11 at 12.21.52 PM](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/00c58816114db1c03c0b75d4e185f4c51007e4c7.png)

> <https://github.com/earthcube/jsonld_forms/blob/master/src/components/controls/ArrayControlStringRenderer.vue>

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [April 12, 2022, 7:24am UTC](https://jsonforms.discourse.group/t/labels-for-array-of-strings/707/6 "2022-04-12T07:24:46Z")

</div>

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.