Help with a Template for Custom UI


Thanks, do you mean I could use an extra_data_template and make it formatted in the same way as my existing template sensor (showing brightness as a percentage rather than from 0 to 255 etc.), or I could use an extra_data_template to display the output of my existing template sensor?

How could it be done?


You can use extra_data_template to do either of those.

If the documentation at is not comprehensive I should expand it.

Do note that the template syntax is Javascript, unlike Jinja2 used for backend-templates


I’m sure the documentation in fine. The problem is me, I don’t really know JavaScript :grin:

I’ll have a go and see if I can wrestle it into doing what I want, thanks.


If you always want to display brightness (even if it is 0%)

    extra_data_template: ${Math.round(attributes.brightness || 0) / 2.55}%

To display brightness only if it exists and is non-zero:

    extra_data_template: >
      if (attributes.brightness) return Math.round(attributes.brightness / 2.55) + '%'; else return null;


That’s great, thanks a lot! :grinning:


so sorry to bump this, but please allow me to ask how tho get this brightness percentage as an extra badge?

since its not a true attribute, I wouldn’t know how to set the customizing, other then maybe create an extra intermediary template sensor and reference that? Hope to be able to do it directly


I’m wondering if it’s possible to show extra data with Custom UI and Lovelace?

I’ve noticed that it still works to change icon colours with Lovelace, but not show extra data (unless I need to do something different for Lovelace).


Currently, in the native build of lovelace, extra data can only be one of the following items:

entity-id , last-changed

documented here, the attribute is secondary_info


If you want an extra badge, it’ll need to be it’s own separate state object in home assistant. Or you’d need to make a new badge .js file that makes a the ui element for you.


OK, thanks.

Hopefully this will be possible in the future.


I’m sure it will be. Alot of devs hang out on discord. A custom card that does this may already exist, you’d just need to find it. They usually have a good handle on what exists.

Just ask in the lovelace chat


Thanks, will do :+1:t3:


please come back if you found it. Its one of the many things Lovelace misses that made my HA frontend shine… hope to find it soon!
I find it impossible to show single (non grouped) badges above the cards on any view-page at all, nor in cards for that matter.



is turned into this in Lovelace:



badges can only be placed into views, they should appear at the top like you desire.

  - title: Home
      - sensor.temperature
      - sensor.location
      - etc


a yes, I missed that, thank you, looking familiar fortunately even with the theming.

  - title: Home summary
    icon: mdi:home-outline
      - sensor.status_badge
      - sensor.hubs_badge
      - sensor.home_badge
      - sensor.switch_badge
      - sensor.active_badge
      - sensor.appli_badge
      - sensor.lamps_badge
      - sensor.play_badge
      - sensor.track_badge




Nice, the badges are easy to miss because it’s different than the original UI. Everyone assumes you just plop them into cards.


yes, I use them frequently like this.
Must admit I am still a bit puzzled which badges do or dont show.
I have another set of (python created ) badges and they do show in a card without problem:


the top one isn’t showing, because it isnt created yet. This is a true issue with Lovelace for me still, maybe there’s a setting, I don’t know of.

when a script is run the sensor badge is displayed:


all my custom-ui extra badges and extra data are still missing, I fear that is some incompatibility thing.

so are most of my themed entities. Which is strange again since as you can see, my badges are themed correctly … :-:confused:


I know you like the look of your old UI, but have you thought about organizing things differently? I was able to take a page full of toggles and switches for my media player and knocked it down to 2 images with nice buttons.


sure I must do that, probably the only way to go, since Lovelace will be the new default…
Only really started yesterday, so Im glad i got this far, and recognize my own system :wink:

maybe ill use another Pi for the legacy setup and start from scratch, though I dont want to have yet a 3d system… (have 1 for my Mqtt Mosquitto Hub too, to relieve the main system from all that topic streaming)

Need some time adjusting I fear, and no doubt will be back often


If anyone’s interested it now possible to show (pretty much) anything as secondary info in lovelace with this