Problem with operator template in custom button card

Configuration
1

Hi, i have the following custom button card that works well. but when i put the code inside of a custom field card inside another button card i get and error:

‘ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading ‘attributes’) in ‘return entity.attributes.is_volume_muted == true’’

any help will be appreciated.

this works


      type: custom:button-card
      entity: media_player.lgsoundbar
      icon: mdi:volume-high
      show_name: false
      state:
        - operator: template
          value: '[[[ return entity.attributes.is_volume_muted == true ]]]'
          icon: mdi:volume-off
      tap_action:
        action: call-service
        service: script.mute_soundbar
      styles:
        card:
          - width: 35px
          - height: 45px
        img_cell:
          - width: 35px
          - margin-right: '-5px'
        icon:
          - color: black
          - width: 35px
          - color: rgb(142,195,176)
          - margin-left: '-5px'

this do not works

type: custom:button-card
show_icon: false
show_name: false
custom_fields:
  livetv:
    card:
      type: custom:button-card
      entity: switch.television_antena
      icon: mdi:television
      show_name: false
      state:
        - value: 'on'
          icon: mdi:television-shimmer
      tap_action:
        action: toggle
      styles:
        card:
          - background: none
        icon:
          - color: rgb(142,195,176)
  backward:
    card:
      type: custom:button-card
      entity: media_player.apple_tv_4k
      icon: mdi:skip-previous
      show_name: false
      tap_action:
        action: call-service
        service: media_player.media_previous_track
        data:
          entity_id: media_player.apple_tv_4k
      styles:
        card:
          - background: none
        img_cell:
          - width: 30px
        icon:
          - width: 30px
          - color: rgb(142,195,176)
  play_pause:
    card:
      type: custom:button-card
      entity: media_player.apple_tv_4k
      icon: mdi:play
      state:
        - value: paused
          icon: mdi:play
        - value: stopped
          icon: mdi:play
        - value: playing
          icon: mdi:pause
      show_name: false
      tap_action:
        action: call-service
        service: media_player.media_play_pause
        data:
          entity_id: media_player.apple_tv_4k
      styles:
        card:
          - background: none
        img_cell:
          - width: 88px
        icon:
          - width: 88px
          - color: rgb(142,195,176)
  fordward:
    card:
      type: custom:button-card
      entity: media_player.apple_tv_4k
      icon: mdi:skip-next
      show_name: false
      tap_action:
        action: call-service
        service: media_player.media_next_track
        data:
          entity_id: media_player.apple_tv_4k
      styles:
        card:
          - background: none
        img_cell:
          - width: 30px
        icon:
          - width: 30px
          - color: rgb(142,195,176)
  soundbar:
    card:
      type: custom:button-card
      entity: media_player.lgsoundbar
      icon: mdi:speaker-multiple
      show_name: false
      tap_action:
        action: more-info
      styles:
        card:
          - background: none
        icon:
          - color: rgb(142,195,176)
  mute:
    card:
      type: custom:button-card
      entity: media_player.lgsoundbar
      icon: mdi:volume-high
      show_name: false
      state:
        - operator: template
          value: '[[[ return entity.attributes.is_volume_muted == true ]]]'
          icon: mdi:volume-off
      tap_action:
        action: call-service
        service: script.mute_soundbar
      styles:
        card:
          - width: 35px
          - height: 45px
        img_cell:
          - width: 35px
          - margin-right: '-5px'
        icon:
          - color: black
          - width: 35px
          - color: rgb(142,195,176)
          - margin-left: '-5px'
  slider:
    card:
      type: custom:my-slider-v2
      entity: media_player.lgsoundbar
      mode: volume
      step: '1'
      styles:
        container:
          - overflow: visible
        card:
          - height: 45px
          - width: 100%
          - background: >-
              linear-gradient(90deg, rgba(188,234,213,1) 0%, rgba(142,195,176,1)
              100%)
        track:
          - overflow: visible
          - background: none
        progress:
          - background: none
        thumb:
          - background: white
          - top: 4px
          - right: '-18px'
          - height: 36px
          - width: 36px
          - border-radius: 100px
styles:
  grid:
    - grid-template-areas: >-
        ". livetv backward play_pause fordward soundbar." "mute slider slider
        slider slider slider slider"
    - grid-template-rows: 1fr min-content
    - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr
  card:
    - padding: 0 20px 20px 20px
    - background: '#f4f6fb'
    - margin-top: '-10px'
    - border-radius: 0px 0px 20px 20px
2 
service_data:
      entity_id: >
3

Hi, thanks for your reply but i cant make it work, i do not understand why works in one case and as a card in a custom fields does not. If could you be more specific. Thanks in advance.

4

for custom_fields use actions like this …

backward:
  card:
    type: custom:button-card
    entity: media_player.apple_tv_4k
    icon: mdi:skip-previous
    show_name: false
    tap_action:
      action: call-service
      service: media_player.media_previous_track
      service_data:
        entity_id: >
          [[[ return entity.entity_id; ]]]
5

ok, thanks but that’s not the problem i’m having. Is the state template not working, all the others buttons are working fine.

      state:
        - operator: template
          value: '[[[ return entity.attributes.is_volume_muted == true ]]]'
          icon: mdi:volume-off

thats the part not working in a custom fileds. in a custom button card directly works but if i put this card inside a custon field do not works…

6

oh, sorry, I didn’t read the whole post. What should be the result in template value? What is its use? You probably have to define the entityid in the main button…

edit:
So, I was right… I shortened your code and left only the problem part. You have to undefine the entity id in the main button

      - type: custom:button-card
        entity: media_player.kitchen
        show_icon: false
        show_name: false
        styles:
          grid:
            - grid-template-areas: >-
                ". livetv backward play_pause fordward soundbar." "mute slider slider
                slider slider slider slider"
            - grid-template-rows: 1fr min-content
            - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr
          card:
            - padding: 0 20px 20px 20px
            - background: '#f4f6fb'
            - border-radius: 0px 0px 20px 20px
        custom_fields:
          mute:
            card:
              type: custom:button-card
              entity: media_player.kitchen
              icon: mdi:volume-high
              show_name: false
              state:
                - operator: template
                  value: '[[[ return entity.attributes.is_volume_muted === true ]]]'
                  icon: mdi:volume-off
              tap_action:
                action: call-service
                service: script.mute_soundbar
              styles:
                card:
                  - width: 35px
                  - height: 45px
                img_cell:
                  - width: 35px
                  - margin-right: '-5px'
                icon:
                  - color: black
                  - width: 35px
                  - color: rgb(142,195,176)
                  - margin-left: '-5

CleanShot 2024-07-03 at 18.00.49

1 Like
7

Yep. Thanks i define the entityid in the main card and works.

Thank you very much!!! :slight_smile:

8

a little tip, if you have different entities, use your own variable for each one…
for example for mute:

variables: 
  mute: media_player.lgsoundbar
  appletv: media_player.atv

then you can use

[[[ return variables.mute.attributes.is_volume_muted === true; ]]
1 Like
9

Noted!. Thanks for the tip :smiling_face: