From 23942a38935c57a64a906f11f666a77f99d8ed7a Mon Sep 17 00:00:00 2001
From: Miguel Angel <miguelangellodev@gmail.com>
Date: Thu, 23 Apr 2026 14:49:11 -0400
Subject: [PATCH 1/2] fix: ensure consistent use of labels in options.

---
 src/components/inspector/column-setup.vue    |  8 ++-
 src/components/renderer/form-record-list.vue | 74 ++++++++++----------
 2 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/components/inspector/column-setup.vue b/src/components/inspector/column-setup.vue
index 092058fb1..f7aa4f6cb 100644
--- a/src/components/inspector/column-setup.vue
+++ b/src/components/inspector/column-setup.vue
@@ -473,7 +473,7 @@ export default {
       this.editIndex = index;
       this.optionContent = this.optionsList[index][this.valueField];
       this.optionValue = this.optionsList[index][this.keyField];
-      this.optionContentCollection = this.optionsList[index][this.keyFieldCollection];
+      this.optionContentCollection = this.optionsList[index].label || this.optionsList[index][this.keyFieldCollection];
       this.optionValueCollection = this.optionsList[index][this.valueField];
       this.optionError = '';
     },
@@ -535,15 +535,17 @@ export default {
 
         this.optionsList.push(
           {
-            [this.keyFieldCollection]: this.optionContentCollection,
+            [this.keyFieldCollection]: this.optionValueCollection,
             [this.valueField]: this.optionValueCollection,
+            label: this.optionContentCollection,
           }
         );
         this.optionsList = this.optionsList.filter(option => option["content"] !== "all");
       }
       else {
-        this.optionsList[this.editIndex][this.keyFieldCollection] = this.optionContentCollection;
+        this.optionsList[this.editIndex][this.keyFieldCollection] = this.optionValueCollection;
         this.optionsList[this.editIndex][this.valueField] = this.optionValueCollection;
+        this.optionsList[this.editIndex].label = this.optionContentCollection;
       }
 
       this.jsonError = '';
diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index 22cf4cdec..9cb0d7072 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -35,7 +35,7 @@
           data-cy="table"
           :tbody-tr-class="rowClass"
         >
-        
+
           <!-- Slot header for checkbox (Select All) -->
           <template #head(checkbox)="data">
             <b-form-checkbox
@@ -47,8 +47,8 @@
           </template>
 
           <template #cell(checkbox)="{ index, item }">
-            <b-form-checkbox 
-              v-model="selectedRows" 
+            <b-form-checkbox
+              v-model="selectedRows"
               :value="item"
               @change="onMultipleSelectionChange(index)"
             />
@@ -59,12 +59,12 @@
               v-model="selectedRow"
               :value="item"
               @change="onRadioChange(item, index)"
-              
+
             />
           </template>
 
           <template #cell()="{ index, field, item }">
-            
+
             <template v-if="isFiledownload(field, item)">
               <span href="#" @click="downloadFile(item, field.key, index)">{{
                 mustache(field.key, item)
@@ -79,7 +79,7 @@
             <template v-else>
               {{ formatIfDate(mustache(field.key, item)) }}
             </template>
-  
+
           </template>
           <template #cell(__actions)="{ index, item }">
             <div class="actions">
@@ -110,8 +110,8 @@
                   :title="$t('Delete')"
                   data-cy="remove-row"
                   popover="manual"
-                  @click="styleMode === 'Modern' 
-                  ? togglePopover(index, $event, item.row_id) 
+                  @click="styleMode === 'Modern'
+                  ? togglePopover(index, $event, item.row_id)
                   : showDeleteConfirmation(index, item.row_id)"
                   ref="deleteButton"
                 >
@@ -128,7 +128,7 @@
               </div>
             </div>
           </template>
-         
+
         </b-table>
         <div class="d-flex justify-content-between align-items-center">
           <div class="col text-left">
@@ -238,7 +238,7 @@
     >
       <p>{{ $t("The form to be displayed is not assigned.") }}</p>
     </b-modal>
-    
+
     <div v-if="editable && selfReferenced" class="alert alert-danger">
       {{
         $t(
@@ -321,7 +321,7 @@ export default {
       collectionData: {},
       selectedRow: null,
       selectedRows: [],
-      selectedIndex: null, 
+      selectedIndex: null,
       rows: [],
       selectAll: false,
       styleMode: "Classic",
@@ -419,11 +419,11 @@ export default {
           this.value.forEach(item => {
               if (item.hasOwnProperty('selectedRowsIndex')) {
                   this.selectedRows.push(data.data[item.selectedRowsIndex]);
-              } 
+              }
           });
         }
       }
-      return data;      
+      return data;
     },
     // The fields used for our vue table
     tableFields() {
@@ -434,7 +434,7 @@ export default {
       }
 
       // Adds radio buttons or checkbox to the table depending selected option
-      if(this.source?.sourceOptions === "Collection") { 
+      if(this.source?.sourceOptions === "Collection") {
         if (['single-field', 'single-record'].includes(this.source?.dataSelectionOptions)) {
           fields.unshift({
             key: 'radio',
@@ -442,7 +442,7 @@ export default {
             sortable: false,
           });
         }
-  
+
         if (this.source?.dataSelectionOptions === 'multiple-records') {
           fields.unshift({
             key: 'checkbox',
@@ -451,7 +451,7 @@ export default {
           });
         }
       }
-      
+
       return fields;
     },
     // Determines if the form used for add/edit is self referencing. If so, we should not show it
@@ -474,7 +474,7 @@ export default {
       handler(newValue, oldValue) {
         if (this.source?.sourceOptions === "Collection" && this.source?.collectionFields?.pmql) {
           this.onCollectionChange(
-            this.source?.collectionFields?.collectionId, 
+            this.source?.collectionFields?.collectionId,
             this.source?.collectionFields?.pmql
           );
         }
@@ -499,7 +499,7 @@ export default {
     if(this.source?.sourceOptions === "Collection") {
       this.onCollectionChange(this.source?.collectionFields?.collectionId, this.source?.collectionFields?.pmql);
     }
-    
+
     this.setStyleMode(this.designerMode?.designerOptions);
     this.$root.$emit("record-list-option", this.source?.sourceOptions);
   },
@@ -588,15 +588,15 @@ export default {
         this.fetchAllRecords(collectionId);
         return;
       }
-      
+
       // Process Mustache variables in PMQL
       const processedPmql = this.processMustacheInPmql(pmql);
-      
+
       // If processing failed or resulted in invalid PMQL, return
       if (!processedPmql) {
         return;
       }
-      
+
       // Fetch records with processed PMQL
       this.fetchRecordsWithPmql(collectionId, processedPmql);
     },
@@ -614,7 +614,7 @@ export default {
       try {
         // Get data from validationData
         const data = this.validationData || {};
-        
+
         // First, process all Mustache variables (both quoted and unquoted)
         let processedPmql = Mustache.render(pmql, data);
 
@@ -623,14 +623,14 @@ export default {
           this.collectionData = [];
           return null;
         }
-        
+
         // Add quotes around string values in PMQL if they don't have them
         // This regex now properly handles values with spaces by looking for the end of the comparison
         processedPmql = processedPmql.replace(
           /= ([^"'\s][^"']*[^"'\s]|[^"'\s]+)(?=\s|$)/g,
           '= "$1"'
         );
-        
+
         return processedPmql;
       } catch (error) {
         this.collectionData = [];
@@ -654,8 +654,8 @@ export default {
      * @returns {boolean} - True if valid
      */
     isValidPmql(processedPmql) {
-      return processedPmql && 
-             processedPmql.trim() !== "" && 
+      return processedPmql &&
+             processedPmql.trim() !== "" &&
              !processedPmql.includes("{{");
     },
 
@@ -686,9 +686,9 @@ export default {
         this.collectionData = [];
         return;
       }
-      
+
       const param = { params: { pmql: processedPmql } };
-      
+
       this.$dataProvider
         .getCollectionRecordsList(collectionId, param)
         .then((response) => {
@@ -702,7 +702,7 @@ export default {
       this.$emit("change", this.field);
     },
     changeCollectionColumns(collectionFieldsColumns,columnsSelected) {
-      
+
       const optionsList = columnsSelected.optionsList;
 
       collectionFieldsColumns.forEach(column => {
@@ -721,7 +721,7 @@ export default {
       });
 
        this.setCollectionIntoList(collectionFieldsColumns);
-        
+
     },
     setCollectionIntoList(arrayCollection) {
       const result = [];
@@ -864,14 +864,14 @@ export default {
     },
     getTableFieldsFromDataSource() {
       const { jsonData, key, value, dataName } = this.fields;
-      
+
       let convertToVuetableFormat = {};
       if(this.source?.sourceOptions === "Collection") {
           convertToVuetableFormat = (option) => {
           return {
             key: option[key || "key"],
             sortable: true,
-            label: option[key || "key"],
+            label: option.label || option[key || "key"],
             tdClass: "table-column"
           };
         };
@@ -880,7 +880,7 @@ export default {
           return {
             key: option[key || "value"],
             sortable: true,
-            label: option[value || "content"],
+            label: option.label || option[value || "content"],
             tdClass: "table-column"
           };
         };
@@ -1088,15 +1088,15 @@ export default {
   background-color: #eaf2ff;
 }
 .class-button-modern {
-  font-size: 14px; 
-  font-weight: bold; 
+  font-size: 14px;
+  font-weight: bold;
   text-decoration: none;
 }
 
 .record-list-table-base {
   border-collapse: separate;
   border-spacing: 0;
- 
+
   thead th {
     border-top: 1px solid;
     border-bottom: 1px solid;
@@ -1114,7 +1114,7 @@ export default {
     td {
       border-bottom: 1px solid;
     }
-    
+
     td:first-child {
       border-left: 1px solid;
     }

From ec3d1452de9ea892c7328e819541b83bcb39ead2 Mon Sep 17 00:00:00 2001
From: Miguel Angel <miguelangellodev@gmail.com>
Date: Thu, 23 Apr 2026 14:55:35 -0400
Subject: [PATCH 2/2] fix: initialize singleFieldOptions in
 collection-data-source component

---
 src/components/inspector/collection-data-source.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/inspector/collection-data-source.vue b/src/components/inspector/collection-data-source.vue
index 6fc056752..92fe0154e 100644
--- a/src/components/inspector/collection-data-source.vue
+++ b/src/components/inspector/collection-data-source.vue
@@ -188,6 +188,7 @@ export default {
       const [firstRecord] = records?.dataRecordList || [];
 
       if (firstRecord?.data) {
+        this.singleFieldOptions = [];
         const dataObject = firstRecord.data;
 
         for (const [key] of Object.entries(dataObject)) {