Set title of list-item for different types

General
1

Hi,
I want to build a Form for a schema where I have a main object which has a property called modules. This prop is an attribute which can have items of different types.

{
    "definitions": {
        "module_1": {
            "type": "object",
            "title": "contentitems_3",
            "properties": {
                "icon": {
                    "type": "string",
                    "enum": [
                        "navi_calendar"
                    ],
                    "description": "das Kalendericon",
                    "default": "navi_calendar"
                },
                "title": {
                    "type": "string",
                    "description": "mein Kalender",
                    "default": "mein Kalender"
                }
            },
            "required": [
            ]
        },
        "module_2": {
            "type": "object",
            "title": "timeterminal_2",
            "properties": {
                "icon": {
                    "type": "string",
                    "enum": [
                        "navi_timer"
                    ],
                    "default": "navi_timer"
                },
                "orientation": {
                    "type": "string",
                    "enum": [
                        "landscape",
                        "portrait"
                    ]
                }
            },
            "required": [
            ]
        }
    },
    "type": "object",
    "properties": {
        "modules": {
            "type": "array",
            "items": {
                "oneOf": [
                    {
                        "$ref": "#/definitions/module_1"
                    },
                    {
                        "$ref": "#/definitions/module_2"
                    }
                ]
            }
        }
    }
}

image
image833×503 5.99 KB

I am quite happy with how th result looks so far. But I need the list entry to show the “title” of the used module.
I tried getting this to work uisng a ui-schema without succes.

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "scope": "#/properties/modules",
      "options": {
        "elementLabelProp": "title"
      }
    }
  ]
}

How can I make this work?

Thank you for taking time to respond :slight_smile:

2

Hi @MrMinister,

Sadly the elementLabelProp support is pretty basic and can only refer to a single instance data value. To use it you would need to maintain a property on the array entry which contains the label as you want to show it. While possible this is certainly a bit hacky.

You might want to think about using a custom renderer. You basically only need to copy the MaterialArrayLayoutRenderer and MaterialArrayLayout and then customize the part where the elementLabelProp is determined.