Custom Button Card templating

Configuration
1

Hi Community, it is my first post, so if something wrong let me know.
I try to call service with custom button card based on actual Status. On Click the Sonos should play or pause. I tried so many versions of my templated code so maybe someone of you have a working version.
Here is what im trying:

#
#
#   Sonos Test
#
#

                      - type: "custom:button-card"
                        color_type: card
                        entity: media_player.wohnzimmer
                        show_state: false
                        tap_action:
                          action: call-service
                          service: [[[
                                        if (states.media_player.wohnzimmer == "paused"){
                                            return media_player.media_play;
                                        }else{
                                            return media_player.media_pause;
                                        }
                                    ]]]
                          service_data:
                            entity_id: media_player.wohnzimmer
                        color: rgb(30,144,255)
                        name: Wohnzimmer
                        icon: mdi:speaker
                        styles:
                             card:
                                - animation: none
                                - height: 150px
                                - width: 150px
                                - border-radius: 5%
                                - font-size: 20px
                                - font-weight: bold
                                - opacity: 0.7 
                        state:
                         - value: play
                           operator: '>'
                           color: rgb(255,127,80)
                           icon: mdi:play
                           styles:
                             card:
                                - animation: none
                                - height: 150px
                                - width: 150px
                                - border-radius: 5%
                                - font-size: 20px
                                - font-weight: bold
                                - opacity: 0.7

                         - value: pause
                           operator: '>'
                           color: rgb(255,191,0)
                           icon: mdi:pause
                           styles:
                             card:
                                - animation: none
                                - height: 150px
                                - width: 150px
                                - border-radius: 5%
                                - font-size: 20px
                                - font-weight: bold
                                - opacity: 0.7

Thanks for your help.

2

gotta return strings, you’re returning variables that don’t exist.

                          service: [[[
                                        if (entity.state == "paused"){
                                            return "media_player.media_play";
                                        }else{
                                            return "media_player.media_pause";
                                        }
                                    ]]]

You can also shorten this a bit

                      service: [[[ return (entity.state == "paused") ? "media_player.media_play": "media_player.media_pause"; ]]]

EDIT: I forgot to mention, you can use ‘entity’ to get the entity listed in the card configuration.

3

Hi petro

Thanks for ultra fast replying my post. Ok you are right i have to returning strings. But now i get this error. I think the javasript ist correct like this? Any idea?

Issue01
Issue012346×1350 260 KB

thanks

4

you probably need to make it a multiline template

                          service: >
                            [[[
                                if (entity.state == "paused"){
                                    return "media_player.media_play";
                                }else{
                                    return "media_player.media_pause";
                                }
                            ]]]
1 Like
5

Thanks now it works!

1 Like