Configure Panel for Custom Component

ianByrne · March 17, 2021, 11:11pm

I am wondering if it is possible to create a custom “configure” panel in a custom component, mimicking the functionality of the same thing in the Zigbee integration?

Clicking this button opens a new page with tabs and fancy UI things (manage groups, visualize the network, etc).

I’d like to implement something similar for an integration I’m working on - unfortunately the Options Flow does not have the flexibility/complexity that I’m looking for

nickrout · March 18, 2021, 2:58am

The source for that particular integration’s config flow is here, I assume it will give you some ideas?

github.com

home-assistant/core/blob/f625e324dd52f51d7e049920d88c2086909010dc/homeassistant/components/zha/config_flow.py

"""Config flow for ZHA."""
import os
from typing import Any, Dict, Optional

import serial.tools.list_ports
import voluptuous as vol
from zigpy.config import CONF_DEVICE, CONF_DEVICE_PATH

from homeassistant import config_entries

from .core.const import (  # pylint:disable=unused-import
    CONF_BAUDRATE,
    CONF_FLOWCONTROL,
    CONF_RADIO_TYPE,
    DOMAIN,
    RadioType,
)

CONF_MANUAL_PATH = "Enter Manually"
SUPPORTED_PORT_SETTINGS = (

This file has been truncated. show original

ianByrne · March 18, 2021, 8:51am

I did have a rummage through that but this config_flow.py file is all about the initial configuration form, not the fancier “Configure” panel that is accessed after installation.

I’ve now expanded my search to the frontend repo, and can see references to what I’m after here:

So it’s looking unlikely that such a thing can be easily added to a custom component

sparkydave · March 18, 2021, 8:58am

It should be possible. There is a similar ‘options’ menu for the custom youtube music component I use

ianByrne · March 18, 2021, 9:22am

Unfortunately this Options flow is different to what I’m referring to - they are somewhat limited to just a simple popup form, as per your screenshot. The “fancy config page” thing that the Zigbee component has is an entirely separate page/subsite/section with custom styling and logic.

I’m particularly interested in the “Create Group” page, where you can bundle Zigbee devices into logical groups. Here there is a list of all my devices with a handy Search box above them to easily filter and select.

I would like to replicate something like this for my integration, but the closest thing I can get via the Options flow is the multi-select, but it isn’t quite the same

rautesamtr · October 3, 2021, 9:15am

Hi @ianByrne, did you ever find a solution for this?

ianByrne · October 3, 2021, 10:33am

Unfortunately not From what I could see, the extra functionality that can be found in the Zigbee component is only because it’s hard coded in the UI - there’s no way to do similar things in a 3rd-party custom component.

anon63427907 · October 9, 2021, 11:32pm

I have couple of custom integrations and I have configure button for them like this;

github.com

fuatakgun/kia_uvo/blob/d5f497a241b9b232485d03926204b5ca0d245f74/custom_components/kia_uvo/config_flow.py#L53


    BRANDS,
    DEFAULT_BRAND,
)
from .KiaUvoApiImpl import KiaUvoApiImpl
from .Token import Token
from .utils import get_implementation_by_region_brand

_LOGGER = logging.getLogger(__name__)


class KiaUvoOptionFlowHandler(config_entries.OptionsFlow):
    def __init__(self, config_entry):
        self.config_entry = config_entry
        self.schema = vol.Schema(
            {
                vol.Optional(
                    CONF_UNIT_OF_MEASUREMENT,
                    default=self.config_entry.options.get(
                        CONF_UNIT_OF_MEASUREMENT, DEFAULT_DISTANCE_UNIT
                    ),
                ): vol.In(DISTANCE_UNITS),

Edit: You want to have a separate page as MQTT or ZHA, not pop up. I see your question now and I do not know the answer.

farmio · April 17, 2023, 8:07am

Hi !
If there is still interest in this, I’m currently working on such a custom configuration panel. Searching for infos or documentation unfortunately yields next to nothing.

The only example of config panels that are not part of HA frontend repo I could find was “Insteon”.

The idea is to load it from pypi as integration requirement, run it in an iFrame and communicate via websockets to your integration backend.

Unfortunately I’m totally new to frontend development, so any pointers to other examples, threads or documentation are appreciated.

nickrout · April 17, 2023, 9:05am

The insteon integration has an external dependency on this

teharris1 · August 8, 2023, 7:34pm

I am the author of the Insteon custom panel. There are at least 2 other integrations that have a custom panel as well. We have also created a template project that can be used as a starting point: Have a look at these integrations:

KNX
Dynalite

And the custom panel template is here: ha-custom-panel/template: Template repository for Home Assistant custom panels. (github.com). it is a work in progress however.