📝 100% Templatable Lovelace Configurations

[JTPublic (JT)]

No worry, that’s what I suspected, not about your javascript at all

[iantrich (Ian)]

card object is for a single card declaration. If you had your cards in a stack, you could put config-template-card outside the stack and reuse variables for everything inside the stack…but that could potentially get pretty messy

[DavidFW1960 (David)]

So I have a card showing a time but not friendly… it’s an attribute…

              entities:
                - entity: sensor.abb_usage
                  name: "${'Last Updated ' +'\xa0'.repeat(2) + vars[5]}"
                  icon: mdi:calendar
                  format: datetime

Where var[5] is states[‘sensor.abb_usage’].attributes[‘lastupdated’]
How can I get it to show as a normal timestamp like this:

‘toLocaleDateString(vars[5])’ doesn’t work with ot without the ‘’

[JTPublic (JT)]

@DavidFW1960

‘Last Updated ’ +’\xa0’.repeat(2) +

Try this:
name: "${'Last Updated ' +'\xa0'.repeat(2) + moment(vars[5]).format('MMMM Do YYYY, h:mm a')}"

[DavidFW1960 (David)]

thanks but it won’t accept that - whole card disappears
new Intl.DateTimeFormat(‘en-AU’, options).format(vars[5])
doesn’t work either

[JTPublic (JT)]

I tested with this, works fine.
Is your ‘lastupdated’ UTC datetime?

  - type: custom:config-template-card
    variables:
      - states['automation.tts_door_sensor'].attributes['last_triggered']
    config:          
      type: custom:hui-entities-card
      title: "${'Last Updated ' +'\xa0'.repeat(2) + moment(vars[0]).format('MMMM Do YYYY, h:mm a')}"

[DavidFW1960 (David)]

@JTPublic

moment(vars[0]).format(‘MMMM Do YYYY, h:mm a’)}"

                  name: "${'Last Updated ' +'\xa0'.repeat(2) + moment(vars[5]).format('MMMM Do YYYY, h:mm a')}"

kills the card… no idea why

[DavidFW1960 (David)]

I got into this mess in the first place because my iPad (not my PC) was treating the data as UTC not local. So I spent the day screwing around with reading the XML from my ISP and converting it to JSON and then publishing that to MQTT to create the sensor… so I did discover that I was getting an invalid date when I added the TZ as +1100 (but only on iPad) and discovered it needs +11:00…
But it’s showing this as a nasty string…

[MatthewFlamm]

Again, sorry if Im missing something, this is literally the second piece of javascript Ive ever written. I used the Date object differently, which worked for me above.

You have:

toLocaleDateString(vars[5])

Whereas I have something like:

Date(vars[5]).toLocaleDateString('en-US', options)

[MatthewFlamm]

Are there any methods to inject a more-info spec into a card? For example, it would be nice for my weather forecast card to only show today and tomorrow, but have the entire week in a more-info.

[jihaire (jih)]

So, it looks like I have a problem using this card with switch and input_number entities.

When I have the input_number entity, and the switch is on, the render is 'jittery.

This is my config :

- type: custom:config-template-card              
       variables:
                   - states['media_player.mpd'].attributes['media_artist']                                             
                   - states['media_player.mpd'].attributes['media_title']
                   - states['media_player.mpd'].state     
        card: 
                    type: 'custom:hui-entities-card'
                    title: Interrupteurs
                    show_header_toggle: false
                    entities:
                      - type: section
                        label : Lumieres
                      - type: entity
                        icon: mdi:lightbulb
                        entity : switch.sonoff_t1_relay
                        name: Plafond Chambre
                      - type: section
                        label : Radio
                      - type: entity
                        entity: input_boolean.switch_walter
                      - type: entity
                        entity: input_number.music_volume
                      - type: entity
                        entity: media_player.mpd
                        name: "${vars[2] === 'off' || vars[2] === 'unavailable'  ? 'Music Daemon' : vars[0]+' '+ vars[1]}"

And this is the result :

When i delete the input_number entity, everythings fine :

Can somebody explain if i’m doing something wrong ?

[MatthewFlamm]

Have you tried adding these entities as a list to the custom card itself along with type, card, and variables, i.e. in addition to the entities being in the csrd?

[jihaire (jih)]

Thanks for the pointer.

It solved the problem !

[DavidFW1960 (David)]

                - entity: sensor.abb_usage
                  name: "${'Last Updated ' + '\xa0'.repeat(2) + date(vars[5]).toLocalDateString('en-US', options)}"
                  icon: mdi:clock

And the whole card disappears…

[MatthewFlamm]

You need to define options first, see my example above for just day of week. I think you also need a new in front of Date, note Capitalization.

[DavidFW1960 (David)]

@DavidFW1960

• entity: sensor.abb_usage name: “${'Last Updated ’ + ‘\xa0’.repeat(2) + date(vars[5]).toLocalDateString(‘en-US’, options)}” icon: mdi:clock

                - entity: sensor.abb_usage
                  name: "${'Last Updated ' + '\xa0'.repeat(2) + new Date(vars[5]).toLocalDateString('en-US', options)}"
                  icon: mdi:clock

kills card…
I don’t see how to include options in this code above

[MatthewFlamm]

Still haven’t defined options. Look at my card above

[DavidFW1960 (David)]

as I said… I don’t see how to define that in my code. Your example is much more complicated and I don’t understand how to adapt it…

[MatthewFlamm]

Try this at the beginning

var options={ weekday:'long'};

[DavidFW1960 (David)]

@MatthewFlamm

var options={ weekday:‘long’};

                - entity: sensor.abb_usage
                  name: "${var options={ weekday:'long'};'Last Updated ' + '\xa0'.repeat(2) + new Date(vars[5]).toLocalDateString('en-US', options)}"
                  icon: mdi:clock

dead