@cyprnet/node-red-contrib-uibuilder-formgen 0.5.6 → 0.5.13

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 All notable changes to this package will be documented in this file.
 
+## 0.5.12
+
+- Schema Builder: added a **Convert multiline → arrays** helper in the Lookups editor to migrate older lookup lists (newline strings) into arrays-of-strings.
+
+## 0.5.13
+
+- Schema Builder: Field editor now **stays open on validation errors** so dynamic Lookup/Auto-fill settings (e.g. Node-RED source requiring Lookup ID) don’t appear to “revert” after clicking OK.
+
+## 0.5.11
+
+- Lookup / Auto-fill: lookup items can now store lists as **arrays** (e.g. <code>["a","b"]</code>) and the portal will format arrays for textarea/keyvalue targets. Builder Lookups editor now includes a **Simple list** mode (one item per line → JSON array).
+
+## 0.5.10
+
+- Schema Builder: added a **Manage Lookups** UI to view/add/edit/delete <code>schema.lookups</code> lists for Lookup / Auto-fill.
+
+## 0.5.9
+
+- Docs: expanded the User Guide with a detailed **Lookup / Auto-fill** section (static + dynamic sources, multi-set mappings, builder steps, Node-RED message contract, troubleshooting).
+
+## 0.5.8
+
+- Added IT example schema demonstrating **Lookup / Auto-fill (multi-field)** using an OS selection to populate compatible devices and software bundle.
+
+## 0.5.7
+
+- Added **Lookup / Auto-fill** rules (with multi-set mappings) to the generated portals and Schema Builder. Supports static lookup lists stored in the schema and dynamic lookup lists fetched from Node-RED via uibuilder messages.
+
 ## 0.5.6
 
 - Schema Builder: fixed saved-schema **load/delete selection** (was swapped due to index vs sorted list mismatch).

package/docs/user-guide.html

@@ -334,6 +334,7 @@
             <li>Create/edit sections and fields visually</li>
             <li>Validate schema structure</li>
             <li>Generate JSON preview</li>
+            <li>Manage <strong>Lookup lists</strong> (<code>schema.lookups</code>) for Lookup / Auto-fill</li>
             <li>Send schema to Node-RED (“Generate Form”)</li>
             <li><strong>New Schema</strong> button resets your current schema</li>
           </ul>
@@ -362,6 +363,12 @@
               <li>or Projects: <code>&lt;userDir&gt;/projects/&lt;projectName&gt;/uibuilder/formgen-builder/src/</code></li>
             </ul>
           </div>
+
+          <div class="note">
+            <strong>Managing lookup lists:</strong> Use the <strong>Lookups</strong> / <strong>Manage Lookups</strong> button to edit <code>schema.lookups</code>.
+            If you have older lookup lists that used multiline strings (with embedded <code>\n</code>), the Lookups editor includes
+            a <strong>Convert multiline → arrays</strong> button to migrate them to arrays of strings.
+          </div>
         </section>
 
         <section id="schemas">
@@ -431,6 +438,158 @@
   "keyvalueMode": "delimiter",
   "keyvalueDelimiter": "="
 }</pre>
+
+          <h3>Lookup / Auto-fill (optional)</h3>
+          <p>
+            Lookup / Auto-fill lets you create “smart fields” that automatically populate other fields when a user chooses or types a value.
+            This is especially useful for <strong>templates</strong>, <strong>profiles</strong>, and <strong>standard configurations</strong>:
+            the user picks a name or select option, and the form fills multiple related fields for them.
+          </p>
+
+          <h4>What it does</h4>
+          <ul>
+            <li><strong>Watches a source field</strong> (<code>fromField</code>) for changes.</li>
+            <li><strong>Looks up a matching record</strong> from either:
+              <ul>
+                <li><strong>Schema (static):</strong> a list stored inside the schema under <code>lookups</code></li>
+                <li><strong>Node-RED (dynamic):</strong> a list fetched at runtime via uibuilder messages</li>
+              </ul>
+            </li>
+            <li><strong>Applies one or more mappings</strong> (<code>mappings[]</code>) to set multiple target fields from the matched record.</li>
+          </ul>
+
+          <h4>Key rules (important)</h4>
+          <ul>
+            <li><strong>Exact match</strong>: matching is strict string equality after trim. “Windows 11” ≠ “windows 11”.</li>
+            <li><strong>Match key</strong> (<code>matchKey</code>) can be nested using dot notation (example: <code>meta.id</code>).</li>
+            <li><strong>Value key</strong> (<code>valueKey</code>) in mappings can also be nested (example: <code>details.software.bundle</code>).</li>
+            <li><strong>clearOnNoMatch</strong>: if true, mapped target fields are cleared when the source value is blank or no record matches.</li>
+            <li><strong>Cycle safety</strong>: avoid rules that write back into the same field they watch, or create circular chains (A fills B, B fills A).</li>
+          </ul>
+
+          <h4>Schema shape</h4>
+          <p>
+            Lookup lists are stored under <code>lookups</code> (any structure, but arrays of objects are recommended).
+            Auto-fill rules live on a field as <code>autoFill</code>.
+          </p>
+
+          <h4>Static list stored in the schema (recommended for portable templates)</h4>
+          <pre>{
+  "lookups": {
+    "deviceTemplates": [
+      { "name": "Azure Device Template", "id": "tmpl_123", "desc": "..." }
+    ]
+  },
+  "sections": [{
+    "fields": [
+      { "id": "templateName", "type": "text", "label": "Template Name" },
+      {
+        "id": "templateId",
+        "type": "text",
+        "label": "Template ID",
+        "autoFill": {
+          "fromField": "templateName",
+          "source": { "type": "schema", "path": "lookups.deviceTemplates" },
+          "matchKey": "name",
+          "clearOnNoMatch": true,
+          "mappings": [
+            { "targetField": "templateId", "valueKey": "id" },
+            { "targetField": "templateDesc", "valueKey": "desc" }
+          ]
+        }
+      }
+    ]
+  }]
+}</pre>
+
+          <h4>Dynamic list fetched from Node-RED (recommended for centralized “source of truth”)</h4>
+          <p>
+            Use this when the lookup list should come from Node-RED (file, database, API, etc.) and you want updates without regenerating the portal.
+          </p>
+          <pre>{
+  "id": "templateId",
+  "type": "text",
+  "label": "Template ID",
+  "autoFill": {
+    "fromField": "templateName",
+    "source": { "type": "uibuilder", "lookupId": "deviceTemplates" },
+    "matchKey": "name",
+    "mappings": [{ "targetField": "templateId", "valueKey": "id" }]
+  }
+}</pre>
+
+          <h4>Node-RED message contract (dynamic source)</h4>
+          <p>When a portal needs a dynamic list, it sends a message to Node-RED via uibuilder:</p>
+          <pre>{
+  "payload": { "type": "lookup:get", "lookupId": "deviceTemplates" }
+}</pre>
+          <p>Your flow should return the list back to the portal via uibuilder as:</p>
+          <pre>{
+  "payload": { "type": "lookup:data", "lookupId": "deviceTemplates", "items": [ ... ] }
+}</pre>
+          <p>If something fails, you can return:</p>
+          <pre>{
+  "payload": { "type": "lookup:error", "lookupId": "deviceTemplates", "error": "reason here" }
+}</pre>
+
+          <h4>Minimal dynamic lookup handler (Function node example)</h4>
+          <p>
+            This is a simple pattern you can use in your flow: connect uibuilder output → Function → uibuilder input.
+            It responds to <code>lookup:get</code> requests with a static list (replace with DB/API/file lookup as needed).
+          </p>
+          <pre>// Function node
+const p = msg.payload || {};
+if (p.type !== "lookup:get") return null;
+
+// Switch on lookupId so you can serve multiple lists
+if (p.lookupId === "deviceTemplates") {
+  msg.payload = {
+    type: "lookup:data",
+    lookupId: p.lookupId,
+    items: [
+      { name: "Azure Device Template", id: "tmpl_123", desc: "Example" },
+      { name: "Azure Block Template",  id: "tmpl_456", desc: "Example" }
+    ]
+  };
+  return msg;
+}
+
+msg.payload = { type: "lookup:error", lookupId: p.lookupId, error: "Unknown lookupId" };
+return msg;</pre>
+
+          <h4>Schema Builder: how to configure Lookup / Auto-fill</h4>
+          <ol>
+            <li>Edit (or add) the field you want to <strong>receive</strong> auto-filled values.</li>
+            <li>Open the <strong>Lookup / Auto-fill</strong> card and enable it.</li>
+            <li>Pick <strong>From field</strong> (the user input that triggers the lookup, e.g., <code>os</code>).</li>
+            <li>Choose <strong>Lookup source</strong>:
+              <ul>
+                <li><strong>Schema</strong>: enter a <strong>List name</strong> (stored under <code>schema.lookups.&lt;name&gt;</code>) and optionally paste JSON to store it in the schema</li>
+                <li><strong>Node-RED</strong>: enter a <strong>Lookup ID</strong> (used in uibuilder messages)</li>
+              </ul>
+            </li>
+            <li>Set <strong>Match key</strong> (the property to compare against the source field’s value).</li>
+            <li>Add one or more <strong>Mappings</strong>:
+              <ul>
+                <li><strong>Target field</strong>: which field should be set</li>
+                <li><strong>Value key</strong>: what property to copy from the matched record</li>
+              </ul>
+            </li>
+            <li>Optionally enable <strong>Clear on no match</strong>.</li>
+          </ol>
+
+          <h4>Troubleshooting</h4>
+          <ul>
+            <li><strong>Nothing fills</strong>: confirm the source field value exactly matches the record’s <code>matchKey</code> value (case/spacing matters).</li>
+            <li><strong>Dynamic lookups don’t work</strong>: confirm your uibuilder flow is replying with <code>lookup:data</code> for the same <code>lookupId</code>.</li>
+            <li><strong>Multi-set mapping sets some fields but not others</strong>: verify each mapping’s <code>targetField</code> exists in the schema and <code>valueKey</code> path exists in the lookup items.</li>
+            <li><strong>Unexpected clearing</strong>: check <code>clearOnNoMatch</code> and whether the source field becomes blank during edits.</li>
+          </ul>
+          <div class="note ok">
+            <strong>Tip (arrays are easier):</strong> For long lists, store them as <strong>arrays</strong> in your lookup items (e.g. <code>"devices": ["Dell...","HP..."]</code>)
+            instead of a single string with embedded newlines. When you map an array of strings into a <code>textarea</code> (or keyvalue delimiter field),
+            the generated portal will automatically join the array into lines for display.
+          </div>
         </section>
 
         <section id="generate">

package/examples/formgen-builder/src/index.html

@@ -106,6 +106,9 @@
           <b-button variant="outline-danger" class="mr-2" @click="newSchema">
             <i class="fa fa-file"></i> New Schema
           </b-button>
+          <b-button variant="outline-primary" class="mr-2" @click="openLookupsManager">
+            <i class="fa fa-list"></i> Lookups
+          </b-button>
           <b-button variant="info" @click="showHelp = true">
             <i class="fa fa-question-circle"></i> Help
           </b-button>
@@ -239,6 +242,9 @@
         <b-button variant="info" @click="loadSchema" class="mr-2">
           <i class="fa fa-folder-open"></i> Load Schema
         </b-button>
+        <b-button variant="outline-primary" @click="openLookupsManager" class="mr-2">
+          <i class="fa fa-list"></i> Manage Lookups
+        </b-button>
         <b-button variant="warning" @click="openPlainJsonGenerator" class="mr-2">
           <i class="fa fa-bolt"></i> Generate Schema (Plain JSON)
         </b-button>
@@ -400,6 +406,123 @@
           rows="2"
         />
       </b-form-group>
+
+      <!-- Lookup / Auto-fill -->
+      <b-card class="mt-3" header="Lookup / Auto-fill (optional)">
+        <b-form-checkbox v-model="currentField.autoFill.enabled">
+          Enable lookup/autofill (set one or more fields based on a matched record)
+        </b-form-checkbox>
+
+        <div v-if="currentField.autoFill.enabled" class="mt-3">
+          <b-form-row>
+            <b-col md="6">
+              <b-form-group label="From field (user input)" label-for="autofill-from">
+                <b-form-select
+                  id="autofill-from"
+                  v-model="currentField.autoFill.fromField"
+                  :options="[{value:'', text:'(select field)'}].concat(allFieldIdOptions)"
+                />
+                <small class="form-text text-muted">When this field changes, the lookup runs.</small>
+              </b-form-group>
+            </b-col>
+            <b-col md="6">
+              <b-form-group label="Lookup source" label-for="autofill-source">
+                <b-form-select
+                  id="autofill-source"
+                  v-model="currentField.autoFill.sourceType"
+                  :options="[
+                    { value: 'schema', text: 'Schema (static list in schema.lookups)' },
+                    { value: 'uibuilder', text: 'Node-RED (dynamic via uibuilder messages)' }
+                  ]"
+                />
+              </b-form-group>
+            </b-col>
+          </b-form-row>
+
+          <div v-if="currentField.autoFill.sourceType === 'schema'">
+            <b-form-row>
+              <b-col md="6">
+                <b-form-group label="List name" label-for="autofill-listname">
+                  <b-form-input id="autofill-listname" v-model="currentField.autoFill.schemaListName" placeholder="e.g., deviceTemplates" />
+                  <small class="form-text text-muted">Stored at <code>schema.lookups.&lt;name&gt;</code>.</small>
+                </b-form-group>
+              </b-col>
+              <b-col md="6">
+                <b-form-group label="Match key (property in list item)" label-for="autofill-matchkey">
+                  <b-form-input id="autofill-matchkey" v-model="currentField.autoFill.matchKey" placeholder="name" />
+                  <small class="form-text text-muted">Example: <code>name</code> or <code>meta.id</code>.</small>
+                </b-form-group>
+              </b-col>
+            </b-form-row>
+            <b-form-group label="(Optional) List JSON to store in schema" label-for="autofill-listjson">
+              <b-form-textarea
+                id="autofill-listjson"
+                v-model="currentField.autoFill.schemaListJson"
+                rows="4"
+                placeholder='[{"name":"Azure Device Template","id":"tmpl_123"}]'
+              />
+              <small class="form-text text-muted">Leave blank to reference an existing list already in the schema.</small>
+            </b-form-group>
+          </div>
+
+          <div v-else>
+            <b-form-row>
+              <b-col md="6">
+                <b-form-group label="Lookup ID" label-for="autofill-lookupid">
+                  <b-form-input id="autofill-lookupid" v-model="currentField.autoFill.lookupId" placeholder="e.g., deviceTemplates" />
+                  <small class="form-text text-muted">
+                    The portal will send <code>{type:'lookup:get', lookupId:'...'}</code> to Node-RED and expects
+                    <code>{type:'lookup:data', lookupId:'...', items:[...]}</code> back.
+                  </small>
+                </b-form-group>
+              </b-col>
+              <b-col md="6">
+                <b-form-group label="Match key (property in list item)" label-for="autofill-matchkey2">
+                  <b-form-input id="autofill-matchkey2" v-model="currentField.autoFill.matchKey" placeholder="name" />
+                </b-form-group>
+              </b-col>
+            </b-form-row>
+          </div>
+
+          <b-form-group>
+            <b-form-checkbox v-model="currentField.autoFill.clearOnNoMatch">
+              Clear mapped target fields when no match is found
+            </b-form-checkbox>
+          </b-form-group>
+
+          <b-form-group label="Mappings (multi-set)">
+            <small class="form-text text-muted mb-2">
+              Each mapping sets <strong>target field</strong> = <strong>value key</strong> from the matched record.
+            </small>
+            <div v-for="(m, midx) in currentField.autoFill.mappings" :key="'af-map-' + midx" class="border rounded p-2 mb-2 bg-light">
+              <b-form-row>
+                <b-col md="5">
+                  <b-form-group label="Target field" :label-for="'af-target-' + midx" label-size="sm" class="mb-1">
+                    <b-form-select
+                      :id="'af-target-' + midx"
+                      v-model="m.targetField"
+                      :options="[{value:'', text:'(select field)'}].concat(allFieldIdOptions)"
+                    />
+                  </b-form-group>
+                </b-col>
+                <b-col md="6">
+                  <b-form-group label="Value key" :label-for="'af-valuekey-' + midx" label-size="sm" class="mb-1">
+                    <b-form-input :id="'af-valuekey-' + midx" v-model="m.valueKey" placeholder="e.g., id or meta.desc" />
+                  </b-form-group>
+                </b-col>
+                <b-col md="1" class="d-flex align-items-end">
+                  <b-button variant="outline-danger" size="sm" @click="removeAutofillMapping(midx)" title="Remove mapping">
+                    <i class="fa fa-trash"></i>
+                  </b-button>
+                </b-col>
+              </b-form-row>
+            </div>
+            <b-button variant="outline-primary" size="sm" @click="addAutofillMapping">
+              <i class="fa fa-plus"></i> Add mapping
+            </b-button>
+          </b-form-group>
+        </div>
+      </b-card>
       
       <b-form-row v-if="currentField.type === 'textarea'">
         <b-col md="6">
@@ -831,6 +954,128 @@ email{{currentField.keyvalueDelimiter || '='}}john@example.com</code></pre>
         No saved schemas found. Save a schema first to load it later.
       </b-alert>
     </b-modal>
+
+    <!-- Manage Lookups Modal -->
+    <b-modal
+      id="lookups-modal"
+      title="Manage Lookups (schema.lookups)"
+      size="xl"
+      hide-footer
+    >
+      <p class="text-muted mb-3">
+        Lookup lists are stored at the top level of your schema under <code>lookups</code>.
+        Fields can reference these lists using Lookup / Auto-fill rules.
+      </p>
+
+      <b-form-row>
+        <b-col md="4">
+          <div class="d-flex justify-content-between align-items-center mb-2">
+            <strong>Lists</strong>
+            <b-button size="sm" variant="outline-primary" @click="newLookupList">
+              <i class="fa fa-plus"></i> New
+            </b-button>
+          </div>
+
+          <div v-if="lookupListNames.length === 0" class="text-muted">
+            No lookup lists yet. Click <strong>New</strong> to create one.
+          </div>
+
+          <ul v-else class="list-group">
+            <li
+              v-for="name in lookupListNames"
+              :key="'lk-' + name"
+              class="list-group-item d-flex justify-content-between align-items-center"
+              :class="(lookupEditor.originalName === name) ? 'active' : ''"
+              style="cursor:pointer;"
+              @click="selectLookupList(name)"
+            >
+              <div>
+                <div class="font-weight-bold">{{name}}</div>
+                <small :class="(lookupEditor.originalName === name) ? 'text-white-50' : 'text-muted'">
+                  {{lookupSummary(name)}}
+                </small>
+              </div>
+              <b-button
+                size="sm"
+                variant="link"
+                class="p-0"
+                :class="(lookupEditor.originalName === name) ? 'text-white' : 'text-danger'"
+                @click.stop="deleteLookupList(name)"
+                title="Delete list"
+              >
+                <i class="fa fa-trash"></i>
+              </b-button>
+            </li>
+          </ul>
+        </b-col>
+
+        <b-col md="8">
+          <div class="d-flex justify-content-between align-items-center mb-2">
+            <strong>Editor</strong>
+            <div>
+              <b-button size="sm" variant="outline-info" class="mr-2" @click="convertLookupMultilineToArrays" :disabled="lookupEditor.mode !== 'auto'">
+                <i class="fa fa-exchange"></i> Convert multiline → arrays
+              </b-button>
+              <b-button size="sm" variant="outline-secondary" class="mr-2" @click="formatLookupJson" :disabled="!lookupEditor.json">
+                <i class="fa fa-indent"></i> Format
+              </b-button>
+              <b-button size="sm" variant="success" @click="saveLookupList">
+                <i class="fa fa-save"></i> Save List
+              </b-button>
+            </div>
+          </div>
+
+          <b-form-group label="List name" label-for="lookup-name">
+            <b-form-input id="lookup-name" v-model="lookupEditor.name" placeholder="e.g., osProfiles" />
+            <small class="form-text text-muted">
+              This will be stored under <code>schema.lookups.&lt;name&gt;</code>.
+            </small>
+          </b-form-group>
+
+          <b-form-group label="Edit mode" label-for="lookup-mode">
+            <b-form-select
+              id="lookup-mode"
+              v-model="lookupEditor.mode"
+              :options="[
+                { value: 'auto', text: 'Auto (JSON)' },
+                { value: 'lines', text: 'Simple list (one item per line → JSON array)' }
+              ]"
+            />
+            <small class="form-text text-muted">
+              Use <strong>Simple list</strong> for arrays of strings without JSON brackets/quotes.
+            </small>
+          </b-form-group>
+
+          <b-form-group v-if="lookupEditor.mode === 'lines'" label="List items (one per line)" label-for="lookup-lines">
+            <b-form-textarea
+              id="lookup-lines"
+              v-model="lookupEditor.lines"
+              rows="12"
+              placeholder="Item 1&#10;Item 2&#10;Item 3"
+            />
+            <small class="form-text text-muted">
+              Empty lines are ignored. Saved as <code>["Item 1","Item 2",...]</code>.
+            </small>
+          </b-form-group>
+
+          <b-form-group v-else label="List JSON" label-for="lookup-json">
+            <b-form-textarea
+              id="lookup-json"
+              v-model="lookupEditor.json"
+              rows="12"
+              placeholder='Example: [{"name":"Windows 11","value":"win11","devices":["A","B"],"software":["X","Y"]}]'
+            />
+            <small class="form-text text-muted">
+              Recommended shape is an <strong>array of objects</strong>. For a simple string list, switch to <strong>Simple list</strong> mode.
+            </small>
+          </b-form-group>
+
+          <div v-if="lookupEditorKeys.length" class="text-muted">
+            <strong>Detected keys:</strong> {{lookupEditorKeys.join(', ')}}
+          </div>
+        </b-col>
+      </b-form-row>
+    </b-modal>
     
     <!-- Help Modal -->
     <b-modal