Help icon/text for multiselect

General
1

I would like the ability to have a help icon optionally next to multiselect options, in which case when a user hovers over the help icon, they see help text.

As I was thinking through this, my plan was to create a new field within a oneOf called ‘help’ in which I could include as part of the field definition. For example:

"exampleMultiSelect": {
    "title": "Example Multi-Select",
    "type": "array",
    "uniqueItems": true,
    "items": {
        "oneOf": [{
                "title": "Option 1",
                "const": "OPTION_1"
            }, {
                "title": "Option 2",
                "const": "OPTION_2",
                "help": "Additional details related to Option 2"
            }, {
                "title": "Option 3",
                "const": "OPTION_3"
            }, {
                "title": "Option 4",
                "const": "OPTION_4",
                "help": "Additional details related to Option 4"
            }, {
                "title": "Option 5",
                "const": "OPTION_5"
            }
        ]
    }
}

In terms of pulling this off, my goal was to copy the existing control used to generate the multiselect options, and then make the modification. I am struggling to figure out which controls I would need to first copy, and then modify. Can anyone point me in the right direction?

2

Hi @hellsfantasy ,

to determine which renderer you can use as a base please tell us which bindings (e.g. react, angular, vue) and which renderer set (e.g. material, vanilla) you want to use in your application.

Best regards,
Lucas

3

Thanks! I’m using React with Material. I started with the jsonforms-react-seed, trying to get this custom controller working there first. If useful, here’s the snippet for the UISchema that I’m using.

{
    "type": "Control",
    "scope": "#/properties/exampleMultiSelect",
    "options": {
        "detail": {
            "type": "VerticalLayout",
            "elements": [{
                    "type": "Control",
                    "scope": "#"
                }
            ]
        }
    }
}
4

As a starting point you can have a look at copying and customizing the MaterialOneOfEnumControl.

To get the help text for each option, you’ll either need to write a custom HOC like withJsonFormsOneOfEnumProps or get it from the schema prop in your custom renderer. The latter is probably simpler.

Hope this helps and best regards,
Lucas

5

Thanks. After investigating further, I do not believe that is the right control to start with. MaterialEnumArrayRenderer seems to be the one that handles multiselects.

1 Like