Back Button Support

[egaryw2011]

After searching everywhere is seems that the only option for a back action is a mushroom card, however you are very limited as to customization. The requirement for a back button action is to navigate back to where you came from, for example: you could navigate between dashboards and no matter where you came from you could navigate back again with a push of a button.

Describe the solution you'd like If the Button card could support "tap action : back" then we would have complete customization of the use of it.

[Mariusthvdb]

try:

type: custom:button-card
name: Terug
icon: mdi:arrow-left
tap_action:
  action: |
    [[[ return window.history.back(); ]]]

secret: it's the same action chips card executes....

btw if you also want the other chips button (the 2 ones I had and were the sole reason I installed mushroom for...) Mushroom has, the Menu button, try this:

type: custom:button-card
icon: mdi:menu
show_name: false
tap_action:
  action: |
    [[[ this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true,
          composed: true })); ]]]

[egaryw2011]

:-) 1st one sort of works, has a strange affect, I have it in the Overview with a number of cards I test. I have a shortcut on chrome that takes me straight to the Overview however when it gets to the page automatically takes me to another window without me doing anything - if that makes sense. I thinks its thinks the button has been pushed when I land on the Overview page, even though I hadn't. However after that it seems to work okay - strange?

[egaryw2011]

Mmm tries to send me all over the place if I start editing it :-)

[egaryw2011]

I use the mushroom chip menu card for the second already, the custom back button would be great though

[Mariusthvdb]

yeah, its always something iffy if you start editing those js commands. even in the editor, upon each and every character.

thats why I use Yaml mode for that ;-)

and upon reload, the commands are issued, also true. but not upon simple browsing in my test setup.

there might be a way to prevent that form happening, if chips can do it button-card should also.

[egaryw2011]

Yeah the chips card does not act that way - your right. Wonder how they do it?

[Mariusthvdb]

Ive opened a post in Discord and hope to see some response

How Mushroom does it is clear, it's in those lines I copied. The question is how to translate that to custom button-card ;-)

[Mariusthvdb]

btw for now, I had to look it up....: see https://community.home-assistant.io/t/lovelace-button-card/65981/5757?u=mariusthvdb

cut it short: have a dedicated entity be toggled by the button, and auto reset by an automation (delay is required otherwise the frontend wont pick it up_

automation:

  - alias: Back button
    id: Back button
    mode: single
    triggers:
      trigger: state
      entity_id: input_boolean.back_button
      to: 'on'
    actions:
      - delay: 1
      - action: input_boolean.turn_off
        target:
          entity_id: input_boolean.back_button

  - alias: Menu button
    id: Menu button
    mode: single
    triggers:
      trigger: state
      entity_id: input_boolean.menu_button
      to: 'on'
    actions:
      - delay: 1
      - action: input_boolean.turn_off
        target:
          entity_id: input_boolean.menu_button

and then use button-card like this:

type: custom:button-card
template: subview
icon: mdi:arrow-left
show_name: false
tap_action:
  action: toggle
entity: input_boolean.back_button
variables:
  next: |
    [[[ if (entity.state === 'on') {history.back();} ]]]

type: custom:button-card
template: subview
icon: mdi:menu
show_name: false
tap_action:
  action: toggle
entity: input_boolean.menu_button
variables:
   menu: |
     [[[
      if (entity.state === 'on') {this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true,
          composed: true }));}
     ]]]

given the fact we can not set a listener to the 'on_click' , this 'hack' will prevent the button from execute on reload, and only listen to the boolean being toggled.

the name of the variable is irrelevant, the card will execute the javascript as long as the entity.state == 'on' no matter what

[ngocjohn]

I'm posting from the forum in case someone has a similar problem and search here on github.

type: custom:button-card
icon: mdi:menu
show_name: false
tap_action:
  toggle_menu: |
    [[[ this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true,
          composed: true })); ]]]

type: custom:button-card
name: Terug
icon: mdi:arrow-left
tap_action:
  back_navigate: |
    [[[ 
      const isEditor = this.editMode;
        if (isEditor) {
          return;
        }
      return window.history.back(); 
    ]]]

[egaryw2011]

btw for now, I had to look it up....: see https://community.home-assistant.io/t/lovelace-button-card/65981/5757?u=mariusthvdb

cut it short: have a dedicated entity be toggled by the button, and auto reset by an automation (delay is required otherwise the frontend wont pick it up_

automation:

  - alias: Back button
    id: Back button
    mode: single
    triggers:
      trigger: state
      entity_id: input_boolean.back_button
      to: 'on'
    actions:
      - delay: 1
      - action: input_boolean.turn_off
        target:
          entity_id: input_boolean.back_button

  - alias: Menu button
    id: Menu button
    mode: single
    triggers:
      trigger: state
      entity_id: input_boolean.menu_button
      to: 'on'
    actions:
      - delay: 1
      - action: input_boolean.turn_off
        target:
          entity_id: input_boolean.menu_button

and then use button-card like this:

type: custom:button-card
template: subview
icon: mdi:arrow-left
show_name: false
tap_action:
  action: toggle
entity: input_boolean.back_button
variables:
  next: |
    [[[ if (entity.state === 'on') {history.back();} ]]]

type: custom:button-card
template: subview
icon: mdi:menu
show_name: false
tap_action:
  action: toggle
entity: input_boolean.menu_button
variables:
   menu: |
     [[[
      if (entity.state === 'on') {this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true,
          composed: true }));}
     ]]]

given the fact we can not set a listener to the 'on_click' , this 'hack' will prevent the button from execute on reload, and only listen to the boolean being toggled.

the name of the variable is irrelevant, the card will execute the javascript as long as the entity.state == 'on' no matter what

Looks, good, I just updated my entire dashboard, good work. Now how to replace BrowserMod with a similar concept? I use BrowserMod it to navigate to a dashboard wait for a set period of time then revert back automatically to the page from which it came from - should be able to do it via an automation, I will give it some thought

[dcapslock]

Closing issue with a thought for Browser Mod. If you wish to discuss more, post in the Community Forum.

Note: With a Browser Mod sequence they are executed in series, but there is no wait so if you wish your sequence to have a delay use browser_mod.delay. If you are doing this from an automation, you would set browser_id on the browser_mod.sequence service call.

show_name: true
show_icon: true
type: custom:button-card
name: Config Page
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.sequence
    data:
      browser_id: THIS
      sequence:
        - service: browser_mod.navigate
          data:
            path: /config/dashboard
        - service: browser_mod.notification
          data:
            duration: 10000
            message: Viewing Config Page
            dismissable: true
            action_text: Return
            action:
              - service: browser_mod.navigate
                data:
                  browser_id: THIS
                  path: |
                    [[[
                       return(window.location.pathname);
                    ]]]
        - service: browser_mod.delay
          data:
            time: 10000
        - service: browser_mod.navigate
          data:
            browser_id: THIS
            path: |
              [[[
                 return(window.location.pathname);
              ]]]