📝 100% Templatable Lovelace Configurations

Looks like global vars do not work at your setup, weird.

Not to worry, It works with local vars so will use that for now. Thanks again.

Would you like to register an issue on Github for this?

Hi Ian, thanks very much for this card. I’m having trouble installing it. I’ve used hacs and I can see that the path to the .js has been added to the dashboard resources, it all looks fine. But after a re boot and clearing my browser cache, I can’t see the card in the list of cards, nor can I add it manually. I get,
No card or row or element defined
type: custom:config-template-card

Any ideas please?

Also your buy me a coffee link is broken, id love to buy you a coffee or three!
Thanks, Andrew.

The error message is self explanatory.
You have not specified a card or a row.
Copy/paste any example from GitHub and adapt to your setup.

Example for the record:
How to calculate a route between 2 points

Hi All,

Hi I would like to name some entities with dynamic name to be displayed on the lovelace card.

So I have some entities that are daily and are represented by D1,D2 etc which means day 1, day 2 of the week etc, but the “day of the week” which these refer to changes each day.

In lovelace I wanted to name the entities to show the day of the week, I tried for example

  • entity: sensor.solcast_forecast_d3
    name: {{(now()+ timedelta(days=3)).strftime("%a")}}

but that just displays [object Object]

is there a way to do this?

It was suggested I use the Templatable Lovelace Configurations so I gave this a go and tried the following:

type: custom:config-template-card
entities:
  - sensor.solcast_forecast_d3
card:
  type: entities
  entities:
    - entity: sensor.solcast_forecast_d3
      name: Test1
    - entity: sensor.solcast_forecast_d3
      name: "${ (now()+timedelta(days=2)).strftime('%a') }"

*and this*

type: custom:config-template-card
variables:
  TEST: "{ (now()+timedelta(days=2)).strftime('%a') }"
entities:
  - sensor.solcast_forecast_d3
card:
  type: entities
  entities:
    - entity: sensor.solcast_forecast_d3
      name: Test1
    - entity: sensor.solcast_forecast_d3
      name: ${TEST}

funny if I set the TEST variable to something like “{ 4+3 }” is evaluates and seems to work.

but if I add the bottom name: attribute value it does nothing, in fact it blanks the entire card, what am I doing wrong ?

Check your templates in the Developer Tools Template tab.

{ (now()+timedelta(days=2)).strftime('%a') }

Does not work.

But,

{{ (now()+timedelta(days=2)).strftime('%a') }}

Does work.

Hi @jeffcrum tried that also still doesn’t work

tried both of these
variables:
TEST : “{ {{ (now()+timedelta(days=2)).strftime(’%a’) }} }”

and
variables:
TEST : "{ { (now()+timedelta(days=2)).strftime(’%a’) }} "

The last one you have there has space between { and {.

Otherwise, I have not used config-template-card. But, have used card-templater.

Note that you have to add _template to the name you are templating.

And, this works:

      - type: custom:card-templater
        entities:
          - sensor.solcast_forecast_d3
        card:
          type: entities
          entities:
            - entity: sensor.my_sensor1
              name: Test1
            - entity: sensor.my_sensor2
              name_template: '{{ (now()+timedelta(days=2)).strftime(''%a'') }}'
1 Like

@jeffcrum many thanks yep works great with the custom:card-templater

1 Like

The CTC supports templates in JS, not jinja.

1 Like

Is there a website with a bunch of examples and templates in Javascript for Home Assistant?
I have a few jinja templates that I would like to “convert” to Javascript so I can use it with config-template-card.
Kind of like a Javascript equivalent of the Templating - Home Assistant site?

Having a little bit of an issue with one of my cards; I think it’s related to 2 characters contained in the URL (’#’ and ‘,’. If anyone has any ideas, please let me know. I think my goal is fairly obvious, but if not: I’m trying to create an iframe card that dynamically updates a URL with the reported location. Have tried several variations of this, but the card does not render.

One attempt used the person entity directly:

type: custom:config-template-card
entities:
  - person.main
card:
  type: iframe
  url: >-
    ${"https://www.theweekendest.com/trains#"+states['person.main'].attributes['latitude']","states['person.main'].attributes['longitude']"/12/29"}
  aspect_ratio: 100%

Another attempt, where I created a separate sensor entity in templates.yaml (the state reports as the person.main “‘latitude’,‘longitude’” as a string). There is no issue with the sensor, or the output, but the card again fails to render:

type: custom:config-template-card
variables:
  - states['sensor.latlong'].state
entities:
  - sensor.latlong
card:
  type: iframe
  url: ${"https://www.theweekendest.com/trains#"+vars[0]"/12.260497255506714/29"}
  aspect_ratio: 100%

A few other things I’ve tried:

  1. Defining variables (variables:) with names (i.e. LAT:), then referencing the named variables.
  2. Using multiple variables (vars[0]; vars[1], etc.).

Any ideas/suggestions/fixes would be appreciated!

A wrong code, should be like

${“some string” + states[“sensor.xxx”].state + “some string”}

I.e. strings are concatenated by “+”

1 Like

And that is why this community is so amazing. I spent a few hours troubleshooting, and was missing the basics. Appreciate the help, and the quick response. It’s working, and dynamically updating the URL to reflect the current location.

Thank you.

1 Like

Thanks @iantrich. I’m very happy with this card. Was looking for something to generate ~30 cards. This one saved the day. My card is still a work in progress. But these are the results so far.

views:
  - title: Energie
    path: energie
    type: sidebar
    badges: []
    cards:
      - type: custom:config-template-card
        entities:
          - sensor.100_import_kwh_since_last_reset
        variables:
          DEVICES: [
            {"address_id": 100, "type": "eastron sdm630", "title": "Hoofdgroep"},
            {"address_id": 101, "type": "abb ev1", "title": "1 - Gang, Douche, Logeerkamer"},
            {"address_id": 102, "type": "abb ev1", "title": "2 - Kantoor, Slaapkamers"},
            {"address_id": 103, "type": "abb ev1", "title": "3 - Keuken 1, bijkeuken, garage"},
            {"address_id": 104, "type": "abb ev1", "title": "4 - Keuken 2"},
            {"address_id": 105, "type": "abb ev1", "title": "Groep 5"},
            {"address_id": 106, "type": "abb ev1", "title": "Groep 6"},
            {"address_id": 107, "type": "abb ev1", "title": "Groep 7"},
            {"address_id": 108, "type": "abb ev1", "title": "Groep 8"},
            {"address_id": 109, "type": "abb ev1", "title": "Groep 9"},
            {"address_id": 110, "type": "abb ev1", "title": "Groep 10"},
            {"address_id": 111, "type": "abb ev1", "title": "11 - Woonkamer 2"},
            {"address_id": 112, "type": "abb ev1", "title": "12 - Zolder"},
            {"address_id": 113, "type": "eastron sdm630", "title": "Warmtepomp binnen"},
            {"address_id": 115, "type": "eastron sdm630", "title": "Warmtepomp buiten"},
            {"address_id": 117, "type": "eastron sdm630", "title": "Kookplaat"},
            {"address_id": 201, "type": "abb ev1", "title": "Servers"},
            {"address_id": 245, "type": "abb ev1", "title": "Vaatwasser"},
            {"address_id": 244, "type": "abb ev1", "title": "Oven"},
            {"address_id": 243, "type": "abb ev1", "title": "Koelkast"}
          ]
        card:
          type: vertical-stack
          title: Actueel overzicht
          cards: |-
            ${
            let cards = [];
            const getDivider = ( title ) => {
                return {
                    'type': 'custom:text-divider-row',
                    'text': title,
                    'align': 'centre',
                    'text-divider-font-size': '20',
                    'text-divider-line-size': '3',
                    'text-divider-margin': '1em 0'
                }
            }

            const getCard = ( state, unit ) => {

                const getColor = () => {
                    let color = '';

                    switch (true) {
                      case (unit === "A"):
                        switch (true) {
                            case (state == 0):
                                color = 'lightgray';
                                break;
                            case (state < q):
                                color = 'green';
                                break;
                            case (state < 6):
                                color = 'blue';
                                break;
                            case (state < 9):
                                color = 'orange';
                                break;
                            case (state => 9):
                                color = 'red';
                                break;
                            default:
                                color = 'purple';
                        }
                        break;

                      default:
                        switch (true) {
                            case (state == 0):
                                color = 'lightgray';
                                break;
                            case (state < 100):
                                color = 'green';
                                break;
                            case (state < 500):
                                color = 'blue';
                                break;
                            case (state < 1000):
                                color = 'orange';
                                break;
                            case (state < 2000):
                                color = 'red';
                                break;
                            default:
                                color = 'purple';
                        }
                    }
                    return color;
                }

                return {
                    'type': 'custom:html-card',
                    'content': `
                                  <div style="display:flex; justify-content:center; color:${ getColor() }" >
                                    <span style="font-size:24px; text-align:ricght;">${ state }</span>
                                    <span style="font-size:20px; opacity:0.5; padding-left:0.5rem;">${ unit }</span>
                                  </div>
                                              `
                }
            }

            const getRow = (index, id) => {
                let entityCards = [];

                entityCards.push( getCard( this.hass.states[`sensor.${id}_phase_${index}_power`].state, 'W' ) );
                entityCards.push( getCard( this.hass.states[`sensor.${id}_phase_${index}_current`].state, 'A' ) );

                return {
                   'type': 'horizontal-stack',
                   'cards': entityCards
               }
            }

            DEVICES.forEach( device => {

                cards.push( getDivider( device.title ) );

                // ------------------------------------------------ //
                if ( device.type === "abb ev1" ) {
                  cards.push( getRow(1, device.address_id) );
                }
                // ------------------------------------------------ //
                if ( device.type === "eastron sdm630" ) {
                    let subCards = [];

                    for ( let i = 1; i < 3 + 1; i++ ) {
                        subCards.push(getRow(i, device.address_id ));
                    }

                    cards.push( {
                        'type': 'vertical-stack',
                        'cards': subCards
                    } );

                }
            } )
            ;

            cards
            }

If anyone has any suggestions. I’m more than open to it, since it’s my first try.

I am having issues with the config-template card
I have installed it through hacs and I am trying to create a bin card like in this video https://www.youtube.com/watch?v=RpwAhy7f52I but nothing displays in the preview if i remove lines 1 - 6 the picture entity displays so im guessing there is something wrong with my yaml or the installation of the config-template-card. any help would be great

type: custom:config-template-card
entities:
  - sensor.black_bin_days
variables:
  DAYS: states['sensor.black_bin_days'].atrributes['days']+'d'
card:
  type: picture-entity
  entity: sensor.black_bin_days
  name: ${DAYS}
  show_name: true
  show_state: false
  state_image:
    '0': /local/garbage/general_today.png
    '1': /local/garbage/general_tomorrow.png
    '2': /local/garbage/general_off.png

Post a screenshot from Dev tools → state for this sensor.

Here you go