Sonos widget with popup. is it possible to send a command with oh-list-item and close the popup

Hi,

I created a sonos widget based on a widget here in the community.


Clicking on the icon gives a popup with the sonos favorites.

Clicking on a list item changes the sonos playlist, but is it possible to close the popup at the same time?

uid: SonosPlayer
tags: []
props:
  parameterGroups: []
timestamp: Jan 18, 2022, 8:04:01 PM
component: f7-card
config:
  style:
    noShadow: false
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    border-radius: var(--f7-card-expandable-border-radius)
    background-color: "=props.bgcolor ? props.bgcolor : themeOptions.dark === 'dark' ? 'DimGrey' : 'GhostWhite'"
    height: 440px
    width: auto
    min-width: 273px
    max-width: 300px
slots:
  header:
    - component: Label
      config:
        text: Sonos Woonkamer
        style:
          font-size: 20px
          margin-top: 0px
  default:
    - component: oh-button
      config:
        iconF7: doc_plaintext
        iconSize: 40px
        action: popup
        popupOpen: .popupSonosDetails
        iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
        style:
          padding-bottom: 40px
          padding-right: 5px
          padding-top: 3px
          position: absolute
          right: 5px
          top: 0
          z-index: 998
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            config:
              style:
                position: relative
                top: -10px
                height: 25px
              class:
                - justify-content-center
            slots:
              default:
                - component: Label
                  config:
                    text: = items.Sonos_CurrentTitle.displayState || items.Sonos_CurrentTitle.state
                    style:
                      fontSize: 20px
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: ellipsis;
          - component: f7-row
            config:
              visible: true
              style:
                position: relative
                top: -10px
                height: 10px
              class:
                - justify-content-center
            slots:
              default:
                - component: Label
                  config:
                    text: =items.Sonos_CurrentArtist.displayState || items.Sonos_CurrentArtist.state
                    style:
                      fontSize: 16px
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: ellipsis;
          - component: f7-row
            config:
              class:
                - margin-vertical
                - justify-content-center
            slots:
              default:
                - component: oh-image
                  config:
                    url: =items.Sonos_CurrentAlbumUrl.state
                    style:
                      width: 70%
          - component: f7-row
            config:
              visible: true
              class:
                - justify-content-space-around
                - display-flex
                - align-items-center
                - align-content-stretch
                - margin-top
              style:
                position: relative
                top: +5px
            slots:
              default:
                - component: f7-icon
                  config:
                    f7: shuffle
                    size: 20
                    color: '=(items.Sonos_Shuffle.state === "ON") ? ((themeOptions.dark === "dark") ? "blue" : "deeporange" ): "gray"'
                    style:
                      position: relative
                      left: +5%
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: Sonos_Shuffle
                          actionCommand: '=(items.Sonos_Shuffle.state !== "ON") ? "ON" : "OFF"'
                          style:
                            position: absolute
                            width: 100%
                            height: 100%
                            top: 0px
                - component: oh-player-item
                  config:
                    style:
                      width: 150px
                    item: Sonos_Control
                    class:
                      - display-flex
                      - margin-
                      - align-content-stretch
                      - align-items-center
                      - justify-content-space-around
                - component: f7-icon
                  config:
                    f7: '=(items.Sonos_Repeat.state === "ALL") ? "repeat" : (items.Sonos_Repeat.state === "ONE") ? "repeat_1" : "repeat"'
                    size: 20
                    color: '=(items.Sonos_Repeat.state === "ALL") ? ((themeOptions.dark === "dark") ? "blue" : "deeporange" ) : (items.Sonos_Repeat.state === "ONE") ? ((themeOptions.dark === "dark") ? "blue" : "deeporange" ) : "gray"'
                    style:
                      position: relative
                      left: -5%
                  slots:
                    default:
                      - component: oh-button
                        config:
                          action: command
                          actionItem: Sonos_Repeat
                          actionCommand: '=(items.Sonos_Repeat.state === "ALL") ? "ONE" : (items.Sonos_Repeat.state === "ONE") ? "OFF": "ALL"'
                          style:
                            position: absolute
                            width: 100%
                            height: 100%
                            top: 0px
          - component: f7-row
            config:
              visible: true
              class:
                - justify-content-space-around
                - display-flex
                - align-items-center
                - align-content-stretch
            slots:
              default:
                - component: f7-card
                  config:
                    noShadow: true
                    class: margin display-flex align-items-center
                    style:
                      fontSize: 20px
                      min-width: calc(100% - 20px)
                      background-color: "=props.bgcolor ? props.bgcolor : themeOptions.dark === 'dark' ? 'DimGrey' : 'GhostWhite'"
                  slots:
                    default:
                      - component: oh-slider
                        config:
                          label: true
                          scale: false
                          style:
                            height: +40px
                            width: calc(100% - 35px)
                          min: 0
                          item: Sonos_Volume
                          class:
                            - display-flex
                            - margin-horizontal
                            - align-content-stretch
                            - align-items-center
                            - justify-content-space-around
                      - component: f7-icon
                        config:
                          visible: true
                          f7: '=(items.Sonos_Mute.state !== "ON") ? "speaker_3" : "speaker_slash"'
                          color: '=(themeOptions.dark === "dark") ? "blue" : "deeporange"'
                          class: margin-horizontal margin
                          size: 20
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: command
                                actionItem: Sonos_Mute
                                actionCommand: '=(items.Sonos_Mute.state !== "ON") ? "ON" : "OFF"'
                                style:
                                  position: absolute
                                  width: 100%
                                  height: 100%
                                  top: 0px
          - component: f7-row
            config:
              visible: true
              style:
                position: relative
                top: -30px
                height: 10px
              class:
                - justify-content-center
            slots:
              default:
                - component: Label
                  config:
                    text: =items.Sonos_Favorite.state || items.Sonos_Favorite.state
                    style:
                      fontSize: 16px
                      white-space: nowrap
                      overflow: hidden
                      text-overflow: ellipsis;
    - component: f7-popup
      config:
        class: popupSonosDetails
        style:
          overflow-y: scroll
      slots:
        default:
          - component: oh-button
            config:
              iconF7: clear_fill
              iconSize: 40px
              action: popup
              iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
              popupClose: .popupSonosDetails
              style:
                position: absolute
                right: 10px
                top: 20px
                height: 50px
                z-index: 99999999
          - component: f7-card
            slots:
              default:
                - component: Label
                  config:
                    text: Favorieten
                    style:
                      font-size: 20px
                      margin-top: 30px
                      margin-bottom: 10px
                - component: oh-list
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          sourceType: itemCommandOptions
                          itemOptions: Sonos_Favorite
                          for: favourite
                        slots:
                          default:
                            - component: oh-list-item
                              config:
                                icon: =loop.favourite.label.startsWith("Radio")? "f7:hifispeaker":loop.favourite.label.startsWith("Spotify")?"f7:line_horizontal_3_decrease_circle_fill":"f7:star"
                                iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
                                title: =loop.favourite.label
                                action: command
                                actionItem: Sonos_Favorite
                                actionCommand: =loop.favourite.label

You can add the same popupClose: .popupSonosDetails that you have in the oh-button config to the oh-list-item config. That will allow the list item to perform its action and close the popup.

Thanks a lot! That does the trick