From 946991bb9d7fff492db12d302d605b559a828e2c Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Thu, 23 Jul 2026 21:53:55 -0400
Subject: [PATCH 1/2] Controls like loop, signature, record list now are not
 editable in COMPLETED Tasks

---
 src/components/renderer/add-loop-row.vue      |  28 ++++-
 .../form-collection-record-control.vue        |  42 +++++++-
 src/components/renderer/form-loop.vue         |  28 ++++-
 .../renderer/form-nested-screen.vue           |  16 ++-
 src/components/renderer/form-record-list.vue  | 100 +++++++++++++++---
 src/components/task.vue                       |  24 ++++-
 src/components/vue-form-renderer.vue          |  33 +++++-
 src/mixins/Json2Vue.js                        |  12 ++-
 src/mixins/extensions/LoadFieldComponents.js  |   9 ++
 9 files changed, 269 insertions(+), 23 deletions(-)

diff --git a/src/components/renderer/add-loop-row.vue b/src/components/renderer/add-loop-row.vue
index cf4c2ca60..7d3c72c76 100644
--- a/src/components/renderer/add-loop-row.vue
+++ b/src/components/renderer/add-loop-row.vue
@@ -7,7 +7,7 @@
     </b-row>
 
     <b-row
-      v-if="value && config.settings.add"
+      v-if="canAddOrRemove"
       class="justify-content-md-center"
     >
       <b-col md="auto">
@@ -44,15 +44,41 @@ export default {
     config: Object,
     error: String
   },
+  computed: {
+    isDisabled() {
+      return Boolean(
+        this.config
+        && (this.config.disabled || this.config.readonly || this.config.editable === false)
+      );
+    },
+    canAddOrRemove() {
+      return Boolean(
+        this.value
+        && this.config
+        && this.config.settings
+        && this.config.settings.add
+        && !this.isDisabled
+      );
+    }
+  },
   methods: {
     async add() {
+      if (this.isDisabled) {
+        return;
+      }
       this.value.push({});
     },
     remove() {
+      if (this.isDisabled) {
+        return;
+      }
       const removed = this.value.pop();
       this.$root.$emit("removed-loop", this, removed);
     },
     removeConfirm() {
+      if (this.isDisabled) {
+        return;
+      }
       const message = this.$t("Are you sure you want to delete this?");
       window.ProcessMaker.confirmModal(this.$t("Caution!"), message, "", () => {
         this.remove();
diff --git a/src/components/renderer/form-collection-record-control.vue b/src/components/renderer/form-collection-record-control.vue
index 50db5fcb7..f64ea994f 100644
--- a/src/components/renderer/form-collection-record-control.vue
+++ b/src/components/renderer/form-collection-record-control.vue
@@ -10,6 +10,7 @@
     :custom-css="customCss"
     :watchers="watchers"
     :_parent="_parent"
+    :read-only="isDisabled"
   />
 </template>
 
@@ -43,7 +44,15 @@ export default {
     collectionmode: {
       type: Object
     },
-    taskdraft: Object
+    taskdraft: Object,
+    disabled: {
+      type: [Boolean, String],
+      default: false
+    },
+    readonly: {
+      type: [Boolean, String],
+      default: false
+    }
   },
   data() {
     return {
@@ -68,6 +77,16 @@ export default {
     };
   },
   computed: {
+    isDisabled() {
+      return Boolean(
+        this.disabled === true
+        || this.disabled === "true"
+        || this.disabled === ""
+        || this.readonly === true
+        || this.readonly === "true"
+        || this.readonly === ""
+      );
+    },
     validatedConfig() {
       return this.config && this.config[0] ? this.config : defaultConfig;
     },
@@ -79,6 +98,9 @@ export default {
         return this.localData;
       },
       set(data) {
+        if (this.isDisabled) {
+          return;
+        }
         Object.keys(data).forEach((variable) => {
           this.validationData &&
             this.$set(this.validationData, variable, data[variable]);
@@ -138,6 +160,15 @@ export default {
         this.selRecordId,
         this.selDisplayMode
       );
+    },
+    isDisabled() {
+      if (this.selCollectionId && this.selRecordId) {
+        this.loadRecordCollection(
+          this.selCollectionId,
+          this.selRecordId,
+          this.selDisplayMode
+        );
+      }
     }
   },
   mounted() {
@@ -224,7 +255,7 @@ export default {
           this.watchers = response.data.watchers;
           this.screenTitle = response.data.title;
 
-          if (this.$attrs.disabled) {
+          if (this.isDisabled) {
             this.disableForm(this.config);
           }
         });
@@ -242,6 +273,8 @@ export default {
       this.selCollectionId = collectionId;
       this.selRecordId = recordId;
       this.selDisplayMode = modeId;
+      // Completed/closed task previews must not load the editable collection screen.
+      const effectiveMode = this.isDisabled ? "View" : modeId;
       this.$dataProvider
         .getCollectionRecordsView(collectionId, recordId)
         .then((response) => {
@@ -252,10 +285,10 @@ export default {
           // Choose screen id regarding of the display Mode
           this.screenCollectionId =
             typeof this.selDisplayMode === "function"
-              ? this.collectionmode.modeId === "View"
+              ? this.collectionmode.modeId === "View" || this.isDisabled
                 ? viewScreen
                 : editScreen
-              : this.selDisplayMode === "View"
+              : effectiveMode === "View"
               ? viewScreen
               : editScreen;
           this.loadScreen(this.screenCollectionId);
@@ -265,6 +298,7 @@ export default {
             this.taskDraft?.draft?.data == null ||
             this.taskDraft.draft.data === "" ||
             !this.enableDraft
+            || this.isDisabled
           ) {
             this.localData = respData;
           } else {
diff --git a/src/components/renderer/form-loop.vue b/src/components/renderer/form-loop.vue
index 8cbb7bb8f..ce410a876 100644
--- a/src/components/renderer/form-loop.vue
+++ b/src/components/renderer/form-loop.vue
@@ -17,7 +17,7 @@
         @update="setMatrixValue(loopIndex, $event)"
       />
     </form>
-    <b-row v-if="config.settings.add" class="justify-content-md-center">
+    <b-row v-if="canAddOrRemove" class="justify-content-md-center">
       <b-col md="auto">
         <b-button
           size="sm"
@@ -54,7 +54,7 @@ export default {
     VueFormRenderer
   },
   mixins: [],
-  props: ["value", "config", "transientData", "name", "mode", "formConfig"],
+  props: ["value", "config", "transientData", "name", "mode", "formConfig", "disabled", "readonly"],
   data() {
     return {
       matrix: [],
@@ -65,6 +65,21 @@ export default {
     };
   },
   computed: {
+    isDisabled() {
+      return Boolean(
+        this.disabled
+        || this.readonly
+        || (this.config && (this.config.disabled || this.config.readonly || this.config.editable === false))
+      );
+    },
+    canAddOrRemove() {
+      return Boolean(
+        this.config
+        && this.config.settings
+        && this.config.settings.add
+        && !this.isDisabled
+      );
+    },
     parentLoopContext() {
       let parent = this.$parent;
       let i = 0;
@@ -191,6 +206,9 @@ export default {
       return context;
     },
     add() {
+      if (this.isDisabled) {
+        return;
+      }
       if (this.config.settings.type === "existing") {
         this.setMatrixValue(this.matrix.length, {});
       } else {
@@ -198,6 +216,9 @@ export default {
       }
     },
     remove() {
+      if (this.isDisabled) {
+        return;
+      }
       if (this.config.settings.type === "existing") {
         this.$delete(this.matrix, this.matrix.length - 1);
       } else {
@@ -205,6 +226,9 @@ export default {
       }
     },
     removeConfirm() {
+      if (this.isDisabled) {
+        return;
+      }
       const message = this.$t("Are you sure you want to delete this?");
       window.ProcessMaker.confirmModal(this.$t("Caution!"), message, "", () => {
         this.remove();
diff --git a/src/components/renderer/form-nested-screen.vue b/src/components/renderer/form-nested-screen.vue
index 4c7ca872c..bb6e3b4a5 100644
--- a/src/components/renderer/form-nested-screen.vue
+++ b/src/components/renderer/form-nested-screen.vue
@@ -14,6 +14,7 @@
     debug-context="Nested Screen"
     @css-errors="cssErrors = $event"
     :_parent="_parent"
+    :read-only="isDisabled"
   />
 </template>
 
@@ -42,6 +43,8 @@ export default {
     validationData: null,
     _parent: null,
     ancestorScreens: {type: Array, default: () => []},
+    disabled: { type: [Boolean, String], default: false },
+    readonly: { type: [Boolean, String], default: false },
   },
   data() {
     return {
@@ -54,6 +57,17 @@ export default {
     };
   },
   computed: {
+    isDisabled() {
+      return Boolean(
+        this.disabled === true
+        || this.disabled === "true"
+        || this.disabled === ""
+        || this.readonly === true
+        || this.readonly === "true"
+        || this.readonly === ""
+        || this.$attrs.disabled
+      );
+    },
     validatedConfig() {
       return this.config && this.config[0] ? this.config : defaultConfig;
     },
@@ -133,7 +147,7 @@ export default {
             this.watchers = response.data.watchers;
             this.screenTitle = response.data.title;
 
-            if (this.$attrs['disabled']) {
+            if (this.isDisabled) {
               this.disableForm(this.config);
             }
 
diff --git a/src/components/renderer/form-record-list.vue b/src/components/renderer/form-record-list.vue
index e76faaa3c..ec8b13770 100644
--- a/src/components/renderer/form-record-list.vue
+++ b/src/components/renderer/form-record-list.vue
@@ -6,7 +6,7 @@
       </div>
       <div v-if="styleMode === 'Classic'" class="col text-right">
         <button
-          v-if="editable && !selfReferenced"
+          v-if="canEditRecords && !selfReferenced"
           class="btn btn-primary"
           data-cy="add-row"
           @click="showAddForm"
@@ -40,6 +40,7 @@
           <template #head(checkbox)="data">
             <b-form-checkbox
               v-model="allRowsSelected"
+              :disabled="!canChangeSelection"
               @change="selectAllRows"
               :indeterminate="indeterminate"
               aria-label="Select All"
@@ -50,6 +51,7 @@
             <b-form-checkbox
               v-model="selectedRows"
               :value="item"
+              :disabled="!canChangeSelection"
               @change="onMultipleSelectionChange(index)"
             />
           </template>
@@ -58,6 +60,7 @@
             <b-form-radio
               v-model="selectedRow"
               :value="item"
+              :disabled="!canChangeSelection"
               @change="onRadioChange(item, index)"
 
             />
@@ -82,7 +85,7 @@
 
           </template>
           <template #cell(__actions)="{ index, item }">
-            <div class="actions">
+            <div v-if="canEditRecords" class="actions">
               <div
                 class="btn-group btn-group-sm"
                 role="group"
@@ -148,7 +151,7 @@
           </div>
           <div v-if="styleMode === 'Modern'" class="col text-right">
             <button
-              v-if="editable && !selfReferenced"
+              v-if="canEditRecords && !selfReferenced"
               class="btn btn-link text-primary class-button-modern"
               data-cy="add-row"
               @click="showAddForm"
@@ -160,7 +163,7 @@
     </template>
 
     <b-modal
-      v-if="editable && !selfReferenced"
+      v-if="canEditRecords && !selfReferenced"
       ref="addModal"
       :static="true"
       size="lg"
@@ -188,7 +191,7 @@
       />
     </b-modal>
     <b-modal
-      v-if="editable && !selfReferenced"
+      v-if="canEditRecords && !selfReferenced"
       ref="editModal"
       :static="true"
       size="lg"
@@ -216,7 +219,7 @@
       />
     </b-modal>
     <b-modal
-      v-if="editable && !selfReferenced"
+      v-if="canEditRecords && !selfReferenced"
       ref="deleteModal"
       size="lg"
       :ok-title="$t('Delete')"
@@ -229,7 +232,7 @@
       <p>{{ $t("Are you sure you want to remove this record?") }}</p>
     </b-modal>
     <b-modal
-      v-if="editable && !selfReferenced"
+      v-if="canEditRecords && !selfReferenced"
       ref="infoModal"
       size="sm"
       :ok-title="$t('OK')"
@@ -242,7 +245,7 @@
       <p>{{ $t("The form to be displayed is not assigned.") }}</p>
     </b-modal>
 
-    <div v-if="editable && selfReferenced" class="alert alert-danger">
+    <div v-if="canEditRecords && selfReferenced" class="alert alert-danger">
       {{
         $t(
           "The Record List control is not allowed to reference other controls on its own page to add or edit records. Specify a secondary page with controls to enter records."
@@ -273,12 +276,20 @@ export default {
     MustacheHelper
   },
   mixins: [mustacheEvaluation],
+  inject: {
+    formReadOnlyState: {
+      default: () => ({ value: false })
+    }
+  },
   props: [
     "name",
     "label",
     "fields",
     "value",
     "editable",
+    "disabled",
+    "readonly",
+    "config",
     "_config",
     "form",
     "validationData",
@@ -333,6 +344,26 @@ export default {
     };
   },
   computed: {
+    canEditRecords() {
+      if (this.isFormReadOnlyContext()) {
+        return false;
+      }
+      const cfg = this.config || this._config;
+      if (
+        this.disabled
+        || this.readonly
+        || (cfg && (cfg.disabled || cfg.readonly || cfg.editable === false))
+      ) {
+        return false;
+      }
+      return Boolean(this.editable);
+    },
+    // Collection radio/checkbox selection must stay active in Screen Builder
+    // preview and active tasks. Block only in Tasks Preview Pane for
+    // CLOSED/COMPLETED (formReadOnlyState / forceFormReadOnly).
+    canChangeSelection() {
+      return !this.isFormReadOnlyContext();
+    },
     tableClassModern() {
       if (this.styleMode === 'Modern') {
         switch (this.bgcolormodern) {
@@ -421,14 +452,17 @@ export default {
     },
     // The fields used for our vue table
     tableFields() {
-      const fields = this.getTableFieldsFromDataSource();
+      const fields = this.getTableFieldsFromDataSource().filter(
+        (field) => field.key !== "__actions"
+      );
 
-      if (this.editable && !this.selfReferenced) {
+      if (this.canEditRecords && !this.selfReferenced) {
         fields.push(jsonOptionsActionsColumn);
       }
 
-      // Adds radio buttons or checkbox to the table depending selected option
-      if(this.source?.sourceOptions === "Collection") {
+      // Selection controls stay visible so the chosen record remains obvious;
+      // they are disabled when the form is read-only (closed/completed preview).
+      if (this.source?.sourceOptions === "Collection") {
         if (['single-field', 'single-record'].includes(this.source?.dataSelectionOptions)) {
           fields.unshift({
             key: 'radio',
@@ -507,7 +541,28 @@ export default {
     this.$root.$emit("record-list-option", this.source?.sourceOptions);
   },
   methods: {
+    isFormReadOnlyContext() {
+      if (this.formReadOnlyState && this.formReadOnlyState.value) {
+        return true;
+      }
+      let parent = this.$parent;
+      let depth = 0;
+      while (parent && depth < 30) {
+        if (parent.formReadOnlyState && parent.formReadOnlyState.value) {
+          return true;
+        }
+        if (parent.forceFormReadOnly || parent.isFormReadOnly) {
+          return true;
+        }
+        parent = parent.$parent;
+        depth += 1;
+      }
+      return false;
+    },
     togglePopover(index, event, rowId) {
+      if (!this.canEditRecords) {
+        return;
+      }
       this.deleteIndex = _.find(this.tableData.data, { row_id: rowId });
       this.isPopoverVisible = this.isPopoverVisible === index ? null : index;
       if (this.isPopoverVisible !== null) {
@@ -559,6 +614,9 @@ export default {
       this.styleMode = value ? value : "Classic";
     },
     selectAllRows() {
+      if (!this.canChangeSelection) {
+        return;
+      }
       if (this.allRowsSelected) {
         const updatedRows = this.tableData.data.map((item, index) => {
           return {
@@ -579,6 +637,9 @@ export default {
       this.$emit('input',  data);
     },
     onRadioChange(selectedItem, index) {
+      if (!this.canChangeSelection) {
+        return;
+      }
       const globalIndex = (this.currentPage - 1) * this.perPage + index;
       if(this.source?.singleField) {
         let valueOfColumn = selectedItem[this.source.singleField];
@@ -589,6 +650,9 @@ export default {
       }
     },
     onMultipleSelectionChange(selIndex) {
+      if (!this.canChangeSelection) {
+        return;
+      }
       this.collectionData.forEach((item, index) => {
           this.selectedRows.forEach((selectedItem) => {
               // Compares both objects all keys and values
@@ -977,6 +1041,9 @@ export default {
       }
     },
     showEditForm(index, rowId) {
+      if (!this.canEditRecords) {
+        return;
+      }
       const pageIndex = (this.currentPage - 1) * this.perPage + index;
       // Reset edit to be a copy of our data model item
       this.editItem = JSON.parse(
@@ -1013,6 +1080,9 @@ export default {
       this.$emit("input", data);
     },
     showAddForm() {
+      if (!this.canEditRecords) {
+        return;
+      }
       const uniqueId =
         Math.random().toString(36).substring(2) + Date.now().toString(36);
       this.$set(this.addItem, "row_id", uniqueId);
@@ -1062,6 +1132,9 @@ export default {
       });
     },
     showDeleteConfirmation(index, rowId) {
+      if (!this.canEditRecords) {
+        return;
+      }
       this.deleteIndex = _.find(this.tableData.data, { row_id: rowId });
       this.$refs.deleteModal.show();
     },
@@ -1096,6 +1169,9 @@ export default {
       });
     },
     remove() {
+      if (!this.canEditRecords) {
+        return;
+      }
       // Add the item to our model and emit change
       // @todo Also check that value is an array type, if not, reset it to an array
       const data = this.tableData.data
diff --git a/src/components/task.vue b/src/components/task.vue
index 83915b57c..11d7729f5 100644
--- a/src/components/task.vue
+++ b/src/components/task.vue
@@ -32,6 +32,7 @@
             :key="refreshScreen"
             :loop-context="loopContext"
             :taskdraft="this.task"
+            :read-only="isFormReadOnly"
             @update-page-task="pageUpdate"
             @update="onUpdate"
             @after-submit="afterSubmit"
@@ -132,6 +133,7 @@ export default {
       loadingTask: false,
       loadingListeners: this.waitLoadingListeners,
       isSelfService: false,
+      forceFormReadOnly: false,
     };
   },
   watch: {
@@ -205,6 +207,18 @@ export default {
     },
   },
   computed: {
+    isFormReadOnly() {
+      if (this.forceFormReadOnly) {
+        return true;
+      }
+      const status = this.task?.status;
+      return Boolean(
+        this.taskPreview
+        && status
+        && ["CLOSED", "COMPLETED", "TRIGGERED"].includes(status)
+        && !this.alwaysAllowEditing
+      );
+    },
     shouldAddSubmitButton() {
       if (!this.task) {
         return false;
@@ -239,7 +253,11 @@ export default {
         }
       }
       if (json.config !== undefined) {
+        // Align with nested-screen / collection controls: Record List uses
+        // `editable`, and Signature/File-like controls may check readonly.
         json.config.disabled = true;
+        json.config.readonly = true;
+        json.config.editable = false;
       }
       if (json.items !== undefined) {
         this.disableForm(json.items);
@@ -337,9 +355,13 @@ export default {
           }
         }
       }
-      if (this.taskPreview && this.task.status === "CLOSED") {
+      if (
+        this.taskPreview
+        && ["CLOSED", "COMPLETED", "TRIGGERED"].includes(this.task.status)
+      ) {
         this.task.interstitial_screen['_interstitial'] = false;
         if (!this.alwaysAllowEditing) {
+          this.forceFormReadOnly = true;
           this.task.screen.config = this.disableForm(this.task.screen.config);
         }
         this.screen = this.task.screen;
diff --git a/src/components/vue-form-renderer.vue b/src/components/vue-form-renderer.vue
index 26fc57ccf..8c21288af 100644
--- a/src/components/vue-form-renderer.vue
+++ b/src/components/vue-form-renderer.vue
@@ -64,10 +64,23 @@ export default {
     "showErrors",
     "testScreenDefinition",
     "deviceScreen",
-    "taskdraft"
+    "taskdraft",
+    "readOnly"
   ],
+  inject: {
+    parentFormReadOnlyState: {
+      from: "formReadOnlyState",
+      default: () => ({ value: false })
+    }
+  },
+  provide() {
+    return {
+      formReadOnlyState: this.formReadOnlyState
+    };
+  },
   data() {
     return {
+      formReadOnlyState: { value: false },
       definition: {
         config: this.config,
         computed: this.computed,
@@ -135,6 +148,18 @@ export default {
     }
   },
   watch: {
+    readOnly: {
+      immediate: true,
+      handler() {
+        this.syncFormReadOnly();
+      }
+    },
+    "parentFormReadOnlyState.value": {
+      immediate: true,
+      handler() {
+        this.syncFormReadOnly();
+      }
+    },
     customCss(customCss) {
       this.definition.customCss = customCss;
       this.parseCss();
@@ -189,6 +214,12 @@ export default {
     this.$store.dispatch('clipboardModule/initializeClipboard');
   },
   methods: {
+    syncFormReadOnly() {
+      const fromParent = Boolean(
+        this.parentFormReadOnlyState && this.parentFormReadOnlyState.value
+      );
+      this.formReadOnlyState.value = Boolean(this.readOnly) || fromParent;
+    },
     ...mapActions("globalErrorsModule", [
       "validate",
       "hasSubmitted",
diff --git a/src/mixins/Json2Vue.js b/src/mixins/Json2Vue.js
index 6c7366a5c..569530fd0 100644
--- a/src/mixins/Json2Vue.js
+++ b/src/mixins/Json2Vue.js
@@ -163,9 +163,19 @@ export default {
       properties = this.mergeUpdatedConfig(nodeName, this.setDefaultPropertyValues(properties));
       nodeName = this.snakeCase(nodeName);
       const node = this.ownerDocument.createElement(nodeName);
+      // Keep false for editability flags so closed/completed forms can disable Record List / Loop.
+      const allowFalseProperties = [
+        "editable",
+        "disabled",
+        "readonly",
+        ":editable",
+        ":disabled",
+        ":readonly"
+      ];
       for (let property in properties) {
         const value = properties[property];
-        if (value !== false && value !== null && value !== undefined) {
+        const allowFalse = allowFalseProperties.includes(property);
+        if ((allowFalse || value !== false) && value !== null && value !== undefined) {
           if (property.substr(0,1) === ':' || (typeof value === 'string' && value.indexOf('{{') === -1)) {
             node.setAttribute(this.escapeVuePropertyName(property), value);
           } else if (typeof value === 'string' && value.indexOf('{{') !== -1 && !properties.ignoreMustache) {
diff --git a/src/mixins/extensions/LoadFieldComponents.js b/src/mixins/extensions/LoadFieldComponents.js
index 2166fd91b..7e65b647f 100644
--- a/src/mixins/extensions/LoadFieldComponents.js
+++ b/src/mixins/extensions/LoadFieldComponents.js
@@ -107,6 +107,15 @@ export default {
       );
       properties[":readonly"] = isCalcProp || element.config.readonly;
       properties[":disabled"] = isCalcProp || element.config.disabled;
+      // Record List must read editability from the live config object so
+      // disableForm() mutations (completed/closed preview) take effect.
+      if (componentName === "FormRecordList") {
+        const configRef = this.byRef(element.config);
+        delete properties.editable;
+        // Avoid "&&" in attribute expressions: owner.innerHTML escapes & to &amp;.
+        properties[":editable"] =
+          `(${configRef}.editable)?!(${configRef}.disabled||${configRef}.readonly):false`;
+      }
       // Events
       properties["@submit"] = "submitForm";
       // Add handler event if Button

From 9d67af4cf8c800f824848cbee7d3f0b97a57543d Mon Sep 17 00:00:00 2001
From: CarliPinell <carlos.pinell@processmaker.com>
Date: Fri, 24 Jul 2026 08:35:40 -0400
Subject: [PATCH 2/2] Solving sonarqube issies

---
 .../form-collection-record-control.vue        | 14 ++--
 src/mixins/extensions/LoadFieldComponents.js  | 74 ++++++++++---------
 2 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/src/components/renderer/form-collection-record-control.vue b/src/components/renderer/form-collection-record-control.vue
index f64ea994f..5b725f68c 100644
--- a/src/components/renderer/form-collection-record-control.vue
+++ b/src/components/renderer/form-collection-record-control.vue
@@ -283,14 +283,12 @@ export default {
           const viewScreen = response.collection.read_screen_id;
           const editScreen = response.collection.update_screen_id;
           // Choose screen id regarding of the display Mode
-          this.screenCollectionId =
-            typeof this.selDisplayMode === "function"
-              ? this.collectionmode.modeId === "View" || this.isDisabled
-                ? viewScreen
-                : editScreen
-              : effectiveMode === "View"
-              ? viewScreen
-              : editScreen;
+          let useViewScreen = effectiveMode === "View";
+          if (typeof this.selDisplayMode === "function") {
+            useViewScreen =
+              this.collectionmode.modeId === "View" || this.isDisabled;
+          }
+          this.screenCollectionId = useViewScreen ? viewScreen : editScreen;
           this.loadScreen(this.screenCollectionId);
 
           // This section validates if Collection has draft data
diff --git a/src/mixins/extensions/LoadFieldComponents.js b/src/mixins/extensions/LoadFieldComponents.js
index 7e65b647f..4122d2fa7 100644
--- a/src/mixins/extensions/LoadFieldComponents.js
+++ b/src/mixins/extensions/LoadFieldComponents.js
@@ -27,53 +27,55 @@ export default {
         }
       });
     },
+    bindFieldVariable(properties, element, componentName) {
+      if (componentName === "FormImage") {
+        this.registerVariable(element.config.variableName, element);
+        delete properties.image;
+        properties[":image"] = this.byRef(element.config.image);
+        return;
+      }
+      if (!this.validVariableName(element.config.name)) {
+        return;
+      }
+      this.registerVariable(element.config.name, element);
+      // v-model are not assigned directly to the field name, to prevent invalid references like:
+      // `person.content` when `person`=null
+      const safeDotName = this.safeDotName(element.config.name);
+      properties["v-model"] = safeDotName;
+      // Debounce input from FormTextArea and FormInput
+      if (componentName === "FormTextArea" || componentName === "FormInput") {
+        properties[
+          "@input"
+        ] = `updateScreenData('${safeDotName}', '${element.config.name}')`;
+        properties[
+          "@change"
+        ] = `updateScreenDataNow('${safeDotName}', '${element.config.name}')`;
+      } else {
+        properties[
+          "@input"
+        ] = `updateScreenDataNow('${safeDotName}', '${element.config.name}')`;
+        properties[
+          "@change"
+        ] = `updateScreenDataNow('${safeDotName}', '${element.config.name}')`;
+      }
+      // Process the FormSelectList@reset event
+      properties[
+        "@reset"
+      ] = `resetValue('${safeDotName}', '${element.config.name}')`;
+    },
     loadFieldProperties({
       properties,
       element,
       componentName,
       definition,
-      formIndex,
-      screen
+      formIndex
     }) {
       properties.class = this.elementCssClass(element);
       properties[":validation-data"] = "getValidationData()";
 
       // verify if component is defined in popup
       if (!this.popups.includes(formIndex)) {
-        if (componentName === "FormImage") {
-          this.registerVariable(element.config.variableName, element);
-          delete properties.image;
-          properties[":image"] = this.byRef(element.config.image);
-        } else if (this.validVariableName(element.config.name)) {
-          this.registerVariable(element.config.name, element);
-          // v-model are not assigned directly to the field name, to prevent invalid references like:
-          // `person.content` when `person`=null
-          const safeDotName = this.safeDotName(element.config.name);
-          properties["v-model"] = safeDotName;
-          // Debounce input from FormTextArea and FormInput
-          if (
-            componentName === "FormTextArea" ||
-            componentName === "FormInput"
-          ) {
-            properties[
-              "@input"
-            ] = `updateScreenData('${safeDotName}', '${element.config.name}')`;
-            properties[
-              "@change"
-            ] = `updateScreenDataNow('${safeDotName}', '${element.config.name}')`;
-          } else {
-            properties[
-              "@input"
-            ] = `updateScreenDataNow('${safeDotName}', '${element.config.name}')`;
-            properties[
-              "@change"
-            ] = `updateScreenDataNow('${safeDotName}', '${element.config.name}')`;
-          }
-          // Process the FormSelectList@reset event
-          properties[
-            "@reset"
-          ] = `resetValue('${safeDotName}', '${element.config.name}')`;
-        }
+        this.bindFieldVariable(properties, element, componentName);
       }
       // Do not replace mustache in RichText control, it is replaced by the control
       if (