📝 100% Templatable Lovelace Configurations

@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?

I never took notice of the decluttering card. But would that also work if the parent has to be remove also?

And does it always replace or can it append.

Imagine the decluttering card does not supply a color_threshold. Then the config would be

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

That would break the card if an empty string or null were not permitted (which is often the case for options).

So you would need to add the parent key plus the child_keys using declutterin card.
e.g.

- entity_id: test
  option1: bla
  option2: bla
   '[[decluttering card]]`

Otherwise it is the same as card-mod, which supplies the value to an existing key and does not supply the key itself (at least not the top level key).

Maybe a more simple task :slight_smile:
I noticed, that when I have an entities card with input_datetime and input_select they are shown differently in Panel mode.

Is there a way to make them all be the same width (preferrably not full width but without downsizing them in e.g. Masonry mode) and also center them?

Is there a way to use templating in the entities selection already?
I am facing the problem that two entities (input_datetime) keep making my card reload because the value changes every minute. The card itself should be ignoring this change as it is part of an if statement that is not ‘true’.

So I think the problem is, that the config-template-card is monitoring the input_datetime and causes a reload of the card with the new state.

I would like to prevent this, if the input_booleans are both true.

type: custom:config-template-card
entities:
  - input_select.dropdown_wildcards
  - input_select.dropdown_entities
  - input_select.dropdown_areas
  - input_select.dropdown_types
  - input_boolean.end_datetime_now
  - input_boolean.start_datetime_24h
  - input_datetime.start_datetime          # only if input_boolean.start_datetime_24h returns 'true'
  - input_datetime.end_datetime          # only if input_boolean.end_datetime_now returns 'true'

If that were possible somehow, it would prevent the regular reloading.

I’m having an issue where my card stopped showing at all. No errors. Just black, not taking up any space.

cards:
  - type: custom:config-template-card
    variables:
      - '''input_number.piek_afname_'''
      - if ((new Date()).getMonth()+1 < 10) { "0" }
      - String((new Date()).getMonth()+1)
      - states[vars[0] + vars[1] + vars[2]]
    entities:
      - ${vars[3].entity_id}
      - sensor.fluvius_verbruik_energy_kwartier_piek
    card:
      type: entities
      entities:
        - entity: ${vars[3].entity_id}     # replace with input_number.piek_afname_12
          name: Hoogste piek deze maand
          type: custom:multiple-entity-row
          format: precision2
          unit: kWh
          icon: mdi:transmission-tower
          entities:
            - entity: sensor.fluvius_verbruik_energy_kwartier_piek
              name: Huidige piek
              format: precision2
              unit: kWh

When I replace the actual entity by (what the result should be) input_number.piek_afname_12, and the card is showing.
So something is going wrong when creating the entity from the variables.
This has been working for half a year or so, and (when I remember correct) stopped working about 2 months ago.

What can be wrong ?

Probably because you have an undefined var.

Change it to (untested):

  ...
  - String((new Date()).getMonth()+1)
  - if (Number(vars[1]) <= 10) { "0" } else {""}
  - states[vars[0] + vars[2] + vars[1]]
  ...
1 Like

It’s working now.
That also explains why it “stopped working about 2 months ago”. month 10 doesn’t need the “0” at the beginning.

Thank you so much !

Edit: I think I have to replace ‘<=’ with ‘<’ otherwise we get month ‘010’ in october.

1 Like

Note that you may use “vars[x]” to define a “var[y]” - it saves some amount of a code.
This trick is also possible when using “named vars”.

This is indeed pretty cool.
This means that, the moment you define a var, it can be used in the next var.

and may be before, have not tested yet…

have you solved this problem yet?

i feel like we need url param support

I see no problems with generating urls:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_text.test_text
  - type: custom:config-template-card
    entities:
      - input_text.test_text
    variables:
      URL: '"https://" + states["input_text.test_text"].state + ".com"'
    card:
      type: entities
      entities:
        - type: weblink
          url: ${URL}

image

What the person could not manage to achieve is accessing that “window.location.href” data - but which custom card do have an access? ))

1 Like

how to get iframe card to take up whole screen in panel mode?

looks like its a bug.

  1. It is possible w/o any additional efforts:

  2. How is this question related to config-template-card?

yea but now put it in config-template-card… now it doesnt take up the whole screen if its narrow.
Resize your browser and see.