I created a custom pill component that displays date and weather which works fine on its own. I based that on the temperature pill. I then tried to create a custom component for the welcome card which works, too. I exchanged the welcome message, for example.
I then tried to combine the custom pill and the scene (exchange the weatherdate pill in the top bar with my custom temperature-date-pill). However, the pill is not changing regardless of what I do. Interestingly, if I change the greeting-line to something else, these changes are loaded. Therfore I conclude, that (a) the card is working properly and (b) the changes are reloaded after a restart of homeassistant. Attached you find a screenshot of both components working as expected. In the topbar of the welcome scene, however, the original pill is used and my code seems to be ignored. 
It seems as if the custom component nested inside the custom component is not properly refreshed, but simpler things are (like changing labels).
What I tried so far:
I tried restarting HA completely, reloading all configs, using a different browser & device, using an incognito tab, deleting cache.
Do I miss something? The welcome card is rather complex, thus I might oversee something. Any help or hints are appreciated!
Relevant Code of Dashboard Tab:
- type: "custom:button-card"
template: custom_chip_lutz_temperature_date
entity: weather.openweathermap
variables:
ulm_chip_lutz_temperature_date_weather: weather.openweathermap
ulm_chip_lutz_temperature_date_outside: sensor.openweathermap_temperature
styles:
card:
- width: "150px"
- box-shadow: >
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
- type: custom:button-card
template: custom_card_lutz_welcome_scenes
triggers_update: input_boolean.minimalist_dropdown
variables:
ulm_card_welcome_scenes_collapse: input_boolean.minimalist_dropdown
ulm_weather: weather.openweathermap
entity_1:
entity_id: scene.heim
entity_2:
entity_id: scene.lautsprecher
entity_3:
entity_id: scene.weg
Custom Temperature Date Pill:
---
custom_chip_lutz_temperature_date:
template: "chips"
entity: sensor.openweathermap
variables:
ulm_card_weather_enable_popup: true
ulm_chip_lutz_temperature_date_weather: null
ulm_chip_lutz_temperature_date_outside: null
ulm_chip_lutz_temperature_date_inside: null
ulm_language: >
[[[
return hass["language"];
]]]
tap_action:
action: "more-info"
label: |
[[[
const event = new Date();
const options = {month: 'short', day: 'numeric' };
var locale = hass["language"];
let formatted_date = event.toLocaleDateString(locale, options);
var state = states[variables.ulm_chip_lutz_temperature_date_weather].state;
var icon = {
"clear-night": "🌙",
"cloudy": "☁️",
"exceptional": "🌞",
"fog": "🌫️",
"hail": "⛈️",
"lightning": "⚡",
"lightning-rainy": "⛈️",
"partlycloudy": "⛅",
"pouring": "🌧️",
"rainy": "💧",
"snowy": "❄️",
"snowy-rainy": "🌨️",
"sunny": "☀️",
"windy": "🌪️",
"default": "🌡️"
}
function convertTemperature(temp) {
if (parseFloat(temp) == temp && Math.floor(temp) != temp) {
return parseFloat(temp).toFixed(1);
}
return temp;
}
var outside_temp = states[variables.ulm_chip_lutz_temperature_date_outside].state;
var inside_temp = null;
if (variables.ulm_chip_temperature_inside) {
inside_temp = states[variables.ulm_chip_lutz_temperature_date_inside].state;
}
var label = (icon[state] || icon["default"]) + " " + convertTemperature(outside_temp) + "°";
if (inside_temp) {
label = label + " / " + convertTemperature(inside_temp) + "°";
}
label = label + " - " + formatted_date
return label;
return (icon[state] || icon["default"]) + ' ' + formatted_date
]]]
Custom Welcome Card:
---
custom_card_lutz_welcome_scenes:
variables:
ulm_weather: "[[[ return variables.ulm_weather]]]"
ulm_language: "[[[ return hass['language']; ]]]"
entity_1:
entity_id: ""
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_2:
entity_id: ""
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_3:
entity_id: ""
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_4:
entity_id: ""
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_5:
entity_id: ""
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_6:
entity_id: ""
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
entity_7:
entity_id: ""
color: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
template:
- "ulm_language_variables"
- "ulm_translation_engine"
show_icon: false
show_name: false
show_label: true
styles:
grid:
- grid-template-areas: >
[[[
if(variables.ulm_card_welcome_scenes_collapse && states[variables.ulm_card_welcome_scenes_collapse].state == 'on'){
return "\'item1\' \'item2\' ";
} else {
return "\'item1\' \'item2\' \'item3\' \'item4\'";
}
]]]
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
- row-gap: "0px"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "10px"
custom_fields:
item3:
- display: >
[[[
if(variables.ulm_card_welcome_scenes_collapse && states[variables.ulm_card_welcome_scenes_collapse].state == 'on'){
return "none";
} else {
return "block";
}
]]]
item4:
- display: >
[[[
if(variables.ulm_card_welcome_scenes_collapse && states[variables.ulm_card_welcome_scenes_collapse].state == 'on'){
return "none";
} else {
return "block";
}
]]]
custom_fields:
item1:
card:
type: "custom:button-card"
template: "card_topbar_welcome"
variables:
ulm_card_welcome_scenes_collapse: "[[[ return variables.ulm_card_welcome_scenes_collapse ]]]"
ulm_weather: "[[[ return variables.ulm_weather]]]"
ulm_language: "[[[ return variables.ulm_language ]]]"
styles:
card:
- border-radius: "none"
- box-shadow: "none"
- padding: "4px"
item2:
card:
type: "custom:button-card"
show_icon: false
show_label: false
show_name: true
show_entity_picture: false
name: |
[[[
return 'Moin, ' + user.name + '!';
]]]
styles:
name:
- align-self: "start"
- justify-self: "start"
- font-weight: "bold"
- font-size: "24px"
- margin-left: "16px"
grid:
- grid-template-areas: "'i n' 'i l'"
- grid-template-columns: "min-content auto"
- grid-template-rows: "min-content min-content"
- text-align: "start"
card:
- box-shadow: "none"
- padding-bottom: "8px"
item3:
card:
type: "custom:button-card"
show_icon: true
show_label: true
show_name: true
show_entity_picture: false
name: "[[[ return variables.ulm_translation_scenes ]]]"
icon: "mdi:dots-vertical"
styles:
icon:
- height: "20px"
- filter: "opacity(50%)"
name:
- align-self: "start"
- justify-self: "start"
- font-weight: "bold"
- font-size: "18px"
- margin-left: "16px"
grid:
- grid-template-areas: "'n i'"
- grid-template-columns: "6fr 1fr"
- grid-template-rows: "min-content min-content"
- text-align: "start"
card:
- box-shadow: "none"
- padding-bottom: "0px"
- bottom: "10px"
item4:
card:
type: "custom:button-card"
template: >
[[[
if(variables?.entity_1?.entity_id != ""){
return 'card_scenes_welcome'
} else {
return 'card_scenes_welcome_auto'
}
]]]
styles:
card:
- border-radius: "none"
- box-shadow: "none"
- padding: "4px"
variables:
entity_1: "[[[ return variables.entity_1]]]"
entity_2: "[[[ return variables.entity_2]]]"
entity_3: "[[[ return variables.entity_3]]]"
entity_4: "[[[ return variables.entity_4]]]"
entity_5: "[[[ return variables.entity_5]]]"
entity_6: "[[[ return variables.entity_6]]]"
entity_7: "[[[ return variables.entity_7]]]"
card_title_welcome:
tap_action:
action: "none"
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: "rgba(0,0,0,0)"
- box-shadow: "none"
- height: "auto"
- width: "auto"
- margin-top: "-10px"
- margin-left: "16px"
- margin-bottom: "-15px"
grid:
- grid-template-areas: "'n' 'l'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
name:
- justify-self: "start"
- font-weight: "bold"
- font-size: "20px"
label:
- justify-self: "start"
- font-weight: "bold"
- font-size: "1rem"
- opacity: "0.4"
# pill
card_scenes_pill_welcome:
show_icon: false
show_label: false
show_name: false
state:
- operator: "template"
value: >
[[[
return (entity?.state !== 'on' && entity?.state !== 'playing' && entity?.state != variables?.state)
]]]
styles:
card:
- overflow: "visible"
- box-shadow: "none"
styles:
grid:
- grid-template-areas: "'item1' 'item2'"
- grid-template-columns: "min-content"
- grid-template-rows: "1fr 1fr"
- row-gap: "12px"
- justify-items: "center"
- column-gap: "auto"
card:
- border-radius: "50px"
- place-self: "center"
- width: "52px"
- height: "84px"
- box-shadow: >
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
color: "var(--google-grey)"
custom_fields:
item1:
card:
type: "custom:button-card"
show_icon: true
show_label: false
show_name: false
tap_action:
action: >
[[[
if(variables?.nav_path){
return "navigate"
} else {
return "call-service"
}
]]]
service: >
[[[
if(entity.entity_id.startsWith("scene.")){
return "scene.turn_on"
}
else if(entity.entity_id.startsWith("media_player.")){
return "media_player.media_play_pause"
}
else if(entity.entity_id.startsWith("input_select.")){
return "input_select.select_option"
}
else if(entity.entity_id.startsWith("script.")){
return entity.entity_id
} else {
return "homeassistant.toggle"
}
]]]
navigation_path: "[[[ return variables?.nav_path; ]]]"
service_data: |
[[[
if (variables.service_data){
return variables.service_data
}
var obj;
if( entity.entity_id.startsWith("input_select.") )
obj = { entity_id: entity.entity_id, option: variables.state };
else
obj = { entity_id: entity.entity_id };
return obj;
]]]
styles:
grid:
- grid-template-areas: "i"
icon:
- color: >
[[[
var color = variables?.color
if(hass.themes.darkMode){var color = "#FAFAFA";}
return `rgba(var(--color-${color}), 1)`;
]]]
- width: "20px"
img_cell:
- background-color: >
[[[
var color = variables?.color
var opacity = '0.20'
if(hass.themes.darkMode){var opacity = '1'}
return `rgba(var(--color-${color}), ${opacity})`;
]]]
- border-radius: "50%"
- width: "42px"
- height: "42px"
card:
- box-shadow: "none"
- border-radius: "50px"
- padding: "5px"
state:
- operator: "template"
value: >
[[[
return (entity?.state !== 'on' && entity?.state !== 'playing' && entity?.state != variables?.state)
]]]
styles:
card:
- overflow: "visible"
- box-shadow: >
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
item2:
card:
type: "custom:button-card"
show_icon: false
show_label: false
tap_action:
action: >
[[[
if(variables?.nav_path){
return "navigate"
} else {
return "call-service"
}
]]]
navigation_path: "[[[ return variables?.nav_path; ]]]"
service: >
[[[
if(entity.entity_id.startsWith("scene.")){
return "scene.turn_on"
}
else if(entity.entity_id.startsWith("media_player.")){
return "media_player.media_play_pause"
}
else if(entity.entity_id.startsWith("input_select.")){
return "input_select.select_option"
}
else if(entity.entity_id.startsWith("script.")){
return entity.entity_id
} else {
return "homeassistant.toggle"
}
]]]
service_data: |
[[[
if (variables.service_data){
return variables.service_data
}
var obj;
if( entity.entity_id.startsWith("input_select.") )
obj = { entity_id: entity.entity_id, option: variables.state };
else
obj = { entity_id: entity.entity_id };
return obj;
]]]
styles:
grid:
- grid-template-areas: "n"
name:
- justify-self: "center"
- font-weight: "bold"
- font-size: "9.5px"
- padding-bottom: "7px"
- overflow: "[[[return (entity?.state !== 'on' && entity?.state !== 'playing' && entity?.state != variables?.state) ? 'visible' : 'hidden']]]"
card:
- box-shadow: "none"
- padding: "0px 5px 5px 5px"
- margin-top: "-5px"
- border-radius: "50px"
- overflow: "[[[return (entity?.state !== 'on' && entity?.state !== 'playing' && entity?.state != variables?.state) ? 'visible' : 'hidden']]]"
card_topbar_welcome:
show_icon: false
show_name: false
show_label: false
styles:
grid:
- grid-template-areas: "item1 item2 item3"
- justify-content: "space-between"
- display: "flex"
card:
- border-radius: "none"
- box-shadow: "none"
- padding: "12px"
- background: "none"
custom_fields:
item1:
card:
type: "custom:button-card"
template: "chips"
entity: "[[[ return variables.ulm_card_welcome_scenes_collapse ]]]"
icon: "mdi:chevron-up"
show_icon: true
styles:
grid:
- grid-template-areas: "'i'"
card:
- box-shadow: >
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
state:
- value: "on"
icon: "mdi:chevron-down"
styles:
icon:
- color: "rgb(var(--color-theme))"
tap_action:
action: "call-service"
service: "input_boolean.toggle"
service_data:
entity_id: "[[[ return variables.ulm_card_welcome_scenes_collapse ]]]"
item2:
card:
type: "custom:button-card"
template: "custom_chip_lutz_temperature_date"
entity: "[[[ return variables.ulm_weather]]]"
variables:
ulm_chip_lutz_temperature_date_weather: "[[[ return variables.ulm_weather]]]"
ulm_chip_lutz_temperature_date_outside: sensor.openweathermap_temperature
styles:
card:
- width: "150px"
- box-shadow: >
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
item3:
card:
type: "custom:button-card"
tap_action:
action: "navigate"
navigation_path: "/config/dashboard"
template: "chip_mdi_icon_only"
variables:
ulm_chip_mdi_icon_only_icon: "mdi:cog-outline"
styles:
card:
- align-self: "end"
- box-shadow: >
[[[
if (hass.themes.darkMode){
return "0px 2px 4px 0px rgba(0,0,0,0.80)";
} else {
return "var(--box-shadow)";
}
]]]
# auto-entities
card_scenes_welcome_auto:
show_icon: false
show_name: true
show_label: false
variables:
colors: >
[[[
var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
var color = colors[Math.floor(Math.random() * colors.length)];
return color;
]]]
styles:
grid:
- grid-template-areas: "item1"
- display: "flex"
- justify-content: "center"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
custom_fields:
item1:
card:
type: "custom:auto-entities"
card:
type: "grid"
columns: 5
square: false
card_param: "cards"
sort:
count: 5
filter:
include:
- domain: "light"
options:
type: "custom:button-card"
template: "card_scenes_pill_welcome"
custom_fields:
item1:
card:
type: "custom:button-card"
entity: "this.entity_id"
styles:
icon:
- color: >
[[[
var color = variables.colors
if(hass.themes.darkMode){var color = "#FAFAFA";}
return `rgba(var(--color-${color}), 1)`;
]]]
- width: "20px"
img_cell:
- background-color: >
[[[
var color = variables.colors
var opacity = '0.20'
if(hass.themes.darkMode){var opacity = '1'}
return `rgba(var(--color-${color}), ${opacity})`;
]]]
item2:
card:
type: "custom:button-card"
entity: "this.entity_id"