Nested Conditional Cards

I have a conditional weather warning card that fired on a binary sensor I created when it’s value was set to on. It works but I’d like to push this to the next level with my new HA install.

Currently I get a red card that says ‘Weather Alert’ and contains a link to Environment Canada’s Alert page for my area. This card pops for Advisories, Statements, Watches, or Warnings.
What I would like to do is have a separate card for each level, and each card a different colour and wording.

I thought if I had a Conditional card that still used the Binary sensor to trigger its appearence and then a Vertical Stack card with 4 more conditional cards inside the Vertical Stack. Each card would have a condition of state_not: ’ ’ and would appear when then appropriate sensor wasn’t blank.

The parent card (the binary sensor conditional card) triggers properly but it all the nested conditional cards appear.

Here’s the code for my Weather Warning card:

type: conditional
conditions:
  - entity: binary_sensor.bad_weather
    state: 'on'
card:
  type: vertical-stack
  cards:
    - type: conditional
      conditions:
        - entity: sensor.advisories
          state_not: ' '
      card:
        type: markdown
        content: |-

          Environment Canada has issued a Weather Advisory
          https://weather.gc.ca/warnings/report_e.html
        title: Weather Advisory
    - type: conditional
      conditions:
        - entity: sensor.statements
          state_not: ' '
      card:
        type: markdown
        content: |-

          Environment Canada has issued a Weather Statement
          https://weather.gc.ca/warnings/report_e.html
        title: Weather Statement
        theme: weather_statement
    - type: conditional
      conditions:
        - entity: sensor.watches
          state_not: ' '
      card:
        type: markdown
        content: |-

          Environment Canada has issued a Weather Watch
          https://weather.gc.ca/warnings/report_e.html
        theme: weather_watch
        title: Weather Watch
    - type: conditional
      conditions:
        - entity: sensor.warnings
          state_not: ' '
      card:
        type: markdown
        content: |-
          Environment Canada has issued a Weather Warning
          https://weather.gc.ca/warnings/report_e.html
        title: Weather Warning
        theme: weather_warning

How about something like this

type: vertical-stack
cards:
    - type: conditional
      conditions:
        - entity: sensor.advisories
          state_not: ' '
        - entity: binary_sensor.bad_weather
          state: 'on'
      card:
        type: markdown
        content: |-
          Environment Canada has issued a Weather Advisory
          https://weather.gc.ca/warnings/report_e.html
        title: Weather Advisory
    - type: conditional
      conditions:
        - entity: sensor.statements
          state_not: ' '
        - entity: binary_sensor.bad_weather
          state: 'on'
      card:
        type: markdown
        content: |-
          Environment Canada has issued a Weather Statement
          https://weather.gc.ca/warnings/report_e.html
        title: Weather Statement
        theme: weather_statement

etc

I did some further testing with the same setup

Conditional Card 1
  -Vertical Stack Card
    -Markdown Card
    -Conditional Card 2

In this setup Conditional Card 1 is triggered on a Binary Sensor being set to ‘on’
The Markdown Card is being used to mark that the Binary Sensor is active.
In this instance Conditional Card 2 should only be triggering when the sensor is not blank. However the sensor is blank and it’s being triggered.

I’m guessing that since Conditional Card 1 is true then all other Conditional Cards will also be true?

I thought about that but I was hoping to have the Weather Alert card only present when there is an Alert. Without the parent Conditional Card there is always a card visible.

Have a look at this custom card

You can build something like this

type: 'custom:state-switch'
entity: binary_sensor.bad_weather
states:
  'on':
    type: 'custom:state-switch'
    entity: sensor.advisories
    template: "{% if states('sensor.advisories') != ''  %} show {% else %} dont_show {% 
    endif %}"
    states:
      show:
        type: markdown
        ### etc ###

If you dont specify an off or a default card, no card will be shown when the conditions are not met.

Also it just occurred to me.
The conditional card is ALWAYS visible when in editing mode.
Maybe this got you mixed up.

That is a really neat card. I’m not sure how to get 4 cards with a binary sensor.

I’m guessing I would need a template something like:

template: "{% if states('sensor.advisories') != ''  %} show-1
{% elif states('sensor.statements') != ''  %} show-2
{% elif states('sensor.watches') != ''  %} show-3
{% elif states('sensor.warnings') != ''  %} show-4
 {% else %} dont_show {% 
    endif %}"
    states:
      show-1:
        type: markdown

      show-2:
        type: markdown

      show-3:
        type: markdown

      show-4:
        type: markdown

I noticed that, and I double checked to make sure I wasn’t in edit mode.

I tried your suggestion but it doesn’t seem to work. I also tried one where I skipped the bad weather sensor while trying to get the state-switch working. I didn’t have any luck with that either.

type: 'custom:state-switch'
entity: sensor.advisories
template: "{% if states('sensor.advisories') != ' '  %} show-1 {% else %} dont_show {% endif %}"
states:
  show-1:
    type: markdown
    content: >-
      Environment Canada has issued a Weather Advisory
      https://weather.gc.ca/warnings/report_e.html
    title: Weather Advisory
  dont_show:
    type: markdown
    content: Dont Show
    title: Dont Show

I set a value for sensor.advisories in Dev Tools, States and nothing happens.

Well since both the conditional and this card do not work, there might be something wrong with the template.

What’s the output of {{ states('sensor.advisories') }} when there’s no active alert?

Maybe the != ' ' part is wrong and it should be something like != '' or != []

Is there a quick way to check, I’m drawing a blank…

You can realtime check the template on the developer-tools page
http://192.168.*.*:8123/developer-tools/template

Check the output of {{ states('sensor.advisories') }}

Then try for example

{{ is_state('sensor.advisories','') }} 

Without any space between the '' and see if it returns True or False.

Right, thanks. So I did {{ states('sensor.advisories') }} and it returned a blank value.

{{ is_state('sensor.advisories','') }} 
``` Returned 'True'

I was able use the following template to show the text if the sensor.advisories was empty

{% if is_state(“sensor.advisories”, “”) -%}
The Advisory is blank
{%- endif %}


If i set the state of the advisory to anything the 'The Advisory is blank' test line didn't show and when the sensor was blanked it returned.

Ok, so in your custom switch card, you should set

template: "{% if states('sensor.advisories') != ''  %} show-1 {% else %} dont_show {% endif %}"

Paying attention to remove the space between the ''

OR

Maybe it would be simpler to create some new binary_sensors in your configuration.yaml that take into account both the weather_alert and the advisories sensor.

For example,

binary_sensor:
  - platform: template
    sensors:
      weather_alert_on_advisories_on:
        value_template: >-
          {{ is_state('binary_sensor.bad_weather','on') and not is_state('sensor.advisories','') }}
  

This will result in a new binary_sensor that turns on when both conditions are active.
Thenk you can use this new sensor, in a conditional card, for example, without having to do all the templating in the front-end.

Well I figured out my issue.

In my code I had

type: 'custom:state-switch'
entity: sensor.advisories
template: >-
  {% if states('sensor.advisories')

and it should have been

type: 'custom:state-switch'
entity: template
template: >-
  {% if states('sensor.advisories')

It works like a charm, well except for multiple alerts issued (a watch and warning issued at the same time. That’s an issue with my if statements and the super quick fix is to invert the states so that Warnings override everything else. Since the links all go to the same page that isn’t an issue worth fixing.