Thanks, this works! Can you explain to me how the script knows to use either A or B? Or is it basically an if else when you put them in that order?
yes, thatās it.
[[[ if (entity.state == 'on') return `Hiermee wordt ${entity.attributes.friendly_name} uitgezet, doorgaan?`;
else return `Hiermee wordt ${entity.attributes.friendly_name} aangezet, doorgaan?` ]]]
would do the same, but you donāt need the second line āelseā.
this can also be written as a ternary:
text: >
[[[ return entity.state == 'on' ? `Hiermee wordt ${entity.attributes.friendly_name} uitgezet, doorgaan?`
: `Hiermee wordt ${entity.attributes.friendly_name} aangezet, doorgaan?`; ]]]
and probably can be made shorter by only replacing the āaangezetā/āuitgezetā based on the entity.state
1 Like
Thanks for the explanation Marius!
Iām trying to stick with the default ui editor for my different Lovelace Dashboards. I would like to have one central button card template file for all dashboards. When I edit a dashboard and go into (3 dots) Raw Configuration Editor I would like to use a !include to add this file.
I get an error when I try to do this for example
button_card_templates: !include lovelace/buttons/button_card_templates.yaml
Error:
Unable to parse YAML:
YAMLException: unknown tag !<!include> (1:76) 1 | ... tons/button_card_templates.yaml -----------------------------------------^ 2 | ... 3 | ...
I can add the button card templates into each dashboard and they work just fine. I just know this is going to get out of hand as I have many dashboards and Iām constantly tweaking the config. Iād have to make the same changes in all locations hence wanting to do the !include.
Is anyone doing this? I really want to stick with the ui editor and not take control etc for ease of editing for me.
Thank you!
a bit niftier:
confirmation:
text: >
[[[ var action = entity.state == 'on' ? `uit` : `aan`;
return `Hiermee wordt ${entity.attributes.friendly_name} ` + action + `gezet, doorgaan?`; ]]]
EDIT:
moved āgezetā 
1 Like
maybe I am not following completely, but if you add those lines to all your dashboards, you never have to look at it again donāt you.
All you need to do is edit the button_card_templates.yaml if you change anything to it and it will be valid for all dashboards.
At least thats what I have. Set once and forget really.
button_card_templates: !include lovelace/buttons/button_card_templates.yaml
decluttering_templates: !include_dir_named lovelace/decluttering_templates
in all dashboards working perfectly. Donāt use the Raw config editor though, but that shouldnāt matter?
In Configuration / Lovelace Dashboards do your dashboards show as UI Controlled?
Nope, I use Yaml mode
Iām trying to find a way to do the !include when using UI Controlled.
That is unfortunately not possible. Only yaml mode supports !include
Your other error was that on (the state is a string) wasnāt in quotes (and your developer console in your browser would probably show an error). Mariusā use of the > means multile text is about to follow (itās a YAML thing) and hence the whole template doesnāt need to be in quotes to make it one long text string but the string within a string needs to be quoted. If you put everything on one line like you had, you need to use a different quote within than the one used to enclose the template.
1 Like
itās a little more complicated than that. Sure, the use of the multi-line (or read more here) indicator allows us to skip the outer quotes, making life much easier in more complex templates. Using templates in single line notation would require outer double quotes and inner single quotes (or reversed, but thats according to styleguide)
that being said, the style guide is aimed at backend Jinja templating, and here we are using JS frontend templatingā¦
In this case we need css javascript (html) (back-tick) quotes, because of the way the text is used in the confirmation field. Template literals.
This is important because when replacing a var in that string, we need to keep the final string in those back-ticks.
It can also be done with regular quotes but then you need to use a different format for the entity:
confirmation:
text: >
[[[ var action = entity.state == 'on' ? 'uit' : 'aan';
return 'Hiermee wordt ' + entity.attributes.friendly_name + ' ' + action + 'gezet, doorgaan?'; ]]]
1 Like
I have an input_boolean and would like the last changed to only show when it is on.
When I hard code the last changed in my template to either true (it shows) or false (it doesnāt show) it works fine,
Working
last_changed:
show_last_changed: true
template: styles_label
Working
last_changed:
show_last_changed: false
template: styles_label
I would like to have it dynamic though based on the state,
Not Working
last_changed:
show_last_changed: |
[[[
if (entity.state == 'on') return 'true';
return 'false';
]]]
I have tried it with and without the single quotes. Just canāt figure out how to get that working. Other ifs that I have are working fine for returning things like colors. It appears that it is just the true/false that Iām having problems with.
Example this is working fine,
- border-top: |
[[[
if (entity.state == 'on') return '1.5rem solid red';
return '1.5rem solid green;
]]]
To answer my own question it looks like this doesnāt work and there is already a feature request for it.
haha, so +1 to that in the Repo
Hi guys,
Iām stuck againā¦ Iāve made a colour picker
cards:
- type: vertical-stack
cards:
- type: entities
entities:
- type: "custom:slider-entity-row"
entity: input_number.input_color
full_row: true
hide_state: true
attribute: hue
style: |
ha-card {
background: linear-gradient(to right, rgb(255,0,0) 0%, rgb(255,255,0) 16.6%, rgb(0,255,0) 33.2%, rgb(0,255,255) 49.8%, rgb(0,0,255) 66.4%, rgb(255,0,255) 83%, rgb(255,0,0) 100%);
}
looks like so
Now I want to be able to change the colours based on the value of the input_number.
The RBG values should be something like
if (states["input_number.input_color"].state <= 16.6)
return "rgb(255, states["input_number.input_color"].state/16.6*255, 0)";
else if (states["input_number.input_color"].state <= 33.2)
return "rgb(255- (states["input_number.input_color"].state-16.6)/16.6*255, 255, 0)";
else if (states["input_number.input_color"].state <= 49.8)
return "rgb(0, 255, (states["input_number.input_color"].state-33.2)/16.6*255)";
else if (states["input_number.input_color"].state <= 66.4)
return "rgb(0, 255- (states["input_number.input_color"].state-49.8)/16.6*255, 255)";
else if (states["input_number.input_color"].state <= 83)
return "rgb((states["input_number.input_color"].state-49.8)/16.6*255, 0, 255)";
else
return "rgb(255, 0, 255- (states["input_number.input_color"].state-83)/16.6*255)";
But this isnāt allowed. Any one have a better idea ?
Help, guys!
What integration or add-on automatically clears button_card_templates code from lovelace dashboard?
Hi @petro, first thank you for share our code. Iām trying to figure out where you define the different color for the light and switch. I saw that you are using --paper-item-icon-active-color for both, so do you define a color in another part of home assistant (theme e.g) or I have to change the color in the anchors part ?
Themes define the colors