[SOLVED] Refresh item state based dropdown list in HABpanel

Apps & Services HABPanel
, ,
1

Hi all,

I am using a dropdown list in HABpanel to select the current playlist for my MPD (music player daemon).
The dropdown list is generated based on the state of a String item (MpdPlayLists) which gets the available playlists from MPD via MQTT as a CSV list. This all works pretty well :grinning:
However, when the available playists change (e.g. a new playlist is added to the list), it does not show up in the dropdown list. It is only displayed in the dropdown list after reloading the whole HABpanel page.
I would prefer the dropdown list to be updated when the MpdPlayLists item is updated.

Is there a way to trigger the reloading of a widget content based on an item update?
Do you have any other suggestion how the update of the dropdown list could be triggert?

I am currently experimenting with JS code to achieve this, but I have no succeeded. I have very limited experience with JS and lazy-load and I am not sure if it is possible at all.

Below is the code I am using in the widget to generate the dropdown list. It is based on this post: https://community.openhab.org/t/custom-widget-selection/31935

Thanks for your support!

<div class="btn-group" uib-dropdown dropdown-append-to-body="true"
     ng-init="playlists = itemState('MpdPlayLists').split(',')">
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
    Select Playlist <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
    <li role="menuitem" ng-repeat="playlist in playlists">
      <a ng-click="sendCmd('MpdLoadPlayList', playlist)">{{playlist}}</a>
    </li>
  </ul>
</div>
2

If you use ng-init the variable will be assigned once, therefore it’s normal it doesn’t change afterwards.
You’ll want to do this instead:

<div class="btn-group" uib-dropdown dropdown-append-to-body="true">
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
    Select Playlist <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
    <li role="menuitem" ng-repeat="playlist in itemState('MpdPlayLists').split(',')">
      <a ng-click="sendCmd('MpdLoadPlayList', playlist)">{{playlist}}</a>
    </li>
  </ul>
</div>

It’s a little “risky”, you could get infinite digests problems if you’re not careful but in this particular scenario you should be good!

1 Like
3

Dear Yannick,
your suggestion works perfectly!
Thanks!

4

Hi,
I am struggling with a similar problem, trying to make a dropdown menu for my Spotify playlists.

I tried to convert Yannicks version to fit my bindings but without any luck.
I get the dropdown menu with select playlist title, but when i click the the menu I only have a NULL listed.
The playlist binding works perfectly with the standard selection widget with the server-provided items as “choice of source”.

My code looks like this:

<div class="btn-group" uib-dropdown dropdown-append-to-body="true">
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
    Select Playlist <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
    <li role="menuitem" ng-repeat="playlist in itemState('spotify_playlist').split(',')">
      <a ng-click="sendCmd('spotify_playlist', playlist)">{{playlist}}</a>
    </li>
  </ul>
</div>
5

@MikaelL - did you resolve this - and could you share some code please?
I am 90% of the way into completing my all-in-one home remote - all that is outstanding is Spotify playlists (without hardcoding them) and one day something similar for plex item selection.
I’m using the Spotify code elsewhere on the board and am hoping to pull both my playlists and my recently played lists from the api as 2 dropdown items

6

I too have a similiar issue

this is my drop down, it works fine to send commands but doesnt display the current ItemValue

Any suggestions?

   <div class="row" style="margin: auto; padding: 0px">
     <div class="col-xs name" style="text-align:center !important; width:100%; padding: 0px;">AC FAN</div>
  </div>
  <div class="row" style="margin: auto; padding: 0px; text-align: center;">
      <select class="col-xs acmode_select">
        <option class="acmode_option"><a ng-click="sendCmd('DaikinACUnit_Fan', 'LEVEL_1')">LOW</a></option>
        <option class="acmode_option"><a ng-click="sendCmd('DaikinACUnit_Fan', 'LEVEL_2')">MED</a></option>
        <option class="acmode_option"><a ng-click="sendCmd('DaikinACUnit_Fan', 'LEVEL_3')">HIGH</a></option>
        <option class="acmode_option"><a ng-click="sendCmd('DaikinACUnit_Fan', 'AUTO')">AUTO</a></option>
      </select>
  </div>
</div>