Popup navigation_path as variable

[dumitrudan608]

Hi there. I have a helper input_text.room_presence_dan that changes with the last sensor/camera/light triggered. That's usually the room I'm in. And using that, I would like the alert to show a different popup corresponding to the room (Naming convention Room: Living Room - popup: '#pop-lr', Kitchen - '#pop-ki', Room Kids - '#pop-rk'). I already have a template calculating that in sensor.room_presence_dan_pop. The problem is that using navigation_path: "[[sensor.room_presence_dan_pop]]" does not do anything.

This does not work:

  - entity: input_text.room_presence_dan
    operator: "!="
    state: ""
    persistent: true
    badge_label: Last room detected
    message: >-
      🏠 '{{ states('input_text.room_presence_dan') }}' triggered by 
      {{states('input_text.room_presence_dan_set_by') }}  
    secondary_entity: input_select.drp_rooms
    theme: info
    tap_action:
      action: navigate
      navigation_path: "[[sensor.room_presence_dan_pop]]"
    hold_action:
      action: more-info
    show_secondary_name: true
    name: Room presence

One solution I found has the huge drawback of losing the visual editor is using a custom:config-template-card. Again this worked but the Alert Ticker card has such a nice UI that I would prefer not losing the visual editor:

This does work but I lose UI

type: custom:config-template-card
grid_options:
  columns: full
entities:
  - input_text.room_presence_dan
  - input_text.room_presence_dan_set_by
variables:
  presence_nav: |
    (() => {
      const ent = states['input_text.room_presence_dan'];
      if (!ent || !ent.state) return "#pop-of";

      const area = ent.state.toLowerCase().trim();

      if (area.includes("hall")) return "#pop-ha";
      if (area.includes("office")) return "#pop-of";
      if (area.includes("living")) return "#pop-lr";

      return "#pop-of"; // fallback
    })()
card:
  type: custom:alert-ticker-card
  cycle_interval: 30
  show_when_clear: false
  clear_message: ""
  clear_theme: success
  cycle_animation: fade
  ha_theme: true
  grid_options:
    columns: full
  text_align: center
  large_buttons: true
  overlay_mode: true
  overlay_duration: 15
  swipe_to_snooze: true
  alerts:
      - entity: input_text.room_presence_dan
      operator: "!="
      state: ""
      persistent: true
      badge_label: Last room detected
      message: >-
        🏠 '{{ states('input_text.room_presence_dan') }}' triggered by 
        {{states('input_text.room_presence_dan_set_by') }}  
      secondary_entity: input_select.drp_rooms
      theme: info
      tap_action:
        action: navigate
        navigation_path: ${presence_nav}
      hold_action:
        action: more-info
      show_secondary_name: true
      name: Room presense

[djdevil]

Hi @dumitrudan608! 👋

Good news — navigation_path now supports Jinja2 templates as of v1.3.2.2, so you can drop the config-template-card wrapper entirely and go back to the native visual editor.

tap_action:
action: navigate
navigation_path: "{{ states('sensor.room_presence_dan_pop') }}"
At the moment of the tap, the card evaluates {{ states('...') }} and {{ state_attr('...', '...') }} synchronously using the same mini-evaluator already used for message fields, then navigates to the resolved path. Your full config becomes:

type: custom:alert-ticker-card
alerts:

• entity: input_text.room_presence_dan
  operator: "!="
  state: ""
  persistent: true
  badge_label: Last room detected
  message: >-
  🏠 '{{ states('input_text.room_presence_dan') }}' triggered by
  {{ states('input_text.room_presence_dan_set_by') }}
  secondary_entity: input_select.drp_rooms
  theme: info
  tap_action:
  action: navigate
  navigation_path: "{{ states('sensor.room_presence_dan_pop') }}"
  hold_action:
  action: more-info
  show_secondary_name: true
  name: Room presence

No wrapper card, no JavaScript, visual editor fully intact.