Returning the current view name of the dashboard

Configuration Frontend
1

So I’m setting up a navigation bar that will appear at the top of each of my views…
image

I’m attempting to make this entire thing a template which means it will be identical on each of my views. The only thing I wish to change is the highlight button to refect the view that is currently displayed.

Is there a way to use some conditional logic that will get the currently displayed view and change that particular icon to a highlighted color?

Thanks

2

Is that custom:button-card?

3

This should help build your logic:

4

Yes, multiple, nested

5

Test this one:


type: custom:button-card
name: |
  [[[
    let a = window.location.href;
    let path = a.substring(a.lastIndexOf('/') + 1);
    return path;
  ]]]
1 Like
6

Excellent solution!
Idid, however, have to check for a ‘?’ at the end of the name because on occasion there will be a ‘?edit…’ or ‘?external…’ tacked on.

  name: |
    [[[
      let str_final = 'X';
      let str_1 = window.location.href;
      let str_2 = str_1.substring(str_1.lastIndexOf('/') + 1);
      let int_end = str_2.lastIndexOf('?');
      if (int_end == -1) {
        str_final = str_2;
      } else {
        str_final = str_2.substring(0, int_end);
      };
      return str_final;
    ]]]

Thanks for the guidance. I would never have figured this out without your help.

2 Likes
7

Hello, I’m trying to solve this problem too.
This solution is returning correct name displayed card, but i have no clue what to do next.

I have custom button card template of my menu card.
I Guess there have to be two value templates for each menu state active / inactive but dont know how to transform actually displayed card name into custom button card template value ?

8

Hello!

I’ve just straggled with simmilar issue for last few evenings.
Please find below solution, which work for me :smiley:

  - type: "custom:button-card"
    template: card_navigate
    variables:
      ulm_card_navigate_path: home
      ulm_card_navigate_title: Home
      ulm_card_navigate_icon: mdi:home
      ulm_card_navigate_color: var(--color-black)
    styles:
      card:
        - background: |
            [[[
              let path = window.location.href.split('/').pop();
              if (path == 'home') return 'lightgrey';
            ]]]