add show/hide button card (and make that templatable too..)

[Mariusthvdb]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I need some of my buttons to show/hide depending on a templated value, in this case view:

      [[[ return window.location.pathname.split('lovelace/')[1]; ]]]

The above is used in various config templates, but I couldn't find a way to show/hide a full button based in this. Not can I use state-switch, or conditional core card for that matter.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Id wager a new config variable show: could be added, either being boolean hard coded, or using a template like the above

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

conditional core card
state-switch custom card
Additional context
Add any other context or screenshots about the feature request here.

is an experimental short cut menu bar. I which I would like to have the current view button be hidden (now highlighted)

if at ll possible, it would also need to auto slide in, and not leave a gap in de middle of the button-bar... This is where my hopes are set on stack-in-card ;-)

first couple of menu buttons of the above:

type: vertical-stack
cards:

  - type: custom:stack-in-card
    mode: horizontal
    keep:
      background: true
    cards:

      - type: custom:button-card
        template: button_shortcut_menu
        icon: mdi:home
        tap_action:
          action: navigate
          navigation_path: home
        variables:
           path: home
        styles:
          icon:
            - color: >
                [[[
                  return (states['sensor.count_alerts_notifying'].state > 0)
                  ? 'red': 'green';
                ]]]
        state:
          - operator: template
            value: >
              [[[ return (states['sensor.count_alerts_notifying'].state > 0) ]]]
            spin: true
#        spin: >
#            [[[ return (states['sensor.count_alerts_notifying'].state > 0)
#                ? true : false; ]]]

      - type: custom:button-card
        template: button_shortcut_menu
        icon: mdi:light-switch
        tap_action:
          action: navigate
          navigation_path: lights
        variables:
          path: lights
        styles:
          icon:
            - color: >
                [[[
                  return (states['group.all_inside_lights'].state == 'on')
                  ? 'gold': 'grey';
                ]]]

      - type: custom:button-card
        template: button_shortcut_menu
        icon: mdi:home-outline
        tap_action:
          action: navigate
          navigation_path: home_summary
        variables:
          path: home_summary
        styles:
          icon:
            - color: >
                [[[
                  if (states['sensor.hubs_badge'].state > 0 ||
                          states['sensor.status_badge'].state > 0)
                  return 'red'; return 'var(--text-primary-color)';
                ]]]
          card:
            - animation: >
                [[[ return (states['sensor.hubs_badge'].state > 0 ||
                          states['sensor.status_badge'].state > 0)
                    ? 'blink 2s ease infinite' :'none';
                ]]]

[RomRider]

I can understand the purpose, however why can't you use state-switch-card?

[Mariusthvdb]

Managed after all:

      - type: custom:state-switch
        entity: group
        states:
          admin:
            type: custom:button-card
            template: button_shortcut_menu
            icon: mdi:tune
            tap_action:
              action: navigate
              navigation_path: /ui-settings/settings
            variables:
              path: settings

          user:
            type: custom:button-card
            template: button_shortcut_menu
            icon: mdi:help
            tap_action:
              action: navigate
              navigation_path: /lovelace/help
            variables:
              path: help

still would be very nice not to need an extra card for this.

ive also changed the template in the button card template to:

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)';
          ]]]

so I can keep using the variable path, independent of the various dashboards path's

[amitkeret]

@RomRider

I can understand the purpose, however why can't you use state-switch-card?

I completely agree with @Mariusthvdb on this

still would be very nice not to need an extra card for this.

Using state-switch indeed works as an alternative, but it creates card duplication and room for errors.
This workaround could also work for #543 but again, creates duplicate cards.

A single card, which supports state-based show/hide would be a better solution.

[emufan]

I came here, because I searched for a display/hide filter as well. Would be great to have it out of the box.

Until then, I will stay with this apporach

        styles:
          card:
            - display: |
                [[[
                  return `none`
                ]]]
            - width: |
                [[[
                  return `0`
                ]]]

With some JS if around of course.

[michalk-k]

Incidentally, recently I'm trying to resolve the same issue as Marius.
I found that styles: card: affects the card's ha-card element. But it's wrapped by `button-card which still allocates the space in a layout.

Thank you for @emufan for the workaround!

[Mariusthvdb]

re-visiting this, I suppose supporting the visibility option of Modern Home Assistant is nice,

  - type: custom:button-card
    <<: &admin
      visibility:
        - condition: user
          users:
            - !secret admin_m
            - !secret admin_w
  - type: custom:button-card
    <<: *admin

[dcapslock]

For button-card to correctly provide for conditional display, the home assistant conditional card would need to be used, otherwise other core cards don't function well when using display: none. For custom elements to effectively use conditional cards, a Boolean condition is needed. If this make sense to you please comment/upvote home-assistant/architecture#1257 and/or comment on my Frontend PR (home-assistant/frontend#26452)

[Mariusthvdb]

what I meant above, is that that works..... I actually have that in my dashboard working exactly like that.

regarding home-assistant/frontend#26452, I am not sure what that would mean really.
Isnt a boolean rule identical to a state rule being on/off true/false?

[dcapslock]

What I am talking about is same but bringing into button-card as a templates option. Then you would be able to use JavaScript templates. To easily do it in code, being able to pass template result (true/false) to a conditional card config would make the feature a breeze. Currently expander-card (MellleD fork) does this to show/hide cards but uses a hack of screen queries that are 100% true or 100% false.

[Mariusthvdb]

I see.

could you give a minimal example config of how that would go?

Honestly, I believe we should adhere to Core Frontend techniques as much as possible. Showing/hiding a card would be an prominent example of that. If we start introducing per card visibility techniques imho that would be counter intuitive.

otoh, if it would allow templating easily from inside the card, that would enhance the feature, and bring it to a level Core will never see.... (although we can use a template binary in the current visibility feature )

    - type: custom:button-card
      visibility:
        - condition: state
          entity: binary_sensor.sun_up
          state: 'on'
      template: confirm_code
      entity: light.bureau_marijn_lampen
      variables:
        confirm_code: 2345

or use the same entity:

    - type: custom:button-card
      visibility:
        - condition: state
          entity: light.bureau_marijn_lampen
          state: 'off'
      template: confirm_code
      entity: light.bureau_marijn_lampen
      variables:
        confirm_code: 2345

too bad config.entity doesnt work in the condition.

now that would be a magic PR, and allow for easy replicating in yaml anchors

[dcapslock]

Yes, I think you see the magic. What button-card would do is its general state and templates, and then when visibility is used would wrap that in a conditional-card with Boolean conditions being the template/state outputs. It’s a bit difficult to share all my thoughts as it comes down to complexity of code. An example of the style of hack we need to get away from is seen in expander-card - https://github.com/MelleD/lovelace-expander-card/blob/ffddaf21dec622bfed0644488347d3a4f87cf76d/src/Card.svelte#L45

[dcapslock]

too bad config.entity doesnt work in the condition.

Just woke up the face that visibility: works though it is ot templatable. I will have to take a look.

Also, Frontend devs will bring in a new feature to be able to disable/hide a card from view. It will be available on visibility tab and also available to set in yaml. This will be instead of my suggested Boolean visibility condition.

[dcapslock]

PR #1004 will bring in support for templated disabled once Frontend has this available.