📝 100% Templatable Lovelace Configurations

Docs just say that templating is supported.
What would be correct then, please?

CTC does not support * for entities.

I could not find what it does support. Docs are very limited for ctc.

List of entity strings that should be watched for updates. Templates can be used here

Used it because it seemed to work for input_datetime
They seem to be working correctly

Again, not supported in the docs for auto-entities.

1 Like

Means - not throwing an error?
The only way to check it is placing entities on the Entities card and then change these entities outside of the card.

Means using the javascript.
Here is more of the card (did not want to clutter the thread). Ad mentioned, using apexcharts-card.

type: custom:config-template-card
entities:
  - input_datetime.*
  - sensor.xiaomi_humidity*
card:
  type: vertical-stack
  cards:
    - type: custom:auto-entities
      sort:
        method: friendly_name
      filter:
        include:
          - entity_id: sensor.xiaomi_humidity_*
            options:
              name: >-
                ${
                states['sensor.xiaomi_humidity_dining_room'].attributes.friendly_name.replace("Xiaomi
                Humidity", "") }
              yaxis_id: first
              stroke_width: 2
              group_by:
                func: raw
              type: line
              opacity: 1
              curve: smooth
              fill_raw: last
              show:
                extremas: true
                datalabels: false
      card:
        type: custom:apexcharts-card
        card_mod:
          style: |
            ha-card {
              --ha-card-background: rgba(0, 0, 0, 0);
              --ha-card-box-shadow: none;
              --primary-text-color: white;
              --secondary-text-color: white;
            }
        graph_span: >-
          ${
          ((states['input_datetime.end_datetime'].attributes.timestamp-states['input_datetime.start_datetime'].attributes.timestamp)/60/60).toFixed(2)+'h'
          }
        span:
          offset: >-
            ${
            (-(states['sensor.timestamp'].state-states['input_datetime.end_datetime'].attributes.timestamp)/60/60).toFixed(2)+'h'
            }

Working, i.e. I used it in title using states['sensor.xiaomi_humidity_dining_room'].attributes.friendly_name and it showed the correct friendly name.

But stopped working as soon as I replaced the entity_id with this.entity_id

I suggest to replace it by Entities card and see if your variables are working, if templates are working, if entities are monitored.

When I change input_datetime.start_datetime or input_datetime.end_datetime the card immediately updates.
So monitoring is working

This is not about getting a state and attributes from an entity; it is about monitoring it’s changes.

See above your post

That I overlooked, yes. Will change it :slight_smile:

What would be the correct syntax for entity wildcards? Happy to test. But just don’t know what

CTC does not support wildcards - according to docs, it is not mentioned there; of course it may be undocumented hidden feature )))
A simple test:

  1. Entities card with a few input helpers of some kind (like “input_number.test_number_1”).
  2. Place it inside CTC.
  3. Define “input_number.test_number_*” in the “entities” option.
  4. Add the same Entities card on the same view.
  5. Change these entities on the 2nd card - then see if they are synced with the 1st card.

No, does not seem to work :frowning:
So no hidden gem :frowning:

Now this is even more confusing :frowning:

Do you know a workaround to get all sensors that start with a certain string?

I take it back. Seems like the test itself is flawed or my code is flawed. BEcause it does not matter whether I define both with wildcards or I define only in auto-entities. Result is the same. With neither the two identical cards update on change.

However, the originial card without any wildcard syncs to both.

wildcard in C-T-C + wildcard in auto-entities → changes pure entities card
defined sensors in C-T-C + wildcard in auto-entities → changes pure entities card

Changes in either of the above or changes in the pure entities card has no impact on the values of the two.
Meaning, all approaches change the values in the actual sensor. Neither of the C-T-C approaches reads monitors the actual sensor in the UI.

  - theme: Backend-selected
    title: '2'
    path: '2'
    type: custom:vertical-layout
    badges: []
    cards:
      - type: custom:auto-entities
        filter:
          include:
            - input_datetime.end_datetime
            - input_datetime.start_datetime
        card:
          type: custom:config-template-card
          card:
            type: custom:auto-entities
            filter:
              include:
                - entity_id: input_datetime.*
            card:
              type: entities
      - type: custom:auto-entities
        filter:
          include:
            - input_datetime.*
            - input_datetime.*
        card:
          type: custom:config-template-card
          card:
            type: custom:auto-entities
            filter:
              include:
                - entity_id: input_datetime.*
            card:
              type: entities
      - type: entities
        entities:
          - entity: input_datetime.start_datetime
          - entity: input_datetime.end_datetime

@Ildar_Gabdullin, you are great with modding cards. Is it possible to condtionally add multiple keys with value to a card with proper indentation?

key_parent:
  key1: value1
  key2: value2

as

key_parent: ${ if (condition) {
  key1: value1
  key2: value2
  }

Something like that but working? :smiley:

Unclear, what you want to achieve by this?

e.g. apexcharts-card has the statistics option which allows you to read data from the statistics table.
But it cannot be enabled/disabled.
That means you have to remove all related options or the cards won’t work.

So I was thinking about whether it is possible to add/remove a properly indented block of options using javascript/templating.

That way any card could be made functional even with options that would normally break a card if they are undefined (but would not be as desired if the options were defined at all times)

Sorry, I am still not getting this - never used apexcharts ((

It is independent of the card.

The stock cards are almost all very basic in the available options. So name any card and I will try to explain better.

Let’s take a button-card (not the ideal example).
Depending on the entity (sourced from an input_select) you either want to have a hold action or not (“toggle2” is a placeholder name).

  - type: button
    tap_action:
      action: toggle
    hold_action:
      action: toggle2
    entity: { template get from input_select }

If you remove the “toggle2” from action: toggle2 the card stops working. You have to remove the key plus the parent hold_action also.

But you want to be able to switch between having a hold_action and not having one without having to create two separate cards.

So you need to be able to add & remove the code block

    hold_action:
      action: toggle2

using templating/javascript somehow. And it needs to have the correct indentation also, otherwise the card will not work either.

The only similar task is calling a decluttering card.
Assume we have a decluttering card with this template calling mini-graph-card:

my_graph_card:
  default:
    ...
    - COLOR_THRESHOLDS: []
  card:
    ...
    color_thresholds: '[[COLOR_THRESHOLDS]]'
    ...

and then calling this template:

type: custom:decluttering-card
template: my_graph_card
variables:
  ...
  - COLOR_THRESHOLDS:
      ... your settings (a list; for other option may be a dictionary), like:
      - xxx: yyy
        abc: bbb
      - xxx: yyy_2
        abc: bbb_2

or

type: custom:decluttering-card
template: my_graph_card
variables:
  ... w/o specifying color thresholds - i.e. a default value is used

And similarly may be done with “tap_action” etc: when calling a template you specify a required set of options (dict or list). Here you are not using config-template-card since all required options are either specified by default or specified by a user.
Is it close to what you need?