@cyprnet/node-red-contrib-uibuilder-formgen 0.5.14 → 0.5.17

package/CHANGELOG.md

@@ -14,6 +14,19 @@ All notable changes to this package will be documented in this file.
 
 - Dynamic Lookup/Auto-fill (Node-RED source): portal now sends <code>matchValue</code> with <code>lookup:get</code> and caches per selected value, enabling Node-RED to return filtered records based on the user’s selection (e.g., OS).
 
+## 0.5.15
+
+- Lookup/Auto-fill (dynamic): improved per-selection requests and pending/timeout handling to make <code>lookup:get</code> reliable.
+- Documentation: expanded <code>schema.lookups</code> formatting guidance and added dynamic lookup examples in Node-RED help + Schema Builder help.
+
+## 0.5.17
+
+- Results view: portals now also display **generic results** sent via uibuilder (e.g. <code>msg.payload.result</code> or an array payload), not only <code>submit:ok</code>/<code>submit:error</code>.
+
+## 0.5.16
+
+- Results view: added pagination controls (default 15 rows/page; selector 10/15/25/50/100/1000) that appear when results exceed 10 records, for both Vue 2 and Vue 3 portals.
+
 ## 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).

package/docs/user-guide.html

@@ -502,6 +502,52 @@
   }]
 }</pre>
 
+          <h4>How to format <code>schema.lookups</code> (custom lists)</h4>
+          <p>
+            Lookup lists live at <code>schema.lookups</code> and can be any of the following shapes. The portal treats the list as an array of “items”.
+            Your <code>matchKey</code> and <code>valueKey</code> settings determine which properties are read from each item.
+          </p>
+
+          <h5>Recommended: array of objects (most flexible)</h5>
+          <p>Use this for OS profiles, templates, multi-field mappings, etc.</p>
+          <pre>{
+  "lookups": {
+    "osProfiles": [
+      {
+        "value": "win11",
+        "label": "Windows 11",
+        "devices": ["Dell 123", "Dell 321"],
+        "software": ["M365 Apps", "Teams"]
+      }
+    ]
+  }
+}</pre>
+
+          <h5>Simple list: array of strings</h5>
+          <p>Use this when you only need one string value per item.</p>
+          <pre>{
+  "lookups": {
+    "departments": ["IT", "HR", "Finance"]
+  }
+}</pre>
+
+          <h5>Object/dictionary (also supported)</h5>
+          <p>If you prefer key/value maps, you can store an object. It is normalized into an array internally.</p>
+          <pre>{
+  "lookups": {
+    "statusLabels": {
+      "new": "New",
+      "in_progress": "In Progress",
+      "closed": "Closed"
+    }
+  }
+}</pre>
+
+          <div class="note">
+            <strong>Tip:</strong> Prefer arrays over multiline strings. If you want textarea-friendly lists, store <code>devices</code>/<code>software</code> as arrays of strings.
+            The portal will join string arrays into lines when mapping into a <code>textarea</code>.
+          </div>
+
           <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.
@@ -519,14 +565,26 @@
 }</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>
+
+          <h5>Request message (portal → Node-RED)</h5>
+          <p>When a user changes the source field, the portal sends a request to Node-RED via uibuilder (output #1):</p>
           <pre>{
-  "payload": { "type": "lookup:get", "lookupId": "deviceTemplates" }
+  "payload": { "type": "lookup:get", "lookupId": "deviceTemplates", "matchValue": "win11" }
 }</pre>
-          <p>Your flow should return the list back to the portal via uibuilder as:</p>
+          <ul>
+            <li><strong>lookupId</strong>: identifies which lookup list/service you want (you define this string)</li>
+            <li><strong>matchValue</strong>: the current selected value from the source field (optional, but recommended for “query-by-value” lookups)</li>
+          </ul>
+
+          <h5>Response message (Node-RED → portal)</h5>
+          <p>Your flow should return the list back to the portal via the same uibuilder node’s input:</p>
           <pre>{
-  "payload": { "type": "lookup:data", "lookupId": "deviceTemplates", "items": [ ... ] }
+  "payload": { "type": "lookup:data", "lookupId": "deviceTemplates", "matchValue": "win11", "items": [ ... ] }
 }</pre>
+          <div class="note ok">
+            <strong>Important:</strong> Return <code>items</code> as an <strong>array</strong>. Each item must contain the properties your mappings reference.
+            Include the same <code>matchValue</code> so the portal can cache responses per selection.
+          </div>
           <div class="note">
             <strong>Dynamic lookup query values:</strong> When using a Node-RED (dynamic) lookup, the portal will request data as
             <code>{type:"lookup:get", lookupId:"...", matchValue:"..."}</code> where <code>matchValue</code> is the user’s current selection/value.
@@ -539,8 +597,9 @@
 
           <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).
+            This is a simple pattern you can use in your flow:
+            connect <strong>uibuilder output #1</strong> → <strong>Function</strong> → <strong>uibuilder input</strong>.
+            It responds to <code>lookup:get</code> requests (optionally filtered by <code>matchValue</code>).
           </p>
           <pre>// Function node
 const p = msg.payload || {};
@@ -564,6 +623,21 @@ if (p.lookupId === "deviceTemplates") {
 msg.payload = { type: "lookup:error", lookupId: p.lookupId, error: "Unknown lookupId" };
 return msg;</pre>
 
+          <h4>How the portal uses the response</h4>
+          <ul>
+            <li>The portal matches the user’s selected value against each item’s <code>matchKey</code> (commonly <code>value</code>).</li>
+            <li>For each mapping, it copies <code>valueKey</code> from the matched item into the target field.</li>
+            <li>If a mapping returns an <strong>array of strings</strong> and the target is a <code>textarea</code>, the portal joins the array into lines automatically.</li>
+          </ul>
+
+          <h4>Common pitfalls</h4>
+          <ul>
+            <li><strong>Wrong lookupId</strong>: request and response lookupId must match exactly.</li>
+            <li><strong>Missing matchValue in response</strong>: include it so caching works reliably.</li>
+            <li><strong>matchKey mismatch</strong>: if your select uses values like <code>win11</code>, set <code>matchKey</code> to <code>value</code> (not <code>label</code>).</li>
+            <li><strong>valueKey mismatch</strong>: ensure the returned item contains the properties your mappings reference.</li>
+          </ul>
+
           <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>

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

@@ -1013,6 +1013,9 @@ email{{currentField.keyvalueDelimiter || '='}}john@example.com</code></pre>
           <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="showHelp = true" title="How to format lookup lists">
+                <i class="fa fa-info-circle"></i> List format help
+              </b-button>
               <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>
@@ -1025,6 +1028,13 @@ email{{currentField.keyvalueDelimiter || '='}}john@example.com</code></pre>
             </div>
           </div>
 
+          <b-alert variant="info" show class="mb-3">
+            <strong>Lookup list format:</strong> Recommended is an <strong>array of objects</strong>. Example (OS profiles):
+            <pre class="bg-light p-2 rounded mb-0">[
+  { "value": "win11", "label": "Windows 11", "devices": ["Dell 123","Dell 321"], "software": ["M365 Apps","Teams"] }
+]</pre>
+          </b-alert>
+
           <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">
@@ -1184,6 +1194,60 @@ phone,Phone Number,text,true,personal,+1 555-1234,Include country code,phone</pr
           <li><strong>Select/Radio:</strong> Must have at least one option defined</li>
           <li><strong>Required Fields:</strong> Will be validated before form submission</li>
         </ul>
+
+        <h4 class="mt-4">Lookup / Auto-fill (populate fields from templates/profiles)</h4>
+        <p>
+          Lookup / Auto-fill lets you choose a value in one field and automatically populate other fields. This is useful for
+          OS profiles, device templates, standard configs, etc.
+        </p>
+        <ul>
+          <li><strong>Static (schema.lookups):</strong> store lists in <code>schema.lookups</code> and reference them by name.</li>
+          <li><strong>Dynamic (Node-RED):</strong> fetch data from Node-RED via uibuilder messages (recommended for a centralized “source of truth”).</li>
+        </ul>
+
+        <h5 class="mt-3">How to configure a field</h5>
+        <ol>
+          <li>Edit the field that should be auto-filled (the target field).</li>
+          <li>Open the <strong>Lookup / Auto-fill</strong> card and enable it.</li>
+          <li>Set <strong>From field</strong> to the source field id (e.g., <code>os</code>).</li>
+          <li>Choose the source:
+            <ul>
+              <li><strong>Schema</strong>: set a <strong>List name</strong> that exists in <code>schema.lookups</code>.</li>
+              <li><strong>Node-RED</strong>: set a <strong>Lookup ID</strong> (a string your flow will handle).</li>
+            </ul>
+          </li>
+          <li>Set <strong>Match key</strong> (commonly <code>value</code>).</li>
+          <li>Add one or more <strong>Mappings</strong>:
+            <ul>
+              <li><strong>Target field</strong>: which field to fill</li>
+              <li><strong>Value key</strong>: which property to copy from the matched item (e.g., <code>devices</code>)</li>
+            </ul>
+          </li>
+        </ol>
+
+        <h5 class="mt-3">Dynamic lookup message contract (Node-RED)</h5>
+        <p><strong>Portal → Node-RED</strong> (uibuilder output #1):</p>
+        <pre class="bg-light p-2 rounded">{
+  "payload": { "type": "lookup:get", "lookupId": "osProfiles", "matchValue": "win11" }
+}</pre>
+        <p><strong>Node-RED → Portal</strong> (uibuilder input):</p>
+        <pre class="bg-light p-2 rounded">{
+  "payload": {
+    "type": "lookup:data",
+    "lookupId": "osProfiles",
+    "matchValue": "win11",
+    "items": [
+      { "value": "win11", "label": "Windows 11", "devices": ["Dell 123"], "software": ["M365 Apps","Teams"] }
+    ]
+  }
+}</pre>
+
+        <h5 class="mt-3">Common pitfalls</h5>
+        <ul>
+          <li><strong>It “reverts” to schema source:</strong> Node-RED (dynamic) requires a non-empty <strong>Lookup ID</strong>.</li>
+          <li><strong>Nothing fills:</strong> check <code>matchKey</code> matches your select values (e.g. <code>value</code> == <code>win11</code>).</li>
+          <li><strong>Mappings don’t work:</strong> ensure the response items contain the properties referenced by <code>valueKey</code>.</li>
+        </ul>
         
         <h4 class="mt-4">Tips</h4>
         <ul>

package/nodes/uibuilder-formgen-v3.html

@@ -244,6 +244,61 @@
 Generates a uibuilder instance (`src/index.html`, `src/index.js`, `src/form.schema.json`) from `msg.schema`.
 
 This node generates portals using **Vue 3 + Bootstrap 5** (native HTML controls).
+
+## Lookup / Auto-fill (static vs dynamic)
+
+PortalSmith supports “smart fields” that auto-populate other fields based on a selected value.
+
+- **Static (schema.lookups)**: lookup lists live in the schema (`schema.lookups.<name>`). No Node-RED flow changes required.
+- **Dynamic (Node-RED via uibuilder)**: the portal requests data from your flow using uibuilder messages.
+
+## Dynamic lookup message contract (Node-RED source)
+
+When a field changes (e.g., OS selection), the portal sends to Node-RED (uibuilder output #1):
+
+```json
+{ "payload": { "type": "lookup:get", "lookupId": "osProfiles", "matchValue": "win11" } }
+```
+
+- `lookupId`: identifies which lookup list/service you want (you choose this string)
+- `matchValue`: the current selected value from the source field (e.g., `win11`)
+
+Your flow must respond back to the same uibuilder instance (uibuilder input) with:
+
+```json
+{
+  "payload": {
+    "type": "lookup:data",
+    "lookupId": "osProfiles",
+    "matchValue": "win11",
+    "items": [ { "value": "win11", "label": "Windows 11", "devices": ["..."], "software": ["..."] } ]
+  }
+}
+```
+
+Notes:
+- `items` must be an **array**. Each item should contain the properties referenced by your field’s mappings.
+- Include the same `matchValue` so the portal can cache responses per selection.
+
+## Typical wiring
+
+- uibuilder output #1 → Switch (`msg.payload.type == lookup:get`) → Function → uibuilder input
+
+Example Function node skeleton:
+
+```js
+const p = msg.payload || {};
+if (p.type !== "lookup:get") return null;
+if (p.lookupId !== "osProfiles") return null;
+
+msg.payload = {
+  type: "lookup:data",
+  lookupId: p.lookupId,
+  matchValue: p.matchValue || null,
+  items: [] // return matching record(s) here
+};
+return msg;
+```
 </script>
 
 

package/nodes/uibuilder-formgen-v3.js

@@ -455,7 +455,7 @@ module.exports = function(RED) {
         await fs.writeJson(targetSchema, schema, { spaces: 2 });
 
         const runtimeData = {
-          generatorVersion: "0.5.14",
+          generatorVersion: "0.5.17",
           generatorNode: "uibuilder-formgen-v3",
           timestamp: new Date().toISOString(),
           instanceName: instanceName,

package/nodes/uibuilder-formgen.html

@@ -270,4 +270,36 @@ Generates a uibuilder instance (`src/index.html`, `src/index.js`, `src/form.sche
 **Paths**
 - Default: `${userDir}/uibuilder/<instance>/src/`
 - Optional overrides (highest priority first): `instanceRootDir`, `uibRootDir`, `projectName` (see README for details).
+
+## Lookup / Auto-fill (static vs dynamic)
+
+PortalSmith supports “smart fields” that auto-populate other fields based on a selected value.
+
+- **Static (schema.lookups)**: lookup lists live in the schema (`schema.lookups.<name>`). No Node-RED flow changes required.
+- **Dynamic (Node-RED via uibuilder)**: the portal requests data from your flow using uibuilder messages.
+
+## Dynamic lookup message contract (Node-RED source)
+
+When a field changes (e.g., OS selection), the portal sends to Node-RED (uibuilder output #1):
+
+```json
+{ "payload": { "type": "lookup:get", "lookupId": "osProfiles", "matchValue": "win11" } }
+```
+
+Your flow must respond back to the same uibuilder instance (uibuilder input) with:
+
+```json
+{
+  "payload": {
+    "type": "lookup:data",
+    "lookupId": "osProfiles",
+    "matchValue": "win11",
+    "items": [ { "value": "win11", "label": "Windows 11", "devices": ["..."], "software": ["..."] } ]
+  }
+}
+```
+
+## Typical wiring
+
+- uibuilder output #1 → Switch (`msg.payload.type == lookup:get`) → Function → uibuilder input
 </script>

package/nodes/uibuilder-formgen.js

@@ -484,7 +484,7 @@ module.exports = function(RED) {
 
         // Write runtime metadata
         const runtimeData = {
-          generatorVersion: "0.5.14",
+          generatorVersion: "0.5.17",
           timestamp: new Date().toISOString(),
           instanceName: instanceName,
           storageMode: storageMode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyprnet/node-red-contrib-uibuilder-formgen",
-  "version": "0.5.14",
+  "version": "0.5.17",
   "description": "PortalSmith: Generate schema-driven uibuilder form portals from JSON",
   "keywords": [
     "node-red",

package/templates/index.html.mustache

@@ -270,9 +270,39 @@
           </div>
 
           <div v-if="resultView === 'table'">
-            <div v-if="resultRows.length === 0" class="text-muted">
+            <div v-if="showResultPagination" class="d-flex flex-wrap align-items-center justify-content-between mb-2">
+              <div class="d-flex align-items-center">
+                <span class="text-muted small mr-2">Rows per page</span>
+                <select class="custom-select custom-select-sm" style="width:auto;" v-model.number="resultPageSize">
+                  <option v-for="n in resultPageSizeOptions" :key="'ps-' + n" :value="n">{{n}}</option>
+                </select>
+                <span class="text-muted small ml-3">
+                  {{ Math.min(resultPageStart + 1, resultTotalRows) }}-{{ Math.min(resultPageEnd, resultTotalRows) }} of {{ resultTotalRows }}
+                </span>
+              </div>
+              <div class="btn-group btn-group-sm mt-2 mt-md-0" role="group" aria-label="Pagination">
+                <button type="button" class="btn btn-outline-secondary" :disabled="resultPage <= 1" @click="resultPage = Math.max(1, resultPage - 1)">Prev</button>
+                <button type="button" class="btn btn-outline-secondary" :disabled="resultPage >= resultTotalPages" @click="resultPage = Math.min(resultTotalPages, resultPage + 1)">Next</button>
+              </div>
+            </div>
+
+            <div v-if="resultTotalRows === 0" class="text-muted">
               No structured fields to display.
             </div>
+            <div v-else-if="resultIsArrayOfObjects" class="table-responsive">
+              <table class="table table-sm table-bordered mb-0">
+                <thead>
+                  <tr>
+                    <th v-for="h in resultRecordHeaders" :key="h">{{h}}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, idx) in resultPagedRows" :key="'rr-' + idx">
+                    <td v-for="h in resultRecordHeaders" :key="'rc-' + idx + '-' + h" style="white-space:pre-wrap;">{{row[h]}}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
             <div v-else class="table-responsive">
               <table class="table table-sm table-bordered mb-0">
                 <thead>
@@ -282,7 +312,7 @@
                   </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="row in resultRows" :key="row.key">
+                  <tr v-for="row in resultPagedRows" :key="row.key">
                     <th class="font-weight-normal">{{row.label}}</th>
                     <td style="white-space:pre-wrap;">{{row.value}}</td>
                   </tr>
@@ -291,7 +321,7 @@
             </div>
           </div>
 
-          <pre v-else class="border rounded p-2 mb-0" style="white-space:pre-wrap;max-height:520px;overflow:auto;">{{formattedResult}}</pre>
+          <pre v-else class="border rounded p-2 mb-0" style="white-space:pre-wrap;max-height:520px;overflow:auto;">{{jsonResultText}}</pre>
         </div>
       </div>
 

package/templates/index.js.mustache

@@ -172,7 +172,8 @@
   // - lookupId (for "give me the full list" responses)
   // - lookupId::matchValue (for "give me list for this selected value" responses)
   const __psLookupCache = {};   // { [cacheKey]: any[] }
-  const __psLookupPending = {}; // { [cacheKey]: true }
+  const __psLookupPending = {}; // { [cacheKey]: number(timestampMs) }
+  const __psLookupPendingTimeoutMs = 8000;
 
   function getByPath(obj, path) {
     if (!obj) return undefined;
@@ -267,13 +268,28 @@
     return mv ? `${id}::${mv}` : id;
   }
 
+  function clearLookupPending(lookupId, matchValue) {
+    const id = String(lookupId || '').trim();
+    if (!id) return;
+    const mv = (matchValue === null || matchValue === undefined) ? '' : String(matchValue).trim();
+    if (mv) {
+      delete __psLookupPending[`${id}::${mv}`];
+      return;
+    }
+    // If matchValue isn't provided, clear ALL pending entries for this lookupId (id and id::*)
+    Object.keys(__psLookupPending).forEach(k => {
+      if (k === id || k.startsWith(id + '::')) delete __psLookupPending[k];
+    });
+  }
+
   function requestLookup(lookupId, matchValue) {
     const id = String(lookupId || '').trim();
     if (!id) return;
     const key = lookupCacheKey(id, matchValue);
     if (__psLookupCache[key]) return;
-    if (__psLookupPending[key]) return;
-    __psLookupPending[key] = true;
+    const pendingAt = __psLookupPending[key];
+    if (pendingAt && (Date.now() - pendingAt) < __psLookupPendingTimeoutMs) return;
+    __psLookupPending[key] = Date.now();
     if (uibuilderInstance && typeof uibuilderInstance.send === 'function') {
       // matchValue is optional; if provided, Node-RED can respond with items filtered for that value.
       uibuilderInstance.send({ payload: { type: 'lookup:get', lookupId: id, matchValue: (matchValue === undefined ? null : matchValue) } });
@@ -298,7 +314,9 @@
       items = normalizeLookupItems(getByPath(schema, rule.sourcePath));
     } else if (rule.sourceType === 'uibuilder') {
       const key = lookupCacheKey(rule.lookupId, sourceValue);
-      if (!__psLookupCache[key]) requestLookup(rule.lookupId, sourceValue);
+      // Always request per-selection so Node-RED can return filtered data for the current value.
+      // (Cached per lookupId::matchValue so it only requests once per selected value.)
+      requestLookup(rule.lookupId, sourceValue);
       items = normalizeLookupItems(__psLookupCache[key] || __psLookupCache[String(rule.lookupId)] || []);
     }
 
@@ -454,7 +472,8 @@
       if (app) {
         try {
           app.__psAutofillRules = compileAutofillRules(schema);
-          (app.__psAutofillRules || []).forEach(r => { if (r.sourceType === 'uibuilder') requestLookup(r.lookupId); });
+          // NOTE: Do NOT pre-request dynamic lookups without a selected value.
+          // Dynamic lookups are requested per-selection (matchValue) inside applyAutofillRule.
           (app.__psAutofillRules || []).forEach(r => {
             app.$watch(
               function() { return app.formData[r.fromField]; },
@@ -657,6 +676,9 @@
         lastResult: null,
         lastResultStatus: null,
         resultView: 'table',
+        resultPage: 1,
+        resultPageSize: 15,
+        resultPageSizeOptions: [10, 15, 25, 50, 100, 1000],
         copyBlockActions: schema.actions ? schema.actions.filter(a => a.type === 'copyBlock') : [],
         exportFormats: CONFIG.exportFormats
       },
@@ -684,7 +706,24 @@
             return String(this.lastResult);
           }
         },
-        resultRows() {
+        // Result table mode helpers
+        resultIsArrayOfObjects() {
+          const r = this.lastResult;
+          return Array.isArray(r) && r.length && typeof r[0] === 'object' && !Array.isArray(r[0]);
+        },
+        resultRecordHeaders() {
+          if (!this.resultIsArrayOfObjects) return [];
+          try { return Object.keys(this.lastResult[0] || {}); } catch (e) { return []; }
+        },
+        resultRecordRows() {
+          if (!this.resultIsArrayOfObjects) return [];
+          return (this.lastResult || []).map((row, idx) => {
+            const out = { __idx: idx };
+            (this.resultRecordHeaders || []).forEach(k => { out[k] = this.formatResultValue(row ? row[k] : ''); });
+            return out;
+          });
+        },
+        resultKeyValueRows() {
           const r = this.lastResult;
           if (r === null || r === undefined) return [];
 
@@ -697,14 +736,8 @@
             }));
           }
 
-          // If result is an array, show a single row with joined values
-          if (Array.isArray(r)) {
-            return [{
-              key: '__array__',
-              label: 'items',
-              value: this.formatResultValue(r),
-            }];
-          }
+          // If result is an array (but not array-of-objects), show a single row with joined values
+          if (Array.isArray(r)) return [{ key: '__array__', label: 'items', value: this.formatResultValue(r) }];
 
           // Primitive/string result
           return [{
@@ -712,8 +745,42 @@
             label: 'result',
             value: this.formatResultValue(r),
           }];
+        },
+        resultTotalRows() {
+          return this.resultIsArrayOfObjects ? (this.resultRecordRows || []).length : (this.resultKeyValueRows || []).length;
+        },
+        showResultPagination() {
+          return this.resultTotalRows > 10;
+        },
+        resultTotalPages() {
+          const sz = Number(this.resultPageSize) || 15;
+          return Math.max(1, Math.ceil(this.resultTotalRows / sz));
+        },
+        resultPageStart() {
+          const sz = Number(this.resultPageSize) || 15;
+          return ((Number(this.resultPage) || 1) - 1) * sz;
+        },
+        resultPageEnd() {
+          const sz = Number(this.resultPageSize) || 15;
+          return this.resultPageStart + sz;
+        },
+        resultPagedRows() {
+          const rows = this.resultIsArrayOfObjects ? (this.resultRecordRows || []) : (this.resultKeyValueRows || []);
+          if (!this.showResultPagination) return rows;
+          return rows.slice(this.resultPageStart, this.resultPageEnd);
+        },
+        jsonResultText() {
+          if (Array.isArray(this.lastResult) && this.lastResult.length > 10) {
+            const slice = this.lastResult.slice(this.resultPageStart, this.resultPageEnd);
+            try { return JSON.stringify(slice, null, 2); } catch (e) { return String(slice); }
+          }
+          return this.formattedResult;
         }
       },
+      watch: {
+        lastResult() { this.resultPage = 1; },
+        resultPageSize() { this.resultPage = 1; }
+      },
       methods: {
         handleClearForm() {
           try {
@@ -1246,10 +1313,19 @@
     uibuilderInstance.onChange('msg', function(msg) {
       // Normalize message: uibuilder may send msg.payload or msg directly
       const payload = msg && (msg.payload ?? msg);
-      if (!payload || typeof payload !== 'object') return;
+      if (payload === null || payload === undefined) return;
       
+      function setResult(result, status, preferredView) {
+        if (!app) return;
+        app.lastResultStatus = (status === null || status === undefined) ? null : status;
+        app.lastResult = result;
+        app.showResult = true;
+        app.resultView = preferredView || 'table';
+        app.resultPage = 1;
+      }
+
       // Handle draft response
-      if (payload.type === 'draft' && payload.formId === CONFIG.formId) {
+      if (payload && typeof payload === 'object' && payload.type === 'draft' && payload.formId === CONFIG.formId) {
         if (app && payload.data) {
           app.formData = { ...app.formData, ...payload.data };
           showAlert('Draft loaded from server', 'success');
@@ -1257,26 +1333,54 @@
       }
       
       // Handle submit response
-      if (payload.type === 'submit:ok') {
+      if (payload && typeof payload === 'object' && payload.type === 'submit:ok') {
         if (app) {
-          app.lastResultStatus = payload.status || null;
-          app.lastResult = payload.result ?? payload.payload ?? payload;
-          app.showResult = true;
-          app.resultView = 'table';
+          setResult(payload.result ?? payload.payload ?? payload, payload.status || null, 'table');
         }
         showAlert('Submission confirmed', 'success');
-      } else if (payload.type === 'submit:error') {
+      } else if (payload && typeof payload === 'object' && payload.type === 'submit:error') {
         if (app) {
-          app.lastResultStatus = payload.status || null;
-          app.lastResult = payload.result ?? payload.error ?? payload;
-          app.showResult = true;
-          app.resultView = 'json';
+          setResult(payload.result ?? payload.error ?? payload, payload.status || null, 'json');
         }
         showAlert('Submission failed', 'danger');
       }
+
+      // Generic result display (works with uibuilder -> input -> uibuilder patterns)
+      // Supported incoming shapes:
+      // - msg.payload = { type: 'result', result: any, status?: number, view?: 'table'|'json' }
+      // - msg.payload = { result: any }   (even without type)
+      // - msg.payload.result = any        (common Node-RED pattern)
+      // - msg.payload = any[]             (array result directly)
+      // - msg.payload = any               (primitive result directly)
+      //
+      // NOTE: This does not interfere with lookup/draft/submit messages since those are handled above.
+      if (app) {
+        // Arrays/primitives: treat as a result payload
+        if (Array.isArray(payload) || (typeof payload !== 'object')) {
+          setResult(payload, null, Array.isArray(payload) ? 'table' : 'json');
+          return;
+        }
+        // Objects: accept {result: ...} or explicit type variants
+        if (payload && typeof payload === 'object') {
+          const t = String(payload.type || '').trim();
+          const isExplicitResultType = (t === 'result' || t === 'result:data' || t === 'result:show' || t === 'display:result');
+          const hasResultField = Object.prototype.hasOwnProperty.call(payload, 'result');
+          if (isExplicitResultType || hasResultField) {
+            const view = (payload.view === 'json' || payload.view === 'table') ? payload.view : 'table';
+            setResult(payload.result, payload.status || null, view);
+            return;
+          }
+          // Also accept nested: { payload: { result: ... } } if user forwards whole msg objects
+          if (payload.payload && typeof payload.payload === 'object' && Object.prototype.hasOwnProperty.call(payload.payload, 'result')) {
+            const view = (payload.payload.view === 'json' || payload.payload.view === 'table') ? payload.payload.view : 'table';
+            setResult(payload.payload.result, payload.payload.status || payload.status || null, view);
+            return;
+          }
+        }
+      }
       
       // Handle export response
-      if (payload.type === 'export:file') {
+      if (payload && typeof payload === 'object' && payload.type === 'export:file') {
         const fileInfo = payload.payload || payload;
         const format = fileInfo.format || 'file';
         if (fileInfo.url) {
@@ -1289,21 +1393,19 @@
       }
 
       // Handle lookup responses (for auto-fill)
-      if (payload.type === 'lookup:data' && payload.lookupId) {
+      if (payload && typeof payload === 'object' && payload.type === 'lookup:data' && payload.lookupId) {
         const mv = (payload.matchValue === null || payload.matchValue === undefined) ? '' : String(payload.matchValue).trim();
         const key = mv ? `${String(payload.lookupId)}::${mv}` : String(payload.lookupId);
         __psLookupCache[key] = normalizeLookupItems(payload.items);
-        delete __psLookupPending[key];
+        clearLookupPending(payload.lookupId, payload.matchValue);
         if (app && Array.isArray(app.__psAutofillRules)) {
           app.__psAutofillRules
             .filter(r => r.sourceType === 'uibuilder' && r.lookupId === String(payload.lookupId))
             .forEach(r => applyAutofillRule(app, app.schema, r));
         }
       }
-      if (payload.type === 'lookup:error' && payload.lookupId) {
-        const mv = (payload.matchValue === null || payload.matchValue === undefined) ? '' : String(payload.matchValue).trim();
-        const key = mv ? `${String(payload.lookupId)}::${mv}` : String(payload.lookupId);
-        delete __psLookupPending[key];
+      if (payload && typeof payload === 'object' && payload.type === 'lookup:error' && payload.lookupId) {
+        clearLookupPending(payload.lookupId, payload.matchValue);
         showAlert('Lookup error: ' + (payload.error || 'unknown'), 'warning');
       }
     });

package/templates/index.v3.html.mustache

@@ -246,6 +246,22 @@
             <button type="button" class="btn btn-sm" :class="resultView === 'json' ? 'btn-primary' : 'btn-outline-primary'" @click="resultView = 'json'">JSON</button>
           </div>
 
+          <div v-if="showResultPagination" class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
+            <div class="d-flex align-items-center gap-2">
+              <span class="text-muted small">Rows per page</span>
+              <select class="form-select form-select-sm" style="width:auto;" v-model.number="resultPageSize" @change="resultPage = 1">
+                <option v-for="n in resultPageSizeOptions" :key="'ps-' + n" :value="n">{{n}}</option>
+              </select>
+              <span class="text-muted small">
+                {{ Math.min(resultPageStart + 1, resultTotalRows) }}-{{ Math.min(resultPageEnd, resultTotalRows) }} of {{ resultTotalRows }}
+              </span>
+            </div>
+            <div class="btn-group btn-group-sm" role="group" aria-label="Pagination">
+              <button type="button" class="btn btn-outline-secondary" :disabled="resultPage <= 1" @click="resultPage = Math.max(1, resultPage - 1)">Prev</button>
+              <button type="button" class="btn btn-outline-secondary" :disabled="resultPage >= resultTotalPages" @click="resultPage = Math.min(resultTotalPages, resultPage + 1)">Next</button>
+            </div>
+          </div>
+
           <div v-if="resultView === 'table'">
             <div v-if="formattedResult && formattedResult.length" class="table-responsive">
               <table class="table table-bordered table-sm">
@@ -255,7 +271,7 @@
                   </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="(row, idx) in formattedResult" :key="'r-' + idx">
+                  <tr v-for="(row, idx) in pagedFormattedResult" :key="'r-' + idx">
                     <td v-for="h in resultHeaders" :key="'c-' + idx + '-' + h">{{row[h]}}</td>
                   </tr>
                 </tbody>
@@ -264,7 +280,7 @@
             <div v-else class="text-muted">No table-friendly data found.</div>
           </div>
 
-          <pre v-else class="mt-2"><code>{{ lastResultPretty }}</code></pre>
+          <pre v-else class="mt-2"><code>{{ lastResultPrettyPaged }}</code></pre>
         </div>
       </div>
       

package/templates/index.v3.js.mustache

@@ -103,7 +103,8 @@
   // - lookupId (for "give me the full list" responses)
   // - lookupId::matchValue (for "give me list for this selected value" responses)
   const __psLookupCache = {};   // { [cacheKey]: any[] }
-  const __psLookupPending = {}; // { [cacheKey]: true }
+  const __psLookupPending = {}; // { [cacheKey]: number(timestampMs) }
+  const __psLookupPendingTimeoutMs = 8000;
 
   function isNonEmptyString(v) {
     return typeof v === 'string' && v.trim().length > 0;
@@ -208,13 +209,27 @@
     return mv ? `${id}::${mv}` : id;
   }
 
+  function clearLookupPending(lookupId, matchValue) {
+    const id = String(lookupId || '').trim();
+    if (!id) return;
+    const mv = (matchValue === null || matchValue === undefined) ? '' : String(matchValue).trim();
+    if (mv) {
+      delete __psLookupPending[`${id}::${mv}`];
+      return;
+    }
+    Object.keys(__psLookupPending).forEach(k => {
+      if (k === id || k.startsWith(id + '::')) delete __psLookupPending[k];
+    });
+  }
+
   function requestLookup(lookupId, matchValue) {
     const id = String(lookupId || '').trim();
     if (!id) return;
     const key = lookupCacheKey(id, matchValue);
     if (__psLookupCache[key]) return;
-    if (__psLookupPending[key]) return;
-    __psLookupPending[key] = true;
+    const pendingAt = __psLookupPending[key];
+    if (pendingAt && (Date.now() - pendingAt) < __psLookupPendingTimeoutMs) return;
+    __psLookupPending[key] = Date.now();
     if (uibuilderInstance && typeof uibuilderInstance.send === 'function') {
       // Expected Node-RED response: msg.payload = { type:'lookup:data', lookupId:'...', items:[...] }
       uibuilderInstance.send({ payload: { type: 'lookup:get', lookupId: id, matchValue: (matchValue === undefined ? null : matchValue) } });
@@ -240,7 +255,9 @@
       items = normalizeLookupItems(getByPath(schema, rule.sourcePath));
     } else if (rule.sourceType === 'uibuilder') {
       const key = lookupCacheKey(rule.lookupId, sourceValue);
-      if (!__psLookupCache[key]) requestLookup(rule.lookupId, sourceValue);
+      // Always request per-selection so Node-RED can return filtered data for the current value.
+      // (Cached per lookupId::matchValue so it only requests once per selected value.)
+      requestLookup(rule.lookupId, sourceValue);
       items = normalizeLookupItems(__psLookupCache[key] || __psLookupCache[String(rule.lookupId)] || []);
     }
 
@@ -289,15 +306,23 @@
   function setupUibuilderHandlers() {
     if (!uibuilderInstance || !uibuilderInstance.onChange) return;
     uibuilderInstance.onChange('msg', function(msg) {
-      const payload = msg && msg.payload;
-      if (!payload || typeof payload !== 'object') return;
+      const payload = msg && (msg.payload ?? msg);
+      if (payload === null || payload === undefined) return;
       if (!app) return;
 
+      function setResult(result, status, preferredView) {
+        app.lastResultStatus = (status === null || status === undefined) ? null : status;
+        app.lastResult = result;
+        app.showResult = true;
+        app.resultView = preferredView || 'table';
+        app.resultPage = 1;
+      }
+
       if (payload.type === 'lookup:data' && payload.lookupId) {
         const mv = (payload.matchValue === null || payload.matchValue === undefined) ? '' : String(payload.matchValue).trim();
         const key = mv ? `${String(payload.lookupId)}::${mv}` : String(payload.lookupId);
         __psLookupCache[key] = normalizeLookupItems(payload.items);
-        delete __psLookupPending[key];
+        clearLookupPending(payload.lookupId, payload.matchValue);
         // Re-apply any rules using this lookup
         if (Array.isArray(app.__psAutofillRules)) {
           app.__psAutofillRules
@@ -306,9 +331,7 @@
         }
       }
       if (payload.type === 'lookup:error' && payload.lookupId) {
-        const mv = (payload.matchValue === null || payload.matchValue === undefined) ? '' : String(payload.matchValue).trim();
-        const key = mv ? `${String(payload.lookupId)}::${mv}` : String(payload.lookupId);
-        delete __psLookupPending[key];
+        clearLookupPending(payload.lookupId, payload.matchValue);
         showAlert(app, 'Lookup error: ' + (payload.error || 'unknown'), 'warning');
       }
 
@@ -318,6 +341,29 @@
       if (payload.type === 'submit:ok' || payload.type === 'submit:error') {
         app.handleSubmitResponse(payload);
       }
+
+      // Generic result display (mirrors Vue2 template)
+      // - msg.payload = { type:'result', result:any, status?:number, view?:'table'|'json' }
+      // - msg.payload = { result:any }
+      // - msg.payload.result = any
+      // - msg.payload = any[] / primitive
+      if (Array.isArray(payload) || (typeof payload !== 'object')) {
+        setResult(payload, null, Array.isArray(payload) ? 'table' : 'json');
+        return;
+      }
+      const t = String(payload.type || '').trim();
+      const isExplicitResultType = (t === 'result' || t === 'result:data' || t === 'result:show' || t === 'display:result');
+      const hasResultField = Object.prototype.hasOwnProperty.call(payload, 'result');
+      if (isExplicitResultType || hasResultField) {
+        const view = (payload.view === 'json' || payload.view === 'table') ? payload.view : 'table';
+        setResult(payload.result, payload.status || null, view);
+        return;
+      }
+      if (payload.payload && typeof payload.payload === 'object' && Object.prototype.hasOwnProperty.call(payload.payload, 'result')) {
+        const view = (payload.payload.view === 'json' || payload.payload.view === 'table') ? payload.payload.view : 'table';
+        setResult(payload.payload.result, payload.payload.status || payload.status || null, view);
+        return;
+      }
     });
   }
 
@@ -370,6 +416,9 @@
           lastResult: null,
           lastResultStatus: null,
           resultView: 'table',
+          resultPage: 1,
+          resultPageSize: 15,
+          resultPageSizeOptions: [10, 15, 25, 50, 100, 1000],
           copyBlockActions: schema.actions ? schema.actions.filter(a => a.type === 'copyBlock') : [],
           exportFormats: CONFIG.exportFormats
         };
@@ -406,6 +455,38 @@
           }
           // Single object
           return [this.flattenRow(r)];
+        },
+        resultTotalRows() {
+          return (this.formattedResult || []).length;
+        },
+        showResultPagination() {
+          // Show pager when records exceed 10
+          return this.resultTotalRows > 10;
+        },
+        resultTotalPages() {
+          const sz = Number(this.resultPageSize) || 15;
+          return Math.max(1, Math.ceil(this.resultTotalRows / sz));
+        },
+        resultPageStart() {
+          const sz = Number(this.resultPageSize) || 15;
+          return ((Number(this.resultPage) || 1) - 1) * sz;
+        },
+        resultPageEnd() {
+          const sz = Number(this.resultPageSize) || 15;
+          return this.resultPageStart + sz;
+        },
+        pagedFormattedResult() {
+          const rows = this.formattedResult || [];
+          if (!this.showResultPagination) return rows;
+          return rows.slice(this.resultPageStart, this.resultPageEnd);
+        },
+        lastResultPrettyPaged() {
+          // For JSON view: if lastResult is a large array, show a paged slice
+          if (Array.isArray(this.lastResult) && this.lastResult.length > 10) {
+            const slice = this.lastResult.slice(this.resultPageStart, this.resultPageEnd);
+            try { return JSON.stringify(slice, null, 2); } catch (e) { return String(slice); }
+          }
+          return this.lastResultPretty;
         }
       },
       methods: {
@@ -551,6 +632,8 @@
               this.lastResultStatus = resp.status;
               this.lastResult = (json !== null) ? json : text;
               this.showResult = true;
+              this.resultView = resp.ok ? 'table' : 'json';
+              this.resultPage = 1;
               showAlert(this, resp.ok ? 'Submitted' : 'Submit error', resp.ok ? 'success' : 'danger');
               return;
             }
@@ -571,6 +654,8 @@
           this.lastResultStatus = payload.status || null;
           this.lastResult = payload.result;
           this.showResult = true;
+          this.resultView = (payload.type === 'submit:error') ? 'json' : 'table';
+          this.resultPage = 1;
           showAlert(this, payload.type === 'submit:ok' ? 'Submission OK' : 'Submission error', payload.type === 'submit:ok' ? 'success' : 'danger');
         },
         handleExport(format) {
@@ -607,8 +692,8 @@
     // Install lookup/autofill rules after mount (dynamic watchers)
     try {
       app.__psAutofillRules = compileAutofillRules(schema);
-      // Pre-request dynamic lookup sources so lookups are ready
-      (app.__psAutofillRules || []).forEach(r => { if (r.sourceType === 'uibuilder') requestLookup(r.lookupId); });
+      // NOTE: Do NOT pre-request dynamic lookups without a selected value.
+      // Dynamic lookups are requested per-selection (matchValue) inside applyAutofillRule.
       (app.__psAutofillRules || []).forEach(r => {
         app.$watch(
           () => app.formData[r.fromField],