v1.0 - Added support to dropdown lists

README.md

@@ -53,6 +53,19 @@ To support filepickers, as recommended in the SDK follow the following guideline
 1. On the input class, add an additional class named **sdFile** _in addition_ to the sdProperty indicated above.
 2. Add a label, as indicated above. Make sure the Id of the label has a ***Filename*** suffix (If the input is called userImage than the label is named userImageFilename)
 
+### NEW! Dropdown lists
+v1.0 now supports passing a dynamic list to be shown in a dropdown. In addition, you can choose the name of the field that will hold value selected by the user.
+To support dynamic dropdown lists, follow the following guidelines:
+
+```
+<select class="sdpi-item-value select sdProperty sdList" id="sounds" oninput="setSettings()" sdListTextProperty="soundName" sdListValueProperty="soundIndex" sdValueField="soundTitle"></select>
+```
+
+1. On the select class, add an additional class named **sdList** _in addition_ to the sdProperty indicated above.
+2. Add an attribute named **sdListTextProperty** which is the name of the *property* for each item in the list that holds the text you want to show in the dropdown
+3. Add an attribute named **sdListValueProperty** which is the name of the *property* for each item in the list that holds the value you want to return when an item is selected
+4. Add an attribute named **sdValueField** which is the name of a property in the payload which will be used to both retreive the selected value and store it back if the user chooses another option in the dropdown.
+
 ## Events
 The library currently sends out two events
 ### websocketCreate

src/sdtools.common.js

@@ -1,4 +1,4 @@
-// sdtools.common.js v0.8
+// sdtools.common.js v1.0
 var websocket = null,
     uuid = null,
     registerEventName = null,
@@ -71,6 +71,22 @@ function loadConfiguration(payload) {
                     elemFile.innerText = "No file...";
                 }
             }
+            else if (elem.classList.contains("sdList")) { // Dynamic dropdown
+                var textProperty = elem.getAttribute("sdListTextProperty");
+                var valueProperty = elem.getAttribute("sdListValueProperty");
+                var valueField = elem.getAttribute("sdValueField");
+
+                var items = payload[key];
+                elem.options.length = 0;
+
+                for (var idx = 0; idx < items.length; idx++) {
+                    var opt = document.createElement('option');
+                    opt.value = items[idx][valueProperty];
+                    opt.text = items[idx][textProperty];
+                    elem.appendChild(opt);
+                }
+                elem.value = payload[valueField];
+            }
             else { // Normal value
                 elem.value = payload[key];
             }
@@ -103,6 +119,10 @@ function setSettings() {
                 elemFile.innerText = elem.value;
             }
         }
+        else if (elem.classList.contains("sdList")) { // Dynamic dropdown
+            var valueField = elem.getAttribute("sdValueField");
+            payload[valueField] = elem.value;
+        }
         else { // Normal value
             payload[key] = elem.value;
         }
@@ -124,7 +144,20 @@ function setSettingsToPlugin(payload) {
     }
 }
 
-// our method to pass values to the plugin
+// Sends an entire payload to the sendToPlugin method
+function sendPayloadToPlugin(payload) {
+    if (websocket && (websocket.readyState === 1)) {
+        const json = {
+            'action': actionInfo['action'],
+            'event': 'sendToPlugin',
+            'context': uuid,
+            'payload': payload
+        };
+        websocket.send(JSON.stringify(json));
+    }
+}
+
+// Sends one value to the sendToPlugin method
 function sendValueToPlugin(value, param) {
     if (websocket && (websocket.readyState === 1)) {
         const json = {