Merge pull request #1211 from bartbutenaers/form-dropdown-support

Form dropdown support

Author: joepavitt

docs/nodes/widgets/ui-form.md

@@ -19,13 +19,19 @@ props:
     Two Columns: Will render the form as a two-column layout.
     Reset on Submit: If checked, the form will be reset to an empty state after the form is submitted.
     Topic: Defines how to compute the topic, included in the `msg` object, when the form is submitted.
+    Dropdown Options:
+        dynamic: true
+        description: This list can define options for multiple dropdown/select field in a single form.
 dynamic:
     Label:
         payload: msg.ui_update.label
         structure: ["String"]
     Options:
         payload: msg.ui_update.options
         structure: ["Array<Object>"]
+    Dropdown Options:
+        payload: msg.ui_update.dropdownOptions
+        structure: ["Array<{ dropdown: <string>, key: <string>, label: <string> }>"]
     Class:
         payload: msg.class
         structure: ["String"]
@@ -164,6 +170,27 @@ If you want to override the configuration for your `ui-form`, and provide detail
     "required": true
 }
 ```
+#### Element: Dropdown
+
+```json
+{
+    "type": "dropdown",
+    "label": "Dropdown",
+    "key": "selection"
+}
+```
+
+### Defining Dropdown Options
+
+If you want to override the configuration for your `ui-form`, and provide details of your dropdown options after your Node-RED flow has been deployed, you can do so by passing a `msg.ui_update.dropdownOptions` value. This value should be an array of objects, where each object represents a dropdown element. Each object should have the following properties:
+
+```json
+[{
+    "dropdown": "Dropdown Name",
+    "value": "1",
+    "label": "Option 1"
+}]
+```
 
 
 ## Example

nodes/widgets/locales/en-US/ui_form.html

@@ -13,6 +13,7 @@
     </ul>
     <p>Optionally the <b>Topic</b> field can be used to set the <code>msg.topic</code> property.</p>
     <p>The Cancel button can be hidden by setting it's value to be blank "".</p>
+    <p>When form elements of type 'dropdown' have been used, the corresponding dropdown options can be specified in the second tabsheet.</p>
     <h3>Dynamic Properties (Inputs)</h3>
     <p>Any of the following can be appended to a <code>msg.ui_update</code> in order to override or set properties on this node at runtime.</p>
     <dl class="message-properties">
@@ -23,6 +24,10 @@ <h3>Dynamic Properties (Inputs)</h3>
         <dt class="optional">options <span class="property-type">array</span></dt>
         <dd>Re-define the form's elements by passing an array of objects that define the elements you want to see in your form. </dd>
     </dl>
+    <dl class="message-properties">
+        <dt class="optional">dropdownOptions <span class="property-type">array</span></dt>
+        <dd>Re-define the form's dropdown options by passing an array of objects that define the options you want to see in your dropdown. </dd>
+    </dl>
     <dl class="message-properties">
         <dt class="optional">class <span class="property-type">string</span></dt>
         <dd>Add a CSS class, or more, to the form at runtime.</dd>
@@ -64,4 +69,4 @@ <h5>Element: Email</h5>
     "key": "email",
     "required": true
 }</code></pre>
-</script>
+</script>

nodes/widgets/locales/en-US/ui_form.json

@@ -1,19 +1,23 @@
 {
     "ui-form": {
         "label": {
+            "dropdown": "Dropdown",
             "group": "Group",
             "size": "Size",
+            "key": "Key",
             "label": "Label",
+            "value": "Value",
             "optionalLabel": "optional label",
             "className": "Class",
             "classNamePlaceholder": "Optional CSS class name(s)",
             "formElements": "Form elements",
+            "dropdownOptions": "Dropdown options",
             "type": "Type",
             "required": "Required",
             "rows": "Rows",
             "remove": "Remove",
-            "egName": "e.g. Name",
-            "egName2": "e.g. name",
+            "egLabel": "e.g. Option 1",
+            "egValue": "e.g. 1",
             "text": "Text",
             "multiline": "Multiline",
             "number": "Number",
@@ -23,6 +27,7 @@
             "switch": "Switch",
             "date": "Date",
             "time": "Time",
+            "element": "element",
             "buttons": "Buttons",
             "submit": "submit",
             "submitButtonText": "submit button text",