diff --git a/client/modules/crm/src/views/calendar/calendar-page.js b/client/modules/crm/src/views/calendar/calendar-page.js
index c01029c72f..db16f074f2 100644
--- a/client/modules/crm/src/views/calendar/calendar-page.js
+++ b/client/modules/crm/src/views/calendar/calendar-page.js
@@ -216,7 +216,7 @@ class CalendarPage extends View {
             userId: this.options.userId,
             userName: this.options.userName,
             mode: this.mode,
-            el: '#main > .calendar-container',
+            fullSelector: '#main > .calendar-container',
         }, view => {
             let initial = true;
 
@@ -261,7 +261,7 @@ class CalendarPage extends View {
             date: this.date,
             userId: this.options.userId,
             userName: this.options.userName,
-            el: '#main > .calendar-container',
+            fullSelector: '#main > .calendar-container',
         }, view => {
             let initial = true;
 
diff --git a/client/modules/crm/src/views/calendar/calendar.js b/client/modules/crm/src/views/calendar/calendar.js
index 707264f18a..80075e14db 100644
--- a/client/modules/crm/src/views/calendar/calendar.js
+++ b/client/modules/crm/src/views/calendar/calendar.js
@@ -216,7 +216,7 @@ class CalendarView extends View {
 
         if (this.header) {
             this.createView('modeButtons', 'crm:views/calendar/mode-buttons', {
-                el: this.getSelector() + ' .mode-buttons',
+                selector: '.mode-buttons',
                 isCustomViewAvailable: this.isCustomViewAvailable,
                 modeList: this.modeList,
                 scopeList: this.scopeList,
diff --git a/client/modules/crm/src/views/calendar/modals/edit-view.js b/client/modules/crm/src/views/calendar/modals/edit-view.js
index 00f359878e..940f06bea5 100644
--- a/client/modules/crm/src/views/calendar/modals/edit-view.js
+++ b/client/modules/crm/src/views/calendar/modals/edit-view.js
@@ -113,7 +113,7 @@ define('crm:views/calendar/modals/edit-view', ['views/modal', 'model'], function
             model.set(modelData);
 
             this.createView('record', 'crm:views/calendar/record/edit-view', {
-                el: this.options.el + ' .record-container',
+                selector: '.record-container',
                 model: model
             });
         },
diff --git a/client/modules/crm/src/views/calendar/modals/shared-options.js b/client/modules/crm/src/views/calendar/modals/shared-options.js
index a92312db64..47fc639bb6 100644
--- a/client/modules/crm/src/views/calendar/modals/shared-options.js
+++ b/client/modules/crm/src/views/calendar/modals/shared-options.js
@@ -67,7 +67,7 @@ define('crm:views/calendar/modals/shared-options', ['views/modal', 'model'], fun
             });
 
             this.createView('record', 'crm:views/calendar/record/shared-options', {
-                el: this.options.el + ' .record-container',
+                selector: '.record-container',
                 model: model,
             });
         },
diff --git a/client/modules/crm/src/views/calendar/timeline.js b/client/modules/crm/src/views/calendar/timeline.js
index 2557ea0df7..5ef9b99ddc 100644
--- a/client/modules/crm/src/views/calendar/timeline.js
+++ b/client/modules/crm/src/views/calendar/timeline.js
@@ -213,7 +213,7 @@ class TimelineView extends View {
 
         if (this.header) {
             this.createView('modeButtons', 'crm:views/calendar/mode-buttons', {
-                el: this.getSelector() + ' .mode-buttons',
+                selector: '.mode-buttons',
                 isCustomViewAvailable: this.isCustomViewAvailable,
                 modeList: this.modeList,
                 scopeList: this.scopeList,
diff --git a/client/modules/crm/src/views/dashlets/activities.js b/client/modules/crm/src/views/dashlets/activities.js
index 60c79da34a..3153f91e54 100644
--- a/client/modules/crm/src/views/dashlets/activities.js
+++ b/client/modules/crm/src/views/dashlets/activities.js
@@ -148,7 +148,7 @@ define('crm:views/dashlets/activities',
 
             this.listenToOnce(this.collection, 'sync', () => {
                 this.createView('list', 'crm:views/record/list-activities-dashlet', {
-                    el: this.options.el + ' > .list-container',
+                    selector: '> .list-container',
                     pagination: false,
                     type: 'list',
                     rowActionsView: this.rowActionsView,
diff --git a/client/modules/crm/src/views/dashlets/calendar.js b/client/modules/crm/src/views/dashlets/calendar.js
index 1b4e3a63e3..61d2434915 100644
--- a/client/modules/crm/src/views/dashlets/calendar.js
+++ b/client/modules/crm/src/views/dashlets/calendar.js
@@ -59,7 +59,7 @@ define('crm:views/dashlets/calendar', ['views/dashlets/abstract/base'], function
                     'crm:views/calendar/timeline';
 
                 this.createView('calendar', viewName, {
-                    el: this.options.el + ' > .calendar-container',
+                    selector: '> .calendar-container',
                     header: false,
                     calendarType: 'shared',
                     userList: userList,
@@ -83,12 +83,12 @@ define('crm:views/dashlets/calendar', ['views/dashlets/abstract/base'], function
 
             this.createView('calendar', viewName, {
                 mode: mode,
-                el: this.options.el + ' > .calendar-container',
+                selector: '> .calendar-container',
                 header: false,
                 enabledScopeList: this.getOption('enabledScopeList'),
-                containerSelector: this.options.el,
+                containerSelector: this.getSelector(),
                 teamIdList: teamIdList,
-            }, (view) => {
+            }, view => {
                 this.listenTo(view, 'view', () => {
                     if (this.getOption('mode') === 'month') {
                         let title = this.getOption('title');
diff --git a/client/modules/crm/src/views/lead/convert.js b/client/modules/crm/src/views/lead/convert.js
index f871af8b36..edbd7f0f83 100644
--- a/client/modules/crm/src/views/lead/convert.js
+++ b/client/modules/crm/src/views/lead/convert.js
@@ -118,7 +118,7 @@ define('crm:views/lead/convert', ['view'], function (Dep) {
 
                                 this.createView(scope, convertEntityViewName, {
                                     model: model,
-                                    el: '#main .edit-container-' + Espo.Utils.toDom(scope),
+                                    fullSelector: '#main .edit-container-' + Espo.Utils.toDom(scope),
                                     buttonsPosition: false,
                                     buttonsDisabled: true,
                                     layoutName: 'detailConvert',
diff --git a/client/modules/crm/src/views/mass-email/modals/send-test.js b/client/modules/crm/src/views/mass-email/modals/send-test.js
index 217828482e..d6be5abfd9 100644
--- a/client/modules/crm/src/views/mass-email/modals/send-test.js
+++ b/client/modules/crm/src/views/mass-email/modals/send-test.js
@@ -50,7 +50,7 @@ define('crm:views/mass-email/modals/send-test', ['views/modal', 'model'], functi
 
             this.createView('users', 'views/fields/link-multiple', {
                 model: model,
-                el: this.options.el + ' .field[data-name="users"]',
+                selector: '.field[data-name="users"]',
                 foreignScope: 'User',
                 defs: {
                     name: 'users',
@@ -62,7 +62,7 @@ define('crm:views/mass-email/modals/send-test', ['views/modal', 'model'], functi
 
             this.createView('contacts', 'views/fields/link-multiple', {
                 model: model,
-                el: this.options.el + ' .field[data-name="contacts"]',
+                selector: '.field[data-name="contacts"]',
                 foreignScope: 'Contact',
                 defs: {
                     name: 'contacts',
@@ -74,7 +74,7 @@ define('crm:views/mass-email/modals/send-test', ['views/modal', 'model'], functi
 
             this.createView('leads', 'views/fields/link-multiple', {
                 model: model,
-                el: this.options.el + ' .field[data-name="leads"]',
+                selector: '.field[data-name="leads"]',
                 foreignScope: 'Lead',
                 defs: {
                     name: 'leads',
@@ -86,7 +86,7 @@ define('crm:views/mass-email/modals/send-test', ['views/modal', 'model'], functi
 
             this.createView('accounts', 'views/fields/link-multiple', {
                 model: model,
-                el: this.options.el + ' .field[data-name="accounts"]',
+                selector: '.field[data-name="accounts"]',
                 foreignScope: 'Account',
                 defs: {
                     name: 'accounts',
diff --git a/client/modules/crm/src/views/meeting/popup-notification.js b/client/modules/crm/src/views/meeting/popup-notification.js
index ffa186a02c..86a44e229e 100644
--- a/client/modules/crm/src/views/meeting/popup-notification.js
+++ b/client/modules/crm/src/views/meeting/popup-notification.js
@@ -55,7 +55,7 @@ class MeetingPopupNotificationView extends PopupNotificationView {
             this.createView('dateField', 'views/fields/datetime', {
                 model: model,
                 mode: 'detail',
-                el: this.options.el + ' .field[data-name="' + dateAttribute + '"]',
+                selector: '.field[data-name="' + dateAttribute + '"]',
                 defs: {
                     name: dateAttribute,
                 },
diff --git a/client/modules/crm/src/views/meeting/record/panels/scheduler.js b/client/modules/crm/src/views/meeting/record/panels/scheduler.js
index 6b0ed224eb..7fb0d306dd 100644
--- a/client/modules/crm/src/views/meeting/record/panels/scheduler.js
+++ b/client/modules/crm/src/views/meeting/record/panels/scheduler.js
@@ -39,7 +39,7 @@ define('crm:views/meeting/record/panels/scheduler', ['views/record/panels/bottom
                 'crm:views/scheduler/scheduler';
 
             this.createView('scheduler', viewName, {
-                el: this.getSelector() + ' .scheduler-container',
+                selector: '.scheduler-container',
                 notToRender: true,
                 model: this.model,
             });
diff --git a/client/modules/crm/src/views/record/panels/activities.js b/client/modules/crm/src/views/record/panels/activities.js
index 9a46af436e..75a0b73081 100644
--- a/client/modules/crm/src/views/record/panels/activities.js
+++ b/client/modules/crm/src/views/record/panels/activities.js
@@ -309,7 +309,7 @@ define('crm:views/record/panels/activities',
         afterRender: function () {
             let afterFetch = () => {
                 this.createView('list', 'views/record/list-expanded', {
-                    el: this.getSelector() + ' > .list-container',
+                    selector: '> .list-container',
                     pagination: false,
                     type: 'listRelationship',
                     rowActionsView: this.rowActionsView,
diff --git a/client/modules/crm/src/views/record/panels/tasks.js b/client/modules/crm/src/views/record/panels/tasks.js
index bd906a56dd..1ea01a7dcb 100644
--- a/client/modules/crm/src/views/record/panels/tasks.js
+++ b/client/modules/crm/src/views/record/panels/tasks.js
@@ -127,7 +127,7 @@ define('crm:views/record/panels/tasks', ['views/record/panels/relationship'], fu
 
         afterRender: function () {
             this.createView('list', 'views/record/list-expanded', {
-                el: this.getSelector() + ' > .list-container',
+                selector: '> .list-container',
                 pagination: false,
                 type: 'listRelationship',
                 rowActionsView: this.defs.rowActionsView || this.rowActionsView,
diff --git a/client/modules/crm/src/views/target-list/record/panels/opted-out.js b/client/modules/crm/src/views/target-list/record/panels/opted-out.js
index f6de924bd4..d03f134d2c 100644
--- a/client/modules/crm/src/views/target-list/record/panels/opted-out.js
+++ b/client/modules/crm/src/views/target-list/record/panels/opted-out.js
@@ -116,7 +116,7 @@ function (Dep, MultiCollection) {
 
             this.listenToOnce(this.collection, 'sync', () => {
                 this.createView('list', 'views/record/list-expanded', {
-                    el: this.getSelector() + ' > .list-container',
+                    selector: '> .list-container',
                     pagination: false,
                     type: 'listRelationship',
                     rowActionsView: 'crm:views/target-list/record/row-actions/opted-out',
diff --git a/client/src/controller.js b/client/src/controller.js
index 872dd92c44..42a576cab0 100644
--- a/client/src/controller.js
+++ b/client/src/controller.js
@@ -463,7 +463,7 @@ class Controller {
             }
 
             options = options || {};
-            options.el = '#main';
+            options.fullSelector = '#main';
 
             let process = main => {
                 if (isCanceled) {
@@ -608,7 +608,7 @@ class Controller {
         this.set('masterRendered', false);
 
         options = options || {};
-        options.el = 'body';
+        options.fullSelector = 'body';
 
         this.viewFactory.create(view, options, view => {
             this.set('entire', view);
diff --git a/client/src/views/address-map/view.js b/client/src/views/address-map/view.js
index b03327aa70..61567677f9 100644
--- a/client/src/views/address-map/view.js
+++ b/client/src/views/address-map/view.js
@@ -40,7 +40,7 @@ define('views/address-map/view', ['views/main'], function (Dep) {
 
             this.createView('header', 'views/header', {
                 model: this.model,
-                el: '#main > .header',
+                fullSelector: '#main > .header',
                 scope: this.model.entityType,
                 fontSizeFlexible: true,
             });
@@ -55,7 +55,7 @@ define('views/address-map/view', ['views/main'], function (Dep) {
             this.createView('map', viewName, {
                 model: this.model,
                 name: field + 'Map',
-                el: this.getSelector() + ' .map-container',
+                selector: '.map-container',
                 height: this.getHelper().calculateContentContainerHeight(this.$el.find('.map-container')),
             }, (view) => {
             	view.render();
diff --git a/client/src/views/admin/dynamic-logic/conditions-string/group-base.js b/client/src/views/admin/dynamic-logic/conditions-string/group-base.js
index b5be67189d..190afd2d64 100644
--- a/client/src/views/admin/dynamic-logic/conditions-string/group-base.js
+++ b/client/src/views/admin/dynamic-logic/conditions-string/group-base.js
@@ -122,13 +122,11 @@ define('views/admin/dynamic-logic/conditions-string/group-base', ['view'], funct
                 itemData: item,
                 scope: this.scope,
                 level: this.level + 1,
-                el: this.getSelector() + ' [data-view-key="'+key+'"]',
+                selector: '[data-view-key="'+key+'"]',
                 number: number,
                 operator: operator,
                 operatorString: operatorString,
             });
         },
-
     });
 });
-
diff --git a/client/src/views/admin/dynamic-logic/conditions-string/item-base.js b/client/src/views/admin/dynamic-logic/conditions-string/item-base.js
index 73d362b133..4925dbfc60 100644
--- a/client/src/views/admin/dynamic-logic/conditions-string/item-base.js
+++ b/client/src/views/admin/dynamic-logic/conditions-string/item-base.js
@@ -90,7 +90,7 @@ define('views/admin/dynamic-logic/conditions-string/item-base', ['view'], functi
             this.createView('value', viewName, {
                 model: this.model,
                 name: this.field,
-                el: this.getSelector() + ' [data-view-key="'+key+'"]'
+                selector: '[data-view-key="'+key+'"]'
             });
         },
     });
diff --git a/client/src/views/admin/dynamic-logic/conditions-string/item-multiple-values-base.js b/client/src/views/admin/dynamic-logic/conditions-string/item-multiple-values-base.js
index d9e6702207..9e1004ae19 100644
--- a/client/src/views/admin/dynamic-logic/conditions-string/item-multiple-values-base.js
+++ b/client/src/views/admin/dynamic-logic/conditions-string/item-multiple-values-base.js
@@ -73,7 +73,7 @@ define('views/admin/dynamic-logic/conditions-string/item-multiple-values-base',
                 this.createView(key, viewName, {
                     model: model,
                     name: this.field,
-                    el: this.getSelector() + ' [data-view-key="'+key+'"]'
+                    selector: '[data-view-key="'+key+'"]'
                 });
             }, this);
         },
diff --git a/client/src/views/admin/dynamic-logic/conditions-string/item-value-enum.js b/client/src/views/admin/dynamic-logic/conditions-string/item-value-enum.js
index 422756f962..c777fe0bfe 100644
--- a/client/src/views/admin/dynamic-logic/conditions-string/item-value-enum.js
+++ b/client/src/views/admin/dynamic-logic/conditions-string/item-value-enum.js
@@ -41,7 +41,7 @@ define('views/admin/dynamic-logic/conditions-string/item-value-enum',
             this.createView('value', viewName, {
                 model: this.model,
                 name: this.field,
-                el: this.getSelector() + '[data-view-key="'+key+'"]',
+                selector: '[data-view-key="'+key+'"]',
                 params: {
                     options: this.getMetadata()
                     .get(['entityDefs', this.scope, 'fields', this.field, 'options']) || []
diff --git a/client/src/views/admin/dynamic-logic/conditions-string/item-value-link.js b/client/src/views/admin/dynamic-logic/conditions-string/item-value-link.js
index 13e9fbb6f1..c2e38da40e 100644
--- a/client/src/views/admin/dynamic-logic/conditions-string/item-value-link.js
+++ b/client/src/views/admin/dynamic-logic/conditions-string/item-value-link.js
@@ -41,7 +41,7 @@ define('views/admin/dynamic-logic/conditions-string/item-value-link',
             this.createView('value', viewName, {
                 model: this.model,
                 name: 'link',
-                el: '[data-view-key="'+key+'"]',
+                selector: '[data-view-key="' + key + '"]',
                 foreignScope: this.getMetadata().get(['entityDefs', this.scope, 'fields', this.field, 'entity']) ||
                     this.getMetadata().get(['entityDefs', this.scope, 'links', this.field, 'entity'])
             });
diff --git a/client/src/views/admin/dynamic-logic/conditions-string/item-value-varchar.js b/client/src/views/admin/dynamic-logic/conditions-string/item-value-varchar.js
index cfb11f0c9e..08cc97a302 100644
--- a/client/src/views/admin/dynamic-logic/conditions-string/item-value-varchar.js
+++ b/client/src/views/admin/dynamic-logic/conditions-string/item-value-varchar.js
@@ -41,7 +41,7 @@ define('views/admin/dynamic-logic/conditions-string/item-value-varchar',
             this.createView('value', viewName, {
                 model: this.model,
                 name: this.field,
-                el: this.getSelector() + '[data-view-key="'+key+'"]',
+                selector: '[data-view-key="'+key+'"]',
             });
         },
     });
diff --git a/client/src/views/admin/dynamic-logic/conditions/field-types/base.js b/client/src/views/admin/dynamic-logic/conditions/field-types/base.js
index 8a827e1dfa..c027de9bd3 100644
--- a/client/src/views/admin/dynamic-logic/conditions/field-types/base.js
+++ b/client/src/views/admin/dynamic-logic/conditions/field-types/base.js
@@ -128,7 +128,7 @@ define('views/admin/dynamic-logic/conditions/field-types/base', ['view'], functi
                 this.createView('value', viewName, {
                     model: this.model,
                     name: fieldName,
-                    el: this.getSelector() + ' .value-container',
+                    selector: '.value-container',
                     mode: 'edit',
                     readOnlyDisabled: true,
                 }, function (view) {
@@ -149,7 +149,7 @@ define('views/admin/dynamic-logic/conditions/field-types/base', ['view'], functi
                 this.createView('value', 'views/fields/varchar', {
                     model: this.model,
                     name: this.getValueFieldName(),
-                    el: this.getSelector() + ' .value-container',
+                    selector: '.value-container',
                     mode: 'edit',
                     readOnlyDisabled: true,
                 }, function (view) {
diff --git a/client/src/views/admin/dynamic-logic/conditions/field-types/link-multiple.js b/client/src/views/admin/dynamic-logic/conditions/field-types/link-multiple.js
index b4e2d7741a..bf7860a3be 100644
--- a/client/src/views/admin/dynamic-logic/conditions/field-types/link-multiple.js
+++ b/client/src/views/admin/dynamic-logic/conditions/field-types/link-multiple.js
@@ -54,7 +54,7 @@ define('views/admin/dynamic-logic/conditions/field-types/link-multiple',
             this.createView('value', viewName, {
                 model: this.model,
                 name: fieldName,
-                el: this.getSelector() + ' .value-container',
+                selector: '.value-container',
                 mode: 'edit',
                 readOnlyDisabled: true,
                 foreignScope: this.getMetadata()
diff --git a/client/src/views/admin/dynamic-logic/conditions/group-base.js b/client/src/views/admin/dynamic-logic/conditions/group-base.js
index 7c1f79233d..8f6e664a0e 100644
--- a/client/src/views/admin/dynamic-logic/conditions/group-base.js
+++ b/client/src/views/admin/dynamic-logic/conditions/group-base.js
@@ -126,7 +126,7 @@ define('views/admin/dynamic-logic/conditions/group-base', ['view'], function (De
                 itemData: item,
                 scope: this.scope,
                 level: this.level + 1,
-                el: this.getSelector() + ' [data-view-key="'+key+'"]',
+                selector: '[data-view-key="'+key+'"]',
                 number: number,
                 type: type,
                 field: field,
diff --git a/client/src/views/admin/dynamic-logic/modals/add-field.js b/client/src/views/admin/dynamic-logic/modals/add-field.js
index 61e08d290b..ad87e59ca4 100644
--- a/client/src/views/admin/dynamic-logic/modals/add-field.js
+++ b/client/src/views/admin/dynamic-logic/modals/add-field.js
@@ -45,7 +45,7 @@ define('views/admin/dynamic-logic/modals/add-field', ['views/modal', 'model'], f
             var model = new Model();
 
             this.createView('field', 'views/admin/dynamic-logic/fields/field', {
-                el: this.getSelector() + ' [data-name="field"]',
+                selector: '[data-name="field"]',
                 model: model,
                 mode: 'edit',
                 scope: this.scope,
diff --git a/client/src/views/admin/dynamic-logic/modals/edit.js b/client/src/views/admin/dynamic-logic/modals/edit.js
index 5c74129167..5931094a70 100644
--- a/client/src/views/admin/dynamic-logic/modals/edit.js
+++ b/client/src/views/admin/dynamic-logic/modals/edit.js
@@ -60,7 +60,7 @@ define('views/admin/dynamic-logic/modals/edit', ['views/modal'], function (Dep)
             this.scope = this.options.scope;
 
             this.createView('conditionGroup', 'views/admin/dynamic-logic/conditions/and', {
-                el: this.getSelector() + ' .top-group-container',
+                selector: '.top-group-container',
                 itemData: {
                     value: this.conditionGroup
                 },
diff --git a/client/src/views/admin/entity-manager/edit.js b/client/src/views/admin/entity-manager/edit.js
index b2391e5a61..2e1795b588 100644
--- a/client/src/views/admin/entity-manager/edit.js
+++ b/client/src/views/admin/entity-manager/edit.js
@@ -458,7 +458,7 @@ function (Dep, Model) {
 
         createRecordView: function () {
             return this.createView('record', 'views/admin/entity-manager/record/edit', {
-                el: this.getSelector() + ' .record',
+                selector: '.record',
                 model: this.model,
                 detailLayout: this.detailLayout,
                 isNew: this.isNew,
diff --git a/client/src/views/admin/extensions/index.js b/client/src/views/admin/extensions/index.js
index a134308264..1e0756054f 100644
--- a/client/src/views/admin/extensions/index.js
+++ b/client/src/views/admin/extensions/index.js
@@ -103,7 +103,7 @@ export default Dep.extend({
                 .then(() => {
                     this.createView('list', 'views/extension/record/list', {
                         collection: this.collection,
-                        el: this.options.el + ' > .list-container',
+                        selector: '> .list-container',
                     });
 
                     if (this.collection.length === 0) {
diff --git a/client/src/views/admin/field-manager/edit.js b/client/src/views/admin/field-manager/edit.js
index 3133c9c4ea..6b63aa0b7f 100644
--- a/client/src/views/admin/field-manager/edit.js
+++ b/client/src/views/admin/field-manager/edit.js
@@ -614,7 +614,7 @@ define('views/admin/field-manager/edit', ['view', 'model'], function (Dep, Model
 
             let o = {
                 model: this.model,
-                el: this.options.el + ' .field[data-name="' + name + '"]',
+                selector: '.field[data-name="' + name + '"]',
                 defs: {
                     name: name,
                     params: params
diff --git a/client/src/views/admin/field-manager/fields/dynamic-logic-conditions.js b/client/src/views/admin/field-manager/fields/dynamic-logic-conditions.js
index ae7a779cc2..64147c4123 100644
--- a/client/src/views/admin/field-manager/fields/dynamic-logic-conditions.js
+++ b/client/src/views/admin/field-manager/fields/dynamic-logic-conditions.js
@@ -52,7 +52,7 @@ define('views/admin/field-manager/fields/dynamic-logic-conditions', ['views/fiel
 
         createStringView: function () {
             this.createView('conditionGroup', 'views/admin/dynamic-logic/conditions-string/group-base', {
-                el: this.getSelector() + ' .top-group-string-container',
+                selector: '.top-group-string-container',
                 itemData: {
                     value: this.conditionGroup
                 },
diff --git a/client/src/views/admin/field-manager/fields/dynamic-logic-options.js b/client/src/views/admin/field-manager/fields/dynamic-logic-options.js
index 0c47a86d1b..ea324f4204 100644
--- a/client/src/views/admin/field-manager/fields/dynamic-logic-options.js
+++ b/client/src/views/admin/field-manager/fields/dynamic-logic-options.js
@@ -93,7 +93,7 @@ define('views/admin/field-manager/fields/dynamic-logic-options', ['views/fields/
             model.set('options', this.optionsDefsList[num].optionList || []);
 
             this.createView(key, 'views/fields/multi-enum', {
-                el: this.getSelector() + ' .options-container[data-key="'+key+'"]',
+                selector: '.options-container[data-key="'+key+'"]',
                 model: model,
                 name: 'options',
                 mode: 'edit',
@@ -143,7 +143,7 @@ define('views/admin/field-manager/fields/dynamic-logic-options', ['views/fields/
             }
 
             this.createView(key, 'views/admin/dynamic-logic/conditions-string/group-base', {
-                el: this.getSelector() + ' .string-container[data-key="'+key+'"]',
+                selector: '.string-container[data-key="'+key+'"]',
                 itemData: {
                     value: this.optionsDefsList[num].conditionGroup
                 },
diff --git a/client/src/views/admin/field-manager/index.js b/client/src/views/admin/field-manager/index.js
index 4627d9899d..e651a1e06b 100644
--- a/client/src/views/admin/field-manager/index.js
+++ b/client/src/views/admin/field-manager/index.js
@@ -106,7 +106,7 @@ define('views/admin/field-manager/index', ['view'], function (Dep) {
             });
 
             this.createView('header', 'views/admin/field-manager/header', {
-                el: this.getSelector() + '> .page-header',
+                selector: '> .page-header',
                 scope: this.scope,
                 field: this.field,
             });
@@ -123,7 +123,7 @@ define('views/admin/field-manager/index', ['view'], function (Dep) {
             Espo.Ui.notify(' ... ');
 
             this.createView('content', 'views/admin/field-manager/list', {
-                el: '#fields-content',
+                fullSelector: '#fields-content',
                 scope: scope,
             }, (view) => {
                 view.render();
@@ -146,7 +146,7 @@ define('views/admin/field-manager/index', ['view'], function (Dep) {
             Espo.Ui.notify(' ... ');
 
             this.createView('content', 'views/admin/field-manager/edit', {
-                el: '#fields-content',
+                fullSelector: '#fields-content',
                 scope: scope,
                 field: field,
             }, (view) => {
@@ -172,7 +172,7 @@ define('views/admin/field-manager/index', ['view'], function (Dep) {
             Espo.Ui.notify(' ... ');
 
             this.createView('content', 'Admin.FieldManager.Edit', {
-                el: '#fields-content',
+                fullSelector: '#fields-content',
                 scope: scope,
                 type: type,
             }, (view) => {
diff --git a/client/src/views/admin/formula-sandbox/index.js b/client/src/views/admin/formula-sandbox/index.js
index 776ea75cec..49cf2f5d25 100644
--- a/client/src/views/admin/formula-sandbox/index.js
+++ b/client/src/views/admin/formula-sandbox/index.js
@@ -149,7 +149,7 @@ define('views/admin/formula-sandbox/index', ['view', 'model'], function (Dep, Mo
 
         createRecordView: function () {
             return this.createView('record', 'views/admin/formula-sandbox/record/edit', {
-                el: this.getSelector() + ' .record',
+                selector: '.record',
                 model: this.model,
                 targetEntityType: this.targetEntityType,
                 confirmLeaveDisabled: true,
diff --git a/client/src/views/admin/formula/modals/add-attribute.js b/client/src/views/admin/formula/modals/add-attribute.js
index 6298778901..f8ab8e4825 100644
--- a/client/src/views/admin/formula/modals/add-attribute.js
+++ b/client/src/views/admin/formula/modals/add-attribute.js
@@ -41,7 +41,7 @@ define('views/admin/formula/modals/add-attribute', ['views/modal', 'model'], fun
             var model = new Model();
 
             this.createView('attribute', 'views/admin/formula/fields/attribute', {
-                el: this.getSelector() + ' [data-name="attribute"]',
+                selector: '[data-name="attribute"]',
                 model: model,
                 mode: 'edit',
                 scope: this.scope,
diff --git a/client/src/views/admin/index.js b/client/src/views/admin/index.js
index a44d94f3e0..266fb674e3 100644
--- a/client/src/views/admin/index.js
+++ b/client/src/views/admin/index.js
@@ -128,7 +128,7 @@ define('views/admin/index', ['view'], function (Dep) {
 
             if (!this.getConfig().get('adminNotificationsDisabled')) {
                 this.createView('notificationsPanel', 'views/admin/panels/notifications', {
-                    el: this.getSelector() + ' .notifications-panel-container'
+                    selector: '.notifications-panel-container'
                 });
             }
         },
diff --git a/client/src/views/admin/integrations/edit.js b/client/src/views/admin/integrations/edit.js
index 83b98157fa..abe3cc41ea 100644
--- a/client/src/views/admin/integrations/edit.js
+++ b/client/src/views/admin/integrations/edit.js
@@ -147,7 +147,7 @@ define('views/admin/integrations/edit', ['view', 'model'], function (Dep, Model)
 
             this.createView(name, viewName, {
                 model: this.model,
-                el: this.options.el + ' .field[data-name="'+name+'"]',
+                selector: '.field[data-name="' + name + '"]',
                 defs: {
                     name: name,
                     params: params
diff --git a/client/src/views/admin/integrations/index.js b/client/src/views/admin/integrations/index.js
index 195f4a6c5b..c2038e5796 100644
--- a/client/src/views/admin/integrations/index.js
+++ b/client/src/views/admin/integrations/index.js
@@ -82,7 +82,7 @@ define('views/admin/integrations/index', ['view'], function (Dep) {
             Espo.Ui.notify(' ... ');
 
             this.createView('content', viewName, {
-                el: '#integration-content',
+                fullSelector: '#integration-content',
                 integration: integration,
             }, view => {
                 this.renderHeader();
diff --git a/client/src/views/admin/label-manager/edit.js b/client/src/views/admin/label-manager/edit.js
index 6ffb85dd7a..7d739b2ba1 100644
--- a/client/src/views/admin/label-manager/edit.js
+++ b/client/src/views/admin/label-manager/edit.js
@@ -188,7 +188,7 @@ define('views/admin/label-manager/edit', ['view'], function (Dep) {
             }
 
             this.createView(category, 'views/admin/label-manager/category', {
-                el: this.getSelector() + ' .panel-body[data-name="'+category+'"]',
+                selector: '.panel-body[data-name="'+category+'"]',
                 categoryData: this.getCategoryData(category),
                 scope: this.scope,
                 language: this.language,
diff --git a/client/src/views/admin/label-manager/index.js b/client/src/views/admin/label-manager/index.js
index 4ab4d96fc2..4c8f5a868c 100644
--- a/client/src/views/admin/label-manager/index.js
+++ b/client/src/views/admin/label-manager/index.js
@@ -146,7 +146,7 @@ define('views/admin/label-manager/index', ['view'], function (Dep) {
             Espo.Ui.notify(' ... ');
 
             this.createView('record', 'views/admin/label-manager/edit', {
-                el: this.getSelector() + ' .language-record',
+                selector: '.language-record',
                 scope: this.scope,
                 language: this.language,
             }, (view) => {
diff --git a/client/src/views/admin/layouts/grid.js b/client/src/views/admin/layouts/grid.js
index 4c8b3f83be..6f8117f0e3 100644
--- a/client/src/views/admin/layouts/grid.js
+++ b/client/src/views/admin/layouts/grid.js
@@ -368,7 +368,7 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base'], function (Dep)
             });
 
             this.createView('panel-' + data.number, 'view', {
-                el: this.getSelector() + ' li.panel-layout[data-number="'+data.number+'"]',
+                selector: 'li.panel-layout[data-number="'+data.number+'"]',
                 template: 'admin/layouts/grid-panel',
                 data: () => {
                     var o = Espo.Utils.clone(data);
diff --git a/client/src/views/admin/layouts/index.js b/client/src/views/admin/layouts/index.js
index 743fcec99c..5afb8b0b34 100644
--- a/client/src/views/admin/layouts/index.js
+++ b/client/src/views/admin/layouts/index.js
@@ -234,7 +234,7 @@ define('views/admin/layouts/index', ['view'], function (Dep) {
                 .get('clientDefs.' + scope + '.additionalLayouts.' + type + '.type') || type;
 
             this.createView('content', 'views/admin/layouts/' + Espo.Utils.camelCaseToHyphen(typeReal), {
-                el: '#layout-content',
+                fullSelector: '#layout-content',
                 scope: scope,
                 type: type,
                 setId: this.setId,
diff --git a/client/src/views/admin/layouts/modals/edit-attributes.js b/client/src/views/admin/layouts/modals/edit-attributes.js
index bec36ac0fd..1d43f80462 100644
--- a/client/src/views/admin/layouts/modals/edit-attributes.js
+++ b/client/src/views/admin/layouts/modals/edit-attributes.js
@@ -93,7 +93,7 @@ define('views/admin/layouts/modals/edit-attributes', ['views/modal', 'model'], f
             attributeList = filteredAttributeList;
 
             this.createView('edit', 'views/admin/layouts/record/edit-attributes', {
-                el: this.options.el + ' .edit-container',
+                selector: '.edit-container',
                 attributeList: attributeList,
                 attributeDefs: this.options.attributeDefs,
                 dynamicLogicDefs: this.options.dynamicLogicDefs,
diff --git a/client/src/views/admin/layouts/modals/panel-attributes.js b/client/src/views/admin/layouts/modals/panel-attributes.js
index 47cb3eddf4..b924eb80f0 100644
--- a/client/src/views/admin/layouts/modals/panel-attributes.js
+++ b/client/src/views/admin/layouts/modals/panel-attributes.js
@@ -71,7 +71,7 @@ define('views/admin/layouts/modals/panel-attributes', ['views/modal', 'model'],
             let attributeDefs = this.options.attributeDefs;
 
             this.createView('edit', 'views/admin/layouts/record/edit-attributes', {
-                el: this.options.el + ' .edit-container',
+                selector: '.edit-container',
                 attributeList: attributeList,
                 attributeDefs: attributeDefs,
                 model: model,
diff --git a/client/src/views/admin/link-manager/modals/edit.js b/client/src/views/admin/link-manager/modals/edit.js
index ae3e04ad8b..d9db1c0046 100644
--- a/client/src/views/admin/link-manager/modals/edit.js
+++ b/client/src/views/admin/link-manager/modals/edit.js
@@ -197,7 +197,7 @@ define('views/admin/link-manager/modals/edit',
             this.createView('entity', 'views/fields/varchar', {
                 model: model,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="entity"]',
+                selector: '.field[data-name="entity"]',
                 defs: {
                     name: 'entity'
                 },
@@ -207,7 +207,7 @@ define('views/admin/link-manager/modals/edit',
             this.createView('entityForeign', 'views/fields/enum', {
                 model: model,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="entityForeign"]',
+                selector: '.field[data-name="entityForeign"]',
                 defs: {
                     name: 'entityForeign',
                     params: {
@@ -222,7 +222,7 @@ define('views/admin/link-manager/modals/edit',
             this.createView('linkType', 'views/fields/enum', {
                 model: model,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="linkType"]',
+                selector: '.field[data-name="linkType"]',
                 defs: {
                     name: 'linkType',
                     params: {
@@ -237,7 +237,7 @@ define('views/admin/link-manager/modals/edit',
             this.createView('link', 'views/fields/varchar', {
                 model: model,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="link"]',
+                selector: '.field[data-name="link"]',
                 defs: {
                     name: 'link',
                     params: {
@@ -251,7 +251,7 @@ define('views/admin/link-manager/modals/edit',
             this.createView('linkForeign', 'views/fields/varchar', {
                 model: model,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="linkForeign"]',
+                selector: '.field[data-name="linkForeign"]',
                 defs: {
                     name: 'linkForeign',
                     params: {
@@ -265,7 +265,7 @@ define('views/admin/link-manager/modals/edit',
             this.createView('label', 'views/fields/varchar', {
                 model: model,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="label"]',
+                selector: '.field[data-name="label"]',
                 defs: {
                     name: 'label',
                     params: {
@@ -278,7 +278,7 @@ define('views/admin/link-manager/modals/edit',
             this.createView('labelForeign', 'views/fields/varchar', {
                 model: model,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="labelForeign"]',
+                selector: '.field[data-name="labelForeign"]',
                 defs: {
                     name: 'labelForeign',
                     params: {
@@ -292,7 +292,7 @@ define('views/admin/link-manager/modals/edit',
                 this.createView('relationName', 'views/fields/varchar', {
                     model: model,
                     mode: 'edit',
-                    el: this.options.el + ' .field[data-name="relationName"]',
+                    selector: '.field[data-name="relationName"]',
                     defs: {
                         name: 'relationName',
                         params: {
@@ -307,7 +307,7 @@ define('views/admin/link-manager/modals/edit',
             this.createView('linkMultipleField', 'views/fields/bool', {
                 model: model,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="linkMultipleField"]',
+                selector: '.field[data-name="linkMultipleField"]',
                 defs: {
                     name: 'linkMultipleField'
                 },
@@ -319,7 +319,7 @@ define('views/admin/link-manager/modals/edit',
             this.createView('linkMultipleFieldForeign', 'views/fields/bool', {
                 model: model,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="linkMultipleFieldForeign"]',
+                selector: '.field[data-name="linkMultipleFieldForeign"]',
                 defs: {
                     name: 'linkMultipleFieldForeign'
                 },
@@ -331,7 +331,7 @@ define('views/admin/link-manager/modals/edit',
             this.createView('audited', 'views/fields/bool', {
                 model: model,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="audited"]',
+                selector: '.field[data-name="audited"]',
                 defs: {
                     name: 'audited'
                 },
@@ -342,7 +342,7 @@ define('views/admin/link-manager/modals/edit',
             this.createView('auditedForeign', 'views/fields/bool', {
                 model: model,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="auditedForeign"]',
+                selector: '.field[data-name="auditedForeign"]',
                 defs: {
                     name: 'auditedForeign'
                 },
@@ -353,24 +353,25 @@ define('views/admin/link-manager/modals/edit',
             this.createView('parentEntityTypeList', 'views/fields/entity-type-list', {
                 model: model,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="parentEntityTypeList"]',
+                selector: '.field[data-name="parentEntityTypeList"]',
                 defs: {
                     name: 'parentEntityTypeList',
                 },
             });
 
             this.createView('foreignLinkEntityTypeList',
-                    'views/admin/link-manager/fields/foreign-link-entity-type-list', {
-                model: model,
-                mode: 'edit',
-                el: this.options.el + ' .field[data-name="foreignLinkEntityTypeList"]',
-                defs: {
-                    name: 'foreignLinkEntityTypeList',
-                    params: {
-                        options: this.model.get('parentEntityTypeList') || [],
+                    'views/admin/link-manager/fields/foreign-link-entity-type-list',
+                {
+                    model: model,
+                    mode: 'edit',
+                    selector: '.field[data-name="foreignLinkEntityTypeList"]',
+                    defs: {
+                        name: 'foreignLinkEntityTypeList',
+                        params: {
+                            options: this.model.get('parentEntityTypeList') || [],
+                        },
                     },
-                },
-            });
+                });
 
             this.model.fetchedAttributes = this.model.getClonedAttributes();
 
diff --git a/client/src/views/admin/template-manager/edit.js b/client/src/views/admin/template-manager/edit.js
index 95d8e36c4f..dde80561ab 100644
--- a/client/src/views/admin/template-manager/edit.js
+++ b/client/src/views/admin/template-manager/edit.js
@@ -106,17 +106,19 @@ define('views/admin/template-manager/edit', ['view', 'model'], function (Dep, Mo
                 this.createView('bodyField', 'views/fields/wysiwyg', {
                     name: 'body',
                     model: model,
-                    el: this.getSelector() + ' .body-field',
+                    selector: '.body-field',
                     mode: 'edit'
                 });
+
                 if (this.hasSubject) {
                     this.createView('subjectField', 'views/fields/varchar', {
                         name: 'subject',
                         model: model,
-                        el: this.getSelector() + ' .subject-field',
+                        selector: '.subject-field',
                         mode: 'edit'
                     });
                 }
+
                 this.wait(false);
             }.bind(this));
         },
diff --git a/client/src/views/admin/template-manager/index.js b/client/src/views/admin/template-manager/index.js
index 80994c9a64..272b8382c1 100644
--- a/client/src/views/admin/template-manager/index.js
+++ b/client/src/views/admin/template-manager/index.js
@@ -120,7 +120,7 @@ define('views/admin/template-manager/index', ['view'], function (Dep) {
             Espo.Ui.notify(' ... ');
 
             this.createView('record', 'views/admin/template-manager/edit', {
-                el: this.getSelector() + ' .template-record',
+                selector: '.template-record',
                 name: this.selectedTemplate,
             }, (view) => {
                 view.render();
diff --git a/client/src/views/collapsed-modal-bar.js b/client/src/views/collapsed-modal-bar.js
index 0c678a83fe..ba19f49b39 100644
--- a/client/src/views/collapsed-modal-bar.js
+++ b/client/src/views/collapsed-modal-bar.js
@@ -120,7 +120,7 @@ class CollapsedModalBar extends View {
         this.createView(key, 'views/collapsed-modal', {
             title: options.title,
             duplicateNumber: this.calculateDuplicateNumber(options.title),
-            el: this.getSelector() + ' [data-number="' + number + '"]',
+            selector: '[data-number="' + number + '"]',
         })
         .then(view => {
             this.listenToOnce(view, 'close', () => {
diff --git a/client/src/views/dashboard-template/modals/deploy-to-team.js b/client/src/views/dashboard-template/modals/deploy-to-team.js
index c8400201aa..c4bd9eefc9 100644
--- a/client/src/views/dashboard-template/modals/deploy-to-team.js
+++ b/client/src/views/dashboard-template/modals/deploy-to-team.js
@@ -68,7 +68,7 @@ define('views/dashboard-template/modals/deploy-to-team', ['views/modal', 'model'
             this.createView('record', 'views/record/edit-for-modal', {
                 scope: 'None',
                 model: this.formModel,
-                el: this.getSelector() + ' .record',
+                selector: '.record',
                 detailLayout: [
                     {
                         rows: [
diff --git a/client/src/views/dashboard-template/modals/deploy-to-users.js b/client/src/views/dashboard-template/modals/deploy-to-users.js
index b118468a42..0db22dcba4 100644
--- a/client/src/views/dashboard-template/modals/deploy-to-users.js
+++ b/client/src/views/dashboard-template/modals/deploy-to-users.js
@@ -69,7 +69,7 @@ define('views/dashboard-template/modals/deploy-to-users', ['views/modal', 'model
             this.createView('record', 'views/record/edit-for-modal', {
                 scope: 'None',
                 model: this.formModel,
-                el: this.getSelector() + ' .record',
+                selector: '.record',
                 detailLayout: [
                     {
                         rows: [
diff --git a/client/src/views/dashboard.js b/client/src/views/dashboard.js
index 1de2921bee..976279a174 100644
--- a/client/src/views/dashboard.js
+++ b/client/src/views/dashboard.js
@@ -603,7 +603,7 @@ class DashboardView extends View {
             label: name,
             name: name,
             id: id,
-            el: this.options.el + ' > .dashlets .dashlet-container[data-id="' + id + '"]',
+            selector: '> .dashlets .dashlet-container[data-id="' + id + '"]',
             readOnly: this.dashletsReadOnly,
             locked: this.getPreferences().get('dashboardLocked'),
         }, view => {
diff --git a/client/src/views/dashlet.js b/client/src/views/dashlet.js
index 6a1ff993ad..feef78b822 100644
--- a/client/src/views/dashlet.js
+++ b/client/src/views/dashlet.js
@@ -152,7 +152,7 @@ class DashletView extends View {
             'views/dashlets/' + Espo.Utils.camelCaseToHyphen(this.name);
 
         this.createView('body', viewName, {
-            el: this.options.el + ' .dashlet-body',
+            selector: '.dashlet-body',
             id: this.id,
             name: this.name,
             readOnly: this.options.readOnly,
diff --git a/client/src/views/dashlets/abstract/record-list.js b/client/src/views/dashlets/abstract/record-list.js
index 65e9513e8b..8666f4651e 100644
--- a/client/src/views/dashlets/abstract/record-list.js
+++ b/client/src/views/dashlets/abstract/record-list.js
@@ -124,7 +124,7 @@ define('views/dashlets/abstract/record-list',
 
                 this.createView('list', viewName, {
                     collection: collection,
-                    el: this.getSelector() + ' .list-container',
+                    selector: '.list-container',
                     pagination: this.getOption('pagination') ? 'bottom' : false,
                     type: 'listDashlet',
                     rowActionsView: this.rowActionsView,
diff --git a/client/src/views/dashlets/stream.js b/client/src/views/dashlets/stream.js
index 21d434e896..c59d7e2d07 100644
--- a/client/src/views/dashlets/stream.js
+++ b/client/src/views/dashlets/stream.js
@@ -57,11 +57,11 @@ define('views/dashlets/stream', ['views/dashlets/abstract/base'], function (Dep)
 
                 this.listenToOnce(collection, 'sync', () => {
                     this.createView('list', 'views/stream/record/list', {
-                        el: this.getSelector() + ' > .list-container',
+                        selector: '> .list-container',
                         collection: collection,
                         isUserStream: true,
                         noEdit: false,
-                    }, (view) => {
+                    }, view => {
                         view.render();
                     });
                 });
diff --git a/client/src/views/detail.js b/client/src/views/detail.js
index fbc66056cd..9de2eb486c 100644
--- a/client/src/views/detail.js
+++ b/client/src/views/detail.js
@@ -159,7 +159,7 @@ class DetailView extends MainView {
     setupHeader() {
         this.createView('header', this.headerView, {
             model: this.model,
-            el: '#main > .header',
+            fullSelector: '#main > .header',
             scope: this.scope,
             fontSizeFlexible: true,
         });
@@ -179,7 +179,7 @@ class DetailView extends MainView {
     setupRecord() {
         let o = {
             model: this.model,
-            el: '#main > .record',
+            fullSelector: '#main > .record',
             scope: this.scope,
             shortcutKeysEnabled: true,
             isReturn: this.isReturn,
diff --git a/client/src/views/edit.js b/client/src/views/edit.js
index 310a7f99f7..ea71bd1dab 100644
--- a/client/src/views/edit.js
+++ b/client/src/views/edit.js
@@ -96,7 +96,7 @@ class EditView extends MainView {
     setupHeader() {
         this.createView('header', this.headerView, {
             model: this.model,
-            el: '#main > .header',
+            fullSelector: '#main > .header',
             scope: this.scope,
         });
     }
@@ -107,7 +107,7 @@ class EditView extends MainView {
     setupRecord() {
         let o = {
             model: this.model,
-            el: '#main > .record',
+            fullSelector: '#main > .record',
             scope: this.scope,
             shortcutKeysEnabled: true,
         };
diff --git a/client/src/views/email/list.js b/client/src/views/email/list.js
index 0964f2e6e9..301bc8c33a 100644
--- a/client/src/views/email/list.js
+++ b/client/src/views/email/list.js
@@ -454,7 +454,7 @@ define('views/email/list', ['views/list'], function (Dep) {
                 this.createView('folders', 'views/email-folder/list-side', {
                     collection: collection,
                     emailCollection: this.collection,
-                    el: this.options.el + ' .folders-container',
+                    selector: '.folders-container',
                     showEditLink: this.getAcl().check(this.folderScope, 'edit'),
                     selectedFolderId: this.selectedFolderId,
                 }, view => {
diff --git a/client/src/views/email/modals/body-plain.js b/client/src/views/email/modals/body-plain.js
index 40aca63526..bbaec33147 100644
--- a/client/src/views/email/modals/body-plain.js
+++ b/client/src/views/email/modals/body-plain.js
@@ -45,7 +45,7 @@ define('views/email/modals/body-plain', ['views/modal'], function (Dep) {
             this.headerText = this.model.get('name');
 
             this.createView('bodyPlain', 'views/fields/text', {
-                el: this.options.el + ' .field[data-name="bodyPlain"]',
+                selector: '.field[data-name="bodyPlain"]',
                 model: this.model,
                 defs: {
                     name: 'bodyPlain',
diff --git a/client/src/views/export/modals/export.js b/client/src/views/export/modals/export.js
index 09b4c38b37..7ca688837b 100644
--- a/client/src/views/export/modals/export.js
+++ b/client/src/views/export/modals/export.js
@@ -79,7 +79,7 @@ define('views/export/modals/export', ['views/modal', 'model'], function (Dep, Mo
             this.createView('record', 'views/export/record/record', {
                 scope: this.scope,
                 model: this.model,
-                el: this.getSelector() + ' .record',
+                selector: '.record',
                 formatList: formatList,
             });
         },
diff --git a/client/src/views/export/modals/idle.js b/client/src/views/export/modals/idle.js
index 0320a548ce..bf65ef9c10 100644
--- a/client/src/views/export/modals/idle.js
+++ b/client/src/views/export/modals/idle.js
@@ -88,7 +88,7 @@ define('views/export/modals/idle', ['views/modal', 'model'], function (Dep, Mode
             this.createView('record', 'views/record/edit-for-modal', {
                 scope: 'None',
                 model: this.model,
-                el: this.getSelector() + ' .record',
+                selector: '.record',
                 detailLayout: [
                     {
                         rows: [
diff --git a/client/src/views/external-account/index.js b/client/src/views/external-account/index.js
index dae8d4a953..e7d752fc06 100644
--- a/client/src/views/external-account/index.js
+++ b/client/src/views/external-account/index.js
@@ -85,7 +85,7 @@ define('views/external-account/index', ['view'], function (Dep) {
             Espo.Ui.notify(' ... ');
 
             this.createView('content', viewName, {
-                el: '#external-account-content',
+                fullSelector: '#external-account-content',
                 id: id,
                 integration: integration
             }, view => {
diff --git a/client/src/views/external-account/oauth2.js b/client/src/views/external-account/oauth2.js
index 37234b59f2..5a5351b50a 100644
--- a/client/src/views/external-account/oauth2.js
+++ b/client/src/views/external-account/oauth2.js
@@ -144,7 +144,7 @@ define('views/external-account/oauth2', ['view', 'model'], function (Dep, Model)
         createFieldView: function (type, name, readOnly, params) {
             this.createView(name, this.getFieldManager().getViewName(type), {
                 model: this.model,
-                el: this.options.el + ' .field[data-name="' + name + '"]',
+                selector: '.field[data-name="' + name + '"]',
                 defs: {
                     name: name,
                     params: params
diff --git a/client/src/views/fields/complex-created.js b/client/src/views/fields/complex-created.js
index 00a3a2a856..d0431abebe 100644
--- a/client/src/views/fields/complex-created.js
+++ b/client/src/views/fields/complex-created.js
@@ -78,7 +78,7 @@ class ComplexCreatedFieldView extends BaseFieldView {
             mode: this.MODE_DETAIL,
             readOnly: true,
             readOnlyLocked: true,
-            el: this.getSelector() + ' [data-name="' + field + '"]',
+            selector: '[data-name="' + field + '"]',
         });
     }
 
diff --git a/client/src/views/global-search/global-search.js b/client/src/views/global-search/global-search.js
index b224de0c87..41ac803b41 100644
--- a/client/src/views/global-search/global-search.js
+++ b/client/src/views/global-search/global-search.js
@@ -91,7 +91,7 @@ define('views/global-search/global-search', ['view'], function (Dep) {
             $container.appendTo(this.$el.find('.global-search-panel-container'));
 
             this.createView('panel', 'views/global-search/panel', {
-                el: '#global-search-panel',
+                fullSelector: '#global-search-panel',
                 collection: this.collection,
             }, function (view) {
                 view.render();
diff --git a/client/src/views/global-search/panel.js b/client/src/views/global-search/panel.js
index dfe323821a..f41d2a6240 100644
--- a/client/src/views/global-search/panel.js
+++ b/client/src/views/global-search/panel.js
@@ -58,7 +58,7 @@ define('views/global-search/panel', ['view'], function (Dep) {
         afterRender: function () {
             this.listenToOnce(this.collection, 'sync', () => {
                 this.createView('list', 'views/record/list-expanded', {
-                    el: this.options.el + ' .list-container',
+                    selector: '.list-container',
                     collection: this.collection,
                     listLayout: {
                         rows: [
@@ -67,8 +67,8 @@ define('views/global-search/panel', ['view'], function (Dep) {
                                     name: 'name',
                                     view: 'views/global-search/name-field',
                                     params: {
-                                        containerEl: this.options.el
-                                    }
+                                        containerEl: this.getSelector(),
+                                    },
                                 }
                             ]
                         ],
diff --git a/client/src/views/import/index.js b/client/src/views/import/index.js
index f8b80a9af4..59f9449dc8 100644
--- a/client/src/views/import/index.js
+++ b/client/src/views/import/index.js
@@ -68,7 +68,7 @@ class IndexImportView extends View {
         }
 
         this.createView('step', 'views/import/step' + num.toString(), {
-            el: this.options.el + ' > .import-container',
+            selector: '> .import-container',
             entityType: this.entityType,
             formData: this.formData,
             result: result,
diff --git a/client/src/views/import/step1.js b/client/src/views/import/step1.js
index d2795380a9..874b0566a9 100644
--- a/client/src/views/import/step1.js
+++ b/client/src/views/import/step1.js
@@ -187,7 +187,7 @@ class Step1ImportView extends View {
         });
 
         this.createView('actionField', 'views/fields/enum', {
-            el: this.getSelector() + ' .field[data-name="action"]',
+            selector: '.field[data-name="action"]',
             model: this.model,
             name: 'action',
             mode: 'edit',
@@ -206,7 +206,7 @@ class Step1ImportView extends View {
         });
 
         this.createView('entityTypeField', 'views/fields/enum', {
-            el: this.getSelector() + ' .field[data-name="entityType"]',
+            selector: '.field[data-name="entityType"]',
             model: this.model,
             name: 'entityType',
             mode: 'edit',
@@ -219,7 +219,7 @@ class Step1ImportView extends View {
         });
 
         this.createView('decimalMarkField', 'views/fields/varchar', {
-            el: this.getSelector() + ' .field[data-name="decimalMark"]',
+            selector: '.field[data-name="decimalMark"]',
             model: this.model,
             name: 'decimalMark',
             mode: 'edit',
@@ -235,7 +235,7 @@ class Step1ImportView extends View {
         });
 
         this.createView('personNameFormatField', 'views/fields/enum', {
-            el: this.getSelector() + ' .field[data-name="personNameFormat"]',
+            selector: '.field[data-name="personNameFormat"]',
             model: this.model,
             name: 'personNameFormat',
             mode: 'edit',
@@ -246,7 +246,7 @@ class Step1ImportView extends View {
         });
 
         this.createView('delimiterField', 'views/fields/enum', {
-            el: this.getSelector() + ' .field[data-name="delimiter"]',
+            selector: '.field[data-name="delimiter"]',
             model: this.model,
             name: 'delimiter',
             mode: 'edit',
@@ -261,7 +261,7 @@ class Step1ImportView extends View {
         });
 
         this.createView('textQualifierField', 'views/fields/enum', {
-            el: this.getSelector() + ' .field[data-name="textQualifier"]',
+            selector: '.field[data-name="textQualifier"]',
             model: this.model,
             name: 'textQualifier',
             mode: 'edit',
@@ -275,7 +275,7 @@ class Step1ImportView extends View {
         });
 
         this.createView('dateFormatField', 'views/fields/enum', {
-            el: this.getSelector() + ' .field[data-name="dateFormat"]',
+            selector: '.field[data-name="dateFormat"]',
             model: this.model,
             name: 'dateFormat',
             mode: 'edit',
@@ -286,7 +286,7 @@ class Step1ImportView extends View {
         });
 
         this.createView('timeFormatField', 'views/fields/enum', {
-            el: this.getSelector() + ' .field[data-name="timeFormat"]',
+            selector: '.field[data-name="timeFormat"]',
             model: this.model,
             name: 'timeFormat',
             mode: 'edit',
@@ -297,7 +297,7 @@ class Step1ImportView extends View {
         });
 
         this.createView('currencyField', 'views/fields/enum', {
-            el: this.getSelector() + ' .field[data-name="currency"]',
+            selector: '.field[data-name="currency"]',
             model: this.model,
             name: 'currency',
             mode: 'edit',
@@ -307,7 +307,7 @@ class Step1ImportView extends View {
         });
 
         this.createView('timezoneField', 'views/fields/enum', {
-            el: this.getSelector() + ' .field[data-name="timezone"]',
+            selector: '.field[data-name="timezone"]',
             model: this.model,
             name: 'timezone',
             mode: 'edit',
@@ -317,14 +317,14 @@ class Step1ImportView extends View {
         });
 
         this.createView('headerRowField', 'views/fields/bool', {
-            el: this.getSelector() + ' .field[data-name="headerRow"]',
+            selector: '.field[data-name="headerRow"]',
             model: this.model,
             name: 'headerRow',
             mode: 'edit',
         });
 
         this.createView('silentModeField', 'views/fields/bool', {
-            el: this.getSelector() + ' .field[data-name="silentMode"]',
+            selector: '.field[data-name="silentMode"]',
             model: this.model,
             name: 'silentMode',
             mode: 'edit',
@@ -333,21 +333,21 @@ class Step1ImportView extends View {
         });
 
         this.createView('idleModeField', 'views/fields/bool', {
-            el: this.getSelector() + ' .field[data-name="idleMode"]',
+            selector: '.field[data-name="idleMode"]',
             model: this.model,
             name: 'idleMode',
             mode: 'edit',
         });
 
         this.createView('skipDuplicateCheckingField', 'views/fields/bool', {
-            el: this.getSelector() + ' .field[data-name="skipDuplicateChecking"]',
+            selector: '.field[data-name="skipDuplicateChecking"]',
             model: this.model,
             name: 'skipDuplicateChecking',
             mode: 'edit',
         });
 
         this.createView('manualModeField', 'views/fields/bool', {
-            el: this.getSelector() + ' .field[data-name="manualMode"]',
+            selector: '.field[data-name="manualMode"]',
             model: this.model,
             name: 'manualMode',
             mode: 'edit',
diff --git a/client/src/views/import/step2.js b/client/src/views/import/step2.js
index c57d72a38c..68f6423442 100644
--- a/client/src/views/import/step2.js
+++ b/client/src/views/import/step2.js
@@ -460,7 +460,7 @@ define('views/import/step2', ['view'], function (Dep) {
 
             this.createView(name, viewName, {
                 model: this.model,
-                el: this.getSelector() + ' .field[data-name="' + name + '"]',
+                fullSelector: this.getSelector() + ' .field[data-name="' + name + '"]',
                 defs: {
                     name: name,
                 },
diff --git a/client/src/views/lead-capture/opt-in-confirmation-success.js b/client/src/views/lead-capture/opt-in-confirmation-success.js
index 05b3e91731..b979122c21 100644
--- a/client/src/views/lead-capture/opt-in-confirmation-success.js
+++ b/client/src/views/lead-capture/opt-in-confirmation-success.js
@@ -41,7 +41,7 @@ define('views/lead-capture/opt-in-confirmation-success', ['view', 'model'], func
                 model.set('message', this.resultData.message);
 
                 this.createView('messageField', 'views/fields/text', {
-                    el: this.getSelector() + ' .field[data-name="message"]',
+                    selector: '.field[data-name="message"]',
                     mode: 'detail',
                     inlineEditDisabled: true,
                     model: model,
diff --git a/client/src/views/list-related.js b/client/src/views/list-related.js
index 886f943971..c7e16b5312 100644
--- a/client/src/views/list-related.js
+++ b/client/src/views/list-related.js
@@ -299,7 +299,7 @@ class ListRelatedView extends MainView {
     setupHeader() {
         this.createView('header', this.headerView, {
             collection: this.collection,
-            el: '#main > .page-header',
+            fullSelector: '#main > .page-header',
             scope: this.scope,
             isXsSingleRow: true,
         });
@@ -368,7 +368,7 @@ class ListRelatedView extends MainView {
 
         return this.createView('search', this.searchView, {
             collection: this.collection,
-            el: '#main > .search-container',
+            fullSelector: '#main > .search-container',
             searchManager: this.searchManager,
             scope: this.foreignScope,
             viewMode: this.viewMode,
@@ -534,7 +534,7 @@ class ListRelatedView extends MainView {
     createListRecordView() {
         let o = {
             collection: this.collection,
-            el: this.options.el + ' .list-container',
+            selector: '.list-container',
             scope: this.foreignScope,
             skipBuildRows: true,
             shortcutKeysEnabled: true,
diff --git a/client/src/views/list-with-categories.js b/client/src/views/list-with-categories.js
index 4164fb83e1..30febe80ca 100644
--- a/client/src/views/list-with-categories.js
+++ b/client/src/views/list-with-categories.js
@@ -458,7 +458,7 @@ class ListWithCategories extends ListView {
         this.getNestedCategoriesCollection(collection => {
             this.createView('nestedCategories', 'views/record/list-nested-categories', {
                 collection: collection,
-                el: this.options.el + ' .nested-categories-container',
+                selector: '.nested-categories-container',
                 showEditLink: this.getAcl().check(this.categoryScope, 'edit'),
                 isExpanded: this.isExpanded,
                 hasExpandedToggler: this.hasExpandedToggler,
@@ -474,7 +474,7 @@ class ListWithCategories extends ListView {
         this.getTreeCollection(collection => {
             this.createView('categories', 'views/record/list-tree', {
                 collection: collection,
-                el: this.options.el + ' .categories-container',
+                selector: '.categories-container',
                 selectable: true,
                 showRoot: true,
                 rootName: this.translate(this.scope, 'scopeNamesPlural'),
diff --git a/client/src/views/list.js b/client/src/views/list.js
index 4f02705df0..01e8c370f4 100644
--- a/client/src/views/list.js
+++ b/client/src/views/list.js
@@ -292,7 +292,7 @@ class ListView extends MainView {
     setupHeader() {
         this.createView('header', this.headerView, {
             collection: this.collection,
-            el: '#main > .page-header',
+            fullSelector: '#main > .page-header',
             scope: this.scope,
             isXsSingleRow: true,
         });
@@ -346,7 +346,7 @@ class ListView extends MainView {
     createSearchView() {
         return this.createView('search', this.searchView, {
             collection: this.collection,
-            el: '#main > .search-container',
+            fullSelector: '#main > .search-container',
             searchManager: this.searchManager,
             scope: this.scope,
             viewMode: this.viewMode,
@@ -596,7 +596,7 @@ class ListView extends MainView {
     createListRecordView(fetch) {
         let o = {
             collection: this.collection,
-            el: this.options.el + ' .list-container',
+            selector: '.list-container',
             scope: this.scope,
             skipBuildRows: true,
             shortcutKeysEnabled: true,
diff --git a/client/src/views/login-second-step.js b/client/src/views/login-second-step.js
index 8347463010..a2948ac4ec 100644
--- a/client/src/views/login-second-step.js
+++ b/client/src/views/login-second-step.js
@@ -38,7 +38,7 @@ class LoginSecondStepView extends View {
     /** @inheritDoc */
     views =  {
         footer: {
-            el: 'body > footer',
+            fullSelector: 'body > footer',
             view: 'views/site/footer',
         },
     }
diff --git a/client/src/views/login.js b/client/src/views/login.js
index fd5718b78b..d7f46502f8 100644
--- a/client/src/views/login.js
+++ b/client/src/views/login.js
@@ -40,7 +40,7 @@ class LoginView extends View {
     /** @inheritDoc */
     views = {
         footer: {
-            el: 'body > footer',
+            fullSelector: 'body > footer',
             view: 'views/site/footer',
         },
     }
diff --git a/client/src/views/merge.js b/client/src/views/merge.js
index 1369e23c66..eb96ea71b3 100644
--- a/client/src/views/merge.js
+++ b/client/src/views/merge.js
@@ -47,13 +47,13 @@ class MergeView extends MainView {
     setupHeader() {
         this.createView('header', this.headerView, {
             model: this.model,
-            el: '#main > .page-header'
+            fullSelector: '#main > .page-header'
         });
     }
 
     setupRecord() {
         this.createView('body', this.recordView, {
-            el: '#main > .body',
+            fullSelector: '#main > .body',
             models: this.models,
             collection: this.collection
         });
diff --git a/client/src/views/modal.js b/client/src/views/modal.js
index 3832de6193..eb34e8a37f 100644
--- a/client/src/views/modal.js
+++ b/client/src/views/modal.js
@@ -1010,7 +1010,7 @@ class ModalView extends View {
 
                 masterView
                     .createView('collapsedModalBar', 'views/collapsed-modal-bar', {
-                        el: 'body > .collapsed-modal-bar',
+                        fullSelector: 'body > .collapsed-modal-bar',
                     })
                     .then(view => resolve(view));
             }))
diff --git a/client/src/views/modals/action-history.js b/client/src/views/modals/action-history.js
index 527979d940..df85b5e582 100644
--- a/client/src/views/modals/action-history.js
+++ b/client/src/views/modals/action-history.js
@@ -83,7 +83,7 @@ class ActionHistoryModalView extends ModalView {
 
         this.createView('search', 'views/record/search', {
             collection: this.collection,
-            el: this.containerSelector + ' .search-container',
+            fullSelector: this.containerSelector + ' .search-container',
             searchManager: searchManager,
             disableSavePreset: true,
             textFilterDisabled: true,
@@ -97,7 +97,7 @@ class ActionHistoryModalView extends ModalView {
         this.listenToOnce(this.collection, 'sync', () => {
             this.createView('list', viewName, {
                 collection: this.collection,
-                el: this.containerSelector + ' .list-container',
+                fullSelector: this.containerSelector + ' .list-container',
                 selectable: false,
                 checkboxes: false,
                 massActionsDisabled: true,
diff --git a/client/src/views/modals/change-password.js b/client/src/views/modals/change-password.js
index e5e51d6992..8f42e061d0 100644
--- a/client/src/views/modals/change-password.js
+++ b/client/src/views/modals/change-password.js
@@ -56,7 +56,7 @@ class ChangePasswordModalView extends ModalView {
             this.createView('currentPassword', 'views/fields/password', {
                 model: user,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="currentPassword"]',
+                selector:  '.field[data-name="currentPassword"]',
                 defs: {
                     name: 'currentPassword',
                     params: {
@@ -68,7 +68,7 @@ class ChangePasswordModalView extends ModalView {
             this.createView('password', 'views/user/fields/password', {
                 model: user,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="password"]',
+                selector: '.field[data-name="password"]',
                 defs: {
                     name: 'password',
                     params: {
@@ -80,7 +80,7 @@ class ChangePasswordModalView extends ModalView {
             this.createView('passwordConfirm', 'views/fields/password', {
                 model: user,
                 mode: 'edit',
-                el: this.options.el + ' .field[data-name="passwordConfirm"]',
+                selector: '.field[data-name="passwordConfirm"]',
                 defs: {
                     name: 'passwordConfirm',
                     params: {
diff --git a/client/src/views/modals/compose-email.js b/client/src/views/modals/compose-email.js
index 29b8aa07e6..c79eb3ab59 100644
--- a/client/src/views/modals/compose-email.js
+++ b/client/src/views/modals/compose-email.js
@@ -146,7 +146,7 @@ class ComposeEmailModalView extends EditModalView {
 
         let options = {
             model: model,
-            el: this.containerSelector + ' .edit-container',
+            fullSelector: this.containerSelector + ' .edit-container',
             type: 'editSmall',
             layoutName: this.layoutName || 'detailSmall',
             buttonsDisabled: true,
diff --git a/client/src/views/modals/detail.js b/client/src/views/modals/detail.js
index aafd866945..d195e24bea 100644
--- a/client/src/views/modals/detail.js
+++ b/client/src/views/modals/detail.js
@@ -385,7 +385,7 @@ class DetailModalView extends ModalView {
 
         let options = {
             model: model,
-            el: this.containerSelector + ' .record-container',
+            fullSelector: this.containerSelector + ' .record-container',
             type: 'detailSmall',
             layoutName: this.layoutName || 'detailSmall',
             buttonsDisabled: true,
diff --git a/client/src/views/modals/edit-dashboard.js b/client/src/views/modals/edit-dashboard.js
index e382cc80eb..733c7a65e0 100644
--- a/client/src/views/modals/edit-dashboard.js
+++ b/client/src/views/modals/edit-dashboard.js
@@ -99,7 +99,7 @@ class EditDashboardModalView extends ModalView {
         }
 
         this.createView('dashboardTabList', 'views/preferences/fields/dashboard-tab-list', {
-            el: this.options.el + ' .field[data-name="dashboardTabList"]',
+            selector: '.field[data-name="dashboardTabList"]',
             defs: {
                 name: 'dashboardTabList',
                 params: {
@@ -113,7 +113,7 @@ class EditDashboardModalView extends ModalView {
 
         if (this.hasLocked) {
             this.createView('dashboardLocked', 'views/fields/bool', {
-                el: this.options.el + ' .field[data-name="dashboardLocked"]',
+                selector: '.field[data-name="dashboardLocked"]',
                 mode: 'edit',
                 model: model,
                 defs: {
diff --git a/client/src/views/modals/edit.js b/client/src/views/modals/edit.js
index f499d226c6..d9a9edebc5 100644
--- a/client/src/views/modals/edit.js
+++ b/client/src/views/modals/edit.js
@@ -199,7 +199,7 @@ class EditModalView extends ModalView {
 
         let options = {
             model: model,
-            el: this.containerSelector + ' .edit-container',
+            fullSelector: this.containerSelector + ' .edit-container',
             type: 'editSmall',
             layoutName: this.layoutName || 'detailSmall',
             buttonsDisabled: true,
diff --git a/client/src/views/modals/last-viewed.js b/client/src/views/modals/last-viewed.js
index bf0bc1f63c..0d68a7aab7 100644
--- a/client/src/views/modals/last-viewed.js
+++ b/client/src/views/modals/last-viewed.js
@@ -75,7 +75,7 @@ class LastViewedModalView extends ModalView {
         this.listenToOnce(this.collection, 'sync', () => {
             this.createView('list', viewName, {
                 collection: this.collection,
-                el: this.containerSelector + ' .list-container',
+                fullSelector: this.containerSelector + ' .list-container',
                 selectable: false,
                 checkboxes: false,
                 massActionsDisabled: true,
diff --git a/client/src/views/modals/mass-action.js b/client/src/views/modals/mass-action.js
index 8009dcc3e4..ed38cd0687 100644
--- a/client/src/views/modals/mass-action.js
+++ b/client/src/views/modals/mass-action.js
@@ -85,7 +85,7 @@ class MassActionModalView extends ModalView {
         this.createView('record', 'views/record/edit-for-modal', {
             scope: 'None',
             model: this.model,
-            el: this.getSelector() + ' .record',
+            selector: '.record',
             detailLayout: [
                 {
                     rows: [
diff --git a/client/src/views/modals/mass-convert-currency.js b/client/src/views/modals/mass-convert-currency.js
index 453524e57d..abeeb2cf21 100644
--- a/client/src/views/modals/mass-convert-currency.js
+++ b/client/src/views/modals/mass-convert-currency.js
@@ -74,7 +74,7 @@ class MassConvertCurrencyModalView extends ModalView {
                 options: this.getConfig().get('currencyList')
             },
             name: 'currency',
-            el: this.getSelector() + ' .field[data-name="currency"]',
+            selector: '.field[data-name="currency"]',
             mode: 'edit',
             labelText: this.translate('Convert to')
         });
@@ -85,7 +85,7 @@ class MassConvertCurrencyModalView extends ModalView {
                 options: this.getConfig().get('currencyList')
             },
             name: 'baseCurrency',
-            el: this.getSelector() + ' .field[data-name="baseCurrency"]',
+            selector: '.field[data-name="baseCurrency"]',
             mode: 'detail',
             labelText: this.translate('baseCurrency', 'fields', 'Settings'),
             readOnly: true
@@ -94,7 +94,7 @@ class MassConvertCurrencyModalView extends ModalView {
         this.createView('currencyRates', 'views/settings/fields/currency-rates', {
             model: model,
             name: 'currencyRates',
-            el: this.getSelector() + ' .field[data-name="currencyRates"]',
+            selector: '.field[data-name="currencyRates"]',
             mode: 'edit',
             labelText: this.translate('currencyRates', 'fields', 'Settings')
         });
diff --git a/client/src/views/modals/mass-update.js b/client/src/views/modals/mass-update.js
index bf25a798b9..027ee849ad 100644
--- a/client/src/views/modals/mass-update.js
+++ b/client/src/views/modals/mass-update.js
@@ -180,7 +180,7 @@ class MassUpdateModalView extends ModalView {
 
         this.createView(name, viewName, {
             model: this.model,
-            el: this.getSelector() + ' .field[data-name="' + name + '"]',
+            selector: '.field[data-name="' + name + '"]',
             defs: {
                 name: name,
             },
diff --git a/client/src/views/modals/related-list.js b/client/src/views/modals/related-list.js
index 197ecb1dbe..f4be005e3e 100644
--- a/client/src/views/modals/related-list.js
+++ b/client/src/views/modals/related-list.js
@@ -372,7 +372,7 @@ class RelatedListModalView extends ModalView {
         if (this.searchPanel) {
             this.createView('search', 'views/record/search', {
                 collection: this.collection,
-                el: this.containerSelector + ' .search-container',
+                fullSelector: this.containerSelector + ' .search-container',
                 searchManager: searchManager,
                 disableSavePreset: true,
                 filterList: filterList,
@@ -391,7 +391,7 @@ class RelatedListModalView extends ModalView {
 
         this.createView('list', viewName, {
             collection: this.collection,
-            el: this.containerSelector + ' .list-container',
+            fullSelector: this.containerSelector + ' .list-container',
             rowActionsView: this.rowActionsView,
             layoutName: this.layoutName,
             searchManager: this.searchManager,
diff --git a/client/src/views/modals/resolve-save-conflict.js b/client/src/views/modals/resolve-save-conflict.js
index d6bd71c83a..08be730300 100644
--- a/client/src/views/modals/resolve-save-conflict.js
+++ b/client/src/views/modals/resolve-save-conflict.js
@@ -153,7 +153,7 @@ class ResolveSaveConflictModalView extends ModalView {
             readOnly: true,
             model: this.model,
             name: field,
-            el: this.getSelector() + ' [data-name="field"][data-field="' + field + '"]',
+            selector: '[data-name="field"][data-field="' + field + '"]',
             mode: 'list',
         });
     }
diff --git a/client/src/views/modals/save-filters.js b/client/src/views/modals/save-filters.js
index 57daa900c1..f5798c283c 100644
--- a/client/src/views/modals/save-filters.js
+++ b/client/src/views/modals/save-filters.js
@@ -59,7 +59,7 @@ class SaveFiltersModalView extends ModalView {
         let model = new Model();
 
         this.createView('name', 'views/fields/varchar', {
-            el: this.options.el + ' .field[data-name="name"]',
+            selector: '.field[data-name="name"]',
             defs: {
                 name: 'name',
                 params: {
diff --git a/client/src/views/modals/select-category-tree-records.js b/client/src/views/modals/select-category-tree-records.js
index 6c106d2714..2c06b7e572 100644
--- a/client/src/views/modals/select-category-tree-records.js
+++ b/client/src/views/modals/select-category-tree-records.js
@@ -125,7 +125,7 @@ class SelectCategoryTreeRecordsModalView extends SelectRecordsModalView {
                 this.listenToOnce(collection, 'sync', () => {
                     this.createView('list', viewName, {
                         collection: collection,
-                        el: this.containerSelector + ' .list-container',
+                        fullSelector: this.containerSelector + ' .list-container',
                         readOnly: true,
                         selectable: true,
                         checkboxes: this.multiple,
diff --git a/client/src/views/modals/select-records-with-categories.js b/client/src/views/modals/select-records-with-categories.js
index 2d5e95853a..80e68dc616 100644
--- a/client/src/views/modals/select-records-with-categories.js
+++ b/client/src/views/modals/select-records-with-categories.js
@@ -72,7 +72,7 @@ class SelectRecordsWithCategoriesModalView extends SelectRecordsModal {
             this.listenToOnce(collection, 'sync', () => {
                 this.createView('categories', 'views/record/list-tree', {
                     collection: collection,
-                    el: this.options.el + ' .categories-container',
+                    selector: '.categories-container',
                     selectable: true,
                     readOnly: true,
                     showRoot: true,
diff --git a/client/src/views/modals/select-records.js b/client/src/views/modals/select-records.js
index 1ea208b4d2..8482b106e5 100644
--- a/client/src/views/modals/select-records.js
+++ b/client/src/views/modals/select-records.js
@@ -223,7 +223,7 @@ class SelectRecordsModalView extends ModalView {
         if (this.searchPanel) {
             this.createView('search', 'views/record/search', {
                 collection: this.collection,
-                el: this.containerSelector + ' .search-container',
+                fullSelector: this.containerSelector + ' .search-container',
                 searchManager: searchManager,
                 disableSavePreset: true,
                 filterList: this.filterList,
@@ -240,7 +240,7 @@ class SelectRecordsModalView extends ModalView {
 
         this.createView('list', viewName, {
             collection: this.collection,
-            el: this.containerSelector + ' .list-container',
+            fullSelector: this.containerSelector + ' .list-container',
             selectable: true,
             checkboxes: this.multiple,
             massActionsDisabled: true,
diff --git a/client/src/views/modals/view-map.js b/client/src/views/modals/view-map.js
index a032ee93f6..da72667e9f 100644
--- a/client/src/views/modals/view-map.js
+++ b/client/src/views/modals/view-map.js
@@ -52,7 +52,7 @@ class ViewMapModalView extends ModalView {
         this.createView('map', viewName, {
             model: this.model,
             name: field + 'Map',
-            el: this.getSelector() + ' .map-container',
+            selector: '.map-container',
             height: 'auto',
         });
     }
diff --git a/client/src/views/notification/badge.js b/client/src/views/notification/badge.js
index 22876e06d2..b7fe4043dc 100644
--- a/client/src/views/notification/badge.js
+++ b/client/src/views/notification/badge.js
@@ -472,7 +472,7 @@ define('views/notification/badge', ['view'], function (Dep) {
             $container.appendTo(this.$el.find('.notifications-panel-container'));
 
             this.createView('panel', 'views/notification/panel', {
-                el: '#notifications-panel',
+                fullSelector: '#notifications-panel',
             }, view => {
                 view.render();
 
diff --git a/client/src/views/notification/fields/container.js b/client/src/views/notification/fields/container.js
index b70c736834..7786fb3b63 100644
--- a/client/src/views/notification/fields/container.js
+++ b/client/src/views/notification/fields/container.js
@@ -68,7 +68,7 @@ define('views/notification/fields/container', ['views/fields/base'], function (D
 
             this.createView('notification', viewName, {
                 model: this.model,
-                el: this.params.containerEl + ' li[data-id="' + this.model.id + '"]',
+                fullSelector: this.params.containerEl + ' li[data-id="' + this.model.id + '"]',
             });
         },
 
@@ -89,7 +89,7 @@ define('views/notification/fields/container', ['views/fields/base'], function (D
                 this.createView('notification', viewName, {
                     model: model,
                     isUserStream: true,
-                    el: this.params.containerEl + ' li[data-id="' + this.model.id + '"]',
+                    fullSelector: this.params.containerEl + ' li[data-id="' + this.model.id + '"]',
                     onlyContent: true,
                     isNotification: true,
                 });
@@ -114,7 +114,7 @@ define('views/notification/fields/container', ['views/fields/base'], function (D
                     model: model,
                     userId: this.model.get('userId'),
                     isUserStream: true,
-                    el: this.params.containerEl + ' li[data-id="' + this.model.id + '"]',
+                    fullSelector: this.params.containerEl + ' li[data-id="' + this.model.id + '"]',
                     onlyContent: true,
                     isNotification: true,
                 });
diff --git a/client/src/views/notification/items/base.js b/client/src/views/notification/items/base.js
index f9fad5e954..133bfdfad1 100644
--- a/client/src/views/notification/items/base.js
+++ b/client/src/views/notification/items/base.js
@@ -59,7 +59,7 @@ define('views/notification/items/base', ['view'], function (Dep) {
                     name: name,
                     params: params || {}
                 },
-                el: this.options.el + ' .cell-' + name,
+                selector: '.cell-' + name,
                 mode: 'list',
             });
         },
@@ -82,7 +82,7 @@ define('views/notification/items/base', ['view'], function (Dep) {
 
             this.createView('message', 'views/stream/message', {
                 messageTemplate: this.messageTemplate,
-                el: this.options.el + ' .message',
+                selector: '.message',
                 model: this.model,
                 messageData: this.messageData,
             });
diff --git a/client/src/views/notification/list.js b/client/src/views/notification/list.js
index 5801e5bbff..683d87a6e2 100644
--- a/client/src/views/notification/list.js
+++ b/client/src/views/notification/list.js
@@ -62,7 +62,7 @@ define('views/notification/list', ['view'], function (Dep) {
                 'views/notification/record/list';
 
             let options = {
-                el: this.options.el + ' .list-container',
+                selector: '.list-container',
                 collection: this.collection,
                 showCount: false,
                 listLayout: {
@@ -72,7 +72,7 @@ define('views/notification/list', ['view'], function (Dep) {
                                 name: 'data',
                                 view: 'views/notification/fields/container',
                                 params: {
-                                    containerEl: this.options.el
+                                    containerEl: this.getSelector(),
                                 },
                             },
                         ],
diff --git a/client/src/views/notification/panel.js b/client/src/views/notification/panel.js
index d353c4bed4..59a9b9d190 100644
--- a/client/src/views/notification/panel.js
+++ b/client/src/views/notification/panel.js
@@ -87,7 +87,7 @@ define('views/notification/panel', ['view'], function (Dep) {
                     'views/notification/record/list';
 
                 this.createView('list', viewName, {
-                    el: this.options.el + ' .list-container',
+                    selector: '.list-container',
                     collection: this.collection,
                     showCount: false,
                     listLayout: {
@@ -97,7 +97,7 @@ define('views/notification/panel', ['view'], function (Dep) {
                                     name: 'data',
                                     view: 'views/notification/fields/container',
                                     params: {
-                                        containerEl: this.options.el,
+                                        containerEl: this.getSelector(),
                                     }
                                 }
                             ]
diff --git a/client/src/views/notification/record/list.js b/client/src/views/notification/record/list.js
index 3d380e06ed..4125aee6a9 100644
--- a/client/src/views/notification/record/list.js
+++ b/client/src/views/notification/record/list.js
@@ -62,8 +62,8 @@ define('views/notification/record/list', ['views/record/list-expanded'], functio
 
                             view._afterRender();
 
-                            if (view.options.el) {
-                                view.setElement(view.options.el);
+                            if (view.getSelector()) {
+                                view.setElement(view.getSelector());
                             }
                         });
                     });
diff --git a/client/src/views/personal-data/modals/personal-data.js b/client/src/views/personal-data/modals/personal-data.js
index afebd65db0..7337ed36a9 100644
--- a/client/src/views/personal-data/modals/personal-data.js
+++ b/client/src/views/personal-data/modals/personal-data.js
@@ -63,7 +63,7 @@ define('views/personal-data/modals/personal-data', ['views/modal'], function (De
             this.scope = this.model.name;
 
             this.createView('record', 'views/personal-data/record/record', {
-                el: this.getSelector() + ' .record',
+                selector: '.record',
                 model: this.model
             }, (view) => {
                 this.listenTo(view, 'check', (fieldList) => {
diff --git a/client/src/views/record/base.js b/client/src/views/record/base.js
index 0511af4bb3..f90cdf4d76 100644
--- a/client/src/views/record/base.js
+++ b/client/src/views/record/base.js
@@ -1363,7 +1363,7 @@ class BaseRecordView extends View {
         let o = {
             model: this.model,
             mode: mode || 'edit',
-            el: this.options.el + ' .field[data-name="' + name + '"]',
+            selector: '.field[data-name="' + name + '"]',
             defs: {
                 name: name,
                 params: params || {},
diff --git a/client/src/views/record/detail.js b/client/src/views/record/detail.js
index 570c4af3ae..fb8d03f1ff 100644
--- a/client/src/views/record/detail.js
+++ b/client/src/views/record/detail.js
@@ -2913,7 +2913,7 @@ class DetailRecordView extends BaseRecordView {
      */
     convertDetailLayout(simplifiedLayout) {
         let layout = [];
-        let el = this.options.el || '#' + (this.id);
+        let el = this.getSelector() || '#' + (this.id);
 
         this.panelFieldListMap = {};
 
@@ -3017,7 +3017,7 @@ class DetailRecordView extends BaseRecordView {
                         this.getFieldManager().getViewName(type);
 
                     let o = {
-                        el: el + ' .middle .field[data-name="' + name + '"]',
+                        fullSelector: el + ' .middle .field[data-name="' + name + '"]',
                         defs: {
                             name: name,
                             params: cellDefs.params || {},
@@ -3093,7 +3093,7 @@ class DetailRecordView extends BaseRecordView {
                         name: name + 'Field',
                         view: viewName,
                         field: name,
-                        el: el + ' .middle .field[data-name="' + name + '"]',
+                        fullSelector: el + ' .middle .field[data-name="' + name + '"]',
                         fullWidth: fullWidth,
                         options: o,
                     };
@@ -3181,12 +3181,12 @@ class DetailRecordView extends BaseRecordView {
      * @protected
      */
     createSideView() {
-        let el = this.options.el || '#' + (this.id);
+        let el = this.getSelector() || '#' + (this.id);
 
         this.createView('side', this.sideView, {
             model: this.model,
             scope: this.scope,
-            el: el + ' .side',
+            fullSelector: el + ' .side',
             type: this.type,
             readOnly: this.readOnly,
             inlineEditDisabled: this.inlineEditDisabled,
@@ -3202,7 +3202,7 @@ class DetailRecordView extends BaseRecordView {
      * @protected
      */
     createMiddleView(callback) {
-        let el = this.options.el || '#' + (this.id);
+        let el = this.getSelector() || '#' + (this.id);
 
         this.waitForView('middle');
 
@@ -3220,7 +3220,7 @@ class DetailRecordView extends BaseRecordView {
                 scope: this.scope,
                 type: this.type,
                 layoutDefs: layout,
-                el: el + ' .middle',
+                fullSelector: el + ' .middle',
                 layoutData: {
                     model: this.model,
                 },
@@ -3237,12 +3237,12 @@ class DetailRecordView extends BaseRecordView {
      * @protected
      */
     createBottomView() {
-        let el = this.options.el || '#' + (this.id);
+        let el = this.getSelector() || '#' + (this.id);
 
         this.createView('bottom', this.bottomView, {
             model: this.model,
             scope: this.scope,
-            el: el + ' .bottom',
+            fullSelector: el + ' .bottom',
             readOnly: this.readOnly,
             type: this.type,
             inlineEditDisabled: this.inlineEditDisabled,
diff --git a/client/src/views/record/kanban-item.js b/client/src/views/record/kanban-item.js
index 486a8a5b3c..407dd932cb 100644
--- a/client/src/views/record/kanban-item.js
+++ b/client/src/views/record/kanban-item.js
@@ -79,7 +79,7 @@ class KanbanRecordItem extends View {
                 name: name,
                 mode: mode,
                 readOnly: true,
-                el: this.getSelector() + ' .field[data-name="'+name+'"]',
+                selector: '.field[data-name="'+name+'"]',
             });
         });
 
@@ -90,7 +90,7 @@ class KanbanRecordItem extends View {
             };
 
             this.createView('itemMenu', this.rowActionsView, {
-                el: this.getSelector() + ' .item-menu-container',
+                selector: '.item-menu-container',
                 model: this.model,
                 acl: acl,
                 statusFieldIsEditable: this.options.statusFieldIsEditable,
diff --git a/client/src/views/record/kanban.js b/client/src/views/record/kanban.js
index 724c790f10..ec6646efa4 100644
--- a/client/src/views/record/kanban.js
+++ b/client/src/views/record/kanban.js
@@ -825,7 +825,7 @@ class KanbanRecordView extends ListRecordView {
 
         this.createView(key, this.itemViewName, {
             model: model,
-            el: this.getSelector() + ' .item[data-id="'+model.id+'"]',
+            selector: '.item[data-id="'+model.id+'"]',
             itemLayout: this.listLayout,
             rowActionsDisabled: this.rowActionsDisabled,
             rowActionsView: this.rowActionsView,
diff --git a/client/src/views/record/list-expanded.js b/client/src/views/record/list-expanded.js
index 684e050612..e500839fa0 100644
--- a/client/src/views/record/list-expanded.js
+++ b/client/src/views/record/list-expanded.js
@@ -156,7 +156,7 @@ class ListExpandedRecordView extends ListRecordView {
     getItemEl(model, item) {
         let name = item.field || item.columnName;
 
-        return this.options.el + ' li[data-id="' + model.id + '"] .cell[data-name="' + name+ '"]';
+        return this.getSelector() + ' li[data-id="' + model.id + '"] .cell[data-name="' + name+ '"]';
     }
 
     getRowContainerHtml(id) {
diff --git a/client/src/views/record/list-tree-item.js b/client/src/views/record/list-tree-item.js
index 00ec0a8fe9..1c1df0de6a 100644
--- a/client/src/views/record/list-tree-item.js
+++ b/client/src/views/record/list-tree-item.js
@@ -170,7 +170,7 @@ class ListTreeRecordItemView extends View {
 
         this.createView('children', this.listViewName, {
             collection: childCollection,
-            el: this.options.el + ' > .children',
+            selector: '> .children',
             createDisabled: this.options.createDisabled,
             readOnly: this.options.readOnly,
             level: this.level + 1,
diff --git a/client/src/views/record/list-tree.js b/client/src/views/record/list-tree.js
index de69d5042f..eb655c7994 100644
--- a/client/src/views/record/list-tree.js
+++ b/client/src/views/record/list-tree.js
@@ -197,7 +197,7 @@ class ListTreeRecordView extends ListRecordView {
                 this.createView(key, this.itemViewName, {
                     model: model,
                     collection: this.collection,
-                    el: this.options.el + ' ' + this.getRowSelector(model.id),
+                    selector: this.getRowSelector(model.id),
                     createDisabled: this.createDisabled,
                     readOnly: this.readOnly,
                     level: this.level,
@@ -232,7 +232,8 @@ class ListTreeRecordView extends ListRecordView {
     }
 
     getItemEl(model, item) {
-        return this.options.el + ' li[data-id="' + model.id + '"] span.cell[data-name="' + item.name + '"]';
+        return this.getSelector() +
+            ' li[data-id="' + model.id + '"] span.cell[data-name="' + item.name + '"]';
     }
 
     getCreateAttributes() {
diff --git a/client/src/views/record/list.js b/client/src/views/record/list.js
index ebadd96140..c44b72249e 100644
--- a/client/src/views/record/list.js
+++ b/client/src/views/record/list.js
@@ -2674,8 +2674,9 @@ class ListRecordView extends View {
      * @return {string}
      */
     getItemEl(model, item) {
-        return this.options.el + ' tr[data-id="' + model.id + '"] ' +
-            'td.cell[data-name="' + item.columnName + '"]';
+        return this.getSelector() +
+            ' tr[data-id="' + model.id + '"]' +
+            ' td.cell[data-name="' + item.columnName + '"]';
     }
 
     prepareInternalLayout(internalLayout, model) {
@@ -2709,7 +2710,7 @@ class ListRecordView extends View {
             this.createView(key, 'views/base', {
                 model: model,
                 acl: acl,
-                el: this.options.el + ' .list-row[data-id="'+key+'"]',
+                selector: '.list-row[data-id="' + key + '"]',
                 optionsToPass: ['acl'],
                 noCache: true,
                 layoutDefs: {
@@ -2886,8 +2887,8 @@ class ListRecordView extends View {
 
                         view._afterRender();
 
-                        if (view.options.el) {
-                            view.setElement(view.options.el);
+                        if (view.getSelector()) {
+                            view.setElement(view.getSelector());
                         }
                     });
                 });
diff --git a/client/src/views/record/merge.js b/client/src/views/record/merge.js
index a6aa797c44..e343d6b42c 100644
--- a/client/src/views/record/merge.js
+++ b/client/src/views/record/merge.js
@@ -235,7 +235,7 @@ class MergeRecordView extends View {
 
                 this.createView(model.id + '-' + field, viewName, {
                     model: model,
-                    el: '.merge [data-id="'+model.id+'"] .field[data-name="' + field + '"]',
+                    fullSelector: '.merge [data-id="' + model.id + '"] .field[data-name="' + field + '"]',
                     defs: {
                         name: field,
                     },
@@ -251,7 +251,7 @@ class MergeRecordView extends View {
             this.models.forEach(model => {
                 this.createView(model.id + '-' + 'createdAt', 'views/fields/datetime', {
                     model: model,
-                    el: '.merge [data-id="'+model.id+'"] .field[data-name="createdAt"]',
+                    fullSelector: '.merge [data-id="' + model.id + '"] .field[data-name="createdAt"]',
                     defs: {
                         name: 'createdAt',
                     },
diff --git a/client/src/views/record/panels-container.js b/client/src/views/record/panels-container.js
index 44e9e23008..2615516d72 100644
--- a/client/src/views/record/panels-container.js
+++ b/client/src/views/record/panels-container.js
@@ -327,7 +327,7 @@ class PanelsContainerRecordView extends View {
             let options = {
                 model: this.model,
                 panelName: name,
-                el: this.options.el + ' .panel[data-name="' + name + '"] > .panel-body',
+                selector: '.panel[data-name="' + name + '"] > .panel-body',
                 defs: p,
                 mode: this.mode,
                 recordHelper: this.recordHelper,
@@ -364,8 +364,7 @@ class PanelsContainerRecordView extends View {
                 }
 
                 this.createView(name + 'Actions', 'views/record/panel-actions', {
-                    el: this.getSelector() +
-                        '.panel[data-name="'+p.name+'"] > .panel-heading > .panel-actions-container',
+                    selector: '.panel[data-name="' + p.name + '"] > .panel-heading > .panel-actions-container',
                     model: this.model,
                     defs: p,
                     scope: this.scope,
diff --git a/client/src/views/record/panels/bottom.js b/client/src/views/record/panels/bottom.js
index 87f0bcd65e..0f21a8f315 100644
--- a/client/src/views/record/panels/bottom.js
+++ b/client/src/views/record/panels/bottom.js
@@ -273,7 +273,7 @@ class BottomPanelView extends View {
 
         var o = {
             model: this.model,
-            el: this.options.el + ' .field[data-name="' + field + '"]',
+            selector: '.field[data-name="' + field + '"]',
             defs: {
                 name: field,
                 params: params || {},
diff --git a/client/src/views/record/panels/relationship.js b/client/src/views/record/panels/relationship.js
index 55c01f88f7..66eaf258b3 100644
--- a/client/src/views/record/panels/relationship.js
+++ b/client/src/views/record/panels/relationship.js
@@ -266,7 +266,7 @@ class RelationshipPanelView extends BottomPanelView {
                     checkboxes: false,
                     rowActionsView: this.rowActionsView,
                     buttonsDisabled: true,
-                    el: this.options.el + ' .list-container',
+                    selector: '.list-container',
                     skipBuildRows: true,
                     rowActionsOptions: {
                         unlinkDisabled: this.defs.unlinkDisabled,
diff --git a/client/src/views/record/panels/side.js b/client/src/views/record/panels/side.js
index 5fcffa1df3..f62a3aa2ab 100644
--- a/client/src/views/record/panels/side.js
+++ b/client/src/views/record/panels/side.js
@@ -219,7 +219,7 @@ class SidePanelView extends View {
 
         let o = {
             model: this.model,
-            el: this.options.el + ' .field[data-name="' + field + '"]',
+            selector: '.field[data-name="' + field + '"]',
             defs: {
                 name: field,
                 params: params || {},
diff --git a/client/src/views/record/search.js b/client/src/views/record/search.js
index 0870e9c378..fc16451911 100644
--- a/client/src/views/record/search.js
+++ b/client/src/views/record/search.js
@@ -1092,7 +1092,7 @@ class SearchView extends View {
             name: name,
             model: this.model,
             params: params,
-            el: this.options.el + ' .filter[data-name="' + name + '"]',
+            selector: '.filter[data-name="' + name + '"]',
         }, view => {
             if (typeof callback === 'function') {
                 view.once('after:render', () => {
diff --git a/client/src/views/role/record/detail.js b/client/src/views/role/record/detail.js
index 51ac91be37..73ca295bb3 100644
--- a/client/src/views/role/record/detail.js
+++ b/client/src/views/role/record/detail.js
@@ -33,18 +33,15 @@ define('views/role/record/detail', ['views/record/detail'], function (Dep) {
         tableView: 'views/role/record/table',
 
         sideView: false,
-
         isWide: true,
-
         editModeDisabled: true,
-
         stickButtonsContainerAllTheWay: true,
 
         setup: function () {
             Dep.prototype.setup.call(this);
 
             this.createView('extra', this.tableView, {
-                el: this.options.el + ' .extra',
+                selector: '.extra',
                 model: this.model
             });
         },
diff --git a/client/src/views/role/record/edit.js b/client/src/views/role/record/edit.js
index ecfa67831d..65ba454dec 100644
--- a/client/src/views/role/record/edit.js
+++ b/client/src/views/role/record/edit.js
@@ -101,9 +101,9 @@ define('views/role/record/edit', ['views/record/edit'], function (Dep) {
 
             this.createView('extra', this.tableView, {
                 mode: 'edit',
-                el: this.options.el + ' .extra',
+                selector: '.extra',
                 model: this.model,
-            }, (view) => {
+            }, view => {
                 this.listenTo(view, 'change', () => {
                     var data = this.fetch();
                     this.model.set(data);
diff --git a/client/src/views/scheduled-job/list.js b/client/src/views/scheduled-job/list.js
index a3cbf35d26..1734537019 100644
--- a/client/src/views/scheduled-job/list.js
+++ b/client/src/views/scheduled-job/list.js
@@ -41,7 +41,7 @@ define('views/scheduled-job/list', ['views/list'], function (Dep) {
             });
 
             this.createView('search', 'views/base', {
-                el: '#main > .search-container',
+                fullSelector: '#main > .search-container',
                 template: 'scheduled-job/cronjob',
             });
         },
diff --git a/client/src/views/search/filter.js b/client/src/views/search/filter.js
index f89cb6a19c..4c18679d31 100644
--- a/client/src/views/search/filter.js
+++ b/client/src/views/search/filter.js
@@ -53,7 +53,7 @@ class FilterView extends View {
             this.createView('field', viewName, {
                 mode: 'search',
                 model: this.model,
-                el: this.options.el + ' .field',
+                selector: '.field',
                 defs: {
                     name: name,
                 },
diff --git a/client/src/views/settings/edit.js b/client/src/views/settings/edit.js
index 48e5b546ed..0b72d7710c 100644
--- a/client/src/views/settings/edit.js
+++ b/client/src/views/settings/edit.js
@@ -35,7 +35,7 @@ define('views/settings/edit', ['views/edit'], function (Dep) {
         setupHeader: function () {
             this.createView('header', this.headerView, {
                 model: this.model,
-                el: '#main > .header',
+                fullSelector: '#main > .header',
                 template: this.options.headerTemplate,
                 label: this.options.label,
             });
diff --git a/client/src/views/settings/modals/edit-tab-group.js b/client/src/views/settings/modals/edit-tab-group.js
index da3424a754..980106d63a 100644
--- a/client/src/views/settings/modals/edit-tab-group.js
+++ b/client/src/views/settings/modals/edit-tab-group.js
@@ -107,7 +107,7 @@ define('views/settings/modals/edit-tab-group', ['views/modal', 'model'], functio
             this.createView('record', 'views/record/edit-for-modal', {
                 detailLayout: detailLayout,
                 model: model,
-                el: this.getSelector() + ' .record',
+                selector: '.record',
             });
         },
 
diff --git a/client/src/views/site-portal/master.js b/client/src/views/site-portal/master.js
index e4aa3c72d7..e64ad102d4 100644
--- a/client/src/views/site-portal/master.js
+++ b/client/src/views/site-portal/master.js
@@ -42,7 +42,7 @@ define('views/site-portal/master', ['views/site/master'], function (Dep) {
                 view: false,
             },
             footer: {
-                el: 'body > footer',
+                fullSelector: 'body > footer',
                 view: 'views/site/footer'
             }
         },
diff --git a/client/src/views/site/header.js b/client/src/views/site/header.js
index 6203926bf2..2609dfadbe 100644
--- a/client/src/views/site/header.js
+++ b/client/src/views/site/header.js
@@ -44,7 +44,7 @@ class HeaderSiteView extends View {
         let navbarView = this.getMetadata().get(this.customViewPath) || this.navbarView;
 
         this.createView('navbar', navbarView, {
-            el: '#navbar',
+            fullSelector: '#navbar',
             title: this.title,
         });
     }
diff --git a/client/src/views/site/master.js b/client/src/views/site/master.js
index ca51be3093..2f5c09d1c2 100644
--- a/client/src/views/site/master.js
+++ b/client/src/views/site/master.js
@@ -43,7 +43,7 @@ class MasterSiteView extends View {
             view: false,
         },
         footer: {
-            el: 'body > footer',
+            fullSelector: 'body > footer',
             view: 'views/site/footer',
         },
     }
diff --git a/client/src/views/site/navbar.js b/client/src/views/site/navbar.js
index 8c091990cd..6eef4f2f0c 100644
--- a/client/src/views/site/navbar.js
+++ b/client/src/views/site/navbar.js
@@ -387,7 +387,7 @@ class NavbarSiteView extends View {
         });
 
         this.createView('notificationsBadge', 'views/notification/badge', {
-            el: this.options.el + ' .notifications-badge-container'
+            selector: '.notifications-badge-container'
         });
 
         let setup = () => {
@@ -485,7 +485,7 @@ class NavbarSiteView extends View {
 
         if (this.globalSearchAvailable) {
             this.createView('globalSearch', 'views/global-search/global-search', {
-                el: this.options.el + ' .global-search-container'
+                selector: '.global-search-container'
             });
         }
     }
diff --git a/client/src/views/stream.js b/client/src/views/stream.js
index 51f36f7c68..55b0e7fa5c 100644
--- a/client/src/views/stream.js
+++ b/client/src/views/stream.js
@@ -71,7 +71,7 @@ class StreamView extends View {
         this.wait(
             this.getModelFactory().create('Note', model => {
                 this.createView('createPost', 'views/stream/record/edit', {
-                    el: this.options.el + ' .create-post-container',
+                    selector: '.create-post-container',
                     model: model,
                     interactiveMode: true,
                 }, view => {
@@ -92,7 +92,7 @@ class StreamView extends View {
 
             collection.fetch().then(() => {
                 this.createView('list', 'views/stream/record/list', {
-                    el: this.options.el + ' .list-container',
+                    selector: '.list-container',
                     collection: collection,
                     isUserStream: true,
                 }, view => {
diff --git a/client/src/views/stream/modals/create-post.js b/client/src/views/stream/modals/create-post.js
index adf33daffe..783b1b929e 100644
--- a/client/src/views/stream/modals/create-post.js
+++ b/client/src/views/stream/modals/create-post.js
@@ -61,7 +61,7 @@ define('views/stream/modals/create-post', ['views/modal'], function (Dep) {
             this.getModelFactory().create('Note', (model) => {
                 this.createView('record', 'views/stream/record/edit', {
                     model: model,
-                    el: this.options.el + ' .record',
+                    selector: '.record',
                 }, view => {
                     this.listenTo(view, 'after:save', () => {
                         this.trigger('after:save');
diff --git a/client/src/views/stream/note.js b/client/src/views/stream/note.js
index d42704bbbf..391243bac4 100644
--- a/client/src/views/stream/note.js
+++ b/client/src/views/stream/note.js
@@ -116,7 +116,7 @@ class NoteStreamView extends View {
 
         if (!this.options.noEdit && (this.isEditable || this.isRemovable)) {
             this.createView('right', 'views/stream/row-actions/default', {
-                el: this.options.el + ' .right-container',
+                selector: '.right-container',
                 acl: this.options.acl,
                 model: this.model,
                 isEditable: this.isEditable,
@@ -150,7 +150,7 @@ class NoteStreamView extends View {
                 name: name,
                 params: params || {}
             },
-            el: this.options.el + ' .cell-' + name,
+            selector: '.cell-' + name,
             mode: 'list',
         };
 
@@ -206,7 +206,7 @@ class NoteStreamView extends View {
 
         this.createView('message', 'views/stream/message', {
             messageTemplate: this.messageTemplate,
-            el: this.options.el + ' .message',
+            selector: '.message',
             model: this.model,
             messageData: this.messageData,
         });
diff --git a/client/src/views/stream/panel.js b/client/src/views/stream/panel.js
index a421cc1b2c..948c622913 100644
--- a/client/src/views/stream/panel.js
+++ b/client/src/views/stream/panel.js
@@ -247,7 +247,7 @@ class PanelStreamView extends RelationshipPanelView {
             }
 
             this.createView('postField', 'views/note/fields/post', {
-                el: this.getSelector() + ' .textarea-container',
+                selector: '.textarea-container',
                 name: 'post',
                 mode: 'edit',
                 params: {
@@ -424,10 +424,10 @@ class PanelStreamView extends RelationshipPanelView {
 
         this.listenToOnce(collection, 'sync', () => {
             this.createView('list', 'views/stream/record/list', {
-                el: this.options.el + ' > .list-container',
+                selector: '> .list-container',
                 collection: collection,
                 model: this.model
-            }, (view) => {
+            }, view => {
                 view.render();
             });
 
@@ -542,7 +542,7 @@ class PanelStreamView extends RelationshipPanelView {
         this.createView('attachments', 'views/stream/fields/attachment-multiple', {
             model: this.seed,
             mode: 'edit',
-            el: this.options.el + ' div.attachments-container',
+            selector: 'div.attachments-container',
             defs: {
                 name: 'attachments',
             },
diff --git a/client/src/views/stream/record/list.js b/client/src/views/stream/record/list.js
index 9c0113b535..248af5014b 100644
--- a/client/src/views/stream/record/list.js
+++ b/client/src/views/stream/record/list.js
@@ -26,6 +26,8 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
+/** @module views/stream/record/list */
+
 import ListExpandedRecordView from 'views/record/list-expanded';
 
 class ListStreamRecordView extends ListExpandedRecordView {
@@ -95,8 +97,8 @@ class ListStreamRecordView extends ListExpandedRecordView {
 
                         view._afterRender();
 
-                        if (view.options.el) {
-                            view.setElement(view.options.el);
+                        if (view.getSelector()) {
+                            view.setElement(view.getSelector());
                         }
                     });
                 });
@@ -143,7 +145,7 @@ class ListStreamRecordView extends ListExpandedRecordView {
             noEdit: this.options.noEdit,
             optionsToPass: ['acl'],
             name: this.type + '-' + model.name,
-            el: this.options.el + ' li[data-id="' + model.id + '"]',
+            selector: 'li[data-id="' + model.id + '"]',
             setViewBeforeCallback: this.options.skipBuildRows && !this.isRendered(),
         }, callback);
     }
diff --git a/client/src/views/user-security/modals/totp.js b/client/src/views/user-security/modals/totp.js
index 22f825dab6..4acc773530 100644
--- a/client/src/views/user-security/modals/totp.js
+++ b/client/src/views/user-security/modals/totp.js
@@ -91,7 +91,7 @@ define('views/user-security/modals/totp', ['views/modal', 'model'], function (De
 
             this.createView('record', 'views/record/edit-for-modal', {
                 scope: 'None',
-                el: this.getSelector() + ' .record',
+                selector: '.record',
                 model: model,
                 detailLayout: [
                     {
diff --git a/client/src/views/user-security/modals/two-factor-email.js b/client/src/views/user-security/modals/two-factor-email.js
index 71d444e890..62c69b4018 100644
--- a/client/src/views/user-security/modals/two-factor-email.js
+++ b/client/src/views/user-security/modals/two-factor-email.js
@@ -99,7 +99,7 @@ define('views/user-security/modals/two-factor-email',
 
                         this.createView('record', 'views/record/edit-for-modal', {
                             scope: 'None',
-                            el: this.getSelector() + ' .record',
+                            selector: '.record',
                             model: model,
                             detailLayout: [
                                 {
diff --git a/client/src/views/user-security/modals/two-factor-sms.js b/client/src/views/user-security/modals/two-factor-sms.js
index 0d5fd1ae33..31d196ffa0 100644
--- a/client/src/views/user-security/modals/two-factor-sms.js
+++ b/client/src/views/user-security/modals/two-factor-sms.js
@@ -99,7 +99,7 @@ define('views/user-security/modals/two-factor-sms',
 
                         this.createView('record', 'views/record/edit-for-modal', {
                             scope: 'None',
-                            el: this.getSelector() + ' .record',
+                            selector: '.record',
                             model: model,
                             detailLayout: [
                                 {
diff --git a/client/src/views/user/modals/password.js b/client/src/views/user/modals/password.js
index 9a571e3b9c..195d1c5735 100644
--- a/client/src/views/user/modals/password.js
+++ b/client/src/views/user/modals/password.js
@@ -69,7 +69,7 @@ define('views/user/modals/password', ['views/modal', 'model'], function (Dep, Mo
 
             this.createView('record', 'views/record/edit-for-modal', {
                 scope: 'None',
-                el: this.getSelector() + ' .record',
+                selector: '.record',
                 model: this.model,
                 detailLayout: [
                     {
diff --git a/client/src/views/user/modals/security.js b/client/src/views/user/modals/security.js
index 1ca74c941c..8c93637ce9 100644
--- a/client/src/views/user/modals/security.js
+++ b/client/src/views/user/modals/security.js
@@ -100,7 +100,7 @@ define('views/user/modals/security', ['views/modal', 'model'], function (Dep, Mo
 
                     this.createView('record', 'views/record/edit-for-modal', {
                         scope: 'None',
-                        el: this.getSelector() + ' .record',
+                        selector: '.record',
                         model: this.model,
                         detailLayout: [
                             {
diff --git a/client/src/views/user/password-change-request.js b/client/src/views/user/password-change-request.js
index a755929d9d..272bfedbbf 100644
--- a/client/src/views/user/password-change-request.js
+++ b/client/src/views/user/password-change-request.js
@@ -54,7 +54,7 @@ define('views/user/password-change-request', ['view', 'model'], function (Dep, M
             this.createView('password', 'views/user/fields/password', {
                 model: model,
                 mode: 'edit',
-                el: this.getSelector() + ' .field[data-name="password"]',
+                selector: '.field[data-name="password"]',
                 defs: {
                     name: 'password',
                     params: {
@@ -68,7 +68,7 @@ define('views/user/password-change-request', ['view', 'model'], function (Dep, M
             this.createView('passwordConfirm', 'views/fields/password', {
                 model: model,
                 mode: 'edit',
-                el: this.getSelector() + ' .field[data-name="passwordConfirm"]',
+                selector: '.field[data-name="passwordConfirm"]',
                 defs: {
                     name: 'passwordConfirm',
                     params: {
@@ -82,7 +82,7 @@ define('views/user/password-change-request', ['view', 'model'], function (Dep, M
                 model: model,
                 mode: 'detail',
                 readOnly: true,
-                el: this.getSelector() + ' .field[data-name="generatePassword"]',
+                selector: '.field[data-name="generatePassword"]',
                 defs: {
                     name: 'generatePassword',
                 },
@@ -93,7 +93,7 @@ define('views/user/password-change-request', ['view', 'model'], function (Dep, M
                 model: model,
                 mode: 'detail',
                 readOnly: true,
-                el: this.getSelector() + ' .field[data-name="passwordPreview"]',
+                selector: '.field[data-name="passwordPreview"]',
                 defs: {
                     name: 'passwordPreview',
                 },
diff --git a/client/src/views/working-time-calendar/fields/time-ranges.js b/client/src/views/working-time-calendar/fields/time-ranges.js
index ddf7184a79..2bd63db004 100644
--- a/client/src/views/working-time-calendar/fields/time-ranges.js
+++ b/client/src/views/working-time-calendar/fields/time-ranges.js
@@ -135,7 +135,7 @@ define('views/working-time-calendar/fields/time-ranges', ['views/fields/base'],
                 viewName,
                 {
                     value: item,
-                    el: this.getSelector() + ' .item[data-key="' + key + '"]',
+                    selector: '.item[data-key="' + key + '"]',
                     key: key,
                 }
             )