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!

1 Like
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