CustomUI, dynamically change items displayed

Configuration
1

I’ve been struggling with this for a very long time, and as I’m starting to be able to make it work, I thought I would give some information here. Hope this helps.

You’re welcome to add examples in reply.

Here I’ll show to hide/display elements in the front end, depending on some status. Of course, this can be applied to many other attributes (icon, color…), not only “hidden”.
For that, I used to make automations and use the “customizer.set_attribute” action. This works, but it needs 2 automations (one to display, one to hide) and it soon becomes hard to handle. You can also hide tracked devices with the option “hide if away” in the known_devices.yaml file, but this will have an impact on the history.

Example of an automation to hide the camera if zoneminder is off :

- alias: 'ZM Stops'
   trigger:
     platform: state
     entity_id: switch.zmmonitor
     to: 'off'
   action:
     - service: customizer.set_attribute
       data:
         entity_id: camera.ext_front
         attribute: hidden
         value: 'True'

This can be done with a customize template, but I had a hard time figuring out the syntax.

Let’s start with the easiest one, hide something depending on its very state. This is an example for a media player : hide it if it’s off. This is an extract from a customize.yaml :

media_player.yamaha_office:
  friendly_name: Yamaha Office
  templates:
    hidden: "return (state === 'off' );"

Note that you’ll need the “===” sign, the “;” at the end of the statement and to protect the string.

If the state isn’t a string and you want to use a numeric state for a comparison, then just use the sign and no cast is necessary.
Example that hides the number of events of a zoneminder camera that has less than 10 events :

sensor.stairs_events:
templates:
hidden: “return (state < 10);”

Last case, you want to change a value from an object, depending on another object state. For instance, show a “turn on” switch for the media player we’ve hidden previously. The switch is displayed only if the entity “media player” is off :

switch.media_office:
  templates:
    hidden: "return (entities['media_player.yamaha_office'].state === 'on'); "

Combined with the first example, you’ll see the whole media player when the amplifier is on, but only a switch to turn it on when it’s off.

BTW, I’m using the great Broadlink Ir Media Player by Vassilis that makes using IR codes really easy.

7 Likes
2

Awesome, thanks for sharing. Can you use wildcards to hide all media players when they are off? That would tidy up my GUI just nicely.

3

And if you’re not using custom_ui you can do this with groups. It just means you have to make a group for every media_player for instance but it does work…

https://home-assistant.io/docs/configuration/group_visibility/

4

Sure, it should work the same as any non-template entry. Never tried.

The group hiding works but nested groups are not displaying all items.

5

I am trying to replicate this and it doesn’t seem to work. Any idea what is wrong?

  sensor.tim_visiting:
    entity_picture: https://mydomainname.duckdns.org/local/tim.jpg
    templates:
      hidden: "return (entities['input_boolean.tim_visiting'].state === 'off'); "

I don’t see any errors, the sensor is never hidden.

6

Did you get this working? I am also trying to use customize.yaml to hide sensors if they have specific state.

7

I ended up using group visibility which is a bit clunky, but it worked.

1 Like
8

I’ve been away for a while, so sorry for the late answer !

Using now 0.77.3, this approach still works.

Are you using custom_ui and customizer ? Those are needed.