Custom button - 2 actions under 1 tap

Configuration Frontend
1

Hi Guys,
Come time when I need to have one custom button card as button, but with two actions after single tap.
Found this part of code, which works for switches and lights:

tap_action:
  action: nothing
  multi_calls: |
    [[[
      hass.callService(
        "light",
        "turn_on",
        { entity_id: "light.my_light", brightness: 200 }
      );
      hass.callService(
        "switch",
        "turn_off",
        { entity_id: "switch.my_switch" }
      );
    ]]]

I need under one tap: one action of call service/switch off, but the second one should navigate to another tab of the dashboard. The best would be, if there could be included some few sec delay between them (but not necessary).
Can anyone point me out, how I can achieve this what I want, please?

2

Try browser_mod.

On your button make the tap action a script. In the script add your different actions using browser_mod. I’ve done similar to make a button that turns on a device and navigates to a different dashboard.

3

Try something like this:

type: custom:button-card
entity: switch.guitar_equipment_plug
tap_action:
  action: multi-actions
  actions:
    - action: perform-action
      perform_action: switch.toggle
      target:
        entity_id: switch.guitar_equipment_plug
    - action: navigate
      navigation_path: dash

This doesn’t include any kind of delay, though.

I use this flow on tablets for a kind of temporary “dialog” box flow. There’s a button on one dash view that takes you to another “dialog” view, and when any button on this “dialog” view is pressed you’re taken back to the original view while also running the action specified with hass.callService.

The code should be self explanatory, but lmk if anything doesn’t make sense!

Edit: I’ve edited the above example to account for changes in v6 of button-card. Here’s the old example if curious, though it has been broken for some time even before v6:

Summary 
type: custom:button-card
entity: switch.guitar_equipment_plug
tap_action:
  action: navigate
  navigation_path: dash
  multi_calls: |
    [[[
      hass.callService(
        "switch",
        "toggle",
        { entity_id: "switch.guitar_equipment_plug" }
      );
    ]]]
1 Like
4

I had the same problem and couldn’t call “multi_calls”
Please help !

5

This only works with the card type

type: custom:button-card

Please see Installing the Custom Button Card? - #2 by qoheleth for assistance on installing button-card

6

Hi @scottg489 ,

This works perfect for combining a navigation and switching a toggle, Is it also possible to navigate and execute a script. I tried a few things but couldn’t get it to work. Maybe you have a solution for it?

Thanks
Kris

7

Yes, you’re just calling an action (previously “service call”) either way. So in my example I’m calling the switch.toggle action, you’d want to call your script’s action. So it may look something like:

  multi_calls: |
    [[[
      hass.callService(
        "script",
        "my_script"
      );
    ]]]

I haven’t actually tested this out myself, but I believe this is all you should need. What have you tried that hasn’t worked?

8

Hi @scottg489 ,

The example you provided just works great, but I forgot to mention that my script is receiving some data. Is that also possible?

Thanks a lot
Kris

9

Yeah, if you look in my original comment you can see there’s a third parameter which is a dictionary that represents the action call data.

1 Like
10

Hi! Modifying your script I have managed to get a button to send an mqtt message shutting down the home theater and turn on the spotlights, so the room isn’t dark. But I would like to turn on the lights to a low brightness, so we do not get totally blinded. And I can’t get the brightness working. :frowning: This is the code that works:

type: custom:button-card
tap_action:
  action: perform-action
  perform_action: mqtt.publish
  data:
    evaluate_payload: false
    qos: 0
    retain: false
    topic: eg/Kino av
  multi_calls: |
    [[[
      hass.callService(
        "light",
        "turn_on",
        { entity_id: "light.stuedimmer" }
      );
    ]]]

But if I add the brightness to the multi_calls, it doesn’t work at all, the MQTT message isn’t sent either.

  multi_calls: |
    [[[
      hass.callService(
        "light",
        "turn_on",
        { entity_id: "light.stuedimmer" }
        { brightness_pct: "5" }
        );
    ]]]

I tried removing the end bracket after entity ID and the start bracket before brightness, but that didn’t change anything. Do you know what I’m doing wrong here? I couldn’t find anything about multi calls on the Github page for the custom button integration. I can do it by making an automation and calling that, but I would like to call directly.

11

If you look at the docs in my last message, you’ll see that the method signature (getting a little technical here) is:

hass.callService(domain, service, data)

So that means the third (and final) argument should be a dictionary containing your service call data.

You’re passing in 4 arguments. So instead, you want to include your brightness_pct in the same dictionary as the entity_id. Hope that helps!

1 Like
12

I see, thanks! I’ll try to get it into the same dictionary. I assume it will look like this:

 multi_calls: |
    [[[
      hass.callService(
        "light",
        "turn_on",
        { entity_id: "light.stuedimmer",
         brightness_pct: "5" }
        );
    ]]]
1 Like
13

[Updated] [Requires: custom:button-card installed]
I had a similar situation that the one indicated in this post, and it seems there is no built-in solution yet (github-discussion #724).

For anyone interested, I manage to have 2 actions with a single tap including the delay by using button-card’s action: custom callback, or what it seems a better way, by using action: fire-dom-event but without the delay. (no idea how to do it)

Following the suggested template from this discussion (github-discussion #986)
I added a button that when clicked triggers an script, and navigate to another tab or dashboard.

The code below worked for me.

Method: action: fire-dom-event using template

  - type: custom:button-card
    icon: mdi:play
    template:
      - tap_multi_calls
    variables:
      tap_multi_calls:
        actions:
          - action: call-service
            service: script.do_something
          - action: navigate
            navigation_path: /dashboard/secondary
        confirmation: false

At the moment if I need to add a delay before navigate to another dashboard, the code that works for me is:

Method: action: custom

- type: custom:button-card
  icon: mdi:play
  tap_action:
    action: custom
    custom: |
      [[[  
        hass.callService(
          'script',
          'turn_on',
          { entity_id: 'script.do_something' }
        );
        setTimeout(() => {
          window.history.pushState(null, "", "/my_dashboard/second_tab");
          window.dispatchEvent(new CustomEvent("location-changed"));
        }, 3500);
      ]]]

Hope this also helps. :blush:

14

As of version 6 of button-card, the YAML required to do this is slightly different.

I’ve adapted my previous example to what it needs to look like now:

tap_action:
  action: multi-actions
  actions:
    - action: perform-action
      perform_action: switch.toggle
      target:
        entity_id: switch.guitar_equipment_plug
    - action: navigate
      navigation_path: dash

Much cleaner in my opinion, so props to the button-card maintainer!

2 Likes
15

Your switch toggle can also be a regular action now. Does not need to be JavaScript. Would make it even tidier :slight_smile:

1 Like
16

Wow, yes of course. Even better, thanks! Edited my other posts :slight_smile:

1 Like
18

I have a couple of situations where I want a button that will control two things that can be separately controlled as well. For example, I have a button that turns on both a TV and the Sonos amplifier. So that is easy enough with multi-action, but I want to do more than that. I want the button to also turn off both items, that is, function as a toggle. I also want the same button to turn to on when the items are turned on using other controls, that is, I want it to also respond to the existing state if both are the same. I have a couple of these instances (e.g. 3 lights that can also be controlled independently). There must be a better way than the way I am doing it, because I use four separate automations. Call the two items A and B. I create an input_boolean X which the button will toggle and then my four automations are

X goes from off to on → turn A and B on
X goes from on to off → turn A and B off
A or B goes from off to on and if {A on and B on and X off} → turn X on
A or B goes from on to off and if {A off and B off and X on} → turn X off

This does produce the desired behavior, which is that X both controls and reflects independent control of the two item switches A and B. But I figure there must be a better way.

I use custom: button-cards, pretty much exclusively. I have 72 of them in my dashboard.

19

I think what you’re describing might be a bit different than what we’ve been discussing above.

What’s unique with what we’ve been discussing previously in this thread, is that we wanted to combine button presses with UI behavior (e.g. navigating to a different view on your dashboard), which was otherwise impossible without the button supporting it.

20

Yes, and in fact I use multi-actions to do exactly that, e.g. open a conditional and scroll so that conditional is at the top of the page using custom:anchor-card. This seemed like the closest existing thread to what I do in a klugy way and I was wondering if I am missing a clever way to do that.