From bf8dd9b92d6710a9b9099f2857c5f57960e5fedc Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Wed, 12 Aug 2026 16:11:49 -0600
Subject: [PATCH 1/2] FOUR-32638: Fix Collection record list fields and values

---
 src/collectionFieldUtils.js                   |  89 +++++++++
 .../inspector/collection-data-source.vue      |  23 +--
 src/components/inspector/column-setup.vue     |  26 +--
 src/components/renderer/form-record-list.vue  |  40 ++--
 .../specs/CollectionRecordListColumns.spec.js | 182 ++++++++++++++++++
 tests/unit/CollectionFieldUtils.spec.js       | 115 +++++++++++
 6 files changed, 409 insertions(+), 66 deletions(-)
 create mode 100644 src/collectionFieldUtils.js
 create mode 100644 tests/e2e/specs/CollectionRecordListColumns.spec.js
 create mode 100644 tests/unit/CollectionFieldUtils.spec.js

diff --git a/src/collectionFieldUtils.js b/src/collectionFieldUtils.js
new file mode 100644
index 00000000..2131adcd
--- /dev/null
+++ b/src/collectionFieldUtils.js
@@ -0,0 +1,89 @@
+const COLLECTION_DATA_PREFIX = "data.";
+
+export function normalizeCollectionFieldPath(fieldPath) {
+  if (typeof fieldPath !== "string") {
+    return fieldPath;
+  }
+
+  return fieldPath.startsWith(COLLECTION_DATA_PREFIX)
+    ? fieldPath.slice(COLLECTION_DATA_PREFIX.length)
+    : fieldPath;
+}
+
+export function getCollectionFieldOptions(collection = {}) {
+  const options = [];
+  const values = new Set();
+
+  const addOption = ({ text, value }) => {
+    const normalizedValue = normalizeCollectionFieldPath(value);
+
+    if (!normalizedValue || values.has(normalizedValue)) {
+      return;
+    }
+
+    values.add(normalizedValue);
+    options.push({
+      text: text || normalizedValue,
+      value: normalizedValue
+    });
+  };
+
+  if (Array.isArray(collection?.fields) && collection.fields.length > 0) {
+    collection.fields.forEach((field) => {
+      if (!field) {
+        return;
+      }
+
+      addOption({
+        text: field.text || field.value,
+        value: field.value
+      });
+    });
+  } else {
+    const [firstRecord] = collection?.dataRecordList || [];
+
+    if (firstRecord?.data) {
+      Object.keys(firstRecord.data).forEach((field) => {
+        addOption({ text: field, value: field });
+      });
+    }
+  }
+
+  addOption({ text: "id", value: "id" });
+
+  return options;
+}
+
+export function mapCollectionRecordData(data = {}, options = []) {
+  if (!data || typeof data !== "object" || Array.isArray(data)) {
+    return {};
+  }
+
+  if (!Array.isArray(options) || options.length === 0) {
+    return { ...data };
+  }
+
+  const mappedData = {};
+
+  options.forEach((option) => {
+    if (!option) {
+      return;
+    }
+
+    const targetKey = normalizeCollectionFieldPath(
+      option.key || option.content
+    );
+    const sourceKey = [option.content, option.key]
+      .map(normalizeCollectionFieldPath)
+      .find(
+        (candidate) =>
+          candidate && Object.prototype.hasOwnProperty.call(data, candidate)
+      );
+
+    if (sourceKey && targetKey) {
+      mappedData[targetKey] = data[sourceKey];
+    }
+  });
+
+  return mappedData;
+}
diff --git a/src/components/inspector/collection-data-source.vue b/src/components/inspector/collection-data-source.vue
index cf217abb..0ebf1a80 100644
--- a/src/components/inspector/collection-data-source.vue
+++ b/src/components/inspector/collection-data-source.vue
@@ -60,6 +60,7 @@
 <script>
 import { cloneDeep } from "lodash";
 import CollectionRecordsList from "./collection-records-list.vue";
+import { getCollectionFieldOptions } from "../../collectionFieldUtils";
 
 const CONFIG_FIELDS = [
   "collectionFields",
@@ -185,27 +186,7 @@ export default {
       }
     },
     getCollectionColumns(records) {
-      this.singleFieldOptions = [];
-
-      // Prefer the collection schema when CollectionRecordsList has
-      // forwarded it on the v-model payload.
-      if (Array.isArray(records?.fields) && records.fields.length > 0) {
-        records.fields.forEach((field) => {
-          this.singleFieldOptions.push({
-            text: field.text || field.value,
-            value: field.value
-          });
-        });
-        return;
-      }
-
-      // Fallback: get columns from the first record's populated keys.
-      const [firstRecord] = records?.dataRecordList || [];
-      if (firstRecord?.data) {
-        for (const [key] of Object.entries(firstRecord.data)) {
-          this.singleFieldOptions.push({ text: key, value: key });
-        }
-      }
+      this.singleFieldOptions = getCollectionFieldOptions(records);
     }
   }
 };
diff --git a/src/components/inspector/column-setup.vue b/src/components/inspector/column-setup.vue
index 89daf59c..84d5f8df 100644
--- a/src/components/inspector/column-setup.vue
+++ b/src/components/inspector/column-setup.vue
@@ -216,6 +216,7 @@ import draggable from 'vuedraggable';
 import { dataSources, dataSourceValues } from './data-source-types';
 import MonacoEditor from 'vue-monaco';
 import { cloneDeep } from "lodash";
+import { getCollectionFieldOptions } from "../../collectionFieldUtils";
 
 export default {
   components: {
@@ -394,27 +395,10 @@ export default {
       }
     },
     getCollectionColumns(collection) {
-      this.collectionOptions = [{ text: "All columns", value: "all" }];
-
-      // Prefer the collection schema when CollectionRecordsList
-      // has forwarded it on the v-model payload.
-      if (Array.isArray(collection?.fields) && collection.fields.length > 0) {
-        collection.fields.forEach((field) => {
-          this.collectionOptions.push({
-            text: field.text || field.value,
-            value: field.value
-          });
-        });
-        return;
-      }
-
-      // Fallback: get columns from the first record's populated keys.
-      const [firstRecord] = collection?.dataRecordList || [];
-      if (firstRecord?.data) {
-        for (const [key] of Object.entries(firstRecord.data)) {
-          this.collectionOptions.push({ text: key, value: key });
-        }
-      }
+      this.collectionOptions = [
+        { text: "All columns", value: "all" },
+        ...getCollectionFieldOptions(collection)
+      ];
     },
     initData() {
       this.dataSource = this.options.dataSource;
diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index e76faaa3..9b8e97b5 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -259,6 +259,10 @@ import VueFormRenderer from "@/components/vue-form-renderer.vue";
 import mustacheEvaluation from "../../mixins/mustacheEvaluation";
 import MustacheHelper from "../inspector/mustache-helper.vue";
 import Mustache from "mustache";
+import {
+  mapCollectionRecordData,
+  normalizeCollectionFieldPath
+} from "../../collectionFieldUtils";
 
 const jsonOptionsActionsColumn = {
   key: "__actions",
@@ -728,27 +732,14 @@ export default {
 
       this.$emit("change", this.field);
     },
-    changeCollectionColumns(collectionFieldsColumns,columnsSelected) {
-
+    changeCollectionColumns(collectionFieldsColumns, columnsSelected) {
       const optionsList = columnsSelected.optionsList;
+      const mappedColumns = collectionFieldsColumns.map((column) => ({
+        ...column,
+        data: mapCollectionRecordData(column.data, optionsList)
+      }));
 
-      collectionFieldsColumns.forEach(column => {
-        let dataObject = column.data;
-        let newDataObject = {};
-
-        Object.keys(dataObject).forEach(dataKey => {
-          const matchingOption = optionsList.find(option => option.content === dataKey);
-
-          if (matchingOption) {
-            newDataObject[matchingOption.key] = dataObject[dataKey];
-          }
-        });
-
-        column.data = newDataObject;
-      });
-
-       this.setCollectionIntoList(collectionFieldsColumns);
-
+      this.setCollectionIntoList(mappedColumns);
     },
     setCollectionIntoList(arrayCollection) {
       const result = [];
@@ -915,17 +906,18 @@ export default {
       const { jsonData, key, value, dataName } = this.fields;
 
       let convertToVuetableFormat = {};
-      if(this.source?.sourceOptions === "Collection") {
-          convertToVuetableFormat = (option) => {
+      if (this.source?.sourceOptions === "Collection") {
+        convertToVuetableFormat = (option) => {
+          const keyValue = normalizeCollectionFieldPath(option[key || "key"]);
           return {
-            key: option[key || "key"],
+            key: keyValue,
             sortable: true,
-            label: option.label || option[key || "key"],
+            label: option.label || keyValue,
             tdClass: "table-column"
           };
         };
       } else {
-          convertToVuetableFormat = (option) => {
+        convertToVuetableFormat = (option) => {
           return {
             key: option[key || "value"],
             sortable: true,
diff --git a/tests/e2e/specs/CollectionRecordListColumns.spec.js b/tests/e2e/specs/CollectionRecordListColumns.spec.js
new file mode 100644
index 00000000..9981e490
--- /dev/null
+++ b/tests/e2e/specs/CollectionRecordListColumns.spec.js
@@ -0,0 +1,182 @@
+const collectionId = 88;
+const fieldNames = [
+  "case_number",
+  "claimant_name",
+  "status",
+  "department",
+  "submitted_at",
+  "assigned_to",
+  "priority",
+  "amount",
+  "currency",
+  "country",
+  "region",
+  "category",
+  "description"
+];
+
+const recordData = {
+  id: 501,
+  ...Object.fromEntries(
+    fieldNames.map((field, index) => [field, `${field}-${index + 1}`])
+  )
+};
+
+function findRecordList(config) {
+  const pending = [...config];
+
+  while (pending.length) {
+    const item = pending.shift();
+
+    if (item?.component === "FormRecordList") {
+      return item;
+    }
+
+    if (Array.isArray(item?.items)) {
+      pending.push(...item.items.flat(Infinity));
+    }
+  }
+
+  return null;
+}
+
+function configureCollectionRecordList() {
+  cy.openAcordeon("collapse-3");
+  cy.openAcordeon("collapse-2");
+  cy.get("[data-cy=controls-FormRecordList]").drag(
+    "[data-cy=screen-drop-zone]",
+    { position: "bottom" }
+  );
+  cy.get("[data-cy=screen-element-container]").click();
+  cy.get("[data-cy=accordion-Configuration]").click();
+  cy.get("[data-cy=inspector-collection-data-source]").select("Collection");
+  cy.get("[data-cy=inspector-collection]").select("Synthetic Claims");
+  cy.wait(["@collectionFields", "@collectionRecords"]);
+}
+
+describe("Collection record list columns", () => {
+  beforeEach(() => {
+    cy.intercept("GET", "/api/1.0/collections*", {
+      data: [
+        {
+          id: collectionId,
+          name: "Synthetic Claims",
+          read_screen_id: null,
+          create_screen_id: null
+        }
+      ]
+    });
+    cy.intercept("GET", `/api/1.0/collections/${collectionId}/columns*`, {
+      data: fieldNames.map((field) => ({
+        label: field,
+        field: `data.${field}`
+      }))
+    }).as("collectionFields");
+    cy.intercept("GET", `/api/1.0/collections/${collectionId}/records*`, {
+      data: [{ id: recordData.id, data: recordData }],
+      meta: { total: 1 }
+    }).as("collectionRecords");
+    cy.visit("/");
+  });
+
+  it("offers schema fields and id, then generates flat All columns", () => {
+    configureCollectionRecordList();
+
+    cy.get('button:contains("Columns")').click();
+    cy.get(".col-2 > .fas").click();
+    cy.get("[data-cy=inspector-collection-columns]")
+      .find('option[value="case_number"]')
+      .should("have.text", "case_number");
+    cy.get("[data-cy=inspector-collection-columns]")
+      .find('option[value="id"]')
+      .should("have.text", "id");
+    cy.get("[data-cy=inspector-collection-columns]")
+      .find('option[value^="data."]')
+      .should("not.exist");
+
+    cy.get("[data-cy=inspector-collection-columns]").select("case_number");
+    cy.get("[data-cy=inspector-collection-columns]")
+      .closest(".card")
+      .find(".card-footer .btn-secondary")
+      .click();
+    cy.get("#screen-builder-container").then((container) => {
+      const [{ __vue__: root }] = container;
+      const { builder } = root.$refs;
+      const recordList = findRecordList(builder.config);
+
+      expect(recordList.config.fields.optionsList).to.deep.equal([
+        { content: "case_number", key: "case_number", label: "" }
+      ]);
+    });
+
+    cy.get(".col-2 > .fas").click();
+    cy.get("[data-cy=inspector-collection-columns]").select("all");
+    cy.get("[data-cy=inspector-collection-columns]")
+      .closest(".card")
+      .find(".card-footer .btn-secondary")
+      .click();
+
+    cy.get("#screen-builder-container").then((container) => {
+      const [{ __vue__: root }] = container;
+      const { builder } = root.$refs;
+      const recordList = findRecordList(builder.config);
+      const options = recordList.config.fields.optionsList;
+
+      expect(options).to.have.length(fieldNames.length + 1);
+      expect(options).to.deep.include({
+        content: "case_number",
+        key: "case_number"
+      });
+      expect(options).to.deep.include({ content: "id", key: "id" });
+      options.forEach((option) => {
+        expect(option.content).not.to.match(/^data\./);
+        expect(option.key).not.to.match(/^data\./);
+      });
+    });
+
+    cy.get("[data-cy=mode-preview]").click();
+    cy.wait("@collectionRecords");
+    cy.get('[data-cy="table"] thead').should("contain.text", "case_number");
+    cy.get('[data-cy="table"] thead').should("contain.text", "id");
+    cy.get('[data-cy="table"] tbody').should(
+      "contain.text",
+      recordData.case_number
+    );
+    cy.get('[data-cy="table"] tbody').should("contain.text", recordData.id);
+  });
+
+  it("renders legacy data-prefixed column configuration without rewriting it", () => {
+    configureCollectionRecordList();
+
+    const legacyOptions = [
+      { content: "data.case_number", key: "data.case_number" },
+      { content: "data.id", key: "data.id" }
+    ];
+
+    cy.get("#screen-builder-container").then((container) => {
+      const [{ __vue__: root }] = container;
+      const { builder } = root.$refs;
+      const recordList = findRecordList(builder.config);
+
+      recordList.config.fields.optionsList = legacyOptions;
+      recordList.config.fields.jsonData = JSON.stringify(legacyOptions);
+    });
+
+    cy.get("[data-cy=mode-preview]").click();
+    cy.wait("@collectionRecords");
+    cy.get('[data-cy="table"] thead').should("contain.text", "case_number");
+    cy.get('[data-cy="table"] tbody').should(
+      "contain.text",
+      recordData.case_number
+    );
+    cy.get('[data-cy="table"] tbody').should("contain.text", recordData.id);
+
+    cy.get("#screen-builder-container").then((container) => {
+      const [{ __vue__: root }] = container;
+      const { builder } = root.$refs;
+      const recordList = findRecordList(builder.config);
+
+      expect(recordList.config.fields.optionsList).to.deep.equal(legacyOptions);
+    });
+  });
+});
diff --git a/tests/unit/CollectionFieldUtils.spec.js b/tests/unit/CollectionFieldUtils.spec.js
new file mode 100644
index 00000000..190b8777
--- /dev/null
+++ b/tests/unit/CollectionFieldUtils.spec.js
@@ -0,0 +1,115 @@
+import {
+  getCollectionFieldOptions,
+  mapCollectionRecordData,
+  normalizeCollectionFieldPath
+} from "../../src/collectionFieldUtils";
+
+describe("collection field utilities", () => {
+  describe("normalizeCollectionFieldPath", () => {
+    it("removes only the leading data prefix", () => {
+      expect(normalizeCollectionFieldPath("data.case_number")).toBe(
+        "case_number"
+      );
+      expect(normalizeCollectionFieldPath("data.data.case_number")).toBe(
+        "data.case_number"
+      );
+      expect(normalizeCollectionFieldPath("metadata.data.case_number")).toBe(
+        "metadata.data.case_number"
+      );
+    });
+
+    it("preserves non-string values", () => {
+      expect(normalizeCollectionFieldPath(null)).toBeNull();
+      expect(normalizeCollectionFieldPath(undefined)).toBeUndefined();
+      expect(normalizeCollectionFieldPath(42)).toBe(42);
+    });
+  });
+
+  describe("getCollectionFieldOptions", () => {
+    it("uses normalized schema fields, removes duplicates, and adds id", () => {
+      const result = getCollectionFieldOptions({
+        fields: [
+          { text: "Case Number", value: "data.case_number" },
+          { text: "Duplicate Case Number", value: "case_number" },
+          { text: "Status", value: "data.status" },
+          null
+        ],
+        dataRecordList: [
+          { data: { populated_record_only: "must not be included" } }
+        ]
+      });
+
+      expect(result).toEqual([
+        { text: "Case Number", value: "case_number" },
+        { text: "Status", value: "status" },
+        { text: "id", value: "id" }
+      ]);
+    });
+
+    it("does not duplicate id when it is present in the schema", () => {
+      expect(
+        getCollectionFieldOptions({
+          fields: [{ text: "Collection Record ID", value: "data.id" }]
+        })
+      ).toEqual([{ text: "Collection Record ID", value: "id" }]);
+    });
+
+    it("falls back to the first record when the schema is unavailable", () => {
+      expect(
+        getCollectionFieldOptions({
+          fields: [],
+          dataRecordList: [
+            { data: { case_number: "C-100", status: "open" } },
+            { data: { second_record_only: "must not be included" } }
+          ]
+        })
+      ).toEqual([
+        { text: "case_number", value: "case_number" },
+        { text: "status", value: "status" },
+        { text: "id", value: "id" }
+      ]);
+    });
+
+    it("offers id for an empty collection", () => {
+      expect(getCollectionFieldOptions()).toEqual([
+        { text: "id", value: "id" }
+      ]);
+    });
+  });
+
+  describe("mapCollectionRecordData", () => {
+    it("maps legacy prefixed options to flat keys without changing the input", () => {
+      const data = { id: 501, case_number: "C-100", status: "open" };
+
+      expect(
+        mapCollectionRecordData(data, [
+          { content: "data.case_number", key: "data.case_number" },
+          { content: "data.id", key: "data.id" }
+        ])
+      ).toEqual({ case_number: "C-100", id: 501 });
+      expect(data).toEqual({ id: 501, case_number: "C-100", status: "open" });
+    });
+
+    it("uses the key as a source fallback and keeps aliases", () => {
+      expect(
+        mapCollectionRecordData({ case_number: "C-100" }, [
+          { key: "data.case_number" }
+        ])
+      ).toEqual({ case_number: "C-100" });
+
+      expect(
+        mapCollectionRecordData({ case_number: "C-100" }, [
+          { content: "data.case_number", key: "claim" }
+        ])
+      ).toEqual({ claim: "C-100" });
+    });
+
+    it("preserves record data while columns are not ready", () => {
+      const data = { id: 501, case_number: "C-100" };
+      const result = mapCollectionRecordData(data, []);
+
+      expect(result).toEqual(data);
+      expect(result).not.toBe(data);
+    });
+  });
+});

From d89c8b2f5a35be6bf01ec0433f27ea20125022f4 Mon Sep 17 00:00:00 2001
From: Eleazar Resendez <eleazar.resendez@processmaker.com>
Date: Wed, 12 Aug 2026 16:36:40 -0600
Subject: [PATCH 2/2] FOUR-32638: Support legacy Collection single-field
 selections

---
 src/components/renderer/form-record-list.vue  | 10 +++-
 .../specs/CollectionRecordListColumns.spec.js | 59 ++++++++++++++++++-
 2 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index 9b8e97b5..4fae897b 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -585,7 +585,10 @@ export default {
     onRadioChange(selectedItem, index) {
       const globalIndex = (this.currentPage - 1) * this.perPage + index;
       if(this.source?.singleField) {
-        let valueOfColumn = selectedItem[this.source.singleField];
+        const singleField = normalizeCollectionFieldPath(
+          this.source.singleField
+        );
+        const valueOfColumn = selectedItem[singleField];
         this.componentOutput(valueOfColumn);
       } else {
         selectedItem = { ...selectedItem, selectedRowIndex: globalIndex};
@@ -816,7 +819,10 @@ export default {
 
       if (this.source?.singleField) {
         // singleField mode emits a scalar; find the row whose field matches
-        const match = rows.find(row => row[this.source.singleField] === this.value);
+        const singleField = normalizeCollectionFieldPath(
+          this.source.singleField
+        );
+        const match = rows.find(row => row[singleField] === this.value);
         if (match) {
           this.selectedRow = match;
         }
diff --git a/tests/e2e/specs/CollectionRecordListColumns.spec.js b/tests/e2e/specs/CollectionRecordListColumns.spec.js
index 9981e490..eb949cbb 100644
--- a/tests/e2e/specs/CollectionRecordListColumns.spec.js
+++ b/tests/e2e/specs/CollectionRecordListColumns.spec.js
@@ -21,6 +21,12 @@ const recordData = {
     fieldNames.map((field, index) => [field, `${field}-${index + 1}`])
   )
 };
+const secondRecordData = {
+  id: 502,
+  ...Object.fromEntries(
+    fieldNames.map((field, index) => [field, `${field}-${index + 101}`])
+  )
+};
 
 function findRecordList(config) {
   const pending = [...config];
@@ -73,8 +79,11 @@ describe("Collection record list columns", () => {
       }))
     }).as("collectionFields");
     cy.intercept("GET", `/api/1.0/collections/${collectionId}/records*`, {
-      data: [{ id: recordData.id, data: recordData }],
-      meta: { total: 1 }
+      data: [
+        { id: recordData.id, data: recordData },
+        { id: secondRecordData.id, data: secondRecordData }
+      ],
+      meta: { total: 2 }
     }).as("collectionRecords");
     cy.visit("/");
   });
@@ -179,4 +188,50 @@ describe("Collection record list columns", () => {
       expect(recordList.config.fields.optionsList).to.deep.equal(legacyOptions);
     });
   });
+
+  it("restores and emits legacy data-prefixed single-field selections", () => {
+    configureCollectionRecordList();
+
+    const legacySingleField = "data.case_number";
+    const legacyOptions = [
+      { content: legacySingleField, key: legacySingleField }
+    ];
+
+    cy.get("#screen-builder-container").then((container) => {
+      const [{ __vue__: root }] = container;
+      const { builder } = root.$refs;
+      const recordList = findRecordList(builder.config);
+
+      recordList.config.name = "claim_selection";
+      recordList.config.source.dataSelectionOptions = "single-field";
+      recordList.config.source.singleField = legacySingleField;
+      recordList.config.fields.optionsList = legacyOptions;
+      recordList.config.fields.jsonData = JSON.stringify(legacyOptions);
+      root.previewInput = JSON.stringify({
+        claim_selection: recordData.case_number
+      });
+    });
+
+    cy.get("[data-cy=mode-preview]").click();
+    cy.wait("@collectionRecords");
+    cy.get('[data-cy="table"] tbody input[type="radio"]')
+      .should("have.length", 2)
+      .eq(0)
+      .should("be.checked");
+
+    cy.get('[data-cy="table"] tbody input[type="radio"]')
+      .eq(1)
+      .check({ force: true });
+
+    cy.get("#screen-builder-container").then((container) => {
+      const [{ __vue__: root }] = container;
+      const { builder } = root.$refs;
+      const recordList = findRecordList(builder.config);
+
+      expect(root.previewData.claim_selection).to.equal(
+        secondRecordData.case_number
+      );
+      expect(recordList.config.source.singleField).to.equal(legacySingleField);
+    });
+  });
 });