How to 'navigate' between dashboards?

HI,

experimenting with the dashboard options, I have created a dashboard next to the default ui-lovelace.yaml.

Using a small shortcut menu set of buttons with buttons like this:

      - type: custom:button-card
        template: button_shortcut_menu
        icon: mdi:light-switch
        tap_action:
          action: navigate
          navigation_path: lights
        variables:
          path: lights

works perfectly in the regular ui-lovelace.yaml config, but doesnt work in the second dashboard.

the views are in the exact same folder, and both ui-lovelace.yaml and my dashboard-settings.yaml reference these views.

Why cant I have the buttons link to these views in the dashboard-settings.yaml? Should I use another path? Note: the views in the shortcut menu are not in the dashboard, but in the regular lovelace frontend.

I’ve tried adding the dashboard name to the path, but then eg when in dashboard-settings, and navigating to lovelace/home it tries dashboard-settings/lovelace/home, which of course doest exist…

please have a look? thanks!

2 Likes

Add the dashboard to the path

navigation_path: /other-dashboard-name/lights
4 Likes

as I wrote above, I had already tried that, but, without leading ‘/’ so the target path got appended to the current path.

Ive now added the ‘/’, and yes! that takes care of things.

Had to adapt my button template, because it uses the ‘window.location.pathname’ and checks if that == to the menu button path. now using this:

button_shortcut_menu:
  variables:
    view: >
      [[[ return window.location.pathname.split('/').slice(-1) ]]]
  size: 25px
  styles:
    icon:
      - color: var(--secondary-text-color)
    card:
      - background: >
          [[[ return variables.view == variables.path
              ? 'var(--secondary-background-color)' : 'var(--card-background-color)';
          ]]]

shows properly switching between dashboards!

Settings dashboard:

Regular Home Lovelace:


Nice!

Hello,
returning to the discussion about setting various attributes, incl. styles based on states.
Indeed using states: feature is more convenient than using JS templates.

Unfortunately, disabling integration in HA causes entities to not exist. In such case it seems that state: feature fails. Simply not evaluating the state.

Here is an example with all possible options which could possibly cover an inexistent entity. None of them work

    state:
      - operator: '=='
        value: 'on'
        styles:
          card:
            - display: ''
      - operator: '=='
        value: undefined
        styles:
          card:
            - display: none
            - width: 0px !important
      - operator: '=='
        value: ''
        styles:
          card:
            - display: none
            - width: 0px !important
      - operator: default
        styles:
          card:
            - display: none
            - width: 0px !important

One would ask why not use negative condition:

    state:
      - operator: '!='
        value: 'on'
        styles:
          card:
            - display: none
            - width: 0px !important

It doesn’t work either. This logic is never applied to a not existing entity. Or I don’t know how to achieve that using the state feature (???).

Currently, it seems using JS templates is the only way… but if using nested button cards, I have to incorporate passing entity through card template since JS templates cannot access entity object in such a case

  subsection_hide_inactive:
    variables:
      entity: null
    entity: |
      [[[ return variables.entity ]]]
    styles:
      card:
        - display: >
            [[[ if (states[variables.entity] == null ||
            states[variables.entity].state != 'on') return  'none' ]]]
        - width: >
            [[[ if (states[variables.entity] == null ||
            states[variables.entity].state != 'on') return '0px';]]]