diff --git a/src/assets/icons/Bypass.svg b/src/assets/icons/Bypass.svg
new file mode 100644
index 000000000..1ad2a2542
--- /dev/null
+++ b/src/assets/icons/Bypass.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2632 7.10528H16M16 7.10528L14.0263 9.07896M16 7.10528L15.0132 6.11843L14.0263 5.13159" stroke="#6A7888" stroke-width="1.5" stroke-linecap="round"/>
+<rect x="3.4791" y="0.9" width="7.67368" height="12.4105" rx="1.1" stroke="#6A7888" stroke-width="1.8"/>
+<path d="M1 6.20522C0.502944 6.20522 0.1 6.60817 0.1 7.10522C0.1 7.60228 0.502944 8.00522 1 8.00522L1 6.20522ZM1 8.00522L7.31579 8.00523L7.31579 6.20523L1 6.20522L1 8.00522Z" fill="#6A7888"/>
+</svg>
diff --git a/src/assets/icons/Unbypass.svg b/src/assets/icons/Unbypass.svg
new file mode 100644
index 000000000..a26b00e95
--- /dev/null
+++ b/src/assets/icons/Unbypass.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 7H18M18 7L15.5 9M18 7L16.75 6L15.5 5" stroke="#6A7888" stroke-width="1.5" stroke-linecap="round"/>
+<rect x="4.4791" y="0.9" width="7.67368" height="12.4105" rx="1.1" stroke="#6A7888" stroke-width="1.8"/>
+<path d="M1 6.1C0.502944 6.1 0.1 6.50294 0.1 7C0.1 7.49706 0.502944 7.9 1 7.9V6.1ZM1 7.9H13V6.1H1V7.9Z" fill="#6A7888"/>
+</svg>
diff --git a/src/components/computed-properties.vue b/src/components/computed-properties.vue
index cfea940b3..a3ee74253 100644
--- a/src/components/computed-properties.vue
+++ b/src/components/computed-properties.vue
@@ -2,111 +2,125 @@
   <b-modal
     id="computed-properties"
     ref="modal"
-    size="lg"
-    :title="$t('Calculated Properties')"
+    :size="modalSize"
     content-class="p-3"
     header-class="m-0 p-0 mb-3"
     body-class="m-0 p-0"
     title-class="m-0"
-    footer-class="m-0 p-0"
+    footer-class="m-0 p-0 border-0"
     no-close-on-backdrop
     header-close-content="&times;"
     data-cy="calcs-modal"
     @hidden="displayTableList"
   >
+    <template #modal-title>
+      <h5 class="modal-title">{{ $t('Calculated Properties') }}</h5>
+      <small v-show="!displayList" class="modal-subtitle my-2">
+        {{
+          $t(
+            'Perform mathematical calculations offering quick, convenient, and accurate operations, enhancing user efficiency and usability.',
+          )
+        }}
+      </small>
+    </template>
     <template v-if="displayList">
-      <div class="d-flex align-items-end flex-column mb-3">
-        <button
-          type="button"
-          class="btn btn-secondary"
-          data-cy="calcs-add-property"
-          @click.stop="displayFormProperty"
-        >
-          <i class="fas fa-plus" /> {{ $t("Property") }}
-        </button>
-      </div>
-      <div class="card card-body table-card">
-        <b-table
-          :css="css"
-          :fields="fields"
-          :items="current"
-          :empty-text="$t('No Data Available')"
-          data-cy="calcs-table"
-        >
-          <template #cell(__actions)="{ item }">
-            <div class="actions">
-              <div class="popout">
-                <b-btn
-                  v-b-tooltip.hover
-                  variant="link"
-                  :title="$t('Edit')"
-                  data-cy="calcs-table-edit"
-                  @click="editProperty(item)"
-                >
-                  <i class="fas fa-edit fa-lg fa-fw" />
-                </b-btn>
-                <b-btn
-                  v-b-tooltip.hover
-                  variant="link"
-                  :title="$t('Delete')"
-                  data-cy="calcs-table-remove"
-                  @click="deleteProperty(item)"
-                >
-                  <i class="fas fa-trash-alt fa-lg fa-fw" />
-                </b-btn>
-              </div>
-            </div>
-          </template>
-        </b-table>
-      </div>
+      <Sortable
+        class="mb-3"
+        :fields="fields"
+        :items="current"
+        filter-key="name,type"
+        disable-key="byPass"
+        :inline-edit="false"
+        :data-test-actions="{
+          tableBox: { 'data-cy': 'calcs-table' },
+          btnNew: { 'data-cy': 'calcs-add-property' },
+          btnEdit: { 'data-cy': 'calcs-table-edit' },
+          btnDelete: { 'data-cy': 'calcs-table-remove' },
+        }"
+        @item-edit="editProperty"
+        @item-delete="deleteProperty"
+        @add-page="displayFormProperty"
+        :searchProperties= "searchProperties"
+      >
+        <template #options="{ item }">
+          <button
+            v-b-tooltip="{ customClass: 'bypass-btn-tooltip' }"
+            :title="item.byPass ? $t('Unbypass Calc') : $t('Bypass Calc')"
+            class="btn"
+            data-test="calcs-bypass"
+            @click="toggleBypass(item.id)"
+          >
+            <img :src="getByPassIcon(item)" alt="Bypass" width="24" />
+          </button>
+          <div class="sortable-item-vr"></div>
+        </template>
+      </Sortable>
+
       <template slot="modal-footer">
-        <span />
+        <div class="d-flex align-items-end">
+          <button
+            class="btn btn-secondary ml-3 text-uppercase"
+            data-cy="calcs-button-close"
+            @click="$refs.modal.hide()"
+          >
+            {{ $t("Done") }}
+          </button>
+        </div>
       </template>
     </template>
 
     <template v-else>
-      <required />
-      <form-input
-        ref="property"
-        v-model="add.property"
-        :label="$t('Property Name') + ' *'"
-        name="property"
-        :error="errors.property"
-        class="mb-3"
-        data-cy="calcs-property-name"
-        required
-        aria-required="true"
-      />
-      <form-text-area
-        ref="name"
-        v-model="add.name"
-        :label="$t('Description') + ' *'"
-        name="name"
-        :error="errors.name"
-        class="mb-3"
-        data-cy="calcs-property-description"
-        required
-        aria-required="true"
-      />
+      <b-row>
+        <b-col>
+          <form-input
+            ref="property"
+            v-model="add.property"
+            :label="$t('Property Name') + ' *'"
+            name="property"
+            :error="errors.property"
+            class="mb-3 calcs-input"
+            data-cy="calcs-property-name"
+            required
+            aria-required="true"
+          />
+        </b-col>
+        <b-col>
+          <form-text-area
+            ref="name"
+            v-model="add.name"
+            :label="$t('Description') + ' *'"
+            name="name"
+            :error="errors.name"
+            class="mb-3 calcs-input"
+            data-cy="calcs-property-description"
+            required
+            aria-required="true"
+          />
+        </b-col>
+      </b-row>
+
       <div class="form-group mb-3" style="position: relative">
-        <label v-show="isJS">{{ $t("Formula") + " *" }}</label>
-        <div class="float-right">
-          <a
-            class="btn btn-sm"
-            :class="expressionTypeClass"
-            data-cy="calcs-switch-formula"
-            @click="switchExpressionType('expression')"
-          >
-            <i class="fas fa-square-root-alt" />
-          </a>
-          <a
-            class="btn btn-sm"
-            :class="javascriptTypeClass"
-            data-cy="calcs-switch-javascript"
-            @click="switchExpressionType('javascript')"
-          >
-            <i class="fab fa-js-square" />
-          </a>
+        <div class="d-flex justify-content-between mb-1">
+          <label class="m-0">{{ $t('Formula') + ' *' }}</label>
+
+          <div>
+            <a
+              class="btn btn-sm"
+              :class="expressionTypeClass"
+              data-cy="calcs-switch-formula"
+              @click="switchExpressionType('expression')"
+            >
+              <i class="fas fa-square-root-alt" />
+            </a>
+            <a
+              class="btn btn-sm"
+              :class="javascriptTypeClass"
+              data-cy="calcs-switch-javascript"
+              @click="switchExpressionType('javascript')"
+            >
+              <i class="fab fa-js-square fa-lg"></i>
+            </a>
+          </div>
         </div>
 
         <form-text-area
@@ -114,12 +128,12 @@
           ref="formula"
           v-model="add.formula"
           rows="5"
-          :label="$t('Formula') + ' *'"
           name="formula"
           :error="errors.formula"
           data-cy="calcs-property-formula"
           required
           aria-required="true"
+          class="calcs-input-formula"
         />
         <div
           v-show="isJS"
@@ -144,14 +158,14 @@
       <template slot="modal-footer">
         <div class="d-flex align-items-end">
           <button
-            class="btn btn-outline-secondary"
+            class="btn btn-outline-secondary text-uppercase"
             data-cy="calcs-button-cancel"
             @click="displayTableList"
           >
             {{ $t("Cancel") }}
           </button>
           <button
-            class="btn btn-secondary ml-3"
+            class="btn btn-secondary ml-3 text-uppercase"
             data-cy="calcs-button-save"
             @click="validateData"
           >
@@ -168,12 +182,16 @@ import { FormInput, FormTextArea } from "@processmaker/vue-form-elements";
 import MonacoEditor from "vue-monaco";
 import Validator from "@chantouchsek/validatorjs";
 import FocusErrors from "../mixins/focusErrors";
+import Sortable from './sortable/Sortable.vue';
+
+const globalObject = typeof window === 'undefined' ? global : window;
 
 export default {
   components: {
     FormInput,
     FormTextArea,
-    MonacoEditor
+    MonacoEditor,
+    Sortable,
   },
   mixins: [FocusErrors],
   props: ["value"],
@@ -208,18 +226,23 @@ export default {
       },
       fields: [
         {
-          label: this.$t("Property Name"),
-          key: "property"
+          label: this.$t("Name"),
+          key: "property",
         },
         {
-          label: this.$t("Description"),
-          key: "name"
+          label: this.$t("Type"),
+          key: "type",
+          cb: (value) => {
+            switch (value) {
+              case 'expression':
+                return 'Formula';
+              case 'javascript':
+                return 'JavaScript';
+              default:
+                return value;
+            }
+          },
         },
-        {
-          key: "__actions",
-          label: "",
-          class: "text-right"
-        }
       ],
       monacoOptions: {
         automaticLayout: true,
@@ -227,7 +250,8 @@ export default {
         minimap: false
       },
       monacoEditor: null,
-      errors: {}
+      errors: {},
+      searchProperties: ['property', 'type'],
     };
   },
   computed: {
@@ -251,16 +275,24 @@ export default {
     },
     isJS() {
       return this.add.type === "javascript";
-    }
+    },
+    modalSize() {
+      return this.displayList ? 'lg' : 'xl';
+    },
   },
   watch: {
     value() {
       this.value.forEach((item) => {
         this.numberItem++;
         item.id = this.numberItem;
+
+        if (!Object.hasOwn(item, 'byPass')) {
+          item.byPass = false;
+        }
       });
+
       this.current = this.value;
-    }
+    },
   },
   created() {
     Validator.register(
@@ -334,6 +366,13 @@ export default {
         this.focusFirstCalculatedPropertiesError();
       }
     },
+    toggleBypass(itemId) {
+      this.current = this.current.map((item) =>
+        item.id === itemId ? { ...item, byPass: !item.byPass } : item,
+      );
+
+      this.$emit("input", this.current);
+    },
     saveProperty() {
       if (this.add.id === 0) {
         this.numberItem++;
@@ -342,7 +381,8 @@ export default {
           property: this.add.property,
           name: this.add.name,
           formula: this.add.formula,
-          type: this.add.type
+          type: this.add.type,
+          byPass: false,
         });
       } else {
         this.current.forEach((item) => {
@@ -367,6 +407,16 @@ export default {
       this.displayList = false;
     },
     deleteProperty(item) {
+      globalObject.ProcessMaker.confirmModal(
+        this.$t('Are you sure you want to delete the calc ?'),
+        this.$t('If you do, you wont be able to recover the calc configuration.'),
+        '',
+        () => {
+          this.remove(item);
+        }
+      );
+    },
+    remove(item) {
       this.current = this.current.filter((val) => {
         return val.id !== item.id;
       });
@@ -375,22 +425,28 @@ export default {
     },
     editorMounted(editor) {
       this.monacoEditor = editor;
-    }
+    },
+    getByPassIcon(item) {
+      return new URL(
+        `../assets/icons/${item.byPass ? 'Unbypass' : 'Bypass'}.svg`,
+        import.meta.url,
+      ).href;
+    },
   }
 };
 </script>
 
 <style lang="scss" scoped>
 .editor {
-  height: 8.5em;
+  height: 430px;
   z-index: 0;
 }
 
 .editor-border {
-  border: 1px solid #ced4da;
+  border: 1px solid #CDDDEE;
   border-radius: 4px;
   overflow: hidden;
-  height: 8.8em;
+  height: 430px;
   position: absolute;
   pointer-events: none;
   width: 100%;
@@ -400,4 +456,50 @@ export default {
 .editor-border.is-invalid {
   border-color: #dc3545;
 }
+
+.bypass-btn-tooltip::v-deep {
+  & .tooltip-inner {
+    background-color: #EBEEF2 !important;
+    color: #444444 !important;
+  }
+
+  & .arrow:before {
+    border-top-color: #EBEEF2 !important;
+    border-bottom-color: #EBEEF2 !important;
+  }
+}
+
+.modal-subtitle {
+  display: block;
+  color: #556271;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.calcs-input::v-deep {
+  & > .form-control {
+    height: 86px;
+    border-color: #CDDDEE;
+  }
+
+  & > input.form-control {
+    padding-bottom: 52px;
+  }
+
+  & > textarea.form-control {
+    resize: none;
+  }
+}
+
+.calcs-input-formula::v-deep {
+  & > textarea.form-control {
+    height: 430px;
+    border-color: #CDDDEE;
+    resize: none;
+  }
+
+  & > label {
+    display: none;
+  }
+}
 </style>
diff --git a/src/components/sortable/Sortable.vue b/src/components/sortable/Sortable.vue
index 87ae15a9c..c8167bade 100644
--- a/src/components/sortable/Sortable.vue
+++ b/src/components/sortable/Sortable.vue
@@ -15,6 +15,7 @@
         <button
           type="button"
           class="btn sortable-btn-new"
+          v-bind="testActions.btnNew"
           @click="$emit('add-page', $event)"
         >
           <i class="fa fa-plus"></i>
@@ -23,26 +24,48 @@
     </div>
 
     <SortableList
+      :fields="fields"
       :items="items"
       :filtered-items="filteredItems"
+      :inline-edit="inlineEdit"
+      :disable-key="disableKey"
+      :data-test-actions="testActions"
       @ordered="$emit('ordered', $event)"
       @item-edit="$emit('item-edit', $event)"
       @item-delete="$emit('item-delete', $event)"
-    />
+    >
+      <template #options="{ item }">
+        <slot name="options" :item="item"></slot>
+      </template>
+    </SortableList>
   </div>
 </template>
 
 <script>
-import SortableList from './sortableList/SortableList.vue'
+import SortableList from './sortableList/SortableList.vue';
 
 export default {
   name: 'Sortable',
   components: {
-    SortableList
+    SortableList,
   },
   props: {
+    fields: { type: Array, required: true },
     items: { type: Array, required: true },
     filterKey: { type: String, required: true },
+    disableKey: { type: String, default: null },
+    inlineEdit: { type: Boolean, default: true },
+    dataTestActions: {
+      type: Object,
+      default: () => ({}),
+    },
+    searchProperties: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []; // Return a new instance of the array
+      }
+    }
   },
   data() {
     return {
@@ -54,34 +77,94 @@ export default {
           this.$set(item, "order", index + 1);
         }
         return item;
-      })
+      }),
+      defaultTestActions: {
+        tableBox: { 'data-test': 'sortable-table-box' },
+        btnNew: { 'data-test': 'sortable-btn-new' },
+        btnEdit: { 'data-test': 'sortable-btn-edit' },
+        btnDelete: { 'data-test': 'sortable-btn-remove' },
+      },
     };
   },
+  computed: {
+    testActions() {
+      return { ...this.defaultTestActions, ...this.dataTestActions };
+    },
+  },
   watch: {
     search(value) {
-      this.filteredItems = this.filterItems(value, this.items);
+      this.filteredItems = this.filterItems(value, this.items, this.searchProperties);
     },
     items: {
       handler(newItems) {
         this.filteredItems = [...newItems];
 
         if (this.search.length > 0) {
-          this.filteredItems = this.filterItems(this.search, newItems);
+          this.filteredItems = this.filterItems(this.search, newItems, this.searchProperties);
         }
       },
       deep: true,
     },
   },
   methods: {
-    clearSearch(value) {
-      return value.trim().toLowerCase();
+    /**
+     * Filters items by searching within specified properties, including nested properties, considering substrings.
+     *
+     * @param {string} searchValue - The value to search for within item properties.
+     * @param {Array} items - The collection of items to filter.
+     * @param {Array} searchProperties - The properties to search within each item.
+     * @returns {Array} - The filtered items.
+     */
+    filterItems(searchValue, items, searchProperties) {
+      const cleanSearch = this.clearSearch(searchValue).toLowerCase();
+
+      return items.filter((item) => {
+        return this.propertyMatchesSearch(item, searchProperties, cleanSearch);
+      });
     },
-    filterItems(searchValue, items) {
-      const cleanSearch = this.clearSearch(searchValue);
-      return items.filter((item) => item[this.filterKey].toLowerCase().includes(cleanSearch));
+
+    /**
+     * Checks if any of the specified properties of an item match the cleaned search value as a substring.
+     *
+     * @param {Object} item - The item object to check.
+     * @param {Array} properties - The properties to search within each item.
+     * @param {string} cleanSearch - The cleaned and lowercase search value.
+     * @returns {boolean} - True if any property matches the search value, otherwise false.
+     */
+    propertyMatchesSearch(item, properties, cleanSearch) {
+      return properties.some((property) => {
+        const value = this.getPropertyValue(item, property);
+        if (value && typeof value === 'string') {
+          const normalizedValue = value.toLowerCase();
+          return normalizedValue.includes(cleanSearch);
+        }
+        return false;
+      });
+    },
+
+    /**
+     * Retrieves the value of a nested property within an object.
+     *
+     * @param {Object} obj - The object from which to retrieve the property value.
+     * @param {string} path - The path to the nested property, e.g., "item.title".
+     * @returns {*} - The value of the nested property if found, otherwise undefined.
+     */
+    getPropertyValue(obj, path) {
+      const parts = path.split('.');
+      return parts.reduce((acc, curr) => acc?.[curr], obj);
+    },
+
+    /**
+     * Cleans the search value by removing unwanted characters and trimming spaces.
+     *
+     * @param {string} searchValue - The value to be cleaned.
+     * @returns {string} - The cleaned search value.
+     */
+    clearSearch(searchValue) {
+      return searchValue.trim();
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped src="./sortable.scss"></style>
diff --git a/src/components/sortable/sortable.scss b/src/components/sortable/sortable.scss
index e31ef7323..f32d4ac9c 100644
--- a/src/components/sortable/sortable.scss
+++ b/src/components/sortable/sortable.scss
@@ -1,12 +1,17 @@
 .sortable {
   &-box {
     font-family: "Open Sans", sans-serif !important;
+    overflow-x: auto;
   }
 
   &-search-box {
     display: flex;
     align-items: center;
     border-color: #cdddee !important;
+
+    & > input.form-control:focus {
+      border: 0 none !important;
+    }
   }
 
   &-search-icon {
diff --git a/src/components/sortable/sortableList/SortableList.vue b/src/components/sortable/sortableList/SortableList.vue
index 85453dfb5..03a8faf29 100644
--- a/src/components/sortable/sortableList/SortableList.vue
+++ b/src/components/sortable/sortableList/SortableList.vue
@@ -1,51 +1,90 @@
 <template>
   <div class="row mt-3">
-    <div class="col p-0 border rounded-lg sortable-list">
-      <div class="sortable-list-header">
-        <div class="sortable-item-icon"></div>
-        <div class="sortable-list-title">PAGE NAME</div>
-      </div>
-      <div class="sortable-container" @dragover="dragOver">
+    <div
+      class="p-0 border rounded-lg sortable-list"
+      v-bind="dataTestActions.tableBox"
+      @dragover="dragOver"
+    >
+      <div class="sortable-list-tr">
+        <div class="sortable-list-td"></div>
         <div
-          v-for="(item, index) in sortedItems"
-          :key="index"
-          :data-order="item.order"
-          :data-test="`item-${item.order}`"
-          :title="item.name"
-          draggable="true"
-          @dragstart="(event) => dragStart(event, item.order)"
-          @dragenter="(event) => dragEnter(event, item.order)"
-          @dragend="dragEnd"
-          class="sortable-item sortable-draggable"
+          v-for="field in fields"
+          :key="field.key"
+          class="sortable-list-td"
         >
+          <span class="sortable-list-separator">&nbsp;</span>
+          <span class="sortable-list-header">{{ field.label }}</span>
+        </div>
+        <div class="sortable-list-td">
+          <span class="sortable-list-separator">&nbsp;</span>
+        </div>
+      </div>
+      <div
+        v-for="(item, index) in sortedItems"
+        :key="`item-${index}`"
+        :data-order="item.order"
+        :data-test="`item-${item.order}`"
+        :title="item.name"
+        :class="[
+          'sortable-list-tr',
+          'sortable-item',
+          { 'sortable-item-disabled': isDisabled(item) },
+        ]"
+        draggable="true"
+        @dragstart="(event) => dragStart(event, item.order)"
+        @dragenter="(event) => dragEnter(event, item.order)"
+        @dragend="dragEnd"
+      >
+        <div class="sortable-list-td">
           <div class="sortable-item-icon">
             <i class="fas fa-bars"></i>
           </div>
-          <div class="rounded sortable-item-name">
-            <b-form-input
-              v-if="editRowIndex === index"
-              v-model="newName"
-              type="text"
-              autofocus
-              required
-              :state="validateState(newName, item)"
-              :error="validateError(newName, item)"
-              @blur.stop="onBlur(newName, item)"
-              @keydown.enter.stop="onBlur(newName, item)"
-              @keydown.esc.stop="onCancel(item)"
-              @focus="onFocus(item)"
-            />
-            <span v-else>{{ item.name }}</span>
-          </div>
+        </div>
+        <div
+          v-for="field in fields"
+          :key="field.key"
+          class="sortable-list-td sortable-item-prop"
+        >
+          <b-form-input
+            v-if="editRowIndex === index"
+            v-model="newName"
+            type="text"
+            autofocus
+            required
+            :state="validateState(newName, item)"
+            :error="validateError(newName, item)"
+            @blur.stop="onBlur(newName, item)"
+            @keydown.enter.stop="onBlur(newName, item)"
+            @keydown.esc.stop="onCancel(item)"
+            @focus="onFocus(item)"
+          />
+          <span v-else>{{ getItemValue(item, field.key, field.cb) }}</span>
+        </div>
+
+        <div class="sortable-list-td">
           <div class="border rounded-lg sortable-item-action">
             <button v-if="editRowIndex === index" class="btn">
               <i class="fas fa-check"></i>
             </button>
-            <button v-else class="btn" @click.stop="onClick(item, index)">
+            <button
+              v-else
+              v-b-tooltip="{ customClass: 'sortable-item-action-btn-tooltip' }"
+              class="btn"
+              :title="$t('Edit')"
+              v-bind="dataTestActions.btnEdit"
+              @click.stop="onClick(item, index)"
+            >
               <i class="fas fa-edit"></i>
             </button>
             <div class="sortable-item-vr"></div>
-            <button class="btn" @click="$emit('item-delete', item)">
+            <slot name="options" :item="item"></slot>
+            <button
+              v-b-tooltip="{ customClass: 'sortable-item-action-btn-tooltip' }"
+              class="btn"
+              :title="$t('Delete')"
+              v-bind="dataTestActions.btnDelete"
+              @click="$emit('item-delete', item)"
+            >
               <i class="fas fa-trash-alt"></i>
             </button>
           </div>
@@ -59,8 +98,12 @@
 export default {
   name: 'SortableList',
   props: {
+    fields: { type: Array, required: true },
     items: { type: Array, required: true },
     filteredItems: { type: Array, required: true },
+    inlineEdit: { type: Boolean, default: true },
+    disableKey: { type: String, default: null },
+    dataTestActions: { type: Object, required: true },
   },
   data() {
     return {
@@ -77,9 +120,22 @@ export default {
         this.refreshSort &&
         [...this.filteredItems].sort((a, b) => a.order - b.order);
       return sortedItems;
-    }
+    },
   },
   methods: {
+    /** Get the value of a nested field in an object
+     * @param {Object} item - The object to get the value from
+     * @param {String} fieldKey - The key of the field to get the value from
+     * @param {Function} cb - Callback function to apply to the value
+     *
+     * @returns {String} The value of the field
+     */
+    getItemValue(item, fieldKey, cb = null) {
+      return fieldKey.split('.').reduce((obj, key) => {
+        if (!obj[key]) return '';
+        return cb instanceof Function ? cb(obj[key]) : obj[key];
+      }, item);
+    },
     validateState(name, item) {
       const isEmpty = !name?.trim();
       const isDuplicated = this.items
@@ -120,6 +176,11 @@ export default {
       this.editRowIndex = null;
     },
     onClick(item, index) {
+      if (!this.inlineEdit) {
+        this.$emit("item-edit", item);
+        return;
+      }
+
       this.editRowIndex = index;
       this.$emit("item-edit", item);
     },
@@ -129,6 +190,9 @@ export default {
       this.draggedItem = order;
       // add dragging class to the element
       event.target.classList.add('dragging');
+      if (event?.dataTransfer) {
+        event.dataTransfer.effectAllowed = 'move';
+      }
     },
     dragEnter(event, order) {
       this.draggedOverItem = order;
@@ -185,8 +249,11 @@ export default {
     dragOver(event) {
       event.preventDefault();
     },
+    isDisabled(item) {
+      return this.disableKey ? item[this.disableKey] : false;
+    },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped src="./sortableList.scss"></style>
diff --git a/src/components/sortable/sortableList/sortableList.scss b/src/components/sortable/sortableList/sortableList.scss
index 117efdf5e..3594a7036 100644
--- a/src/components/sortable/sortableList/sortableList.scss
+++ b/src/components/sortable/sortableList/sortableList.scss
@@ -2,44 +2,66 @@ $border-color: #cdddee;
 
 .sortable {
   &-list {
-    display: flex;
+    display: table;
     flex-direction: column;
+    width: 100%;
     border: 1px solid $border-color !important;
 
-    &-header {
-      display: flex;
-      align-items: center;
+    &-tr {
+      display: table-row;
+
+      &:last-child > .sortable-list-td {
+        border-bottom: none;
+      }
+    }
+
+    &-td {
+      display: table-cell;
       border-bottom: 1px solid $border-color;
+      white-space: nowrap;
+
+      &:first-child {
+        width: 60px;
+      }
+
+      &:nth-child(2) {
+        width: 30%;
+      }
+
+      &:not(:first-child):not(:nth-child(2)):not(:last-child) {
+        width: auto;
+      }
+
+      &:last-child {
+        width: 1%;
+        white-space: nowrap;
+      }
     }
 
-    &-title {
-      padding-left: 16px;
+    &-header {
+      padding: 16px 0 16px 16px;
       font-size: 14px;
-      font-weight: bold;
+      font-weight: 700;
       color: #566877;
+      text-transform: uppercase;
+      display: inline-block;
+      white-space: normal;
+    }
+    &-separator {
+      border-left: 1px solid $border-color;
+      display: inline-block;
+      padding: 0.5rem 0rem;
+      width: 1px;
     }
-  }
-
-  &-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 340px;
-    overflow-x: auto;
   }
 
   &-item {
-    display: flex;
-    align-items: center;
-    height: 56px;
-    border-bottom: 1px solid $border-color;
     cursor: move;
 
     &-icon {
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 64px;
       height: 56px;
     }
 
@@ -47,8 +69,7 @@ $border-color: #cdddee;
       color: #6A7888;
     }
 
-    &-name {
-      flex-grow: 1;
+    &-prop {
       padding: 8px 16px;
       font-size: 15px;
       color: #556271;
@@ -58,6 +79,18 @@ $border-color: #cdddee;
       display: flex;
       margin: 0 16px;
       border-color: $border-color !important;
+
+      &-btn-tooltip::v-deep {
+        & .tooltip-inner {
+          background-color: #EBEEF2 !important;
+          color: #444444 !important;
+        }
+
+        & .arrow:before {
+          border-top-color: #EBEEF2 !important;
+          border-bottom-color: #EBEEF2 !important;
+        }
+      }
     }
 
     &-vr {
@@ -65,9 +98,16 @@ $border-color: #cdddee;
       margin: 9px 0;
       border-right: 1px solid $border-color;
     }
+
+    &-disabled > .sortable-item-prop {
+      color: rgba(85, 98, 113, 0.5);
+    }
   }
 }
 
 .dragging {
   box-shadow: 0 1px 5px 0 rgba(86, 104, 119, 0.4);
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
 }
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index a5eddd9ea..2bd11d336 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -368,16 +368,18 @@
       :ok-title="$t('DONE')"
       ok-only
       ok-variant="secondary"
-      header-class = "modal-header-custom"
+      header-class="modal-header-custom"
     >
-    <template #modal-title>
-      <h5 class="modal-title">{{ $t('Edit Pages') }}</h5>
-      <span class="modal-subtitle">{{ $t('Change pages order and name') }}</span>
-    </template>
-    <template #modal-header-close="{ close }">
-      <button type="button" aria-label="Close" class="close"  @click="close()">×</button>
-    </template>
+      <template #modal-title>
+        <h5 class="modal-title">{{ $t('Edit Pages') }}</h5>
+        <span class="modal-subtitle">{{ $t('Change pages order and name') }}</span>
+      </template>
+      <template #modal-header-close="{ close }">
+        <button type="button" aria-label="Close" class="close">×</button>
+      </template>
+
       <Sortable
+        :fields="fields"
         :items="config"
         filter-key="name"
         @item-edit="() => {}"
@@ -604,6 +606,12 @@ export default {
       editPageIndex: null,
       editPageName: "",
       originalPageName: null,
+      fields: [
+        {
+          label: this.$t("Name"),
+          key: "name",
+        },
+      ],
       config,
       confirmMessage: "",
       pageDelete: 0,
diff --git a/src/components/watchers-form.vue b/src/components/watchers-form.vue
index 4a9bfefb8..fe005c775 100644
--- a/src/components/watchers-form.vue
+++ b/src/components/watchers-form.vue
@@ -341,14 +341,14 @@
 
     <div class="d-flex justify-content-end mt-3">
       <button
-        class="btn btn-outline-secondary"
+        class="btn btn-outline-secondary text-uppercase"
         data-cy="watchers-button-cancel"
         @click.stop="displayTableList"
       >
         {{ $t("Cancel") }}
       </button>
       <button
-        class="btn btn-secondary ml-3"
+        class="btn btn-secondary ml-3 text-uppercase"
         data-cy="watchers-button-save"
         @click="validateDataAndSave"
       >
@@ -701,6 +701,7 @@ export default {
 
         if (!this.config.uid) {
           this.config.uid = _.uniqueId(new Date().getTime());
+          this.config.byPass = false;
         }
 
         this.save();
@@ -743,7 +744,7 @@ export default {
 }
 
 .editor {
-  height: 8.5em;
+  height: 375px;
   z-index: 0;
 }
 
diff --git a/src/components/watchers-list.vue b/src/components/watchers-list.vue
index 18abbd3b4..0f2f4e78f 100644
--- a/src/components/watchers-list.vue
+++ b/src/components/watchers-list.vue
@@ -1,67 +1,48 @@
 <template>
-  <div>
-    <b-row class="mb-3">
-      <b-col>
-        <basic-search v-model="filter" @submit="search">
-          <template slot="buttons">
-            <b-btn class="text-nowrap" variant="secondary" @click.stop="displayFormProperty" data-cy="watchers-add-watcher">
-              <i class="fas fa-plus" />
-              {{ $t('Watcher') }}
-            </b-btn>
-          </template>
-        </basic-search>
-      </b-col>
-    </b-row>
-
-    <div class="card card-body table-card watchers-list">
-      <b-table
-        :items="filtered"
-        :fields="fields"
-        :empty-text="$t('No Data Available')"
-        data-cy="watchers-table"
-        sort-icon-left
+  <Sortable
+    :fields="fields"
+    :items="value"
+    filter-key="name,watching,output_variable,script.title"
+    disable-key="byPass"
+    :inline-edit="false"
+    :data-test-actions="{
+      tableBox: { 'data-cy': 'watchers-table' },
+      btnNew: { 'data-cy': 'watchers-add-watcher' },
+      btnEdit: { 'data-cy': 'watchers-table-edit' },
+      btnDelete: { 'data-cy': 'watchers-table-remove' },
+    }"
+    @item-edit="editProperty"
+    @item-delete="deleteProperty"
+    @add-page="displayFormProperty"
+    @ordered="$emit('ordered', $event)"
+    :searchProperties= "searchProperties"
+  >
+    <template #options="{ item }">
+      <button
+        v-b-tooltip="{ customClass: 'bypass-btn-tooltip' }"
+        :title="item.byPass ? $t('Unbypass Watcher') : $t('Bypass Watcher')"
+        class="btn"
+        data-test="watchers-bypass"
+        @click.prevent="$emit('toggle-bypass', item.uid)"
       >
-        <template #cell(actions)="{item}">
-          <div class="actions">
-            <div class="popout">
-              <b-btn
-                variant="link"
-                @click="editProperty(item)"
-                v-b-tooltip.hover
-                :title="$t('Edit')"
-                data-cy="watchers-table-edit"
-              >
-                <i class="fas fa-edit fa-lg fa-fw"/>
-              </b-btn>
-              <b-btn
-                variant="link"
-                @click="deleteProperty(item)"
-                v-b-tooltip.hover
-                :title="$t('Delete')"
-                data-cy="watchers-table-remove"
-              >
-                <i class="fas fa-trash-alt fa-lg fa-fw"/>
-              </b-btn>
-            </div>
-          </div>
-        </template>
-      </b-table>
-    </div>
-    <template slot="modal-footer">
-      <span />
+        <img :src="getByPassIcon(item)" alt="Bypass" width="24" />
+      </button>
+      <div class="sortable-item-vr"></div>
     </template>
-  </div>
+  </Sortable>
 </template>
 
 <script>
 import BasicSearch from './basic-search';
 import { FormInput, FormTextArea } from '@processmaker/vue-form-elements';
+import Sortable from './sortable/Sortable.vue';
 
 export default {
   components: {
     BasicSearch,
     FormInput,
     FormTextArea,
+    Sortable,
   },
   props: {
     value: {
@@ -90,7 +71,6 @@ export default {
         {
           label: this.$t('Name'),
           key: 'name',
-          tdClass: 'break-word',
         },
         {
           label: this.$t('Watching Variable'),
@@ -99,39 +79,16 @@ export default {
         {
           label: this.$t('Output Variable'),
           key: 'output_variable',
-          tdClass: 'break-word',
         },
         {
           label: this.$t('Source'),
           key: 'script.title',
         },
-        {
-          key: 'actions',
-          label: '',
-        },
       ],
+      searchProperties: ['name', 'output_variable', 'watching', 'script.title'],
     };
   },
-  computed: {
-    filtered() {
-      const list = this.getValuesWithOutputVarsNames(this.value);
-
-      if (!this.filter) {
-        return list;
-      }
-      const filtered = [];
-      list.forEach(item => {
-        if (Object.keys(item).find(key => typeof item[key] === 'string' ? item[key].indexOf(this.filter)>=0 : false)) {
-          filtered.push(item);
-        }
-      });
-      return filtered;
-    },
-  },
   methods: {
-    search() {
-
-    },
     displayFormProperty() {
       this.$emit('display-form');
     },
@@ -141,36 +98,26 @@ export default {
     deleteProperty(item) {
       this.$emit('delete-form', item);
     },
-    getValuesWithOutputVarsNames(values) {
-      let list = values.map(watcher => {
-        let newItem = Object.assign({}, watcher);
-        // If watcher is a data source, extract the output vars
-        if (newItem.script && newItem.script.id && newItem.script.id.substr(0, 11) === 'data_source') {
-          let scriptConfig = JSON.parse(newItem.script_configuration);
-          let vars = (scriptConfig && scriptConfig.dataMapping)
-            ? scriptConfig.dataMapping.map(mapping => mapping.key).join(', ')
-            : '';
-
-          // var names string won't have more than 50 characters to avoid distorting the UI
-          const maxLen = 50;
-          newItem.output_variable = vars.length > maxLen
-            ? vars.substr(0, maxLen) + '...'
-            : vars;
-        }
-        return newItem;
-      });
-      return list;
+    getByPassIcon(item) {
+      return new URL(
+        `../assets/icons/${item.byPass ? 'Unbypass' : 'Bypass'}.svg`,
+        import.meta.url,
+      ).href;
     },
   },
 };
 </script>
 
-<style>
-.watchers-list .break-word {
-  word-break: break-word;
-}
+<style lang="scss" scoped>
+.bypass-btn-tooltip::v-deep {
+  & .tooltip-inner {
+    background-color: #EBEEF2 !important;
+    color: #444444 !important;
+  }
 
-.watchers-list .table {
-  margin-bottom: 0;
+  & .arrow:before {
+    border-top-color: #EBEEF2 !important;
+    border-bottom-color: #EBEEF2 !important;
+  }
 }
 </style>
diff --git a/src/components/watchers-popup.vue b/src/components/watchers-popup.vue
index a8f498050..d343de46f 100644
--- a/src/components/watchers-popup.vue
+++ b/src/components/watchers-popup.vue
@@ -1,17 +1,41 @@
 <template>
   <b-modal
     ref="modal"
-    size="lg"
+    :size="modalSize"
     id="watchers-popup"
-    :title="$t('Watchers')"
     @hidden="displayList"
     hide-footer
     header-close-content="&times;"
     no-close-on-backdrop
     data-cy="watchers-modal"
   >
+    <template #modal-title>
+      {{ $t('Watchers') }}
+      <small class="d-block my-2 modal-subtitle">
+        {{ $t('Manage your active watchers for this screen') }}
+      </small>
+    </template>
     <template v-if="enableList">
-      <watchers-list v-model="current" @display-form="displayForm" @edit-form="edit" @delete-form="confirmRemoval"/>
+      <watchers-list
+        v-model="current"
+        @display-form="displayForm"
+        @edit-form="edit"
+        @delete-form="confirmRemoval"
+        @toggle-bypass="toggleBypass"
+        @ordered="$emit('input', $event)"
+      />  
+
+      <div class="d-flex justify-content-end mt-3 mr-1">
+        <div class="d-flex align-items-end">
+          <button
+            class="btn btn-secondary ml-3 text-uppercase"
+            data-cy="calcs-button-close"
+            @click="$refs.modal.hide()"
+          >
+            {{ $t("Done") }}
+          </button>
+        </div>
+      </div>
     </template>
     <template v-else>
       <required />
@@ -37,34 +61,75 @@ export default {
     WatchersList,
     WatchersForm,
   },
-  props: ['value'],
+  props: {
+    value: {
+      type: Array,
+      required: true,
+    },
+  },
   data() {
     return {
       enableList: true,
       current: [],
       add: {
-        uid:'',
-        name:'',
-        variable:'',
-        script_id:'',
-        script_key:'',
-        input_data:'',
-        script_configuration:'',
-        synchronous:false,
+        uid: '',
+        name: '',
+        variable: '',
+        script_id: '',
+        script_key: '',
+        input_data: '',
+        script_configuration: '',
+        synchronous: false,
+        byPass: false,
       },
     };
   },
+  computed: {
+    modalSize() {
+      return "xl";
+    },
+  },
   watch: {
     value: {
       handler(value) {
-        this.current = value;
+        this.current = this.getValuesWithOutputVarsNames(value);
       },
     },
-  },
-  computed: {
-
   },
   methods: {
+    getValuesWithOutputVarsNames(values) {
+      const list = values.map((watcher) => {
+        const newItem = { ...watcher };
+
+        if (!Object.hasOwn(newItem, 'byPass')) {
+          newItem.byPass = false;
+        }
+
+        // If watcher is a data source, extract the output vars
+        if (newItem?.script?.id?.substr(0, 11) === 'data_source') {
+          const scriptConfig = JSON.parse(newItem.script_configuration);
+          const vars = scriptConfig?.dataMapping
+            ? scriptConfig.dataMapping.map((mapping) => mapping.key).join(', ')
+            : '';
+
+          // var names string won't have more than 50 characters to avoid distorting the UI
+          const maxLen = 50;
+          newItem.output_variable =
+            vars.length > maxLen ? `${vars.substr(0, maxLen)}...` : vars;
+        }
+
+        return newItem;
+      });
+
+      return list;
+    },
+    toggleBypass(itemUid) {
+      this.current = this.current.map((item) =>
+        item.uid === itemUid ? { ...item, byPass: !item.byPass } : item,
+      );
+
+      this.$emit('input', this.current);
+    },
     show() {
       this.$refs.modal.show();
     },
@@ -118,3 +183,11 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.modal-subtitle {
+  color: #556271;
+  font-size: 1rem;
+  font-weight: 400;
+}
+</style>
diff --git a/src/customLogs.js b/src/customLogs.js
new file mode 100644
index 000000000..e24b88e09
--- /dev/null
+++ b/src/customLogs.js
@@ -0,0 +1,26 @@
+export default class CustomLog {
+  static logWithStyle(icon, type, name, status, message, color) {
+    const baseColor = color === '255, 0, 0' ? 'red' : 'green';
+    const style = `background-color: rgba(${color}, 0.1); color: ${baseColor}; padding: 2px 4px; border-radius: 3px;`;
+    const transparentStyle = 'background-color: transparent';
+
+    const logPrefix = `%c${icon} %c${type} "${name}" has`;
+    const logStatus = `%c${status}`;
+
+    if (status === 'RUN') {
+      console.log(`${logPrefix} ${logStatus}`, style, transparentStyle, style);
+    } else if (status === 'FAILED') {
+      console.groupCollapsed(`${logPrefix} ${logStatus}`, style, transparentStyle, style);
+      console.log(`%c${message}`, style);
+      console.groupEnd();
+    }
+  }
+
+  static success(type, name) {
+    this.logWithStyle('\u2705', type, name, 'RUN', '', '0, 128, 0');
+  }
+
+  static error(type, name, message) {
+    this.logWithStyle('\u274C', type, name, 'FAILED', message, '255, 0, 0');
+  }
+}
diff --git a/src/mixins/computedFields.js b/src/mixins/computedFields.js
index 52256e0c5..d34d969e3 100644
--- a/src/mixins/computedFields.js
+++ b/src/mixins/computedFields.js
@@ -1,4 +1,5 @@
 import { Parser } from "expr-eval";
+import CustomLog from '../customLogs';
 
 export default {
   methods: {
@@ -9,7 +10,6 @@ export default {
         // Monitor if variable belongs to data (defined variables) or
         // vdata (external variables)in this way the event is not
         // executed again when the variable is update
-
         const data = this.getDataReference(null, () => {
           throw new Error(
             "You are not allowed to set properties from inside an expression"
@@ -19,18 +19,36 @@ export default {
         if (type === "expression") {
           value = Parser.evaluate(expression, data);
         } else {
+          // Create a new function with the expression and bind the data context
           // eslint-disable-next-line no-new-func
-          value = new Function(expression).bind(data)();
+          value = new Function(expression).bind(data);
+          return { result: value(), error: null };
         }
 
         if (value instanceof Date) {
           value = value.toISOString();
         }
-
-        return value;
-      } catch (e) {
-        console.warn("There was a problem evaluating the expression", e);
+        return { result: value, error: null };
+      } catch (error) {
+        // Catch any errors and return them
+        return { result: null, error };
       }
-    }
+    },
+    /**
+     * Logs an error message with a custom format.
+     * @param {string} name - The name of the calculation.
+     * @param {string} message - The error message.
+     */
+    customErrorLog(name, message) {
+      CustomLog.error('Calc', name, message);
+    },
+
+    /**
+     * Logs a success message with a custom format.
+     * @param {string} name - The name of the calculation.
+     */
+    customSuccessLog(name) {
+      CustomLog.success('Calc', name);
+    },
   }
 };
diff --git a/src/mixins/extensions/ComputedFields.js b/src/mixins/extensions/ComputedFields.js
index a564abccb..82e7590d9 100644
--- a/src/mixins/extensions/ComputedFields.js
+++ b/src/mixins/extensions/ComputedFields.js
@@ -9,18 +9,39 @@ export default {
      *   this.setValueAsync("calcProperty", value, this.vdata);
      * }
      */
-    computedFields(screen, definition) {
+    computedFields(screen, definition, logsEnabled = true) {
       // For each computed field defined
       definition.computed.forEach((computed) => {
+        if (computed.byPass) {
+          // If the computed field has bypass set to true, skip it
+          return;
+        }
         const formula = JSON.stringify(computed.formula);
         const type = JSON.stringify(computed.type);
         const name = JSON.stringify(computed.property);
         const safeDotName = this.safeDotName(computed.property);
         const code = `
-        let value = this.evaluateExpression(${formula}, ${type});
-        value = this.addNonDefinedComputedAttributes(value);
-        this.setValue(${name}, value, this.vdata);
-        return value;`;
+        const evaluatedExpression = this.evaluateExpression(${formula}, ${type});
+          // Handle errors if any
+          if (evaluatedExpression.error) {
+            if (${logsEnabled}) {
+              this.customErrorLog(${name}, evaluatedExpression.error);
+            }
+          } else {
+            // Add non-defined computed attributes
+            const value = this.addNonDefinedComputedAttributes(evaluatedExpression.result);
+            // Set the value
+            this.setValue(${name}, value, this.vdata);
+
+            // Log the successful calculation if logging is enabled
+            if (${logsEnabled}) {
+              this.customSuccessLog(${name});
+            }
+
+            // Return the result
+            return value;
+          }
+        `;
         this.addComputed(screen, safeDotName, code, "");
         // required to enable reactivity of computed field
         this.addWatch(screen, safeDotName, "");
diff --git a/src/mixins/extensions/Watchers.js b/src/mixins/extensions/Watchers.js
index 61715da61..4f1dbba07 100644
--- a/src/mixins/extensions/Watchers.js
+++ b/src/mixins/extensions/Watchers.js
@@ -20,6 +20,10 @@ export default {
       if (definition.watchers) {
         screen.mixins.push(watchersMixin);
         definition.watchers.filter(this.filterWatchers).forEach((watcher) => {
+          if (watcher?.byPass) {
+            // If the watcher has bypass set to true, skip it
+            return;
+          }
           this.addMounted(screen, `
             this.$nextTick(() => this.$watch('vdata.${watcher.watching}', (newValue) => {
               if (typeof newValue !== 'undefined') {
diff --git a/src/mixins/watchers.js b/src/mixins/watchers.js
index 402022e02..f3226dab5 100644
--- a/src/mixins/watchers.js
+++ b/src/mixins/watchers.js
@@ -1,5 +1,6 @@
 import Mustache from 'mustache';
 import _ from 'lodash';
+import CustomLog from '../customLogs';
 
 const broadcastEvent = '.Illuminate\\\\Notifications\\\\Events\\\\BroadcastNotificationCreated';
 
@@ -44,7 +45,7 @@ export default {
           // Data Source
           const requestId = _.get(this.vdata, '_request.id', null);
           const params = { config: JSON.parse(config), data: this.vdata };
-          
+
           this.$dataProvider.postDataSource(scriptId, requestId, params).then(response => {
             this.$emit('asyncWatcherCompleted');
             complete(response.data);
@@ -67,6 +68,7 @@ export default {
           });
         }
       }).then((response) => {
+        CustomLog.success('Watcher', watcher.name);
         // If watcher has an output variable and is a script
         if (watcher.output_variable && (watcher.script_key || '').length === 0) {
           this.setValue(watcher.output_variable, response, this.vdata);
@@ -94,6 +96,7 @@ export default {
         }
         return response;
       }).catch(error => {
+        CustomLog.error('Watcher', watcher.name, error.message);
         const message = _.get(error, 'response.data.message', error.message);
         if (watcher.synchronous) {
           this.$parent.$refs.watchersSynchronous.error(message);
@@ -135,4 +138,4 @@ export default {
   destroyed() {
     this.cleanEchoListeners();
   },
-};
\ No newline at end of file
+};
diff --git a/src/stories/Sortable.stories.js b/src/stories/Sortable.stories.js
index 46070b6a7..fd7ef083c 100644
--- a/src/stories/Sortable.stories.js
+++ b/src/stories/Sortable.stories.js
@@ -31,6 +31,7 @@ export default {
         @sorted="sorted"
         @item-edit="editPage"
         @item-delete="deletePage"
+        :searchProperties= "['name']"
       />
     `,
     data() {
@@ -59,6 +60,12 @@ export default {
 // Preview the component
 export const Preview = {
   args: {
+    fields: [
+      {
+        label: "Name",
+        key: "name",
+      },
+    ],
     filterKey: "name",
     items: [
       { name: "Page 1", order: 1 },
@@ -73,6 +80,12 @@ export const Preview = {
 // User can reorder items
 export const UserCanReorderItems = {
   args: {
+    fields: [
+      {
+        label: "Name",
+        key: "name",
+      },
+    ],
     filterKey: "name",
     items: [
       { name: "Page 1", order: 1 },
@@ -122,13 +135,21 @@ export const UserCanReorderItems = {
 // User can filter by text
 export const UserCanFilterByText = {
   args: {
+    fields: [
+      {
+        label: "Name",
+        key: "name",
+      },
+    ],
     filterKey: "name",
     items: [
       { name: "Zeus", order: 1 },
       { name: "Hera", order: 2 },
       { name: "Poseidon", order: 3 },
       { name: "Athena", order: 4 },
-      { name: "Hephaïstus", order: 5 }
+      { name: "Hephaïstus", order: 5 },
+      { name: "newTotalLeave", order: 5 },
+      { name: "newLeaveRemaining", order: 5 },
     ]
   },
   play: async ({ canvasElement, step }) => {
@@ -151,7 +172,7 @@ export const UserCanFilterByText = {
       await userEvent.type(search, "a");
       const items = canvas.getAllByTestId(/item-\d+/);
       await waitFor(() => {
-        expect(items).toHaveLength(3);
+        expect(items).toHaveLength(5);
       });
     });
 
@@ -164,12 +185,26 @@ export const UserCanFilterByText = {
         expect(items).toHaveLength(1);
       });
     });
+    await step("Type 'new'", async () => {
+      await userEvent.clear(search);
+      await userEvent.type(search, "new");
+      const items = canvas.getAllByTestId(/item-\d+/);
+      await waitFor(() => {
+        expect(items).toHaveLength(2);
+      });
+    });
   }
 };
 
 // User can sort with filter by text
 export const UserCanSortWithFilterByText = {
   args: {
+    fields: [
+      {
+        label: "Name",
+        key: "name",
+      },
+    ],
     filterKey: "name",
     items: [
       { name: "Zeus", order: 1 },
@@ -222,22 +257,34 @@ export const UserCanSortWithFilterByText = {
     expect(items[3]).toHaveTextContent("Athena");
     expect(items[4]).toHaveTextContent("Hera");
 
-    // Drag "Athena" to "Hera" position
-    await dragAndDrop(canvas.getByTitle("Athena"), canvas.getByTitle("Hera"));
-
-    // Check the new order
+    await dragAndDrop(
+      canvas.getByTitle("Hephaïstus"),
+      canvas.getByTitle("Athena")
+    );
+    await dragAndDrop(
+      canvas.getByTitle("Hephaïstus"),
+      canvas.getByTitle("Hera")
+    );
+ 
+    // // Check the new order
     const itemsOrder = canvas.getAllByTestId(/item-\d+/);
-    expect(itemsOrder[0]).toHaveAttribute("data-order", "1");
-    expect(itemsOrder[1]).toHaveAttribute("data-order", "2");
-    expect(itemsOrder[2]).toHaveAttribute("data-order", "3");
-    expect(itemsOrder[3]).toHaveAttribute("data-order", "4");
-    expect(itemsOrder[4]).toHaveAttribute("data-order", "5");
+    await expect(itemsOrder[0]).toHaveAttribute("data-order", "1");
+    await expect(itemsOrder[1]).toHaveAttribute("data-order", "2");
+    await expect(itemsOrder[2]).toHaveAttribute("data-order", "3");
+    await expect(itemsOrder[3]).toHaveAttribute("data-order", "4");
+    await expect(itemsOrder[4]).toHaveAttribute("data-order", "5");
   }
 };
 
 // User can reorder items that does not have an order
 export const UserCanReorderItemsThatDoesNotHaveAnOrder = {
   args: {
+    fields: [
+      {
+        label: "Name",
+        key: "name",
+      },
+    ],
     filterKey: "name",
     items: [
       { name: "Page 1" },
diff --git a/tests/e2e/fixtures/FOUR-13453.json b/tests/e2e/fixtures/FOUR-13453.json
new file mode 100644
index 000000000..5e53208ad
--- /dev/null
+++ b/tests/e2e/fixtures/FOUR-13453.json
@@ -0,0 +1 @@
+{"type":"screen_package","version":"2","screens":[{"id":11,"uuid":"9c19be72-bd51-41a3-a8b0-adf7ea50ca7a","screen_category_id":"1","title":"screen01","description":"screen 01","type":"FORM","config":[{"name":"screen01","items":[{"label":"Line Input","config":{"icon":"far fa-square","name":"first_name","type":"text","label":"First Name","helper":null,"readonly":false,"dataFormat":"string","validation":[{"value":"required","helper":"Checks if the length of the String representation of the value is >","content":"Required"}],"placeholder":null,"defaultValue":{"mode":"basic","value":"{{first_name_calc}}"}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"extends":{"props":["label","error","options","helper","name","value","selectedControl"],"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Line Input","config":{"icon":"far fa-square","name":"last_name","type":"text","label":"Last Name","helper":null,"readonly":false,"dataFormat":"string","validation":[{"value":"required","helper":"Checks if the length of the String representation of the value is >","content":"Required"}],"placeholder":null,"defaultValue":{"mode":"basic","value":null}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"_Ctor":[],"extends":{"_Ctor":[],"props":{"name":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"options":{"type":null},"selectedControl":{"type":null}},"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Line Input","config":{"icon":"far fa-square","name":"full_name","type":"text","label":"Full Name","helper":null,"readonly":false,"dataFormat":"string","validation":[{"value":"required","helper":"Checks if the length of the String representation of the value is >","content":"Required"}],"placeholder":null,"defaultValue":{"mode":"basic","value":null}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"_Ctor":[],"extends":{"_Ctor":[],"props":{"name":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"options":{"type":null},"selectedControl":{"type":null}},"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Line Input","config":{"icon":"far fa-square","name":"email","type":"text","label":"Email","helper":null,"readonly":false,"dataFormat":"string","validation":[{"value":"required","helper":"Checks if the length of the String representation of the value is >","content":"Required"}],"placeholder":null,"defaultValue":{"mode":"basic","value":"{{first_name_calc}}"}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"_Ctor":[],"extends":{"_Ctor":[],"props":{"name":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"options":{"type":null},"selectedControl":{"type":null}},"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Submit Button","config":{"icon":"fas fa-share-square","name":null,"event":"submit","label":"Save","loading":false,"tooltip":[],"variant":"primary","fieldValue":null,"loadingLabel":"Loading...","defaultSubmit":true},"component":"FormButton","inspector":[{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the button's text"}},{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^(?:[A-Za-z])(?:[0-9A-Z_.a-z])*(?<![.])$\/|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormMultiselect","field":"event","config":{"label":"Type","helper":"Choose whether the button should submit the form","options":[{"value":"submit","content":"Submit Button"},{"value":"script","content":"Regular Button"}]}},{"type":"LoadingSubmitButton","field":"loading","config":{"label":"Loading Submit Button","helper":"Loading Submit Button"}},{"type":"LabelSubmitButton","field":"loadingLabel","config":{"label":"Loading Submit Button Label","helper":"Loading Submit Button Label"}},{"type":{"props":["label","value","helper"],"watch":{"value":{"immediate":true}},"methods":[],"computed":[],"_compiled":true,"components":{"FormTextArea":{"name":"FormTextArea","_Ctor":[],"props":{"name":{"type":null},"rows":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"readonly":{"type":null},"richtext":{"type":null},"controlClass":{"type":null}},"watch":{"rows":{"immediate":true}},"mixins":[{"methods":[],"directives":{"uni-id":[],"uni-for":[],"uni-form":[],"uni-aria-owns":[],"uni-aria-flowto":[],"uni-aria-controls":[],"uni-aria-labelledby":[],"uni-aria-describedby":[],"uni-aria-activedescendant":[]}},{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"Editor":{"props":{"plugins":[null,null],"toolbar":[null,null],"modelEvents":[null,null]},"watch":[]},"DisplayErrors":{"props":["name","error","validator"],"computed":[],"_compiled":true,"staticRenderFns":[]},"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"field":"tooltip","config":{"label":"Tooltip","helper":null}},{"type":"FormInput","field":"fieldValue","config":{"label":"Value","helper":"The value being submitted"}},{"type":"FormMultiselect","field":"variant","config":{"label":"Button Variant Style","helper":"The variant determines the appearance of the button","options":[{"value":"primary","content":"Primary"},{"value":"secondary","content":"Secondary"},{"value":"success","content":"Success"},{"value":"danger","content":"Danger"},{"value":"warning","content":"Warning"},{"value":"info","content":"Info"},{"value":"light","content":"Light"},{"value":"dark","content":"Dark"},{"value":"link","content":"Link"}]}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormSubmit","editor-component":"FormButton"}],"order":1}],"computed":[{"id":15,"name":"first_name","type":"javascript","order":1,"byPass":false,"formula":"return this.first_name.toLowerCase()","property":"first_name_calc"},{"id":16,"name":"last_name","type":"javascript","order":2,"byPass":false,"formula":"return this.first_name.toUpperCase()","property":"last_name"},{"id":17,"name":"email","type":"javascript","order":3,"byPass":false,"formula":"return this.first_name + \"@email.com\"","property":"email"},{"id":18,"name":"full_name","type":"javascript","order":4,"byPass":false,"formula":"return this.first_name + \" \" + this.last_name","property":"full_name"}],"custom_css":null,"created_at":"2024-05-22T02:10:33+00:00","updated_at":"2024-06-11T16:25:37+00:00","status":"ACTIVE","key":null,"watchers":[],"translations":null,"is_template":0,"asset_type":null,"projects":"[]","categories":[{"id":1,"uuid":"9c19b7a0-e236-43a1-b6c0-6e11753ae5b1","name":"Uncategorized","status":"ACTIVE","is_system":0,"created_at":"2024-05-22T01:51:28+00:00","updated_at":"2024-05-22T01:51:28+00:00","pivot":{"category_type":"ProcessMaker\\Models\\ScreenCategory","assignable_id":11,"category_id":1}}]}],"screen_categories":[],"scripts":[]}
diff --git a/tests/e2e/fixtures/FOUR-13457.json b/tests/e2e/fixtures/FOUR-13457.json
new file mode 100644
index 000000000..c2fbd43a8
--- /dev/null
+++ b/tests/e2e/fixtures/FOUR-13457.json
@@ -0,0 +1 @@
+{"type":"screen_package","version":"2","screens":[{"id":11,"uuid":"9c19be72-bd51-41a3-a8b0-adf7ea50ca7a","screen_category_id":"1","title":"screen01","description":"screen 01","type":"FORM","config":[{"name":"screen01","items":[{"label":"Line Input","config":{"icon":"far fa-square","name":"first_name","type":"text","label":"First Name","helper":null,"readonly":false,"dataFormat":"string","validation":[{"value":"required","helper":"Checks if the length of the String representation of the value is >","content":"Required"}],"placeholder":null,"defaultValue":{"mode":"basic","value":"{{first_name_calc}}"}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"extends":{"props":["label","error","options","helper","name","value","selectedControl"],"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Line Input","config":{"icon":"far fa-square","name":"last_name","type":"text","label":"Last Name","helper":null,"readonly":false,"dataFormat":"string","validation":[{"value":"required","helper":"Checks if the length of the String representation of the value is >","content":"Required"}],"placeholder":null,"defaultValue":{"mode":"basic","value":null}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"_Ctor":[],"extends":{"_Ctor":[],"props":{"name":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"options":{"type":null},"selectedControl":{"type":null}},"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Line Input","config":{"icon":"far fa-square","name":"full_name","type":"text","label":"Full Name","helper":null,"readonly":false,"dataFormat":"string","validation":[{"value":"required","helper":"Checks if the length of the String representation of the value is >","content":"Required"}],"placeholder":null,"defaultValue":{"mode":"basic","value":null}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"_Ctor":[],"extends":{"_Ctor":[],"props":{"name":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"options":{"type":null},"selectedControl":{"type":null}},"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Line Input","config":{"icon":"far fa-square","name":"email","type":"text","label":"Email","helper":null,"readonly":false,"dataFormat":"string","validation":[{"value":"required","helper":"Checks if the length of the String representation of the value is >","content":"Required"}],"placeholder":null,"defaultValue":{"mode":"basic","value":"{{first_name_calc}}"}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"_Ctor":[],"extends":{"_Ctor":[],"props":{"name":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"options":{"type":null},"selectedControl":{"type":null}},"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Submit Button","config":{"icon":"fas fa-share-square","name":null,"event":"submit","label":"Save","loading":false,"tooltip":[],"variant":"primary","fieldValue":null,"loadingLabel":"Loading...","defaultSubmit":true},"component":"FormButton","inspector":[{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the button's text"}},{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^(?:[A-Za-z])(?:[0-9A-Z_.a-z])*(?<![.])$\/|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormMultiselect","field":"event","config":{"label":"Type","helper":"Choose whether the button should submit the form","options":[{"value":"submit","content":"Submit Button"},{"value":"script","content":"Regular Button"}]}},{"type":"LoadingSubmitButton","field":"loading","config":{"label":"Loading Submit Button","helper":"Loading Submit Button"}},{"type":"LabelSubmitButton","field":"loadingLabel","config":{"label":"Loading Submit Button Label","helper":"Loading Submit Button Label"}},{"type":{"props":["label","value","helper"],"watch":{"value":{"immediate":true}},"methods":[],"computed":[],"_compiled":true,"components":{"FormTextArea":{"name":"FormTextArea","_Ctor":[],"props":{"name":{"type":null},"rows":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"readonly":{"type":null},"richtext":{"type":null},"controlClass":{"type":null}},"watch":{"rows":{"immediate":true}},"mixins":[{"methods":[],"directives":{"uni-id":[],"uni-for":[],"uni-form":[],"uni-aria-owns":[],"uni-aria-flowto":[],"uni-aria-controls":[],"uni-aria-labelledby":[],"uni-aria-describedby":[],"uni-aria-activedescendant":[]}},{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"Editor":{"props":{"plugins":[null,null],"toolbar":[null,null],"modelEvents":[null,null]},"watch":[]},"DisplayErrors":{"props":["name","error","validator"],"computed":[],"_compiled":true,"staticRenderFns":[]},"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"field":"tooltip","config":{"label":"Tooltip","helper":null}},{"type":"FormInput","field":"fieldValue","config":{"label":"Value","helper":"The value being submitted"}},{"type":"FormMultiselect","field":"variant","config":{"label":"Button Variant Style","helper":"The variant determines the appearance of the button","options":[{"value":"primary","content":"Primary"},{"value":"secondary","content":"Secondary"},{"value":"success","content":"Success"},{"value":"danger","content":"Danger"},{"value":"warning","content":"Warning"},{"value":"info","content":"Info"},{"value":"light","content":"Light"},{"value":"dark","content":"Dark"},{"value":"link","content":"Link"}]}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormSubmit","editor-component":"FormButton"}],"order":1}],"computed":[{"id":1,"name":"first_name","type":"javascript","order":4,"byPass":false,"formula":"return this.first_name.toLowerCase()","property":"first_name_calc"},{"id":2,"name":"last_name","type":"javascript","order":2,"byPass":false,"formula":"return this.first_name.toUpperCase()","property":"last_name"},{"id":3,"name":"email","type":"javascript","order":3,"byPass":false,"formula":"return this.first_name + \"@email.com\"","property":"email_calc"},{"id":4,"name":"full_name","type":"javascript","order":1,"byPass":false,"formula":"return this.first_name + \" \" + this.last_name","property":"full_name"},{"id":5,"name":"another calc","type":"javascript","order":5,"byPass":true,"formula":"return this.first_name","property":"another_calc"}],"custom_css":null,"created_at":"2024-05-22T02:10:33+00:00","updated_at":"2024-06-19T14:14:32+00:00","status":"ACTIVE","key":null,"watchers":[{"input_data":"{}","script_configuration":"{}","synchronous":false,"show_async_loading":false,"run_onload":false,"name":"watcher_first_name","watching":"first_name","script":{"id":"script-9","uuid":"9c32cf09-c20c-40dd-97c9-00f9a2764efc","key":null,"title":"test01","description":"test 01","language":"php","code":"[]","retry_wait_time":5,"retry_attempts":0,"timeout":60,"run_as_user_id":1,"created_at":"2024-06-03T13:12:38+00:00","updated_at":"2024-06-03T13:12:38+00:00","status":"ACTIVE","script_category_id":"1","script_executor_id":1,"is_template":0,"asset_type":null,"projects":"[]"},"script_id":"9","script_key":null,"uid":"17188063722341"},{"input_data":"{}","script_configuration":"{}","synchronous":false,"show_async_loading":false,"run_onload":false,"name":"watcher_last_name","watching":"last_name","script":{"id":"script-9","uuid":"9c32cf09-c20c-40dd-97c9-00f9a2764efc","key":null,"title":"test01","description":"test 01","language":"php","code":"[]","retry_wait_time":5,"retry_attempts":0,"timeout":60,"run_as_user_id":1,"created_at":"2024-06-03T13:12:38+00:00","updated_at":"2024-06-03T13:12:38+00:00","status":"ACTIVE","script_category_id":"1","script_executor_id":1,"is_template":0,"asset_type":null,"projects":"[]"},"script_id":"9","script_key":null,"uid":"17188063923602"},{"input_data":"{}","script_configuration":"{}","synchronous":false,"show_async_loading":false,"run_onload":false,"name":"watcher_full_name","watching":"full_name","script":{"id":"script-9","uuid":"9c32cf09-c20c-40dd-97c9-00f9a2764efc","key":null,"title":"test01","description":"test 01","language":"php","code":"[]","retry_wait_time":5,"retry_attempts":0,"timeout":60,"run_as_user_id":1,"created_at":"2024-06-03T13:12:38+00:00","updated_at":"2024-06-03T13:12:38+00:00","status":"ACTIVE","script_category_id":"1","script_executor_id":1,"is_template":0,"asset_type":null,"projects":"[]"},"script_id":"9","script_key":null,"uid":"17188064195253"},{"input_data":"{}","script_configuration":"{}","synchronous":false,"show_async_loading":false,"run_onload":false,"name":"watcher_email","watching":"email","script":{"id":"script-9","uuid":"9c32cf09-c20c-40dd-97c9-00f9a2764efc","key":null,"title":"test01","description":"test 01","language":"php","code":"[]","retry_wait_time":5,"retry_attempts":0,"timeout":60,"run_as_user_id":1,"created_at":"2024-06-03T13:12:38+00:00","updated_at":"2024-06-03T13:12:38+00:00","status":"ACTIVE","script_category_id":"1","script_executor_id":1,"is_template":0,"asset_type":null,"projects":"[]"},"script_id":"9","script_key":null,"uid":"17188064359194"},{"input_data":"{}","script_configuration":"{}","synchronous":false,"show_async_loading":false,"run_onload":false,"name":"watcher_05","watching":"full_name","script":{"id":"script-9","uuid":"9c32cf09-c20c-40dd-97c9-00f9a2764efc","key":null,"title":"test01","description":"test 01","language":"php","code":"[]","retry_wait_time":5,"retry_attempts":0,"timeout":60,"run_as_user_id":1,"created_at":"2024-06-03T13:12:38+00:00","updated_at":"2024-06-03T13:12:38+00:00","status":"ACTIVE","script_category_id":"1","script_executor_id":1,"is_template":0,"asset_type":null,"projects":"[]"},"script_id":"9","script_key":null,"uid":"17188064577035"}],"translations":null,"is_template":0,"asset_type":null,"projects":"[]","categories":[{"id":1,"uuid":"9c19b7a0-e236-43a1-b6c0-6e11753ae5b1","name":"Uncategorized","status":"ACTIVE","is_system":0,"created_at":"2024-05-22T01:51:28+00:00","updated_at":"2024-05-22T01:51:28+00:00","pivot":{"category_type":"ProcessMaker\\Models\\ScreenCategory","assignable_id":11,"category_id":1}}]}],"screen_categories":[],"scripts":[{"id":9,"uuid":"9c32cf09-c20c-40dd-97c9-00f9a2764efc","key":null,"title":"test01","description":"test 01","language":"php","code":"[]","retry_wait_time":5,"retry_attempts":0,"timeout":60,"run_as_user_id":1,"created_at":"2024-06-03T13:12:38+00:00","updated_at":"2024-06-03T13:12:38+00:00","status":"ACTIVE","script_category_id":"1","script_executor_id":1,"is_template":0,"asset_type":null,"projects":"[]","categories":[{"id":1,"uuid":"9c19b7a0-e3ac-4fc1-9026-c7b26de83aad","name":"Uncategorized","status":"ACTIVE","is_system":0,"created_at":"2024-05-22T01:51:28+00:00","updated_at":"2024-05-22T01:51:28+00:00","pivot":{"category_type":"ProcessMaker\\Models\\ScriptCategory","assignable_id":9,"category_id":1}}]}]}
\ No newline at end of file
diff --git a/tests/e2e/fixtures/FOUR-5139-calcError.json b/tests/e2e/fixtures/FOUR-5139-calcError.json
new file mode 100644
index 000000000..8016c6944
--- /dev/null
+++ b/tests/e2e/fixtures/FOUR-5139-calcError.json
@@ -0,0 +1 @@
+{"type":"screen_package","version":"2","screens":[{"id":13,"screen_category_id":"1","title":"FOUR-5139","description":"Fixture to test ticket FOUR-5139","type":"FORM","config":[{"name":"FOUR-5139","items":[{"items":[{"label":"Line Input","config":{"icon":"far fa-square","name":"form_input_1","type":"text","label":"New Input","helper":null,"dataFormat":"string","validation":null,"placeholder":null},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"extends":{"props":["label","error","options","helper","name","value","selectedControl"],"mixins":[{"props":{"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true}},"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only"}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":{"props":["value","helper"],"watch":{"value":{"immediate":true}},"methods":[],"_scopeId":"data-v-172d71e1","computed":{"effectiveValue":[]},"_compiled":true,"components":{"MonacoEditor":{"name":"monaco-editor","_Ctor":[],"props":{"amdRequire":[]},"extends":{"name":"MonacoEditor","model":{"event":"change"},"props":{"theme":{"default":"vs"},"value":{"required":true},"options":[],"language":[],"original":[],"amdRequire":[],"diffEditor":{"default":false}},"watch":{"options":{"deep":true,"user":true}},"methods":[]},"methods":[]}},"staticRenderFns":[]},"field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"}],"label":"Loop","config":{"icon":"fas fa-redo","name":"loop_1","label":null,"settings":{"add":true,"type":"existing","times":"3","varname":"loop_1"}},"component":"FormLoop","container":true,"inspector":[{"type":"LoopInspector","field":"settings","config":{"label":null,"helper":null}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"Loop","editor-component":"Loop"}]}],"computed":[{"id":2,"name":"loop_1","type":"javascript","formula":"agents = loop_1;\n\nif (agents === undefined) {\n    agents = [];\n}\n\nreturn agents;","property":"loop_1"}],"custom_css":null,"created_at":"2022-02-16T15:27:59+00:00","updated_at":"2022-02-16T15:29:15+00:00","status":"ACTIVE","key":null,"watchers":[],"categories":[{"id":1,"name":"Uncategorized","status":"ACTIVE","is_system":0,"created_at":"2022-02-16T13:46:12+00:00","updated_at":"2022-02-16T13:46:12+00:00","pivot":{"assignable_id":13,"category_id":1,"category_type":"ProcessMaker\\Models\\ScreenCategory"}}]}],"screen_categories":[],"scripts":[]}
\ No newline at end of file
diff --git a/tests/e2e/fixtures/byPassFalse.json b/tests/e2e/fixtures/byPassFalse.json
new file mode 100644
index 000000000..072ba7708
--- /dev/null
+++ b/tests/e2e/fixtures/byPassFalse.json
@@ -0,0 +1 @@
+{"type":"screen_package","version":"2","screens":[{"id":3,"uuid":"9c24bc51-6040-498e-aa3e-9ce061fd1e84","screen_category_id":"1","title":"test","description":"test","type":"FORM","config":[{"name":"test","items":[{"label":"Line Input","config":{"icon":"far fa-square","name":"test","type":"text","label":"New Input","helper":null,"readonly":false,"dataFormat":"string","validation":[],"placeholder":null,"defaultValue":{"mode":"basic","value":"{{calcName}}"}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"extends":{"props":["label","error","options","helper","name","value","selectedControl"],"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Submit Button","config":{"icon":"fas fa-share-square","name":null,"event":"submit","label":"New Submit","loading":false,"tooltip":[],"variant":"primary","fieldValue":null,"loadingLabel":"Loading...","defaultSubmit":true},"component":"FormButton","inspector":[{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the button's text"}},{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^(?:[A-Za-z])(?:[0-9A-Z_.a-z])*(?<![.])$\/|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormMultiselect","field":"event","config":{"label":"Type","helper":"Choose whether the button should submit the form","options":[{"value":"submit","content":"Submit Button"},{"value":"script","content":"Regular Button"}]}},{"type":"LoadingSubmitButton","field":"loading","config":{"label":"Loading Submit Button","helper":"Loading Submit Button"}},{"type":"LabelSubmitButton","field":"loadingLabel","config":{"label":"Loading Submit Button Label","helper":"Loading Submit Button Label"}},{"type":{"props":["label","value","helper"],"watch":{"value":{"immediate":true}},"methods":[],"computed":[],"_compiled":true,"components":{"FormTextArea":{"name":"FormTextArea","_Ctor":[],"props":{"name":{"type":null},"rows":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"readonly":{"type":null},"richtext":{"type":null},"controlClass":{"type":null}},"watch":{"rows":{"immediate":true}},"mixins":[{"methods":[],"directives":{"uni-id":[],"uni-for":[],"uni-form":[],"uni-aria-owns":[],"uni-aria-flowto":[],"uni-aria-controls":[],"uni-aria-labelledby":[],"uni-aria-describedby":[],"uni-aria-activedescendant":[]}},{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"Editor":{"props":{"plugins":[null,null],"toolbar":[null,null],"modelEvents":[null,null]},"watch":[]},"DisplayErrors":{"props":["name","error","validator"],"computed":[],"_compiled":true,"staticRenderFns":[]},"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"field":"tooltip","config":{"label":"Tooltip","helper":null}},{"type":"FormInput","field":"fieldValue","config":{"label":"Value","helper":"The value being submitted"}},{"type":"FormMultiselect","field":"variant","config":{"label":"Button Variant Style","helper":"The variant determines the appearance of the button","options":[{"value":"primary","content":"Primary"},{"value":"secondary","content":"Secondary"},{"value":"success","content":"Success"},{"value":"danger","content":"Danger"},{"value":"warning","content":"Warning"},{"value":"info","content":"Info"},{"value":"light","content":"Light"},{"value":"dark","content":"Dark"},{"value":"link","content":"Link"}]}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormSubmit","editor-component":"FormButton"}],"order":1}],"computed":[{"id":3,"name":"test","type":"javascript","order":1,"byPass":false,"formula":"return 'Hello World';","property":"calcName"},{"id":4,"name":"dos","type":"javascript","order":2,"byPass":true,"formula":"aaa\nreturn \"dos test\";","property":"calcNameSecod"}],"custom_css":null,"created_at":"2024-05-27T13:18:42+00:00","updated_at":"2024-06-12T14:09:44+00:00","status":"ACTIVE","key":null,"watchers":[],"translations":null,"is_template":0,"asset_type":null,"projects":"[]","categories":[{"id":1,"uuid":"9c1fc1ba-5d2b-4fba-a77c-562a59f28e26","name":"Uncategorized","status":"ACTIVE","is_system":0,"created_at":"2024-05-25T01:54:41+00:00","updated_at":"2024-05-25T01:54:41+00:00","pivot":{"category_type":"ProcessMaker\\Models\\ScreenCategory","assignable_id":3,"category_id":1}}]}],"screen_categories":[],"scripts":[]}
\ No newline at end of file
diff --git a/tests/e2e/fixtures/byPassTrue.json b/tests/e2e/fixtures/byPassTrue.json
new file mode 100644
index 000000000..9d1544d26
--- /dev/null
+++ b/tests/e2e/fixtures/byPassTrue.json
@@ -0,0 +1 @@
+{"type":"screen_package","version":"2","screens":[{"id":3,"uuid":"9c24bc51-6040-498e-aa3e-9ce061fd1e84","screen_category_id":"1","title":"test","description":"test","type":"FORM","config":[{"name":"test","items":[{"label":"Line Input","config":{"icon":"far fa-square","name":"test","type":"text","label":"New Input","helper":null,"readonly":false,"dataFormat":"string","validation":[],"placeholder":null,"defaultValue":{"mode":"basic","value":"{{calcName}}"}},"component":"FormInput","inspector":[{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$\/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the field's name"}},{"type":"FormMultiselect","field":"dataFormat","config":{"name":"Data Type","label":"Data Type","helper":"The data type specifies what kind of data is stored in the variable.","options":[{"value":"string","content":"Text"},{"value":"int","content":"Integer"},{"value":"currency","content":"Currency"},{"value":"percentage","content":"Percentage"},{"value":"float","content":"Decimal"},{"value":"datetime","content":"Datetime"},{"value":"date","content":"Date"},{"value":"password","content":"Password"}],"validation":"required"}},{"type":{"extends":{"props":["label","error","options","helper","name","value","selectedControl"],"mixins":[{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"computed":[],"_compiled":true,"staticRenderFns":[]},"field":"dataMask","config":{"name":"Data Format","label":"Data Format","helper":"The data format for the selected type."}},{"type":"ValidationSelect","field":"validation","config":{"label":"Validation Rules","helper":"The validation rules needed for this field"}},{"type":"FormInput","field":"placeholder","config":{"label":"Placeholder Text","helper":"The placeholder is what is shown in the field when no value is provided yet"}},{"type":"FormInput","field":"helper","config":{"label":"Helper Text","helper":"Help text is meant to provide additional guidance on the field's value"}},{"type":"FormCheckbox","field":"readonly","config":{"label":"Read Only","helper":null}},{"type":"ColorSelect","field":"color","config":{"label":"Text Color","helper":"Set the element's text color","options":[{"value":"text-primary","content":"primary"},{"value":"text-secondary","content":"secondary"},{"value":"text-success","content":"success"},{"value":"text-danger","content":"danger"},{"value":"text-warning","content":"warning"},{"value":"text-info","content":"info"},{"value":"text-light","content":"light"},{"value":"text-dark","content":"dark"}]}},{"type":"ColorSelect","field":"bgcolor","config":{"label":"Background Color","helper":"Set the element's background color","options":[{"value":"alert alert-primary","content":"primary"},{"value":"alert alert-secondary","content":"secondary"},{"value":"alert alert-success","content":"success"},{"value":"alert alert-danger","content":"danger"},{"value":"alert alert-warning","content":"warning"},{"value":"alert alert-info","content":"info"},{"value":"alert alert-light","content":"light"},{"value":"alert alert-dark","content":"dark"}]}},{"type":"default-value-editor","field":"defaultValue","config":{"label":"Default Value","helper":"The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormInput","editor-component":"FormInput"},{"label":"Submit Button","config":{"icon":"fas fa-share-square","name":null,"event":"submit","label":"New Submit","loading":false,"tooltip":[],"variant":"primary","fieldValue":null,"loadingLabel":"Loading...","defaultSubmit":true},"component":"FormButton","inspector":[{"type":"FormInput","field":"label","config":{"label":"Label","helper":"The label describes the button's text"}},{"type":"FormInput","field":"name","config":{"name":"Variable Name","label":"Variable Name","helper":"A variable name is a symbolic name to reference information.","validation":"regex:\/^(?:[A-Za-z])(?:[0-9A-Z_.a-z])*(?<![.])$\/|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"}},{"type":"FormMultiselect","field":"event","config":{"label":"Type","helper":"Choose whether the button should submit the form","options":[{"value":"submit","content":"Submit Button"},{"value":"script","content":"Regular Button"}]}},{"type":"LoadingSubmitButton","field":"loading","config":{"label":"Loading Submit Button","helper":"Loading Submit Button"}},{"type":"LabelSubmitButton","field":"loadingLabel","config":{"label":"Loading Submit Button Label","helper":"Loading Submit Button Label"}},{"type":{"props":["label","value","helper"],"watch":{"value":{"immediate":true}},"methods":[],"computed":[],"_compiled":true,"components":{"FormTextArea":{"name":"FormTextArea","_Ctor":[],"props":{"name":{"type":null},"rows":{"type":null},"error":{"type":null},"label":{"type":null},"value":{"type":null},"helper":{"type":null},"readonly":{"type":null},"richtext":{"type":null},"controlClass":{"type":null}},"watch":{"rows":{"immediate":true}},"mixins":[{"methods":[],"directives":{"uni-id":[],"uni-for":[],"uni-form":[],"uni-aria-owns":[],"uni-aria-flowto":[],"uni-aria-controls":[],"uni-aria-labelledby":[],"uni-aria-describedby":[],"uni-aria-activedescendant":[]}},{"name":"ValidationMixin","props":{"config":{"type":null},"validation":{"type":null},"validationData":{"type":null},"validationField":{"type":null},"validationMessages":{"type":null}},"watch":{"validationData":{"deep":true,"user":true}},"mixins":[{"name":"ProxyDataMixin","methods":[]}],"methods":[],"computed":[]}],"methods":[],"computed":[],"_compiled":true,"components":{"Editor":{"props":{"plugins":[null,null],"toolbar":[null,null],"modelEvents":[null,null]},"watch":[]},"DisplayErrors":{"props":["name","error","validator"],"computed":[],"_compiled":true,"staticRenderFns":[]},"RequiredAsterisk":{"name":"RequiredAsterisk","_Ctor":[],"_compiled":true,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]}},"inheritAttrs":false,"staticRenderFns":[]},"field":"tooltip","config":{"label":"Tooltip","helper":null}},{"type":"FormInput","field":"fieldValue","config":{"label":"Value","helper":"The value being submitted"}},{"type":"FormMultiselect","field":"variant","config":{"label":"Button Variant Style","helper":"The variant determines the appearance of the button","options":[{"value":"primary","content":"Primary"},{"value":"secondary","content":"Secondary"},{"value":"success","content":"Success"},{"value":"danger","content":"Danger"},{"value":"warning","content":"Warning"},{"value":"info","content":"Info"},{"value":"light","content":"Light"},{"value":"dark","content":"Dark"},{"value":"link","content":"Link"}]}},{"type":"FormInput","field":"conditionalHide","config":{"label":"Visibility Rule","helper":"This control is hidden until this expression is true"}},{"type":"DeviceVisibility","field":"deviceVisibility","config":{"label":"Device Visibility","helper":"This control is hidden until this expression is true"}},{"type":"FormInput","field":"customFormatter","config":{"label":"Custom Format String","helper":"Use the Mask Pattern format <br> Date ##\/##\/#### <br> SSN ###-##-#### <br> Phone (###) ###-####","validation":null}},{"type":"FormInput","field":"customCssSelector","config":{"label":"CSS Selector Name","helper":"Use this in your custom css rules","validation":"regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"}},{"type":"FormInput","field":"ariaLabel","config":{"label":"Aria Label","helper":"Attribute designed to help assistive technology (e.g. screen readers) attach a label"}},{"type":"FormInput","field":"tabindex","config":{"label":"Tab Order","helper":"Order in which a user will move focus from one control to another by pressing the Tab key","validation":"regex: [0-9]*"}}],"editor-control":"FormSubmit","editor-component":"FormButton"}],"order":1}],"computed":[{"id":3,"name":"test","type":"javascript","order":1,"byPass":true,"formula":"return 'Hello World';","property":"calcName"},{"id":4,"name":"dos","type":"javascript","order":2,"byPass":true,"formula":"aaa\nreturn \"dos test\";","property":"calcNameSecod"}],"custom_css":null,"created_at":"2024-05-27T13:18:42+00:00","updated_at":"2024-06-12T14:09:44+00:00","status":"ACTIVE","key":null,"watchers":[],"translations":null,"is_template":0,"asset_type":null,"projects":"[]","categories":[{"id":1,"uuid":"9c1fc1ba-5d2b-4fba-a77c-562a59f28e26","name":"Uncategorized","status":"ACTIVE","is_system":0,"created_at":"2024-05-25T01:54:41+00:00","updated_at":"2024-05-25T01:54:41+00:00","pivot":{"category_type":"ProcessMaker\\Models\\ScreenCategory","assignable_id":3,"category_id":1}}]}],"screen_categories":[],"scripts":[]}
\ No newline at end of file
diff --git a/tests/e2e/specs/CalcDragAndDrop.spec.js b/tests/e2e/specs/CalcDragAndDrop.spec.js
new file mode 100644
index 000000000..99c75013a
--- /dev/null
+++ b/tests/e2e/specs/CalcDragAndDrop.spec.js
@@ -0,0 +1,144 @@
+import { dragAndDrop } from '../support/utils';
+
+describe('Calcs list Drag&Drop', () => {
+  const clickTopBarCalcs = () => {
+    cy.get('[data-cy="topbar-calcs"]').click();
+  };
+
+  beforeEach(() => {
+    cy.visit('/');
+
+    cy.loadFromJson('FOUR-13453.json', 0);
+  });
+
+  it('should drag and drop first row to third row', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).as('firstRow');
+    cy.get('[data-cy="calcs-table"] [data-test="item-3"]').eq(0).as('thirdRow');
+
+    cy.get('@firstRow').contains('first_name_calc');
+    cy.get('@thirdRow').contains('email');
+
+    dragAndDrop('@firstRow', '@thirdRow');
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).contains('last_name');
+    cy.get('[data-cy="calcs-table"] [data-test="item-3"]').eq(0).contains('first_name_calc');
+  });
+
+  it('should drag and drop second row to last row', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-2"]').eq(0).as('secondRow');
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).as('lastRow');
+
+    cy.get('@secondRow').contains('last_name');
+    cy.get('@lastRow').contains('full_name');
+
+    dragAndDrop('@secondRow', '@lastRow');
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-2"]').eq(0).contains('email');
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).contains('last_name');
+  });
+
+  it('should drag and drop last row to first row', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).as('lastRow');
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).as('firstRow');
+
+    cy.get('@lastRow').contains('full_name');
+    cy.get('@firstRow').contains('first_name');
+
+    dragAndDrop('@lastRow', '@firstRow');
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).contains('email');
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).contains('full_name');
+  });
+
+  it('should drag and drop to sort in ascending mode', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).as('firstRow');
+    cy.get('[data-cy="calcs-table"] [data-test="item-2"]').eq(0).as('secondRow');
+    cy.get('[data-cy="calcs-table"] [data-test="item-3"]').eq(0).as('thirdRow');
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).as('lastRow');
+
+    cy.get('@firstRow').contains('first_name');
+    cy.get('@secondRow').contains('last_name');
+    cy.get('@thirdRow').contains('email');
+    cy.get('@lastRow').contains('full_name');
+
+    dragAndDrop('@lastRow', '@secondRow');
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).contains('email');
+    cy.get('[data-cy="calcs-table"] [data-test="item-2"]').eq(0).contains('full_name');
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).as('lastRow');
+
+    dragAndDrop('@lastRow', '@firstRow');
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-4"]').eq(0).contains('last_name');
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).contains('email');
+  });
+
+  it('should edit the name of the first calc', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).as('firstRow');
+
+    cy.get('@firstRow').contains('first_name_calc');
+
+    cy.get('@firstRow').find('[data-cy="calcs-table-edit"]').click();
+
+    cy.get('[data-cy="calcs-property-name"]').clear().type("form_input_1");
+    cy.get('[data-cy="calcs-button-save"]').click();
+
+    cy.get('@firstRow').contains('form_input_1');
+  });
+
+  it('should delete the third calc', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-3"]').eq(0).as('thirdRow');
+
+    cy.get('@thirdRow').contains('email');
+
+    cy.get('@thirdRow').find('[data-cy="calcs-table-remove"]').click();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-3"]').should('not.exist');
+  });
+
+  it('should bypass the second calc', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-2"]').eq(0).as('secondRow');
+
+    cy.get('@secondRow').contains('last_name');
+
+    cy.get('@secondRow').should('not.have.class', 'sortable-item-disabled');
+
+    cy.get('@secondRow').find('[data-test="calcs-bypass"]').click();
+
+    cy.get('@secondRow').should('have.class', 'sortable-item-disabled');
+  });
+
+  it('should enlarge the source code field', () => {
+    clickTopBarCalcs();
+
+    cy.get('[data-cy="calcs-table"] [data-test="item-1"]').eq(0).as('firstRow');
+
+    cy.get('@firstRow').contains('first_name_calc');
+
+    cy.get('@firstRow').find('[data-cy="calcs-table-edit"]').click();
+
+    cy.get('[data-cy="calcs-modal"] .modal-dialog').as('calcsModal');
+    cy.get('@calcsModal').should('be.visible');
+
+    cy.get('@calcsModal').should('have.class', 'modal-xl');
+
+    cy.get('[data-cy="calcs-button-save"]').click();
+
+    cy.get('@calcsModal').should('have.class', 'modal-lg');
+  });
+});
diff --git a/tests/e2e/specs/ComputedFields.spec.js b/tests/e2e/specs/ComputedFields.spec.js
index 3c2813033..4746f8aac 100644
--- a/tests/e2e/specs/ComputedFields.spec.js
+++ b/tests/e2e/specs/ComputedFields.spec.js
@@ -1,4 +1,19 @@
 describe("Computed fields", () => {
+  function setupConsoleStubs(stubs) {
+    cy.visit("/", {
+      onBeforeLoad(win) {
+        Object.entries(stubs).forEach(([method, alias]) => {
+          cy.stub(win.console, method).as(alias);
+        });
+      }
+    });
+  }
+
+  function loadAndPreview(jsonFile) {
+    cy.loadFromJson(jsonFile, 0);
+    cy.get("[data-cy=mode-preview]").click();
+  }
+
   it("Make sure new rows can be added to the loop, even with a javascript-driven computed field", () => {
     cy.visit("/");
     cy.loadFromJson("FOUR-5139.json", 0);
@@ -30,6 +45,18 @@ describe("Computed fields", () => {
     });
   });
 
+  it("Make sure that calc log was displayed with success result", () => {
+    setupConsoleStubs({ log: "consoleLog", error: "consoleError" });
+    loadAndPreview("FOUR-5139.json");
+    cy.get("@consoleLog").should("be.calledWith", "%c✅ %cCalc \"loop_1\" has %cRUN");
+  });
+
+  it("Make sure that calc log was displayed with ERROR result", () => {
+    setupConsoleStubs({ log: "consoleLog", groupCollapsed: "groupCollapsed" });
+    loadAndPreview("FOUR-5139-calcError.json");
+    cy.get("@groupCollapsed").should("be.calledWith", "%c❌ %cCalc \"loop_1\" has %cFAILED");
+  });
+
   it("CRUD of computed fields", () => {
     cy.visit("/");
 
@@ -45,10 +72,7 @@ describe("Computed fields", () => {
       .clear()
       .type("pow(form_input_2, 2)");
     cy.get('[data-cy="calcs-button-save"]').click();
-    cy.get('[data-cy="calcs-table"]').should(
-      "contain.text",
-      "form_input_1 = form_input_2 ^ 2"
-    );
+    cy.get('[data-cy="calcs-table"]').should('contain.text', 'form_input_1');
     cy.get('[data-cy="calcs-modal"] .close').click();
 
     // Edit the created calculated property
@@ -63,10 +87,7 @@ describe("Computed fields", () => {
       .clear()
       .type("form_input_1 * 100");
     cy.get('[data-cy="calcs-button-save"]').click();
-    cy.get('[data-cy="calcs-table"]').should(
-      "contain.text",
-      "form_input_2 = form_input_1 * 100"
-    );
+    cy.get('[data-cy="calcs-table"]').should('contain.text', 'form_input_2');
     cy.get('[data-cy="calcs-modal"] .close').click();
 
     // Delete the created calculated property
@@ -94,7 +115,7 @@ describe("Computed fields", () => {
     cy.get('[data-cy="calcs-button-save"]').click();
     cy.get('[data-cy="calcs-table"]').should(
       "contain.text",
-      "form_input_1 = form_input_2 ^ 2"
+      "form_input_1"
     );
     cy.get('[data-cy="calcs-modal"] .close').click();
 
@@ -222,4 +243,26 @@ describe("Computed fields", () => {
 
     cy.focused().should("have.attr", "class", "inputarea"); // Monaco should be focused
   });
+  it("Make sure that test calc was not bypassed ", () => {
+    cy.visit("/");
+    cy.loadFromJson("byPassFalse.json", 0);
+
+    // Enter preview mode
+    cy.get("[data-cy=mode-preview]").click();
+    cy.get('[data-cy="screen-field-test"]').should(
+      "contain.value",
+      "Hello World"
+    );
+  });
+  it("Make sure that test calc was bypassed ", () => {
+    cy.visit("/");
+    cy.loadFromJson("byPassTrue.json", 0);
+
+    // Enter preview mode
+    cy.get("[data-cy=mode-preview]").click();
+    cy.get('[data-cy="screen-field-test"]').should(
+      "not.contain.value",
+      "Hello World"
+    );
+  });
 });
diff --git a/tests/e2e/specs/Watchers.spec.js b/tests/e2e/specs/Watchers.spec.js
index b2eb961c0..d7a064ba2 100644
--- a/tests/e2e/specs/Watchers.spec.js
+++ b/tests/e2e/specs/Watchers.spec.js
@@ -316,6 +316,25 @@ describe("Watchers", () => {
       }
     });
   });
+  it("should enlarge the source code field", () => {
+    cy.visit("/");
+    // Create
+    cy.get('[data-cy="topbar-watchers"]').click();
+    cy.get('[data-cy="watchers-add-watcher"]').click();
+    cy.get('[data-cy="watchers-watcher-name"]').clear().type("Watcher test");
+    cy.setMultiselect('[data-cy="watchers-watcher-variable"]', "form_input_2");
+    cy.get('[data-cy="watchers-accordion-source"]').click({
+      waitForAnimations: true
+    });
+    cy.get('[data-cy="watchers-modal"] .modal-dialog').as("watcherModal");
+    cy.get("@watcherModal").should("be.visible");
+
+    cy.get("@watcherModal").should("have.class", "modal-xl");
+    cy.get('[data-cy="watchers-button-cancel"]').click();
+
+    // Watcher list is also xl because it has many columns
+    cy.get("@watcherModal").should("have.class", "modal-xl");
+  });
   it("Test asynchronous watcher", () => {
     // Mock script response
 
diff --git a/tests/e2e/specs/WatchersBypass.spec.js b/tests/e2e/specs/WatchersBypass.spec.js
new file mode 100644
index 000000000..4cf91e60c
--- /dev/null
+++ b/tests/e2e/specs/WatchersBypass.spec.js
@@ -0,0 +1,125 @@
+describe("Watchers", () => {
+  beforeEach(() => {
+    cy.intercept(
+      "GET",
+      "/api/1.0/screens/1",
+      JSON.stringify({
+        id: 1,
+        screen_category_id: 1,
+        title: "Sub screen example",
+        description: "A sub screen example",
+        type: "FORM",
+        config: [
+          {
+            name: "Sub screen example",
+            items: [
+              {
+                config: {
+                  icon: "far fa-square",
+                  label: "First name",
+                  name: "firstname",
+                  placeholder: "",
+                  validation: "",
+                  helper: null,
+                  type: "text",
+                  dataFormat: "string",
+                  customCssSelector: "first-name"
+                },
+                inspector: [],
+                component: "FormInput",
+                "editor-component": "FormInput",
+                "editor-control": "FormInput",
+                label: "Line Input",
+                value: "__vue_devtool_undefined__"
+              },
+              {
+                config: {
+                  icon: "far fa-square",
+                  label: "Last name",
+                  name: "lastname",
+                  placeholder: "",
+                  validation: "",
+                  helper: null,
+                  type: "text",
+                  dataFormat: "string",
+                  customCssSelector: ""
+                },
+                inspector: [],
+                component: "FormInput",
+                "editor-component": "FormInput",
+                "editor-control": "FormInput",
+                label: "Line Input",
+                value: "__vue_devtool_undefined__"
+              }
+            ]
+          }
+        ],
+        computed: [],
+        watchers: [],
+        custom_css: "[selector='first-name'] label { font-style: italic; }",
+        status: "ACTIVE"
+      })
+    );
+
+    cy.intercept(
+      "POST",
+      "/api/1.0/scripts/execute/1",
+      JSON.stringify({
+        output: {
+          name: "Steve"
+        }
+      })
+    );
+  });
+
+  Cypress.Commands.add('setupFormInput', (inputName) => {
+    cy.visit("/");
+    cy.openAcordeon("collapse-1");
+    cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { position: "bottom" });
+    cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-element-container]", { position: "top" });
+    cy.get("[data-cy=screen-element-container]").last().click();
+    cy.get("[data-cy=inspector-name]").clear().type(inputName);
+  });
+
+  Cypress.Commands.add('createWatcher', (bypass = false) => {
+    cy.get('[data-cy="topbar-watchers"]').click();
+    cy.get('[data-cy="watchers-add-watcher"]').click();
+    cy.get('[data-cy="watchers-watcher-name"]').clear().type("Watcher test");
+    cy.setMultiselect('[data-cy="watchers-watcher-variable"]', "form_input_2");
+    cy.get('[data-cy="watchers-accordion-source"]').click({ waitForAnimations: true });
+    cy.setMultiselect('[data-cy="watchers-watcher-source"]', "Test Script");
+    cy.setVueComponentValue('[data-cy="watchers-watcher-input_data"]', '{"form_input_2":"{{form_input_2}}"}');
+    cy.get('[data-cy="watchers-accordion-output"]').click({ waitForAnimations: true });
+    cy.get('[data-cy="watchers-watcher-output_variable"]').clear().type("user");
+    cy.get('[data-cy="watchers-button-save"]').click();
+    cy.get('[data-cy="watchers-table"]').should("contain.text", "Watcher test");
+    if (bypass) {
+      cy.get('[data-test="watchers-bypass"]').click();
+    }
+    cy.get('[data-cy="watchers-modal"] .close').click();
+  });
+
+  function runWatcherTest(bypass) {
+    cy.setupFormInput("user.name");
+    cy.createWatcher(bypass);
+    cy.get("[data-cy=mode-preview]").click();
+    cy.get("[data-cy=preview-content] [name=form_input_2]").clear().type("name");
+    cy.get("#watchers-synchronous").should("not.exist");
+    cy.wait(3000);
+    const expectedData = {
+      form_input_2: "name",
+      user: {
+        name: bypass ? "" : "Steve"
+      }
+    };
+    cy.assertPreviewData(expectedData);
+  }
+
+  it("Ensure that a watch is not bypassed", () => {
+    runWatcherTest(false);
+  });
+
+  it("Ensure that a watch is bypassed", () => {
+    runWatcherTest(true);
+  });
+});
diff --git a/tests/e2e/specs/WatchersDragAndDrop.spec.js b/tests/e2e/specs/WatchersDragAndDrop.spec.js
new file mode 100644
index 000000000..628ffc28b
--- /dev/null
+++ b/tests/e2e/specs/WatchersDragAndDrop.spec.js
@@ -0,0 +1,217 @@
+import { dragAndDrop } from '../support/utils';
+
+describe('Watchers list Drag&Drop', () => {
+  const clickTopBarWatchers = () => {
+    cy.get('[data-cy="topbar-watchers"]').click();
+  };
+
+  const aliasRowByIndex = (index, aliasName) => {
+    cy.get(`[data-cy="watchers-table"] [data-test="item-${index}"]`).eq(0).as(aliasName);
+  };
+
+  const performDragAndDrop = (sourceAlias, targetAlias, sourceContent, targetContent) => {
+    cy.get(sourceAlias).contains(sourceContent);
+    cy.get(targetAlias).contains(targetContent);
+
+    dragAndDrop(sourceAlias, targetAlias);
+  };
+
+  const verifyWatcherNameByIndex = (index, expectedName) => {
+    cy.get(`[data-cy="watchers-table"] [data-test="item-${index}"]`).eq(0).contains(expectedName);
+  };
+
+  const extraWatchers = ['watcher_06', 'watcher_07', 'watcher_08'];
+
+  beforeEach(() => {
+    cy.visit('/');
+
+    cy.loadFromJson('FOUR-13457.json', 0);
+    clickTopBarWatchers();
+  });
+
+  it('should create 3 extra watchers', () => {
+    extraWatchers.forEach((watcher) => {
+      cy.get('[data-cy="watchers-add-watcher"]').click();
+      cy.get('[data-cy="watchers-watcher-name"]').type(`watcher_${watcher}`);
+      cy.setMultiselect('[data-cy="watchers-watcher-variable"]', watcher);
+      cy.get('[data-cy="watchers-accordion-source"]').click({
+        waitForAnimations: true,
+      });
+      cy.setMultiselect('[data-cy="watchers-watcher-source"]', 'Test Script');
+      cy.setVueComponentValue('[data-cy="watchers-watcher-input_data"]', `{"${watcher}":"{{${watcher}}}"}`);
+      cy.get('[data-cy="watchers-button-save"]').click();
+    });
+
+    cy.get('[data-cy="watchers-table"] > .sortable-item').should('have.length', 8);
+  });
+
+  it('should drag and drop first row to third row', () => {
+    aliasRowByIndex(1, 'firstRow');
+    aliasRowByIndex(3, 'thirdRow');
+
+    performDragAndDrop('@firstRow', '@thirdRow', 'watcher_first_name', 'watcher_full_name');
+
+    verifyWatcherNameByIndex(1, 'watcher_last_name');
+    verifyWatcherNameByIndex(3, 'watcher_first_name');
+  });
+
+  it('should drag and drop second row to last row', () => {
+    aliasRowByIndex(2, 'secondRow');
+    aliasRowByIndex(5, 'lastRow');
+
+    performDragAndDrop('@secondRow', '@lastRow', 'watcher_last_name', 'watcher_05');
+
+    verifyWatcherNameByIndex(2, 'watcher_full_name');
+    verifyWatcherNameByIndex(5, 'watcher_last_name');
+  });
+
+  it('should drag and drop last row to first row', () => {
+    aliasRowByIndex(5, 'lastRow');
+    aliasRowByIndex(1, 'firstRow');
+
+    performDragAndDrop('@lastRow', '@firstRow', 'watcher_05', 'watcher_first_name');
+
+    verifyWatcherNameByIndex(5, 'watcher_email');
+    verifyWatcherNameByIndex(1, 'watcher_05');
+  });
+
+  it('should drag and drop to sort in ascending mode', () => {
+    aliasRowByIndex(1, 'firstRow');
+    aliasRowByIndex(2, 'secondRow');
+    aliasRowByIndex(3, 'thirdRow');
+    aliasRowByIndex(4, 'fourthRow');
+    aliasRowByIndex(5, 'lastRow');
+
+    cy.get('@firstRow').contains('first_name');
+    cy.get('@secondRow').contains('last_name');
+    cy.get('@thirdRow').contains('full_name');
+    cy.get('@fourthRow').contains('email');
+    cy.get('@lastRow').contains('watcher_05');
+
+    dragAndDrop('@secondRow', '@thirdRow');
+    dragAndDrop('@fourthRow', '@firstRow');
+
+    cy.get('@firstRow').contains('email');
+    cy.get('@secondRow').contains('first_name');
+    cy.get('@thirdRow').contains('full_name');
+    cy.get('@fourthRow').contains('last_name');
+    cy.get('@lastRow').contains('watcher_05');
+  });
+
+  it('should edit the name of the first calc', () => {
+    aliasRowByIndex(1, 'firstRow');
+
+    cy.get('@firstRow').contains('watcher_first_name');
+
+    cy.get('@firstRow').find('[data-cy="watchers-table-edit"]').click();
+
+    cy.get('[data-cy="watchers-watcher-name"]').clear().type('watcher_01');
+    cy.get('[data-cy="watchers-button-save"]').click();
+
+    cy.get('@firstRow').contains('watcher_01');
+  });
+
+  it('should delete the third calc', () => {
+    aliasRowByIndex(3, 'thirdRow');
+    cy.get('@thirdRow').contains('watcher_full_name');
+
+    cy.get('@thirdRow').find('[data-cy="watchers-table-remove"]').click();
+
+    cy.get('[data-cy="watchers-table"] [data-test="item-3"]').should('not.exist');
+  });
+
+  it('should bypass the second calc', () => {
+    aliasRowByIndex(2, 'secondRow');
+
+    cy.get('@secondRow').contains('watcher_last_name');
+
+    cy.get('@secondRow').should('not.have.class', 'sortable-item-disabled');
+
+    cy.get('@secondRow').find('[data-test="watchers-bypass"]').click();
+
+    cy.get('@secondRow').should('have.class', 'sortable-item-disabled');
+  });
+
+  const createAndRunWatcher = (stubs, intercepts, assertion) => {
+    intercepts();
+
+    cy.visit('/', {
+      onBeforeLoad(win) {
+        stubs.forEach((stub) => {
+          cy.stub(win.console, stub.name).as(stub.alias);
+        });
+      },
+    });
+
+    cy.openAcordeon('collapse-1');
+    cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', {
+      position: 'bottom',
+    });
+    cy.get('[data-cy="topbar-watchers"]').click();
+    cy.get('[data-cy="watchers-add-watcher"]').click();
+    cy.get('[data-cy="watchers-watcher-name"]').clear().type('Watcher test');
+    cy.setMultiselect('[data-cy="watchers-watcher-variable"]', 'form_input_1');
+    cy.get('.custom-switch:has([data-cy="watchers-watcher-synchronous"]) label').click();
+    cy.get('[data-cy="watchers-accordion-source"]').click({
+      waitForAnimations: true,
+    });
+    cy.setMultiselect('[data-cy="watchers-watcher-source"]', 'Test Script');
+    cy.setVueComponentValue('[data-cy="watchers-watcher-input_data"]', '{"form_input_2":"{{form_input_2}}"}');
+    cy.get('[data-cy="watchers-accordion-output"]').click({
+      waitForAnimations: true,
+    });
+    cy.get('[data-cy="watchers-watcher-output_variable"]').clear().type('user');
+    cy.get('[data-cy="watchers-button-save"]').click();
+    cy.get('[data-cy="watchers-table"]').should('contain.text', 'Watcher test');
+    cy.get('[data-cy="watchers-modal"] .close').click();
+
+    cy.get('[data-cy=mode-preview]').click();
+    cy.get('[data-cy=preview-content] [name=form_input_1]')
+      .clear()
+      .type('name');
+    cy.wait(2000);
+
+    assertion();
+  };
+
+  it('should display a custom log of SUCCESS type', () => {
+    const intercepts = () => {
+      cy.intercept(
+        'POST',
+        '/api/1.0/scripts/execute/1',
+        JSON.stringify({
+          output: {
+            name: 'Steve',
+          },
+        }),
+      );
+    };
+
+    createAndRunWatcher([{ name: 'log', alias: 'consoleLog' }], intercepts, () => {
+      cy.get('#watchers-synchronous').should('not.exist');
+      cy.assertPreviewData({
+        form_input_1: 'name',
+        user: {
+          name: 'Steve',
+        },
+      });
+      cy.get('@consoleLog').should('be.calledWith', '%c✅ %cWatcher "Watcher test" has %cRUN');
+    });
+  });
+
+  it('should display a custom log of ERROR type', () => {
+    const intercepts = () => {
+      cy.intercept('POST', '/api/1.0/scripts/execute/1', {
+        statusCode: 403,
+        body: JSON.stringify({
+          exception: 'Exception',
+          message: 'Test exception response',
+        }),
+      });
+    };
+
+    createAndRunWatcher([{ name: 'groupCollapsed', alias: 'consoleGroupCollapsed' }], intercepts, () => {
+      cy.get('@consoleGroupCollapsed').should('be.calledWith', '%c❌ %cWatcher "Watcher test" has %cFAILED');
+    });
+  });
+});
diff --git a/tests/e2e/support/utils.js b/tests/e2e/support/utils.js
index 113ca1a4a..61a48038c 100644
--- a/tests/e2e/support/utils.js
+++ b/tests/e2e/support/utils.js
@@ -117,3 +117,14 @@ export const validateImage = (downloadedFilename) => {
     expect(buffer.length).to.be.gt(1000);
   });
 };
+
+export const dragAndDrop = (source, target) => {
+  const dataTransfer = new DataTransfer();
+
+  cy.get(source).trigger('dragstart', { dataTransfer });
+  cy.get(target)
+    .trigger('dragenter')
+    .trigger('dragover', { dataTransfer })
+    .trigger('drop', { dataTransfer });
+  cy.get(source).trigger('dragend');
+};