diff --git a/src/store/modules/ADempiere/field.js b/src/store/modules/ADempiere/field.js
index 1aeeb111654..569d374aa03 100644
--- a/src/store/modules/ADempiere/field.js
+++ b/src/store/modules/ADempiere/field.js
@@ -14,13 +14,17 @@
 // You should have received a copy of the GNU General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+import Vue from 'vue'
 // api request methods
 import { requestFieldMetadata } from '@/api/ADempiere/dictionary/window'
+// constants
+import { DEFAULT_SIZE_COLUMN } from '@/utils/ADempiere/componentUtils'
 
 const initStateLookup = {
   referenceList: [],
   fieldsList: [],
-  validationRuleList: []
+  validationRuleList: [],
+  defaultSizeField: {}
 }
 
 const field = {
@@ -37,6 +41,21 @@ const field = {
     },
     resetStateLookup(state) {
       state = initStateLookup
+    },
+    setSizeField(state, {
+      parentUuid,
+      containerUuid,
+      sizeField = DEFAULT_SIZE_COLUMN
+    }) {
+      const defaultSizeField = {
+        parentUuid,
+        containerUuid,
+        sizeField
+      }
+      Vue.set(state.defaultSizeField, containerUuid, defaultSizeField)
+    },
+    sizeField(state, size) {
+      state.defaultSizeField = size
     }
   },
   actions: {
@@ -77,6 +96,23 @@ const field = {
         .catch(error => {
           console.warn(`Get Field - Error ${error.code}: ${error.message}.`)
         })
+    },
+    /**
+     * Change the columns of the panel
+     * @param {string} parentUuid
+     * @param {string} containerUuid
+     * @param {number} sizeField
+     */
+    changeSizeField({ commit }, {
+      parentUuid,
+      containerUuid,
+      sizeField
+    }) {
+      commit('setSizeField', {
+        parentUuid,
+        containerUuid,
+        sizeField
+      })
     }
   },
   getters: {
@@ -107,6 +143,9 @@ const field = {
       return state.fieldsList.find(fieldItem => {
         return fieldItem.tableName === tableName && fieldItem.columnName === columnName
       })
+    },
+    getSizeColumn: (state, getters) => ({ containerUuid }) => {
+      return state.defaultSizeField[containerUuid].sizeField || DEFAULT_SIZE_COLUMN
     }
   }
 }
diff --git a/src/store/modules/ADempiere/windowManager.js b/src/store/modules/ADempiere/windowManager.js
index 3eb31431b4a..835f5fbeb41 100644
--- a/src/store/modules/ADempiere/windowManager.js
+++ b/src/store/modules/ADempiere/windowManager.js
@@ -28,6 +28,7 @@ import {
 
 // constants
 import { ROW_ATTRIBUTES } from '@/utils/ADempiere/constants/table'
+import { DEFAULT_SIZE_COLUMN } from '@/utils/ADempiere/componentUtils'
 
 // utils and helper methods
 import { getContextAttributes } from '@/utils/ADempiere/contextUtils.js'
@@ -165,7 +166,12 @@ const windowManager = {
           isLoaded: false,
           containerUuid
         })
-
+        commit('setSizeField', {
+          parentUuid,
+          isLoaded: true,
+          containerUuid,
+          sizeField: DEFAULT_SIZE_COLUMN
+        })
         getEntities({
           windowUuid: parentUuid,
           tabUuid: containerUuid,
diff --git a/src/utils/ADempiere/componentUtils.js b/src/utils/ADempiere/componentUtils.js
index 4bf990753dc..945d1ebad7b 100644
--- a/src/utils/ADempiere/componentUtils.js
+++ b/src/utils/ADempiere/componentUtils.js
@@ -22,3 +22,14 @@ export function notSubmitForm(event) {
   event.preventDefault()
   return false
 }
+
+/**
+ * Columns number on layout by component ui
+ * https://element.eleme.io/#/es/component/layout
+ */
+export const LAYOUT_SIZE_COLUMN = 24
+
+/**
+ * Default size of column
+ */
+export const DEFAULT_SIZE_COLUMN = 0