# elementLabelProp displays const instead of title of oneOfs (MaterialRenderer)

**URL:** <https://jsonforms.discourse.group/t/elementlabelprop-displays-const-instead-of-title-of-oneofs-materialrenderer/1248>\
**Category:** General\
**Created:** [January 20, 2023, 7:54am UTC](https://jsonforms.discourse.group/t/elementlabelprop-displays-const-instead-of-title-of-oneofs-materialrenderer/1248 "2023-01-20T07:54:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![rwoerzbe](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/rwoerzbe/32/597_2.png) [@rwoerzbe](https://jsonforms.discourse.group/u/rwoerzbe)\
**Post date:** [January 20, 2023, 7:54am UTC](https://jsonforms.discourse.group/t/elementlabelprop-displays-const-instead-of-title-of-oneofs-materialrenderer/1248/1 "2023-01-20T07:54:57Z")

</div>

I have an array with complex items. These array items are actually two strings that are selected from onOfs.

Example (also on [Stackblitz](https://stackblitz.com/edit/react-etcjuw?file=src/App.js)):

```auto
const schema = {
  $schema: 'http://json-schema.org/schema#',
  $id: 'ObjectsWithOneOfInArrayExample',
  type: 'object',
  properties: {
    myArray: {
      type: 'array',
      items: {
        type: 'object',
        properties: {
          letter: {
            type: 'string',
            oneOf: [
              {
                const: 'A',
                title: 'A is the first letter in the English alphabet',
              },
              {
                const: 'B',
                title: 'B is the second letter in the English alphabet',
              },
            ],
          },
          romanNumber: {
            type: 'string',
            oneOf: [
              { const: 'I', title: 'I is the first roman number' },
              { const: 'II', title: 'II is the second roman number' },
            ],
          },
        },
      },
    },
  },
};

```

My uischema looks like follows:

```auto
const uischema = {
  type: 'Group',
  elements: [
    {
      type: 'Control',
      scope: '#/properties/myArray',
      options: {
        elementLabelProp: 'letter', // actually displays 'letter/const' but 'letter/title' would be better here
        detail: {
          type: 'HorizontalLayout',
          elements: [
            {
              type: 'Control',
              scope: '#/properties/letter',
            },
            {
              type: 'Control',
              scope: '#/properties/romanNumber',
            },
          ],
        },
      },
    },
  ],
};

```

which renders to:

 ![image](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/1X/7612d7f031264c1a731fb8d252182d68b5a824fe.png)

As you can see, `elementLabelProp` targets the `const` component in `letter`. Technically, this makes sense as this is acutally the value for the `letter` in the data. However, in the UI it would be better if the label for a collapsed array item would be the `title` in the `oneOf`. Is that possible (without rewriting the whole renderer)?

Maybe this is somewhat related to [this topic](https://jsonforms.discourse.group/t/label-for-array-items-selected-from-oneofs-with-reactrenderer-materialrenderer/1227).

---

<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:** [January 20, 2023, 11:28am UTC](https://jsonforms.discourse.group/t/elementlabelprop-displays-const-instead-of-title-of-oneofs-materialrenderer/1248/2 "2023-01-20T11:28:05Z")

</div>

Hi @rwoerzbe,

Sadly the `elementLabelProp` concept is not generic enough to achieve the desired behavior as it’s designed to directly access the actual data. To adapt this in JSON Forms we must come up with a more powerful concept.

If you don’t care about the structure of your data or a willing to add transformers, then you could adapt your JSON Schema to:

- store the `title` alongside the value in the data. In that case `elementLabelProp` could refer to the stored `title` in the data, e.g. `oneOf: [{ title: 'ABC', const: { title: 'ABC', value: 'A' }}]`. Obviously that is a rather dirty hack
- Only use the `title` in your JSON Schema, e.g. `enum: ["A is the...", "B is the..."]`. Then transform the stored titles into their actual values as a step inbetween JSON Forms and your application.

The clean solution is to fix this with a custom renderer. In this case you would need to copy the [`MaterialArrayLayout`](https://github.com/eclipsesource/jsonforms/blob/ede7d61677329c92a5878808ac20277392734676/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx) and write and use a new binding for the [`ExpandPanelRenderer`](https://github.com/eclipsesource/jsonforms/blob/ede7d61677329c92a5878808ac20277392734676/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx#L252-L289) in which you can add the behavior you like to see. The newly wrapped `CustomExpandPanelRenderer` can then be used in your `MaterialArrayLayout`. Then register this as a custom renderer with a higher priority as the existing `MaterialArrayLayout` and your’e done.

Now taking a step back I would like to actually recommend instead is just doing the same solution as in the [linked topic](https://jsonforms.discourse.group/t/label-for-array-items-selected-from-oneofs-with-reactrenderer-materialrenderer/1227). There is no reason to not show these two attributes directly within a table. This not only renders a cleaner UI as the expandable sections are still overkill for only two attributes, it also avoids the `elementLabelProp` issues. All you need to do is to adapt the tester in the [linked topic](https://jsonforms.discourse.group/t/label-for-array-items-selected-from-oneofs-with-reactrenderer-materialrenderer/1227) to also recognize the structure with a shallow object and multiple `oneOfs` as properties.

---

<div class="post-metadata">

**Author:** ![rwoerzbe](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/rwoerzbe/32/597_2.png) [@rwoerzbe](https://jsonforms.discourse.group/u/rwoerzbe)\
**Post date:** [January 22, 2023, 8:06am UTC](https://jsonforms.discourse.group/t/elementlabelprop-displays-const-instead-of-title-of-oneofs-materialrenderer/1248/3 "2023-01-22T08:06:33Z")

</div>

Thanks alot. I opted for latter solution and made the tester match my specific schema element with the two oneOf properties. Now it renders as a table.