Customize display value of combobox items for integration config flow

Development
1

I have a config flow defined for my custom integration, and one of my configuration options is a single-select dropdown of values. This is configured via vol.In, and generally works:

vol.Required(
   CONF_PUBLISH_MODE,
   default="all",
): vol.In(["all", "value_changed", "any_changed"])

image
image1012×1326 73.5 KB

My problem is that I’d like to offer a more user-friendly display value for each of these entries, but I’m forced to show the “internal” value here. Is there a way to show a translatable, friendly display value for each of these permitted values?

2

Bumping for visibility. Has anyone else come across this before?

3

I’m going to… any solutions?

4

Just checking in – has anyone come up with a clever solution to this?

5

Use the new selectors where you can also use a dict to specify label: value to make it looks nicer.

2 Likes
6

@gjohansson thanks for the pointer, this is exactly what I was looking for!

References:

2 Likes
7

When I update HA to 2022.6.4, vol.In change the format from comboBox to check box in the front end, I want to show the list by combo box like before, what should I do? It seems like the selector also can’t solve my problem.

8

Not sure if you have solved this but it seems that you need at least 6 options for it to display a combo box. 5 or less options displays as a radio button group. Haven’t found a way to change this.

9

Ok, have found how to do this. Should have looked more before I posted!

Use the new selector option and add a mode entry of dropdown to force it into dropdown mode instead of list mode. If this mode is not set, as before, less than 6 items will show a list. Ie.

data_schema["test"] = selector({
            "select": {
                "options": ["Op1", "Op2", "Op3", "op4", "op5"],
                "mode": "dropdown"
            }
        })
1 Like
10

Thank you for your help, it’s helpful.
I can show the comboBox via selector.
But I have another question is that I have two data_schema in config_flow,
and the list which shows as a comboBox is in the second data_schema.
The members of the list will be affected of the first data_schema, but it seems like
it will just show as the initial state, it won’t append the member to it after submitting the first data schema to call an API, but the vol.In will. What should I do? There is my second schema:

SCHEMA_CAMERA = vol.Schema(
    {
        vol.Optional(CONF_CAMERA_IP, default=False):selector.SelectSelector(
                    selector.SelectSelectorConfig(options=CONF_IP_LIST,
                                                  mode=selector.SelectSelectorMode.DROPDOWN),
                    ),
        vol.Required(CONF_CAMERA_NAME, default=False): cv.string,
        vol.Optional(CONF_CAMERA_USERNAME, default=False): cv.string,
        vol.Optional(CONF_CAMERA_PASSWORD, default=False): cv.string,
        vol.Optional(CONF_ADD_DEVICE, default=False): cv.boolean,
    }
)
1 Like
11

Not 100% sure as have not tested this too much but had the same issue of not showing drop down and my options page was too long as a result.

If this is your initial config, maybe do the IP list selection as another step. This way it will load a new form with the right data.

Sorry can’t be of more help.

1 Like
12

It’s okay, you still inspired me, I appreciate your passion. Thank you!

13

is the data schema is on the config flow? if yes can you please share the sample code?