diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
index 838a8f76af..e9fb05ee48 100644
--- a/.idea/codeStyles/Project.xml
+++ b/.idea/codeStyles/Project.xml
@@ -1,5 +1,8 @@
 <component name="ProjectCodeStyleConfiguration">
   <code_scheme name="Project" version="173">
+    <JSCodeStyleSettings version="0">
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+    </JSCodeStyleSettings>
     <PHPCodeStyleSettings>
       <option name="GROUP_USE_WRAP" value="2" />
       <option name="VARIABLE_NAMING_STYLE" value="CAMEL_CASE" />
diff --git a/Gruntfile.js b/Gruntfile.js
index fea952d31b..82330692ba 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -33,7 +33,7 @@ const fs = require('fs');
 const cp = require('child_process');
 const path = require('path');
 const buildUtils = require('./js/build-utils');
-const BundlerGeneral = require("./js/bundler-general");
+const BundlerGeneral = require("./js/bundler/bundler-general");
 const LayoutTypeBundler = require('./js/layout-template-bundler');
 const bundleConfig = require('./frontend/bundle-config.json');
 const libs = require('./frontend/libs.json');
@@ -300,6 +300,10 @@ module.exports = grunt => {
         cp.execSync("node js/scripts/prepare-lib");
     });
 
+    grunt.registerTask('transpile', () => {
+        cp.execSync("node js/scripts/transpile");
+    });
+
     grunt.registerTask('chmod-folders', () => {
         cp.execSync(
             "find . -type d -exec chmod 755 {} +",
@@ -474,6 +478,7 @@ module.exports = grunt => {
         'less',
         'cssmin',
         'prepare-lib-original',
+        'transpile',
         'bundle',
         'uglify:bundle',
         'copy:frontendLib',
diff --git a/application/Espo/Core/Utils/ClientManager.php b/application/Espo/Core/Utils/ClientManager.php
index 6d998ffe11..d80900c9f5 100644
--- a/application/Espo/Core/Utils/ClientManager.php
+++ b/application/Espo/Core/Utils/ClientManager.php
@@ -212,6 +212,7 @@ class ClientManager
                 'basePath' => $this->basePath,
                 'cacheTimestamp' => $loaderCacheTimestamp,
                 'internalModuleList' => $internalModuleList,
+                'transpiledModuleList' => $this->getTranspiledModuleList(),
             ]),
         ];
 
@@ -338,4 +339,24 @@ class ClientManager
     {
         return "\n        ";
     }
+
+    /**
+     * @return string[]
+     */
+    private function getTranspiledModuleList(): array
+    {
+        if (!$this->isDeveloperMode()) {
+            return [];
+        }
+
+        $modules = array_values(array_filter(
+            $this->module->getList(),
+            fn ($item) => $this->module->get([$item, 'jsTranspiled'])
+        ));
+
+        return array_map(
+            fn ($item) => Util::fromCamelCase($item, '-'),
+            $modules
+        );
+    }
 }
diff --git a/application/Espo/Modules/Crm/Resources/module.json b/application/Espo/Modules/Crm/Resources/module.json
index 8ff9c2dd46..89e6b901cb 100644
--- a/application/Espo/Modules/Crm/Resources/module.json
+++ b/application/Espo/Modules/Crm/Resources/module.json
@@ -1,3 +1,4 @@
 {
-    "order": 10
-}
\ No newline at end of file
+    "order": 10,
+    "jsTranspiled": true
+}
diff --git a/application/Espo/Resources/metadata/clientDefs/Email.json b/application/Espo/Resources/metadata/clientDefs/Email.json
index 1b16750790..c4249f1407 100644
--- a/application/Espo/Resources/metadata/clientDefs/Email.json
+++ b/application/Espo/Resources/metadata/clientDefs/Email.json
@@ -1,7 +1,6 @@
 {
     "controller":"controllers/email",
     "acl":"acl/email",
-    "model":"models/email",
     "views":{
         "list":"views/email/list",
         "detail":"views/email/detail"
diff --git a/client/modules/crm/src/controllers/activities.js b/client/modules/crm/src/controllers/activities.js
index 085c91355e..169e040676 100644
--- a/client/modules/crm/src/controllers/activities.js
+++ b/client/modules/crm/src/controllers/activities.js
@@ -31,7 +31,7 @@ define('crm:controllers/activities', ['controller'], function (Dep) {
     /**
      * @class
      * @name Class
-     * @extends module:controller.Class
+     * @extends module:controller
      * @memberOf module:crm:controllers/activities
      */
     return Dep.extend(/** @lends module:crm:controllers/activities~Class# */{
diff --git a/client/modules/crm/src/handlers/campaign/mass-emails-create.js b/client/modules/crm/src/handlers/campaign/mass-emails-create.js
index a9fb85e37d..5c366e06aa 100644
--- a/client/modules/crm/src/handlers/campaign/mass-emails-create.js
+++ b/client/modules/crm/src/handlers/campaign/mass-emails-create.js
@@ -30,7 +30,7 @@ define('crm:handlers/campaign/mass-emails-create', ['handlers/create-related'],
 
     return class extends Dep {
         /**
-         * @param {module:model.Class} model
+         * @param {module:model} model
          */
         getAttributes(model) {
             return Promise.resolve({
diff --git a/client/modules/crm/src/handlers/opportunity/contacts-create.js b/client/modules/crm/src/handlers/opportunity/contacts-create.js
index 774f649bdf..d19f5acb7c 100644
--- a/client/modules/crm/src/handlers/opportunity/contacts-create.js
+++ b/client/modules/crm/src/handlers/opportunity/contacts-create.js
@@ -30,7 +30,7 @@ define('crm:handlers/opportunity/contacts-create', ['handlers/create-related'],
 
     return class extends Dep {
         /**
-         * @param {module:model.Class} model
+         * @param {module:model} model
          */
         getAttributes(model) {
             let attributes = {};
diff --git a/client/modules/crm/src/knowledge-base-helper.js b/client/modules/crm/src/knowledge-base-helper.js
index 0629d62719..8169bc3f5a 100644
--- a/client/modules/crm/src/knowledge-base-helper.js
+++ b/client/modules/crm/src/knowledge-base-helper.js
@@ -26,44 +26,40 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('crm:knowledge-base-helper', ['ajax'], function (Ajax) {
+import Ajax from 'ajax';
 
-    var KnowledgeBaseHelper = function (language) {
+export default class {
+
+    /**
+     * @param {module:language} language
+     */
+    constructor(language) {
         this.language = language;
     }
 
-    _.extend(KnowledgeBaseHelper.prototype, {
+    getAttributesForEmail(model, attributes, callback) {
+        attributes = attributes || {};
+        attributes.body = model.get('body');
 
-        getLanguage: function () {
-            return this.language;
-        },
+        if (attributes.name) {
+            attributes.name = attributes.name + ' ';
+        } else {
+            attributes.name = '';
+        }
 
-        getAttributesForEmail: function (model, attributes, callback) {
-            attributes = attributes || {};
-            attributes.body = model.get('body');
+        attributes.name += this.language.translate('KnowledgeBaseArticle', 'scopeNames') + ': ' +
+            model.get('name');
 
-            if (attributes.name) {
-                attributes.name = attributes.name + ' ';
-            } else {
-                attributes.name = '';
-            }
+        Ajax.postRequest('KnowledgeBaseArticle/action/getCopiedAttachments', {
+            id: model.id,
+            parentType: 'Email',
+            field : 'attachments',
+        }).then(data => {
+            attributes.attachmentsIds = data.ids;
+            attributes.attachmentsNames = data.names;
+            attributes.isHtml = true;
 
-            attributes.name += this.getLanguage().translate('KnowledgeBaseArticle', 'scopeNames') + ': ' +
-                model.get('name');
-
-            Ajax.postRequest('KnowledgeBaseArticle/action/getCopiedAttachments', {
-                id: model.id,
-                parentType: 'Email',
-                field : 'attachments',
-            }).then(data => {
-                attributes.attachmentsIds = data.ids;
-                attributes.attachmentsNames = data.names;
-                attributes.isHtml = true;
-
-                callback(attributes);
-            });
-        },
-    });
-
-    return KnowledgeBaseHelper;
-});
+            callback(attributes);
+        });
+    }
+}
diff --git a/client/modules/crm/src/views/calendar/calendar-page.js b/client/modules/crm/src/views/calendar/calendar-page.js
index d086565d90..4c907d648c 100644
--- a/client/modules/crm/src/views/calendar/calendar-page.js
+++ b/client/modules/crm/src/views/calendar/calendar-page.js
@@ -314,7 +314,7 @@ define('crm:views/calendar/calendar-page', ['view'], function (Dep) {
 
         /**
          * @private
-         * @return {module:view.Class}
+         * @return {module:view}
          */
         getCalendarView: function () {
             return this.getView('calendar');
diff --git a/client/modules/crm/src/views/dashlets/activities.js b/client/modules/crm/src/views/dashlets/activities.js
index 8e5eb75050..f8931604da 100644
--- a/client/modules/crm/src/views/dashlets/activities.js
+++ b/client/modules/crm/src/views/dashlets/activities.js
@@ -44,8 +44,8 @@ define('crm:views/dashlets/activities',
                         name: 'ico',
                         view: 'crm:views/fields/ico',
                         params: {
-                            notRelationship: true
-                        }
+                            notRelationship: true,
+                        },
                     },
                     {
                         name: 'name',
@@ -53,9 +53,9 @@ define('crm:views/dashlets/activities',
                     },
                 ],
                 [
-                    {name: 'dateStart'}
-                ]
-            ]
+                    {name: 'dateStart'},
+                ],
+            ],
         },
 
         listLayoutEntityTypeMap: {
@@ -67,7 +67,7 @@ define('crm:views/dashlets/activities',
                             view: 'crm:views/fields/ico',
                             params: {
                                 notRelationship: true
-                            }
+                            },
                         },
                         {
                             name: 'name',
@@ -79,8 +79,8 @@ define('crm:views/dashlets/activities',
                         {
                             name: 'priority',
                             view: 'crm:views/task/fields/priority-for-dashlet',
-                        }
-                    ]
+                        },
+                    ],
                 ]
             }
         },
@@ -109,8 +109,8 @@ define('crm:views/dashlets/activities',
             this.wait(true);
             var i = 0;
 
-            this.scopeList.forEach((scope) => {
-                this.getModelFactory().getSeed(scope, (seed) => {
+            this.scopeList.forEach(scope => {
+                this.getModelFactory().create(scope, seed => {
                     this.seeds[scope] = seed;
 
                     i++;
@@ -121,7 +121,7 @@ define('crm:views/dashlets/activities',
                 });
             });
 
-            this.scopeList.slice(0).reverse().forEach((scope) => {
+            this.scopeList.slice(0).reverse().forEach(scope => {
                 if (this.getAcl().checkScope(scope, 'create')) {
                     this.actionList.unshift({
                         name: 'createActivity',
@@ -129,8 +129,8 @@ define('crm:views/dashlets/activities',
                         iconHtml: '<span class="fas fa-plus"></span>',
                         url: '#' + scope + '/create',
                         data: {
-                            scope: scope
-                        }
+                            scope: scope,
+                        },
                     });
                 }
             });
@@ -154,7 +154,7 @@ define('crm:views/dashlets/activities',
                     checkboxes: false,
                     collection: this.collection,
                     listLayout: this.listLayout,
-                }, (view) => {
+                }, view => {
                     view.render();
                 });
             });
@@ -183,7 +183,7 @@ define('crm:views/dashlets/activities',
             this.createView('quickCreate', viewName, {
                 scope: scope,
                 attributes: attributes,
-            }, (view) => {
+            }, view => {
                 view.render();
                 view.notify(false);
 
@@ -205,7 +205,7 @@ define('crm:views/dashlets/activities',
             this.createView('quickCreate', viewName, {
                 scope: 'Meeting',
                 attributes: attributes,
-            }, (view) => {
+            }, view => {
                 view.render();
                 view.notify(false);
 
@@ -227,7 +227,7 @@ define('crm:views/dashlets/activities',
             this.createView('quickCreate', viewName, {
                 scope: 'Call',
                 attributes: attributes,
-            }, (view) => {
+            }, view => {
                 view.render();
                 view.notify(false);
 
diff --git a/client/modules/crm/src/views/knowledge-base-article/record/detail.js b/client/modules/crm/src/views/knowledge-base-article/record/detail.js
index c3fd4ce408..4035c5f16b 100644
--- a/client/modules/crm/src/views/knowledge-base-article/record/detail.js
+++ b/client/modules/crm/src/views/knowledge-base-article/record/detail.js
@@ -26,70 +26,73 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('crm:views/knowledge-base-article/record/detail', ['views/record/detail'], function (Dep) {
+import KnowledgeBaseHelper from "modules/crm/knowledge-base-helper";
+import Dep from "views/record/detail";
 
-    return Dep.extend({
+/**
+ * @class
+ * @name Class
+ * @extends Dep
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        saveAndContinueEditingAction: true,
+    saveAndContinueEditingAction: true,
 
-        setup: function () {
-            Dep.prototype.setup.call(this);
+    setup: function () {
+        Dep.prototype.setup.call(this);
 
-            if (this.getUser().isPortal()) {
-                this.sideDisabled = true;
-            }
+        if (this.getUser().isPortal()) {
+            this.sideDisabled = true;
+        }
 
-            if (this.getAcl().checkScope('Email', 'create')) {
-                this.dropdownItemList.push({
-                    'label': 'Send in Email',
-                    'name': 'sendInEmail',
-                });
-            }
+        if (this.getAcl().checkScope('Email', 'create')) {
+            this.dropdownItemList.push({
+                'label': 'Send in Email',
+                'name': 'sendInEmail',
+            });
+        }
 
-            if (this.getUser().isPortal()) {
-                if (!this.getAcl().checkScope(this.scope, 'edit')) {
-                    if (!this.model.getLinkMultipleIdList('attachments').length) {
-                        this.hideField('attachments');
+        if (this.getUser().isPortal()) {
+            if (!this.getAcl().checkScope(this.scope, 'edit')) {
+                if (!this.model.getLinkMultipleIdList('attachments').length) {
+                    this.hideField('attachments');
 
-                        this.listenToOnce(this.model, 'sync', () => {
-                            if (this.model.getLinkMultipleIdList('attachments').length) {
-                                this.showField('attachments');
-                            }
-                        });
-                    }
+                    this.listenToOnce(this.model, 'sync', () => {
+                        if (this.model.getLinkMultipleIdList('attachments').length) {
+                            this.showField('attachments');
+                        }
+                    });
                 }
             }
-        },
+        }
+    },
 
-        actionSendInEmail: function () {
-            Espo.Ui.notify(this.translate('pleaseWait', 'messages'));
+    actionSendInEmail: function () {
+        Espo.Ui.notify(this.translate('pleaseWait', 'messages'));
 
-            Espo.require('crm:knowledge-base-helper', Helper => {
-                var helper = new Helper(this.getLanguage());
+        let helper = new KnowledgeBaseHelper(this.getLanguage());
 
-                helper.getAttributesForEmail(this.model, {}, (attributes) => {
-                    var viewName = this.getMetadata().get('clientDefs.Email.modalViews.compose') ||
-                        'views/modals/compose-email';
+        helper.getAttributesForEmail(this.model, {}, attributes => {
+            let viewName = this.getMetadata().get('clientDefs.Email.modalViews.compose') ||
+                'views/modals/compose-email';
 
-                    this.createView('composeEmail', viewName, {
-                        attributes: attributes,
-                        selectTemplateDisabled: true,
-                        signatureDisabled: true,
-                    }, (view) => {
-                        Espo.Ui.notify(false);
+            this.createView('composeEmail', viewName, {
+                attributes: attributes,
+                selectTemplateDisabled: true,
+                signatureDisabled: true,
+            }, view => {
+                Espo.Ui.notify(false);
 
-                        view.render();
-                    });
-                });
+                view.render();
             });
-        },
+        });
+    },
 
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
 
-            if (this.getUser().isPortal()) {
-                this.$el.find('.field[data-name="body"]').css('minHeight', '400px');
-            }
-        },
-    });
+        if (this.getUser().isPortal()) {
+            this.$el.find('.field[data-name="body"]').css('minHeight', '400px');
+        }
+    },
 });
diff --git a/client/modules/crm/src/views/knowledge-base-article/record/list-for-case.js b/client/modules/crm/src/views/knowledge-base-article/record/list-for-case.js
index f011f0ad81..7c173167ee 100644
--- a/client/modules/crm/src/views/knowledge-base-article/record/list-for-case.js
+++ b/client/modules/crm/src/views/knowledge-base-article/record/list-for-case.js
@@ -31,94 +31,114 @@ define('crm:views/knowledge-base-article/record/list-for-case', ['views/record/l
     return Dep.extend({
 
         actionSendInEmail: function (data) {
-            var model = this.collection.get(data.id);
+            let model = this.collection.get(data.id);
+            let parentModel = this.getParentView().model;
 
-            var parentModel = this.getParentView().model;
+            Espo.Ui.notify(' ... ');
 
-            Espo.Ui.notify(this.translate('pleaseWait', 'messages'));
-
-            new Promise(
-                function (resolve, reject) {
-                    model.fetch().then(function () {
-                        resolve();
-                    });
-                }
-            ).then(function () {
-                return new Promise(function (resolve, reject) {
-                    if (parentModel.get('contactsIds') && parentModel.get('contactsIds').length) {
-                        this.getCollectionFactory().create('Contact', function (contactList) {
-                            var contactListFinal = [];
+            new Promise(resolve => {
+                model.fetch().then(() => resolve());
+            })
+            .then(() => {
+                return new Promise(resolve => {
+                    if (
+                        parentModel.get('contactsIds') &&
+                        parentModel.get('contactsIds').length
+                    ) {
+                        this.getCollectionFactory().create('Contact', contactList => {
+                            let contactListFinal = [];
                             contactList.url = 'Case/' + parentModel.id + '/contacts';
-                            contactList.fetch().then(function () {
-                                contactList.forEach(function (contact) {
+
+                            contactList.fetch().then(() => {
+                                contactList.forEach(contact => {
                                     if (contact.id === parentModel.get('contactId')) {
                                         contactListFinal.unshift(contact);
                                     } else {
                                         contactListFinal.push(contact);
                                     }
                                 });
+
                                 resolve(contactListFinal);
-                            }, function () {resolve([])});
-                        }, this);
-                    } else if (parentModel.get('accountId')) {
-                        this.getModelFactory().create('Account', function (account) {
+                            }, () => {
+                                resolve([]);
+                            });
+                        });
+                    }
+                    else if (parentModel.get('accountId')) {
+                        this.getModelFactory().create('Account', account => {
                             account.id = parentModel.get('accountId');
-                            account.fetch().then(function () {
+
+                            account.fetch().then(() => {
                                 resolve([account]);
-                            }, function () {resolve([])});
-                        }, this);
-                    } else if (parentModel.get('leadId')) {
-                        this.getModelFactory().create('Lead', function (lead) {
+                            }, () => {
+                                resolve([]);
+                            });
+                        });
+                    }
+                    else if (parentModel.get('leadId')) {
+                        this.getModelFactory().create('Lead', lead => {
                             lead.id = parentModel.get('leadId');
-                            lead.fetch().then(function () {
+
+                            lead.fetch().then(() => {
                                 resolve([lead]);
-                            }, function () {resolve([])});
-                        }, this);
-                    } else {
+                            }, () => {
+                                resolve([]);
+                            });
+                        });
+                    }
+                    else {
                         resolve([]);
                     }
-                }.bind(this))
-            }.bind(this)).then(function (list) {
-                var attributes = {
+                })
+            })
+            .then(list => {
+                let attributes = {
                     parentType: 'Case',
                     parentId: parentModel.id,
                     parentName: parentModel.get('name'),
-                    name: '[#' + parentModel.get('number') + ']'
+                    name: '[#' + parentModel.get('number') + ']',
                 };
 
                 attributes.to = '';
                 attributes.cc = '';
                 attributes.nameHash = {};
 
-                list.forEach(function (model, i) {
+                list.forEach((model, i) => {
                     if (model.get('emailAddress')) {
                         if (i === 0) {
                             attributes.to += model.get('emailAddress') + ';';
                         } else {
                             attributes.cc += model.get('emailAddress') + ';';
                         }
+
                         attributes.nameHash[model.get('emailAddress')] = model.get('name');
                     }
                 });
 
-                Espo.require('crm:knowledge-base-helper', function (Helper) {
-                    (new Helper(this.getLanguage())).getAttributesForEmail(model, attributes, function (attributes) {
-                        var viewName = this.getMetadata().get('clientDefs.Email.modalViews.compose') || 'views/modals/compose-email';
+                Espo.loader.require('crm:knowledge-base-helper', Helper => {
+                    const helper = new Helper(this.getLanguage());
+
+                    helper.getAttributesForEmail(model, attributes, attributes => {
+                        var viewName = this.getMetadata().get('clientDefs.Email.modalViews.compose') ||
+                            'views/modals/compose-email';
+
                         this.createView('composeEmail', viewName, {
                             attributes: attributes,
                             selectTemplateDisabled: true,
-                            signatureDisabled: true
-                        }, function (view) {
+                            signatureDisabled: true,
+                        }, view => {
                             Espo.Ui.notify(false);
+
                             view.render();
 
-                            this.listenToOnce(view, 'after:send', function () {
+                            this.listenToOnce(view, 'after:send', () => {
                                 parentModel.trigger('after:relate');
-                            }, this);
-                        }, this);
-                    }.bind(this));
-                }, this);
-            }.bind(this)).catch(function () {
+                            });
+                        });
+                    });
+                });
+            })
+            .catch(() => {
                 Espo.Ui.notify(false);
             });
         },
diff --git a/client/modules/crm/src/views/meeting/modals/send-cancellation.js b/client/modules/crm/src/views/meeting/modals/send-cancellation.js
index 6f27063978..39f6fe2f05 100644
--- a/client/modules/crm/src/views/meeting/modals/send-cancellation.js
+++ b/client/modules/crm/src/views/meeting/modals/send-cancellation.js
@@ -34,7 +34,7 @@ define('crm:views/meeting/modals/send-cancellation', ['views/modal', 'collection
     /**
      * @class
      * @name Class
-     * @extends module:views/modal.Class
+     * @extends module:views/modal
      * @memberOf module:crm_views/meeting/modals/send-cancellation
      */
     return Dep.extend(/** @lends module:crm_views/meeting/modals/send-cancellation.Class# */{
@@ -160,7 +160,7 @@ define('crm:views/meeting/modals/send-cancellation', ['views/modal', 'collection
         },
 
         /**
-         * @return {module:views/record/list.Class}
+         * @return {module:views/record/list}
          */
         getListView: function () {
             return this.getView('list');
diff --git a/client/modules/crm/src/views/meeting/modals/send-invitations.js b/client/modules/crm/src/views/meeting/modals/send-invitations.js
index 242418abff..85195fd088 100644
--- a/client/modules/crm/src/views/meeting/modals/send-invitations.js
+++ b/client/modules/crm/src/views/meeting/modals/send-invitations.js
@@ -34,7 +34,7 @@ define('crm:views/meeting/modals/send-invitations', ['views/modal', 'collection'
     /**
      * @class
      * @name Class
-     * @extends module:views/modal.Class
+     * @extends module:views/modal
      * @memberOf module:crm_views/meeting/modals/send-invitations
      */
     return Dep.extend(/** @lends module:crm_views/meeting/modals/send-invitations.Class# */{
@@ -158,7 +158,7 @@ define('crm:views/meeting/modals/send-invitations', ['views/modal', 'collection'
         },
 
         /**
-         * @return {module:views/record/list.Class}
+         * @return {module:views/record/list}
          */
         getListView: function () {
             return this.getView('list');
diff --git a/client/modules/crm/src/views/record/panels/activities.js b/client/modules/crm/src/views/record/panels/activities.js
index a211f27463..b8314ee489 100644
--- a/client/modules/crm/src/views/record/panels/activities.js
+++ b/client/modules/crm/src/views/record/panels/activities.js
@@ -107,7 +107,7 @@ define('crm:views/record/panels/activities',
             let i = 0;
 
             this.scopeList.forEach(scope => {
-                this.getModelFactory().getSeed(scope, seed => {
+                this.getModelFactory().create(scope, seed => {
                     this.seeds[scope] = seed;
 
                     i++;
diff --git a/client/modules/crm/src/views/record/panels/history.js b/client/modules/crm/src/views/record/panels/history.js
index 27dee36504..be2335f165 100644
--- a/client/modules/crm/src/views/record/panels/history.js
+++ b/client/modules/crm/src/views/record/panels/history.js
@@ -167,7 +167,7 @@ define('crm:views/record/panels/history', ['crm:views/record/panels/activities']
                 return;
             }
 
-            Espo.require('EmailHelper', EmailHelper => {
+            Espo.loader.require('email-helper', EmailHelper => {
                 let emailHelper =
                     new EmailHelper(this.getLanguage(), this.getUser(), this.getDateTime(), this.getAcl());
 
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 f282ab6d36..f6de924bd4 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
@@ -26,10 +26,8 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define(
-    'crm:views/target-list/record/panels/opted-out',
-    ['views/record/panels/relationship', 'multi-collection'],
-    function (Dep, MultiCollection) {
+define('crm:views/target-list/record/panels/opted-out',  ['views/record/panels/relationship', 'multi-collection'],
+function (Dep, MultiCollection) {
 
     return Dep.extend({
 
@@ -85,8 +83,8 @@ define(
 
                 var i = 0;
 
-                this.scopeList.forEach((scope) => {
-                    this.getModelFactory().getSeed(scope, (seed) => {
+                this.scopeList.forEach(scope => {
+                    this.getModelFactory().create(scope, seed => {
                         this.seeds[scope] = seed;
 
                         i++;
@@ -125,7 +123,7 @@ define(
                     checkboxes: false,
                     collection: this.collection,
                     listLayout: this.listLayout,
-                }, (view) => {
+                }, view => {
                     view.render();
                 });
             });
diff --git a/client/src/acl-manager.js b/client/src/acl-manager.js
index 1fc565ea2b..a4a0e25ab9 100644
--- a/client/src/acl-manager.js
+++ b/client/src/acl-manager.js
@@ -26,471 +26,462 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('acl-manager', ['acl', 'utils'], function (Acl, Utils) {
+/** @module acl-manager */
+
+import Acl from 'acl';
+import Utils from 'utils';
+
+/**
+ * Access checking.
+ *
+ * @class
+ * @name Class
+ * @param {module:models/user} user A user.
+ * @param {Object} implementationClassMap `acl` implementations.
+ * @param {boolean} aclAllowDeleteCreated Allow a user to delete records they created regardless a
+ *   role access level.
+ */
+const Class = function (user, implementationClassMap, aclAllowDeleteCreated) {
+    this.setEmpty();
+
+    this.user = user || null;
+    this.implementationClassMap = implementationClassMap || {};
+    this.aclAllowDeleteCreated = aclAllowDeleteCreated;
+};
+
+/**
+ * An action.
+ *
+ * @typedef {'create'|'read'|'edit'|'delete'|'stream'} module:acl-manager~action
+ */
+
+_.extend(Class.prototype, /** @lends Class# */{
+
+    /** @protected */
+    data: null,
+    /** @protected */
+    user: null,
+    /** @protected */
+    fieldLevelList: ['yes', 'no'],
 
     /**
-     * Access checking.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:acl-manager
-     * @param {module:models/user.Class} user A user.
-     * @param {Object} implementationClassMap `acl` implementations.
-     * @param {boolean} aclAllowDeleteCreated Allow a user to delete records they created regardless a
-     *   role access level.
+     * @protected
      */
-    var AclManager = function (user, implementationClassMap, aclAllowDeleteCreated) {
-        this.setEmpty();
+    setEmpty: function () {
+        this.data = {
+            table: {},
+            fieldTable:  {},
+            fieldTableQuickAccess: {},
+        };
 
-        this.user = user || null;
-        this.implementationClassMap = implementationClassMap || {};
-        this.aclAllowDeleteCreated = aclAllowDeleteCreated;
-    };
+        this.implementationHash = {};
+        this.forbiddenFieldsCache = {};
+        this.implementationClassMap = {};
+        this.forbiddenAttributesCache = {};
+    },
 
     /**
-     * An action.
+     * Get an `acl` implementation.
      *
-     * @typedef {'create'|'read'|'edit'|'delete'|'stream'} module:acl-manager.Class~action
+     * @protected
+     * @param {string} scope A scope.
+     * @returns {module:acl}
      */
+    getImplementation: function (scope) {
+        if (!(scope in this.implementationHash)) {
+            let implementationClass = Acl;
 
-    _.extend(AclManager.prototype, /** @lends module:acl-manager.Class# */{
+            if (scope in this.implementationClassMap) {
+                implementationClass = this.implementationClassMap[scope];
+            }
 
-        /**
-         * @protected
-         */
-        data: null,
+            let forbiddenFieldList = this.getScopeForbiddenFieldList(scope);
 
-        /**
-         * @protected
-         */
-        user: null,
-
-        /**
-         * @protected
-         */
-        fieldLevelList: ['yes', 'no'],
-
-        /**
-         * @protected
-         */
-        setEmpty: function () {
-            this.data = {
-                table: {},
-                fieldTable:  {},
-                fieldTableQuickAccess: {},
+            let params = {
+                aclAllowDeleteCreated: this.aclAllowDeleteCreated,
+                teamsFieldIsForbidden: !!~forbiddenFieldList.indexOf('teams'),
+                forbiddenFieldList: forbiddenFieldList,
             };
 
-            this.implementationHash = {};
-            this.forbiddenFieldsCache = {};
-            this.implementationClassMap = {};
-            this.forbiddenAttributesCache = {};
-        },
+            this.implementationHash[scope] = new implementationClass(this.getUser(), scope, params);
+        }
 
-        /**
-         * Get an `acl` implementation.
-         *
-         * @protected
-         * @param {string} scope A scope.
-         * @returns {module:acl.Class}
-         */
-        getImplementation: function (scope) {
-            if (!(scope in this.implementationHash)) {
-                let implementationClass = Acl;
+        return this.implementationHash[scope];
+    },
 
-                if (scope in this.implementationClassMap) {
-                    implementationClass = this.implementationClassMap[scope];
-                }
+    /**
+     * @protected
+     */
+    getUser: function () {
+        return this.user;
+    },
 
-                let forbiddenFieldList = this.getScopeForbiddenFieldList(scope);
+    /**
+     * @internal
+     */
+    set: function (data) {
+        data = data || {};
 
-                let params = {
-                    aclAllowDeleteCreated: this.aclAllowDeleteCreated,
-                    teamsFieldIsForbidden: !!~forbiddenFieldList.indexOf('teams'),
-                    forbiddenFieldList: forbiddenFieldList,
-                };
+        this.data = data;
+        this.data.table = this.data.table || {};
+        this.data.fieldTable = this.data.fieldTable || {};
+        this.data.attributeTable = this.data.attributeTable || {};
+    },
 
-                let obj = new implementationClass(this.getUser(), scope, params);
+    /**
+     * @deprecated Use `getPermissionLevel`.
+     *
+     * @returns {string|null}
+     */
+    get: function (name) {
+        return this.data[name] || null;
+    },
 
-                this.implementationHash[scope] = obj;
-            }
+    /**
+     * Get a permission level.
+     *
+     * @param {string} permission A permission name.
+     * @returns {'yes'|'all'|'team'|'no'}
+     */
+    getPermissionLevel: function (permission) {
+        let permissionKey = permission;
 
-            return this.implementationHash[scope];
-        },
+        if (permission.substr(-10) !== 'Permission') {
+            permissionKey = permission + 'Permission';
+        }
 
-        /**
-         * @protected
-         */
-        getUser: function () {
-            return this.user;
-        },
+        return this.data[permissionKey] || 'no';
+    },
 
-        /**
-         * @protected
-         */
-        set: function (data) {
-            data = data || {};
+    /**
+     * Get access level to a scope action.
+     *
+     * @param {string} scope A scope.
+     * @param {module:acl-manager~action} action An action.
+     * @returns {'yes'|'all'|'team'|'no'|null}
+     */
+    getLevel: function (scope, action) {
+        if (!(scope in this.data.table)) {
+            return null;
+        }
 
-            this.data = data;
-            this.data.table = this.data.table || {};
-            this.data.fieldTable = this.data.fieldTable || {};
-            this.data.attributeTable = this.data.attributeTable || {};
-        },
+        if (typeof this.data.table[scope] !== 'object' || !(action in this.data.table[scope])) {
+            return null;
+        }
 
-        /**
-         * @deprecated Use `getPermissionLevel`.
-         *
-         * @returns {string|null}
-         */
-        get: function (name) {
-            return this.data[name] || null;
-        },
+        return this.data.table[scope][action];
+    },
 
-        /**
-         * Get a permission level.
-         *
-         * @param {string} permission A permission name.
-         * @returns {'yes'|'all'|'team'|'no'}
-         */
-        getPermissionLevel: function (permission) {
-            let permissionKey = permission;
+    /**
+     * Clear access data.
+     *
+     * @internal
+     */
+    clear: function () {
+        this.setEmpty();
+    },
 
-            if (permission.substr(-10) !== 'Permission') {
-                permissionKey = permission + 'Permission';
-            }
+    /**
+     * Check whether a scope has ACL.
+     *
+     * @param {string} scope A scope.
+     * @returns {boolean}
+     */
+    checkScopeHasAcl: function (scope) {
+        var data = (this.data.table || {})[scope];
 
-            return this.data[permissionKey] || 'no';
-        },
+        if (typeof data === 'undefined') {
+            return false;
+        }
 
-        /**
-         * Get access level to a scope action.
-         *
-         * @param {string} scope A scope.
-         * @param {module:acl-manager.Class~action} action An action.
-         * @returns {'yes'|'all'|'team'|'no'|null}
-         */
-        getLevel: function (scope, action) {
-            if (!(scope in this.data.table)) {
-                return null;
-            }
+        return true;
+    },
 
-            if (typeof this.data.table[scope] !== 'object' || !(action in this.data.table[scope])) {
-                return null;
-            }
+    /**
+     * Check access to a scope.
+     *
+     * @param {string} scope A scope.
+     * @param {module:acl-manager~action|null} [action=null] An action.
+     * @param {boolean} [precise=false] Deprecated. Not used.
+     * @returns {boolean} True if has access.
+     */
+    checkScope: function (scope, action, precise) {
+        let data = (this.data.table || {})[scope];
 
-            return this.data.table[scope][action];
-        },
+        if (typeof data === 'undefined') {
+            data = null;
+        }
 
-        /**
-         * Clear access data.
-         *
-         * @internal
-         */
-        clear: function () {
-            this.setEmpty();
-        },
+        return this.getImplementation(scope).checkScope(data, action, precise);
+    },
 
-        /**
-         * Check whether a scope has ACL.
-         *
-         * @param {string} scope A scope.
-         * @returns {boolean}
-         */
-        checkScopeHasAcl: function (scope) {
-            var data = (this.data.table || {})[scope];
+    /**
+     * Check access to a model.
+     *
+     * @param {module:model} model A model.
+     * @param {module:acl-manager~action|null} [action=null] An action.
+     * @param {boolean} [precise=false] To return `null` if not enough data is set in a model.
+     *   E.g. the `teams` field is not yet loaded.
+     * @returns {boolean|null} True if has access, null if not clear.
+     */
+    checkModel: function (model, action, precise) {
+        var scope = model.name;
 
-            if (typeof data === 'undefined') {
+        // todo move this to custom acl
+        if (action === 'edit') {
+            if (!model.isEditable()) {
                 return false;
             }
+        }
 
+        if (action === 'delete') {
+            if (!model.isRemovable()) {
+                return false;
+            }
+        }
+
+        let data = (this.data.table || {})[scope];
+
+        if (typeof data === 'undefined') {
+            data = null;
+        }
+
+        let impl = this.getImplementation(scope);
+
+        if (action) {
+            let methodName = 'checkModel' + Utils.upperCaseFirst(action);
+
+            if (methodName in impl) {
+                return impl[methodName](model, data, precise);
+            }
+        }
+
+        return impl.checkModel(model, data, action, precise);
+    },
+
+    /**
+     * Check access to a scope or a model.
+     *
+     * @param {string|module:model} subject What to check. A scope or a model.
+     * @param {module:acl-manager~action|null} [action=null] An action.
+     * @param {boolean} [precise=false]  To return `null` if not enough data is set in a model.
+     *   E.g. the `teams` field is not yet loaded.
+     * @returns {boolean|null} {boolean|null} True if has access, null if not clear.
+     */
+    check: function (subject, action, precise) {
+        if (typeof subject === 'string') {
+            return this.checkScope(subject, action, precise);
+        }
+
+        return this.checkModel(subject, action, precise);
+    },
+
+    /**
+     * Check if a user is owner to a model.
+     *
+     * @param {module:model} model A model.
+     * @returns {boolean|null} True if owner, null if not clear.
+     */
+    checkIsOwner: function (model) {
+        return this.getImplementation(model.name).checkIsOwner(model);
+    },
+
+    /**
+     * Check if a user in a team of a model.
+     *
+     * @param {module:model} model A model.
+     * @returns {boolean|null} True if in a team, null if not clear.
+     */
+    checkInTeam: function (model) {
+        return this.getImplementation(model.name).checkInTeam(model);
+    },
+
+    /**
+     * Check an assignment permission to a user.
+     *
+     * @param {module:models/user} user A user.
+     * @returns {boolean} True if has access.
+     */
+    checkAssignmentPermission: function (user) {
+        return this.checkPermission('assignmentPermission', user);
+    },
+
+    /**
+     * Check a user permission to a user.
+     *
+     * @param {module:models/user} user A user.
+     * @returns {boolean} True if has access.
+     */
+    checkUserPermission: function (user) {
+        return this.checkPermission('userPermission', user);
+    },
+
+    /**
+     * Check a specific permission to a user.
+     *
+     * @param {string} permission A permission name.
+     * @param {module:models/user} user A user.
+     * @returns {boolean} True if has access.
+     */
+    checkPermission: function (permission, user) {
+        if (this.getUser().isAdmin()) {
             return true;
-        },
+        }
 
-        /**
-         * Check access to a scope.
-         *
-         * @param {string} scope A scope.
-         * @param {module:acl-manager.Class~action|null} [action=null] An action.
-         * @param {boolean} [precise=false] Deprecated. Not used.
-         * @returns {boolean} True if has access.
-         */
-        checkScope: function (scope, action, precise) {
-            let data = (this.data.table || {})[scope];
+        let level = this.get(permission);
 
-            if (typeof data === 'undefined') {
-                data = null;
-            }
-
-            return this.getImplementation(scope).checkScope(data, action, precise);
-        },
-
-        /**
-         * Check access to a model.
-         *
-         * @param {module:model.Class} model A model.
-         * @param {module:acl-manager.Class~action|null} [action=null] An action.
-         * @param {boolean} [precise=false] To return `null` if not enough data is set in a model.
-         *   E.g. the `teams` field is not yet loaded.
-         * @returns {boolean|null} True if has access, null if not clear.
-         */
-        checkModel: function (model, action, precise) {
-            var scope = model.name;
-
-            // todo move this to custom acl
-            if (action === 'edit') {
-                if (!model.isEditable()) {
-                    return false;
-                }
-            }
-
-            if (action === 'delete') {
-                if (!model.isRemovable()) {
-                    return false;
-                }
-            }
-
-            let data = (this.data.table || {})[scope];
-
-            if (typeof data === 'undefined') {
-                data = null;
-            }
-
-            let impl = this.getImplementation(scope);
-
-            if (action) {
-                let methodName = 'checkModel' + Espo.Utils.upperCaseFirst(action);
-
-                if (methodName in impl) {
-                    return impl[methodName](model, data, precise);
-                }
-            }
-
-            return impl.checkModel(model, data, action, precise);
-        },
-
-        /**
-         * Check access to a scope or a model.
-         *
-         * @param {string|module:model.Class} subject What to check. A scope or a model.
-         * @param {module:acl-manager.Class~action|null} [action=null] An action.
-         * @param {boolean} [precise=false]  To return `null` if not enough data is set in a model.
-         *   E.g. the `teams` field is not yet loaded.
-         * @returns {boolean|null} {boolean|null} True if has access, null if not clear.
-         */
-        check: function (subject, action, precise) {
-            if (typeof subject === 'string') {
-                return this.checkScope(subject, action, precise);
-            }
-
-            return this.checkModel(subject, action, precise);
-        },
-
-        /**
-         * Check if a user is owner to a model.
-         *
-         * @param {module:model.Class} model A model.
-         * @returns {boolean|null} True if owner, null if not clear.
-         */
-        checkIsOwner: function (model) {
-            return this.getImplementation(model.name).checkIsOwner(model);
-        },
-
-        /**
-         * Check if a user in a team of a model.
-         *
-         * @param {module:model.Class} model A model.
-         * @returns {boolean|null} True if in a team, null if not clear.
-         */
-        checkInTeam: function (model) {
-            return this.getImplementation(model.name).checkInTeam(model);
-        },
-
-        /**
-         * Check an assignment permission to a user.
-         *
-         * @param {module:models/User.Class} user A user.
-         * @returns {boolean} True if has access.
-         */
-        checkAssignmentPermission: function (user) {
-            return this.checkPermission('assignmentPermission', user);
-        },
-
-        /**
-         * Check a user permission to a user.
-         *
-         * @param {module:models/User.Class} user A user.
-         * @returns {boolean} True if has access.
-         */
-        checkUserPermission: function (user) {
-            return this.checkPermission('userPermission', user);
-        },
-
-        /**
-         * Check a specific permission to a user.
-         *
-         * @param {string} permission A permission name.
-         * @param {module:models/User.Class} user A user.
-         * @returns {boolean} True if has access.
-         */
-        checkPermission: function (permission, user) {
-            if (this.getUser().isAdmin()) {
-                return true;
-            }
-
-            let level = this.get(permission);
-
-            if (level === 'no') {
-                if (user.id === this.getUser().id) {
-                    return true;
-                }
-
-                return false;
-            }
-
-            if (level === 'team') {
-                if (!user.has('teamsIds')) {
-                    return false;
-                }
-
-                let result = false;
-
-                let teamsIds = user.get('teamsIds') || [];
-
-                teamsIds.forEach(id => {
-                    if (~(this.getUser().get('teamsIds') || []).indexOf(id)) {
-                        result = true;
-                    }
-                });
-
-                return result;
-            }
-
-            if (level === 'all') {
-                return true;
-            }
-
-            if (level === 'yes') {
+        if (level === 'no') {
+            if (user.id === this.getUser().id) {
                 return true;
             }
 
             return false;
-        },
+        }
 
-        /**
-         * Get a list of forbidden fields for an entity type.
-         *
-         * @param {string} scope An entity type.
-         * @param {'read'|'edit'} [action='read'] An action.
-         * @param {'yes'|'no'} [thresholdLevel='no'] A threshold level.
-         * @returns {string[]} A forbidden field list.
-         */
-        getScopeForbiddenFieldList: function (scope, action, thresholdLevel) {
-            action = action || 'read';
-            thresholdLevel = thresholdLevel || 'no';
-
-            let key = scope + '_' + action + '_' + thresholdLevel;
-
-            if (key in this.forbiddenFieldsCache) {
-                return Utils.clone(this.forbiddenFieldsCache[key]);
+        if (level === 'team') {
+            if (!user.has('teamsIds')) {
+                return false;
             }
 
-            let levelList = this.fieldLevelList.slice(this.fieldLevelList.indexOf(thresholdLevel));
+            let result = false;
 
-            let fieldTableQuickAccess = this.data.fieldTableQuickAccess || {};
-            let scopeData = fieldTableQuickAccess[scope] || {};
-            let fieldsData = scopeData.fields || {};
-            let actionData = fieldsData[action] || {};
+            let teamsIds = user.get('teamsIds') || [];
 
-            let fieldList = [];
-
-            levelList.forEach(level => {
-                let list = actionData[level] || [];
-
-                list.forEach(field => {
-                    if (~fieldList.indexOf(field)) {
-                        return;
-                    }
-
-                    fieldList.push(field);
-                });
+            teamsIds.forEach(id => {
+                if (~(this.getUser().get('teamsIds') || []).indexOf(id)) {
+                    result = true;
+                }
             });
 
-            this.forbiddenFieldsCache[key] = fieldList;
+            return result;
+        }
 
-            return Utils.clone(fieldList);
-        },
+        if (level === 'all') {
+            return true;
+        }
 
-        /**
-         * Get a list of forbidden attributes for an entity type.
-         *
-         * @param {string} scope An entity type.
-         * @param {'read'|'edit'} [action='read'] An action.
-         * @param {'yes'|'no'} [thresholdLevel='no'] A threshold level.
-         * @returns {string[]} A forbidden attribute list.
-         */
-        getScopeForbiddenAttributeList: function (scope, action, thresholdLevel) {
-            action = action || 'read';
-            thresholdLevel = thresholdLevel || 'no';
+        if (level === 'yes') {
+            return true;
+        }
 
-            let key = scope + '_' + action + '_' + thresholdLevel;
+        return false;
+    },
 
-            if (key in this.forbiddenAttributesCache) {
-                return Utils.clone(this.forbiddenAttributesCache[key]);
-            }
+    /**
+     * Get a list of forbidden fields for an entity type.
+     *
+     * @param {string} scope An entity type.
+     * @param {'read'|'edit'} [action='read'] An action.
+     * @param {'yes'|'no'} [thresholdLevel='no'] A threshold level.
+     * @returns {string[]} A forbidden field list.
+     */
+    getScopeForbiddenFieldList: function (scope, action, thresholdLevel) {
+        action = action || 'read';
+        thresholdLevel = thresholdLevel || 'no';
 
-            let levelList = this.fieldLevelList.slice(this.fieldLevelList.indexOf(thresholdLevel));
+        let key = scope + '_' + action + '_' + thresholdLevel;
 
-            let fieldTableQuickAccess = this.data.fieldTableQuickAccess || {};
-            let scopeData = fieldTableQuickAccess[scope] || {};
+        if (key in this.forbiddenFieldsCache) {
+            return Utils.clone(this.forbiddenFieldsCache[key]);
+        }
 
-            let attributesData = scopeData.attributes || {};
-            let actionData = attributesData[action] || {};
+        let levelList = this.fieldLevelList.slice(this.fieldLevelList.indexOf(thresholdLevel));
 
-            let attributeList = [];
+        let fieldTableQuickAccess = this.data.fieldTableQuickAccess || {};
+        let scopeData = fieldTableQuickAccess[scope] || {};
+        let fieldsData = scopeData.fields || {};
+        let actionData = fieldsData[action] || {};
 
-            levelList.forEach(level => {
-                let list = actionData[level] || [];
+        let fieldList = [];
 
-                list.forEach(attribute => {
-                    if (~attributeList.indexOf(attribute)) {
-                        return;
-                    }
+        levelList.forEach(level => {
+            let list = actionData[level] || [];
 
-                    attributeList.push(attribute);
-                });
+            list.forEach(field => {
+                if (~fieldList.indexOf(field)) {
+                    return;
+                }
+
+                fieldList.push(field);
             });
+        });
 
-            this.forbiddenAttributesCache[key] = attributeList;
+        this.forbiddenFieldsCache[key] = fieldList;
 
-            return Utils.clone(attributeList);
-        },
+        return Utils.clone(fieldList);
+    },
 
-        /**
-         * Check an assignment permission to a team.
-         *
-         * @param {string} teamId A team ID.
-         * @returns {boolean} True if has access.
-         */
-        checkTeamAssignmentPermission: function (teamId) {
-            if (this.get('assignmentPermission') === 'all') {
-                return true;
-            }
+    /**
+     * Get a list of forbidden attributes for an entity type.
+     *
+     * @param {string} scope An entity type.
+     * @param {'read'|'edit'} [action='read'] An action.
+     * @param {'yes'|'no'} [thresholdLevel='no'] A threshold level.
+     * @returns {string[]} A forbidden attribute list.
+     */
+    getScopeForbiddenAttributeList: function (scope, action, thresholdLevel) {
+        action = action || 'read';
+        thresholdLevel = thresholdLevel || 'no';
 
-            return !!~this.getUser().getLinkMultipleIdList('teams').indexOf(teamId);
-        },
+        let key = scope + '_' + action + '_' + thresholdLevel;
 
-        /**
-         * Check access to a field.
-         * @param {string} scope An entity type.
-         * @param {string} field A field.
-         * @param {'read'|'edit'} [action='read'] An action.
-         * @returns {boolean} True if has access.
-         */
-        checkField: function (scope, field, action) {
-            return !~this.getScopeForbiddenFieldList(scope, action).indexOf(field);
-        },
-    });
+        if (key in this.forbiddenAttributesCache) {
+            return Utils.clone(this.forbiddenAttributesCache[key]);
+        }
 
-    AclManager.extend = Bull.View.extend;
+        let levelList = this.fieldLevelList.slice(this.fieldLevelList.indexOf(thresholdLevel));
 
-    return AclManager;
+        let fieldTableQuickAccess = this.data.fieldTableQuickAccess || {};
+        let scopeData = fieldTableQuickAccess[scope] || {};
+
+        let attributesData = scopeData.attributes || {};
+        let actionData = attributesData[action] || {};
+
+        let attributeList = [];
+
+        levelList.forEach(level => {
+            let list = actionData[level] || [];
+
+            list.forEach(attribute => {
+                if (~attributeList.indexOf(attribute)) {
+                    return;
+                }
+
+                attributeList.push(attribute);
+            });
+        });
+
+        this.forbiddenAttributesCache[key] = attributeList;
+
+        return Utils.clone(attributeList);
+    },
+
+    /**
+     * Check an assignment permission to a team.
+     *
+     * @param {string} teamId A team ID.
+     * @returns {boolean} True if has access.
+     */
+    checkTeamAssignmentPermission: function (teamId) {
+        if (this.get('assignmentPermission') === 'all') {
+            return true;
+        }
+
+        return !!~this.getUser().getLinkMultipleIdList('teams').indexOf(teamId);
+    },
+
+    /**
+     * Check access to a field.
+     * @param {string} scope An entity type.
+     * @param {string} field A field.
+     * @param {'read'|'edit'} [action='read'] An action.
+     * @returns {boolean} True if has access.
+     */
+    checkField: function (scope, field, action) {
+        return !~this.getScopeForbiddenFieldList(scope, action).indexOf(field);
+    },
 });
+
+Class.extend = Bull.View.extend;
+
+export default Class;
diff --git a/client/src/acl-portal-manager.js b/client/src/acl-portal-manager.js
index d8e63a540b..76f7e8d080 100644
--- a/client/src/acl-portal-manager.js
+++ b/client/src/acl-portal-manager.js
@@ -26,55 +26,55 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('acl-portal-manager', ['acl-manager', 'acl-portal'], function (Dep, AclPortal) {
+/** @module acl-portal-manager */
+
+import Dep from 'acl-manager';
+import AclPortal from 'acl-portal';
+
+/**
+ * Portal access checking.
+ *
+ * @class
+ * @name Class
+ * @extends module:acl-manager
+ */
+export default Dep.extend(/** @lends Class# */{
 
     /**
-     * Portal access checking.
+     * Check if a user in an account of a model.
      *
-     * @class
-     * @name Class
-     * @extends module:acl-manager.Class
-     * @memberOf module:acl-portal-manager
+     * @param {module:model} model A model.
+     * @returns {boolean|null} True if in an account, null if not clear.
      */
-    return Dep.extend(/** @lends module:acl-portal-manager.Class# */{
+    checkInAccount: function (model) {
+        return this.getImplementation(model.name).checkInAccount(model);
+    },
 
-        /**
-         * Check if a user in an account of a model.
-         *
-         * @param {module:model.Class} model A model.
-         * @returns {boolean|null} True if in an account, null if not clear.
-         */
-        checkInAccount: function (model) {
-            return this.getImplementation(model.name).checkInAccount(model);
-        },
+    /**
+     * Check if a user is a contact-owner to a model.
+     *
+     * @param {module:model} model A model.
+     * @returns {boolean|null} True if in a contact-owner, null if not clear.
+     */
+    checkIsOwnContact: function (model) {
+        return this.getImplementation(model.name).checkIsOwnContact(model);
+    },
 
-        /**
-         * Check if a user is a contact-owner to a model.
-         *
-         * @param {module:model.Class} model A model.
-         * @returns {boolean|null} True if in a contact-owner, null if not clear.
-         */
-        checkIsOwnContact: function (model) {
-            return this.getImplementation(model.name).checkIsOwnContact(model);
-        },
+    /**
+     * @inheritDoc
+     */
+    getImplementation: function (scope) {
+        if (!(scope in this.implementationHash)) {
+            let implementationClass = AclPortal;
 
-        /**
-         * @inheritDoc
-         */
-        getImplementation: function (scope) {
-            if (!(scope in this.implementationHash)) {
-                let implementationClass = AclPortal;
-
-                if (scope in this.implementationClassMap) {
-                    implementationClass = this.implementationClassMap[scope];
-                }
-
-                let obj = new implementationClass(this.getUser(), scope, this.aclAllowDeleteCreated);
-
-                this.implementationHash[scope] = obj;
+            if (scope in this.implementationClassMap) {
+                implementationClass = this.implementationClassMap[scope];
             }
 
-            return this.implementationHash[scope];
-        },
-    });
+            this.implementationHash[scope] =
+                new implementationClass(this.getUser(), scope, this.aclAllowDeleteCreated);
+        }
+
+        return this.implementationHash[scope];
+    },
 });
diff --git a/client/src/acl-portal.js b/client/src/acl-portal.js
index 06e05c849e..7ecf5196c0 100644
--- a/client/src/acl-portal.js
+++ b/client/src/acl-portal.js
@@ -26,129 +26,99 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('acl-portal', ['acl'], function (Dep) {
+/** @module acl-portal */
+
+import Dep from 'acl';
+
+/**
+ * Internal class for portal access checking. Can be extended to customize access checking
+ * for a specific scope.
+ *
+ * @class
+ * @name Class
+ * @extends Dep
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    /** @inheritDoc */
+    user: null,
 
     /**
-     * Internal class for portal access checking. Can be extended to customize access checking
-     * for a specific scope.
-     *
-     * @class
-     * @name Class
-     * @extends module:acl.Class
-     * @memberOf module:acl-portal
+     * @inheritDoc
      */
-    return Dep.extend(/** @lends module:acl-portal.Class# */{
+    getUser: function () {
+        return this.user;
+    },
 
-        /**
-         * @inheritDoc
-         */
-        user: null,
+    /**
+     * @inheritDoc
+     */
+    checkScope: function (data, action, precise, entityAccessData) {
+        entityAccessData = entityAccessData || {};
 
-        /**
-         * @inheritDoc
-         */
-        getUser: function () {
-            return this.user;
-        },
+        let inAccount = entityAccessData.inAccount;
+        let isOwnContact = entityAccessData.isOwnContact;
+        let isOwner = entityAccessData.isOwner;
 
-        /**
-         * @inheritDoc
-         */
-        checkScope: function (data, action, precise, entityAccessData) {
-            entityAccessData = entityAccessData || {};
+        if (this.getUser().isAdmin()) {
+            return true;
+        }
 
-            let inAccount = entityAccessData.inAccount;
-            let isOwnContact = entityAccessData.isOwnContact;
-            let isOwner = entityAccessData.isOwner;
+        if (data === false) {
+            return false;
+        }
 
-            if (this.getUser().isAdmin()) {
+        if (data === true) {
+            return true;
+        }
+
+        if (typeof data === 'string') {
+            return true;
+        }
+
+        if (data === null) {
+            return false;
+        }
+
+        action = action || null;
+
+        if (action === null) {
+            return true;
+        }
+
+        if (!(action in data)) {
+            return false;
+        }
+
+        var value = data[action];
+
+        if (value === 'all') {
+            return true;
+        }
+
+        if (value === 'yes') {
+            return true;
+        }
+
+        if (value === 'no') {
+            return false;
+        }
+
+        if (typeof isOwner === 'undefined') {
+            return true;
+        }
+
+        if (isOwner) {
+            if (value === 'own' || value === 'account' || value === 'contact') {
                 return true;
             }
+        }
 
-            if (data === false) {
-                return false;
-            }
+        var result = false;
 
-            if (data === true) {
-                return true;
-            }
-
-            if (typeof data === 'string') {
-                return true;
-            }
-
-            if (data === null) {
-                return false;
-            }
-
-            action = action || null;
-
-            if (action === null) {
-                return true;
-            }
-
-            if (!(action in data)) {
-                return false;
-            }
-
-            var value = data[action];
-
-            if (value === 'all') {
-                return true;
-            }
-
-            if (value === 'yes') {
-                return true;
-            }
-
-            if (value === 'no') {
-                return false;
-            }
-
-            if (typeof isOwner === 'undefined') {
-                return true;
-            }
-
-            if (isOwner) {
-                if (value === 'own' || value === 'account' || value === 'contact') {
-                    return true;
-                }
-            }
-
-            var result = false;
-
-            if (value === 'account') {
-                result = inAccount;
-                if (inAccount === null) {
-                    if (precise) {
-                        result = null;
-                    }
-                    else {
-                        return true;
-                    }
-                }
-                else if (inAccount) {
-                    return true;
-                }
-            }
-
-            if (value === 'contact') {
-                result = isOwnContact;
-
-                if (isOwnContact === null) {
-                    if (precise) {
-                        result = null;
-                    }
-                    else {
-                        return true;
-                    }
-                }
-                else if (isOwnContact) {
-                    return true;
-                }
-            }
-
-            if (isOwner === null) {
+        if (value === 'account') {
+            result = inAccount;
+            if (inAccount === null) {
                 if (precise) {
                     result = null;
                 }
@@ -156,140 +126,168 @@ define('acl-portal', ['acl'], function (Dep) {
                     return true;
                 }
             }
-
-            return result;
-        },
-
-        /**
-         * @inheritDoc
-         */
-        checkModel: function (model, data, action, precise) {
-            if (this.getUser().isAdmin()) {
+            else if (inAccount) {
                 return true;
             }
+        }
 
-            let entityAccessData = {
-                isOwner: this.checkIsOwner(model),
-                inAccount: this.checkInAccount(model),
-                isOwnContact: this.checkIsOwnContact(model),
-            };
+        if (value === 'contact') {
+            result = isOwnContact;
 
-            return this.checkScope(data, action, precise, entityAccessData);
-        },
-
-        /**
-         * @inheritDoc
-         */
-        checkIsOwner: function (model) {
-            if (model.hasField('createdBy')) {
-                if (this.getUser().id === model.get('createdById')) {
+            if (isOwnContact === null) {
+                if (precise) {
+                    result = null;
+                }
+                else {
                     return true;
                 }
             }
+            else if (isOwnContact) {
+                return true;
+            }
+        }
 
+        if (isOwner === null) {
+            if (precise) {
+                result = null;
+            }
+            else {
+                return true;
+            }
+        }
+
+        return result;
+    },
+
+    /**
+     * @inheritDoc
+     */
+    checkModel: function (model, data, action, precise) {
+        if (this.getUser().isAdmin()) {
+            return true;
+        }
+
+        let entityAccessData = {
+            isOwner: this.checkIsOwner(model),
+            inAccount: this.checkInAccount(model),
+            isOwnContact: this.checkIsOwnContact(model),
+        };
+
+        return this.checkScope(data, action, precise, entityAccessData);
+    },
+
+    /**
+     * @inheritDoc
+     */
+    checkIsOwner: function (model) {
+        if (model.hasField('createdBy')) {
+            if (this.getUser().id === model.get('createdById')) {
+                return true;
+            }
+        }
+
+        return false;
+    },
+
+    /**
+     * Check if a user in an account of a model.
+     *
+     * @param {module:model} model A model.
+     * @returns {boolean|null} True if in an account, null if not clear.
+     */
+    checkInAccount: function (model) {
+        let accountIdList = this.getUser().getLinkMultipleIdList('accounts');
+
+        if (!accountIdList.length) {
             return false;
-        },
+        }
 
-        /**
-         * Check if a user in an account of a model.
-         *
-         * @param {module:model.Class} model A model.
-         * @returns {boolean|null} True if in an account, null if not clear.
-         */
-        checkInAccount: function (model) {
-            let accountIdList = this.getUser().getLinkMultipleIdList('accounts');
-
-            if (!accountIdList.length) {
-                return false;
-            }
-
-            if (model.hasField('account')) {
-                if (model.get('accountId')) {
-                    if (~accountIdList.indexOf(model.get('accountId'))) {
-                        return true;
-                    }
-                }
-            }
-
-            var result = false;
-
-            if (model.hasField('accounts') && model.hasLink('accounts')) {
-                if (!model.has('accountsIds')) {
-                    result = null;
-                }
-
-                (model.getLinkMultipleIdList('accounts')).forEach(id => {
-                    if (~accountIdList.indexOf(id)) {
-                        result = true;
-                    }
-                });
-            }
-
-            if (model.hasField('parent') && model.hasLink('parent')) {
-                if (model.get('parentType') === 'Account') {
-                    if (!accountIdList.indexOf(model.get('parentId'))) {
-                        return true;
-                    }
-                }
-            }
-
-            if (result === false) {
-                if (!model.hasField('accounts') && model.hasLink('accounts')) {
+        if (model.hasField('account')) {
+            if (model.get('accountId')) {
+                if (~accountIdList.indexOf(model.get('accountId'))) {
                     return true;
                 }
             }
+        }
 
-            return result;
-        },
+        var result = false;
 
-        /**
-         * Check if a user is a contact-owner to a model.
-         *
-         * @param {module:model.Class} model A model.
-         * @returns {boolean|null} True if in a contact-owner, null if not clear.
-         */
-        checkIsOwnContact: function (model) {
-            let contactId = this.getUser().get('contactId');
-
-            if (!contactId) {
-                return false;
+        if (model.hasField('accounts') && model.hasLink('accounts')) {
+            if (!model.has('accountsIds')) {
+                result = null;
             }
 
-            if (model.hasField('contact')) {
-                if (model.get('contactId')) {
-                    if (contactId === model.get('contactId')) {
-                        return true;
-                    }
+            (model.getLinkMultipleIdList('accounts')).forEach(id => {
+                if (~accountIdList.indexOf(id)) {
+                    result = true;
                 }
-            }
+            });
+        }
 
-            let result = false;
-
-            if (model.hasField('contacts') && model.hasLink('contacts')) {
-                if (!model.has('contactsIds')) {
-                    result = null;
-                }
-
-                (model.getLinkMultipleIdList('contacts')).forEach(id => {
-                    if (contactId === id) {
-                        result = true;
-                    }
-                });
-            }
-
-            if (model.hasField('parent') && model.hasLink('parent')) {
-                if (model.get('parentType') === 'Contact' && model.get('parentId') === contactId) {
+        if (model.hasField('parent') && model.hasLink('parent')) {
+            if (model.get('parentType') === 'Account') {
+                if (!accountIdList.indexOf(model.get('parentId'))) {
                     return true;
                 }
             }
+        }
 
-            if (result === false) {
-                if (!model.hasField('contacts') && model.hasLink('contacts')) {
+        if (result === false) {
+            if (!model.hasField('accounts') && model.hasLink('accounts')) {
+                return true;
+            }
+        }
+
+        return result;
+    },
+
+    /**
+     * Check if a user is a contact-owner to a model.
+     *
+     * @param {module:model} model A model.
+     * @returns {boolean|null} True if in a contact-owner, null if not clear.
+     */
+    checkIsOwnContact: function (model) {
+        let contactId = this.getUser().get('contactId');
+
+        if (!contactId) {
+            return false;
+        }
+
+        if (model.hasField('contact')) {
+            if (model.get('contactId')) {
+                if (contactId === model.get('contactId')) {
                     return true;
                 }
             }
+        }
 
-            return result;
-        },
-    });
+        let result = false;
+
+        if (model.hasField('contacts') && model.hasLink('contacts')) {
+            if (!model.has('contactsIds')) {
+                result = null;
+            }
+
+            (model.getLinkMultipleIdList('contacts')).forEach(id => {
+                if (contactId === id) {
+                    result = true;
+                }
+            });
+        }
+
+        if (model.hasField('parent') && model.hasLink('parent')) {
+            if (model.get('parentType') === 'Contact' && model.get('parentId') === contactId) {
+                return true;
+            }
+        }
+
+        if (result === false) {
+            if (!model.hasField('contacts') && model.hasLink('contacts')) {
+                return true;
+            }
+        }
+
+        return result;
+    },
 });
diff --git a/client/src/acl.js b/client/src/acl.js
index f8820e8027..bf181a35dc 100644
--- a/client/src/acl.js
+++ b/client/src/acl.js
@@ -26,141 +26,126 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('acl', [], function () {
+/** @module acl */
+
+/**
+ * Internal class for access checking. Can be extended to customize access checking
+ * for a specific scope.
+ *
+ * @class
+ * @param {module:models/user} user A user.
+ * @param {string} scope A scope.
+ * @param {Object} params Parameters.
+ */
+const Class = function (user, scope, params) {
+    this.user = user || null;
+    this.scope = scope;
+
+    params = params || {};
+
+    this.aclAllowDeleteCreated = params.aclAllowDeleteCreated;
+    this.teamsFieldIsForbidden = params.teamsFieldIsForbidden;
+    this.forbiddenFieldList = params.forbiddenFieldList;
+};
+
+_.extend(Class.prototype, /** @lends Class# */ {
 
     /**
-     * Internal class for access checking. Can be extended to customize access checking
-     * for a specific scope.
+     * A user.
      *
-     * @class
-     * @name Class
-     * @memberOf module:acl
-     * @param {module:models/user.Class} user A user.
-     * @param {string} scope A scope.
-     * @param {Object} params Parameters.
+     * @type {module:models/user}
+     * @protected
      */
-    let Acl = function (user, scope, params) {
-        this.user = user || null;
-        this.scope = scope;
+    user: null,
 
-        params = params || {};
+    /**
+     * Get a user.
+     *
+     * @returns {module:models/user}
+     * @protected
+     */
+    getUser: function () {
+        return this.user;
+    },
 
-        this.aclAllowDeleteCreated = params.aclAllowDeleteCreated;
-        this.teamsFieldIsForbidden = params.teamsFieldIsForbidden;
-        this.forbiddenFieldList = params.forbiddenFieldList;
-    };
+    /**
+     * Check access to a scope.
+     *
+     * @param {string|boolean|Object} data Access data.
+     * @param {module:acl-manager~action|null} [action=null] An action.
+     * @param {boolean} [precise=false] To return `null` if `inTeam == null`.
+     * @param {Object|null} [entityAccessData=null] Entity access data. `inTeam`, `isOwner`.
+     * @returns {boolean|null} True if has access.
+     */
+    checkScope: function (data, action, precise, entityAccessData) {
+        entityAccessData = entityAccessData || {};
 
-    _.extend(Acl.prototype, /** @lends module:acl.Class# */ {
-
-        /**
-         * A user.
-         *
-         * @type {module:models/user.Class}
-         * @protected
-         */
-        user: null,
-
-        /**
-         * Get a user.
-         *
-         * @returns {module:models/user.Class}
-         * @protected
-         */
-        getUser: function () {
-            return this.user;
-        },
-
-        /**
-         * Check access to a scope.
-         *
-         * @param {string|boolean|Object} data Access data.
-         * @param {module:acl-manager.Class~action|null} [action=null] An action.
-         * @param {boolean} [precise=false] To return `null` if `inTeam == null`.
-         * @param {Object|null} [entityAccessData=null] Entity access data. `inTeam`, `isOwner`.
-         * @returns {boolean|null} True if has access.
-         */
-        checkScope: function (data, action, precise, entityAccessData) {
-            entityAccessData = entityAccessData || {};
-
-            var inTeam = entityAccessData.inTeam;
-            var isOwner = entityAccessData.isOwner;
-
-            if (this.getUser().isAdmin()) {
-                if (data === false) {
-                    return false;
-                }
-
-                return true;
-            }
+        var inTeam = entityAccessData.inTeam;
+        var isOwner = entityAccessData.isOwner;
 
+        if (this.getUser().isAdmin()) {
             if (data === false) {
                 return false;
             }
 
-            if (data === true) {
+            return true;
+        }
+
+        if (data === false) {
+            return false;
+        }
+
+        if (data === true) {
+            return true;
+        }
+
+        if (typeof data === 'string') {
+            return true;
+        }
+
+        if (data === null) {
+            return false;
+        }
+
+        action = action || null;
+
+        if (action === null) {
+            return true;
+        }
+        if (!(action in data)) {
+            return false;
+        }
+
+        var value = data[action];
+
+        if (value === 'all') {
+            return true;
+        }
+
+        if (value === 'yes') {
+            return true;
+        }
+
+        if (value === 'no') {
+            return false;
+        }
+
+        if (typeof isOwner === 'undefined') {
+            return true;
+        }
+
+        if (isOwner) {
+            if (value === 'own' || value === 'team') {
                 return true;
             }
+        }
 
-            if (typeof data === 'string') {
-                return true;
-            }
+        var result = false;
 
-            if (data === null) {
-                return false;
-            }
+        if (value === 'team') {
+            result = inTeam;
 
-            action = action || null;
-
-            if (action === null) {
-                return true;
-            }
-            if (!(action in data)) {
-                return false;
-            }
-
-            var value = data[action];
-
-            if (value === 'all') {
-                return true;
-            }
-
-            if (value === 'yes') {
-                return true;
-            }
-
-            if (value === 'no') {
-                return false;
-            }
-
-            if (typeof isOwner === 'undefined') {
-                return true;
-            }
-
-            if (isOwner) {
-                if (value === 'own' || value === 'team') {
-                    return true;
-                }
-            }
-
-            var result = false;
-
-            if (value === 'team') {
-                result = inTeam;
-
-                if (inTeam === null) {
-                    if (precise) {
-                        result = null;
-                    }
-                    else {
-                        return true;
-                    }
-                }
-                else if (inTeam) {
-                    return true;
-                }
-            }
-
-            if (isOwner === null) {
+            if (inTeam === null) {
                 if (precise) {
                     result = null;
                 }
@@ -168,157 +153,169 @@ define('acl', [], function () {
                     return true;
                 }
             }
-
-            return result;
-        },
-
-        /**
-         * Check access to model (entity).
-         *
-         * @param {module:model.Class} model A model.
-         * @param {Object|string|null} data Access data.
-         * @param {module:acl-manager.Class~action|null} [action=null] Action to check.
-         * @param {boolean} [precise=false] To return `null` if not enough data is set in a model.
-         *   E.g. the `teams` field is not yet loaded.
-         * @returns {boolean|null} True if has access, null if not clear.
-         */
-        checkModel: function (model, data, action, precise) {
-            if (this.getUser().isAdmin()) {
+            else if (inTeam) {
                 return true;
             }
+        }
 
-            let entityAccessData = {
-                isOwner: this.checkIsOwner(model),
-                inTeam: this.checkInTeam(model),
-            };
-
-            return this.checkScope(data, action, precise, entityAccessData);
-        },
-
-        /**
-         * Check `delete` access to model.
-         *
-         * @param {module:model.Class} model A model.
-         * @param {Object|string|null} data Access data.
-         * @param {boolean} [precise=false] To return `null` if not enough data is set in a model.
-         *   E.g. the `teams` field is not yet loaded.
-         * @returns {boolean} True if has access.
-         */
-        checkModelDelete: function (model, data, precise) {
-            let result = this.checkModel(model, data, 'delete', precise);
-
-            if (result) {
+        if (isOwner === null) {
+            if (precise) {
+                result = null;
+            }
+            else {
                 return true;
             }
+        }
 
-            if (data === false) {
-                return false;
-            }
+        return result;
+    },
 
-            var d = data || {};
+    /**
+     * Check access to model (entity).
+     *
+     * @param {module:model} model A model.
+     * @param {Object|string|null} data Access data.
+     * @param {module:acl-manager~action|null} [action=null] Action to check.
+     * @param {boolean} [precise=false] To return `null` if not enough data is set in a model.
+     *   E.g. the `teams` field is not yet loaded.
+     * @returns {boolean|null} True if has access, null if not clear.
+     */
+    checkModel: function (model, data, action, precise) {
+        if (this.getUser().isAdmin()) {
+            return true;
+        }
 
-            if (d.read === 'no') {
-                return false;
-            }
+        let entityAccessData = {
+            isOwner: this.checkIsOwner(model),
+            inTeam: this.checkInTeam(model),
+        };
 
-            if (model.has('createdById')) {
-                if (model.get('createdById') === this.getUser().id && this.aclAllowDeleteCreated) {
-                    if (!model.has('assignedUserId')) {
-                        return true;
-                    }
+        return this.checkScope(data, action, precise, entityAccessData);
+    },
 
-                    if (!model.get('assignedUserId')) {
-                        return true;
-                    }
+    /**
+     * Check `delete` access to model.
+     *
+     * @param {module:model} model A model.
+     * @param {Object|string|null} data Access data.
+     * @param {boolean} [precise=false] To return `null` if not enough data is set in a model.
+     *   E.g. the `teams` field is not yet loaded.
+     * @returns {boolean} True if has access.
+     */
+    checkModelDelete: function (model, data, precise) {
+        let result = this.checkModel(model, data, 'delete', precise);
 
-                    if (model.get('assignedUserId') === this.getUser().id) {
-                        return true;
-                    }
+        if (result) {
+            return true;
+        }
 
-                }
-            }
+        if (data === false) {
+            return false;
+        }
 
-            return result;
-        },
+        var d = data || {};
 
-        /**
-         * Check if a user is owner to a model.
-         *
-         * @param {module:model.Class} model A model.
-         * @returns {boolean|null} True if owner. Null if not clear.
-         */
-        checkIsOwner: function (model) {
-            let result = false;
+        if (d.read === 'no') {
+            return false;
+        }
 
-            if (model.hasField('assignedUser')) {
-                if (this.getUser().id === model.get('assignedUserId')) {
+        if (model.has('createdById')) {
+            if (model.get('createdById') === this.getUser().id && this.aclAllowDeleteCreated) {
+                if (!model.has('assignedUserId')) {
                     return true;
                 }
 
-                if (!model.has('assignedUserId')) {
+                if (!model.get('assignedUserId')) {
+                    return true;
+                }
+
+                if (model.get('assignedUserId') === this.getUser().id) {
+                    return true;
+                }
+
+            }
+        }
+
+        return result;
+    },
+
+    /**
+     * Check if a user is owner to a model.
+     *
+     * @param {module:model} model A model.
+     * @returns {boolean|null} True if owner. Null if not clear.
+     */
+    checkIsOwner: function (model) {
+        let result = false;
+
+        if (model.hasField('assignedUser')) {
+            if (this.getUser().id === model.get('assignedUserId')) {
+                return true;
+            }
+
+            if (!model.has('assignedUserId')) {
+                result = null;
+            }
+        }
+        else {
+            if (model.hasField('createdBy')) {
+                if (this.getUser().id === model.get('createdById')) {
+                    return true;
+                }
+
+                if (!model.has('createdById')) {
                     result = null;
                 }
             }
-            else {
-                if (model.hasField('createdBy')) {
-                    if (this.getUser().id === model.get('createdById')) {
-                        return true;
-                    }
-
-                    if (!model.has('createdById')) {
-                        result = null;
-                    }
-                }
-            }
-
-            if (model.hasField('assignedUsers')) {
-                if (!model.has('assignedUsersIds')) {
-                    return null;
-                }
-
-                if (~(model.get('assignedUsersIds') || []).indexOf(this.getUser().id)) {
-                    return true;
-                }
-
-                result = false;
-            }
-
-            return result;
-        },
-
-        /**
-         * Check if a user in a team of a model.
-         *
-         * @param {module:model.Class} model A model.
-         * @returns {boolean|null} True if in a team. Null if not clear.
-         */
-        checkInTeam: function (model) {
-            var userTeamIdList = this.getUser().getTeamIdList();
-
-            if (!model.has('teamsIds')) {
-                if (this.teamsFieldIsForbidden) {
-                    return true;
-                }
+        }
 
+        if (model.hasField('assignedUsers')) {
+            if (!model.has('assignedUsersIds')) {
                 return null;
             }
 
-            var teamIdList = model.getTeamIdList();
+            if (~(model.get('assignedUsersIds') || []).indexOf(this.getUser().id)) {
+                return true;
+            }
 
-            var inTeam = false;
+            result = false;
+        }
 
-            userTeamIdList.forEach(id => {
-                if (~teamIdList.indexOf(id)) {
-                    inTeam = true;
-                }
-            });
+        return result;
+    },
 
-            return inTeam;
-        },
+    /**
+     * Check if a user in a team of a model.
+     *
+     * @param {module:model} model A model.
+     * @returns {boolean|null} True if in a team. Null if not clear.
+     */
+    checkInTeam: function (model) {
+        var userTeamIdList = this.getUser().getTeamIdList();
 
-    });
+        if (!model.has('teamsIds')) {
+            if (this.teamsFieldIsForbidden) {
+                return true;
+            }
 
-    Acl.extend = Bull.View.extend;
+            return null;
+        }
+
+        var teamIdList = model.getTeamIdList();
+
+        var inTeam = false;
+
+        userTeamIdList.forEach(id => {
+            if (~teamIdList.indexOf(id)) {
+                inTeam = true;
+            }
+        });
+
+        return inTeam;
+    },
 
-    return Acl;
 });
+
+Class.extend = Bull.View.extend;
+
+export default Class;
diff --git a/client/src/action-handler.js b/client/src/action-handler.js
index 05339b7fa3..187a91944c 100644
--- a/client/src/action-handler.js
+++ b/client/src/action-handler.js
@@ -26,119 +26,117 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('action-handler', [], function () {
+/** @module action-handler */
+
+/**
+ * An action handler. To be extended by specific action handlers.
+ *
+ * @constructor
+ * @param {module:view} view A view.
+ * @memberOf module:action-handler
+ */
+const ActionHandler = function (view) {
+    /**
+     * @memberof ActionHandler#
+     * @protected
+     */
+    this.view = view;
+};
+
+_.extend(ActionHandler.prototype, /** @lends ActionHandler# */{
 
     /**
-     * An action handler. To be extended by specific action handlers.
-     *
-     * @class
-     * @name Class
-     * @param {module:view.Class} view A view.
-     * @memberOf module:action-handler
+     * @deprecated Use `this.view`.
      */
-    let ActionHandler = function (view) {
-        /**
-         * @type {module:view.Class}
-         * @protected
-         */
-        this.view = view;
-    };
+    getConfig: function () {
+        return this.view.getConfig();
+    },
 
-    _.extend(ActionHandler.prototype, /** @lends {module:action-handler.Class#} */ {
+    /**
+     * @deprecated Use `this.view`.
+     */
+    getMetadata: function () {
+        return this.view.getMetadata();
+    },
 
-        /**
-         * @deprecated Use `this.view`.
-         */
-        getConfig: function () {
-            return this.view.getConfig();
-        },
+    /**
+     * @deprecated Use `this.view`.
+     */
+    getAcl: function () {
+        return this.view.getAcl();
+    },
 
-        /**
-         * @deprecated Use `this.view`.
-         */
-        getMetadata: function () {
-            return this.view.getMetadata();
-        },
+    /**
+     * @deprecated Use `this.view`.
+     */
+    getUser: function () {
+        return this.view.getUser();
+    },
 
-        /**
-         * @deprecated Use `this.view`.
-         */
-        getAcl: function () {
-            return this.view.getAcl();
-        },
+    /**
+     * @deprecated Use `this.view`.
+     */
+    getRouter: function () {
+        return this.view.getRouter();
+    },
 
-        /**
-         * @deprecated Use `this.view`.
-         */
-        getUser: function () {
-            return this.view.getUser();
-        },
+    /**
+     * @deprecated Use `this.view`.
+     */
+    getHelper: function () {
+        return this.view.getHelper();
+    },
 
-        /**
-         * @deprecated Use `this.view`.
-         */
-        getRouter: function () {
-            return this.view.getRouter();
-        },
+    /**
+     * @deprecated Use `this.view`.
+     */
+    getLanguage: function () {
+        return this.view.getLanguage();
+    },
 
-        /**
-         * @deprecated Use `this.view`.
-         */
-        getHelper: function () {
-            return this.view.getHelper();
-        },
+    /**
+     * @deprecated Use `this.view`.
+     */
+    getModelFactory: function () {
+        return this.view.getModelFactory();
+    },
 
-        /**
-         * @deprecated Use `this.view`.
-         */
-        getLanguage: function () {
-            return this.view.getLanguage();
-        },
+    /**
+     * @deprecated Use `this.view`.
+     */
+    getCollectionFactory: function () {
+        return this.view.getCollectionFactory();
+    },
 
-        /**
-         * @deprecated Use `this.view`.
-         */
-        getModelFactory: function () {
-            return this.view.getModelFactory();
-        },
+    /**
+     * @deprecated Use `Espo.Ajax`.
+     */
+    ajaxPostRequest: function () {
+        return Espo.Ajax.postRequest.apply(this.view, arguments);
+    },
 
-        /**
-         * @deprecated Use `this.view`.
-         */
-        getCollectionFactory: function () {
-            return this.view.getCollectionFactory();
-        },
+    /**
+     * @deprecated Use `Espo.Ajax`.
+     */
+    ajaxPutRequest: function () {
+        return Espo.Ajax.putRequest.apply(this.view, arguments);
+    },
 
-        /**
-         * @deprecated Use `Espo.Ajax`.
-         */
-        ajaxPostRequest: function () {
-            return Espo.Ajax.postRequest.apply(this.view, arguments);
-        },
+    /**
+     * @deprecated Use `Espo.Ajax`.
+     */
+    ajaxGetRequest: function () {
+        return Espo.Ajax.getRequest.apply(this.view, arguments);
+    },
 
-        /**
-         * @deprecated Use `Espo.Ajax`.
-         */
-        ajaxPutRequest: function () {
-            return Espo.Ajax.putRequest.apply(this.view, arguments);
-        },
-
-        /**
-         * @deprecated Use `Espo.Ajax`.
-         */
-        ajaxGetRequest: function () {
-            return Espo.Ajax.getRequest.apply(this.view, arguments);
-        },
-
-        /**
-         * @deprecated Use `this.view`.
-         */
-        confirm: function () {
-            return this.view.confirm.apply(this.view, arguments);
-        },
-    });
-
-    ActionHandler.extend = Bull.View.extend;
-
-    return ActionHandler;
+    /**
+     * @deprecated Use `this.view`.
+     */
+    confirm: function () {
+        return this.view.confirm.apply(this.view, arguments);
+    },
 });
+
+ActionHandler.extend = Bull.View.extend;
+
+export default ActionHandler;
diff --git a/client/src/ajax.js b/client/src/ajax.js
index 863c9d1799..9e61d2d378 100644
--- a/client/src/ajax.js
+++ b/client/src/ajax.js
@@ -26,190 +26,186 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
+/** @module ajax */
+
 /**
- * @module ajax
+ * Ajax request functions.
  */
-define('ajax', [], function () {
+const Ajax = Espo.Ajax = {
 
     /**
-     * Ajax request functions.
+     * Options.
+     *
+     * @typedef {Object} Espo.Ajax~Options
+     *
+     * @property {Number} [timeout] A timeout.
+     * @property {Object.<string,string>} [headers] A request headers.
+     * @property {'xml'|'json'|'text'} [dataType] A data type.
+     * @property {boolean} [local] If true, the API URL won't be prepended.
+     * @property {string} [contentType] A content type.
+     * @property {boolean} [fullResponse] To resolve with `module:ajax.XhrWrapper`.
      */
-    let Ajax = Espo.Ajax = {
 
-        /**
-         * Options.
-         *
-         * @typedef {Object} Espo.Ajax~Options
-         *
-         * @property {Number} [timeout] A timeout.
-         * @property {Object.<string,string>} [headers] A request headers.
-         * @property {'xml'|'json'|'text'} [dataType] A data type.
-         * @property {boolean} [local] If true, the API URL won't be prepended.
-         * @property {string} [contentType] A content type.
-         * @property {boolean} [fullResponse] To resolve with `module:ajax.XhrWrapper`.
-         */
+    /**
+     * Request.
+     *
+     * @param {string} url An URL.
+     * @param {string} type A method.
+     * @param {any} [data] Data.
+     * @param {Espo.Ajax~Options} [options] Options.
+     * @returns {Promise<any>}
+     */
+    request: function (url, type, data, options) {
+        options = options || {};
 
-        /**
-         * Request.
-         *
-         * @param {string} url An URL.
-         * @param {string} type A method.
-         * @param {any} [data] Data.
-         * @param {Espo.Ajax~Options} [options] Options.
-         * @returns {Promise<any>}
-         */
-        request: function (url, type, data, options) {
-            options = options || {};
+        options.type = type;
+        options.url = url;
 
-            options.type = type;
-            options.url = url;
-
-            if (data) {
-                options.data = data;
-            }
-
-            return new AjaxPromise((resolve, reject) => {
-                $.ajax(options)
-                    .then((response, status, xhr) => {
-                        let obj = options.fullResponse ?
-                            new XhrWrapper(xhr) :
-                            response;
-
-                        resolve(obj);
-                    })
-                    .fail(xhr => {
-                        reject(xhr);
-                    });
-            });
-        },
-
-        /**
-         * POST request.
-         *
-         * @param {string} url An URL.
-         * @param {any} [data] Data.
-         * @param {Espo.Ajax~Options} [options] Options.
-         * @returns {Promise<any>}
-         */
-        postRequest: function (url, data, options) {
-            if (data) {
-                data = JSON.stringify(data);
-            }
-
-            return Ajax.request(url, 'POST', data, options);
-        },
-
-        /**
-         * PATCH request.
-         *
-         * @param {string} url An URL.
-         * @param {any} [data] Data.
-         * @param {Espo.Ajax~Options} [options] Options.
-         * @returns {Promise<any>}
-         */
-        patchRequest: function (url, data, options) {
-            if (data) {
-                data = JSON.stringify(data);
-            }
-
-            return Ajax.request(url, 'PATCH', data, options);
-        },
-
-        /**
-         * PUT request.
-         *
-         * @param {string} url An URL.
-         * @param {any} [data] Data.
-         * @param {Espo.Ajax~Options} [options] Options.
-         * @returns {Promise<any>}
-         */
-        putRequest: function (url, data, options) {
-            if (data) {
-                data = JSON.stringify(data);
-            }
-
-            return Ajax.request(url, 'PUT', data, options);
-        },
-
-        /**
-         * DELETE request.
-         *
-         * @param {string} url An URL.
-         * @param {any} [data] Data.
-         * @param {Espo.Ajax~Options} [options] Options.
-         * @returns {Promise<any>}
-         */
-        deleteRequest: function (url, data, options) {
-            if (data) {
-                data = JSON.stringify(data);
-            }
-
-            return Ajax.request(url, 'DELETE', data, options);
-        },
-
-        /**
-         * GET request.
-         *
-         * @param {string} url An URL.
-         * @param {any} [data] Data.
-         * @param {Espo.Ajax~Options} [options] Options.
-         * @returns {Promise<any>}
-         */
-        getRequest: function (url, data, options) {
-            return Ajax.request(url, 'GET', data, options);
-        },
-    };
-
-    // For bc.
-    class AjaxPromise extends Promise {
-        fail(...args) {
-            return this.catch(args[0]);
+        if (data) {
+            options.data = data;
         }
-        done(...args) {
-            return this.then(args[0]);
+
+        return new AjaxPromise((resolve, reject) => {
+            $.ajax(options)
+                .then((response, status, xhr) => {
+                    let obj = options.fullResponse ?
+                        new XhrWrapper(xhr) :
+                        response;
+
+                    resolve(obj);
+                })
+                .fail(xhr => {
+                    reject(xhr);
+                });
+        });
+    },
+
+    /**
+     * POST request.
+     *
+     * @param {string} url An URL.
+     * @param {any} [data] Data.
+     * @param {Espo.Ajax~Options} [options] Options.
+     * @returns {Promise<any>}
+     */
+    postRequest: function (url, data, options) {
+        if (data) {
+            data = JSON.stringify(data);
         }
+
+        return Ajax.request(url, 'POST', data, options);
+    },
+
+    /**
+     * PATCH request.
+     *
+     * @param {string} url An URL.
+     * @param {any} [data] Data.
+     * @param {Espo.Ajax~Options} [options] Options.
+     * @returns {Promise<any>}
+     */
+    patchRequest: function (url, data, options) {
+        if (data) {
+            data = JSON.stringify(data);
+        }
+
+        return Ajax.request(url, 'PATCH', data, options);
+    },
+
+    /**
+     * PUT request.
+     *
+     * @param {string} url An URL.
+     * @param {any} [data] Data.
+     * @param {Espo.Ajax~Options} [options] Options.
+     * @returns {Promise<any>}
+     */
+    putRequest: function (url, data, options) {
+        if (data) {
+            data = JSON.stringify(data);
+        }
+
+        return Ajax.request(url, 'PUT', data, options);
+    },
+
+    /**
+     * DELETE request.
+     *
+     * @param {string} url An URL.
+     * @param {any} [data] Data.
+     * @param {Espo.Ajax~Options} [options] Options.
+     * @returns {Promise<any>}
+     */
+    deleteRequest: function (url, data, options) {
+        if (data) {
+            data = JSON.stringify(data);
+        }
+
+        return Ajax.request(url, 'DELETE', data, options);
+    },
+
+    /**
+     * GET request.
+     *
+     * @param {string} url An URL.
+     * @param {any} [data] Data.
+     * @param {Espo.Ajax~Options} [options] Options.
+     * @returns {Promise<any>}
+     */
+    getRequest: function (url, data, options) {
+        return Ajax.request(url, 'GET', data, options);
+    },
+};
+
+// For bc.
+class AjaxPromise extends Promise {
+    fail(...args) {
+        return this.catch(args[0]);
+    }
+    done(...args) {
+        return this.then(args[0]);
+    }
+}
+
+/**
+ * @name module:ajax.XhrWrapper
+ */
+class XhrWrapper {
+    /**
+     * @param {JQueryXHR} xhr
+     */
+    constructor(xhr) {
+        this.xhr = xhr;
     }
 
     /**
-     * @name module:ajax.XhrWrapper
+     * @param {string} name
+     * @return {string}
      */
-    class XhrWrapper {
-        /**
-         * @param {JQueryXHR} xhr
-         */
-        constructor(xhr) {
-            this.xhr = xhr;
-        }
-
-        /**
-         * @param {string} name
-         * @return {string}
-         */
-        getResponseHeader(name) {
-            return this.xhr.getResponseHeader(name);
-        }
-
-        /**
-         * @return {Number}
-         */
-        getStatus() {
-            return this.xhr.status;
-        }
-
-        /**
-         * @return {*}
-         */
-        getResponseParsedBody() {
-            return this.xhr.responseJSON;
-        }
-
-        /**
-         * @return {string}
-         */
-        getResponseBody() {
-            return this.xhr.responseText;
-        }
+    getResponseHeader(name) {
+        return this.xhr.getResponseHeader(name);
     }
 
-    return Ajax;
-});
+    /**
+     * @return {Number}
+     */
+    getStatus() {
+        return this.xhr.status;
+    }
+
+    /**
+     * @return {*}
+     */
+    getResponseParsedBody() {
+        return this.xhr.responseJSON;
+    }
+
+    /**
+     * @return {string}
+     */
+    getResponseBody() {
+        return this.xhr.responseText;
+    }
+}
+
+export default Ajax;
diff --git a/client/src/app-portal.js b/client/src/app-portal.js
index 482a4cca13..79ab05a54d 100644
--- a/client/src/app-portal.js
+++ b/client/src/app-portal.js
@@ -26,35 +26,24 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('app-portal', ['app', 'acl-portal-manager'],
-function (
-    Dep,
-    /** typeof module:acl-portal-manager.Class */ AclPortalManager
-) {
-    /**
-     * A portal application class.
-     * @class
-     * @name Class
-     * @extends module:app.Class
-     * @memberOf module:app-portal
-     */
-    return Dep.extend(/** @lends module:app-portal.Class# */{
+/** @module app-portal */
 
-        /**
-         * @inheritDoc
-         */
-        aclName: 'aclPortal',
+import Dep from 'app';
+import AclPortalManager from 'acl-portal-manager';
 
-        /**
-         * @inheritDoc
-         */
-        masterView: 'views/site-portal/master',
+/**
+ * A portal application class.
+ */
+export default class extends Dep {
 
-        /**
-         * @inheritDoc
-         */
-        createAclManager: function () {
-            return new AclPortalManager(this.user, null, this.settings.get('aclAllowDeleteCreated'));
-        },
-    });
-});
+    aclName = 'aclPortal'
+    masterView = 'views/site-portal/master'
+
+    createAclManager() {
+        return new AclPortalManager(
+            this.user,
+            null,
+            this.settings.get('aclAllowDeleteCreated')
+        );
+    }
+}
diff --git a/client/src/app.js b/client/src/app.js
index 331d35e832..c68abd3a33 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -26,84 +26,52 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define(
-    'app',
-[
-    'lib!espo',
-    'lib!jquery',
-    'lib!backbone',
-    'lib!underscore',
-    'lib!bullbone',
-    'ui',
-    'utils',
-    'acl-manager',
-    'cache',
-    'storage',
-    'models/settings',
-    'language',
-    'metadata',
-    'field-manager',
-    'models/user',
-    'models/preferences',
-    'model-factory',
-    'collection-factory',
-    'controllers/base',
-    'router',
-    'date-time',
-    'layout-manager',
-    'theme-manager',
-    'session-storage',
-    'view-helper',
-    'web-socket-manager',
-    'ajax',
-    'number',
-    'page-title',
-    'broadcast-channel',
-    'exceptions'
-],
-function (
-    /** Espo */Espo,
-    /** $ */$,
-    /** Backbone */Backbone,
-    /** _ */_,
-    /** Bull */Bull,
-    Ui,
-    Utils,
-    /** typeof module:acl-manager.Class */AclManager,
-    /** typeof module:cache.Class */Cache,
-    /** typeof module:storage.Class */Storage,
-    /** typeof module:models/settings.Class */Settings,
-    /** typeof module:language.Class */Language,
-    /** typeof module:metadata.Class */Metadata,
-    /** typeof module:field-manager.Class */FieldManager,
-    /** typeof module:models/user.Class */User,
-    /** typeof module:models/preferences.Class */Preferences,
-    /** typeof module:model-factory.Class */ModelFactory,
-    /** typeof module:collection-factory.Class */CollectionFactory,
-    /** typeof module:controllers/base.Class */BaseController,
-    /** typeof module:router.Class */Router,
-    /** typeof module:date-time.Class */DateTime,
-    /** typeof module:layout-manager.Class */LayoutManager,
-    /** typeof module:theme-manager.Class */ThemeManager,
-    /** typeof module:session-storage.Class */SessionStorage,
-    /** typeof module:view-helper.Class */ViewHelper,
-    /** typeof module:web-socket-manager.Class */WebSocketManager,
-    Ajax,
-    /** typeof module:number.Class */NumberUtil,
-    /** typeof module:page-title.Class */PageTitle,
-    /** typeof module:broadcast-channel.Class */BroadcastChannel,
-    Exceptions
-) {
+/** @module app */
+
+import Espo from 'lib!espo';
+import $ from 'lib!jquery';
+import Backbone from 'lib!backbone';
+import _ from 'lib!underscore';
+import Bull from 'lib!bullbone';
+import Base64 from 'lib!base64';
+import Ui from 'ui';
+import Utils from 'utils';
+import AclManager from 'acl-manager';
+import Cache from 'cache';
+import Storage from 'storage';
+import Settings from 'models/settings';
+import Language from 'language';
+import Metadata from 'metadata';
+import FieldManager from 'field-manager';
+import User from 'models/user';
+import Preferences from 'models/preferences';
+import ModelFactory from 'model-factory';
+import CollectionFactory from 'collection-factory';
+import BaseController from 'controllers/base';
+import Router from 'router';
+import DateTime from 'date-time';
+import LayoutManager from 'layout-manager';
+import ThemeManager from 'theme-manager';
+import SessionStorage from 'session-storage';
+import ViewHelper from 'view-helper';
+import WebSocketManager from 'web-socket-manager';
+import Ajax from 'ajax';
+import NumberUtil from 'number';
+import PageTitle from 'page-title';
+import BroadcastChannel from 'broadcast-channel';
+
+/**
+ * A main application class.
+ *
+ * @mixes Backbone.Events
+ */
+class App  {
+
     /**
-     * A main application class.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:app
-     * @param {module:app.Class~Options} options Options.
-     * @param {module:app.Class~callback} callback A callback.
+     * @param {module:app~Options} options Options.
+     * @param {module:app~callback} callback A callback.
      */
-    let App = function (options, callback) {
+    constructor(options, callback) {
         options = options || {};
 
         /**
@@ -151,298 +119,280 @@ function (
             .then(() => this.init(options, callback));
 
         this.initDomEventListeners();
-    };
+    }
 
     /**
-     * @callback module:app.Class~callback
-     *
-     * @param {module:app.Class} app A created application instance.
+     * @private
+     * @type {boolean}
      */
+    useCache = false
 
     /**
-     * Application options.
-     *
-     * @typedef {Object} module:app.Class~Options
-     *
-     * @property {string} [id] An application ID.
-     * @property {string} [basePath] A base path.
-     * @property {boolean} [useCache] Use cache.
-     * @property {string} [apiUrl] An API URL.
-     * @property {Number} [ajaxTimeout] A default ajax request timeout.
-     * @property {string} [internalModuleList] A list of internal modules.
-     *   Internal modules located in the `client/modules` directory.
-     * @property {Number|null} [cacheTimestamp] A cache timestamp.
+     * @protected
+     * @type {module:models/user}
      */
+    user = null
 
-    _.extend(App.prototype, /** @lends module:app.Class# */{
+    /**
+     * @private
+     * @type {module:models/preferences}
+     */
+    preferences = null
 
-        /**
-         * @private
-         * @type {boolean}
-         */
-        useCache: false,
+    /**
+     * @protected
+     * @type {module:models/settings}
+     */
+    settings = null
 
-        /**
-         * @private
-         * @type {module:models/user.Class}
-         */
-        user: null,
+    /**
+     * @private
+     * @type {module:metadata}
+     */
+    metadata = null
 
-        /**
-         * @private
-         * @type {module:models/preferences.Class}
-         */
-        preferences: null,
+    /**
+     * @private
+     * @type {module:language}
+     */
+    language = null
 
-        /**
-         * @private
-         * @type {module:models/settings.Class}
-         */
-        settings: null,
+    /**
+     * @private
+     * @type {module:field-manager}
+     */
+    fieldManager = null
 
-        /**
-         * @private
-         * @type {module:metadata.Class}
-         */
-        metadata: null,
+    /**
+     * @private
+     * @type {module:cache|null}
+     */
+    cache = null
 
-        /**
-         * @private
-         * @type {module:language.Class}
-         */
-        language: null,
+    /**
+     * @private
+     * @type {module:storage|null}
+     */
+    storage = null
 
-        /**
-         * @private
-         * @type {module:field-manager.Class}
-         */
-        fieldManager: null,
+    /**
+     * @private
+     */
+    loader = null
 
-        /**
-         * @private
-         * @type {module:cache.Class|null}
-         */
-        cache: null,
+    /**
+     * An API URL.
+     *
+     * @private
+     */
+    apiUrl = 'api/v1'
 
-        /**
-         * @private
-         * @type {module:storage.Class|null}
-         */
-        storage: null,
+    /**
+     * An auth credentials string.
+     *
+     * @private
+     * @type {?string}
+     */
+    auth = null
 
-        /**
-         * @private
-         */
-        loader: null,
+    /**
+     * Another user to login as.
+     *
+     * @private
+     * @type {?string}
+     */
+    anotherUser = null
 
-        /**
-         * An API URL.
-         *
-         * @private
-         */
-        apiUrl: 'api/v1',
+    /**
+     * A base controller.
+     *
+     * @private
+     * @type {module:controllers/base}
+     */
+    baseController = null
 
-        /**
-         * An auth credentials string.
-         *
-         * @private
-         * @type {?string}
-         */
-        auth: null,
+    /**
+     * @private
+     */
+    controllers = null
 
-        /**
-         * Another user to login as.
-         *
-         * @private
-         * @type {?string}
-         */
-        anotherUser: null,
+    /**
+     * @private
+     * @type {module:router}
+     */
+    router = null
 
-        /**
-         * A base controller.
-         *
-         * @private
-         * @type {module:controllers/base.Class}
-         */
-        baseController: null,
+    /**
+     * @private
+     * @type {module:model-factory}
+     */
+    modelFactory = null
 
-        /**
-         * @private
-         */
-        controllers: null,
+    /**
+     * @private
+     * @type {module:collection-factory}
+     */
+    collectionFactory = null
 
-        /**
-         * @private
-         * @type {module:router.Class}
-         */
-        router: null,
+    /**
+     * A view factory.
+     *
+     * @private
+     * @type {Bull.Factory}
+     */
+    viewFactory = null
 
-        /**
-         * @private
-         * @type {module:model-factory.Class}
-         */
-        modelFactory: null,
+    /**
+     * @type {Function}
+     * @private
+     */
+    viewLoader = null
 
-        /**
-         * @private
-         * @type {module:collection-factory.Class}
-         */
-        collectionFactory: null,
+    /**
+     * @private
+     * @type {module:view-helper}
+     */
+    viewHelper = null
 
-        /**
-         * A view factory.
-         *
-         * @private
-         * @type {Bull.Factory}
-         */
-        viewFactory: null,
+    /**
+     * A body view.
+     *
+     * @protected
+     * @type {string}
+     */
+    masterView = 'views/site/master'
 
-        /**
-         * @type {Function}
-         * @private
-         */
-        viewLoader: null,
+    /**
+     * @private
+     * @type {Cache|null}
+     */
+    responseCache = null
 
-        /**
-         * @private
-         * @type {module:view-helper.Class}
-         */
-        viewHelper: null,
+    /**
+     * @private
+     * @type {module:broadcast-channel|null}
+     */
+    broadcastChannel = null
 
-        /**
-         * A body view.
-         *
-         * @protected
-         * @type {string}
-         */
-        masterView: 'views/site/master',
+    /**
+     * @private
+     * @type {module:date-time|null}
+     */
+    dateTime = null
 
-        /**
-         * @private
-         * @type {Cache|null}
-         */
-        responseCache: null,
+    /**
+     * @private
+     * @type {NumberUtil|null}
+     */
+    numberUtil = null
 
-        /**
-         * @private
-         * @type {module:broadcast-channel.Class|null}
-         */
-        broadcastChannel: null,
+    /**
+     * @private
+     * @type {module:web-socket-manager|null}
+     */
+    webSocketManager = null
 
-        /**
-         * @private
-         * @type {module:date-time.Class|null}
-         */
-        dateTime: null,
+    /**
+     * @private
+     * @type {?int}
+     */
+    appTimestamp = null
 
-        /**
-         * @private
-         * @type {module:number.Class|null}
-         */
-        numberUtil: null,
+    /** @private */
+    started = false
 
-        /**
-         * @private
-         * @type {module:web-socket-manager.Class|null}
-         */
-        webSocketManager: null,
+    /** @private */
+    aclName = 'acl'
 
-        /**
-         * @private
-         * @type {?int}
-         */
-        appTimestamp: null,
+    /**
+     * @private
+     */
+    initCache(options) {
+        let cacheTimestamp = options.cacheTimestamp || null;
+        let storedCacheTimestamp = null;
 
-        /**
-         * @private
-         */
-        started: false,
+        if (this.useCache) {
+            this.cache = new Cache(cacheTimestamp);
 
-        /**
-         * @private
-         */
-        initCache: function (options) {
-            let cacheTimestamp = options.cacheTimestamp || null;
-            let storedCacheTimestamp = null;
+            storedCacheTimestamp = this.cache.getCacheTimestamp();
 
-            if (this.useCache) {
-                this.cache = new Cache(cacheTimestamp);
+            if (cacheTimestamp) {
+                this.cache.handleActuality(cacheTimestamp);
+            }
+            else {
+                this.cache.storeTimestamp();
+            }
+        }
 
-                storedCacheTimestamp = this.cache.getCacheTimestamp();
-
-                if (cacheTimestamp) {
-                    this.cache.handleActuality(cacheTimestamp);
-                }
-                else {
-                    this.cache.storeTimestamp();
-                }
+        let handleActuality = () => {
+            if (
+                !cacheTimestamp ||
+                !storedCacheTimestamp ||
+                cacheTimestamp !== storedCacheTimestamp
+            ) {
+                return caches.delete('espo');
             }
 
-            let handleActuality = () => {
-                if (
-                    !cacheTimestamp ||
-                    !storedCacheTimestamp ||
-                    cacheTimestamp !== storedCacheTimestamp
-                ) {
-                    return caches.delete('espo');
-                }
+            return new Promise(resolve => resolve());
+        };
 
-                return new Promise(resolve => resolve());
-            };
-
-            return new Promise(resolve => {
-                if (!this.useCache) {
-                    resolve();
-                }
-
-                if (!window.caches) {
-                    resolve();
-                }
-
-                handleActuality()
-                    .then(() => caches.open('espo'))
-                    .then(responseCache => {
-                        this.responseCache = responseCache;
-
-                        resolve();
-                    })
-                    .catch(() => {
-                        console.error("Could not open `espo` cache.");
-                        resolve();
-                    });
-            });
-        },
-
-        /**
-         * @private
-         */
-        init: function (options, callback) {
-            /** @type {Object.<string, *>} */
-            this.appParams = {};
-            this.controllers = {};
-
-            this.loader = Espo.loader;
-
-            this.loader.setCache(this.cache);
-            this.loader.setResponseCache(this.responseCache);
-
-            if (this.useCache && !this.loader.getCacheTimestamp() && options.cacheTimestamp) {
-                this.loader.setCacheTimestamp(options.cacheTimestamp);
+        return new Promise(resolve => {
+            if (!this.useCache) {
+                resolve();
             }
 
-            this.storage = new Storage();
-            this.sessionStorage = new SessionStorage();
+            if (!window.caches) {
+                resolve();
+            }
 
-            this.setupAjax();
+            handleActuality()
+                .then(() => caches.open('espo'))
+                .then(responseCache => {
+                    this.responseCache = responseCache;
 
-            this.settings = new Settings(null);
-            this.language = new Language(this.cache);
-            this.metadata = new Metadata(this.cache);
-            this.fieldManager = new FieldManager();
+                    resolve();
+                })
+                .catch(() => {
+                    console.error("Could not open `espo` cache.");
+                    resolve();
+                });
+        });
+    }
 
-            this.initBroadcastChannel();
+    /**
+     * @private
+     */
+    init(options, callback) {
+        /** @type {Object.<string, *>} */
+        this.appParams = {};
+        this.controllers = {};
 
-            Promise
+        /**
+         * @type {Espo.loader}
+         * @private
+         */
+        this.loader = Espo.loader;
+
+        this.loader.setCache(this.cache);
+        this.loader.setResponseCache(this.responseCache);
+
+        if (this.useCache && !this.loader.getCacheTimestamp() && options.cacheTimestamp) {
+            this.loader.setCacheTimestamp(options.cacheTimestamp);
+        }
+
+        this.storage = new Storage();
+        this.sessionStorage = new SessionStorage();
+
+        this.setupAjax();
+
+        this.settings = new Settings(null);
+        this.language = new Language(this.cache);
+        this.metadata = new Metadata(this.cache);
+        this.fieldManager = new FieldManager();
+
+        this.initBroadcastChannel();
+
+        Promise
             .all([
                 this.settings.load(),
                 this.language.loadDefault()
@@ -455,13 +405,14 @@ function (
 
                 this.preferences.settings = this.settings;
 
+                /** @type {module:acl-manager} */
                 this.acl = this.createAclManager();
 
                 this.fieldManager.acl = this.acl;
 
                 this.themeManager = new ThemeManager(this.settings, this.preferences, this.metadata);
-                this.modelFactory = new ModelFactory(this.metadata, this.user);
-                this.collectionFactory = new CollectionFactory(this.modelFactory, this.settings);
+                this.modelFactory = new ModelFactory(this.metadata);
+                this.collectionFactory = new CollectionFactory(this.modelFactory, this.settings, this.metadata);
 
                 this.appTimestamp = this.settings.get('appTimestamp') || null;
 
@@ -475,595 +426,593 @@ function (
 
                 callback.call(this, this);
             });
-        },
+    }
 
-        /**
-         * Start the application.
-         */
-        start: function () {
-            this.initAuth();
+    /**
+     * Start the application.
+     */
+    start() {
+        this.initAuth();
 
-            this.started = true;
+        this.started = true;
 
-            if (!this.auth) {
-                this.baseController.login();
+        if (!this.auth) {
+            this.baseController.login();
 
-                return;
+            return;
+        }
+
+        this.initUserData(null, () => this.onAuth.call(this));
+    }
+
+    /**
+     * @private
+     * @param {boolean} [afterLogin]
+     */
+    onAuth(afterLogin) {
+        this.metadata.load().then(() => {
+            this.fieldManager.defs = this.metadata.get('fields');
+            this.fieldManager.metadata = this.metadata;
+
+            this.settings.defs = this.metadata.get('entityDefs.Settings') || {};
+            this.user.defs = this.metadata.get('entityDefs.User');
+            this.preferences.defs = this.metadata.get('entityDefs.Preferences');
+            this.viewHelper.layoutManager.userId = this.user.id;
+
+            if (this.themeManager.isUserTheme()) {
+                this.loadStylesheet();
             }
 
-            this.initUserData(null, () => this.onAuth.call(this));
-        },
+            if (this.anotherUser) {
+                this.viewHelper.webSocketManager = null;
+                this.webSocketManager = null;
+            }
 
-        /**
-         * @private
-         * @param {boolean} [afterLogin]
-         */
-        onAuth: function (afterLogin) {
-            this.metadata.load().then(() => {
-                this.fieldManager.defs = this.metadata.get('fields');
-                this.fieldManager.metadata = this.metadata;
+            if (this.webSocketManager) {
+                this.webSocketManager.connect(this.auth, this.user.id);
+            }
 
-                this.settings.defs = this.metadata.get('entityDefs.Settings') || {};
-                this.user.defs = this.metadata.get('entityDefs.User');
-                this.preferences.defs = this.metadata.get('entityDefs.Preferences');
-                this.viewHelper.layoutManager.userId = this.user.id;
+            let promiseList = [];
+            let aclImplementationClassMap = {};
 
-                if (this.themeManager.isUserTheme()) {
-                    this.loadStylesheet();
+            let clientDefs = this.metadata.get('clientDefs') || {};
+
+            Object.keys(clientDefs).forEach(scope => {
+                let o = clientDefs[scope];
+
+                let implClassName = (o || {})[this.aclName];
+
+                if (!implClassName) {
+                    return;
                 }
 
-                if (this.anotherUser) {
-                    this.viewHelper.webSocketManager = null;
-                    this.webSocketManager = null;
-                }
+                promiseList.push(
+                    new Promise(resolve => {
+                        this.loader.require(implClassName, implClass => {
+                            aclImplementationClassMap[scope] = implClass;
 
-                if (this.webSocketManager) {
-                    this.webSocketManager.connect(this.auth, this.user.id);
-                }
+                            resolve();
+                        });
+                    })
+                );
+            });
 
-                let promiseList = [];
-                let aclImplementationClassMap = {};
+            if (!this.themeManager.isApplied() && this.themeManager.isUserTheme()) {
+                promiseList.push(
+                    // @todo Refactor.
+                    new Promise(resolve => {
+                        (function check (i) {
+                            i = i || 0;
 
-                let clientDefs = this.metadata.get('clientDefs') || {};
-
-                Object.keys(clientDefs).forEach(scope => {
-                    let o = clientDefs[scope];
-
-                    let implClassName = (o || {})[this.aclName || 'acl'];
-
-                    if (!implClassName) {
-                        return;
-                    }
-
-                    promiseList.push(
-                        new Promise(resolve => {
-                            this.loader.require(implClassName, implClass => {
-                                aclImplementationClassMap[scope] = implClass;
-
-                                resolve();
-                            });
-                        })
-                    );
-                });
-
-                if (!this.themeManager.isApplied() && this.themeManager.isUserTheme()) {
-                    promiseList.push(
-                        // @todo Refactor.
-                        new Promise(resolve => {
-                            (function check (i) {
-                                i = i || 0;
-
-                                if (!this.themeManager.isApplied()) {
-                                    if (i === 50) {
-                                        resolve();
-
-                                        return;
-                                    }
-
-                                    setTimeout(check.bind(this, i + 1), 10);
+                            if (!this.themeManager.isApplied()) {
+                                if (i === 50) {
+                                    resolve();
 
                                     return;
                                 }
 
-                                resolve();
-                            }).call(this);
-                        })
-                    );
-                }
+                                setTimeout(check.bind(this, i + 1), 10);
 
-                Promise
-                    .all(promiseList)
-                    .then(() => {
-                        this.acl.implementationClassMap = aclImplementationClassMap;
+                                return;
+                            }
 
-                        this.initRouter();
-                    });
+                            resolve();
+                        }).call(this);
+                    })
+                );
+            }
 
-                if (afterLogin) {
-                    this.broadcastChannel.postMessage('logged-in');
-                }
-            });
-        },
+            Promise
+                .all(promiseList)
+                .then(() => {
+                    this.acl.implementationClassMap = aclImplementationClassMap;
 
-        /**
-         * @private
-         */
-        initRouter: function () {
-            let routes = this.metadata.get(['app', 'clientRoutes']) || {};
-
-            this.router = new Router({routes: routes});
-
-            this.viewHelper.router = this.router;
-
-            this.baseController.setRouter(this.router);
-
-            this.router.confirmLeaveOutMessage = this.language.translate('confirmLeaveOutMessage', 'messages');
-            this.router.confirmLeaveOutConfirmText = this.language.translate('Yes');
-            this.router.confirmLeaveOutCancelText = this.language.translate('Cancel');
-
-            this.router.on('routed', params => this.doAction(params));
-
-            try {
-                Backbone.history.start({
-                    root: window.location.pathname
+                    this.initRouter();
                 });
+
+            if (afterLogin) {
+                this.broadcastChannel.postMessage('logged-in');
             }
-            catch (e) {
-                Backbone.history.loadUrl();
-            }
-        },
+        });
+    }
 
-        /**
-         * Do an action.
-         *
-         * @public
-         * @param {{
-         *   controller?: string,
-         *   action: string,
-         *   options?: Object.<string,*>,
-         *   controllerClassName?: string,
-         * }} params
-         */
-        doAction: function (params) {
-            this.trigger('action', params);
+    /**
+     * @private
+     */
+    initRouter() {
+        let routes = this.metadata.get(['app', 'clientRoutes']) || {};
 
-            this.baseController.trigger('action');
+        this.router = new Router({routes: routes});
 
-            let callback = controller => {
-                try {
-                    controller.doAction(params.action, params.options);
+        this.viewHelper.router = this.router;
 
-                    this.trigger('action:done');
-                }
-                catch (e) {
-                    console.error(e);
+        this.baseController.setRouter(this.router);
 
-                    switch (e.name) {
-                        case 'AccessDenied':
-                            this.baseController.error403();
+        this.router.confirmLeaveOutMessage = this.language.translate('confirmLeaveOutMessage', 'messages');
+        this.router.confirmLeaveOutConfirmText = this.language.translate('Yes');
+        this.router.confirmLeaveOutCancelText = this.language.translate('Cancel');
 
-                            break;
+        this.router.on('routed', params => this.doAction(params));
 
-                        case 'NotFound':
-                            this.baseController.error404();
+        try {
+            Backbone.history.start({
+                root: window.location.pathname
+            });
+        }
+        catch (e) {
+            Backbone.history.loadUrl();
+        }
+    }
 
-                            break;
+    /**
+     * Do an action.
+     *
+     * @public
+     * @param {{
+     *   controller?: string,
+     *   action: string,
+     *   options?: Object.<string,*>,
+     *   controllerClassName?: string,
+     * }} params
+     */
+    doAction(params) {
+        this.trigger('action', params);
 
-                        default:
-                            throw e;
-                    }
-                }
-            };
-
-            if (params.controllerClassName) {
-                this.createController(params.controllerClassName, null, callback);
-
-                return;
-            }
-
-            this.getController(params.controller, callback);
-        },
-
-        /**
-         * @private
-         */
-        initBaseController: function () {
-            this.baseController = new BaseController({}, this.getControllerInjection());
-
-            this.viewHelper.baseController = this.baseController;
-        },
-
-        /**
-         * @private
-         */
-        getControllerInjection: function () {
-            return {
-                viewFactory: this.viewFactory,
-                modelFactory: this.modelFactory,
-                collectionFactory: this.collectionFactory,
-                settings: this.settings,
-                user: this.user,
-                preferences: this.preferences,
-                acl: this.acl,
-                cache: this.cache,
-                router: this.router,
-                storage: this.storage,
-                metadata: this.metadata,
-                dateTime: this.dateTime,
-                broadcastChannel: this.broadcastChannel,
-                baseController: this.baseController,
-            };
-        },
-
-        /**
-         * @param {string} name
-         * @param {function(module:controller.Class): void} callback
-         * @private
-         */
-        getController: function (name, callback) {
-            if (!name) {
-                callback(this.baseController);
-
-                return;
-            }
-
-            if (name in this.controllers) {
-                callback(this.controllers[name]);
-
-                return;
-            }
+        this.baseController.trigger('action');
 
+        let callback = controller => {
             try {
-                let className = this.metadata.get(['clientDefs', name, 'controller']);
+                controller.doAction(params.action, params.options);
 
-                if (!className) {
-                    let module = this.metadata.get(['scopes', name, 'module']);
-
-                    className = Utils.composeClassName(module, name, 'controllers');
-                }
-
-                this.createController(className, name, callback);
+                this.trigger('action:done');
             }
             catch (e) {
-                this.baseController.error404();
-            }
-        },
+                console.error(e);
 
-        /**
-         * @private
-         * @return {module:controller.Class}
-         */
-        createController: function (className, name, callback) {
-            require(
-                className,
-                /** typeof module:controller.Class */
-                controllerClass => {
-                    let injections = this.getControllerInjection();
+                switch (e.name) {
+                    case 'AccessDenied':
+                        this.baseController.error403();
 
-                    let controller = new controllerClass(this.baseController.params, injections);
+                        break;
 
-                    controller.name = name;
-                    controller.masterView = this.masterView;
+                    case 'NotFound':
+                        this.baseController.error404();
 
-                    this.controllers[name] = controller
+                        break;
 
-                    callback(controller);
-                },
-                this,
-                () => this.baseController.error404()
-            );
-        },
-
-        /**
-         * @private
-         */
-        initUtils: function () {
-            this.dateTime = new DateTime();
-            this.modelFactory.dateTime = this.dateTime;
-            this.dateTime.setSettingsAndPreferences(this.settings, this.preferences);
-            this.numberUtil = new NumberUtil(this.settings, this.preferences);
-        },
-
-        /**
-         * Create an acl-manager.
-         *
-         * @protected
-         * @return {module:acl-manager.Class}
-         */
-        createAclManager: function () {
-            return new AclManager(this.user, null, this.settings.get('aclAllowDeleteCreated'));
-        },
-
-        /**
-         * @private
-         */
-        initView: function () {
-            let helper = this.viewHelper = new ViewHelper();
-
-            helper.layoutManager = new LayoutManager(this.cache, this.id);
-            helper.settings = this.settings;
-            helper.config = this.settings;
-            helper.user = this.user;
-            helper.preferences = this.preferences;
-            helper.acl = this.acl;
-            helper.modelFactory = this.modelFactory;
-            helper.collectionFactory = this.collectionFactory;
-            helper.storage = this.storage;
-            helper.sessionStorage = this.sessionStorage;
-            helper.dateTime = this.dateTime;
-            helper.language = this.language;
-            helper.metadata = this.metadata;
-            helper.fieldManager = this.fieldManager;
-            helper.cache = this.cache;
-            helper.themeManager = this.themeManager;
-            helper.webSocketManager = this.webSocketManager;
-            helper.numberUtil = this.numberUtil;
-            helper.pageTitle = new PageTitle(this.settings);
-            helper.basePath = this.basePath;
-            helper.appParams = this.appParams;
-            helper.broadcastChannel = this.broadcastChannel;
-
-            this.viewLoader = (viewName, callback) => {
-                require(Utils.composeViewClassName(viewName), callback);
-            };
-
-            let internalModuleMap = {};
-
-            let isModuleInternal = (module) => {
-                if (!(module in internalModuleMap)) {
-                    internalModuleMap[module] = this.internalModuleList.indexOf(module) !== -1;
+                    default:
+                        throw e;
                 }
+            }
+        };
 
-                return internalModuleMap[module];
-            };
+        if (params.controllerClassName) {
+            this.createController(params.controllerClassName, null, callback);
 
-            let getResourceInnerPath = (type, name) => {
-                let path = null;
+            return;
+        }
 
-                switch (type) {
-                    case 'template':
-                        if (~name.indexOf('.')) {
-                            console.warn(name + ': template name should use slashes for a directory separator.');
+        this.getController(params.controller, callback);
+    }
+
+    /**
+     * @private
+     */
+    initBaseController() {
+        this.baseController = new BaseController({}, this.getControllerInjection());
+
+        this.viewHelper.baseController = this.baseController;
+    }
+
+    /**
+     * @private
+     */
+    getControllerInjection() {
+        return {
+            viewFactory: this.viewFactory,
+            modelFactory: this.modelFactory,
+            collectionFactory: this.collectionFactory,
+            settings: this.settings,
+            user: this.user,
+            preferences: this.preferences,
+            acl: this.acl,
+            cache: this.cache,
+            router: this.router,
+            storage: this.storage,
+            metadata: this.metadata,
+            dateTime: this.dateTime,
+            broadcastChannel: this.broadcastChannel,
+            baseController: this.baseController,
+        };
+    }
+
+    /**
+     * @param {string} name
+     * @param {function(module:controller): void} callback
+     * @private
+     */
+    getController(name, callback) {
+        if (!name) {
+            callback(this.baseController);
+
+            return;
+        }
+
+        if (name in this.controllers) {
+            callback(this.controllers[name]);
+
+            return;
+        }
+
+        try {
+            let className = this.metadata.get(['clientDefs', name, 'controller']);
+
+            if (!className) {
+                let module = this.metadata.get(['scopes', name, 'module']);
+
+                className = Utils.composeClassName(module, name, 'controllers');
+            }
+
+            this.createController(className, name, callback);
+        }
+        catch (e) {
+            this.baseController.error404();
+        }
+    }
+
+    /**
+     * @private
+     * @return {module:controller}
+     */
+    createController(className, name, callback) {
+        Espo.loader.require(
+            className,
+            controllerClass => {
+                let injections = this.getControllerInjection();
+
+                let controller = new controllerClass(this.baseController.params, injections);
+
+                controller.name = name;
+                controller.masterView = this.masterView;
+
+                this.controllers[name] = controller
+
+                callback(controller);
+            },
+            () => this.baseController.error404()
+        );
+    }
+
+    /**
+     * @private
+     */
+    initUtils() {
+        this.dateTime = new DateTime();
+        this.modelFactory.dateTime = this.dateTime;
+        this.dateTime.setSettingsAndPreferences(this.settings, this.preferences);
+        this.numberUtil = new NumberUtil(this.settings, this.preferences);
+    }
+
+    /**
+     * Create an acl-manager.
+     *
+     * @protected
+     * @return {module:acl-manager}
+     */
+    createAclManager() {
+        return new AclManager(this.user, null, this.settings.get('aclAllowDeleteCreated'));
+    }
+
+    /**
+     * @private
+     */
+    initView() {
+        let helper = this.viewHelper = new ViewHelper();
+
+        helper.layoutManager = new LayoutManager(this.cache, this.id);
+        helper.settings = this.settings;
+        helper.config = this.settings;
+        helper.user = this.user;
+        helper.preferences = this.preferences;
+        helper.acl = this.acl;
+        helper.modelFactory = this.modelFactory;
+        helper.collectionFactory = this.collectionFactory;
+        helper.storage = this.storage;
+        helper.sessionStorage = this.sessionStorage;
+        helper.dateTime = this.dateTime;
+        helper.language = this.language;
+        helper.metadata = this.metadata;
+        helper.fieldManager = this.fieldManager;
+        helper.cache = this.cache;
+        helper.themeManager = this.themeManager;
+        helper.webSocketManager = this.webSocketManager;
+        helper.numberUtil = this.numberUtil;
+        helper.pageTitle = new PageTitle(this.settings);
+        helper.basePath = this.basePath;
+        helper.appParams = this.appParams;
+        helper.broadcastChannel = this.broadcastChannel;
+
+        this.viewLoader = (viewName, callback) => {
+            this.loader.require(Utils.composeViewClassName(viewName), callback);
+        };
+
+        let internalModuleMap = {};
+
+        let isModuleInternal = (module) => {
+            if (!(module in internalModuleMap)) {
+                internalModuleMap[module] = this.internalModuleList.indexOf(module) !== -1;
+            }
+
+            return internalModuleMap[module];
+        };
+
+        let getResourceInnerPath = (type, name) => {
+            let path = null;
+
+            switch (type) {
+                case 'template':
+                    if (~name.indexOf('.')) {
+                        console.warn(name + ': template name should use slashes for a directory separator.');
+                    }
+
+                    path = 'res/templates/' + name.split('.').join('/') + '.tpl';
+
+                    break;
+
+                case 'layoutTemplate':
+                    path = 'res/layout-types/' + name + '.tpl';
+
+                    break;
+
+                case 'layout':
+                    path = 'res/layouts/' + name + '.json';
+
+                    break;
+            }
+
+            return path;
+        };
+
+        let getResourcePath = (type, name) => {
+            if (name.indexOf(':') === -1) {
+                return 'client/' + getResourceInnerPath(type, name);
+            }
+
+            let arr = name.split(':');
+            let mod = arr[0];
+            let path = arr[1];
+
+            if (mod === 'custom') {
+                return 'client/custom/' + getResourceInnerPath(type, path);
+            }
+
+            if (isModuleInternal(mod)) {
+                return 'client/modules/' + mod + '/' + getResourceInnerPath(type, path);
+            }
+
+            return 'client/custom/modules/' + mod + '/' + getResourceInnerPath(type, path);
+        };
+
+        this.viewFactory = new Bull.Factory({
+            useCache: false,
+            defaultViewName: 'views/base',
+            helper: helper,
+            viewLoader: this.viewLoader,
+            resources: {
+                loaders: {
+                    template: (name, callback) => {
+                        let path = getResourcePath('template', name);
+
+                        this.loader.require('res!' + path, callback);
+                    },
+                    layoutTemplate: (name, callback) => {
+                        if (Espo.layoutTemplates && name in Espo.layoutTemplates) {
+                            callback(Espo.layoutTemplates[name]);
+
+                            return;
                         }
 
-                        path = 'res/templates/' + name.split('.').join('/') + '.tpl';
+                        let path = getResourcePath('layoutTemplate', name);
 
-                        break;
-
-                    case 'layoutTemplate':
-                        path = 'res/layout-types/' + name + '.tpl';
-
-                        break;
-
-                    case 'layout':
-                        path = 'res/layouts/' + name + '.json';
-
-                        break;
-                }
-
-                return path;
-            };
-
-            let getResourcePath = (type, name) => {
-                if (name.indexOf(':') === -1) {
-                    return 'client/' + getResourceInnerPath(type, name);
-                }
-
-                let arr = name.split(':');
-                let mod = arr[0];
-                let path = arr[1];
-
-                if (mod === 'custom') {
-                    return 'client/custom/' + getResourceInnerPath(type, path);
-                }
-
-                if (isModuleInternal(mod)) {
-                    return 'client/modules/' + mod + '/' + getResourceInnerPath(type, path);
-                }
-
-                return 'client/custom/modules/' + mod + '/' + getResourceInnerPath(type, path);
-            };
-
-            this.viewFactory = new Bull.Factory({
-                useCache: false,
-                defaultViewName: 'views/base',
-                helper: helper,
-                viewLoader: this.viewLoader,
-                resources: {
-                    loaders: {
-                        template: (name, callback) => {
-                            let path = getResourcePath('template', name);
-
-                            this.loader.require('res!' + path, callback);
-                        },
-                        layoutTemplate: (name, callback) => {
-                            if (Espo.layoutTemplates && name in Espo.layoutTemplates) {
-                                callback(Espo.layoutTemplates[name]);
-
-                                return;
-                            }
-
-                            let path = getResourcePath('layoutTemplate', name);
-
-                            this.loader.require('res!' + path, callback);
-                        },
+                        this.loader.require('res!' + path, callback);
                     },
                 },
-                preCompiledTemplates: Espo.preCompiledTemplates || {},
-            });
-        },
+            },
+            preCompiledTemplates: Espo.preCompiledTemplates || {},
+        });
+    }
 
-        /**
-         * @public
-         */
-        initAuth: function () {
-            this.auth = this.storage.get('user', 'auth') || null;
-            this.anotherUser = this.storage.get('user', 'anotherUser') || null;
+    /**
+     * @public
+     */
+    initAuth() {
+        this.auth = this.storage.get('user', 'auth') || null;
+        this.anotherUser = this.storage.get('user', 'anotherUser') || null;
 
-            this.baseController.on('login', data => {
-                let userId = data.user.id;
-                let userName = data.auth.userName;
-                let token = data.auth.token;
-                let anotherUser = data.auth.anotherUser || null;
+        this.baseController.on('login', data => {
+            let userId = data.user.id;
+            let userName = data.auth.userName;
+            let token = data.auth.token;
+            let anotherUser = data.auth.anotherUser || null;
 
-                this.auth = Base64.encode(userName  + ':' + token);
-                this.anotherUser = anotherUser;
+            this.auth = Base64.encode(userName  + ':' + token);
+            this.anotherUser = anotherUser;
 
-                let lastUserId = this.storage.get('user', 'lastUserId');
+            let lastUserId = this.storage.get('user', 'lastUserId');
 
-                if (lastUserId !== userId) {
-                    this.metadata.clearCache();
-                    this.language.clearCache();
-                }
-
-                this.storage.set('user', 'auth', this.auth);
-                this.storage.set('user', 'lastUserId', userId);
-                this.storage.set('user', 'anotherUser', this.anotherUser);
-
-                this.setCookieAuth(userName, token);
-
-                this.initUserData(data, () => this.onAuth(true));
-            });
-
-            this.baseController.on('logout', () => this.logout());
-        },
-
-        /**
-         * @private
-         */
-        logout: function (afterFail, silent) {
-            let logoutWait = false;
-
-            if (this.auth && !afterFail) {
-                let arr = Base64.decode(this.auth).split(':');
-
-                if (arr.length > 1) {
-                    logoutWait = this.appParams.logoutWait || false;
-
-                    Ajax.postRequest('App/destroyAuthToken', {token: arr[1]}, {fullResponse: true})
-                        .then(xhr => {
-                            let redirectUrl = xhr.getResponseHeader('X-Logout-Redirect-Url');
-
-                            if (redirectUrl) {
-                                setTimeout(() => window.location.href = redirectUrl, 50);
-
-                                return;
-                            }
-
-                            if (logoutWait) {
-                                this.doAction({action: 'login'});
-                            }
-                        });
-                }
+            if (lastUserId !== userId) {
+                this.metadata.clearCache();
+                this.language.clearCache();
             }
 
-            if (this.webSocketManager) {
-                this.webSocketManager.close();
+            this.storage.set('user', 'auth', this.auth);
+            this.storage.set('user', 'lastUserId', userId);
+            this.storage.set('user', 'anotherUser', this.anotherUser);
+
+            this.setCookieAuth(userName, token);
+
+            this.initUserData(data, () => this.onAuth(true));
+        });
+
+        this.baseController.on('logout', () => this.logout());
+    }
+
+    /**
+     * @private
+     */
+    logout(afterFail, silent) {
+        let logoutWait = false;
+
+        if (this.auth && !afterFail) {
+            let arr = Base64.decode(this.auth).split(':');
+
+            if (arr.length > 1) {
+                logoutWait = this.appParams.logoutWait || false;
+
+                Ajax.postRequest('App/destroyAuthToken', {token: arr[1]}, {fullResponse: true})
+                    .then(xhr => {
+                        let redirectUrl = xhr.getResponseHeader('X-Logout-Redirect-Url');
+
+                        if (redirectUrl) {
+                            setTimeout(() => window.location.href = redirectUrl, 50);
+
+                            return;
+                        }
+
+                        if (logoutWait) {
+                            this.doAction({action: 'login'});
+                        }
+                    });
             }
+        }
 
-            silent = silent || afterFail &&
-                this.auth &&
-                this.auth !== this.storage.get('user', 'auth');
+        if (this.webSocketManager) {
+            this.webSocketManager.close();
+        }
 
-            this.auth = null;
-            this.anotherUser = null;
+        silent = silent || afterFail &&
+            this.auth &&
+            this.auth !== this.storage.get('user', 'auth');
 
-            this.user.clear();
-            this.preferences.clear();
-            this.acl.clear();
+        this.auth = null;
+        this.anotherUser = null;
 
+        this.user.clear();
+        this.preferences.clear();
+        this.acl.clear();
+
+        if (!silent) {
+            this.storage.clear('user', 'auth');
+            this.storage.clear('user', 'anotherUser');
+        }
+
+        let action = logoutWait ? 'logoutWait' : 'login';
+
+        this.doAction({action: action});
+
+        if (!silent) {
+            this.unsetCookieAuth();
+        }
+
+        if (this.broadcastChannel.object) {
             if (!silent) {
-                this.storage.clear('user', 'auth');
-                this.storage.clear('user', 'anotherUser');
+                this.broadcastChannel.postMessage('logged-out');
             }
+        }
 
-            let action = logoutWait ? 'logoutWait' : 'login';
+        if (!silent) {
+            this.sendLogoutRequest();
+        }
 
-            this.doAction({action: action});
+        this.loadStylesheet();
+    }
 
-            if (!silent) {
-                this.unsetCookieAuth();
-            }
+    /**
+     * @private
+     */
+    sendLogoutRequest() {
+        let xhr = new XMLHttpRequest;
 
-            if (this.broadcastChannel.object) {
-                if (!silent) {
-                    this.broadcastChannel.postMessage('logged-out');
-                }
-            }
+        xhr.open('GET', this.basePath + this.apiUrl + '/');
+        xhr.setRequestHeader('Authorization', 'Basic ' + Base64.encode('**logout:logout'));
+        xhr.send('');
+        xhr.abort();
+    }
 
-            if (!silent) {
-                this.sendLogoutRequest();
-            }
+    /**
+     * @private
+     */
+    loadStylesheet() {
+        if (!this.metadata.get(['themes'])) {
+            return;
+        }
 
-            this.loadStylesheet();
-        },
+        let stylesheetPath = this.basePath + this.themeManager.getStylesheet();
 
-        /**
-         * @private
-         */
-        sendLogoutRequest: function () {
-            let xhr = new XMLHttpRequest;
+        $('#main-stylesheet').attr('href', stylesheetPath);
+    }
 
-            xhr.open('GET', this.basePath + this.apiUrl + '/');
-            xhr.setRequestHeader('Authorization', 'Basic ' + Base64.encode('**logout:logout'));
-            xhr.send('');
-            xhr.abort();
-        },
+    /**
+     * @private
+     */
+    setCookieAuth(username, token) {
+        let date = new Date();
+
+        date.setTime(date.getTime() + (1000 * 24*60*60*1000));
+
+        document.cookie = 'auth-token='+token+'; SameSite=Lax; expires='+date.toGMTString()+'; path=/';
+    }
+
+    /**
+     * @private
+     */
+    unsetCookieAuth() {
+        document.cookie = 'auth-token' + '=; SameSite=Lax; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
+    }
+
+    /**
+     * @private
+     */
+    initUserData(options, callback) {
+        options = options || {};
+
+        if (this.auth === null) {
+            return;
+        }
+
+        new Promise(resolve => {
+            if (options.user) {
+                resolve(options);
 
-        /**
-         * @private
-         */
-        loadStylesheet: function () {
-            if (!this.metadata.get(['themes'])) {
                 return;
             }
 
-            let stylesheetPath = this.basePath + this.themeManager.getStylesheet();
+            this.requestUserData(data => {
+                options = data;
 
-            $('#main-stylesheet').attr('href', stylesheetPath);
-        },
-
-        /**
-         * @private
-         */
-        setCookieAuth: function (username, token) {
-            let date = new Date();
-
-            date.setTime(date.getTime() + (1000 * 24*60*60*1000));
-
-            document.cookie = 'auth-token='+token+'; SameSite=Lax; expires='+date.toGMTString()+'; path=/';
-        },
-
-        /**
-         * @private
-         */
-        unsetCookieAuth: function () {
-            document.cookie = 'auth-token' + '=; SameSite=Lax; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
-        },
-
-        /**
-         * @private
-         */
-        initUserData: function (options, callback) {
-            options = options || {};
-
-            if (this.auth === null) {
-                return;
-            }
-
-            new Promise(resolve => {
-                if (options.user) {
-                    resolve(options);
-
-                    return;
-                }
-
-                this.requestUserData(data => {
-                    options = data;
-
-                    resolve(options);
-                });
-            })
+                resolve(options);
+            });
+        })
             .then(options => {
                 this.language.name = options.language;
 
@@ -1113,327 +1062,348 @@ function (
 
                 xhr.send('');
             });
-        },
+    }
 
-        /**
-         * @private
-         */
-        requestUserData: function (callback) {
-            Ajax
-                .getRequest('App/user', {}, {appStart: true})
-                .then(callback);
-        },
+    /**
+     * @private
+     */
+    requestUserData(callback) {
+        Ajax.getRequest('App/user', {}, {appStart: true})
+            .then(callback);
+    }
 
-        /**
-         * @private
-         */
-        setupAjax: function () {
-            $.ajaxSetup({
-                beforeSend: (xhr, options) => {
-                    if (!options.local && this.apiUrl) {
-                        options.url = Utils.trimSlash(this.apiUrl) + '/' + options.url;
-                    }
-
-                    if (!options.local && this.basePath !== '') {
-                        options.url = this.basePath + options.url;
-                    }
-
-                    if (this.auth !== null) {
-                        xhr.setRequestHeader('Authorization', 'Basic ' + this.auth);
-                        xhr.setRequestHeader('Espo-Authorization', this.auth);
-                        xhr.setRequestHeader('Espo-Authorization-By-Token', 'true');
-                    }
-
-                    if (this.anotherUser !== null) {
-                        xhr.setRequestHeader('X-Another-User', this.anotherUser);
-                    }
-                },
-                dataType: 'json',
-                timeout: this.ajaxTimeout,
-                contentType: 'application/json',
-            });
-
-            let appTimestampChangeProcessed = false;
-
-            $(document).ajaxSuccess((e, xhr, options) => {
-                let appTimestampHeader = xhr.getResponseHeader('X-App-Timestamp');
-
-                if (appTimestampHeader && !appTimestampChangeProcessed) {
-                    let appTimestamp = parseInt(appTimestampHeader);
-
-                    if (
-                        this.appTimestamp &&
-                        appTimestamp !== this.appTimestamp &&
-                        !options.bypassAppReload
-                    ) {
-                        appTimestampChangeProcessed = true;
-
-                        Ui
-                            .confirm(
-                                this.language.translate('confirmAppRefresh', 'messages'),
-                                {
-                                    confirmText: this.language.translate('Refresh'),
-                                    cancelText: this.language.translate('Cancel'),
-                                    backdrop: 'static',
-                                    confirmStyle: 'success',
-                                }
-                            )
-                            .then(() => {
-                                window.location.reload();
-
-                                if (this.broadcastChannel) {
-                                    this.broadcastChannel.postMessage('reload');
-                                }
-                            });
-                    }
+    /**
+     * @private
+     */
+    setupAjax() {
+        $.ajaxSetup({
+            beforeSend: (xhr, options) => {
+                if (!options.local && this.apiUrl) {
+                    options.url = Utils.trimSlash(this.apiUrl) + '/' + options.url;
                 }
-            });
 
-            $(document).ajaxError((e, xhr, options) => {
-                // To process after a promise-catch.
-                setTimeout(() => {
-                    if (xhr.errorIsHandled) {
-                        return;
-                    }
-
-                    switch (xhr.status) {
-                        case 0:
-                            if (xhr.statusText === 'timeout') {
-                                Ui.error(this.language.translate('Timeout'), true);
-                            }
-
-                            break;
-
-                        case 200:
-                            Ui.error(this.language.translate('Bad server response'));
-
-                            console.error('Bad server response: ' + xhr.responseText);
-
-                            break;
-
-                        case 401:
-                            if (options.login) {
-                                break;
-                            }
-
-                            if (this.auth && this.router && !this.router.confirmLeaveOut) {
-                                this.logout(true);
-
-                                break;
-                            }
-
-                            if (this.auth && this.router && this.router.confirmLeaveOut) {
-                                Ui.error(this.language.translate('loggedOutLeaveOut', 'messages'), true);
-
-                                this.router.trigger('logout');
-
-                                break;
-                            }
-
-                            if (this.auth) {
-                                let silent = !options.appStart;
-
-                                this.logout(true, silent);
-                            }
-
-                            console.error('Error 401: Unauthorized.');
-
-                            break;
-
-                        case 403:
-                            if (options.main) {
-                                this.baseController.error403();
-
-                                break;
-                            }
-
-                            this._processErrorAlert(xhr, 'Access denied');
-
-                            break;
-
-                        case 400:
-                            this._processErrorAlert(xhr, 'Bad request');
-
-                            break;
-
-                        case 404:
-                            if (options.main) {
-                                this.baseController.error404();
-
-                                break
-                            }
-
-                            this._processErrorAlert(xhr, 'Not found', true);
-
-                            break;
-
-                        default:
-                            this._processErrorAlert(xhr, null);
-                    }
-
-                    let statusReason = xhr.getResponseHeader('X-Status-Reason');
-
-                    if (statusReason) {
-                        console.error('Server side error ' + xhr.status + ': ' + statusReason);
-                    }
-                }, 0);
-            });
-        },
-
-        /**
-         * @private
-         */
-        _processErrorAlert: function (xhr, label, noDetail) {
-            let msg = this.language.translate('Error') + ' ' + xhr.status;
-
-            if (label) {
-                msg += ': ' + this.language.translate(label);
-            }
-
-            let obj = {
-                msg: msg,
-                closeButton: false,
-            };
-
-            let isMessageDone = false;
-
-            if (noDetail) {
-                isMessageDone = true;
-            }
-
-            if (!isMessageDone && xhr.responseText && xhr.responseText[0] === '{') {
-                let data = null;
-
-                try {
-                    data = JSON.parse(xhr.responseText);
+                if (!options.local && this.basePath !== '') {
+                    options.url = this.basePath + options.url;
                 }
-                catch (e) {}
 
-                if (data && data.messageTranslation && data.messageTranslation.label) {
-                    let msgDetail = this.language.translate(
-                        data.messageTranslation.label,
-                        'messages',
-                        data.messageTranslation.scope
-                    );
+                if (this.auth !== null) {
+                    xhr.setRequestHeader('Authorization', 'Basic ' + this.auth);
+                    xhr.setRequestHeader('Espo-Authorization', this.auth);
+                    xhr.setRequestHeader('Espo-Authorization-By-Token', 'true');
+                }
 
-                    let msgData = data.messageTranslation.data || {};
+                if (this.anotherUser !== null) {
+                    xhr.setRequestHeader('X-Another-User', this.anotherUser);
+                }
+            },
+            dataType: 'json',
+            timeout: this.ajaxTimeout,
+            contentType: 'application/json',
+        });
 
-                    for (let key in msgData) {
-                        msgDetail = msgDetail.replace('{' + key + '}', msgData[key]);
-                    }
+        let appTimestampChangeProcessed = false;
 
-                    obj.msg += '\n' + msgDetail;
-                    obj.closeButton = true;
+        $(document).ajaxSuccess((e, xhr, options) => {
+            let appTimestampHeader = xhr.getResponseHeader('X-App-Timestamp');
 
-                    isMessageDone = true;
+            if (appTimestampHeader && !appTimestampChangeProcessed) {
+                let appTimestamp = parseInt(appTimestampHeader);
+
+                if (
+                    this.appTimestamp &&
+                    appTimestamp !== this.appTimestamp &&
+                    !options.bypassAppReload
+                ) {
+                    appTimestampChangeProcessed = true;
+
+                    Ui
+                        .confirm(
+                            this.language.translate('confirmAppRefresh', 'messages'),
+                            {
+                                confirmText: this.language.translate('Refresh'),
+                                cancelText: this.language.translate('Cancel'),
+                                backdrop: 'static',
+                                confirmStyle: 'success',
+                            }
+                        )
+                        .then(() => {
+                            window.location.reload();
+
+                            if (this.broadcastChannel) {
+                                this.broadcastChannel.postMessage('reload');
+                            }
+                        });
                 }
             }
+        });
+
+        $(document).ajaxError((e, xhr, options) => {
+            // To process after a promise-catch.
+            setTimeout(() => {
+                if (xhr.errorIsHandled) {
+                    return;
+                }
+
+                switch (xhr.status) {
+                    case 0:
+                        if (xhr.statusText === 'timeout') {
+                            Ui.error(this.language.translate('Timeout'), true);
+                        }
+
+                        break;
+
+                    case 200:
+                        Ui.error(this.language.translate('Bad server response'));
+
+                        console.error('Bad server response: ' + xhr.responseText);
+
+                        break;
+
+                    case 401:
+                        if (options.login) {
+                            break;
+                        }
+
+                        if (this.auth && this.router && !this.router.confirmLeaveOut) {
+                            this.logout(true);
+
+                            break;
+                        }
+
+                        if (this.auth && this.router && this.router.confirmLeaveOut) {
+                            Ui.error(this.language.translate('loggedOutLeaveOut', 'messages'), true);
+
+                            this.router.trigger('logout');
+
+                            break;
+                        }
+
+                        if (this.auth) {
+                            let silent = !options.appStart;
+
+                            this.logout(true, silent);
+                        }
+
+                        console.error('Error 401: Unauthorized.');
+
+                        break;
+
+                    case 403:
+                        if (options.main) {
+                            this.baseController.error403();
+
+                            break;
+                        }
+
+                        this._processErrorAlert(xhr, 'Access denied');
+
+                        break;
+
+                    case 400:
+                        this._processErrorAlert(xhr, 'Bad request');
+
+                        break;
+
+                    case 404:
+                        if (options.main) {
+                            this.baseController.error404();
+
+                            break
+                        }
+
+                        this._processErrorAlert(xhr, 'Not found', true);
+
+                        break;
+
+                    default:
+                        this._processErrorAlert(xhr, null);
+                }
 
-            if (!isMessageDone) {
                 let statusReason = xhr.getResponseHeader('X-Status-Reason');
 
                 if (statusReason) {
-                    obj.msg += '\n' + statusReason;
-                    obj.closeButton = true;
-
-                    isMessageDone = true;
+                    console.error('Server side error ' + xhr.status + ': ' + statusReason);
                 }
+            }, 0);
+        });
+    }
+
+    /**
+     * @private
+     */
+    _processErrorAlert(xhr, label, noDetail) {
+        let msg = this.language.translate('Error') + ' ' + xhr.status;
+
+        if (label) {
+            msg += ': ' + this.language.translate(label);
+        }
+
+        let obj = {
+            msg: msg,
+            closeButton: false,
+        };
+
+        let isMessageDone = false;
+
+        if (noDetail) {
+            isMessageDone = true;
+        }
+
+        if (!isMessageDone && xhr.responseText && xhr.responseText[0] === '{') {
+            let data = null;
+
+            try {
+                data = JSON.parse(xhr.responseText);
+            }
+            catch (e) {}
+
+            if (data && data.messageTranslation && data.messageTranslation.label) {
+                let msgDetail = this.language.translate(
+                    data.messageTranslation.label,
+                    'messages',
+                    data.messageTranslation.scope
+                );
+
+                let msgData = data.messageTranslation.data || {};
+
+                for (let key in msgData) {
+                    msgDetail = msgDetail.replace('{' + key + '}', msgData[key]);
+                }
+
+                obj.msg += '\n' + msgDetail;
+                obj.closeButton = true;
+
+                isMessageDone = true;
+            }
+        }
+
+        if (!isMessageDone) {
+            let statusReason = xhr.getResponseHeader('X-Status-Reason');
+
+            if (statusReason) {
+                obj.msg += '\n' + statusReason;
+                obj.closeButton = true;
+
+                //isMessageDone = true;
+            }
+        }
+
+        Ui.error(obj.msg, obj.closeButton);
+    }
+
+    /**
+     * @private
+     */
+    initBroadcastChannel() {
+        this.broadcastChannel = new BroadcastChannel();
+
+        this.broadcastChannel.subscribe(event => {
+            if (!this.auth && this.started) {
+                if (event.data === 'logged-in') {
+                    window.location.reload();
+                }
+
+                return;
             }
 
-            Ui.error(obj.msg, obj.closeButton);
-        },
+            if (event.data === 'update:all') {
+                this.metadata.loadSkipCache();
+                this.settings.loadSkipCache();
+                this.language.loadSkipCache();
+                this.viewHelper.layoutManager.clearLoadedData();
 
-        /**
-         * @private
-         */
-        initBroadcastChannel: function () {
-            this.broadcastChannel = new BroadcastChannel();
+                return;
+            }
 
-            this.broadcastChannel.subscribe(event => {
-                if (!this.auth && this.started) {
-                    if (event.data === 'logged-in') {
-                        window.location.reload();
-                    }
+            if (event.data === 'update:metadata') {
+                this.metadata.loadSkipCache();
+
+                return;
+            }
+
+            if (event.data === 'update:config') {
+                this.settings.load();
+
+                return;
+            }
+
+            if (event.data === 'update:language') {
+                this.language.loadSkipCache();
+
+                return;
+            }
+
+            if (event.data === 'update:layout') {
+                this.viewHelper.layoutManager.clearLoadedData();
+
+                return;
+            }
+
+            if (event.data === 'reload') {
+                window.location.reload();
+
+                return;
+            }
+
+            if (event.data === 'logged-out' && this.started) {
+                if (this.auth && this.router.confirmLeaveOut) {
+                    Ui.error(this.language.translate('loggedOutLeaveOut', 'messages'), true);
+
+                    this.router.trigger('logout');
 
                     return;
                 }
 
-                if (event.data === 'update:all') {
-                    this.metadata.loadSkipCache();
-                    this.settings.loadSkipCache();
-                    this.language.loadSkipCache();
-                    this.viewHelper.layoutManager.clearLoadedData();
+                this.logout(true);
+            }
+        });
+    }
 
-                    return;
-                }
+    initDomEventListeners() {
+        $(document).on('keydown.espo.button', e => {
+            if (
+                e.code !== 'Enter' ||
+                e.target.tagName !== 'A' ||
+                e.target.getAttribute('role') !== 'button' ||
+                e.target.getAttribute('href') ||
+                e.ctrlKey ||
+                e.altKey ||
+                e.metaKey
+            ) {
+                return;
+            }
 
-                if (event.data === 'update:metadata') {
-                    this.metadata.loadSkipCache();
+            $(e.target).click();
 
-                    return;
-                }
+            e.preventDefault();
+        });
+    }
+}
 
-                if (event.data === 'update:config') {
-                    this.settings.load();
 
-                    return;
-                }
+/**
+ * @callback module:app~callback
+ *
+ * @param {App} app A created application instance.
+ */
 
-                if (event.data === 'update:language') {
-                    this.language.loadSkipCache();
+/**
+ * Application options.
+ *
+ * @typedef {Object} module:app~Options
+ *
+ * @property {string} [id] An application ID.
+ * @property {string} [basePath] A base path.
+ * @property {boolean} [useCache] Use cache.
+ * @property {string} [apiUrl] An API URL.
+ * @property {Number} [ajaxTimeout] A default ajax request timeout.
+ * @property {string} [internalModuleList] A list of internal modules.
+ *   Internal modules located in the `client/modules` directory.
+ * @property {Number|null} [cacheTimestamp] A cache timestamp.
+ */
 
-                    return;
-                }
+_.extend(App.prototype, Backbone.Events);
 
-                if (event.data === 'update:layout') {
-                    this.viewHelper.layoutManager.clearLoadedData();
+App.extend = Bull.View.extend;
 
-                    return;
-                }
-
-                if (event.data === 'reload') {
-                    window.location.reload();
-
-                    return;
-                }
-
-                if (event.data === 'logged-out' && this.started) {
-                    if (this.auth && this.router.confirmLeaveOut) {
-                        Ui.error(this.language.translate('loggedOutLeaveOut', 'messages'), true);
-
-                        this.router.trigger('logout');
-
-                        return;
-                    }
-
-                    this.logout(true);
-                }
-            });
-        },
-
-        initDomEventListeners: function () {
-            $(document).on('keydown.espo.button', e => {
-                if (
-                    e.code !== 'Enter' ||
-                    e.target.tagName !== 'A' ||
-                    e.target.getAttribute('role') !== 'button' ||
-                    e.target.getAttribute('href') ||
-                    e.ctrlKey ||
-                    e.altKey ||
-                    e.metaKey
-                ) {
-                    return;
-                }
-
-                $(e.target).click();
-
-                e.preventDefault();
-            });
-        },
-
-    }, Backbone.Events);
-
-    App.extend = Bull.View.extend;
-
-    return App;
-});
+export default App;
diff --git a/client/src/broadcast-channel.js b/client/src/broadcast-channel.js
index db07a6148e..954944e6ee 100644
--- a/client/src/broadcast-channel.js
+++ b/client/src/broadcast-channel.js
@@ -26,52 +26,46 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('broadcast-channel', [], function () {
+/** @module broadcast-channel */
 
-    /**
-     * @memberOf module:broadcast-channel
-     */
-    class Class {
-        constructor() {
-            this.object = null;
+export default class {
+    constructor() {
+        this.object = null;
 
-            if (window.BroadcastChannel) {
-                this.object = new BroadcastChannel('app');
-            }
-        }
-
-        /**
-         * Post a message.
-         *
-         * @param {string} message A message.
-         */
-        postMessage(message) {
-            if (!this.object) {
-                return;
-            }
-
-            this.object.postMessage(message);
-        }
-
-        /**
-         * @callback module:broadcast-channel.Class~callback
-         *
-         * @param {MessageEvent} event An event. A message can be obtained from the `data` property.
-         */
-
-        /**
-         * Subscribe to a message.
-         *
-         * @param {module:broadcast-channel.Class~callback} callback A callback.
-         */
-        subscribe(callback) {
-            if (!this.object) {
-                return;
-            }
-
-            this.object.addEventListener('message', callback);
+        if (window.BroadcastChannel) {
+            this.object = new BroadcastChannel('app');
         }
     }
 
-    return Class;
-});
+    /**
+     * Post a message.
+     *
+     * @param {string} message A message.
+     */
+    postMessage(message) {
+        if (!this.object) {
+            return;
+        }
+
+        this.object.postMessage(message);
+    }
+
+    /**
+     * @callback module:broadcast-channel~callback
+     *
+     * @param {MessageEvent} event An event. A message can be obtained from the `data` property.
+     */
+
+    /**
+     * Subscribe to a message.
+     *
+     * @param {module:broadcast-channel~callback} callback A callback.
+     */
+    subscribe(callback) {
+        if (!this.object) {
+            return;
+        }
+
+        this.object.addEventListener('message', callback);
+    }
+}
diff --git a/client/src/cache.js b/client/src/cache.js
index 427b91c390..cd96732124 100644
--- a/client/src/cache.js
+++ b/client/src/cache.js
@@ -26,203 +26,198 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('cache', [], function () {
+/** @module cache */
+
+/**
+ * Cache for source and resource files.
+ *
+ * @class
+ * @param {Number} [cacheTimestamp] A cache timestamp.
+ */
+const Cache = function (cacheTimestamp) {
+    this.basePrefix = this.prefix;
+
+    if (cacheTimestamp) {
+        this.prefix =  this.basePrefix + '-' + cacheTimestamp;
+    }
+
+    if (!this.get('app', 'timestamp')) {
+        this.storeTimestamp();
+    }
+};
+
+_.extend(Cache.prototype, /** @lends Cache# */ {
+
+    /** @private */
+    prefix: 'cache',
 
     /**
-     * Cache for source and resource files.
+     * Handle actuality. Clears cache if not actual.
      *
-     * @class
-     * @name Class
-     * @memberOf module:cache
-     * @param {Number} [cacheTimestamp] A cache timestamp.
+     * @param {Number} cacheTimestamp A cache timestamp.
      */
-    var Cache = function (cacheTimestamp) {
-        this.basePrefix = this.prefix;
+    handleActuality: function (cacheTimestamp) {
+        let storedTimestamp = this.getCacheTimestamp();
 
-        if (cacheTimestamp) {
-            this.prefix =  this.basePrefix + '-' + cacheTimestamp;
+        if (storedTimestamp) {
+            if (storedTimestamp !== cacheTimestamp) {
+                this.clear();
+                this.set('app', 'cacheTimestamp', cacheTimestamp);
+                this.storeTimestamp();
+            }
+
+            return;
         }
 
-        if (!this.get('app', 'timestamp')) {
-            this.storeTimestamp();
+        this.clear();
+        this.set('app', 'cacheTimestamp', cacheTimestamp);
+        this.storeTimestamp();
+    },
+
+    /**
+     * Get a cache timestamp.
+     *
+     * @returns {number}
+     */
+    getCacheTimestamp: function () {
+        return parseInt(this.get('app', 'cacheTimestamp') || 0);
+    },
+
+    /**
+     * @deprecated
+     * @todo Revise whether is needed.
+     */
+    storeTimestamp: function () {
+        let frontendCacheTimestamp = Date.now();
+
+        this.set('app', 'timestamp', frontendCacheTimestamp);
+    },
+
+    /**
+     * @private
+     * @param {string} type
+     * @returns {string}
+     */
+    composeFullPrefix: function (type) {
+        return this.prefix + '-' + type;
+    },
+
+    /**
+     * @private
+     * @param {string} type
+     * @param {string} name
+     * @returns {string}
+     */
+    composeKey: function (type, name) {
+        return this.composeFullPrefix(type) + '-' + name;
+    },
+
+    /**
+     * @private
+     * @param {string} type
+     */
+    checkType: function (type) {
+        if (typeof type === 'undefined' && toString.call(type) !== '[object String]') {
+            throw new TypeError("Bad type \"" + type + "\" passed to Cache().");
         }
-    };
+    },
 
-    _.extend(Cache.prototype, /** @lends module:cache.Class# */ {
+    /**
+     * Get a stored value.
+     *
+     * @param {string} type A type/category.
+     * @param {string} name A name.
+     * @returns {string|null} Null if no stored value.
+     */
+    get: function (type, name) {
+        this.checkType(type);
 
-        /**
-         * @private
-         */
-        prefix: 'cache',
+        let key = this.composeKey(type, name);
 
-        /**
-         * Handle actuality. Clears cache if not actual.
-         *
-         * @param {Number} cacheTimestamp A cache timestamp.
-         */
-        handleActuality: function (cacheTimestamp) {
-            let storedTimestamp = this.getCacheTimestamp();
+        let stored;
 
-            if (storedTimestamp) {
-                if (storedTimestamp !== cacheTimestamp) {
-                    this.clear();
-                    this.set('app', 'cacheTimestamp', cacheTimestamp);
-                    this.storeTimestamp();
-                }
-
-                return;
-            }
-
-            this.clear();
-            this.set('app', 'cacheTimestamp', cacheTimestamp);
-            this.storeTimestamp();
-        },
-
-        /**
-         * Get a cache timestamp.
-         *
-         * @returns {number}
-         */
-        getCacheTimestamp: function () {
-            return parseInt(this.get('app', 'cacheTimestamp') || 0);
-        },
-
-        /**
-         * @deprecated
-         * @todo Revise whether is needed.
-         */
-        storeTimestamp: function () {
-            let frontendCacheTimestamp = Date.now();
-
-            this.set('app', 'timestamp', frontendCacheTimestamp);
-        },
-
-        /**
-         * @private
-         * @param {string} type
-         * @returns {string}
-         */
-        composeFullPrefix: function (type) {
-            return this.prefix + '-' + type;
-        },
-
-        /**
-         * @private
-         * @param {string} type
-         * @param {string} name
-         * @returns {string}
-         */
-        composeKey: function (type, name) {
-            return this.composeFullPrefix(type) + '-' + name;
-        },
-
-        /**
-         * @private
-         * @param {string} type
-         */
-        checkType: function (type) {
-            if (typeof type === 'undefined' && toString.call(type) !== '[object String]') {
-                throw new TypeError("Bad type \"" + type + "\" passed to Cache().");
-            }
-        },
-
-        /**
-         * Get a stored value.
-         *
-         * @param {string} type A type/category.
-         * @param {string} name A name.
-         * @returns {string|null} Null if no stored value.
-         */
-        get: function (type, name) {
-            this.checkType(type);
-
-            let key = this.composeKey(type, name);
-
-            let stored;
-
-            try {
-                stored = localStorage.getItem(key);
-            }
-            catch (error) {
-                console.error(error);
-
-                return null;
-            }
-
-            if (stored) {
-                let result = stored;
-
-                if (stored.length > 9 && stored.substr(0, 9) === '__JSON__:') {
-                    let jsonString = stored.substr(9);
-
-                    try {
-                        result = JSON.parse(jsonString);
-                    }
-                    catch (error) {
-                        result = stored;
-                    }
-                }
-
-                return result;
-            }
+        try {
+            stored = localStorage.getItem(key);
+        }
+        catch (error) {
+            console.error(error);
 
             return null;
-        },
+        }
 
-        /**
-         * Store a value.
-         *
-         * @param {string} type A type/category.
-         * @param {string} name A name.
-         * @param {any} value A value.
-         */
-        set: function (type, name, value) {
-            this.checkType(type);
+        if (stored) {
+            let result = stored;
 
-            let key = this.composeKey(type, name);
+            if (stored.length > 9 && stored.substr(0, 9) === '__JSON__:') {
+                let jsonString = stored.substr(9);
 
-            if (value instanceof Object || Array.isArray(value)) {
-                value = '__JSON__:' + JSON.stringify(value);
-            }
-
-            try {
-                localStorage.setItem(key, value);
-            }
-            catch (error) {
-                console.log('Local storage limit exceeded.');
-            }
-        },
-
-        /**
-         * Clear a stored value.
-         *
-         * @param {string} [type] A type/category.
-         * @param {string} [name] A name.
-         */
-        clear: function (type, name) {
-            let reText;
-
-            if (typeof type !== 'undefined') {
-                if (typeof name === 'undefined') {
-                    reText = '^' + this.composeFullPrefix(type);
+                try {
+                    result = JSON.parse(jsonString);
                 }
-                else {
-                    reText = '^' + this.composeKey(type, name);
+                catch (error) {
+                    result = stored;
                 }
             }
+
+            return result;
+        }
+
+        return null;
+    },
+
+    /**
+     * Store a value.
+     *
+     * @param {string} type A type/category.
+     * @param {string} name A name.
+     * @param {any} value A value.
+     */
+    set: function (type, name, value) {
+        this.checkType(type);
+
+        let key = this.composeKey(type, name);
+
+        if (value instanceof Object || Array.isArray(value)) {
+            value = '__JSON__:' + JSON.stringify(value);
+        }
+
+        try {
+            localStorage.setItem(key, value);
+        }
+        catch (error) {
+            console.log('Local storage limit exceeded.');
+        }
+    },
+
+    /**
+     * Clear a stored value.
+     *
+     * @param {string} [type] A type/category.
+     * @param {string} [name] A name.
+     */
+    clear: function (type, name) {
+        let reText;
+
+        if (typeof type !== 'undefined') {
+            if (typeof name === 'undefined') {
+                reText = '^' + this.composeFullPrefix(type);
+            }
             else {
-                reText = '^' + this.basePrefix + '-';
+                reText = '^' + this.composeKey(type, name);
             }
+        }
+        else {
+            reText = '^' + this.basePrefix + '-';
+        }
 
-            let re = new RegExp(reText);
+        let re = new RegExp(reText);
 
-            for (var i in localStorage) {
-                if (re.test(i)) {
-                    delete localStorage[i];
-                }
+        for (let i in localStorage) {
+            if (re.test(i)) {
+                delete localStorage[i];
             }
-        },
-    });
-
-    return Cache;
+        }
+    },
 });
+
+export default Cache;
diff --git a/client/src/collection-factory.js b/client/src/collection-factory.js
index 3af3a6fb64..1fba0003d3 100644
--- a/client/src/collection-factory.js
+++ b/client/src/collection-factory.js
@@ -26,78 +26,71 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
- define('collection-factory', [], function () {
+/** @module collection-factory */
+
+/**
+ * A collection factory.
+ */
+class Class {
+    /**
+     * @param {module:model-factory} modelFactory
+     * @param {module:models/settings} config
+     * @param {module:metadata} metadata
+     */
+    constructor(modelFactory, config, metadata) {
+        /** @private */
+        this.modelFactory = modelFactory;
+        /** @private */
+        this.metadata = metadata;
+        /** @private */
+        this.recordListMaxSizeLimit = config.get('recordListMaxSizeLimit') || 200;
+    }
 
     /**
-     * A collection factory.
+     * Create a collection.
      *
-     * @class
-     * @name Class
-     * @memberOf module:collection-factory
+     * @param {string} entityType An entity type.
+     * @param {Function} [callback] Deprecated.
+     * @param {Object} [context] Deprecated.
+     * @returns {Promise<module:collection>}
      */
-    let CollectionFactory = function (modelFactory, config) {
-        this.modelFactory = modelFactory;
-        this.config = config;
-    };
+    create(entityType, callback, context) {
+        return new Promise(resolve => {
+            context = context || this;
 
-    _.extend(CollectionFactory.prototype, /** @lends module:collection-factory.Class# */ {
+            this.modelFactory.getSeed(entityType, Model => {
+                let orderBy = this.modelFactory.metadata
+                    .get(['entityDefs', entityType, 'collection', 'orderBy']);
 
-        /**
-         * @private
-         */
-        modelFactory: null,
+                let order = this.modelFactory.metadata
+                    .get(['entityDefs', entityType, 'collection', 'order']);
 
-        /**
-         * @private
-         */
-        recordListMaxSizeLimit: 200,
+                let className = this.modelFactory.metadata
+                    .get(['clientDefs', entityType, 'collection']) || 'collection';
 
-        /**
-         * Create a collection.
-         *
-         * @param {string} name An entity type.
-         * @param {Function} [callback] Deprecated.
-         * @param {Object} [context] Deprecated.
-         * @returns {Promise<module:collection.Class>}
-         */
-        create: function (name, callback, context) {
-            return new Promise(resolve => {
-                context = context || this;
+                let defs = this.metadata.get(['entityDefs', entityType]) || {};
 
-                this.modelFactory.getSeed(name, seed => {
-                    let orderBy = this.modelFactory.metadata
-                        .get(['entityDefs', name, 'collection', 'orderBy']);
-
-                    let order = this.modelFactory.metadata
-                        .get(['entityDefs', name, 'collection', 'order']);
-
-                    let className = this.modelFactory.metadata
-                        .get(['clientDefs', name, 'collection']) || 'collection';
-
-                    require(className, collectionClass => {
-                        let collection = new collectionClass(null, {
-                            name: name,
-                            orderBy: orderBy,
-                            order: order,
-                        });
-
-                        collection.model = seed;
-                        collection._user = this.modelFactory.user;
-                        collection.entityType = name;
-
-                        collection.maxMaxSize = this.config.get('recordListMaxSizeLimit') ||
-                            this.recordListMaxSizeLimit;
-
-                        if (callback) {
-                            callback.call(context, collection);
-                        }
-
-                        resolve(collection);
+                Espo.loader.require(className, Collection => {
+                    let collection = new Collection(null, {
+                        name: entityType,
+                        orderBy: orderBy,
+                        order: order,
+                        defs: defs,
                     });
+
+                    collection.model = Model;
+                    collection.entityType = entityType;
+                    collection.maxMaxSize = this.recordListMaxSizeLimit;
+
+                    if (callback) {
+                        callback.call(context, collection);
+                    }
+
+                    resolve(collection);
                 });
             });
-        },
-    });
+        });
+    }
+}
 
-    return CollectionFactory;
-});
+export default Class;
diff --git a/client/src/collection.js b/client/src/collection.js
index f235599bf4..c54229e34e 100644
--- a/client/src/collection.js
+++ b/client/src/collection.js
@@ -26,476 +26,499 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('collection', ['model'], function (Model) {
+/** @module collection */
+
+import Model from 'model';
+import Backbone from 'lib!backbone';
+
+const Dep = Backbone.Collection;
+
+/**
+ * On sync with backend.
+ *
+ * @event Class#sync
+ * @param {Class} collection A collection.
+ * @param {Object} response Response from backend.
+ * @param {Object} o Options.
+ */
+
+/**
+ * Any number of models have been added, removed or changed.
+ *
+ * @event Class#update
+ * @param {Class} collection A collection.
+ * @param {Object} o Options.
+ */
+
+/**
+ * Add a model or models.
+ *
+ * @function add
+ * @memberof Class#
+ * @param {Model|Model[]} models A model or models.
+ * @param {Object} [options] Options.
+ *
+ * @fires Class#update Unless `{silent: true}`.
+ */
+
+/**
+ * Remove a model or models.
+ *
+ * @function remove
+ * @memberof Class#
+ * @param {Model|Model[]|string|string[]} models A model, models, ID or IDs.
+ * @param {Object} [options] Options.
+ *
+ * @fires Class#update Unless `{silent: true}`.
+ */
+
+/**
+ * Append a model.
+ *
+ * @function push
+ * @memberof Class#
+ * @param {Model} model A model.
+ * @param {Object} [options] Options.
+ */
+
+/**
+ * Remove and return the last model from the collection.
+ *
+ * @function pop
+ * @memberof Class#
+ * @param {Object} [options] Options.
+ */
+
+/**
+ * @class
+ * @extends Backbone.Collection.prototype
+ * @mixes Backbone.Events
+ */
+const Class = Dep.extend(/** @lends Class# */ {
 
     /**
-     * On sync with backend.
+     * A number of records.
      *
-     * @event module:collection.Class#sync
-     * @param {module:collection.Class} collection A collection.
-     * @param {Object} response Response from backend.
-     * @param {Object} o Options.
+     * @name length
+     * @type {number}
+     * @memberof Class#
      */
 
     /**
-     * Any number of models have been added, removed or changed.
+     * Models.
      *
-     * @event module:collection.Class#update
-     * @param {module:collection.Class} collection A collection.
-     * @param {Object} o Options.
+     * @name length
+     * @type {Model[]}
+     * @memberof Class#
      */
 
     /**
-     * Add a model or models.
+     * An API URL.
      *
-     * @function add
-     * @memberof module:collection.Class#
-     * @param {module:model.Class|module:model.Class[]} models A model or models.
-     * @param {Object} [options] Options.
-     *
-     * @fires module:collection.Class#update Unless `{silent: true}`.
+     * @name url
+     * @type {string|null}
+     * @public
+     * @memberof Class.prototype
      */
 
     /**
-     * Remove a model or models.
+     * A name.
      *
-     * @function remove
-     * @memberof module:collection.Class#
-     * @param {module:model.Class|module:model.Class[]|string|string[]} models A model, models, ID or IDs.
-     * @param {Object} [options] Options.
-     *
-     * @fires module:collection.Class#update Unless `{silent: true}`.
+     * @type {string|null}
      */
+    name: null,
 
     /**
-     * Append a model.
+     * An entity type.
      *
-     * @function push
-     * @memberof module:collection.Class#
-     * @param {module:model.Class} model A model.
-     * @param {Object} [options] Options.
+     * @type {string|null}
      */
+    entityType: null,
 
     /**
-     * Remove and return the last model from the collection.
+     * A total number of records.
      *
-     * @function pop
-     * @memberof module:collection.Class#
-     * @param {Object} [options] Options.
+     * @type {number}
      */
+    total: 0,
 
     /**
-     * @class
-     * @name Class
-     * @memberOf module:collection
-     * @extends Backbone.Collection.prototype
-     * @mixes Backbone.Events
+     * A current offset (for pagination).
+     *
+     * @type {number}
      */
-    let Collection = Backbone.Collection.extend(/** @lends module:collection.Class# */ {
+    offset: 0,
 
-        /**
-         * A number of records.
-         *
-         * @name length
-         * @type {number}
-         * @memberof module:collection.Class#
-         */
+    /**
+     * A max size (for pagination).
+     *
+     * @type {number}
+     */
+    maxSize: 20,
 
-        /**
-         * Models.
-         *
-         * @name length
-         * @type {module:model.Class[]}
-         * @memberof module:collection.Class#
-         */
+    /**
+     * An order.
+     *
+     * @type {boolean|'asc'|'desc'|null}
+     */
+    order: null,
 
-        /**
-         * An API URL.
-         *
-         * @name url
-         * @type {string|null}
-         * @public
-         * @memberof module:collection.Class.prototype
-         */
+    /**
+     * An order-by field.
+     *
+     * @type {string|null}
+     */
+    orderBy: null,
 
-        /**
-         * A name.
-         *
-         * @type {string|null}
-         */
-        name: null,
+    /**
+     * A where clause.
+     *
+     * @type {Array.<Object>|null}
+     */
+    where: null,
 
-        /**
-         * An entity type.
-         *
-         * @type {string|null}
-         */
-        entityType: null,
+    /**
+     * @deprecated
+     */
+    whereAdditional: null,
 
-        /**
-         * A total number of records.
-         *
-         * @type {number}
-         */
-        total: 0,
+    /**
+     * @type {number}
+     */
+    lengthCorrection: 0,
 
-        /**
-         * A current offset (for pagination).
-         *
-         * @type {number}
-         */
-        offset: 0,
+    /**
+     * @type {number}
+     */
+    maxMaxSize: 0,
 
-        /**
-         * A max size (for pagination).
-         *
-         * @type {number}
-         */
-        maxSize: 20,
+    /**
+     * Initialize.
+     *
+     * @protected
+     * @param {Model[]} models Models.
+     * @param {Object} options Options.
+     */
+    initialize: function (models, options) {
+        options = options || {};
 
-        /**
-         * An order.
-         *
-         * @type {boolean|'asc'|'desc'|null}
-         */
-        order: null,
+        this.name = options.name || this.name;
+        this.urlRoot = this.urlRoot || this.name;
+        this.url = this.url || this.urlRoot;
 
-        /**
-         * An order-by field.
-         *
-         * @type {string|null}
-         */
-        orderBy: null,
+        this.orderBy = this.sortBy = options.orderBy || options.sortBy || this.orderBy || this.sortBy;
+        this.order = options.order || this.order;
 
-        /**
-         * A where clause.
-         *
-         * @type {Array.<Object>|null}
-         */
-        where: null,
+        this.defaultOrder = this.order;
+        this.defaultOrderBy = this.orderBy;
 
-        /**
-         * @deprecated
-         */
-        whereAdditional: null,
+        /** @type {module:model~defs} */
+        this.defs = options.defs || {};
 
-        /**
-         * @type {number}
-         */
-        lengthCorrection: 0,
-
-        /**
-         * @type {number}
-         */
-        maxMaxSize: 0,
+        this.data = {};
 
         /**
          * @private
+         * @type Model#
          */
-        _user: null,
+        this.model = options.model || Model;
+    },
 
-        /**
-         * Initialize.
-         *
-         * @protected
-         * @param {module:model.Class[]} models Models.
-         * @param {Object} options Options.
-         */
-        initialize: function (models, options) {
-            options = options || {};
+    /**
+     * @private
+     */
+    _onModelEvent: function(event, model, collection, options) {
+        if (event === 'sync' && collection !== this) {
+            return;
+        }
 
-            this.name = options.name || this.name;
-            this.urlRoot = this.urlRoot || this.name;
-            this.url = this.url || this.urlRoot;
+        Dep.prototype._onModelEvent.apply(this, arguments);
+    },
 
-            this.orderBy = this.sortBy = options.orderBy || options.sortBy || this.orderBy || this.sortBy;
-            this.order = options.order || this.order;
+    /**
+     * Reset.
+     *
+     * @param {Model[]} [models]
+     * @param {Object} [options]
+     */
+    reset: function (models, options) {
+        this.lengthCorrection = 0;
 
-            this.defaultOrder = this.order;
-            this.defaultOrderBy = this.orderBy;
+        Dep.prototype.reset.call(this, models, options);
+    },
 
-            this.data = {};
+    /**
+     * @param {string} orderBy An order field.
+     * @param {bool|null|'desc'|'asc'} [order] True for desc.
+     * @returns {Promise}
+     */
+    sort: function (orderBy, order) {
+        this.orderBy = orderBy;
 
-            this.model = options.model || Model;
-        },
+        if (order === true) {
+            order = 'desc';
+        }
+        else if (order === false) {
+            order = 'asc';
+        }
 
-        /**
-         * @private
-         */
-        _onModelEvent: function(event, model, collection, options) {
-            if (event === 'sync' && collection !== this) {
-                return;
+        this.order = order || 'asc';
+
+        if (typeof this.asc !== 'undefined') { // TODO remove in 5.7
+            this.asc = this.order === 'asc';
+            this.sortBy = orderBy;
+        }
+
+        return this.fetch();
+    },
+
+    /**
+     * Next page.
+     */
+    nextPage: function () {
+        var offset = this.offset + this.maxSize;
+
+        this.setOffset(offset);
+    },
+
+    /**
+     * Previous page.
+     */
+    previousPage: function () {
+        var offset = this.offset - this.maxSize;
+
+        this.setOffset(offset);
+    },
+
+    /**
+     * First page.
+     */
+    firstPage: function () {
+        this.setOffset(0);
+    },
+
+    /**
+     * Last page.
+     */
+    lastPage: function () {
+        let offset = this.total - this.total % this.maxSize;
+
+        if (offset === this.total) {
+            offset = this.total - this.maxSize;
+        }
+
+        this.setOffset(offset);
+    },
+
+    /**
+     * Set an offset.
+     *
+     * @param {number} offset Offset.
+     */
+    setOffset: function (offset) {
+        if (offset < 0) {
+            throw new RangeError('offset can not be less than 0');
+        }
+
+        if (offset > this.total && this.total !== -1 && offset > 0) {
+            throw new RangeError('offset can not be larger than total count');
+        }
+
+        this.offset = offset;
+        this.fetch();
+    },
+
+    /**
+     * Has more.
+     *
+     * @return {boolean}
+     */
+    hasMore: function () {
+        return this.total > this.length || this.total === -1;
+    },
+
+    /**
+     * Parse a response from the backend.
+     *
+     * @param {Object} response A response.
+     * @param {Object} options Options.
+     * @returns {Class[]}
+     */
+    parse: function (response, options) {
+        this.total = response.total;
+
+        if ('additionalData' in response) {
+            this.dataAdditional = response.additionalData;
+        }
+        else {
+            this.dataAdditional = null;
+        }
+
+        return response.list;
+    },
+
+    /**
+     * Fetches from the backend.
+     *
+     * @param {Object} [options] Options.
+     * @returns {Promise}
+     *
+     * @fires Class#sync Unless `{silent: true}`.
+     */
+    fetch: function (options) {
+        options = options || {};
+
+        options.data = _.extend(options.data || {}, this.data);
+
+        this.offset = options.offset || this.offset;
+        this.orderBy = options.orderBy || options.sortBy || this.orderBy;
+        this.order = options.order || this.order;
+
+        this.where = options.where || this.where;
+
+        let length = this.length + this.lengthCorrection;
+
+        if (!('maxSize' in options)) {
+            options.data.maxSize = options.more ? this.maxSize : (
+                (length > this.maxSize) ? length : this.maxSize
+            );
+
+            if (this.maxMaxSize && options.data.maxSize > this.maxMaxSize) {
+                options.data.maxSize = this.maxMaxSize;
+            }
+        }
+        else {
+            options.data.maxSize = options.maxSize;
+        }
+
+        options.data.offset = options.more ? length : this.offset;
+        options.data.orderBy = this.orderBy;
+        options.data.order = this.order;
+        options.data.where = this.getWhere();
+
+        if (typeof this.asc !== 'undefined') { // TODO remove in 5.7
+            options.data.asc = this.asc;
+            options.data.sortBy = this.sortBy;
+
+            delete options.data.orderBy;
+            delete options.data.order;
+        }
+
+        this.lastXhr = Dep.prototype.fetch.call(this, options);
+
+        return this.lastXhr;
+    },
+
+    /**
+     * Abort the last fetch.
+     */
+    abortLastFetch: function () {
+        if (this.lastXhr && this.lastXhr.readyState < 4) {
+            this.lastXhr.abort();
+        }
+    },
+
+    /**
+     * Get a where clause.
+     *
+     * @returns {Object[]}
+     */
+    getWhere: function () {
+        var where = (this.where || []).concat(this.whereAdditional || []);
+
+        if (this.whereFunction) {
+            where = where.concat(this.whereFunction() || []);
+        }
+
+        return where;
+    },
+
+    /**
+     * @returns {string}
+     */
+    getEntityType: function () {
+        return this.name;
+    },
+
+    /**
+     * Reset the order to default.
+     */
+    resetOrderToDefault: function () {
+        this.orderBy = this.defaultOrderBy;
+        this.order = this.defaultOrder;
+    },
+
+    /**
+     * Set an order.
+     *
+     * @param {string|null} orderBy
+     * @param {boolean|'asc'|'desc'|null} [order]
+     * @param {boolean} [setDefault]
+     */
+    setOrder: function (orderBy, order, setDefault) {
+        this.orderBy = orderBy;
+        this.order = order;
+
+        if (setDefault) {
+            this.defaultOrderBy = orderBy;
+            this.defaultOrder = order;
+        }
+    },
+
+    /**
+     * Clone.
+     *
+     * @return {Class}
+     */
+    clone: function () {
+        /** @type {Class} */
+        let collection = Dep.prototype.clone.call(this);
+
+        collection.name = this.name;
+        collection.urlRoot = this.urlRoot;
+        collection.url = this.url;
+        collection.orderBy = this.orderBy;
+        collection.order = this.order;
+        collection.defaultOrder = this.defaultOrder;
+        collection.defaultOrderBy = this.defaultOrderBy;
+        collection.data = Espo.Utils.cloneDeep(this.data);
+        collection.where = Espo.Utils.cloneDeep(this.where);
+        collection.whereAdditional = Espo.Utils.cloneDeep(this.whereAdditional);
+        collection.total = this.total;
+        collection.offset = this.offset;
+        collection.maxSize = this.maxSize;
+        collection.maxMaxSize = this.maxMaxSize;
+
+        return collection;
+    },
+
+    /** @private */
+    _isModel: function(object) {
+        return object instanceof Model;
+    },
+
+    /** @private*/
+    _prepareModel: function(attributes, options) {
+        if (this._isModel(attributes)) {
+            if (!attributes.collection) {
+                attributes.collection = this;
             }
 
-            Backbone.Collection.prototype._onModelEvent.apply(this, arguments);
-        },
+            return attributes;
+        }
 
-        /**
-         * Reset.
-         *
-         * @param {module:model.Class[]} [models]
-         * @param {Object} [options]
-         */
-        reset: function (models, options) {
-            this.lengthCorrection = 0;
+        const Model = this.model;
 
-            Backbone.Collection.prototype.reset.call(this, models, options);
-        },
-
-        /**
-         * @param {string} orderBy An order field.
-         * @param {bool|null|'desc'|'asc'} [order] True for desc.
-         * @returns {Promise}
-         */
-        sort: function (orderBy, order) {
-            this.orderBy = orderBy;
-
-            if (order === true) {
-                order = 'desc';
-            }
-            else if (order === false) {
-                order = 'asc';
-            }
-
-            this.order = order || 'asc';
-
-            if (typeof this.asc !== 'undefined') { // TODO remove in 5.7
-                this.asc = this.order === 'asc';
-                this.sortBy = orderBy;
-            }
-
-            return this.fetch();
-        },
-
-        /**
-         * Next page.
-         */
-        nextPage: function () {
-            var offset = this.offset + this.maxSize;
-
-            this.setOffset(offset);
-        },
-
-        /**
-         * Previous page.
-         */
-        previousPage: function () {
-            var offset = this.offset - this.maxSize;
-
-            this.setOffset(offset);
-        },
-
-        /**
-         * First page.
-         */
-        firstPage: function () {
-            this.setOffset(0);
-        },
-
-        /**
-         * Last page.
-         */
-        lastPage: function () {
-            let offset = this.total - this.total % this.maxSize;
-
-            if (offset === this.total) {
-                offset = this.total - this.maxSize;
-            }
-
-            this.setOffset(offset);
-        },
-
-        /**
-         * Set an offset.
-         *
-         * @param {number} offset Offset.
-         */
-        setOffset: function (offset) {
-            if (offset < 0) {
-                throw new RangeError('offset can not be less than 0');
-            }
-
-            if (offset > this.total && this.total !== -1 && offset > 0) {
-                throw new RangeError('offset can not be larger than total count');
-            }
-
-            this.offset = offset;
-            this.fetch();
-        },
-
-        /**
-         * Has more.
-         *
-         * @return {boolean}
-         */
-        hasMore: function () {
-            return this.total > this.length || this.total === -1;
-        },
-
-        /**
-         * Parse a response from the backend.
-         *
-         * @param {Object} response A response.
-         * @param {Object} options Options.
-         * @returns {module:collection.Class[]}
-         */
-        parse: function (response, options) {
-            this.total = response.total;
-
-            if ('additionalData' in response) {
-                this.dataAdditional = response.additionalData;
-            }
-            else {
-                this.dataAdditional = null;
-            }
-
-            return response.list;
-        },
-
-        /**
-         * Fetches from the backend.
-         *
-         * @param {Object} [options] Options.
-         * @returns {Promise}
-         *
-         * @fires module:collection.Class#sync Unless `{silent: true}`.
-         */
-        fetch: function (options) {
-            options = options || {};
-
-            options.data = _.extend(options.data || {}, this.data);
-
-            this.offset = options.offset || this.offset;
-            this.orderBy = options.orderBy || options.sortBy || this.orderBy;
-            this.order = options.order || this.order;
-
-            this.where = options.where || this.where;
-
-            let length = this.length + this.lengthCorrection;
-
-            if (!('maxSize' in options)) {
-                options.data.maxSize = options.more ? this.maxSize : (
-                    (length > this.maxSize) ? length : this.maxSize
-                );
-
-                if (this.maxMaxSize && options.data.maxSize > this.maxMaxSize) {
-                    options.data.maxSize = this.maxMaxSize;
-                }
-            }
-            else {
-                options.data.maxSize = options.maxSize;
-            }
-
-            options.data.offset = options.more ? length : this.offset;
-            options.data.orderBy = this.orderBy;
-            options.data.order = this.order;
-            options.data.where = this.getWhere();
-
-            if (typeof this.asc !== 'undefined') { // TODO remove in 5.7
-                options.data.asc = this.asc;
-                options.data.sortBy = this.sortBy;
-
-                delete options.data.orderBy;
-                delete options.data.order;
-            }
-
-            this.lastXhr = Backbone.Collection.prototype.fetch.call(this, options);
-
-            return this.lastXhr;
-        },
-
-        /**
-         * Abort the last fetch.
-         */
-        abortLastFetch: function () {
-            if (this.lastXhr && this.lastXhr.readyState < 4) {
-                this.lastXhr.abort();
-            }
-        },
-
-        /**
-         * Get a where clause.
-         *
-         * @returns {Object[]}
-         */
-        getWhere: function () {
-            var where = (this.where || []).concat(this.whereAdditional || []);
-
-            if (this.whereFunction) {
-                where = where.concat(this.whereFunction() || []);
-            }
-
-            return where;
-        },
-
-        /**
-         * @protected
-         */
-        getUser: function () {
-            return this._user;
-        },
-
-        /**
-         * @returns {string}
-         */
-        getEntityType: function () {
-            return this.name;
-        },
-
-        /**
-         * Reset the order to default.
-         */
-        resetOrderToDefault: function () {
-            this.orderBy = this.defaultOrderBy;
-            this.order = this.defaultOrder;
-        },
-
-        /**
-         * Set an order.
-         *
-         * @param {string|null} orderBy
-         * @param {boolean|'asc'|'desc'|null} [order]
-         * @param {boolean} [setDefault]
-         */
-        setOrder: function (orderBy, order, setDefault) {
-            this.orderBy = orderBy;
-            this.order = order;
-
-            if (setDefault) {
-                this.defaultOrderBy = orderBy;
-                this.defaultOrder = order;
-            }
-        },
-
-        /**
-         * Clone.
-         *
-         * @return {module:collection.Class}
-         */
-        clone: function () {
-            /** @type {module:collection.Class} */
-            let collection = Backbone.Collection.prototype.clone.call(this);
-
-            collection.name = this.name;
-            collection.urlRoot = this.urlRoot;
-            collection.url = this.url;
-            collection.orderBy = this.orderBy;
-            collection.order = this.order;
-            collection.defaultOrder = this.defaultOrder;
-            collection.defaultOrderBy = this.defaultOrderBy;
-            collection.data = Espo.Utils.cloneDeep(this.data);
-            collection.where = Espo.Utils.cloneDeep(this.where);
-            collection.whereAdditional = Espo.Utils.cloneDeep(this.whereAdditional);
-            collection.total = this.total;
-            collection.offset = this.offset;
-            collection.maxSize = this.maxSize;
-            collection.maxMaxSize = this.maxMaxSize;
-
-            return collection;
-        },
-    });
-
-    Collection.extend = Bull.View.extend;
-
-    return Collection;
+        return new Model(attributes, {
+            collection: this,
+            dateTime: this.dateTime,
+            entityType: this.entityType || this.name,
+            defs: this.defs,
+            ...options,
+        });
+    },
 });
+
+Class.extend = Bull.View.extend;
+
+export default Class;
diff --git a/client/src/collections/note.js b/client/src/collections/note.js
index ccdb61ad06..9445d9685a 100644
--- a/client/src/collections/note.js
+++ b/client/src/collections/note.js
@@ -26,58 +26,52 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('collections/note', ['collection'], function (Dep) {
+import Dep from 'collection';
+
+/**
+ * @class Class
+ * @extends module:collection
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    /** @inheritDoc */
+    parse: function (response, params) {
+        let total = this.total;
+
+        let list = Dep.prototype.parse.call(this, response, params);
+
+        if (params.data && params.data.after) {
+            if (total >= 0 && response.total >= 0) {
+                this.total = total + response.total;
+            } else {
+                this.total = total;
+            }
+        }
+
+        return list;
+    },
 
     /**
-     * @class
-     * @name Class
-     * @extends module:collection.Class
-     * @memberOf module:collections/note
+     * Fetch new records.
+     *
+     * @param {Object} options Options.
+     * @returns {Promise}
      */
-    return Dep.extend(/** @lends module:collections/note.Class# */{
+    fetchNew: function (options) {
+        options = options || {};
 
-        /**
-         * @inheritDoc
-         */
-        parse: function (response, params) {
-            var total = this.total;
+        options.data = options.data || {};
+        options.fetchNew = true;
+        options.noRebuild = true;
+        options.lengthBeforeFetch = this.length;
 
-            var list = Dep.prototype.parse.call(this, response, params);
+        if (this.length) {
+            options.data.after = this.models[0].get('createdAt');
+            options.remove = false;
+            options.at = 0;
+            options.maxSize = null;
+        }
 
-            if (params.data && params.data.after) {
-                if (total >= 0 && response.total >= 0) {
-                    this.total = total + response.total;
-                } else {
-                    this.total = total;
-                }
-            }
-
-            return list;
-        },
-
-        /**
-         * Fetch new records.
-         *
-         * @param {Object} options Options.
-         * @returns {Promise}
-         */
-        fetchNew: function (options) {
-            options = options || {};
-
-            options.data = options.data || {};
-
-            options.fetchNew = true;
-            options.noRebuild = true;
-            options.lengthBeforeFetch = this.length;
-
-            if (this.length) {
-                options.data.after = this.models[0].get('createdAt');
-                options.remove = false;
-                options.at = 0;
-                options.maxSize = null;
-            }
-
-            return this.fetch(options);
-        },
-    });
+        return this.fetch(options);
+    },
 });
diff --git a/client/src/collections/tree.js b/client/src/collections/tree.js
index 1a48779356..40a54afa36 100644
--- a/client/src/collections/tree.js
+++ b/client/src/collections/tree.js
@@ -26,79 +26,77 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('collections/tree', ['collection'], function (Dep) {
+import Dep from 'collection';
 
-    return Dep.extend({
+export default Dep.extend({
 
-        createSeed: function () {
-            let seed = new this.constructor();
+    createSeed: function () {
+        let seed = new this.constructor();
 
-            seed.url = this.url;
-            seed.model = this.model;
-            seed._user = this._user;
-            seed.name = this.name;
+        seed.url = this.url;
+        seed.model = this.model;
+        seed.name = this.name;
+        seed.entityType = this.entityType;
 
-            return seed;
-        },
+        return seed;
+    },
 
-        parse: function (response) {
-            let list = Dep.prototype.parse.call(this, response);
+    parse: function (response) {
+        let list = Dep.prototype.parse.call(this, response);
 
-            let seed = this.clone();
+        let seed = this.clone();
 
-            seed.reset();
+        seed.reset();
 
-            this.path = response.path;
+        this.path = response.path;
+        this.categoryData = response.data || null;
 
-            this.categoryData = response.data || null;
+        let f = (l, depth) => {
+            l.forEach((d) => {
+                d.depth = depth;
 
-            let f = (l, depth) => {
-                l.forEach((d) => {
-                    d.depth = depth;
-
-                    let c = this.createSeed();
-
-                    if (d.childList) {
-                        if (d.childList.length) {
-                            f(d.childList, depth + 1);
-                            c.set(d.childList);
-                            d.childCollection = c;
-
-                            return;
-                        }
+                let c = this.createSeed();
 
+                if (d.childList) {
+                    if (d.childList.length) {
+                        f(d.childList, depth + 1);
+                        c.set(d.childList);
                         d.childCollection = c;
 
                         return;
                     }
 
-                    if (d.childList === null) {
-                        d.childCollection = null;
-
-                        return;
-                    }
-
                     d.childCollection = c;
 
-                });
-            };
+                    return;
+                }
 
-            f(list, 0);
+                if (d.childList === null) {
+                    d.childCollection = null;
 
-            return list;
-        },
+                    return;
+                }
 
-        fetch: function (options) {
-            options = options || {};
-            options.data = options.data || {};
+                d.childCollection = c;
 
-            if (this.parentId) {
-                options.data.parentId = this.parentId;
-            }
+            });
+        };
 
-            options.data.maxDepth = this.maxDepth;
+        f(list, 0);
 
-            return Dep.prototype.fetch.call(this, options);
-        },
-    });
+        return list;
+    },
+
+    fetch: function (options) {
+        options = options || {};
+        options.data = options.data || {};
+
+        if (this.parentId) {
+            options.data.parentId = this.parentId;
+        }
+
+        options.data.maxDepth = this.maxDepth;
+
+        return Dep.prototype.fetch.call(this, options);
+    },
 });
diff --git a/client/src/controller.js b/client/src/controller.js
index fa1988c468..86f731a69a 100644
--- a/client/src/controller.js
+++ b/client/src/controller.js
@@ -26,34 +26,41 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('controller', [], function () {
+/** @module controller */
+
+import Exceptions from 'exceptions';
+import Backbone from 'lib!backbone';
+import _ from 'lib!underscore';
+
+/**
+ * @callback module:controller~viewCallback
+ * @param {module:view} view A view.
+ */
+
+/**
+ * A controller. To be extended.
+ *
+ * @mixes Backbone.Events
+ */
+class Controller {
 
     /**
-     * @callback module:controller.Class~viewCallback
-     * @param {module:view.Class} view A view.
-     */
-
-    /**
-     * A controller. To be extended.
-     *
-     * @class
-     * @name Class
-     * @mixes Backbone.Events
-     * @memberOf module:controller
-     *
-     * @param {Object} params
+     * @internal
+     * @param {Object.<string, *>} params
      * @param {Object} injections
      */
-    const Controller = function (params, injections) {
+    constructor(params, injections) {
         this.params = params || {};
 
+        /** @type {module:controllers/base} */
         this.baseController = injections.baseController;
+        /** @type {Bull.Factory} */
         this.viewFactory = injections.viewFactory;
+        /** @type {module:model} */
         this.modelFactory = injections.modelFactory;
+        /** @type {module:collection-factory} */
         this.collectionFactory = injections.collectionFactory;
 
-        this.initialize();
-
         this._settings = injections.settings || null;
         this._user = injections.user || null;
         this._preferences = injections.preferences || null;
@@ -70,550 +77,542 @@ define('controller', [], function () {
         }
 
         this.set('masterRendered', false);
-    };
+    }
 
-    _.extend(Controller.prototype, /** @lends module:controller.Class# */ {
+    /**
+     * A default action.
+     *
+     * @type {string}
+     */
+    defaultAction = 'index'
 
-        /**
-         * A default action.
-         *
-         * @type {string}
-         */
-        defaultAction: 'index',
+    /**
+     * A name.
+     *
+     * @type {string|null}
+     */
+    name = null
 
-        /**
-         * A name.
-         *
-         * @type {string|null}
-         * @public
-         */
-        name: null,
+    /**
+     * Params.
+     *
+     * @type {Object}
+     * @private
+     */
+    params = null
 
-        /**
-         * Params.
-         *
-         * @type {Object}
-         * @private
-         */
-        params: null,
+    /**
+     * A view factory.
+     *
+     * @type {Bull.Factory}
+     * @protected
+     */
+    viewFactory = null
 
-        /**
-         * A view factory.
-         *
-         * @type {Bull.Factory}
-         * @protected
-         */
-        viewFactory: null,
+    /**
+     * A model factory.
+     *
+     * @type {module:model-factory}
+     * @protected
+     */
+    modelFactory = null
 
-        /**
-         * A model factory.
-         *
-         * @type {module:model-factory.Class}
-         * @protected
-         */
-        modelFactory: null,
+    /**
+     * A body view.
+     *
+     * @public
+     * @type {string|null}
+     */
+    masterView = null
 
-        /**
-         * A body view.
-         *
-         * @public
-         * @type {string|null}
-         */
-        masterView: null,
+    /**
+     * Set the router.
+     *
+     * @internal
+     * @param {module:router} router
+     */
+    setRouter(router) {
+        this._router = router;
 
-        /**
-         * Initialize.
-         *
-         * @protected
-         */
-        initialize: function () {},
+        this.trigger('router-set', router);
+    }
 
-        /**
-         * Set the router.
-         *
-         * @internal
-         * @param {module:router.Class} router
-         */
-        setRouter: function (router) {
-            this._router = router;
+    /**
+     * @protected
+     * @returns {module:models/settings}
+     */
+    getConfig() {
+        return this._settings;
+    }
 
-            this.trigger('router-set', router);
-        },
+    /**
+     * @protected
+     * @returns {module:models/user}
+     */
+    getUser() {
+        return this._user;
+    }
 
-        /**
-         * @protected
-         * @returns {module:models/settings.Class}
-         */
-        getConfig: function () {
-            return this._settings;
-        },
+    /**
+     * @protected
+     * @returns {module:models/preferences}
+     */
+    getPreferences() {
+        return this._preferences;
+    }
 
-        /**
-         * @protected
-         * @returns {module:models/user.Class}
-         */
-        getUser: function () {
-            return this._user;
-        },
+    /**
+     * @protected
+     * @returns {module:acl-manager}
+     */
+    getAcl() {
+        return this._acl;
+    }
 
-        /**
-         * @protected
-         * @returns {module:models/preferences.Class}
-         */
-        getPreferences: function () {
-            return this._preferences;
-        },
+    /**
+     * @protected
+     * @returns {module:cache}
+     */
+    getCache() {
+        return this._cache;
+    }
 
-        /**
-         * @protected
-         * @returns {module:acl-manager.Class}
-         */
-        getAcl: function () {
-            return this._acl;
-        },
+    /**
+     * @protected
+     * @returns {module:router}
+     */
+    getRouter() {
+        return this._router;
+    }
 
-        /**
-         * @protected
-         * @returns {module:cache.Class}
-         */
-        getCache: function () {
-            return this._cache;
-        },
+    /**
+     * @protected
+     * @returns {module:storage}
+     */
+    getStorage() {
+        return this._storage;
+    }
 
-        /**
-         * @protected
-         * @returns {module:router.Class}
-         */
-        getRouter: function () {
-            return this._router;
-        },
+    /**
+     * @protected
+     * @returns {module:metadata}
+     */
+    getMetadata() {
+        return this._metadata;
+    }
 
-        /**
-         * @protected
-         * @returns {module:storage.Class}
-         */
-        getStorage: function () {
-            return this._storage;
-        },
+    /**
+     * @protected
+     * @returns {module:date-time}
+     */
+    getDateTime() {
+        return this._dateTime;
+    }
 
-        /**
-         * @protected
-         * @returns {module:metadata.Class}
-         */
-        getMetadata: function () {
-            return this._metadata;
-        },
+    /**
+     * Get a parameter of all controllers.
+     *
+     * @param {string} key A key.
+     * @return {*} Null if a key doesn't exist.
+     */
+    get(key) {
+        if (key in this.params) {
+            return this.params[key];
+        }
 
-        /**
-         * @protected
-         * @returns {module:date-time.Class}
-         */
-        getDateTime: function () {
-            return this._dateTime;
-        },
+        return null;
+    }
 
-        /**
-         * Get a parameter of all controllers.
-         *
-         * @param {string} key A key.
-         * @return {*} Null if a key doesn't exist.
-         */
-        get: function (key) {
-            if (key in this.params) {
-                return this.params[key];
+    /**
+     * Set a parameter for all controllers.
+     *
+     * @param {string} key A name of a view.
+     * @param {*} value
+     */
+    set(key, value) {
+        this.params[key] = value;
+    }
+
+    /**
+     * Unset a parameter.
+     *
+     * @param {string} key A key.
+     */
+    unset(key) {
+        delete this.params[key];
+    }
+
+    /**
+     * Has a parameter.
+     *
+     * @param {string} key A key.
+     * @returns {boolean}
+     */
+    has(key) {
+        return key in this.params;
+    }
+
+    /**
+     * Get a stored main view.
+     *
+     * @param {string} key A key.
+     * @returns {module:view|null}
+     */
+    getStoredMainView(key) {
+        return this.get('storedMainView-' + key);
+    }
+
+    /**
+     * Has a stored main view.
+     * @param {string} key
+     * @returns {boolean}
+     */
+    hasStoredMainView(key) {
+        return this.has('storedMainView-' + key);
+    }
+
+    /**
+     * Clear a stored main view.
+     * @param {string} key
+     */
+    clearStoredMainView(key) {
+        let view = this.getStoredMainView(key);
+
+        if (view) {
+            view.remove(true);
+        }
+
+        this.unset('storedMainView-' + key);
+    }
+
+    /**
+     * Store a main view.
+     *
+     * @param {string} key A key.
+     * @param {module:view} view A view.
+     */
+    storeMainView(key, view) {
+        this.set('storedMainView-' + key, view);
+
+        this.listenTo(view, 'remove', (o) => {
+            o = o || {};
+
+            if (o.ignoreCleaning) {
+                return;
             }
 
-            return null;
-        },
+            this.stopListening(view, 'remove');
 
-        /**
-         * Set a parameter for all controllers.
-         *
-         * @param {string} key A name of a view.
-         * @param {*} value
-         */
-        set: function (key, value) {
-            this.params[key] = value;
-        },
+            this.clearStoredMainView(key);
+        });
+    }
 
-        /**
-         * Unset a parameter.
-         *
-         * @param {string} key A key.
-         */
-        unset: function (key) {
-            delete this.params[key];
-        },
-
-        /**
-         * Has a parameter.
-         *
-         * @param {string} key A key.
-         * @returns {boolean}
-         */
-        has: function (key) {
-            return key in this.params;
-        },
-
-        /**
-         * Get a stored main view.
-         *
-         * @param {string} key A key.
-         * @returns {module:view.Class|null}
-         */
-        getStoredMainView: function (key) {
-            return this.get('storedMainView-' + key);
-        },
-
-        /**
-         * Has a stored main view.
-         * @param {string} key
-         * @returns {boolean}
-         */
-        hasStoredMainView: function (key) {
-            return this.has('storedMainView-' + key);
-        },
-
-        /**
-         * Clear a stored main view.
-         * @param {string} key
-         */
-        clearStoredMainView: function (key) {
-            let view = this.getStoredMainView(key);
-
-            if (view) {
-                view.remove(true);
+    /**
+     * Clear all stored main views.
+     */
+    clearAllStoredMainViews() {
+        for (let k in this.params) {
+            if (k.indexOf('storedMainView-') !== 0) {
+                continue;
             }
 
-            this.unset('storedMainView-' + key);
-        },
+            let key = k.substr(15);
 
-        /**
-         * Store a main view.
-         *
-         * @param {string} key A key.
-         * @param {module:view.Class} view A view.
-         */
-        storeMainView: function (key, view) {
-            this.set('storedMainView-' + key, view);
+            this.clearStoredMainView(key);
+        }
+    }
 
-            this.listenTo(view, 'remove', (o) => {
-                o = o || {};
+    /**
+     * Check access to an action.
+     *
+     * @param {string} action An action.
+     * @returns {boolean}
+     */
+    checkAccess(action) {
+        return true;
+    }
 
-                if (o.ignoreCleaning) {
-                    return;
-                }
+    /**
+     * Process access check to the controller.
+     */
+    handleAccessGlobal() {
+        if (!this.checkAccessGlobal()) {
+            throw new Exceptions.AccessDenied("Denied access to '" + this.name + "'");
+        }
+    }
 
-                this.stopListening(view, 'remove');
+    /**
+     * Check access to the controller.
+     *
+     * @returns {boolean}
+     */
+    checkAccessGlobal() {
+        return true;
+    }
 
-                this.clearStoredMainView(key);
-            });
-        },
+    /**
+     * Check access to an action. Throwing an exception.
+     *
+     * @param {string} action An action.
+     */
+    handleCheckAccess(action) {
+        if (this.checkAccess(action)) {
+            return;
+        }
 
-        /**
-         * Clear all stored main views.
-         */
-        clearAllStoredMainViews: function () {
-            for (let k in this.params) {
-                if (k.indexOf('storedMainView-') !== 0) {
-                    continue;
-                }
+        let msg = action ?
+            "Denied access to action '" + this.name + "#" + action + "'" :
+            "Denied access to scope '" + this.name + "'";
 
-                let key = k.substr(15);
+        throw new Exceptions.AccessDenied(msg);
+    }
 
-                this.clearStoredMainView(key);
-            }
-        },
+    /**
+     * Process an action.
+     *
+     * @param {string} action
+     * @param {Object} options
+     */
+    doAction(action, options) {
+        this.handleAccessGlobal();
 
-        /**
-         * Check access to an action.
-         *
-         * @param {string} action An action.
-         * @returns {boolean}
-         */
-        checkAccess: function (action) {
-            return true;
-        },
+        action = action || this.defaultAction;
 
-        /**
-         * Process access check to the controller.
-         */
-        handleAccessGlobal: function () {
-            if (!this.checkAccessGlobal()) {
-                throw new Espo.Exceptions.AccessDenied("Denied access to '" + this.name + "'");
-            }
-        },
+        let method = 'action' + Espo.Utils.upperCaseFirst(action);
 
-        /**
-         * Check access to the controller.
-         *
-         * @returns {boolean}
-         */
-        checkAccessGlobal: function () {
-            return true;
-        },
+        if (!(method in this)) {
+            throw new Exceptions.NotFound("Action '" + this.name + "#" + action + "' is not found");
+        }
 
-        /**
-         * Check access to an action. Throwing an exception.
-         *
-         * @param {string} action An action.
-         */
-        handleCheckAccess: function (action) {
-            if (!this.checkAccess(action)) {
-                let msg;
+        let preMethod = 'before' + Espo.Utils.upperCaseFirst(action);
+        let postMethod = 'after' + Espo.Utils.upperCaseFirst(action);
 
-                if (action) {
-                    msg = "Denied access to action '" + this.name + "#" + action + "'";
-                }
-                else {
-                    msg = "Denied access to scope '" + this.name + "'";
-                }
+        if (preMethod in this) {
+            this[preMethod].call(this, options || {});
+        }
 
-                throw new Espo.Exceptions.AccessDenied(msg);
-            }
-        },
+        this[method].call(this, options || {});
 
-        /**
-         * Process an action.
-         *
-         * @param {string} action
-         * @param {Object} options
-         */
-        doAction: function (action, options) {
-            this.handleAccessGlobal();
+        if (postMethod in this) {
+            this[postMethod].call(this, options || {});
+        }
+    }
 
-            action = action || this.defaultAction;
+    /**
+     * Create a master view, render if not already rendered.
+     *
+     * @param {module:controller~viewCallback} callback A callback with a created master view.
+     */
+    master(callback) {
+        let entire = this.get('entire');
 
-            let method = 'action' + Espo.Utils.upperCaseFirst(action);
+        if (entire) {
+            entire.remove();
 
-            if (!(method in this)) {
-                throw new Espo.Exceptions.NotFound("Action '" + this.name + "#" + action + "' is not found");
-            }
+            this.set('entire', null);
+        }
 
-            let preMethod = 'before' + Espo.Utils.upperCaseFirst(action);
-            let postMethod = 'after' + Espo.Utils.upperCaseFirst(action);
+        let master = this.get('master');
 
-            if (preMethod in this) {
-                this[preMethod].call(this, options || {});
-            }
+        if (master) {
+            callback.call(this, master);
 
-            this[method].call(this, options || {});
+            return;
+        }
 
-            if (postMethod in this) {
-                this[postMethod].call(this, options || {});
-            }
-        },
+        let masterView = this.masterView || 'views/site/master';
 
-        /**
-         * Create a master view, render if not already rendered.
-         *
-         * @param {module:controller.Class~viewCallback} callback A callback with a created master view.
-         */
-        master: function (callback) {
-            let entire = this.get('entire');
+        this.viewFactory.create(masterView, {el: 'body'}, (master) => {
+            this.set('master', master);
 
-            if (entire) {
-                entire.remove();
+            if (!this.get('masterRendered')) {
+                master.render(() => {
+                    this.set('masterRendered', true);
 
-                this.set('entire', null);
-            }
-
-            let master = this.get('master');
-
-            if (master) {
-                callback.call(this, master);
+                    callback.call(this, master);
+                });
 
                 return;
             }
 
-            let masterView = this.masterView || 'views/site/master';
+            callback.call(this, master);
+        });
+    }
 
-            this.viewFactory.create(masterView, {el: 'body'}, (master) => {
-                this.set('master', master);
+    /**
+     * Create a main view in the master.
+     *
+     * @param {String} view A view name.
+     * @param {Object} [options] Options for view.
+     * @param {module:controller~viewCallback} [callback] A callback with a created view.
+     * @param {boolean} [useStored] Use a stored view if available.
+     * @param {string} [storedKey] A stored view key.
+     */
+    main(view, options, callback, useStored, storedKey) {
+        let isCanceled = false;
+        let isRendered = false;
 
-                if (!this.get('masterRendered')) {
-                    master.render(() => {
-                        this.set('masterRendered', true);
+        this.listenToOnce(this.baseController, 'action', () => {
+            isCanceled = true;
+        });
 
-                        callback.call(this, master);
-                    });
+        view = view || 'views/base';
 
-                    return;
-                }
+        this.master(master => {
+            if (isCanceled) {
+                return;
+            }
 
-                callback.call(this, master);
-            });
-        },
+            options = options || {};
+            options.el = '#main';
 
-        /**
-         * Create a main view in the master.
-         * @param {String} view A view name.
-         * @param {Object} options Options for view.
-         * @param {module:controller.Class~viewCallback} [callback] A callback with a created view.
-         * @param {boolean} [useStored] Use a stored view if available.
-         * @param {string} [storedKey] A stored view key.
-         */
-        main: function (view, options, callback, useStored, storedKey) {
-            let isCanceled = false;
-            let isRendered = false;
-
-            this.listenToOnce(this.baseController, 'action', () => {
-                isCanceled = true;
-            });
-
-            view = view || 'views/base';
-
-            this.master(master => {
+            let process = main => {
                 if (isCanceled) {
                     return;
                 }
 
-                options = options || {};
-                options.el = '#main';
-
-                let process = main => {
-                    if (isCanceled) {
-                        return;
-                    }
-
-                    if (storedKey) {
-                        this.storeMainView(storedKey, main);
-                    }
-
-                    main.listenToOnce(this.baseController, 'action', () => {
-                        if (isRendered) {
-                            return;
-                        }
-
-                        main.cancelRender();
-
-                        isCanceled = true;
-                    });
-
-                    if (master.currentViewKey) {
-                        this.set('storedScrollTop-' + master.currentViewKey, $(window).scrollTop());
-
-                        if (this.hasStoredMainView(master.currentViewKey)) {
-                            let mainView = master.getView('main');
-
-                            if (mainView) {
-                                mainView.propagateEvent('remove', {ignoreCleaning: true});
-                            }
-
-                            master.unchainView('main');
-                        }
-                    }
-
-                    master.currentViewKey = storedKey;
-                    master.setView('main', main);
-
-                    let afterRender = () => {
-                        isRendered = true;
-
-                        main.updatePageTitle();
-
-                        if (useStored && this.has('storedScrollTop-' + storedKey)) {
-                            $(window).scrollTop(this.get('storedScrollTop-' + storedKey));
-
-                            return;
-                        }
-
-                        $(window).scrollTop(0);
-                    };
-
-                    if (callback) {
-                        this.listenToOnce(main, 'after:render', afterRender);
-
-                        callback.call(this, main);
-
-                        return;
-                    }
-
-                    main.render()
-                        .then(afterRender);
-                };
-
-                if (useStored && this.hasStoredMainView(storedKey)) {
-                    let main = this.getStoredMainView(storedKey);
-
-                    let isActual = true;
-
-                    if (main && typeof main.isActualForReuse === 'function') {
-                        isActual = main.isActualForReuse();
-                    }
-
-                    if (
-                        (!main.lastUrl || main.lastUrl === this.getRouter().getCurrentUrl()) &&
-                        isActual
-                    ) {
-                        process(main);
-
-                        if (main && typeof main.setupReuse === 'function') {
-                            main.setupReuse(options.params || {});
-                        }
-
-                        return;
-                    }
-
-                    this.clearStoredMainView(storedKey);
+                if (storedKey) {
+                    this.storeMainView(storedKey, main);
                 }
 
-                this.viewFactory.create(view, options, process);
-            });
-        },
+                main.listenToOnce(this.baseController, 'action', () => {
+                    if (isRendered) {
+                        return;
+                    }
 
-        /**
-         * Show a loading notify-message.
-         */
-        showLoadingNotification: function () {
-            let master = this.get('master');
+                    main.cancelRender();
 
-            if (master) {
-                master.showLoadingNotification();
-            }
-        },
+                    isCanceled = true;
+                });
 
-        /**
-         * Hide a loading notify-message.
-         */
-        hideLoadingNotification: function () {
-            let master = this.get('master');
+                if (master.currentViewKey) {
+                    this.set('storedScrollTop-' + master.currentViewKey, $(window).scrollTop());
 
-            if (master) {
-                master.hideLoadingNotification();
-            }
-        },
+                    if (this.hasStoredMainView(master.currentViewKey)) {
+                        let mainView = master.getView('main');
 
-        /**
-         * Create a view in the <body> element.
-         *
-         * @param {String} view A view name.
-         * @param {Object} options Options for a view.
-         * @param {module:controller.Class~viewCallback} [callback] A callback with a created view.
-         */
-        entire: function (view, options, callback) {
-            let master = this.get('master');
+                        if (mainView) {
+                            mainView.propagateEvent('remove', {ignoreCleaning: true});
+                        }
 
-            if (master) {
-                master.remove();
+                        master.unchainView('main');
+                    }
+                }
+
+                master.currentViewKey = storedKey;
+                master.setView('main', main);
+
+                let afterRender = () => {
+                    isRendered = true;
+
+                    main.updatePageTitle();
+
+                    if (useStored && this.has('storedScrollTop-' + storedKey)) {
+                        $(window).scrollTop(this.get('storedScrollTop-' + storedKey));
+
+                        return;
+                    }
+
+                    $(window).scrollTop(0);
+                };
+
+                if (callback) {
+                    this.listenToOnce(main, 'after:render', afterRender);
+
+                    callback.call(this, main);
+
+                    return;
+                }
+
+                main.render()
+                    .then(afterRender);
+            };
+
+            if (useStored && this.hasStoredMainView(storedKey)) {
+                let main = this.getStoredMainView(storedKey);
+
+                let isActual = true;
+
+                if (main && typeof main.isActualForReuse === 'function') {
+                    isActual = main.isActualForReuse();
+                }
+
+                if (
+                    (!main.lastUrl || main.lastUrl === this.getRouter().getCurrentUrl()) &&
+                    isActual
+                ) {
+                    process(main);
+
+                    if (main && typeof main.setupReuse === 'function') {
+                        main.setupReuse(options.params || {});
+                    }
+
+                    return;
+                }
+
+                this.clearStoredMainView(storedKey);
             }
 
-            this.set('master', null);
-            this.set('masterRendered', false);
+            this.viewFactory.create(view, options, process);
+        });
+    }
 
-            options = options || {};
-            options.el = 'body';
+    /**
+     * Show a loading notify-message.
+     */
+    showLoadingNotification() {
+        let master = this.get('master');
 
-            this.viewFactory.create(view, options, view => {
-                this.set('entire', view);
-
-                callback(view);
-            });
+        if (!master) {
+            return;
         }
 
-    }, Backbone.Events);
+        master.showLoadingNotification();
+    }
 
-    Controller.extend = Bull.View.extend;
+    /**
+     * Hide a loading notify-message.
+     */
+    hideLoadingNotification() {
+        let master = this.get('master');
 
-    return Controller;
-});
+        if (!master) {
+            return;
+        }
+
+        master.hideLoadingNotification();
+    }
+
+    /**
+     * Create a view in the <body> element.
+     *
+     * @param {String} view A view name.
+     * @param {Bull.View~Options} options Options for a view.
+     * @param {module:controller~viewCallback} [callback] A callback with a created view.
+     */
+    entire(view, options, callback) {
+        let master = this.get('master');
+
+        if (master) {
+            master.remove();
+        }
+
+        this.set('master', null);
+        this.set('masterRendered', false);
+
+        options = options || {};
+        options.el = 'body';
+
+        this.viewFactory.create(view, options, view => {
+            this.set('entire', view);
+
+            callback(view);
+        });
+    }
+}
+
+Controller.extend = Bull.View.extend;
+
+_.extend(Controller.prototype, Backbone.Events);
+
+export default Controller;
diff --git a/client/src/controllers/admin.js b/client/src/controllers/admin.js
index 2700a88b6a..c733a6d5d0 100644
--- a/client/src/controllers/admin.js
+++ b/client/src/controllers/admin.js
@@ -26,438 +26,429 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('controllers/admin', ['controller', 'search-manager', 'lib!underscore'],
-function (Dep, /** typeof module:search-manager.Class */SearchManager, _) {
+import Controller from 'controller';
+import SearchManager from 'search-manager';
+import _ from 'lib!underscore';
+
+class AdminController extends Controller {
+
+    checkAccessGlobal() {
+        if (this.getUser().isAdmin()) {
+            return true;
+        }
+
+        return false;
+    }
+
+    actionPage(options) {
+        let page = options.page;
+
+        if (options.options) {
+            options = _.extend(
+                Espo.Utils.parseUrlOptionsParam(options.options),
+                options
+            );
+
+            delete options.options;
+        }
+
+        if (!page) {
+            throw new Error();
+        }
+
+        let methodName = 'action' + Espo.Utils.upperCaseFirst(page);
+
+        if (this[methodName]) {
+            this[methodName](options);
+
+            return;
+        }
+
+        let defs = this.getPageDefs(page);
+
+        if (!defs) {
+            throw new Espo.Exceptions.NotFound();
+        }
+
+        if (defs.view) {
+            this.main(defs.view, options);
+
+            return;
+        }
+
+        if (!defs.recordView) {
+            throw new Espo.Exceptions.NotFound();
+        }
+
+        let model = this.getSettingsModel();
+
+        model.fetch().then(() => {
+            model.id = '1';
+
+            this.main('views/settings/edit', {
+                model: model,
+                headerTemplate: 'admin/settings/headers/page',
+                recordView: defs.recordView,
+                page: page,
+                label: defs.label,
+                optionsToPass: [
+                    'page',
+                    'label',
+                ],
+            });
+        });
+    }
+
+    actionIndex(options) {
+        let isReturn = options.isReturn;
+        let key = this.name + 'Index';
+
+        if (this.getRouter().backProcessed) {
+            isReturn = true;
+        }
+
+        if (!isReturn && this.getStoredMainView(key)) {
+            this.clearStoredMainView(key);
+        }
+
+        this.main('views/admin/index', null, view => {
+            view.render();
+
+            this.listenTo(view, 'clear-cache', this.clearCache);
+            this.listenTo(view, 'rebuild', this.rebuild);
+        }, isReturn, key);
+    }
+
+    actionUsers() {
+        this.getRouter().dispatch('User', 'list', {fromAdmin: true});
+    }
+
+    actionPortalUsers() {
+        this.getRouter().dispatch('PortalUser', 'list', {fromAdmin: true});
+    }
+
+    actionApiUsers() {
+        this.getRouter().dispatch('ApiUser', 'list', {fromAdmin: true});
+    }
+
+    actionTeams() {
+        this.getRouter().dispatch('Team', 'list', {fromAdmin: true});
+    }
+
+    actionRoles() {
+        this.getRouter().dispatch('Role', 'list', {fromAdmin: true});
+    }
+
+    actionPortalRoles() {
+        this.getRouter().dispatch('PortalRole', 'list', {fromAdmin: true});
+    }
+
+    actionPortals() {
+        this.getRouter().dispatch('Portal', 'list', {fromAdmin: true});
+    }
+
+    actionLeadCapture() {
+        this.getRouter().dispatch('LeadCapture', 'list', {fromAdmin: true});
+    }
+
+    actionEmailFilters() {
+        this.getRouter().dispatch('EmailFilter', 'list', {fromAdmin: true});
+    }
+
+    actionGroupEmailFolders() {
+        this.getRouter().dispatch('GroupEmailFolder', 'list', {fromAdmin: true});
+    }
+
+    actionEmailTemplates() {
+        this.getRouter().dispatch('EmailTemplate', 'list', {fromAdmin: true});
+    }
+
+    actionPdfTemplates() {
+        this.getRouter().dispatch('Template', 'list', {fromAdmin: true});
+    }
+
+    actionDashboardTemplates() {
+        this.getRouter().dispatch('DashboardTemplate', 'list', {fromAdmin: true});
+    }
+
+    actionWebhooks() {
+        this.getRouter().dispatch('Webhook', 'list', {fromAdmin: true});
+    }
+
+    actionLayoutSets() {
+        this.getRouter().dispatch('LayoutSet', 'list', {fromAdmin: true});
+    }
+
+    actionWorkingTimeCalendar() {
+        this.getRouter().dispatch('WorkingTimeCalendar', 'list', {fromAdmin: true});
+    }
+
+    actionAttachments() {
+        this.getRouter().dispatch('Attachment', 'list', {fromAdmin: true});
+    }
+
+    actionAuthenticationProviders() {
+        this.getRouter().dispatch('AuthenticationProvider', 'list', {fromAdmin: true});
+    }
+
+    actionEmailAddresses() {
+        this.getRouter().dispatch('EmailAddress', 'list', {fromAdmin: true});
+    }
+
+    actionPhoneNumbers() {
+        this.getRouter().dispatch('PhoneNumber', 'list', {fromAdmin: true});
+    }
+
+    actionPersonalEmailAccounts() {
+        this.getRouter().dispatch('EmailAccount', 'list', {fromAdmin: true});
+    }
+
+    actionGroupEmailAccounts() {
+        this.getRouter().dispatch('InboundEmail', 'list', {fromAdmin: true});
+    }
+
+    actionActionHistory() {
+        this.getRouter().dispatch('ActionHistoryRecord', 'list', {fromAdmin: true});
+    }
+
+    actionImport() {
+        this.getRouter().dispatch('Import', 'index', {fromAdmin: true});
+    }
+
+    actionLayouts(options) {
+        var scope = options.scope || null;
+        var type = options.type || null;
+        var em = options.em || false;
+
+        this.main('views/admin/layouts/index', {scope: scope, type: type, em: em});
+    }
+
+    actionLabelManager(options) {
+        var scope = options.scope || null;
+        var language = options.language || null;
+
+        this.main('views/admin/label-manager/index', {scope: scope, language: language});
+    }
+
+    actionTemplateManager(options) {
+        var name = options.name || null;
+
+        this.main('views/admin/template-manager/index', {name: name});
+    }
+
+    actionFieldManager(options) {
+        var scope = options.scope || null;
+        var field = options.field || null;
+
+        this.main('views/admin/field-manager/index', {scope: scope, field: field});
+    }
+
+    actionEntityManager(options) {
+        var scope = options.scope || null;
+
+        if (scope && options.edit) {
+            this.main('views/admin/entity-manager/edit', {scope: scope});
+
+            return;
+        }
+
+        if (options.create) {
+            this.main('views/admin/entity-manager/edit');
+
+            return;
+        }
+
+        if (scope && options.formula) {
+            this.main('views/admin/entity-manager/formula', {scope: scope, type: options.type});
+
+            return;
+        }
+
+        if (scope) {
+            this.main('views/admin/entity-manager/scope', {scope: scope});
+
+            return;
+        }
+
+        this.main('views/admin/entity-manager/index');
+    }
+
+    actionLinkManager(options) {
+        var scope = options.scope || null;
+
+        this.main('views/admin/link-manager/index', {scope: scope});
+    }
+
+    actionSystemRequirements() {
+        this.main('views/admin/system-requirements/index');
+    }
 
     /**
-     * @class
-     * @name Class
-     * @memberOf module:controllers/admin
-     * @extends module:controller.Class
+     * @returns {module:models/settings}
      */
-    return Dep.extend(/** @lends module:controllers/admin.Class# */{
-
-        /**
-         * @inheritDoc
-         */
-        checkAccessGlobal: function () {
-            if (this.getUser().isAdmin()) {
-                return true;
-            }
-
-            return false;
-        },
-
-        actionPage: function (options) {
-            let page = options.page;
-
-            if (options.options) {
-                options = _.extend(
-                    Espo.Utils.parseUrlOptionsParam(options.options),
-                    options
-                );
-
-                delete options.options;
-            }
-
-            if (!page) {
-                throw new Error();
-            }
-
-            let methodName = 'action' + Espo.Utils.upperCaseFirst(page);
-
-            if (this[methodName]) {
-                this[methodName](options);
-
-                return;
-            }
-
-            let defs = this.getPageDefs(page);
-
-            if (!defs) {
-                throw new Espo.Exceptions.NotFound();
-            }
-
-            if (defs.view) {
-                this.main(defs.view, options);
-
-                return;
-            }
-
-            if (defs.recordView) {
-                let model = this.getSettingsModel();
-
-                model.fetch().then(() => {
-                    model.id = '1';
-
-                    this.main('views/settings/edit', {
-                        model: model,
-                        headerTemplate: 'admin/settings/headers/page',
-                        recordView: defs.recordView,
-                        page: page,
-                        label: defs.label,
-                        optionsToPass: [
-                            'page',
-                            'label',
-                        ],
-                    });
-                });
-
-                return;
-            }
-
-            throw new Espo.Exceptions.NotFound();
-        },
-
-        actionIndex: function (options) {
-            var isReturn = options.isReturn;
-            var key = this.name + 'Index';
-
-            if (this.getRouter().backProcessed) {
-                isReturn = true;
-            }
-
-            if (!isReturn && this.getStoredMainView(key)) {
-                this.clearStoredMainView(key);
-            }
-
-            this.main('views/admin/index', null, view => {
-                view.render();
-
-                this.listenTo(view, 'clear-cache', this.clearCache);
-                this.listenTo(view, 'rebuild', this.rebuild);
-            }, isReturn, key);
-        },
-
-        actionUsers: function () {
-            this.getRouter().dispatch('User', 'list', {fromAdmin: true});
-        },
-
-        actionPortalUsers: function () {
-            this.getRouter().dispatch('PortalUser', 'list', {fromAdmin: true});
-        },
-
-        actionApiUsers: function () {
-            this.getRouter().dispatch('ApiUser', 'list', {fromAdmin: true});
-        },
-
-        actionTeams: function () {
-            this.getRouter().dispatch('Team', 'list', {fromAdmin: true});
-        },
-
-        actionRoles: function () {
-            this.getRouter().dispatch('Role', 'list', {fromAdmin: true});
-        },
-
-        actionPortalRoles: function () {
-            this.getRouter().dispatch('PortalRole', 'list', {fromAdmin: true});
-        },
-
-        actionPortals: function () {
-            this.getRouter().dispatch('Portal', 'list', {fromAdmin: true});
-        },
-
-        actionLeadCapture: function () {
-            this.getRouter().dispatch('LeadCapture', 'list', {fromAdmin: true});
-        },
-
-        actionEmailFilters: function () {
-            this.getRouter().dispatch('EmailFilter', 'list', {fromAdmin: true});
-        },
-
-        actionGroupEmailFolders: function () {
-            this.getRouter().dispatch('GroupEmailFolder', 'list', {fromAdmin: true});
-        },
-
-        actionEmailTemplates: function () {
-            this.getRouter().dispatch('EmailTemplate', 'list', {fromAdmin: true});
-        },
-
-        actionPdfTemplates: function () {
-            this.getRouter().dispatch('Template', 'list', {fromAdmin: true});
-        },
-
-        actionDashboardTemplates: function () {
-            this.getRouter().dispatch('DashboardTemplate', 'list', {fromAdmin: true});
-        },
-
-        actionWebhooks: function () {
-            this.getRouter().dispatch('Webhook', 'list', {fromAdmin: true});
-        },
-
-        actionLayoutSets: function () {
-            this.getRouter().dispatch('LayoutSet', 'list', {fromAdmin: true});
-        },
-
-        actionWorkingTimeCalendar: function () {
-            this.getRouter().dispatch('WorkingTimeCalendar', 'list', {fromAdmin: true});
-        },
-
-        actionAttachments: function () {
-            this.getRouter().dispatch('Attachment', 'list', {fromAdmin: true});
-        },
-
-        actionAuthenticationProviders: function () {
-            this.getRouter().dispatch('AuthenticationProvider', 'list', {fromAdmin: true});
-        },
-
-        actionEmailAddresses: function () {
-            this.getRouter().dispatch('EmailAddress', 'list', {fromAdmin: true});
-        },
-
-        actionPhoneNumbers: function () {
-            this.getRouter().dispatch('PhoneNumber', 'list', {fromAdmin: true});
-        },
-
-        actionPersonalEmailAccounts: function () {
-            this.getRouter().dispatch('EmailAccount', 'list', {fromAdmin: true});
-        },
-
-        actionGroupEmailAccounts: function () {
-            this.getRouter().dispatch('InboundEmail', 'list', {fromAdmin: true});
-        },
-
-        actionActionHistory: function () {
-            this.getRouter().dispatch('ActionHistoryRecord', 'list', {fromAdmin: true});
-        },
-
-        actionImport: function () {
-            this.getRouter().dispatch('Import', 'index', {fromAdmin: true});
-        },
-
-        actionLayouts: function (options) {
-            var scope = options.scope || null;
-            var type = options.type || null;
-            var em = options.em || false;
-
-            this.main('views/admin/layouts/index', {scope: scope, type: type, em: em});
-        },
-
-        actionLabelManager: function (options) {
-            var scope = options.scope || null;
-            var language = options.language || null;
-
-            this.main('views/admin/label-manager/index', {scope: scope, language: language});
-        },
-
-        actionTemplateManager: function (options) {
-            var name = options.name || null;
-
-            this.main('views/admin/template-manager/index', {name: name});
-        },
-
-        actionFieldManager: function (options) {
-            var scope = options.scope || null;
-            var field = options.field || null;
-
-            this.main('views/admin/field-manager/index', {scope: scope, field: field});
-        },
-
-        actionEntityManager: function (options) {
-            var scope = options.scope || null;
-
-            if (scope && options.edit) {
-                this.main('views/admin/entity-manager/edit', {scope: scope});
-
-                return;
-            }
-
-            if (options.create) {
-                this.main('views/admin/entity-manager/edit');
-
-                return;
-            }
-
-            if (scope && options.formula) {
-                this.main('views/admin/entity-manager/formula', {scope: scope, type: options.type});
-
-                return;
-            }
-
-            if (scope) {
-                this.main('views/admin/entity-manager/scope', {scope: scope});
-
-                return;
-            }
-
-            this.main('views/admin/entity-manager/index');
-        },
-
-        actionLinkManager: function (options) {
-            var scope = options.scope || null;
-
-            this.main('views/admin/link-manager/index', {scope: scope});
-        },
-
-        actionSystemRequirements: function () {
-            this.main('views/admin/system-requirements/index');
-        },
-
-        /**
-         * @returns {module:models/settings.Class}
-         */
-        getSettingsModel: function () {
-            let model = this.getConfig().clone();
-            model.defs = this.getConfig().defs;
-
-            this.listenTo(model, 'after:save', () => {
-                this.getConfig().load();
-
-                this._broadcastChannel.postMessage('update:config');
+    getSettingsModel() {
+        let model = this.getConfig().clone();
+        model.defs = this.getConfig().defs;
+
+        this.listenTo(model, 'after:save', () => {
+            this.getConfig().load();
+
+            this._broadcastChannel.postMessage('update:config');
+        });
+
+        return model;
+    }
+
+    actionAuthTokens() {
+        this.collectionFactory.create('AuthToken', collection => {
+            const searchManager = new SearchManager(
+                collection,
+                'list',
+                this.getStorage(),
+                this.getDateTime()
+            );
+
+            searchManager.loadStored();
+            collection.where = searchManager.getWhere();
+            collection.maxSize = this.getConfig().get('recordsPerPage') || collection.maxSize;
+
+            this.main('views/admin/auth-token/list', {
+                scope: 'AuthToken',
+                collection: collection,
+                searchManager: searchManager
             });
+        });
+    }
 
-            return model;
-        },
+    actionAuthLog() {
+        this.collectionFactory.create('AuthLogRecord', collection => {
+            const searchManager = new SearchManager(
+                collection,
+                'list',
+                this.getStorage(),
+                this.getDateTime()
+            );
 
-        actionAuthTokens: function () {
-            this.collectionFactory.create('AuthToken', collection => {
+            searchManager.loadStored();
 
-                var searchManager = new SearchManager(
-                    collection,
-                    'list',
-                    this.getStorage(),
-                    this.getDateTime()
-                );
+            collection.where = searchManager.getWhere();
+            collection.maxSize = this.getConfig().get('recordsPerPage') || collection.maxSize;
 
-                searchManager.loadStored();
-                collection.where = searchManager.getWhere();
-                collection.maxSize = this.getConfig().get('recordsPerPage') || collection.maxSize;
-
-                this.main('views/admin/auth-token/list', {
-                    scope: 'AuthToken',
-                    collection: collection,
-                    searchManager: searchManager
-                });
+            this.main('views/admin/auth-log-record/list', {
+                scope: 'AuthLogRecord',
+                collection: collection,
+                searchManager: searchManager
             });
-        },
+        });
+    }
 
-        actionAuthLog: function () {
-            this.collectionFactory.create('AuthLogRecord', collection => {
-                var searchManager = new SearchManager(
-                    collection,
-                    'list',
-                    this.getStorage(),
-                    this.getDateTime()
-                );
+    actionJobs() {
+        this.collectionFactory.create('Job', collection => {
+            const searchManager = new SearchManager(
+                collection,
+                'list',
+                this.getStorage(),
+                this.getDateTime()
+            );
 
-                searchManager.loadStored();
+            searchManager.loadStored();
 
-                collection.where = searchManager.getWhere();
-                collection.maxSize = this.getConfig().get('recordsPerPage') || collection.maxSize;
+            collection.where = searchManager.getWhere();
+            collection.maxSize = this.getConfig().get('recordsPerPage') || collection.maxSize;
 
-                this.main('views/admin/auth-log-record/list', {
-                    scope: 'AuthLogRecord',
-                    collection: collection,
-                    searchManager: searchManager
-                });
+            this.main('views/admin/job/list', {
+                scope: 'Job',
+                collection: collection,
+                searchManager: searchManager,
             });
-        },
+        });
+    }
 
-        actionJobs: function () {
-            this.collectionFactory.create('Job', collection => {
-                var searchManager = new SearchManager(
-                    collection,
-                    'list',
-                    this.getStorage(),
-                    this.getDateTime()
-                );
+    actionIntegrations(options) {
+        var integration = options.name || null;
 
-                searchManager.loadStored();
+        this.main('views/admin/integrations/index', {integration: integration});
+    }
 
-                collection.where = searchManager.getWhere();
-                collection.maxSize = this.getConfig().get('recordsPerPage') || collection.maxSize;
+    actionExtensions() {
+        this.main('views/admin/extensions/index');
+    }
 
-                this.main('views/admin/job/list', {
-                    scope: 'Job',
-                    collection: collection,
-                    searchManager: searchManager,
-                });
+    rebuild() {
+        if (this.rebuildRunning) {
+            return;
+        }
+
+        this.rebuildRunning = true;
+
+        let master = this.get('master');
+
+        Espo.Ui.notify(master.translate('pleaseWait', 'messages'));
+
+        Espo.Ajax
+            .postRequest('Admin/rebuild')
+            .then(() => {
+                let msg = master.translate('Rebuild has been done', 'labels', 'Admin');
+
+                Espo.Ui.success(msg);
+
+                this.rebuildRunning = false;
+            })
+            .catch(() => {
+                this.rebuildRunning = false;
             });
-        },
+    }
 
-        actionIntegrations: function (options) {
-            var integration = options.name || null;
+    clearCache() {
+        if (this.clearCacheRunning) {
+            return;
+        }
 
-            this.main('views/admin/integrations/index', {integration: integration});
-        },
+        this.clearCacheRunning = true;
 
-        actionExtensions: function () {
-            this.main('views/admin/extensions/index');
-        },
+        const master = this.get('master');
 
-        rebuild: function () {
-            if (this.rebuildRunning) {
-                return;
-            }
+        Espo.Ui.notify(master.translate('pleaseWait', 'messages'));
 
-            this.rebuildRunning = true;
+        Espo.Ajax.postRequest('Admin/clearCache')
+            .then(() => {
+                let msg = master.translate('Cache has been cleared', 'labels', 'Admin');
 
-            var master = this.get('master');
+                Espo.Ui.success(msg);
 
-            Espo.Ui.notify(master.translate('pleaseWait', 'messages'));
+                this.clearCacheRunning = false;
+            })
+            .catch(() => {
+                this.clearCacheRunning = false;
+            });
+    }
 
-            Espo.Ajax
-                .postRequest('Admin/rebuild')
-                .then(() => {
-                    let msg = master.translate('Rebuild has been done', 'labels', 'Admin');
+    /**
+     * @returns {Object|null}
+     */
+    getPageDefs(page) {
+        let panelsDefs = this.getMetadata().get(['app', 'adminPanel']) || {};
 
-                    Espo.Ui.success(msg);
+        let resultDefs = null;
 
-                    this.rebuildRunning = false;
-                })
-                .catch(() => {
-                    this.rebuildRunning = false;
-                });
-        },
+        for (let panelKey in panelsDefs) {
+            let itemList = panelsDefs[panelKey].itemList || [];
 
-        clearCache: function () {
-            if (this.clearCacheRunning) {
-                return;
-            }
+            for (let defs of itemList) {
+                if (defs.url === '#Admin/' + page) {
+                    resultDefs = defs;
 
-            this.clearCacheRunning = true;
-
-            var master = this.get('master');
-            Espo.Ui.notify(master.translate('pleaseWait', 'messages'));
-
-            Espo.Ajax.postRequest('Admin/clearCache')
-                .then(() => {
-                    let msg = master.translate('Cache has been cleared', 'labels', 'Admin');
-
-                    Espo.Ui.success(msg);
-
-                    this.clearCacheRunning = false;
-                })
-                .catch(() => {
-                    this.clearCacheRunning = false;
-                });
-        },
-
-        /**
-         * @returns {Object|null}
-         */
-        getPageDefs: function (page) {
-            let panelsDefs = this.getMetadata().get(['app', 'adminPanel']) || {};
-
-            let resultDefs = null;
-
-            for (let panelKey in panelsDefs) {
-                let itemList = panelsDefs[panelKey].itemList || [];
-
-                for (let defs of itemList) {
-                    if (defs.url === '#Admin/' + page) {
-                        resultDefs = defs;
-
-                        break;
-                    }
-                }
-
-                if (resultDefs) {
                     break;
                 }
             }
 
-            return resultDefs;
-        },
-    });
-});
+            if (resultDefs) {
+                break;
+            }
+        }
+
+        return resultDefs;
+    }
+}
+
+export default AdminController;
diff --git a/client/src/controllers/api-user.js b/client/src/controllers/api-user.js
index 37cbc81b0c..3dc1ebe234 100644
--- a/client/src/controllers/api-user.js
+++ b/client/src/controllers/api-user.js
@@ -31,7 +31,7 @@ define('controllers/api-user', ['controllers/record'], function (Dep) {
     /**
      * @class
      * @name Class
-     * @extends module:controllers/record.Class
+     * @extends module:controllers/record
      * @memberOf module:controllers/api-user
      */
     return Dep.extend(/** @lends module:controllers/api-user.Class# */{
diff --git a/client/src/controllers/base.js b/client/src/controllers/base.js
index a989dad7e9..557034f83b 100644
--- a/client/src/controllers/base.js
+++ b/client/src/controllers/base.js
@@ -26,140 +26,142 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('controllers/base', ['controller'], function (Dep) {
+/** @module controllers/base */
+
+import Controller from 'controller';
+
+/**
+ * A base controller.
+ */
+class BaseController extends Controller {
 
     /**
-     * A base controller.
+     * Log in.
      *
-     * @class
-     * @name Class
-     * @extends module:controller.Class
-     * @memberOf module:controllers/base
+     * @param {{
+     *     anotherUser?: string,
+     *     username?: string,
+     * }} [options]
      */
-    return Dep.extend(/** @lends module:controllers/base.Class# */{
+    login(options) {
+        let viewName = this.getConfig().get('loginView') || 'views/login';
 
-        /**
-         * Log in.
-         */
-        login: function (options) {
-            let viewName = this.getConfig().get('loginView') || 'views/login';
+        let anotherUser = (options || {}).anotherUser;
+        let prefilledUsername = (options || {}).username;
 
-            let anotherUser = (options || {}).anotherUser;
-            let prefilledUsername = (options || {}).username;
+        let viewOptions = {
+            anotherUser: anotherUser,
+            prefilledUsername: prefilledUsername,
+        };
 
-            let viewOptions = {
-                anotherUser: anotherUser,
-                prefilledUsername: prefilledUsername,
-            };
+        this.entire(viewName, viewOptions, loginView => {
+            loginView.render();
 
-            this.entire(viewName, viewOptions, loginView => {
-                loginView.render();
+            loginView.on('login', (userName, data) => {
+                this.trigger('login', this.normalizeLoginData(userName, data));
+            });
 
-                loginView.on('login', (userName, data) => {
-                    this.trigger('login', this.normalizeLoginData(userName, data));
-                });
+            loginView.once('redirect', (viewName, headers, userName, password, data) => {
+                loginView.remove();
 
-                loginView.once('redirect', (viewName, headers, userName, password, data) => {
-                    loginView.remove();
+                this.entire(viewName, {
+                    loginData: data,
+                    userName: userName,
+                    password: password,
+                    anotherUser: anotherUser,
+                    headers: headers,
+                }, secondStepView => {
+                    secondStepView.render();
 
-                    this.entire(viewName, {
-                        loginData: data,
-                        userName: userName,
-                        password: password,
-                        anotherUser: anotherUser,
-                        headers: headers,
-                    }, secondStepView => {
-                        secondStepView.render();
+                    secondStepView.once('login', (userName, data) => {
+                        this.trigger('login', this.normalizeLoginData(userName, data));
+                    });
 
-                        secondStepView.once('login', (userName, data) => {
-                            this.trigger('login', this.normalizeLoginData(userName, data));
-                        });
+                    secondStepView.once('back', () => {
+                        secondStepView.remove();
 
-                        secondStepView.once('back', () => {
-                            secondStepView.remove();
-
-                            this.login();
-                        });
+                        this.login();
                     });
                 });
             });
-        },
+        });
+    }
 
-        /**
-         * @private
-         */
-        normalizeLoginData: function (userName, data) {
-            return {
-                auth: {
-                    userName: userName,
-                    token: data.token,
-                    anotherUser: data.anotherUser,
-                },
-                user: data.user,
-                preferences: data.preferences,
-                acl: data.acl,
-                settings: data.settings,
-                appParams: data.appParams,
-                language: data.language,
-            };
-        },
+    /** @private */
+    normalizeLoginData(userName, data) {
+        return {
+            auth: {
+                userName: userName,
+                token: data.token,
+                anotherUser: data.anotherUser,
+            },
+            user: data.user,
+            preferences: data.preferences,
+            acl: data.acl,
+            settings: data.settings,
+            appParams: data.appParams,
+            language: data.language,
+        };
+    }
 
-        /**
-         * Log out.
-         */
-        logout: function () {
-            var title = this.getConfig().get('applicationName') || 'EspoCRM';
-            $('head title').text(title);
+    /**
+     * Log out.
+     */
+    logout() {
+        let title = this.getConfig().get('applicationName') || 'EspoCRM';
 
-            this.trigger('logout');
-        },
+        $('head title').text(title);
 
-        /**
-         * Clear cache.
-         */
-        clearCache: function () {
-            this.entire('views/clear-cache', {
-                cache: this.getCache()
-            }, view => {
-                view.render();
-            });
-        },
+        this.trigger('logout');
+    }
 
-        actionLogin: function () {
-            this.login();
-        },
+    /**
+     * Clear cache.
+     */
+    clearCache() {
+        this.entire('views/clear-cache', {
+            cache: this.getCache(),
+        }, view => {
+            view.render();
+        });
+    }
 
-        actionLogout: function () {
-            this.logout();
-        },
+    actionLogin() {
+        this.login();
+    }
 
-        actionLogoutWait: function () {
-            this.entire('views/base', {template: 'logout-wait'}, view => {
-                view.render()
-                    .then(() => Espo.Ui.notify(' ... '))
-            });
-        },
+    actionLogout() {
+        this.logout();
+    }
 
-        actionClearCache: function () {
-            this.clearCache();
-        },
+    actionLogoutWait() {
+        this.entire('views/base', {template: 'logout-wait'}, view => {
+            view.render()
+                .then(() => Espo.Ui.notify(' ... '))
+        });
+    }
 
-        /**
-         * Error Not Found.
-         */
-        error404: function () {
-            this.entire('views/base', {template: 'errors/404'}, (view) => {
-                view.render();
-            });
-        },
+    actionClearCache() {
+        this.clearCache();
+    }
 
-        /**
-         * Error Forbidden.
-         */
-        error403: function () {
-            this.entire('views/base', {template: 'errors/403'}, (view) => {
-                view.render();
-            });
-        },
-    });
-});
+    /**
+     * Error Not Found.
+     */
+    error404() {
+        this.entire('views/base', {template: 'errors/404'}, view => {
+            view.render();
+        });
+    }
+
+    /**
+     * Error Forbidden.
+     */
+    error403() {
+        this.entire('views/base', {template: 'errors/403'}, view => {
+            view.render();
+        });
+    }
+}
+
+export default BaseController;
diff --git a/client/src/controllers/home.js b/client/src/controllers/home.js
index cc98b9a697..cf59753d83 100644
--- a/client/src/controllers/home.js
+++ b/client/src/controllers/home.js
@@ -32,6 +32,6 @@ define('controllers/home', ['controller'], function (Dep) {
 
         actionIndex: function () {
             this.main('views/home', null);
-        }
+        },
     });
 });
diff --git a/client/src/controllers/note.js b/client/src/controllers/note.js
index 13cbf368e1..67f1d3898e 100644
--- a/client/src/controllers/note.js
+++ b/client/src/controllers/note.js
@@ -31,7 +31,7 @@ define('controllers/note', ['controller'], function (Dep) {
     /**
      * @class
      * @name Class
-     * @extends module:controller.Class
+     * @extends module:controller
      * @memberOf module:controllers/note
      */
     return Dep.extend(/** @lends module:controllers/note.Class# */{
diff --git a/client/src/controllers/portal-user.js b/client/src/controllers/portal-user.js
index 22bc2cfbb2..51b373abbc 100644
--- a/client/src/controllers/portal-user.js
+++ b/client/src/controllers/portal-user.js
@@ -31,7 +31,7 @@ define('controllers/portal-user', ['controllers/record'], function (Dep) {
     /**
      * @class
      * @name Class
-     * @extends module:controllers/record.Class
+     * @extends module:controllers/record
      * @memberOf module:controllers/portal-user
      */
     return Dep.extend(/** @lends module:controllers/portal-user.Class# */{
diff --git a/client/src/controllers/record.js b/client/src/controllers/record.js
index 25a15cf4c4..55ce67a2a7 100644
--- a/client/src/controllers/record.js
+++ b/client/src/controllers/record.js
@@ -26,495 +26,485 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('controllers/record', ['controller'], function (Dep) {
+/** @module controllers/record */
+
+import Controller from 'controller';
+
+/**
+ * A record controller.
+ */
+class RecordController extends Controller {
+
+    /** @inheritDoc */
+    defaultAction = 'list'
+
+    constructor(params, injections) {
+        super(params, injections);
+
+        /**
+         * @private
+         * @type {Object}
+         */
+        this.collectionMap = {};
+    }
+
+    /** @inheritDoc */
+    checkAccess(action) {
+        if (this.getAcl().check(this.name, action)) {
+            return true;
+        }
+
+        return false;
+    }
 
     /**
-     * A record controller.
+     * Get a view name/path.
      *
-     * @class
-     * @name Class
-     * @extends module:controller.Class
-     * @memberOf module:controllers/record
+     * @protected
+     * @param {'list'|'detail'|'edit'|'create'|'listRelated'} type A type.
+     * @returns {string}
      */
-    return Dep.extend(/** @lends module:controllers/record.Class# */{
+    getViewName(type) {
+        return this.getMetadata().get(['clientDefs', this.name, 'views', type]) ||
+            'views/' + Espo.Utils.camelCaseToHyphen(type);
+    }
 
-        /**
-         * A type => view-name map.
-         * @protected
-         * @type {Object.<string,string>}
-         */
-        viewMap: null,
+    beforeList() {
+        this.handleCheckAccess('read');
+    }
 
-        /**
-         * @inheritDoc
-         */
-        defaultAction: 'list',
+    actionList(options) {
+        let isReturn = options.isReturn || this.getRouter().backProcessed;
 
-        /**
-         * @inheritDoc
-         */
-        checkAccess: function (action) {
-            if (this.getAcl().check(this.name, action)) {
-                return true;
+        let key = this.name + 'List';
+
+        if (!isReturn && this.getStoredMainView(key)) {
+            this.clearStoredMainView(key);
+        }
+
+        this.getCollection(collection => {
+            let mediator = {};
+
+            let abort = () => {
+                collection.abortLastFetch();
+                mediator.abort = true;
+
+                Espo.Ui.notify(false);
+            };
+
+            this.listenToOnce(this.baseController, 'action', abort);
+            this.listenToOnce(collection, 'sync', () =>
+                this.stopListening(this.baseController, 'action', abort));
+
+            this.main(this.getViewName('list'), {
+                scope: this.name,
+                collection: collection,
+                params: options,
+                mediator: mediator,
+            }, null, isReturn, key);
+        }, this, false);
+    }
+
+    beforeView() {
+        this.handleCheckAccess('read');
+    }
+
+    /**
+     * @protected
+     * @param {Object} options
+     * @param {module:model} model
+     * @param {string|null} [view]
+     */
+    createViewView(options, model, view) {
+        view = view || this.getViewName('detail');
+
+        this.main(view, {
+            scope: this.name,
+            model: model,
+            returnUrl: options.returnUrl,
+            returnDispatchParams: options.returnDispatchParams,
+            params: options,
+        });
+    }
+
+    /**
+     * @protected
+     * @param {module:model} model
+     * @param {Object} options
+     */
+    prepareModelView(model, options) {}
+
+    /**
+     * @param {{
+     *     model?: module:model,
+     *     id?: string,
+     *     isReturn?: boolean,
+     *     isAfterCreate?: boolean,
+     * }} options
+     */
+    actionView(options) {
+        let id = options.id;
+
+        let isReturn = this.getRouter().backProcessed;
+
+        if (isReturn) {
+            if (this.lastViewActionOptions && this.lastViewActionOptions.id === id) {
+                options = Espo.Utils.clone(this.lastViewActionOptions);
+
+                if (options.model && options.model.get('deleted')) {
+                    delete options.model;
+                }
             }
 
-            return false;
-        },
+            options.isReturn = true;
+        }
+        else {
+            delete this.lastViewActionOptions;
+        }
 
-        /**
-         * @inheritDoc
-         */
-        initialize: function () {
-            /**
-             * A type => view-name map.
-             * @protected
-             * @type {Object.<string,string>}
-             */
-            this.viewMap = this.viewMap || {};
-            this.viewsMap = this.viewsMap || {};
+        this.lastViewActionOptions = options;
 
-            /**
-             * @private
-             * @type {Object}
-             */
-            this.collectionMap = {};
-        },
+        const createView = model => {
+            this.prepareModelView(model, options);
 
-        /**
-         * Get a view name/path.
-         *
-         * @protected
-         * @param {'list'|'detail'|'edit'|'create'} type A type.
-         * @returns {string}
-         */
-        getViewName: function (type) {
-            return this.viewMap[type] ||
-                this.getMetadata().get(['clientDefs', this.name, 'views', type]) ||
-                'views/' + Espo.Utils.camelCaseToHyphen(type);
-        },
+            this.createViewView.call(this, options, model);
+        };
 
-        beforeList: function () {
-            this.handleCheckAccess('read');
-        },
+        if ('model' in options) {
+            let model = options.model;
 
-        actionList: function (options) {
-            let isReturn = options.isReturn || this.getRouter().backProcessed;
+            createView(model);
 
+            this.showLoadingNotification();
+
+            model.fetch()
+                .then(() => this.hideLoadingNotification())
+                .catch(xhr => {
+                    if (
+                        xhr.status === 403 &&
+                        options.isAfterCreate
+                    ) {
+                        this.hideLoadingNotification();
+                        xhr.errorIsHandled = true;
+
+                        model.trigger('fetch-forbidden');
+                    }
+                });
+
+            this.listenToOnce(this.baseController, 'action', () => {
+                model.abortLastFetch();
+                this.hideLoadingNotification();
+            });
+
+            return;
+        }
+
+        this.getModel().then(model => {
+            model.id = id;
+
+            this.showLoadingNotification();
+
+            model.fetch({main: true})
+                .then(() => {
+                    this.hideLoadingNotification();
+
+                    if (model.get('deleted')) {
+                        this.listenToOnce(model, 'after:restore-deleted', () => {
+                            createView(model);
+                        });
+
+                        this.prepareModelView(model, options);
+                        this.createViewView(options, model, 'views/deleted-detail');
+
+                        return;
+                    }
+
+                    createView(model);
+                });
+
+            this.listenToOnce(this.baseController, 'action', () => {
+                model.abortLastFetch();
+            });
+        });
+    }
+
+    beforeCreate() {
+        this.handleCheckAccess('create');
+    }
+
+    /**
+     * @protected
+     * @param {module:model} model
+     * @param {Object} options
+     */
+    prepareModelCreate(model, options) {
+        this.listenToOnce(model, 'before:save', () => {
             let key = this.name + 'List';
 
-            if (!isReturn && this.getStoredMainView(key)) {
+            let stored = this.getStoredMainView(key);
+
+            if (stored && !stored.storeViewAfterCreate) {
                 this.clearStoredMainView(key);
             }
+        });
 
-            this.getCollection(collection => {
-                let mediator = {};
+        this.listenToOnce(model, 'after:save', () => {
+            let key = this.name + 'List';
 
-                let abort = () => {
-                    collection.abortLastFetch();
-                    mediator.abort = true;
-                    Espo.Ui.notify(false);
-                };
+            let stored = this.getStoredMainView(key);
 
-                this.listenToOnce(this.baseController, 'action', abort);
-                this.listenToOnce(collection, 'sync', () =>
-                    this.stopListening(this.baseController, 'action', abort));
+            if (stored && stored.storeViewAfterCreate && stored.collection) {
+                this.listenToOnce(stored, 'after:render', () => {
+                    stored.collection.fetch();
+                });
+            }
+        });
+    }
 
-                this.main(this.getViewName('list'), {
-                    scope: this.name,
-                    collection: collection,
-                    params: options,
-                    mediator: mediator,
-                }, null, isReturn, key);
-            }, this, false);
-        },
+    create(options) {
+        options = options || {};
 
-        beforeView: function () {
-            this.handleCheckAccess('read');
-        },
+        let optionsOptions = options.options || {};
 
-        createViewView: function (options, model, view) {
-            view = view || this.getViewName('detail');
+        this.getModel().then(model => {
+            if (options.relate) {
+                model.setRelate(options.relate);
+            }
 
-            this.main(view, {
+            let o = {
                 scope: this.name,
                 model: model,
                 returnUrl: options.returnUrl,
                 returnDispatchParams: options.returnDispatchParams,
                 params: options,
-            });
-        },
-
-        /**
-         * @protected
-         * @param {module:model.Class} model
-         * @param {Object} options
-         */
-        prepareModelView: function (model, options) {},
-
-        actionView: function (options) {
-            let id = options.id;
-
-            let isReturn = this.getRouter().backProcessed;
-
-            if (isReturn) {
-                if (this.lastViewActionOptions && this.lastViewActionOptions.id === id) {
-                    options = Espo.Utils.clone(this.lastViewActionOptions);
-
-                    if (options.model && options.model.get('deleted')) {
-                        delete options.model;
-                    }
-                }
-
-                options.isReturn = true;
-            }
-            else {
-                delete this.lastViewActionOptions;
-            }
-
-            this.lastViewActionOptions = options;
-
-            let createView = (model) => {
-                this.prepareModelView(model, options);
-
-                this.createViewView.call(this, options, model);
             };
 
-            if ('model' in options) {
-                let model = options.model;
-
-                createView(model);
-
-                this.showLoadingNotification();
-
-                model
-                    .fetch()
-                    .then(() => this.hideLoadingNotification())
-                    .catch(xhr => {
-                        if (
-                            xhr.status === 403 &&
-                            options.isAfterCreate
-                        ) {
-                            this.hideLoadingNotification();
-                            xhr.errorIsHandled = true;
-
-                            model.trigger('fetch-forbidden');
-                        }
-                    });
-
-                this.listenToOnce(this.baseController, 'action', () => {
-                    model.abortLastFetch();
-                    this.hideLoadingNotification();
-                });
-
-                return;
+            for (let k in optionsOptions) {
+                o[k] = optionsOptions[k];
             }
 
-            this.getModel().then(model => {
-                model.id = id;
+            if (options.attributes) {
+                model.set(options.attributes);
+            }
 
-                this.showLoadingNotification();
+            this.prepareModelCreate(model, options);
 
-                model
-                    .fetch({main: true})
-                    .then(() => {
-                        this.hideLoadingNotification();
+            this.main(this.getViewName('edit'), o);
+        });
+    }
 
-                        if (model.get('deleted')) {
-                            this.listenToOnce(model, 'after:restore-deleted', () => {
-                                createView(model);
-                            });
+    actionCreate(options) {
+        this.create(options);
+    }
 
-                            this.prepareModelView(model, options);
-                            this.createViewView(options, model, 'views/deleted-detail');
+    beforeEdit() {
+        this.handleCheckAccess('edit');
+    }
 
-                            return;
-                        }
+    /**
+     * @protected
+     * @param {module:model} model
+     * @param {Object} options
+     */
+    prepareModelEdit(model, options) {
+        this.listenToOnce(model, 'before:save', () => {
+            let key = this.name + 'List';
 
-                        createView(model);
-                    });
+            let stored = this.getStoredMainView(key);
 
-                this.listenToOnce(this.baseController, 'action', () => {
-                    model.abortLastFetch();
-                });
-            });
-        },
+            if (stored && !stored.storeViewAfterUpdate) {
+                this.clearStoredMainView(key);
+            }
+        });
+    }
 
-        beforeCreate: function () {
-            this.handleCheckAccess('create');
-        },
+    actionEdit(options) {
+        let id = options.id;
 
-        /**
-         * @protected
-         * @param {module:model.Class} model
-         * @param {Object} options
-         */
-        prepareModelCreate: function (model, options) {
-            this.listenToOnce(model, 'before:save', () => {
-                let key = this.name + 'List';
+        let optionsOptions = options.options || {};
 
-                let stored = this.getStoredMainView(key);
+        this.getModel().then(model => {
+            model.id = id;
 
-                if (stored && !stored.storeViewAfterCreate) {
-                    this.clearStoredMainView(key);
-                }
-            });
+            if (options.model) {
+                model = options.model;
+            }
 
-            this.listenToOnce(model, 'after:save', () => {
-                let key = this.name + 'List';
+            this.prepareModelEdit(model, options);
 
-                let stored = this.getStoredMainView(key);
+            this.showLoadingNotification();
 
-                if (stored && stored.storeViewAfterCreate && stored.collection) {
-                    this.listenToOnce(stored, 'after:render', () => {
-                        stored.collection.fetch();
-                    });
-                }
-            });
-        },
-
-        create: function (options) {
-            options = options || {};
-
-            let optionsOptions = options.options || {};
-
-            this.getModel().then((model) => {
-                if (options.relate) {
-                    model.setRelate(options.relate);
-                }
-
-                let o = {
-                    scope: this.name,
-                    model: model,
-                    returnUrl: options.returnUrl,
-                    returnDispatchParams: options.returnDispatchParams,
-                    params: options,
-                };
-
-                for (let k in optionsOptions) {
-                    o[k] = optionsOptions[k];
-                }
-
-                if (options.attributes) {
-                    model.set(options.attributes);
-                }
-
-                this.prepareModelCreate(model, options);
-
-                this.main(this.getViewName('edit'), o);
-            });
-        },
-
-        actionCreate: function (options) {
-            this.create(options);
-        },
-
-        beforeEdit: function () {
-            this.handleCheckAccess('edit');
-        },
-
-        /**
-         * @protected
-         * @param {module:model.Class} model
-         * @param {Object} options
-         */
-        prepareModelEdit: function (model, options) {
-            this.listenToOnce(model, 'before:save', () => {
-                let key = this.name + 'List';
-
-                let stored = this.getStoredMainView(key);
-
-                if (stored && !stored.storeViewAfterUpdate) {
-                    this.clearStoredMainView(key);
-                }
-            });
-        },
-
-        actionEdit: function (options) {
-            let id = options.id;
-
-            let optionsOptions = options.options || {};
-
-            this.getModel().then(model => {
-                model.id = id;
-
-                if (options.model) {
-                    model = options.model;
-                }
-
-                this.prepareModelEdit(model, options);
-
-                this.showLoadingNotification();
-
-                model
-                    .fetch({main: true})
-                    .then(() => {
-                        this.hideLoadingNotification();
-
-                        let o = {
-                            scope: this.name,
-                            model: model,
-                            returnUrl: options.returnUrl,
-                            returnDispatchParams: options.returnDispatchParams,
-                            params: options,
-                        };
-
-                        for (let k in optionsOptions) {
-                            o[k] = optionsOptions[k];
-                        }
-
-                        if (options.attributes) {
-                            o.attributes = options.attributes;
-                        }
-
-                        this.main(this.getViewName('edit'), o);
-                    });
-
-                this.listenToOnce(this.baseController, 'action', () => {
-                    model.abortLastFetch();
-                });
-            });
-        },
-
-        beforeMerge: function () {
-            this.handleCheckAccess('edit');
-        },
-
-        actionMerge: function (options) {
-            let ids = options.ids.split(',');
-
-            this.getModel().then((model) => {
-                let models = [];
-
-                let proceed = () => {
-                    this.main('views/merge', {
-                        models: models,
-                        scope: this.name,
-                        collection: options.collection
-                    });
-                };
-
-                let i = 0;
-
-                ids.forEach(id => {
-                    let current = model.clone();
-
-                    current.id = id;
-                    models.push(current);
-
-                    this.listenToOnce(current, 'sync', () => {
-                        i++;
-
-                        if (i === ids.length) {
-                            proceed();
-                        }
-                    });
-
-                    current.fetch();
-                });
-            });
-        },
-
-        actionRelated: function (options) {
-            let id = options.id;
-            let link = options.link;
-
-            let viewName = this.getViewName('listRelated');
-
-            let model;
-
-            this.getModel()
-                .then(m => {
-                    model = m;
-                    model.id = id;
-
-                    return model.fetch({main: true});
-                })
+            model
+                .fetch({main: true})
                 .then(() => {
-                    let foreignEntityType = model.getLinkParam(link, 'entity');
+                    this.hideLoadingNotification();
 
-                    if (!foreignEntityType) {
-                        this.baseController.error404();
-
-                        throw new Error(`Bad link '${link}'.`);
-                    }
-
-                    return this.collectionFactory.create(foreignEntityType);
-                })
-                .then(collection => {
-                    collection.url = model.entityType + '/' + id + '/' + link;
-
-                    this.main(viewName, {
+                    let o = {
                         scope: this.name,
                         model: model,
-                        collection: collection,
-                        link: link,
-                    });
-                })
-        },
+                        returnUrl: options.returnUrl,
+                        returnDispatchParams: options.returnDispatchParams,
+                        params: options,
+                    };
 
-        /**
-         * Get a collection for the current controller.
-         *
-         * @protected
-         * @param {function(module:collection.Class): void|null} [callback]
-         * @param {Object|null} [context]
-         * @param {boolean} [usePreviouslyFetched=false] Use a previously fetched.
-         * @return {Promise<module:collection.Class>}
-         */
-        getCollection: function (callback, context, usePreviouslyFetched) {
-            context = context || this;
+                    for (let k in optionsOptions) {
+                        o[k] = optionsOptions[k];
+                    }
 
-            if (!this.name) {
-                throw new Error('No collection for unnamed controller');
-            }
+                    if (options.attributes) {
+                        o.attributes = options.attributes;
+                    }
 
-            let collectionName = this.entityType || this.name;
-
-            if (usePreviouslyFetched) {
-                if (collectionName in this.collectionMap) {
-                    let collection = this.collectionMap[collectionName];
-
-                    callback.call(context, collection);
-
-                    return Promise.resolve(collection);
-                }
-            }
-
-            return this.collectionFactory.create(collectionName, (collection) => {
-                this.collectionMap[collectionName] = collection;
-
-                this.listenTo(collection, 'sync', () => {
-                    collection.isFetched = true;
+                    this.main(this.getViewName('edit'), o);
                 });
 
-                if (callback) {
-                    callback.call(context, collection);
-                }
+            this.listenToOnce(this.baseController, 'action', () => {
+                model.abortLastFetch();
             });
-        },
+        });
+    }
 
-        /**
-         * Get a model for the current controller.
-         *
-         * @protected
-         * @param {Function} [callback]
-         * @param {Object} [context]
-         * @return {Promise<module:model.Class>}
-         */
-        getModel: function (callback, context) {
-            context = context || this;
+    beforeMerge() {
+        this.handleCheckAccess('edit');
+    }
 
-            if (!this.name) {
-                throw new Error('No collection for unnamed controller');
+    actionMerge(options) {
+        let ids = options.ids.split(',');
+
+        this.getModel().then((model) => {
+            let models = [];
+
+            let proceed = () => {
+                this.main('views/merge', {
+                    models: models,
+                    scope: this.name,
+                    collection: options.collection
+                });
+            };
+
+            let i = 0;
+
+            ids.forEach(id => {
+                let current = model.clone();
+
+                current.id = id;
+                models.push(current);
+
+                this.listenToOnce(current, 'sync', () => {
+                    i++;
+
+                    if (i === ids.length) {
+                        proceed();
+                    }
+                });
+
+                current.fetch();
+            });
+        });
+    }
+
+    actionRelated(options) {
+        let id = options.id;
+        let link = options.link;
+
+        let viewName = this.getViewName('listRelated');
+
+        let model;
+
+        this.getModel()
+            .then(m => {
+                model = m;
+                model.id = id;
+
+                return model.fetch({main: true});
+            })
+            .then(() => {
+                let foreignEntityType = model.getLinkParam(link, 'entity');
+
+                if (!foreignEntityType) {
+                    this.baseController.error404();
+
+                    throw new Error(`Bad link '${link}'.`);
+                }
+
+                return this.collectionFactory.create(foreignEntityType);
+            })
+            .then(collection => {
+                collection.url = model.entityType + '/' + id + '/' + link;
+
+                this.main(viewName, {
+                    scope: this.name,
+                    model: model,
+                    collection: collection,
+                    link: link,
+                });
+            })
+    }
+
+    /**
+     * Get a collection for the current controller.
+     *
+     * @protected
+     * @param {function(module:collection): void|null} [callback]
+     * @param {Object|null} [context]
+     * @param {boolean} [usePreviouslyFetched=false] Use a previously fetched.
+     * @return {Promise<module:collection>}
+     */
+    getCollection(callback, context, usePreviouslyFetched) {
+        context = context || this;
+
+        if (!this.name) {
+            throw new Error('No collection for unnamed controller');
+        }
+
+        let collectionName = this.entityType || this.name;
+
+        if (usePreviouslyFetched) {
+            if (collectionName in this.collectionMap) {
+                let collection = this.collectionMap[collectionName];
+
+                callback.call(context, collection);
+
+                return Promise.resolve(collection);
             }
+        }
 
-            let modelName = this.entityType || this.name;
+        return this.collectionFactory.create(collectionName, (collection) => {
+            this.collectionMap[collectionName] = collection;
 
-            return this.modelFactory.create(modelName, (model) => {
-                if (callback) {
-                    callback.call(context, model);
-                }
+            this.listenTo(collection, 'sync', () => {
+                collection.isFetched = true;
             });
-        },
-    });
-});
+
+            if (callback) {
+                callback.call(context, collection);
+            }
+        });
+    }
+
+    /**
+     * Get a model for the current controller.
+     *
+     * @protected
+     * @param {Function} [callback]
+     * @param {Object} [context]
+     * @return {Promise<module:model>}
+     */
+    getModel(callback, context) {
+        context = context || this;
+
+        if (!this.name) {
+            throw new Error('No collection for unnamed controller');
+        }
+
+        let modelName = this.entityType || this.name;
+
+        return this.modelFactory.create(modelName, model => {
+            if (callback) {
+                callback.call(context, model);
+            }
+        });
+    }
+}
+
+export default RecordController;
diff --git a/client/src/controllers/user.js b/client/src/controllers/user.js
index 3c87b351c5..81c45f9df5 100644
--- a/client/src/controllers/user.js
+++ b/client/src/controllers/user.js
@@ -26,45 +26,47 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('controllers/user', ['controllers/record'], function (Dep) {
+import RecordController from 'controllers/record';
+
+class UserController extends RecordController {
+
+    getCollection(callback, context, usePreviouslyFetched) {
+        return super.getCollection(collection => {
+            collection.data.userType = 'internal';
+
+            callback.call(context, collection);
+        }, context, usePreviouslyFetched);
+    }
 
     /**
-     * @class
-     * @name Class
-     * @extends module:controllers/record.Class
-     * @memberOf module:controllers/user
+     * @protected
+     * @param {Object} options
+     * @param {module:models/user} model
+     * @param {string} view
      */
-    return Dep.extend(/** @lends module:controllers/user.Class */{
+    createViewView(options, model, view) {
+        if (model.get('deleted')) {
+            view = 'views/deleted-detail';
 
-        getCollection: function (callback, context, usePreviouslyFetched) {
-            return Dep.prototype.getCollection.call(this, (collection) => {
-                collection.data.userType = 'internal';
+            super.createViewView(options, model, view);
 
-                callback.call(context, collection);
-            }, context, usePreviouslyFetched);
-        },
+            return;
+        }
 
-        createViewView: function (options, model, view) {
-            if (model.get('deleted')) {
-                view = 'views/deleted-detail';
-                Dep.prototype.createViewView.call(this, options, model, view);
+        if (model.isPortal()) {
+            this.getRouter().dispatch('PortalUser', 'view', {id: model.id, model: model});
 
-                return;
-            }
+            return;
+        }
 
-            if (model.isPortal()) {
-                this.getRouter().dispatch('PortalUser', 'view', {id: model.id, model: model});
+        if (model.isApi()) {
+            this.getRouter().dispatch('ApiUser', 'view', {id: model.id, model: model});
 
-                return;
-            }
+            return;
+        }
 
-            if (model.isApi()) {
-                this.getRouter().dispatch('ApiUser', 'view', {id: model.id, model: model});
+        super.createViewView(options, model, view);
+    }
+}
 
-                return;
-            }
-
-            Dep.prototype.createViewView.call(this, options, model, view);
-        },
-    });
-});
+export default UserController;
diff --git a/client/src/date-time.js b/client/src/date-time.js
index 0d70b14cc8..42b2776038 100644
--- a/client/src/date-time.js
+++ b/client/src/date-time.js
@@ -26,452 +26,451 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('date-time', [], function () {
+/** @module date-time */
+
+import moment from 'lib!moment';
+
+/**
+ * A date-time util.
+ *
+ * @class
+ */
+const DateTime = function () {};
+
+_.extend(DateTime.prototype, /** @lends DateTime# */{
 
     /**
-     * A date-time util.
+     * A system date format.
      *
-     * @class
-     * @name Class
-     * @memberOf module:date-time
+     * @type {string}
      */
-    let DateTime = function () {};
+    internalDateFormat: 'YYYY-MM-DD',
 
-    _.extend(DateTime.prototype, /** @lends module:date-time.Class# */{
+    /**
+     * A system date-time format.
+     *
+     * @type {string}
+     */
+    internalDateTimeFormat: 'YYYY-MM-DD HH:mm',
 
-        /**
-         * A system date format.
-         *
-         * @type {string}
-         */
-        internalDateFormat: 'YYYY-MM-DD',
+    /**
+     * A system date-time format including seconds.
+     *
+     * @type {string}
+     */
+    internalDateTimeFullFormat: 'YYYY-MM-DD HH:mm:ss',
 
-        /**
-         * A system date-time format.
-         *
-         * @type {string}
-         */
-        internalDateTimeFormat: 'YYYY-MM-DD HH:mm',
+    /**
+     * A date format for a current user.
+     *
+     * @type {string}
+     */
+    dateFormat: 'MM/DD/YYYY',
 
-        /**
-         * A system date-time format including seconds.
-         *
-         * @type {string}
-         */
-        internalDateTimeFullFormat: 'YYYY-MM-DD HH:mm:ss',
+    /**
+     * A time format for a current user.
+     *
+     * @type {string}
+     */
+    timeFormat: 'HH:mm',
 
-        /**
-         * A date format for a current user.
-         *
-         * @type {string}
-         */
-        dateFormat: 'MM/DD/YYYY',
+    /**
+     * A time zone for a current user.
+     *
+     * @type {string|null}
+     */
+    timeZone: null,
 
-        /**
-         * A time format for a current user.
-         *
-         * @type {string}
-         */
-        timeFormat: 'HH:mm',
+    /**
+     * A week start for a current user.
+     *
+     * @type {Number}
+     */
+    weekStart: 1,
 
-        /**
-         * A time zone for a current user.
-         *
-         * @type {string|null}
-         */
-        timeZone: null,
+    /**
+     * @private
+     */
+    readableDateFormatMap: {
+        'DD.MM.YYYY': 'DD MMM',
+        'DD/MM/YYYY': 'DD MMM',
+    },
 
-        /**
-         * A week start for a current user.
-         *
-         * @type {Number}
-         */
-        weekStart: 1,
+    /**
+     * @private
+     */
+    readableShortDateFormatMap: {
+        'DD.MM.YYYY': 'D MMM',
+        'DD/MM/YYYY': 'D MMM',
+    },
 
-        /**
-         * @private
-         */
-        readableDateFormatMap: {
-            'DD.MM.YYYY': 'DD MMM',
-            'DD/MM/YYYY': 'DD MMM',
-        },
+    /**
+     * Whether a time format has a meridian (am/pm).
+     *
+     * @returns {boolean}
+     */
+    hasMeridian: function () {
+        return (new RegExp('A', 'i')).test(this.timeFormat);
+    },
 
-        /**
-         * @private
-         */
-        readableShortDateFormatMap: {
-            'DD.MM.YYYY': 'D MMM',
-            'DD/MM/YYYY': 'D MMM',
-        },
+    /**
+     * Get a date format.
+     *
+     * @returns {string}
+     */
+    getDateFormat: function () {
+        return this.dateFormat;
+    },
 
-        /**
-         * Whether a time format has a meridian (am/pm).
-         *
-         * @returns {boolean}
-         */
-        hasMeridian: function () {
-            return (new RegExp('A', 'i')).test(this.timeFormat);
-        },
+    /**
+     * Get a time format.
+     *
+     * @returns {string}
+     */
+    getTimeFormat: function () {
+        return this.timeFormat;
+    },
 
-        /**
-         * Get a date format.
-         *
-         * @returns {string}
-         */
-        getDateFormat: function () {
-            return this.dateFormat;
-        },
+    /**
+     * Get a date-time format.
+     *
+     * @returns {string}
+     */
+    getDateTimeFormat: function () {
+        return this.dateFormat + ' ' + this.timeFormat;
+    },
 
-        /**
-         * Get a time format.
-         *
-         * @returns {string}
-         */
-        getTimeFormat: function () {
-            return this.timeFormat;
-        },
+    /**
+     * Get a readable date format.
+     *
+     * @returns {string}
+     */
+    getReadableDateFormat: function () {
+        return this.readableDateFormatMap[this.getDateFormat()] || 'MMM DD';
+    },
 
-        /**
-         * Get a date-time format.
-         *
-         * @returns {string}
-         */
-        getDateTimeFormat: function () {
-            return this.dateFormat + ' ' + this.timeFormat;
-        },
+    /**
+     * Get a readable short date format.
+     *
+     * @returns {string}
+     */
+    getReadableShortDateFormat: function () {
+        return this.readableShortDateFormatMap[this.getDateFormat()] || 'MMM D';
+    },
 
-        /**
-         * Get a readable date format.
-         *
-         * @returns {string}
-         */
-        getReadableDateFormat: function () {
-            return this.readableDateFormatMap[this.getDateFormat()] || 'MMM DD';
-        },
+    /**
+     * Get a readable date-time format.
+     *
+     * @returns {string}
+     */
+    getReadableDateTimeFormat: function () {
+        return this.getReadableDateFormat() + ' ' + this.timeFormat;
+    },
 
-        /**
-         * Get a readable short date format.
-         *
-         * @returns {string}
-         */
-        getReadableShortDateFormat: function () {
-            return this.readableShortDateFormatMap[this.getDateFormat()] || 'MMM D';
-        },
+    /**
+     * Get a readable short date-time format.
+     *
+     * @returns {string}
+     */
+    getReadableShortDateTimeFormat: function () {
+        return this.getReadableShortDateFormat() + ' ' + this.timeFormat;
+    },
 
-        /**
-         * Get a readable date-time format.
-         *
-         * @returns {string}
-         */
-        getReadableDateTimeFormat: function () {
-            return this.getReadableDateFormat() + ' ' + this.timeFormat;
-        },
+    /**
+     * Convert a date from a display representation to system.
+     *
+     * @param {string} string A date value.
+     * @returns {string|-1} A system date value.
+     */
+    fromDisplayDate: function (string) {
+        if (!string) {
+            return null;
+        }
 
-        /**
-         * Get a readable short date-time format.
-         *
-         * @returns {string}
-         */
-        getReadableShortDateTimeFormat: function () {
-            return this.getReadableShortDateFormat() + ' ' + this.timeFormat;
-        },
+        let m = moment(string, this.dateFormat);
 
-        /**
-         * Convert a date from a display representation to system.
-         *
-         * @param {string} string A date value.
-         * @returns {string} A system date value.
-         */
-        fromDisplayDate: function (string) {
-            if (!string) {
-                return null;
+        if (!m.isValid()) {
+            return -1;
+        }
+
+        return m.format(this.internalDateFormat);
+    },
+
+    /**
+     * Get a time-zone.
+     *
+     * @returns {string}
+     */
+    getTimeZone: function () {
+        return this.timeZone ? this.timeZone : 'UTC';
+    },
+
+    /**
+     * Convert a date from system to a display representation.
+     *
+     * @param {string} string A system date value.
+     * @returns {string} A display date value.
+     */
+    toDisplayDate: function (string) {
+        if (!string || (typeof string !== 'string')) {
+            return '';
+        }
+
+        let m = moment(string, this.internalDateFormat);
+
+        if (!m.isValid()) {
+            return '';
+        }
+
+        return m.format(this.dateFormat);
+    },
+
+    /**
+     * Convert a date-time from system to a display representation.
+     *
+     * @param {string} string A system date-tyime value.
+     * @returns {string|-1} A display date-time value.
+     */
+    fromDisplay: function (string) {
+        if (!string) {
+            return null;
+        }
+
+        let m;
+
+        if (this.timeZone) {
+            m = moment.tz(string, this.getDateTimeFormat(), this.timeZone).utc();
+        }
+        else {
+            m = moment.utc(string, this.getDateTimeFormat());
+        }
+
+        if (!m.isValid()) {
+            return -1;
+        }
+
+        return m.format(this.internalDateTimeFormat) + ':00';
+    },
+
+    /**
+     * Convert a date-time from system to a display representation.
+     *
+     * @param {string} string A system date value.
+     * @returns {string} A display date-time value.
+     */
+    toDisplay: function (string) {
+        if (!string) {
+            return '';
+        }
+
+        return this.toMoment(string).format(this.getDateTimeFormat());
+    },
+
+    /**
+     * @deprecated Use `fromDisplay`.
+     */
+    fromDisplayDateTime: function (string) {
+        return this.fromDisplay(string);
+    },
+
+    /**
+     * @deprecated Use `toDisplay`.
+     */
+    toDisplayDateTime: function (string) {
+        return this.toDisplay(string);
+    },
+
+    /**
+     * Get a now moment.
+     *
+     * @returns {moment.Moment}
+     */
+    getNowMoment: function () {
+        return moment().tz(this.getTimeZone())
+    },
+
+    /**
+     * Convert a date to a moment.
+     *
+     * @param {string} string A date value in a system representation.
+     * @returns {moment.Moment}
+     */
+    toMomentDate: function (string) {
+        return moment.utc(string, this.internalDateFormat);
+    },
+
+    /**
+     * Convert a date-time to a moment.
+     *
+     * @param {string} string A date-time value in a system representation.
+     * @returns {moment.Moment}
+     */
+    toMoment: function (string) {
+        let m = moment.utc(string, this.internalDateTimeFullFormat);
+
+        if (this.timeZone) {
+            m = m.tz(this.timeZone);
+        }
+
+        return m;
+    },
+
+    /**
+     * Convert a date-time value from ISO to a system representation.
+     *
+     * @param {string} string
+     * @returns {string} A date-time value in a system representation.
+     */
+    fromIso: function (string) {
+        if (!string) {
+            return '';
+        }
+
+        let m = moment(string).utc();
+
+        return m.format(this.internalDateTimeFormat);
+    },
+
+    /**
+     * Convert a date-time value from system to an ISO representation.
+     *
+     * @param string A date-time value in a system representation.
+     * @returns {string} An ISO date-time value.
+     */
+    toIso: function (string) {
+        if (!string) {
+            return null;
+        }
+
+        return this.toMoment(string).format();
+    },
+
+    /**
+     * Get a today date value in a system representation.
+     *
+     * @returns {string}
+     */
+    getToday: function () {
+        return moment().tz(this.getTimeZone()).format(this.internalDateFormat);
+    },
+
+    /**
+     * Get a date-time value in a system representation, shifted from now.
+     *
+     * @param {Number} shift A number to shift by.
+     * @param {'minutes'|'hours'|'days'|'weeks'|'months'|'years'} type A shift unit.
+     * @param {Number} [multiplicity] A number of minutes a value will be aliquot to.
+     * @returns {string} A date-time value in a system representation
+     */
+    getDateTimeShiftedFromNow: function (shift, type, multiplicity) {
+        if (!multiplicity) {
+            return moment.utc().add(shift, type).format(this.internalDateTimeFormat);
+        }
+
+        let unix = moment().unix();
+
+        unix = unix - (unix % (multiplicity * 60));
+
+        return moment.unix(unix).utc().add(shift, type).format(this.internalDateTimeFormat);
+    },
+
+    /**
+     * Get a date value in a system representation, shifted from today.
+     *
+     * @param {Number} shift A number to shift by.
+     * @param {'days'|'weeks'|'months'|'years'} type A shift unit.
+     * @returns {string} A date value in a system representation
+     */
+    getDateShiftedFromToday: function (shift, type) {
+        return moment.tz(this.getTimeZone()).add(shift, type).format(this.internalDateFormat);
+    },
+
+    /**
+     * Get a now date-time value in a system representation.
+     *
+     * @param {Number} [multiplicity] A number of minutes a value will be aliquot to.
+     * @returns {string}
+     */
+    getNow: function (multiplicity) {
+        if (!multiplicity) {
+            return moment.utc().format(this.internalDateTimeFormat);
+        }
+
+        let unix = moment().unix();
+
+        unix = unix - (unix % (multiplicity * 60));
+
+        return moment.unix(unix).utc().format(this.internalDateTimeFormat);
+    },
+
+    /**
+     * Set settings and preferences.
+     *
+     * @param {module:models/settings} settings Settings.
+     * @param {module:models/preferences} preferences Preferences.
+     * @internal
+     */
+    setSettingsAndPreferences: function (settings, preferences) {
+        if (settings.has('dateFormat')) {
+            this.dateFormat = settings.get('dateFormat');
+        }
+
+        if (settings.has('timeFormat')) {
+            this.timeFormat = settings.get('timeFormat');
+        }
+
+        if (settings.has('timeZone')) {
+            this.timeZone = settings.get('timeZone') || null;
+
+            if (this.timeZone === 'UTC') {
+                this.timeZone = null;
+            }
+        }
+
+        if (settings.has('weekStart')) {
+            this.weekStart = settings.get('weekStart');
+        }
+
+        preferences.on('change', model => {
+            if (model.has('dateFormat') && model.get('dateFormat')) {
+                this.dateFormat = model.get('dateFormat');
             }
 
-            let m = moment(string, this.dateFormat);
-
-            if (!m.isValid()) {
-                return -1;
+            if (model.has('timeFormat') && model.get('timeFormat')) {
+                this.timeFormat = model.get('timeFormat');
             }
 
-            return m.format(this.internalDateFormat);
-        },
+            if (model.has('timeZone') && model.get('timeZone')) {
 
-        /**
-         * Get a time-zone.
-         *
-         * @returns {string}
-         */
-        getTimeZone: function () {
-            return this.timeZone ? this.timeZone : 'UTC';
-        },
-
-        /**
-         * Convert a date from system to a display representation.
-         *
-         * @param {string} string A system date value.
-         * @returns {string} A display date value.
-         */
-        toDisplayDate: function (string) {
-            if (!string || (typeof string !== 'string')) {
-                return '';
+                this.timeZone = model.get('timeZone');
+            }
+            if (model.has('weekStart') && model.get('weekStart') !== -1) {
+                this.weekStart = model.get('weekStart');
             }
 
-            let m = moment(string, this.internalDateFormat);
-
-            if (!m.isValid()) {
-                return '';
+            if (this.timeZone === 'UTC') {
+                this.timeZone = null;
             }
+        });
+    },
 
-            return m.format(this.dateFormat);
-        },
+    /**
+     * Set a language.
+     *
+     * @param {module:language} language A language.
+     * @internal
+     */
+    setLanguage: function (language) {
+        moment.updateLocale('en', {
+            months: language.translate('monthNames', 'lists'),
+            monthsShort: language.translate('monthNamesShort', 'lists'),
+            weekdays: language.translate('dayNames', 'lists'),
+            weekdaysShort: language.translate('dayNamesShort', 'lists'),
+            weekdaysMin: language.translate('dayNamesMin', 'lists'),
+        });
 
-        /**
-         * Convert a date-time from system to a display representation.
-         *
-         * @param {string} string A system date-tyime value.
-         * @returns {string} A display date-time value.
-         */
-        fromDisplay: function (string) {
-            if (!string) {
-                return null;
-            }
-
-            let m;
-
-            if (this.timeZone) {
-                m = moment.tz(string, this.getDateTimeFormat(), this.timeZone).utc();
-            }
-            else {
-                m = moment.utc(string, this.getDateTimeFormat());
-            }
-
-            if (!m.isValid()) {
-                return -1;
-            }
-
-            return m.format(this.internalDateTimeFormat) + ':00';
-        },
-
-        /**
-         * Convert a date-time from system to a display representation.
-         *
-         * @param {string} string A system date value.
-         * @returns {string} A display date-time value.
-         */
-        toDisplay: function (string) {
-            if (!string) {
-                return '';
-            }
-
-            return this.toMoment(string).format(this.getDateTimeFormat());
-        },
-
-        /**
-         * @deprecated Use `fromDisplay`.
-         */
-        fromDisplayDateTime: function (string) {
-            return this.fromDisplay(string);
-        },
-
-        /**
-         * @deprecated Use `toDisplay`.
-         */
-        toDisplayDateTime: function (string) {
-            return this.toDisplay(string);
-        },
-
-        /**
-         * Get a now moment.
-         *
-         * @returns {moment.Moment}
-         */
-        getNowMoment: function () {
-            return moment().tz(this.getTimeZone())
-        },
-
-        /**
-         * Convert a date to a moment.
-         *
-         * @param {string} string A date value in a system representation.
-         * @returns {moment.Moment}
-         */
-        toMomentDate: function (string) {
-            return moment.utc(string, this.internalDateFormat);
-        },
-
-        /**
-         * Convert a date-time to a moment.
-         *
-         * @param {string} string A date-time value in a system representation.
-         * @returns {moment.Moment}
-         */
-        toMoment: function (string) {
-            let m = moment.utc(string, this.internalDateTimeFullFormat);
-
-            if (this.timeZone) {
-                m = m.tz(this.timeZone);
-            }
-
-            return m;
-        },
-
-        /**
-         * Convert a date-time value from ISO to a system representation.
-         *
-         * @param {string} string
-         * @returns {string} A date-time value in a system representation.
-         */
-        fromIso: function (string) {
-            if (!string) {
-                return '';
-            }
-
-            let m = moment(string).utc();
-
-            return m.format(this.internalDateTimeFormat);
-        },
-
-        /**
-         * Convert a date-time value from system to an ISO representation.
-         *
-         * @param string A date-time value in a system representation.
-         * @returns {string} An ISO date-time value.
-         */
-        toIso: function (string) {
-            if (!string) {
-                return null;
-            }
-
-            return this.toMoment(string).format();
-        },
-
-        /**
-         * Get a today date value in a system representation.
-         *
-         * @returns {string}
-         */
-        getToday: function () {
-            return moment().tz(this.getTimeZone()).format(this.internalDateFormat);
-        },
-
-        /**
-         * Get a date-time value in a system representation, shifted from now.
-         *
-         * @param {Number} shift A number to shift by.
-         * @param {'minutes'|'hours'|'days'|'weeks'|'months'|'years'} type A shift unit.
-         * @param {Number} [multiplicity] A number of minutes a value will be aliquot to.
-         * @returns {string} A date-time value in a system representation
-         */
-        getDateTimeShiftedFromNow: function (shift, type, multiplicity) {
-            if (!multiplicity) {
-                return moment.utc().add(shift, type).format(this.internalDateTimeFormat);
-            }
-
-            let unix = moment().unix();
-
-            unix = unix - (unix % (multiplicity * 60));
-
-            return moment.unix(unix).utc().add(shift, type).format(this.internalDateTimeFormat);
-        },
-
-        /**
-         * Get a date value in a system representation, shifted from today.
-         *
-         * @param {Number} shift A number to shift by.
-         * @param {'days'|'weeks'|'months'|'years'} type A shift unit.
-         * @returns {string} A date value in a system representation
-         */
-        getDateShiftedFromToday: function (shift, type) {
-            return moment.tz(this.getTimeZone()).add(shift, type).format(this.internalDateFormat);
-        },
-
-        /**
-         * Get a now date-time value in a system representation.
-         *
-         * @param {Number} [multiplicity] A number of minutes a value will be aliquot to.
-         * @returns {string}
-         */
-        getNow: function (multiplicity) {
-            if (!multiplicity) {
-                return moment.utc().format(this.internalDateTimeFormat);
-            }
-
-            let unix = moment().unix();
-
-            unix = unix - (unix % (multiplicity * 60));
-
-            return moment.unix(unix).utc().format(this.internalDateTimeFormat);
-        },
-
-        /**
-         * Set settings and preferences.
-         *
-         * @param {module:models/settings.Class} settings Settings.
-         * @param {module:models/preferences.Class} preferences Preferences.
-         * @internal
-         */
-        setSettingsAndPreferences: function (settings, preferences) {
-            if (settings.has('dateFormat')) {
-                this.dateFormat = settings.get('dateFormat');
-            }
-
-            if (settings.has('timeFormat')) {
-                this.timeFormat = settings.get('timeFormat');
-            }
-
-            if (settings.has('timeZone')) {
-                this.timeZone = settings.get('timeZone') || null;
-
-                if (this.timeZone === 'UTC') {
-                    this.timeZone = null;
-                }
-            }
-
-            if (settings.has('weekStart')) {
-                this.weekStart = settings.get('weekStart');
-            }
-
-            preferences.on('change', model => {
-                if (model.has('dateFormat') && model.get('dateFormat')) {
-                    this.dateFormat = model.get('dateFormat');
-                }
-
-                if (model.has('timeFormat') && model.get('timeFormat')) {
-                    this.timeFormat = model.get('timeFormat');
-                }
-
-                if (model.has('timeZone') && model.get('timeZone')) {
-
-                    this.timeZone = model.get('timeZone');
-                }
-                if (model.has('weekStart') && model.get('weekStart') !== -1) {
-                    this.weekStart = model.get('weekStart');
-                }
-
-                if (this.timeZone === 'UTC') {
-                    this.timeZone = null;
-                }
-            });
-        },
-
-        /**
-         * Set a language.
-         *
-         * @param {module:language.Class} language A language.
-         * @internal
-         */
-        setLanguage: function (language) {
-            moment.updateLocale('en', {
-                months: language.translate('monthNames', 'lists'),
-                monthsShort: language.translate('monthNamesShort', 'lists'),
-                weekdays: language.translate('dayNames', 'lists'),
-                weekdaysShort: language.translate('dayNamesShort', 'lists'),
-                weekdaysMin: language.translate('dayNamesMin', 'lists'),
-            });
-
-            moment.locale('en');
-        },
-    });
-
-    return DateTime;
+        moment.locale('en');
+    },
 });
+
+export default DateTime;
diff --git a/client/src/dynamic-handler.js b/client/src/dynamic-handler.js
index 4d95215346..5d155d7f80 100644
--- a/client/src/dynamic-handler.js
+++ b/client/src/dynamic-handler.js
@@ -26,64 +26,61 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('dynamic-handler', [], function () {
+/** @module dynamic-handler */
+
+/**
+ * A dynamic handler. To be extended by a specific handler.
+ *
+ * @class
+ * @param {module:views/record/detail} recordView A record view.
+ */
+const DynamicHandler = function (recordView) {
+    /**
+     * A record view.
+     *
+     * @protected
+     * @type {module:views/record/detail}
+     */
+    this.recordView = recordView;
 
     /**
-     * A dynamic handler. To be extended by a specific handler.
+     * A model.
      *
-     * @class
-     * @name Class
-     * @param {module:views/record/detail.Class} recordView A record view.
-     * @memberOf module:dynamic-handler
+     * @protected
+     * @type {module:model}
      */
-    let DynamicHandler = function (recordView) {
-        /**
-         * A record view.
-         *
-         * @protected
-         * @type {module:views/record/detail.Class}
-         */
-        this.recordView = recordView;
+    this.model = recordView.model;
+};
 
-        /**
-         * A model.
-         *
-         * @protected
-         * @type {module:model.Class}
-         */
-        this.model = recordView.model;
-    };
+_.extend(DynamicHandler.prototype, /** @lends DynamicHandler# */{
 
-    _.extend(DynamicHandler.prototype, /** @lends module:dynamic-handler.Class# */{
+    /**
+     * Initialization logic. To be extended.
+     *
+     * @protected
+     */
+    init: function () {},
 
-        /**
-         * Initialization logic. To be extended.
-         *
-         * @protected
-         */
-        init: function () {},
+    /**
+     * Called on model change. To be extended.
+     *
+     * @protected
+     * @param {module:views/record/detail} model A model.
+     * @param {Object} o Options.
+     */
+    onChange: function (model, o) {},
 
-        /**
-         * Called on model change. To be extended.
-         *
-         * @protected
-         * @param {module:views/record/detail.Class} model A model.
-         * @param {Object} o Options.
-         */
-        onChange: function (model, o) {},
-
-        /**
-         * Get a metadata.
-         *
-         * @protected
-         * @returns {module:metadata.Class}
-         */
-        getMetadata: function () {
-            return this.recordView.getMetadata()
-        },
-    });
-
-    DynamicHandler.extend = Bull.View.extend;
-
-    return DynamicHandler;
+    /**
+     * Get a metadata.
+     *
+     * @protected
+     * @returns {module:metadata}
+     */
+    getMetadata: function () {
+        return this.recordView.getMetadata()
+    },
 });
+
+DynamicHandler.extend = Bull.View.extend;
+
+export default DynamicHandler;
diff --git a/client/src/dynamic-logic.js b/client/src/dynamic-logic.js
index de5d332444..002f3508d1 100644
--- a/client/src/dynamic-logic.js
+++ b/client/src/dynamic-logic.js
@@ -26,510 +26,506 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('dynamic-logic', [], function () {
+/** @module dynamic-logic */
+
+/**
+ * Dynamic logic. Handles form appearance and behaviour depending on conditions.
+ *
+ * @class
+ * @param {Object} defs Definitions.
+ * @param {module:views/record/base} recordView A record view.
+ *
+ * @internal Instantiated in advanced-pack.
+ */
+const DynamicLogic = function (defs, recordView) {
+    /**
+     * @type {Object} Definitions.
+     * @private
+     */
+    this.defs = defs || {};
 
     /**
-     * Dynamic logic. Handles form appearance and behaviour depending on conditions.
      *
-     * @class
-     * @name Class
-     * @memberOf module:dynamic-logic
-     *
-     * @param {Object} defs Definitions.
-     * @param {module:views/record/base.Class} recordView A record view.
-     *
-     * @internal Instantiated in advanced-pack.
+     * @type {module:views/record/base}
+     * @private
      */
-    let DynamicLogic = function (defs, recordView) {
-        /**
-         * @type {Object} Definitions.
-         * @private
-         */
-        this.defs = defs || {};
+    this.recordView = recordView;
 
-        /**
-         *
-         * @type {module:views/record/base.Class}
-         * @private
-         */
-        this.recordView = recordView;
+    /**
+     * @type {string[]}
+     * @private
+     */
+    this.fieldTypeList = ['visible', 'required', 'readOnly'];
 
-        /**
-         * @type {string[]}
-         * @private
-         */
-        this.fieldTypeList = ['visible', 'required', 'readOnly'];
+    /**
+     * @type {string[]}
+     * @private
+     */
+    this.panelTypeList = ['visible', 'styled'];
+};
 
-        /**
-         * @type {string[]}
-         * @private
-         */
-        this.panelTypeList = ['visible', 'styled'];
-    };
+_.extend(DynamicLogic.prototype, /** @lends DynamicLogic# */{
 
-    _.extend(DynamicLogic.prototype, /** @lends module:dynamic-logic.Class# */{
+    /**
+     * Process.
+     */
+    process: function () {
+        let fields = this.defs.fields || {};
 
-        /**
-         * Process.
-         */
-        process: function () {
-            let fields = this.defs.fields || {};
+        Object.keys(fields).forEach(field => {
+            var item = (fields[field] || {});
 
-            Object.keys(fields).forEach(field => {
-                var item = (fields[field] || {});
-
-                this.fieldTypeList.forEach(type => {
-                    if (!(type in item)) {
-                        return;
-                    }
-
-                    if (!item[type]) {
-                        return;
-                    }
-
-                    let typeItem = (item[type] || {});
-
-                    if (!typeItem.conditionGroup) {
-                        return;
-                    }
-
-                    let result = this.checkConditionGroup(typeItem.conditionGroup);
-
-                    let methodName;
-
-                    if (result) {
-                        methodName = 'makeField' + Espo.Utils.upperCaseFirst(type) + 'True';
-                    }
-                    else {
-                        methodName = 'makeField' + Espo.Utils.upperCaseFirst(type) + 'False';
-                    }
-
-                    this[methodName](field);
-                });
-            });
-
-            let panels = this.defs.panels || {};
-
-            Object.keys(panels).forEach(panel => {
-                this.panelTypeList.forEach(type => {
-                    this.processPanel(panel, type);
-                });
-            });
-
-            let options = this.defs.options || {};
-
-            Object.keys(options).forEach(field => {
-                let itemList = options[field];
-
-                if (!options[field]) {
+            this.fieldTypeList.forEach(type => {
+                if (!(type in item)) {
                     return;
                 }
 
-                let isMet = false;
-
-                for (let i in itemList) {
-                    let item = itemList[i];
-
-                    if (this.checkConditionGroup(item.conditionGroup)) {
-                        this.setOptionList(field, item.optionList || []);
-
-                        isMet = true;
-
-                        break;
-                    }
+                if (!item[type]) {
+                    return;
                 }
 
-                if (!isMet) {
-                    this.resetOptionList(field);
+                let typeItem = (item[type] || {});
+
+                if (!typeItem.conditionGroup) {
+                    return;
                 }
+
+                let result = this.checkConditionGroup(typeItem.conditionGroup);
+
+                let methodName;
+
+                if (result) {
+                    methodName = 'makeField' + Espo.Utils.upperCaseFirst(type) + 'True';
+                }
+                else {
+                    methodName = 'makeField' + Espo.Utils.upperCaseFirst(type) + 'False';
+                }
+
+                this[methodName](field);
             });
-        },
+        });
 
-        /**
-         * @param {string} panel A panel name.
-         * @param {string} type A type.
-         * @private
-         */
-        processPanel: function (panel, type) {
-            let panels = this.defs.panels || {};
-            let item = (panels[panel] || {});
+        let panels = this.defs.panels || {};
 
-            if (!(type in item)) {
+        Object.keys(panels).forEach(panel => {
+            this.panelTypeList.forEach(type => {
+                this.processPanel(panel, type);
+            });
+        });
+
+        let options = this.defs.options || {};
+
+        Object.keys(options).forEach(field => {
+            let itemList = options[field];
+
+            if (!options[field]) {
                 return;
             }
 
-            let typeItem = (item[type] || {});
+            let isMet = false;
 
-            if (!typeItem.conditionGroup) {
-                return;
-            }
+            for (let i in itemList) {
+                let item = itemList[i];
 
-            let result = this.checkConditionGroup(typeItem.conditionGroup);
+                if (this.checkConditionGroup(item.conditionGroup)) {
+                    this.setOptionList(field, item.optionList || []);
 
-            let methodName;
+                    isMet = true;
 
-            if (result) {
-                methodName = 'makePanel' + Espo.Utils.upperCaseFirst(type) + 'True';
-            }
-            else {
-                methodName = 'makePanel' + Espo.Utils.upperCaseFirst(type) + 'False';
-            }
-
-            this[methodName](panel);
-        },
-
-        /**
-         * Check a condition group.
-         * @param {Object} data A condition group.
-         * @param {'and'|'or'|'not'} [type='and'] A type.
-         * @returns {boolean}
-         */
-        checkConditionGroup: function (data, type) {
-            type = type || 'and';
-
-            let list;
-            let result = false;
-
-            if (type === 'and') {
-                list =  data || [];
-
-                result = true;
-
-                for (let i in list) {
-                    if (!this.checkCondition(list[i])) {
-                        result = false;
-
-                        break;
-                    }
-                }
-            }
-            else if (type === 'or') {
-                list =  data || [];
-
-                for (let i in list) {
-                    if (this.checkCondition(list[i])) {
-                        result = true;
-
-                        break;
-                    }
-                }
-            }
-            else if (type === 'not') {
-                if (data) {
-                    result = !this.checkCondition(data);
+                    break;
                 }
             }
 
-            return result;
-        },
-
-        /**
-         * Check a condition.
-         *
-         * @param {Object} defs Definitions.
-         * @returns {boolean}
-         */
-        checkCondition: function (defs) {
-            defs = defs || {};
-
-            let type = defs.type || 'equals';
-
-            if (~['or', 'and', 'not'].indexOf(type)) {
-                return this.checkConditionGroup(defs.value, type);
+            if (!isMet) {
+                this.resetOptionList(field);
             }
+        });
+    },
 
-            let attribute = defs.attribute;
-            let value = defs.value;
+    /**
+     * @param {string} panel A panel name.
+     * @param {string} type A type.
+     * @private
+     */
+    processPanel: function (panel, type) {
+        let panels = this.defs.panels || {};
+        let item = (panels[panel] || {});
 
-            if (!attribute) {
+        if (!(type in item)) {
+            return;
+        }
+
+        let typeItem = (item[type] || {});
+
+        if (!typeItem.conditionGroup) {
+            return;
+        }
+
+        let result = this.checkConditionGroup(typeItem.conditionGroup);
+
+        let methodName;
+
+        if (result) {
+            methodName = 'makePanel' + Espo.Utils.upperCaseFirst(type) + 'True';
+        }
+        else {
+            methodName = 'makePanel' + Espo.Utils.upperCaseFirst(type) + 'False';
+        }
+
+        this[methodName](panel);
+    },
+
+    /**
+     * Check a condition group.
+     * @param {Object} data A condition group.
+     * @param {'and'|'or'|'not'} [type='and'] A type.
+     * @returns {boolean}
+     */
+    checkConditionGroup: function (data, type) {
+        type = type || 'and';
+
+        let list;
+        let result = false;
+
+        if (type === 'and') {
+            list =  data || [];
+
+            result = true;
+
+            for (let i in list) {
+                if (!this.checkCondition(list[i])) {
+                    result = false;
+
+                    break;
+                }
+            }
+        }
+        else if (type === 'or') {
+            list =  data || [];
+
+            for (let i in list) {
+                if (this.checkCondition(list[i])) {
+                    result = true;
+
+                    break;
+                }
+            }
+        }
+        else if (type === 'not') {
+            if (data) {
+                result = !this.checkCondition(data);
+            }
+        }
+
+        return result;
+    },
+
+    /**
+     * Check a condition.
+     *
+     * @param {Object} defs Definitions.
+     * @returns {boolean}
+     */
+    checkCondition: function (defs) {
+        defs = defs || {};
+
+        let type = defs.type || 'equals';
+
+        if (~['or', 'and', 'not'].indexOf(type)) {
+            return this.checkConditionGroup(defs.value, type);
+        }
+
+        let attribute = defs.attribute;
+        let value = defs.value;
+
+        if (!attribute) {
+            return false;
+        }
+
+        var setValue = this.recordView.model.get(attribute);
+
+        if (type === 'equals') {
+            if (!value) {
                 return false;
             }
 
-            var setValue = this.recordView.model.get(attribute);
+            return setValue === value;
+        }
 
-            if (type === 'equals') {
-                if (!value) {
-                    return false;
-                }
-
-                return setValue === value;
+        if (type === 'notEquals') {
+            if (!value) {
+                return false;
             }
 
-            if (type === 'notEquals') {
-                if (!value) {
-                    return false;
-                }
+            return setValue !== value;
+        }
 
-                return setValue !== value;
+        if (type === 'isEmpty') {
+            if (Array.isArray(setValue)) {
+                return !setValue.length;
             }
 
-            if (type === 'isEmpty') {
-                if (Array.isArray(setValue)) {
-                    return !setValue.length;
-                }
+            return setValue === null || (setValue === '') || typeof setValue === 'undefined';
+        }
 
-                return setValue === null || (setValue === '') || typeof setValue === 'undefined';
+        if (type === 'isNotEmpty') {
+            if (Array.isArray(setValue)) {
+                return !!setValue.length;
             }
 
-            if (type === 'isNotEmpty') {
-                if (Array.isArray(setValue)) {
-                    return !!setValue.length;
-                }
+            return setValue !== null && (setValue !== '') && typeof setValue !== 'undefined';
+        }
 
-                return setValue !== null && (setValue !== '') && typeof setValue !== 'undefined';
+        if (type === 'isTrue') {
+            return !!setValue;
+        }
+
+        if (type === 'isFalse') {
+            return !setValue;
+        }
+
+        if (type === 'contains' || type === 'has') {
+            if (!setValue) {
+                return false;
             }
 
-            if (type === 'isTrue') {
-                return !!setValue;
+            return !!~setValue.indexOf(value);
+        }
+
+        if (type === 'notContains' || type === 'notHas') {
+            if (!setValue) {
+                return true;
             }
 
-            if (type === 'isFalse') {
-                return !setValue;
+            return !~setValue.indexOf(value);
+        }
+
+        if (type === 'startsWith') {
+            if (!setValue) {
+                return false;
             }
 
-            if (type === 'contains' || type === 'has') {
-                if (!setValue) {
-                    return false;
-                }
+            return setValue.indexOf(value) === 0;
+        }
 
-                return !!~setValue.indexOf(value);
+        if (type === 'endsWith') {
+            if (!setValue) {
+                return false;
             }
 
-            if (type === 'notContains' || type === 'notHas') {
-                if (!setValue) {
-                    return true;
-                }
+            return setValue.indexOf(value) === setValue.length - value.length;
+        }
 
-                return !~setValue.indexOf(value);
+        if (type === 'matches') {
+            if (!setValue) {
+                return false;
             }
 
-            if (type === 'startsWith') {
-                if (!setValue) {
-                    return false;
-                }
+            let match = /^\/(.*)\/([a-z]*)$/.exec(value);
 
-                return setValue.indexOf(value) === 0;
+            if (!match || match.length < 2) {
+                return false;
             }
 
-            if (type === 'endsWith') {
-                if (!setValue) {
-                    return false;
-                }
+            return (new RegExp(match[1], match[2])).test(setValue);
+        }
 
-                return setValue.indexOf(value) === setValue.length - value.length;
+        if (type === 'greaterThan') {
+            return setValue > value;
+        }
+
+        if (type === 'lessThan') {
+            return setValue < value;
+        }
+
+        if (type === 'greaterThanOrEquals') {
+            return setValue >= value;
+        }
+
+        if (type === 'lessThanOrEquals') {
+            return setValue <= value;
+        }
+
+        if (type === 'in') {
+            return !!~value.indexOf(setValue);
+        }
+
+        if (type === 'notIn') {
+            return !~value.indexOf(setValue);
+        }
+
+        if (type === 'isToday') {
+            let dateTime = this.recordView.getDateTime();
+
+            if (!setValue) {
+                return false;
             }
 
-            if (type === 'matches') {
-                if (!setValue) {
-                    return false;
-                }
-
-                let match = /^\/(.*)\/([a-z]*)$/.exec(value);
-
-                if (!match || match.length < 2) {
-                    return false;
-                }
-
-                return (new RegExp(match[1], match[2])).test(setValue);
+            if (setValue.length > 10) {
+                return dateTime.toMoment(setValue).isSame(dateTime.getNowMoment(), 'day');
             }
 
-            if (type === 'greaterThan') {
-                return setValue > value;
+            return dateTime.toMomentDate(setValue).isSame(dateTime.getNowMoment(), 'day');
+        }
+
+        if (type === 'inFuture') {
+            let dateTime = this.recordView.getDateTime();
+
+            if (!setValue) {
+                return false;
             }
 
-            if (type === 'lessThan') {
-                return setValue < value;
+            if (setValue.length > 10) {
+                return dateTime.toMoment(setValue).isAfter(dateTime.getNowMoment(), 'day');
             }
 
-            if (type === 'greaterThanOrEquals') {
-                return setValue >= value;
+            return dateTime.toMomentDate(setValue).isAfter(dateTime.getNowMoment(), 'day');
+        }
+
+        if (type === 'inPast') {
+            let dateTime = this.recordView.getDateTime();
+
+            if (!setValue) {
+                return false;
             }
 
-            if (type === 'lessThanOrEquals') {
-                return setValue <= value;
+
+            if (setValue.length > 10) {
+                return dateTime.toMoment(setValue).isBefore(dateTime.getNowMoment(), 'day');
             }
 
-            if (type === 'in') {
-                return !!~value.indexOf(setValue);
-            }
+            return dateTime.toMomentDate(setValue).isBefore(dateTime.getNowMoment(), 'day');
+        }
 
-            if (type === 'notIn') {
-                return !~value.indexOf(setValue);
-            }
+        return false;
+    },
 
-            if (type === 'isToday') {
-                let dateTime = this.recordView.getDateTime();
+    /**
+     * @param {string} field
+     * @param {string[]} optionList
+     * @private
+     */
+    setOptionList: function (field, optionList) {
+        this.recordView.setFieldOptionList(field, optionList);
+    },
 
-                if (!setValue) {
-                    return false;
-                }
+    /**
+     * @param {string} field
+     * @private
+     */
+    resetOptionList: function (field) {
+        this.recordView.resetFieldOptionList(field);
+    },
 
-                if (setValue.length > 10) {
-                    return dateTime.toMoment(setValue).isSame(dateTime.getNowMoment(), 'day');
-                }
+    /**
+     * @param {string} field
+     * @private
+     */
+    makeFieldVisibleTrue: function (field) {
+        this.recordView.showField(field);
+    },
 
-                return dateTime.toMomentDate(setValue).isSame(dateTime.getNowMoment(), 'day');
-            }
+    /**
+     * @param {string} field
+     * @private
+     */
+    makeFieldVisibleFalse: function (field) {
+        this.recordView.hideField(field);
+    },
 
-            if (type === 'inFuture') {
-                let dateTime = this.recordView.getDateTime();
+    /**
+     * @param {string} field
+     * @private
+     */
+    makeFieldRequiredTrue: function (field) {
+        this.recordView.setFieldRequired(field);
+    },
 
-                if (!setValue) {
-                    return false;
-                }
+    /**
+     * @param {string} field
+     * @private
+     */
+    makeFieldRequiredFalse: function (field) {
+        this.recordView.setFieldNotRequired(field);
+    },
 
-                if (setValue.length > 10) {
-                    return dateTime.toMoment(setValue).isAfter(dateTime.getNowMoment(), 'day');
-                }
+    /**
+     * @param {string} field
+     * @private
+     */
+    makeFieldReadOnlyTrue: function (field) {
+        this.recordView.setFieldReadOnly(field);
+    },
 
-                return dateTime.toMomentDate(setValue).isAfter(dateTime.getNowMoment(), 'day');
-            }
+    /**
+     * @param {string} field
+     * @private
+     */
+    makeFieldReadOnlyFalse: function (field) {
+        this.recordView.setFieldNotReadOnly(field);
+    },
 
-            if (type === 'inPast') {
-                let dateTime = this.recordView.getDateTime();
+    /**
+     * @param {string} panel
+     * @private
+     */
+    makePanelVisibleTrue: function (panel) {
+        this.recordView.showPanel(panel, 'dynamicLogic');
+    },
 
-                if (!setValue) {
-                    return false;
-                }
+    /**
+     * @param {string} panel
+     * @private
+     */
+    makePanelVisibleFalse: function (panel) {
+        this.recordView.hidePanel(panel, false, 'dynamicLogic');
+    },
 
+    /**
+     * @param {string} panel
+     * @private
+     */
+    makePanelStyledTrue: function (panel) {
+        this.recordView.stylePanel(panel, 'dynamicLogic');
+    },
 
-                if (setValue.length > 10) {
-                    return dateTime.toMoment(setValue).isBefore(dateTime.getNowMoment(), 'day');
-                }
+    /**
+     * @param {string} panel
+     * @private
+     */
+    makePanelStyledFalse: function (panel) {
+        this.recordView.unstylePanel(panel, false, 'dynamicLogic');
+    },
 
-                return dateTime.toMomentDate(setValue).isBefore(dateTime.getNowMoment(), 'day');
-            }
+    /**
+     * Add a panel-visible condition.
+     *
+     * @param {string} name A panel name.
+     * @param {Object} item Condition definitions.
+     */
+    addPanelVisibleCondition: function (name, item) {
+        this.defs.panels = this.defs.panels || {};
+        this.defs.panels[name] = this.defs.panels[name] || {};
 
-            return false;
-        },
+        this.defs.panels[name].visible = item;
 
-        /**
-         * @param {string} field
-         * @param {string[]} optionList
-         * @private
-         */
-        setOptionList: function (field, optionList) {
-            this.recordView.setFieldOptionList(field, optionList);
-        },
+        this.processPanel(name, 'visible');
+    },
 
-        /**
-         * @param {string} field
-         * @private
-         */
-        resetOptionList: function (field) {
-            this.recordView.resetFieldOptionList(field);
-        },
+    /**
+     * Add a panel-styled condition.
+     *
+     * @param {string} name A panel name.
+     * @param {Object} item Condition definitions.
+     */
+    addPanelStyledCondition: function (name, item) {
+        this.defs.panels = this.defs.panels || {};
+        this.defs.panels[name] = this.defs.panels[name] || {};
 
-        /**
-         * @param {string} field
-         * @private
-         */
-        makeFieldVisibleTrue: function (field) {
-            this.recordView.showField(field);
-        },
+        this.defs.panels[name].styled = item;
 
-        /**
-         * @param {string} field
-         * @private
-         */
-        makeFieldVisibleFalse: function (field) {
-            this.recordView.hideField(field);
-        },
-
-        /**
-         * @param {string} field
-         * @private
-         */
-        makeFieldRequiredTrue: function (field) {
-            this.recordView.setFieldRequired(field);
-        },
-
-        /**
-         * @param {string} field
-         * @private
-         */
-        makeFieldRequiredFalse: function (field) {
-            this.recordView.setFieldNotRequired(field);
-        },
-
-        /**
-         * @param {string} field
-         * @private
-         */
-        makeFieldReadOnlyTrue: function (field) {
-            this.recordView.setFieldReadOnly(field);
-        },
-
-        /**
-         * @param {string} field
-         * @private
-         */
-        makeFieldReadOnlyFalse: function (field) {
-            this.recordView.setFieldNotReadOnly(field);
-        },
-
-        /**
-         * @param {string} panel
-         * @private
-         */
-        makePanelVisibleTrue: function (panel) {
-            this.recordView.showPanel(panel, 'dynamicLogic');
-        },
-
-        /**
-         * @param {string} panel
-         * @private
-         */
-        makePanelVisibleFalse: function (panel) {
-            this.recordView.hidePanel(panel, false, 'dynamicLogic');
-        },
-
-        /**
-         * @param {string} panel
-         * @private
-         */
-        makePanelStyledTrue: function (panel) {
-            this.recordView.stylePanel(panel, 'dynamicLogic');
-        },
-
-        /**
-         * @param {string} panel
-         * @private
-         */
-        makePanelStyledFalse: function (panel) {
-            this.recordView.unstylePanel(panel, false, 'dynamicLogic');
-        },
-
-        /**
-         * Add a panel-visible condition.
-         *
-         * @param {string} name A panel name.
-         * @param {Object} item Condition definitions.
-         */
-        addPanelVisibleCondition: function (name, item) {
-            this.defs.panels = this.defs.panels || {};
-            this.defs.panels[name] = this.defs.panels[name] || {};
-
-            this.defs.panels[name].visible = item;
-
-            this.processPanel(name, 'visible');
-        },
-
-        /**
-         * Add a panel-styled condition.
-         *
-         * @param {string} name A panel name.
-         * @param {Object} item Condition definitions.
-         */
-        addPanelStyledCondition: function (name, item) {
-            this.defs.panels = this.defs.panels || {};
-            this.defs.panels[name] = this.defs.panels[name] || {};
-
-            this.defs.panels[name].styled = item;
-
-            this.processPanel(name, 'styled');
-        },
-    });
-
-    return DynamicLogic;
+        this.processPanel(name, 'styled');
+    },
 });
+
+export default DynamicLogic;
diff --git a/client/src/email-helper.js b/client/src/email-helper.js
index 913ef62bc4..41f05830de 100644
--- a/client/src/email-helper.js
+++ b/client/src/email-helper.js
@@ -26,574 +26,570 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('email-helper', [], function () {
+/** @module email-helper */
+
+/**
+ * An email helper.
+ *
+ * @class
+ * @param {module:language} language A language.
+ * @param {module:models/user} user A user.
+ * @param {module:date-time} dateTime A date-time util.
+ * @param {module:acl-manager} acl An ACL manager.
+ */
+const EmailHelper = function (language, user, dateTime, acl) {
+    /**
+     * @type {module:language}
+     * @private
+     */
+    this.language = language;
 
     /**
-     * An email helper.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:email-helper
-     *
-     * @param {module:language.Class} language A language.
-     * @param {module:models/user.Class} user A user.
-     * @param {module:date-time.Class} dateTime A date-time util.
-     * @param {module:acl-manager.Class} acl An ACL manager.
+     * @type {module:models/user}
+     * @private
      */
-    let EmailHelper = function (language, user, dateTime, acl) {
-        /**
-         * @type {module:language.Class}
-         * @private
-         */
-        this.language = language;
+    this.user = user;
 
-        /**
-         * @type {module:models/user.Class}
-         * @private
-         */
-        this.user = user;
+    /**
+     * @type {module:date-time}
+     * @private
+     */
+    this.dateTime = dateTime;
 
-        /**
-         * @type {module:date-time.Class}
-         * @private
-         */
-        this.dateTime = dateTime;
+    /**
+     * @type {module:acl-manager}
+     * @private
+     */
+    this.acl = acl;
 
-        /**
-         * @type {module:acl-manager.Class}
-         * @private
-         */
-        this.acl = acl;
+    /**
+     * @type {string}
+     * @private
+     */
+    this.erasedPlaceholder = 'ERASED:';
+};
 
-        /**
-         * @type {string}
-         * @private
-         */
-        this.erasedPlaceholder = 'ERASED:';
-    };
+_.extend(EmailHelper.prototype, /** @lends EmailHelper# */{
 
-    _.extend(EmailHelper.prototype, {
+    /**
+     * @returns {module:language}
+     */
+    getLanguage: function () {
+        return this.language;
+    },
 
-        /**
-         * @returns {module:language.Class}
-         */
-        getLanguage: function () {
-            return this.language;
-        },
+    /**
+     * @returns {module:models/user}
+     */
+    getUser: function () {
+        return this.user;
+    },
 
-        /**
-         * @returns {module:models/user.Class}
-         */
-        getUser: function () {
-            return this.user;
-        },
+    /**
+     * @returns {module:date-time}
+     */
+    getDateTime: function () {
+        return this.dateTime;
+    },
 
-        /**
-         * @returns {module:date-time.Class}
-         */
-        getDateTime: function () {
-            return this.dateTime;
-        },
+    /**
+     * Get reply email attributes.
+     *
+     * @param {module:model} model An email model.
+     * @param {Object|null} [data=null] Action data. Unused.
+     * @param {boolean} [cc=false] To include CC (reply-all).
+     * @returns {Object.<string, *>}
+     */
+    getReplyAttributes: function (model, data, cc) {
+        let attributes = {
+            status: 'Draft',
+            isHtml: model.get('isHtml'),
+        };
 
-        /**
-         * Get reply email attributes.
-         *
-         * @param {module:model.Class} model An email model.
-         * @param {Object|null} [data=null] Action data. Unused.
-         * @param {boolean} [cc=false] To include CC (reply-all).
-         * @returns {Object.<string, *>}
-         */
-        getReplyAttributes: function (model, data, cc) {
-            let attributes = {
-                status: 'Draft',
-                isHtml: model.get('isHtml'),
-            };
+        let subject = model.get('name') || '';
 
-            let subject = model.get('name') || '';
+        attributes['name'] = subject.toUpperCase().indexOf('RE:') !== 0 ?
+            'Re: ' + subject :
+            subject;
 
-            attributes['name'] = subject.toUpperCase().indexOf('RE:') !== 0 ?
-                'Re: ' + subject :
-                subject;
+        let to = '';
+        let isReplyOnSent = false;
+        let nameHash = model.get('nameHash') || {};
+        let replyToAddressString = model.get('replyTo') || null;
+        let replyToString = model.get('replyToString') || null;
+        let userEmailAddressList = this.getUser().get('emailAddressList') || [];
 
-            let to = '';
-            let isReplyOnSent = false;
-            let nameHash = model.get('nameHash') || {};
-            let replyToAddressString = model.get('replyTo') || null;
-            let replyToString = model.get('replyToString') || null;
-            let userEmailAddressList = this.getUser().get('emailAddressList') || [];
+        if (replyToAddressString) {
+            let replyToAddressList = replyToAddressString.split(';');
 
-            if (replyToAddressString) {
-                let replyToAddressList = replyToAddressString.split(';');
+            to = replyToAddressList.join(';');
+        }
+        else if (replyToString) {
+            let a = [];
 
-                to = replyToAddressList.join(';');
-            }
-            else if (replyToString) {
-                let a = [];
+            replyToString.split(';').forEach(item => {
+                let part = item.trim();
+                let address = this.parseAddressFromStringAddress(item);
 
-                replyToString.split(';').forEach(item => {
-                    let part = item.trim();
-                    let address = this.parseAddressFromStringAddress(item);
+                if (address) {
+                    a.push(address);
 
-                    if (address) {
-                        a.push(address);
+                    let name = this.parseNameFromStringAddress(part);
 
-                        let name = this.parseNameFromStringAddress(part);
-
-                        if (name && name !== address) {
-                            nameHash[address] = name;
-                        }
+                    if (name && name !== address) {
+                        nameHash[address] = name;
                     }
-                });
-
-                to = a.join(';');
-            }
-
-            if (
-                (!to || !to.includes('@')) &&
-                model.get('from')
-            ) {
-                if (!userEmailAddressList.includes(model.get('from'))) {
-                    to = model.get('from');
-
-                    if (!nameHash[to]) {
-                        let fromString = model.get('fromString') || model.get('fromName');
-
-                        if (fromString) {
-                            let name = this.parseNameFromStringAddress(fromString);
-
-                            if (name !== to) {
-                                nameHash[to] = name;
-                            }
-                        }
-                    }
-                }
-                else {
-                    isReplyOnSent = true;
-                }
-            }
-
-            attributes.to = to;
-
-            if (cc) {
-                attributes.cc = model.get('cc') || '';
-
-                (model.get('to') || '').split(';').forEach(item => {
-                    item = item.trim();
-
-                    if (item !== this.getUser().get('emailAddress')) {
-                        if (isReplyOnSent) {
-                            if (attributes.to) {
-                                attributes.to += ';';
-                            }
-
-                            attributes.to += item;
-                        }
-                        else {
-                            if (attributes.cc) {
-                                attributes.cc += ';';
-                            }
-
-                            attributes.cc += item;
-                        }
-                    }
-                });
-
-                attributes.cc = attributes.cc.replace(/^(\; )/,"");
-            }
-
-            if (attributes.to) {
-                let toList = attributes.to.split(';');
-
-                toList = toList.filter(item => {
-                    if (item.indexOf(this.erasedPlaceholder) === 0) {
-                        return false;
-                    }
-
-                    return true;
-                });
-
-                attributes.to = toList.join(';');
-            }
-
-            if (attributes.cc) {
-                let ccList = attributes.cc.split(';');
-
-                ccList = ccList.filter(item => {
-                    if (item.indexOf(this.erasedPlaceholder) === 0) {
-                        return false;
-                    }
-
-                    return true;
-                });
-
-                attributes.cc = ccList.join(';');
-            }
-
-            if (model.get('parentId')) {
-                attributes['parentId'] = model.get('parentId');
-                attributes['parentName'] = model.get('parentName');
-                attributes['parentType'] = model.get('parentType');
-            }
-
-            if (model.get('teamsIds') && model.get('teamsIds').length) {
-                attributes.teamsIds = Espo.Utils.clone(model.get('teamsIds'));
-                attributes.teamsNames = Espo.Utils.clone(model.get('teamsNames') || {});
-
-                let defaultTeamId = this.user.get('defaultTeamId');
-
-                if (defaultTeamId && !~attributes.teamsIds.indexOf(defaultTeamId)) {
-                    attributes.teamsIds.push(this.user.get('defaultTeamId'));
-                    attributes.teamsNames[this.user.get('defaultTeamId')] = this.user.get('defaultTeamName');
-                }
-
-                attributes.teamsIds = attributes.teamsIds.filter(teamId => {
-                    return this.acl.checkTeamAssignmentPermission(teamId);
-                });
-            }
-
-            attributes.nameHash = nameHash;
-            attributes.repliedId = model.id;
-            attributes.inReplyTo = model.get('messageId');
-
-
-            let toAddressList = (model.get('to') || '').split(';');
-            let userPersonalEmailAddressList = this.getUser().get('userEmailAddressList') || [];
-
-            for (let address of userPersonalEmailAddressList) {
-                if (toAddressList.includes(address)) {
-                    attributes.from = address;
-
-                    break;
-                }
-            }
-
-            this.addReplyBodyAttributes(model, attributes);
-
-            return attributes;
-        },
-
-        /**
-         * Get forward email attributes.
-         *
-         * @param {module:model.Class} model An email model.
-         * @returns {Object}
-         */
-        getForwardAttributes: function (model) {
-            let attributes = {
-                status: 'Draft',
-                isHtml: model.get('isHtml'),
-            };
-
-            let subject = model.get('name');
-
-            if (~!subject.toUpperCase().indexOf('FWD:') && ~!subject.toUpperCase().indexOf('FW:')) {
-                attributes['name'] = 'Fwd: ' + subject;
-            }
-            else {
-                attributes['name'] = subject;
-            }
-
-            if (model.get('parentId')) {
-                attributes['parentId'] = model.get('parentId');
-                attributes['parentName'] = model.get('parentName');
-                attributes['parentType'] = model.get('parentType');
-            }
-
-            this.addForwardBodyAttributes(model, attributes);
-
-            return attributes;
-        },
-
-        /**
-         * Add body attributes for a forward email.
-         *
-         * @param {module:model.Class} model An email model.
-         * @param {Object} attributes
-         */
-        addForwardBodyAttributes: function (model, attributes) {
-            let prepending = '';
-
-            if (model.get('isHtml')) {
-                prepending = '<br>' + '------' +
-                    this.getLanguage().translate('Forwarded message', 'labels', 'Email') + '------';
-            }
-            else {
-                prepending = '\n\n' + '------' +
-                    this.getLanguage().translate('Forwarded message', 'labels', 'Email') + '------';
-            }
-
-            let list = [];
-
-            if (model.get('from')) {
-                let from = model.get('from');
-                let line = this.getLanguage().translate('from', 'fields', 'Email') + ': ';
-
-                let nameHash = model.get('nameHash') || {};
-
-                if (from in nameHash) {
-                    line += nameHash[from] + ' ';
-                }
-
-                if (model.get('isHtml')) {
-                    line += '&lt;' + from + '&gt;';
-                }
-                else {
-                    line += '<' + from + '>';
-                }
-
-                list.push(line);
-            }
-
-            if (model.get('dateSent')) {
-                let line = this.getLanguage().translate('dateSent', 'fields', 'Email') + ': ';
-                line += this.getDateTime().toDisplayDateTime(model.get('dateSent'));
-
-                list.push(line);
-            }
-
-            if (model.get('name')) {
-                let line = this.getLanguage().translate('subject', 'fields', 'Email') + ': ';
-
-                line += model.get('name');
-
-                list.push(line);
-            }
-
-            if (model.get('to')) {
-                let line = this.getLanguage().translate('to', 'fields', 'Email') + ': ';
-
-                let partList = [];
-
-                model.get('to').split(';').forEach(to => {
-                    let nameHash = model.get('nameHash') || {};
-                    let line = '';
-
-                    if (to in nameHash) {
-                        line += nameHash[to] + ' ';
-                    }
-
-                    if (model.get('isHtml')) {
-                        line += '&lt;' + to + '&gt;';
-                    }
-                    else {
-                        line += '<' + to + '>';
-                    }
-
-                    partList.push(line);
-                });
-
-                line += partList.join(';');
-
-                list.push(line);
-            }
-
-            list.forEach(line => {
-                if (model.get('isHtml')) {
-                    prepending += '<br>' + line;
-                }
-                else {
-                    prepending += '\n' + line;
                 }
             });
 
-            if (model.get('isHtml')) {
-                let body = model.get('body');
+            to = a.join(';');
+        }
 
-                attributes['body'] = prepending + '<br><br>' + body;
-            }
-            else {
-                let bodyPlain = model.get('body') || model.get('bodyPlain') || '';
+        if (
+            (!to || !to.includes('@')) &&
+            model.get('from')
+        ) {
+            if (!userEmailAddressList.includes(model.get('from'))) {
+                to = model.get('from');
 
-                attributes['bodyPlain'] = attributes['body'] = prepending + '\n\n' + bodyPlain;
-            }
-        },
+                if (!nameHash[to]) {
+                    let fromString = model.get('fromString') || model.get('fromName');
 
-        /**
-         * Parse a name from a string address.
-         *
-         * @param {string} value A string address. E.g. `Test Name <address@domain>`.
-         * @returns {string|null}
-         */
-        parseNameFromStringAddress: function (value) {
-            if (~value.indexOf('<')) {
-                let name = value.replace(/<(.*)>/, '').trim();
+                    if (fromString) {
+                        let name = this.parseNameFromStringAddress(fromString);
 
-                if (name.charAt(0) === '"' && name.charAt(name.length - 1) === '"') {
-                    name = name.substr(1, name.length - 2);
-                }
-
-                return name;
-            }
-
-            return null;
-        },
-
-        /**
-         * Parse an address from a string address.
-         *
-         * @param {string} value A string address. E.g. `Test Name <address@domain>`.
-         * @returns {string|null}
-         */
-        parseAddressFromStringAddress: function (value) {
-            let r = value.match(/<(.*)>/);
-            let address = null;
-
-            if (r && r.length > 1) {
-                address = r[1];
-            }
-            else {
-                address = value.trim();
-            }
-
-            return address;
-        },
-
-        /**
-         * Add body attributes for a reply email.
-         *
-         * @param {module:model.Class} model An email model.
-         * @param {Object} attributes
-         */
-        addReplyBodyAttributes: function (model, attributes) {
-            let format = this.getDateTime().getReadableShortDateTimeFormat();
-
-            let dateSent = model.get('dateSent');
-
-            let dateSentSting = null;
-
-            if (dateSent) {
-                let dateSentMoment = this.getDateTime().toMoment(dateSent);
-
-                dateSentSting = dateSentMoment.format(format);
-            }
-
-            let replyHeadString =
-                (dateSentSting || this.getLanguage().translate('Original message', 'labels', 'Email'));
-
-            let fromName = model.get('fromName');
-
-            if (!fromName && model.get('from')) {
-                fromName = (model.get('nameHash') || {})[model.get('from')];
-
-                if (fromName) {
-                    replyHeadString += ', ' + fromName;
+                        if (name !== to) {
+                            nameHash[to] = name;
+                        }
+                    }
                 }
             }
+            else {
+                isReplyOnSent = true;
+            }
+        }
 
-            replyHeadString += ':';
+        attributes.to = to;
+
+        if (cc) {
+            attributes.cc = model.get('cc') || '';
+
+            (model.get('to') || '').split(';').forEach(item => {
+                item = item.trim();
+
+                if (item !== this.getUser().get('emailAddress')) {
+                    if (isReplyOnSent) {
+                        if (attributes.to) {
+                            attributes.to += ';';
+                        }
+
+                        attributes.to += item;
+                    }
+                    else {
+                        if (attributes.cc) {
+                            attributes.cc += ';';
+                        }
+
+                        attributes.cc += item;
+                    }
+                }
+            });
+
+            attributes.cc = attributes.cc.replace(/^(; )/,"");
+        }
+
+        if (attributes.to) {
+            let toList = attributes.to.split(';');
+
+            toList = toList.filter(item => {
+                if (item.indexOf(this.erasedPlaceholder) === 0) {
+                    return false;
+                }
+
+                return true;
+            });
+
+            attributes.to = toList.join(';');
+        }
+
+        if (attributes.cc) {
+            let ccList = attributes.cc.split(';');
+
+            ccList = ccList.filter(item => {
+                if (item.indexOf(this.erasedPlaceholder) === 0) {
+                    return false;
+                }
+
+                return true;
+            });
+
+            attributes.cc = ccList.join(';');
+        }
+
+        if (model.get('parentId')) {
+            attributes['parentId'] = model.get('parentId');
+            attributes['parentName'] = model.get('parentName');
+            attributes['parentType'] = model.get('parentType');
+        }
+
+        if (model.get('teamsIds') && model.get('teamsIds').length) {
+            attributes.teamsIds = Espo.Utils.clone(model.get('teamsIds'));
+            attributes.teamsNames = Espo.Utils.clone(model.get('teamsNames') || {});
+
+            let defaultTeamId = this.user.get('defaultTeamId');
+
+            if (defaultTeamId && !~attributes.teamsIds.indexOf(defaultTeamId)) {
+                attributes.teamsIds.push(this.user.get('defaultTeamId'));
+                attributes.teamsNames[this.user.get('defaultTeamId')] = this.user.get('defaultTeamName');
+            }
+
+            attributes.teamsIds = attributes.teamsIds.filter(teamId => {
+                return this.acl.checkTeamAssignmentPermission(teamId);
+            });
+        }
+
+        attributes.nameHash = nameHash;
+        attributes.repliedId = model.id;
+        attributes.inReplyTo = model.get('messageId');
+
+
+        let toAddressList = (model.get('to') || '').split(';');
+        let userPersonalEmailAddressList = this.getUser().get('userEmailAddressList') || [];
+
+        for (let address of userPersonalEmailAddressList) {
+            if (toAddressList.includes(address)) {
+                attributes.from = address;
+
+                break;
+            }
+        }
+
+        this.addReplyBodyAttributes(model, attributes);
+
+        return attributes;
+    },
+
+    /**
+     * Get forward email attributes.
+     *
+     * @param {module:model} model An email model.
+     * @returns {Object}
+     */
+    getForwardAttributes: function (model) {
+        let attributes = {
+            status: 'Draft',
+            isHtml: model.get('isHtml'),
+        };
+
+        let subject = model.get('name');
+
+        if (~!subject.toUpperCase().indexOf('FWD:') && ~!subject.toUpperCase().indexOf('FW:')) {
+            attributes['name'] = 'Fwd: ' + subject;
+        }
+        else {
+            attributes['name'] = subject;
+        }
+
+        if (model.get('parentId')) {
+            attributes['parentId'] = model.get('parentId');
+            attributes['parentName'] = model.get('parentName');
+            attributes['parentType'] = model.get('parentType');
+        }
+
+        this.addForwardBodyAttributes(model, attributes);
+
+        return attributes;
+    },
+
+    /**
+     * Add body attributes for a forward email.
+     *
+     * @param {module:model} model An email model.
+     * @param {Object} attributes
+     */
+    addForwardBodyAttributes: function (model, attributes) {
+        let prepending = '';
+
+        if (model.get('isHtml')) {
+            prepending = '<br>' + '------' +
+                this.getLanguage().translate('Forwarded message', 'labels', 'Email') + '------';
+        }
+        else {
+            prepending = '\n\n' + '------' +
+                this.getLanguage().translate('Forwarded message', 'labels', 'Email') + '------';
+        }
+
+        let list = [];
+
+        if (model.get('from')) {
+            let from = model.get('from');
+            let line = this.getLanguage().translate('from', 'fields', 'Email') + ': ';
+
+            let nameHash = model.get('nameHash') || {};
+
+            if (from in nameHash) {
+                line += nameHash[from] + ' ';
+            }
 
             if (model.get('isHtml')) {
-                let body = model.get('body');
-
-                body = '<p>&nbsp;</p><p>' +  replyHeadString + '</p><blockquote>' +  body + '</blockquote>';
-
-                attributes['body'] = body;
+                line += '&lt;' + from + '&gt;';
             }
             else {
-                let bodyPlain = model.get('body') || model.get('bodyPlain') || '';
-
-                let b = '\n\n';
-
-                b += replyHeadString + '\n';
-
-                bodyPlain.split('\n').forEach(line => {
-                    b += '> ' + line + '\n';
-                });
-
-                bodyPlain = b;
-
-                attributes['body'] = bodyPlain;
-                attributes['bodyPlain'] = bodyPlain;
-            }
-        },
-
-        /**
-         * Compose a mailto link.
-         *
-         * @param {Object} attributes Attributes.
-         * @param {boolean} [bcc=false] To include BCC.
-         * @returns {string} A mailto link.
-         */
-        composeMailToLink: function (attributes, bcc) {
-            let link = 'mailto:';
-
-            link += (attributes.to || '').split(';').join(',');
-
-            let o = {};
-
-            if (attributes.cc) {
-                o.cc = attributes.cc.split(';').join(',');
+                line += '<' + from + '>';
             }
 
-            if (attributes.bcc) {
-                 if (!bcc) {
-                    bcc = '';
-                } else {
-                    bcc += ';';
+            list.push(line);
+        }
+
+        if (model.get('dateSent')) {
+            let line = this.getLanguage().translate('dateSent', 'fields', 'Email') + ': ';
+            line += this.getDateTime().toDisplayDateTime(model.get('dateSent'));
+
+            list.push(line);
+        }
+
+        if (model.get('name')) {
+            let line = this.getLanguage().translate('subject', 'fields', 'Email') + ': ';
+
+            line += model.get('name');
+
+            list.push(line);
+        }
+
+        if (model.get('to')) {
+            let line = this.getLanguage().translate('to', 'fields', 'Email') + ': ';
+
+            let partList = [];
+
+            model.get('to').split(';').forEach(to => {
+                let nameHash = model.get('nameHash') || {};
+                let line = '';
+
+                if (to in nameHash) {
+                    line += nameHash[to] + ' ';
                 }
-                bcc += attributes.bcc;
-            }
 
-            if (bcc) {
-                o.bcc = bcc.split(';').join(',');
-            }
-
-            if (attributes.name) {
-                o.subject = attributes.name;
-            }
-
-            if (attributes.body) {
-                o.body = attributes.body;
-                if (attributes.isHtml) {
-                    o.body = this.htmlToPlain(o.body);
-                }
-            }
-
-            if (attributes.inReplyTo) {
-                o['In-Reply-To'] = attributes.inReplyTo;
-            }
-
-            let part = '';
-
-            for (let key in o) {
-                if (part !== '') {
-                    part += '&';
+                if (model.get('isHtml')) {
+                    line += '&lt;' + to + '&gt;';
                 }
                 else {
-                    part += '?';
+                    line += '<' + to + '>';
                 }
 
-                part += key + '=' + encodeURIComponent(o[key]);
+                partList.push(line);
+            });
+
+            line += partList.join(';');
+
+            list.push(line);
+        }
+
+        list.forEach(line => {
+            if (model.get('isHtml')) {
+                prepending += '<br>' + line;
+            }
+            else {
+                prepending += '\n' + line;
+            }
+        });
+
+        if (model.get('isHtml')) {
+            let body = model.get('body');
+
+            attributes['body'] = prepending + '<br><br>' + body;
+        }
+        else {
+            let bodyPlain = model.get('body') || model.get('bodyPlain') || '';
+
+            attributes['bodyPlain'] = attributes['body'] = prepending + '\n\n' + bodyPlain;
+        }
+    },
+
+    /**
+     * Parse a name from a string address.
+     *
+     * @param {string} value A string address. E.g. `Test Name <address@domain>`.
+     * @returns {string|null}
+     */
+    parseNameFromStringAddress: function (value) {
+        if (~value.indexOf('<')) {
+            let name = value.replace(/<(.*)>/, '').trim();
+
+            if (name.charAt(0) === '"' && name.charAt(name.length - 1) === '"') {
+                name = name.substr(1, name.length - 2);
             }
 
-            link += part;
+            return name;
+        }
 
-            return link;
-        },
+        return null;
+    },
 
-        /**
-         * Convert an HTML to a plain text.
-         *
-         * @param {string} text A text.
-         * @returns {string}
-         */
-        htmlToPlain: function (text) {
-            text = text || '';
+    /**
+     * Parse an address from a string address.
+     *
+     * @param {string} value A string address. E.g. `Test Name <address@domain>`.
+     * @returns {string|null}
+     */
+    parseAddressFromStringAddress: function (value) {
+        let r = value.match(/<(.*)>/);
+        let address;
 
-            let value = text.replace(/<br\s*\/?>/mg, '\n');
+        if (r && r.length > 1) {
+            address = r[1];
+        }
+        else {
+            address = value.trim();
+        }
 
-            value = value.replace(/<\/p\s*\/?>/mg, '\n\n');
+        return address;
+    },
 
-            let $div = $('<div>').html(value);
+    /**
+     * Add body attributes for a reply email.
+     *
+     * @param {module:model} model An email model.
+     * @param {Object} attributes
+     */
+    addReplyBodyAttributes: function (model, attributes) {
+        let format = this.getDateTime().getReadableShortDateTimeFormat();
 
-            $div.find('style').remove();
-            $div.find('link[ref="stylesheet"]').remove();
+        let dateSent = model.get('dateSent');
 
-            value =  $div.text();
+        let dateSentSting = null;
 
-            return value;
-        },
-    });
+        if (dateSent) {
+            let dateSentMoment = this.getDateTime().toMoment(dateSent);
 
-    return EmailHelper;
+            dateSentSting = dateSentMoment.format(format);
+        }
+
+        let replyHeadString =
+            (dateSentSting || this.getLanguage().translate('Original message', 'labels', 'Email'));
+
+        let fromName = model.get('fromName');
+
+        if (!fromName && model.get('from')) {
+            fromName = (model.get('nameHash') || {})[model.get('from')];
+
+            if (fromName) {
+                replyHeadString += ', ' + fromName;
+            }
+        }
+
+        replyHeadString += ':';
+
+        if (model.get('isHtml')) {
+            let body = model.get('body');
+
+            body = '<p>&nbsp;</p><p>' +  replyHeadString + '</p><blockquote>' +  body + '</blockquote>';
+
+            attributes['body'] = body;
+        }
+        else {
+            let bodyPlain = model.get('body') || model.get('bodyPlain') || '';
+
+            let b = '\n\n';
+
+            b += replyHeadString + '\n';
+
+            bodyPlain.split('\n').forEach(line => {
+                b += '> ' + line + '\n';
+            });
+
+            bodyPlain = b;
+
+            attributes['body'] = bodyPlain;
+            attributes['bodyPlain'] = bodyPlain;
+        }
+    },
+
+    /**
+     * Compose a mailto link.
+     *
+     * @param {Object} attributes Attributes.
+     * @param {boolean} [bcc=false] To include BCC.
+     * @returns {string} A mailto link.
+     */
+    composeMailToLink: function (attributes, bcc) {
+        let link = 'mailto:';
+
+        link += (attributes.to || '').split(';').join(',');
+
+        let o = {};
+
+        if (attributes.cc) {
+            o.cc = attributes.cc.split(';').join(',');
+        }
+
+        if (attributes.bcc) {
+             if (!bcc) {
+                bcc = '';
+            } else {
+                bcc += ';';
+            }
+            bcc += attributes.bcc;
+        }
+
+        if (bcc) {
+            o.bcc = bcc.split(';').join(',');
+        }
+
+        if (attributes.name) {
+            o.subject = attributes.name;
+        }
+
+        if (attributes.body) {
+            o.body = attributes.body;
+            if (attributes.isHtml) {
+                o.body = this.htmlToPlain(o.body);
+            }
+        }
+
+        if (attributes.inReplyTo) {
+            o['In-Reply-To'] = attributes.inReplyTo;
+        }
+
+        let part = '';
+
+        for (let key in o) {
+            if (part !== '') {
+                part += '&';
+            }
+            else {
+                part += '?';
+            }
+
+            part += key + '=' + encodeURIComponent(o[key]);
+        }
+
+        link += part;
+
+        return link;
+    },
+
+    /**
+     * Convert an HTML to a plain text.
+     *
+     * @param {string} text A text.
+     * @returns {string}
+     */
+    htmlToPlain: function (text) {
+        text = text || '';
+
+        let value = text.replace(/<br\s*\/?>/mg, '\n');
+
+        value = value.replace(/<\/p\s*\/?>/mg, '\n\n');
+
+        let $div = $('<div>').html(value);
+
+        $div.find('style').remove();
+        $div.find('link[ref="stylesheet"]').remove();
+
+        value =  $div.text();
+
+        return value;
+    },
 });
+
+export default EmailHelper;
diff --git a/client/src/exceptions.js b/client/src/exceptions.js
index d1e9da91a4..cc183dc67f 100644
--- a/client/src/exceptions.js
+++ b/client/src/exceptions.js
@@ -26,41 +26,38 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
+/** @module exceptions */
+
+Espo.Exceptions = Espo.Exceptions || {};
+
 /**
- * @module exceptions
+ * An access denied exception.
+ *
+ * @param {string} [message] A message.
+ * @class
  */
-define('exceptions', [], function () {
-    Espo.Exceptions = Espo.Exceptions || {};
+Espo.Exceptions.AccessDenied = function (message) {
+    this.message = message;
 
-    /**
-     * An access denied exception.
-     *
-     * @param {string} [message] A message.
-     * @class
-     */
-    Espo.Exceptions.AccessDenied = function (message) {
-        this.message = message;
+    Error.apply(this, arguments);
+};
 
-        Error.apply(this, arguments);
-    };
+Espo.Exceptions.AccessDenied.prototype = new Error();
+Espo.Exceptions.AccessDenied.prototype.name = 'AccessDenied';
 
-    Espo.Exceptions.AccessDenied.prototype = new Error();
-    Espo.Exceptions.AccessDenied.prototype.name = 'AccessDenied';
+/**
+ * A not found exception.
+ *
+ * @param {string} [message] A message.
+ * @class
+ */
+Espo.Exceptions.NotFound = function (message) {
+    this.message = message;
 
-    /**
-     * A not found exception.
-     *
-     * @param {string} [message] A message.
-     * @class
-     */
-    Espo.Exceptions.NotFound = function (message) {
-        this.message = message;
+    Error.apply(this, arguments);
+};
 
-        Error.apply(this, arguments);
-    };
+Espo.Exceptions.NotFound.prototype = new Error();
+Espo.Exceptions.NotFound.prototype.name = 'NotFound';
 
-    Espo.Exceptions.NotFound.prototype = new Error();
-    Espo.Exceptions.NotFound.prototype.name = 'NotFound';
-
-    return Espo.Exceptions;
-});
+export default Espo.Exceptions;
diff --git a/client/src/field-language.js b/client/src/field-language.js
index 7ec4628961..e96a72b217 100644
--- a/client/src/field-language.js
+++ b/client/src/field-language.js
@@ -26,97 +26,93 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('field-language', [], function () {
+/** @module field-language */
+
+/**
+ * A field-language util.
+ *
+ * @class
+ * @param {module:metadata} metadata A metadata.
+ * @param {module:language} language A language.
+ */
+const FieldLanguage = function (metadata, language) {
+    /**
+     * @private
+     * @type {module:metadata}
+     */
+    this.metadata = metadata;
 
     /**
-     * A field-language util.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:field-language
-     *
-     * @param {module:metadata.Class} metadata A metadata.
-     * @param {module:language.Class} language A language.
+     * @private
+     * @type {module:language}
      */
-    let FieldLanguage = function (metadata, language) {
-        /**
-         * @private
-         * @type {module:metadata.Class}
-         */
-        this.metadata = metadata;
+    this.language = language;
+};
 
-        /**
-         * @private
-         * @type {module:language.Class}
-         */
-        this.language = language;
-    };
+_.extend(FieldLanguage.prototype, /** @lends FieldLanguage# */{
 
-    _.extend(FieldLanguage.prototype, /** @lends module:field-language.Class# */{
+    /**
+     * Translate an attribute.
+     *
+     * @param {string} scope A scope.
+     * @param {string} name An attribute name.
+     * @returns {string}
+     */
+    translateAttribute: function (scope, name) {
+        let label = this.language.translate(name, 'fields', scope);
 
-        /**
-         * Translate an attribute.
-         *
-         * @param {string} scope A scope.
-         * @param {string} name An attribute name.
-         * @returns {string}
-         */
-        translateAttribute: function (scope, name) {
-            let label = this.language.translate(name, 'fields', scope);
+        if (name.indexOf('Id') === name.length - 2) {
+            let baseField = name.substr(0, name.length - 2);
 
-            if (name.indexOf('Id') === name.length - 2) {
-                let baseField = name.substr(0, name.length - 2);
-
-                if (this.metadata.get(['entityDefs', scope, 'fields', baseField])) {
-                    label = this.language.translate(baseField, 'fields', scope) +
-                    ' (' + this.language.translate('id', 'fields') + ')';
-                }
+            if (this.metadata.get(['entityDefs', scope, 'fields', baseField])) {
+                label = this.language.translate(baseField, 'fields', scope) +
+                ' (' + this.language.translate('id', 'fields') + ')';
             }
-            else if (name.indexOf('Name') === name.length - 4) {
-                let baseField = name.substr(0, name.length - 4);
+        }
+        else if (name.indexOf('Name') === name.length - 4) {
+            let baseField = name.substr(0, name.length - 4);
 
-                if (this.metadata.get(['entityDefs', scope, 'fields', baseField])) {
-                    label = this.language.translate(baseField, 'fields', scope) +
-                    ' (' + this.language.translate('name', 'fields') + ')';
-                }
+            if (this.metadata.get(['entityDefs', scope, 'fields', baseField])) {
+                label = this.language.translate(baseField, 'fields', scope) +
+                ' (' + this.language.translate('name', 'fields') + ')';
             }
-            else if (name.indexOf('Type') === name.length - 4) {
-                let baseField = name.substr(0, name.length - 4);
+        }
+        else if (name.indexOf('Type') === name.length - 4) {
+            let baseField = name.substr(0, name.length - 4);
 
-                if (this.metadata.get(['entityDefs', scope, 'fields', baseField])) {
-                    label = this.language.translate(baseField, 'fields', scope) +
-                    ' (' + this.language.translate('type', 'fields') + ')';
-                }
+            if (this.metadata.get(['entityDefs', scope, 'fields', baseField])) {
+                label = this.language.translate(baseField, 'fields', scope) +
+                ' (' + this.language.translate('type', 'fields') + ')';
             }
+        }
 
-            if (name.indexOf('Ids') === name.length - 3) {
-                let baseField = name.substr(0, name.length - 3);
+        if (name.indexOf('Ids') === name.length - 3) {
+            let baseField = name.substr(0, name.length - 3);
 
-                if (this.metadata.get(['entityDefs', scope, 'fields', baseField])) {
-                    label = this.language.translate(baseField, 'fields', scope) +
-                    ' (' + this.language.translate('ids', 'fields') + ')';
-                }
+            if (this.metadata.get(['entityDefs', scope, 'fields', baseField])) {
+                label = this.language.translate(baseField, 'fields', scope) +
+                ' (' + this.language.translate('ids', 'fields') + ')';
             }
-            else if (name.indexOf('Names') === name.length - 5) {
-                let baseField = name.substr(0, name.length - 5);
+        }
+        else if (name.indexOf('Names') === name.length - 5) {
+            let baseField = name.substr(0, name.length - 5);
 
-                if (this.metadata.get(['entityDefs', scope, 'fields', baseField])) {
-                    label = this.language.translate(baseField, 'fields', scope) +
-                    ' (' + this.language.translate('names', 'fields') + ')';
-                }
+            if (this.metadata.get(['entityDefs', scope, 'fields', baseField])) {
+                label = this.language.translate(baseField, 'fields', scope) +
+                ' (' + this.language.translate('names', 'fields') + ')';
             }
-            else if (name.indexOf('Types') === name.length - 5) {
-                let baseField = name.substr(0, name.length - 5);
+        }
+        else if (name.indexOf('Types') === name.length - 5) {
+            let baseField = name.substr(0, name.length - 5);
 
-                if (this.metadata.get(['entityDefs', scope, 'fields', baseField])) {
-                    label = this.language.translate(baseField, 'fields', scope) +
-                    ' (' + this.language.translate('types', 'fields') + ')';
-                }
+            if (this.metadata.get(['entityDefs', scope, 'fields', baseField])) {
+                label = this.language.translate(baseField, 'fields', scope) +
+                ' (' + this.language.translate('types', 'fields') + ')';
             }
+        }
 
-            return label;
-        },
-    });
-
-    return FieldLanguage;
+        return label;
+    },
 });
+
+export default FieldLanguage;
diff --git a/client/src/field-manager.js b/client/src/field-manager.js
index 3fa8fd88c4..ed0cff533a 100644
--- a/client/src/field-manager.js
+++ b/client/src/field-manager.js
@@ -26,429 +26,430 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('field-manager', [], function () {
+/** @module field-manager */
+
+/**
+ * Utility for getting field related meta information.
+ *
+ * @class
+ *
+ * @param {Object} [defs] Field type definitions (metadata > fields).
+ * @param {module:metadata} [metadata] Metadata.
+ * @param {modules:acl-manager} [acl] An ACL.
+ */
+const FieldManager = function (defs, metadata, acl) {
 
     /**
-     * Utility for getting field related meta information.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:field-manager
-     *
-     * @param {Object} defs Field type definitions (metadata > fields).
-     * @param {module:metadata.Class} metadata Metadata.
-     * @param {modules:acl-manager.Class} [acl] An ACL.
+     * @public
+     * @internal
+     * @type {Object}
      */
-    let FieldManager = function (defs, metadata, acl) {
-        /**
-         * @private
-         * @type {Object}
-         */
-        this.defs = defs || {};
+    this.defs = defs || {};
 
-        /**
-         * @private
-         * @type {module:metadata.Class}
-         */
-        this.metadata = metadata;
+    /**
+     * @public
+     * @internal
+     * @type {module:metadata}
+     */
+    this.metadata = metadata;
 
-        /**
-         * @private
-         * @type {module:acl-manager.Class}
-         */
-        this.acl = acl;
-    };
+    /**
+     * @public
+     * @internal
+     * @type {module:acl-manager}
+     */
+    this.acl = acl;
+};
 
-    _.extend(FieldManager.prototype, /** @lends module:field-manager.Class# */{
+_.extend(FieldManager.prototype, /** @lends FieldManager# */{
 
-        /**
-         * Get a list of parameters for a specific field type.
-         *
-         * @param {string} fieldType A field type.
-         * @returns {string[]}
-         */
-        getParamList: function (fieldType) {
-            if (fieldType in this.defs) {
-                return this.defs[fieldType].params || [];
+    /**
+     * Get a list of parameters for a specific field type.
+     *
+     * @param {string} fieldType A field type.
+     * @returns {string[]}
+     */
+    getParamList: function (fieldType) {
+        if (fieldType in this.defs) {
+            return this.defs[fieldType].params || [];
+        }
+
+        return [];
+    },
+
+    /**
+     * Whether search filters are allowed for a field type.
+     *
+     * @param {string} fieldType A field type.
+     * @returns {boolean}
+     */
+    checkFilter: function (fieldType) {
+        if (fieldType in this.defs) {
+            if ('filter' in this.defs[fieldType]) {
+                return this.defs[fieldType].filter;
             }
 
-            return [];
-        },
+            return false;
+        }
 
-        /**
-         * Whether search filters are allowed for a field type.
-         *
-         * @param {string} fieldType A field type.
-         * @returns {boolean}
-         */
-        checkFilter: function (fieldType) {
-            if (fieldType in this.defs) {
-                if ('filter' in this.defs[fieldType]) {
-                    return this.defs[fieldType].filter;
+        return false;
+    },
+
+    /**
+     * Whether a merge operation is allowed for a field type.
+     *
+     * @param {string} fieldType A field type.
+     * @returns {boolean}
+     */
+    isMergeable: function (fieldType) {
+        if (fieldType in this.defs) {
+            return !this.defs[fieldType].notMergeable;
+        }
+
+        return false;
+    },
+
+    /**
+     * Get a list of attributes of an entity type.
+     *
+     * @param {string} entityType An entity type.
+     * @returns {string[]}
+     */
+    getEntityTypeAttributeList: function (entityType) {
+        let list = [];
+
+        let defs = this.metadata.get('entityDefs.' + entityType + '.fields') || {};
+
+        Object.keys(defs).forEach(field => {
+            this.getAttributeList(defs[field]['type'], field).forEach(attr => {
+                if (!~list.indexOf(attr)) {
+                    list.push(attr);
+                }
+            });
+        });
+
+        return list;
+    },
+
+    /**
+     * Get a list of actual attributes by a given field type and field name.
+     * Non-actual attributes contains data that for a representation-only purpose.
+     * E.g. `accountId` is actual, `accountName` is non-actual.
+     *
+     * @param {string} fieldType A field type.
+     * @param {string} fieldName A field name.
+     * @returns {string[]}
+     */
+    getActualAttributeList: function (fieldType, fieldName) {
+        let fieldNames = [];
+
+        if (fieldType in this.defs) {
+            if ('actualFields' in this.defs[fieldType]) {
+                let actualFields = this.defs[fieldType].actualFields;
+
+                let naming = 'suffix';
+
+                if ('naming' in this.defs[fieldType]) {
+                    naming = this.defs[fieldType].naming;
                 }
 
-                return false;
-            }
-
-            return false;
-        },
-
-        /**
-         * Whether a merge operation is allowed for a field type.
-         *
-         * @param {string} fieldType A field type.
-         * @returns {boolean}
-         */
-        isMergeable: function (fieldType) {
-            if (fieldType in this.defs) {
-                return !this.defs[fieldType].notMergeable;
-            }
-
-            return false;
-        },
-
-        /**
-         * Get a list of attributes of an entity type.
-         *
-         * @param {string} entityType An entity type.
-         * @returns {string[]}
-         */
-        getEntityTypeAttributeList: function (entityType) {
-            let list = [];
-
-            let defs = this.metadata.get('entityDefs.' + entityType + '.fields') || {};
-
-            Object.keys(defs).forEach(field => {
-                this.getAttributeList(defs[field]['type'], field).forEach(attr => {
-                    if (!~list.indexOf(attr)) {
-                        list.push(attr);
-                    }
-                });
-            });
-
-            return list;
-        },
-
-        /**
-         * Get a list of actual attributes by a given field type and field name.
-         * Non-actual attributes contains data that for a representation-only purpose.
-         * E.g. `accountId` is actual, `accountName` is non-actual.
-         *
-         * @param {string} fieldType A field type.
-         * @param {string} fieldName A field name.
-         * @returns {string[]}
-         */
-        getActualAttributeList: function (fieldType, fieldName) {
-            let fieldNames = [];
-
-            if (fieldType in this.defs) {
-                if ('actualFields' in this.defs[fieldType]) {
-                    let actualFields = this.defs[fieldType].actualFields;
-
-                    let naming = 'suffix';
-
-                    if ('naming' in this.defs[fieldType]) {
-                        naming = this.defs[fieldType].naming;
-                    }
-
-                    if (naming === 'prefix') {
-                        actualFields.forEach(f => {
-                            fieldNames.push(f + Espo.Utils.upperCaseFirst(fieldName));
-                        });
-                    }
-                    else {
-                        actualFields.forEach(f => {
-                            fieldNames.push(fieldName + Espo.Utils.upperCaseFirst(f));
-                        });
-                    }
+                if (naming === 'prefix') {
+                    actualFields.forEach(f => {
+                        fieldNames.push(f + Espo.Utils.upperCaseFirst(fieldName));
+                    });
                 }
                 else {
-                    fieldNames.push(fieldName);
+                    actualFields.forEach(f => {
+                        fieldNames.push(fieldName + Espo.Utils.upperCaseFirst(f));
+                    });
                 }
             }
-
-            return fieldNames;
-        },
-
-        /**
-         * Get a list of non-actual attributes by a given field type and field name.
-         * Non-actual attributes contains data that for a representation-only purpose.
-         * E.g. `accountId` is actual, `accountName` is non-actual.
-         *
-         * @param {string} fieldType A field type.
-         * @param {string} fieldName A field name.
-         * @returns {string[]}
-         */
-        getNotActualAttributeList: function (fieldType, fieldName) {
-            let fieldNames = [];
-
-            if (fieldType in this.defs) {
-                if ('notActualFields' in this.defs[fieldType]) {
-                    let notActualFields = this.defs[fieldType].notActualFields;
-
-                    let naming = 'suffix';
-
-                    if ('naming' in this.defs[fieldType]) {
-                        naming = this.defs[fieldType].naming;
-                    }
-
-                    if (naming === 'prefix') {
-                        notActualFields.forEach(f => {
-                            if (f === '') {
-                                fieldNames.push(fieldName);
-                            }
-                            else {
-                                fieldNames.push(f + Espo.Utils.upperCaseFirst(fieldName));
-                            }
-                        });
-                    }
-                    else {
-                        notActualFields.forEach(f => {
-                            fieldNames.push(fieldName + Espo.Utils.upperCaseFirst(f));
-                        });
-                    }
-                }
+            else {
+                fieldNames.push(fieldName);
             }
+        }
 
-            return fieldNames;
-        },
+        return fieldNames;
+    },
 
-        /**
-         * Get an attribute list of a specific field.
-         *
-         * @param {string} entityType An entity type.
-         * @param {string} field A field.
-         * @returns {string[]}
-         */
-        getEntityTypeFieldAttributeList: function (entityType, field) {
-            let type = this.metadata.get(['entityDefs', entityType, 'fields', field, 'type']);
+    /**
+     * Get a list of non-actual attributes by a given field type and field name.
+     * Non-actual attributes contains data that for a representation-only purpose.
+     * E.g. `accountId` is actual, `accountName` is non-actual.
+     *
+     * @param {string} fieldType A field type.
+     * @param {string} fieldName A field name.
+     * @returns {string[]}
+     */
+    getNotActualAttributeList: function (fieldType, fieldName) {
+        let fieldNames = [];
 
-            if (!type) {
-                return [];
-            }
+        if (fieldType in this.defs) {
+            if ('notActualFields' in this.defs[fieldType]) {
+                let notActualFields = this.defs[fieldType].notActualFields;
 
-            return _.union(
-                this.getAttributeList(type, field),
-                this._getEntityTypeFieldAdditionalAttributeList(entityType, field)
-            );
-        },
+                let naming = 'suffix';
 
-        /**
-         * Get an actual attribute list of a specific field.
-         *
-         * @param {string} entityType An entity type.
-         * @param {string} field A field.
-         * @returns {string[]}
-         */
-        getEntityTypeFieldActualAttributeList: function (entityType, field) {
-            let type = this.metadata.get(['entityDefs', entityType, 'fields', field, 'type']);
-
-            if (!type) {
-                return [];
-            }
-
-            return _.union(
-                this.getActualAttributeList(type, field),
-                this._getEntityTypeFieldAdditionalAttributeList(entityType, field)
-            );
-        },
-
-        /**
-         * @private
-         */
-        _getEntityTypeFieldAdditionalAttributeList: function (entityType, field) {
-            let type = this.metadata.get(['entityDefs', entityType, 'fields', field, 'type']);
-
-            if (!type) {
-                return [];
-            }
-
-            let partList = this.metadata
-                .get(['entityDefs', entityType, 'fields', field, 'additionalAttributeList']) || [];
-
-            if (partList.length === 0) {
-                return [];
-            }
-
-            let isPrefix = (this.defs[type] || {}).naming === 'prefix';
-
-            let list = [];
-
-            partList.forEach(item => {
-                if (isPrefix) {
-                    list.push(item + Espo.Utils.upperCaseFirst(field));
-
-                    return;
+                if ('naming' in this.defs[fieldType]) {
+                    naming = this.defs[fieldType].naming;
                 }
 
-                list.push(field + Espo.Utils.upperCaseFirst(item));
+                if (naming === 'prefix') {
+                    notActualFields.forEach(f => {
+                        if (f === '') {
+                            fieldNames.push(fieldName);
+                        }
+                        else {
+                            fieldNames.push(f + Espo.Utils.upperCaseFirst(fieldName));
+                        }
+                    });
+                }
+                else {
+                    notActualFields.forEach(f => {
+                        fieldNames.push(fieldName + Espo.Utils.upperCaseFirst(f));
+                    });
+                }
+            }
+        }
+
+        return fieldNames;
+    },
+
+    /**
+     * Get an attribute list of a specific field.
+     *
+     * @param {string} entityType An entity type.
+     * @param {string} field A field.
+     * @returns {string[]}
+     */
+    getEntityTypeFieldAttributeList: function (entityType, field) {
+        let type = this.metadata.get(['entityDefs', entityType, 'fields', field, 'type']);
+
+        if (!type) {
+            return [];
+        }
+
+        return _.union(
+            this.getAttributeList(type, field),
+            this._getEntityTypeFieldAdditionalAttributeList(entityType, field)
+        );
+    },
+
+    /**
+     * Get an actual attribute list of a specific field.
+     *
+     * @param {string} entityType An entity type.
+     * @param {string} field A field.
+     * @returns {string[]}
+     */
+    getEntityTypeFieldActualAttributeList: function (entityType, field) {
+        let type = this.metadata.get(['entityDefs', entityType, 'fields', field, 'type']);
+
+        if (!type) {
+            return [];
+        }
+
+        return _.union(
+            this.getActualAttributeList(type, field),
+            this._getEntityTypeFieldAdditionalAttributeList(entityType, field)
+        );
+    },
+
+    /**
+     * @private
+     */
+    _getEntityTypeFieldAdditionalAttributeList: function (entityType, field) {
+        let type = this.metadata.get(['entityDefs', entityType, 'fields', field, 'type']);
+
+        if (!type) {
+            return [];
+        }
+
+        let partList = this.metadata
+            .get(['entityDefs', entityType, 'fields', field, 'additionalAttributeList']) || [];
+
+        if (partList.length === 0) {
+            return [];
+        }
+
+        let isPrefix = (this.defs[type] || {}).naming === 'prefix';
+
+        let list = [];
+
+        partList.forEach(item => {
+            if (isPrefix) {
+                list.push(item + Espo.Utils.upperCaseFirst(field));
+
+                return;
+            }
+
+            list.push(field + Espo.Utils.upperCaseFirst(item));
+        });
+
+        return list;
+    },
+
+    /**
+     * Get a list of attributes by a given field type and field name.
+     *
+     * @param {string} fieldType A field type.
+     * @param {string} fieldName A field name.
+     * @returns {string[]}
+     */
+    getAttributeList: function (fieldType, fieldName) {
+        return _.union(
+            this.getActualAttributeList(fieldType, fieldName),
+            this.getNotActualAttributeList(fieldType, fieldName)
+        );
+    },
+
+    /**
+     * @typedef {Object} module:field-manager~FieldFilters
+     *
+     * @property {string} [type] Only of a specific field type.
+     * @property {string[]} [typeList] Only of a specific field types.
+     * @property {boolean} [onlyAvailable] To exclude disabled, admin-only, internal, forbidden fields.
+     * @property {'read'|'edit'} [acl] To exclude fields not accessible for a current user over
+     *   a specified access level.
+     */
+
+    /**
+     * Get a list of fields of a specific entity type.
+     *
+     * @param {string} entityType An entity type.
+     * @param {module:field-manager~FieldFilters} [o] Filters.
+     * @returns {string[]}
+     */
+    getEntityTypeFieldList: function (entityType, o) {
+        let list = Object.keys(this.metadata.get(['entityDefs', entityType, 'fields']) || {});
+
+        o = o || {};
+
+        let typeList = o.typeList;
+
+        if (!typeList && o.type) {
+            typeList = [o.type];
+        }
+
+        if (typeList) {
+            list = list.filter(item => {
+                let type = this.metadata.get(['entityDefs', entityType, 'fields', item, 'type']);
+
+                return ~typeList.indexOf(type);
             });
+        }
 
-            return list;
-        },
+        if (o.onlyAvailable || o.acl) {
+            list = list.filter(item => {
+                return this.isEntityTypeFieldAvailable(entityType, item);
+            });
+        }
 
-        /**
-         * Get a list of attributes by a given field type and field name.
-         *
-         * @param {string} fieldType A field type.
-         * @param {string} fieldName A field name.
-         * @returns {string[]}
-         */
-        getAttributeList: function (fieldType, fieldName) {
-            return _.union(
-                this.getActualAttributeList(fieldType, fieldName),
-                this.getNotActualAttributeList(fieldType, fieldName)
-            );
-        },
+        if (o.acl) {
+            let level = o.acl || 'read';
 
-        /**
-         * @typedef {Object} module:field-manager.Class~FieldFilters
-         *
-         * @property {string} [type] Only of a specific field type.
-         * @property {string[]} [typeList] Only of a specific field types.
-         * @property {boolean} [onlyAvailable] To exclude disabled, admin-only, internal, forbidden fields.
-         * @property {'read'|'edit'} [acl] To exclude fields not accessible for a current user over
-         *   a specified access level.
-         */
+            let forbiddenEditFieldList = this.acl.getScopeForbiddenFieldList(entityType, level);
 
-        /**
-         * Get a list of fields of a specific entity type.
-         *
-         * @param {string} entityType An entity type.
-         * @param {module:field-manager.Class~FieldFilters} [o] Filters.
-         * @returns {string[]}
-         */
-        getEntityTypeFieldList: function (entityType, o) {
-            let list = Object.keys(this.metadata.get(['entityDefs', entityType, 'fields']) || {});
+            list = list.filter(item => {
+                return !~forbiddenEditFieldList.indexOf(item);
+            });
+        }
 
-            o = o || {};
+        return list;
+    },
 
-            let typeList = o.typeList;
+    /**
+     * @deprecated Since v5.7.
+     */
+    getScopeFieldList: function (entityType) {
+        return this.getEntityTypeFieldList(entityType);
+    },
 
-            if (!typeList && o.type) {
-                typeList = [o.type];
+    /**
+     * Get a field parameter value.
+     *
+     * @param {string} entityType An entity type.
+     * @param {string} field A field name.
+     * @param {string} param A parameter name.
+     * @returns {*}
+     */
+    getEntityTypeFieldParam: function (entityType, field, param) {
+        return this.metadata.get(['entityDefs', entityType, 'fields', field, param]);
+    },
+
+    /**
+     * Get a view name/path for a specific field type.
+     *
+     * @param {string} fieldType A field type.
+     * @returns {string}
+     */
+    getViewName: function (fieldType) {
+        if (fieldType in this.defs) {
+            if ('view' in this.defs[fieldType]) {
+                return this.defs[fieldType].view;
             }
+        }
 
-            if (typeList) {
-                list = list.filter(item => {
-                    let type = this.metadata.get(['entityDefs', entityType, 'fields', item, 'type']);
+        return 'views/fields/' + Espo.Utils.camelCaseToHyphen(fieldType);
+    },
 
-                    return ~typeList.indexOf(type);
-                });
-            }
+    /**
+     * @deprecated Use `getParamList`.
+     */
+    getParams: function (fieldType) {
+        return this.getParamList(fieldType);
+    },
 
-            if (o.onlyAvailable || o.acl) {
-                list = list.filter(item => {
-                    return this.isEntityTypeFieldAvailable(entityType, item);
-                });
-            }
+    /**
+     * @deprecated Use `getAttributeList`.
+     */
+    getAttributes: function (fieldType, fieldName) {
+        return this.getAttributeList(fieldType, fieldName);
+    },
 
-            if (o.acl) {
-                let level = o.acl || 'read';
+    /**
+     * @deprecated Use `getActualAttributeList`.
+     */
+    getActualAttributes: function (fieldType, fieldName) {
+        return this.getActualAttributeList(fieldType, fieldName);
+    },
 
-                let forbiddenEditFieldList = this.acl.getScopeForbiddenFieldList(entityType, level);
+    /**
+     * @deprecated Use `getNotActualAttributeList`.
+     */
+    getNotActualAttributes: function (fieldType, fieldName) {
+        return this.getNotActualAttributeList(fieldType, fieldName);
+    },
 
-                list = list.filter(item => {
-                    return !~forbiddenEditFieldList.indexOf(item);
-                });
-            }
+    /**
+     * Check whether a field is not disabled, not only-admin, not forbidden and not internal.
+     *
+     * @param {string} entityType An entity type.
+     * @param {string} field A field name.
+     * @returns {boolean}
+     */
+    isEntityTypeFieldAvailable: function (entityType, field) {
+        if (this.metadata.get(['entityDefs', entityType, 'fields', field, 'disabled'])) {
+            return false;
+        }
 
-            return list;
-        },
+        if (
+            this.metadata.get(['entityAcl', entityType, 'fields', field, 'onlyAdmin']) ||
+            this.metadata.get(['entityAcl', entityType, 'fields', field, 'forbidden']) ||
+            this.metadata.get(['entityAcl', entityType, 'fields', field, 'internal'])
+        ) {
+            return false;
+        }
 
-        /**
-         * @deprecated Since v5.7.
-         */
-        getScopeFieldList: function (entityType) {
-            return this.getEntityTypeFieldList(entityType);
-        },
+        return true;
+    },
 
-        /**
-         * Get a field parameter value.
-         *
-         * @param {string} entityType An entity type.
-         * @param {string} field A field name.
-         * @param {string} param A parameter name.
-         * @returns {*}
-         */
-        getEntityTypeFieldParam: function (entityType, field, param) {
-            return this.metadata.get(['entityDefs', entityType, 'fields', field, param]);
-        },
-
-        /**
-         * Get a view name/path for a specific field type.
-         *
-         * @param {string} fieldType A field type.
-         * @returns {string}
-         */
-        getViewName: function (fieldType) {
-            if (fieldType in this.defs) {
-                if ('view' in this.defs[fieldType]) {
-                    return this.defs[fieldType].view;
-                }
-            }
-
-            return 'views/fields/' + Espo.Utils.camelCaseToHyphen(fieldType);
-        },
-
-        /**
-         * @deprecated Use `getParamList`.
-         */
-        getParams: function (fieldType) {
-            return this.getParamList(fieldType);
-        },
-
-        /**
-         * @deprecated Use `getAttributeList`.
-         */
-        getAttributes: function (fieldType, fieldName) {
-            return this.getAttributeList(fieldType, fieldName);
-        },
-
-        /**
-         * @deprecated Use `getActualAttributeList`.
-         */
-        getActualAttributes: function (fieldType, fieldName) {
-            return this.getActualAttributeList(fieldType, fieldName);
-        },
-
-        /**
-         * @deprecated Use `getNotActualAttributeList`.
-         */
-        getNotActualAttributes: function (fieldType, fieldName) {
-            return this.getNotActualAttributeList(fieldType, fieldName);
-        },
-
-        /**
-         * Check whether a field is not disabled, not only-admin, not forbidden and not internal.
-         *
-         * @param {string} entityType An entity type.
-         * @param {string} field A field name.
-         * @returns {boolean}
-         */
-        isEntityTypeFieldAvailable: function (entityType, field) {
-            if (this.metadata.get(['entityDefs', entityType, 'fields', field, 'disabled'])) {
-                return false;
-            }
-
-            if (
-                this.metadata.get(['entityAcl', entityType, 'fields', field, 'onlyAdmin']) ||
-                this.metadata.get(['entityAcl', entityType, 'fields', field, 'forbidden']) ||
-                this.metadata.get(['entityAcl', entityType, 'fields', field, 'internal'])
-            ) {
-                return false;
-            }
-
-            return true;
-        },
-
-        /**
-         * @deprecated Use `isEntityTypeFieldAvailable`.
-         */
-        isScopeFieldAvailable: function (entityType, field) {
-            return this.isEntityTypeFieldAvailable(entityType, field);
-        },
-    });
-
-    return FieldManager;
+    /**
+     * @deprecated Use `isEntityTypeFieldAvailable`.
+     */
+    isScopeFieldAvailable: function (entityType, field) {
+        return this.isEntityTypeFieldAvailable(entityType, field);
+    },
 });
+
+export default FieldManager;
diff --git a/client/src/handlers/create-related.js b/client/src/handlers/create-related.js
index a396406b85..9854cb2b90 100644
--- a/client/src/handlers/create-related.js
+++ b/client/src/handlers/create-related.js
@@ -39,7 +39,7 @@ define('handlers/create-related', [], () => {
     class Class {
 
         /**
-         * @param {module:view-helper.Class} viewHelper
+         * @param {module:view-helper} viewHelper
          */
         constructor(viewHelper) {
             this.viewHelper = viewHelper;
@@ -49,7 +49,7 @@ define('handlers/create-related', [], () => {
          * Get attributes for a new record.
          *
          * @abstract
-         * @param {module:model.Class} model A model.
+         * @param {module:model} model A model.
          * @return {Promise<Object.<string, *>>} Attributes.
          */
         getAttributes(model) {
diff --git a/client/src/handlers/login.js b/client/src/handlers/login.js
index 5e820bc827..160605e6f4 100644
--- a/client/src/handlers/login.js
+++ b/client/src/handlers/login.js
@@ -26,49 +26,45 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('handlers/login', [], function () {
+/** @module handlers/login */
+
+/**
+ * Custom login handling. To be extended.
+ *
+ * @abstract
+ */
+class Handler {
 
     /**
-     * Custom login handling. To be extended.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:handlers/login
-     * @abstract
+     * @param {module:views/login} loginView A login view.
+     * @param {Object.<string, *>} data Additional metadata.
      */
-    class Class {
+    constructor(loginView, data) {
+        /**
+         * A login view.
+         * @protected
+         * @type {module:views/login}
+         */
+        this.loginView = loginView;
 
         /**
-         * @param {module:views/login.Class} loginView A login view.
-         * @param {Object.<string, *>} data Additional metadata.
+         * Additional metadata.
+         * @protected
+         * @type {Object.<string, *>}
          */
-        constructor(loginView, data) {
-            /**
-             * A login view.
-             * @protected
-             * @type {module:views/login.Class}
-             */
-            this.loginView = loginView;
-
-            /**
-             * Additional metadata.
-             * @protected
-             * @type {Object.<string, *>}
-             */
-            this.data = data;
-        }
-
-        /**
-         * Process. Called on 'Sign in' button click.
-         *
-         * @public
-         * @abstract
-         * @return Promise<{Object.<string, string>}> Resolved with headers to be sent to the `App/user` endpoint.
-         */
-        process() {
-            return Promise.resolve({});
-        }
+        this.data = data;
     }
 
-    return Class;
-});
+    /**
+     * Process. Called on 'Sign in' button click.
+     *
+     * @public
+     * @abstract
+     * @return {Promise<Object.<string, string>>} Resolved with headers to be sent to the `App/user` endpoint.
+     */
+    process() {
+        return Promise.resolve({});
+    }
+}
+
+export default Handler;
diff --git a/client/src/handlers/login/oidc.js b/client/src/handlers/login/oidc.js
index 6f1c2aa868..a5ebdf2b32 100644
--- a/client/src/handlers/login/oidc.js
+++ b/client/src/handlers/login/oidc.js
@@ -26,194 +26,187 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('handlers/login/oidc', ['handlers/login'], function (Dep) {
+import Dep from 'handlers/login';
+import Base64 from 'lib!base64';
 
-    /**
-     * Custom login handling. To be extended.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:handlers/login/oidc
-     * @extends module:handlers/login.Class
-     */
-    class Class extends Dep {
+class Handler extends Dep {
 
-        process() {
-            Espo.Ui.notify(' ... ');
+    /** @inheritDoc */
+    process() {
+        Espo.Ui.notify(' ... ');
 
-            return new Promise((resolve, reject) => {
-                Espo.Ajax.getRequest('Oidc/authorizationData')
-                    .then(data => {
-                        Espo.Ui.notify(false);
+        return new Promise((resolve, reject) => {
+            Espo.Ajax.getRequest('Oidc/authorizationData')
+                .then(data => {
+                    Espo.Ui.notify(false);
 
-                        this.processWithData(data)
-                            .then((code, nonce) => {
-                                let authString = Base64.encode('**oidc:' + code);
+                    this.processWithData(data)
+                        .then((code, nonce) => {
+                            let authString = Base64.encode('**oidc:' + code);
 
-                                let headers = {
-                                    'Espo-Authorization': authString,
-                                    'Authorization': 'Basic ' + authString,
-                                    'X-Oidc-Authorization-Nonce': nonce,
-                                };
+                            let headers = {
+                                'Espo-Authorization': authString,
+                                'Authorization': 'Basic ' + authString,
+                                'X-Oidc-Authorization-Nonce': nonce,
+                            };
 
-                                resolve(headers);
-                            })
-                            .catch(() => {
-                                reject();
-                            });
-                    })
-                    .catch(() => {
-                        Espo.Ui.notify(false)
-
-                        reject();
-                    });
-            });
-        }
-
-        /**
-         * @private
-         * @param {{
-         *  endpoint: string,
-         *  clientId: string,
-         *  redirectUri: string,
-         *  scopes: string[],
-         *  claims: ?string,
-         *  prompt: 'login'|'consent'|'select_account',
-         *  maxAge: ?Number,
-         * }} data
-         * @return {Promise}
-         */
-        processWithData(data) {
-            let state = (Math.random() + 1).toString(36).substring(7);
-            let nonce = (Math.random() + 1).toString(36).substring(7);
-
-            let params = {
-                client_id: data.clientId,
-                redirect_uri: data.redirectUri,
-                response_type: 'code',
-                scope: data.scopes.join(' '),
-                state: state,
-                nonce: nonce,
-                prompt: data.prompt,
-            };
-
-            if (data.maxAge || data.maxAge === 0) {
-                params.max_age = data.maxAge;
-            }
-
-            if (data.claims) {
-                params.claims = data.claims;
-            }
-
-            let partList = Object.entries(params)
-                .map(([key, value]) => {
-                    return key + '=' + encodeURIComponent(value);
-                });
-
-            let url = data.endpoint + '?' + partList.join('&');
-
-            return this.processWindow(url, state, nonce);
-        }
-
-        /**
-         * @private
-         * @param {string} url
-         * @param {string} state
-         * @param {string} nonce
-         * @return {Promise}
-         */
-        processWindow(url, state, nonce) {
-            let proxy = window.open(url, 'ConnectWithOAuth', 'location=0,status=0,width=800,height=800');
-
-            return new Promise((resolve, reject) => {
-                let fail = () => {
-                    window.clearInterval(interval);
-
-                    if (!proxy.closed) {
-                        proxy.close();
-                    }
+                            resolve(headers);
+                        })
+                        .catch(() => {
+                            reject();
+                        });
+                })
+                .catch(() => {
+                    Espo.Ui.notify(false)
 
                     reject();
-                };
-
-                let interval = window.setInterval(() => {
-                    if (proxy.closed) {
-                        fail();
-
-                        return;
-                    }
-
-                    let url;
-
-                    try {
-                        url = proxy.location.href;
-                    }
-                    catch (e) {
-                        return;
-                    }
-
-                    if (!url) {
-                        return;
-                    }
-
-                    let parsedData = this.parseWindowUrl(url);
-
-                    if (!parsedData) {
-                        fail();
-                        Espo.Ui.error('Could not parse URL', true);
-
-                        return;
-                    }
-
-                    if ((parsedData.error || parsedData.code) && parsedData.state !== state) {
-                        fail();
-                        Espo.Ui.error('State mismatch', true);
-
-                        return;
-                    }
-
-                    if (parsedData.error) {
-                        fail();
-                        Espo.Ui.error(parsedData.errorDescription || this.loginView.translate('Error'), true);
-
-                        return;
-                    }
-
-                    if (parsedData.code) {
-                        window.clearInterval(interval);
-                        proxy.close();
-
-                        resolve(parsedData.code, nonce);
-                    }
-                }, 300);
-            });
-        }
-
-        /**
-         * @param {string} url
-         * @return {?{
-         *     code: ?string,
-         *     state: ?string,
-         *     error: ?string,
-         *     errorDescription: ?string,
-         * }}
-         */
-        parseWindowUrl(url) {
-            try {
-                let params = new URL(url).searchParams;
-
-                return {
-                    code: params.get('code'),
-                    state: params.get('state'),
-                    error: params.get('error'),
-                    errorDescription: params.get('errorDescription'),
-                };
-            }
-            catch(e) {
-                return null;
-            }
-        }
+                });
+        });
     }
 
-    return Class;
-});
+    /**
+     * @private
+     * @param {{
+     *  endpoint: string,
+     *  clientId: string,
+     *  redirectUri: string,
+     *  scopes: string[],
+     *  claims: ?string,
+     *  prompt: 'login'|'consent'|'select_account',
+     *  maxAge: ?Number,
+     * }} data
+     * @return {Promise}
+     */
+    processWithData(data) {
+        let state = (Math.random() + 1).toString(36).substring(7);
+        let nonce = (Math.random() + 1).toString(36).substring(7);
+
+        let params = {
+            client_id: data.clientId,
+            redirect_uri: data.redirectUri,
+            response_type: 'code',
+            scope: data.scopes.join(' '),
+            state: state,
+            nonce: nonce,
+            prompt: data.prompt,
+        };
+
+        if (data.maxAge || data.maxAge === 0) {
+            params.max_age = data.maxAge;
+        }
+
+        if (data.claims) {
+            params.claims = data.claims;
+        }
+
+        let partList = Object.entries(params)
+            .map(([key, value]) => {
+                return key + '=' + encodeURIComponent(value);
+            });
+
+        let url = data.endpoint + '?' + partList.join('&');
+
+        return this.processWindow(url, state, nonce);
+    }
+
+    /**
+     * @private
+     * @param {string} url
+     * @param {string} state
+     * @param {string} nonce
+     * @return {Promise}
+     */
+    processWindow(url, state, nonce) {
+        let proxy = window.open(url, 'ConnectWithOAuth', 'location=0,status=0,width=800,height=800');
+
+        return new Promise((resolve, reject) => {
+            let fail = () => {
+                window.clearInterval(interval);
+
+                if (!proxy.closed) {
+                    proxy.close();
+                }
+
+                reject();
+            };
+
+            let interval = window.setInterval(() => {
+                if (proxy.closed) {
+                    fail();
+
+                    return;
+                }
+
+                let url;
+
+                try {
+                    url = proxy.location.href;
+                }
+                catch (e) {
+                    return;
+                }
+
+                if (!url) {
+                    return;
+                }
+
+                let parsedData = this.parseWindowUrl(url);
+
+                if (!parsedData) {
+                    fail();
+                    Espo.Ui.error('Could not parse URL', true);
+
+                    return;
+                }
+
+                if ((parsedData.error || parsedData.code) && parsedData.state !== state) {
+                    fail();
+                    Espo.Ui.error('State mismatch', true);
+
+                    return;
+                }
+
+                if (parsedData.error) {
+                    fail();
+                    Espo.Ui.error(parsedData.errorDescription || this.loginView.translate('Error'), true);
+
+                    return;
+                }
+
+                if (parsedData.code) {
+                    window.clearInterval(interval);
+                    proxy.close();
+
+                    resolve(parsedData.code, nonce);
+                }
+            }, 300);
+        });
+    }
+
+    /**
+     * @param {string} url
+     * @return {?{
+     *     code: ?string,
+     *     state: ?string,
+     *     error: ?string,
+     *     errorDescription: ?string,
+     * }}
+     */
+    parseWindowUrl(url) {
+        try {
+            let params = new URL(url).searchParams;
+
+            return {
+                code: params.get('code'),
+                state: params.get('state'),
+                error: params.get('error'),
+                errorDescription: params.get('errorDescription'),
+            };
+        }
+        catch(e) {
+            return null;
+        }
+    }
+}
+
+export default Handler;
diff --git a/client/src/handlers/select-related.js b/client/src/handlers/select-related.js
index 95e9f511e1..561241ee02 100644
--- a/client/src/handlers/select-related.js
+++ b/client/src/handlers/select-related.js
@@ -26,45 +26,40 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('handlers/select-related', [], () => {
+/** @module handlers/select-related */
+
+/**
+ * @typedef Object
+ * @name module:handlers/select-related~filters
+ * @property {Object.<string, module:search-manager~advancedFilter>} [advanced]
+ *  Advanced filters map. A field name as a key.
+ * @property {string[]} [bool] Bool filters.
+ * @property {string} [primary] A primary filter.
+ */
+
+/**
+ * Prepares filters for selecting records to relate.
+ *
+ * @abstract
+ */
+export default class {
 
     /**
-     * @typedef Object
-     * @name module:handlers/select-related~filters
-     * @property {Object.<string, module:search-manager~advancedFilter>} [advanced]
-     *  Advanced filters map. A field name as a key.
-     * @property {string[]} [bool] Bool filters.
-     * @property {string} [primary] A primary filter.
+     * @param {module:view-helper} viewHelper
      */
-
-    /**
-     * Prepares filters for selecting records to relate.
-     *
-     * @abstract
-     * @class
-     * @name Class
-     * @memberOf module:handlers/select-related
-     */
-    class Class {
-
-        /**
-         * @param {module:view-helper.Class} viewHelper
-         */
-        constructor(viewHelper) {
-            this.viewHelper = viewHelper;
-        }
-
-        /**
-         * Get filters for selecting records to relate.
-         *
-         * @abstract
-         * @param {module:model.Class} model A model.
-         * @return {Promise<module:handlers/select-related~filters>} Filters.
-         */
-        getFilters(model) {
-            return Promise.resolve({});
-        }
+    constructor(viewHelper) {
+        /** @protected */
+        this.viewHelper = viewHelper;
     }
 
-    return Class;
-});
+    /**
+     * Get filters for selecting records to relate.
+     *
+     * @abstract
+     * @param {module:model} model A model.
+     * @return {Promise<module:handlers/select-related~filters>} Filters.
+     */
+    getFilters(model) {
+        return Promise.resolve({});
+    }
+}
diff --git a/client/src/handlers/select-related/same-account-many.js b/client/src/handlers/select-related/same-account-many.js
index 7f2ffd0e22..8b11821154 100644
--- a/client/src/handlers/select-related/same-account-many.js
+++ b/client/src/handlers/select-related/same-account-many.js
@@ -30,7 +30,7 @@ define('handlers/select-related/same-account-many', ['handlers/select-related'],
 
     return class extends Dep {
         /**
-         * @param {module:model.Class} model
+         * @param {module:model} model
          * @return {Promise<module:handlers/select-related~filters>}
          */
         getFilters(model) {
diff --git a/client/src/handlers/select-related/same-account.js b/client/src/handlers/select-related/same-account.js
index fb9203e33a..17d7405474 100644
--- a/client/src/handlers/select-related/same-account.js
+++ b/client/src/handlers/select-related/same-account.js
@@ -30,7 +30,7 @@ define('handlers/select-related/same-account', ['handlers/select-related'], Dep
 
     return class extends Dep {
         /**
-         * @param {module:model.Class} model
+         * @param {module:model} model
          * @return {Promise<module:handlers/select-related~filters>}
          */
         getFilters(model) {
diff --git a/client/src/handlers/working-time-range.js b/client/src/handlers/working-time-range.js
index 46fd0b81e9..ca0c74e8f6 100644
--- a/client/src/handlers/working-time-range.js
+++ b/client/src/handlers/working-time-range.js
@@ -31,7 +31,7 @@ define('handlers/working-time-range', [], () => {
     let Class = class Class {
 
         constructor(view) {
-            /** @type {module:views/record/edit.Class} */
+            /** @type {module:views/record/edit} */
             this.view = view;
         }
 
diff --git a/client/src/helpers/action-item-setup.js b/client/src/helpers/action-item-setup.js
index bc37a14298..af6e84e081 100644
--- a/client/src/helpers/action-item-setup.js
+++ b/client/src/helpers/action-item-setup.js
@@ -26,152 +26,143 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-/**
- * @module helpers/action-item-setup
- */
-define(() => {
+/** @module helpers/action-item-setup */
+
+export default class {
+    /**
+     * @param {module:metadata} metadata
+     * @param {module:view-helper} viewHelper
+     * @param {module:acl-manager} acl
+     * @param {module:language} language
+     */
+    constructor(metadata, viewHelper, acl, language) {
+        this.metadata = metadata;
+        this.viewHelper = viewHelper;
+        this.acl = acl;
+        this.language = language;
+    }
 
     /**
-     * @memberOf module:helpers/action-item-setup
+     * @param {module:view} view
+     * @param {string} type
+     * @param {function(Promise): void} waitFunc
+     * @param {function(Object): void} addFunc
+     * @param {function(string): void} showFunc
+     * @param {function(string): void} hideFunc
+     * @param {{listenToViewModelSync?: boolean}} options
      */
-    class Class {
-        /**
-         * @param {module:metadata.Class} metadata
-         * @param {module:view-helper.Class} viewHelper
-         * @param {module:acl-manager.Class} acl
-         * @param {module:language.Class} language
-         */
-        constructor(metadata, viewHelper, acl, language) {
-            this.metadata = metadata;
-            this.viewHelper = viewHelper;
-            this.acl = acl;
-            this.language = language;
+    setup(view, type, waitFunc, addFunc, showFunc, hideFunc, options) {
+        options = options || {};
+        let actionList = [];
+
+        let scope = view.scope || view.model.entityType;
+
+        if (!scope) {
+            throw new Error();
         }
 
-        /**
-         * @param {module:view.Class} view
-         * @param {string} type
-         * @param {function(Promise): void} waitFunc
-         * @param {function(Object): void} addFunc
-         * @param {function(string): void} showFunc
-         * @param {function(string): void} hideFunc
-         * @param {{listenToViewModelSync?: boolean}} options
-         */
-        setup(view, type, waitFunc, addFunc, showFunc, hideFunc, options) {
-            options = options || {};
-            let actionList = [];
+        let actionDefsList = [
+            ...this.metadata.get(['clientDefs', 'Global', type + 'ActionList']) || [],
+            ...this.metadata.get(['clientDefs', scope, type + 'ActionList']) || [],
+        ];
 
-            let scope = view.scope || view.model.entityType;
-
-            if (!scope) {
-                throw new Error();
+        actionDefsList.forEach(item => {
+            if (typeof item === 'string') {
+                item = {name: item};
             }
 
-            let actionDefsList = [
-                ...this.metadata.get(['clientDefs', 'Global', type + 'ActionList']) || [],
-                ...this.metadata.get(['clientDefs', scope, type + 'ActionList']) || [],
-            ];
+            item = Espo.Utils.cloneDeep(item);
 
-            actionDefsList.forEach(item => {
-                if (typeof item === 'string') {
-                    item = {name: item};
-                }
+            let name = item.name;
 
-                item = Espo.Utils.cloneDeep(item);
+            if (!item.label) {
+                item.html = this.language.translate(name, 'actions', scope);
+            }
 
-                let name = item.name;
+            item.data = item.data || {};
 
-                if (!item.label) {
-                    item.html = this.language.translate(name, 'actions', scope);
-                }
+            let handlerName = item.handler || item.data.handler;
 
-                item.data = item.data || {};
+            if (handlerName && !item.data.handler) {
+                item.data.handler = handlerName;
+            }
 
-                let handlerName = item.handler || item.data.handler;
+            addFunc(item);
 
-                if (handlerName && !item.data.handler) {
-                    item.data.handler = handlerName;
-                }
-
-                addFunc(item);
-
-                if (!Espo.Utils.checkActionAvailability(this.viewHelper, item)) {
-                    return;
-                }
-
-                if (!Espo.Utils.checkActionAccess(this.acl, view.model, item, true)) {
-                    item.hidden = true;
-                }
-
-                actionList.push(item);
-
-                if (!handlerName) {
-                    return;
-                }
-
-                if (!item.initFunction && !item.checkVisibilityFunction) {
-                    return;
-                }
-
-                waitFunc(new Promise(resolve => {
-                    require(handlerName, Handler => {
-                        let handler = new Handler(view);
-
-                        if (item.initFunction) {
-                            handler[item.initFunction].call(handler);
-                        }
-
-                        if (item.checkVisibilityFunction) {
-                            let isNotVisible = !handler[item.checkVisibilityFunction].call(handler);
-
-                            if (isNotVisible) {
-                                hideFunc(item.name);
-                            }
-                        }
-
-                        item.handlerInstance = handler;
-
-                        resolve();
-                    });
-                }));
-            });
-
-            if (!actionList.length) {
+            if (!Espo.Utils.checkActionAvailability(this.viewHelper, item)) {
                 return;
             }
 
-            let onSync = () => {
-                actionList.forEach(item => {
-                    if (item.handlerInstance && item.checkVisibilityFunction) {
-                        let isNotVisible = !item.handlerInstance[item.checkVisibilityFunction]
-                            .call(item.handlerInstance);
+            if (!Espo.Utils.checkActionAccess(this.acl, view.model, item, true)) {
+                item.hidden = true;
+            }
+
+            actionList.push(item);
+
+            if (!handlerName) {
+                return;
+            }
+
+            if (!item.initFunction && !item.checkVisibilityFunction) {
+                return;
+            }
+
+            waitFunc(new Promise(resolve => {
+                Espo.loader.require(handlerName, Handler => {
+                    let handler = new Handler(view);
+
+                    if (item.initFunction) {
+                        handler[item.initFunction].call(handler);
+                    }
+
+                    if (item.checkVisibilityFunction) {
+                        let isNotVisible = !handler[item.checkVisibilityFunction].call(handler);
 
                         if (isNotVisible) {
                             hideFunc(item.name);
-
-                            return;
                         }
                     }
 
-                    if (Espo.Utils.checkActionAccess(this.acl, view.model, item, true)) {
-                        showFunc(item.name);
+                    item.handlerInstance = handler;
+
+                    resolve();
+                });
+            }));
+        });
+
+        if (!actionList.length) {
+            return;
+        }
+
+        let onSync = () => {
+            actionList.forEach(item => {
+                if (item.handlerInstance && item.checkVisibilityFunction) {
+                    let isNotVisible = !item.handlerInstance[item.checkVisibilityFunction]
+                        .call(item.handlerInstance);
+
+                    if (isNotVisible) {
+                        hideFunc(item.name);
 
                         return;
                     }
+                }
 
-                    hideFunc(item.name);
-                });
-            };
+                if (Espo.Utils.checkActionAccess(this.acl, view.model, item, true)) {
+                    showFunc(item.name);
 
-            if (options.listenToViewModelSync) {
-                view.listenTo(view, 'model-sync', () => onSync());
+                    return;
+                }
 
-                return;
-            }
+                hideFunc(item.name);
+            });
+        };
 
-            view.listenTo(view.model, 'sync', () => onSync());
+        if (options.listenToViewModelSync) {
+            view.listenTo(view, 'model-sync', () => onSync());
+
+            return;
         }
-    }
 
-    return Class;
-});
+        view.listenTo(view.model, 'sync', () => onSync());
+    }
+}
diff --git a/client/src/helpers/export.js b/client/src/helpers/export.js
index 94d56d0325..347b4e5da9 100644
--- a/client/src/helpers/export.js
+++ b/client/src/helpers/export.js
@@ -26,80 +26,70 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('helpers/export', [], function () {
-
+/**
+ * An export helper.
+ */
+export default class {
     /**
-     * An export helper.
-     *
-     * @memberOf module:helpers/export
+     * @param {module:view} view A view.
      */
-     class Class {
+    constructor(view) {
         /**
-         * @param {module:view.Class} view A view.
+         * @private
+         * @type {module:view}
          */
-        constructor(view) {
-            /**
-             * @private
-             * @type {module:view.Class}
-             */
-            this.view = view;
-
-            /**
-             * @private
-             * @type {module:models/settings.Class}
-             */
-            this.config = view.getConfig();
-        }
+        this.view = view;
 
         /**
-         * Check whether an export should be run in idle.
-         *
-         * @param {number} totalCount A total record count.
-         * @returns {boolean}
+         * @private
+         * @type {module:models/settings}
          */
-        checkIsIdle(totalCount) {
-            if (this.view.getUser().isPortal()) {
-                return false;
-            }
-
-            if (typeof totalCount === 'undefined') {
-                totalCount = this.view.options.totalCount;
-            }
-
-            return totalCount === -1 || totalCount > this.config.get('exportIdleCountThreshold');
-        }
-
-        /**
-         * Process export.
-         *
-         * @param {string} id An ID.
-         * @returns {Promise<module:view.Class>} Resolves with a dialog view.
-         *   The view emits the 'close:success' event.
-         */
-        process(id) {
-            Espo.Ui.notify(false);
-
-            return new Promise(resolve => {
-                this.view
-                    .createView('dialog', 'views/export/modals/idle', {
-                        id: id,
-                    })
-                    .then(view => {
-                        view.render();
-
-                        resolve(view);
-
-                        this.view.listenToOnce(view, 'success', data => {
-                            resolve(data);
-
-                            this.view.listenToOnce(view, 'close', () => {
-                                view.trigger('close:success', data);
-                            });
-                        });
-                    });
-            });
-        }
+        this.config = view.getConfig();
     }
 
-    return Class;
-});
+    /**
+     * Check whether an export should be run in idle.
+     *
+     * @param {number} totalCount A total record count.
+     * @returns {boolean}
+     */
+    checkIsIdle(totalCount) {
+        if (this.view.getUser().isPortal()) {
+            return false;
+        }
+
+        if (typeof totalCount === 'undefined') {
+            totalCount = this.view.options.totalCount;
+        }
+
+        return totalCount === -1 || totalCount > this.config.get('exportIdleCountThreshold');
+    }
+
+    /**
+     * Process export.
+     *
+     * @param {string} id An ID.
+     * @returns {Promise<module:view>} Resolves with a dialog view.
+     *   The view emits the 'close:success' event.
+     */
+    process(id) {
+        Espo.Ui.notify(false);
+
+        return new Promise(resolve => {
+            this.view.createView('dialog', 'views/export/modals/idle', {id: id})
+                .then(view => {
+                    view.render();
+
+                    resolve(view);
+
+                    this.view.listenToOnce(view, 'success', data => {
+                        resolve(data);
+
+                        this.view.listenToOnce(view, 'close', () => {
+                            view.trigger('close:success', data);
+                        });
+                    });
+                });
+        });
+    }
+}
diff --git a/client/src/helpers/file-upload.js b/client/src/helpers/file-upload.js
index c26c02ff2d..ad163842d6 100644
--- a/client/src/helpers/file-upload.js
+++ b/client/src/helpers/file-upload.js
@@ -26,176 +26,171 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('helpers/file-upload', [], function () {
+/** @module helpers/file-upload */
+
+/**
+ * A file-upload helper.
+ */
+export default class {
+    /**
+     * @param {module:models/settings} config A config.
+     */
+    constructor(config) {
+        /**
+         * @private
+         * @type {module:models/settings}
+         */
+        this.config = config;
+    }
 
     /**
-     * A file-upload helper.
+     * @typedef {Object} module:helpers/file-upload~Options
      *
-     * @memberOf module:helpers/file-upload
+     * @property {function(number):void} [afterChunkUpload] After every chunk is uploaded.
+     * @property {function(module:model):void} [afterAttachmentSave] After an attachment is saved.
+     * @property {{isCanceled?: boolean}} [mediator] A mediator.
      */
-    class Class {
-        /**
-         * @param {module:models/settings.Class} config A config.
-         */
-        constructor(config) {
-            /**
-             * @private
-             * @type {module:models/settings.Class}
-             */
-            this.config = config;
+
+    /**
+     * Upload.
+     *
+     * @param {File} file A file.
+     * @param {module:model} attachment An attachment model.
+     * @param {module:helpers/file-upload~Options} [options] Options.
+     * @returns {Promise}
+     */
+    upload(file, attachment, options) {
+        options = options || {};
+
+        options.afterChunkUpload = options.afterChunkUpload || (() => {});
+        options.afterAttachmentSave = options.afterAttachmentSave || (() => {});
+        options.mediator = options.mediator || {};
+
+        attachment.set('name', file.name);
+        attachment.set('type', file.type || 'text/plain');
+        attachment.set('size', file.size);
+
+        if (this._useChunks(file)) {
+            return this._uploadByChunks(file, attachment, options);
         }
 
-        /**
-         * @typedef {Object} module:helpers/file-upload~Options
-         *
-         * @property {function(number):void} [afterChunkUpload] After every chunk is uploaded.
-         * @property {function(module:model.Class):void} [afterAttachmentSave] After an attachment is saved.
-         * @property {{isCanceled?: boolean}} [mediator] A mediator.
-         */
-
-        /**
-         * Upload.
-         *
-         * @param {File} file A file.
-         * @param {module:model.Class} attachment An attachment model.
-         * @param {module:helpers/file-upload~Options} [options] Options.
-         * @returns {Promise}
-         */
-        upload(file, attachment, options) {
-            options = options || {};
-
-            options.afterChunkUpload = options.afterChunkUpload || (() => {});
-            options.afterAttachmentSave = options.afterAttachmentSave || (() => {});
-            options.mediator = options.mediator || {};
-
-            attachment.set('name', file.name);
-            attachment.set('type', file.type || 'text/plain');
-            attachment.set('size', file.size);
-
-            if (this._useChunks(file)) {
-                return this._uploadByChunks(file, attachment, options);
-            }
-
-            return new Promise((resolve, reject) => {
-                let fileReader = new FileReader();
-
-                fileReader.onload = (e) => {
-                    attachment.set('file', e.target.result);
-
-                    attachment
-                        .save({}, {timeout: 0})
-                        .then(() => resolve())
-                        .catch(() => reject());
-                };
-
-                fileReader.readAsDataURL(file);
-            });
-        }
-
-        /**
-         * @private
-         */
-        _uploadByChunks(file, attachment, options) {
-            return new Promise((resolve, reject) => {
-                attachment.set('isBeingUploaded', true);
-
-                attachment
-                    .save()
-                    .then(() => {
-                        options.afterAttachmentSave(attachment);
-
-                        return this._uploadChunks(
-                            file,
-                            attachment,
-                            resolve,
-                            reject,
-                            options
-                        );
-                    })
-                    .catch(() => reject());
-            });
-        }
-
-        /**
-         * @private
-         */
-        _uploadChunks(file, attachment, resolve, reject, options, start) {
-            start = start || 0;
-            let end = start + this._getChunkSize() + 1;
-
-            if (end > file.size) {
-                end = file.size;
-            }
-
-            if (options.mediator.isCanceled) {
-                reject();
-
-                return;
-            }
-
-            let blob = file.slice(start, end);
-
+        return new Promise((resolve, reject) => {
             let fileReader = new FileReader();
 
-            fileReader.onloadend = (e) => {
-                if (e.target.readyState !== FileReader.DONE) {
-                    return;
-                }
+            fileReader.onload = (e) => {
+                attachment.set('file', e.target.result);
 
-                Espo.Ajax
-                    .postRequest('Attachment/chunk/' + attachment.id, e.target.result, {
-                        headers: {
-                            contentType: 'multipart/form-data',
-                        }
-                    })
-                    .then(() => {
-                        options.afterChunkUpload(end);
-
-                        if (end === file.size) {
-                            resolve();
-
-                            return;
-                        }
-
-                        this._uploadChunks(
-                            file,
-                            attachment,
-                            resolve,
-                            reject,
-                            options,
-                            end
-                        );
-                    })
+                attachment
+                    .save({}, {timeout: 0})
+                    .then(() => resolve())
                     .catch(() => reject());
             };
 
-            fileReader.readAsDataURL(blob);
+            fileReader.readAsDataURL(file);
+        });
+    }
+
+    /**
+     * @private
+     */
+    _uploadByChunks(file, attachment, options) {
+        return new Promise((resolve, reject) => {
+            attachment.set('isBeingUploaded', true);
+
+            attachment
+                .save()
+                .then(() => {
+                    options.afterAttachmentSave(attachment);
+
+                    return this._uploadChunks(
+                        file,
+                        attachment,
+                        resolve,
+                        reject,
+                        options
+                    );
+                })
+                .catch(() => reject());
+        });
+    }
+
+    /**
+     * @private
+     */
+    _uploadChunks(file, attachment, resolve, reject, options, start) {
+        start = start || 0;
+        let end = start + this._getChunkSize() + 1;
+
+        if (end > file.size) {
+            end = file.size;
         }
 
-        /**
-         * @private
-         */
-        _useChunks(file) {
-            let chunkSize = this._getChunkSize();
+        if (options.mediator.isCanceled) {
+            reject();
 
-            if (!chunkSize) {
-                return false;
+            return;
+        }
+
+        let blob = file.slice(start, end);
+
+        let fileReader = new FileReader();
+
+        fileReader.onloadend = (e) => {
+            if (e.target.readyState !== FileReader.DONE) {
+                return;
             }
 
-            if (file.size > chunkSize) {
-                return true;
-            }
+            Espo.Ajax
+                .postRequest('Attachment/chunk/' + attachment.id, e.target.result, {
+                    headers: {
+                        contentType: 'multipart/form-data',
+                    }
+                })
+                .then(() => {
+                    options.afterChunkUpload(end);
 
+                    if (end === file.size) {
+                        resolve();
+
+                        return;
+                    }
+
+                    this._uploadChunks(
+                        file,
+                        attachment,
+                        resolve,
+                        reject,
+                        options,
+                        end
+                    );
+                })
+                .catch(() => reject());
+        };
+
+        fileReader.readAsDataURL(blob);
+    }
+
+    /**
+     * @private
+     */
+    _useChunks(file) {
+        let chunkSize = this._getChunkSize();
+
+        if (!chunkSize) {
             return false;
         }
 
-        /**
-         * @private
-         */
-        _getChunkSize() {
-            return (this.config.get('attachmentUploadChunkSize') || 0) * 1024 * 1024;
+        if (file.size > chunkSize) {
+            return true;
         }
+
+        return false;
     }
 
-    return Class;
-});
+    /**
+     * @private
+     */
+    _getChunkSize() {
+        return (this.config.get('attachmentUploadChunkSize') || 0) * 1024 * 1024;
+    }
+}
diff --git a/client/src/helpers/mass-action.js b/client/src/helpers/mass-action.js
index a7df61a7de..e47b74bc45 100644
--- a/client/src/helpers/mass-action.js
+++ b/client/src/helpers/mass-action.js
@@ -26,87 +26,80 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('helpers/mass-action', [], function () {
-
+/**
+ * A mass-action helper.
+ */
+export default class {
     /**
-     * A mass-action helper.
-     *
-     * @memberOf module:helpers/mass-action
+     * @param {module:view} view A view.
      */
-    class Class {
+    constructor(view) {
         /**
-         * @param {module:view.Class} view A view.
+         * @private
+         * @type {module:view}
          */
-        constructor(view) {
-            /**
-             * @private
-             * @type {module:view.Class}
-             */
-            this.view = view;
-
-            /**
-             * @private
-             * @type {module:models/settings.Class}
-             */
-            this.config = view.getConfig();
-        }
+        this.view = view;
 
         /**
-         * Check whether an action should be run in idle.
-         *
-         * @param {number} [totalCount] A total record count.
-         * @returns {boolean}
+         * @private
+         * @type {module:models/settings}
          */
-        checkIsIdle(totalCount) {
-            if (this.view.getUser().isPortal()) {
-                return false;
-            }
-
-            if (typeof totalCount === 'undefined') {
-                totalCount = this.view.options.totalCount;
-            }
-
-            if (typeof totalCount === 'undefined' && this.view.collection) {
-                totalCount = this.view.collection.total;
-            }
-
-            return totalCount === -1 || totalCount > this.config.get('massActionIdleCountThreshold');
-        }
-
-        /**
-         * Process.
-         *
-         * @param {string} id An ID.
-         * @param {string} action An action.
-         * @returns {Promise<module:view.Class>} Resolves with a dialog view.
-         *   The view emits the 'close:success' event.
-         */
-        process(id, action) {
-            Espo.Ui.notify(false);
-
-            return new Promise(resolve => {
-                this.view
-                    .createView('dialog', 'views/modals/mass-action', {
-                        id: id,
-                        action: action,
-                        scope: this.view.scope || this.view.entityType,
-                    })
-                    .then(view => {
-                        view.render();
-
-                        resolve(view);
-
-                        this.view.listenToOnce(view, 'success', data => {
-                            resolve(data);
-
-                            this.view.listenToOnce(view, 'close', () => {
-                                view.trigger('close:success', data);
-                            });
-                        });
-                    });
-            });
-        }
+        this.config = view.getConfig();
     }
 
-    return Class;
-});
+    /**
+     * Check whether an action should be run in idle.
+     *
+     * @param {number} [totalCount] A total record count.
+     * @returns {boolean}
+     */
+    checkIsIdle(totalCount) {
+        if (this.view.getUser().isPortal()) {
+            return false;
+        }
+
+        if (typeof totalCount === 'undefined') {
+            totalCount = this.view.options.totalCount;
+        }
+
+        if (typeof totalCount === 'undefined' && this.view.collection) {
+            totalCount = this.view.collection.total;
+        }
+
+        return totalCount === -1 || totalCount > this.config.get('massActionIdleCountThreshold');
+    }
+
+    /**
+     * Process.
+     *
+     * @param {string} id An ID.
+     * @param {string} action An action.
+     * @returns {Promise<module:view>} Resolves with a dialog view.
+     *   The view emits the 'close:success' event.
+     */
+    process(id, action) {
+        Espo.Ui.notify(false);
+
+        return new Promise(resolve => {
+            this.view
+                .createView('dialog', 'views/modals/mass-action', {
+                    id: id,
+                    action: action,
+                    scope: this.view.scope || this.view.entityType,
+                })
+                .then(view => {
+                    view.render();
+
+                    resolve(view);
+
+                    this.view.listenToOnce(view, 'success', data => {
+                        resolve(data);
+
+                        this.view.listenToOnce(view, 'close', () => {
+                            view.trigger('close:success', data);
+                        });
+                    });
+                });
+        });
+    }
+}
diff --git a/client/src/helpers/misc/authentication-provider.js b/client/src/helpers/misc/authentication-provider.js
index 5ef89f0726..7df2f464d0 100644
--- a/client/src/helpers/misc/authentication-provider.js
+++ b/client/src/helpers/misc/authentication-provider.js
@@ -26,222 +26,215 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('helpers/misc/authentication-provider', [], function () {
+/** @module module:helpers/misc/authentication-provider */
+
+export default class {
+    /**
+     * @param {module:views/record/detail} view A view.
+     */
+    constructor(view) {
+        /**
+         * @private
+         * @type {module:views/record/detail}
+         */
+        this.view = view;
+
+        this.metadata = view.getMetadata();
+
+        /**
+         * @private
+         * @type {module:model}
+         */
+        this.model = view.model;
+
+        /** @var {Object.<string, Object.<string, *>>} defs */
+        let defs = view.getMetadata().get(['authenticationMethods']) || {};
+
+        /**
+         * @private
+         * @type {string[]}
+         */
+        this.methodList = Object.keys(defs).filter(item => {
+            /** @var {Object.<string, *>} */
+            let data = defs[item].provider || {};
+
+            return data.isAvailable;
+        });
+
+        /** @private */
+        this.authFields = {};
+
+        /** @private */
+        this.dynamicLogicDefs = {
+            fields: {},
+            panels: {},
+        };
+    }
 
     /**
-     * @memberOf module:helpers/misc/authentication-provider
+     * @param {function(): void} callback
      */
-     class Class {
-        /**
-         * @param {module:views/record/detail.Class} view A view.
-         */
-        constructor(view) {
-            /**
-             * @private
-             * @type {module:views/record/detail.Class}
-             */
-            this.view = view;
+    setupPanelsVisibility(callback) {
+        this.handlePanelsVisibility(callback);
 
-            this.metadata = view.getMetadata();
+        this.view.listenTo(this.model, 'change:method', () => this.handlePanelsVisibility(callback));
+    }
 
-            /**
-             * @private
-             * @type {module:model.Class}
-             */
-            this.model = view.model;
+    /**
+     * @private
+     * @param {string} method
+     * @param {string} param
+     * @return {*}
+     */
+    getFromMetadata(method, param) {
+        return this.metadata
+            .get(['authenticationMethods', method, 'provider', param]) ||
+        this.metadata
+            .get(['authenticationMethods', method, 'settings', param]);
+    }
 
-            /** @var {Object.<string, Object.<string, *>>} defs */
-            let defs = view.getMetadata().get(['authenticationMethods']) || {};
+    /**
+     * @return {Object}
+     */
+    setupMethods() {
+        this.methodList.forEach(method => this.setupMethod(method));
 
-            /**
-             * @private
-             * @type {string[]}
-             */
-            this.methodList = Object.keys(defs).filter(item => {
-                /** @var {Object.<string, *>} */
-                let data = defs[item].provider || {};
+        return this.dynamicLogicDefs;
+    }
 
-                return data.isAvailable;
-            });
+    /**
+     * @private
+     */
+    setupMethod(method) {
+        /** @var {string[]} */
+        let fieldList = this.getFromMetadata(method, 'fieldList') || [];
 
-            /** @private */
-            this.authFields = {};
+        fieldList = fieldList.filter(item => this.model.hasField(item));
 
-            /** @private */
-            this.dynamicLogicDefs = {
-                fields: {},
-                panels: {},
-            };
-        }
+        this.authFields[method] = fieldList;
 
-        /**
-         *
-         * @param {function(): void} callback
-         */
-        setupPanelsVisibility(callback) {
-            this.handlePanelsVisibility(callback);
+        let mDynamicLogicFieldsDefs = (this.getFromMetadata(method, 'dynamicLogic') || {}).fields || {};
 
-            this.view.listenTo(this.model, 'change:method', () => this.handlePanelsVisibility(callback));
-        }
-
-        /**
-         * @private
-         * @param {string} method
-         * @param {string} param
-         * @return {*}
-         */
-        getFromMetadata(method, param) {
-            return this.metadata
-                .get(['authenticationMethods', method, 'provider', param]) ||
-            this.metadata
-                .get(['authenticationMethods', method, 'settings', param]);
-        }
-
-        /**
-         * @return {Object}
-         */
-        setupMethods() {
-            this.methodList.forEach(method => this.setupMethod(method));
-
-            return this.dynamicLogicDefs;
-        }
-
-        /**
-         * @private
-         */
-        setupMethod(method) {
-            /** @var {string[]} */
-            let fieldList = this.getFromMetadata(method, 'fieldList') || [];
-
-            fieldList = fieldList.filter(item => this.model.hasField(item));
-
-            this.authFields[method] = fieldList;
-
-            let mDynamicLogicFieldsDefs = (this.getFromMetadata(method, 'dynamicLogic') || {}).fields || {};
-
-            for (let f in mDynamicLogicFieldsDefs) {
-                if (!fieldList.includes(f)) {
-                    continue;
-                }
-
-                let defs = this.modifyDynamicLogic(mDynamicLogicFieldsDefs[f]);
-
-                this.dynamicLogicDefs.fields[f] = Espo.Utils.cloneDeep(defs);
-            }
-        }
-
-        /**
-         * @private
-         */
-        modifyDynamicLogic(defs) {
-            defs = Espo.Utils.clone(defs);
-
-            if (Array.isArray(defs)) {
-                return defs.map(item => this.modifyDynamicLogic(item));
+        for (let f in mDynamicLogicFieldsDefs) {
+            if (!fieldList.includes(f)) {
+                continue;
             }
 
-            if (typeof defs === 'object') {
-                let o = {};
+            let defs = this.modifyDynamicLogic(mDynamicLogicFieldsDefs[f]);
 
-                for (let property in defs) {
-                    let value = defs[property];
-
-                    if (property === 'attribute' && value === 'authenticationMethod') {
-                        value = 'method';
-                    }
-
-                    o[property] = this.modifyDynamicLogic(value);
-                }
-
-                return o;
-            }
-
-            return defs;
-        }
-
-        modifyDetailLayout(layout) {
-            this.methodList.forEach(method => {
-                let mLayout = this.getFromMetadata(method, 'layout');
-
-                if (!mLayout) {
-                    return;
-                }
-
-                mLayout = Espo.Utils.cloneDeep(mLayout);
-                mLayout.name = method;
-
-                this.prepareLayout(mLayout, method);
-
-                layout.push(mLayout);
-            });
-        }
-
-        prepareLayout(layout, method) {
-            layout.rows.forEach(row => {
-                row
-                    .filter(item => !item.noLabel && !item.labelText && item.name)
-                    .forEach(item => {
-                        if (item === null) {
-                            return;
-                        }
-
-                        let labelText = this.view.translate(item.name, 'fields', 'Settings');
-
-                        item.options = item.options || {};
-
-                        if (labelText && labelText.toLowerCase().indexOf(method.toLowerCase() + ' ') === 0) {
-                            item.labelText = labelText.substring(method.length + 1);
-                        }
-
-                        item.options.tooltipText = this.view.translate(item.name, 'tooltips', 'Settings');
-                    });
-            });
-
-            layout.rows = layout.rows.map(row => {
-                row = row.map(cell => {
-                    if (
-                        cell &&
-                        cell.name &&
-                        !this.model.hasField(cell.name)
-                    ) {
-                        return false;
-                    }
-
-                    return cell;
-                })
-
-                return row;
-            });
-        }
-
-        /**
-         * @private
-         * @param {function(): void} callback
-         */
-        handlePanelsVisibility(callback) {
-            let authenticationMethod = this.model.get('method');
-
-            this.methodList.forEach(method => {
-                let fieldList = (this.authFields[method] || []);
-
-                if (method !== authenticationMethod) {
-                    this.view.hidePanel(method);
-
-                    fieldList.forEach(field => {
-                        this.view.hideField(field);
-                    });
-
-                    return;
-                }
-
-                this.view.showPanel(method);
-
-                fieldList.forEach(field => this.view.showField(field));
-
-                callback();
-            });
+            this.dynamicLogicDefs.fields[f] = Espo.Utils.cloneDeep(defs);
         }
     }
 
-    return Class;
-});
+    /**
+     * @private
+     */
+    modifyDynamicLogic(defs) {
+        defs = Espo.Utils.clone(defs);
+
+        if (Array.isArray(defs)) {
+            return defs.map(item => this.modifyDynamicLogic(item));
+        }
+
+        if (typeof defs === 'object') {
+            let o = {};
+
+            for (let property in defs) {
+                let value = defs[property];
+
+                if (property === 'attribute' && value === 'authenticationMethod') {
+                    value = 'method';
+                }
+
+                o[property] = this.modifyDynamicLogic(value);
+            }
+
+            return o;
+        }
+
+        return defs;
+    }
+
+    modifyDetailLayout(layout) {
+        this.methodList.forEach(method => {
+            let mLayout = this.getFromMetadata(method, 'layout');
+
+            if (!mLayout) {
+                return;
+            }
+
+            mLayout = Espo.Utils.cloneDeep(mLayout);
+            mLayout.name = method;
+
+            this.prepareLayout(mLayout, method);
+
+            layout.push(mLayout);
+        });
+    }
+
+    prepareLayout(layout, method) {
+        layout.rows.forEach(row => {
+            row
+                .filter(item => !item.noLabel && !item.labelText && item.name)
+                .forEach(item => {
+                    if (item === null) {
+                        return;
+                    }
+
+                    let labelText = this.view.translate(item.name, 'fields', 'Settings');
+
+                    item.options = item.options || {};
+
+                    if (labelText && labelText.toLowerCase().indexOf(method.toLowerCase() + ' ') === 0) {
+                        item.labelText = labelText.substring(method.length + 1);
+                    }
+
+                    item.options.tooltipText = this.view.translate(item.name, 'tooltips', 'Settings');
+                });
+        });
+
+        layout.rows = layout.rows.map(row => {
+            row = row.map(cell => {
+                if (
+                    cell &&
+                    cell.name &&
+                    !this.model.hasField(cell.name)
+                ) {
+                    return false;
+                }
+
+                return cell;
+            })
+
+            return row;
+        });
+    }
+
+    /**
+     * @private
+     * @param {function(): void} callback
+     */
+    handlePanelsVisibility(callback) {
+        let authenticationMethod = this.model.get('method');
+
+        this.methodList.forEach(method => {
+            let fieldList = (this.authFields[method] || []);
+
+            if (method !== authenticationMethod) {
+                this.view.hidePanel(method);
+
+                fieldList.forEach(field => {
+                    this.view.hideField(field);
+                });
+
+                return;
+            }
+
+            this.view.showPanel(method);
+
+            fieldList.forEach(field => this.view.showField(field));
+
+            callback();
+        });
+    }
+}
diff --git a/client/src/helpers/misc/foreign-field.js b/client/src/helpers/misc/foreign-field.js
index 858c451df5..34ffba12fb 100644
--- a/client/src/helpers/misc/foreign-field.js
+++ b/client/src/helpers/misc/foreign-field.js
@@ -26,62 +26,55 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('helpers/misc/foreign-field', [], function () {
+/** @module helpers/misc/foreign-field */
 
+export default class {
     /**
-     * @memberOf module:helpers/misc/foreign-field
+     * @param {module:views/fields/base} view A field view.
      */
-     class Class {
+    constructor(view) {
         /**
-         * @param {module:views/fields/base.Class} view A field view.
+         * @private
+         * @type {module:views/fields/base}
          */
-        constructor(view) {
-            /**
-             * @private
-             * @type {module:views/fields/base.Class}
-             */
-            this.view = view;
+        this.view = view;
 
-            let metadata = view.getMetadata();
-            let model = view.model;
-            let field = view.params.field;
-            let link = view.params.link;
+        let metadata = view.getMetadata();
+        let model = view.model;
+        let field = view.params.field;
+        let link = view.params.link;
 
-            let entityType = metadata
-                .get(['entityDefs', model.entityType, 'links', link, 'entity']) ||
-                model.entityType;
+        let entityType = metadata.get(['entityDefs', model.entityType, 'links', link, 'entity']) ||
+            model.entityType;
 
-            let fieldDefs = metadata.get(['entityDefs', entityType, 'fields', field]) || {};
-            let type = fieldDefs.type;
+        let fieldDefs = metadata.get(['entityDefs', entityType, 'fields', field]) || {};
+        let type = fieldDefs.type;
 
-            let ignoreList = [
-                'default',
-                'audited',
-                'readOnly',
-                'required',
-            ];
+        let ignoreList = [
+            'default',
+            'audited',
+            'readOnly',
+            'required',
+        ];
 
-            /** @private */
-            this.foreignParams = {};
+        /** @private */
+        this.foreignParams = {};
 
-            view.getFieldManager().getParamList(type).forEach(defs => {
-                let name = defs.name;
+        view.getFieldManager().getParamList(type).forEach(defs => {
+            let name = defs.name;
 
-                if (ignoreList.includes(name)) {
-                    return;
-                }
+            if (ignoreList.includes(name)) {
+                return;
+            }
 
-                this.foreignParams[name] = fieldDefs[name] || null;
-            });
-        }
-
-        /**
-         * @return {Object.<string, *>}
-         */
-        getForeignParams() {
-            return Espo.Utils.cloneDeep(this.foreignParams);
-        }
+            this.foreignParams[name] = fieldDefs[name] || null;
+        });
     }
 
-    return Class;
-});
+    /**
+     * @return {Object.<string, *>}
+     */
+    getForeignParams() {
+        return Espo.Utils.cloneDeep(this.foreignParams);
+    }
+}
diff --git a/client/src/helpers/misc/stored-text-search.js b/client/src/helpers/misc/stored-text-search.js
index 2bd7f5818d..2b6d8991d6 100644
--- a/client/src/helpers/misc/stored-text-search.js
+++ b/client/src/helpers/misc/stored-text-search.js
@@ -26,123 +26,117 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('helpers/misc/stored-text-search', [], function () {
+/** @module helpers/misc/stored-text-search */
 
+export default class {
     /**
-     * @memberOf module:helpers/misc/stored-text-search
+     * @param {module:storage} storage
+     * @param {string} scope
+     * @param {Number} [maxCount]
      */
-    class Class {
-        /**
-         * @param {module:storage.Class} storage
-         * @param {string} scope
-         * @param {Number} [maxCount]
-         */
-        constructor(scope, storage, maxCount) {
-            this.scope = scope;
-            this.storage = storage;
-            this.key = 'textSearches';
-            this.maxCount = maxCount || 100;
-            /** @type {string[]|null} */
-            this.list = null;
-        }
-
-        /**
-         * Match.
-         *
-         * @param {string} text
-         * @param {Number} [limit]
-         * @return {string[]}
-         */
-        match(text, limit) {
-            text = text.toLowerCase().trim();
-
-            let list = this.get();
-            let matchedList = [];
-
-            for (let item of list) {
-                if (item.toLowerCase().startsWith(text)) {
-                    matchedList.push(item);
-                }
-
-                if (limit !== undefined && matchedList.length === limit) {
-                    break;
-                }
-            }
-
-            return matchedList;
-        }
-
-        /**
-         * Get stored text filters.
-         *
-         * @private
-         * @return {string[]}
-         */
-        get() {
-            if (this.list === null) {
-                this.list = this.getFromStorage();
-            }
-
-            return this.list;
-        }
-
-        /**
-         * @private
-         * @return {string[]}
-         */
-        getFromStorage() {
-            /** @var {string[]} */
-            return this.storage.get(this.key, this.scope) || [];
-        }
-
-        /**
-         * Store a text filter.
-         *
-         * @param {string} text
-         */
-        store(text) {
-            text = text.trim();
-
-            let list = this.getFromStorage();
-
-            let index = list.indexOf(text);
-
-            if (index !== -1) {
-                list.splice(index, 1);
-            }
-
-            list.unshift(text);
-
-            if (list.length > this.maxCount) {
-                list = list.slice(0, this.maxCount);
-            }
-
-            this.list = list;
-            this.storage.set(this.key, this.scope, list);
-        }
-
-        /**
-         * Remove a text filter.
-         *
-         * @param {string} text
-         */
-        remove(text) {
-            text = text.trim();
-
-            let list = this.getFromStorage();
-
-            let index = list.indexOf(text);
-
-            if (index === -1) {
-                return;
-            }
-
-            list.splice(index, 1);
-
-            this.list = list;
-            this.storage.set(this.key, this.scope, list);
-        }
+    constructor(scope, storage, maxCount) {
+        this.scope = scope;
+        this.storage = storage;
+        this.key = 'textSearches';
+        this.maxCount = maxCount || 100;
+        /** @type {string[]|null} */
+        this.list = null;
     }
 
-    return Class;
-});
+    /**
+     * Match.
+     *
+     * @param {string} text
+     * @param {Number} [limit]
+     * @return {string[]}
+     */
+    match(text, limit) {
+        text = text.toLowerCase().trim();
+
+        let list = this.get();
+        let matchedList = [];
+
+        for (let item of list) {
+            if (item.toLowerCase().startsWith(text)) {
+                matchedList.push(item);
+            }
+
+            if (limit !== undefined && matchedList.length === limit) {
+                break;
+            }
+        }
+
+        return matchedList;
+    }
+
+    /**
+     * Get stored text filters.
+     *
+     * @private
+     * @return {string[]}
+     */
+    get() {
+        if (this.list === null) {
+            this.list = this.getFromStorage();
+        }
+
+        return this.list;
+    }
+
+    /**
+     * @private
+     * @return {string[]}
+     */
+    getFromStorage() {
+        /** @var {string[]} */
+        return this.storage.get(this.key, this.scope) || [];
+    }
+
+    /**
+     * Store a text filter.
+     *
+     * @param {string} text
+     */
+    store(text) {
+        text = text.trim();
+
+        let list = this.getFromStorage();
+
+        let index = list.indexOf(text);
+
+        if (index !== -1) {
+            list.splice(index, 1);
+        }
+
+        list.unshift(text);
+
+        if (list.length > this.maxCount) {
+            list = list.slice(0, this.maxCount);
+        }
+
+        this.list = list;
+        this.storage.set(this.key, this.scope, list);
+    }
+
+    /**
+     * Remove a text filter.
+     *
+     * @param {string} text
+     */
+    remove(text) {
+        text = text.trim();
+
+        let list = this.getFromStorage();
+
+        let index = list.indexOf(text);
+
+        if (index === -1) {
+            return;
+        }
+
+        list.splice(index, 1);
+
+        this.list = list;
+        this.storage.set(this.key, this.scope, list);
+    }
+}
diff --git a/client/src/helpers/record-modal.js b/client/src/helpers/record-modal.js
index 33dd868c74..3acfd650b5 100644
--- a/client/src/helpers/record-modal.js
+++ b/client/src/helpers/record-modal.js
@@ -27,72 +27,64 @@
  ************************************************************************/
 
 /**
- * @module helpers/record-modal
+ * A record-modal helper.
  */
-define(() => {
-
+export default class {
     /**
-     * @memberOf module:helpers/record-modal
+     * @param {module:metadata} metadata
+     * @param {module:acl-manager} acl
      */
-    class Class {
-        /**
-         * @param {module:metadata.Class} metadata
-         * @param {module:acl-manager.Class} acl
-         */
-        constructor(metadata, acl) {
-            this.metadata = metadata;
-            this.acl = acl;
-        }
-
-        /**
-         * @param {module:view.Class} view
-         * @param {{
-         *   id: string,
-         *   scope: string,
-         *   model?: module:model.Class,
-         *   editDisabled?: boolean,
-         *   rootUrl?: string,
-         * }} params
-         * @return {Promise}
-         */
-        showDetail(view, params) {
-            let id = params.id;
-            let scope = params.scope;
-            let model = params.model;
-
-            if (!id || !scope) {
-                console.error("Bad data.");
-
-                return Promise.reject();
-            }
-
-            if (model && !this.acl.checkScope(model.entityType, 'read')) {
-                return Promise.reject();
-            }
-
-            let viewName = this.metadata.get(['clientDefs', scope, 'modalViews', 'detail']) ||
-                'views/modals/detail';
-
-            Espo.Ui.notify(' ... ');
-
-            let options = {
-                scope: scope,
-                model: model,
-                id: id,
-                quickEditDisabled: params.editDisabled,
-                rootUrl: params.rootUrl,
-            };
-
-            return view.createView('modal', viewName, options, modalView => {
-                modalView.render()
-                    .then(() => Espo.Ui.notify(false));
-
-                view.listenToOnce(modalView, 'remove', () => {
-                    view.clearView('modal');
-                });
-            });
-        }
+    constructor(metadata, acl) {
+        this.metadata = metadata;
+        this.acl = acl;
     }
 
-    return Class;
-});
+    /**
+     * @param {module:view} view
+     * @param {{
+     *   id: string,
+     *   scope: string,
+     *   model?: module:model,
+     *   editDisabled?: boolean,
+     *   rootUrl?: string,
+     * }} params
+     * @return {Promise}
+     */
+    showDetail(view, params) {
+        let id = params.id;
+        let scope = params.scope;
+        let model = params.model;
+
+        if (!id || !scope) {
+            console.error("Bad data.");
+
+            return Promise.reject();
+        }
+
+        if (model && !this.acl.checkScope(model.entityType, 'read')) {
+            return Promise.reject();
+        }
+
+        let viewName = this.metadata.get(['clientDefs', scope, 'modalViews', 'detail']) ||
+            'views/modals/detail';
+
+        Espo.Ui.notify(' ... ');
+
+        let options = {
+            scope: scope,
+            model: model,
+            id: id,
+            quickEditDisabled: params.editDisabled,
+            rootUrl: params.rootUrl,
+        };
+
+        return view.createView('modal', viewName, options, modalView => {
+            modalView.render()
+                .then(() => Espo.Ui.notify(false));
+
+            view.listenToOnce(modalView, 'remove', () => {
+                view.clearView('modal');
+            });
+        });
+    }
+}
diff --git a/client/src/helpers/reg-exp-pattern.js b/client/src/helpers/reg-exp-pattern.js
index dd3f03be30..b3e256e5c3 100644
--- a/client/src/helpers/reg-exp-pattern.js
+++ b/client/src/helpers/reg-exp-pattern.js
@@ -26,74 +26,65 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('helpers/reg-exp-pattern', [], function () {
-
+/**
+ * A regular expression pattern helper.
+ */
+export default class {
     /**
-     * A regular expression pattern helper.
-     *
-     * @memberOf module:helpers/reg-exp-pattern
+     * @param {module:metadata} metadata
+     * @param {module:language} language
      */
-    class Class {
+    constructor(metadata, language) {
         /**
-         * @param {module:metadata.Class} metadata
-         * @param {module:language.Class} language
+         * @private
+         * @type {module:metadata}
          */
-        constructor(metadata, language) {
-            /**
-             * @private
-             * @type {module:metadata.Class}
-             */
-            this.metadata = metadata;
-            /**
-             * @private
-             * @type {module:language.Class}
-             */
-            this.language = language;
-        }
-
+        this.metadata = metadata;
         /**
-         *
-         * @param {string} pattern
-         * @param {string|null} value
-         * @param {string} [field]
-         * @param {string} [entityType]
-         * @return {{message: string}|null}
+         * @private
+         * @type {module:language}
          */
-        validate(pattern, value, field, entityType) {
-            if (value === '' || value === null) {
-                return null;
-            }
-
-            let messageKey = 'fieldNotMatchingPattern';
-
-            if (pattern[0] === '$') {
-                let patternName = pattern.slice(1);
-                let foundPattern = this.metadata.get(['app', 'regExpPatterns', patternName, 'pattern']);
-
-                if (foundPattern) {
-                    messageKey += '$' + patternName;
-                    pattern = foundPattern;
-                }
-            }
-
-            let regExp = new RegExp('^' + pattern + '$');
-
-            if (regExp.test(value)) {
-                return null;
-            }
-
-            let message = this.language.translate(messageKey, 'messages')
-                .replace('{pattern}', pattern);
-
-            if (field && entityType) {
-                message = message.replace('{field}', this.language.translate(field, 'fields', entityType));
-            }
-
-            return {
-                message: message,
-            };
-        }
+        this.language = language;
     }
 
-    return Class;
-});
+    /**
+     *
+     * @param {string} pattern
+     * @param {string|null} value
+     * @param {string} [field]
+     * @param {string} [entityType]
+     * @return {{message: string}|null}
+     */
+    validate(pattern, value, field, entityType) {
+        if (value === '' || value === null) {
+            return null;
+        }
+
+        let messageKey = 'fieldNotMatchingPattern';
+
+        if (pattern[0] === '$') {
+            let patternName = pattern.slice(1);
+            let foundPattern = this.metadata.get(['app', 'regExpPatterns', patternName, 'pattern']);
+
+            if (foundPattern) {
+                messageKey += '$' + patternName;
+                pattern = foundPattern;
+            }
+        }
+
+        let regExp = new RegExp('^' + pattern + '$');
+
+        if (regExp.test(value)) {
+            return null;
+        }
+
+        let message = this.language.translate(messageKey, 'messages')
+            .replace('{pattern}', pattern);
+
+        if (field && entityType) {
+            message = message.replace('{field}', this.language.translate(field, 'fields', entityType));
+        }
+
+        return {message: message};
+    }
+}
diff --git a/client/src/language.js b/client/src/language.js
index 6d66dc40ac..50ea6c56f7 100644
--- a/client/src/language.js
+++ b/client/src/language.js
@@ -26,298 +26,295 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('language', ['ajax'], function (Ajax) {
+/** @module language */
+
+import Backbone from 'lib!backbone';
+
+/**
+ * A language.
+ *
+ * @class
+ * @param {module:cache} [cache] A cache.
+ */
+const Language = function (cache) {
+    /**
+     * @private
+     * @type {module:cache|null}
+     */
+    this.cache = cache || null;
 
     /**
-     * A language.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:language
-     * @param {module:cache.Class} [cache] A cache.
+     * @private
+     * @type {Object}
      */
-    let Language = function (cache) {
-        /**
-         * @private
-         * @type {module:cache.Class|null}
-         */
-        this.cache = cache || null;
+    this.data = {};
 
-        /**
-         * @private
-         * @type {Object}
-         */
-        this.data = {};
+    /**
+     * A name.
+     *
+     * @type {string}
+     */
+    this.name = 'default';
+};
 
-        /**
-         * A name.
-         *
-         * @type {string}
-         */
-        this.name = 'default';
-    };
+_.extend(Language.prototype, /** @lends Language# */{
 
-    _.extend(Language.prototype, /** @lends module:language.Class# */{
-
-        /**
-         * @private
-         */
-        url: 'I18n',
-
-        /**
-         * Whether an item is set in language data.
-         *
-         * @param {string} scope A scope.
-         * @param {string} category A category.
-         * @param {string} name An item name.
-         * @returns {boolean}
-         */
-        has: function (name, category, scope) {
-            if (scope in this.data) {
-                if (category in this.data[scope]) {
-                    if (name in this.data[scope][category]) {
-                        return true;
-                    }
-                }
-            }
-
-            return false;
-        },
-
-        /**
-         * Get a value set in language data.
-         *
-         * @param {string} scope A scope.
-         * @param {string} category A category.
-         * @param {string} name An item name.
-         * @returns {*}
-         */
-        get: function (scope, category, name) {
-            if (scope in this.data) {
-                if (category in this.data[scope]) {
-                    if (name in this.data[scope][category]) {
-                        return this.data[scope][category][name];
-                    }
-                }
-            }
-
-            if (scope === 'Global') {
-                return name;
-            }
-
-            return false;
-        },
-
-        /**
-         * Translate a label.
-         *
-         * @param {string} name An item name.
-         * @param {string|null} [category='labels'] A category.
-         * @param {string|null} [scope='Global'] A scope.
-         * @returns {string}
-         */
-        translate: function (name, category, scope) {
-            scope = scope || 'Global';
-            category = category || 'labels';
-
-            let res = this.get(scope, category, name);
-
-            if (res === false && scope !== 'Global') {
-                res = this.get('Global', category, name);
-            }
-
-            return res;
-        },
-
-        /**
-         * Translation an option item value.
-         *
-         * @param {string} value An option value.
-         * @param {string} field A field name.
-         * @param {string} [scope='Global'] A scope.
-         * @returns {string}
-         */
-        translateOption: function (value, field, scope) {
-            let translation = this.translate(field, 'options', scope);
-
-            if (typeof translation !== 'object') {
-                translation = {};
-            }
-
-            return translation[value] || value;
-        },
-
-        /**
-         * @private
-         */
-        loadFromCache: function (loadDefault) {
-            let name = this.name;
-            if (loadDefault) {
-                name = 'default';
-            }
-
-            if (this.cache) {
-                let cached = this.cache.get('app', 'language-' + name);
-
-                if (cached) {
-                    this.data = cached;
+    /** @private */
+    url: 'I18n',
 
+    /**
+     * Whether an item is set in language data.
+     *
+     * @param {string} scope A scope.
+     * @param {string} category A category.
+     * @param {string} name An item name.
+     * @returns {boolean}
+     */
+    has: function (name, category, scope) {
+        if (scope in this.data) {
+            if (category in this.data[scope]) {
+                if (name in this.data[scope][category]) {
                     return true;
                 }
             }
+        }
 
-            return null;
-        },
+        return false;
+    },
 
-        /**
-         * Clear a language cache.
-         */
-        clearCache: function () {
-            if (this.cache) {
-                this.cache.clear('app', 'language-' + this.name);
-            }
-        },
-
-        /**
-         * @private
-         */
-        storeToCache: function (loadDefault) {
-            let name = this.name;
-
-            if (loadDefault) {
-                name = 'default';
-            }
-
-            if (this.cache) {
-                this.cache.set('app', 'language-' + name, this.data);
-            }
-        },
-
-        /**
-         * Load data from cache or backend (if not yet cached).
-         *
-         * @param {Function} [callback] Deprecated.
-         * @param {boolean} [disableCache=false] Deprecated
-         * @param {boolean} [loadDefault=false] Deprecated.
-         * @returns {Promise}
-         */
-        load: function (callback, disableCache, loadDefault) {
-            if (callback) {
-                this.once('sync', callback);
-            }
-
-            if (!disableCache) {
-                if (this.loadFromCache(loadDefault)) {
-                    this.trigger('sync');
-
-                    return new Promise(resolve => resolve());
+    /**
+     * Get a value set in language data.
+     *
+     * @param {string} scope A scope.
+     * @param {string} category A category.
+     * @param {string} name An item name.
+     * @returns {*}
+     */
+    get: function (scope, category, name) {
+        if (scope in this.data) {
+            if (category in this.data[scope]) {
+                if (name in this.data[scope][category]) {
+                    return this.data[scope][category][name];
                 }
             }
+        }
 
-            return new Promise(resolve => {
-                this.fetch(loadDefault)
-                    .then(() => resolve());
-            });
-        },
+        if (scope === 'Global') {
+            return name;
+        }
 
-        /**
-         * Load default-language data from the backend.
-         *
-         * @returns {Promise}
-         */
-        loadDefault: function () {
-            return this.load(null, false, true);
-        },
+        return false;
+    },
 
-        /**
-         * Load data from the backend.
-         *
-         * @returns {Promise}
-         */
-        loadSkipCache: function () {
-            return this.load(null, true);
-        },
+    /**
+     * Translate a label.
+     *
+     * @param {string} name An item name.
+     * @param {string|null} [category='labels'] A category.
+     * @param {string|null} [scope='Global'] A scope.
+     * @returns {string}
+     */
+    translate: function (name, category, scope) {
+        scope = scope || 'Global';
+        category = category || 'labels';
 
-        /**
-         * Load default-language data from the backend.
-         *
-         * @returns {Promise}
-         */
-        loadDefaultSkipCache: function () {
-            return this.load(null, true, true);
-        },
+        let res = this.get(scope, category, name);
 
-        /**
-         * @private
-         * @param {boolean} loadDefault
-         * @returns {Promise}
-         */
-        fetch: function (loadDefault) {
-            return Ajax.getRequest(this.url, {default: loadDefault}).then(data => {
-                this.data = data;
+        if (res === false && scope !== 'Global') {
+            res = this.get('Global', category, name);
+        }
 
-                this.storeToCache(loadDefault);
+        return res;
+    },
+
+    /**
+     * Translation an option item value.
+     *
+     * @param {string} value An option value.
+     * @param {string} field A field name.
+     * @param {string} [scope='Global'] A scope.
+     * @returns {string}
+     */
+    translateOption: function (value, field, scope) {
+        let translation = this.translate(field, 'options', scope);
+
+        if (typeof translation !== 'object') {
+            translation = {};
+        }
+
+        return translation[value] || value;
+    },
+
+    /**
+     * @private
+     */
+    loadFromCache: function (loadDefault) {
+        let name = this.name;
+        if (loadDefault) {
+            name = 'default';
+        }
+
+        if (this.cache) {
+            let cached = this.cache.get('app', 'language-' + name);
+
+            if (cached) {
+                this.data = cached;
+
+                return true;
+            }
+        }
+
+        return null;
+    },
+
+    /**
+     * Clear a language cache.
+     */
+    clearCache: function () {
+        if (this.cache) {
+            this.cache.clear('app', 'language-' + this.name);
+        }
+    },
+
+    /**
+     * @private
+     */
+    storeToCache: function (loadDefault) {
+        let name = this.name;
+
+        if (loadDefault) {
+            name = 'default';
+        }
+
+        if (this.cache) {
+            this.cache.set('app', 'language-' + name, this.data);
+        }
+    },
+
+    /**
+     * Load data from cache or backend (if not yet cached).
+     *
+     * @param {Function} [callback] Deprecated.
+     * @param {boolean} [disableCache=false] Deprecated
+     * @param {boolean} [loadDefault=false] Deprecated.
+     * @returns {Promise}
+     */
+    load: function (callback, disableCache, loadDefault) {
+        if (callback) {
+            this.once('sync', callback);
+        }
+
+        if (!disableCache) {
+            if (this.loadFromCache(loadDefault)) {
                 this.trigger('sync');
-            });
-        },
 
-        /**
-         * Sort a field list by a translated name.
-         *
-         * @param {string} scope An entity type.
-         * @param {string[]} fieldList A field list.
-         * @returns {string[]}
-         */
-        sortFieldList: function (scope, fieldList) {
-            return fieldList.sort((v1, v2) => {
-                 return this.translate(v1, 'fields', scope)
-                     .localeCompare(this.translate(v2, 'fields', scope));
-            });
-        },
-
-        /**
-         * Sort an entity type list by a translated name.
-         *
-         * @param {string[]} entityList An entity type list.
-         * @param {boolean} [plural=false] Use a plural label.
-         * @returns {string[]}
-         */
-        sortEntityList: function (entityList, plural) {
-            let category = 'scopeNames';
-
-            if (plural) {
-                category += 'Plural';
+                return new Promise(resolve => resolve());
             }
+        }
 
-            return entityList.sort((v1, v2) => {
-                 return this.translate(v1, category)
-                     .localeCompare(this.translate(v2, category));
-            });
-        },
+        return new Promise(resolve => {
+            this.fetch(loadDefault)
+                .then(() => resolve());
+        });
+    },
 
-        /**
-         * Get a value by a path.
-         *
-         * @param {string[]|string} path A path.
-         * @returns {*}
-         */
-        translatePath: function (path) {
-            if (typeof path === 'string' || path instanceof String) {
-                path = path.split('.');
+    /**
+     * Load default-language data from the backend.
+     *
+     * @returns {Promise}
+     */
+    loadDefault: function () {
+        return this.load(null, false, true);
+    },
+
+    /**
+     * Load data from the backend.
+     *
+     * @returns {Promise}
+     */
+    loadSkipCache: function () {
+        return this.load(null, true);
+    },
+
+    /**
+     * Load default-language data from the backend.
+     *
+     * @returns {Promise}
+     */
+    loadDefaultSkipCache: function () {
+        return this.load(null, true, true);
+    },
+
+    /**
+     * @private
+     * @param {boolean} loadDefault
+     * @returns {Promise}
+     */
+    fetch: function (loadDefault) {
+        return Espo.Ajax.getRequest(this.url, {default: loadDefault}).then(data => {
+            this.data = data;
+
+            this.storeToCache(loadDefault);
+            this.trigger('sync');
+        });
+    },
+
+    /**
+     * Sort a field list by a translated name.
+     *
+     * @param {string} scope An entity type.
+     * @param {string[]} fieldList A field list.
+     * @returns {string[]}
+     */
+    sortFieldList: function (scope, fieldList) {
+        return fieldList.sort((v1, v2) => {
+             return this.translate(v1, 'fields', scope)
+                 .localeCompare(this.translate(v2, 'fields', scope));
+        });
+    },
+
+    /**
+     * Sort an entity type list by a translated name.
+     *
+     * @param {string[]} entityList An entity type list.
+     * @param {boolean} [plural=false] Use a plural label.
+     * @returns {string[]}
+     */
+    sortEntityList: function (entityList, plural) {
+        let category = 'scopeNames';
+
+        if (plural) {
+            category += 'Plural';
+        }
+
+        return entityList.sort((v1, v2) => {
+             return this.translate(v1, category)
+                 .localeCompare(this.translate(v2, category));
+        });
+    },
+
+    /**
+     * Get a value by a path.
+     *
+     * @param {string[]|string} path A path.
+     * @returns {*}
+     */
+    translatePath: function (path) {
+        if (typeof path === 'string' || path instanceof String) {
+            path = path.split('.');
+        }
+
+        let pointer = this.data;
+
+        path.forEach(key => {
+            if (key in pointer) {
+                pointer = pointer[key];
             }
+        });
 
-            let pointer = this.data;
+        return pointer;
+    },
 
-            path.forEach(key => {
-                if (key in pointer) {
-                    pointer = pointer[key];
-                }
-            });
+}, Backbone.Events);
 
-            return pointer;
-        },
-
-    }, Backbone.Events);
-
-    return Language;
-});
+export default Language;
diff --git a/client/src/layout-manager.js b/client/src/layout-manager.js
index 767e66b6d2..e51df30fb6 100644
--- a/client/src/layout-manager.js
+++ b/client/src/layout-manager.js
@@ -26,256 +26,254 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('layout-manager', [], function () {
+/** @module layout-manager */
+
+import Backbone from 'lib!backbone';
+
+/**
+ * A layout manager.
+ *
+ * @class
+ * @param {module:cache|null} [cache] A cache.
+ * @param {string} [applicationId] An application ID.
+ * @param {string} [userId] A user ID.
+ */
+const LayoutManager = function (cache, applicationId, userId) {
+    /**
+     * @private
+     * @type {module:cache|null}
+     */
+    this.cache = cache || null;
 
     /**
-     * A layout manager.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:layout-manager
-     *
-     * @param {module:cache.Class|null} [cache] A cache.
-     * @param {string} [applicationId] An application ID.
-     * @param {string} [userId] A user ID.
+     * @private
+     * @type {string}
      */
-    let LayoutManager = function (cache, applicationId, userId) {
-        /**
-         * @private
-         * @type {module:cache.Class|null}
-         */
-        this.cache = cache || null;
+    this.applicationId = applicationId || 'default-id';
 
-        /**
-         * @private
-         * @type {string}
-         */
-        this.applicationId = applicationId || 'default-id';
+    /**
+     * @private
+     * @type {string|null}
+     */
+    this.userId = userId || null;
 
-        /**
-         * @private
-         * @type {string|null}
-         */
-        this.userId = userId || null;
+    /**
+     * @private
+     * @type {Object}
+     */
+    this.data = {};
 
-        /**
-         * @private
-         * @type {Object}
-         */
+    /**
+     * @private
+     */
+    this.ajax = Espo.Ajax;
+};
+
+_.extend(LayoutManager.prototype, /** @lends Class# */{
+
+    /**
+     * Set a user ID. To be used for the cache purpose.
+     *
+     * @param {string} userId A user ID.
+     *
+     * @todo Throw an exception if already set.
+     */
+    setUserId: function (userId) {
+        this.userId = userId
+    },
+
+    /**
+     * @private
+     * @param {string} scope
+     * @param {string} type
+     * @returns {string}
+     */
+    getKey: function (scope, type) {
+        if (this.userId) {
+            return this.applicationId + '-' + this.userId + '-' + scope + '-' + type;
+        }
+
+        return this.applicationId + '-' + scope + '-' + type;
+    },
+
+    /**
+     * @private
+     * @param {string} scope
+     * @param {string} type
+     * @param {string} [setId]
+     * @returns {string}
+     */
+    getUrl: function (scope, type, setId) {
+        let url = scope + '/layout/' + type;
+
+        if (setId) {
+            url += '/' + setId;
+        }
+
+        return url;
+    },
+
+    /**
+     * @callback module:layout-manager~getCallback
+     *
+     * @param {*} layout A layout.
+     */
+
+    /**
+     * Get a layout.
+     *
+     * @param {string} scope A scope (entity type).
+     * @param {string} type A layout type (name).
+     * @param {module:layout-manager~getCallback} callback
+     * @param {boolean} [cache=true] Use cache.
+     */
+    get: function (scope, type, callback, cache) {
+        if (typeof cache === 'undefined') {
+            cache = true;
+        }
+
+        let key = this.getKey(scope, type);
+
+        if (cache) {
+            if (key in this.data) {
+                if (typeof callback === 'function') {
+                    callback(this.data[key]);
+                }
+
+                return;
+            }
+        }
+
+        if (this.cache && cache) {
+            let cached = this.cache.get('app-layout', key);
+
+            if (cached) {
+                if (typeof callback === 'function') {
+                    callback(cached);
+                }
+
+                this.data[key] = cached;
+
+                return;
+            }
+        }
+
+        this.ajax
+            .getRequest(this.getUrl(scope, type))
+            .then(
+                layout => {
+                    if (typeof callback === 'function') {
+                        callback(layout);
+                    }
+
+                    this.data[key] = layout;
+
+                    if (this.cache) {
+                        this.cache.set('app-layout', key, layout);
+                    }
+                }
+            );
+    },
+
+    /**
+     * Get an original layout.
+     *
+     * @param {string} scope A scope (entity type).
+     * @param {string} type A layout type (name).
+     * @param {string} [setId]
+     * @param {module:layout-manager~getCallback} callback
+     */
+    getOriginal: function (scope, type, setId, callback) {
+        let url = 'Layout/action/getOriginal?scope='+scope+'&name='+type;
+
+        if (setId) {
+            url += '&setId=' + setId;
+        }
+
+        Espo.Ajax
+            .getRequest(url)
+            .then(
+                layout => {
+                    if (typeof callback === 'function') {
+                        callback(layout);
+                    }
+                }
+            );
+    },
+
+    /**
+     * Store and set a layout.
+     *
+     * @param {string} scope A scope (entity type).
+     * @param {string} type A type (name).
+     * @param {*} layout A layout.
+     * @param {Function} callback A callback.
+     * @param {string} [setId] A set ID.
+     * @returns {Promise}
+     */
+    set: function (scope, type, layout, callback, setId) {
+        return Espo.Ajax
+            .putRequest(this.getUrl(scope, type, setId), layout)
+            .then(
+                () => {
+                    let key = this.getKey(scope, type);
+
+                    if (this.cache && key) {
+                        this.cache.clear('app-layout', key);
+                    }
+
+                    delete this.data[key];
+
+                    this.trigger('sync');
+
+                    if (typeof callback === 'function') {
+                        callback();
+                    }
+                }
+            );
+    },
+
+    /**
+     * Reset a layout to default.
+     *
+     * @param {string} scope A scope (entity type).
+     * @param {string} type A type (name).
+     * @param {Function} callback A callback.
+     * @param {string} [setId] A set ID.
+     */
+    resetToDefault: function (scope, type, callback, setId) {
+        Espo.Ajax
+            .postRequest('Layout/action/resetToDefault', {
+                scope: scope,
+                name: type,
+                setId: setId,
+            })
+            .then(
+                () => {
+                    let key = this.getKey(scope, type);
+
+                    if (this.cache) {
+                        this.cache.clear('app-layout', key);
+                    }
+
+                    delete this.data[key];
+
+                    this.trigger('sync');
+
+                    if (typeof callback === 'function') {
+                        callback();
+                    }
+                }
+            );
+    },
+
+    /**
+     * Clear loaded data.
+     */
+    clearLoadedData: function () {
         this.data = {};
+    },
 
-        /**
-         * @private
-         */
-        this.ajax = Espo.Ajax;
-    };
+}, Backbone.Events);
 
-    _.extend(LayoutManager.prototype, /** @lends module:layout-manager.Class# */{
-
-        /**
-         * Set a user ID. To be used for the cache purpose.
-         *
-         * @param {string} userId A user ID.
-         *
-         * @todo Throw an exception if already set.
-         */
-        setUserId: function (userId) {
-            this.userId = userId
-        },
-
-        /**
-         * @private
-         * @param {string} scope
-         * @param {string} type
-         * @returns {string}
-         */
-        getKey: function (scope, type) {
-            if (this.userId) {
-                return this.applicationId + '-' + this.userId + '-' + scope + '-' + type;
-            }
-
-            return this.applicationId + '-' + scope + '-' + type;
-        },
-
-        /**
-         * @private
-         * @param {string} scope
-         * @param {string} type
-         * @param {string} [setId]
-         * @returns {string}
-         */
-        getUrl: function (scope, type, setId) {
-            let url = scope + '/layout/' + type;
-
-            if (setId) {
-                url += '/' + setId;
-            }
-
-            return url;
-        },
-
-        /**
-         * @callback module:layout-manager~getCallback
-         *
-         * @param {*} layout A layout.
-         */
-
-        /**
-         * Get a layout.
-         *
-         * @param {string} scope A scope (entity type).
-         * @param {string} type A layout type (name).
-         * @param {module:layout-manager~getCallback} callback
-         * @param {boolean} [cache=true] Use cache.
-         */
-        get: function (scope, type, callback, cache) {
-            if (typeof cache === 'undefined') {
-                cache = true;
-            }
-
-            let key = this.getKey(scope, type);
-
-            if (cache) {
-                if (key in this.data) {
-                    if (typeof callback === 'function') {
-                        callback(this.data[key]);
-                    }
-
-                    return;
-                }
-            }
-
-            if (this.cache && cache) {
-                let cached = this.cache.get('app-layout', key);
-
-                if (cached) {
-                    if (typeof callback === 'function') {
-                        callback(cached);
-                    }
-
-                    this.data[key] = cached;
-
-                    return;
-                }
-            }
-
-            this.ajax
-                .getRequest(this.getUrl(scope, type))
-                .then(
-                    layout => {
-                        if (typeof callback === 'function') {
-                            callback(layout);
-                        }
-
-                        this.data[key] = layout;
-
-                        if (this.cache) {
-                            this.cache.set('app-layout', key, layout);
-                        }
-                    }
-                );
-        },
-
-        /**
-         * Get an original layout.
-         *
-         * @param {string} scope A scope (entity type).
-         * @param {string} type A layout type (name).
-         * @param {string} [setId]
-         * @param {module:layout-manager~getCallback} callback
-         */
-        getOriginal: function (scope, type, setId, callback) {
-            let url = 'Layout/action/getOriginal?scope='+scope+'&name='+type;
-
-            if (setId) {
-                url += '&setId=' + setId;
-            }
-
-            Espo.Ajax
-                .getRequest(url)
-                .then(
-                    layout => {
-                        if (typeof callback === 'function') {
-                            callback(layout);
-                        }
-                    }
-                );
-        },
-
-        /**
-         * Store and set a layout.
-         *
-         * @param {string} scope A scope (entity type).
-         * @param {string} type A type (name).
-         * @param {*} layout A layout.
-         * @param {Function} callback A callback.
-         * @param {string} [setId] A set ID.
-         * @returns {Promise}
-         */
-        set: function (scope, type, layout, callback, setId) {
-            return Espo.Ajax
-                .putRequest(this.getUrl(scope, type, setId), layout)
-                .then(
-                    () => {
-                        let key = this.getKey(scope, type);
-
-                        if (this.cache && key) {
-                            this.cache.clear('app-layout', key);
-                        }
-
-                        delete this.data[key];
-
-                        this.trigger('sync');
-
-                        if (typeof callback === 'function') {
-                            callback();
-                        }
-                    }
-                );
-        },
-
-        /**
-         * Reset a layout to default.
-         *
-         * @param {string} scope A scope (entity type).
-         * @param {string} type A type (name).
-         * @param {Function} callback A callback.
-         * @param {string} [setId] A set ID.
-         */
-        resetToDefault: function (scope, type, callback, setId) {
-            Espo.Ajax
-                .postRequest('Layout/action/resetToDefault', {
-                    scope: scope,
-                    name: type,
-                    setId: setId,
-                })
-                .then(
-                    () => {
-                        let key = this.getKey(scope, type);
-
-                        if (this.cache) {
-                            this.cache.clear('app-layout', key);
-                        }
-
-                        delete this.data[key];
-
-                        this.trigger('sync');
-
-                        if (typeof callback === 'function') {
-                            callback();
-                        }
-                    }
-                );
-        },
-
-        /**
-         * Clear loaded data.
-         */
-        clearLoadedData: function () {
-            this.data = {};
-        },
-
-    }, Backbone.Events);
-
-    return LayoutManager;
-});
+export default LayoutManager;
diff --git a/client/src/loader-init-libs.js b/client/src/loader-init-libs.js
index 654bc98df8..fcf456873c 100644
--- a/client/src/loader-init-libs.js
+++ b/client/src/loader-init-libs.js
@@ -59,6 +59,14 @@ Espo.loader.addLibsConfig(
         "dompurify": {
             "exportsTo": "window",
             "exportsAs": "DOMPurify"
+        },
+        "base64": {
+            "exportsTo": "window",
+            "exportsAs": "Base64"
+        },
+        "moment": {
+            "exportsTo": "window",
+            "exportsAs": "moment"
         }
     }
 );
diff --git a/client/src/loader.js b/client/src/loader.js
index 6f62c2be47..9b4cdb00f9 100644
--- a/client/src/loader.js
+++ b/client/src/loader.js
@@ -48,10 +48,10 @@
      * Handles caching.
      *
      * @class
-     * @param {?module:cache.Class} [cache=null]
-     * @param {?int} [_cacheTimestamp=null]
+     * @param {module:cache|null} [cache=null]
+     * @param {int|null} [_cacheTimestamp=null]
      */
-    let Loader = function (cache, _cacheTimestamp) {
+    const Loader = function (cache, _cacheTimestamp) {
         this._cacheTimestamp = _cacheTimestamp || null;
         this._cache = cache || null;
         this._libsConfig = {};
@@ -64,6 +64,7 @@
         this._basePath = '';
 
         this._internalModuleList = [];
+        this._transpiledModuleList = [];
         this._internalModuleMap = {};
         this._isDeveloperMode = false;
 
@@ -126,7 +127,7 @@
         },
 
         /**
-         * @param {module:cache.Class} cache
+         * @param {module:cache} cache
          */
         setCache: function (cache) {
             if (this._cacheIsSet) {
@@ -162,6 +163,13 @@
             this._internalModuleListIsSet = true;
         },
 
+        /**
+         * @param {string[]} transpiledModuleList
+         */
+        setTranspiledModuleList: function (transpiledModuleList) {
+            this._transpiledModuleList = transpiledModuleList;
+        },
+
         /**
          * @private
          */
@@ -185,22 +193,26 @@
          */
         _nameToPath: function (name) {
             if (name.indexOf(':') === -1) {
-                return 'client/src/' + name + '.js';
+                return 'client/lib/transpiled/src/' + name + '.js';
             }
 
             let arr = name.split(':');
             let namePart = arr[1];
-            let modulePart = arr[0];
+            let mod = arr[0];
 
-            if (modulePart === 'custom') {
-                return 'client/custom/src/' + namePart + '.js' ;
+            if (mod === 'custom') {
+                return 'client/custom/src/' + namePart + '.js';
             }
 
-            if (this._isModuleInternal(modulePart)) {
-                return 'client/modules/' + modulePart + '/src/' + namePart + '.js';
+            if (this._transpiledModuleList.includes(mod)) {
+                return `client/lib/transpiled/modules/${mod}/src/${namePart}.js`;
             }
 
-            return 'client/custom/modules/' + modulePart + '/src/' + namePart + '.js';
+            if (this._isModuleInternal(mod)) {
+                return 'client/modules/' + mod + '/src/' + namePart + '.js';
+            }
+
+            return 'client/custom/modules/' + mod + '/src/' + namePart + '.js';
         },
 
         /**
@@ -293,23 +305,29 @@
             }
 
             if (!dependency) {
-                this._defineProceed(callback, subject, []);
+                this._defineProceed(callback, subject, [], -1);
 
                 return;
             }
 
-            this.require(dependency, (...arguments) => {
-                this._defineProceed(callback, subject, arguments);
+            let indexOfExports = dependency.indexOf('exports');
+
+            this.require(dependency, (...args) => {
+                this._defineProceed(callback, subject, args, indexOfExports);
             });
         },
 
         /**
          * @private
+         * @param {function} callback
+         * @param {string} subject
+         * @param {Array} args
+         * @param {number} indexOfExports
          */
-        _defineProceed: function (callback, subject, args) {
+        _defineProceed: function (callback, subject, args, indexOfExports) {
             let o = callback.apply(root, args);
 
-            if (!o) {
+            if (!o && indexOfExports === -1) {
                 if (this._cache) {
                     this._cache.clear('a', subject);
                 }
@@ -317,6 +335,12 @@
                 throw new Error("Could not load '" + subject + "'");
             }
 
+            if (indexOfExports !== -1) {
+                let exports = args[indexOfExports];
+
+                o = ('default' in exports) ? exports.default : exports;
+            }
+
             this._setClass(subject, o);
             this._executeLoadCallback(subject, o);
         },
@@ -420,6 +444,19 @@
                 return this._convertCamelCaseToHyphen(name).split('.').join('/');
             }
 
+            if (name.startsWith('modules/')) {
+                name = name.slice(8);
+
+                let index = name.indexOf('/');
+
+                if (index > 0) {
+                    let mod = name.slice(0, index);
+                    name = name.slice(index + 1);
+
+                    return mod + ':' + name;
+                }
+            }
+
             return name;
         },
 
@@ -438,6 +475,12 @@
          * @private
          */
         _load: function (name, callback, errorCallback) {
+            if (name === 'exports') {
+                callback({});
+
+                return;
+            }
+
             let dataType, type, path, exportsTo, exportsAs;
 
             let realName = name;
@@ -935,7 +978,7 @@
         },
 
         /**
-         * @param {module:cache.Class} cache
+         * @param {module:cache} cache
          * @internal
          */
         setCache: function (cache) {
@@ -957,6 +1000,13 @@
             loader.setInternalModuleList(internalModuleList);
         },
 
+        /**
+         * @param {string[]} transpiledModuleList
+         */
+        setTranspiledModuleList: function (transpiledModuleList) {
+            loader.setTranspiledModuleList(transpiledModuleList);
+        },
+
         /**
          * Define a module.
          *
@@ -1032,6 +1082,8 @@
      * @param {Espo.Loader~requireCallback} callback A callback with resolved dependencies.
      * @param {Object} [context] A context.
      * @param {Function|null} [errorCallback] An error callback.
+     *
+     * @deprecated Use `Espo.loader.require` instead.
      */
     root.require = Espo.require = function (subject, callback, context, errorCallback) {
         if (context) {
@@ -1085,6 +1137,7 @@
             Espo.loader.setCacheTimestamp(params.cacheTimestamp);
             Espo.loader.setBasePath(params.basePath);
             Espo.loader.setInternalModuleList(params.internalModuleList);
+            Espo.loader.setTranspiledModuleList(params.transpiledModuleList);
         }
 
         let jsLibsTag = document.querySelector('script[data-name="js-libs"]');
diff --git a/client/src/metadata.js b/client/src/metadata.js
index 62562652f8..e0845117fc 100644
--- a/client/src/metadata.js
+++ b/client/src/metadata.js
@@ -26,245 +26,241 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('metadata', [], function () {
+/** @module metadata */
+
+import Backbone from 'lib!backbone';
+
+/**
+ * Application metadata.
+ *
+ * @class
+ * @param {module:cache} [cache] A cache.
+ */
+const Metadata = function (cache) {
+    /**
+     * @private
+     * @type {module:cache|null}
+     */
+    this.cache = cache || null;
 
     /**
-     * Application metadata.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:metadata
-     *
-     * @param {module:cache.Class} [cache] A cache.
+     * @private
+     * @type {Object}
      */
-    let Metadata = function (cache) {
-        /**
-         * @private
-         * @type {module:cache.Class|null}
-         */
-        this.cache = cache || null;
+    this.data = {};
+};
 
-        /**
-         * @private
-         * @type {Object}
-         */
-        this.data = {};
-    };
+_.extend(Metadata.prototype, /** @lends Metadata# */{
 
-    _.extend(Metadata.prototype, /** @lends module:metadata.Class# */{
+    /** @private */
+    url: 'Metadata',
 
-        /**
-         * @private
-         */
-        url: 'Metadata',
+    /**
+     * Load from cache or the backend (if not yet cached).
+     *
+     * @param {Function|null} [callback] Deprecated. Use a promise.
+     * @param {boolean} [disableCache=false] Bypass cache.
+     * @returns {Promise}
+     */
+    load: function (callback, disableCache) {
+        this.off('sync');
 
-        /**
-         * Load from cache or the backend (if not yet cached).
-         *
-         * @param {Function|null} [callback] Deprecated. Use a promise.
-         * @param {boolean} [disableCache=false] Bypass cache.
-         * @returns {Promise}
-         */
-        load: function (callback, disableCache) {
-            this.off('sync');
-
-            if (callback) {
-                this.once('sync', callback);
-            }
-
-            if (!disableCache) {
-                 if (this.loadFromCache()) {
-                    this.trigger('sync');
-
-                    return new Promise(resolve => resolve());
-                }
-            }
-
-            return new Promise(resolve => {
-                this.fetch()
-                    .then(() => resolve());
-            });
-        },
-
-        /**
-         * Load from the server.
-         *
-         * @returns {Promise}
-         */
-        loadSkipCache: function () {
-            return this.load(null, true);
-        },
-
-        /**
-         * @private
-         * @returns {Promise}
-         */
-        fetch: function () {
-            return Espo.Ajax
-                .getRequest(this.url, null, {
-                    dataType: 'json',
-                    success: data => {
-                        this.data = data;
-                        this.storeToCache();
-                        this.trigger('sync');
-                    },
-                });
-        },
-
-        /**
-         * Get a value.
-         *
-         * @param {string[]|string} path A key path.
-         * @param {*} [defaultValue] A value to return if not set.
-         * @returns {*} Null if not set.
-         */
-        get: function (path, defaultValue) {
-            defaultValue = defaultValue || null;
-
-            let arr;
-
-            if (Array && Array.isArray && Array.isArray(path)) {
-                arr = path;
-            }
-            else {
-                arr = path.split('.');
-            }
-
-            let pointer = this.data;
-            let result = defaultValue;
-
-            for (var i = 0; i < arr.length; i++) {
-                let key = arr[i];
-
-                if (!(key in pointer)) {
-                    result = defaultValue;
-
-                    break;
-                }
-
-                if (arr.length - 1 === i) {
-                    result = pointer[key];
-                }
-
-                pointer = pointer[key];
-            }
-
-            return result;
-        },
-
-        /**
-         * @private
-         * @returns {boolean} True if success.
-         */
-        loadFromCache: function () {
-            if (this.cache) {
-                let cached = this.cache.get('app', 'metadata');
-
-                if (cached) {
-                    this.data = cached;
-
-                    return true;
-                }
-            }
-
-            return null;
-        },
-
-        /**
-         * @private
-         */
-        storeToCache: function () {
-            if (this.cache) {
-                this.cache.set('app', 'metadata', this.data);
-            }
-        },
-
-        /**
-         * Clear cache.
-         */
-        clearCache: function () {
-            if (!this.cache) {
-                return;
-            }
-
-            this.cache.clear('app', 'metadata');
-        },
-
-        /**
-         * Get a scope list.
-         *
-         * @returns {string}
-         */
-        getScopeList: function () {
-            let scopes = this.get('scopes') || {};
-            let scopeList = [];
-
-            for (let scope in scopes) {
-                var d = scopes[scope];
-
-                if (d.disabled) {
-                    continue;
-                }
-
-                scopeList.push(scope);
-            }
-
-            return scopeList;
-        },
-
-        /**
-         * Get an object-scope list. An object-scope represents a business entity.
-         *
-         * @returns {string[]}
-         */
-        getScopeObjectList: function () {
-            let scopes = this.get('scopes') || {};
-            let scopeList = [];
-
-            for (let scope in scopes) {
-                let d = scopes[scope];
-
-                if (d.disabled) {
-                    continue;
-                }
-
-                if (!d.object) {
-                    continue;
-                }
-
-                scopeList.push(scope);
-            }
-
-            return scopeList;
-        },
-
-        /**
-         * Get an entity-scope list. Scopes that represents entities.
-         *
-         * @returns {string[]}
-         */
-        getScopeEntityList: function () {
-            var scopes = this.get('scopes') || {};
-            var scopeList = [];
-
-            for (let scope in scopes) {
-                let d = scopes[scope];
-
-                if (d.disabled) {
-                    continue;
-                }
-
-                if (!d.entity) {
-                    continue;
-                }
-
-                scopeList.push(scope);
-            }
-
-            return scopeList;
+        if (callback) {
+            this.once('sync', callback);
         }
 
-    }, Backbone.Events);
+        if (!disableCache) {
+             if (this.loadFromCache()) {
+                this.trigger('sync');
 
-    return Metadata;
-});
+                return new Promise(resolve => resolve());
+            }
+        }
+
+        return new Promise(resolve => {
+            this.fetch()
+                .then(() => resolve());
+        });
+    },
+
+    /**
+     * Load from the server.
+     *
+     * @returns {Promise}
+     */
+    loadSkipCache: function () {
+        return this.load(null, true);
+    },
+
+    /**
+     * @private
+     * @returns {Promise}
+     */
+    fetch: function () {
+        return Espo.Ajax
+            .getRequest(this.url, null, {
+                dataType: 'json',
+                success: data => {
+                    this.data = data;
+                    this.storeToCache();
+                    this.trigger('sync');
+                },
+            });
+    },
+
+    /**
+     * Get a value.
+     *
+     * @param {string[]|string} path A key path.
+     * @param {*} [defaultValue] A value to return if not set.
+     * @returns {*} Null if not set.
+     */
+    get: function (path, defaultValue) {
+        defaultValue = defaultValue || null;
+
+        let arr;
+
+        if (Array && Array.isArray && Array.isArray(path)) {
+            arr = path;
+        }
+        else {
+            arr = path.split('.');
+        }
+
+        let pointer = this.data;
+        let result = defaultValue;
+
+        for (var i = 0; i < arr.length; i++) {
+            let key = arr[i];
+
+            if (!(key in pointer)) {
+                result = defaultValue;
+
+                break;
+            }
+
+            if (arr.length - 1 === i) {
+                result = pointer[key];
+            }
+
+            pointer = pointer[key];
+        }
+
+        return result;
+    },
+
+    /**
+     * @private
+     * @returns {boolean|null} True if success.
+     */
+    loadFromCache: function () {
+        if (this.cache) {
+            let cached = this.cache.get('app', 'metadata');
+
+            if (cached) {
+                this.data = cached;
+
+                return true;
+            }
+        }
+
+        return null;
+    },
+
+    /**
+     * @private
+     */
+    storeToCache: function () {
+        if (this.cache) {
+            this.cache.set('app', 'metadata', this.data);
+        }
+    },
+
+    /**
+     * Clear cache.
+     */
+    clearCache: function () {
+        if (!this.cache) {
+            return;
+        }
+
+        this.cache.clear('app', 'metadata');
+    },
+
+    /**
+     * Get a scope list.
+     *
+     * @returns {string[]}
+     */
+    getScopeList: function () {
+        let scopes = this.get('scopes') || {};
+        let scopeList = [];
+
+        for (let scope in scopes) {
+            var d = scopes[scope];
+
+            if (d.disabled) {
+                continue;
+            }
+
+            scopeList.push(scope);
+        }
+
+        return scopeList;
+    },
+
+    /**
+     * Get an object-scope list. An object-scope represents a business entity.
+     *
+     * @returns {string[]}
+     */
+    getScopeObjectList: function () {
+        let scopes = this.get('scopes') || {};
+        let scopeList = [];
+
+        for (let scope in scopes) {
+            let d = scopes[scope];
+
+            if (d.disabled) {
+                continue;
+            }
+
+            if (!d.object) {
+                continue;
+            }
+
+            scopeList.push(scope);
+        }
+
+        return scopeList;
+    },
+
+    /**
+     * Get an entity-scope list. Scopes that represents entities.
+     *
+     * @returns {string[]}
+     */
+    getScopeEntityList: function () {
+        var scopes = this.get('scopes') || {};
+        var scopeList = [];
+
+        for (let scope in scopes) {
+            let d = scopes[scope];
+
+            if (d.disabled) {
+                continue;
+            }
+
+            if (!d.entity) {
+                continue;
+            }
+
+            scopeList.push(scope);
+        }
+
+        return scopeList;
+    }
+
+}, Backbone.Events);
+
+export default Metadata;
diff --git a/client/src/model-factory.js b/client/src/model-factory.js
index 961fa1a3f8..d06585266e 100644
--- a/client/src/model-factory.js
+++ b/client/src/model-factory.js
@@ -26,86 +26,67 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('model-factory', [], function () {
+/** @module model-factory */
+
+/**
+ * A model factory.
+ */
+class Class {
+    /**
+     * @param {module:metadata} metadata
+     */
+    constructor (metadata) {
+        this.metadata = metadata;
+    }
 
     /**
-     * A model factory.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:model-factory
+     * Used by default value expressions.
+     * @public
+     * @type {module:date-time|null}
+     * @internal
      */
-    let ModelFactory = function (metadata, user) {
-        this.metadata = metadata;
-        this.user = user;
-    };
+    dateTime = null
 
-    _.extend(ModelFactory.prototype, /** @lends module:model-factory.Class# */ {
+    /**
+     * Create a model.
+     *
+     * @param {string} entityType An entity type.
+     * @param {Function} [callback] Deprecated.
+     * @param {Object} [context] Deprecated.
+     * @returns {Promise<module:model>}
+     */
+    create(entityType, callback, context) {
+        return new Promise(resolve => {
+            context = context || this;
 
-        /**
-         * @private
-         */
-        metadata: null,
-
-        /**
-         * @public
-         * @type {module:date-time.Class|null}
-         * @internal
-         */
-        dateTime: null,
-
-        /**
-         * @private
-         */
-        user: null,
-
-        /**
-         * Create a model.
-         *
-         * @param {string} name An entity type.
-         * @param {Function} [callback] Deprecated.
-         * @param {Object} [context] Deprecated.
-         * @returns {Promise<module:model.Class>}
-         */
-        create: function (name, callback, context) {
-            return new Promise(resolve => {
-                context = context || this;
-
-                this.getSeed(name, seed => {
-                    let model = new seed();
-
-                    if (callback) {
-                        callback.call(context, model);
-                    }
-
-                    resolve(model);
-                });
-            });
-        },
-
-        /**
-         * Get a class.
-         *
-         * @param {string} name An entity type.
-         * @param {function(module:model.Class): void} callback A callback.
-         * @public
-         */
-        getSeed: function (name, callback) {
-            let className = this.metadata.get(['clientDefs', name, 'model']) || 'model';
-
-            require(className, modelClass => {
-                let seed = modelClass.extend({
-                    name: name,
-                    entityType: name,
-                    defs: this.metadata.get(['entityDefs', name]) || {},
+            this.getSeed(entityType, Seed => {
+                let model = new Seed({}, {
+                    entityType: entityType,
+                    defs: this.metadata.get(['entityDefs', entityType]) || {},
                     dateTime: this.dateTime,
-                    _user: this.user,
                 });
 
-                callback(seed);
-            });
-        },
-    });
+                if (callback) {
+                    callback.call(context, model);
+                }
 
-    return ModelFactory;
-});
+                resolve(model);
+            });
+        });
+    }
+
+    /**
+     * Get a class.
+     *
+     * @param {string} entityType An entity type.
+     * @param {function(module:model): void} callback A callback.
+     * @public
+     */
+    getSeed(entityType, callback) {
+        let className = this.metadata.get(['clientDefs', entityType, 'model']) || 'model';
+
+        Espo.loader.require(className, modelClass => callback(modelClass));
+    }
+}
+
+export default Class;
diff --git a/client/src/model-offline.js b/client/src/model-offline.js
deleted file mode 100644
index ab577ebf0f..0000000000
--- a/client/src/model-offline.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/************************************************************************
- * This file is part of EspoCRM.
- *
- * EspoCRM - Open Source CRM application.
- * Copyright (C) 2014-2023 Yurii Kuznietsov, Taras Machyshyn, Oleksii Avramenko
- * Website: https://www.espocrm.com
- *
- * EspoCRM is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * EspoCRM is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with EspoCRM. If not, see http://www.gnu.org/licenses/.
- *
- * The interactive user interfaces in modified source and object code versions
- * of this program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU General Public License version 3.
- *
- * In accordance with Section 7(b) of the GNU General Public License version 3,
- * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
- ************************************************************************/
-
-define('model-offline', ['model'], function (Model) {
-
-    /**
-     * @internal Not used.
-     *
-     * @class
-     * @name Class
-     * @extends module:model.Class
-     * @memberOf module:model-offline
-     */
-    return Model.extend(/** @lends module:model-offline.Class# */{
-
-        cache: null,
-
-        _key: null,
-
-        initialize: function (attributes, options) {
-            Model.prototype.initialize.apply(this, arguments);
-
-            options = options || {};
-
-            this._key = this.url = this.name;
-
-            this.cache = options.cache || null;
-        },
-
-        load: function (callback, disableCache) {
-            this.once('sync', callback);
-
-            if (!disableCache) {
-                if (this.loadFromCache()) {
-                    this.trigger('sync');
-
-                    return new Promise(resolve => resolve());
-                }
-            }
-
-            return new Promise(resolve => {
-                this.fetch()
-                    .then(() => {
-                        this.storeToCache();
-
-                        resolve();
-                    });
-            });
-        },
-
-        loadSkipCache: function () {
-            return this.load(null, true);
-        },
-
-        loadFromCache: function () {
-            if (this.cache) {
-                let cached = this.cache.get('app', this._key);
-
-                if (cached) {
-                    this.set(cached);
-
-                    return true;
-                }
-            }
-
-            return null;
-        },
-
-        storeToCache: function () {
-            if (this.cache) {
-                this.cache.set('app', this._key, this.toJSON());
-            }
-        },
-
-        isNew: function () {
-            return false;
-        },
-    });
-});
diff --git a/client/src/model.js b/client/src/model.js
index d48fb9e99f..36efb54a8b 100644
--- a/client/src/model.js
+++ b/client/src/model.js
@@ -26,565 +26,727 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('model', [], function () {
+/** @module model */
 
-    let Dep = Backbone.Model;
+import Backbone from "lib!backbone";
+import _ from "lib!underscore";
+
+/**
+ * When attributes have changed.
+ *
+ * @event Class#change
+ * @param {Class} model A model.
+ * @param {Object} o Options.
+ */
+
+/**
+ * On sync with backend.
+ *
+ * @event Class#sync
+ * @param {Class} model A model.
+ * @param {Object} response Response from backend.
+ * @param {Object} o Options.
+ */
+
+/**
+ * Defs.
+ *
+ * @typedef module:model~defs
+ * @type {Object}
+ * @property {Object.<string, Object.<string, *>>} [fields] Fields.
+ * @property {Object.<string, Object.<string, *>>} [links] Links.
+ */
+
+/**
+ * A model.
+ *
+ * @mixes Backbone.Events
+ */
+class Class {
 
     /**
-     * Save values to the backend.
-     *
-     * @function save
-     * @memberof Backbone.Model.prototype
-     * @param {Object} [attributes] Attribute values.
-     * @param {Object} [options] Options.
-     * @returns {Promise}
-     *
-     * @fires module:model.Class#sync
+     * A root URL.
+     * @type {string|null}
      */
+    urlRoot = null
 
     /**
-     * Whether an attribute is changed. To be used only within a callback of a 'change' event listener.
+     * A name.
+     * @type {string|null}
+     */
+    name = null
+
+    /**
+     * An entity type.
+     * @type {string|null}
+     */
+    entityType = null
+
+    /**
+     * @param {Object.<string, *>|Class} [attributes]
+     * @param {{
+     *     collection?: module:collection,
+     *     entityType?: string,
+     *     defs?: module:model~defs,
+     *     user?: module:models/user,
+     *     dateTime?: module:date-time
+     * }} [options]
+     */
+    constructor(attributes, options) {
+        options = options || {};
+
+        /**
+         * A record ID.
+         * @type {string|null}
+         */
+        this.id = null;
+
+        /**
+         * An instance ID.
+         * @type {string}
+         */
+        this.cid = _.uniqueId('c');
+
+        /**
+         * Attribute values.
+         * @type {Object.<string, *>}
+         */
+        this.attributes = {};
+
+        if (options.collection) {
+            this.collection = options.collection;
+        }
+
+        this.set(attributes || {});
+
+        /**
+         * Definitions.
+         */
+        this.defs = options.defs || {};
+
+        if (!this.defs.fields) {
+            this.defs.fields = {};
+        }
+
+        if (options.entityType) {
+            this.entityType = options.entityType;
+            this.name = options.entityType;
+            this.urlRoot = options.entityType;
+        }
+
+        /** @private */
+        this.dateTime = options.dateTime || null;
+
+        /** @private */
+        this.changed = {};
+        /** @private */
+        this._previousAttributes = null;
+    }
+
+    /**
+     * @todo Revise naming.
+     *
+     * @public
+     * @return {Object.<string, *>}
+     */
+    toJSON() {
+        return Espo.Utils.cloneDeep(this.attributes);
+    }
+
+    /**
+     * @protected
+     * @param {string} [method] HTTP method.
+     * @param {Class} [model]
+     * @param {Object} [options]
+     * @returns {Promise}
+     */
+    sync(method, model, options) {
+        if (method === 'patch') {
+            options.type = 'PUT';
+        }
+
+        return Backbone.sync.call(this, method, model, options);
+    }
+
+    /**
+     * Set an attribute value.
+     *
+     * @param {(string|Object)} attribute An attribute name or a {key => value} object.
+     * @param {*} [value] A value or options if the first argument is an object.
+     * @param {{
+     *     silent?: boolean,
+     * }} [options] Options. `silent` won't trigger a `change` event.
+     * @returns {this}
+     * @fires Class#change Unless `{silent: true}`.
+     */
+    set(attribute, value, options) {
+        if (typeof attribute === 'object') {
+            let o = attribute;
+
+            if ('id' in o) {
+                this.id = o['id'];
+            }
+        }
+        else if (attribute === 'id') {
+            this.id = value;
+        }
+
+        return Backbone.Model.prototype.set.call(this, attribute, value, options);
+    }
+
+    /**
+     * Set attributes values.
+     *
+     * @param {Object.<string, *>} attributes
+     * @param {{
+     *     silent?: boolean,
+     * }} [options] Options. `silent` won't trigger a `change` event.
+     * @return {this}
+     */
+    setMultiple(attributes, options) {
+        return this.set(attributes, options);
+    }
+
+    /**
+     * Get an attribute value.
+     *
+     * @param {string} attribute An attribute name.
+     * @returns {*}
+     */
+    get(attribute) {
+        if (attribute === 'id' && this.id) {
+            return this.id;
+        }
+
+        return this.attributes[attribute];
+    }
+
+    /**
+     * Whether attribute is set.
      *
-     * @function changed
-     * @memberof Backbone.Model.prototype
      * @param {string} attribute An attribute name.
      * @returns {boolean}
      */
+    has(attribute) {
+        let value = this.get(attribute);
+
+        return (typeof value !== 'undefined');
+    }
+
+    /**
+     * Unset an attribute.
+     *
+     * @param {string} attribute
+     * @param options
+     * @return {Class}
+     */
+    unset(attribute, options) {
+        return this.set(attribute, void 0, _.extend({}, options, {unset: true}));
+    }
 
     /**
      * Removes all attributes from the model, including the `id` attribute.
      * Fires a `change` event unless `silent` is passed as an option.
      *
-     * @function clear
-     * @memberof Backbone.Model.prototype
      * @param {Object} [options] Options.
      */
+    clear(options) {
+        let attributes = {};
+
+        for (let key in this.attributes) {
+            attributes[key] = void 0;
+        }
+
+        return this.set(attributes, _.extend({}, options, {unset: true}));
+    }
 
     /**
-     * When attributes have changed.
+     * Whether is new.
      *
-     * @event module:model.Class#change
-     * @param {module:model.Class} model A model.
-     * @param {Object} o Options.
+     * @returns {boolean}
      */
+    isNew() {
+        return !this.id;
+    }
 
     /**
-     * On sync with backend.
+     * Whether an attribute changed. To be called only within a 'change' event handler.
      *
-     * @event module:model.Class#sync
-     * @param {module:model.Class} model A model.
-     * @param {Object} response Response from backend.
-     * @param {Object} o Options.
+     * @param {string} [attribute]
+     * @return {boolean}
      */
+    hasChanged(attribute) {
+        if (!attribute) {
+            return !_.isEmpty(this.changed);
+        }
+
+        return _.has(this.changed, attribute);
+    }
 
     /**
-     * A model.
+     * Get changed attribute values. To be called only within a 'change' event handler.
      *
-     * @class
-     * @name Class
-     * @extends Backbone.Model
-     * @mixes Backbone.Events
-     * @memberOf module:model
+     * @return {Object.<string, *>}
      */
-    let Model = Dep.extend(/** @lends module:model.Class.prototype */{
+    changedAttributes() {
+        return this.hasChanged() ? _.clone(this.changed) : {};
+    }
 
-        /**
-         * A record ID.
-         *
-         * @name cid
-         * @type {string|null}
-         * @public
-         * @memberof module:model.Class.prototype
-         */
-
-        /**
-         * An ID, unique among all models.
-         *
-         * @name cid
-         * @type {string}
-         * @public
-         * @memberof module:model.Class.prototype
-         */
-
-        /**
-         * Attribute values.
-         *
-         * @name attributes
-         * @type {Object}
-         * @public
-         * @memberof module:model.Class.prototype
-         */
-
-        /**
-         * A root URL.
-         *
-         * @type {string|null}
-         * @public
-         */
-        urlRoot: null,
-
-        /**
-         * A name.
-         *
-         * @type {string|null}
-         * @public
-         */
-        name: null,
-
-        /**
-         * An entity type.
-         *
-         * @type {string|null}
-         */
-        entityType: null,
-
-        /**
-         * @private
-         */
-        dateTime: null,
-
-        /**
-         * @private
-         */
-        _user: null,
-
-        /**
-         * Definitions.
-         *
-         * @type {Object|null}
-         */
-        defs: null,
-
-        /**
-         * Initialize.
-         *
-         * @protected
-         */
-        initialize: function () {
-            this.urlRoot = this.urlRoot || this.name;
-
-            this.defs = this.defs || {};
-
-            this.defs.fields = this.defs.fields || {};
-            this.defs.links = this.defs.links || {};
-        },
-
-        /**
-         * @param {string} [method] HTTP method.
-         * @param {module:model.Class} [model]
-         * @param {Object} [options]
-         * @returns {Promise}
-         */
-        sync: function (method, model, options) {
-            if (method === 'patch') {
-                options.type = 'PUT';
-            }
-
-            return Dep.prototype.sync.call(this, method, model, options);
-        },
-
-        /**
-         * Set an attribute value or multiple values.
-         *
-         * @param {(string|Object)} key An attribute name or a {key => value} object.
-         * @param {*} [val] A value or options if the first argument is an object.
-         * @param {Object} [options] Options. `silent` won't trigger a `change` event.
-         * @returns {this}
-         *
-         * @fires module:model.Class#change Unless `{silent: true}`.
-         */
-        set: function (key, val, options) {
-            if (typeof key === 'object') {
-                let o = key;
-
-                if (this.idAttribute in o) {
-                    this.id = o[this.idAttribute];
-                }
-            }
-            else if (key === 'id') {
-                this.id = val;
-            }
-
-            return Dep.prototype.set.call(this, key, val, options);
-        },
-
-        /**
-         * Get an attribute value.
-         *
-         * @param {string} key An attribute name.
-         * @returns {*}
-         */
-        get: function (key) {
-            if (key === 'id' && this.id) {
-                return this.id;
-            }
-
-            return Dep.prototype.get.call(this, key);
-        },
-
-        /**
-         * Whether attribute is set.
-         *
-         * @param {string} key An attribute name.
-         * @returns {boolean}
-         */
-        has: function (key) {
-            let value = this.get(key);
-
-            return (typeof value !== 'undefined');
-        },
-
-        /**
-         * Whether is new.
-         *
-         * @returns {boolean}
-         */
-        isNew: function () {
-            return !this.id;
-        },
-
-        /**
-         * Set defs.
-         *
-         * @param {{
-         *   fields?: Object.<string, *>,
-         *   links?: Object.<string, *>,
-         * }} defs
-         */
-        setDefs: function (defs) {
-            this.defs = defs || {};
-
-            this.defs.fields = this.defs.fields || {};
-        },
-
-        /**
-         * Get cloned attribute values.
-         *
-         * @returns {Object}
-         */
-        getClonedAttributes: function () {
-            var attributes = {};
-
-            for (let name in this.attributes) {
-                attributes[name] = Espo.Utils.cloneDeep(this.attributes[name]);
-            }
-
-            return attributes;
-        },
-
-        /**
-         * Populate default values.
-         */
-        populateDefaults: function () {
-            var defaultHash = {};
-
-            if ('fields' in this.defs) {
-                for (let field in this.defs.fields) {
-                    let defaultValue = this.getFieldParam(field, 'default');
-
-                    if (defaultValue !== null) {
-                        try {
-                            defaultValue = this.parseDefaultValue(defaultValue);
-
-                            defaultHash[field] = defaultValue;
-                        }
-                        catch (e) {
-                            console.error(e);
-                        }
-                    }
-
-                    let defaultAttributes = this.getFieldParam(field, 'defaultAttributes');
-
-                    if (defaultAttributes) {
-                        for (let attribute in defaultAttributes) {
-                            defaultHash[attribute] = defaultAttributes[attribute];
-                        }
-                    }
-                }
-            }
-
-            defaultHash = Espo.Utils.cloneDeep(defaultHash);
-
-            for (let attr in defaultHash) {
-                if (this.has(attr)) {
-                    delete defaultHash[attr];
-                }
-            }
-
-            this.set(defaultHash, {silent: true});
-        },
-
-        /**
-         * @protected
-         *
-         * @param {*} defaultValue
-         * @returns {*}
-         * @deprecated
-         */
-        parseDefaultValue: function (defaultValue) {
-            if (
-                typeof defaultValue === 'string' &&
-                defaultValue.indexOf('javascript:') === 0
-            ) {
-                let code = defaultValue.substring(11);
-
-                defaultValue = (new Function( "with(this) { " + code + "}")).call(this);
-            }
-
-            return defaultValue;
-        },
-
-        /**
-         * Get a link multiple column value.
-         *
-         * @param {string} field
-         * @param {string} column
-         * @param {string} id
-         * @returns {*}
-         */
-        getLinkMultipleColumn: function (field, column, id) {
-            return ((this.get(field + 'Columns') || {})[id] || {})[column];
-        },
-
-        /**
-         * @param {Object} data
-         */
-        setRelate: function (data) {
-            let setRelate = options => {
-                var link = options.link;
-                var model = options.model;
-
-                if (!link || !model) {
-                    throw new Error('Bad related options');
-                }
-
-                var type = this.defs.links[link].type;
-
-                switch (type) {
-                    case 'belongsToParent':
-                        this.set(link + 'Id', model.id);
-                        this.set(link + 'Type', model.name);
-                        this.set(link + 'Name', model.get('name'));
-
-                        break;
-
-                    case 'belongsTo':
-                        this.set(link + 'Id', model.id);
-                        this.set(link + 'Name', model.get('name'));
-
-                        break;
-
-                    case 'hasMany':
-                        var ids = [];
-                        ids.push(model.id);
-
-                        let names = {};
-
-                        names[model.id] = model.get('name');
-
-                        this.set(link + 'Ids', ids);
-                        this.set(link + 'Names', names);
-
-                        break;
-                }
-            };
-
-            if (Object.prototype.toString.call(data) === '[object Array]') {
-                data.forEach(options => {
-                    setRelate(options);
-                });
-            }
-            else {
-                setRelate(data);
-            }
-        },
-
-        /**
-         * Get a field type.
-         *
-         * @param {string} field
-         * @returns {string|null}
-         */
-        getFieldType: function (field) {
-            if (this.defs && this.defs.fields && (field in this.defs.fields)) {
-                return this.defs.fields[field].type || null;
-            }
+    /**
+     * Get previous attributes. To be called only within a 'change' event handler.
+     *
+     * @return {Object.<string, *>}
+     */
+    previousAttributes() {
+        return _.clone(this._previousAttributes);
+    }
 
+    /**
+     * Get a previous attribute value. To be called only within a 'change' event handler.
+     *
+     * @param attribute
+     * @return {*}
+     */
+    previous(attribute) {
+        if (!this._previousAttributes) {
             return null;
-        },
+        }
 
-        /**
-         * Get a field param.
-         *
-         * @param {string} field
-         * @param {string} param
-         * @returns {*}
-         */
-        getFieldParam: function (field, param) {
-            if (this.defs && this.defs.fields && (field in this.defs.fields)) {
-                if (param in this.defs.fields[field]) {
-                    return this.defs.fields[field][param];
+        return this._previousAttributes[attribute];
+    }
+
+    /**
+     * @private
+     */
+    _validate() {
+        return true;
+    }
+
+    /**
+     * Fetch values from the backend.
+     *
+     * @param {Object} [options] Options.
+     * @returns {Promise<Object>}
+     * @fires Class#sync
+     */
+    fetch(options) {
+        options = _.extend({parse: true}, options);
+
+        let success = options.success;
+
+        options.success = response => {
+            let serverAttributes = options.parse ?
+                this.parse(response, options) :
+                response;
+
+            if (!this.set(serverAttributes, options)) {
+                return false;
+            }
+
+            if (success) {
+                success.call(options.context, this, response, options);
+            }
+
+            this.trigger('sync', this, response, options);
+        };
+
+        this.lastXhr = this.sync('read', this, options);
+
+        return this.lastXhr;
+    }
+
+    /**
+     * Save values to the backend.
+     *
+     * @param {Object} [attributes] Attribute values.
+     * @param {Object} [options] Options.
+     * @returns {Promise}
+     * @fires Class#sync
+     */
+    save(attributes, options) {
+        return Backbone.Model.prototype.save.call(this, attributes, options);
+    }
+
+    /**
+     * Delete the record in the backend.
+     *
+     * @param {{wait: boolean}} [options] Options.
+     * @returns {Promise}
+     * @fires Class#sync
+     */
+    destroy(options) {
+        return Backbone.Model.prototype.destroy.call(this, options);
+    }
+
+    /**
+     * @private
+     */
+    url() {
+        let base = _.result(this, 'urlRoot');
+
+        if (!base) {
+            throw new Error("No URL.");
+        }
+
+        if (this.isNew()) {
+            return base;
+        }
+
+        let id = this.get('id');
+
+        return base.replace(/[^\/]$/, '$&/') + encodeURIComponent(id);
+    }
+
+    /**
+     * @protected
+     * @param {*} response
+     * @param {Object.<string, *>} options
+     * @return {*}
+     */
+    parse(response, options) {
+        return response;
+    }
+
+    /**
+     * Clone.
+     *
+     * @return {Class}
+     */
+    clone() {
+        return new this.constructor(
+            Espo.Utils.cloneDeep(this.attributes),
+            {
+                entityType: this.entityType,
+                dateTime: this.dateTime,
+                defs: this.defs,
+            }
+        );
+    }
+
+    /**
+     * Set defs.
+     *
+     * @param {module:model~defs} defs
+     */
+    setDefs(defs) {
+        this.defs = defs || {};
+
+        if (!this.defs.fields) {
+            this.defs.fields = {};
+        }
+    }
+
+    /**
+     * Get cloned attribute values.
+     *
+     * @returns {Object.<string, *>}
+     */
+    getClonedAttributes() {
+        return Espo.Utils.cloneDeep(this.attributes);
+    }
+
+    /**
+     * Populate default values.
+     */
+    populateDefaults() {
+        let defaultHash = {};
+
+        const fieldDefs = this.defs.fields;
+
+        for (let field in fieldDefs) {
+            let defaultValue = this.getFieldParam(field, 'default');
+
+            if (defaultValue !== null) {
+                try {
+                    defaultValue = this.parseDefaultValue(defaultValue);
+
+                    defaultHash[field] = defaultValue;
+                }
+                catch (e) {
+                    console.error(e);
                 }
             }
 
-            return null;
-        },
+            let defaultAttributes = this.getFieldParam(field, 'defaultAttributes');
 
-        /**
-         * Get a link type.
-         *
-         * @param {string} link
-         * @returns {string|null}
-         */
-        getLinkType: function (link) {
-            if (this.defs && this.defs.links && (link in this.defs.links)) {
-                return this.defs.links[link].type || null;
-            }
-
-            return null;
-        },
-
-        /**
-         * Get a link param.
-         *
-         * @param {string} link A link.
-         * @param {string} param A param.
-         * @returns {*}
-         */
-        getLinkParam: function (link, param) {
-            if (this.defs && this.defs.links && (link in this.defs.links)) {
-                if (param in this.defs.links[link]) {
-                    return this.defs.links[link][param];
+            if (defaultAttributes) {
+                for (let attribute in defaultAttributes) {
+                    defaultHash[attribute] = defaultAttributes[attribute];
                 }
             }
+        }
 
-            return null;
-        },
+        defaultHash = Espo.Utils.cloneDeep(defaultHash);
 
-        /**
-         * Is a field read-only.
-         *
-         * @param {string} field A field.
-         * @returns {bool}
-         */
-        isFieldReadOnly: function (field) {
-            return this.getFieldParam(field, 'readOnly') || false;
-        },
-
-        /**
-         * If a field required.
-         *
-         * @param {string} field A field.
-         * @returns {bool}
-         */
-        isRequired: function (field) {
-            return this.getFieldParam(field, 'required') || false;
-        },
-
-        /**
-         * Get IDs of a link-multiple field.
-         *
-         * @param {type} field A link-multiple field name.
-         * @returns {string[]}
-         */
-        getLinkMultipleIdList: function (field) {
-            return this.get(field + 'Ids') || [];
-        },
-
-        /**
-         * Get team IDs.
-         *
-         * @returns {string[]}
-         */
-        getTeamIdList: function () {
-            return this.get('teamsIds') || [];
-        },
-
-
-        /**
-         * @protected
-         * @returns {Espo.DateTime}
-         */
-        getDateTime: function () {
-            return this.dateTime;
-        },
-
-        /**
-         * @protected
-         * @returns {Espo.Models.User}
-         */
-        getUser: function () {
-            return this._user;
-        },
-
-        /**
-         * Whether has a field.
-         *
-         * @param {string} field A field.
-         * @returns {boolean}
-         */
-        hasField: function (field) {
-            return ('defs' in this) && ('fields' in this.defs) && (field in this.defs.fields);
-        },
-
-        /**
-         * Whether has a link.
-         *
-         * @param {string} link A link.
-         * @returns {boolean}
-         */
-        hasLink: function (link) {
-            return ('defs' in this) && ('links' in this.defs) && (link in this.defs.links);
-        },
-
-        /**
-         * @returns {boolean}
-         */
-        isEditable: function () {
-            return true;
-        },
-
-        /**
-         * @returns {boolean}
-         */
-        isRemovable: function () {
-            return true;
-        },
-
-        /**
-         * Get an entity type.
-         *
-         * @returns {string}
-         */
-        getEntityType: function () {
-            return this.name;
-        },
-
-        /**
-         * Fetch values from the backend.
-         *
-         * @param {Object} [options] Options.
-         * @returns {Promise<Object>}
-         *
-         * @fires module:model.Class#sync
-         */
-        fetch: function (options) {
-            this.lastXhr = Dep.prototype.fetch.call(this, options);
-
-            return this.lastXhr;
-        },
-
-        /**
-         * Abort the last fetch.
-         */
-        abortLastFetch: function () {
-            if (this.lastXhr && this.lastXhr.readyState < 4) {
-                this.lastXhr.abort();
+        for (let attr in defaultHash) {
+            if (this.has(attr)) {
+                delete defaultHash[attr];
             }
-        },
-    });
+        }
 
-    Model.extend = Bull.View.extend;
+        this.set(defaultHash, {silent: true});
+    }
 
-    return Model;
-});
+    /**
+     * @protected
+     *
+     * @param {*} defaultValue
+     * @returns {*}
+     * @deprecated
+     */
+    parseDefaultValue(defaultValue) {
+        if (
+            typeof defaultValue === 'string' &&
+            defaultValue.indexOf('javascript:') === 0
+        ) {
+            let code = defaultValue.substring(11);
+
+            defaultValue = (new Function( "with(this) { " + code + "}")).call(this);
+        }
+
+        return defaultValue;
+    }
+
+    /**
+     * Get a link multiple column value.
+     *
+     * @param {string} field
+     * @param {string} column
+     * @param {string} id
+     * @returns {*}
+     */
+    getLinkMultipleColumn(field, column, id) {
+        return ((this.get(field + 'Columns') || {})[id] || {})[column];
+    }
+
+    /**
+     * Set relate data (when creating a related record).
+     *
+     * @param {Object} data
+     */
+    setRelate(data) {
+        let setRelate = options => {
+            let link = options.link;
+            let model = options.model;
+
+            if (!link || !model) {
+                throw new Error('Bad related options');
+            }
+
+            let type = this.defs.links[link].type;
+
+            switch (type) {
+                case 'belongsToParent':
+                    this.set(link + 'Id', model.id);
+                    this.set(link + 'Type', model.name);
+                    this.set(link + 'Name', model.get('name'));
+
+                    break;
+
+                case 'belongsTo':
+                    this.set(link + 'Id', model.id);
+                    this.set(link + 'Name', model.get('name'));
+
+                    break;
+
+                case 'hasMany':
+                    let ids = [];
+                    ids.push(model.id);
+
+                    let names = {};
+
+                    names[model.id] = model.get('name');
+
+                    this.set(link + 'Ids', ids);
+                    this.set(link + 'Names', names);
+
+                    break;
+            }
+        };
+
+        if (Object.prototype.toString.call(data) === '[object Array]') {
+            data.forEach(options => {
+                setRelate(options);
+            });
+
+            return;
+        }
+
+        setRelate(data);
+    }
+
+    /**
+     * Get a field type.
+     *
+     * @param {string} field
+     * @returns {string|null}
+     */
+    getFieldType(field) {
+        if (!this.defs || !this.defs.fields) {
+            return null;
+        }
+
+        if (field in this.defs.fields) {
+            return this.defs.fields[field].type || null;
+        }
+
+        return null;
+    }
+
+    /**
+     * Get a field param.
+     *
+     * @param {string} field
+     * @param {string} param
+     * @returns {*}
+     */
+    getFieldParam(field, param) {
+        if (!this.defs || !this.defs.fields) {
+            return null;
+        }
+
+        if (field in this.defs.fields) {
+            if (param in this.defs.fields[field]) {
+                return this.defs.fields[field][param];
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Get a link type.
+     *
+     * @param {string} link
+     * @returns {string|null}
+     */
+    getLinkType(link) {
+        if (!this.defs || !this.defs.links) {
+            return null;
+        }
+
+        if (link in this.defs.links) {
+            return this.defs.links[link].type || null;
+        }
+
+        return null;
+    }
+
+    /**
+     * Get a link param.
+     *
+     * @param {string} link A link.
+     * @param {string} param A param.
+     * @returns {*}
+     */
+    getLinkParam(link, param) {
+        if (!this.defs || !this.defs.links) {
+            return null;
+        }
+
+        if (link in this.defs.links) {
+            if (param in this.defs.links[link]) {
+                return this.defs.links[link][param];
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * Is a field read-only.
+     *
+     * @param {string} field A field.
+     * @returns {bool}
+     */
+    isFieldReadOnly(field) {
+        return this.getFieldParam(field, 'readOnly') || false;
+    }
+
+    /**
+     * If a field required.
+     *
+     * @param {string} field A field.
+     * @returns {bool}
+     */
+    isRequired(field) {
+        return this.getFieldParam(field, 'required') || false;
+    }
+
+    /**
+     * Get IDs of a link-multiple field.
+     *
+     * @param {string} field A link-multiple field name.
+     * @returns {string[]}
+     */
+    getLinkMultipleIdList(field) {
+        return this.get(field + 'Ids') || [];
+    }
+
+    /**
+     * Get team IDs.
+     *
+     * @returns {string[]}
+     */
+    getTeamIdList() {
+        return this.get('teamsIds') || [];
+    }
+
+    /**
+     * Whether it has a field.
+     *
+     * @param {string} field A field.
+     * @returns {boolean}
+     */
+    hasField(field) {
+        return ('defs' in this) && ('fields' in this.defs) && (field in this.defs.fields);
+    }
+
+    /**
+     * Whether has a link.
+     *
+     * @param {string} link A link.
+     * @returns {boolean}
+     */
+    hasLink(link) {
+        return ('defs' in this) && ('links' in this.defs) && (link in this.defs.links);
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    isEditable() {
+        return true;
+    }
+
+    /**
+     * @returns {boolean}
+     */
+    isRemovable() {
+        return true;
+    }
+
+    /**
+     * Get an entity type.
+     *
+     * @returns {string}
+     */
+    getEntityType() {
+        return this.name;
+    }
+
+    /**
+     * Abort the last fetch.
+     */
+    abortLastFetch() {
+        if (this.lastXhr && this.lastXhr.readyState < 4) {
+            this.lastXhr.abort();
+        }
+    }
+}
+
+Class.extend = Bull.View.extend;
+
+_.extend(Class.prototype, Backbone.Events);
+
+export default Class;
diff --git a/client/src/models/preferences.js b/client/src/models/preferences.js
index 03c40d930f..9fc5fe51fd 100644
--- a/client/src/models/preferences.js
+++ b/client/src/models/preferences.js
@@ -26,45 +26,37 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('models/preferences', ['model'], function (Dep) {
+/** @module models/preferences */
+
+import Dep from "model";
+
+/**
+ * User preferences.
+ */
+export default class extends Dep {
+
+    name = 'Preferences'
+    entityType = 'Preferences'
+    urlRoot = 'Preferences'
 
     /**
-     * User preferences.
+     * Get dashlet options.
      *
-     * @class
-     * @name Class
-     * @extends module:model.Class
-     *
-     * @memberOf module:models/preferences
+     * @param {string} id A dashlet ID.
+     * @returns {Object|null}
      */
-    return Dep.extend(/** @lends module:models/preferences.Class# */{
+    getDashletOptions(id) {
+        let value = this.get('dashletsOptions') || {};
 
-        /**
-         * @inheritDoc
-         */
-        name: 'Preferences',
+        return value[id] || null;
+    }
 
-        entityType: 'Preferences',
-
-        /**
-         * Get dashlet options.
-         *
-         * @param {string} id A dashlet ID.
-         * @returns {Object|null}
-         */
-        getDashletOptions: function (id) {
-            let value = this.get('dashletsOptions') || {};
-
-            return value[id] || null;
-        },
-
-        /**
-         * Whether a user is portal.
-         *
-         * @returns {boolean}
-         */
-        isPortal: function () {
-            return this.get('isPortalUser');
-        },
-    });
-});
+    /**
+     * Whether a user is portal.
+     *
+     * @returns {boolean}
+     */
+    isPortal() {
+        return this.get('isPortalUser');
+    }
+}
diff --git a/client/src/models/settings.js b/client/src/models/settings.js
index 59d9212cdd..ba0cabb378 100644
--- a/client/src/models/settings.js
+++ b/client/src/models/settings.js
@@ -26,73 +26,66 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('models/settings', ['model'], function (Dep) {
+/** @module models/settings */
+
+import Dep from 'model';
+
+/**
+ * A config.
+ */
+export default class extends Dep {
+
+    name = 'Settings'
+    entityType = 'Settings'
+    urlRoot = 'Settings'
 
     /**
-     * A config.
+     * Load.
      *
-     * @class
-     * @name Class
-     * @extends module:model.Class
-     * @memberOf module:models/settings
+     * @returns {Promise}
      */
-    return Dep.extend(/** @lends module:models/settings.Class# */{
+    load() {
+        return new Promise(resolve => {
+            this.fetch()
+                .then(() => resolve());
+        });
+    }
 
-        /**
-         * @inheritDoc
-         */
-        name: 'Settings',
+    /**
+     * Get a value by a path.
+     *
+     * @param {string[]} path A path.
+     * @returns {*} Null if not set.
+     */
+    getByPath(path) {
+        if (!path.length) {
+            return null;
+        }
 
-        entityType: 'Settings',
+        let p;
 
-        /**
-         * Load.
-         *
-         * @returns {Promise}
-         */
-        load: function () {
-            return new Promise(resolve => {
-                this.fetch()
-                    .then(() => resolve());
-            });
-        },
+        for (let i = 0; i < path.length; i++) {
+            var item = path[i];
 
-        /**
-         * Get a value by a path.
-         *
-         * @param {string[]} arr A path.
-         * @returns {*} Null if not set.
-         */
-        getByPath: function (arr) {
-            if (!arr.length) {
-                return null;
+            if (i === 0) {
+                p = this.get(item);
             }
-
-            let p;
-
-            for (let i = 0; i < arr.length; i++) {
-                var item = arr[i];
-
-                if (i === 0) {
-                    p = this.get(item);
+            else {
+                if (item in p) {
+                    p = p[item];
                 }
                 else {
-                    if (item in p) {
-                        p = p[item];
-                    }
-                    else {
-                        return null;
-                    }
-                }
-
-                if (i === arr.length - 1) {
-                    return p;
-                }
-
-                if (p === null || typeof p !== 'object') {
                     return null;
                 }
             }
-        },
-    });
-});
+
+            if (i === path.length - 1) {
+                return p;
+            }
+
+            if (p === null || typeof p !== 'object') {
+                return null;
+            }
+        }
+    }
+}
diff --git a/client/src/models/user.js b/client/src/models/user.js
index 6a82deb3db..e2639a51ac 100644
--- a/client/src/models/user.js
+++ b/client/src/models/user.js
@@ -26,76 +26,70 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('models/user', ['model'], function (Dep) {
+/** @module models/user */
+
+import Model from 'model';
+
+/**
+ * A user.
+ */
+export default class extends Model {
+
+    name = 'User'
+    entityType = 'User'
+    urlRoot = 'User'
 
     /**
-     * A user.
+     * Is admin.
      *
-     * @class
-     * @name Class
-     * @extends module:model.Class
-     *
-     * @memberOf module:models/user
+     * @returns {boolean}
      */
-    return Dep.extend(/** @lends module:models/user.Class# */{
+    isAdmin() {
+        return this.get('type') === 'admin' || this.isSuperAdmin();
+    }
 
-        /**
-         * @inheritDoc
-         */
-        name: 'User',
+    /**
+     * Is portal.
+     *
+     * @returns {boolean}
+     */
+    isPortal() {
+        return this.get('type') === 'portal';
+    }
 
-        /**
-         * Is admin.
-         *
-         * @returns {boolean}
-         */
-        isAdmin: function () {
-            return this.get('type') === 'admin' || this.isSuperAdmin();
-        },
+    /**
+     * Is API.
+     *
+     * @returns {boolean}
+     */
+    isApi() {
+        return this.get('type') === 'api';
+    }
 
-        /**
-         * Is portal.
-         *
-         * @returns {boolean}
-         */
-        isPortal: function () {
-            return this.get('type') === 'portal';
-        },
+    /**
+     * Is regular.
+     *
+     * @returns {boolean}
+     */
+    isRegular() {
+        return this.get('type') === 'regular';
+    }
 
-        /**
-         * Is API.
-         *
-         * @returns {boolean}
-         */
-        isApi: function () {
-            return this.get('type') === 'api';
-        },
+    /**
+     * Is system.
+     *
+     * @returns {boolean}
+     */
+    isSystem() {
+        return this.get('type') === 'system';
+    }
 
-        /**
-         * Is regular.
-         *
-         * @returns {boolean}
-         */
-        isRegular: function () {
-            return this.get('type') === 'regular';
-        },
-
-        /**
-         * Is system.
-         *
-         * @returns {boolean}
-         */
-        isSystem: function () {
-            return this.get('type') === 'system';
-        },
-
-        /**
-         * Is super-admin.
-         *
-         * @returns {boolean}
-         */
-        isSuperAdmin: function () {
-            return this.get('type') === 'super-admin';
-        },
-    });
-});
+    /**
+     * Is super-admin.
+     *
+     * @returns {boolean}
+     */
+    isSuperAdmin() {
+        return this.get('type') === 'super-admin';
+    }
+}
diff --git a/client/src/multi-collection.js b/client/src/multi-collection.js
index 539d1afb17..c15fc5f378 100644
--- a/client/src/multi-collection.js
+++ b/client/src/multi-collection.js
@@ -26,61 +26,69 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('multi-collection', ['collection'], function (Collection) {
+/** @module multi-collection */
+
+import Collection from 'collection';
+import Backbone from 'lib!backbone';
+
+/**
+ * A collection that can contain entities of different entity types.
+ *
+ * @class
+ * @name Class
+ * @extends module:collection
+ */
+export default Collection.extend(/** @lends Class# */{
 
     /**
-     * A collection that can contain entities of different entity types.
+     * A model seed map.
      *
-     * @class
-     * @name Class
-     * @extends module:collection.Class
-     * @memberOf module:multi-collection
+     * @public
+     * @type {Object.<string, module:model>}
      */
-    return Collection.extend(/** @lends module:multi-collection.Class# */{
+    seeds: null,
 
-        /**
-         * A model seed map.
-         *
-         * @public
-         * @type {Object.<string, module:model.Class>}
-         */
-        seeds: null,
+    /** @inheritDoc */
+    initialize: function (models, options) {
+        options = options || {};
 
-        /**
-         * @inheritDoc
-         */
-        initialize: function (models, options) {
-            options = options || {};
+        this.data = {};
 
-            this.data = {};
+        Backbone.Collection.prototype.initialize.call(this, options);
+    },
 
-            Backbone.Collection.prototype.initialize.call(this, options);
-        },
+    /** @inheritDoc */
+    parse: function (response) {
+        this.total = response.total;
 
-        /**
-         * @inheritDoc
-         */
-        parse: function (resp, options) {
-            this.total = resp.total;
+        if (!('list' in response)) {
+            throw new Error("No 'list' in response.");
+        }
 
-            return resp.list.map(attributes => {
-                let a = _.clone(attributes);
+        return response.list.map(attributes => {
+            let entityType = attributes._scope;
 
-                delete a['_scope'];
+            if (!entityType) {
+                throw new Error("No '_scope' attribute.");
+            }
 
-                return new this.seeds[attributes._scope](a, options);
-            });
-        },
+            attributes = _.clone(attributes);
+            delete attributes['_scope'];
 
-        /**
-         * @inheritDoc
-         */
-        clone: function () {
-            let collection = Collection.prototype.clone.call(this);
+            let model = this.seeds[entityType].clone();
 
-            collection.seeds = this.seeds;
+            model.set(attributes);
 
-            return collection;
-        },
-    });
+            return model;
+        });
+    },
+
+    /** @inheritDoc */
+    clone: function () {
+        let collection = Collection.prototype.clone.call(this);
+
+        collection.seeds = this.seeds;
+
+        return collection;
+    },
 });
diff --git a/client/src/number.js b/client/src/number.js
index 29597a8c30..f7f3e05535 100644
--- a/client/src/number.js
+++ b/client/src/number.js
@@ -26,30 +26,154 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('number', [], function () {
+/** @module number */
+
+/**
+ * A number util.
+ *
+ * @class
+ * @param {module:models/settings} config A config.
+ * @param {module:models/preferences} preferences Preferences.
+ */
+const NumberUtil = function (config, preferences) {
+    /**
+     * @private
+     * @type {module:models/settings}
+     */
+    this.config = config;
 
     /**
-     * A number util.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:number
-     *
-     * @param {module:models/settings.Class} config A config.
-     * @param {module:models/preferences.Class} preferences Preferences.
+     * @private
+     * @type {module:models/preferences}
      */
-    let NumberUtil = function (config, preferences) {
-        /**
-         * @private
-         * @type {module:models/settings.Class}
-         */
-        this.config = config;
+    this.preferences = preferences;
 
-        /**
-         * @private
-         * @type {module:models/preferences.Class}
-         */
-        this.preferences = preferences;
+    /**
+     * A thousand separator.
+     *
+     * @private
+     * @type {string|null}
+     */
+    this.thousandSeparator = null;
+
+    /**
+     * A decimal mark.
+     *
+     * @private
+     * @type {string|null}
+     */
+    this.decimalMark = null;
+
+    this.config.on('change', () => {
+        this.thousandSeparator = null;
+        this.decimalMark = null;
+    });
+
+    this.preferences.on('change', () => {
+        this.thousandSeparator = null;
+        this.decimalMark = null;
+    });
+
+    /**
+     * A max decimal places.
+     *
+     * @private
+     * @type {number}
+     */
+    this.maxDecimalPlaces = 10;
+};
+
+_.extend(NumberUtil.prototype, /** @lends NumberUtil# */{
+
+    /**
+     * Format an integer number.
+     *
+     * @param {number} value A value.
+     * @returns {string}
+     */
+    formatInt: function (value) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+
+        let stringValue = value.toString();
+
+        stringValue = stringValue.replace(/\B(?=(\d{3})+(?!\d))/g, this.getThousandSeparator());
+
+        return stringValue;
+    },
+
+    /**
+     * Format a float number.
+     *
+     * @param {number} value A value.
+     * @param {number} [decimalPlaces] Decimal places.
+     * @returns {string}
+     */
+    formatFloat: function (value, decimalPlaces) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+
+        if (decimalPlaces === 0) {
+            value = Math.round(value);
+        }
+        else if (decimalPlaces) {
+            value = Math.round(value * Math.pow(10, decimalPlaces)) / (Math.pow(10, decimalPlaces));
+        }
+        else {
+            value = Math.round(
+                value * Math.pow(10, this.maxDecimalPlaces)) / (Math.pow(10, this.maxDecimalPlaces)
+            );
+        }
+
+        var parts = value.toString().split('.');
+
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, this.getThousandSeparator());
+
+        if (decimalPlaces === 0) {
+            return parts[0];
+        }
+
+        if (decimalPlaces) {
+            let decimalPartLength = 0;
+
+            if (parts.length > 1) {
+                decimalPartLength = parts[1].length;
+            }
+            else {
+                parts[1] = '';
+            }
+
+            if (decimalPlaces && decimalPartLength < decimalPlaces) {
+                let limit = decimalPlaces - decimalPartLength;
+
+                for (let i = 0; i < limit; i++) {
+                    parts[1] += '0';
+                }
+            }
+        }
+
+        return parts.join(this.getDecimalMark());
+    },
+
+    /**
+     * @private
+     * @returns {string}
+     */
+    getThousandSeparator: function () {
+        if (this.thousandSeparator !== null) {
+            return this.thousandSeparator;
+        }
+
+        let thousandSeparator = '.';
+
+        if (this.preferences.has('thousandSeparator')) {
+            thousandSeparator = this.preferences.get('thousandSeparator');
+        }
+        else if (this.config.has('thousandSeparator')) {
+            thousandSeparator = this.config.get('thousandSeparator');
+        }
 
         /**
          * A thousand separator.
@@ -57,7 +181,30 @@ define('number', [], function () {
          * @private
          * @type {string|null}
          */
-        this.thousandSeparator = null;
+        this.thousandSeparator = thousandSeparator;
+
+        return thousandSeparator;
+    },
+
+    /**
+     * @private
+     * @returns {string}
+     */
+    getDecimalMark: function () {
+        if (this.decimalMark !== null) {
+            return this.decimalMark;
+        }
+
+        let decimalMark = '.';
+
+        if (this.preferences.has('decimalMark')) {
+            decimalMark = this.preferences.get('decimalMark');
+        }
+        else {
+            if (this.config.has('decimalMark')) {
+                decimalMark = this.config.get('decimalMark');
+            }
+        }
 
         /**
          * A decimal mark.
@@ -65,161 +212,10 @@ define('number', [], function () {
          * @private
          * @type {string|null}
          */
-        this.decimalMark = null;
+        this.decimalMark = decimalMark;
 
-        this.config.on('change', () => {
-            this.thousandSeparator = null;
-            this.decimalMark = null;
-        });
-
-        this.preferences.on('change', () => {
-            this.thousandSeparator = null;
-            this.decimalMark = null;
-        });
-
-        /**
-         * A max decimal places.
-         *
-         * @private
-         * @type {number}
-         */
-        this.maxDecimalPlaces = 10;
-    };
-
-    _.extend(NumberUtil.prototype, /** @lends module:number.Class# */{
-
-        /**
-         * Format an integer number.
-         *
-         * @param {number} value A value.
-         * @returns {string}
-         */
-        formatInt: function (value) {
-            if (value === null || value === undefined) {
-                return '';
-            }
-
-            let stringValue = value.toString();
-
-            stringValue = stringValue.replace(/\B(?=(\d{3})+(?!\d))/g, this.getThousandSeparator());
-
-            return stringValue;
-        },
-
-        /**
-         * Format a float number.
-         *
-         * @param {number} value A value.
-         * @param {number} [decimalPlaces] Decimal places.
-         * @returns {string}
-         */
-        formatFloat: function (value, decimalPlaces) {
-            if (value === null || value === undefined) {
-                return '';
-            }
-
-            if (decimalPlaces === 0) {
-                value = Math.round(value);
-            }
-            else if (decimalPlaces) {
-                value = Math.round(value * Math.pow(10, decimalPlaces)) / (Math.pow(10, decimalPlaces));
-            }
-            else {
-                value = Math.round(
-                    value * Math.pow(10, this.maxDecimalPlaces)) / (Math.pow(10, this.maxDecimalPlaces)
-                );
-            }
-
-            var parts = value.toString().split('.');
-
-            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, this.getThousandSeparator());
-
-            if (decimalPlaces === 0) {
-                return parts[0];
-            }
-
-            if (decimalPlaces) {
-                let decimalPartLength = 0;
-
-                if (parts.length > 1) {
-                    decimalPartLength = parts[1].length;
-                }
-                else {
-                    parts[1] = '';
-                }
-
-                if (decimalPlaces && decimalPartLength < decimalPlaces) {
-                    let limit = decimalPlaces - decimalPartLength;
-
-                    for (let i = 0; i < limit; i++) {
-                        parts[1] += '0';
-                    }
-                }
-            }
-
-            return parts.join(this.getDecimalMark());
-        },
-
-        /**
-         * @private
-         * @returns {string}
-         */
-        getThousandSeparator: function () {
-            if (this.thousandSeparator !== null) {
-                return this.thousandSeparator;
-            }
-
-            let thousandSeparator = '.';
-
-            if (this.preferences.has('thousandSeparator')) {
-                thousandSeparator = this.preferences.get('thousandSeparator');
-            }
-            else if (this.config.has('thousandSeparator')) {
-                thousandSeparator = this.config.get('thousandSeparator');
-            }
-
-            /**
-             * A thousand separator.
-             *
-             * @private
-             * @type {string|null}
-             */
-            this.thousandSeparator = thousandSeparator;
-
-            return thousandSeparator;
-        },
-
-        /**
-         * @private
-         * @returns {string}
-         */
-        getDecimalMark: function () {
-            if (this.decimalMark !== null) {
-                return this.decimalMark;
-            }
-
-            let decimalMark = '.';
-
-            if (this.preferences.has('decimalMark')) {
-                decimalMark = this.preferences.get('decimalMark');
-            }
-            else {
-                if (this.config.has('decimalMark')) {
-                    decimalMark = this.config.get('decimalMark');
-                }
-            }
-
-            /**
-             * A decimal mark.
-             *
-             * @private
-             * @type {string|null}
-             */
-            this.decimalMark = decimalMark;
-
-            return decimalMark;
-        },
-    });
-
-    return NumberUtil;
+        return decimalMark;
+    },
 });
+
+export default NumberUtil;
diff --git a/client/src/page-title.js b/client/src/page-title.js
index b4f0261b3d..970915fbe7 100644
--- a/client/src/page-title.js
+++ b/client/src/page-title.js
@@ -26,82 +26,79 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('page-title', [], function () {
+/** @module page-title */
+
+/**
+ * A page-title util.
+ *
+ * @class
+ * @param {module:models/settings} config A config.
+ */
+const PageTitle = function (config) {
 
     /**
-     * A page-title util.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:page-title
-     *
-     * @param {module:models/settings.Class} config A config.
+     * @private
+     * @type {boolean}
      */
-    let PageTitle = function (config) {
-        /**
-         * @private
-         * @type {boolean}
-         */
-        this.displayNotificationNumber = config.get('newNotificationCountInTitle') || false;
+    this.displayNotificationNumber = config.get('newNotificationCountInTitle') || false;
 
-        /**
-         * @private
-         * @type {string}
-         */
-        this.title = $('head title').text() || '';
+    /**
+     * @private
+     * @type {string}
+     */
+    this.title = $('head title').text() || '';
 
-        /**
-         * @private
-         * @type {number}
-         */
-        this.notificationNumber = 0;
-    };
+    /**
+     * @private
+     * @type {number}
+     */
+    this.notificationNumber = 0;
+};
 
-    _.extend(PageTitle.prototype, /** @lends module:page-title.Class# */{
+_.extend(PageTitle.prototype, /** @lends PageTitle# */{
 
-        /**
-         * Set a title.
-         *
-         * @param {string} title A title.
-         */
-        setTitle: function (title) {
-            this.title = title;
+    /**
+     * Set a title.
+     *
+     * @param {string} title A title.
+     */
+    setTitle: function (title) {
+        this.title = title;
 
+        this.update();
+    },
+
+    /**
+     * Set a notification number.
+     *
+     * @param {number} notificationNumber A number.
+     */
+    setNotificationNumber: function (notificationNumber) {
+        this.notificationNumber = notificationNumber;
+
+        if (this.displayNotificationNumber) {
             this.update();
-        },
+        }
+    },
 
-        /**
-         * Set a notification number.
-         *
-         * @param {number} notificationNumber A number.
-         */
-        setNotificationNumber: function (notificationNumber) {
-            this.notificationNumber = notificationNumber;
+    /**
+     * Update a page title.
+     */
+    update: function () {
+        let value = '';
 
-            if (this.displayNotificationNumber) {
-                this.update();
+        if (this.displayNotificationNumber && this.notificationNumber) {
+            value = '(' + this.notificationNumber.toString() + ')';
+
+            if (this.title) {
+                value += ' ';
             }
-        },
+        }
 
-        /**
-         * Update a page title.
-         */
-        update: function () {
-            let value = '';
+        value += this.title;
 
-            if (this.displayNotificationNumber && this.notificationNumber) {
-                value = '(' + this.notificationNumber.toString() + ')';
-
-                if (this.title) {
-                    value += ' ';
-                }
-            }
-
-            value += this.title;
-
-            $('head title').text(value);
-        },
-    });
-
-    return PageTitle;
+        $('head title').text(value);
+    },
 });
+
+export default PageTitle;
diff --git a/client/src/pre-loader.js b/client/src/pre-loader.js
index 19b1607a9b..60b6dd2ee3 100644
--- a/client/src/pre-loader.js
+++ b/client/src/pre-loader.js
@@ -26,153 +26,147 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('pre-loader', [], function () {
+/**
+ * A pre-loader.
+ *
+ * Not used.
+ *
+ * @class
+ * @param {module:cache} cache A cache.
+ * @param {Bull.Factory} viewFactory A view factory.
+ * @param {string} [basePath] A base path.
+ */
+const PreLoader = function (cache, viewFactory, basePath) {
+    /**
+     * @private
+     * @type {module:cache}
+     */
+    this.cache = cache;
 
     /**
-     * A pre-loader.
-     *
-     * Not used. Maybe utilize for post-loading additional resources in idle, after the page is fully rendered.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:pre-loader
-     *
-     * @param {module:cache.Class} cache A cache.
-     * @param {Bull.Factory} viewFactory A view factory.
-     * @param {string} [basePath] A base path.
+     * @private
+     * @type {Bull.Factory}
      */
-    let PreLoader = function (cache, viewFactory, basePath) {
-        /**
-         * @private
-         * @type {module:cache.Class}
-         */
-        this.cache = cache;
+    this.viewFactory = viewFactory;
 
-        /**
-         * @private
-         * @type {Bull.Factory}
-         */
-        this.viewFactory = viewFactory;
+    /**
+     * @private
+     * @type {string}
+     */
+    this.basePath = basePath || '';
+};
 
-        /**
-         * @private
-         * @type {string}
-         */
-        this.basePath = basePath || '';
-    };
+_.extend(PreLoader.prototype, /** @lends PreLoader# */{
 
-    _.extend(PreLoader.prototype, /** @lends module:pre-loader.Class# */{
+    /**
+     * @private
+     * @type {string}
+     */
+    configUrl: 'client/cfg/pre-load.json',
 
-        /**
-         * @private
-         * @type {string}
-         */
-        configUrl: 'client/cfg/pre-load.json',
+    /**
+     * Load.
+     *
+     * @param {Function} callback A callback.
+     * @param {module:app} app An application instance.
+     */
+    load: function (callback, app) {
+        let bar = $(
+            '<div class="progress pre-loading">' +
+            '<div class="progress-bar" id="loading-progress-bar" role="progressbar" ' +
+            'aria-valuenow="0" style="width: 0"></div></div>'
+        ).prependTo('body');
 
-        /**
-         * Load.
-         *
-         * @param {Function} callback A callback.
-         * @param {module:app.Class} app An application instance.
-         */
-        load: function (callback, app) {
-            let bar = $(
-                '<div class="progress pre-loading">' +
-                '<div class="progress-bar" id="loading-progress-bar" role="progressbar" ' +
-                'aria-valuenow="0" style="width: 0%;"></div></div>'
-            ).prependTo('body');
+        bar = bar.children();
 
-            bar = bar.children();
+        bar.css({
+            'transition': 'width .1s linear',
+            '-webkit-transition': 'width .1s linear'
+        });
 
-            bar.css({
-                'transition': 'width .1s linear',
-                '-webkit-transition': 'width .1s linear'
+        let count = 0;
+        let countLoaded = 0;
+        let classesLoaded = 0;
+        let layoutTypesLoaded = 0;
+        let templatesLoaded = 0;
+
+        let updateBar = () => {
+            let percents = countLoaded / count * 100;
+
+            bar.css('width', percents + '%').attr('aria-valuenow', percents);
+        };
+
+        let checkIfReady = () => {
+            if (countLoaded >= count) {
+                clearInterval(timer);
+                callback.call(app, app);
+            }
+        };
+
+        let timer = setInterval(checkIfReady, 100);
+
+        let load = (data) => {
+            data.classes = data.classes || [];
+            data.templates = data.templates || [];
+            data.layoutTypes = data.layoutTypes || [];
+
+            let d = [];
+
+            data.classes.forEach(item => {
+                if (item !== 'views/fields/enum') {
+                    d.push(item); // TODO remove this hack
+                }
             });
 
-            let count = 0;
-            let countLoaded = 0;
-            let classesLoaded = 0;
-            let layoutTypesLoaded = 0;
-            let templatesLoaded = 0;
+            data.classes = d;
 
-            let updateBar = () => {
-                let percents = countLoaded / count * 100;
+            count = data.templates.length + data.layoutTypes.length+ data.classes.length;
 
-                bar.css('width', percents + '%').attr('aria-valuenow', percents);
-            };
+            let loadTemplates = () => {
+                data.templates.forEach(name =>  {
+                    this.viewFactory._loader.load('template', name, () => {
+                        templatesLoaded++;
+                        countLoaded++;
 
-            let checkIfReady = () => {
-                if (countLoaded >= count) {
-                    clearInterval(timer);
-                    callback.call(app, app);
-                }
-            };
-
-            let timer = setInterval(checkIfReady, 100);
-
-            let load = (data) => {
-                data.classes = data.classes || [];
-                data.templates = data.templates || [];
-                data.layoutTypes = data.layoutTypes || [];
-
-                let d = [];
-
-                data.classes.forEach(item => {
-                    if (item !== 'views/fields/enum') {
-                        d.push(item); // TODO remove this hack
-                    }
+                        updateBar();
+                    });
                 });
-
-                data.classes = d;
-
-                count = data.templates.length + data.layoutTypes.length+ data.classes.length;
-
-                let loadTemplates = () => {
-                    data.templates.forEach(name =>  {
-                        this.viewFactory._loader.load('template', name, () => {
-                            templatesLoaded++;
-                            countLoaded++;
-
-                            updateBar();
-                        });
-                    });
-                };
-
-                let loadLayoutTypes = () => {
-                    data.layoutTypes.forEach(name => {
-                        this.viewFactory._loader.load('layoutTemplate', name, () => {
-                            layoutTypesLoaded++;
-                            countLoaded++;
-
-                            updateBar();
-                        });
-                    });
-                };
-
-                let loadClasses = () => {
-                    data.classes.forEach(name => {
-                        Espo.loader.require(name, () => {
-                            classesLoaded++;
-                            countLoaded++;
-
-                            updateBar();
-                        });
-                    });
-                };
-
-                loadTemplates();
-                loadLayoutTypes();
-                loadClasses();
             };
 
-            Espo.Ajax
-                .getRequest(this.basePath + this.configUrl, null, {
-                    dataType: 'json',
-                    local: true,
-                })
-                .then(data => load(data));
-        }
-    });
+            let loadLayoutTypes = () => {
+                data.layoutTypes.forEach(name => {
+                    this.viewFactory._loader.load('layoutTemplate', name, () => {
+                        layoutTypesLoaded++;
+                        countLoaded++;
 
-    return PreLoader;
+                        updateBar();
+                    });
+                });
+            };
+
+            let loadClasses = () => {
+                data.classes.forEach(name => {
+                    Espo.loader.require(name, () => {
+                        classesLoaded++;
+                        countLoaded++;
+
+                        updateBar();
+                    });
+                });
+            };
+
+            loadTemplates();
+            loadLayoutTypes();
+            loadClasses();
+        };
+
+        Espo.Ajax
+            .getRequest(this.basePath + this.configUrl, null, {
+                dataType: 'json',
+                local: true,
+            })
+            .then(data => load(data));
+    }
 });
+
+export default PreLoader;
diff --git a/client/src/router.js b/client/src/router.js
index 6df8d55307..f30f5b6fdf 100644
--- a/client/src/router.js
+++ b/client/src/router.js
@@ -26,567 +26,570 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('router', [], function () {
+/** @module router */
+
+import Backbone from 'lib!backbone';
+
+/**
+ * On route.
+ *
+ * @event Backbone.Router#route
+ * @param {string} name A route name.
+ * @param {any[]} args Arguments.
+ */
+
+/**
+ * After dispatch.
+ *
+ * @event module:router#routed
+ * @param {{
+ *   controller: string,
+ *   action:string,
+ *   options: Object.<string,*>,
+ * }} data A route data.
+ */
+
+/**
+ * Subscribe.
+ *
+ * @function on
+ * @memberof module:router#
+ * @param {string} event An event.
+ * @param {function(*): void} callback A callback.
+ */
+
+/**
+ * Subscribe once.
+ *
+ * @function once
+ * @memberof module:router#
+ * @param {string} event An event.
+ * @param {function(): void} callback A callback.
+ */
+
+/**
+ * Unsubscribe.
+ *
+ * @function off
+ * @memberof module:router#
+ * @param {string} event An event.
+ */
+
+/**
+ * Trigger an event.
+ *
+ * @function trigger
+ * @memberof module:router#
+ * @param {string} event An event.
+ */
+
+/**
+ * A router.
+ *
+ * @class
+ * @mixes Espo.Events
+ */
+const Router = Backbone.Router.extend(/** @lends Router# */ {
 
     /**
-     * On route.
-     *
-     * @event Backbone.Router#route
-     * @param {string} name A route name.
-     * @param {any[]} args Arguments.
+     * @private
      */
+    routeList: [
+        {
+            route: "clearCache",
+            resolution: "clearCache"
+        },
+        {
+            route: ":controller/view/:id/:options",
+            resolution: "view"
+        },
+        {
+            route: ":controller/view/:id",
+            resolution: "view"
+        },
+        {
+            route: ":controller/edit/:id/:options",
+            resolution: "edit"
+        },
+        {
+            route: ":controller/edit/:id",
+            resolution: "edit"
+        },
+        {
+            route: ":controller/create",
+            resolution: "create"
+        },
+        {
+            route: ":controller/related/:id/:link",
+            resolution: "related"
+        },
+        {
+            route: ":controller/:action/:options",
+            resolution: "action",
+            order: 100
+        },
+        {
+            route: ":controller/:action",
+            resolution: "action",
+            order: 200
+        },
+        {
+            route: ":controller",
+            resolution: "defaultAction",
+            order: 300
+        },
+        {
+            route: "*actions",
+            resolution: "home",
+            order: 500
+        },
+    ],
 
     /**
-     * After dispatch.
-     *
-     * @event module:router#routed
-     * @param {{
-     *   controller: string,
-     *   action:string,
-     *   options: Object.<string,*>,
-     * }} data A route data.
+     * @private
      */
+    _bindRoutes: function() {},
 
     /**
-     * Subscribe.
-     *
-     * @function on
-     * @memberof module:router.Class#
-     * @param {string} event An event.
-     * @param {function(): void} callback A callback.
+     * @private
      */
+    setupRoutes: function () {
+        this.routeParams = {};
 
-    /**
-     * Subscribe once.
-     *
-     * @function once
-     * @memberof module:router.Class#
-     * @param {string} event An event.
-     * @param {function(): void} callback A callback.
-     */
+        if (this.options.routes) {
+            let routeList = [];
 
-    /**
-     * Unsubscribe.
-     *
-     * @function off
-     * @memberof module:router.Class#
-     * @param {string} event An event.
-     */
+            Object.keys(this.options.routes).forEach(route => {
+                let item = this.options.routes[route];
 
-    /**
-     * Trigger an event.
-     *
-     * @function trigger
-     * @memberof module:router.Class#
-     * @param {string} event An event.
-     */
-
-    /**
-     * A router.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:router
-     * @mixes Espo.Events
-     */
-    let Router = Backbone.Router.extend(/** @lends module:router.Class# */ {
-
-        /**
-         * @private
-         */
-        routeList: [
-            {
-                route: "clearCache",
-                resolution: "clearCache"
-            },
-            {
-                route: ":controller/view/:id/:options",
-                resolution: "view"
-            },
-            {
-                route: ":controller/view/:id",
-                resolution: "view"
-            },
-            {
-                route: ":controller/edit/:id/:options",
-                resolution: "edit"
-            },
-            {
-                route: ":controller/edit/:id",
-                resolution: "edit"
-            },
-            {
-                route: ":controller/create",
-                resolution: "create"
-            },
-            {
-                route: ":controller/related/:id/:link",
-                resolution: "related"
-            },
-            {
-                route: ":controller/:action/:options",
-                resolution: "action",
-                order: 100
-            },
-            {
-                route: ":controller/:action",
-                resolution: "action",
-                order: 200
-            },
-            {
-                route: ":controller",
-                resolution: "defaultAction",
-                order: 300
-            },
-            {
-                route: "*actions",
-                resolution: "home",
-                order: 500
-            },
-        ],
-
-        /**
-         * @private
-         */
-        _bindRoutes: function() {},
-
-        /**
-         * @private
-         */
-        setupRoutes: function () {
-            this.routeParams = {};
-
-            if (this.options.routes) {
-                let routeList = [];
-
-                Object.keys(this.options.routes).forEach(route => {
-                    let item = this.options.routes[route];
-
-                    routeList.push({
-                        route: route,
-                        resolution: item.resolution || 'defaultRoute',
-                        order: item.order || 0
-                    });
-
-                    this.routeParams[route] = item.params || {};
+                routeList.push({
+                    route: route,
+                    resolution: item.resolution || 'defaultRoute',
+                    order: item.order || 0
                 });
 
-                this.routeList = Espo.Utils.clone(this.routeList);
-
-                routeList.forEach(item => {
-                    this.routeList.push(item);
-                });
-
-                this.routeList = this.routeList.sort((v1, v2) => {
-                    return (v1.order || 0) - (v2.order || 0);
-                });
-            }
-
-            this.routeList.reverse().forEach(item => {
-                this.route(item.route, item.resolution);
-            });
-        },
-
-        /**
-         * @private
-         */
-        _last: null,
-
-        /**
-         * Whether a confirm-leave-out was set.
-         *
-         * @public
-         * @type {boolean}
-         */
-        confirmLeaveOut: false,
-
-        /**
-         * Whether back has been processed.
-         *
-         * @public
-         * @type {boolean}
-         */
-        backProcessed: false,
-
-        /**
-         * @type {string}
-         * @internal
-         */
-        confirmLeaveOutMessage: 'Are you sure?',
-
-        /**
-         * @type {string}
-         * @internal
-         */
-        confirmLeaveOutConfirmText: 'Yes',
-
-        /**
-         * @type {string}
-         * @internal
-         */
-        confirmLeaveOutCancelText: 'No',
-
-        /**
-         * @private
-         */
-        initialize: function (options) {
-            this.options = options || {};
-            this.setupRoutes();
-
-            this.history = [];
-
-            let hashHistory = [window.location.hash];
-
-            window.addEventListener('hashchange', () => {
-                let hash = window.location.hash
-
-                if (
-                    hashHistory.length > 1 &&
-                    hashHistory[hashHistory.length - 2] === hash
-                ) {
-                    hashHistory = hashHistory.slice(0, -1);
-
-                    this.backProcessed = true;
-                    setTimeout(() => this.backProcessed = false, 50);
-
-                    return;
-                }
-
-                hashHistory.push(hash);
+                this.routeParams[route] = item.params || {};
             });
 
-            this.on('route', () => {
-                this.history.push(Backbone.history.fragment);
+            this.routeList = Espo.Utils.clone(this.routeList);
+
+            routeList.forEach(item => {
+                this.routeList.push(item);
             });
 
-            window.addEventListener('beforeunload', (e) => {
-                e = e || window.event;
-
-                if (this.confirmLeaveOut) {
-                    e.preventDefault();
-
-                    e.returnValue = this.confirmLeaveOutMessage;
-
-                    return this.confirmLeaveOutMessage;
-                }
+            this.routeList = this.routeList.sort((v1, v2) => {
+                return (v1.order || 0) - (v2.order || 0);
             });
-        },
+        }
 
-        /**
-         * Get a current URL.
-         *
-         * @returns {string}
-         */
-        getCurrentUrl: function () {
-            return '#' + Backbone.history.fragment;
-        },
+        this.routeList.reverse().forEach(item => {
+            this.route(item.route, item.resolution);
+        });
+    },
 
-        /**
-         * @callback module:router.Class~checkConfirmLeaveOutCallback
-         */
+    /**
+     * @private
+     */
+    _last: null,
 
-        /**
-         * Process confirm-leave-out.
-         *
-         * @param {module:router.Class~checkConfirmLeaveOutCallback} callback Proceed if confirmed.
-         * @param {Object|null} [context] A context.
-         * @param {boolean} [navigateBack] To navigate back if not confirmed.
-         */
-        checkConfirmLeaveOut: function (callback, context, navigateBack) {
-            if (this.confirmLeaveOutDisplayed) {
-                this.navigateBack({trigger: false});
+    /**
+     * Whether a confirm-leave-out was set.
+     *
+     * @public
+     * @type {boolean}
+     */
+    confirmLeaveOut: false,
 
-                this.confirmLeaveOutCanceled = true;
+    /**
+     * Whether back has been processed.
+     *
+     * @public
+     * @type {boolean}
+     */
+    backProcessed: false,
+
+    /**
+     * @type {string}
+     * @internal
+     */
+    confirmLeaveOutMessage: 'Are you sure?',
+
+    /**
+     * @type {string}
+     * @internal
+     */
+    confirmLeaveOutConfirmText: 'Yes',
+
+    /**
+     * @type {string}
+     * @internal
+     */
+    confirmLeaveOutCancelText: 'No',
+
+    /**
+     * @private
+     */
+    initialize: function (options) {
+        this.options = options || {};
+        this.setupRoutes();
+
+        this.history = [];
+
+        let hashHistory = [window.location.hash];
+
+        window.addEventListener('hashchange', () => {
+            let hash = window.location.hash
+
+            if (
+                hashHistory.length > 1 &&
+                hashHistory[hashHistory.length - 2] === hash
+            ) {
+                hashHistory = hashHistory.slice(0, -1);
+
+                this.backProcessed = true;
+                setTimeout(() => this.backProcessed = false, 50);
 
                 return;
             }
 
-            context = context || this;
+            hashHistory.push(hash);
+        });
+
+        this.on('route', () => {
+            this.history.push(Backbone.history.fragment);
+        });
+
+        window.addEventListener('beforeunload', (e) => {
+            e = e || window.event;
 
             if (this.confirmLeaveOut) {
-                this.confirmLeaveOutDisplayed = true;
-                this.confirmLeaveOutCanceled = false;
+                e.preventDefault();
 
-                Espo.Ui.confirm(
-                    this.confirmLeaveOutMessage,
-                    {
-                        confirmText: this.confirmLeaveOutConfirmText,
-                        cancelText: this.confirmLeaveOutCancelText,
-                        backdrop: true,
-                        cancelCallback: () => {
-                            this.confirmLeaveOutDisplayed = false;
+                e.returnValue = this.confirmLeaveOutMessage;
 
-                            if (navigateBack) {
-                                this.navigateBack({trigger: false});
-                            }
-                        },
-                    },
-                    () => {
+                return this.confirmLeaveOutMessage;
+            }
+        });
+    },
+
+    /**
+     * Get a current URL.
+     *
+     * @returns {string}
+     */
+    getCurrentUrl: function () {
+        return '#' + Backbone.history.fragment;
+    },
+
+    /**
+     * @callback module:router~checkConfirmLeaveOutCallback
+     */
+
+    /**
+     * Process confirm-leave-out.
+     *
+     * @param {module:router~checkConfirmLeaveOutCallback} callback Proceed if confirmed.
+     * @param {Object|null} [context] A context.
+     * @param {boolean} [navigateBack] To navigate back if not confirmed.
+     */
+    checkConfirmLeaveOut: function (callback, context, navigateBack) {
+        if (this.confirmLeaveOutDisplayed) {
+            this.navigateBack({trigger: false});
+
+            this.confirmLeaveOutCanceled = true;
+
+            return;
+        }
+
+        context = context || this;
+
+        if (this.confirmLeaveOut) {
+            this.confirmLeaveOutDisplayed = true;
+            this.confirmLeaveOutCanceled = false;
+
+            Espo.Ui.confirm(
+                this.confirmLeaveOutMessage,
+                {
+                    confirmText: this.confirmLeaveOutConfirmText,
+                    cancelText: this.confirmLeaveOutCancelText,
+                    backdrop: true,
+                    cancelCallback: () => {
                         this.confirmLeaveOutDisplayed = false;
-                        this.confirmLeaveOut = false;
 
-                        if (!this.confirmLeaveOutCanceled) {
-                            callback.call(context);
+                        if (navigateBack) {
+                            this.navigateBack({trigger: false});
                         }
+                    },
+                },
+                () => {
+                    this.confirmLeaveOutDisplayed = false;
+                    this.confirmLeaveOut = false;
+
+                    if (!this.confirmLeaveOutCanceled) {
+                        callback.call(context);
                     }
-                );
-
-                return;
-            }
-
-            callback.call(context);
-        },
-
-        /**
-         * @private
-         */
-        route: function (route, name, callback) {
-            let routeOriginal = route;
-
-            if (!_.isRegExp(route)) {
-                route = this._routeToRegExp(route);
-            }
-
-            if (_.isFunction(name)) {
-                callback = name;
-                name = '';
-            }
-
-            if (!callback) {
-                callback = this['_' + name];
-            }
-
-            let router = this;
-
-            Backbone.history.route(route, function (fragment) {
-                let args = router._extractParameters(route, fragment);
-
-                let options = {};
-
-                if (name === 'defaultRoute') {
-                    let keyList = [];
-
-                    routeOriginal.split('/').forEach(key => {
-                        if (key && key.indexOf(':') === 0) {
-                            keyList.push(key.substr(1));
-                        }
-                    });
-
-                    keyList.forEach((key, i) => {
-                        options[key] = args[i];
-                    });
                 }
+            );
 
-                if (router.execute(callback, args, name, routeOriginal, options) !== false) {
-                    router.trigger.apply(router, ['route:' + name].concat(args));
+            return;
+        }
 
-                    router.trigger('route', name, args);
+        callback.call(context);
+    },
 
-                    Backbone.history.trigger('route', router, name, args);
-                }
-            });
+    /**
+     * @private
+     */
+    route: function (route, name/*, callback*/) {
+        let routeOriginal = route;
 
-            return this;
-        },
+        if (!_.isRegExp(route)) {
+            route = this._routeToRegExp(route);
+        }
 
-        /**
-         * @private
-         */
-        execute: function (callback, args, name, routeOriginal, options) {
-            this.checkConfirmLeaveOut(() => {
-                if (name === 'defaultRoute') {
-                    this._defaultRoute(this.routeParams[routeOriginal], options);
+        let callback;
 
-                    return;
-                }
+        // @todo Revise.
+        /*if (_.isFunction(name)) {
+            callback = name;
+            name = '';
+        }*/
 
-                Backbone.Router.prototype.execute.call(this, callback, args, name);
-            }, null, true);
-        },
+        /*if (!callback) {
+            callback = this['_' + name];
+        }*/
+        callback = this['_' + name];
 
-        /**
-         * Navigate.
-         *
-         * @param {string} fragment An URL fragment.
-         * @param {{trigger?: boolean, replace?: boolean}} [options] Options: trigger, replace.
-         */
-        navigate: function (fragment, options) {
-            this.history.push(fragment);
+        let router = this;
 
-            return Backbone.Router.prototype.navigate.call(this, fragment, options);
-        },
-
-        /**
-         * Navigate back.
-         *
-         * @param {Object} [options] Options: trigger, replace.
-         */
-        navigateBack: function (options) {
-            let url;
-
-            if (this.history.length > 1) {
-                url = this.history[this.history.length - 2];
-            }
-            else {
-                url = this.history[0];
-            }
-
-            this.navigate(url, options);
-        },
-
-        /**
-         * @private
-         */
-        _parseOptionsParams: function (string) {
-            if (!string) {
-                return {};
-            }
-
-            if (string.indexOf('&') === -1 && string.indexOf('=') === -1) {
-                return string;
-            }
+        Backbone.history.route(route, function (fragment) {
+            let args = router._extractParameters(route, fragment);
 
             let options = {};
 
-            if (typeof string !== 'undefined') {
-                string.split('&').forEach((item, i) => {
-                    let p = item.split('=');
+            if (name === 'defaultRoute') {
+                let keyList = [];
 
-                    options[p[0]] = true;
-
-                    if (p.length > 1) {
-                        options[p[0]] = p[1];
+                routeOriginal.split('/').forEach(key => {
+                    if (key && key.indexOf(':') === 0) {
+                        keyList.push(key.substr(1));
                     }
                 });
+
+                keyList.forEach((key, i) => {
+                    options[key] = args[i];
+                });
             }
 
-            return options;
-        },
+            // @todo Revise.
+            router.execute(callback, args, name, routeOriginal, options);
+            //if (router.execute(callback, args, name, routeOriginal, options) !== false) {
+                router.trigger.apply(router, ['route:' + name].concat(args));
+                router.trigger('route', name, args);
+                Backbone.history.trigger('route', router, name, args);
+            //}
+        });
 
-        /**
-         * @private
-         */
-        _defaultRoute: function (params, options) {
-            let controller = params.controller || options.controller;
-            let action = params.action || options.action;
+        return this;
+    },
 
-            this.dispatch(controller, action, options);
-        },
+    /**
+     * @private
+     */
+    execute: function (callback, args, name, routeOriginal, options) {
+        this.checkConfirmLeaveOut(() => {
+            if (name === 'defaultRoute') {
+                this._defaultRoute(this.routeParams[routeOriginal], options);
 
-        /**
-         * @private
-         */
-        _record: function (controller, action, id, options) {
-            options = this._parseOptionsParams(options);
+                return;
+            }
 
-            options.id = id;
+            Backbone.Router.prototype.execute.call(this, callback, args, name);
+        }, null, true);
+    },
 
-            this.dispatch(controller, action, options);
-        },
+    /**
+     * Navigate.
+     *
+     * @param {string} fragment An URL fragment.
+     * @param {{trigger?: boolean, replace?: boolean}} [options] Options: trigger, replace.
+     */
+    navigate: function (fragment, options) {
+        this.history.push(fragment);
 
-        /**
-         * @private
-         */
-        _view: function (controller, id, options) {
-            this._record(controller, 'view', id, options);
-        },
+        return Backbone.Router.prototype.navigate.call(this, fragment, options);
+    },
 
-        /**
-         * @private
-         */
-        _edit: function (controller, id, options) {
-            this._record(controller, 'edit', id, options);
-        },
+    /**
+     * Navigate back.
+     *
+     * @param {Object} [options] Options: trigger, replace.
+     */
+    navigateBack: function (options) {
+        let url;
 
-        /**
-         * @private
-         */
-        _related: function (controller, id, link, options) {
-            options = this._parseOptionsParams(options);
+        if (this.history.length > 1) {
+            url = this.history[this.history.length - 2];
+        }
+        else {
+            url = this.history[0];
+        }
 
-            options.id = id;
-            options.link = link;
+        this.navigate(url, options);
+    },
 
-            this.dispatch(controller, 'related', options);
-        },
+    /**
+     * @private
+     */
+    _parseOptionsParams: function (string) {
+        if (!string) {
+            return {};
+        }
 
-        /**
-         * @private
-         */
-        _create: function (controller, options) {
-            this._record(controller, 'create', null, options);
-        },
+        if (string.indexOf('&') === -1 && string.indexOf('=') === -1) {
+            return string;
+        }
 
-        /**
-         * @private
-         */
-        _action: function (controller, action, options) {
-            this.dispatch(controller, action, this._parseOptionsParams(options));
-        },
+        let options = {};
 
-        /**
-         * @private
-         */
-        _defaultAction: function (controller) {
-            this.dispatch(controller, null);
-        },
+        if (typeof string !== 'undefined') {
+            string.split('&').forEach(item => {
+                let p = item.split('=');
 
-        /**
-         * @private
-         */
-        _home: function () {
-            this.dispatch('Home', null);
-        },
+                options[p[0]] = true;
 
-        /**
-         * @private
-         */
-        _clearCache: function () {
-            this.dispatch(null, 'clearCache');
-        },
+                if (p.length > 1) {
+                    options[p[0]] = p[1];
+                }
+            });
+        }
 
-        /**
-         * Process `logout` route.
-         */
-        logout: function () {
-            this.dispatch(null, 'logout');
+        return options;
+    },
 
-            this.navigate('', {trigger: false});
-        },
+    /**
+     * @private
+     */
+    _defaultRoute: function (params, options) {
+        let controller = params.controller || options.controller;
+        let action = params.action || options.action;
 
-        /**
-         * Dispatch a controller action.
-         *
-         * @param {string} controller A controller.
-         * @param {string} action An action.
-         * @param {Object} [options] Options.
-         * @fires module:router#routed
-         */
-        dispatch: function (controller, action, options) {
-            let o = {
-                controller: controller,
-                action: action,
-                options: options,
-            };
+        this.dispatch(controller, action, options);
+    },
 
-            this._last = o;
+    /**
+     * @private
+     */
+    _record: function (controller, action, id, options) {
+        options = this._parseOptionsParams(options);
 
-            this.trigger('routed', o);
-        },
+        options.id = id;
 
-        /**
-         * Get the last route data.
-         *
-         * @returns {Object}
-         */
-        getLast: function () {
-            return this._last;
-        },
-    });
+        this.dispatch(controller, action, options);
+    },
 
-    return Router;
+    /**
+     * @private
+     */
+    _view: function (controller, id, options) {
+        this._record(controller, 'view', id, options);
+    },
+
+    /**
+     * @private
+     */
+    _edit: function (controller, id, options) {
+        this._record(controller, 'edit', id, options);
+    },
+
+    /**
+     * @private
+     */
+    _related: function (controller, id, link, options) {
+        options = this._parseOptionsParams(options);
+
+        options.id = id;
+        options.link = link;
+
+        this.dispatch(controller, 'related', options);
+    },
+
+    /**
+     * @private
+     */
+    _create: function (controller, options) {
+        this._record(controller, 'create', null, options);
+    },
+
+    /**
+     * @private
+     */
+    _action: function (controller, action, options) {
+        this.dispatch(controller, action, this._parseOptionsParams(options));
+    },
+
+    /**
+     * @private
+     */
+    _defaultAction: function (controller) {
+        this.dispatch(controller, null);
+    },
+
+    /**
+     * @private
+     */
+    _home: function () {
+        this.dispatch('Home', null);
+    },
+
+    /**
+     * @private
+     */
+    _clearCache: function () {
+        this.dispatch(null, 'clearCache');
+    },
+
+    /**
+     * Process `logout` route.
+     */
+    logout: function () {
+        this.dispatch(null, 'logout');
+
+        this.navigate('', {trigger: false});
+    },
+
+    /**
+     * Dispatch a controller action.
+     *
+     * @param {string} controller A controller.
+     * @param {string} action An action.
+     * @param {Object} [options] Options.
+     * @fires module:router#routed
+     */
+    dispatch: function (controller, action, options) {
+        let o = {
+            controller: controller,
+            action: action,
+            options: options,
+        };
+
+        this._last = o;
+
+        this.trigger('routed', o);
+    },
+
+    /**
+     * Get the last route data.
+     *
+     * @returns {Object}
+     */
+    getLast: function () {
+        return this._last;
+    },
 });
 
+export default Router;
+
 function isIOS9UIWebView() {
     let userAgent = window.navigator.userAgent;
 
diff --git a/client/src/search-manager.js b/client/src/search-manager.js
index 15bfa34230..4f2f64731b 100644
--- a/client/src/search-manager.js
+++ b/client/src/search-manager.js
@@ -26,477 +26,474 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('search-manager', [], function () {
+/** @module search-manager */
+
+/**
+ * Search data.
+ *
+ * @typedef {Object} module:search-manager~data
+ *
+ * @property {string} primary A primary filter.
+ * @property {Object.<string,boolean>} bool Bool filters.
+ * @property {{string: module:search-manager~advancedFilter}} advanced Advanced filters (field filters).
+ * Contains data needed for both the backend and frontend. Keys are field names.
+ */
+
+/**
+ * A where item. Sent to the backend.
+ *
+ * @typedef {Object} module:search-manager~whereItem
+ *
+ * @property {string} type A type.
+ * @property {string} [attribute] An attribute (field).
+ * @property {module:search-manager~whereItem[]|string|number|boolean|null} [value] A value.
+ * @property {boolean} [dateTime] Is a date-time item.
+ * @property {string} [timeZone] A time-zone (for date-time items).
+ */
+
+/**
+ * An advanced filter
+ *
+ * @typedef {Object} module:search-manager~advancedFilter
+ *
+ * @property {string} type A type. E.g. `equals`.
+ * @property {string} attribute An attribute.
+ * @property {*} [value] A value.
+ * @property {Object.<string,*>} [data] Additional data for UI.
+ */
+
+/**
+ * A search manager.
+ *
+ * @class
+ * @param {module:collection} collection A collection.
+ * @param {string|null} type A type. Used for a storage key.
+ * @param {module:storage|null} storage A storage.
+ * @param {module:date-time|null} dateTime A date-time util.
+ * @param {module:search-manager~data|null} [defaultData=null] Default search data.
+ * @param {boolean} [emptyOnReset=false] To empty on reset.
+ */
+const SearchManager = function (
+    collection,
+    type,
+    storage,
+    dateTime,
+    defaultData,
+    emptyOnReset
+) {
+    /**
+     * @private
+     * @type {module:collection}
+     */
+    this.collection = collection;
 
     /**
-     * Search data.
+     * An entity type.
      *
-     * @typedef {Object} module:search-manager~data
-     *
-     * @property {string} primary A primary filter.
-     * @property {Object.<string,boolean>} bool Bool filters.
-     * @property {{string: module:search-manager~advancedFilter}} advanced Advanced filters (field filters).
-     * Contains data needed for both the backend and frontend. Keys are field names.
+     * @public
+     * @type {string}
      */
+    this.scope = collection.name;
 
     /**
-     * A where item. Sent to the backend.
-     *
-     * @typedef {Object} module:search-manager~whereItem
-     *
-     * @property {string} type A type.
-     * @property {string} [attribute] An attribute (field).
-     * @property {module:search-manager~whereItem[]|string|number|boolean|null} [value] A value.
-     * @property {boolean} [dateTime] Is a date-time item.
-     * @property {string} [timeZone] A time-zone (for date-time items).
+     * @private
+     * @type {module:storage|null}
      */
+    this.storage = storage;
 
     /**
-     * An advanced filter
-     *
-     * @typedef {Object} module:search-manager~advancedFilter
-     *
-     * @property {string} type A type. E.g. `equals`.
-     * @property {string} attribute An attribute.
-     * @property {*} [value] A value.
-     * @property {Object.<string,*>} [data] Additional data for UI.
+     * @private
+     * @type {string}
      */
+    this.type = type || 'list';
 
     /**
-     * A search manager.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:search-manager
-     *
-     * @param {module:collection.Class} collection A collection.
-     * @param {string|null} type A type. Used for a storage key.
-     * @param {module:storage.Class|null} storage A storage.
-     * @param {module:date-time.Class|null} dateTime A date-time util.
-     * @param {module:search-manager~data|null} [defaultData=null] Default search data.
-     * @param {boolean} [emptyOnReset=false] To empty on reset.
+     * @private
+     * @type {module:date-time|null}
      */
-    let SearchManager = function (
-        collection,
-        type,
-        storage,
-        dateTime,
-        defaultData,
-        emptyOnReset
-    ) {
-        /**
-         * @private
-         * @type {module:collection.Class}
-         */
-        this.collection = collection;
+    this.dateTime = dateTime;
 
-        /**
-         * An entity type.
-         *
-         * @public
-         * @type {string}
-         */
-        this.scope = collection.name;
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.emptyOnReset = emptyOnReset;
 
-        /**
-         * @private
-         * @type {module:storage.Class|null}
-         */
-        this.storage = storage;
+    /**
+     * @private
+     * @type {Object}
+     */
+    this.emptyData = {
+        textFilter: '',
+        bool: {},
+        advanced: {},
+        primary: null,
+    };
 
-        /**
-         * @private
-         * @type {string}
-         */
-        this.type = type || 'list';
+    if (defaultData) {
+        this.defaultData = defaultData;
 
-        /**
-         * @private
-         * @type {module:date-time.Class|null}
-         */
-        this.dateTime = dateTime;
+        for (let p in this.emptyData) {
+            if (!(p in defaultData)) {
+                defaultData[p] = Espo.Utils.clone(this.emptyData[p]);
+            }
+        }
+    }
 
-        /**
-         * @private
-         * @type {boolean}
-         */
-        this.emptyOnReset = emptyOnReset;
+    this.data = Espo.Utils.clone(defaultData) || this.emptyData;
 
-        /**
-         * @private
-         * @type {Object}
-         */
-        this.emptyData = {
-            textFilter: '',
-            bool: {},
-            advanced: {},
-            primary: null,
-        };
+    this.sanitizeData();
+};
 
-        if (defaultData) {
-            this.defaultData = defaultData;
+_.extend(SearchManager.prototype, /** @lends SearchManager# */{
 
-            for (let p in this.emptyData) {
-                if (!(p in defaultData)) {
-                    defaultData[p] = Espo.Utils.clone(this.emptyData[p]);
+    /**
+     * @private
+     */
+    sanitizeData: function () {
+        if (!('advanced' in this.data)) {
+            this.data.advanced = {};
+        }
+
+        if (!('bool' in this.data)) {
+            this.data.bool = {};
+        }
+
+        if (!('textFilter' in this.data)) {
+            this.data.textFilter = '';
+        }
+    },
+
+    /**
+     * Get a where clause. The where clause to be sent to the backend.
+     *
+     * @returns {module:search-manager~whereItem[]}
+     */
+    getWhere: function () {
+        let where = [];
+
+        if (this.data.textFilter && this.data.textFilter !== '') {
+            where.push({
+                type: 'textFilter',
+                value: this.data.textFilter
+            });
+        }
+
+        if (this.data.bool) {
+            let o = {
+                type: 'bool',
+                value: [],
+            };
+
+            for (let name in this.data.bool) {
+                if (this.data.bool[name]) {
+                    o.value.push(name);
                 }
             }
+
+            if (o.value.length) {
+                where.push(o);
+            }
         }
 
-        this.data = Espo.Utils.clone(defaultData) || this.emptyData;
+        if (this.data.primary) {
+            let o = {
+                type: 'primary',
+                value: this.data.primary,
+            };
 
-        this.sanitizeData();
-    };
-
-    _.extend(SearchManager.prototype, /** @lends module:search-manager.Class# */{
-
-        /**
-         * @private
-         */
-        sanitizeData: function () {
-            if (!('advanced' in this.data)) {
-                this.data.advanced = {};
+            if (o.value.length) {
+                where.push(o);
             }
+        }
 
-            if (!('bool' in this.data)) {
-                this.data.bool = {};
-            }
+        if (this.data.advanced) {
+            for (let name in this.data.advanced) {
+                let defs = this.data.advanced[name];
 
-            if (!('textFilter' in this.data)) {
-                this.data.textFilter = '';
-            }
-        },
-
-        /**
-         * Get a where clause. The where clause to be sent to the backend.
-         *
-         * @returns {module:search-manager~whereItem[]}
-         */
-        getWhere: function () {
-            let where = [];
-
-            if (this.data.textFilter && this.data.textFilter !== '') {
-                where.push({
-                    type: 'textFilter',
-                    value: this.data.textFilter
-                });
-            }
-
-            if (this.data.bool) {
-                let o = {
-                    type: 'bool',
-                    value: [],
-                };
-
-                for (let name in this.data.bool) {
-                    if (this.data.bool[name]) {
-                        o.value.push(name);
-                    }
+                if (!defs) {
+                    continue;
                 }
 
-                if (o.value.length) {
-                    where.push(o);
-                }
+                let part = this.getWherePart(name, defs);
+
+                where.push(part);
             }
+        }
 
-            if (this.data.primary) {
-                let o = {
-                    type: 'primary',
-                    value: this.data.primary,
-                };
+        return where;
+    },
 
-                if (o.value.length) {
-                    where.push(o);
-                }
+    /**
+     * @private
+     */
+    getWherePart: function (name, defs) {
+        var attribute = name;
+
+        if ('where' in defs) {
+            return defs.where;
+        }
+
+        let type = defs.type;
+
+        if (type === 'or' || type === 'and') {
+            let a = [];
+
+            var value = defs.value || {};
+
+            for (let n in value) {
+                a.push(this.getWherePart(n, value[n]));
             }
 
-            if (this.data.advanced) {
-                for (let name in this.data.advanced) {
-                    let defs = this.data.advanced[name];
-
-                    if (!defs) {
-                        continue;
-                    }
-
-                    let part = this.getWherePart(name, defs);
-
-                    where.push(part);
-                }
-            }
-
-            return where;
-        },
-
-        /**
-         * @private
-         */
-        getWherePart: function (name, defs) {
-            var attribute = name;
-
-            if ('where' in defs) {
-                return defs.where;
-            }
-
-            let type = defs.type;
-
-            if (type === 'or' || type === 'and') {
-                let a = [];
-
-                var value = defs.value || {};
-
-                for (let n in value) {
-                    a.push(this.getWherePart(n, value[n]));
-                }
-
-                return {
-                    type: type,
-                    value: a
-                };
-            }
-
-            if ('field' in defs) { // for backward compatibility
-                attribute = defs.field;
-            }
-
-            if ('attribute' in defs) {
-                attribute = defs.attribute;
-            }
-
-            if (defs.dateTime) {
-                return {
-                    type: type,
-                    attribute: attribute,
-                    value: defs.value,
-                    dateTime: true,
-                    timeZone: this.dateTime.timeZone || 'UTC',
-                };
-            }
-
-            value = defs.value;
-
+            return {
+                type: type,
+                value: a
+            };
+        }
+
+        if ('field' in defs) { // for backward compatibility
+            attribute = defs.field;
+        }
+
+        if ('attribute' in defs) {
+            attribute = defs.attribute;
+        }
+
+        if (defs.dateTime) {
             return {
                 type: type,
                 attribute: attribute,
-                value: value
+                value: defs.value,
+                dateTime: true,
+                timeZone: this.dateTime.timeZone || 'UTC',
             };
-        },
+        }
 
-        /**
-         * Load stored data.
-         *
-         * @returns {module:search-manager.Class}
-         */
-        loadStored: function () {
-            this.data =
-                this.storage.get(this.type + 'Search', this.scope) ||
-                Espo.Utils.clone(this.defaultData) ||
-                Espo.Utils.clone(this.emptyData);
+        value = defs.value;
 
-            this.sanitizeData();
+        return {
+            type: type,
+            attribute: attribute,
+            value: value
+        };
+    },
 
-            return this;
-        },
+    /**
+     * Load stored data.
+     *
+     * @returns {module:search-manager}
+     */
+    loadStored: function () {
+        this.data =
+            this.storage.get(this.type + 'Search', this.scope) ||
+            Espo.Utils.clone(this.defaultData) ||
+            Espo.Utils.clone(this.emptyData);
 
-        /**
-         * Get data.
-         *
-         * @returns {module:search-manager~data}
-         */
-        get: function () {
-            return this.data;
-        },
+        this.sanitizeData();
 
-        /**
-         * Set advanced filters.
-         *
-         * @param {{string: module:search-manager~advancedFilter}} advanced Advanced filters.
-         *   Pairs of field => advancedFilter.
-         */
-        setAdvanced: function (advanced) {
-            this.data = Espo.Utils.clone(this.data);
+        return this;
+    },
 
-            this.data.advanced = advanced;
-        },
+    /**
+     * Get data.
+     *
+     * @returns {module:search-manager~data}
+     */
+    get: function () {
+        return this.data;
+    },
 
-        /**
-         * Set bool filters.
-         *
-         * @param {Object.<string, boolean>} bool Bool filters.
-         */
-        setBool: function (bool) {
-            this.data = Espo.Utils.clone(this.data);
+    /**
+     * Set advanced filters.
+     *
+     * @param {{string: module:search-manager~advancedFilter}} advanced Advanced filters.
+     *   Pairs of field => advancedFilter.
+     */
+    setAdvanced: function (advanced) {
+        this.data = Espo.Utils.clone(this.data);
 
-            this.data.bool = bool;
-        },
+        this.data.advanced = advanced;
+    },
 
-        /**
-         * Set a primary filter.
-         *
-         * @param {string} primary A filter.
-         */
-        setPrimary: function (primary) {
-            this.data = Espo.Utils.clone(this.data);
+    /**
+     * Set bool filters.
+     *
+     * @param {Object.<string, boolean>} bool Bool filters.
+     */
+    setBool: function (bool) {
+        this.data = Espo.Utils.clone(this.data);
 
-            this.data.primary = primary;
-        },
+        this.data.bool = bool;
+    },
 
-        /**
-         * Set data.
-         *
-         * @param {module:search-manager~data} data Data.
-         */
-        set: function (data) {
-            this.data = data;
+    /**
+     * Set a primary filter.
+     *
+     * @param {string} primary A filter.
+     */
+    setPrimary: function (primary) {
+        this.data = Espo.Utils.clone(this.data);
 
-            if (this.storage) {
-                data = Espo.Utils.clone(data);
-                delete data['textFilter'];
+        this.data.primary = primary;
+    },
 
-                this.storage.set(this.type + 'Search', this.scope, data);
-            }
-        },
+    /**
+     * Set data.
+     *
+     * @param {module:search-manager~data} data Data.
+     */
+    set: function (data) {
+        this.data = data;
 
-        /**
-         * Empty data.
-         */
-        empty: function () {
-            this.data = Espo.Utils.clone(this.emptyData);
+        if (this.storage) {
+            data = Espo.Utils.clone(data);
+            delete data['textFilter'];
 
-            if (this.storage) {
-                this.storage.clear(this.type + 'Search', this.scope);
-            }
-        },
+            this.storage.set(this.type + 'Search', this.scope, data);
+        }
+    },
 
-        /**
-         * Reset.
-         */
-        reset: function () {
-            if (this.emptyOnReset) {
-                this.empty();
+    /**
+     * Empty data.
+     */
+    empty: function () {
+        this.data = Espo.Utils.clone(this.emptyData);
 
-                return;
-            }
+        if (this.storage) {
+            this.storage.clear(this.type + 'Search', this.scope);
+        }
+    },
 
-            this.data = Espo.Utils.clone(this.defaultData) || Espo.Utils.clone(this.emptyData);
+    /**
+     * Reset.
+     */
+    reset: function () {
+        if (this.emptyOnReset) {
+            this.empty();
 
-            if (this.storage) {
-                this.storage.clear(this.type + 'Search', this.scope);
-            }
-        },
+            return;
+        }
 
-        /**
-         * @private
-         */
-        getDateTimeWhere: function (type, field, value) {
-            var where = {
-                field: field
-            };
+        this.data = Espo.Utils.clone(this.defaultData) || Espo.Utils.clone(this.emptyData);
 
-            if (!value && ~['on', 'before', 'after'].indexOf(type)) {
-                return null;
-            }
+        if (this.storage) {
+            this.storage.clear(this.type + 'Search', this.scope);
+        }
+    },
 
-            let start, from, to;
+    /**
+     * @private
+     * @todo Revise.
+     */
+    getDateTimeWhere: function (type, field, value) {
+        var where = {
+            field: field
+        };
 
-            switch (type) {
-                case 'today':
-                    where.type = 'between';
+        if (!value && ~['on', 'before', 'after'].indexOf(type)) {
+            return null;
+        }
 
-                    start = this.dateTime.getNowMoment().startOf('day').utc();
+        let start, from, to;
 
-                    from = start.format(this.dateTime.internalDateTimeFormat);
-                    to = start.add(1, 'days').format(this.dateTime.internalDateTimeFormat);
+        switch (type) {
+            case 'today':
+                where.type = 'between';
 
-                    where.value = [from, to];
+                start = this.dateTime.getNowMoment().startOf('day').utc();
 
-                    break;
+                from = start.format(this.dateTime.internalDateTimeFormat);
+                to = start.add(1, 'days').format(this.dateTime.internalDateTimeFormat);
 
-                case 'past':
-                    where.type = 'before';
+                where.value = [from, to];
 
-                    where.value = this.dateTime.getNowMoment().utc().format(this.dateTime.internalDateTimeFormat);
+                break;
 
-                    break;
+            case 'past':
+                where.type = 'before';
 
-                case 'future':
-                    where.type = 'after';
+                where.value = this.dateTime.getNowMoment().utc().format(this.dateTime.internalDateTimeFormat);
 
-                    where.value = this.dateTime.getNowMoment().utc().format(this.dateTime.internalDateTimeFormat);
+                break;
 
-                    break;
+            case 'future':
+                where.type = 'after';
 
-                case 'on':
-                    where.type = 'between';
+                where.value = this.dateTime.getNowMoment().utc().format(this.dateTime.internalDateTimeFormat);
 
-                    start = moment(value, this.dateTime.internalDateFormat, this.timeZone).utc();
+                break;
 
-                    from = start.format(this.dateTime.internalDateTimeFormat);
-                    to = start.add(1, 'days').format(this.dateTime.internalDateTimeFormat);
+            case 'on':
+                where.type = 'between';
 
-                    where.value = [from, to];
+                start = moment(value, this.dateTime.internalDateFormat, this.timeZone).utc();
 
-                    break;
+                from = start.format(this.dateTime.internalDateTimeFormat);
+                to = start.add(1, 'days').format(this.dateTime.internalDateTimeFormat);
 
-                case 'before':
-                    where.type = 'before';
-                    where.value =
+                where.value = [from, to];
+
+                break;
+
+            case 'before':
+                where.type = 'before';
+                where.value =
+                    moment(
+                        value,
+                        this.dateTime.internalDateFormat,
+                        this.timeZone
+                    )
+                    .utc()
+                    .format(this.dateTime.internalDateTimeFormat );
+
+                break;
+
+            case 'after':
+                where.type = 'after';
+                where.value =
+                    moment(
+                        value,
+                        this.dateTime.internalDateFormat,
+                        this.timeZone
+                    )
+                    .utc()
+                    .format(this.dateTime.internalDateTimeFormat);
+
+                break;
+
+            case 'between':
+                where.type = 'between';
+
+                if (value[0] && value[1]) {
+                    let from =
                         moment(
-                            value,
-                            this.dateTime.internalDateFormat,
-                            this.timeZone
-                        )
-                        .utc()
-                        .format(this.dateTime.internalDateTimeFormat );
-
-                    break;
-
-                case 'after':
-                    where.type = 'after';
-                    where.value =
-                        moment(
-                            value,
+                            value[0],
                             this.dateTime.internalDateFormat,
                             this.timeZone
                         )
                         .utc()
                         .format(this.dateTime.internalDateTimeFormat);
 
-                    break;
+                    let to =
+                        moment(
+                            value[1],
+                            this.dateTime.internalDateFormat,
+                            this.timeZone
+                        )
+                        .utc()
+                        .format(this.dateTime.internalDateTimeFormat);
 
-                case 'between':
-                    where.type = 'between';
+                    where.value = [from, to];
+                }
 
-                    if (value[0] && value[1]) {
-                        let from =
-                            moment(
-                                value[0],
-                                this.dateTime.internalDateFormat,
-                                this.timeZone
-                            )
-                            .utc()
-                            .format(this.dateTime.internalDateTimeFormat);
+                break;
 
-                        let to =
-                            moment(
-                                value[1],
-                                this.dateTime.internalDateFormat,
-                                this.timeZone
-                            )
-                            .utc()
-                            .format(this.dateTime.internalDateTimeFormat);
+            default:
+                where.type = type;
+        }
 
-                        where.value = [from, to];
-                    }
-
-                    break;
-
-                default:
-                    where.type = type;
-            }
-
-            return where;
-        },
-    });
-
-    return SearchManager;
+        return where;
+    },
 });
+
+export default SearchManager;
diff --git a/client/src/session-storage.js b/client/src/session-storage.js
index 5d52439994..06ab92e9cd 100644
--- a/client/src/session-storage.js
+++ b/client/src/session-storage.js
@@ -26,110 +26,108 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('session-storage', ['storage'], function (Dep) {
+/** @module session-storage */
+
+import Dep from 'storage';
+
+/**
+ * A session storage. Cleared when a page session ends.
+ *
+ * @class
+ * @name Class
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    /** @inheritDoc */
+    storageObject: sessionStorage,
 
     /**
-     * A session storage. Cleared when a page session ends.
+     * Get a value.
      *
-     * @class
-     * @name Class
-     * @memberOf module:session-storage
+     * @param {string} name A name.
+     * @returns {*} Null if not set.
      */
-    return Dep.extend(/** @lends module:session-storage.Class# */{
-
-        /**
-         * @private
-         */
-        storageObject: sessionStorage,
-
-        /**
-         * Get a value.
-         *
-         * @param {string} name A name.
-         * @returns {*} Null if not set.
-         */
-        get: function (name) {
-            try {
-                var stored = this.storageObject.getItem(name);
-            }
-            catch (error) {
-                console.error(error);
-
-                return null;
-            }
-
-            if (stored) {
-                let result = stored;
-
-                if (stored.length > 9 && stored.substr(0, 9) === '__JSON__:') {
-                    let jsonString = stored.substr(9);
-
-                    try {
-                        result = JSON.parse(jsonString);
-                    }
-                    catch (error) {
-                        result = stored;
-                    }
-                }
-
-                return result;
-            }
+    get: function (name) {
+        try {
+            var stored = this.storageObject.getItem(name);
+        }
+        catch (error) {
+            console.error(error);
 
             return null;
-        },
+        }
 
-        /**
-         * Set (store) a value.
-         *
-         * @param {string} name A name.
-         * @param {*} value A value.
-         */
-        set: function (name, value) {
-            if (value === null) {
-                this.clear(name);
+        if (stored) {
+            let result = stored;
 
-                return;
-            }
+            if (stored.length > 9 && stored.substr(0, 9) === '__JSON__:') {
+                let jsonString = stored.substr(9);
 
-            if (
-                value instanceof Object ||
-                Array.isArray(value) ||
-                value === true ||
-                value === false ||
-                typeof value === 'number'
-            ) {
-                value = '__JSON__:' + JSON.stringify(value);
-            }
-
-            try {
-                this.storageObject.setItem(name, value);
-            }
-            catch (error) {
-                console.error(error);
-            }
-        },
-
-        /**
-         * Has a value.
-         *
-         * @param {string} name A name.
-         * @returns {boolean}
-         */
-        has: function (name) {
-            return this.storageObject.getItem(name) !== null;
-        },
-
-        /**
-         * Clear a value.
-         *
-         * @param {string} name A name.
-         */
-        clear: function (name) {
-            for (let i in this.storageObject) {
-                if (i === name) {
-                    delete this.storageObject[i];
+                try {
+                    result = JSON.parse(jsonString);
+                }
+                catch (error) {
+                    result = stored;
                 }
             }
-        },
-    });
+
+            return result;
+        }
+
+        return null;
+    },
+
+    /**
+     * Set (store) a value.
+     *
+     * @param {string} name A name.
+     * @param {*} value A value.
+     */
+    set: function (name, value) {
+        if (value === null) {
+            this.clear(name);
+
+            return;
+        }
+
+        if (
+            value instanceof Object ||
+            Array.isArray(value) ||
+            value === true ||
+            value === false ||
+            typeof value === 'number'
+        ) {
+            value = '__JSON__:' + JSON.stringify(value);
+        }
+
+        try {
+            this.storageObject.setItem(name, value);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    },
+
+    /**
+     * Has a value.
+     *
+     * @param {string} name A name.
+     * @returns {boolean}
+     */
+    has: function (name) {
+        return this.storageObject.getItem(name) !== null;
+    },
+
+    /**
+     * Clear a value.
+     *
+     * @param {string} name A name.
+     */
+    clear: function (name) {
+        for (let i in this.storageObject) {
+            if (i === name) {
+                delete this.storageObject[i];
+            }
+        }
+    },
 });
diff --git a/client/src/storage.js b/client/src/storage.js
index 18cb9ee889..ef21aafcdf 100644
--- a/client/src/storage.js
+++ b/client/src/storage.js
@@ -26,194 +26,189 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('storage', [], function () {
+/** @module storage */
+
+import Bull from 'lib!bullbone';
+
+/**
+ * A storage. Data is saved across browser sessions, has no expiration time.
+ *
+ * @class
+ */
+const Storage = function () {};
+
+_.extend(Storage.prototype, /** @lends Storage# */{
+
+    /** @protected */
+    prefix: 'espo',
+
+    /** @protected */
+    storageObject: localStorage,
 
     /**
-     * A storage. Data is saved across browser sessions, has no expiration time.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:storage
+     * @private
+     * @param {string} type
+     * @returns {string}
      */
-    let Storage = function () {};
+    composeFullPrefix: function (type) {
+        return this.prefix + '-' + type;
+    },
 
-    _.extend(Storage.prototype, /** @lends module:storage.Class# */{
+    /**
+     * @private
+     * @param {string} type
+     * @param {string} name
+     * @returns {string}
+     */
+    composeKey: function (type, name) {
+        return this.composeFullPrefix(type) + '-' + name;
+    },
 
-        /**
-         * @protected
-         */
-        prefix: 'espo',
+    /**
+     * @private
+     * @param {string} type
+     */
+    checkType: function (type) {
+        if (
+            typeof type === 'undefined' &&
+            toString.call(type) !== '[object String]' || type === 'cache'
+        ) {
+            throw new TypeError("Bad type \"" + type + "\" passed to Espo.Storage.");
+        }
+    },
 
-        /**
-         * @protected
-         */
-        storageObject: localStorage,
+    /**
+     * Has a value.
+     *
+     * @param {string} type A type (category).
+     * @param {string} name A name.
+     * @returns {boolean}
+     */
+    has: function (type, name) {
+        this.checkType(type);
 
-        /**
-         * @private
-         * @param {string} type
-         * @returns {string}
-         */
-        composeFullPrefix: function (type) {
-            return this.prefix + '-' + type;
-        },
+        let key = this.composeKey(type, name);
 
-        /**
-         * @private
-         * @param {string} type
-         * @param {string} name
-         * @returns {string}
-         */
-        composeKey: function (type, name) {
-            return this.composeFullPrefix(type) + '-' + name;
-        },
+        return this.storageObject.getItem(key) !== null;
+    },
 
-        /**
-         * @private
-         * @param {string} type
-         */
-        checkType: function (type) {
-            if (
-                typeof type === 'undefined' &&
-                toString.call(type) !== '[object String]' || type === 'cache'
-            ) {
-                throw new TypeError("Bad type \"" + type + "\" passed to Espo.Storage.");
-            }
-        },
+    /**
+     * Get a value.
+     *
+     * @param {string} type A type (category).
+     * @param {string} name A name.
+     * @returns {*} Null if not stored.
+     */
+    get: function (type, name) {
+        this.checkType(type);
 
-        /**
-         * Has a value.
-         *
-         * @param {string} type A type (category).
-         * @param {string} name A name.
-         * @returns {boolean}
-         */
-        has: function (type, name) {
-            this.checkType(type);
+        let key = this.composeKey(type, name);
 
-            let key = this.composeKey(type, name);
-
-            return this.storageObject.getItem(key) !== null;
-        },
-
-        /**
-         * Get a value.
-         *
-         * @param {string} type A type (category).
-         * @param {string} name A name.
-         * @returns {*} Null if not stored.
-         */
-        get: function (type, name) {
-            this.checkType(type);
-
-            let key = this.composeKey(type, name);
-
-            try {
-                var stored = this.storageObject.getItem(key);
-            }
-            catch (error) {
-                console.error(error);
-
-                return null;
-            }
-
-            if (stored) {
-                let result = stored;
-
-                if (stored.length > 9 && stored.substr(0, 9) === '__JSON__:') {
-                    let jsonString = stored.substr(9);
-
-                    try {
-                        result = JSON.parse(jsonString);
-                    }
-                    catch (error) {
-                        result = stored;
-                    }
-                }
-                else if (stored[0] === "{" || stored[0] === "[") { // for backward compatibility
-                    try {
-                        result = JSON.parse(stored);
-                    }
-                    catch (error) {
-                        result = stored;
-                    }
-                }
-
-                return result;
-            }
+        try {
+            var stored = this.storageObject.getItem(key);
+        }
+        catch (error) {
+            console.error(error);
 
             return null;
-        },
+        }
 
-        /**
-         * Set (store) a value.
-         *
-         * @param {string} type A type (category).
-         * @param {string} name A name.
-         * @param {*} value A value.
-         */
-        set: function (type, name, value) {
-            this.checkType(type);
+        if (stored) {
+            let result = stored;
 
-            if (value === null) {
-                this.clear(type, name);
+            if (stored.length > 9 && stored.substr(0, 9) === '__JSON__:') {
+                let jsonString = stored.substr(9);
 
-                return;
-            }
-
-            let key = this.composeKey(type, name);
-
-            if (
-                value instanceof Object ||
-                Array.isArray(value) ||
-                value === true ||
-                value === false ||
-                typeof value === 'number'
-            ) {
-                value = '__JSON__:' + JSON.stringify(value);
-            }
-
-            try {
-                this.storageObject.setItem(key, value);
-            }
-            catch (error) {
-                console.error(error);
-                return null;
-            }
-        },
-
-        /**
-         * Clear a value.
-         *
-         * @param {string} type A type (category).
-         * @param {string} name A name.
-         */
-        clear: function (type, name) {
-            let reText;
-
-            if (typeof type !== 'undefined') {
-                if (typeof name === 'undefined') {
-                    reText = '^' + this.composeFullPrefix(type);
+                try {
+                    result = JSON.parse(jsonString);
                 }
-                else {
-                    reText = '^' + this.composeKey(type, name);
+                catch (error) {
+                    result = stored;
                 }
             }
+            else if (stored[0] === "{" || stored[0] === "[") { // for backward compatibility
+                try {
+                    result = JSON.parse(stored);
+                }
+                catch (error) {
+                    result = stored;
+                }
+            }
+
+            return result;
+        }
+
+        return null;
+    },
+
+    /**
+     * Set (store) a value.
+     *
+     * @param {string} type A type (category).
+     * @param {string} name A name.
+     * @param {*} value A value.
+     */
+    set: function (type, name, value) {
+        this.checkType(type);
+
+        if (value === null) {
+            this.clear(type, name);
+
+            return;
+        }
+
+        let key = this.composeKey(type, name);
+
+        if (
+            value instanceof Object ||
+            Array.isArray(value) ||
+            value === true ||
+            value === false ||
+            typeof value === 'number'
+        ) {
+            value = '__JSON__:' + JSON.stringify(value);
+        }
+
+        try {
+            this.storageObject.setItem(key, value);
+        }
+        catch (error) {
+            console.error(error);
+            return null;
+        }
+    },
+
+    /**
+     * Clear a value.
+     *
+     * @param {string} type A type (category).
+     * @param {string} name A name.
+     */
+    clear: function (type, name) {
+        let reText;
+
+        if (typeof type !== 'undefined') {
+            if (typeof name === 'undefined') {
+                reText = '^' + this.composeFullPrefix(type);
+            }
             else {
-                reText = '^' + this.prefix + '-';
-            }
-
-            let re = new RegExp(reText);
-
-            for (let i in this.storageObject) {
-                if (re.test(i)) {
-                    delete this.storageObject[i];
-                }
+                reText = '^' + this.composeKey(type, name);
             }
         }
-    });
+        else {
+            reText = '^' + this.prefix + '-';
+        }
 
-    Storage.extend = Bull.View.extend;
+        let re = new RegExp(reText);
 
-    return Storage;
+        for (let i in this.storageObject) {
+            if (re.test(i)) {
+                delete this.storageObject[i];
+            }
+        }
+    }
 });
+
+Storage.extend = Bull.View.extend;
+
+export default Storage;
diff --git a/client/src/theme-manager.js b/client/src/theme-manager.js
index e2844df8c4..48a893d69c 100644
--- a/client/src/theme-manager.js
+++ b/client/src/theme-manager.js
@@ -26,271 +26,267 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('theme-manager', [], function () {
+/** @module theme-manager */
+
+/**
+ * A theme manager.
+ *
+ * @class
+ * @param {module:models/settings} config A config.
+ * @param {module:models/preferences} preferences Preferences.
+ * @param {module:metadata} metadata Metadata.
+ * @param {?string} [name] A name. If not set, then will be obtained from config and preferences.
+ */
+const ThemeManager = function (config, preferences, metadata, name) {
+    /**
+     * @private
+     * @type {module:models/settings}
+     */
+    this.config = config;
+    /**
+     * @private
+     * @type {module:models/preferences}
+     */
+    this.preferences = preferences;
+    /**
+     * @private
+     * @type {module:metadata}
+     */
+    this.metadata = metadata;
 
     /**
-     * A theme manager.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:theme-manager
-     *
-     * @param {module:models/settings.Class} config A config.
-     * @param {module:models/preferences.Class} preferences Preferences.
-     * @param {module:metadata.Class} metadata Metadata.
-     * @param {?string} [name] A name. If not set, then will be obtained from config and preferences.
+     * @private
+     * @type {?string}
      */
-    let ThemeManager = function (config, preferences, metadata, name) {
-        /**
-         * @private
-         * @type {module:models/settings.Class}
-         */
-        this.config = config;
-        /**
-         * @private
-         * @type {module:models/preferences.Class}
-         */
-        this.preferences = preferences;
-        /**
-         * @private
-         * @type {module:metadata.Class}
-         */
-        this.metadata = metadata;
+    this.name = name || null;
+};
 
-        /**
-         * @private
-         * @type {?string}
-         */
-        this.name = name || null;
-    };
+_.extend(ThemeManager.prototype, /** ThemeManager# */{
 
-    _.extend(ThemeManager.prototype, /** module:theme-manager.Class# */{
+    /**
+     * @private
+     */
+    defaultParams: {
+        screenWidthXs: 768,
+        dashboardCellHeight: 155,
+        dashboardCellMargin: 19,
+    },
 
-        /**
-         * @private
-         */
-        defaultParams: {
-            screenWidthXs: 768,
-            dashboardCellHeight: 155,
-            dashboardCellMargin: 19,
-        },
-
-        /**
-         * Get a theme name for the current user.
-         *
-         * @returns {string}
-         */
-        getName: function () {
-            if (this.name) {
-                return this.name;
-            }
-
-            if (!this.config.get('userThemesDisabled')) {
-                let name = this.preferences.get('theme');
-
-                if (name && name !== '') {
-                    return name;
-                }
-            }
-
-            return this.config.get('theme');
-        },
-
-        /**
-         * Get a theme name currently applied to the DOM.
-         *
-         * @returns {string|null} Null if not applied.
-         */
-        getAppliedName: function () {
-            let name = window.getComputedStyle(document.body).getPropertyValue('--theme-name');
-
-            if (!name) {
-                return null;
-            }
-
-            return name.trim();
-        },
-
-        /**
-         * Whether a current theme is applied to the DOM.
-         *
-         * @returns {boolean}
-         */
-        isApplied: function () {
-            let appliedName = this.getAppliedName();
-
-            if (!appliedName) {
-                return true;
-            }
-
-            return this.getName() === appliedName;
-        },
-
-        /**
-         * Get a stylesheet path for a current theme.
-         *
-         * @returns {string}
-         */
-        getStylesheet: function () {
-            let link = this.getParam('stylesheet') || 'client/css/espo/espo.css';
-
-            if (this.config.get('cacheTimestamp')) {
-                link += '?r=' + this.config.get('cacheTimestamp').toString();
-            }
-
-            return link;
-        },
-
-        /**
-         * Get an iframe stylesheet path for a current theme.
-         *
-         * @returns {string}
-         */
-        getIframeStylesheet: function () {
-            let link = this.getParam('stylesheetIframe') || 'client/css/espo/espo-iframe.css';
-
-            if (this.config.get('cacheTimestamp')) {
-                link += '?r=' + this.config.get('cacheTimestamp').toString();
-            }
-
-            return link;
-        },
-
-        /**
-         * Get an iframe-fallback stylesheet path for a current theme.
-         *
-         * @returns {string}
-         */
-        getIframeFallbackStylesheet: function () {
-            let link = this.getParam('stylesheetIframeFallback') || 'client/css/espo/espo-iframe.css'
-
-            if (this.config.get('cacheTimestamp')) {
-                link += '?r=' + this.config.get('cacheTimestamp').toString();
-            }
-
-            return link;
-        },
-
-        /**
-         * Get a theme parameter.
-         *
-         * @param {string} name A parameter name.
-         * @returns {*} Null if not set.
-         */
-        getParam: function (name) {
-            if (name !== 'params' && name !== 'mappedParams') {
-                let varValue = this.getVarParam(name);
-
-                if (varValue !== null) {
-                    return varValue;
-                }
-
-                let mappedValue = this.getMappedParam(name);
-
-                if (mappedValue !== null) {
-                    return mappedValue;
-                }
-            }
-
-            let value = this.metadata.get(['themes', this.getName(), name]);
-
-            if (value !== null) {
-                return value;
-            }
-
-            value = this.metadata.get(['themes', this.getParentName(), name]);
-
-            if (value !== null) {
-                return value;
-            }
-
-            return this.defaultParams[name] || null;
-        },
-
-        /**
-         * @private
-         * @param {string} name
-         * @returns {*}
-         */
-        getVarParam: function (name) {
-            let params = this.getParam('params') || {};
-
-            if (!(name in params)) {
-                return null;
-            }
-
-            let values = null;
-
-            if (!this.config.get('userThemesDisabled') && this.preferences.get('theme')) {
-                values = this.preferences.get('themeParams');
-            }
-
-            if (!values) {
-                values = this.config.get('themeParams');
-            }
-
-            if (values && (name in values)) {
-                return values[name];
-            }
-
-            if ('default' in params[name]) {
-                return params[name].default;
-            }
-
-            return null;
-        },
-
-        /**
-         * @private
-         * @param {string} name
-         * @returns {*}
-         */
-        getMappedParam: function (name) {
-            let mappedParams = this.getParam('mappedParams') || {};
-
-            if (!(name in mappedParams)) {
-                return null;
-            }
-
-            let mapped = mappedParams[name].param;
-            let valueMap = mappedParams[name].valueMap;
-
-            if (mapped && valueMap) {
-                let key = this.getParam(mapped);
-
-                return valueMap[key];
-            }
-
-            return null;
-        },
-
-        /**
-         * @private
-         * @returns {string}
-         */
-        getParentName: function () {
-            return this.metadata.get(['themes', this.getName(), 'parent']) || 'Espo';
-        },
-
-        /**
-         * Whether a current theme is different from a system default theme.
-         *
-         * @returns {boolean}
-         */
-        isUserTheme: function () {
-            if (this.config.get('userThemesDisabled')) {
-                return false;
-            }
+    /**
+     * Get a theme name for the current user.
+     *
+     * @returns {string}
+     */
+    getName: function () {
+        if (this.name) {
+            return this.name;
+        }
 
+        if (!this.config.get('userThemesDisabled')) {
             let name = this.preferences.get('theme');
 
-            if (!name || name === '') {
-                return false;
+            if (name && name !== '') {
+                return name;
+            }
+        }
+
+        return this.config.get('theme');
+    },
+
+    /**
+     * Get a theme name currently applied to the DOM.
+     *
+     * @returns {string|null} Null if not applied.
+     */
+    getAppliedName: function () {
+        let name = window.getComputedStyle(document.body).getPropertyValue('--theme-name');
+
+        if (!name) {
+            return null;
+        }
+
+        return name.trim();
+    },
+
+    /**
+     * Whether a current theme is applied to the DOM.
+     *
+     * @returns {boolean}
+     */
+    isApplied: function () {
+        let appliedName = this.getAppliedName();
+
+        if (!appliedName) {
+            return true;
+        }
+
+        return this.getName() === appliedName;
+    },
+
+    /**
+     * Get a stylesheet path for a current theme.
+     *
+     * @returns {string}
+     */
+    getStylesheet: function () {
+        let link = this.getParam('stylesheet') || 'client/css/espo/espo.css';
+
+        if (this.config.get('cacheTimestamp')) {
+            link += '?r=' + this.config.get('cacheTimestamp').toString();
+        }
+
+        return link;
+    },
+
+    /**
+     * Get an iframe stylesheet path for a current theme.
+     *
+     * @returns {string}
+     */
+    getIframeStylesheet: function () {
+        let link = this.getParam('stylesheetIframe') || 'client/css/espo/espo-iframe.css';
+
+        if (this.config.get('cacheTimestamp')) {
+            link += '?r=' + this.config.get('cacheTimestamp').toString();
+        }
+
+        return link;
+    },
+
+    /**
+     * Get an iframe-fallback stylesheet path for a current theme.
+     *
+     * @returns {string}
+     */
+    getIframeFallbackStylesheet: function () {
+        let link = this.getParam('stylesheetIframeFallback') || 'client/css/espo/espo-iframe.css'
+
+        if (this.config.get('cacheTimestamp')) {
+            link += '?r=' + this.config.get('cacheTimestamp').toString();
+        }
+
+        return link;
+    },
+
+    /**
+     * Get a theme parameter.
+     *
+     * @param {string} name A parameter name.
+     * @returns {*} Null if not set.
+     */
+    getParam: function (name) {
+        if (name !== 'params' && name !== 'mappedParams') {
+            let varValue = this.getVarParam(name);
+
+            if (varValue !== null) {
+                return varValue;
             }
 
-            return name !== this.config.get('theme');
-        },
-    });
+            let mappedValue = this.getMappedParam(name);
 
-    return ThemeManager;
+            if (mappedValue !== null) {
+                return mappedValue;
+            }
+        }
+
+        let value = this.metadata.get(['themes', this.getName(), name]);
+
+        if (value !== null) {
+            return value;
+        }
+
+        value = this.metadata.get(['themes', this.getParentName(), name]);
+
+        if (value !== null) {
+            return value;
+        }
+
+        return this.defaultParams[name] || null;
+    },
+
+    /**
+     * @private
+     * @param {string} name
+     * @returns {*}
+     */
+    getVarParam: function (name) {
+        let params = this.getParam('params') || {};
+
+        if (!(name in params)) {
+            return null;
+        }
+
+        let values = null;
+
+        if (!this.config.get('userThemesDisabled') && this.preferences.get('theme')) {
+            values = this.preferences.get('themeParams');
+        }
+
+        if (!values) {
+            values = this.config.get('themeParams');
+        }
+
+        if (values && (name in values)) {
+            return values[name];
+        }
+
+        if ('default' in params[name]) {
+            return params[name].default;
+        }
+
+        return null;
+    },
+
+    /**
+     * @private
+     * @param {string} name
+     * @returns {*}
+     */
+    getMappedParam: function (name) {
+        let mappedParams = this.getParam('mappedParams') || {};
+
+        if (!(name in mappedParams)) {
+            return null;
+        }
+
+        let mapped = mappedParams[name].param;
+        let valueMap = mappedParams[name].valueMap;
+
+        if (mapped && valueMap) {
+            let key = this.getParam(mapped);
+
+            return valueMap[key];
+        }
+
+        return null;
+    },
+
+    /**
+     * @private
+     * @returns {string}
+     */
+    getParentName: function () {
+        return this.metadata.get(['themes', this.getName(), 'parent']) || 'Espo';
+    },
+
+    /**
+     * Whether a current theme is different from a system default theme.
+     *
+     * @returns {boolean}
+     */
+    isUserTheme: function () {
+        if (this.config.get('userThemesDisabled')) {
+            return false;
+        }
+
+        let name = this.preferences.get('theme');
+
+        if (!name || name === '') {
+            return false;
+        }
+
+        return name !== this.config.get('theme');
+    },
 });
+
+export default ThemeManager;
diff --git a/client/src/ui.js b/client/src/ui.js
index 388a4b5875..90f1ad4275 100644
--- a/client/src/ui.js
+++ b/client/src/ui.js
@@ -26,1045 +26,1043 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
+/** @module ui */
+
+import {marked} from 'lib!marked';
+import DOMPurify from 'lib!dompurify';
+
 /**
- * @module ui
+ * Dialog parameters.
+ *
+ * @typedef {Object} module:ui.Dialog~Params
+ *
+ * @property {string} [className='dialog'] A class-name or multiple space separated.
+ * @property {'static'|true|false} [backdrop='static'] A backdrop.
+ * @property {boolean} [closeButton=true] A close button.
+ * @property {boolean} [collapseButton=false] A collapse button.
+ * @property {string|null} [header] A header HTML.
+ * @property {string} [body] A body HTML.
+ * @property {number|null} [width] A width.
+ * @property {boolean} [removeOnClose=true] To remove on close.
+ * @property {boolean} [draggable=false] Is draggable.
+ * @property {function (): void} [onRemove] An on-remove callback.
+ * @property {function (): void} [onClose] An on-close callback.
+ * @property {function (): void} [onBackdropClick] An on-backdrop-click callback.
+ * @property {string} [container='body'] A container selector.
+ * @property {boolean} [keyboard=true] Enable a keyboard control. The `Esc` key closes a dialog.
+ * @property {boolean} [footerAtTheTop=false] To display a footer at the top.
+ * @property {module:ui.Dialog~Button[]} [buttonList] Buttons.
+ * @property {module:ui.Dialog~Button[]} [dropdownItemList] Dropdown action items.
  */
-define('ui', ['lib!marked', 'lib!dompurify'],
-function (/** marked~ */marked, /** DOMPurify~ */ DOMPurify) {
 
+/**
+ * A button or dropdown action item.
+ *
+ * @typedef {Object} module:ui.Dialog~Button
+ *
+ * @property {string} name A name.
+ * @property {boolean} [pullLeft=false] Deprecated. Use the `position` property.
+ * @property {'left'|'right'} [position='left'] A position.
+ * @property {string} [html] HTML.
+ * @property {string} [text] A text.
+ * @property {boolean} [disabled=false] Disabled.
+ * @property {boolean} [hidden=false] Hidden.
+ * @property {'default'|'danger'|'success'|'warning'} [style='default'] A style.
+ * @property {function():void} [onClick] An on-click callback.
+ * @property {string} [className] An additional class name.
+ * @property {string} [title] A title.
+ */
+
+/**
+ * @class
+ * @name Espo.Ui.Dialog
+ *
+ * @param {module:ui.Dialog~Params} options Options.
+ */
+const Dialog = function (options) {
+    options = options || {};
+
+    /** @private */
+    this.className = 'dialog';
+    /** @private */
+    this.backdrop = 'static';
+    /** @private */
+    this.closeButton = true;
+    /** @private */
+    this.collapseButton = false;
+    /** @private */
+    this.header = null;
+    /** @private */
+    this.body = '';
+    /** @private */
+    this.width = null;
     /**
-     * Dialog parameters.
-     *
-     * @typedef {Object} module:ui.Dialog~Params
-     *
-     * @property {string} [className='dialog'] A class-name or multiple space separated.
-     * @property {'static'|true|false} [backdrop='static'] A backdrop.
-     * @property {boolean} [closeButton=true] A close button.
-     * @property {boolean} [collapseButton=false] A collapse button.
-     * @property {string|null} [header] A header HTML.
-     * @property {string} [body] A body HTML.
-     * @property {number|null} [width] A width.
-     * @property {boolean} [removeOnClose=true] To remove on close.
-     * @property {boolean} [draggable=false] Is draggable.
-     * @property {function (): void} [onRemove] An on-remove callback.
-     * @property {function (): void} [onClose] An on-close callback.
-     * @property {function (): void} [onBackdropClick] An on-backdrop-click callback.
-     * @property {string} [container='body'] A container selector.
-     * @property {boolean} [keyboard=true] Enable a keyboard control. The `Esc` key closes a dialog.
-     * @property {boolean} [footerAtTheTop=false] To display a footer at the top.
-     * @property {module:ui.Dialog~Button[]} [buttonList] Buttons.
-     * @property {module:ui.Dialog~Button[]} [dropdownItemList] Dropdown action items.
+     * @private
+     * @type {module:ui.Dialog~Button[]}
      */
-
+    this.buttonList = [];
     /**
-     * A button or dropdown action item.
-     *
-     * @typedef {Object} module:ui.Dialog~Button
-     *
-     * @property {string} name A name.
-     * @property {boolean} [pullLeft=false] Deprecated. Use the `position` property.
-     * @property {'left'|'right'} [position='left'] A position.
-     * @property {string} [html] HTML.
-     * @property {string} [text] A text.
-     * @property {boolean} [disabled=false] Disabled.
-     * @property {boolean} [hidden=false] Hidden.
-     * @property {'default'|'danger'|'success'|'warning'} [style='default'] A style.
-     * @property {function():void} [onClick] An on-click callback.
-     * @property {string} [className] An additional class name.
-     * @property {string} [title] A title.
+     * @private
+     * @type {module:ui.Dialog~Button[]}
      */
+    this.dropdownItemList = [];
+    /** @private */
+    this.removeOnClose = true;
+    /** @private */
+    this.draggable = false;
+    /** @private */
+    this.container = 'body';
+    /** @private */
+    this.onRemove = function () {};
+    /** @private */
+    this.onClose = function () {};
+    /** @private */
+    this.options = options;
+    /** @private */
+    this.onBackdropClick = function () {};
+    /** @private */
+    this.keyboard = true;
 
-    /**
-     * @class
-     * @name Espo.Ui.Dialog
-     *
-     * @param {module:ui.Dialog~Params} options Options.
-     */
-    let Dialog = function (options) {
-        options = options || {};
+    this.activeElement = document.activeElement;
 
-        /** @private */
-        this.className = 'dialog';
+    let params = [
+        'className',
+        'backdrop',
+        'keyboard',
+        'closeButton',
+        'collapseButton',
+        'header',
+        'body',
+        'width',
+        'height',
+        'fitHeight',
+        'buttons',
+        'buttonList',
+        'dropdownItemList',
+        'removeOnClose',
+        'draggable',
+        'container',
+        'onRemove',
+        'onClose',
+        'onBackdropClick',
+    ];
+
+    params.forEach(param => {
+        if (param in options) {
+            this[param] = options[param];
+        }
+    });
+
+    /** @private */
+    this.onCloseIsCalled = false;
+
+    if (this.buttons && this.buttons.length) {
+        /**
+         * @private
+         * @type {module:ui.Dialog~Button[]}
+         */
+        this.buttonList = this.buttons;
+    }
+
+    this.id = 'dialog-' + Math.floor((Math.random() * 100000));
+
+    if (typeof this.backdrop === 'undefined') {
         /** @private */
         this.backdrop = 'static';
-        /** @private */
-        this.closeButton = true;
-        /** @private */
-        this.collapseButton = false;
-        /** @private */
-        this.header = null;
-        /** @private */
-        this.body = '';
-        /** @private */
-        this.width = null;
-        /**
-         * @private
-         * @type {module:ui.Dialog~Button[]}
-         */
-        this.buttonList = [];
-        /**
-         * @private
-         * @type {module:ui.Dialog~Button[]}
-         */
-        this.dropdownItemList = [];
-        /** @private */
-        this.removeOnClose = true;
-        /** @private */
-        this.draggable = false;
-        /** @private */
-        this.container = 'body';
-        /** @private */
-        this.onRemove = function () {};
-        /** @private */
-        this.onClose = function () {};
-        /** @private */
-        this.options = options;
-        /** @private */
-        this.onBackdropClick = function () {};
-        /** @private */
-        this.keyboard = true;
+    }
 
-        this.activeElement = document.activeElement;
+    let $header = this.getHeader();
+    let $footer = this.getFooter();
 
-        let params = [
-            'className',
-            'backdrop',
-            'keyboard',
-            'closeButton',
-            'collapseButton',
-            'header',
-            'body',
-            'width',
-            'height',
-            'fitHeight',
-            'buttons',
-            'buttonList',
-            'dropdownItemList',
-            'removeOnClose',
-            'draggable',
-            'container',
-            'onRemove',
-            'onClose',
-            'onBackdropClick',
-        ];
+    let $body = $('<div>')
+        .addClass('modal-body body')
+        .html(this.body);
 
-        params.forEach(param => {
-            if (param in options) {
-                this[param] = options[param];
-            }
+    let $content = $('<div>').addClass('modal-content');
+
+    if ($header) {
+        $content.append($header);
+    }
+
+    if ($footer && this.options.footerAtTheTop) {
+        $content.append($footer);
+    }
+
+    $content.append($body);
+
+    if ($footer && !this.options.footerAtTheTop) {
+        $content.append($footer);
+    }
+
+    let $dialog = $('<div>')
+        .addClass('modal-dialog')
+        .append($content);
+
+    let $container = $(this.container);
+
+    $('<div>')
+        .attr('id', this.id)
+        .attr('class', this.className + ' modal')
+        .attr('role', 'dialog')
+        .attr('tabindex', '-1')
+        .append($dialog)
+        .appendTo($container);
+
+    /**
+     * An element.
+     *
+     * @type {JQuery}
+     */
+    this.$el = $('#' + this.id);
+
+    /**
+     * @private
+     * @type {Element}
+     */
+    this.el = this.$el.get(0);
+
+    this.$el.find('header a.close').on('click', () => {
+        //this.close();
+    });
+
+    this.initButtonEvents();
+
+    if (this.draggable) {
+        this.$el.find('header').css('cursor', 'pointer');
+
+        this.$el.draggable({
+            handle: 'header',
         });
+    }
 
-        /** @private */
-        this.onCloseIsCalled = false;
+    let modalContentEl = this.$el.find('.modal-content');
 
-        if (this.buttons && this.buttons.length) {
-            /**
-             * @private
-             * @type {module:ui.Dialog~Button[]}
-             */
-            this.buttonList = this.buttons;
-        }
+    if (this.width) {
+        modalContentEl.css('width', this.width);
+        modalContentEl.css('margin-left', '-' + (parseInt(this.width.replace('px', '')) / 5) + 'px');
+    }
 
-        this.id = 'dialog-' + Math.floor((Math.random() * 100000));
-
-        if (typeof this.backdrop === 'undefined') {
-            /** @private */
-            this.backdrop = 'static';
-        }
-
-        let $header = this.getHeader();
-        let $footer = this.getFooter();
-
-        let $body = $('<div>')
-            .addClass('modal-body body')
-            .html(this.body);
-
-        let $content = $('<div>').addClass('modal-content');
-
-        if ($header) {
-            $content.append($header);
-        }
-
-        if ($footer && this.options.footerAtTheTop) {
-            $content.append($footer);
-        }
-
-        $content.append($body);
-
-        if ($footer && !this.options.footerAtTheTop) {
-            $content.append($footer);
-        }
-
-        let $dialog = $('<div>')
-            .addClass('modal-dialog')
-            .append($content);
-
-        let $container = $(this.container);
-
-        $('<div>')
-            .attr('id', this.id)
-            .attr('class', this.className + ' modal')
-            .attr('role', 'dialog')
-            .attr('tabindex', '-1')
-            .append($dialog)
-            .appendTo($container);
-
-        /**
-         * An element.
-         *
-         * @type {JQuery}
-         */
-        this.$el = $('#' + this.id);
-
-        /**
-         * @private
-         * @type {Element}
-         */
-        this.el = this.$el.get(0);
-
-        this.$el.find('header a.close').on('click', () => {
-            //this.close();
-        });
-
-        this.initButtonEvents();
-
-        if (this.draggable) {
-            this.$el.find('header').css('cursor', 'pointer');
-
-            this.$el.draggable({
-                handle: 'header',
-            });
-        }
-
-        let modalContentEl = this.$el.find('.modal-content');
-
-        if (this.width) {
-            modalContentEl.css('width', this.width);
-            modalContentEl.css('margin-left', '-' + (parseInt(this.width.replace('px', '')) / 5) + 'px');
-        }
-
-        if (this.removeOnClose) {
-            this.$el.on('hidden.bs.modal', e => {
-                if (this.$el.get(0) === e.target) {
-                    if (!this.onCloseIsCalled) {
-                        this.close();
-                    }
-
-                    if (this.skipRemove) {
-                        return;
-                    }
-
-                    this.remove();
+    if (this.removeOnClose) {
+        this.$el.on('hidden.bs.modal', e => {
+            if (this.$el.get(0) === e.target) {
+                if (!this.onCloseIsCalled) {
+                    this.close();
                 }
-            });
+
+                if (this.skipRemove) {
+                    return;
+                }
+
+                this.remove();
+            }
+        });
+    }
+
+    let $window = $(window);
+
+    this.$el.on('shown.bs.modal', () => {
+        $('.modal-backdrop').not('.stacked').addClass('stacked');
+
+        let headerHeight = this.$el.find('.modal-header').outerHeight() || 0;
+        let footerHeight = this.$el.find('.modal-footer').outerHeight() || 0;
+
+        let diffHeight = headerHeight + footerHeight;
+
+        if (!options.fullHeight) {
+            diffHeight = diffHeight + options.bodyDiffHeight;
         }
 
-        let $window = $(window);
+        if (this.fitHeight || options.fullHeight) {
+            let processResize = () => {
+                let windowHeight = window.innerHeight;
+                let windowWidth = $window.width();
 
-        this.$el.on('shown.bs.modal', (e, r) => {
-            $('.modal-backdrop').not('.stacked').addClass('stacked');
-
-            let headerHeight = this.$el.find('.modal-header').outerHeight() || 0;
-            let footerHeight = this.$el.find('.modal-footer').outerHeight() || 0;
-
-            let diffHeight = headerHeight + footerHeight;
-
-            if (!options.fullHeight) {
-                diffHeight = diffHeight + options.bodyDiffHeight;
-            }
-
-            if (this.fitHeight || options.fullHeight) {
-                let processResize = () => {
-                    let windowHeight = window.innerHeight;
-                    let windowWidth = $window.width();
-
-                    if (!options.fullHeight && windowHeight < 512) {
-                        this.$el.find('div.modal-body').css({
-                            maxHeight: 'none',
-                            overflow: 'auto',
-                            height: 'none',
-                        });
-
-                        return;
-                    }
-
-                    let cssParams = {
+                if (!options.fullHeight && windowHeight < 512) {
+                    this.$el.find('div.modal-body').css({
+                        maxHeight: 'none',
                         overflow: 'auto',
-                    };
+                        height: 'none',
+                    });
 
-                    if (options.fullHeight) {
-                        cssParams.height = (windowHeight - diffHeight) + 'px';
+                    return;
+                }
 
-                        this.$el.css('paddingRight', 0);
-                    }
-                    else {
-                        if (windowWidth <= options.screenWidthXs) {
-                            cssParams.maxHeight = 'none';
-                        } else {
-                            cssParams.maxHeight = (windowHeight - diffHeight) + 'px';
-                        }
-                    }
-
-                    this.$el.find('div.modal-body').css(cssParams);
+                let cssParams = {
+                    overflow: 'auto',
                 };
 
-                $window.off('resize.modal-height');
-                $window.on('resize.modal-height', processResize);
-
-                processResize();
-            }
-        });
-
-        let $documentBody = $(document.body);
-
-        this.$el.on('hidden.bs.modal', e => {
-            if ($('.modal:visible').length > 0) {
-                $documentBody.addClass('modal-open');
-            }
-        });
-    };
-
-    /**
-     * @private
-     */
-    Dialog.prototype.initButtonEvents = function () {
-        this.buttonList.forEach(o => {
-            if (typeof o.onClick === 'function') {
-                $('#' + this.id + ' .modal-footer button[data-name="' + o.name + '"]')
-                    .on('click', (e) => {
-                        o.onClick(this, e);
-                    });
-            }
-        });
-
-        this.dropdownItemList.forEach(o => {
-            if (typeof o.onClick === 'function') {
-                $('#' + this.id + ' .modal-footer a[data-name="' + o.name + '"]')
-                    .on('click', (e) => {
-                        o.onClick(this, e);
-                    });
-            }
-        });
-    };
-
-    /**
-     * @private
-     * @return {JQuery|null}
-     */
-    Dialog.prototype.getHeader = function () {
-        if (!this.header) {
-            return null;
-        }
-
-        let $header = $('<header />')
-            .addClass('modal-header')
-            .addClass(this.options.fixedHeaderHeight ? 'fixed-height' : '')
-            .append(
-                $('<h4 />')
-                    .addClass('modal-title')
-                    .append(
-                        $('<span />')
-                            .addClass('modal-title-text')
-                            .html(this.header)
-                    )
-            );
-
-
-        if (this.collapseButton) {
-            $header.prepend(
-                $('<a>')
-                    .addClass('collapse-button')
-                    .attr('role', 'button')
-                    .attr('tabindex', '-1')
-                    .attr('data-action', 'collapseModal')
-                    .append(
-                        $('<span />')
-                            .addClass('fas fa-minus')
-                    )
-            );
-        }
-
-        if (this.closeButton) {
-            $header.prepend(
-                $('<a>')
-                    .addClass('close')
-                    .attr('data-dismiss', 'modal')
-                    .attr('role', 'button')
-                    .attr('tabindex', '-1')
-                    .append(
-                        $('<span />')
-                            .attr('aria-hidden', 'true')
-                            .html('&times;')
-                    )
-            );
-        }
-
-        return $header;
-    }
-
-    /**
-     * @private
-     * @return {JQuery|null}
-     */
-    Dialog.prototype.getFooter = function () {
-        if (!this.buttonList.length && !this.dropdownItemList.length) {
-            return null;
-        }
-
-        let $footer = $('<footer>').addClass('modal-footer');
-
-        let $main = $('<div>')
-            .addClass('btn-group')
-            .addClass('main-btn-group');
-
-        let $additional = $('<div>')
-            .addClass('btn-group')
-            .addClass('additional-btn-group');
-
-        this.buttonList.forEach(/** module:ui.Dialog~Button */o => {
-            let style = o.style || 'default';
-
-            let $button =
-                $('<button>')
-                    .attr('type', 'button')
-                    .attr('data-name', o.name)
-                    .addClass('btn')
-                    .addClass('btn-' + style)
-                    .addClass(o.className || 'btn-xs-wide')
-
-            if (o.disabled) {
-                $button.attr('disabled', 'disabled');
-                $button.addClass('disabled');
-            }
-
-            if (o.hidden) {
-                $button.addClass('hidden');
-            }
-
-            if (o.title) {
-                $button.attr('title', o.title);
-            }
-
-            if (o.text) {
-                $button.text(o.text);
-            }
-
-            if (o.html) {
-                $button.html(o.html);
-            }
-
-            if (o.pullLeft || o.position === 'right') {
-                $additional.append($button);
-
-                return;
-            }
-
-            $main.append($button);
-        });
-
-        let allDdItemsHidden = this.dropdownItemList.filter(o => !o.hidden).length === 0;
-
-        let $dropdown = $('<div>')
-            .addClass('btn-group')
-            .addClass(allDdItemsHidden ? 'hidden' : '')
-            .append(
-                $('<button>')
-                    .attr('type', 'button')
-                    .addClass('btn btn-default dropdown-toggle')
-                    .addClass(allDdItemsHidden ? 'hidden' : '')
-                    .attr('data-toggle', 'dropdown')
-                    .append(
-                        $('<span>').addClass('fas fa-ellipsis-h')
-                    )
-            );
-
-        let $ul = $('<ul>').addClass('dropdown-menu pull-right');
-
-        $dropdown.append($ul);
-
-        this.dropdownItemList.forEach(/** module:ui.Dialog~Button */o => {
-            let $a = $('<a>')
-                .attr('role', 'button')
-                .attr('tabindex', '0')
-                .attr('data-name', o.name);
-
-            if (o.text) {
-                $a.text(o.text);
-            }
-
-            if (o.title) {
-                $a.attr('title', o.title);
-            }
-
-            if (o.html) {
-                $a.html(o.html);
-            }
-
-            let $li = $('<li>')
-                .addClass(o.hidden ? ' hidden' : '')
-                .append($a)
-
-            $ul.append($li);
-        });
-
-        if ($ul.children().length) {
-            $main.append($dropdown);
-        }
-
-        if ($additional.children().length) {
-            $footer.append($additional);
-        }
-
-        $footer.append($main);
-
-        return $footer;
-    }
-
-    /**
-     * Show.
-     */
-    Dialog.prototype.show = function () {
-        this.$el.modal({
-             backdrop: this.backdrop,
-             keyboard: this.keyboard,
-        });
-
-        this.$el.find('.modal-content').removeClass('hidden');
-
-        let $modalBackdrop = $('.modal-backdrop');
-
-        $modalBackdrop.each((i, el) => {
-            if (i < $modalBackdrop.length - 1) {
-                $(el).addClass('hidden');
-            }
-        });
-
-        let $modalContainer = $('.modal-container');
-
-        $modalContainer.each((i, el) => {
-            if (i < $modalContainer.length - 1) {
-                $(el).addClass('overlaid');
-            }
-        });
-
-        this.$el.off('click.dismiss.bs.modal');
-
-        this.$el.on(
-            'click.dismiss.bs.modal',
-            '> div.modal-dialog > div.modal-content > header [data-dismiss="modal"]',
-            () => this.close()
-        );
-
-        this.$el.on('mousedown', e => {
-            this.$mouseDownTarget = $(e.target);
-        });
-
-        this.$el.on('click.dismiss.bs.modal', (e) => {
-            if (e.target !== e.currentTarget) {
-                return;
-            }
-
-            if (
-                this.$mouseDownTarget &&
-                this.$mouseDownTarget.closest('.modal-content').length
-            ) {
-                return;
-            }
-
-            this.onBackdropClick();
-
-            if (this.backdrop === 'static') {
-                return;
-            }
-
-            this.close();
-        });
-
-        $('body > .popover').addClass('hidden');
-    };
-
-    /**
-     * Hide.
-     */
-    Dialog.prototype.hide = function () {
-        this.$el.find('.modal-content').addClass('hidden');
-    };
-
-    /**
-     * Hide with a backdrop.
-     */
-    Dialog.prototype.hideWithBackdrop = function () {
-        let $modalBackdrop = $('.modal-backdrop');
-
-        $modalBackdrop.last().addClass('hidden');
-        $($modalBackdrop.get($modalBackdrop.length - 2)).removeClass('hidden');
-
-        let $modalContainer = $('.modal-container');
-
-        $($modalContainer.get($modalContainer.length - 2)).removeClass('overlaid');
-
-        this.skipRemove = true;
-
-        setTimeout(() => {
-            this.skipRemove = false;
-        }, 50);
-
-        this.$el.modal('hide');
-        this.$el.find('.modal-content').addClass('hidden');
-    };
-
-    /**
-     * @private
-     */
-    Dialog.prototype._close = function () {
-        let $modalBackdrop = $('.modal-backdrop');
-
-        $modalBackdrop.last().removeClass('hidden');
-
-        let $modalContainer = $('.modal-container');
-
-        $($modalContainer.get($modalContainer.length - 2)).removeClass('overlaid');
-    };
-
-    /**
-     * @private
-     * @param {Element} element
-     * @return {Element|null}
-     */
-    Dialog.prototype._findClosestFocusableElement = function (element) {
-        let isVisible = !!(
-            element.offsetWidth ||
-            element.offsetHeight ||
-            element.getClientRects().length
-        );
-
-        if (isVisible) {
-            element.focus({preventScroll: true});
-
-            return element;
-        }
-
-        let $element = $(element);
-
-        if ($element.closest('.dropdown-menu').length) {
-            let $button = $element.closest('.btn-group').find(`[data-toggle="dropdown"]`);
-
-            if ($button.length) {
-                $button.get(0).focus({preventScroll: true});
-
-                return $button.get(0);
-            }
-        }
-
-        return null;
-    };
-
-    /**
-     * Close.
-     */
-    Dialog.prototype.close = function () {
-        if (!this.onCloseIsCalled) {
-            this.onClose();
-            this.onCloseIsCalled = true;
-
-            if (this.activeElement) {
-                setTimeout(() => {
-                    let element = this._findClosestFocusableElement(this.activeElement);
-
-                    if (element) {
-                        element.focus({preventScroll: true});
+                if (options.fullHeight) {
+                    cssParams.height = (windowHeight - diffHeight) + 'px';
+
+                    this.$el.css('paddingRight', 0);
+                }
+                else {
+                    if (windowWidth <= options.screenWidthXs) {
+                        cssParams.maxHeight = 'none';
+                    } else {
+                        cssParams.maxHeight = (windowHeight - diffHeight) + 'px';
                     }
-                }, 50);
-            }
-        }
-
-        this._close();
-        this.$el.modal('hide');
-        $(this).trigger('dialog:close');
-    };
-
-    /**
-     * Remove.
-     */
-    Dialog.prototype.remove = function () {
-        this.onRemove();
-
-        // Hack allowing multiple backdrops.
-        // `close` function may be called twice.
-        this._close();
-        this.$el.remove();
-
-        $(this).off();
-        $(window).off('resize.modal-height');
-    };
-
-    /**
-     * UI utils.
-     */
-    Espo.Ui = {
-
-        Dialog: Dialog,
-
-        /**
-         * @typedef {Object} Espo.Ui~ConfirmOptions
-         *
-         * @property {string} confirmText A confirm-button text.
-         * @property {string} cancelText A cancel-button text.
-         * @property {'danger'|'success'|'warning'|'default'} [confirmStyle='danger']
-         *   A confirm-button style.
-         * @property {'static'|boolean} [backdrop=false] A backdrop.
-         * @property {function():void} [cancelCallback] A cancel-callback.
-         * @property {boolean} [isHtml=false] Whether the message is HTML.
-         */
-
-        /**
-         * Show a confirmation dialog.
-         *
-         * @param {string} message A message.
-         * @param {Espo.Ui~ConfirmOptions|{}} o Options.
-         * @param {function} [callback] Deprecated. Use a promise.
-         * @param {Object} [context] Deprecated.
-         * @returns {Promise} Resolves if confirmed.
-         */
-        confirm: function (message, o, callback, context) {
-            o = o || {};
-
-            let confirmText = o.confirmText;
-            let cancelText = o.cancelText;
-            let confirmStyle = o.confirmStyle || 'danger';
-            let backdrop = o.backdrop;
-
-            if (typeof backdrop === 'undefined') {
-                backdrop = false;
-            }
-
-            let isResolved = false;
-
-            let processCancel = () => {
-                if (!o.cancelCallback) {
-                    return;
                 }
 
-                if (context) {
-                    o.cancelCallback.call(context);
-
-                    return;
-                }
-
-                o.cancelCallback();
+                this.$el.find('div.modal-body').css(cssParams);
             };
 
-            if (!o.isHtml) {
-                message = Handlebars.Utils.escapeExpression(message);
-            }
+            $window.off('resize.modal-height');
+            $window.on('resize.modal-height', processResize);
 
-            return new Promise(resolve => {
-                let dialog = new Dialog({
-                    backdrop: backdrop,
-                    header: false,
-                    className: 'dialog-confirm',
-                    body: '<span class="confirm-message">' + message + '</a>',
-                    buttonList: [
-                        {
-                            text: ' ' + confirmText + ' ',
-                            name: 'confirm',
-                            className: 'btn-s-wide',
-                            onClick: () => {
-                                isResolved = true;
+            processResize();
+        }
+    });
 
-                                if (callback) {
-                                    if (context) {
-                                        callback.call(context);
-                                    } else {
-                                        callback();
-                                    }
-                                }
+    let $documentBody = $(document.body);
 
-                                resolve();
+    this.$el.on('hidden.bs.modal', () => {
+        if ($('.modal:visible').length > 0) {
+            $documentBody.addClass('modal-open');
+        }
+    });
+};
 
-                                dialog.close();
-                            },
-                            style: confirmStyle,
-                            position: 'right',
-                        },
-                        {
-                            text: cancelText,
-                            name: 'cancel',
-                            className: 'btn-s-wide',
-                            onClick: () => {
-                                isResolved = true;
-
-                                dialog.close();
-                                processCancel();
-                            },
-                            position: 'left',
-                        }
-                    ],
-                    onClose: () => {
-                        if (isResolved) {
-                            return;
-                        }
-
-                        processCancel();
-                    },
+/**
+ * @private
+ */
+Dialog.prototype.initButtonEvents = function () {
+    this.buttonList.forEach(o => {
+        if (typeof o.onClick === 'function') {
+            $('#' + this.id + ' .modal-footer button[data-name="' + o.name + '"]')
+                .on('click', (e) => {
+                    o.onClick(this, e);
                 });
+        }
+    });
 
-                dialog.show();
-                dialog.$el.find('button[data-name="confirm"]').focus();
-            });
-        },
-
-        /**
-         * Create a dialog.
-         *
-         * @param {module:ui.Dialog~Params} options Options.
-         * @returns {Dialog}
-         */
-        dialog: function (options) {
-            return new Dialog(options);
-        },
-
-
-        /**
-         * Popover options.
-         *
-         * @typedef {Object} Espo.Ui~PopoverOptions
-         *
-         * @property {'bottom'|'top'|'left'|'right'} [placement='bottom'] A placement.
-         * @property {string|JQuery} [container] A container selector.
-         * @property {string} [content] An HTML content.
-         * @property {string} [text] A text.
-         * @property {'manual'|'click'|'hover'|'focus'} [trigger='manual'] A trigger type.
-         * @property {boolean} [noToggleInit=false] Skip init toggle on click.
-         * @property {boolean} [preventDestroyOnRender=false] Don't destroy on re-render.
-         * @property {function(): void} [onShow] On-show callback.
-         * @property {function(): void} [onHide] On-hide callback.
-         */
-
-        /**
-         * Init a popover.
-         *
-         * @param {JQuery} $el An element.
-         * @param {Espo.Ui~PopoverOptions} o Options.
-         * @param {module:view} [view] A view.
-         */
-        popover: function ($el, o, view) {
-            let $body = $('body')
-            let content = o.content || Handlebars.Utils.escapeExpression(o.text || '');
-            let isShown = false;
-
-            let container = o.container;
-
-            if (!container) {
-                let $modalBody = $el.closest('.modal-body');
-
-                container = $modalBody.length ? $modalBody : 'body';
-            }
-
-            $el
-                .popover({
-                    placement: o.placement || 'bottom',
-                    container: container,
-                    viewport: container,
-                    html: true,
-                    content: content,
-                    trigger: o.trigger || 'manual',
-                })
-                .on('shown.bs.popover', () => {
-                    isShown = true;
-
-                    if (!view) {
-                        return;
-                    }
-
-                    $body.off('click.popover-' + view.cid);
-
-                    $body.on('click.popover-' + view.cid, e => {
-                        if ($(e.target).closest('.popover-content').get(0)) {
-                            return;
-                        }
-
-                        if ($.contains($el.get(0), e.target)) {
-                            return;
-                        }
-
-                        if ($el.get(0) === e.target) {
-                            return;
-                        }
-
-                        $body.off('click.popover-' + view.cid);
-                        $el.popover('hide');
-                    });
-
-                    if (o.onShow) {
-                        o.onShow();
-                    }
-                })
-                .on('hidden.bs.popover', () => {
-                    isShown = false;
-
-                    if (o.onHide) {
-                        o.onHide();
-                    }
+    this.dropdownItemList.forEach(o => {
+        if (typeof o.onClick === 'function') {
+            $('#' + this.id + ' .modal-footer a[data-name="' + o.name + '"]')
+                .on('click', (e) => {
+                    o.onClick(this, e);
                 });
+        }
+    });
+};
 
-            if (!o.noToggleInit) {
-                $el.on('click', () => {
-                    $el.popover('toggle');
-                });
-            }
+/**
+ * @private
+ * @return {JQuery|null}
+ */
+Dialog.prototype.getHeader = function () {
+    if (!this.header) {
+        return null;
+    }
 
-            if (view) {
-                let hide = () => {
-                    if (!isShown) {
-                        return;
-                    }
+    let $header = $('<header />')
+        .addClass('modal-header')
+        .addClass(this.options.fixedHeaderHeight ? 'fixed-height' : '')
+        .append(
+            $('<h4 />')
+                .addClass('modal-title')
+                .append(
+                    $('<span />')
+                        .addClass('modal-title-text')
+                        .html(this.header)
+                )
+        );
 
-                    $el.popover('hide');
-                };
 
-                let destroy = () => {
-                    $el.popover('destroy');
-                    $body.off('click.popover-' + view.cid);
+    if (this.collapseButton) {
+        $header.prepend(
+            $('<a>')
+                .addClass('collapse-button')
+                .attr('role', 'button')
+                .attr('tabindex', '-1')
+                .attr('data-action', 'collapseModal')
+                .append(
+                    $('<span />')
+                        .addClass('fas fa-minus')
+                )
+        );
+    }
 
-                    view.off('remove', destroy);
-                    view.off('render', destroy);
-                    view.off('render', hide);
-                };
+    if (this.closeButton) {
+        $header.prepend(
+            $('<a>')
+                .addClass('close')
+                .attr('data-dismiss', 'modal')
+                .attr('role', 'button')
+                .attr('tabindex', '-1')
+                .append(
+                    $('<span />')
+                        .attr('aria-hidden', 'true')
+                        .html('&times;')
+                )
+        );
+    }
 
-                view.once('remove', destroy);
+    return $header;
+}
 
-                if (!o.preventDestroyOnRender) {
-                    view.once('render', destroy);
+/**
+ * @private
+ * @return {JQuery|null}
+ */
+Dialog.prototype.getFooter = function () {
+    if (!this.buttonList.length && !this.dropdownItemList.length) {
+        return null;
+    }
+
+    let $footer = $('<footer>').addClass('modal-footer');
+
+    let $main = $('<div>')
+        .addClass('btn-group')
+        .addClass('main-btn-group');
+
+    let $additional = $('<div>')
+        .addClass('btn-group')
+        .addClass('additional-btn-group');
+
+    this.buttonList.forEach(/** module:ui.Dialog~Button */o => {
+        let style = o.style || 'default';
+
+        let $button =
+            $('<button>')
+                .attr('type', 'button')
+                .attr('data-name', o.name)
+                .addClass('btn')
+                .addClass('btn-' + style)
+                .addClass(o.className || 'btn-xs-wide')
+
+        if (o.disabled) {
+            $button.attr('disabled', 'disabled');
+            $button.addClass('disabled');
+        }
+
+        if (o.hidden) {
+            $button.addClass('hidden');
+        }
+
+        if (o.title) {
+            $button.attr('title', o.title);
+        }
+
+        if (o.text) {
+            $button.text(o.text);
+        }
+
+        if (o.html) {
+            $button.html(o.html);
+        }
+
+        if (o.pullLeft || o.position === 'right') {
+            $additional.append($button);
+
+            return;
+        }
+
+        $main.append($button);
+    });
+
+    let allDdItemsHidden = this.dropdownItemList.filter(o => !o.hidden).length === 0;
+
+    let $dropdown = $('<div>')
+        .addClass('btn-group')
+        .addClass(allDdItemsHidden ? 'hidden' : '')
+        .append(
+            $('<button>')
+                .attr('type', 'button')
+                .addClass('btn btn-default dropdown-toggle')
+                .addClass(allDdItemsHidden ? 'hidden' : '')
+                .attr('data-toggle', 'dropdown')
+                .append(
+                    $('<span>').addClass('fas fa-ellipsis-h')
+                )
+        );
+
+    let $ul = $('<ul>').addClass('dropdown-menu pull-right');
+
+    $dropdown.append($ul);
+
+    this.dropdownItemList.forEach(/** module:ui.Dialog~Button */o => {
+        let $a = $('<a>')
+            .attr('role', 'button')
+            .attr('tabindex', '0')
+            .attr('data-name', o.name);
+
+        if (o.text) {
+            $a.text(o.text);
+        }
+
+        if (o.title) {
+            $a.attr('title', o.title);
+        }
+
+        if (o.html) {
+            $a.html(o.html);
+        }
+
+        let $li = $('<li>')
+            .addClass(o.hidden ? ' hidden' : '')
+            .append($a)
+
+        $ul.append($li);
+    });
+
+    if ($ul.children().length) {
+        $main.append($dropdown);
+    }
+
+    if ($additional.children().length) {
+        $footer.append($additional);
+    }
+
+    $footer.append($main);
+
+    return $footer;
+}
+
+/**
+ * Show.
+ */
+Dialog.prototype.show = function () {
+    this.$el.modal({
+         backdrop: this.backdrop,
+         keyboard: this.keyboard,
+    });
+
+    this.$el.find('.modal-content').removeClass('hidden');
+
+    let $modalBackdrop = $('.modal-backdrop');
+
+    $modalBackdrop.each((i, el) => {
+        if (i < $modalBackdrop.length - 1) {
+            $(el).addClass('hidden');
+        }
+    });
+
+    let $modalContainer = $('.modal-container');
+
+    $modalContainer.each((i, el) => {
+        if (i < $modalContainer.length - 1) {
+            $(el).addClass('overlaid');
+        }
+    });
+
+    this.$el.off('click.dismiss.bs.modal');
+
+    this.$el.on(
+        'click.dismiss.bs.modal',
+        '> div.modal-dialog > div.modal-content > header [data-dismiss="modal"]',
+        () => this.close()
+    );
+
+    this.$el.on('mousedown', e => {
+        this.$mouseDownTarget = $(e.target);
+    });
+
+    this.$el.on('click.dismiss.bs.modal', (e) => {
+        if (e.target !== e.currentTarget) {
+            return;
+        }
+
+        if (
+            this.$mouseDownTarget &&
+            this.$mouseDownTarget.closest('.modal-content').length
+        ) {
+            return;
+        }
+
+        this.onBackdropClick();
+
+        if (this.backdrop === 'static') {
+            return;
+        }
+
+        this.close();
+    });
+
+    $('body > .popover').addClass('hidden');
+};
+
+/**
+ * Hide.
+ */
+Dialog.prototype.hide = function () {
+    this.$el.find('.modal-content').addClass('hidden');
+};
+
+/**
+ * Hide with a backdrop.
+ */
+Dialog.prototype.hideWithBackdrop = function () {
+    let $modalBackdrop = $('.modal-backdrop');
+
+    $modalBackdrop.last().addClass('hidden');
+    $($modalBackdrop.get($modalBackdrop.length - 2)).removeClass('hidden');
+
+    let $modalContainer = $('.modal-container');
+
+    $($modalContainer.get($modalContainer.length - 2)).removeClass('overlaid');
+
+    this.skipRemove = true;
+
+    setTimeout(() => {
+        this.skipRemove = false;
+    }, 50);
+
+    this.$el.modal('hide');
+    this.$el.find('.modal-content').addClass('hidden');
+};
+
+/**
+ * @private
+ */
+Dialog.prototype._close = function () {
+    let $modalBackdrop = $('.modal-backdrop');
+
+    $modalBackdrop.last().removeClass('hidden');
+
+    let $modalContainer = $('.modal-container');
+
+    $($modalContainer.get($modalContainer.length - 2)).removeClass('overlaid');
+};
+
+/**
+ * @private
+ * @param {Element} element
+ * @return {Element|null}
+ */
+Dialog.prototype._findClosestFocusableElement = function (element) {
+    let isVisible = !!(
+        element.offsetWidth ||
+        element.offsetHeight ||
+        element.getClientRects().length
+    );
+
+    if (isVisible) {
+        element.focus({preventScroll: true});
+
+        return element;
+    }
+
+    let $element = $(element);
+
+    if ($element.closest('.dropdown-menu').length) {
+        let $button = $element.closest('.btn-group').find(`[data-toggle="dropdown"]`);
+
+        if ($button.length) {
+            $button.get(0).focus({preventScroll: true});
+
+            return $button.get(0);
+        }
+    }
+
+    return null;
+};
+
+/**
+ * Close.
+ */
+Dialog.prototype.close = function () {
+    if (!this.onCloseIsCalled) {
+        this.onClose();
+        this.onCloseIsCalled = true;
+
+        if (this.activeElement) {
+            setTimeout(() => {
+                let element = this._findClosestFocusableElement(this.activeElement);
+
+                if (element) {
+                    element.focus({preventScroll: true});
                 }
+            }, 50);
+        }
+    }
 
-                if (o.preventDestroyOnRender) {
-                    view.on('render', hide);
-                }
-            }
-        },
+    this._close();
+    this.$el.modal('hide');
+    $(this).trigger('dialog:close');
+};
 
-        /**
-         * Show a notify-message.
-         *
-         * @param {string|false} message A message. False removes an already displayed message.
-         * @param {'warning'|'danger'|'success'|'info'} [type='warning'] A type.
-         * @param {number} [timeout] Microseconds. If empty, then won't be hidden.
-         *   Should be hidden manually or by displaying another message.
-         * @param {boolean} [closeButton] A close button.
-         */
-        notify: function (message, type, timeout, closeButton) {
-            $('#notification').remove();
+/**
+ * Remove.
+ */
+Dialog.prototype.remove = function () {
+    this.onRemove();
 
-            if (!message) {
+    // Hack allowing multiple backdrops.
+    // `close` function may be called twice.
+    this._close();
+    this.$el.remove();
+
+    $(this).off();
+    $(window).off('resize.modal-height');
+};
+
+/**
+ * UI utils.
+ */
+Espo.Ui = {
+
+    Dialog: Dialog,
+
+    /**
+     * @typedef {Object} Espo.Ui~ConfirmOptions
+     *
+     * @property {string} confirmText A confirm-button text.
+     * @property {string} cancelText A cancel-button text.
+     * @property {'danger'|'success'|'warning'|'default'} [confirmStyle='danger']
+     *   A confirm-button style.
+     * @property {'static'|boolean} [backdrop=false] A backdrop.
+     * @property {function():void} [cancelCallback] A cancel-callback.
+     * @property {boolean} [isHtml=false] Whether the message is HTML.
+     */
+
+    /**
+     * Show a confirmation dialog.
+     *
+     * @param {string} message A message.
+     * @param {Espo.Ui~ConfirmOptions|{}} o Options.
+     * @param {function} [callback] Deprecated. Use a promise.
+     * @param {Object} [context] Deprecated.
+     * @returns {Promise} Resolves if confirmed.
+     */
+    confirm: function (message, o, callback, context) {
+        o = o || {};
+
+        let confirmText = o.confirmText;
+        let cancelText = o.cancelText;
+        let confirmStyle = o.confirmStyle || 'danger';
+        let backdrop = o.backdrop;
+
+        if (typeof backdrop === 'undefined') {
+            backdrop = false;
+        }
+
+        let isResolved = false;
+
+        let processCancel = () => {
+            if (!o.cancelCallback) {
                 return;
             }
 
-            let parsedMessage = message.indexOf('\n') !== -1 ?
-                marked.parse(message) :
-                marked.parseInline(message);
+            if (context) {
+                o.cancelCallback.call(context);
 
-            let sanitizedMessage = DOMPurify.sanitize(parsedMessage).toString();
-
-            type = type || 'warning';
-            closeButton = closeButton || false;
-
-            if (type === 'error') {
-                // For bc.
-                type = 'danger';
+                return;
             }
 
-            if (sanitizedMessage === ' ... ') {
-                sanitizedMessage = ' <span class="fas fa-spinner fa-spin"> ';
-            }
+            o.cancelCallback();
+        };
 
-            let additionalClassName = closeButton ? ' alert-closable' : '';
+        if (!o.isHtml) {
+            message = Handlebars.Utils.escapeExpression(message);
+        }
 
-            let $el = $('<div>')
-                .addClass('alert alert-' + type + additionalClassName + ' fade in')
-                .attr('id', 'notification')
-                .css({
-                    'position': 'fixed',
-                    'top': '0',
-                    'left': '50vw',
-                    'transform': 'translate(-50%, 0)',
-                    'z-index': 2000,
-                })
-                .append(
-                    $('<div>')
-                        .addClass('message')
-                        .html(sanitizedMessage)
-                );
+        return new Promise(resolve => {
+            let dialog = new Dialog({
+                backdrop: backdrop,
+                header: false,
+                className: 'dialog-confirm',
+                body: '<span class="confirm-message">' + message + '</a>',
+                buttonList: [
+                    {
+                        text: ' ' + confirmText + ' ',
+                        name: 'confirm',
+                        className: 'btn-s-wide',
+                        onClick: () => {
+                            isResolved = true;
 
-            if (closeButton) {
-                let $close = $('<button>')
-                    .attr('type', 'button')
-                    .attr('data-dismiss', 'modal')
-                    .attr('aria-hidden', 'true')
-                    .addClass('close')
-                    .html('&times;');
+                            if (callback) {
+                                if (context) {
+                                    callback.call(context);
+                                } else {
+                                    callback();
+                                }
+                            }
 
-                $el.append(
-                    $('<div>')
-                        .addClass('close-container')
-                        .append($close)
-                );
+                            resolve();
 
-                $close.on('click', () => $el.alert('close'));
-            }
+                            dialog.close();
+                        },
+                        style: confirmStyle,
+                        position: 'right',
+                    },
+                    {
+                        text: cancelText,
+                        name: 'cancel',
+                        className: 'btn-s-wide',
+                        onClick: () => {
+                            isResolved = true;
 
-            if (timeout) {
-                setTimeout(() => $el.alert('close'), timeout);
-            }
+                            dialog.close();
+                            processCancel();
+                        },
+                        position: 'left',
+                    }
+                ],
+                onClose: () => {
+                    if (isResolved) {
+                        return;
+                    }
 
-            $el.appendTo('body')
-        },
+                    processCancel();
+                },
+            });
 
-        /**
-         * Show a warning message.
-         *
-         * @param {string} message A message.
-         */
-        warning: function (message) {
-            Espo.Ui.notify(message, 'warning', 2000);
-        },
-
-        /**
-         * Show a success message.
-         *
-         * @param {string} message A message.
-         */
-        success: function (message) {
-            Espo.Ui.notify(message, 'success', 2000);
-        },
-
-        /**
-         * Show an error message.
-         *
-         * @param {string} message A message.
-         * @param {boolean} [closeButton] A close button.
-         */
-        error: function (message, closeButton) {
-            closeButton = closeButton || false;
-            let timeout = closeButton ? 0 : 4000;
-
-            Espo.Ui.notify(message, 'danger', timeout, closeButton);
-        },
-
-        /**
-         * Show an info message.
-         *
-         * @param {string} message A message.
-         */
-        info: function (message) {
-            Espo.Ui.notify(message, 'info', 2000);
-        },
-    };
+            dialog.show();
+            dialog.$el.find('button[data-name="confirm"]').focus();
+        });
+    },
 
     /**
-     * @deprecated Use `Espo.Ui`.
+     * Create a dialog.
+     *
+     * @param {module:ui.Dialog~Params} options Options.
+     * @returns {Dialog}
      */
-    Espo.ui = Espo.Ui;
+    dialog: function (options) {
+        return new Dialog(options);
+    },
 
-    return Espo.Ui;
-});
+
+    /**
+     * Popover options.
+     *
+     * @typedef {Object} Espo.Ui~PopoverOptions
+     *
+     * @property {'bottom'|'top'|'left'|'right'} [placement='bottom'] A placement.
+     * @property {string|JQuery} [container] A container selector.
+     * @property {string} [content] An HTML content.
+     * @property {string} [text] A text.
+     * @property {'manual'|'click'|'hover'|'focus'} [trigger='manual'] A trigger type.
+     * @property {boolean} [noToggleInit=false] Skip init toggle on click.
+     * @property {boolean} [preventDestroyOnRender=false] Don't destroy on re-render.
+     * @property {function(): void} [onShow] On-show callback.
+     * @property {function(): void} [onHide] On-hide callback.
+     */
+
+    /**
+     * Init a popover.
+     *
+     * @param {JQuery} $el An element.
+     * @param {Espo.Ui~PopoverOptions} o Options.
+     * @param {module:view} [view] A view.
+     */
+    popover: function ($el, o, view) {
+        let $body = $('body')
+        let content = o.content || Handlebars.Utils.escapeExpression(o.text || '');
+        let isShown = false;
+
+        let container = o.container;
+
+        if (!container) {
+            let $modalBody = $el.closest('.modal-body');
+
+            container = $modalBody.length ? $modalBody : 'body';
+        }
+
+        $el
+            .popover({
+                placement: o.placement || 'bottom',
+                container: container,
+                viewport: container,
+                html: true,
+                content: content,
+                trigger: o.trigger || 'manual',
+            })
+            .on('shown.bs.popover', () => {
+                isShown = true;
+
+                if (!view) {
+                    return;
+                }
+
+                $body.off('click.popover-' + view.cid);
+
+                $body.on('click.popover-' + view.cid, e => {
+                    if ($(e.target).closest('.popover-content').get(0)) {
+                        return;
+                    }
+
+                    if ($.contains($el.get(0), e.target)) {
+                        return;
+                    }
+
+                    if ($el.get(0) === e.target) {
+                        return;
+                    }
+
+                    $body.off('click.popover-' + view.cid);
+                    $el.popover('hide');
+                });
+
+                if (o.onShow) {
+                    o.onShow();
+                }
+            })
+            .on('hidden.bs.popover', () => {
+                isShown = false;
+
+                if (o.onHide) {
+                    o.onHide();
+                }
+            });
+
+        if (!o.noToggleInit) {
+            $el.on('click', () => {
+                $el.popover('toggle');
+            });
+        }
+
+        if (view) {
+            let hide = () => {
+                if (!isShown) {
+                    return;
+                }
+
+                $el.popover('hide');
+            };
+
+            let destroy = () => {
+                $el.popover('destroy');
+                $body.off('click.popover-' + view.cid);
+
+                view.off('remove', destroy);
+                view.off('render', destroy);
+                view.off('render', hide);
+            };
+
+            view.once('remove', destroy);
+
+            if (!o.preventDestroyOnRender) {
+                view.once('render', destroy);
+            }
+
+            if (o.preventDestroyOnRender) {
+                view.on('render', hide);
+            }
+        }
+    },
+
+    /**
+     * Show a notify-message.
+     *
+     * @param {string|false} message A message. False removes an already displayed message.
+     * @param {'warning'|'danger'|'success'|'info'} [type='warning'] A type.
+     * @param {number} [timeout] Microseconds. If empty, then won't be hidden.
+     *   Should be hidden manually or by displaying another message.
+     * @param {boolean} [closeButton] A close button.
+     */
+    notify: function (message, type, timeout, closeButton) {
+        $('#notification').remove();
+
+        if (!message) {
+            return;
+        }
+
+        let parsedMessage = message.indexOf('\n') !== -1 ?
+            marked.parse(message) :
+            marked.parseInline(message);
+
+        let sanitizedMessage = DOMPurify.sanitize(parsedMessage).toString();
+
+        type = type || 'warning';
+        closeButton = closeButton || false;
+
+        if (type === 'error') {
+            // For bc.
+            type = 'danger';
+        }
+
+        if (sanitizedMessage === ' ... ') {
+            sanitizedMessage = ' <span class="fas fa-spinner fa-spin"> ';
+        }
+
+        let additionalClassName = closeButton ? ' alert-closable' : '';
+
+        let $el = $('<div>')
+            .addClass('alert alert-' + type + additionalClassName + ' fade in')
+            .attr('id', 'notification')
+            .css({
+                'position': 'fixed',
+                'top': '0',
+                'left': '50vw',
+                'transform': 'translate(-50%, 0)',
+                'z-index': 2000,
+            })
+            .append(
+                $('<div>')
+                    .addClass('message')
+                    .html(sanitizedMessage)
+            );
+
+        if (closeButton) {
+            let $close = $('<button>')
+                .attr('type', 'button')
+                .attr('data-dismiss', 'modal')
+                .attr('aria-hidden', 'true')
+                .addClass('close')
+                .html('&times;');
+
+            $el.append(
+                $('<div>')
+                    .addClass('close-container')
+                    .append($close)
+            );
+
+            $close.on('click', () => $el.alert('close'));
+        }
+
+        if (timeout) {
+            setTimeout(() => $el.alert('close'), timeout);
+        }
+
+        $el.appendTo('body')
+    },
+
+    /**
+     * Show a warning message.
+     *
+     * @param {string} message A message.
+     */
+    warning: function (message) {
+        Espo.Ui.notify(message, 'warning', 2000);
+    },
+
+    /**
+     * Show a success message.
+     *
+     * @param {string} message A message.
+     */
+    success: function (message) {
+        Espo.Ui.notify(message, 'success', 2000);
+    },
+
+    /**
+     * Show an error message.
+     *
+     * @param {string} message A message.
+     * @param {boolean} [closeButton] A close button.
+     */
+    error: function (message, closeButton) {
+        closeButton = closeButton || false;
+        let timeout = closeButton ? 0 : 4000;
+
+        Espo.Ui.notify(message, 'danger', timeout, closeButton);
+    },
+
+    /**
+     * Show an info message.
+     *
+     * @param {string} message A message.
+     */
+    info: function (message) {
+        Espo.Ui.notify(message, 'info', 2000);
+    },
+};
+
+/**
+ * @deprecated Use `Espo.Ui`.
+ */
+Espo.ui = Espo.Ui;
+
+export default Espo.Ui;
diff --git a/client/src/ui/multi-select.js b/client/src/ui/multi-select.js
index f33f35c523..c5454cd7ab 100644
--- a/client/src/ui/multi-select.js
+++ b/client/src/ui/multi-select.js
@@ -26,249 +26,250 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('ui/multi-select', ['lib!Selectize'], (Selectize) => {
+/** @module module:ui/multi-select */
 
+import Selectize from "lib!Selectize";
+
+/**
+ * @typedef module:ui/multi-select~Options
+ * @type {Object}
+ * @property {{value: string, text: string}[]} items
+ * @property {string} [delimiter=':,:']
+ * @property {boolean} [restoreOnBackspace=false]
+ * @property {boolean} [removeButton=true]
+ * @property {boolean} [draggable=false]
+ * @property {boolean} [selectOnTab=false]
+ * @property {boolean} [matchAnyWord=false]
+ * @property {boolean} [allowCustomOptions=false]
+ * @property {function (string): {value: string, text: string}|null} create
+ */
+
+/**
+ * @module ui/multi-select
+ */
+const MultiSelect = {
     /**
-     * @typedef module:ui/multi-select~Options
-     * @type {Object}
-     * @property {{value: string, text: string}[]} items
-     * @property {string} [delimiter=':,:']
-     * @property {boolean} [restoreOnBackspace=false]
-     * @property {boolean} [removeButton=true]
-     * @property {boolean} [draggable=false]
-     * @property {boolean} [selectOnTab=false]
-     * @property {boolean} [matchAnyWord=false]
-     * @property {boolean} [allowCustomOptions=false]
-     * @property {function (string): {value: string, text: string}|null} create
+     * @param {JQuery} $el An element.
+     * @param {module:ui/multi-select~Options} options Options.
      */
+    init: function ($el, options) {
+        options = MultiSelect.applyDefaultOptions(options);
 
-    /**
-     * @module ui/multi-select
-     */
-    let MultiSelect = {
-        /**
-         * @param {JQuery} $el An element.
-         * @param {module:ui/multi-select~Options} options Options.
-         */
-        init: function ($el, options) {
-            options = MultiSelect.applyDefaultOptions(options);
+        let plugins = [];
 
-            let plugins = [];
+        if (options.removeButton) {
+            plugins.push('remove_button');
+        }
 
-            if (options.removeButton) {
-                plugins.push('remove_button');
-            }
+        if (options.draggable) {
+            plugins.push('drag_drop');
+        }
 
-            if (options.draggable) {
-                plugins.push('drag_drop');
-            }
+        if (options.restoreOnBackspace) {
+            MultiSelect.loadRestoreOnBackspacePlugin();
+            plugins.push('restore_on_backspace_espo')
+        }
 
-            if (options.restoreOnBackspace) {
-                MultiSelect.loadRestoreOnBackspacePlugin();
-                plugins.push('restore_on_backspace_espo')
-            }
+        MultiSelect.loadBypassCtrlEnterPlugin();
+        plugins.push('bypass_ctrl_enter');
 
-            MultiSelect.loadBypassCtrlEnterPlugin();
-            plugins.push('bypass_ctrl_enter');
+        let selectizeOptions = {
+            options: options.items,
+            plugins: plugins,
+            delimiter: options.delimiter,
+            labelField: 'text',
+            valueField: 'value',
+            searchField: ['text'],
+            highlight: false,
+            selectOnTab: options.selectOnTab,
+        };
 
-            let selectizeOptions = {
-                options: options.items,
-                plugins: plugins,
-                delimiter: options.delimiter,
-                labelField: 'text',
-                valueField: 'value',
-                searchField: ['text'],
-                highlight: false,
-                selectOnTab: options.selectOnTab,
-            };
+        if (!options.matchAnyWord) {
+            /** @this Selectize */
+            selectizeOptions.score = function (search) {
+                let score = this.getScoreFunction(search);
 
-            if (!options.matchAnyWord) {
-                /** @this Selectize */
-                selectizeOptions.score = function (search) {
-                    let score = this.getScoreFunction(search);
-
-                    search = search.toLowerCase();
-
-                    return function (item) {
-                        if (item.text.toLowerCase().indexOf(search) === 0) {
-                            return score(item);
-                        }
-
-                        return 0;
-                    };
-                };
-            }
-
-            if (options.matchAnyWord) {
-                /** @this Selectize */
-                selectizeOptions.score = function (search) {
-                    let score = this.getScoreFunction(search);
-
-                    search = search.toLowerCase();
-
-                    return function (item) {
-                        let text = item.text.toLowerCase();
-
-                        if (
-                            !text.split(' ').find(item => item.startsWith(search)) &&
-                            !text.startsWith(search)
-                        ) {
-                            return 0;
-                        }
+                search = search.toLowerCase();
 
+                return function (item) {
+                    if (item.text.toLowerCase().indexOf(search) === 0) {
                         return score(item);
-                    };
+                    }
+
+                    return 0;
                 };
-            }
+            };
+        }
 
-            if (options.allowCustomOptions) {
-                selectizeOptions.persist = false;
-                selectizeOptions.create = options.create;
-                selectizeOptions.render = {
-                    option_create: data => {
-                        return $('<div>')
-                            .addClass('create')
-                            .append(
-                                $('<span>')
-                                    .text(data.input)
-                                    .addClass('text-bold')
-                            )
-                            .append('&hellip;')
-                            .get(0).outerHTML;
-                    },
+        if (options.matchAnyWord) {
+            /** @this Selectize */
+            selectizeOptions.score = function (search) {
+                let score = this.getScoreFunction(search);
+
+                search = search.toLowerCase();
+
+                return function (item) {
+                    let text = item.text.toLowerCase();
+
+                    if (
+                        !text.split(' ').find(item => item.startsWith(search)) &&
+                        !text.startsWith(search)
+                    ) {
+                        return 0;
+                    }
+
+                    return score(item);
                 };
+            };
+        }
+
+        if (options.allowCustomOptions) {
+            selectizeOptions.persist = false;
+            selectizeOptions.create = options.create;
+            selectizeOptions.render = {
+                option_create: data => {
+                    return $('<div>')
+                        .addClass('create')
+                        .append(
+                            $('<span>')
+                                .text(data.input)
+                                .addClass('text-bold')
+                        )
+                        .append('&hellip;')
+                        .get(0).outerHTML;
+                },
+            };
+        }
+
+        $el.selectize(selectizeOptions);
+    },
+
+    /**
+     * Focus.
+     *
+     * @param {JQuery} $el An element.
+     */
+    focus: function ($el) {
+        if (
+            !$el[0] ||
+            !$el[0].selectize
+        ) {
+            return;
+        }
+
+        let selectize = $el[0].selectize;
+
+        selectize.focus();
+    },
+
+    /**
+     * @private
+     * @param {module:ui/multi-select~Options} options
+     * @return {module:ui/multi-select~Options}
+     */
+    applyDefaultOptions: function (options) {
+        options = Espo.Utils.clone(options);
+
+        let defaults = {
+            removeButton: true,
+            draggable: false,
+            selectOnTab: false,
+            delimiter: ':,:',
+            matchAnyWord: false,
+            allowCustomOptions: false,
+        };
+
+        for (let key in defaults) {
+            if (key in options) {
+                continue;
             }
 
-            $el.selectize(selectizeOptions);
-        },
+            options[key] = defaults[key];
+        }
 
-        /**
-         * Focus.
-         *
-         * @param {JQuery} $el An element.
-         */
-        focus: function ($el) {
-            if (
-                !$el[0] ||
-                !$el[0].selectize
-            ) {
-                return;
-            }
+        return options;
+    },
 
-            let selectize = $el[0].selectize;
+    /**
+     * @private
+     */
+    loadBypassCtrlEnterPlugin: function () {
+        if ('bypass_ctrl_enter' in Selectize.plugins) {
+            return;
+        }
 
-            selectize.focus();
-        },
+        const IS_MAC = /Mac/.test(navigator.userAgent);
 
-        /**
-         * @private
-         * @param {module:ui/multi-select~Options} options
-         * @return {module:ui/multi-select~Options}
-         */
-        applyDefaultOptions: function (options) {
-            options = Espo.Utils.clone(options);
+        Selectize.define('bypass_ctrl_enter', function (options) {
+            let self = this;
 
-            let defaults = {
-                removeButton: true,
-                draggable: false,
-                selectOnTab: false,
-                delimiter: ':,:',
-                matchAnyWord: false,
-                allowCustomOptions: false,
+            this.onKeyDown = (function() {
+                let original = self.onKeyDown;
+
+                return function (e) {
+                    if (e.code === 'Enter' && (IS_MAC ? e.metaKey : e.ctrlKey)) {
+                        return;
+                    }
+
+                    return original.apply(this, arguments);
+                };
+            })();
+        });
+    },
+
+    /**
+     * @private
+     */
+    loadRestoreOnBackspacePlugin: function () {
+        if ('restore_on_backspace_espo' in Selectize.plugins) {
+            return;
+        }
+
+        Selectize.define('restore_on_backspace_espo', function (options) {
+            options.text = options.text || function (option) {
+                return option[this.settings.labelField];
             };
 
-            for (let key in defaults) {
-                if (key in options) {
-                    continue;
-                }
+            let self = this;
 
-                options[key] = defaults[key];
-            }
+            this.onKeyDown = (function() {
+                let original = self.onKeyDown;
 
-            return options;
-        },
+                return function (e) {
+                    let index, option;
 
-        /**
-         * @private
-         */
-        loadBypassCtrlEnterPlugin: function () {
-            if ('bypass_ctrl_enter' in Selectize.plugins) {
-                return;
-            }
+                    if (
+                        e.code === 'Backspace' &&
+                        this.$control_input.val() === '' &&
+                        !this.$activeItems.length
+                    ) {
+                        index = this.caretPos - 1;
 
-            const IS_MAC = /Mac/.test(navigator.userAgent);
+                        if (index >= 0 && index < this.items.length) {
+                            option = this.options[this.items[index]];
 
-            Selectize.define('bypass_ctrl_enter', function (options) {
-                let self = this;
+                            option = {
+                                value: option.value,
+                                $order: option.$order,
+                                text: option.value,
+                            };
 
-                this.onKeyDown = (function() {
-                    let original = self.onKeyDown;
+                            if (this.deleteSelection(e)) {
+                                this.setTextboxValue(options.text.apply(this, [option]));
+                                this.refreshOptions(true);
+                            }
+
+                            e.preventDefault();
 
-                    return function (e) {
-                        if (e.code === 'Enter' && (IS_MAC ? e.metaKey : e.ctrlKey)) {
                             return;
                         }
+                    }
 
-                        return original.apply(this, arguments);
-                    };
-                })();
-            });
-        },
-
-        /**
-         * @private
-         */
-        loadRestoreOnBackspacePlugin: function () {
-            if ('restore_on_backspace_espo' in Selectize.plugins) {
-                return;
-            }
-
-            Selectize.define('restore_on_backspace_espo', function (options) {
-                options.text = options.text || function (option) {
-                    return option[this.settings.labelField];
+                    return original.apply(this, arguments);
                 };
+            })();
+        });
+    },
+};
 
-                let self = this;
-
-                this.onKeyDown = (function() {
-                    let original = self.onKeyDown;
-
-                    return function (e) {
-                        let index, option;
-
-                        if (
-                            e.code === 'Backspace' &&
-                            this.$control_input.val() === '' &&
-                            !this.$activeItems.length
-                        ) {
-                            index = this.caretPos - 1;
-
-                            if (index >= 0 && index < this.items.length) {
-                                option = this.options[this.items[index]];
-
-                                option = {
-                                    value: option.value,
-                                    $order: option.$order,
-                                    text: option.value,
-                                };
-
-                                if (this.deleteSelection(e)) {
-                                    this.setTextboxValue(options.text.apply(this, [option]));
-                                    this.refreshOptions(true);
-                                }
-
-                                e.preventDefault();
-
-                                return;
-                            }
-                        }
-
-                        return original.apply(this, arguments);
-                    };
-                })();
-            });
-        },
-    };
-
-    return MultiSelect;
-});
+export default MultiSelect;
diff --git a/client/src/ui/select.js b/client/src/ui/select.js
index 57f851401e..6d15dc0fcd 100644
--- a/client/src/ui/select.js
+++ b/client/src/ui/select.js
@@ -26,602 +26,603 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('ui/select', ['lib!Selectize'], (Selectize) => {
+/** @module module:ui/select */
 
+import Selectize from "lib!Selectize";
+
+/**
+ * @typedef module:ui/select~Options
+ * @type {Object}
+ * @property {boolean} [selectOnTab=false] To select on tab.
+ * @property {boolean} [matchAnyWord=false] To match any word when searching.
+ * @property {function(string, module:ui/select~OptionItemsCallback): void} [load] Loads additional items
+ *   when typing in search.
+ * @property {function(string, module:ui/select~OptionItemFull): Number} [score] A score function scoring
+ *   searched items.
+ * @property {'value'|'text'|'$order'|'$score'} [sortBy='$order'] Item sorting.
+ * @property {'asc'|'desc'} [sortDirection='asc'] Sort direction.
+ */
+
+/**
+ * @callback  module:ui/select~OptionItemsCallback
+ * @param {module:ui/select~OptionItem[]} list An option item list.
+ */
+
+/**
+ * @typedef module:ui/select~OptionItem
+ * @type {Object}
+ * @property {string} value A value.
+ * @property {string} text A label.
+ */
+
+/**
+ * @typedef module:ui/select~OptionItemFull
+ * @type {Object}
+ * @property {string} value A value.
+ * @property {string} text A label.
+ * @property {Number} $order An order index.
+ */
+
+/**
+ * @module ui/select
+ *
+ * Important. Selectize library is heavily customized to fix multitude of UIX issues.
+ * Upgrading is not advisable. Consider forking.
+ */
+const Select = {
     /**
-     * @typedef module:ui/select~Options
-     * @type {Object}
-     * @property {boolean} [selectOnTab=false] To select on tab.
-     * @property {boolean} [matchAnyWord=false] To match any word when searching.
-     * @property {function(string, module:ui/select~OptionItemsCallback): void} [load] Loads additional items
-     *   when typing in search.
-     * @property {function(string, module:ui/select~OptionItemFull): Number} [score] A score function scoring
-     *   searched items.
-     * @property {'value'|'text'|'$order'|'$score'} [sortBy='$order'] Item sorting.
-     * @property {'asc'|'desc'} [sortDirection='asc'] Sort direction.
+     * @param {JQuery} $el An element.
+     * @param {module:ui/select~Options} [options] Options.
      */
+    init: function ($el, options) {
+        options = Select.applyDefaultOptions(options || {});
 
-    /**
-     * @callback  module:ui/select~OptionItemsCallback
-     * @param {module:ui/select~OptionItem[]} list An option item list.
-     */
+        let plugins = [];
 
-    /**
-     * @typedef module:ui/select~OptionItem
-     * @type {Object}
-     * @property {string} value A value.
-     * @property {string} text A label.
-     */
+        Select.loadEspoSelectPlugin();
 
-    /**
-     * @typedef module:ui/select~OptionItemFull
-     * @type {Object}
-     * @property {string} value A value.
-     * @property {string} text A label.
-     * @property {Number} $order An order index.
-     */
+        plugins.push('espo_select');
 
-    /**
-     * @module ui/select
-     *
-     * Important. Selectize library is heavily customized to fix multitude of UIX issues.
-     * Upgrading is not advisable. Consider forking.
-     */
-    let Select = {
-        /**
-         * @param {JQuery} $el An element.
-         * @param {module:ui/select~Options} [options] Options.
-         */
-        init: function ($el, options) {
-            options = Select.applyDefaultOptions(options || {});
+        let itemClasses = {};
 
-            let plugins = [];
+        let allowedValues = $el.children().toArray().map(item => {
+            let value = item.getAttributeNode('value').value;
 
-            Select.loadEspoSelectPlugin();
-
-            plugins.push('espo_select');
-
-            let itemClasses = {};
-
-            let allowedValues = $el.children().toArray().map(item => {
-                let value = item.getAttributeNode('value').value;
-
-                if (item.classList) {
-                    itemClasses[value] = item.classList.toString();
-                }
-
-                return value;
-            });
-
-            let $relativeParent = null;
-
-            let $modalBody = $el.closest('.modal-body');
-
-            if ($modalBody.length) {
-                $relativeParent = $modalBody;
+            if (item.classList) {
+                itemClasses[value] = item.classList.toString();
             }
 
-            let selectizeOptions = {
-                sortField: [{field: options.sortBy, direction: options.sortDirection}],
-                load: options.load,
-                loadThrottle: 1,
-                plugins: plugins,
-                highlight: false,
-                selectOnTab: options.selectOnTab,
-                copyClassesToDropdown: false,
-                allowEmptyOption: allowedValues.includes(''),
-                showEmptyOptionInDropdown: true,
-                $relativeParent: $relativeParent,
-                render: {
-                    item: function (data) {
-                        return $('<div>')
-                            .addClass('item')
-                            .addClass(itemClasses[data.value] || '')
-                            .text(data.text)
-                            .get(0).outerHTML;
-                    },
-                    option: function (data) {
-                        let $div = $('<div>')
-                            .addClass('option')
-                            .addClass(data.value === '' ? 'selectize-dropdown-emptyoptionlabel' : '')
-                            .addClass(itemClasses[data.value] || '')
-                            .val(data.value)
-                            .text(data.text);
+            return value;
+        });
 
-                        if (data.text === '') {
-                            $div.html('&nbsp;');
-                        }
+        let $relativeParent = null;
 
-                        return $div.get(0).outerHTML;
-                    },
+        let $modalBody = $el.closest('.modal-body');
+
+        if ($modalBody.length) {
+            $relativeParent = $modalBody;
+        }
+
+        let selectizeOptions = {
+            sortField: [{field: options.sortBy, direction: options.sortDirection}],
+            load: options.load,
+            loadThrottle: 1,
+            plugins: plugins,
+            highlight: false,
+            selectOnTab: options.selectOnTab,
+            copyClassesToDropdown: false,
+            allowEmptyOption: allowedValues.includes(''),
+            showEmptyOptionInDropdown: true,
+            $relativeParent: $relativeParent,
+            render: {
+                item: function (data) {
+                    return $('<div>')
+                        .addClass('item')
+                        .addClass(itemClasses[data.value] || '')
+                        .text(data.text)
+                        .get(0).outerHTML;
                 },
-                onDelete: function (values) {
-                    while (values.length) {
-                        this.removeItem(values.pop(), true);
+                option: function (data) {
+                    let $div = $('<div>')
+                        .addClass('option')
+                        .addClass(data.value === '' ? 'selectize-dropdown-emptyoptionlabel' : '')
+                        .addClass(itemClasses[data.value] || '')
+                        .val(data.value)
+                        .text(data.text);
+
+                    if (data.text === '') {
+                        $div.html('&nbsp;');
                     }
 
-                    this.showInput();
-                    this.positionDropdown();
-                    this.refreshOptions(true);
+                    return $div.get(0).outerHTML;
                 },
-            };
-
-            if (!options.matchAnyWord) {
-                /** @this Selectize */
-                selectizeOptions.score = function (search) {
-                    let score = this.getScoreFunction(search);
-
-                    search = search.toLowerCase();
-
-                    return function (item) {
-                        if (item.text.toLowerCase().indexOf(search) === 0) {
-                            return score(item);
-                        }
-
-                        return 0;
-                    };
-                };
-            }
-
-            if (options.matchAnyWord) {
-                /** @this Selectize */
-                selectizeOptions.score = function (search) {
-                    let score = this.getScoreFunction(search);
-
-                    search = search.toLowerCase();
-
-                    return function (item) {
-                        let text = item.text.toLowerCase();
-
-                        if (
-                            !text.split(' ').find(item => item.startsWith(search)) &&
-                            !text.startsWith(search)
-                        ) {
-                            return 0;
-                        }
-
-                        return score(item);
-                    };
-                };
-            }
-
-            if (options.score) {
-                let score = options.score;
-
-                selectizeOptions.score = function (search) {
-                    return function (item) {
-                        return score(search, item);
-                    };
-                };
-            }
-
-            $el.selectize(selectizeOptions);
-        },
-
-        /**
-         * Focus.
-         *
-         * @param {JQuery} $el An element.
-         * @param {{noTrigger?: boolean}} [options] Options.
-         */
-        focus: function ($el, options) {
-            options = options || {};
-
-            if (
-                !$el[0] ||
-                !$el[0].selectize
-            ) {
-                return;
-            }
-
-            let selectize = $el[0].selectize;
-
-            if (options.noTrigger) {
-                selectize.focusNoTrigger = true;
-            }
-
-            selectize.focus();
-
-            if (options.noTrigger) {
-                setTimeout(() => selectize.focusNoTrigger = false, 100);
-            }
-        },
-
-        /**
-         * Set options.
-         *
-         * @param {JQuery} $el An element.
-         * @param {{value: string, text: string}[]} options Options.
-         */
-        setOptions: function ($el, options) {
-            let selectize = $el.get(0).selectize;
-
-            selectize.clearOptions(true);
-            selectize.load(callback => {
-                callback(
-                    options.map(item => {
-                        return {
-                            value: item.value,
-                            text: item.text || item.label,
-                        };
-                    })
-                );
-            });
-        },
-
-        /**
-         * Set value.
-         *
-         * @param {JQuery} $el An element.
-         * @param {string} value A value.
-         */
-        setValue: function ($el, value) {
-            let selectize = $el.get(0).selectize;
-
-            selectize.setValue(value, true);
-        },
-
-        /**
-         * Destroy.
-         *
-         * @param {JQuery} $el An element.
-         */
-        destroy: function ($el) {
-            if (!$el.length || !$el[0].selectize) {
-                return;
-            }
-
-            $el[0].selectize.destroy();
-        },
-
-        /**
-         * @private
-         * @param {module:ui/select~Options} options
-         * @return {module:ui/select~Options}
-         */
-        applyDefaultOptions: function (options) {
-            options = Espo.Utils.clone(options);
-
-            let defaults = {
-                selectOnTab: false,
-                matchAnyWord: false,
-                sortBy: '$order',
-                sortDirection: 'asc',
-            };
-
-            for (let key in defaults) {
-                if (key in options) {
-                    continue;
+            },
+            onDelete: function (values) {
+                while (values.length) {
+                    this.removeItem(values.pop(), true);
                 }
 
-                options[key] = defaults[key];
-            }
+                this.showInput();
+                this.positionDropdown();
+                this.refreshOptions(true);
+            },
+        };
 
-            return options;
-        },
+        if (!options.matchAnyWord) {
+            /** @this Selectize */
+            selectizeOptions.score = function (search) {
+                let score = this.getScoreFunction(search);
 
-        /**
-         * @private
-         */
-        loadEspoSelectPlugin: function () {
-            if ('espo_select' in Selectize.plugins) {
-                return;
-            }
+                search = search.toLowerCase();
 
-            const IS_MAC = /Mac/.test(navigator.userAgent);
-            const KEY_BACKSPACE = 8;
+                return function (item) {
+                    if (item.text.toLowerCase().indexOf(search) === 0) {
+                        return score(item);
+                    }
 
-            Selectize.define('espo_select', function () {
-                let self = this;
-
-                this.setup = (function () {
-                    let original = self.setup;
-
-                    return function () {
-                        original.apply(this, arguments);
-
-                        self.selectedValue = self.items[0];
-
-                        self.$dropdown
-                            .on('mouseup', '[data-selectable]', function () {
-                                $(document).off('mouseup.select');
-
-                                return self.onOptionSelect.apply(self, arguments);
-                            });
-
-                        self.$dropdown
-                            .on('mousedown', '[data-selectable]', function () {
-                                // Prevent issue when down inside, up outside.
-                                $(document).one('mouseup.select', function () {
-                                    self.focusOnControlSilently();
-                                });
-                            });
-
-
-                        self.$control_input.css({'width': '4px'});
-                    };
-                })();
-
-                this.focusOnControlSilently = function () {
-                    self.preventReOpenOnFocus = true;
-                    self.$control_input[0].focus();
-                    self.preventReOpenOnFocus = false;
+                    return 0;
                 };
+            };
+        }
 
-                /*this.positionDropdown = (function () {
-                    let original = self.positionDropdown;
+        if (options.matchAnyWord) {
+            /** @this Selectize */
+            selectizeOptions.score = function (search) {
+                let score = this.getScoreFunction(search);
 
-                    return function () {
-                        original.apply(this, arguments);
+                search = search.toLowerCase();
 
-                        this.$dropdown.css({margin: 'unset'});
+                return function (item) {
+                    let text = item.text.toLowerCase();
+
+                    if (
+                        !text.split(' ').find(item => item.startsWith(search)) &&
+                        !text.startsWith(search)
+                    ) {
+                        return 0;
+                    }
+
+                    return score(item);
+                };
+            };
+        }
+
+        if (options.score) {
+            let score = options.score;
+
+            selectizeOptions.score = function (search) {
+                return function (item) {
+                    return score(search, item);
+                };
+            };
+        }
+
+        $el.selectize(selectizeOptions);
+    },
+
+    /**
+     * Focus.
+     *
+     * @param {JQuery} $el An element.
+     * @param {{noTrigger?: boolean}} [options] Options.
+     */
+    focus: function ($el, options) {
+        options = options || {};
+
+        if (
+            !$el[0] ||
+            !$el[0].selectize
+        ) {
+            return;
+        }
+
+        let selectize = $el[0].selectize;
+
+        if (options.noTrigger) {
+            selectize.focusNoTrigger = true;
+        }
+
+        selectize.focus();
+
+        if (options.noTrigger) {
+            setTimeout(() => selectize.focusNoTrigger = false, 100);
+        }
+    },
+
+    /**
+     * Set options.
+     *
+     * @param {JQuery} $el An element.
+     * @param {{value: string, text: string}[]} options Options.
+     */
+    setOptions: function ($el, options) {
+        let selectize = $el.get(0).selectize;
+
+        selectize.clearOptions(true);
+        selectize.load(callback => {
+            callback(
+                options.map(item => {
+                    return {
+                        value: item.value,
+                        text: item.text || item.label,
                     };
-                })();*/
+                })
+            );
+        });
+    },
 
-                this.refreshOptions = (function () {
-                    let original = self.refreshOptions;
+    /**
+     * Set value.
+     *
+     * @param {JQuery} $el An element.
+     * @param {string} value A value.
+     */
+    setValue: function ($el, value) {
+        let selectize = $el.get(0).selectize;
 
-                    return function () {
-                        if (self.focusNoTrigger) {
-                            original.apply(this, [false]);
-                            return;
-                        }
+        selectize.setValue(value, true);
+    },
 
-                        original.apply(this, arguments);
-                    };
-                })();
+    /**
+     * Destroy.
+     *
+     * @param {JQuery} $el An element.
+     */
+    destroy: function ($el) {
+        if (!$el.length || !$el[0].selectize) {
+            return;
+        }
 
-                this.blur = (function () {
-                    let original = self.blur;
+        $el[0].selectize.destroy();
+    },
 
-                    return function () {
-                        // Prevent closing on mouse down.
-                        if (self.preventClose) {
-                            return;
-                        }
+    /**
+     * @private
+     * @param {module:ui/select~Options} options
+     * @return {module:ui/select~Options}
+     */
+    applyDefaultOptions: function (options) {
+        options = Espo.Utils.clone(options);
 
-                        original.apply(this, arguments);
-                    };
-                })();
+        let defaults = {
+            selectOnTab: false,
+            matchAnyWord: false,
+            sortBy: '$order',
+            sortDirection: 'asc',
+        };
 
-                this.close = (function () {
-                    let original = self.close;
+        for (let key in defaults) {
+            if (key in options) {
+                continue;
+            }
 
-                    return function () {
-                        if (self.preventClose) {
-                            return;
-                        }
+            options[key] = defaults[key];
+        }
 
-                        original.apply(this, arguments);
-                    };
-                })();
+        return options;
+    },
 
-                this.onOptionSelect = (function () {
-                    let original = self.onOptionSelect;
+    /**
+     * @private
+     */
+    loadEspoSelectPlugin: function () {
+        if ('espo_select' in Selectize.plugins) {
+            return;
+        }
 
-                    return function (e) {
-                        if (e.type === 'mousedown' || e.type === 'click') {
-                            self.preventClose = true;
-                            setTimeout(() => self.preventClose = false, 100);
+        const IS_MAC = /Mac/.test(navigator.userAgent);
+        const KEY_BACKSPACE = 8;
 
-                            return;
-                        }
+        Selectize.define('espo_select', function () {
+            let self = this;
 
-                        self.preventClose = false;
+            this.setup = (function () {
+                let original = self.setup;
 
-                        if (e.type === 'mouseup') {
-                            setTimeout(() => self.focusOnControlSilently(), 50);
-                        }
+                return function () {
+                    original.apply(this, arguments);
 
-                        original.apply(this, arguments);
+                    self.selectedValue = self.items[0];
 
-                        self.selectedValue = $(e.currentTarget).attr('data-value');
-                    };
-                })();
+                    self.$dropdown
+                        .on('mouseup', '[data-selectable]', function () {
+                            $(document).off('mouseup.select');
 
-                this.open = (function() {
-                    let original = self.open;
+                            return self.onOptionSelect.apply(self, arguments);
+                        });
 
-                    return function () {
-                        let toProcess = !(self.isLocked || self.isOpen);
+                    self.$dropdown
+                        .on('mousedown', '[data-selectable]', function () {
+                            // Prevent issue when down inside, up outside.
+                            $(document).one('mouseup.select', function () {
+                                self.focusOnControlSilently();
+                            });
+                        });
 
-                        original.apply(this, arguments);
 
-                        if (!toProcess) {
-                            return;
-                        }
+                    self.$control_input.css({'width': '4px'});
+                };
+            })();
 
-                        let $dropdownContent = self.$dropdown.children().first();
-                        let $selected = $dropdownContent.find('.selected');
+            this.focusOnControlSilently = function () {
+                self.preventReOpenOnFocus = true;
+                self.$control_input[0].focus();
+                self.preventReOpenOnFocus = false;
+            };
 
-                        if (!$selected.length) {
-                            return;
-                        }
+            /*this.positionDropdown = (function () {
+                let original = self.positionDropdown;
 
-                        let scrollTo = $selected.get(0).offsetTop - $dropdownContent.get(0).clientHeight;
-                        scrollTo = scrollTo >= 0 ? scrollTo : 0;
+                return function () {
+                    original.apply(this, arguments);
 
-                        $dropdownContent
-                            .find('.selectize-dropdown-content')
-                            .scrollTop(scrollTo);
-                    };
-                })();
+                    this.$dropdown.css({margin: 'unset'});
+                };
+            })();*/
 
-                this.onMouseDown = (function() {
-                    let original = self.onMouseDown;
+            this.refreshOptions = (function () {
+                let original = self.refreshOptions;
 
-                    return function (e) {
-                        // Prevent flicking when clicking on input.
-                        if (!self.isOpen && !self.isInputHidden && self.$control_input.val()) {
-                            return;
-                        }
-
-                        if (self.isOpen) {
-                            self.closedByMouseDown = true;
-                        }
-
-                        return original.apply(this, arguments);
-                    };
-                })();
-
-                this.onFocus = (function() {
-                    let original = self.onFocus;
-
-                    return function (e) {
-                        if (self.preventReOpenOnFocus) {
-                            return;
-                        }
-
-                        if (self.closedByMouseDown) {
-                            self.closedByMouseDown = false;
-
-                            return;
-                        }
-
-                        self.closedByMouseDown = false;
-
-                        return original.apply(this, arguments);
-                    };
-                })();
-
-                this.restoreSelectedValue = function () {
-                    if (this.preventRevertLoop) {
+                return function () {
+                    if (self.focusNoTrigger) {
+                        original.apply(this, [false]);
                         return;
                     }
 
-                    this.preventRevertLoop = true;
-                    setTimeout(() => this.preventRevertLoop = false, 10);
+                    original.apply(this, arguments);
+                };
+            })();
 
-                    this.setValue(this.selectedValue, true);
+            this.blur = (function () {
+                let original = self.blur;
+
+                return function () {
+                    // Prevent closing on mouse down.
+                    if (self.preventClose) {
+                        return;
+                    }
+
+                    original.apply(this, arguments);
+                };
+            })();
+
+            this.close = (function () {
+                let original = self.close;
+
+                return function () {
+                    if (self.preventClose) {
+                        return;
+                    }
+
+                    original.apply(this, arguments);
+                };
+            })();
+
+            this.onOptionSelect = (function () {
+                let original = self.onOptionSelect;
+
+                return function (e) {
+                    if (e.type === 'mousedown' || e.type === 'click') {
+                        self.preventClose = true;
+                        setTimeout(() => self.preventClose = false, 100);
+
+                        return;
+                    }
+
+                    self.preventClose = false;
+
+                    if (e.type === 'mouseup') {
+                        setTimeout(() => self.focusOnControlSilently(), 50);
+                    }
+
+                    original.apply(this, arguments);
+
+                    self.selectedValue = $(e.currentTarget).attr('data-value');
+                };
+            })();
+
+            this.open = (function() {
+                let original = self.open;
+
+                return function () {
+                    let toProcess = !(self.isLocked || self.isOpen);
+
+                    original.apply(this, arguments);
+
+                    if (!toProcess) {
+                        return;
+                    }
+
+                    let $dropdownContent = self.$dropdown.children().first();
+                    let $selected = $dropdownContent.find('.selected');
+
+                    if (!$selected.length) {
+                        return;
+                    }
+
+                    let scrollTo = $selected.get(0).offsetTop - $dropdownContent.get(0).clientHeight;
+                    scrollTo = scrollTo >= 0 ? scrollTo : 0;
+
+                    $dropdownContent
+                        .find('.selectize-dropdown-content')
+                        .scrollTop(scrollTo);
+                };
+            })();
+
+            this.onMouseDown = (function() {
+                let original = self.onMouseDown;
+
+                return function (e) {
+                    // Prevent flicking when clicking on input.
+                    if (!self.isOpen && !self.isInputHidden && self.$control_input.val()) {
+                        return;
+                    }
+
+                    if (self.isOpen) {
+                        self.closedByMouseDown = true;
+                    }
+
+                    return original.apply(this, arguments);
+                };
+            })();
+
+            this.onFocus = (function() {
+                let original = self.onFocus;
+
+                return function (e) {
+                    if (self.preventReOpenOnFocus) {
+                        return;
+                    }
+
+                    if (self.closedByMouseDown) {
+                        self.closedByMouseDown = false;
+
+                        return;
+                    }
+
+                    self.closedByMouseDown = false;
+
+                    return original.apply(this, arguments);
+                };
+            })();
+
+            this.restoreSelectedValue = function () {
+                if (this.preventRevertLoop) {
+                    return;
+                }
+
+                this.preventRevertLoop = true;
+                setTimeout(() => this.preventRevertLoop = false, 10);
+
+                this.setValue(this.selectedValue, true);
+            };
+
+            this.onBlur = (function() {
+                let original = self.onBlur;
+
+                return function () {
+                    // Prevent closing on mouse down.
+                    if (self.preventClose) {
+                        return;
+                    }
+
+                    self.restoreSelectedValue();
+
+                    self.$control_input.css({width: '4px'});
+
+                    return original.apply(this, arguments);
+                };
+            })();
+
+            this.onKeyDown = (function() {
+                let original = self.onKeyDown;
+
+                return function (e) {
+                    if (IS_MAC ? e.metaKey : e.ctrlKey) {
+                        if (!self.items.length) {
+                            self.restoreSelectedValue();
+                            self.focus();
+                        }
+
+                        return;
+                    }
+
+                    if (e.code === 'Escape') {
+                        if (self.isOpen || !self.isInputHidden) {
+                            e.stopPropagation();
+                        }
+
+                        if (self.isOpen) {
+                            self.close();
+                        }
+
+                        if (!self.isInputHidden) {
+                            self.hideInput();
+                        }
+
+                        self.addItem(this.selectedValue, true);
+                    }
+
+                    if (self.isFull() || self.isInputHidden) {
+                        if (
+                            e.key.length === 1 &&
+                            (
+                                e.code.match(/Key[A-Z]/i) ||
+                                e.key.match(/[0-9]/) ||
+                                RegExp(/^\p{L}/, 'u').test(e.key) // is letter
+                            )
+                        ) {
+                            let keyCode = e.keyCode;
+                            e.keyCode = KEY_BACKSPACE;
+                            self.deleteSelection(e);
+                            e.keyCode = keyCode;
+
+                            self.$control_input.width(15);
+                        }
+                    }
+
+                    return original.apply(this, arguments);
+                };
+            })();
+
+            this.positionDropdown = (function() {
+                const POSITION = {
+                    top: 'top',
+                    bottom: 'bottom',
                 };
 
-                this.onBlur = (function() {
-                    let original = self.onBlur;
+                return function() {
+                    let $control = self.$control;
 
-                    return function () {
-                        // Prevent closing on mouse down.
-                        if (self.preventClose) {
-                            return;
-                        }
+                    let offset = this.settings.dropdownParent === 'body' ?
+                        $control.offset() :
+                        $control.position();
 
-                        self.restoreSelectedValue();
+                    offset.top += $control.outerHeight(true);
 
-                        self.$control_input.css({width: '4px'});
+                    let dropdownHeight = self.$dropdown.prop('scrollHeight') + 5;
+                    let controlPosTop = self.$control.get(0).getBoundingClientRect().top;
+                    let wrapperHeight = self.$wrapper.height();
 
-                        return original.apply(this, arguments);
-                    };
-                })();
+                    let controlPosBottom = self.$control.get(0).getBoundingClientRect().bottom;
 
-                this.onKeyDown = (function() {
-                    let original = self.onKeyDown;
+                    let boundaryTop = !this.settings.$relativeParent ? 0 :
+                        this.settings.$relativeParent.get(0).getBoundingClientRect().top;
 
-                    return function (e) {
-                        if (IS_MAC ? e.metaKey : e.ctrlKey) {
-                            if (!self.items.length) {
-                                self.restoreSelectedValue();
-                                self.focus();
-                            }
+                    let position =
+                        controlPosTop + dropdownHeight + wrapperHeight > window.innerHeight &&
+                        controlPosBottom - dropdownHeight - wrapperHeight >= boundaryTop ?
+                            POSITION.top :
+                            POSITION.bottom;
 
-                            return;
-                        }
-
-                        if (e.code === 'Escape') {
-                            if (self.isOpen || !self.isInputHidden) {
-                                e.stopPropagation();
-                            }
-
-                            if (self.isOpen) {
-                                self.close();
-                            }
-
-                            if (!self.isInputHidden) {
-                                self.hideInput();
-                            }
-
-                            self.addItem(this.selectedValue, true);
-                        }
-
-                        if (self.isFull() || self.isInputHidden) {
-                            if (
-                                e.key.length === 1 &&
-                                (
-                                    e.code.match(/Key[A-Z]/i) ||
-                                    e.key.match(/[0-9]/) ||
-                                    RegExp(/^\p{L}/, 'u').test(e.key) // is letter
-                                )
-                            ) {
-                                let keyCode = e.keyCode;
-                                e.keyCode = KEY_BACKSPACE;
-                                self.deleteSelection(e);
-                                e.keyCode = keyCode;
-
-                                self.$control_input.width(15);
-                            }
-                        }
-
-                        return original.apply(this, arguments);
-                    };
-                })();
-
-                this.positionDropdown = (function() {
-                    const POSITION = {
-                        top: 'top',
-                        bottom: 'bottom',
+                    let styles = {
+                        width: $control.outerWidth(),
+                        left: offset.left,
                     };
 
-                    return function() {
-                        let $control = self.$control;
+                    if (position === POSITION.top) {
+                        Object.assign(styles, {
+                            bottom: offset.top,
+                            top: 'unset',
+                            margin: '0 0 0 0',
+                        });
 
-                        let offset = this.settings.dropdownParent === 'body' ?
-                            $control.offset() :
-                            $control.position();
+                        self.$dropdown.addClass('selectize-position-top');
+                    } else {
+                        Object.assign(styles, {
+                            top: offset.top,
+                            bottom: 'unset',
+                            margin: '0 0 0 0',
+                        });
 
-                        offset.top += $control.outerHeight(true);
-
-                        let dropdownHeight = self.$dropdown.prop('scrollHeight') + 5;
-                        let controlPosTop = self.$control.get(0).getBoundingClientRect().top;
-                        let wrapperHeight = self.$wrapper.height();
-
-                        let controlPosBottom = self.$control.get(0).getBoundingClientRect().bottom;
-
-                        let boundaryTop = !this.settings.$relativeParent ? 0 :
-                            this.settings.$relativeParent.get(0).getBoundingClientRect().top;
-
-                        let position =
-                            controlPosTop + dropdownHeight + wrapperHeight > window.innerHeight &&
-                            controlPosBottom - dropdownHeight - wrapperHeight >= boundaryTop ?
-                                POSITION.top :
-                                POSITION.bottom;
-
-                        let styles = {
-                            width: $control.outerWidth(),
-                            left: offset.left,
-                        };
-
-                        if (position === POSITION.top) {
-                            Object.assign(styles, {
-                                bottom: offset.top,
-                                top: 'unset',
-                                margin: '0 0 0 0',
-                            });
-
-                            self.$dropdown.addClass('selectize-position-top');
-                        } else {
-                            Object.assign(styles, {
-                                top: offset.top,
-                                bottom: 'unset',
-                                margin: '0 0 0 0',
-                            });
-
-                            self.$dropdown.removeClass('selectize-position-top');
-                        }
-
-                        self.$dropdown.css(styles);
+                        self.$dropdown.removeClass('selectize-position-top');
                     }
-                })();
-            });
-        },
-    };
 
-    return Select;
-});
+                    self.$dropdown.css(styles);
+                }
+            })();
+        });
+    },
+};
+
+export default Select;
diff --git a/client/src/utils.js b/client/src/utils.js
index 7800078e26..dc1d4dcfef 100644
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -26,607 +26,603 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-/**
- * @module utils
- */
-define('utils', [], function () {
+/** @module utils */
 
-    const IS_MAC = /Mac/.test(navigator.userAgent);
+const IS_MAC = /Mac/.test(navigator.userAgent);
+
+/**
+ * Utility functions.
+ */
+Espo.Utils = {
 
     /**
-     * Utility functions.
+     * Process a view event action.
+     *
+     * @param {module:view} viewObject A view.
+     * @param {JQueryKeyEventObject} e An event.
+     * @param {string} [action] An action. If not specified, will be fetched from a target element.
+     * @param {string} [handler] A handler name.
      */
-    Espo.Utils = {
+    handleAction: function (viewObject, e, action, handler) {
+        let $target = $(e.currentTarget);
 
-        /**
-         * Process a view event action.
-         *
-         * @param {module:view.Class} viewObject A view.
-         * @param {JQueryKeyEventObject} e An event.
-         * @param {string} [action] An action. If not specified, will be fetched from a target element.
-         * @param {string} [handler] A handler name.
-         */
-        handleAction: function (viewObject, e, action, handler) {
-            let $target = $(e.currentTarget);
+        action = action || $target.data('action');
 
-            action = action || $target.data('action');
+        let fired = false;
 
-            let fired = false;
+        if (!action) {
+            return;
+        }
 
-            if (!action) {
+        if (e.ctrlKey || e.metaKey || e.shiftKey) {
+            let href = $target.attr('href');
+
+            if (href && href !== 'javascript:') {
                 return;
             }
+        }
 
-            if (e.ctrlKey || e.metaKey || e.shiftKey) {
-                let href = $target.attr('href');
+        let data = $target.data();
+        let method = 'action' + Espo.Utils.upperCaseFirst(action);
 
-                if (href && href !== 'javascript:') {
-                    return;
-                }
+        handler = handler || data.handler;
+
+        if (typeof viewObject[method] === 'function') {
+            viewObject[method].call(viewObject, data, e);
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            fired = true;
+        }
+        else if (handler) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            fired = true;
+
+            Espo.loader.require(handler, Handler => {
+                let handler = new Handler(viewObject);
+
+                handler[method].call(handler, data, e);
+            });
+        }
+
+        if (!fired) {
+            return;
+        }
+
+        let $dropdown = $target.closest('.dropdown-menu');
+
+        if (!$dropdown.length) {
+            return;
+        }
+
+        let $dropdownToggle = $dropdown.parent().find('[data-toggle="dropdown"]');
+
+        if (!$dropdownToggle.length) {
+            return;
+        }
+
+        let isDisabled = false;
+
+        if ($dropdownToggle.attr('disabled')) {
+            isDisabled = true;
+
+            $dropdownToggle.removeAttr('disabled').removeClass('disabled');
+        }
+
+        $dropdownToggle.dropdown('toggle');
+
+        $dropdownToggle.focus();
+
+        if (isDisabled) {
+            $dropdownToggle.attr('disabled', 'disabled').addClass('disabled');
+        }
+    },
+
+    /**
+     * @typedef {Object} Espo.Util~ActionAvailabilityDefs
+     *
+     * @property {string|null} [configCheck] A config path to check. Path items are separated
+     *   by the dot. If a config value is not empty, then the action is allowed.
+     *   The `!` prefix reverses the check.
+     */
+
+    /**
+     * Check action availability.
+     *
+     * @param {module:view-helper} helper A view helper.
+     * @param {Espo.Utils~ActionAvailabilityDefs} item Definitions.
+     * @returns {boolean}
+     */
+    checkActionAvailability: function (helper, item) {
+        let config = helper.config;
+
+        if (item.configCheck) {
+            let configCheck = item.configCheck;
+
+            let opposite = false;
+
+            if (configCheck.substring(0, 1) === '!') {
+                opposite = true;
+
+                configCheck = configCheck.substring(1);
             }
 
-            let data = $target.data();
-            let method = 'action' + Espo.Utils.upperCaseFirst(action);
+            let configCheckResult = config.getByPath(configCheck.split('.'));
 
-            handler = handler || data.handler;
-
-            if (typeof viewObject[method] === 'function') {
-                viewObject[method].call(viewObject, data, e);
-
-                e.preventDefault();
-                e.stopPropagation();
-
-                fired = true;
-            }
-            else if (handler) {
-                e.preventDefault();
-                e.stopPropagation();
-
-                fired = true;
-
-                require(handler, function (Handler) {
-                    let handler = new Handler(viewObject);
-
-                    handler[method].call(handler, data, e);
-                });
+            if (opposite) {
+                configCheckResult = !configCheckResult;
             }
 
-            if (!fired) {
-                return;
+            if (!configCheckResult) {
+                return false;
             }
+        }
 
-            let $dropdown = $target.closest('.dropdown-menu');
+        return true;
+    },
 
-            if (!$dropdown.length) {
-                return;
-            }
+    /**
+     * @typedef {Object} Espo.Utils~ActionAccessDefs
+     *
+     * @property {'create'|'read'|'edit'|'stream'|'delete'|null} acl An ACL action to check.
+     * @property {string|null} [aclScope] A scope to check.
+     * @property {string|null} [scope] Deprecated. Use `aclScope`.
+     */
 
-            let $dropdownToggle = $dropdown.parent().find('[data-toggle="dropdown"]');
+    /**
+     * Check access to an action.
+     *
+     * @param {module:acl-manager} acl An ACL manager.
+     * @param {string|module:model|null} [obj] A scope or a model.
+     * @param {Espo.Utils~ActionAccessDefs} item Definitions.
+     * @param {boolean} [isPrecise=false] To return `null` if not enough data is set in a model.
+     *   E.g. the `teams` field is not yet loaded.
+     * @returns {boolean|null}
+     */
+    checkActionAccess: function (acl, obj, item, isPrecise) {
+        let hasAccess = true;
 
-            if (!$dropdownToggle.length) {
-                return;
-            }
-
-            let isDisabled = false;
-
-            if ($dropdownToggle.attr('disabled')) {
-                isDisabled = true;
-
-                $dropdownToggle.removeAttr('disabled').removeClass('disabled');
-            }
-
-            $dropdownToggle.dropdown('toggle');
-
-            $dropdownToggle.focus();
-
-            if (isDisabled) {
-                $dropdownToggle.attr('disabled', 'disabled').addClass('disabled');
-            }
-        },
-
-        /**
-         * @typedef {Object} module:utils~ActionAvailabilityDefs
-         *
-         * @property {string|null} [configCheck] A config path to check. Path items are separated
-         *   by the dot. If a config value is not empty, then the action is allowed.
-         *   The `!` prefix reverses the check.
-         */
-
-        /**
-         * Check action availability.
-         *
-         * @param {module:view-helper.Class} helper A view helper.
-         * @param {module:utils~ActionAvailabilityDefs} item Definitions.
-         * @returns {boolean}
-         */
-        checkActionAvailability: function (helper, item) {
-            let config = helper.config;
-
-            if (item.configCheck) {
-                let configCheck = item.configCheck;
-
-                let opposite = false;
-
-                if (configCheck.substring(0, 1) === '!') {
-                    opposite = true;
-
-                    configCheck = configCheck.substring(1);
-                }
-
-                let configCheckResult = config.getByPath(configCheck.split('.'));
-
-                if (opposite) {
-                    configCheckResult = !configCheckResult;
-                }
-
-                if (!configCheckResult) {
-                    return false;
-                }
-            }
-
-            return true;
-        },
-
-        /**
-         * @typedef {Object} module:utils~ActionAccessDefs
-         *
-         * @property {'create'|'read'|'edit'|'stream'|'delete'|null} acl An ACL action to check.
-         * @property {string|null} [aclScope] A scope to check.
-         * @property {string|null} [scope] Deprecated. Use `aclScope`.
-         */
-
-        /**
-         * Check access to an action.
-         *
-         * @param {module:acl-manager.Class} acl An ACL manager.
-         * @param {string|module:model.Class|null} [obj] A scope or a model.
-         * @param {module:utils~ActionAccessDefs} item Definitions.
-         * @param {boolean} [isPrecise=false] To return `null` if not enough data is set in a model.
-         *   E.g. the `teams` field is not yet loaded.
-         * @returns {boolean|null}
-         */
-        checkActionAccess: function (acl, obj, item, isPrecise) {
-            let hasAccess = true;
-
-            if (item.acl) {
-                if (!item.aclScope) {
-                    if (obj) {
-                        if (typeof obj === 'string' || obj instanceof String) {
-                            hasAccess = acl.check(obj, item.acl);
-                        }
-                        else {
-                            hasAccess = acl.checkModel(obj, item.acl, isPrecise);
-                        }
+        if (item.acl) {
+            if (!item.aclScope) {
+                if (obj) {
+                    if (typeof obj === 'string' || obj instanceof String) {
+                        hasAccess = acl.check(obj, item.acl);
                     }
                     else {
-                        hasAccess = acl.check(item.scope, item.acl);
+                        hasAccess = acl.checkModel(obj, item.acl, isPrecise);
                     }
                 }
                 else {
-                    hasAccess = acl.check(item.aclScope, item.acl);
+                    hasAccess = acl.check(item.scope, item.acl);
                 }
             }
-            else if (item.aclScope) {
-                hasAccess = acl.checkScope(item.aclScope);
+            else {
+                hasAccess = acl.check(item.aclScope, item.acl);
             }
+        }
+        else if (item.aclScope) {
+            hasAccess = acl.checkScope(item.aclScope);
+        }
 
-            return hasAccess;
-        },
+        return hasAccess;
+    },
 
-        /**
-         * @typedef {Object} module:utils~AccessDefs
-         *
-         * @property {'create'|'read'|'edit'|'stream'|'delete'|null} action An ACL action to check.
-         * @property {string|null} [scope] A scope to check.
-         * @property {string[]} [portalIdList] A portal ID list. To check whether a user in one of portals.
-         * @property {string[]} [teamIdList] A team ID list. To check whether a user in one of teams.
-         * @property {boolean} [isPortalOnly=false] Allow for portal users only.
-         * @property {boolean} [inPortalDisabled=false] Disable for portal users.
-         * @property {boolean} [isAdminOnly=false] Allow for admin users only.
-         */
-
-        /**
-         * Check access to an action.
-         *
-         * @param {module:utils~AccessDefs[]} dataList List of definitions.
-         * @param {module:acl-manager.Class} acl An ACL manager.
-         * @param {module:models/user.Class} user A user.
-         * @param {module:model.Class|null} [entity] A model.
-         * @param {boolean} [allowAllForAdmin=false] Allow all for an admin.
-         * @returns {boolean}
-         */
-        checkAccessDataList: function (dataList, acl, user, entity, allowAllForAdmin) {
-            if (!dataList || !dataList.length) {
-                return true;
-            }
-
-            for (var i in dataList) {
-                var item = dataList[i];
-
-                if (item.scope) {
-                    if (item.action) {
-                        if (!acl.check(item.scope, item.action)) {
-                            return false;
-                        }
-                    } else {
-                        if (!acl.checkScope(item.scope)) {
-                            return false;
-                        }
-                    }
-                } else if (item.action) {
-                    if (entity) {
-                        if (!acl.check(entity, item.action)) {
-                            return false;
-                        }
-                    }
-                }
-
-                if (item.teamIdList) {
-                    if (user && !(allowAllForAdmin && user.isAdmin())) {
-                        var inTeam = false;
-
-                        user.getLinkMultipleIdList('teams').forEach(teamId => {
-                            if (~item.teamIdList.indexOf(teamId)) {
-                                inTeam = true;
-                            }
-                        });
-
-                        if (!inTeam) {
-                            return false;
-                        }
-                    }
-                }
-
-                if (item.portalIdList) {
-                    if (user && !(allowAllForAdmin && user.isAdmin())) {
-                        var inPortal = false;
-
-                        user.getLinkMultipleIdList('portals').forEach(portalId => {
-                            if (~item.portalIdList.indexOf(portalId)) {
-                                inPortal = true;
-                            }
-                        });
-
-                        if (!inPortal) {
-                            return false;
-                        }
-                    }
-                }
-
-                if (item.isPortalOnly) {
-                    if (user && !(allowAllForAdmin && user.isAdmin())) {
-                        if (!user.isPortal()) {
-                            return false;
-                        }
-                    }
-                }
-                else if (item.inPortalDisabled) {
-                    if (user && !(allowAllForAdmin && user.isAdmin())) {
-                        if (user.isPortal()) {
-                            return false;
-                        }
-                    }
-                }
-
-                if (item.isAdminOnly) {
-                    if (user) {
-                        if (!user.isAdmin()) {
-                            return false;
-                        }
-                    }
-                }
-            }
+    /**
+     * @typedef {Object} Espo.Util~AccessDefs
+     *
+     * @property {'create'|'read'|'edit'|'stream'|'delete'|null} action An ACL action to check.
+     * @property {string|null} [scope] A scope to check.
+     * @property {string[]} [portalIdList] A portal ID list. To check whether a user in one of portals.
+     * @property {string[]} [teamIdList] A team ID list. To check whether a user in one of teams.
+     * @property {boolean} [isPortalOnly=false] Allow for portal users only.
+     * @property {boolean} [inPortalDisabled=false] Disable for portal users.
+     * @property {boolean} [isAdminOnly=false] Allow for admin users only.
+     */
 
+    /**
+     * Check access to an action.
+     *
+     * @param {Espo.Utils~AccessDefs[]} dataList List of definitions.
+     * @param {module:acl-manager} acl An ACL manager.
+     * @param {module:models/user} user A user.
+     * @param {module:model|null} [entity] A model.
+     * @param {boolean} [allowAllForAdmin=false] Allow all for an admin.
+     * @returns {boolean}
+     */
+    checkAccessDataList: function (dataList, acl, user, entity, allowAllForAdmin) {
+        if (!dataList || !dataList.length) {
             return true;
-        },
+        }
 
-        /**
-         * @private
-         * @param {string} string
-         * @param {string} p
-         * @returns {string}
-         */
-        convert: function (string, p) {
-            if (string === null) {
-                return string;
-            }
+        for (var i in dataList) {
+            var item = dataList[i];
 
-            var result = string;
-
-            switch (p) {
-                case 'c-h':
-                case 'C-h':
-                    result = Espo.Utils.camelCaseToHyphen(string);
-
-                    break;
-
-                case 'h-c':
-                    result = Espo.Utils.hyphenToCamelCase(string);
-
-                    break;
-
-                case 'h-C':
-                    result = Espo.Utils.hyphenToUpperCamelCase(string);
-
-                    break;
-            }
-
-            return result;
-        },
-
-        /**
-         * Is object.
-         *
-         * @param {*} obj What to check.
-         * @returns {boolean}
-         */
-        isObject: function (obj) {
-            if (obj === null) {
-                return false;
-            }
-
-            return typeof obj === 'object';
-        },
-
-        /**
-         * A shallow clone.
-         *
-         * @param {*} obj An object.
-         * @returns {*}
-         */
-        clone: function (obj) {
-            if (!Espo.Utils.isObject(obj)) {
-                return obj;
-            }
-
-            return _.isArray(obj) ? obj.slice() : _.extend({}, obj);
-        },
-
-        /**
-         * A deep clone.
-         *
-         * @param {*} data An object.
-         * @returns {*}
-         */
-        cloneDeep: function (data) {
-            data = Espo.Utils.clone(data);
-
-            if (Espo.Utils.isObject(data) || _.isArray(data)) {
-                for (var i in data) {
-                    data[i] = this.cloneDeep(data[i]);
+            if (item.scope) {
+                if (item.action) {
+                    if (!acl.check(item.scope, item.action)) {
+                        return false;
+                    }
+                } else {
+                    if (!acl.checkScope(item.scope)) {
+                        return false;
+                    }
+                }
+            } else if (item.action) {
+                if (entity) {
+                    if (!acl.check(entity, item.action)) {
+                        return false;
+                    }
                 }
             }
 
-            return data;
-        },
+            if (item.teamIdList) {
+                if (user && !(allowAllForAdmin && user.isAdmin())) {
+                    var inTeam = false;
 
-        /**
-         * Compose a class name.
-         *
-         * @param {string} module A module.
-         * @param {string} name A name.
-         * @param {string} [location=''] A location.
-         * @return {string}
-         */
-        composeClassName: function (module, name, location) {
-            if (module) {
-                module = this.camelCaseToHyphen(module);
-                name = this.camelCaseToHyphen(name).split('.').join('/');
-                location = this.camelCaseToHyphen(location || '');
+                    user.getLinkMultipleIdList('teams').forEach(teamId => {
+                        if (~item.teamIdList.indexOf(teamId)) {
+                            inTeam = true;
+                        }
+                    });
 
-                return module + ':' + location + '/' + name;
-            }
-            else {
-                name = this.camelCaseToHyphen(name).split('.').join('/');
-
-                return location + '/' + name;
-            }
-        },
-
-        /**
-         * Compose a view class name.
-         *
-         * @param {string} name A name.
-         * @returns {string}
-         */
-        composeViewClassName: function (name) {
-            if (name && name[0] === name[0].toLowerCase()) {
-                return name;
-            }
-
-            if (name.indexOf(':') !== -1) {
-                var arr = name.split(':');
-                var modPart = arr[0];
-                var namePart = arr[1];
-
-                modPart = this.camelCaseToHyphen(modPart);
-                namePart = this.camelCaseToHyphen(namePart).split('.').join('/');
-
-                return modPart + ':' + 'views' + '/' + namePart;
-            }
-            else {
-                name = this.camelCaseToHyphen(name).split('.').join('/');
-
-                return 'views' + '/' + name;
-            }
-        },
-
-        /**
-         * Convert a string from camelCase to hyphen and replace dots with hyphens.
-         * Useful for setting to DOM attributes.
-         *
-         * @param {string} string A string.
-         * @returns {string}
-         */
-        toDom: function (string) {
-            return Espo.Utils.convert(string, 'c-h')
-                .split('.')
-                .join('-');
-        },
-
-        /**
-         * Lower-case a first character.
-         *
-         * @param  {string} string A string.
-         * @returns {string}
-         */
-        lowerCaseFirst: function (string) {
-            if (string === null) {
-                return string;
-            }
-
-            return string.charAt(0).toLowerCase() + string.slice(1);
-        },
-
-        /**
-         * Upper-case a first character.
-         *
-         * @param  {string} string A string.
-         * @returns {string}
-         */
-        upperCaseFirst: function (string) {
-            if (string === null) {
-                return string;
-            }
-
-            return string.charAt(0).toUpperCase() + string.slice(1);
-        },
-
-        /**
-         * Hyphen to UpperCamelCase.
-         *
-         * @param {string} string A string.
-         * @returns {string}
-         */
-        hyphenToUpperCamelCase: function (string) {
-            if (string === null) {
-                return string;
-            }
-
-            return this.upperCaseFirst(
-                string.replace(
-                    /-([a-z])/g,
-                    function (g) {
-                        return g[1].toUpperCase();
+                    if (!inTeam) {
+                        return false;
                     }
-                )
-            );
-        },
-
-        /**
-         * Hyphen to camelCase.
-         *
-         * @param {string} string A string.
-         * @returns {string}
-         */
-        hyphenToCamelCase: function (string) {
-            if (string === null) {
-                return string;
+                }
             }
 
-            return string.replace(
+            if (item.portalIdList) {
+                if (user && !(allowAllForAdmin && user.isAdmin())) {
+                    var inPortal = false;
+
+                    user.getLinkMultipleIdList('portals').forEach(portalId => {
+                        if (~item.portalIdList.indexOf(portalId)) {
+                            inPortal = true;
+                        }
+                    });
+
+                    if (!inPortal) {
+                        return false;
+                    }
+                }
+            }
+
+            if (item.isPortalOnly) {
+                if (user && !(allowAllForAdmin && user.isAdmin())) {
+                    if (!user.isPortal()) {
+                        return false;
+                    }
+                }
+            }
+            else if (item.inPortalDisabled) {
+                if (user && !(allowAllForAdmin && user.isAdmin())) {
+                    if (user.isPortal()) {
+                        return false;
+                    }
+                }
+            }
+
+            if (item.isAdminOnly) {
+                if (user) {
+                    if (!user.isAdmin()) {
+                        return false;
+                    }
+                }
+            }
+        }
+
+        return true;
+    },
+
+    /**
+     * @private
+     * @param {string} string
+     * @param {string} p
+     * @returns {string}
+     */
+    convert: function (string, p) {
+        if (string === null) {
+            return string;
+        }
+
+        var result = string;
+
+        switch (p) {
+            case 'c-h':
+            case 'C-h':
+                result = Espo.Utils.camelCaseToHyphen(string);
+
+                break;
+
+            case 'h-c':
+                result = Espo.Utils.hyphenToCamelCase(string);
+
+                break;
+
+            case 'h-C':
+                result = Espo.Utils.hyphenToUpperCamelCase(string);
+
+                break;
+        }
+
+        return result;
+    },
+
+    /**
+     * Is object.
+     *
+     * @param {*} obj What to check.
+     * @returns {boolean}
+     */
+    isObject: function (obj) {
+        if (obj === null) {
+            return false;
+        }
+
+        return typeof obj === 'object';
+    },
+
+    /**
+     * A shallow clone.
+     *
+     * @param {*} obj An object.
+     * @returns {*}
+     */
+    clone: function (obj) {
+        if (!Espo.Utils.isObject(obj)) {
+            return obj;
+        }
+
+        return _.isArray(obj) ? obj.slice() : _.extend({}, obj);
+    },
+
+    /**
+     * A deep clone.
+     *
+     * @param {*} data An object.
+     * @returns {*}
+     */
+    cloneDeep: function (data) {
+        data = Espo.Utils.clone(data);
+
+        if (Espo.Utils.isObject(data) || _.isArray(data)) {
+            for (var i in data) {
+                data[i] = this.cloneDeep(data[i]);
+            }
+        }
+
+        return data;
+    },
+
+    /**
+     * Compose a class name.
+     *
+     * @param {string} module A module.
+     * @param {string} name A name.
+     * @param {string} [location=''] A location.
+     * @return {string}
+     */
+    composeClassName: function (module, name, location) {
+        if (module) {
+            module = this.camelCaseToHyphen(module);
+            name = this.camelCaseToHyphen(name).split('.').join('/');
+            location = this.camelCaseToHyphen(location || '');
+
+            return module + ':' + location + '/' + name;
+        }
+        else {
+            name = this.camelCaseToHyphen(name).split('.').join('/');
+
+            return location + '/' + name;
+        }
+    },
+
+    /**
+     * Compose a view class name.
+     *
+     * @param {string} name A name.
+     * @returns {string}
+     */
+    composeViewClassName: function (name) {
+        if (name && name[0] === name[0].toLowerCase()) {
+            return name;
+        }
+
+        if (name.indexOf(':') !== -1) {
+            var arr = name.split(':');
+            var modPart = arr[0];
+            var namePart = arr[1];
+
+            modPart = this.camelCaseToHyphen(modPart);
+            namePart = this.camelCaseToHyphen(namePart).split('.').join('/');
+
+            return modPart + ':' + 'views' + '/' + namePart;
+        }
+        else {
+            name = this.camelCaseToHyphen(name).split('.').join('/');
+
+            return 'views' + '/' + name;
+        }
+    },
+
+    /**
+     * Convert a string from camelCase to hyphen and replace dots with hyphens.
+     * Useful for setting to DOM attributes.
+     *
+     * @param {string} string A string.
+     * @returns {string}
+     */
+    toDom: function (string) {
+        return Espo.Utils.convert(string, 'c-h')
+            .split('.')
+            .join('-');
+    },
+
+    /**
+     * Lower-case a first character.
+     *
+     * @param  {string} string A string.
+     * @returns {string}
+     */
+    lowerCaseFirst: function (string) {
+        if (string === null) {
+            return string;
+        }
+
+        return string.charAt(0).toLowerCase() + string.slice(1);
+    },
+
+    /**
+     * Upper-case a first character.
+     *
+     * @param  {string} string A string.
+     * @returns {string}
+     */
+    upperCaseFirst: function (string) {
+        if (string === null) {
+            return string;
+        }
+
+        return string.charAt(0).toUpperCase() + string.slice(1);
+    },
+
+    /**
+     * Hyphen to UpperCamelCase.
+     *
+     * @param {string} string A string.
+     * @returns {string}
+     */
+    hyphenToUpperCamelCase: function (string) {
+        if (string === null) {
+            return string;
+        }
+
+        return this.upperCaseFirst(
+            string.replace(
                 /-([a-z])/g,
                 function (g) {
                     return g[1].toUpperCase();
                 }
-            );
-        },
-
-        /**
-         * CamelCase to hyphen.
-         *
-         * @param {string} string A string.
-         * @returns {string}
-         */
-        camelCaseToHyphen: function (string) {
-            if (string === null) {
-                return string;
-            }
-
-            return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-        },
-
-        /**
-         * Trim an ending slash.
-         *
-         * @param {String} str A string.
-         * @returns {string}
-         */
-        trimSlash: function (str) {
-            if (str.slice(-1) === '/') {
-                return str.slice(0, -1);
-            }
-
-            return str;
-        },
-
-        /**
-         * Parse params in string URL options.
-         *
-         * @param {string} string An URL part.
-         * @returns {Object.<string,string>}
-         */
-        parseUrlOptionsParam: function (string) {
-            if (!string) {
-                return {};
-            }
-
-            if (string.indexOf('&') === -1 && string.indexOf('=') === -1) {
-                return {};
-            }
-
-            let options = {};
-
-            if (typeof string !== 'undefined') {
-                string.split('&').forEach(item => {
-                    let p = item.split('=');
-
-                    options[p[0]] = true;
-
-                    if (p.length > 1) {
-                        options[p[0]] = p[1];
-                    }
-                });
-            }
-
-            return options;
-        },
-
-        /**
-         * Key a key from a key-event.
-         *
-         * @param {JQueryKeyEventObject|KeyboardEvent} e A key event.
-         * @return {string}
-         */
-        getKeyFromKeyEvent: function (e) {
-            let key = e.code;
-
-            key = keyMap[key] || key;
-
-            if (e.shiftKey) {
-                key = 'Shift+' + key;
-            }
-
-            if (e.altKey) {
-                key = 'Alt+' + key;
-            }
-
-            if (IS_MAC ? e.metaKey : e.ctrlKey) {
-                key = 'Control+' + key;
-            }
-
-            return key;
-        },
-    };
-
-    const keyMap = {
-        'NumpadEnter': 'Enter',
-    };
+            )
+        );
+    },
 
     /**
-     * @deprecated Use `Espo.Utils`.
+     * Hyphen to camelCase.
+     *
+     * @param {string} string A string.
+     * @returns {string}
      */
-    Espo.utils = Espo.Utils;
+    hyphenToCamelCase: function (string) {
+        if (string === null) {
+            return string;
+        }
 
-    return Espo.Utils;
-});
+        return string.replace(
+            /-([a-z])/g,
+            function (g) {
+                return g[1].toUpperCase();
+            }
+        );
+    },
+
+    /**
+     * CamelCase to hyphen.
+     *
+     * @param {string} string A string.
+     * @returns {string}
+     */
+    camelCaseToHyphen: function (string) {
+        if (string === null) {
+            return string;
+        }
+
+        return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    },
+
+    /**
+     * Trim an ending slash.
+     *
+     * @param {String} str A string.
+     * @returns {string}
+     */
+    trimSlash: function (str) {
+        if (str.slice(-1) === '/') {
+            return str.slice(0, -1);
+        }
+
+        return str;
+    },
+
+    /**
+     * Parse params in string URL options.
+     *
+     * @param {string} string An URL part.
+     * @returns {Object.<string,string>}
+     */
+    parseUrlOptionsParam: function (string) {
+        if (!string) {
+            return {};
+        }
+
+        if (string.indexOf('&') === -1 && string.indexOf('=') === -1) {
+            return {};
+        }
+
+        let options = {};
+
+        if (typeof string !== 'undefined') {
+            string.split('&').forEach(item => {
+                let p = item.split('=');
+
+                options[p[0]] = true;
+
+                if (p.length > 1) {
+                    options[p[0]] = p[1];
+                }
+            });
+        }
+
+        return options;
+    },
+
+    /**
+     * Key a key from a key-event.
+     *
+     * @param {JQueryKeyEventObject|KeyboardEvent} e A key event.
+     * @return {string}
+     */
+    getKeyFromKeyEvent: function (e) {
+        let key = e.code;
+
+        key = keyMap[key] || key;
+
+        if (e.shiftKey) {
+            key = 'Shift+' + key;
+        }
+
+        if (e.altKey) {
+            key = 'Alt+' + key;
+        }
+
+        if (IS_MAC ? e.metaKey : e.ctrlKey) {
+            key = 'Control+' + key;
+        }
+
+        return key;
+    },
+};
+
+const keyMap = {
+    'NumpadEnter': 'Enter',
+};
+
+/**
+ * @deprecated Use `Espo.Utils`.
+ */
+Espo.utils = Espo.Utils;
+
+export default Espo.Utils;
diff --git a/client/src/view-helper.js b/client/src/view-helper.js
index 5ae093dd62..4309e31612 100644
--- a/client/src/view-helper.js
+++ b/client/src/view-helper.js
@@ -26,933 +26,935 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('view-helper', ['lib!marked', 'lib!dompurify', 'lib!handlebars'],
-function (marked, DOMPurify, /** typeof Handlebars */Handlebars) {
+/** @module view-helper */
+
+import {marked} from "lib!marked";
+import DOMPurify from "lib!dompurify";
+import Handlebars from "lib!handlebars";
+
+/**
+ * A view helper.
+ *
+ * @class
+ */
+const ViewHelper = function () {
+    this._registerHandlebarsHelpers();
 
     /**
-     * A view helper.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:view-helper
+     * @private
      */
-    let ViewHelper = function () {
-        this._registerHandlebarsHelpers();
-
-        /**
-         * @private
-         */
-        this.mdBeforeList = [
-            {
-                regex: /\&\#x60;\&\#x60;\&\#x60;\n?([\s\S]*?)\&\#x60;\&\#x60;\&\#x60;/g,
-                value: function (s, string) {
-                    return '<pre><code>' +string.replace(/\*/g, '&#42;').replace(/\~/g, '&#126;') +
-                        '</code></pre>';
-                }
-            },
-            {
-                regex: /\&\#x60;([\s\S]*?)\&\#x60;/g,
-                value: function (s, string) {
-                    return '<code>' + string.replace(/\*/g, '&#42;').replace(/\~/g, '&#126;') + '</code>';
-                }
+    this.mdBeforeList = [
+        {
+            regex: /&#x60;&#x60;&#x60;\n?([\s\S]*?)&#x60;&#x60;&#x60;/g,
+            value: function (s, string) {
+                return '<pre><code>' +string.replace(/\*/g, '&#42;').replace(/~/g, '&#126;') +
+                    '</code></pre>';
             }
-        ];
+        },
+        {
+            regex: /&#x60;([\s\S]*?)&#x60;/g,
+            value: function (s, string) {
+                return '<code>' + string.replace(/\*/g, '&#42;').replace(/~/g, '&#126;') + '</code>';
+            }
+        }
+    ];
 
-        marked.setOptions({
-            breaks: true,
-            tables: false,
+    marked.setOptions({
+        breaks: true,
+        tables: false,
+    });
+
+    DOMPurify.addHook('beforeSanitizeAttributes', function (node) {
+        if (node instanceof HTMLAnchorElement) {
+            if (node.getAttribute('target')) {
+                node.targetBlank = true;
+            }
+            else {
+                node.targetBlank = false;
+            }
+        }
+    });
+
+    DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+        if (node instanceof HTMLAnchorElement) {
+            if (node.targetBlank) {
+                node.setAttribute('target', '_blank');
+                node.setAttribute('rel', 'noopener noreferrer');
+            }
+            else {
+                node.removeAttribute('rel');
+            }
+        }
+    });
+};
+
+_.extend(ViewHelper.prototype, /** @lends ViewHelper# */{
+
+    /**
+     * A layout manager.
+     *
+     * @type {module:layout-manager}
+     */
+    layoutManager: null,
+
+    /**
+     * A config.
+     *
+     * @type {module:models/settings}
+     */
+    settings: null,
+
+    /**
+     * A config.
+     *
+     * @type {module:models/settings}
+     */
+    config: null,
+
+    /**
+     * A current user.
+     *
+     * @type {module:models/user}
+     */
+    user: null,
+
+    /**
+     * A preferences.
+     *
+     * @type {module:models/preferences}
+     */
+    preferences: null,
+
+    /**
+     * An ACL manager.
+     *
+     * @type {module:acl-manager}
+     */
+    acl: null,
+
+    /**
+     * A model factory.
+     *
+     * @type {module:model-factory}
+     */
+    modelFactory: null,
+
+    /**
+     * A collection factory.
+     *
+     * @type {module:collection-factory}
+     */
+    collectionFactory: null,
+
+    /**
+     * A router.
+     *
+     * @type {module:router}
+     */
+    router: null,
+
+    /**
+     * A storage.
+     *
+     * @type {module:storage}
+     */
+    storage: null,
+
+    /**
+     * A session storage.
+     *
+     * @type {module:session-storage}
+     */
+    sessionStorage: null,
+
+    /**
+     * A date-time util.
+     *
+     * @type {module:date-time}
+     */
+    dateTime: null,
+
+    /**
+     * A language.
+     *
+     * @type {module:language}
+     */
+    language: null,
+
+    /**
+     * A metadata.
+     *
+     * @type {module:metadata}
+     */
+    metadata: null,
+
+    /**
+     * A field-manager util.
+     *
+     * @type {module:field-manager}
+     */
+    fieldManager: null,
+
+    /**
+     * A cache.
+     *
+     * @type {module:cache}
+     */
+    cache: null,
+
+    /**
+     * A theme manager.
+     *
+     * @type {module:theme-manager}
+     */
+    themeManager: null,
+
+    /**
+     * A web-socket manager. Null if not enabled.
+     *
+     * @type {?module:web-socket-manager}
+     */
+    webSocketManager: null,
+
+    /**
+     * A number util.
+     *
+     * @type {module:number}
+     */
+    numberUtil: null,
+
+    /**
+     * A page-title util.
+     *
+     * @type {module:page-title}
+     */
+    pageTitle: null,
+
+    /**
+     * A broadcast channel.
+     *
+     * @type {?module:broadcast-channel}
+     */
+    broadcastChannel: null,
+
+    /**
+     * A base path.
+     *
+     * @type {string}
+     */
+    basePath: '',
+
+    /**
+     * Application parameters.
+     *
+     * @type {Object}
+     */
+    appParams: null,
+
+    /**
+     * @private
+     */
+    _registerHandlebarsHelpers: function () {
+        Handlebars.registerHelper('img', img => {
+            return new Handlebars.SafeString("<img src=\"img/" + img + "\">");
         });
 
-        DOMPurify.addHook('beforeSanitizeAttributes', function (node) {
-            if (node instanceof HTMLAnchorElement) {
-                if (node.getAttribute('target')) {
-                    node.targetBlank = true;
-                }
-                else {
-                    node.targetBlank = false;
-                }
+        Handlebars.registerHelper('prop', (object, name) => {
+            if (name in object) {
+                return object[name];
             }
         });
 
-        DOMPurify.addHook('afterSanitizeAttributes', function (node) {
-            if (node instanceof HTMLAnchorElement) {
-                if (node.targetBlank) {
-                    node.setAttribute('target', '_blank');
-                    node.setAttribute('rel', 'noopener noreferrer');
-                }
-                else {
-                    node.removeAttribute('rel');
+        Handlebars.registerHelper('var', (name, context, options) => {
+            if (typeof context === 'undefined') {
+                return null;
+            }
+
+            let contents = context[name];
+
+            if (options.hash.trim) {
+                contents = contents.trim();
+            }
+
+            return new Handlebars.SafeString(contents);
+        });
+
+        Handlebars.registerHelper('concat', function (left, right) {
+            return left + right;
+        });
+
+        Handlebars.registerHelper('ifEqual', function (left, right, options) {
+            if (left == right) {
+                return options.fn(this);
+            }
+
+            return options.inverse(this);
+        });
+
+        Handlebars.registerHelper('ifNotEqual', function (left, right, options) {
+            if (left != right) {
+                return options.fn(this);
+            }
+
+            return options.inverse(this);
+        });
+
+        Handlebars.registerHelper('ifPropEquals', function (object, property, value, options) {
+            if (object[property] == value) {
+                return options.fn(this);
+            }
+
+            return options.inverse(this);
+        });
+
+        Handlebars.registerHelper('ifAttrEquals', function (model, attr, value, options) {
+            if (model.get(attr) == value) {
+                return options.fn(this);
+            }
+
+            return options.inverse(this);
+        });
+
+        Handlebars.registerHelper('ifAttrNotEmpty', function (model, attr, options) {
+            let value = model.get(attr);
+
+            if (value !== null && typeof value !== 'undefined') {
+                return options.fn(this);
+            }
+
+            return options.inverse(this);
+        });
+
+        Handlebars.registerHelper('ifNotEmptyHtml', function (value, options) {
+            value = value.replace(/\s/g, '');
+
+            if (value) {
+                return options.fn(this);
+            }
+
+            return options.inverse(this);
+        });
+
+        Handlebars.registerHelper('get', (model, name) => model.get(name));
+
+        Handlebars.registerHelper('length', arr => arr.length);
+
+        Handlebars.registerHelper('translate', (name, options) => {
+            let scope = options.hash.scope || null;
+            let category = options.hash.category || null;
+
+            if (name === 'null') {
+                return '';
+            }
+
+            return this.language.translate(name, category, scope);
+        });
+
+        Handlebars.registerHelper('dropdownItem', (name, options) => {
+            let scope = options.hash.scope || null;
+            let label = options.hash.label;
+            let labelTranslation = options.hash.labelTranslation;
+            let data = options.hash.data;
+            let hidden = options.hash.hidden;
+            let disabled = options.hash.disabled;
+            let title = options.hash.title;
+            let link = options.hash.link;
+            let action = options.hash.action || name;
+            let iconHtml = options.hash.iconHtml;
+
+            let html =
+                options.hash.html ||
+                options.hash.text ||
+                (
+                    labelTranslation ?
+                        this.language.translatePath(labelTranslation) :
+                        this.language.translate(label, 'labels', scope)
+                );
+
+            if (!options.hash.html) {
+                html = this.escapeString(html);
+            }
+
+            if (iconHtml) {
+                html = iconHtml + ' ' + html;
+            }
+
+            let $li = $('<li>')
+                .addClass(hidden ? 'hidden' : '')
+                .addClass(disabled ? 'disabled' : '');
+
+            let $a = $('<a>')
+                .attr('role', 'button')
+                .attr('tabindex', '0')
+                .addClass('action')
+                .html(html);
+
+            if (action) {
+                $a.attr('data-action', action);
+            }
+
+            $li.append($a);
+
+            link ?
+                $a.attr('href', link) :
+                $a.attr('role', 'button');
+
+            if (data) {
+                for (let key in data) {
+                    $a.attr('data-' + Espo.Utils.camelCaseToHyphen(key), data[key]);
                 }
             }
+
+            if (disabled) {
+                $li.attr('disabled', 'disabled');
+            }
+
+            if (title) {
+                $a.attr('title', title);
+            }
+
+            return new Handlebars.SafeString($li.get(0).outerHTML);
         });
-    };
 
-    _.extend(ViewHelper.prototype, /** @lends module:view-helper.Class# */{
+        Handlebars.registerHelper('button', (name, options) => {
+            let style = options.hash.style || 'default';
+            let scope = options.hash.scope || null;
+            let label = options.hash.label || name;
+            let labelTranslation = options.hash.labelTranslation;
+            let link = options.hash.link;
+            let iconHtml = options.hash.iconHtml;
 
-        /**
-         * A layout manager.
-         *
-         * @type {module:layout-manager.Class}
-         */
-        layoutManager: null,
+            let html =
+                options.hash.html ||
+                options.hash.text ||
+                (
+                    labelTranslation ?
+                        this.language.translatePath(labelTranslation) :
+                        this.language.translate(label, 'labels', scope)
+                );
 
-        /**
-         * A config.
-         *
-         * @type {module:models/settings.Class}
-         */
-        settings: null,
+            if (!options.hash.html) {
+                html = this.escapeString(html);
+            }
 
-        /**
-         * A config.
-         *
-         * @type {module:models/settings.Class}
-         */
-        config: null,
+            if (iconHtml) {
+                html = iconHtml + ' ' + html;
+            }
 
-        /**
-         * A current user.
-         *
-         * @type {module:models/user.Class}
-         */
-        user: null,
+            let tag = link ? '<a>' : '<button>';
 
-        /**
-         * A preferences.
-         *
-         * @type {module:models/preferences.Class}
-         */
-        preferences: null,
+            let $button = $(tag)
+                .addClass('btn action')
+                .addClass(options.hash.className || '')
+                .addClass(options.hash.hidden ? 'hidden' : '')
+                .addClass(options.hash.disabled ? 'disabled' : '')
+                .attr('data-action', name)
+                .addClass('btn-' + style)
+                .html(html);
 
-        /**
-         * An ACL manager.
-         *
-         * @type {module:acl-manager.Class}
-         */
-        acl: null,
+            link ?
+                $button.href(link) :
+                $button.attr('type', 'button')
 
-        /**
-         * A model factory.
-         *
-         * @type {module:model-factory.Class}
-         */
-        modelFactory: null,
+            if (options.hash.disabled) {
+                $button.attr('disabled', 'disabled');
+            }
 
-        /**
-         * A collection factory.
-         *
-         * @type {module:collection-factory.Class}
-         */
-        collectionFactory: null,
+            if (options.hash.title) {
+                $button.attr('title', options.hash.title);
+            }
 
-        /**
-         * A router.
-         *
-         * @type {module:router.Class}
-         */
-        router: null,
+            return new Handlebars.SafeString($button.get(0).outerHTML);
+        });
 
-        /**
-         * A storage.
-         *
-         * @type {module:storage.Class}
-         */
-        storage: null,
+        Handlebars.registerHelper('hyphen', (string) => {
+            return Espo.Utils.convert(string, 'c-h');
+        });
 
-        /**
-         * A session storage.
-         *
-         * @type {module:session-storage.Class}
-         */
-        sessionStorage: null,
+        Handlebars.registerHelper('toDom', (string) => {
+            return Espo.Utils.toDom(string);
+        });
 
-        /**
-         * A date-time util.
-         *
-         * @type {module:date-time.Class}
-         */
-        dateTime: null,
+        Handlebars.registerHelper('breaklines', (text) => {
+            text = Handlebars.Utils.escapeExpression(text || '');
+            text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
 
-        /**
-         * A language.
-         *
-         * @type {module:language.Class}
-         */
-        language: null,
+            return new Handlebars.SafeString(text);
+        });
 
-        /**
-         * A metadata.
-         *
-         * @type {module:metadata.Class}
-         */
-        metadata: null,
+        Handlebars.registerHelper('complexText', (text, options) => {
+            return this.transformMarkdownText(text, options.hash);
+        });
 
-        /**
-         * A field-manager util.
-         *
-         * @type {module:field-manager.Class}
-         */
-        fieldManager: null,
+        Handlebars.registerHelper('translateOption', (name, options) => {
+            let scope = options.hash.scope || null;
+            let field = options.hash.field || null;
 
-        /**
-         * A cache.
-         *
-         * @type {module:cache.Class}
-         */
-        cache: null,
+            if (!field) {
+                return '';
+            }
 
-        /**
-         * A theme manager.
-         *
-         * @type {module:theme-manager.Class}
-         */
-        themeManager: null,
+            let translationHash = options.hash.translatedOptions || null;
 
-        /**
-         * A web-socket manager. Null if not enabled.
-         *
-         * @type {?module:web-socket-manager.Class}
-         */
-        webSocketManager: null,
+            if (translationHash === null) {
+                translationHash = this.language.translate(field, 'options', scope) || {};
 
-        /**
-         * A number util.
-         *
-         * @type {module:number.Class}
-         */
-        numberUtil: null,
-
-        /**
-         * A page-title util.
-         *
-         * @type {module:page-title.Class}
-         */
-        pageTitle: null,
-
-        /**
-         * A broadcast channel.
-         *
-         * @type {?module:broadcast-channel.Class}
-         */
-        broadcastChannel: null,
-
-        /**
-         * A base path.
-         *
-         * @type {string}
-         */
-        basePath: '',
-
-        /**
-         * Application parameters.
-         *
-         * @type {Object}
-         */
-        appParams: null,
-
-        /**
-         * @private
-         */
-        _registerHandlebarsHelpers: function () {
-            Handlebars.registerHelper('img', img => {
-                return new Handlebars.SafeString("<img src=\"img/" + img + "\"></img>");
-            });
-
-            Handlebars.registerHelper('prop', (object, name) => {
-                if (name in object) {
-                    return object[name];
+                if (typeof translationHash !== 'object') {
+                    translationHash = {};
                 }
-            });
+            }
 
-            Handlebars.registerHelper('var', (name, context, options) => {
-                if (typeof context === 'undefined') {
-                    return null;
+            if (name === null) {
+                name = '';
+            }
+
+            return translationHash[name] || name;
+        });
+
+        Handlebars.registerHelper('options', (list, value, options) => {
+            if (typeof value === 'undefined') {
+                value = false;
+            }
+
+            list = list || [];
+
+            let html = '';
+
+            let multiple = (Object.prototype.toString.call(value) === '[object Array]');
+
+            let checkOption = name => {
+                if (multiple) {
+                    return value.indexOf(name) !== -1;
                 }
 
-                let contents = context[name];
+                return value === name || !value && !name;
+            };
 
-                if (options.hash.trim) {
-                    contents = contents.trim();
+            options.hash = options.hash || {};
+
+            let scope = options.hash.scope || false;
+            let category = options.hash.category || false;
+            let field = options.hash.field || false;
+            let styleMap = options.hash.styleMap || {};
+
+            if (!multiple && options.hash.includeMissingOption && (value || value === '')) {
+                if (!~list.indexOf(value)) {
+                    list = Espo.Utils.clone(list);
+
+                    list.push(value);
                 }
+            }
 
-                return new Handlebars.SafeString(contents);
-            });
+            let translationHash = options.hash.translationHash ||
+                options.hash.translatedOptions ||
+                null;
 
-            Handlebars.registerHelper('concat', function (left, right) {
-                return left + right;
-            });
-
-            Handlebars.registerHelper('ifEqual', function (left, right, options) {
-                if (left == right) {
-                    return options.fn(this);
-                }
-
-                return options.inverse(this);
-            });
-
-            Handlebars.registerHelper('ifNotEqual', function (left, right, options) {
-                if (left != right) {
-                    return options.fn(this);
-                }
-
-                return options.inverse(this);
-            });
-
-            Handlebars.registerHelper('ifPropEquals', function (object, property, value, options) {
-                if (object[property] == value) {
-                    return options.fn(this);
-                }
-
-                return options.inverse(this);
-            });
-
-            Handlebars.registerHelper('ifAttrEquals', function (model, attr, value, options) {
-                if (model.get(attr) == value) {
-                    return options.fn(this);
-                }
-
-                return options.inverse(this);
-            });
-
-            Handlebars.registerHelper('ifAttrNotEmpty', function (model, attr, options) {
-                let value = model.get(attr);
-
-                if (value !== null && typeof value !== 'undefined') {
-                    return options.fn(this);
-                }
-
-                return options.inverse(this);
-            });
-
-            Handlebars.registerHelper('ifNotEmptyHtml', function (value, options) {
-                value = value.replace(/\s/g, '');
-
-                if (value) {
-                    return options.fn(this);
-                }
-
-                return options.inverse(this);
-            });
-
-            Handlebars.registerHelper('get', (model, name) => model.get(name));
-
-            Handlebars.registerHelper('length', arr => arr.length);
-
-            Handlebars.registerHelper('translate', (name, options) => {
-                let scope = options.hash.scope || null;
-                let category = options.hash.category || null;
-
-                if (name === 'null') {
-                    return '';
-                }
-
-                return this.language.translate(name, category, scope);
-            });
-
-            Handlebars.registerHelper('dropdownItem', (name, options) => {
-                let scope = options.hash.scope || null;
-                let label = options.hash.label;
-                let labelTranslation = options.hash.labelTranslation;
-                let data = options.hash.data;
-                let hidden = options.hash.hidden;
-                let disabled = options.hash.disabled;
-                let title = options.hash.title;
-                let link = options.hash.link;
-                let action = options.hash.action || name;
-                let iconHtml = options.hash.iconHtml;
-
-                let html =
-                    options.hash.html ||
-                    options.hash.text ||
-                    (
-                        labelTranslation ?
-                            this.language.translatePath(labelTranslation) :
-                            this.language.translate(label, 'labels', scope)
-                    );
-
-                if (!options.hash.html) {
-                    html = this.escapeString(html);
-                }
-
-                if (iconHtml) {
-                    html = iconHtml + ' ' + html;
-                }
-
-                let $li = $('<li>')
-                    .addClass(hidden ? 'hidden' : '')
-                    .addClass(disabled ? 'disabled' : '');
-
-                let $a = $('<a>')
-                    .attr('role', 'button')
-                    .attr('tabindex', '0')
-                    .addClass('action')
-                    .html(html);
-
-                if (action) {
-                    $a.attr('data-action', action);
-                }
-
-                $li.append($a);
-
-                link ?
-                    $a.attr('href', link) :
-                    $a.attr('role', 'button');
-
-                if (data) {
-                    for (let key in data) {
-                        $a.attr('data-' + Espo.Utils.camelCaseToHyphen(key), data[key]);
-                    }
-                }
-
-                if (disabled) {
-                    $li.attr('disabled', 'disabled');
-                }
-
-                if (title) {
-                    $a.attr('title', title);
-                }
-
-                return new Handlebars.SafeString($li.get(0).outerHTML);
-            });
-
-            Handlebars.registerHelper('button', (name, options) => {
-                let style = options.hash.style || 'default';
-                let scope = options.hash.scope || null;
-                let label = options.hash.label || name;
-                let labelTranslation = options.hash.labelTranslation;
-                let link = options.hash.link;
-                let iconHtml = options.hash.iconHtml;
-
-                let html =
-                    options.hash.html ||
-                    options.hash.text ||
-                    (
-                        labelTranslation ?
-                            this.language.translatePath(labelTranslation) :
-                            this.language.translate(label, 'labels', scope)
-                    );
-
-                if (!options.hash.html) {
-                    html = this.escapeString(html);
-                }
-
-                if (iconHtml) {
-                    html = iconHtml + ' ' + html;
-                }
-
-                let tag = link ? '<a>' : '<button>';
-
-                let $button = $(tag)
-                    .addClass('btn action')
-                    .addClass(options.hash.className || '')
-                    .addClass(options.hash.hidden ? 'hidden' : '')
-                    .addClass(options.hash.disabled ? 'disabled' : '')
-                    .attr('data-action', name)
-                    .addClass('btn-' + style)
-                    .html(html);
-
-                link ?
-                    $button.href(link) :
-                    $button.attr('type', 'button')
-
-                if (options.hash.disabled) {
-                    $button.attr('disabled', 'disabled');
-                }
-
-                if (options.hash.title) {
-                    $button.attr('title', options.hash.title);
-                }
-
-                return new Handlebars.SafeString($button.get(0).outerHTML);
-            });
-
-            Handlebars.registerHelper('hyphen', (string) => {
-                return Espo.Utils.convert(string, 'c-h');
-            });
-
-            Handlebars.registerHelper('toDom', (string) => {
-                return Espo.Utils.toDom(string);
-            });
-
-            Handlebars.registerHelper('breaklines', (text) => {
-                text = Handlebars.Utils.escapeExpression(text || '');
-                text = text.replace(/(\r\n|\n|\r)/gm, '<br>');
-
-                return new Handlebars.SafeString(text);
-            });
-
-            Handlebars.registerHelper('complexText', (text, options) => {
-                return this.transformMarkdownText(text, options.hash);
-            });
-
-            Handlebars.registerHelper('translateOption', (name, options) => {
-                let scope = options.hash.scope || null;
-                let field = options.hash.field || null;
-
-                if (!field) {
-                    return '';
-                }
-
-                let translationHash = options.hash.translatedOptions || null;
-
-                if (translationHash === null) {
+            if (translationHash === null) {
+                if (!category && field) {
                     translationHash = this.language.translate(field, 'options', scope) || {};
 
                     if (typeof translationHash !== 'object') {
                         translationHash = {};
                     }
                 }
-
-                if (name === null) {
-                    name = '';
+                else {
+                    translationHash = {};
                 }
-
-                return translationHash[name] || name;
-            });
-
-            Handlebars.registerHelper('options', (list, value, options) => {
-                if (typeof value === 'undefined') {
-                    value = false;
-                }
-
-                list = list || [];
-
-                let html = '';
-
-                let multiple = (Object.prototype.toString.call(value) === '[object Array]');
-
-                let checkOption = name => {
-                    if (multiple) {
-                        return value.indexOf(name) !== -1;
-                    }
-
-                    return value === name || !value && !name;
-                };
-
-                options.hash = options.hash || {};
-
-                let scope = options.hash.scope || false;
-                let category = options.hash.category || false;
-                let field = options.hash.field || false;
-                let styleMap = options.hash.styleMap || {};
-
-                if (!multiple && options.hash.includeMissingOption && (value || value === '')) {
-                    if (!~list.indexOf(value)) {
-                        list = Espo.Utils.clone(list);
-
-                        list.push(value);
-                    }
-                }
-
-                let translationHash = options.hash.translationHash ||
-                    options.hash.translatedOptions ||
-                    null;
-
-                if (translationHash === null) {
-                    if (!category && field) {
-                        translationHash = this.language.translate(field, 'options', scope) || {};
-
-                        if (typeof translationHash !== 'object') {
-                            translationHash = {};
-                        }
-                    }
-                    else {
-                        translationHash = {};
-                    }
-                }
-
-                let translate = name => {
-                    if (!category) {
-                        return translationHash[name] || name;
-                    }
-
-                    return this.language.translate(name, category, scope);
-                };
-
-                for (let key in list) {
-                    let value = list[key];
-                    let label = translate(value);
-
-                    let $option =
-                        $('<option>')
-                            .attr('value', value)
-                            .addClass(styleMap[value] ? 'text-' + styleMap[value]: '')
-                            .text(label);
-
-                    if (checkOption(list[key])) {
-                        $option.attr('selected', 'selected')
-                    }
-
-                    html += $option.get(0).outerHTML;
-                }
-
-                return new Handlebars.SafeString(html);
-            });
-
-            Handlebars.registerHelper('basePath', () => {
-                return this.basePath || '';
-            });
-        },
-
-        /**
-         * Get an application parameter.
-         *
-         * @param {string} name
-         * @returns {*}
-         */
-        getAppParam: function (name) {
-            return (this.appParams || {})[name];
-        },
-
-        /**
-         * Strip tags.
-         *
-         * @deprecated
-         * @param {string} text
-         * @returns {string}
-         */
-        stripTags: function (text) {
-            text = text || '';
-
-            if (typeof text === 'string' || text instanceof String) {
-                return text.replace(/<\/?[^>]+(>|$)/g, '');
             }
 
-            return text;
-        },
+            let translate = name => {
+                if (!category) {
+                    return translationHash[name] || name;
+                }
 
-        /**
-         * Escape a string.
-         *
-         * @param {string} text A string.
-         * @returns {string}
-         */
-        escapeString: function (text) {
-            return Handlebars.Utils.escapeExpression(text);
-        },
+                return this.language.translate(name, category, scope);
+            };
 
-        /**
-         * Get a user avatar HTML.
-         *
-         * @param {string} id A user ID.
-         * @param {'small'|'medium'|'large'} [size='small'] A size.
-         * @param {int} [width=16]
-         * @param {string} [additionalClassName]  An additional class-name.
-         * @returns {string}
-         */
-        getAvatarHtml: function (id, size, width, additionalClassName) {
-            if (this.config.get('avatarsDisabled')) {
-                return '';
+            for (let key in list) {
+                let value = list[key];
+                let label = translate(value);
+
+                let $option =
+                    $('<option>')
+                        .attr('value', value)
+                        .addClass(styleMap[value] ? 'text-' + styleMap[value]: '')
+                        .text(label);
+
+                if (checkOption(list[key])) {
+                    $option.attr('selected', 'selected')
+                }
+
+                html += $option.get(0).outerHTML;
             }
 
-            let t = this.cache ? this.cache.get('app', 'timestamp') : Date.now();
+            return new Handlebars.SafeString(html);
+        });
 
-            let basePath = this.basePath || '';
-            size = size || 'small';
-            width = width || 16;
+        Handlebars.registerHelper('basePath', () => {
+            return this.basePath || '';
+        });
+    },
 
-            let className = 'avatar';
+    /**
+     * Get an application parameter.
+     *
+     * @param {string} name
+     * @returns {*}
+     */
+    getAppParam: function (name) {
+        return (this.appParams || {})[name];
+    },
+
+    /**
+     * Strip tags.
+     *
+     * @deprecated
+     * @param {string} text
+     * @returns {string}
+     */
+    stripTags: function (text) {
+        text = text || '';
+
+        if (typeof text === 'string' || text instanceof String) {
+            return text.replace(/<\/?[^>]+(>|$)/g, '');
+        }
+
+        return text;
+    },
+
+    /**
+     * Escape a string.
+     *
+     * @param {string} text A string.
+     * @returns {string}
+     */
+    escapeString: function (text) {
+        return Handlebars.Utils.escapeExpression(text);
+    },
+
+    /**
+     * Get a user avatar HTML.
+     *
+     * @param {string} id A user ID.
+     * @param {'small'|'medium'|'large'} [size='small'] A size.
+     * @param {int} [width=16]
+     * @param {string} [additionalClassName]  An additional class-name.
+     * @returns {string}
+     */
+    getAvatarHtml: function (id, size, width, additionalClassName) {
+        if (this.config.get('avatarsDisabled')) {
+            return '';
+        }
+
+        let t = this.cache ? this.cache.get('app', 'timestamp') : Date.now();
+
+        let basePath = this.basePath || '';
+        size = size || 'small';
+        width = width || 16;
+
+        let className = 'avatar';
+
+        if (additionalClassName) {
+            className += ' ' + additionalClassName;
+        }
+
+        return $('<img>')
+            .attr('src', `${basePath}?entryPoint=avatar&size=${size}&id=${id}&t=${t}`)
+            .addClass(className)
+            .attr('width', width.toString())
+            .get(0).outerHTML;
+    },
+
+    /**
+     * A Markdown text to HTML (one-line).
+     *
+     * @param {string} text A text.
+     * @returns {string} HTML.
+     */
+    transformMarkdownInlineText: function (text) {
+        return this.transformMarkdownText(text, {inline: true});
+    },
+
+    /**
+     * A Markdown text to HTML.
+     *
+     * @param {string} text A text.
+     * @param {{inline?: boolean, linksInNewTab?: boolean}} [options] Options.
+     * @returns {Handlebars.SafeString} HTML.
+     */
+    transformMarkdownText: function (text, options) {
+        text = text || '';
+
+        text = Handlebars.Utils.escapeExpression(text).replace(/&gt;+/g, '>');
+
+        this.mdBeforeList.forEach(item => {
+            text = text.replace(item.regex, item.value);
+        });
+
+        options = options || {};
+
+        if (options.inline) {
+            text = marked.parseInline(text);
+        }
+        else {
+            text = marked.parse(text);
+        }
+
+        text = DOMPurify.sanitize(text, {}).toString();
+
+        if (options.linksInNewTab) {
+            text = text.replace(/<a href=/gm, '<a target="_blank" rel="noopener noreferrer" href=');
+        }
+
+        text = text.replace(
+            /<a href="mailto:(.*)"/gm,
+            '<a role="button" class="selectable" data-email-address="$1" data-action="mailTo"'
+        );
+
+        return new Handlebars.SafeString(text);
+    },
+
+    /**
+     * Get a color-icon HTML for a scope.
+     *
+     * @param {string} scope A scope.
+     * @param {boolean} [noWhiteSpace=false] No white space.
+     * @param {string} [additionalClassName] An additional class-name.
+     * @returns {string}
+     */
+    getScopeColorIconHtml: function (scope, noWhiteSpace, additionalClassName) {
+        if (this.config.get('scopeColorsDisabled') || this.preferences.get('scopeColorsDisabled')) {
+            return '';
+        }
+
+        let color = this.metadata.get(['clientDefs', scope, 'color']);
+
+        let html = '';
+
+        if (color) {
+            let $span = $('<span class="color-icon fas fa-square">');
+
+            $span.css('color', color);
 
             if (additionalClassName) {
-                className += ' ' + additionalClassName;
+                $span.addClass(additionalClassName);
             }
 
-            return $('<img>')
-                .attr('src', `${basePath}?entryPoint=avatar&size=${size}&id=${id}&t=${t}`)
-                .addClass(className)
-                .attr('width', width.toString())
-                .get(0).outerHTML;
-        },
+            html = $span.get(0).outerHTML;
+        }
 
-        /**
-         * A Markdown text to HTML (one-line).
-         *
-         * @param {string} text A text.
-         * @returns {string} HTML.
-         */
-        transformMarkdownInlineText: function (text) {
-            return this.transformMarkdownText(text, {inline: true});
-        },
-
-        /**
-         * A Markdown text to HTML.
-         *
-         * @param {string} text A text.
-         * @param {{inline?: boolean, linksInNewTab?: boolean}} [options] Options.
-         * @returns {Handlebars.SafeString} HTML.
-         */
-        transformMarkdownText: function (text, options) {
-            text = text || '';
-
-            text = Handlebars.Utils.escapeExpression(text).replace(/&gt;+/g, '>');
-
-            this.mdBeforeList.forEach(function (item) {
-                text = text.replace(item.regex, item.value);
-            });
-
-            options = options || {};
-
-            if (options.inline) {
-                text = marked.parseInline(text);
-            }
-            else {
-                text = marked.parse(text);
+        if (!noWhiteSpace) {
+            if (html) {
+                html += '&nbsp;';
             }
+        }
 
-            text = DOMPurify.sanitize(text).toString();
+        return html;
+    },
 
-            if (options.linksInNewTab) {
-                text = text.replace(/<a href=/gm, '<a target="_blank" rel="noopener noreferrer" href=');
-            }
+    /**
+     * Sanitize HTML.
+     *
+     * @param {type} text HTML.
+     * @param {Object} [options] Options.
+     * @returns {string}
+     */
+    sanitizeHtml: function (text, options) {
+        return DOMPurify.sanitize(text, options);
+    },
 
-            text = text.replace(
-                /<a href="mailto:(.*)"/gm,
-                '<a role="button" class="selectable" data-email-address="$1" data-action="mailTo"'
-            );
+    /**
+     * Moderately sanitize HTML.
+     *
+     * @param {string} value HTML.
+     * @returns {string}
+     */
+    moderateSanitizeHtml: function (value) {
+        value = value || '';
+        value = value.replace(/<\/?(base)[^><]*>/gi, '');
+        value = value.replace(/<\/?(object)[^><]*>/gi, '');
+        value = value.replace(/<\/?(embed)[^><]*>/gi, '');
+        value = value.replace(/<\/?(applet)[^><]*>/gi, '');
+        value = value.replace(/<\/?(iframe)[^><]*>/gi, '');
+        value = value.replace(/<\/?(script)[^><]*>/gi, '');
+        value = value.replace(/<[^><]*([^a-z]on[a-z]+)=[^><]*>/gi, function (match) {
+            return match.replace(/[^a-z]on[a-z]+=/gi, ' data-handler-stripped=');
+        });
 
-            return new Handlebars.SafeString(text);
-        },
+        value = this.stripEventHandlersInHtml(value);
 
-        /**
-         * Get a color-icon HTML for a scope.
-         *
-         * @param {string} scope A scope.
-         * @param {boolean} [noWhiteSpace=false] No white space.
-         * @param {string} [additionalClassName] An additional class-name.
-         * @returns {string}
-         */
-        getScopeColorIconHtml: function (scope, noWhiteSpace, additionalClassName) {
-            if (this.config.get('scopeColorsDisabled') || this.preferences.get('scopeColorsDisabled')) {
-                return '';
-            }
+        value = value.replace(/href=" *javascript:(.*?)"/gi, () => {
+            return 'removed=""';
+        });
 
-            let color = this.metadata.get(['clientDefs', scope, 'color']);
+        value = value.replace(/href=' *javascript:(.*?)'/gi, () => {
+            return 'removed=""';
+        });
 
-            let html = '';
+        value = value.replace(/src=" *javascript:(.*?)"/gi, () => {
+            return 'removed=""';
+        });
 
-            if (color) {
-                let $span = $('<span class="color-icon fas fa-square">');
+        value = value.replace(/src=' *javascript:(.*?)'/gi, () => {
+            return 'removed=""';
+        });
 
-                $span.css('color', color);
+        return value;
+    },
 
-                if (additionalClassName) {
-                    $span.addClass(additionalClassName);
-                }
+    /**
+     * Strip event handlers in HTML.
+     *
+     * @param {string} html HTML.
+     * @returns {string}
+     */
+    stripEventHandlersInHtml: function (html) {
+        let j; // @todo Revise.
 
-                html = $span.get(0).outerHTML;
-            }
+        function stripHTML() {
+            html = html.slice(0, strip) + html.slice(j);
+            j = strip;
 
-            if (!noWhiteSpace) {
-                if (html) {
-                    html += '&nbsp;';
-                }
-            }
+            strip = false;
+        }
 
-            return html;
-        },
+        function isValidTagChar(str) {
+            return str.match(/[a-z?\\\/!]/i);
+        }
 
-        /**
-         * Sanitize HTML.
-         *
-         * @param {type} text HTML.
-         * @param {Object} [options] Options.
-         * @returns {string}
-         */
-        sanitizeHtml: function (text, options) {
-            return DOMPurify.sanitize(text, options);
-        },
+        let strip = false;
+        let lastQuote = false;
 
-        /**
-         * Moderately sanitize HTML.
-         *
-         * @param {string} value HTML.
-         * @returns {string}
-         */
-        moderateSanitizeHtml: function (value) {
-            value = value || '';
-            value = value.replace(/<[\/]{0,1}(base)[^><]*>/gi, '');
-            value = value.replace(/<[\/]{0,1}(object)[^><]*>/gi, '');
-            value = value.replace(/<[\/]{0,1}(embed)[^><]*>/gi, '');
-            value = value.replace(/<[\/]{0,1}(applet)[^><]*>/gi, '');
-            value = value.replace(/<[\/]{0,1}(iframe)[^><]*>/gi, '');
-            value = value.replace(/<[\/]{0,1}(script)[^><]*>/gi, '');
-            value = value.replace(/<[^><]*([^a-z]{1}on[a-z]+)=[^><]*>/gi, function (match) {
-                return match.replace(/[^a-z]{1}on[a-z]+=/gi, ' data-handler-stripped=');
-            });
+        for (let i = 0; i < html.length; i++){
+            if (html[i] === "<" && html[i + 1] && isValidTagChar(html[i + 1])) {
+                i++;
 
-            value = this.stripEventHandlersInHtml(value);
-
-            value = value.replace(/href=" *javascript\:(.*?)"/gi, function(m, $1) {
-                return 'removed=""';
-            });
-
-            value = value.replace(/href=' *javascript\:(.*?)'/gi, function(m, $1) {
-                return 'removed=""';
-            });
-
-            value = value.replace(/src=" *javascript\:(.*?)"/gi, function(m, $1) {
-                return 'removed=""';
-            });
-
-            value = value.replace(/src=' *javascript\:(.*?)'/gi, function(m, $1) {
-                return 'removed=""';
-            });
-
-            return value;
-        },
-
-        /**
-         * Strip event handlers in HTML.
-         *
-         * @param {string} html HTML.
-         * @returns {string}
-         */
-        stripEventHandlersInHtml: function (html) {
-            function stripHTML() {
-                html = html.slice(0, strip) + html.slice(j);
-                j = strip;
-
-                strip = false;
-            }
-
-            function isValidTagChar(str) {
-                return str.match(/[a-z?\\\/!]/i);
-            }
-
-            let strip = false;
-            let lastQuote = false;
-
-            for (let i = 0; i < html.length; i++){
-                if (html[i] === "<" && html[i + 1] && isValidTagChar(html[i + 1])) {
-                    i++;
-
-                    for (let j = i; j<html.length; j++){
-                        if (!lastQuote && html[j] === ">"){
-                            if (strip) {
-                                stripHTML();
-                            }
-
-                            i = j;
-
-                            break;
-                        }
-
-                        if (lastQuote === html[j]){
-                            lastQuote = false;
-
-                            continue;
-                        }
-
-                        if (!lastQuote && html[j - 1] === "=" && (html[j] === "'" || html[j] === '"')) {
-                            lastQuote = html[j];
-                        }
-
-                        if (!lastQuote && html[j - 2] === " " && html[j - 1] === "o" && html[j] === "n") {
-                            strip = j - 2;
-                        }
-
-                        if (strip && html[j] === " " && !lastQuote){
+                for (let j = i; j < html.length; j++){
+                    if (!lastQuote && html[j] === ">"){
+                        if (strip) {
                             stripHTML();
                         }
+
+                        i = j;
+
+                        break;
+                    }
+
+                    if (lastQuote === html[j]){
+                        lastQuote = false;
+
+                        continue;
+                    }
+
+                    if (!lastQuote && html[j - 1] === "=" && (html[j] === "'" || html[j] === '"')) {
+                        lastQuote = html[j];
+                    }
+
+                    if (!lastQuote && html[j - 2] === " " && html[j - 1] === "o" && html[j] === "n") {
+                        strip = j - 2;
+                    }
+
+                    if (strip && html[j] === " " && !lastQuote){
+                        stripHTML();
                     }
                 }
             }
+        }
 
-            return html;
-        },
+        return html;
+    },
 
-        /**
-         * Calculate a content container height.
-         *
-         * @param {JQuery} $el Element.
-         * @returns {number}
-         */
-        calculateContentContainerHeight: function ($el) {
-            let smallScreenWidth = this.themeManager.getParam('screenWidthXs');
+    /**
+     * Calculate a content container height.
+     *
+     * @param {JQuery} $el Element.
+     * @returns {number}
+     */
+    calculateContentContainerHeight: function ($el) {
+        let smallScreenWidth = this.themeManager.getParam('screenWidthXs');
 
-            let $window = $(window);
+        let $window = $(window);
 
-            let footerHeight = $('#footer').height() || 26;
-            let top = 0;
-            let element = $el.get(0);
+        let footerHeight = $('#footer').height() || 26;
+        let top = 0;
+        let element = $el.get(0);
 
-            if (element) {
-                top = element.getBoundingClientRect().top;
+        if (element) {
+            top = element.getBoundingClientRect().top;
 
-                if ($window.width() < smallScreenWidth) {
-                    let $navbarCollapse = $('#navbar .navbar-body');
+            if ($window.width() < smallScreenWidth) {
+                let $navbarCollapse = $('#navbar .navbar-body');
 
-                    if ($navbarCollapse.hasClass('in') || $navbarCollapse.hasClass('collapsing')) {
-                        top -= $navbarCollapse.height();
-                    }
+                if ($navbarCollapse.hasClass('in') || $navbarCollapse.hasClass('collapsing')) {
+                    top -= $navbarCollapse.height();
                 }
             }
+        }
 
-            let spaceHeight = top + footerHeight;
+        let spaceHeight = top + footerHeight;
 
-            return $window.height() - spaceHeight - 20;
-        },
+        return $window.height() - spaceHeight - 20;
+    },
 
-        /**
-         * Process view-setup-handlers.
-         *
-         * @param {module:view} view A view.
-         * @param {string} type A view-setup-handler type.
-         * @param {string} [scope] A scope.
-         */
-        processSetupHandlers: function (view, type, scope) {
-            scope = scope || view.scope;
+    /**
+     * Process view-setup-handlers.
+     *
+     * @param {module:view} view A view.
+     * @param {string} type A view-setup-handler type.
+     * @param {string} [scope] A scope.
+     */
+    processSetupHandlers: function (view, type, scope) {
+        scope = scope || view.scope;
 
-            let handlerList = this.metadata.get(['clientDefs', 'Global', 'viewSetupHandlers', type]) || [];
+        let handlerList = this.metadata.get(['clientDefs', 'Global', 'viewSetupHandlers', type]) || [];
 
-            if (scope) {
-                handlerList = handlerList
-                    .concat(
-                        this.metadata.get(['clientDefs', scope, 'viewSetupHandlers', type]) || []
-                    );
-            }
+        if (scope) {
+            handlerList = handlerList
+                .concat(
+                    this.metadata.get(['clientDefs', scope, 'viewSetupHandlers', type]) || []
+                );
+        }
 
-            if (handlerList.length === 0) {
-                return;
-            }
+        if (handlerList.length === 0) {
+            return;
+        }
 
-            for (let handlerClassName of handlerList) {
-                let promise = new Promise(function (resolve) {
-                    require(handlerClassName, function (Handler) {
-                        let result = (new Handler(view)).process(view);
+        for (let handlerClassName of handlerList) {
+            let promise = new Promise(function (resolve) {
+                Espo.loader.require(handlerClassName, Handler => {
+                    let result = (new Handler(view)).process(view);
 
-                        if (result && Object.prototype.toString.call(result) === '[object Promise]') {
-                            result.then(function () {
-                                resolve();
-                            });
+                    if (result && Object.prototype.toString.call(result) === '[object Promise]') {
+                        result.then(() => {
+                            resolve();
+                        });
 
-                            return;
-                        }
+                        return;
+                    }
 
-                        resolve();
-                    });
+                    resolve();
                 });
+            });
 
-                view.wait(promise);
-            }
-        },
+            view.wait(promise);
+        }
+    },
 
-        /**
-         * @deprecated Use `transformMarkdownText`.
-         * @internal Used in extensions.
-         */
-        transfromMarkdownText: function (text, options) {
-            return this.transformMarkdownText(text, options);
-        },
+    /**
+     * @deprecated Use `transformMarkdownText`.
+     * @internal Used in extensions.
+     */
+    transfromMarkdownText: function (text, options) {
+        return this.transformMarkdownText(text, options);
+    },
 
-        /**
-         * @deprecated Use `transformMarkdownInlineText`.
-         * @internal Used in extensions.
-         */
-        transfromMarkdownInlineText: function (text) {
-            return this.transformMarkdownInlineText(text);
-        },
-    });
-
-    return ViewHelper;
+    /**
+     * @deprecated Use `transformMarkdownInlineText`.
+     * @internal Used in extensions.
+     */
+    transfromMarkdownInlineText: function (text) {
+        return this.transformMarkdownInlineText(text);
+    },
 });
+
+export default ViewHelper;
diff --git a/client/src/view-record-helper.js b/client/src/view-record-helper.js
index 3e3f438fe8..740387a040 100644
--- a/client/src/view-record-helper.js
+++ b/client/src/view-record-helper.js
@@ -26,206 +26,187 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('view-record-helper', [], function () {
+/** @module view-record-helper */
+
+import Backbone from "lib!backbone";
+
+/**
+ * @class
+ * @mixes Backbone.Events
+ * @param {Object.<string,*>} [defaultFieldStates] Default field states.
+ * @param {Object.<string,*>} [defaultPanelStates] Default panel states.
+ */
+const ViewRecordHelper = function (defaultFieldStates, defaultPanelStates) {
+    /**
+     * @private
+     * @type {Object}
+     */
+    this.defaultFieldStates = defaultFieldStates || {};
+    /**
+     * @private
+     * @type {Object}
+     */
+    this.defaultPanelStates = defaultPanelStates || {};
+    /** @private */
+    this.fieldStateMap = {};
+    /** @private */
+    this.panelStateMap = {};
+    /** @private */
+    this.hiddenFields = {};
+    /** @private */
+    this.hiddenPanels = {};
+    /** @private */
+    this.fieldOptionListMap = {};
+
+    _.extend(this, Backbone.Events);
+};
+
+_.extend(ViewRecordHelper.prototype, /** @lends ViewRecordHelper# */{
 
     /**
-     * @class
-     * @name Class
-     * @memberOf module:view-record-helper
+     * Get hidden fields.
      *
-     * @mixes Backbone.Events
-     *
-     * @param {Object.<string,*>} [defaultFieldStates] Default field states.
-     * @param {Object.<string,*>} [defaultPanelStates] Default panel states.
+     * @returns {Object.<string, boolean>}
      */
-    let ViewRecordHelper = function (defaultFieldStates, defaultPanelStates) {
-        /**
-         * @private
-         * @type {Object}
-         */
-        this.defaultFieldStates = defaultFieldStates || {};
+    getHiddenFields: function () {
+        return this.hiddenFields;
+    },
 
-        /**
-         * @private
-         * @type {Object}
-         */
-        this.defaultPanelStates = defaultPanelStates || {};
+    /**
+     * Get hidden panels.
+     *
+     * @returns {Object.<string,boolean>}
+     */
+    getHiddenPanels: function () {
+        return this.hiddenPanels;
+    },
 
-        /**
-         * @private
-         */
-        this.fieldStateMap = {};
-
-        /**
-         * @private
-         */
-        this.panelStateMap = {};
-
-        /**
-         * @private
-         */
-        this.hiddenFields = {};
-
-        /**
-         * @private
-         */
-        this.hiddenPanels = {};
-
-        /**
-         * @private
-         */
-        this.fieldOptionListMap = {};
-
-        _.extend(this, Backbone.Events);
-    };
-
-    _.extend(ViewRecordHelper.prototype, /** @lends module:view-record-helper.Class# */{
-
-        /**
-         * Get hidden fields.
-         *
-         * @returns {Object.<string, boolean>}
-         */
-        getHiddenFields: function () {
-            return this.hiddenFields;
-        },
-
-        /**
-         * Get hidden panels.
-         *
-         * @returns {Object.<string,boolean>}
-         */
-        getHiddenPanels: function () {
-            return this.hiddenPanels;
-        },
-
-        /**
-         * Set a field-state parameter.
-         *
-         * @param {string} field A field name.
-         * @param {string} name A parameter.
-         * @param {*} value A value.
-         */
-        setFieldStateParam: function (field, name, value) {
-            switch (name) {
-                case 'hidden':
-                    if (value) {
-                        this.hiddenFields[field] = true;
-                    }
-                    else {
-                        delete this.hiddenFields[field];
-                    }
-
-                    break;
-            }
-
-            this.fieldStateMap[field] = this.fieldStateMap[field] || {};
-            this.fieldStateMap[field][name] = value;
-        },
-
-        /**
-         * Get a field-state parameter.
-         *
-         * @param {string} field A field name.
-         * @param {string} name A parameter.
-         * @returns {*} A value.
-         */
-        getFieldStateParam: function (field, name) {
-            if (field in this.fieldStateMap) {
-                if (name in this.fieldStateMap[field]) {
-                    return this.fieldStateMap[field][name];
+    /**
+     * Set a field-state parameter.
+     *
+     * @param {string} field A field name.
+     * @param {string} name A parameter.
+     * @param {*} value A value.
+     */
+    setFieldStateParam: function (field, name, value) {
+        switch (name) {
+            case 'hidden':
+                if (value) {
+                    this.hiddenFields[field] = true;
                 }
-            }
-
-            if (name in this.defaultFieldStates) {
-                return this.defaultFieldStates[name];
-            }
-
-            return null;
-        },
-
-        /**
-         * Set a panel-state parameter.
-         *
-         * @param {string} panel A panel name.
-         * @param {string} name A parameter.
-         * @param {*} value A value.
-         */
-        setPanelStateParam: function (panel, name, value) {
-            switch (name) {
-                case 'hidden':
-                    if (value) {
-                        this.hiddenPanels[panel] = true;
-                    } else {
-                        delete this.hiddenPanels[panel];
-                    }
-                    break;
-            }
-
-            this.panelStateMap[panel] = this.panelStateMap[panel] || {};
-            this.panelStateMap[panel][name] = value;
-        },
-
-        /**
-         * Get a panel-state parameter.
-         *
-         * @param {string} panel A panel name.
-         * @param {string} name A parameter.
-         * @returns {*} A value.
-         */
-        getPanelStateParam: function (panel, name) {
-            if (panel in this.panelStateMap) {
-                if (name in this.panelStateMap[panel]) {
-                    return this.panelStateMap[panel][name];
+                else {
+                    delete this.hiddenFields[field];
                 }
+
+                break;
+        }
+
+        this.fieldStateMap[field] = this.fieldStateMap[field] || {};
+        this.fieldStateMap[field][name] = value;
+    },
+
+    /**
+     * Get a field-state parameter.
+     *
+     * @param {string} field A field name.
+     * @param {string} name A parameter.
+     * @returns {*} A value.
+     */
+    getFieldStateParam: function (field, name) {
+        if (field in this.fieldStateMap) {
+            if (name in this.fieldStateMap[field]) {
+                return this.fieldStateMap[field][name];
             }
+        }
 
-            if (name in this.defaultPanelStates) {
-                return this.defaultPanelStates[name];
+        if (name in this.defaultFieldStates) {
+            return this.defaultFieldStates[name];
+        }
+
+        return null;
+    },
+
+    /**
+     * Set a panel-state parameter.
+     *
+     * @param {string} panel A panel name.
+     * @param {string} name A parameter.
+     * @param {*} value A value.
+     */
+    setPanelStateParam: function (panel, name, value) {
+        switch (name) {
+            case 'hidden':
+                if (value) {
+                    this.hiddenPanels[panel] = true;
+                } else {
+                    delete this.hiddenPanels[panel];
+                }
+                break;
+        }
+
+        this.panelStateMap[panel] = this.panelStateMap[panel] || {};
+        this.panelStateMap[panel][name] = value;
+    },
+
+    /**
+     * Get a panel-state parameter.
+     *
+     * @param {string} panel A panel name.
+     * @param {string} name A parameter.
+     * @returns {*} A value.
+     */
+    getPanelStateParam: function (panel, name) {
+        if (panel in this.panelStateMap) {
+            if (name in this.panelStateMap[panel]) {
+                return this.panelStateMap[panel][name];
             }
+        }
 
-            return null;
-        },
+        if (name in this.defaultPanelStates) {
+            return this.defaultPanelStates[name];
+        }
 
-        /**
-         * Set a field option list.
-         *
-         * @param {string} field A field name.
-         * @param {string[]} list An option list.
-         */
-        setFieldOptionList: function (field, list) {
-            this.fieldOptionListMap[field] = list;
-        },
+        return null;
+    },
 
-        /**
-         * Clear a field option list.
-         *
-         * @param {string} field A field name.
-         */
-        clearFieldOptionList: function (field) {
-            delete this.fieldOptionListMap[field];
-        },
+    /**
+     * Set a field option list.
+     *
+     * @param {string} field A field name.
+     * @param {string[]} list An option list.
+     */
+    setFieldOptionList: function (field, list) {
+        this.fieldOptionListMap[field] = list;
+    },
 
-        /**
-         * Get a field option list.
-         *
-         * @param {string} field A field name.
-         * @returns {string|null} Null if not set.
-         */
-        getFieldOptionList: function (field) {
-            return this.fieldOptionListMap[field] || null;
-        },
+    /**
+     * Clear a field option list.
+     *
+     * @param {string} field A field name.
+     */
+    clearFieldOptionList: function (field) {
+        delete this.fieldOptionListMap[field];
+    },
 
-        /**
-         * Whether a field option list is set.
-         *
-         * @param {string} field A field name.
-         * @returns {boolean}
-         */
-        hasFieldOptionList: function (field) {
-            return (field in this.fieldOptionListMap);
-        },
-    });
+    /**
+     * Get a field option list.
+     *
+     * @param {string} field A field name.
+     * @returns {string|null} Null if not set.
+     */
+    getFieldOptionList: function (field) {
+        return this.fieldOptionListMap[field] || null;
+    },
 
-    return ViewRecordHelper;
+    /**
+     * Whether a field option list is set.
+     *
+     * @param {string} field A field name.
+     * @returns {boolean}
+     */
+    hasFieldOptionList: function (field) {
+        return (field in this.fieldOptionListMap);
+    },
 });
+
+export default ViewRecordHelper;
diff --git a/client/src/view.js b/client/src/view.js
index 23056a57c5..085bf71683 100644
--- a/client/src/view.js
+++ b/client/src/view.js
@@ -26,459 +26,456 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('view', [], function () {
+/** @module view */
+
+import Bull from "lib!bullbone";
+
+/**
+ * A base view.
+ * @see {@link https://docs.espocrm.com/development/view/}
+ */
+const Class = class extends Bull.View {
 
     /**
-     * A base view.
-     *
-     * @see {@link https://docs.espocrm.com/development/view/}
-     *
-     * @class
-     * @name Class
-     * @extends Bull.View
-     * @memberOf module:view
+     * @callback module:view~actionHandlerCallback
+     * @param {Event} e A DOM event.
      */
-    return Bull.View.extend(/** @lends module:view.Class# */{
 
-        /**
-         * @callback module:view.Class~actionHandlerCallback
-         * @param {Event} e A DOM event.
-         */
+    /**
+     * A model.
+     *
+     * @name model
+     * @type {module:model|null}
+     * @memberOf Class.prototype
+     * @public
+     */
 
-        /**
-         * A model.
-         *
-         * @name model
-         * @type {module:model.Class|null}
-         * @memberOf module:view.Class.prototype
-         * @public
-         */
+    /**
+     * A collection.
+     *
+     * @name collection
+     * @type {module:collection|null}
+     * @memberOf Class.prototype
+     * @public
+     */
 
-        /**
-         * A collection.
-         *
-         * @name collection
-         * @type {module:collection.Class|null}
-         * @memberOf module:view.Class.prototype
-         * @public
-         */
+    /**
+     * A helper.
+     *
+     * @name _helper
+     * @type {module:view-helper}
+     * @memberOf Class.prototype
+     * @private
+     */
 
-        /**
-         * A helper.
-         *
-         * @name _helper
-         * @type {module:view-helper.Class}
-         * @memberOf module:view.Class.prototype
-         * @private
-         */
+    /**
+     * Add a DOM button-action event handler.
+     *
+     * @todo Add an `<a>` tag support.
+     * @param {string} action An action name.
+     * @param {module:view~actionHandlerCallback} handler A handler.
+     */
+    addActionHandler(action, handler) {
+        let fullAction = 'click button[data-action=\"'+action+'\"]';
 
-        /**
-         * Add a DOM button-action event handler.
-         *
-         * @todo Add an `<a>` tag support.
-         * @param {string} action An action name.
-         * @param {module:view.Class~actionHandlerCallback} handler A handler.
-         */
-        addActionHandler: function (action, handler) {
-            let fullAction = 'click button[data-action=\"'+action+'\"]';
+        this.events[fullAction] = handler;
+    }
 
-            this.events[fullAction] = handler;
-        },
+    /**
+     * Escape a string.
+     *
+     * @param {string} string
+     * @returns {string}
+     */
+    escapeString(string) {
+        return Handlebars.Utils.escapeExpression(string);
+    }
 
-        /**
-         * Escape a string.
-         *
-         * @param {string} string
-         * @returns {string}
-         */
-        escapeString: function (string) {
-            return Handlebars.Utils.escapeExpression(string);
-        },
+    /**
+     * Show a notify-message.
+     *
+     * @deprecated Use `Espo.Ui.notify`.
+     * @param {string|false} label
+     * @param {string} [type]
+     * @param {number} [timeout]
+     * @param {string} [scope]
+     */
+    notify(label, type, timeout, scope) {
+        if (!label) {
+            Espo.Ui.notify(false);
 
-        /**
-         * Show a notify-message.
-         *
-         * @deprecated Use `Espo.Ui.notify`.
-         * @param {string} label
-         * @param {string} [type]
-         * @param {number} [timeout]
-         * @param {string} [scope]
-         */
-        notify: function (label, type, timeout, scope) {
-            if (label == false) {
-                Espo.Ui.notify(false);
+            return;
+        }
 
-                return;
-            }
+        scope = scope || null;
+        timeout = timeout || 2000;
 
-            scope = scope || null;
-            timeout = timeout || 2000;
+        if (!type) {
+            timeout = null;
+        }
 
-            if (!type) {
-                timeout = null;
-            }
+        let text = this.getLanguage().translate(label, 'labels', scope);
 
-            let text = this.getLanguage().translate(label, 'labels', scope);
+        Espo.Ui.notify(text, type, timeout);
+    }
 
-            Espo.Ui.notify(text, type, timeout);
-        },
+    /**
+     * Get a view-helper.
+     *
+     * @returns {module:view-helper}
+     */
+    getHelper() {
+        return this._helper;
+    }
 
-        /**
-         * Get a view-helper.
-         *
-         * @returns {module:view-helper.Class}
-         */
-        getHelper: function () {
-            return this._helper;
-        },
+    /**
+     * Get a current user.
+     *
+     * @returns {module:models/user}
+     */
+    getUser() {
+        return this._helper.user;
+    }
 
-        /**
-         * Get a current user.
-         *
-         * @returns {module:models/user.Class}
-         */
-        getUser: function () {
-            return this._helper.user;
-        },
+    /**
+     * Get the preferences.
+     *
+     * @returns {module:models/preferences}
+     */
+    getPreferences() {
+        return this._helper.preferences;
+    }
 
-        /**
-         * Get the preferences.
-         *
-         * @returns {module:models/preferences.Class}
-         */
-        getPreferences: function () {
-            return this._helper.preferences;
-        },
+    /**
+     * Get the config.
+     *
+     * @returns {module:models/settings}
+     */
+    getConfig() {
+        return this._helper.settings;
+    }
 
-        /**
-         * Get the config.
-         *
-         * @returns {module:models/settings.Class}
-         */
-        getConfig: function () {
-            return this._helper.settings;
-        },
+    /**
+     * Get the ACL.
+     *
+     * @returns {module:acl-manager}
+     */
+    getAcl() {
+        return this._helper.acl;
+    }
 
-        /**
-         * Get the ACL.
-         *
-         * @returns {module:acl-manager.Class}
-         */
-        getAcl: function () {
-            return this._helper.acl;
-        },
+    /**
+     * Get the model factory.
+     *
+     * @returns {module:model-factory}
+     */
+    getModelFactory() {
+        return this._helper.modelFactory;
+    }
 
-        /**
-         * Get the model factory.
-         *
-         * @returns {module:model-factory.Class}
-         */
-        getModelFactory: function () {
-            return this._helper.modelFactory;
-        },
+    /**
+     * Get the collection factory.
+     *
+     * @returns {module:collection-factory}
+     */
+    getCollectionFactory() {
+        return this._helper.collectionFactory;
+    }
 
-        /**
-         * Get the collection factory.
-         *
-         * @returns {module:collection-factory.Class}
-         */
-        getCollectionFactory: function () {
-            return this._helper.collectionFactory;
-        },
+    /**
+     * Get the router.
+     *
+     * @returns {module:router}
+     */
+    getRouter() {
+        return this._helper.router;
+    }
 
-        /**
-         * Get the router.
-         *
-         * @returns {module:router.Class}
-         */
-        getRouter: function () {
-            return this._helper.router;
-        },
+    /**
+     * Get the storage-util.
+     *
+     * @returns {module:storage}
+     */
+    getStorage() {
+        return this._helper.storage;
+    }
 
-        /**
-         * Get the storage-util.
-         *
-         * @returns {module:storage.Class}
-         */
-        getStorage: function () {
-            return this._helper.storage;
-        },
+    /**
+     * Get the session-storage-util.
+     *
+     * @returns {module:session-storage}
+     */
+    getSessionStorage() {
+        return this._helper.sessionStorage;
+    }
 
-        /**
-         * Get the session-storage-util.
-         *
-         * @returns {module:session-storage.Class}
-         */
-        getSessionStorage: function () {
-            return this._helper.sessionStorage;
-        },
+    /**
+     * Get the language-util.
+     *
+     * @returns {module:language}
+     */
+    getLanguage() {
+        return this._helper.language;
+    }
 
-        /**
-         * Get the language-util.
-         *
-         * @returns {module:language.Class}
-         */
-        getLanguage: function () {
-            return this._helper.language;
-        },
+    /**
+     * Get metadata.
+     *
+     * @returns {module:metadata}
+     */
+    getMetadata() {
+        return this._helper.metadata;
+    }
 
-        /**
-         * Get metadata.
-         *
-         * @returns {module:metadata.Class}
-         */
-        getMetadata: function () {
-            return this._helper.metadata;
-        },
+    /**
+     * Get the cache-util.
+     *
+     * @returns {module:cache}
+     */
+    getCache() {
+        return this._helper.cache;
+    }
 
-        /**
-         * Get the cache-util.
-         *
-         * @returns {module:cache.Class}
-         */
-        getCache: function () {
-            return this._helper.cache;
-        },
+    /**
+     * Get the date-time util.
+     *
+     * @returns {module:date-time}
+     */
+    getDateTime() {
+        return this._helper.dateTime;
+    }
 
-        /**
-         * Get the date-time util.
-         *
-         * @returns {module:date-time.Class}
-         */
-        getDateTime: function () {
-            return this._helper.dateTime;
-        },
+    /**
+     * Get the number-util.
+     *
+     * @returns {module:number}
+     */
+    getNumberUtil() {
+        return this._helper.numberUtil;
+    }
 
-        /**
-         * Get the number-util.
-         *
-         * @returns {module:number.Class}
-         */
-        getNumberUtil: function () {
-            return this._helper.numberUtil;
-        },
+    /**
+     * Get the field manager.
+     *
+     * @returns {module:field-manager}
+     */
+    getFieldManager() {
+        return this._helper.fieldManager;
+    }
 
-        /**
-         * Get the field manager.
-         *
-         * @returns {module:field-manager.Class}
-         */
-        getFieldManager: function () {
-            return this._helper.fieldManager;
-        },
+    /**
+     * Get the base-controller.
+     *
+     * @returns {module:controllers/base}
+     */
+    getBaseController() {
+        return this._helper.baseController;
+    }
 
-        /**
-         * Get the base-controller.
-         *
-         * @returns {module:controllers/base.Class}
-         */
-        getBaseController: function () {
-            return this._helper.baseController;
-        },
+    /**
+     * Get the theme manager.
+     *
+     * @returns {module:theme-manager}
+     */
+    getThemeManager() {
+        return this._helper.themeManager;
+    }
 
-        /**
-         * Get the theme manager.
-         *
-         * @returns {module:theme-manager.Class}
-         */
-        getThemeManager: function () {
-            return this._helper.themeManager;
-        },
+    /**
+     * Update a page title. Supposed to be overridden if needed.
+     */
+    updatePageTitle() {
+        var title = this.getConfig().get('applicationName') || 'EspoCRM';
 
-        /**
-         * Update a page title. Supposed to be overridden if needed.
-         */
-        updatePageTitle: function () {
-            var title = this.getConfig().get('applicationName') || 'EspoCRM';
+        this.setPageTitle(title);
+    }
 
-            this.setPageTitle(title);
-        },
+    /**
+     * Set a page title.
+     *
+     * @param {string} title A title.
+     */
+    setPageTitle(title) {
+        this.getHelper().pageTitle.setTitle(title);
+    }
 
-        /**
-         * Set a page title.
-         *
-         * @param {string} title A title.
-         */
-        setPageTitle: function (title) {
-            this.getHelper().pageTitle.setTitle(title);
-        },
+    /**
+     * Translate a label.
+     *
+     * @param {string} label Label.
+     * @param {string} [category] Category.
+     * @param {string} [scope] Scope.
+     * @returns {string}
+     */
+    translate(label, category, scope) {
+        return this.getLanguage().translate(label, category, scope);
+    }
 
-        /**
-         * Translate a label.
-         *
-         * @param {string} label Label.
-         * @param {string} [category] Category.
-         * @param {string} [scope] Scope.
-         * @returns {string}
-         */
-        translate: function (label, category, scope) {
-            return this.getLanguage().translate(label, category, scope);
-        },
+    /**
+     * Get a base path.
+     *
+     * @returns {string}
+     */
+    getBasePath() {
+        return this._helper.basePath || '';
+    }
 
-        /**
-         * Get a base path.
-         *
-         * @returns {string}
-         */
-        getBasePath: function () {
-            return this._helper.basePath || '';
-        },
+    /**
+     * Ajax request.
+     *
+     * @deprecated Use `Espo.Ajax`.
+     * @param {string} url An URL.
+     * @param {string} type A method.
+     * @param {any} [data] Data.
+     * @param {Object} [options] Options.
+     * @returns {Promise<any>}
+     */
+    ajaxRequest(url, type, data, options) {
+        options = options || {};
 
-        /**
-         * Ajax request.
-         *
-         * @deprecated Use `Espo.Ajax`.
-         * @param {string} url An URL.
-         * @param {string} type A method.
-         * @param {any} [data] Data.
-         * @param {Object} [options] Options.
-         * @returns {Promise<any>}
-         */
-        ajaxRequest: function (url, type, data, options) {
-            options = options || {};
+        options.type = type;
+        options.url = url;
+        options.context = this;
 
-            options.type = type;
-            options.url = url;
-            options.context = this;
+        if (data) {
+            options.data = data;
+        }
 
-            if (data) {
-                options.data = data;
-            }
+        return $.ajax(options);
+    }
 
-            return $.ajax(options);
-        },
+    /**
+     * POST request.
+     *
+     * @deprecated Use `Espo.Ajax.postRequest`.
+     * @param {string} url An URL.
+     * @param {any} [data] Data.
+     * @param {Object} [options] Options.
+     * @returns {Promise<any>}
+     */
+    ajaxPostRequest(url, data, options) {
+        if (data) {
+            data = JSON.stringify(data);
+        }
 
-        /**
-         * POST request.
-         *
-         * @deprecated Use `Espo.Ajax.postRequest`.
-         * @param {string} url An URL.
-         * @param {any} [data] Data.
-         * @param {Object} [options] Options.
-         * @returns {Promise<any>}
-         */
-        ajaxPostRequest: function (url, data, options) {
-            if (data) {
-                data = JSON.stringify(data);
-            }
+        return this.ajaxRequest(url, 'POST', data, options);
+    }
 
-            return this.ajaxRequest(url, 'POST', data, options);
-        },
+    /**
+     * PATCH request.
+     *
+     * @deprecated Use `Espo.Ajax.patchRequest`.
+     * @param {string} url An URL.
+     * @param {any} [data] Data.
+     * @param {Object} [options] Options.
+     * @returns {Promise<any>}
+     */
+    ajaxPatchRequest(url, data, options) {
+        if (data) {
+            data = JSON.stringify(data);
+        }
 
-        /**
-         * PATCH request.
-         *
-         * @deprecated Use `Espo.Ajax.patchRequest`.
-         * @param {string} url An URL.
-         * @param {any} [data] Data.
-         * @param {Object} [options] Options.
-         * @returns {Promise<any>}
-         */
-        ajaxPatchRequest: function (url, data, options) {
-            if (data) {
-                data = JSON.stringify(data);
-            }
+        return this.ajaxRequest(url, 'PATCH', data, options);
+    }
 
-            return this.ajaxRequest(url, 'PATCH', data, options);
-        },
+    /**
+     * PUT request.
+     *
+     * @deprecated Use `Espo.Ajax.putRequest`.
+     * @param {string} url An URL.
+     * @param {any} [data] Data.
+     * @param {Object} [options] Options.
+     * @returns {Promise<any>}
+     */
+    ajaxPutRequest(url, data, options) {
+        if (data) {
+            data = JSON.stringify(data);
+        }
 
-        /**
-         * PUT request.
-         *
-         * @deprecated Use `Espo.Ajax.putRequest`.
-         * @param {string} url An URL.
-         * @param {any} [data] Data.
-         * @param {Object} [options] Options.
-         * @returns {Promise<any>}
-         */
-        ajaxPutRequest: function (url, data, options) {
-            if (data) {
-                data = JSON.stringify(data);
-            }
+        return this.ajaxRequest(url, 'PUT', data, options);
+    }
 
-            return this.ajaxRequest(url, 'PUT', data, options);
-        },
+    /**
+     * GET request.
+     *
+     * @deprecated Use `Espo.Ajax.getRequest`.
+     * @param {string} url An URL.
+     * @param {any} [data] Data.
+     * @param {Object} [options] Options.
+     * @returns {Promise<any>}
+     */
+    ajaxGetRequest(url, data, options) {
+        return this.ajaxRequest(url, 'GET', data, options);
+    }
 
-        /**
-         * GET request.
-         *
-         * @deprecated Use `Espo.Ajax.getRequest`.
-         * @param {string} url An URL.
-         * @param {any} [data] Data.
-         * @param {Object} [options] Options.
-         * @returns {Promise<any>}
-         */
-        ajaxGetRequest: function (url, data, options) {
-            return this.ajaxRequest(url, 'GET', data, options);
-        },
+    /**
+     * DELETE request.
+     *
+     * @deprecated Use `Espo.Ajax.deleteRequest`.
+     * @param {string} url An URL.
+     * @param {any} [data] Data.
+     * @param {Object} [options] Options.
+     * @returns {Promise<any>}
+     */
+    ajaxDeleteRequest(url, data, options) {
+        if (data) {
+            data = JSON.stringify(data);
+        }
 
-        /**
-         * DELETE request.
-         *
-         * @deprecated Use `Espo.Ajax.deleteRequest`.
-         * @param {string} url An URL.
-         * @param {any} [data] Data.
-         * @param {Object} [options] Options.
-         * @returns {Promise<any>}
-         */
-        ajaxDeleteRequest: function (url, data, options) {
-            if (data) {
-                data = JSON.stringify(data);
-            }
+        return this.ajaxRequest(url, 'DELETE', data, options);
+    }
 
-            return this.ajaxRequest(url, 'DELETE', data, options);
-        },
+    /**
+     * @typedef {Object} module:view~ConfirmOptions
+     *
+     * @property {string} message A message.
+     * @property {string} [confirmText] A confirm-button text.
+     * @property {string} [cancelText] A cancel-button text.
+     * @property {'danger'|'success'|'warning'|'default'} [confirmStyle='danger'] A confirm-button style.
+     * @property {'static'|boolean} [backdrop=false] A backdrop.
+     * @property {function():void} [cancelCallback] A cancel-callback.
+     */
 
-        /**
-         * @typedef {Object} module:view.Class~ConfirmOptions
-         *
-         * @property {string} message A message.
-         * @property {string} [confirmText] A confirm-button text.
-         * @property {string} [cancelText] A cancel-button text.
-         * @property {'danger'|'success'|'warning'|'default'} [confirmStyle='danger'] A confirm-button style.
-         * @property {'static'|boolean} [backdrop=false] A backdrop.
-         * @property {function():void} [cancelCallback] A cancel-callback.
-         */
+    /**
+     * Show a confirmation dialog.
+     *
+     * @param {string|module:view~ConfirmOptions} o A message or options.
+     * @param [callback] A callback. Deprecated, use a promise.
+     * @param [context] A context. Deprecated.
+     * @returns {Promise} To be resolved if confirmed.
+     */
+    confirm(o, callback, context) {
+        let message;
 
-        /**
-         * Show a confirmation dialog.
-         *
-         * @param {string|module:view.Class~ConfirmOptions} o A message or options.
-         * @param [callback] A callback. Deprecated, use a promise.
-         * @param [context] A context. Deprecated.
-         * @returns {Promise} To be resolved if confirmed.
-         */
-        confirm: function (o, callback, context) {
-            let message;
+        if (typeof o === 'string' || o instanceof String) {
+            message = o;
 
-            if (typeof o === 'string' || o instanceof String) {
-                message = o;
+            o = {};
+        }
+        else {
+            o = o || {};
 
-                o = {};
-            }
-            else {
-                o = o || {};
+            message = o.message;
+        }
 
-                message = o.message;
-            }
+        if (message) {
+            message = this.getHelper()
+                .transformMarkdownText(message, {linksInNewTab: true})
+                .toString();
+        }
 
-            if (message) {
-                message = this.getHelper()
-                    .transformMarkdownText(message, {linksInNewTab: true})
-                    .toString();
-            }
+        let confirmText = o.confirmText || this.translate('Yes');
+        let confirmStyle = o.confirmStyle || null;
+        let cancelText = o.cancelText || this.translate('Cancel');
 
-            let confirmText = o.confirmText || this.translate('Yes');
-            let confirmStyle = o.confirmStyle || null;
-            let cancelText = o.cancelText || this.translate('Cancel');
+        return Espo.Ui.confirm(message, {
+            confirmText: confirmText,
+            cancelText: cancelText,
+            confirmStyle: confirmStyle,
+            backdrop: ('backdrop' in o) ? o.backdrop : true,
+            isHtml: true,
+        }, callback, context);
+    }
+}
 
-            return Espo.Ui.confirm(message, {
-                confirmText: confirmText,
-                cancelText: cancelText,
-                confirmStyle: confirmStyle,
-                backdrop: ('backdrop' in o) ? o.backdrop : true,
-                isHtml: true,
-            }, callback, context);
-        },
-    });
-});
+export default Class;
diff --git a/client/src/views/admin/entity-manager/edit.js b/client/src/views/admin/entity-manager/edit.js
index 24491a7538..033c512dee 100644
--- a/client/src/views/admin/entity-manager/edit.js
+++ b/client/src/views/admin/entity-manager/edit.js
@@ -28,15 +28,15 @@
 
 define('views/admin/entity-manager/edit', ['view', 'model'],
 /**
- * @param {module:view.Class#} Dep
- * @param {typeof module:model.Class} Model
+ * @param {module:view#} Dep
+ * @param {typeof module:model} Model
  */
 function (Dep, Model) {
 
     /**
      * @class
      * @name Class
-     * @extends module:view.Class
+     * @extends module:view
      * @memberOf module:views/admin/entity-manager/edit
      */
     return Dep.extend(/** @lends module:views/admin/entity-manager/edit.Class# */{
diff --git a/client/src/views/admin/entity-manager/modals/select-formula.js b/client/src/views/admin/entity-manager/modals/select-formula.js
index 886bca93c1..4200c4bc85 100644
--- a/client/src/views/admin/entity-manager/modals/select-formula.js
+++ b/client/src/views/admin/entity-manager/modals/select-formula.js
@@ -31,7 +31,7 @@ define('views/admin/entity-manager/modals/select-formula', ['views/modal'], func
     /**
      * @class
      * @name Class
-     * @extends module:views/modal.Class
+     * @extends module:views/modal
      * @memberOf module:views/admin/entity-manager/modals/select-formula
      */
     return Dep.extend(/** @lends module:views/admin/entity-manager/modals/select-formula.Class# */{
diff --git a/client/src/views/admin/entity-manager/scope.js b/client/src/views/admin/entity-manager/scope.js
index 25a08bd1a3..8228e551a7 100644
--- a/client/src/views/admin/entity-manager/scope.js
+++ b/client/src/views/admin/entity-manager/scope.js
@@ -117,7 +117,7 @@ define('views/admin/entity-manager/scope', ['view'], function (Dep) {
 
             Espo.loader.requirePromise('views/admin/entity-manager/modals/select-formula')
                 .then(View => {
-                    /** @type {module:views/modal.Class} */
+                    /** @type {module:views/modal} */
                     let view = new View({
                         scope: this.scope,
                     });
diff --git a/client/src/views/admin/field-manager/edit.js b/client/src/views/admin/field-manager/edit.js
index 2bb38f1f36..3133c9c4ea 100644
--- a/client/src/views/admin/field-manager/edit.js
+++ b/client/src/views/admin/field-manager/edit.js
@@ -31,7 +31,7 @@ define('views/admin/field-manager/edit', ['view', 'model'], function (Dep, Model
     /**
      * @class
      * @name Class
-     * @extends module:view.Class
+     * @extends module:view
      * @memberOf module:views/admin/field-manager/edit
      */
     return Dep.extend(/** @lends module:views/admin/field-manager/edit.Class# */{
diff --git a/client/src/views/admin/field-manager/fields/pattern.js b/client/src/views/admin/field-manager/fields/pattern.js
index a0aedefdd1..9ade916d2c 100644
--- a/client/src/views/admin/field-manager/fields/pattern.js
+++ b/client/src/views/admin/field-manager/fields/pattern.js
@@ -32,7 +32,7 @@ define('views/admin/field-manager/fields/pattern', ['views/fields/varchar'], fun
      * @class
      * @name Class
      * @memberOf module:views/admin/field-manager/fields/pattern
-     * @extends module:views/fields/varchar.Class
+     * @extends module:views/fields/varchar
      */
     return Dep.extend(/** @lends module:views/admin/field-manager/fields/pattern.Class# */{
 
diff --git a/client/src/views/admin/layouts/grid.js b/client/src/views/admin/layouts/grid.js
index 7701b0840c..a8fee477c1 100644
--- a/client/src/views/admin/layouts/grid.js
+++ b/client/src/views/admin/layouts/grid.js
@@ -245,7 +245,7 @@ define('views/admin/layouts/grid', ['views/admin/layouts/base'], function (Dep)
 
             this.panelsData = {};
 
-            require('res!client/css/misc/layout-manager-grid.css', styleCss => {
+            Espo.loader.require('res!client/css/misc/layout-manager-grid.css', styleCss => {
                 this.$style = $('<style>').html(styleCss).appendTo($('body'));
             });
         },
diff --git a/client/src/views/admin/layouts/rows.js b/client/src/views/admin/layouts/rows.js
index 3f38ddefb3..e3db09c7b9 100644
--- a/client/src/views/admin/layouts/rows.js
+++ b/client/src/views/admin/layouts/rows.js
@@ -66,11 +66,11 @@ define('views/admin/layouts/rows', ['views/admin/layouts/base'], function (Dep)
                 this.itemsData[name] = Espo.Utils.cloneDeep(attributes);
             });
 
-            this.wait(
+            /*this.wait(
                 Espo.loader.requirePromise()
-            );
+            );*/
 
-            require('res!client/css/misc/layout-manager-rows.css', styleCss => {
+            Espo.loader.require('res!client/css/misc/layout-manager-rows.css', styleCss => {
                 this.$style = $('<style>').html(styleCss).appendTo($('body'));
             });
         },
diff --git a/client/src/views/authentication-provider/record/edit.js b/client/src/views/authentication-provider/record/edit.js
index 579aa856ce..d716e60cc5 100644
--- a/client/src/views/authentication-provider/record/edit.js
+++ b/client/src/views/authentication-provider/record/edit.js
@@ -35,7 +35,7 @@ function (Dep, Helper) {
 
         /**
          * @private
-         * @type {module:helpers/misc/authentication-provider.Class}
+         * @type {module:helpers/misc/authentication-provider}
          */
         helper: null,
 
diff --git a/client/src/views/dashlet.js b/client/src/views/dashlet.js
index 0c1a0e068f..0f0ee1540d 100644
--- a/client/src/views/dashlet.js
+++ b/client/src/views/dashlet.js
@@ -34,7 +34,7 @@ define('views/dashlet', ['view'], function (Dep) {
      * @class
      * @name Class
      * @memberOf module:views/dashlet
-     * @extends module:view.Class
+     * @extends module:view
      */
     return Dep.extend(/** @lends module:views/dashlet.Class# */{
 
diff --git a/client/src/views/dashlets/abstract/base.js b/client/src/views/dashlets/abstract/base.js
index aa92b19a3f..bf9afa52c1 100644
--- a/client/src/views/dashlets/abstract/base.js
+++ b/client/src/views/dashlets/abstract/base.js
@@ -32,7 +32,7 @@ define('views/dashlets/abstract/base', ['view'], function (Dep) {
      * @class
      * @name Class
      * @memberOf module:views/dashlets/abstract/base
-     * @extends module:view.Class
+     * @extends module:view
      */
     return Dep.extend(/** @lends module:views/dashlets/abstract/base.Class# */{
 
diff --git a/client/src/views/dashlets/options/base.js b/client/src/views/dashlets/options/base.js
index 4c392887cc..30558f9250 100644
--- a/client/src/views/dashlets/options/base.js
+++ b/client/src/views/dashlets/options/base.js
@@ -31,7 +31,7 @@ define('views/dashlets/options/base', ['views/modal', 'model'], function (Dep, M
     /**
      * @class
      * @name Class
-     * @extends module:views/modal.Class
+     * @extends module:views/modal
      * @memberOf module:views/dashlets/options/base
      */
     return Dep.extend(/** @lends module:views/dashlets/options/base.Class# */{
@@ -128,7 +128,7 @@ define('views/dashlets/options/base', ['views/modal', 'model'], function (Dep, M
         setup: function () {
             this.id = 'dashlet-options';
 
-            /** @var {module:model.Class} */
+            /** @var {module:model} */
             let model = this.model = new Model();
 
             model.name = 'DashletOptions';
@@ -169,7 +169,7 @@ define('views/dashlets/options/base', ['views/modal', 'model'], function (Dep, M
         },
 
         /**
-         * @return {module:views/record/edit.Class}
+         * @return {module:views/record/edit}
          */
         getRecordView: function () {
             return this.getView('record');
diff --git a/client/src/views/detail.js b/client/src/views/detail.js
index a8fce9cf4e..98a2d87e23 100644
--- a/client/src/views/detail.js
+++ b/client/src/views/detail.js
@@ -26,693 +26,685 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/detail', ['views/main'], function (Dep) {
+/** @module module:views/detail */
+
+import Dep from 'views/main';
+
+/**
+ * A detail view page.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/main
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    /** @inheritDoc */
+    template: 'detail',
+    /** @inheritDoc */
+    name: 'Detail',
+
+    /** @inheritDoc */
+    optionsToPass: [
+        'attributes',
+        'returnUrl',
+        'returnDispatchParams',
+        'rootUrl',
+    ],
 
     /**
-     * A detail view page.
+     * A header view name.
      *
-     * @class
-     * @name Class
-     * @extends module:views/main.Class
-     * @memberOf module:views/detail
+     * @type {string}
      */
-    return Dep.extend(/** @lends module:views/detail.Class# */{
+    headerView: 'views/header',
 
-        /**
-         * @inheritDoc
-         */
-        template: 'detail',
+    /**
+     * A record view name.
+     *
+     * @type {string}
+     */
+    recordView: 'views/record/detail',
 
-        /**
-         * @inheritDoc
-         */
-        name: 'Detail',
+    /**
+     * A root breadcrumb item not to be a link.
+     *
+     * @type {boolean}
+     */
+    rootLinkDisabled: false,
 
-        /**
-         * @inheritDoc
-         */
-        optionsToPass: [
-            'attributes',
-            'returnUrl',
-            'returnDispatchParams',
-            'rootUrl',
-        ],
+    /**
+     * A root URL.
+     *
+     * @type {string}
+     */
+    rootUrl: '',
 
-        /**
-         * A header view name.
-         *
-         * @type {string}
-         */
-        headerView: 'views/header',
+    /**
+     * Is return.
+     *
+     * @protected
+     */
+    isReturn: false,
 
-        /**
-         * A record view name.
-         *
-         * @type {string}
-         */
-        recordView: 'views/record/detail',
+    /**
+     * @inheritDoc
+     */
+    shortcutKeys: {},
 
-        /**
-         * A root breadcrumb item not to be a link.
-         *
-         * @type {boolean}
-         */
-        rootLinkDisabled: false,
+    /**
+     * @inheritDoc
+     */
+    setup: function () {
+        Dep.prototype.setup.call(this);
 
-        /**
-         * A root URL.
-         *
-         * @type {string}
-         */
-        rootUrl: '',
+        this.headerView = this.options.headerView || this.headerView;
+        this.recordView = this.options.recordView || this.recordView;
 
-        /**
-         * Is return.
-         *
-         * @protected
-         */
-        isReturn: false,
+        this.rootUrl = this.options.rootUrl || this.options.params.rootUrl || '#' + this.scope;
+        this.isReturn = this.options.isReturn || this.options.params.isReturn || false;
 
-        /**
-         * @inheritDoc
-         */
-        shortcutKeys: {},
+        this.setupHeader();
+        this.setupRecord();
+        this.setupPageTitle();
+        this.initFollowButtons();
+        this.initRedirect();
+    },
 
-        /**
-         * @inheritDoc
-         */
-        setup: function () {
-            Dep.prototype.setup.call(this);
+    setupFinal: function () {
+        Dep.prototype.setupFinal.call(this);
 
-            this.headerView = this.options.headerView || this.headerView;
-            this.recordView = this.options.recordView || this.recordView;
+        this.getHelper().processSetupHandlers(this, 'detail');
+    },
 
-            this.rootUrl = this.options.rootUrl || this.options.params.rootUrl || '#' + this.scope;
-            this.isReturn = this.options.isReturn || this.options.params.isReturn || false;
+    /**
+     * @private
+     */
+    initRedirect: function () {
+        if (!this.options.params.isAfterCreate) {
+            return;
+        }
 
-            this.setupHeader();
-            this.setupRecord();
-            this.setupPageTitle();
-            this.initFollowButtons();
-            this.initRedirect();
-        },
+        let redirect = () => {
+            Espo.Ui.success(this.translate('Created'));
 
-        setupFinal: function () {
-            Dep.prototype.setupFinal.call(this);
+            setTimeout(() => {
+                this.getRouter().navigate(this.rootUrl, {trigger: true});
+            }, 1000)
+        };
 
-            this.getHelper().processSetupHandlers(this, 'detail');
-        },
+        if (
+            this.model.lastXhr &&
+            this.model.lastXhr.status === 403
+        ) {
+            redirect();
 
-        /**
-         * @private
-         */
-        initRedirect: function () {
-            if (!this.options.params.isAfterCreate) {
-                return;
-            }
+            return;
+        }
 
-            let redirect = () => {
-                Espo.Ui.success(this.translate('Created'));
+        this.listenToOnce(this.model, 'fetch-forbidden', () => redirect())
+    },
 
-                setTimeout(() => {
-                    this.getRouter().navigate(this.rootUrl, {trigger: true});
-                }, 1000)
-            };
+    /**
+     * Set up a page title.
+     */
+    setupPageTitle: function () {
+        this.listenTo(this.model, 'after:save', () => {
+            this.updatePageTitle();
+        });
 
-            if (
-                this.model.lastXhr &&
-                this.model.lastXhr.status === 403
-            ) {
-                redirect();
-
-                return;
-            }
-
-            this.listenToOnce(this.model, 'fetch-forbidden', () => redirect())
-        },
-
-        /**
-         * Set up a page title.
-         */
-        setupPageTitle: function () {
-            this.listenTo(this.model, 'after:save', () => {
+        this.listenTo(this.model, 'sync', (model) => {
+            if (model && model.hasChanged('name')) {
                 this.updatePageTitle();
-            });
+            }
+        });
+    },
 
-            this.listenTo(this.model, 'sync', (model) => {
-                if (model && model.hasChanged('name')) {
-                    this.updatePageTitle();
+    /**
+     * Set up a header.
+     */
+    setupHeader: function () {
+        this.createView('header', this.headerView, {
+            model: this.model,
+            el: '#main > .header',
+            scope: this.scope,
+            fontSizeFlexible: true,
+        });
+
+        this.listenTo(this.model, 'sync', (model) => {
+            if (model && model.hasChanged('name')) {
+                if (this.getView('header')) {
+                    this.getView('header').reRender();
                 }
-            });
-        },
+            }
+        });
+    },
 
-        /**
-         * Set up a header.
-         */
-        setupHeader: function () {
-            this.createView('header', this.headerView, {
-                model: this.model,
-                el: '#main > .header',
-                scope: this.scope,
-                fontSizeFlexible: true,
+    /**
+     * Set up a record.
+     */
+    setupRecord: function () {
+        let o = {
+            model: this.model,
+            el: '#main > .record',
+            scope: this.scope,
+            shortcutKeysEnabled: true,
+            isReturn: this.isReturn,
+        };
+
+        this.optionsToPass.forEach((option) => {
+            o[option] = this.options[option];
+        });
+
+        if (this.options.params && this.options.params.rootUrl) {
+            o.rootUrl = this.options.params.rootUrl;
+        }
+
+        if (this.model.get('deleted')) {
+            o.readOnly = true;
+        }
+
+        return this.createView('record', this.getRecordViewName(), o);
+    },
+
+    /**
+     * Get a record view name.
+     *
+     * @returns {string}
+     */
+    getRecordViewName: function () {
+        return this.getMetadata()
+            .get('clientDefs.' + this.scope + '.recordViews.detail') || this.recordView;
+    },
+
+    /**
+     * @private
+     */
+    initFollowButtons: function () {
+        if (!this.getMetadata().get(['scopes', this.scope, 'stream'])) {
+            return;
+        }
+
+        this.addFollowButtons();
+
+        this.listenTo(this.model, 'change:isFollowed', () => {
+            this.controlFollowButtons();
+        });
+    },
+
+    /**
+     * @private
+     */
+    addFollowButtons: function () {
+        let isFollowed = this.model.get('isFollowed');
+
+        this.addMenuItem('buttons', {
+            name: 'unfollow',
+            label: 'Followed',
+            style: 'success',
+            action: 'unfollow',
+            hidden: !isFollowed,
+        }, true);
+
+        this.addMenuItem('buttons', {
+            name: 'follow',
+            label: 'Follow',
+            style: 'default',
+            iconHtml: '<span class="fas fa-rss fa-sm"></span>',
+            text: this.translate('Follow'),
+            action: 'follow',
+            hidden: isFollowed ||
+                !this.model.has('isFollowed') ||
+                !this.getAcl().checkModel(this.model, 'stream'),
+        }, true);
+    },
+
+    /**
+     * @private
+     */
+    controlFollowButtons: function () {
+        let isFollowed = this.model.get('isFollowed');
+
+        if (isFollowed) {
+            this.hideHeaderActionItem('follow');
+            this.showHeaderActionItem('unfollow');
+
+            return;
+        }
+
+        this.hideHeaderActionItem('unfollow');
+
+        if (this.getAcl().checkModel(this.model, 'stream')) {
+            this.showHeaderActionItem('follow');
+        }
+    },
+
+    /**
+     * Action 'follow'.
+     */
+    actionFollow: function () {
+        this.disableMenuItem('follow');
+
+        Espo.Ajax
+            .putRequest(this.model.name + '/' + this.model.id + '/subscription')
+            .then(() => {
+                this.hideHeaderActionItem('follow');
+
+                this.model.set('isFollowed', true, {sync: true});
+
+                this.enableMenuItem('follow');
+            })
+            .catch(() => {
+                this.enableMenuItem('follow');
+            });
+    },
+
+    /**
+     * Action 'unfollow'.
+     */
+    actionUnfollow: function () {
+        this.disableMenuItem('unfollow');
+
+        Espo.Ajax
+            .deleteRequest(this.model.name + '/' + this.model.id + '/subscription')
+            .then(() => {
+                this.hideHeaderActionItem('unfollow');
+
+                this.model.set('isFollowed', false, {sync: true});
+
+                this.enableMenuItem('unfollow');
+            })
+            .catch(() => {
+                this.enableMenuItem('unfollow');
+            });
+    },
+
+    /**
+     * @inheritDoc
+     */
+    getHeader: function () {
+        let name = this.model.get('name') || this.model.id;
+
+        let $name =
+            $('<span>')
+                .addClass('font-size-flexible title')
+                .text(name);
+
+        if (this.model.get('deleted')) {
+            $name.css('text-decoration', 'line-through');
+        }
+
+        let headerIconHtml = this.getHeaderIconHtml();
+        let scopeLabel = this.getLanguage().translate(this.scope, 'scopeNamesPlural');
+
+        let $root = $('<span>').text(scopeLabel);
+
+        if (!this.rootLinkDisabled) {
+            $root = $('<span>')
+                .append(
+                    $('<a>')
+                        .attr('href', this.rootUrl)
+                        .addClass('action')
+                        .attr('data-action', 'navigateToRoot')
+                        .text(scopeLabel)
+                );
+        }
+
+        if (headerIconHtml) {
+            $root.prepend(headerIconHtml);
+        }
+
+        return this.buildHeaderHtml([
+            $root,
+            $name,
+        ]);
+    },
+
+    /**
+     * @inheritDoc
+     */
+    updatePageTitle: function () {
+        if (this.model.has('name')) {
+            this.setPageTitle(this.model.get('name') || this.model.id);
+
+            return;
+        }
+
+        Dep.prototype.updatePageTitle.call(this);
+    },
+
+    /**
+     * @return {module:views/record/detail}
+     */
+    getRecordView: function () {
+        return this.getView('record');
+    },
+
+    /**
+     * Update a relationship panel (fetch data).
+     *
+     * @param {string} name A relationship name.
+     */
+    updateRelationshipPanel: function (name) {
+        var bottom = this.getView('record').getView('bottom');
+
+        if (bottom) {
+            var rel = bottom.getView(name);
+
+            if (rel) {
+                rel.collection.fetch();
+            }
+        }
+    },
+
+    /**
+     * @deprecated Use metadata clientDefs > {EntityType} > relationshipPanels > {link} > createAttributeMap.
+     * @type {Object}
+     */
+    relatedAttributeMap: {},
+
+    /**
+     * @deprecated Use clientDefs > {EntityType} > relationshipPanels > {link} > createHandler.
+     * @type {Object}
+     */
+    relatedAttributeFunctions: {},
+
+    /**
+     * @deprecated Use clientDefs > {EntityType} > relationshipPanels > {link} > selectHandler.
+     * @type {Object}
+     */
+    selectRelatedFilters: {},
+
+    /**
+     * @deprecated Use clientDefs > {EntityType} > relationshipPanels > {link} > selectHandler or
+     *  clientDefs > {EntityType} > relationshipPanels > {link} > selectPrimaryFilter.
+     * @type {Object}
+     */
+    selectPrimaryFilterNames: {},
+
+    /**
+     * @deprecated Use clientDefs > {EntityType} > relationshipPanels > {link} > selectHandler or
+     *  clientDefs > {EntityType} > relationshipPanels > {link} > selectBoolFilterList.
+     * @type {Object}
+     */
+    selectBoolFilterLists: [],
+
+    /**
+     * Action 'createRelated'.
+     *
+     * @param {Object} data
+     */
+    actionCreateRelated: function (data) {
+        data = data || {};
+
+        let link = data.link;
+        let scope = this.model.defs['links'][link].entity;
+        let foreignLink = this.model.defs['links'][link].foreign;
+
+        let attributes = {};
+
+        if (
+            this.relatedAttributeFunctions[link] &&
+            typeof this.relatedAttributeFunctions[link] === 'function'
+        ) {
+            attributes = _.extend(this.relatedAttributeFunctions[link].call(this), attributes);
+        }
+
+        let attributeMap = this.getMetadata()
+            .get(['clientDefs', this.scope, 'relationshipPanels', link, 'createAttributeMap']) ||
+            this.relatedAttributeMap[link] || {};
+
+        Object.keys(attributeMap)
+            .forEach(attr => {
+                attributes[attributeMap[attr]] = this.model.get(attr);
             });
 
-            this.listenTo(this.model, 'sync', (model) => {
-                if (model && model.hasChanged('name')) {
-                    if (this.getView('header')) {
-                        this.getView('header').reRender();
+        Espo.Ui.notify(' ... ');
+
+        let handler = this.getMetadata()
+            .get(['clientDefs', this.scope, 'relationshipPanels', link, 'createHandler']);
+
+        new Promise(resolve => {
+            if (!handler) {
+                resolve({});
+
+                return;
+            }
+
+            Espo.loader.requirePromise(handler)
+                .then(Handler => new Handler(this.getHelper()))
+                .then(handler => {
+                    handler.getAttributes(this.model)
+                        .then(attributes => resolve(attributes));
+                });
+        }).then(additionalAttributes => {
+            attributes = {...attributes, ...additionalAttributes};
+
+            let viewName = this.getMetadata()
+                .get(['clientDefs', scope, 'modalViews', 'edit']) || 'views/modals/edit';
+
+            this.createView('quickCreate', viewName, {
+                scope: scope,
+                relate: {
+                    model: this.model,
+                    link: foreignLink,
+                },
+                attributes: attributes,
+            }, view => {
+                view.render();
+                view.notify(false);
+
+                this.listenToOnce(view, 'after:save', () => {
+                    if (data.fromSelectRelated) {
+                        setTimeout(() => this.clearView('dialogSelectRelated'), 25);
+                    }
+
+                    this.updateRelationshipPanel(link);
+
+                    this.model.trigger('after:relate');
+                    this.model.trigger('after:relate:' + link);
+                });
+            });
+        });
+    },
+
+    /**
+     * Action 'selectRelated'.
+     *
+     * @param {Object.<string, *>} data
+     */
+    actionSelectRelated: function (data) {
+        let link = data.link;
+
+        if (!data.foreignEntityType && !this.model.defs['links'][link]) {
+            throw new Error('Link ' + link + ' does not exist.');
+        }
+
+        let scope = data.foreignEntityType || this.model.defs['links'][link].entity;
+        let massRelateEnabled = data.massSelect;
+
+        /** @var {Object.<string, *>} */
+        let panelDefs = this.getMetadata().get(['clientDefs', this.scope, 'relationshipPanels', link]) || {};
+
+        let advanced = {};
+
+        if (link in this.selectRelatedFilters) {
+            advanced = Espo.Utils.cloneDeep(this.selectRelatedFilters[link]) || advanced;
+
+            for (let filterName in advanced) {
+                if (typeof advanced[filterName] === 'function') {
+                    let filtersData = advanced[filterName].call(this);
+
+                    if (filtersData) {
+                        advanced[filterName] = filtersData;
+                    } else {
+                        delete advanced[filterName];
                     }
                 }
-            });
-        },
-
-        /**
-         * Set up a record.
-         */
-        setupRecord: function () {
-            let o = {
-                model: this.model,
-                el: '#main > .record',
-                scope: this.scope,
-                shortcutKeysEnabled: true,
-                isReturn: this.isReturn,
-            };
-
-            this.optionsToPass.forEach((option) => {
-                o[option] = this.options[option];
-            });
-
-            if (this.options.params && this.options.params.rootUrl) {
-                o.rootUrl = this.options.params.rootUrl;
             }
+        }
 
-            if (this.model.get('deleted')) {
-                o.readOnly = true;
-            }
+        let foreignLink = (this.model.defs['links'][link] || {}).foreign;
 
-            return this.createView('record', this.getRecordViewName(), o);
-        },
-
-        /**
-         * Get a record view name.
-         *
-         * @returns {string}
-         */
-        getRecordViewName: function () {
-            return this.getMetadata()
-                .get('clientDefs.' + this.scope + '.recordViews.detail') || this.recordView;
-        },
-
-        /**
-         * @private
-         */
-        initFollowButtons: function () {
-            if (!this.getMetadata().get(['scopes', this.scope, 'stream'])) {
-                return;
-            }
-
-            this.addFollowButtons();
-
-            this.listenTo(this.model, 'change:isFollowed', () => {
-                this.controlFollowButtons();
-            });
-        },
-
-        /**
-         * @private
-         */
-        addFollowButtons: function () {
-            let isFollowed = this.model.get('isFollowed');
-
-            this.addMenuItem('buttons', {
-                name: 'unfollow',
-                label: 'Followed',
-                style: 'success',
-                action: 'unfollow',
-                hidden: !isFollowed,
-            }, true);
-
-            this.addMenuItem('buttons', {
-                name: 'follow',
-                label: 'Follow',
-                style: 'default',
-                iconHtml: '<span class="fas fa-rss fa-sm"></span>',
-                text: this.translate('Follow'),
-                action: 'follow',
-                hidden: isFollowed ||
-                    !this.model.has('isFollowed') ||
-                    !this.getAcl().checkModel(this.model, 'stream'),
-            }, true);
-        },
-
-        /**
-         * @private
-         */
-        controlFollowButtons: function () {
-            let isFollowed = this.model.get('isFollowed');
-
-            if (isFollowed) {
-                this.hideHeaderActionItem('follow');
-                this.showHeaderActionItem('unfollow');
-
-                return;
-            }
-
-            this.hideHeaderActionItem('unfollow');
-
-            if (this.getAcl().checkModel(this.model, 'stream')) {
-                this.showHeaderActionItem('follow');
-            }
-        },
-
-        /**
-         * Action 'follow'.
-         */
-        actionFollow: function () {
-            this.disableMenuItem('follow');
-
-            Espo.Ajax
-                .putRequest(this.model.name + '/' + this.model.id + '/subscription')
-                .then(() => {
-                    this.hideHeaderActionItem('follow');
-
-                    this.model.set('isFollowed', true, {sync: true});
-
-                    this.enableMenuItem('follow');
-                })
-                .catch(() => {
-                    this.enableMenuItem('follow');
-                });
-        },
-
-        /**
-         * Action 'unfollow'.
-         */
-        actionUnfollow: function () {
-            this.disableMenuItem('unfollow');
-
-            Espo.Ajax
-                .deleteRequest(this.model.name + '/' + this.model.id + '/subscription')
-                .then(() => {
-                    this.hideHeaderActionItem('unfollow');
-
-                    this.model.set('isFollowed', false, {sync: true});
-
-                    this.enableMenuItem('unfollow');
-                })
-                .catch(() => {
-                    this.enableMenuItem('unfollow');
-                });
-        },
-
-        /**
-         * @inheritDoc
-         */
-        getHeader: function () {
-            let name = this.model.get('name') || this.model.id;
-
-            let $name =
-                $('<span>')
-                    .addClass('font-size-flexible title')
-                    .text(name);
-
-            if (this.model.get('deleted')) {
-                $name.css('text-decoration', 'line-through');
-            }
-
-            let headerIconHtml = this.getHeaderIconHtml();
-            let scopeLabel = this.getLanguage().translate(this.scope, 'scopeNamesPlural');
-
-            let $root = $('<span>').text(scopeLabel);
-
-            if (!this.rootLinkDisabled) {
-                $root = $('<span>')
-                    .append(
-                        $('<a>')
-                            .attr('href', this.rootUrl)
-                            .addClass('action')
-                            .attr('data-action', 'navigateToRoot')
-                            .text(scopeLabel)
-                    );
-            }
-
-            if (headerIconHtml) {
-                $root.prepend(headerIconHtml);
-            }
-
-            return this.buildHeaderHtml([
-                $root,
-                $name,
-            ]);
-        },
-
-        /**
-         * @inheritDoc
-         */
-        updatePageTitle: function () {
-            if (this.model.has('name')) {
-                this.setPageTitle(this.model.get('name') || this.model.id);
-
-                return;
-            }
-
-            Dep.prototype.updatePageTitle.call(this);
-        },
-
-        /**
-         * @return {module:views/record/detail.Class}
-         */
-        getRecordView: function () {
-            return this.getView('record');
-        },
-
-        /**
-         * Update a relationship panel (fetch data).
-         *
-         * @param {string} name A relationship name.
-         */
-        updateRelationshipPanel: function (name) {
-            var bottom = this.getView('record').getView('bottom');
-
-            if (bottom) {
-                var rel = bottom.getView(name);
-
-                if (rel) {
-                    rel.collection.fetch();
-                }
-            }
-        },
-
-        /**
-         * @deprecated Use metadata clientDefs > {EntityType} > relationshipPanels > {link} > createAttributeMap.
-         * @type {Object}
-         */
-        relatedAttributeMap: {},
-
-        /**
-         * @deprecated Use clientDefs > {EntityType} > relationshipPanels > {link} > createHandler.
-         * @type {Object}
-         */
-        relatedAttributeFunctions: {},
-
-        /**
-         * @deprecated Use clientDefs > {EntityType} > relationshipPanels > {link} > selectHandler.
-         * @type {Object}
-         */
-        selectRelatedFilters: {},
-
-        /**
-         * @deprecated Use clientDefs > {EntityType} > relationshipPanels > {link} > selectHandler or
-         *  clientDefs > {EntityType} > relationshipPanels > {link} > selectPrimaryFilter.
-         * @type {Object}
-         */
-        selectPrimaryFilterNames: {},
-
-        /**
-         * @deprecated Use clientDefs > {EntityType} > relationshipPanels > {link} > selectHandler or
-         *  clientDefs > {EntityType} > relationshipPanels > {link} > selectBoolFilterList.
-         * @type {Object}
-         */
-        selectBoolFilterLists: [],
-
-        /**
-         * Action 'createRelated'.
-         *
-         * @param {Object} data
-         */
-        actionCreateRelated: function (data) {
-            data = data || {};
-
-            let link = data.link;
-            let scope = this.model.defs['links'][link].entity;
-            let foreignLink = this.model.defs['links'][link].foreign;
-
-            let attributes = {};
+        if (foreignLink && scope) {
+            // Select only records not related with any.
+            let foreignLinkType = this.getMetadata()
+                .get(['entityDefs', scope, 'links', foreignLink, 'type']);
+            let foreignLinkFieldType = this.getMetadata()
+                .get(['entityDefs', scope, 'fields', foreignLink, 'type']);
 
             if (
-                this.relatedAttributeFunctions[link] &&
-                typeof this.relatedAttributeFunctions[link] === 'function'
+                ~['belongsTo', 'belongsToParent'].indexOf(foreignLinkType) &&
+                foreignLinkFieldType &&
+                !advanced[foreignLink] &&
+                ~['link', 'linkParent'].indexOf(foreignLinkFieldType)
             ) {
-                attributes = _.extend(this.relatedAttributeFunctions[link].call(this), attributes);
-            }
-
-            let attributeMap = this.getMetadata()
-                .get(['clientDefs', this.scope, 'relationshipPanels', link, 'createAttributeMap']) ||
-                this.relatedAttributeMap[link] || {};
-
-            Object.keys(attributeMap)
-                .forEach(attr => {
-                    attributes[attributeMap[attr]] = this.model.get(attr);
-                });
-
-            Espo.Ui.notify(' ... ');
-
-            let handler = this.getMetadata()
-                .get(['clientDefs', this.scope, 'relationshipPanels', link, 'createHandler']);
-
-            new Promise(resolve => {
-                if (!handler) {
-                    resolve({});
-
-                    return;
-                }
-
-                Espo.loader.requirePromise(handler)
-                    .then(Handler => new Handler(this.getHelper()))
-                    .then(handler => {
-                        handler.getAttributes(this.model)
-                            .then(attributes => resolve(attributes));
-                    });
-            }).then(additionalAttributes => {
-                attributes = {...attributes, ...additionalAttributes};
-
-                let viewName = this.getMetadata()
-                    .get(['clientDefs', scope, 'modalViews', 'edit']) || 'views/modals/edit';
-
-                this.createView('quickCreate', viewName, {
-                    scope: scope,
-                    relate: {
-                        model: this.model,
-                        link: foreignLink,
+                advanced[foreignLink] = {
+                    type: 'isNull',
+                    attribute: foreignLink + 'Id',
+                    data: {
+                        type: 'isEmpty',
                     },
-                    attributes: attributes,
-                }, view => {
-                    view.render();
-                    view.notify(false);
+                };
+            }
+        }
 
-                    this.listenToOnce(view, 'after:save', () => {
-                        if (data.fromSelectRelated) {
-                            setTimeout(() => this.clearView('dialogSelectRelated'), 25);
-                        }
+        let primaryFilterName = data.primaryFilterName || this.selectPrimaryFilterNames[link] || null;
 
-                        this.updateRelationshipPanel(link);
+        if (typeof primaryFilterName === 'function') {
+            primaryFilterName = primaryFilterName.call(this);
+        }
 
-                        this.model.trigger('after:relate');
-                        this.model.trigger('after:relate:' + link);
+        let dataBoolFilterList = data.boolFilterList;
+
+        if (typeof data.boolFilterList === 'string') {
+            dataBoolFilterList = data.boolFilterList.split(',');
+        }
+
+        let boolFilterList = dataBoolFilterList ||
+            panelDefs.selectBoolFilterList ||
+            this.selectBoolFilterLists[link] ||
+            [];
+
+        if (typeof boolFilterList === 'function') {
+            boolFilterList = boolFilterList.call(this);
+        }
+
+        boolFilterList = Espo.Utils.clone(boolFilterList);
+
+        primaryFilterName = primaryFilterName || panelDefs.selectPrimaryFilter || null;
+
+        let viewKey = data.viewKey || 'select';
+
+        let viewName = panelDefs.selectModalView ||
+            this.getMetadata().get(['clientDefs', scope, 'modalViews', viewKey]) ||
+            'views/modals/select-records';
+
+        Espo.Ui.notify(' ... ');
+
+        let handler = panelDefs.selectHandler || null;
+
+        new Promise(resolve => {
+            if (!handler) {
+                resolve({});
+
+                return;
+            }
+
+            Espo.loader.requirePromise(handler)
+                .then(Handler => new Handler(this.getHelper()))
+                .then(handler => {
+                    handler.getFilters(this.model)
+                        .then(filters => resolve(filters));
+                });
+        }).then(filters => {
+            advanced = {...advanced, ...(filters.advanced || {})};
+            boolFilterList = [...boolFilterList, ...(filters.bool || [])];
+
+            if (filters.primary && !primaryFilterName) {
+                primaryFilterName = filters.primary;
+            }
+
+            this.createView('dialogSelectRelated', viewName, {
+                scope: scope,
+                multiple: true,
+                createButton: data.createButton || false,
+                triggerCreateEvent: true,
+                filters: advanced,
+                massRelateEnabled: massRelateEnabled,
+                primaryFilterName: primaryFilterName,
+                boolFilterList: boolFilterList,
+            }, dialog => {
+                dialog.render();
+
+                Espo.Ui.notify(false);
+
+                this.listenTo(dialog, 'create', () => {
+                    this.actionCreateRelated({
+                        link: data.link,
+                        fromSelectRelated: true,
                     });
                 });
-            });
-        },
 
-        /**
-         * Action 'selectRelated'.
-         *
-         * @param {Object.<string, *>} data
-         */
-        actionSelectRelated: function (data) {
-            let link = data.link;
+                this.listenToOnce(dialog, 'select', (selectObj) => {
+                    let data = {};
 
-            if (!data.foreignEntityType && !this.model.defs['links'][link]) {
-                throw new Error('Link ' + link + ' does not exist.');
-            }
+                    if (Object.prototype.toString.call(selectObj) === '[object Array]') {
+                        let ids = [];
 
-            let scope = data.foreignEntityType || this.model.defs['links'][link].entity;
-            let massRelateEnabled = data.massSelect;
+                        selectObj.forEach(model => ids.push(model.id));
 
-            /** @var {Object.<string, *>} */
-            let panelDefs = this.getMetadata().get(['clientDefs', this.scope, 'relationshipPanels', link]) || {};
-
-            let advanced = {};
-
-            if (link in this.selectRelatedFilters) {
-                advanced = Espo.Utils.cloneDeep(this.selectRelatedFilters[link]) || advanced;
-
-                for (let filterName in advanced) {
-                    if (typeof advanced[filterName] === 'function') {
-                        let filtersData = advanced[filterName].call(this);
-
-                        if (filtersData) {
-                            advanced[filterName] = filtersData;
-                        } else {
-                            delete advanced[filterName];
-                        }
+                        data.ids = ids;
                     }
-                }
-            }
-
-            let foreignLink = (this.model.defs['links'][link] || {}).foreign;
-
-            if (foreignLink && scope) {
-                // Select only records not related with any.
-                let foreignLinkType = this.getMetadata()
-                    .get(['entityDefs', scope, 'links', foreignLink, 'type']);
-                let foreignLinkFieldType = this.getMetadata()
-                    .get(['entityDefs', scope, 'fields', foreignLink, 'type']);
-
-                if (
-                    ~['belongsTo', 'belongsToParent'].indexOf(foreignLinkType) &&
-                    foreignLinkFieldType &&
-                    !advanced[foreignLink] &&
-                    ~['link', 'linkParent'].indexOf(foreignLinkFieldType)
-                ) {
-                    advanced[foreignLink] = {
-                        type: 'isNull',
-                        attribute: foreignLink + 'Id',
-                        data: {
-                            type: 'isEmpty',
-                        },
-                    };
-                }
-            }
-
-            let primaryFilterName = data.primaryFilterName || this.selectPrimaryFilterNames[link] || null;
-
-            if (typeof primaryFilterName === 'function') {
-                primaryFilterName = primaryFilterName.call(this);
-            }
-
-            let dataBoolFilterList = data.boolFilterList;
-
-            if (typeof data.boolFilterList === 'string') {
-                dataBoolFilterList = data.boolFilterList.split(',');
-            }
-
-            let boolFilterList = dataBoolFilterList ||
-                panelDefs.selectBoolFilterList ||
-                this.selectBoolFilterLists[link] ||
-                [];
-
-            if (typeof boolFilterList === 'function') {
-                boolFilterList = boolFilterList.call(this);
-            }
-
-            boolFilterList = Espo.Utils.clone(boolFilterList);
-
-            primaryFilterName = primaryFilterName || panelDefs.selectPrimaryFilter || null;
-
-            let viewKey = data.viewKey || 'select';
-
-            let viewName = panelDefs.selectModalView ||
-                this.getMetadata().get(['clientDefs', scope, 'modalViews', viewKey]) ||
-                'views/modals/select-records';
-
-            Espo.Ui.notify(' ... ');
-
-            let handler = panelDefs.selectHandler || null;
-
-            new Promise(resolve => {
-                if (!handler) {
-                    resolve({});
-
-                    return;
-                }
-
-                Espo.loader.requirePromise(handler)
-                    .then(Handler => new Handler(this.getHelper()))
-                    .then(handler => {
-                        handler.getFilters(this.model)
-                            .then(filters => resolve(filters));
-                    });
-            }).then(filters => {
-                advanced = {...advanced, ...(filters.advanced || {})};
-                boolFilterList = [...boolFilterList, ...(filters.bool || [])];
-
-                if (filters.primary && !primaryFilterName) {
-                    primaryFilterName = filters.primary;
-                }
-
-                this.createView('dialogSelectRelated', viewName, {
-                    scope: scope,
-                    multiple: true,
-                    createButton: data.createButton || false,
-                    triggerCreateEvent: true,
-                    filters: advanced,
-                    massRelateEnabled: massRelateEnabled,
-                    primaryFilterName: primaryFilterName,
-                    boolFilterList: boolFilterList,
-                }, dialog => {
-                    dialog.render();
-
-                    Espo.Ui.notify(false);
-
-                    this.listenTo(dialog, 'create', () => {
-                        this.actionCreateRelated({
-                            link: data.link,
-                            fromSelectRelated: true,
-                        });
-                    });
-
-                    this.listenToOnce(dialog, 'select', (selectObj) => {
-                        let data = {};
-
-                        if (Object.prototype.toString.call(selectObj) === '[object Array]') {
-                            let ids = [];
-
-                            selectObj.forEach(model => ids.push(model.id));
-
-                            data.ids = ids;
+                    else {
+                        if (selectObj.massRelate) {
+                            data.massRelate = true;
+                            data.where = selectObj.where;
+                            data.searchParams = selectObj.searchParams;
                         }
                         else {
-                            if (selectObj.massRelate) {
-                                data.massRelate = true;
-                                data.where = selectObj.where;
-                                data.searchParams = selectObj.searchParams;
-                            }
-                            else {
-                                data.id = selectObj.id;
-                            }
+                            data.id = selectObj.id;
                         }
+                    }
 
-                        let url = this.scope + '/' + this.model.id + '/' + link;
+                    let url = this.scope + '/' + this.model.id + '/' + link;
 
-                        Espo.Ajax.postRequest(url, data)
-                            .then(() => {
-                                Espo.Ui.success(this.translate('Linked'))
+                    Espo.Ajax.postRequest(url, data)
+                        .then(() => {
+                            Espo.Ui.success(this.translate('Linked'))
 
-                                this.updateRelationshipPanel(link);
+                            this.updateRelationshipPanel(link);
 
-                                this.model.trigger('after:relate');
-                                this.model.trigger('after:relate:' + link);
-                            });
-                    });
+                            this.model.trigger('after:relate');
+                            this.model.trigger('after:relate:' + link);
+                        });
                 });
             });
-        },
+        });
+    },
 
-        /**
-         * Action 'duplicate'.
-         */
-        actionDuplicate: function () {
-            Espo.Ui.notify(' ... ');
+    /**
+     * Action 'duplicate'.
+     */
+    actionDuplicate: function () {
+        Espo.Ui.notify(' ... ');
 
-            Espo.Ajax.postRequest(this.scope + '/action/getDuplicateAttributes', {
-                    id: this.model.id
-                })
-                .then((attributes) => {
-                    Espo.Ui.notify(false);
+        Espo.Ajax
+            .postRequest(this.scope + '/action/getDuplicateAttributes', {id: this.model.id})
+            .then(attributes => {
+                Espo.Ui.notify(false);
 
-                    var url = '#' + this.scope + '/create';
+                var url = '#' + this.scope + '/create';
 
-                    this.getRouter().dispatch(this.scope, 'create', {
-                        attributes: attributes,
-                        returnUrl: this.getRouter().getCurrentUrl(),
-                        options: {
-                            duplicateSourceId: this.model.id,
-                        },
-                    });
-
-                    this.getRouter().navigate(url, {trigger: false});
+                this.getRouter().dispatch(this.scope, 'create', {
+                    attributes: attributes,
+                    returnUrl: this.getRouter().getCurrentUrl(),
+                    options: {
+                        duplicateSourceId: this.model.id,
+                    },
                 });
-        },
-    });
+
+                this.getRouter().navigate(url, {trigger: false});
+            });
+    },
 });
diff --git a/client/src/views/edit.js b/client/src/views/edit.js
index 7308fee5d9..1cdd2c1ac7 100644
--- a/client/src/views/edit.js
+++ b/client/src/views/edit.js
@@ -26,207 +26,195 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/edit', ['views/main'], function (Dep) {
+/** @module module:views/edit */
+
+import Dep from 'views/main';
+
+/**
+ * An edit view page.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/main
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    /** @inheritDoc */
+    template: 'edit',
+
+    /** @inheritDoc */
+    scope: null,
+    /** @inheritDoc */
+    name: 'Edit',
+    /** @inheritDoc */
+    menu: null,
+
+    /** @inheritDoc */
+    optionsToPass: [
+        'returnUrl',
+        'returnDispatchParams',
+        'attributes',
+        'rootUrl',
+        'duplicateSourceId',
+        'returnAfterCreate',
+    ],
 
     /**
-     * An edit view page.
+     * A header view name.
      *
-     * @class
-     * @name Class
-     * @extends module:views/main.Class
-     * @memberOf module:views/edit
+     * @type {string}
      */
-    return Dep.extend(/** @lends module:views/edit.Class# */{
+    headerView: 'views/header',
 
-        /**
-         * @inheritDoc
-         */
-        template: 'edit',
+    /**
+     * A record view name.
+     *
+     * @type {string}
+     */
+    recordView: 'views/record/edit',
 
-        /**
-         * @inheritDoc
-         */
-        scope: null,
+    /**
+     * A root breadcrumb item not to be a link.
+     *
+     * @type {boolean}
+     */
+    rootLinkDisabled: false,
 
-        /**
-         * @inheritDoc
-         */
-        name: 'Edit',
+    /**
+     * @inheritDoc
+     */
+    setup: function () {
+        this.headerView = this.options.headerView || this.headerView;
+        this.recordView = this.options.recordView || this.recordView;
 
-        /**
-         * @inheritDoc
-         */
-        menu: null,
+        this.setupHeader();
+        this.setupRecord();
+    },
 
-        /**
-         * @inheritDoc
-         */
-        optionsToPass: [
-            'returnUrl',
-            'returnDispatchParams',
-            'attributes',
-            'rootUrl',
-            'duplicateSourceId',
-            'returnAfterCreate',
-        ],
+    setupFinal: function () {
+        Dep.prototype.setupFinal.call(this);
 
-        /**
-         * A header view name.
-         *
-         * @type {string}
-         */
-        headerView: 'views/header',
+        this.getHelper().processSetupHandlers(this, 'edit');
+    },
 
-        /**
-         * A record view name.
-         *
-         * @type {string}
-         */
-        recordView: 'views/record/edit',
+    /**
+     * Set up a header.
+     */
+    setupHeader: function () {
+        this.createView('header', this.headerView, {
+            model: this.model,
+            el: '#main > .header',
+            scope: this.scope,
+        });
+    },
 
-        /**
-         * A root breadcrumb item not to be a link.
-         *
-         * @type {boolean}
-         */
-        rootLinkDisabled: false,
+    /**
+     * Set up a record.
+     */
+    setupRecord: function () {
+        let o = {
+            model: this.model,
+            el: '#main > .record',
+            scope: this.scope,
+            shortcutKeysEnabled: true,
+        };
 
-        /**
-         * @inheritDoc
-         */
-        setup: function () {
-            this.headerView = this.options.headerView || this.headerView;
-            this.recordView = this.options.recordView || this.recordView;
+        this.optionsToPass.forEach(option => {
+            o[option] = this.options[option];
+        });
 
-            this.setupHeader();
-            this.setupRecord();
-        },
+        let params = this.options.params || {};
 
-        setupFinal: function () {
-            Dep.prototype.setupFinal.call(this);
+        if (params.rootUrl) {
+            o.rootUrl = params.rootUrl;
+        }
 
-            this.getHelper().processSetupHandlers(this, 'edit');
-        },
+        if (params.focusForCreate) {
+            o.focusForCreate = true;
+        }
 
-        /**
-         * Set up a header.
-         */
-        setupHeader: function () {
-            this.createView('header', this.headerView, {
-                model: this.model,
-                el: '#main > .header',
-                scope: this.scope,
-            });
-        },
+        return this.createView('record', this.getRecordViewName(), o);
+    },
 
-        /**
-         * Set up a record.
-         */
-        setupRecord: function () {
-            let o = {
-                model: this.model,
-                el: '#main > .record',
-                scope: this.scope,
-                shortcutKeysEnabled: true,
-            };
+    /**
+     * Get a record view name.
+     *
+     * @returns {string}
+     */
+    getRecordViewName: function () {
+        return this.getMetadata().get('clientDefs.' + this.scope + '.recordViews.edit') || this.recordView;
+    },
 
-            this.optionsToPass.forEach(option => {
-                o[option] = this.options[option];
-            });
+    /**
+     * @inheritDoc
+     */
+    getHeader: function () {
+        let headerIconHtml = this.getHeaderIconHtml();
+        let rootUrl = this.options.rootUrl || this.options.params.rootUrl || '#' + this.scope;
+        let scopeLabel = this.getLanguage().translate(this.scope, 'scopeNamesPlural');
 
-            let params = this.options.params || {};
+        let $root = $('<span>').text(scopeLabel);
 
-            if (params.rootUrl) {
-                o.rootUrl = params.rootUrl;
-            }
+        if (!this.options.noHeaderLinks && !this.rootLinkDisabled) {
+            $root =
+                $('<span>')
+                    .append(
+                        $('<a>')
+                            .attr('href', rootUrl)
+                            .addClass('action')
+                            .attr('data-action', 'navigateToRoot')
+                            .text(scopeLabel)
+                    );
+        }
 
-            if (params.focusForCreate) {
-                o.focusForCreate = true;
-            }
+        if (headerIconHtml) {
+            $root.prepend(headerIconHtml);
+        }
 
-            return this.createView('record', this.getRecordViewName(), o);
-        },
+        if (this.model.isNew()) {
+            let $create = $('<span>').text(this.getLanguage().translate('create'));
 
-        /**
-         * Get a record view name.
-         *
-         * @returns {string}
-         */
-        getRecordViewName: function () {
-            return this.getMetadata().get('clientDefs.' + this.scope + '.recordViews.edit') || this.recordView;
-        },
+            return this.buildHeaderHtml([$root, $create]);
+        }
 
-        /**
-         * @inheritDoc
-         */
-        getHeader: function () {
-            let headerIconHtml = this.getHeaderIconHtml();
-            let rootUrl = this.options.rootUrl || this.options.params.rootUrl || '#' + this.scope;
-            let scopeLabel = this.getLanguage().translate(this.scope, 'scopeNamesPlural');
+        let name = this.model.get('name') || this.model.id;
 
-            let $root = $('<span>').text(scopeLabel);
+        let $name = $('<span>').text(name);
 
-            if (!this.options.noHeaderLinks && !this.rootLinkDisabled) {
-                $root =
-                    $('<span>')
-                        .append(
-                            $('<a>')
-                                .attr('href', rootUrl)
-                                .addClass('action')
-                                .attr('data-action', 'navigateToRoot')
-                                .text(scopeLabel)
-                        );
-            }
+        if (!this.options.noHeaderLinks) {
+            let url = '#' + this.scope + '/view/' + this.model.id;
 
-            if (headerIconHtml) {
-                $root.prepend(headerIconHtml);
-            }
+            $name =
+                $('<a>')
+                    .attr('href', url)
+                    .addClass('action')
+                    .append($name);
+        }
 
-            if (this.model.isNew()) {
-                let $create = $('<span>').text(this.getLanguage().translate('create'));
+        return this.buildHeaderHtml([$root, $name]);
+    },
 
-                return this.buildHeaderHtml([$root, $create]);
-            }
+    /**
+     * @inheritDoc
+     */
+    updatePageTitle: function () {
+        var title;
 
-            let name = this.model.get('name') || this.model.id;
+        if (this.model.isNew()) {
+            title = this.getLanguage().translate('Create') + ' ' +
+                this.getLanguage().translate(this.scope, 'scopeNames');
+        }
+        else {
+            var name = this.model.get('name');
 
-            let $name = $('<span>').text(name);
-
-            if (!this.options.noHeaderLinks) {
-                let url = '#' + this.scope + '/view/' + this.model.id;
-
-                $name =
-                    $('<a>')
-                        .attr('href', url)
-                        .addClass('action')
-                        .append($name);
-            }
-
-            return this.buildHeaderHtml([$root, $name]);
-        },
-
-        /**
-         * @inheritDoc
-         */
-        updatePageTitle: function () {
-            var title;
-
-            if (this.model.isNew()) {
-                title = this.getLanguage().translate('Create') + ' ' +
-                    this.getLanguage().translate(this.scope, 'scopeNames');
+            if (name) {
+                title = name;
             }
             else {
-                var name = this.model.get('name');
-
-                if (name) {
-                    title = name;
-                }
-                else {
-                    title = this.getLanguage().translate(this.scope, 'scopeNames')
-                }
+                title = this.getLanguage().translate(this.scope, 'scopeNames')
             }
+        }
 
-            this.setPageTitle(title);
-        },
-    });
+        this.setPageTitle(title);
+    },
 });
diff --git a/client/src/views/email/fields/email-address-varchar.js b/client/src/views/email/fields/email-address-varchar.js
index 1c8dddf9b5..8d90842083 100644
--- a/client/src/views/email/fields/email-address-varchar.js
+++ b/client/src/views/email/fields/email-address-varchar.js
@@ -35,7 +35,10 @@ function (Dep, From, EmailAddress) {
         detailTemplate: 'email/fields/email-address-varchar/detail',
         editTemplate: 'email/fields/email-address-varchar/edit',
 
-        emailAddressRegExp: /[-!#$%&'*+/=?^_`{|}~A-Za-z0-9]+(?:\.[-!#$%&'*+/=?^_`{|}~A-Za-z0-9]+)*@([A-Za-z0-9]([A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9]/gi,
+        emailAddressRegExp: new RegExp(
+            /^[-!#$%&'*+/=?^_`{|}~A-Za-z0-9]+(?:\.[-!#$%&'*+/=?^_`{|}~A-Za-z0-9]+)*/.source +
+            /@([A-Za-z0-9]([A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9]/.source
+        ),
 
         data: function () {
             let data = Dep.prototype.data.call(this);
diff --git a/client/src/views/email/fields/has-attachment.js b/client/src/views/email/fields/has-attachment.js
index bf3694f96b..31f4048d9a 100644
--- a/client/src/views/email/fields/has-attachment.js
+++ b/client/src/views/email/fields/has-attachment.js
@@ -31,7 +31,7 @@ define('views/email/fields/has-attachment', ['views/fields/base'], function (Dep
     /**
      * @class
      * @name Class
-     * @extends module:views/fields/base.Class
+     * @extends module:views/fields/base
      * @memberOf module:views/email/fields/has-attachment
      */
     return Dep.extend(/** @lends module:views/email/fields/has-attachment.Class# */{
diff --git a/client/src/views/email/list.js b/client/src/views/email/list.js
index 30970fa1ae..0964f2e6e9 100644
--- a/client/src/views/email/list.js
+++ b/client/src/views/email/list.js
@@ -32,7 +32,7 @@ define('views/email/list', ['views/list'], function (Dep) {
      * @class
      * @name Class
      * @memberOf module:views/email/list
-     * @extends module:views/list.Class
+     * @extends module:views/list
      */
     return Dep.extend(/** @lends module:views/email/list.Class# */{
 
@@ -305,7 +305,7 @@ define('views/email/list', ['views/list'], function (Dep) {
          * @inheritDoc
          */
         createSearchView: function () {
-            /** @type {Promise<module:view.Class>}*/
+            /** @type {Promise<module:view>}*/
             let promise = Dep.prototype.createSearchView.call(this);
 
             promise.then(view => {
diff --git a/client/src/views/email/modals/attachments.js b/client/src/views/email/modals/attachments.js
index ba09f58b8e..097711d6f1 100644
--- a/client/src/views/email/modals/attachments.js
+++ b/client/src/views/email/modals/attachments.js
@@ -31,7 +31,7 @@ define('views/email/modals/attachments', ['views/modal'], function (Dep) {
     /**
      * @class
      * @name Class
-     * @extends module:views/modal.Class
+     * @extends module:views/modal
      * @memberOf module:views/email/modals/attachments
      */
     return Dep.extend(/** @lends module:views/email/modals/attachments.Class# */{
diff --git a/client/src/views/email/record/list.js b/client/src/views/email/record/list.js
index 570415308b..9e41c74078 100644
--- a/client/src/views/email/record/list.js
+++ b/client/src/views/email/record/list.js
@@ -32,7 +32,7 @@ define('views/email/record/list', ['views/record/list', 'helpers/mass-action'],
      * @class
      * @name Class
      * @memberOf module:views/email/record/list
-     * @extends module:views/record/list.Class
+     * @extends module:views/record/list
      */
     return Dep.extend(/** @lends module:views/email/record/list.Class# */{
 
diff --git a/client/src/views/export/record/record.js b/client/src/views/export/record/record.js
index 9c01c9ad5c..08de2138c1 100644
--- a/client/src/views/export/record/record.js
+++ b/client/src/views/export/record/record.js
@@ -32,7 +32,7 @@ define('views/export/record/record', ['views/record/edit-for-modal'], function (
      * @class
      * @name Class
      * @memberOf module:views/export/record/record
-     * @extends module:views/record/edit-for-modal.Class
+     * @extends module:views/record/edit-for-modal
      */
     return Dep.extend(/** @lends module:views/export/record/record.Class# */{
 
diff --git a/client/src/views/fields/address.js b/client/src/views/fields/address.js
index 0bb1ebd418..d581ccd309 100644
--- a/client/src/views/fields/address.js
+++ b/client/src/views/fields/address.js
@@ -26,688 +26,688 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/address', ['views/fields/base', 'views/fields/varchar'], function (Dep, Varchar) {
+/** @module views/fields/address */
+
+import Dep from 'views/fields/base';
+import Varchar from 'views/fields/varchar';
+
+/**
+ * An address field.
+ *
+ * @class Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    type: 'address',
+
+    listTemplate: 'fields/address/detail',
+    detailTemplate: 'fields/address/detail',
+    editTemplate: 'fields/address/edit',
+    editTemplate1: 'fields/address/edit-1',
+    editTemplate2: 'fields/address/edit-2',
+    editTemplate3: 'fields/address/edit-3',
+    editTemplate4: 'fields/address/edit-4',
+    searchTemplate: 'fields/address/search',
 
     /**
-     * An address field.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/address
+     * @inheritDoc
      */
-    return Dep.extend(/** @lends module:views/fields/address.Class# */{
+    validations: [
+        'required',
+        'pattern',
+    ],
 
-        type: 'address',
+    /**
+     * @inheritDoc
+     */
+    events: {
+        'click [data-action="viewMap"]': function (e) {
+            e.preventDefault();
+            e.stopPropagation();
 
-        listTemplate: 'fields/address/detail',
-        detailTemplate: 'fields/address/detail',
-        editTemplate: 'fields/address/edit',
-        editTemplate1: 'fields/address/edit-1',
-        editTemplate2: 'fields/address/edit-2',
-        editTemplate3: 'fields/address/edit-3',
-        editTemplate4: 'fields/address/edit-4',
-        searchTemplate: 'fields/address/search',
-
-        /**
-         * @inheritDoc
-         */
-        validations: [
-            'required',
-            'pattern',
-        ],
-
-        /**
-         * @inheritDoc
-         */
-        events: {
-            'click [data-action="viewMap"]': function (e) {
-                e.preventDefault();
-                e.stopPropagation();
-
-                this.viewMapAction();
-            },
+            this.viewMapAction();
         },
+    },
 
-        data: function () {
-            var data = Dep.prototype.data.call(this);
+    data: function () {
+        var data = Dep.prototype.data.call(this);
 
-            data.ucName = Espo.Utils.upperCaseFirst(this.name);
+        data.ucName = Espo.Utils.upperCaseFirst(this.name);
 
-            this.addressPartList.forEach(item => {
-                data[item + 'Value'] = this.model.get(this[item + 'Field']);
-            });
+        this.addressPartList.forEach(item => {
+            data[item + 'Value'] = this.model.get(this[item + 'Field']);
+        });
 
-            if (this.mode === this.MODE_DETAIL || this.mode === this.MODE_LIST) {
-                data.formattedAddress = this.getFormattedAddress();
+        if (this.mode === this.MODE_DETAIL || this.mode === this.MODE_LIST) {
+            data.formattedAddress = this.getFormattedAddress();
 
-                data.isNone = data.formattedAddress === null;
+            data.isNone = data.formattedAddress === null;
 
-                if (data.formattedAddress === -1) {
-                    data.formattedAddress = null;
-                    data.isLoading = true;
-                }
-
-                if (this.params.viewMap && this.canBeDisplayedOnMap()) {
-                    data.viewMap = true;
-
-                    data.viewMapLink = '#AddressMap/view/' +
-                        this.model.entityType + '/' +
-                        this.model.id + '/' +
-                        this.name;
-                }
+            if (data.formattedAddress === -1) {
+                data.formattedAddress = null;
+                data.isLoading = true;
             }
 
-            if (this.isEditMode()) {
-                data.stateMaxLength = this.stateMaxLength;
-                data.streetMaxLength = this.streetMaxLength;
-                data.postalCodeMaxLength = this.postalCodeMaxLength;
-                data.cityMaxLength = this.cityMaxLength;
-                data.countryMaxLength = this.countryMaxLength;
+            if (this.params.viewMap && this.canBeDisplayedOnMap()) {
+                data.viewMap = true;
+
+                data.viewMapLink = '#AddressMap/view/' +
+                    this.model.entityType + '/' +
+                    this.model.id + '/' +
+                    this.name;
+            }
+        }
+
+        if (this.isEditMode()) {
+            data.stateMaxLength = this.stateMaxLength;
+            data.streetMaxLength = this.streetMaxLength;
+            data.postalCodeMaxLength = this.postalCodeMaxLength;
+            data.cityMaxLength = this.cityMaxLength;
+            data.countryMaxLength = this.countryMaxLength;
+        }
+
+        return data;
+    },
+
+    setupSearch: function () {
+        this.searchData.value = this.getSearchParamsData().value || this.searchParams.additionalValue;
+    },
+
+    canBeDisplayedOnMap: function () {
+        return !!this.model.get(this.name + 'City') || !!this.model.get(this.name + 'PostalCode');
+    },
+
+    getFormattedAddress: function () {
+        var isNotEmpty = false;
+        var isSet = false;
+
+        this.addressAttributeList.forEach(attribute => {
+            isNotEmpty = isNotEmpty || this.model.get(attribute);
+            isSet = isSet || this.model.has(attribute);
+        });
+
+        var isEmpty = !isNotEmpty;
+
+        if (isEmpty) {
+            if (this.mode === this.MODE_LIST) {
+                return '';
             }
 
-            return data;
-        },
-
-        setupSearch: function () {
-            this.searchData.value = this.getSearchParamsData().value || this.searchParams.additionalValue;
-        },
-
-        canBeDisplayedOnMap: function () {
-            return !!this.model.get(this.name + 'City') || !!this.model.get(this.name + 'PostalCode');
-        },
-
-        getFormattedAddress: function () {
-            var isNotEmpty = false;
-            var isSet = false;
-
-            this.addressAttributeList.forEach(attribute => {
-                isNotEmpty = isNotEmpty || this.model.get(attribute);
-                isSet = isSet || this.model.has(attribute);
-            });
-
-            var isEmpty = !isNotEmpty;
-
-            if (isEmpty) {
-                if (this.mode === this.MODE_LIST) {
-                    return '';
-                }
-
-                if (!isSet) {
-                    return -1;
-                }
-
-                return null;
+            if (!isSet) {
+                return -1;
             }
 
-            var methodName = 'getFormattedAddress' + this.getAddressFormat().toString();
+            return null;
+        }
 
-            if (methodName in this) {
-                return this[methodName]();
-            }
-        },
+        var methodName = 'getFormattedAddress' + this.getAddressFormat().toString();
 
-        getFormattedAddress1: function () {
-            var postalCodeValue = this.model.get(this.postalCodeField);
-            var streetValue = this.model.get(this.streetField);
-            var cityValue = this.model.get(this.cityField);
-            var stateValue = this.model.get(this.stateField);
-            var countryValue = this.model.get(this.countryField);
+        if (methodName in this) {
+            return this[methodName]();
+        }
+    },
 
-            var html = '';
+    getFormattedAddress1: function () {
+        var postalCodeValue = this.model.get(this.postalCodeField);
+        var streetValue = this.model.get(this.streetField);
+        var cityValue = this.model.get(this.cityField);
+        var stateValue = this.model.get(this.stateField);
+        var countryValue = this.model.get(this.countryField);
 
-            if (streetValue) {
-                html += streetValue;
-            }
+        var html = '';
 
-            if (cityValue || stateValue || postalCodeValue) {
-                if (html !== '') {
-                    html += '\n';
-                }
+        if (streetValue) {
+            html += streetValue;
+        }
 
-                if (cityValue) {
-                    html += cityValue;
-                }
-
-                if (stateValue) {
-                    if (cityValue) {
-                        html += ', ';
-                    }
-                    html += stateValue;
-                }
-
-                if (postalCodeValue) {
-                    if (cityValue || stateValue) {
-                        html += ' ';
-                    }
-                    html += postalCodeValue;
-                }
-            }
-            if (countryValue) {
-                if (html !== '') {
-                    html += '\n';
-                }
-
-                html += countryValue;
-            }
-
-            return html;
-        },
-
-        getFormattedAddress2: function () {
-            var postalCodeValue = this.model.get(this.postalCodeField);
-            var streetValue = this.model.get(this.streetField);
-            var cityValue = this.model.get(this.cityField);
-            var stateValue = this.model.get(this.stateField);
-            var countryValue = this.model.get(this.countryField);
-
-            var html = '';
-
-            if (streetValue) {
-                html += streetValue;
-            }
-
-            if (cityValue || postalCodeValue) {
-                if (html !== '') {
-                    html += '\n';
-                }
-
-                if (postalCodeValue) {
-                    html += postalCodeValue;
-
-                    if (cityValue) {
-                        html += ' ';
-                    }
-                }
-
-                if (cityValue) {
-                    html += cityValue;
-                }
-            }
-
-            if (stateValue || countryValue) {
-                if (html !== '') {
-                    html += '\n';
-                }
-
-                if (stateValue) {
-                    html += stateValue;
-
-                    if (countryValue) {
-                        html += ' ';
-                    }
-                }
-
-                if (countryValue) {
-                    html += countryValue;
-                }
-            }
-
-            return html;
-        },
-
-        getFormattedAddress3: function () {
-            var postalCodeValue = this.model.get(this.postalCodeField);
-            var streetValue = this.model.get(this.streetField);
-            var cityValue = this.model.get(this.cityField);
-            var stateValue = this.model.get(this.stateField);
-            var countryValue = this.model.get(this.countryField);
-
-            var html = '';
-
-            if (countryValue) {
-                html += countryValue;
-            }
-
-            if (cityValue || stateValue || postalCodeValue) {
-                if (html !== '') {
-                    html += '\n';
-                }
-
-                if (postalCodeValue) {
-                    html += postalCodeValue;
-                }
-
-                if (stateValue) {
-                    if (postalCodeValue) {
-                        html += ' ';
-                    }
-                    html += stateValue;
-                }
-
-                if (cityValue) {
-                    if (postalCodeValue || stateValue) {
-                        html += ' ';
-                    }
-                    html += cityValue;
-                }
-            }
-            if (streetValue) {
-                if (html !== '') {
-                    html += '\n';
-                }
-
-                html += streetValue;
-            }
-
-            return html;
-        },
-
-        getFormattedAddress4: function () {
-            var postalCodeValue = this.model.get(this.postalCodeField);
-            var streetValue = this.model.get(this.streetField);
-            var cityValue = this.model.get(this.cityField);
-            var stateValue = this.model.get(this.stateField);
-            var countryValue = this.model.get(this.countryField);
-
-            var html = '';
-
-            if (streetValue) {
-                html += streetValue;
+        if (cityValue || stateValue || postalCodeValue) {
+            if (html !== '') {
+                html += '\n';
             }
 
             if (cityValue) {
-                if (html !== '') {
-                    html += '\n';
-                }
-
                 html += cityValue;
             }
 
-            if (countryValue || stateValue || postalCodeValue) {
-                if (html !== '') {
-                    html += '\n';
+            if (stateValue) {
+                if (cityValue) {
+                    html += ', ';
                 }
+                html += stateValue;
+            }
+
+            if (postalCodeValue) {
+                if (cityValue || stateValue) {
+                    html += ' ';
+                }
+                html += postalCodeValue;
+            }
+        }
+        if (countryValue) {
+            if (html !== '') {
+                html += '\n';
+            }
+
+            html += countryValue;
+        }
+
+        return html;
+    },
+
+    getFormattedAddress2: function () {
+        var postalCodeValue = this.model.get(this.postalCodeField);
+        var streetValue = this.model.get(this.streetField);
+        var cityValue = this.model.get(this.cityField);
+        var stateValue = this.model.get(this.stateField);
+        var countryValue = this.model.get(this.countryField);
+
+        var html = '';
+
+        if (streetValue) {
+            html += streetValue;
+        }
+
+        if (cityValue || postalCodeValue) {
+            if (html !== '') {
+                html += '\n';
+            }
+
+            if (postalCodeValue) {
+                html += postalCodeValue;
+
+                if (cityValue) {
+                    html += ' ';
+                }
+            }
+
+            if (cityValue) {
+                html += cityValue;
+            }
+        }
+
+        if (stateValue || countryValue) {
+            if (html !== '') {
+                html += '\n';
+            }
+
+            if (stateValue) {
+                html += stateValue;
 
                 if (countryValue) {
-                    html += countryValue;
+                    html += ' ';
                 }
+            }
 
-                if (stateValue) {
-                    if (countryValue) {
-                        html += ' - ';
-                    }
+            if (countryValue) {
+                html += countryValue;
+            }
+        }
 
-                    html += stateValue;
-                }
+        return html;
+    },
 
+    getFormattedAddress3: function () {
+        var postalCodeValue = this.model.get(this.postalCodeField);
+        var streetValue = this.model.get(this.streetField);
+        var cityValue = this.model.get(this.cityField);
+        var stateValue = this.model.get(this.stateField);
+        var countryValue = this.model.get(this.countryField);
+
+        var html = '';
+
+        if (countryValue) {
+            html += countryValue;
+        }
+
+        if (cityValue || stateValue || postalCodeValue) {
+            if (html !== '') {
+                html += '\n';
+            }
+
+            if (postalCodeValue) {
+                html += postalCodeValue;
+            }
+
+            if (stateValue) {
                 if (postalCodeValue) {
-                    if (countryValue || stateValue) {
-                        html += ' ';
-                    }
-
-                    html += postalCodeValue;
+                    html += ' ';
                 }
+                html += stateValue;
             }
 
-            return html;
-        },
-
-        _getTemplateName: function () {
-            if (this.mode === this.MODE_EDIT) {
-                var prop = 'editTemplate' + this.getAddressFormat().toString();
-
-                if (prop in this) {
-                    return this[prop];
+            if (cityValue) {
+                if (postalCodeValue || stateValue) {
+                    html += ' ';
                 }
+                html += cityValue;
+            }
+        }
+        if (streetValue) {
+            if (html !== '') {
+                html += '\n';
             }
 
-            return Dep.prototype._getTemplateName.call(this);
-        },
+            html += streetValue;
+        }
 
-        getAddressFormat: function () {
-            return this.getConfig().get('addressFormat') || 1;
-        },
+        return html;
+    },
 
-        afterRender: function () {
-            if (this.mode === this.MODE_EDIT) {
-                this.$street = this.$el.find('[data-name="' + this.streetField + '"]');
-                this.$postalCode = this.$el.find('[data-name="' + this.postalCodeField + '"]');
-                this.$state = this.$el.find('[data-name="' + this.stateField + '"]');
-                this.$city = this.$el.find('[data-name="' + this.cityField + '"]');
-                this.$country = this.$el.find('[data-name="' + this.countryField + '"]');
+    getFormattedAddress4: function () {
+        var postalCodeValue = this.model.get(this.postalCodeField);
+        var streetValue = this.model.get(this.streetField);
+        var cityValue = this.model.get(this.cityField);
+        var stateValue = this.model.get(this.stateField);
+        var countryValue = this.model.get(this.countryField);
 
-                this.$street.on('change', () => {
-                    this.trigger('change');
-                });
+        var html = '';
 
-                this.$postalCode.on('change', () => {
-                    this.trigger('change');
-                });
+        if (streetValue) {
+            html += streetValue;
+        }
 
-                this.$state.on('change', () => {
-                    this.trigger('change');
-                });
+        if (cityValue) {
+            if (html !== '') {
+                html += '\n';
+            }
 
-                this.$city.on('change', () => {
-                    this.trigger('change');
-                });
+            html += cityValue;
+        }
 
-                this.$country.on('change', () => {
-                    this.trigger('change');
-                });
+        if (countryValue || stateValue || postalCodeValue) {
+            if (html !== '') {
+                html += '\n';
+            }
 
-                var countryList = this.getConfig().get('addressCountryList') || [];
+            if (countryValue) {
+                html += countryValue;
+            }
 
-                if (countryList.length) {
-                    this.$country.autocomplete({
-                        minChars: 0,
-                        lookup: countryList,
-                        maxHeight: 200,
-                        formatResult: suggestion => {
-                            return this.getHelper().escapeString(suggestion.value);
-                        },
-                        lookupFilter: (suggestion, query, queryLowerCase) => {
-                            if (suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0) {
-                                if (suggestion.value.length === queryLowerCase.length) {
-                                    return false;
-                                }
-
-                                return true;
-                            }
-
-                            return false;
-                        },
-                        onSelect: () => {
-                            this.trigger('change');
-
-                            this.$country.focus();
-                        },
-                    });
-
-                    this.$country.on('focus', () => {
-                        if (this.$country.val()) {
-                            return;
-                        }
-
-                        this.$country.autocomplete('onValueChange');
-                    });
-
-                    this.once('render', () => {
-                        this.$country.autocomplete('dispose');
-                    });
-
-                    this.once('remove', () => {
-                        this.$country.autocomplete('dispose');
-                    });
-
-                    this.$country.attr('autocomplete', 'espo-country');
+            if (stateValue) {
+                if (countryValue) {
+                    html += ' - ';
                 }
 
-                var cityList = this.getConfig().get('addressCityList') || [];
+                html += stateValue;
+            }
 
-                if (cityList.length) {
-                    this.$city.autocomplete({
-                        minChars: 0,
-                        lookup: cityList,
-                        maxHeight: 200,
-                        formatResult: (suggestion) => {
-                            return this.getHelper().escapeString(suggestion.value);
-                        },
-                        lookupFilter: (suggestion, query, queryLowerCase) => {
-                            if (suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0) {
-                                if (suggestion.value.length === queryLowerCase.length) {
-                                    return false;
-                                }
-
-                                return true;
-                            }
-
-                            return false;
-                        },
-                        onSelect: () => {
-                            this.trigger('change');
-
-                            this.$city.focus();
-                        },
-                    });
-
-                    this.$city.on('focus', () => {
-                        if (this.$city.val()) {
-                            return;
-                        }
-
-                        this.$city.autocomplete('onValueChange');
-                    });
-
-                    this.once('render', () => {
-                        this.$city.autocomplete('dispose');
-                    });
-
-                    this.once('remove', () => {
-                        this.$city.autocomplete('dispose');
-                    });
-
-                    this.$city.attr('autocomplete', 'espo-city');
+            if (postalCodeValue) {
+                if (countryValue || stateValue) {
+                    html += ' ';
                 }
 
-                var stateList = this.getConfig().get('addressStateList') || [];
-
-                if (stateList.length) {
-                    this.$state.autocomplete({
-                        minChars: 0,
-                        lookup: stateList,
-                        maxHeight: 200,
-                        formatResult: suggestion => {
-                            return this.getHelper().escapeString(suggestion.value);
-                        },
-                        lookupFilter: function (suggestion, query, queryLowerCase) {
-                            if (suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0) {
-                                if (suggestion.value.length === queryLowerCase.length) {
-                                    return false;
-                                }
-
-                                return true;
-                            }
-
-                            return false;
-                        },
-                        onSelect: () => {
-                            this.trigger('change');
-
-                            this.$state.focus();
-                        },
-                    });
-
-                    this.$state.on('focus', () => {
-                        if (this.$state.val()) {
-                            return;
-                        }
-
-                        this.$state.autocomplete('onValueChange');
-                    });
-
-                    this.once('render', () => {
-                        this.$state.autocomplete('dispose');
-                    });
-
-                    this.once('remove', () => {
-                        this.$state.autocomplete('dispose');
-                    });
-
-                    this.$state.attr('autocomplete', 'espo-state');
-                }
-
-                this.controlStreetTextareaHeight();
-
-                this.$street.on('input', () => {
-                    this.controlStreetTextareaHeight();
-                });
+                html += postalCodeValue;
             }
-        },
+        }
 
-        controlStreetTextareaHeight: function (lastHeight) {
-            var scrollHeight = this.$street.prop('scrollHeight');
-            var clientHeight = this.$street.prop('clientHeight');
+        return html;
+    },
 
-            if (typeof lastHeight === 'undefined' && clientHeight === 0) {
-                setTimeout(this.controlStreetTextareaHeight.bind(this), 10);
+    _getTemplateName: function () {
+        if (this.mode === this.MODE_EDIT) {
+            var prop = 'editTemplate' + this.getAddressFormat().toString();
 
-                return;
+            if (prop in this) {
+                return this[prop];
             }
+        }
 
-            if (clientHeight === lastHeight) return;
+        return Dep.prototype._getTemplateName.call(this);
+    },
 
-            if (scrollHeight > clientHeight + 1) {
-                var rows = this.$street.prop('rows');
-                this.$street.attr('rows', rows + 1);
+    getAddressFormat: function () {
+        return this.getConfig().get('addressFormat') || 1;
+    },
 
-                this.controlStreetTextareaHeight(clientHeight);
-            }
+    afterRender: function () {
+        if (this.mode === this.MODE_EDIT) {
+            this.$street = this.$el.find('[data-name="' + this.streetField + '"]');
+            this.$postalCode = this.$el.find('[data-name="' + this.postalCodeField + '"]');
+            this.$state = this.$el.find('[data-name="' + this.stateField + '"]');
+            this.$city = this.$el.find('[data-name="' + this.cityField + '"]');
+            this.$country = this.$el.find('[data-name="' + this.countryField + '"]');
 
-            if (this.$street.val().length === 0) {
-                this.$street.attr('rows', 1);
-            }
-        },
-
-        setup: function () {
-            Dep.prototype.setup.call(this);
-
-            var actualAttributePartList = this.getMetadata().get(['fields', this.type, 'actualFields']) || [];
-            this.addressAttributeList = [];
-            this.addressPartList = [];
-
-            actualAttributePartList.forEach(item => {
-                var attribute = this.name + Espo.Utils.upperCaseFirst(item);
-
-                this.addressAttributeList.push(attribute);
-                this.addressPartList.push(item);
-
-                this[item + 'Field'] = attribute;
-
-                this[item + 'MaxLength'] =
-                    this.getMetadata().get(['entityDefs', this.model.name, 'fields', attribute, 'maxLength']);
+            this.$street.on('change', () => {
+                this.trigger('change');
             });
-        },
 
-        validateRequired: function () {
-            var validate = name => {
-                if (this.model.isRequired(name)) {
-                    if (this.model.get(name) === '') {
-                        var msg = this.translate('fieldIsRequired', 'messages')
-                            .replace('{field}', this.translate(name, 'fields', this.model.name));
+            this.$postalCode.on('change', () => {
+                this.trigger('change');
+            });
 
-                        this.showValidationMessage(msg, '[data-name="'+name+'"]');
+            this.$state.on('change', () => {
+                this.trigger('change');
+            });
 
-                        return true;
+            this.$city.on('change', () => {
+                this.trigger('change');
+            });
+
+            this.$country.on('change', () => {
+                this.trigger('change');
+            });
+
+            var countryList = this.getConfig().get('addressCountryList') || [];
+
+            if (countryList.length) {
+                this.$country.autocomplete({
+                    minChars: 0,
+                    lookup: countryList,
+                    maxHeight: 200,
+                    formatResult: suggestion => {
+                        return this.getHelper().escapeString(suggestion.value);
+                    },
+                    lookupFilter: (suggestion, query, queryLowerCase) => {
+                        if (suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0) {
+                            if (suggestion.value.length === queryLowerCase.length) {
+                                return false;
+                            }
+
+                            return true;
+                        }
+
+                        return false;
+                    },
+                    onSelect: () => {
+                        this.trigger('change');
+
+                        this.$country.focus();
+                    },
+                });
+
+                this.$country.on('focus', () => {
+                    if (this.$country.val()) {
+                        return;
                     }
+
+                    this.$country.autocomplete('onValueChange');
+                });
+
+                this.once('render', () => {
+                    this.$country.autocomplete('dispose');
+                });
+
+                this.once('remove', () => {
+                    this.$country.autocomplete('dispose');
+                });
+
+                this.$country.attr('autocomplete', 'espo-country');
+            }
+
+            var cityList = this.getConfig().get('addressCityList') || [];
+
+            if (cityList.length) {
+                this.$city.autocomplete({
+                    minChars: 0,
+                    lookup: cityList,
+                    maxHeight: 200,
+                    formatResult: (suggestion) => {
+                        return this.getHelper().escapeString(suggestion.value);
+                    },
+                    lookupFilter: (suggestion, query, queryLowerCase) => {
+                        if (suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0) {
+                            if (suggestion.value.length === queryLowerCase.length) {
+                                return false;
+                            }
+
+                            return true;
+                        }
+
+                        return false;
+                    },
+                    onSelect: () => {
+                        this.trigger('change');
+
+                        this.$city.focus();
+                    },
+                });
+
+                this.$city.on('focus', () => {
+                    if (this.$city.val()) {
+                        return;
+                    }
+
+                    this.$city.autocomplete('onValueChange');
+                });
+
+                this.once('render', () => {
+                    this.$city.autocomplete('dispose');
+                });
+
+                this.once('remove', () => {
+                    this.$city.autocomplete('dispose');
+                });
+
+                this.$city.attr('autocomplete', 'espo-city');
+            }
+
+            var stateList = this.getConfig().get('addressStateList') || [];
+
+            if (stateList.length) {
+                this.$state.autocomplete({
+                    minChars: 0,
+                    lookup: stateList,
+                    maxHeight: 200,
+                    formatResult: suggestion => {
+                        return this.getHelper().escapeString(suggestion.value);
+                    },
+                    lookupFilter: function (suggestion, query, queryLowerCase) {
+                        if (suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0) {
+                            if (suggestion.value.length === queryLowerCase.length) {
+                                return false;
+                            }
+
+                            return true;
+                        }
+
+                        return false;
+                    },
+                    onSelect: () => {
+                        this.trigger('change');
+
+                        this.$state.focus();
+                    },
+                });
+
+                this.$state.on('focus', () => {
+                    if (this.$state.val()) {
+                        return;
+                    }
+
+                    this.$state.autocomplete('onValueChange');
+                });
+
+                this.once('render', () => {
+                    this.$state.autocomplete('dispose');
+                });
+
+                this.once('remove', () => {
+                    this.$state.autocomplete('dispose');
+                });
+
+                this.$state.attr('autocomplete', 'espo-state');
+            }
+
+            this.controlStreetTextareaHeight();
+
+            this.$street.on('input', () => {
+                this.controlStreetTextareaHeight();
+            });
+        }
+    },
+
+    controlStreetTextareaHeight: function (lastHeight) {
+        var scrollHeight = this.$street.prop('scrollHeight');
+        var clientHeight = this.$street.prop('clientHeight');
+
+        if (typeof lastHeight === 'undefined' && clientHeight === 0) {
+            setTimeout(this.controlStreetTextareaHeight.bind(this), 10);
+
+            return;
+        }
+
+        if (clientHeight === lastHeight) return;
+
+        if (scrollHeight > clientHeight + 1) {
+            var rows = this.$street.prop('rows');
+            this.$street.attr('rows', rows + 1);
+
+            this.controlStreetTextareaHeight(clientHeight);
+        }
+
+        if (this.$street.val().length === 0) {
+            this.$street.attr('rows', 1);
+        }
+    },
+
+    setup: function () {
+        Dep.prototype.setup.call(this);
+
+        var actualAttributePartList = this.getMetadata().get(['fields', this.type, 'actualFields']) || [];
+        this.addressAttributeList = [];
+        this.addressPartList = [];
+
+        actualAttributePartList.forEach(item => {
+            var attribute = this.name + Espo.Utils.upperCaseFirst(item);
+
+            this.addressAttributeList.push(attribute);
+            this.addressPartList.push(item);
+
+            this[item + 'Field'] = attribute;
+
+            this[item + 'MaxLength'] =
+                this.getMetadata().get(['entityDefs', this.model.name, 'fields', attribute, 'maxLength']);
+        });
+    },
+
+    validateRequired: function () {
+        var validate = name => {
+            if (this.model.isRequired(name)) {
+                if (this.model.get(name) === '') {
+                    var msg = this.translate('fieldIsRequired', 'messages')
+                        .replace('{field}', this.translate(name, 'fields', this.model.name));
+
+                    this.showValidationMessage(msg, '[data-name="'+name+'"]');
+
+                    return true;
+                }
+            }
+        };
+
+        var result = false;
+
+        result = validate(this.postalCodeField) || result;
+        result = validate(this.streetField) || result;
+        result = validate(this.stateField) || result;
+        result = validate(this.cityField) || result;
+        result = validate(this.countryField) || result;
+
+        return result;
+    },
+
+    isRequired: function () {
+        return this.model.getFieldParam(this.postalCodeField, 'required') ||
+            this.model.getFieldParam(this.streetField, 'required') ||
+            this.model.getFieldParam(this.stateField, 'required') ||
+            this.model.getFieldParam(this.cityField, 'required') ||
+            this.model.getFieldParam(this.countryField, 'required');
+    },
+
+    validatePattern: function () {
+        let fieldList = [
+            this.postalCodeField,
+            this.stateField,
+            this.cityField,
+            this.countryField,
+        ];
+
+        let result = false;
+
+        for (let field of fieldList) {
+            result = Varchar.prototype.fieldValidatePattern.call(this, field) || result;
+        }
+
+        return result;
+    },
+
+    fetch: function () {
+        var data = {};
+
+        data[this.postalCodeField] = this.$postalCode.val().toString().trim();
+        data[this.streetField] = this.$street.val().toString().trim();
+        data[this.stateField] = this.$state.val().toString().trim();
+        data[this.cityField] = this.$city.val().toString().trim();
+        data[this.countryField] = this.$country.val().toString().trim();
+
+        let attributeList = [
+            this.postalCodeField,
+            this.streetField,
+            this.stateField,
+            this.cityField,
+            this.countryField,
+        ];
+
+        attributeList.forEach(attribute => {
+            if (data[attribute] === '') {
+                data[attribute] = null;
+            }
+        });
+
+        return data;
+    },
+
+    fetchSearch: function () {
+        var value = this.$el.find('input.main-element')
+            .val()
+            .toString()
+            .trim();
+
+        if (value) {
+            var data = {
+                type: 'or',
+                value: [
+                    {
+                        type: 'like',
+                        field: this.postalCodeField,
+                        value: value + '%'
+                    },
+                    {
+                        type: 'like',
+                        field: this.streetField,
+                        value: value + '%'
+                    },
+                    {
+                        type: 'like',
+                        field: this.cityField,
+                        value: value + '%'
+                    },
+                    {
+                        type: 'like',
+                        field: this.stateField,
+                        value: value + '%'
+                    },
+                        {
+                        type: 'like',
+                        field: this.countryField,
+                        value: value + '%'
+                    }
+                ],
+                data: {
+                    value: value
                 }
             };
 
-            var result = false;
-
-            result = validate(this.postalCodeField) || result;
-            result = validate(this.streetField) || result;
-            result = validate(this.stateField) || result;
-            result = validate(this.cityField) || result;
-            result = validate(this.countryField) || result;
-
-            return result;
-        },
-
-        isRequired: function () {
-            return this.model.getFieldParam(this.postalCodeField, 'required') ||
-                this.model.getFieldParam(this.streetField, 'required') ||
-                this.model.getFieldParam(this.stateField, 'required') ||
-                this.model.getFieldParam(this.cityField, 'required') ||
-                this.model.getFieldParam(this.countryField, 'required');
-        },
-
-        validatePattern: function () {
-            let fieldList = [
-                this.postalCodeField,
-                this.stateField,
-                this.cityField,
-                this.countryField,
-            ];
-
-            let result = false;
-
-            for (let field of fieldList) {
-                result = Varchar.prototype.fieldValidatePattern.call(this, field) || result;
-            }
-
-            return result;
-        },
-
-        fetch: function () {
-            var data = {};
-
-            data[this.postalCodeField] = this.$postalCode.val().toString().trim();
-            data[this.streetField] = this.$street.val().toString().trim();
-            data[this.stateField] = this.$state.val().toString().trim();
-            data[this.cityField] = this.$city.val().toString().trim();
-            data[this.countryField] = this.$country.val().toString().trim();
-
-            let attributeList = [
-                this.postalCodeField,
-                this.streetField,
-                this.stateField,
-                this.cityField,
-                this.countryField,
-            ];
-
-            attributeList.forEach(attribute => {
-                if (data[attribute] === '') {
-                    data[attribute] = null;
-                }
-            });
-
             return data;
-        },
+        }
 
-        fetchSearch: function () {
-            var value = this.$el.find('input.main-element')
-                .val()
-                .toString()
-                .trim();
+        return false;
+    },
 
-            if (value) {
-                var data = {
-                    type: 'or',
-                    value: [
-                        {
-                            type: 'like',
-                            field: this.postalCodeField,
-                            value: value + '%'
-                        },
-                        {
-                            type: 'like',
-                            field: this.streetField,
-                            value: value + '%'
-                        },
-                        {
-                            type: 'like',
-                            field: this.cityField,
-                            value: value + '%'
-                        },
-                        {
-                            type: 'like',
-                            field: this.stateField,
-                            value: value + '%'
-                        },
-                            {
-                            type: 'like',
-                            field: this.countryField,
-                            value: value + '%'
-                        }
-                    ],
-                    data: {
-                        value: value
-                    }
-                };
-
-                return data;
-            }
-
-            return false;
-        },
-
-        viewMapAction: function () {
-            this.createView('mapDialog', 'views/modals/view-map', {
-                model: this.model,
-                field: this.name,
-            }, view => view.render());
-        },
-    });
+    viewMapAction: function () {
+        this.createView('mapDialog', 'views/modals/view-map', {
+            model: this.model,
+            field: this.name,
+        }, view => view.render());
+    },
 });
diff --git a/client/src/views/fields/array.js b/client/src/views/fields/array.js
index 80e643c8f6..6ad36eceae 100644
--- a/client/src/views/fields/array.js
+++ b/client/src/views/fields/array.js
@@ -26,821 +26,805 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/array', ['views/fields/base', 'helpers/reg-exp-pattern', 'ui/multi-select'],
-function (Dep, RegExpPattern, /** module:ui/multi-select*/MultiSelect) {
+/** @module views/fields/array */
+
+import Dep from 'views/fields/base';
+import RegExpPattern from 'helpers/reg-exp-pattern';
+import MultiSelect from 'ui/multi-select';
+
+/**
+ * An array field.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    type: 'array',
+
+    listTemplate: 'fields/array/list',
+    listLinkTemplate: 'fields/array/list-link',
+    detailTemplate: 'fields/array/detail',
+    editTemplate: 'fields/array/edit',
+    searchTemplate: 'fields/array/search',
+
+    searchTypeList: ['anyOf', 'noneOf', 'allOf', 'isEmpty', 'isNotEmpty'],
+    maxItemLength: null,
+    validations: ['required', 'maxCount'],
+    MAX_ITEM_LENGTH: 100,
 
     /**
-     * An array field.
+     * An add-item model view.
      *
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/array
+     * @protected
+     * @type {string}
      */
-    return Dep.extend(/** @lends module:views/fields/array.Class# */{
+    addItemModalView: 'views/modals/array-field-add',
+    /**
+     * @protected
+     * @type {string}
+     */
+    itemDelimiter: ':,:',
+    /**
+     * @protected
+     * @type {boolean}
+     */
+    matchAnyWord: true,
+    /**
+     * @protected
+     * @type {Object|null}
+     */
+    translatedOptions: null,
 
-        type: 'array',
+    /** @inheritDoc */
+    data: function () {
+        let itemHtmlList = [];
 
-        listTemplate: 'fields/array/list',
+        (this.selected || []).forEach(value => {
+            itemHtmlList.push(this.getItemHtml(value));
+        });
 
-        listLinkTemplate: 'fields/array/list-link',
+        return _.extend({
+            selected: this.selected,
+            translatedOptions: this.translatedOptions,
+            hasOptions: !!this.params.options,
+            itemHtmlList: itemHtmlList,
+            isEmpty: (this.selected || []).length === 0,
+            valueIsSet: this.model.has(this.name),
+            maxItemLength: this.maxItemLength || this.MAX_ITEM_LENGTH,
+            allowCustomOptions: this.allowCustomOptions,
+        }, Dep.prototype.data.call(this));
+    },
 
-        detailTemplate: 'fields/array/detail',
+    /**
+     * @inheritDoc
+     */
+    events: {
+        'click [data-action="removeValue"]': function (e) {
+            let value = $(e.currentTarget).attr('data-value').toString();
 
-        editTemplate: 'fields/array/edit',
+            this.removeValue(value);
 
-        searchTemplate: 'fields/array/search',
+            this.focusOnElement();
+        },
+        'click [data-action="showAddModal"]': function () {
+            this.actionAddItem();
+        },
+    },
 
-        searchTypeList: ['anyOf', 'noneOf', 'allOf', 'isEmpty', 'isNotEmpty'],
+    setup: function () {
+        Dep.prototype.setup.call(this);
 
-        maxItemLength: null,
+        this.noEmptyString = this.params.noEmptyString;
 
-        validations: ['required', 'maxCount'],
+        this.listenTo(this.model, 'change:' + this.name, () => {
+            this.selected = Espo.Utils.clone(this.model.get(this.name)) || [];
+        });
 
-        MAX_ITEM_LENGTH: 100,
+        this.selected = Espo.Utils.clone(this.model.get(this.name) || []);
 
-        /**
-         * An add-item model view.
-         *
-         * @protected
-         * @type {string}
-         */
-        addItemModalView: 'views/modals/array-field-add',
+        if (Object.prototype.toString.call(this.selected) !== '[object Array]')    {
+            this.selected = [];
+        }
 
-        /**
-         * @protected
-         * @type {string}
-         */
-        itemDelimiter: ':,:',
+        let optionsPath = this.params.optionsPath;
+        /** @type {?string} */
+        let optionsReference = this.params.optionsReference;
 
-        /**
-         * @protected
-         * @type {boolean}
-         */
-        matchAnyWord: true,
+        if (!optionsPath && optionsReference) {
+            let [refEntityType, refField] = optionsReference.split('.');
 
-        /**
-         * @protected
-         * @type {Object|null}
-         */
-        translatedOptions: null,
+            optionsPath = `entityDefs.${refEntityType}.fields.${refField}.options`;
+        }
 
-        /**
-         * @inheritDoc
-         */
-        data: function () {
-            let itemHtmlList = [];
+        if (optionsPath) {
+            this.params.options = Espo.Utils.clone(this.getMetadata().get(optionsPath)) || [];
+        }
 
-            (this.selected || []).forEach(value => {
-                itemHtmlList.push(this.getItemHtml(value));
+        this.styleMap = this.params.style || {};
+
+        this.setupOptions();
+
+        if ('translatedOptions' in this.options) {
+            this.translatedOptions = this.options.translatedOptions;
+        }
+
+        if ('translatedOptions' in this.params) {
+            this.translatedOptions = this.params.translatedOptions;
+        }
+
+        if (!this.translatedOptions) {
+            this.setupTranslation();
+        }
+
+        this.displayAsLabel = this.params.displayAsLabel || this.displayAsLabel;
+        this.displayAsList = this.params.displayAsList || this.displayAsList;
+
+        if (this.params.isSorted && this.translatedOptions) {
+            this.params.options = Espo.Utils.clone(this.params.options);
+            this.params.options = this.params.options.sort((v1, v2) => {
+                 return (this.translatedOptions[v1] || v1).localeCompare(this.translatedOptions[v2] || v2);
+            });
+        }
+
+        if (this.options.customOptionList) {
+            this.setOptionList(this.options.customOptionList, true);
+        }
+
+        if (this.params.allowCustomOptions || !this.params.options) {
+            this.allowCustomOptions = true;
+        }
+    },
+
+    focusOnElement: function () {
+        let $button = this.$el.find('button[data-action="showAddModal"]');
+
+        if ($button[0]) {
+            $button[0].focus({preventScroll: true});
+
+            return;
+        }
+
+        let $input = this.$el.find('input');
+
+        if ($input[0]) {
+            $input[0].focus({preventScroll: true});
+        }
+    },
+
+    setupSearch: function () {
+        this.events['change select.search-type'] = e => {
+            this.handleSearchType($(e.currentTarget).val());
+        };
+    },
+
+    handleSearchType: function (type) {
+        let $inputContainer = this.$el.find('div.input-container');
+
+        if (~['anyOf', 'noneOf', 'allOf'].indexOf(type)) {
+            $inputContainer.removeClass('hidden');
+        } else {
+            $inputContainer.addClass('hidden');
+        }
+    },
+
+    setupTranslation: function () {
+        let t = {};
+
+        let translation = this.params.translation;
+        /** @type {?string} */
+        let optionsReference = this.params.optionsReference;
+
+        if (!translation && optionsReference) {
+            let [refEntityType, refField] = optionsReference.split('.');
+
+            translation = `${refEntityType}.options.${refField}`;
+        }
+
+        if (translation) {
+            let arr = translation.split('.');
+
+            let pointer = this.getLanguage().data;
+
+            arr.forEach(key => {
+                if (key in pointer) {
+                    pointer = pointer[key];
+
+                    t = pointer;
+                }
+            });
+        }
+        else {
+            t = this.translate(this.name, 'options', this.model.name);
+        }
+
+        this.translatedOptions = null;
+
+        let translatedOptions = {};
+
+        if (this.params.options) {
+            this.params.options.forEach((o) => {
+                if (typeof t === 'object' && o in t) {
+                    translatedOptions[o] = t[o];
+                } else {
+                    translatedOptions[o] = o;
+                }
             });
 
-            return _.extend({
-                selected: this.selected,
-                translatedOptions: this.translatedOptions,
-                hasOptions: this.params.options ? true : false,
-                itemHtmlList: itemHtmlList,
-                isEmpty: (this.selected || []).length === 0,
-                valueIsSet: this.model.has(this.name),
-                maxItemLength: this.maxItemLength || this.MAX_ITEM_LENGTH,
-                allowCustomOptions: this.allowCustomOptions,
-            }, Dep.prototype.data.call(this));
-        },
-
-        /**
-         * @inheritDoc
-         */
-        events: {
-            'click [data-action="removeValue"]': function (e) {
-                let value = $(e.currentTarget).attr('data-value').toString();
-
-                this.removeValue(value);
-
-                this.focusOnElement();
-            },
-            'click [data-action="showAddModal"]': function () {
-                this.actionAddItem();
-            },
-        },
-
-        setup: function () {
-            Dep.prototype.setup.call(this);
-
-            this.noEmptyString = this.params.noEmptyString;
-
-            this.listenTo(this.model, 'change:' + this.name, () => {
-                this.selected = Espo.Utils.clone(this.model.get(this.name)) || [];
-            });
-
-            this.selected = Espo.Utils.clone(this.model.get(this.name) || []);
-
-            if (Object.prototype.toString.call(this.selected) !== '[object Array]')    {
-                this.selected = [];
-            }
-
-            let optionsPath = this.params.optionsPath;
-            /** @type {?string} */
-            let optionsReference = this.params.optionsReference;
-
-            if (!optionsPath && optionsReference) {
-                let [refEntityType, refField] = optionsReference.split('.');
-
-                optionsPath = `entityDefs.${refEntityType}.fields.${refField}.options`;
-            }
-
-            if (optionsPath) {
-                this.params.options = Espo.Utils.clone(this.getMetadata().get(optionsPath)) || [];
-            }
-
-            this.styleMap = this.params.style || {};
-
-            this.setupOptions();
-
-            if ('translatedOptions' in this.options) {
-                this.translatedOptions = this.options.translatedOptions;
-            }
-
-            if ('translatedOptions' in this.params) {
-                this.translatedOptions = this.params.translatedOptions;
-            }
-
-            if (!this.translatedOptions) {
-                this.setupTranslation();
-            }
-
-            this.displayAsLabel = this.params.displayAsLabel || this.displayAsLabel;
-            this.displayAsList = this.params.displayAsList || this.displayAsList;
-
-            if (this.params.isSorted && this.translatedOptions) {
-                this.params.options = Espo.Utils.clone(this.params.options);
-                this.params.options = this.params.options.sort((v1, v2) => {
-                     return (this.translatedOptions[v1] || v1).localeCompare(this.translatedOptions[v2] || v2);
-                });
-            }
-
-            if (this.options.customOptionList) {
-                this.setOptionList(this.options.customOptionList, true);
-            }
-
-            if (this.params.allowCustomOptions || !this.params.options) {
-                this.allowCustomOptions = true;
-            }
-        },
-
-        focusOnElement: function () {
-            let $button = this.$el.find('button[data-action="showAddModal"]');
-
-            if ($button[0]) {
-                $button[0].focus({preventScroll: true});
-
-                return;
-            }
-
-            let $input = this.$el.find('input');
-
-            if ($input[0]) {
-                $input[0].focus({preventScroll: true});
-            }
-        },
-
-        setupSearch: function () {
-            this.events['change select.search-type'] = e => {
-                this.handleSearchType($(e.currentTarget).val());
-            };
-        },
-
-        handleSearchType: function (type) {
-            let $inputContainer = this.$el.find('div.input-container');
-
-            if (~['anyOf', 'noneOf', 'allOf'].indexOf(type)) {
-                $inputContainer.removeClass('hidden');
-            } else {
-                $inputContainer.addClass('hidden');
-            }
-        },
-
-        setupTranslation: function () {
-            let t = {};
-
-            let translation = this.params.translation;
-            /** @type {?string} */
-            let optionsReference = this.params.optionsReference;
-
-            if (!translation && optionsReference) {
-                let [refEntityType, refField] = optionsReference.split('.');
-
-                translation = `${refEntityType}.options.${refField}`;
-            }
-
-            if (translation) {
-                let arr = translation.split('.');
-
-                let pointer = this.getLanguage().data;
-
-                arr.forEach(key => {
-                    if (key in pointer) {
-                        pointer = pointer[key];
-
-                        t = pointer;
-                    }
-                });
-            }
-            else {
-                t = this.translate(this.name, 'options', this.model.name);
-            }
-
-            this.translatedOptions = null;
-
-            let translatedOptions = {};
-
-            if (this.params.options) {
-                this.params.options.forEach((o) => {
-                    if (typeof t === 'object' && o in t) {
-                        translatedOptions[o] = t[o];
-                    } else {
-                        translatedOptions[o] = o;
-                    }
-                });
-
-                this.translatedOptions = translatedOptions;
-            }
-        },
-
-        setupOptions: function () {},
-
-        setOptionList: function (optionList, silent) {
-            let previousOptions = this.params.options;
-
-            if (!this.originalOptionList) {
-                this.originalOptionList = this.params.options;
-            }
-
-            this.params.options = Espo.Utils.clone(optionList);
-
-            let isChanged = !_(previousOptions).isEqual(optionList);
-
-            if (this.isEditMode() && !silent && isChanged) {
-                let selectedOptionList = [];
-
-                this.selected.forEach(option => {
-                    if (~optionList.indexOf(option)) {
-                        selectedOptionList.push(option);
-                    }
-                });
-
-                this.selected = selectedOptionList;
-
-                if (this.isRendered()) {
-                    this.reRender();
-
-                    this.trigger('change');
-                }
-                else {
-                    this.once('after:render', () => {
-                        this.trigger('change');
-                    });
-                }
-            }
-        },
-
-        setTranslatedOptions: function (translatedOptions) {
             this.translatedOptions = translatedOptions;
-        },
+        }
+    },
 
-        resetOptionList: function () {
-            if (!this.originalOptionList) {
-                return;
-            }
+    setupOptions: function () {},
 
-            let previousOptions = this.params.options;
+    setOptionList: function (optionList, silent) {
+        let previousOptions = this.params.options;
 
-            this.params.options = Espo.Utils.clone(this.originalOptionList);
+        if (!this.originalOptionList) {
+            this.originalOptionList = this.params.options;
+        }
 
-            let isChanged = !_(previousOptions).isEqual(this.originalOptionList);
+        this.params.options = Espo.Utils.clone(optionList);
 
-            if (!this.isEditMode() || !isChanged) {
-                return;
-            }
+        let isChanged = !_(previousOptions).isEqual(optionList);
+
+        if (this.isEditMode() && !silent && isChanged) {
+            let selectedOptionList = [];
+
+            this.selected.forEach(option => {
+                if (~optionList.indexOf(option)) {
+                    selectedOptionList.push(option);
+                }
+            });
+
+            this.selected = selectedOptionList;
 
             if (this.isRendered()) {
                 this.reRender();
-            }
-        },
 
-        controlAddItemButton: function () {
-            let $select = this.$select;
-
-            if (!$select) {
-                return;
-            }
-
-            if (!$select.get(0)) {
-                return;
-            }
-
-            let value = $select.val().toString().trim();
-
-            if (!value && this.params.noEmptyString) {
-                this.$addButton.addClass('disabled').attr('disabled', 'disabled');
+                this.trigger('change');
             }
             else {
-                this.$addButton.removeClass('disabled').removeAttr('disabled');
+                this.once('after:render', () => {
+                    this.trigger('change');
+                });
             }
-        },
+        }
+    },
 
-        afterRender: function () {
-            if (this.isEditMode()) {
-                this.$list = this.$el.find('.list-group');
+    setTranslatedOptions: function (translatedOptions) {
+        this.translatedOptions = translatedOptions;
+    },
 
-                let $select = this.$select = this.$el.find('.select');
+    resetOptionList: function () {
+        if (!this.originalOptionList) {
+            return;
+        }
 
-                if (this.allowCustomOptions) {
-                    this.$addButton = this.$el.find('button[data-action="addItem"]');
+        let previousOptions = this.params.options;
 
-                    this.$addButton.on('click', () => {
+        this.params.options = Espo.Utils.clone(this.originalOptionList);
+
+        let isChanged = !_(previousOptions).isEqual(this.originalOptionList);
+
+        if (!this.isEditMode() || !isChanged) {
+            return;
+        }
+
+        if (this.isRendered()) {
+            this.reRender();
+        }
+    },
+
+    controlAddItemButton: function () {
+        let $select = this.$select;
+
+        if (!$select) {
+            return;
+        }
+
+        if (!$select.get(0)) {
+            return;
+        }
+
+        let value = $select.val().toString().trim();
+
+        if (!value && this.params.noEmptyString) {
+            this.$addButton.addClass('disabled').attr('disabled', 'disabled');
+        }
+        else {
+            this.$addButton.removeClass('disabled').removeAttr('disabled');
+        }
+    },
+
+    afterRender: function () {
+        if (this.isEditMode()) {
+            this.$list = this.$el.find('.list-group');
+
+            let $select = this.$select = this.$el.find('.select');
+
+            if (this.allowCustomOptions) {
+                this.$addButton = this.$el.find('button[data-action="addItem"]');
+
+                this.$addButton.on('click', () => {
+                    let value = $select.val().toString();
+
+                    this.addValueFromUi(value);
+
+                    this.focusOnElement();
+                });
+
+                $select.on('input', () => this.controlAddItemButton());
+
+                $select.on('keydown', e => {
+                    let key = Espo.Utils.getKeyFromKeyEvent(e);
+
+                    if (key === 'Enter') {
                         let value = $select.val().toString();
 
                         this.addValueFromUi(value);
-
-                        this.focusOnElement();
-                    });
-
-                    $select.on('input', () => this.controlAddItemButton());
-
-                    $select.on('keydown', e => {
-                        let key = Espo.Utils.getKeyFromKeyEvent(e);
-
-                        if (key === 'Enter') {
-                            let value = $select.val().toString();
-
-                            this.addValueFromUi(value);
-                        }
-                    });
-
-                    this.controlAddItemButton();
-                }
-
-                this.$list.sortable({
-                    stop: () => {
-                        this.fetchFromDom();
-                        this.trigger('change');
-                    },
-                    distance: 5,
-                    cancel: 'input,textarea,button,select,option,a[role="button"]',
-                    cursor: 'grabbing',
+                    }
                 });
+
+                this.controlAddItemButton();
             }
 
-            if (this.isSearchMode()) {
-                this.renderSearch();
+            this.$list.sortable({
+                stop: () => {
+                    this.fetchFromDom();
+                    this.trigger('change');
+                },
+                distance: 5,
+                cancel: 'input,textarea,button,select,option,a[role="button"]',
+                cursor: 'grabbing',
+            });
+        }
+
+        if (this.isSearchMode()) {
+            this.renderSearch();
+        }
+    },
+
+    /**
+     * @param {string} value
+     */
+    addValueFromUi: function (value) {
+        value = value.trim();
+
+        if (this.noEmptyString && value === '') {
+            return;
+        }
+
+        if (this.params.pattern) {
+            let helper = new RegExpPattern(this.getMetadata(), this.getLanguage());
+
+            let result = helper.validate(this.params.pattern, value, this.name, this.entityType);
+
+            if (result) {
+                setTimeout(() => this.showValidationMessage(result.message, 'input.select'), 10);
+
+                return;
             }
-        },
+        }
 
-        /**
-         * @param {string} value
-         */
-        addValueFromUi: function (value) {
-            value = value.trim();
+        this.addValue(value);
 
-            if (this.noEmptyString && value === '') {
+        this.$select.val('');
+
+        this.controlAddItemButton();
+    },
+
+    renderSearch: function () {
+        this.$element = this.$el.find('.main-element');
+
+        let valueList = this.getSearchParamsData().valueList || this.searchParams.valueFront || [];
+
+        this.$element.val(valueList.join(this.itemDelimiter));
+
+        let items = [];
+
+        (this.params.options || []).forEach(value => {
+            let label = this.getLanguage().translateOption(value, this.name, this.scope);
+
+            if (this.translatedOptions) {
+                if (value in this.translatedOptions) {
+                    label = this.translatedOptions[value];
+                }
+            }
+
+            if (label === '') {
                 return;
             }
 
-            if (this.params.pattern) {
-                /** @type module:helpers/reg-exp-pattern.Class */
-                let helper = new RegExpPattern(this.getMetadata(), this.getLanguage());
-
-                let result = helper.validate(this.params.pattern, value, this.name, this.entityType);
-
-                if (result) {
-                    setTimeout(() => this.showValidationMessage(result.message, 'input.select'), 10);
-
-                    return;
-                }
-            }
-
-            this.addValue(value);
-
-            this.$select.val('');
-
-            this.controlAddItemButton();
-        },
-
-        renderSearch: function () {
-            this.$element = this.$el.find('.main-element');
-
-            let valueList = this.getSearchParamsData().valueList || this.searchParams.valueFront || [];
-
-            this.$element.val(valueList.join(this.itemDelimiter));
-
-            let items = [];
-
-            (this.params.options || []).forEach(value => {
-                let label = this.getLanguage().translateOption(value, this.name, this.scope);
-
-                if (this.translatedOptions) {
-                    if (value in this.translatedOptions) {
-                        label = this.translatedOptions[value];
-                    }
-                }
-
-                if (label === '') {
-                    return;
-                }
+            items.push({
+                value: value,
+                text: label,
+            });
+        });
 
+        valueList
+            .filter(item => !(this.params.options || []).includes(item))
+            .forEach(item => {
                 items.push({
-                    value: value,
-                    text: label,
+                    value: item,
+                    text: item,
                 });
             });
 
-            valueList
-                .filter(item => !(this.params.options || []).includes(item))
-                .forEach(item => {
-                    items.push({
-                        value: item,
-                        text: item,
-                    });
-                });
+        /** @type {module:ui/multi-select~Options} */
+        let multiSelectOptions = {
+            items: items,
+            delimiter: this.itemDelimiter,
+            matchAnyWord: this.matchAnyWord,
+            allowCustomOptions: this.allowCustomOptions,
+            create: input => {
+                return {
+                    value: input,
+                    text: input,
+                };
+            },
+        };
 
-            /** @type {module:ui/multi-select~Options} */
-            let multiSelectOptions = {
-                items: items,
-                delimiter: this.itemDelimiter,
-                matchAnyWord: this.matchAnyWord,
-                allowCustomOptions: this.allowCustomOptions,
-                create: input => {
-                    return {
-                        value: input,
-                        text: input,
-                    };
+        MultiSelect.init(this.$element, multiSelectOptions);
+
+        this.$el.find('.selectize-dropdown-content').addClass('small');
+
+        let type = this.$el.find('select.search-type').val();
+
+        this.handleSearchType(type);
+
+        this.$el.find('select.search-type').on('change', () => {
+            this.trigger('change');
+        });
+
+        this.$element.on('change', () => {
+            this.trigger('change');
+        });
+    },
+
+    fetchFromDom: function () {
+        let selected = [];
+
+        this.$el.find('.list-group .list-group-item').each((i, el) => {
+            let value = $(el).attr('data-value').toString();
+
+            selected.push(value);
+        });
+
+        this.selected = selected;
+    },
+
+    getValueForDisplay: function () {
+        // Do not use the `html` method to avoid XSS.
+
+        /** @var {string[]} */
+        let list = this.selected.map(item => {
+            let label = null;
+
+            if (this.translatedOptions !== null) {
+                if (item in this.translatedOptions) {
+                    label = this.translatedOptions[item];
+                }
+            }
+
+            if (label === null) {
+                label = item;
+            }
+
+            if (label === '') {
+                label = this.translate('None');
+            }
+
+            let style = this.styleMap[item] || 'default';
+
+            if (this.params.displayAsLabel) {
+                return $('<span>')
+                    .addClass('label label-md label-' + style)
+                    .text(label)
+                    .get(0).outerHTML;
+
+            }
+
+            if (style && style !== 'default') {
+                return $('<span>')
+                    .addClass('text-' + style)
+                    .text(label)
+                    .get(0).outerHTML;
+            }
+
+            return $('<span>')
+                .text(label)
+                .get(0).outerHTML;
+        });
+
+        if (this.displayAsList) {
+            if (!list.length) {
+                return '';
+            }
+
+            let itemClassName = 'multi-enum-item-container';
+
+            if (this.displayAsLabel) {
+                itemClassName += ' multi-enum-item-label-container';
+            }
+
+            return list
+                .map(item =>
+                    $('<div>')
+                        .addClass(itemClassName)
+                        .html(item)
+                        .get(0).outerHTML
+                )
+                .join('');
+        }
+
+        if (this.displayAsLabel) {
+            return list.join(' ');
+        }
+
+        return list.join(', ');
+    },
+
+    getItemHtml: function (value) {
+        // Do not use the `html` method to avoid XSS.
+
+        if (this.translatedOptions !== null) {
+            for (let item in this.translatedOptions) {
+                if (this.translatedOptions[item] === value) {
+                    value = item;
+
+                    break;
+                }
+            }
+        }
+
+        value = value.toString();
+
+        let text = this.translatedOptions && value in this.translatedOptions ?
+            this.translatedOptions[value].toString() :
+            value;
+
+        return $('<div>')
+            .addClass('list-group-item')
+            .attr('data-value', value)
+            .css('cursor', 'default')
+            .append(
+                $('<a>')
+                    .attr('role', 'button')
+                    .attr('tabindex', '0')
+                    .addClass('pull-right')
+                    .attr('data-value', value)
+                    .attr('data-action', 'removeValue')
+                    .append(
+                        $('<span>').addClass('fas fa-times')
+                    )
+            )
+            .append(
+                $('<span>')
+                    .addClass('text')
+                    .text(text)
+            )
+            .append('')
+            .get(0)
+            .outerHTML;
+    },
+
+    addValue: function (value) {
+        if (this.selected.indexOf(value) === -1) {
+            let html = this.getItemHtml(value);
+
+            this.$list.append(html);
+            this.selected.push(value);
+            this.trigger('change');
+        }
+    },
+
+    removeValue: function (value) {
+        let valueInternal = value.replace(/"/g, '\\"');
+
+        this.$list.children('[data-value="' + valueInternal + '"]').remove();
+
+        let index = this.selected.indexOf(value);
+
+        this.selected.splice(index, 1);
+        this.trigger('change');
+    },
+
+    fetch: function () {
+        let data = {};
+
+        let list = Espo.Utils.clone(this.selected || []);
+
+        if (this.params.isSorted && this.translatedOptions) {
+            list = list.sort((v1, v2) => {
+                 return (this.translatedOptions[v1] || v1)
+                     .localeCompare(this.translatedOptions[v2] || v2);
+            });
+        }
+
+        data[this.name] = list;
+
+        return data;
+    },
+
+    fetchSearch: function () {
+        let type = this.$el.find('select.search-type').val() || 'anyOf';
+
+        let valueList;
+
+        if (~['anyOf', 'noneOf', 'allOf'].indexOf(type)) {
+            valueList = this.$element.val().split(this.itemDelimiter);
+
+            if (valueList.length === 1 && valueList[0] === '') {
+                valueList = [];
+            }
+
+            if (valueList.length === 0) {
+               if (type === 'anyOf') {
+                   return {
+                       type: 'any',
+                       data: {
+                           type: type,
+                           valueList: valueList,
+                       },
+                   };
+               }
+
+               if (type === 'noneOf') {
+                   return {
+                       type: 'any',
+                       data: {
+                           type: type,
+                           valueList: valueList,
+                       },
+                   };
+               }
+
+               if (type === 'allOf') {
+                   return {
+                       type: 'any',
+                       data: {
+                           type: type,
+                           valueList: valueList,
+                       },
+                   };
+               }
+           }
+        }
+
+        if (type === 'anyOf') {
+            let data = {
+                type: 'arrayAnyOf',
+                value: valueList,
+                data: {
+                    type: 'anyOf',
+                    valueList: valueList,
                 },
             };
 
-            MultiSelect.init(this.$element, multiSelectOptions);
-
-            this.$el.find('.selectize-dropdown-content').addClass('small');
-
-            let type = this.$el.find('select.search-type').val();
-
-            this.handleSearchType(type);
-
-            this.$el.find('select.search-type').on('change', () => {
-                this.trigger('change');
-            });
-
-            this.$element.on('change', () => {
-                this.trigger('change');
-            });
-        },
-
-        fetchFromDom: function () {
-            let selected = [];
-
-            this.$el.find('.list-group .list-group-item').each((i, el) => {
-                let value = $(el).attr('data-value').toString();
-
-                selected.push(value);
-            });
-
-            this.selected = selected;
-        },
-
-        getValueForDisplay: function () {
-            // Do not use the `html` method to avoid XSS.
-
-            /** @var {string[]} */
-            let list = this.selected.map(item => {
-                let label = null;
-
-                if (this.translatedOptions !== null) {
-                    if (item in this.translatedOptions) {
-                        label = this.translatedOptions[item];
-                    }
-                }
-
-                if (label === null) {
-                    label = item;
-                }
-
-                if (label === '') {
-                    label = this.translate('None');
-                }
-
-                let style = this.styleMap[item] || 'default';
-
-                if (this.params.displayAsLabel) {
-                    return $('<span>')
-                        .addClass('label label-md label-' + style)
-                        .text(label)
-                        .get(0).outerHTML;
-
-                }
-
-                if (style && style !== 'default') {
-                    return $('<span>')
-                        .addClass('text-' + style)
-                        .text(label)
-                        .get(0).outerHTML;
-                }
-
-                return $('<span>')
-                    .text(label)
-                    .get(0).outerHTML;
-            });
-
-            if (this.displayAsList) {
-                if (!list.length) {
-                    return '';
-                }
-
-                let itemClassName = 'multi-enum-item-container';
-
-                if (this.displayAsLabel) {
-                    itemClassName += ' multi-enum-item-label-container';
-                }
-
-                return list
-                    .map(item =>
-                        $('<div>')
-                            .addClass(itemClassName)
-                            .html(item)
-                            .get(0).outerHTML
-                    )
-                    .join('');
+            if (!valueList.length) {
+                data.value = null;
             }
 
-            if (this.displayAsLabel) {
-                return list.join(' ');
-            }
-
-            return list.join(', ');
-        },
-
-        getItemHtml: function (value) {
-            // Do not use the `html` method to avoid XSS.
-
-            if (this.translatedOptions !== null) {
-                for (let item in this.translatedOptions) {
-                    if (this.translatedOptions[item] === value) {
-                        value = item;
-
-                        break;
-                    }
-                }
-            }
-
-            value = value.toString();
-
-            let text = this.translatedOptions && value in this.translatedOptions ?
-                this.translatedOptions[value].toString() :
-                value;
-
-            return $('<div>')
-                .addClass('list-group-item')
-                .attr('data-value', value)
-                .css('cursor', 'default')
-                .append(
-                    $('<a>')
-                        .attr('role', 'button')
-                        .attr('tabindex', '0')
-                        .addClass('pull-right')
-                        .attr('data-value', value)
-                        .attr('data-action', 'removeValue')
-                        .append(
-                            $('<span>').addClass('fas fa-times')
-                        )
-                )
-                .append(
-                    $('<span>')
-                        .addClass('text')
-                        .text(text)
-                )
-                .append('')
-                .get(0)
-                .outerHTML;
-        },
-
-        escapeValue: function (value) {
-            return Handlebars.Utils.escapeExpression(value);
-        },
-
-        addValue: function (value) {
-            if (this.selected.indexOf(value) === -1) {
-                let html = this.getItemHtml(value);
-
-                this.$list.append(html);
-                this.selected.push(value);
-                this.trigger('change');
-            }
-        },
-
-        removeValue: function (value) {
-            let valueInternal = value.replace(/"/g, '\\"');
-
-            this.$list.children('[data-value="' + valueInternal + '"]').remove();
-
-            let index = this.selected.indexOf(value);
-
-            this.selected.splice(index, 1);
-            this.trigger('change');
-        },
-
-        fetch: function () {
-            let data = {};
-
-            let list = Espo.Utils.clone(this.selected || []);
-
-            if (this.params.isSorted && this.translatedOptions) {
-                list = list.sort((v1, v2) => {
-                     return (this.translatedOptions[v1] || v1)
-                         .localeCompare(this.translatedOptions[v2] || v2);
-                });
-            }
-
-            data[this.name] = list;
-
             return data;
-        },
-
-        fetchSearch: function () {
-            let type = this.$el.find('select.search-type').val() || 'anyOf';
-
-            let valueList;
-
-            if (~['anyOf', 'noneOf', 'allOf'].indexOf(type)) {
-                valueList = this.$element.val().split(this.itemDelimiter);
-
-                if (valueList.length === 1 && valueList[0] === '') {
-                    valueList = [];
-                }
-
-                if (valueList.length === 0) {
-                   if (type === 'anyOf') {
-                       return {
-                           type: 'any',
-                           data: {
-                               type: type,
-                               valueList: valueList,
-                           },
-                       };
-                   }
-
-                   if (type === 'noneOf') {
-                       return {
-                           type: 'any',
-                           data: {
-                               type: type,
-                               valueList: valueList,
-                           },
-                       };
-                   }
-
-                   if (type === 'allOf') {
-                       return {
-                           type: 'any',
-                           data: {
-                               type: type,
-                               valueList: valueList,
-                           },
-                       };
-                   }
-               }
-            }
-
-            if (type === 'anyOf') {
-                let data = {
-                    type: 'arrayAnyOf',
-                    value: valueList,
-                    data: {
-                        type: 'anyOf',
-                        valueList: valueList,
-                    },
-                };
-
-                if (!valueList.length) {
-                    data.value = null;
-                }
-
-                return data;
-            }
-
-            if (type === 'noneOf') {
-                return {
-                    type: 'arrayNoneOf',
-                    value: valueList,
-                    data: {
-                        type: 'noneOf',
-                        valueList: valueList,
-                    },
-                };
-            }
-
-            if (type === 'allOf') {
-                let data = {
-                    type: 'arrayAllOf',
-                    value: valueList,
-                    data: {
-                        type: 'allOf',
-                        valueList: valueList,
-                    },
-                };
-
-                if (!valueList.length) {
-                    data.value = null;
-                }
-
-                return data;
-            }
-
-            if (type === 'isEmpty') {
-                return {
-                    type: 'arrayIsEmpty',
-                    data: {
-                        type: 'isEmpty',
-                    },
-                };
-            }
-
-            if (type === 'isNotEmpty') {
-                return {
-                    type: 'arrayIsNotEmpty',
-                    data: {
-                        type: 'isNotEmpty',
-                    },
-                };
-            }
-        },
-
-        validateRequired: function () {
-            if (this.isRequired()) {
-                let value = this.model.get(this.name);
-
-                if (!value || value.length === 0) {
-                    let msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
-
-                    this.showValidationMessage(msg, '.array-control-container');
-
-                    return true;
-                }
-            }
-
-            return false;
-        },
-
-        validateMaxCount: function () {
-            if (this.params.maxCount) {
-                let itemList = this.model.get(this.name) || [];
-
-                if (itemList.length > this.params.maxCount) {
-                    let msg =
-                        this.translate('fieldExceedsMaxCount', 'messages')
-                            .replace('{field}', this.getLabelText())
-                            .replace('{maxCount}', this.params.maxCount.toString());
-
-                    this.showValidationMessage(msg, '.array-control-container');
-
-                    return true;
-                }
-            }
-
-            return false;
-        },
-
-        getSearchType: function () {
-            return this.getSearchParamsData().type || 'anyOf';
-        },
-
-        getAddItemModalOptions: function () {
-            let options = [];
-
-            this.params.options.forEach(item => {
-                if (!~this.selected.indexOf(item)) {
-                    options.push(item);
-                }
-            });
+        }
 
+        if (type === 'noneOf') {
             return {
-                options: options,
-                translatedOptions: this.translatedOptions,
+                type: 'arrayNoneOf',
+                value: valueList,
+                data: {
+                    type: 'noneOf',
+                    valueList: valueList,
+                },
             };
-        },
+        }
 
-        actionAddItem: function () {
-            this.createView('addModal', this.addItemModalView, this.getAddItemModalOptions(), view => {
-                view.render();
+        if (type === 'allOf') {
+            let data = {
+                type: 'arrayAllOf',
+                value: valueList,
+                data: {
+                    type: 'allOf',
+                    valueList: valueList,
+                },
+            };
 
-                view.once('add', item => {
-                    this.addValue(item);
-                    view.close();
-                });
+            if (!valueList.length) {
+                data.value = null;
+            }
 
-                view.once('add-mass', items => {
-                    items.forEach(item => this.addValue(item));
-                    view.close();
-                });
+            return data;
+        }
+
+        if (type === 'isEmpty') {
+            return {
+                type: 'arrayIsEmpty',
+                data: {
+                    type: 'isEmpty',
+                },
+            };
+        }
+
+        if (type === 'isNotEmpty') {
+            return {
+                type: 'arrayIsNotEmpty',
+                data: {
+                    type: 'isNotEmpty',
+                },
+            };
+        }
+    },
+
+    validateRequired: function () {
+        if (this.isRequired()) {
+            let value = this.model.get(this.name);
+
+            if (!value || value.length === 0) {
+                let msg = this.translate('fieldIsRequired', 'messages')
+                    .replace('{field}', this.getLabelText());
+
+                this.showValidationMessage(msg, '.array-control-container');
+
+                return true;
+            }
+        }
+
+        return false;
+    },
+
+    validateMaxCount: function () {
+        if (this.params.maxCount) {
+            let itemList = this.model.get(this.name) || [];
+
+            if (itemList.length > this.params.maxCount) {
+                let msg =
+                    this.translate('fieldExceedsMaxCount', 'messages')
+                        .replace('{field}', this.getLabelText())
+                        .replace('{maxCount}', this.params.maxCount.toString());
+
+                this.showValidationMessage(msg, '.array-control-container');
+
+                return true;
+            }
+        }
+
+        return false;
+    },
+
+    getSearchType: function () {
+        return this.getSearchParamsData().type || 'anyOf';
+    },
+
+    getAddItemModalOptions: function () {
+        let options = [];
+
+        this.params.options.forEach(item => {
+            if (!~this.selected.indexOf(item)) {
+                options.push(item);
+            }
+        });
+
+        return {
+            options: options,
+            translatedOptions: this.translatedOptions,
+        };
+    },
+
+    actionAddItem: function () {
+        this.createView('addModal', this.addItemModalView, this.getAddItemModalOptions(), view => {
+            view.render();
+
+            view.once('add', item => {
+                this.addValue(item);
+                view.close();
             });
-        },
-    });
+
+            view.once('add-mass', items => {
+                items.forEach(item => this.addValue(item));
+                view.close();
+            });
+        });
+    },
 });
diff --git a/client/src/views/fields/attachment-multiple.js b/client/src/views/fields/attachment-multiple.js
index 866a6128ef..f158aff670 100644
--- a/client/src/views/fields/attachment-multiple.js
+++ b/client/src/views/fields/attachment-multiple.js
@@ -26,911 +26,899 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/attachment-multiple', ['views/fields/base', 'helpers/file-upload'],
-function (Dep, FileUpload) {
+/** @module views/fields/attachment-multiple */
 
-    /**
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/attachment-multiple
-     */
-    return Dep.extend(/** @lends module:views/fields/attachment-multiple.Class# */{
+import Dep from 'views/fields/base';
+import FileUpload from 'helpers/file-upload';
 
-        type: 'attachmentMultiple',
+/**
+ * @class Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        listTemplate: 'fields/attachments-multiple/list',
+    type: 'attachmentMultiple',
 
-        detailTemplate: 'fields/attachments-multiple/detail',
+    listTemplate: 'fields/attachments-multiple/list',
+    detailTemplate: 'fields/attachments-multiple/detail',
+    editTemplate: 'fields/attachments-multiple/edit',
+    searchTemplate: 'fields/link-multiple/search',
 
-        editTemplate: 'fields/attachments-multiple/edit',
+    previewSize: 'medium',
+    nameHashName: null,
+    idsName: null,
+    nameHash: null,
+    foreignScope: null,
+    showPreviews: true,
+    accept: null,
+    validations: ['ready', 'required'],
+    searchTypeList: ['isNotEmpty', 'isEmpty'],
 
-        searchTemplate: 'fields/link-multiple/search',
+    events: {
+        'click a.remove-attachment': function (e) {
+            var $div = $(e.currentTarget).parent();
 
-        previewSize: 'medium',
+            var id = $div.attr('data-id');
 
-        nameHashName: null,
-
-        idsName: null,
-
-        nameHash: null,
-
-        foreignScope: null,
-
-        showPreviews: true,
-
-        accept: null,
-
-        validations: ['ready', 'required'],
-
-        searchTypeList: ['isNotEmpty', 'isEmpty'],
-
-        events: {
-            'click a.remove-attachment': function (e) {
-                var $div = $(e.currentTarget).parent();
-
-                var id = $div.attr('data-id');
-
-                if (id) {
-                    this.deleteAttachment(id);
-                }
-
-                $div.parent().remove();
-
-                this.$el.find('input.file').val(null);
-
-                setTimeout(() => this.focusOnUploadButton(), 10);
-            },
-            'change input.file': function (e) {
-                let $file = $(e.currentTarget);
-                let files = e.currentTarget.files;
-
-                this.uploadFiles(files);
-
-                e.target.value = null;
-
-                $file.replaceWith($file.clone(true));
-            },
-            'click a.action[data-action="insertFromSource"]': function (e) {
-                var name = $(e.currentTarget).data('name');
-                this.insertFromSource(name);
-            },
-            'click a[data-action="showImagePreview"]': function (e) {
-                e.preventDefault();
-
-                var id = $(e.currentTarget).data('id');
-
-                var attachmentIdList = this.model.get(this.idsName) || [];
-                var typeHash = this.model.get(this.typeHashName) || {};
-
-                var imageIdList = [];
-
-                attachmentIdList.forEach(cId => {
-                    if (!this.isTypeIsImage(typeHash[cId])) {
-                        return;
-                    }
-
-                    imageIdList.push(cId);
-                });
-
-                var imageList = [];
-
-                imageIdList.forEach((cId) => {
-                    imageList.push({
-                        id: cId,
-                        name: this.nameHash[cId]
-                    });
-                });
-
-                this.createView('preview', 'views/modals/image-preview', {
-                    id: id,
-                    model: this.model,
-                    name: this.nameHash[id],
-                    imageList: imageList
-                }, (view) => {
-                    view.render();
-                });
-            },
-            'keydown label.attach-file-label': function (e) {
-                let key = Espo.Utils.getKeyFromKeyEvent(e);
-
-                if (key === 'Enter') {
-                    this.$el.find('input.file').get(0).click();
-                }
-            },
-        },
-
-        data: function () {
-            var ids = this.model.get(this.idsName);
-
-            var data = _.extend({
-                idValues: this.model.get(this.idsName),
-                idValuesString: ids ? ids.join(',') : '',
-                nameHash: this.model.get(this.nameHashName),
-                foreignScope: this.foreignScope,
-                valueIsSet: this.model.has(this.idsName),
-                acceptAttribute: this.acceptAttribute,
-            }, Dep.prototype.data.call(this));
-
-            if (this.mode === this.MODE_EDIT) {
-                data.fileSystem = ~this.sourceList.indexOf('FileSystem');
-                data.sourceList = this.sourceList;
+            if (id) {
+                this.deleteAttachment(id);
             }
 
-            return data;
+            $div.parent().remove();
+
+            this.$el.find('input.file').val(null);
+
+            setTimeout(() => this.focusOnUploadButton(), 10);
         },
+        'change input.file': function (e) {
+            let $file = $(e.currentTarget);
+            let files = e.currentTarget.files;
 
-        setup: function () {
-            this.nameHashName = this.name + 'Names';
-            this.typeHashName = this.name + 'Types';
-            this.idsName = this.name + 'Ids';
-            this.foreignScope = 'Attachment';
+            this.uploadFiles(files);
 
-            this.previewSize = this.options.previewSize || this.params.previewSize || this.previewSize;
+            e.target.value = null;
 
-            this.previewTypeList = this.getMetadata().get(['app', 'image', 'previewFileTypeList']) || [];
-            this.imageSizes = this.getMetadata().get(['app', 'image', 'sizes']) || {};
+            $file.replaceWith($file.clone(true));
+        },
+        'click a.action[data-action="insertFromSource"]': function (e) {
+            var name = $(e.currentTarget).data('name');
+            this.insertFromSource(name);
+        },
+        'click a[data-action="showImagePreview"]': function (e) {
+            e.preventDefault();
 
+            var id = $(e.currentTarget).data('id');
+
+            var attachmentIdList = this.model.get(this.idsName) || [];
+            var typeHash = this.model.get(this.typeHashName) || {};
+
+            var imageIdList = [];
+
+            attachmentIdList.forEach(cId => {
+                if (!this.isTypeIsImage(typeHash[cId])) {
+                    return;
+                }
+
+                imageIdList.push(cId);
+            });
+
+            var imageList = [];
+
+            imageIdList.forEach((cId) => {
+                imageList.push({
+                    id: cId,
+                    name: this.nameHash[cId]
+                });
+            });
+
+            this.createView('preview', 'views/modals/image-preview', {
+                id: id,
+                model: this.model,
+                name: this.nameHash[id],
+                imageList: imageList
+            }, (view) => {
+                view.render();
+            });
+        },
+        'keydown label.attach-file-label': function (e) {
+            let key = Espo.Utils.getKeyFromKeyEvent(e);
+
+            if (key === 'Enter') {
+                this.$el.find('input.file').get(0).click();
+            }
+        },
+    },
+
+    data: function () {
+        var ids = this.model.get(this.idsName);
+
+        var data = _.extend({
+            idValues: this.model.get(this.idsName),
+            idValuesString: ids ? ids.join(',') : '',
+            nameHash: this.model.get(this.nameHashName),
+            foreignScope: this.foreignScope,
+            valueIsSet: this.model.has(this.idsName),
+            acceptAttribute: this.acceptAttribute,
+        }, Dep.prototype.data.call(this));
+
+        if (this.mode === this.MODE_EDIT) {
+            data.fileSystem = ~this.sourceList.indexOf('FileSystem');
+            data.sourceList = this.sourceList;
+        }
+
+        return data;
+    },
+
+    setup: function () {
+        this.nameHashName = this.name + 'Names';
+        this.typeHashName = this.name + 'Types';
+        this.idsName = this.name + 'Ids';
+        this.foreignScope = 'Attachment';
+
+        this.previewSize = this.options.previewSize || this.params.previewSize || this.previewSize;
+
+        this.previewTypeList = this.getMetadata().get(['app', 'image', 'previewFileTypeList']) || [];
+        this.imageSizes = this.getMetadata().get(['app', 'image', 'sizes']) || {};
+
+        this.nameHash = _.clone(this.model.get(this.nameHashName)) || {};
+
+        if ('showPreviews' in this.params) {
+            this.showPreviews = this.params.showPreviews;
+        }
+
+        if ('accept' in this.params) {
+            this.accept = this.params.accept;
+        }
+
+        if (this.accept && this.accept.length) {
+            this.acceptAttribute = this.accept.join(', ');
+        }
+
+        var sourceDefs = this.getMetadata().get(['clientDefs', 'Attachment', 'sourceDefs']) || {};
+
+        this.sourceList = Espo.Utils.clone(this.params.sourceList || []);
+
+        this.sourceList = this.sourceList
+            .concat(
+                this.getMetadata().get(['clientDefs', 'Attachment', 'generalSourceList']) || []
+            )
+            .filter((item, i, self) => {
+                return self.indexOf(item) === i;
+            })
+            .filter((item) => {
+                var defs = sourceDefs[item] || {};
+
+                if (defs.accessDataList) {
+                    if (
+                        !Espo.Utils.checkAccessDataList(
+                            defs.accessDataList, this.getAcl(), this.getUser()
+                        )
+                    ) {
+                        return false;
+                    }
+                }
+
+                if (defs.configCheck) {
+                    var arr = defs.configCheck.split('.');
+
+                    if (!this.getConfig().getByPath(arr)) {
+                        return false;
+                    }
+                }
+
+                return true;
+            });
+
+        this.listenTo(this.model, 'change:' + this.nameHashName, () => {
             this.nameHash = _.clone(this.model.get(this.nameHashName)) || {};
+        });
 
-            if ('showPreviews' in this.params) {
-                this.showPreviews = this.params.showPreviews;
+        this.on('remove', () => {
+            if (this.resizeIsBeingListened) {
+                $(window).off('resize.' + this.cid);
             }
+        });
 
-            if ('accept' in this.params) {
-                this.accept = this.params.accept;
-            }
+        this.on('inline-edit-off', () => {
+            this.isUploading = false;
+        });
+    },
 
-            if (this.accept && this.accept.length) {
-                this.acceptAttribute = this.accept.join(', ');
-            }
+    setupSearch: function () {
+        this.events = _.extend({
+            'change select.search-type': (e) => {
+                var type = $(e.currentTarget).val();
 
-            var sourceDefs = this.getMetadata().get(['clientDefs', 'Attachment', 'sourceDefs']) || {};
+                this.handleSearchType(type);
+            },
+        }, this.events || {});
+    },
 
-            this.sourceList = Espo.Utils.clone(this.params.sourceList || []);
+    focusOnInlineEdit: function () {
+        this.focusOnUploadButton();
+    },
 
-            this.sourceList = this.sourceList
-                .concat(
-                    this.getMetadata().get(['clientDefs', 'Attachment', 'generalSourceList']) || []
-                )
-                .filter((item, i, self) => {
-                    return self.indexOf(item) === i;
-                })
-                .filter((item) => {
-                    var defs = sourceDefs[item] || {};
+    focusOnUploadButton: function () {
+        this.$el.find('.attach-file-label').focus();
+    },
 
-                    if (defs.accessDataList) {
-                        if (
-                            !Espo.Utils.checkAccessDataList(
-                                defs.accessDataList, this.getAcl(), this.getUser()
-                            )
-                        ) {
-                            return false;
-                        }
-                    }
+    empty: function () {
+        this.clearIds();
 
-                    if (defs.configCheck) {
-                        var arr = defs.configCheck.split('.');
+        this.$attachments.empty();
+    },
 
-                        if (!this.getConfig().getByPath(arr)) {
-                            return false;
-                        }
-                    }
+    handleResize: function () {
+        var width = this.$el.width();
 
-                    return true;
-                });
+        this.$el.find('img.image-preview').css('maxWidth', width + 'px');
+    },
 
-            this.listenTo(this.model, 'change:' + this.nameHashName, () => {
-                this.nameHash = _.clone(this.model.get(this.nameHashName)) || {};
+    deleteAttachment: function (id) {
+        this.removeId(id);
+
+        if (this.model.isNew()) {
+            this.getModelFactory().create('Attachment', (attachment) => {
+                attachment.id = id;
+                attachment.destroy();
             });
+        }
+    },
 
-            this.on('remove', () => {
-                if (this.resizeIsBeingListened) {
-                    $(window).off('resize.' + this.cid);
-                }
-            });
+    getImageUrl: function (id, size) {
+        var url = this.getBasePath() + '?entryPoint=image&id=' + id;
 
-            this.on('inline-edit-off', () => {
-                this.isUploading = false;
-            });
-        },
+        if (size) {
+            url += '&size=' + size;
+        }
 
-        setupSearch: function () {
-            this.events = _.extend({
-                'change select.search-type': (e) => {
-                    var type = $(e.currentTarget).val();
+        if (this.getUser().get('portalId')) {
+            url += '&portalId=' + this.getUser().get('portalId');
+        }
 
-                    this.handleSearchType(type);
-                },
-            }, this.events || {});
-        },
+        return url;
+    },
 
-        focusOnInlineEdit: function () {
-            this.focusOnUploadButton();
-        },
+    getDownloadUrl: function (id) {
+        let url = this.getBasePath() + '?entryPoint=download&id=' + id;
 
-        focusOnUploadButton: function () {
-            this.$el.find('.attach-file-label').focus();
-        },
+        if (this.getUser().get('portalId')) {
+            url += '&portalId=' + this.getUser().get('portalId');
+        }
 
-        empty: function () {
-            this.clearIds();
+        return url;
+    },
 
-            this.$attachments.empty();
-        },
+    removeId: function (id) {
+        var arr = _.clone(this.model.get(this.idsName) || []);
+        var i = arr.indexOf(id);
 
-        handleResize: function () {
-            var width = this.$el.width();
+        arr.splice(i, 1);
 
-            this.$el.find('img.image-preview').css('maxWidth', width + 'px');
-        },
+        this.model.set(this.idsName, arr);
 
-        deleteAttachment: function (id) {
-            this.removeId(id);
+        var nameHash = _.clone(this.model.get(this.nameHashName) || {});
+        delete nameHash[id];
 
-            if (this.model.isNew()) {
-                this.getModelFactory().create('Attachment', (attachment) => {
-                    attachment.id = id;
-                    attachment.destroy();
-                });
+        this.model.set(this.nameHashName, nameHash);
+
+        var typeHash = _.clone(this.model.get(this.typeHashName) || {});
+        delete typeHash[id];
+
+        this.model.set(this.typeHashName, typeHash);
+    },
+
+    clearIds: function (silent) {
+        silent = silent || false;
+
+        this.model.set(this.idsName, [], {silent: silent});
+        this.model.set(this.nameHashName, {}, {silent: silent});
+        this.model.set(this.typeHashName, {}, {silent: silent})
+    },
+
+    pushAttachment: function (attachment, link, ui) {
+        var arr = _.clone(this.model.get(this.idsName) || []);
+
+        arr.push(attachment.id);
+
+        this.model.set(this.idsName, arr, {ui: ui});
+
+        var typeHash = _.clone(this.model.get(this.typeHashName) || {});
+
+        typeHash[attachment.id] = attachment.get('type');
+
+        this.model.set(this.typeHashName, typeHash, {ui: ui});
+
+        var nameHash = _.clone(this.model.get(this.nameHashName) || {});
+
+        nameHash[attachment.id] = attachment.get('name');
+
+        this.model.set(this.nameHashName, nameHash, {ui: ui});
+    },
+
+    getEditPreview: function (name, type, id) {
+        if (!~this.previewTypeList.indexOf(type)) {
+            return null;
+        }
+
+        return  $('<img>')
+            .attr('src', this.getImageUrl(id, 'small'))
+            .attr('title', name)
+            .attr('draggable', false)
+            .css({
+                maxWidth: (this.imageSizes[this.previewSize] || {})[0],
+                maxHeight: (this.imageSizes[this.previewSize] || {})[1],
+            })
+            .get(0)
+            .outerHTML;
+    },
+
+    getBoxPreviewHtml: function (name, type, id) {
+        let $text = $('<span>').text(name);
+
+        if (!id) {
+            return $text.get(0).outerHTML;
+        }
+
+        if (this.showPreviews) {
+            let html = this.getEditPreview(name, type, id);
+
+            if (html) {
+                return html;
             }
-        },
+        }
 
-        getImageUrl: function (id, size) {
-            var url = this.getBasePath() + '?entryPoint=image&id=' + id;
+        let url = this.getBasePath() + '?entryPoint=download&id=' + id;
 
-            if (size) {
-                url += '&size=' + size;
-            }
+        return $('<a>')
+            .attr('href', url)
+            .attr('target', '_BLANK')
+            .text(name)
+            .get(0).outerHTML;
+    },
 
-            if (this.getUser().get('portalId')) {
-                url += '&portalId=' + this.getUser().get('portalId');
-            }
+    addAttachmentBox: function (name, type, id) {
+        let $attachments = this.$attachments;
 
-            return url;
-        },
+        let $remove = $('<a>')
+            .attr('role', 'button')
+            .attr('tabindex', '0')
+            .addClass('remove-attachment pull-right')
+            .append(
+                $('<span>').addClass('fas fa-times')
+            );
 
-        getDownloadUrl: function (id) {
-            let url = this.getBasePath() + '?entryPoint=download&id=' + id;
+        let previewHtml = this.getBoxPreviewHtml(name, type, id);
 
-            if (this.getUser().get('portalId')) {
-                url += '&portalId=' + this.getUser().get('portalId');
-            }
+        let $att = $('<div>')
+            .addClass('gray-box')
+            .append($remove)
+            .append(
+                $('<span>')
+                    .addClass('preview')
+                    .append(previewHtml)
+            );
 
-            return url;
-        },
+        let $container = $('<div>').append($att);
 
-        removeId: function (id) {
-            var arr = _.clone(this.model.get(this.idsName) || []);
-            var i = arr.indexOf(id);
+        $attachments.append($container);
 
-            arr.splice(i, 1);
+        if (id) {
+            $att.attr('data-id', id);
 
-            this.model.set(this.idsName, arr);
+            return $att;
+        }
 
-            var nameHash = _.clone(this.model.get(this.nameHashName) || {});
-            delete nameHash[id];
+        let $loading = $('<span>')
+            .addClass('small uploading-message')
+            .text(this.translate('Uploading...'));
 
-            this.model.set(this.nameHashName, nameHash);
+        $container.append($loading);
 
-            var typeHash = _.clone(this.model.get(this.typeHashName) || {});
-            delete typeHash[id];
+        $att.on('ready', () => {
+            $loading.html(this.translate('Ready'));
 
-            this.model.set(this.typeHashName, typeHash);
-        },
-
-        clearIds: function (silent) {
-            silent = silent || false;
-
-            this.model.set(this.idsName, [], {silent: silent});
-            this.model.set(this.nameHashName, {}, {silent: silent});
-            this.model.set(this.typeHashName, {}, {silent: silent})
-        },
-
-        pushAttachment: function (attachment, link, ui) {
-            var arr = _.clone(this.model.get(this.idsName) || []);
-
-            arr.push(attachment.id);
-
-            this.model.set(this.idsName, arr, {ui: ui});
-
-            var typeHash = _.clone(this.model.get(this.typeHashName) || {});
-
-            typeHash[attachment.id] = attachment.get('type');
-
-            this.model.set(this.typeHashName, typeHash, {ui: ui});
-
-            var nameHash = _.clone(this.model.get(this.nameHashName) || {});
-
-            nameHash[attachment.id] = attachment.get('name');
-
-            this.model.set(this.nameHashName, nameHash, {ui: ui});
-        },
-
-        getEditPreview: function (name, type, id) {
-            if (!~this.previewTypeList.indexOf(type)) {
-                return null;
-            }
-
-            return  $('<img>')
-                .attr('src', this.getImageUrl(id, 'small'))
-                .attr('title', name)
-                .attr('draggable', false)
-                .css({
-                    maxWidth: (this.imageSizes[this.previewSize] || {})[0],
-                    maxHeight: (this.imageSizes[this.previewSize] || {})[1],
-                })
-                .get(0)
-                .outerHTML;
-        },
-
-        getBoxPreviewHtml: function (name, type, id) {
-            let $text = $('<span>').text(name);
-
-            if (!id) {
-                return $text.get(0).outerHTML;
-            }
-
-            if (this.showPreviews) {
-                let html = this.getEditPreview(name, type, id);
-
-                if (html) {
-                    return html;
-                }
-            }
-
-            let url = this.getBasePath() + '?entryPoint=download&id=' + id;
-
-            return $('<a>')
-                .attr('href', url)
-                .attr('target', '_BLANK')
-                .text(name)
-                .get(0).outerHTML;
-        },
-
-        addAttachmentBox: function (name, type, id) {
-            let $attachments = this.$attachments;
-
-            let $remove = $('<a>')
-                .attr('role', 'button')
-                .attr('tabindex', '0')
-                .addClass('remove-attachment pull-right')
-                .append(
-                    $('<span>').addClass('fas fa-times')
-                );
+            let id = $att.attr('data-id');
 
             let previewHtml = this.getBoxPreviewHtml(name, type, id);
 
-            let $att = $('<div>')
-                .addClass('gray-box')
-                .append($remove)
-                .append(
-                    $('<span>')
-                        .addClass('preview')
-                        .append(previewHtml)
-                );
+            $att.find('.preview').html(previewHtml);
 
-            let $container = $('<div>').append($att);
-
-            $attachments.append($container);
-
-            if (id) {
-                $att.attr('data-id', id);
-
-                return $att;
+            if ($att.find('.preview').find('img').length) {
+                $loading.remove();
             }
+        });
 
-            let $loading = $('<span>')
-                .addClass('small uploading-message')
-                .text(this.translate('Uploading...'));
+        return $att;
+    },
 
-            $container.append($loading);
+    showValidationMessage: function (msg, selector) {
+        var $label = this.$el.find('label');
+        var title = $label.attr('title');
 
-            $att.on('ready', () => {
-                $loading.html(this.translate('Ready'));
+        $label.attr('title', '');
 
-                let id = $att.attr('data-id');
+        Dep.prototype.showValidationMessage.call(this, msg, selector);
 
-                let previewHtml = this.getBoxPreviewHtml(name, type, id);
+        $label.attr('title', title);
+    },
 
-                $att.find('.preview').html(previewHtml);
+    getMaxFileSize: function () {
+        let maxFileSize = this.params.maxFileSize || 0;
 
-                if ($att.find('.preview').find('img').length) {
-                    $loading.remove();
+        let noChunk = !this.getConfig().get('attachmentUploadChunkSize');
+        let attachmentUploadMaxSize = this.getConfig().get('attachmentUploadMaxSize') || 0;
+        let appMaxUploadSize = this.getHelper().getAppParam('maxUploadSize') || 0;
+
+        if (!maxFileSize || maxFileSize > attachmentUploadMaxSize) {
+            maxFileSize = attachmentUploadMaxSize;
+        }
+
+        if (noChunk && maxFileSize > appMaxUploadSize) {
+            maxFileSize = appMaxUploadSize;
+        }
+
+        return maxFileSize;
+    },
+
+    uploadFiles: function (files) {
+        let uploadedCount = 0;
+        let totalCount = 0;
+
+        let exceedsMaxFileSize = false;
+
+        let maxFileSize = this.getMaxFileSize();
+
+        if (maxFileSize) {
+            for (let i = 0; i < files.length; i++) {
+                let file = files[i];
+
+                if (file.size > maxFileSize * 1024 * 1024) {
+                    exceedsMaxFileSize = true;
                 }
-            });
+            }
+        }
 
-            return $att;
-        },
+        if (exceedsMaxFileSize) {
+            let msg = this.translate('fieldMaxFileSizeError', 'messages')
+                .replace('{field}', this.getLabelText())
+                .replace('{max}', maxFileSize);
 
-        showValidationMessage: function (msg, selector) {
-            var $label = this.$el.find('label');
-            var title = $label.attr('title');
+            this.showValidationMessage(msg, 'label');
 
-            $label.attr('title', '');
+            return;
+        }
 
-            Dep.prototype.showValidationMessage.call(this, msg, selector);
+        this.isUploading = true;
 
-            $label.attr('title', title);
-        },
+        this.getModelFactory().create('Attachment', model => {
+            let canceledList = [];
 
-        getMaxFileSize: function () {
-            let maxFileSize = this.params.maxFileSize || 0;
+            let fileList = [];
 
-            let noChunk = !this.getConfig().get('attachmentUploadChunkSize');
-            let attachmentUploadMaxSize = this.getConfig().get('attachmentUploadMaxSize') || 0;
-            let appMaxUploadSize = this.getHelper().getAppParam('maxUploadSize') || 0;
+            for (let i = 0; i < files.length; i++) {
+                fileList.push(files[i]);
 
-            if (!maxFileSize || maxFileSize > attachmentUploadMaxSize) {
-                maxFileSize = attachmentUploadMaxSize;
+                totalCount++;
             }
 
-            if (noChunk && maxFileSize > appMaxUploadSize) {
-                maxFileSize = appMaxUploadSize;
-            }
+            /** @type module:helpers/file-upload */
+            let uploadHelper = new FileUpload(this.getConfig());
 
-            return maxFileSize;
-        },
+            fileList.forEach(file => {
+                let $attachmentBox = this.addAttachmentBox(file.name, file.type);
 
-        uploadFiles: function (files) {
-            let uploadedCount = 0;
-            let totalCount = 0;
+                let $uploadingMsg = $attachmentBox.parent().find('.uploading-message');
 
-            let exceedsMaxFileSize = false;
+                let mediator = {};
 
-            let maxFileSize = this.getMaxFileSize();
+                $attachmentBox.find('.remove-attachment').on('click.uploading', () => {
+                    canceledList.push(attachment.cid);
 
-            if (maxFileSize) {
-                for (let i = 0; i < files.length; i++) {
-                    let file = files[i];
+                    totalCount--;
 
-                    if (file.size > maxFileSize * 1024 * 1024) {
-                        exceedsMaxFileSize = true;
+                    if (uploadedCount === totalCount) {
+                        this.isUploading = false;
+
+                        if (totalCount) {
+                            this.afterAttachmentsUploaded.call(this);
+                        }
                     }
-                }
-            }
 
-            if (exceedsMaxFileSize) {
-                let msg = this.translate('fieldMaxFileSizeError', 'messages')
-                    .replace('{field}', this.getLabelText())
-                    .replace('{max}', maxFileSize);
+                    mediator.isCanceled = true;
+                });
 
-                this.showValidationMessage(msg, 'label');
+                let attachment = model.clone();
 
-                return;
-            }
+                attachment.set('role', 'Attachment');
+                attachment.set('parentType', this.model.name);
+                attachment.set('field', this.name);
 
-            this.isUploading = true;
+                uploadHelper
+                    .upload(file, attachment, {
+                        afterChunkUpload: (size) => {
+                            let msg = Math.floor((size / file.size) * 100) + '%';
 
-            this.getModelFactory().create('Attachment', model => {
-                let canceledList = [];
+                            $uploadingMsg.html(msg);
+                        },
+                        afterAttachmentSave: (attachment) => {
+                            $attachmentBox.attr('data-id', attachment.id);
+                        },
+                        mediator: mediator,
+                    })
+                    .then(() => {
+                        if (canceledList.indexOf(attachment.cid) !== -1) {
+                            return;
+                        }
 
-                let fileList = [];
+                        this.pushAttachment(attachment, null, true);
 
-                for (let i = 0; i < files.length; i++) {
-                    fileList.push(files[i]);
+                        $attachmentBox.attr('data-id', attachment.id);
+                        $attachmentBox.trigger('ready');
 
-                    totalCount++;
-                }
+                        uploadedCount++;
 
-                /** @type module:helpers/file-upload.Class */
-                let uploadHelper = new FileUpload(this.getConfig());
+                        if (uploadedCount === totalCount && this.isUploading) {
+                            this.model.trigger('attachment-uploaded:' + this.name);
+                            this.afterAttachmentsUploaded.call(this);
 
-                fileList.forEach(file => {
-                    let $attachmentBox = this.addAttachmentBox(file.name, file.type);
+                            this.isUploading = false;
 
-                    let $uploadingMsg = $attachmentBox.parent().find('.uploading-message');
+                            setTimeout(() => {
+                                if (
+                                    document.activeElement &&
+                                    document.activeElement.tagName !== 'BODY'
+                                ) {
+                                    return;
+                                }
 
-                    let mediator = {};
+                                this.focusOnUploadButton();
+                            }, 50);
+                        }
+                    })
+                    .catch(() => {
+                        if (mediator.isCanceled) {
+                            return;
+                        }
 
-                    $attachmentBox.find('.remove-attachment').on('click.uploading', () => {
-                        canceledList.push(attachment.cid);
+                        $attachmentBox.remove();
+                        $uploadingMsg.remove();
 
                         totalCount--;
 
-                        if (uploadedCount === totalCount) {
+                        if (!totalCount) {
                             this.isUploading = false;
-
-                            if (totalCount) {
-                                this.afterAttachmentsUploaded.call(this);
-                            }
                         }
 
-                        mediator.isCanceled = true;
+                        if (uploadedCount === totalCount && this.isUploading) {
+                            this.isUploading = false;
+                            this.afterAttachmentsUploaded.call(this);
+                        }
                     });
-
-                    let attachment = model.clone();
-
-                    attachment.set('role', 'Attachment');
-                    attachment.set('parentType', this.model.name);
-                    attachment.set('field', this.name);
-
-                    uploadHelper
-                        .upload(file, attachment, {
-                            afterChunkUpload: (size) => {
-                                let msg = Math.floor((size / file.size) * 100) + '%';
-
-                                $uploadingMsg.html(msg);
-                            },
-                            afterAttachmentSave: (attachment) => {
-                                $attachmentBox.attr('data-id', attachment.id);
-                            },
-                            mediator: mediator,
-                        })
-                        .then(() => {
-                            if (canceledList.indexOf(attachment.cid) !== -1) {
-                                return;
-                            }
-
-                            this.pushAttachment(attachment, null, true);
-
-                            $attachmentBox.attr('data-id', attachment.id);
-                            $attachmentBox.trigger('ready');
-
-                            uploadedCount++;
-
-                            if (uploadedCount === totalCount && this.isUploading) {
-                                this.model.trigger('attachment-uploaded:' + this.name);
-                                this.afterAttachmentsUploaded.call(this);
-
-                                this.isUploading = false;
-
-                                setTimeout(() => {
-                                    if (
-                                        document.activeElement &&
-                                        document.activeElement.tagName !== 'BODY'
-                                    ) {
-                                        return;
-                                    }
-
-                                    this.focusOnUploadButton();
-                                }, 50);
-                            }
-                        })
-                        .catch(() => {
-                            if (mediator.isCanceled) {
-                                return;
-                            }
-
-                            $attachmentBox.remove();
-                            $uploadingMsg.remove();
-
-                            totalCount--;
-
-                            if (!totalCount) {
-                                this.isUploading = false;
-                            }
-
-                            if (uploadedCount === totalCount && this.isUploading) {
-                                this.isUploading = false;
-                                this.afterAttachmentsUploaded.call(this);
-                            }
-                        });
-                });
             });
-        },
+        });
+    },
 
-        afterAttachmentsUploaded: function () {},
+    afterAttachmentsUploaded: function () {},
 
-        afterRender: function () {
-            if (this.mode === this.MODE_EDIT) {
-                this.$attachments = this.$el.find('div.attachments');
+    afterRender: function () {
+        if (this.mode === this.MODE_EDIT) {
+            this.$attachments = this.$el.find('div.attachments');
 
-                let ids = this.model.get(this.idsName) || [];
+            let ids = this.model.get(this.idsName) || [];
 
-                let hameHash = this.model.get(this.nameHashName);
-                let typeHash = this.model.get(this.typeHashName) || {};
+            let hameHash = this.model.get(this.nameHashName);
+            let typeHash = this.model.get(this.typeHashName) || {};
 
-                ids.forEach(id => {
-                    if (hameHash) {
-                        let name = hameHash[id];
-                        let type = typeHash[id] || null;
+            ids.forEach(id => {
+                if (hameHash) {
+                    let name = hameHash[id];
+                    let type = typeHash[id] || null;
 
-                        this.addAttachmentBox(name, type, id);
-                    }
-                });
-
-                this.$el.off('drop');
-                this.$el.off('dragover');
-                this.$el.off('dragleave');
-
-                this.$el.on('drop', e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    event = e.originalEvent;
-
-                    if (
-                        event.dataTransfer &&
-                        event.dataTransfer.files &&
-                        event.dataTransfer.files.length
-                    ) {
-                        this.uploadFiles(event.dataTransfer.files);
-                    }
-                });
-
-                this.$el.get(0).addEventListener('dragover', e => {
-                    e.preventDefault();
-                });
-
-                this.$el.get(0).addEventListener('dragleave', e => {
-                    e.preventDefault();
-                });
-            }
-
-            if (this.mode === this.MODE_SEARCH) {
-                let type = this.$el.find('select.search-type').val();
-
-                this.handleSearchType(type);
-            }
-
-            if (this.mode === this.MODE_DETAIL) {
-                if (this.previewSize === 'large') {
-                    this.handleResize();
-                    this.resizeIsBeingListened = true;
-
-                    $(window).on('resize.' + this.cid, () => {
-                        this.handleResize();
-                    });
+                    this.addAttachmentBox(name, type, id);
                 }
+            });
+
+            this.$el.off('drop');
+            this.$el.off('dragover');
+            this.$el.off('dragleave');
+
+            this.$el.on('drop', e => {
+                e.preventDefault();
+                e.stopPropagation();
+
+                event = e.originalEvent;
+
+                if (
+                    event.dataTransfer &&
+                    event.dataTransfer.files &&
+                    event.dataTransfer.files.length
+                ) {
+                    this.uploadFiles(event.dataTransfer.files);
+                }
+            });
+
+            this.$el.get(0).addEventListener('dragover', e => {
+                e.preventDefault();
+            });
+
+            this.$el.get(0).addEventListener('dragleave', e => {
+                e.preventDefault();
+            });
+        }
+
+        if (this.mode === this.MODE_SEARCH) {
+            let type = this.$el.find('select.search-type').val();
+
+            this.handleSearchType(type);
+        }
+
+        if (this.mode === this.MODE_DETAIL) {
+            if (this.previewSize === 'large') {
+                this.handleResize();
+                this.resizeIsBeingListened = true;
+
+                $(window).on('resize.' + this.cid, () => {
+                    this.handleResize();
+                });
             }
-        },
+        }
+    },
 
-        isTypeIsImage: function (type) {
-            if (~this.previewTypeList.indexOf(type)) {
-                return true;
-            }
+    isTypeIsImage: function (type) {
+        if (~this.previewTypeList.indexOf(type)) {
+            return true;
+        }
 
-            return false;
-        },
+        return false;
+    },
 
-        /**
-         * @return {string}
-         */
-        getDetailPreview: function (name, type, id) {
-            if (!this.isTypeIsImage(type)) {
-                return $('<span>')
-                    .text(name)
-                    .get(0)
-                    .outerHTML;
-            }
-
-            return $('<a>')
-                .attr('data-action', 'showImagePreview')
-                .attr('data-id', id)
-                .attr('title', name)
-                .attr('href', this.getImageUrl(id))
-                .append(
-                    $('<img>')
-                        .attr('src', this.getImageUrl(id, this.previewSize))
-                        .addClass('image-preview')
-                        .css({
-                            maxWidth: (this.imageSizes[this.previewSize] || {})[0],
-                            maxHeight: (this.imageSizes[this.previewSize] || {})[1],
-                        })
-                )
+    /**
+     * @return {string}
+     */
+    getDetailPreview: function (name, type, id) {
+        if (!this.isTypeIsImage(type)) {
+            return $('<span>')
+                .text(name)
                 .get(0)
                 .outerHTML;
-        },
+        }
 
-        getValueForDisplay: function () {
-            if (this.isDetailMode() || this.isListMode()) {
-                let nameHash = this.nameHash;
-                let typeHash = this.model.get(this.typeHashName) || {};
+        return $('<a>')
+            .attr('data-action', 'showImagePreview')
+            .attr('data-id', id)
+            .attr('title', name)
+            .attr('href', this.getImageUrl(id))
+            .append(
+                $('<img>')
+                    .attr('src', this.getImageUrl(id, this.previewSize))
+                    .addClass('image-preview')
+                    .css({
+                        maxWidth: (this.imageSizes[this.previewSize] || {})[0],
+                        maxHeight: (this.imageSizes[this.previewSize] || {})[1],
+                    })
+            )
+            .get(0)
+            .outerHTML;
+    },
 
-                let previews = [];
-                let names = [];
+    getValueForDisplay: function () {
+        if (this.isDetailMode() || this.isListMode()) {
+            let nameHash = this.nameHash;
+            let typeHash = this.model.get(this.typeHashName) || {};
 
-                for (let id in nameHash) {
-                    let type = typeHash[id] || false;
-                    let name = nameHash[id];
+            let previews = [];
+            let names = [];
 
-                    if (
-                        this.showPreviews &&
-                        ~this.previewTypeList.indexOf(type) &&
-                        (
-                            this.isDetailMode() ||
-                            this.isListMode() && this.showPreviewsInListMode
-                        )
-                    ) {
-                        previews.push(
-                            $('<div>')
-                                .addClass('attachment-preview')
-                                .append(this.getDetailPreview(name, type, id))
-                        );
+            for (let id in nameHash) {
+                let type = typeHash[id] || false;
+                let name = nameHash[id];
 
-                        continue;
-                    }
-
-                    names.push(
-                        $('<div>')
-                            .addClass('attachment-block')
-                            .append(
-                                $('<span>').addClass('fas fa-paperclip text-soft small'),
-                                ' ',
-                                $('<a>')
-                                    .attr('href', this.getDownloadUrl(id))
-                                    .attr('target', '_BLANK')
-                                    .text(name)
-                            )
-                    );
-                }
-
-                let containerClassName = null;
-
-                if (this.previewSize === 'large') {
-                    containerClassName = 'attachment-block-container-large';
-                }
-
-                if (this.previewSize === 'small') {
-                    containerClassName = 'attachment-block-container-small';
-                }
-
-                if (names.length === 0 && previews.length === 0) {
-                    return '';
-                }
-
-                let $container = $('<div>')
-                    .append(
-                        $('<div>')
-                            .addClass('attachment-block-container')
-                            .addClass(containerClassName)
-                            .append(previews)
+                if (
+                    this.showPreviews &&
+                    ~this.previewTypeList.indexOf(type) &&
+                    (
+                        this.isDetailMode() ||
+                        this.isListMode() && this.showPreviewsInListMode
                     )
-                    .append(names);
+                ) {
+                    previews.push(
+                        $('<div>')
+                            .addClass('attachment-preview')
+                            .append(this.getDetailPreview(name, type, id))
+                    );
 
-                return $container.get(0).innerHTML;
+                    continue;
+                }
+
+                names.push(
+                    $('<div>')
+                        .addClass('attachment-block')
+                        .append(
+                            $('<span>').addClass('fas fa-paperclip text-soft small'),
+                            ' ',
+                            $('<a>')
+                                .attr('href', this.getDownloadUrl(id))
+                                .attr('target', '_BLANK')
+                                .text(name)
+                        )
+                );
             }
-        },
 
-        insertFromSource: function (source) {
-            var viewName =
-                this.getMetadata().get(['clientDefs', 'Attachment', 'sourceDefs', source, 'insertModalView']) ||
-                this.getMetadata().get(['clientDefs', source, 'modalViews', 'select']) ||
-                'views/modals/select-records';
+            let containerClassName = null;
 
-            if (viewName) {
-                Espo.Ui.notify(' ... ');
+            if (this.previewSize === 'large') {
+                containerClassName = 'attachment-block-container-large';
+            }
 
-                var filters = null;
+            if (this.previewSize === 'small') {
+                containerClassName = 'attachment-block-container-small';
+            }
 
-                if (('getSelectFilters' + source) in this) {
-                    filters = this['getSelectFilters' + source]();
+            if (names.length === 0 && previews.length === 0) {
+                return '';
+            }
 
-                    if (this.model.get('parentId') && this.model.get('parentType') === 'Account') {
-                        if (
-                            this.getMetadata()
-                                .get(['entityDefs', source, 'fields', 'account', 'type']) === 'link'
-                        ) {
-                            filters = {
-                                account: {
-                                    type: 'equals',
-                                    field: 'accountId',
-                                    value: this.model.get('parentId'),
-                                    valueName: this.model.get('parentName')
-                                }
-                            };
-                        }
+            let $container = $('<div>')
+                .append(
+                    $('<div>')
+                        .addClass('attachment-block-container')
+                        .addClass(containerClassName)
+                        .append(previews)
+                )
+                .append(names);
+
+            return $container.get(0).innerHTML;
+        }
+    },
+
+    insertFromSource: function (source) {
+        var viewName =
+            this.getMetadata().get(['clientDefs', 'Attachment', 'sourceDefs', source, 'insertModalView']) ||
+            this.getMetadata().get(['clientDefs', source, 'modalViews', 'select']) ||
+            'views/modals/select-records';
+
+        if (viewName) {
+            Espo.Ui.notify(' ... ');
+
+            var filters = null;
+
+            if (('getSelectFilters' + source) in this) {
+                filters = this['getSelectFilters' + source]();
+
+                if (this.model.get('parentId') && this.model.get('parentType') === 'Account') {
+                    if (
+                        this.getMetadata()
+                            .get(['entityDefs', source, 'fields', 'account', 'type']) === 'link'
+                    ) {
+                        filters = {
+                            account: {
+                                type: 'equals',
+                                field: 'accountId',
+                                value: this.model.get('parentId'),
+                                valueName: this.model.get('parentName')
+                            }
+                        };
                     }
                 }
+            }
 
-                var boolFilterList = this.getMetadata()
-                    .get(['clientDefs', 'Attachment', 'sourceDefs', source, 'boolFilterList']);
+            var boolFilterList = this.getMetadata()
+                .get(['clientDefs', 'Attachment', 'sourceDefs', source, 'boolFilterList']);
 
-                if (('getSelectBoolFilterList' + source) in this) {
-                    boolFilterList = this['getSelectBoolFilterList' + source]();
-                }
+            if (('getSelectBoolFilterList' + source) in this) {
+                boolFilterList = this['getSelectBoolFilterList' + source]();
+            }
 
-                var primaryFilterName = this.getMetadata()
-                    .get(['clientDefs', 'Attachment', 'sourceDefs', source, 'primaryFilter']);
+            var primaryFilterName = this.getMetadata()
+                .get(['clientDefs', 'Attachment', 'sourceDefs', source, 'primaryFilter']);
 
-                if (('getSelectPrimaryFilterName' + source) in this) {
-                    primaryFilterName = this['getSelectPrimaryFilterName' + source]();
-                }
+            if (('getSelectPrimaryFilterName' + source) in this) {
+                primaryFilterName = this['getSelectPrimaryFilterName' + source]();
+            }
 
-                this.createView('insertFromSource', viewName, {
-                    scope: source,
-                    createButton: false,
-                    filters: filters,
-                    boolFilterList: boolFilterList,
-                    primaryFilterName: primaryFilterName,
-                    multiple: true,
-                }, (view) => {
-                    view.render();
+            this.createView('insertFromSource', viewName, {
+                scope: source,
+                createButton: false,
+                filters: filters,
+                boolFilterList: boolFilterList,
+                primaryFilterName: primaryFilterName,
+                multiple: true,
+            }, (view) => {
+                view.render();
 
-                    this.notify(false);
+                this.notify(false);
 
-                    this.listenToOnce(view, 'select', (modelList) =>{
-                        if (Object.prototype.toString.call(modelList) !== '[object Array]') {
-                            modelList = [modelList];
+                this.listenToOnce(view, 'select', (modelList) =>{
+                    if (Object.prototype.toString.call(modelList) !== '[object Array]') {
+                        modelList = [modelList];
+                    }
+
+                    modelList.forEach(model => {
+                        if (model.name === 'Attachment') {
+                            this.pushAttachment(model);
+
+                            return;
                         }
 
-                        modelList.forEach(model => {
-                            if (model.name === 'Attachment') {
-                                this.pushAttachment(model);
+                        Espo.Ajax
+                            .postRequest(source + '/action/getAttachmentList', {
+                                id: model.id,
+                                field: this.name,
+                                parentType: this.entityType,
+                            })
+                            .then(attachmentList => {
+                                attachmentList.forEach(item => {
+                                    this.getModelFactory().create('Attachment', attachment => {
+                                        attachment.set(item);
 
-                                return;
-                            }
-
-                            Espo.Ajax
-                                .postRequest(source + '/action/getAttachmentList', {
-                                    id: model.id,
-                                    field: this.name,
-                                    parentType: this.entityType,
-                                })
-                                .then(attachmentList => {
-                                    attachmentList.forEach(item => {
-                                        this.getModelFactory().create('Attachment', attachment => {
-                                            attachment.set(item);
-
-                                            this.pushAttachment(attachment, true);
-                                        });
+                                        this.pushAttachment(attachment, true);
                                     });
                                 });
-                        });
+                            });
                     });
                 });
-            }
-        },
+            });
+        }
+    },
 
-        validateRequired: function () {
-            if (this.isRequired()) {
-                if ((this.model.get(this.idsName) || []).length === 0) {
-                    var msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
-
-                    this.showValidationMessage(msg, 'label');
-
-                    return true;
-                }
-            }
-        },
-
-        validateReady: function () {
-            if (this.isUploading) {
-                var msg = this.translate('fieldIsUploading', 'messages')
+    validateRequired: function () {
+        if (this.isRequired()) {
+            if ((this.model.get(this.idsName) || []).length === 0) {
+                var msg = this.translate('fieldIsRequired', 'messages')
                     .replace('{field}', this.getLabelText());
 
                 this.showValidationMessage(msg, 'label');
 
                 return true;
             }
-        },
+        }
+    },
 
-        fetch: function () {
-            var data = {};
+    validateReady: function () {
+        if (this.isUploading) {
+            var msg = this.translate('fieldIsUploading', 'messages')
+                .replace('{field}', this.getLabelText());
 
-            data[this.idsName] = this.model.get(this.idsName) || [];
+            this.showValidationMessage(msg, 'label');
 
-            return data;
-        },
+            return true;
+        }
+    },
 
-        handleSearchType: function (type) {
-            this.$el.find('div.link-group-container').addClass('hidden');
-        },
+    fetch: function () {
+        var data = {};
 
-        fetchSearch: function () {
-            let type = this.$el.find('select.search-type').val();
+        data[this.idsName] = this.model.get(this.idsName) || [];
 
-            if (type === 'isEmpty') {
-                return {
-                    type: 'isNotLinked',
-                    data: {
-                        type: type,
-                    },
-                };
-            }
+        return data;
+    },
 
-            if (type === 'isNotEmpty') {
-                return {
-                    type: 'isLinked',
-                    data: {
-                        type: type,
-                    },
-                };
-            }
+    handleSearchType: function (type) {
+        this.$el.find('div.link-group-container').addClass('hidden');
+    },
 
-            return null;
-        },
-    });
+    fetchSearch: function () {
+        let type = this.$el.find('select.search-type').val();
+
+        if (type === 'isEmpty') {
+            return {
+                type: 'isNotLinked',
+                data: {
+                    type: type,
+                },
+            };
+        }
+
+        if (type === 'isNotEmpty') {
+            return {
+                type: 'isLinked',
+                data: {
+                    type: type,
+                },
+            };
+        }
+
+        return null;
+    },
 });
diff --git a/client/src/views/fields/base.js b/client/src/views/fields/base.js
index 9984830555..235bee6afb 100644
--- a/client/src/views/fields/base.js
+++ b/client/src/views/fields/base.js
@@ -26,1552 +26,1554 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/base', ['view', 'ui/select'], function (Dep, /** module:ui/select*/Select) {
+/** @module views/fields/base */
+
+import Dep from 'view';
+import Select from 'ui/select';
+
+/**
+ * A base field view. Can be in different modes. Each mode uses a separate template.
+ *
+ * @todo Document all options. Introduce separate constructor arguments to pass general field options
+ *   and specific field type options.
+ * @todo Document events.
+ *
+ * @class
+ * @name Class
+ * @extends module:view
+ */
+export default Dep.extend(/** @lends Class# */ {
 
     /**
-     * A base field view. Can be in different modes. Each mode uses a separate template.
+     * A field type.
      *
-     * @todo Document all options.
-     * @todo Document events.
-     *
-     * @class
-     * @name Class
-     * @extends module:view.Class
-     * @memberOf module:views/fields/base
+     * @type {string}
      */
-    return Dep.extend(/** @lends module:views/fields/base.Class# */ {
+    type: 'base',
 
-        /**
-         * A field type.
-         *
-         * @type {string}
-         */
-        type: 'base',
+    /**
+     * List mode template.
+     *
+     * @protected
+     * @type {string}
+     */
+    listTemplate: 'fields/base/list',
 
-        /**
-         * List mode template.
-         *
-         * @protected
-         * @type {string}
-         */
-        listTemplate: 'fields/base/list',
+    /**
+     * List-link mode template.
+     *
+     * @protected
+     * @type {string}
+     */
+    listLinkTemplate: 'fields/base/list-link',
 
-        /**
-         * List-link mode template.
-         *
-         * @protected
-         * @type {string}
-         */
-        listLinkTemplate: 'fields/base/list-link',
+    /**
+     * Detail mode template.
+     *
+     * @protected
+     * @type {string}
+     */
+    detailTemplate: 'fields/base/detail',
 
-        /**
-         * Detail mode template.
-         *
-         * @protected
-         * @type {string}
-         */
-        detailTemplate: 'fields/base/detail',
+    /**
+     * Edit mode template.
+     *
+     * @protected
+     * @type {string}
+     */
+    editTemplate: 'fields/base/edit',
 
-        /**
-         * Edit mode template.
-         *
-         * @protected
-         * @type {string}
-         */
-        editTemplate: 'fields/base/edit',
+    /**
+     * Search mode template.
+     *
+     * @protected
+     * @type {string}
+     */
+    searchTemplate: 'fields/base/search',
 
-        /**
-         * Search mode template.
-         *
-         * @protected
-         * @type {string}
-         */
-        searchTemplate: 'fields/base/search',
+    /**
+     * @protected
+     * @type {string|null}
+     */
+    listTemplateContent: null,
 
-        /**
-         * @protected
-         * @type {string|null}
-         */
-        listTemplateContent: null,
+    /**
+     * @protected
+     * @type {string|null}
+     */
+    detailTemplateContent: null,
 
-        /**
-         * @protected
-         * @type {string|null}
-         */
-        detailTemplateContent: null,
+    /**
+     * @protected
+     * @type {string|null}
+     */
+    editTemplateContent: null,
 
-        /**
-         * @protected
-         * @type {string|null}
-         */
-        editTemplateContent: null,
+    /**
+     * A validation list. There should be a `validate{Name}` method for each item.
+     *
+     * @type {string[]}
+     */
+    validations: ['required'],
 
-        /**
-         * A validation list. There should be a `validate{Name}` method for each item.
-         *
-         * @type {string[]}
-         */
-        validations: ['required'],
+    /**
+     * @const
+     */
+    MODE_LIST: 'list',
 
-        /**
-         * @const
-         */
-        MODE_LIST: 'list',
+    /**
+     * @const
+     */
+    MODE_LIST_LINK: 'listLink',
 
-        /**
-         * @const
-         */
-        MODE_LIST_LINK: 'listLink',
+    /**
+     * @const
+     */
+    MODE_DETAIL: 'detail',
 
-        /**
-         * @const
-         */
-        MODE_DETAIL: 'detail',
+    /**
+     * @const
+     */
+    MODE_EDIT: 'edit',
 
-        /**
-         * @const
-         */
-        MODE_EDIT: 'edit',
+    /**
+     * @const
+     */
+    MODE_SEARCH: 'search',
 
-        /**
-         * @const
-         */
-        MODE_SEARCH: 'search',
+    /**
+     * A field name.
+     *
+     * @type {string}
+     */
+    name: null,
 
-        /**
-         * A field name.
-         *
-         * @type {string}
-         */
-        name: null,
+    /**
+     * Definitions.
+     *
+     * @type {Object}
+     */
+    defs: null,
 
-        /**
-         * Definitions.
-         *
-         * @type {Object}
-         */
-        defs: null,
+    /**
+     * Field params.
+     *
+     * @type {Object.<string,*>}
+     */
+    params: null,
 
-        /**
-         * Field params.
-         *
-         * @type {Object.<string,*>}
-         */
-        params: null,
+    /**
+     * A mode.
+     *
+     * @type {'list'|'listLink'|'detail'|'edit'|'search'}
+     */
+    mode: null,
 
-        /**
-         * A mode.
-         *
-         * @type {'list'|'listLink'|'detail'|'edit'|'search'}
-         */
-        mode: null,
+    /**
+     * Search params.
+     *
+     * @type {Object.<string,*>|null}
+     */
+    searchParams: null,
 
-        /**
-         * Search params.
-         *
-         * @type {Object.<string,*>|null}
-         */
-        searchParams: null,
+    /**
+     * @private
+     */
+    _timeout: null,
 
-        /**
-         * @private
-         */
-        _timeout: null,
+    /**
+     * Inline edit disabled.
+     *
+     * @type {boolean}
+     */
+    inlineEditDisabled: false,
 
-        /**
-         * Inline edit disabled.
-         *
-         * @type {boolean}
-         */
-        inlineEditDisabled: false,
+    /**
+     * Field is disabled.
+     *
+     * @type {boolean}
+     */
+    disabled: false,
 
-        /**
-         * Field is disabled.
-         *
-         * @type {boolean}
-         */
-        disabled: false,
+    /**
+     * Field is read-only.
+     *
+     * @type {boolean}
+     */
+    readOnly: false,
 
-        /**
-         * Field is read-only.
-         *
-         * @type {boolean}
-         */
-        readOnly: false,
+    /**
+     * @type {string[]|null}
+     */
+    attributeList: null,
 
-        /**
-         * @type {string[]|null}
-         */
-        attributeList: null,
+    /**
+     * Attribute values before edit.
+     *
+     * @type {Object.<string,*>|{}}
+     */
+    initialAttributes: null,
 
-        /**
-         * Attribute values before edit.
-         *
-         * @type {Object.<string,*>|{}}
-         */
-        initialAttributes: null,
+    /**
+     * @const
+     */
+    VALIDATION_POPOVER_TIMEOUT: 3000,
 
-        /**
-         * @const
-         */
-        VALIDATION_POPOVER_TIMEOUT: 3000,
+    /**
+     * @type {(function:boolean)|null}
+     * @private
+     * @internal
+     */
+    validateCallback: null,
 
-        /**
-         * @type {(function:boolean)|null}
-         * @private
-         * @internal
-         */
-        validateCallback: null,
+    /**
+     * An element selector to point validation popovers to.
+     *
+     * @type {?string}
+     * @protected
+     */
+    validationElementSelector: null,
 
-        /**
-         * An element selector to point validation popovers to.
-         *
-         * @type {?string}
-         * @protected
-         */
-        validationElementSelector: null,
+    /**
+     * A view-record helper.
+     *
+     * @type {module:view-record-helper|null}
+     */
+    recordHelper: null,
 
-        /**
-         * A view-record helper.
-         *
-         * @type {module:view-record-helper.Class|null}
-         */
-        recordHelper: null,
+    /**
+     * @type {JQuery|null}
+     * @private
+     * @internal
+     */
+    $label: null,
 
-        /**
-         * @type {JQuery|null}
-         * @private
-         * @internal
-         */
-        $label: null,
+    /**
+     * A form element.
+     *
+     * @type {JQuery|null}
+     * @protected
+     */
+    $element: null,
 
-        /**
-         * A form element.
-         *
-         * @type {JQuery|null}
-         * @protected
-         */
-        $element: null,
+    /**
+     * Is searchable once a search filter is added (no need to type or selecting anything).
+     * Actual for search mode.
+     *
+     * @public
+     * @type {boolean}
+     */
+    initialSearchIsNotIdle: false,
 
-        /**
-         * Is searchable once a search filter is added (no need to type or selecting anything).
-         * Actual for search mode.
-         *
-         * @public
-         * @type {boolean}
-         */
-        initialSearchIsNotIdle: false,
+    /**
+     * An entity type.
+     *
+     * @private
+     * @type {string|null}
+     */
+    entityType: null,
 
-        /**
-         * An entity type.
-         *
-         * @private
-         * @type {string|null}
-         */
-        entityType: null,
+    /**
+     * A last validation message;
+     *
+     * @type {?string}
+     */
+    lastValidationMessage: null,
 
-        /**
-         * A last validation message;
-         *
-         * @type {?string}
-         */
-        lastValidationMessage: null,
+    /**
+     * Is the field required.
+     *
+     * @returns {boolean}
+     */
+    isRequired: function () {
+        return this.params.required;
+    },
 
-        /**
-         * Is the field required.
-         *
-         * @returns {boolean}
-         */
-        isRequired: function () {
-            return this.params.required;
-        },
+    /**
+     * Get a cell element. Available only after the view is  rendered.
+     *
+     * @returns {JQuery}
+     */
+    get$cell: function () {
+        return this.$el.parent();
+    },
 
-        /**
-         * Get a cell element. Available only after the view is  rendered.
-         *
-         * @returns {JQuery}
-         */
-        get$cell: function () {
-            return this.$el.parent();
-        },
+    /**
+     * Get a cell element. Available only after the view is  rendered.
+     *
+     * @deprecated Use `get$cell`.
+     * @returns {JQuery}
+     */
+    getCellElement: function () {
+        return this.get$cell();
+    },
 
-        /**
-         * Get a cell element. Available only after the view is  rendered.
-         *
-         * @deprecated Use `get$cell`.
-         * @returns {JQuery}
-         */
-        getCellElement: function () {
-            return this.get$cell();
-        },
+    /**
+     * Is in inline-edit mode.
+     *
+     * @return {boolean}
+     */
+    isInlineEditMode: function () {
+        return !!this._isInlineEditMode;
+    },
 
-        /**
-         * Is in inline-edit mode.
-         *
-         * @return {boolean}
-         */
-        isInlineEditMode: function () {
-            return !!this._isInlineEditMode;
-        },
+    /**
+     * Set disabled.
+     *
+     * @param {boolean} [locked] Won't be able to set back.
+     */
+    setDisabled: function (locked) {
+        this.disabled = true;
 
-        /**
-         * Set disabled.
-         *
-         * @param {boolean} [locked] Won't be able to set back.
-         */
-        setDisabled: function (locked) {
-            this.disabled = true;
+        if (locked) {
+            this.disabledLocked = true;
+        }
+    },
 
-            if (locked) {
-                this.disabledLocked = true;
+    /**
+     * Set not-disabled.
+     */
+    setNotDisabled: function () {
+        if (this.disabledLocked) {
+            return;
+        }
+
+        this.disabled = false;
+    },
+
+    /**
+     * Set required.
+     */
+    setRequired: function () {
+        this.params.required = true;
+
+        if (this.isEditMode()) {
+            if (this.isRendered()) {
+                this.showRequiredSign();
             }
-        },
-
-        /**
-         * Set not-disabled.
-         */
-        setNotDisabled: function () {
-            if (this.disabledLocked) {
-                return;
-            }
-
-            this.disabled = false;
-        },
-
-        /**
-         * Set required.
-         */
-        setRequired: function () {
-            this.params.required = true;
-
-            if (this.isEditMode()) {
-                if (this.isRendered()) {
+            else {
+                this.once('after:render', () => {
                     this.showRequiredSign();
-                }
-                else {
-                    this.once('after:render', () => {
-                        this.showRequiredSign();
-                    });
-                }
+                });
             }
-        },
+        }
+    },
 
-        /**
-         * Set not required.
-         */
-        setNotRequired: function () {
-            this.params.required = false;
-            this.get$cell().removeClass('has-error');
+    /**
+     * Set not required.
+     */
+    setNotRequired: function () {
+        this.params.required = false;
+        this.get$cell().removeClass('has-error');
 
-            if (this.isEditMode()) {
-                if (this.isRendered()) {
+        if (this.isEditMode()) {
+            if (this.isRendered()) {
+                this.hideRequiredSign();
+            }
+            else {
+                this.once('after:render', () => {
                     this.hideRequiredSign();
-                }
-                else {
-                    this.once('after:render', () => {
-                        this.hideRequiredSign();
-                    });
+                });
+            }
+        }
+    },
+
+    /**
+     * Set read-only.
+     *
+     * @param {boolean} [locked] Won't be able to set back.
+     * @return {Promise}
+     */
+    setReadOnly: function (locked) {
+        if (this.readOnlyLocked) {
+            return Promise.reject();
+        }
+
+        this.readOnly = true;
+
+        if (locked) {
+            this.readOnlyLocked = true;
+        }
+
+        if (this.isEditMode()) {
+            if (this.isInlineEditMode()) {
+                return this.inlineEditClose();
+            }
+
+            return this.setDetailMode()
+                .then(() => this.reRender());
+        }
+
+        return Promise.resolve();
+    },
+
+    /**
+     * Set not read only.
+     */
+    setNotReadOnly: function () {
+        if (this.readOnlyLocked) {
+            return;
+        }
+
+        this.readOnly = false;
+    },
+
+    /**
+     * Get a label element. Available only after the view is rendered.
+     *
+     * @return {JQuery}
+     */
+    getLabelElement: function () {
+        if (!this.$label || !this.$label.length) {
+            this.$label = this.$el.parent().children('label');
+        }
+
+        return this.$label;
+    },
+
+    /**
+     * Hide field and label. Available only after the view is rendered.
+     */
+    hide: function () {
+        this.$el.addClass('hidden');
+        let $cell = this.get$cell();
+
+        $cell.children('label').addClass('hidden');
+        $cell.addClass('hidden-cell');
+    },
+
+    /**
+     * Show field and label. Available only after the view is rendered.
+     */
+    show: function () {
+        this.$el.removeClass('hidden');
+
+        let $cell = this.get$cell();
+
+        $cell.children('label').removeClass('hidden');
+        $cell.removeClass('hidden-cell');
+    },
+
+    /**
+     * @inheritDoc
+     */
+    data: function () {
+        let data = {
+            scope: this.model.name,
+            name: this.name,
+            defs: this.defs,
+            params: this.params,
+            value: this.getValueForDisplay(),
+        };
+
+        if (this.isSearchMode()) {
+            data.searchParams = this.searchParams;
+            data.searchData = this.searchData;
+            data.searchValues = this.getSearchValues();
+            data.searchType = this.getSearchType();
+            data.searchTypeList = this.getSearchTypeList();
+        }
+
+        return data;
+    },
+
+    /**
+     * Get a value for display. Is available by using a `{value}` placeholder in templates.
+     *
+     * @return {*}
+     */
+    getValueForDisplay: function () {
+        return this.model.get(this.name);
+    },
+
+    /**
+     * Is in list, detail or list-link mode.
+     *
+     * @returns {boolean}
+     */
+    isReadMode: function () {
+        return this.mode === this.MODE_LIST ||
+            this.mode === this.MODE_DETAIL ||
+            this.mode === this.MODE_LIST_LINK;
+    },
+
+    /**
+     * Is in list or list-link mode.
+     *
+     * @returns {boolean}
+     */
+    isListMode: function () {
+        return this.mode === this.MODE_LIST || this.mode === this.MODE_LIST_LINK;
+    },
+
+    /**
+     * Is in detail mode.
+     *
+     * @returns {boolean}
+     */
+    isDetailMode: function () {
+        return this.mode === this.MODE_DETAIL;
+    },
+
+    /**
+     * Is in edit mode.
+     *
+     * @returns {boolean}
+     */
+    isEditMode: function () {
+        return this.mode === this.MODE_EDIT;
+    },
+
+    /**
+     * Is in search mode.
+     *
+     * @returns {boolean}
+     */
+    isSearchMode: function () {
+        return this.mode === this.MODE_SEARCH;
+    },
+
+    /**
+     * Set detail mode.
+     *
+     * @returns {Promise}
+     */
+    setDetailMode: function () {
+        return this.setMode(this.MODE_DETAIL) || Promise.resolve();
+    },
+
+    /**
+     * Set edit mode.
+     *
+     * @returns {Promise}
+     */
+    setEditMode: function () {
+        return this.setMode(this.MODE_EDIT) || Promise.resolve();
+    },
+
+    /**
+     * Set a mode.
+     *
+     * @internal
+     * @returns {Promise}
+     */
+    setMode: function (mode) {
+        let modeIsChanged = this.mode !== mode && this.mode;
+        let modeBefore = this.mode;
+
+        this.mode = mode;
+
+        let property = mode + 'Template';
+
+        if (!(property in this)) {
+            this[property] = 'fields/' + Espo.Utils.camelCaseToHyphen(this.type) + '/' + this.mode;
+        }
+
+        this.template = this[property];
+
+        let contentProperty = mode + 'TemplateContent';
+
+        if (!this._template) {
+            this._templateCompiled = null;
+
+            if (contentProperty in this && this[contentProperty] !== null) {
+                this.compiledTemplatesCache = this.compiledTemplatesCache || {};
+
+                this._templateCompiled =
+                    this.compiledTemplatesCache[contentProperty] =
+                        this.compiledTemplatesCache[contentProperty] ||
+                        this._templator.compileTemplate(this[contentProperty]);
+            }
+        }
+
+        if (modeIsChanged) {
+            if (modeBefore) {
+                this.trigger('mode-changed');
+            }
+
+            return this._onModeSet();
+        }
+
+        return Promise.resolve();
+    },
+
+    /**
+     * Called on mode change and on value change before re-rendering.
+     * To be used for additional initialization that depends on field
+     * values or mode.
+     *
+     * @protected
+     * @returns {Promise|undefined}
+     */
+    prepare: function () {},
+
+    /**
+     * @private
+     * @returns {Promise}
+     */
+    _onModeSet: function () {
+        if (this.isListMode()) {
+            return this.onListModeSet() || Promise.resolve();
+        }
+
+        if (this.isDetailMode()) {
+            return this.onDetailModeSet() || Promise.resolve();
+        }
+
+        if (this.isEditMode()) {
+            return this.onEditModeSet() || Promise.resolve();
+        }
+
+        return Promise.resolve();
+    },
+
+    /**
+     * Additional initialization for the detail mode.
+     *
+     * @protected
+     * @returns {Promise|undefined}
+     */
+    onDetailModeSet: function () {
+        return this.prepare();
+    },
+
+    /**
+     * Additional initialization for the edit mode.
+     *
+     * @protected
+     * @returns {Promise|undefined}
+     */
+    onEditModeSet: function () {
+        return this.prepare();
+    },
+
+    /**
+     * Additional initialization for the list mode.
+     *
+     * @protected
+     * @returns {Promise|undefined}
+     */
+    onListModeSet: function () {
+        return this.prepare();
+    },
+
+    /**
+     * @inheritDoc
+     */
+    init: function () {
+        this.validations = Espo.Utils.clone(this.validations);
+
+        this.defs = this.options.defs || {};
+        this.name = this.options.name || this.defs.name;
+        this.params = this.options.params || this.defs.params || {};
+
+        this.validateCallback = this.options.validateCallback;
+
+        this.fieldType = this.model.getFieldParam(this.name, 'type') || this.type;
+
+        this.entityType = this.model.entityType;
+
+        this.recordHelper = this.options.recordHelper;
+
+        this.getFieldManager().getParamList(this.type).forEach(d => {
+            var name = d.name;
+
+            if (!(name in this.params)) {
+                this.params[name] = this.model.getFieldParam(this.name, name);
+
+                if (typeof this.params[name] === 'undefined') {
+                    this.params[name] = null;
                 }
             }
-        },
+        });
 
-        /**
-         * Set read-only.
-         *
-         * @param {boolean} [locked] Won't be able to set back.
-         * @return {Promise}
-         */
-        setReadOnly: function (locked) {
-            if (this.readOnlyLocked) {
-                return Promise.reject();
-            }
+        var additionalParamList = ['inlineEditDisabled'];
 
-            this.readOnly = true;
+        additionalParamList.forEach((item) => {
+            this.params[item] = this.model.getFieldParam(this.name, item) || null;
+        });
 
-            if (locked) {
-                this.readOnlyLocked = true;
-            }
+        this.readOnly = this.readOnly || this.params.readOnly ||
+            this.model.getFieldParam(this.name, 'readOnly') ||
+            this.model.getFieldParam(this.name, 'clientReadOnly');
 
-            if (this.isEditMode()) {
-                if (this.isInlineEditMode()) {
-                    return this.inlineEditClose();
-                }
+        this.readOnlyLocked = this.options.readOnlyLocked || this.readOnly;
 
-                return this.setDetailMode()
-                    .then(() => this.reRender());
-            }
+        this.inlineEditDisabled = this.options.inlineEditDisabled ||
+            this.params.inlineEditDisabled || this.inlineEditDisabled;
 
-            return Promise.resolve();
-        },
+        this.readOnly = this.readOnlyLocked || this.options.readOnly || false;
 
-        /**
-         * Set not read only.
-         */
-        setNotReadOnly: function () {
-            if (this.readOnlyLocked) {
-                return;
-            }
+        this.tooltip = this.options.tooltip || this.params.tooltip ||
+            this.model.getFieldParam(this.name, 'tooltip') || this.tooltip;
 
+        if (this.options.readOnlyDisabled) {
             this.readOnly = false;
-        },
+        }
 
-        /**
-         * Get a label element. Available only after the view is rendered.
-         *
-         * @return {JQuery}
-         */
-        getLabelElement: function () {
-            if (!this.$label || !this.$label.length) {
-                this.$label = this.$el.parent().children('label');
-            }
+        this.disabledLocked = this.options.disabledLocked || false;
+        this.disabled = this.disabledLocked || this.options.disabled || this.disabled;
 
-            return this.$label;
-        },
+        let mode = this.options.mode || this.mode || this.MODE_DETAIL;
 
-        /**
-         * Hide field and label. Available only after the view is rendered.
-         */
-        hide: function () {
-            this.$el.addClass('hidden');
-            let $cell = this.get$cell();
+        if (mode === this.MODE_EDIT && this.readOnly) {
+            mode = this.MODE_DETAIL;
+        }
 
-            $cell.children('label').addClass('hidden');
-            $cell.addClass('hidden-cell');
-        },
+        this.mode = null;
 
-        /**
-         * Show field and label. Available only after the view is rendered.
-         */
-        show: function () {
-            this.$el.removeClass('hidden');
+        this.wait(
+            this.setMode(mode)
+        );
 
-            let $cell = this.get$cell();
+        if (this.isSearchMode()) {
+            this.searchParams = _.clone(this.options.searchParams || {});
+            this.searchData = {};
+            this.setupSearch();
 
-            $cell.children('label').removeClass('hidden');
-            $cell.removeClass('hidden-cell');
-        },
-
-        /**
-         * @inheritDoc
-         */
-        data: function () {
-            let data = {
-                scope: this.model.name,
-                name: this.name,
-                defs: this.defs,
-                params: this.params,
-                value: this.getValueForDisplay(),
+            this.events['keydown.' + this.cid] = e => {
+                if (Espo.Utils.getKeyFromKeyEvent(e) === 'Control+Enter') {
+                    this.trigger('search');
+                }
             };
+        }
 
-            if (this.isSearchMode()) {
-                data.searchParams = this.searchParams;
-                data.searchData = this.searchData;
-                data.searchValues = this.getSearchValues();
-                data.searchType = this.getSearchType();
-                data.searchTypeList = this.getSearchTypeList();
-            }
+        this.on('highlight', () => {
+            var $cell = this.get$cell();
 
-            return data;
-        },
+            $cell.addClass('highlighted');
+            $cell.addClass('transition');
 
-        /**
-         * Get a value for display. Is available by using a `{value}` placeholder in templates.
-         *
-         * @return {*}
-         */
-        getValueForDisplay: function () {
-            return this.model.get(this.name);
-        },
+            setTimeout(() => {
+                $cell.removeClass('highlighted');
+            }, this.highlightPeriod || 3000);
 
-        /**
-         * Is in list, detail or list-link mode.
-         *
-         * @returns {boolean}
-         */
-        isReadMode: function () {
-            return this.mode === this.MODE_LIST ||
-                this.mode === this.MODE_DETAIL ||
-                this.mode === this.MODE_LIST_LINK;
-        },
+            setTimeout(() => {
+                $cell.removeClass('transition');
+            }, (this.highlightPeriod || 3000) + 2000);
+        });
 
-        /**
-         * Is in list or list-link mode.
-         *
-         * @returns {boolean}
-         */
-        isListMode: function () {
-            return this.mode === this.MODE_LIST || this.mode === this.MODE_LIST_LINK;
-        },
+        this.on('invalid', () => {
+            var $cell = this.get$cell();
 
-        /**
-         * Is in detail mode.
-         *
-         * @returns {boolean}
-         */
-        isDetailMode: function () {
-            return this.mode === this.MODE_DETAIL;
-        },
+            $cell.addClass('has-error');
 
-        /**
-         * Is in edit mode.
-         *
-         * @returns {boolean}
-         */
-        isEditMode: function () {
-            return this.mode === this.MODE_EDIT;
-        },
+            this.$el.one('click', () => {
+                $cell.removeClass('has-error');
+            });
 
-        /**
-         * Is in search mode.
-         *
-         * @returns {boolean}
-         */
-        isSearchMode: function () {
-            return this.mode === this.MODE_SEARCH;
-        },
-
-        /**
-         * Set detail mode.
-         *
-         * @returns {Promise}
-         */
-        setDetailMode: function () {
-            return this.setMode(this.MODE_DETAIL) || Promise.resolve();
-        },
-
-        /**
-         * Set edit mode.
-         *
-         * @returns {Promise}
-         */
-        setEditMode: function () {
-            return this.setMode(this.MODE_EDIT) || Promise.resolve();
-        },
-
-        /**
-         * Set a mode.
-         *
-         * @internal
-         * @returns {Promise}
-         */
-        setMode: function (mode) {
-            let modeIsChanged = this.mode !== mode && this.mode;
-            let modeBefore = this.mode;
-
-            this.mode = mode;
-
-            let property = mode + 'Template';
-
-            if (!(property in this)) {
-                this[property] = 'fields/' + Espo.Utils.camelCaseToHyphen(this.type) + '/' + this.mode;
-            }
-
-            this.template = this[property];
-
-            let contentProperty = mode + 'TemplateContent';
-
-            if (!this._template) {
-                this._templateCompiled = null;
-
-                if (contentProperty in this && this[contentProperty] !== null) {
-                    this.compiledTemplatesCache = this.compiledTemplatesCache || {};
-
-                    this._templateCompiled =
-                        this.compiledTemplatesCache[contentProperty] =
-                            this.compiledTemplatesCache[contentProperty] ||
-                            this._templator.compileTemplate(this[contentProperty]);
-                }
-            }
-
-            if (modeIsChanged) {
-                if (modeBefore) {
-                    this.trigger('mode-changed');
-                }
-
-                return this._onModeSet();
-            }
-
-            return Promise.resolve();
-        },
-
-        /**
-         * Called on mode change and on value change before re-rendering.
-         * To be used for additional initialization that depends on field
-         * values or mode.
-         *
-         * @protected
-         * @returns {Promise|undefined}
-         */
-        prepare: function () {},
-
-        /**
-         * @private
-         * @returns {Promise}
-         */
-        _onModeSet: function () {
-            if (this.isListMode()) {
-                return this.onListModeSet() || Promise.resolve();
-            }
-
-            if (this.isDetailMode()) {
-                return this.onDetailModeSet() || Promise.resolve();
-            }
+            this.once('render', () => {
+                $cell.removeClass('has-error');
+            });
+        });
 
+        this.on('after:render', () => {
             if (this.isEditMode()) {
-                return this.onEditModeSet() || Promise.resolve();
-            }
-
-            return Promise.resolve();
-        },
-
-        /**
-         * Additional initialization for the detail mode.
-         *
-         * @protected
-         * @returns {Promise|undefined}
-         */
-        onDetailModeSet: function () {
-            return this.prepare();
-        },
-
-        /**
-         * Additional initialization for the edit mode.
-         *
-         * @protected
-         * @returns {Promise|undefined}
-         */
-        onEditModeSet: function () {
-            return this.prepare();
-        },
-
-        /**
-         * Additional initialization for the list mode.
-         *
-         * @protected
-         * @returns {Promise|undefined}
-         */
-        onListModeSet: function () {
-            return this.prepare();
-        },
-
-        /**
-         * @inheritDoc
-         */
-        init: function () {
-            this.validations = Espo.Utils.clone(this.validations);
-
-            this.defs = this.options.defs || {};
-            this.name = this.options.name || this.defs.name;
-            this.params = this.options.params || this.defs.params || {};
-
-            this.validateCallback = this.options.validateCallback;
-
-            this.fieldType = this.model.getFieldParam(this.name, 'type') || this.type;
-
-            this.entityType = this.model.entityType;
-
-            this.recordHelper = this.options.recordHelper;
-
-            this.getFieldManager().getParamList(this.type).forEach(d => {
-                var name = d.name;
-
-                if (!(name in this.params)) {
-                    this.params[name] = this.model.getFieldParam(this.name, name);
-
-                    if (typeof this.params[name] === 'undefined') {
-                        this.params[name] = null;
-                    }
-                }
-            });
-
-            var additionalParamList = ['inlineEditDisabled'];
-
-            additionalParamList.forEach((item) => {
-                this.params[item] = this.model.getFieldParam(this.name, item) || null;
-            });
-
-            this.readOnly = this.readOnly || this.params.readOnly ||
-                this.model.getFieldParam(this.name, 'readOnly') ||
-                this.model.getFieldParam(this.name, 'clientReadOnly');
-
-            this.readOnlyLocked = this.options.readOnlyLocked || this.readOnly;
-
-            this.inlineEditDisabled = this.options.inlineEditDisabled ||
-                this.params.inlineEditDisabled || this.inlineEditDisabled;
-
-            this.readOnly = this.readOnlyLocked || this.options.readOnly || false;
-
-            this.tooltip = this.options.tooltip || this.params.tooltip ||
-                this.model.getFieldParam(this.name, 'tooltip') || this.tooltip;
-
-            if (this.options.readOnlyDisabled) {
-                this.readOnly = false;
-            }
-
-            this.disabledLocked = this.options.disabledLocked || false;
-            this.disabled = this.disabledLocked || this.options.disabled || this.disabled;
-
-            let mode = this.options.mode || this.mode || this.MODE_DETAIL;
-
-            if (mode === this.MODE_EDIT && this.readOnly) {
-                mode = this.MODE_DETAIL;
-            }
-
-            this.mode = null;
-
-            this.wait(
-                this.setMode(mode)
-            );
-
-            if (this.isSearchMode()) {
-                this.searchParams = _.clone(this.options.searchParams || {});
-                this.searchData = {};
-                this.setupSearch();
-
-                this.events['keydown.' + this.cid] = e => {
-                    if (Espo.Utils.getKeyFromKeyEvent(e) === 'Control+Enter') {
-                        this.trigger('search');
-                    }
-                };
-            }
-
-            this.on('highlight', () => {
-                var $cell = this.get$cell();
-
-                $cell.addClass('highlighted');
-                $cell.addClass('transition');
-
-                setTimeout(() => {
-                    $cell.removeClass('highlighted');
-                }, this.highlightPeriod || 3000);
-
-                setTimeout(() => {
-                    $cell.removeClass('transition');
-                }, (this.highlightPeriod || 3000) + 2000);
-            });
-
-            this.on('invalid', () => {
-                var $cell = this.get$cell();
-
-                $cell.addClass('has-error');
-
-                this.$el.one('click', () => {
-                    $cell.removeClass('has-error');
-                });
-
-                this.once('render', () => {
-                    $cell.removeClass('has-error');
-                });
-            });
-
-            this.on('after:render', () => {
-                if (this.isEditMode()) {
-                    if (this.hasRequiredMarker()) {
-                        this.showRequiredSign();
-
-                        return;
-                    }
-
-                    this.hideRequiredSign();
+                if (this.hasRequiredMarker()) {
+                    this.showRequiredSign();
 
                     return;
                 }
 
-                if (this.hasRequiredMarker()) {
-                    this.hideRequiredSign();
-                }
-
-                if (this.isSearchMode()) {
-                    let $searchType = this.$el.find('select.search-type');
-
-                    if ($searchType.length) {
-                        Select.init($searchType, {matchAnyWord: true});
-                    }
-                }
-            });
-
-            if ((this.isDetailMode() || this.isEditMode()) && this.tooltip) {
-                this.initTooltip();
-            }
-
-            if (this.isDetailMode()) {
-                if (!this.inlineEditDisabled) {
-                    this.listenToOnce(this, 'after:render', this.initInlineEdit, this);
-                }
-            }
-
-            if (!this.isSearchMode()) {
-                this.attributeList = this.getAttributeList(); // for backward compatibility, to be removed
-
-                this.listenTo(this.model, 'change', (model, options) => {
-                    if (options.ui) {
-                        return;
-                    }
-
-                    let changed = false;
-
-                    for (let attribute of this.getAttributeList()) {
-                        if (model.hasChanged(attribute)) {
-                            changed = true;
-
-                            break;
-                        }
-                    }
-
-                    if (!changed) {
-                        return;
-                    }
-
-                    let reRender = () => {
-                        if (!this.isRendered() && !this.isBeingRendered()) {
-                            return;
-                        }
-
-                        if (options.skipReRenderInEditMode && this.isEditMode()) {
-                            return;
-                        }
-
-                        if (!options.skipReRender) {
-                            this.reRender();
-                        }
-
-                        if (options.highlight) {
-                            this.trigger('highlight');
-                        }
-                    };
-
-                    let promise = this.prepare();
-
-                    if (promise) {
-                        promise.then(() => reRender());
-
-                        return;
-                    }
-
-                    reRender();
-                });
-
-                this.listenTo(this, 'change', () => {
-                    var attributes = this.fetch();
-
-                    this.model.set(attributes, {ui: true});
-                });
-            }
-        },
-
-        /**
-         * @inheritDoc
-         */
-        setupFinal: function () {
-            this.wait(
-                this._onModeSet()
-            );
-        },
-
-        /**
-         * @internal
-         * @private
-         */
-        initTooltip: function () {
-            let $a;
-
-            this.once('after:render', () => {
-                $a = $('<a>')
-                    .attr('role', 'button')
-                    .attr('tabindex', '-1')
-                    .addClass('text-muted field-info')
-                    .append(
-                        $('<span>').addClass('fas fa-info-circle')
-                    );
-
-                let $label = this.getLabelElement();
-
-                $label.append(' ');
-
-                this.getLabelElement().append($a);
-
-                let tooltipText = this.options.tooltipText || this.tooltipText;
-
-                if (!tooltipText && typeof this.tooltip === 'string') {
-                    tooltipText = this.translate(this.tooltip, 'tooltips', this.model.name);
-                }
-
-                tooltipText = tooltipText || this.translate(this.name, 'tooltips', this.model.name) || '';
-                tooltipText = this.getHelper()
-                    .transformMarkdownText(tooltipText, {linksInNewTab: true}).toString();
-
-                Espo.Ui.popover($a, {
-                    placement: 'bottom',
-                    content: tooltipText,
-                    preventDestroyOnRender: true,
-                }, this);
-            });
-        },
-
-        /**
-         * Show a required-field sign.
-         *
-         * @private
-         */
-        showRequiredSign: function () {
-            var $label = this.getLabelElement();
-            var $sign = $label.find('span.required-sign');
-
-            if ($label.length && !$sign.length) {
-                let $text = $label.find('span.label-text');
-
-                $('<span class="required-sign"> *</span>').insertAfter($text);
-                $sign = $label.find('span.required-sign');
-            }
-
-            $sign.show();
-        },
-
-        /**
-         * Hide a required-field sign.
-         *
-         * @private
-         */
-        hideRequiredSign: function () {
-            var $label = this.getLabelElement();
-            var $sign = $label.find('span.required-sign');
-
-            $sign.hide();
-        },
-
-        /**
-         * Get search-params data.
-         *
-         * @protected
-         * @return {Object.<string,*>}
-         */
-        getSearchParamsData: function () {
-            return this.searchParams.data || {};
-        },
-
-        /**
-         * Get search values.
-         *
-         * @protected
-         * @return {Object.<string,*>}
-         */
-        getSearchValues: function () {
-            return this.getSearchParamsData().values || {};
-        },
-
-        /**
-         * Get a current search type.
-         *
-         * @protected
-         * @return {string}
-         */
-        getSearchType: function () {
-            return this.getSearchParamsData().type || this.searchParams.type;
-        },
-
-        /**
-         * Get the search type list.
-         *
-         * @protected
-         * @returns {string[]}
-         */
-        getSearchTypeList: function () {
-            return this.searchTypeList;
-        },
-
-        /**
-         * @private
-         * @internal
-         */
-        initInlineEdit: function () {
-            let $cell = this.get$cell();
-
-            let $editLink = $('<a>')
-                .attr('role', 'button')
-                .addClass('pull-right inline-edit-link hidden')
-                .append(
-                    $('<span>').addClass('fas fa-pencil-alt fa-sm')
-                );
-
-            if ($cell.length === 0) {
-                this.listenToOnce(this, 'after:render', () => this.initInlineEdit());
+                this.hideRequiredSign();
 
                 return;
             }
 
-            $cell.prepend($editLink);
+            if (this.hasRequiredMarker()) {
+                this.hideRequiredSign();
+            }
 
-            $editLink.on('click', () => this.inlineEdit());
+            if (this.isSearchMode()) {
+                let $searchType = this.$el.find('select.search-type');
 
-            $cell
-                .on('mouseenter', (e) => {
-                    e.stopPropagation();
+                if ($searchType.length) {
+                    Select.init($searchType, {matchAnyWord: true});
+                }
+            }
+        });
 
-                    if (this.disabled || this.readOnly) {
+        if ((this.isDetailMode() || this.isEditMode()) && this.tooltip) {
+            this.initTooltip();
+        }
+
+        if (this.isDetailMode()) {
+            if (!this.inlineEditDisabled) {
+                this.listenToOnce(this, 'after:render', () => this.initInlineEdit());
+            }
+        }
+
+        if (!this.isSearchMode()) {
+            this.attributeList = this.getAttributeList(); // for backward compatibility, to be removed
+
+            this.listenTo(this.model, 'change', (model, options) => {
+                if (options.ui) {
+                    return;
+                }
+
+                let changed = false;
+
+                for (let attribute of this.getAttributeList()) {
+                    if (model.hasChanged(attribute)) {
+                        changed = true;
+
+                        break;
+                    }
+                }
+
+                if (!changed) {
+                    return;
+                }
+
+                let reRender = () => {
+                    if (!this.isRendered() && !this.isBeingRendered()) {
                         return;
                     }
 
-                    if (this.isDetailMode()) {
-                        $editLink.removeClass('hidden');
+                    if (options.skipReRenderInEditMode && this.isEditMode()) {
+                        return;
                     }
-                })
-                .on('mouseleave', (e) => {
-                    e.stopPropagation();
 
-                    if (this.isDetailMode()) {
-                        $editLink.addClass('hidden');
+                    if (!options.skipReRender) {
+                        this.reRender();
                     }
-                });
 
-            this.on('after:render', () => {
-                if (!this.isDetailMode()) {
+                    if (options.highlight) {
+                        this.trigger('highlight');
+                    }
+                };
+
+                let promise = this.prepare();
+
+                if (promise) {
+                    promise.then(() => reRender());
+
+                    return;
+                }
+
+                reRender();
+            });
+
+            this.listenTo(this, 'change', () => {
+                var attributes = this.fetch();
+
+                this.model.set(attributes, {ui: true});
+            });
+        }
+    },
+
+    /**
+     * @inheritDoc
+     */
+    setupFinal: function () {
+        this.wait(
+            this._onModeSet()
+        );
+    },
+
+    /**
+     * @internal
+     * @private
+     */
+    initTooltip: function () {
+        let $a;
+
+        this.once('after:render', () => {
+            $a = $('<a>')
+                .attr('role', 'button')
+                .attr('tabindex', '-1')
+                .addClass('text-muted field-info')
+                .append(
+                    $('<span>').addClass('fas fa-info-circle')
+                );
+
+            let $label = this.getLabelElement();
+
+            $label.append(' ');
+
+            this.getLabelElement().append($a);
+
+            let tooltipText = this.options.tooltipText || this.tooltipText;
+
+            if (!tooltipText && typeof this.tooltip === 'string') {
+                tooltipText = this.translate(this.tooltip, 'tooltips', this.model.name);
+            }
+
+            tooltipText = tooltipText || this.translate(this.name, 'tooltips', this.model.name) || '';
+            tooltipText = this.getHelper()
+                .transformMarkdownText(tooltipText, {linksInNewTab: true}).toString();
+
+            Espo.Ui.popover($a, {
+                placement: 'bottom',
+                content: tooltipText,
+                preventDestroyOnRender: true,
+            }, this);
+        });
+    },
+
+    /**
+     * Show a required-field sign.
+     *
+     * @private
+     */
+    showRequiredSign: function () {
+        var $label = this.getLabelElement();
+        var $sign = $label.find('span.required-sign');
+
+        if ($label.length && !$sign.length) {
+            let $text = $label.find('span.label-text');
+
+            $('<span class="required-sign"> *</span>').insertAfter($text);
+            $sign = $label.find('span.required-sign');
+        }
+
+        $sign.show();
+    },
+
+    /**
+     * Hide a required-field sign.
+     *
+     * @private
+     */
+    hideRequiredSign: function () {
+        var $label = this.getLabelElement();
+        var $sign = $label.find('span.required-sign');
+
+        $sign.hide();
+    },
+
+    /**
+     * Get search-params data.
+     *
+     * @protected
+     * @return {Object.<string,*>}
+     */
+    getSearchParamsData: function () {
+        return this.searchParams.data || {};
+    },
+
+    /**
+     * Get search values.
+     *
+     * @protected
+     * @return {Object.<string,*>}
+     */
+    getSearchValues: function () {
+        return this.getSearchParamsData().values || {};
+    },
+
+    /**
+     * Get a current search type.
+     *
+     * @protected
+     * @return {string}
+     */
+    getSearchType: function () {
+        return this.getSearchParamsData().type || this.searchParams.type;
+    },
+
+    /**
+     * Get the search type list.
+     *
+     * @protected
+     * @returns {string[]}
+     */
+    getSearchTypeList: function () {
+        return this.searchTypeList;
+    },
+
+    /**
+     * @private
+     * @internal
+     */
+    initInlineEdit: function () {
+        let $cell = this.get$cell();
+
+        let $editLink = $('<a>')
+            .attr('role', 'button')
+            .addClass('pull-right inline-edit-link hidden')
+            .append(
+                $('<span>').addClass('fas fa-pencil-alt fa-sm')
+            );
+
+        if ($cell.length === 0) {
+            this.listenToOnce(this, 'after:render', () => this.initInlineEdit());
+
+            return;
+        }
+
+        $cell.prepend($editLink);
+
+        $editLink.on('click', () => this.inlineEdit());
+
+        $cell
+            .on('mouseenter', (e) => {
+                e.stopPropagation();
+
+                if (this.disabled || this.readOnly) {
+                    return;
+                }
+
+                if (this.isDetailMode()) {
+                    $editLink.removeClass('hidden');
+                }
+            })
+            .on('mouseleave', (e) => {
+                e.stopPropagation();
+
+                if (this.isDetailMode()) {
                     $editLink.addClass('hidden');
                 }
             });
-        },
 
-        /**
-         * Initializes a form element reference.
-         *
-         * @protected
-         */
-        initElement: function () {
-            this.$element = this.$el.find('[data-name="' + this.name + '"]');
+        this.on('after:render', () => {
+            if (!this.isDetailMode()) {
+                $editLink.addClass('hidden');
+            }
+        });
+    },
 
-            if (!this.$element.length) {
-                this.$element = this.$el.find('[name="' + this.name + '"]');
+    /**
+     * Initializes a form element reference.
+     *
+     * @protected
+     */
+    initElement: function () {
+        this.$element = this.$el.find('[data-name="' + this.name + '"]');
+
+        if (!this.$element.length) {
+            this.$element = this.$el.find('[name="' + this.name + '"]');
+        }
+
+        if (!this.$element.length) {
+            this.$element = this.$el.find('.main-element');
+        }
+
+        if (this.isEditMode()) {
+            this.$element.on('change', () => {
+                this.trigger('change');
+            });
+        }
+    },
+
+    /**
+     * @inheritDoc
+     */
+    afterRender: function () {
+        if (this.isEditMode() || this.isSearchMode()) {
+            this.initElement();
+        }
+
+        if (this.isReadMode()) {
+            this.afterRenderRead();
+        }
+
+        if (this.isListMode()) {
+            this.afterRenderList();
+        }
+
+        if (this.isDetailMode()) {
+            this.afterRenderDetail();
+        }
+
+        if (this.isEditMode()) {
+            this.afterRenderEdit();
+        }
+
+        if (this.isSearchMode()) {
+            this.afterRenderSearch();
+        }
+    },
+
+    /**
+     * Called after the view is rendered in list or read mode.
+     *
+     * @protected
+     */
+    afterRenderRead: function () {},
+
+    /**
+     * Called after the view is rendered in list mode.
+     *
+     * @protected
+     */
+    afterRenderList: function () {},
+
+    /**
+     * Called after the view is rendered in detail mode.
+     *
+     * @protected
+     */
+    afterRenderDetail: function () {},
+
+    /**
+     * Called after the view is rendered in edit mode.
+     *
+     * @protected
+     */
+    afterRenderEdit: function () {},
+
+    /**
+     * Called after the view is rendered in search mode.
+     *
+     * @protected
+     */
+    afterRenderSearch: function () {},
+
+    /**
+     * Initialization.
+     */
+    setup: function () {},
+
+    /**
+     * Initialization for search mode.
+     *
+     * @protected
+     */
+    setupSearch: function () {},
+
+    /**
+     * Get list of model attributes that relate to the field.
+     * Changing of any attributes makes the field to re-render.
+     *
+     * @return {string[]}
+     */
+    getAttributeList: function () {
+        return this.getFieldManager().getAttributes(this.fieldType, this.name);
+    },
+
+    /**
+     * Invoke inline-edit saving.
+     *
+     * @param {{[bypassClose]: boolean}} [options]
+     */
+    inlineEditSave: function (options) {
+        options = options || {}
+
+        if (this.recordHelper) {
+            this.recordHelper.trigger('inline-edit-save', this.name, options);
+
+            return;
+        }
+
+        // Code below supposed not to be executed.
+
+        let data = this.fetch();
+
+        let model = this.model;
+        let prev = this.initialAttributes;
+
+        model.set(data, {silent: true});
+        data = model.attributes;
+
+        let attrs = false;
+
+        for (let attr in data) {
+            if (_.isEqual(prev[attr], data[attr])) {
+                continue;
             }
 
-            if (!this.$element.length) {
-                this.$element = this.$el.find('.main-element');
-            }
+            (attrs || (attrs = {}))[attr] = data[attr];
+        }
 
-            if (this.isEditMode()) {
-                this.$element.on('change', () => {
-                    this.trigger('change');
-                });
-            }
-        },
+        if (!attrs) {
+            this.inlineEditClose();
+        }
 
-        /**
-         * @inheritDoc
-         */
-        afterRender: function () {
-            if (this.isEditMode() || this.isSearchMode()) {
-                this.initElement();
-            }
+        let isInvalid = this.validateCallback ? this.validateCallback() : this.validate();
 
-            if (this.isReadMode()) {
-                this.afterRenderRead();
-            }
+        if (isInvalid) {
+            this.notify('Not valid', 'error');
 
-            if (this.isListMode()) {
-                this.afterRenderList();
-            }
+            model.set(prev, {silent: true});
 
-            if (this.isDetailMode()) {
-                this.afterRenderDetail();
-            }
+            return;
+        }
 
-            if (this.isEditMode()) {
-                this.afterRenderEdit();
-            }
+        Espo.Ui.notify(this.translate('saving', 'messages'));
 
-            if (this.isSearchMode()) {
-                this.afterRenderSearch();
-            }
-        },
+        model
+            .save(attrs, {patch: true})
+            .then(() => {
+                this.trigger('after:inline-save');
+                this.trigger('after:save');
 
-        /**
-         * Called after the view is rendered in list or read mode.
-         *
-         * @protected
-         */
-        afterRenderRead: function () {},
+                model.trigger('after:save');
 
-        /**
-         * Called after the view is rendered in list mode.
-         *
-         * @protected
-         */
-        afterRenderList: function () {},
-
-        /**
-         * Called after the view is rendered in detail mode.
-         *
-         * @protected
-         */
-        afterRenderDetail: function () {},
-
-        /**
-         * Called after the view is rendered in edit mode.
-         *
-         * @protected
-         */
-        afterRenderEdit: function () {},
-
-        /**
-         * Called after the view is rendered in search mode.
-         *
-         * @protected
-         */
-        afterRenderSearch: function () {},
-
-        /**
-         * Initialization.
-         */
-        setup: function () {},
-
-        /**
-         * Initialization for search mode.
-         *
-         * @protected
-         */
-        setupSearch: function () {},
-
-        /**
-         * Get list of model attributes that relate to the field.
-         * Changing of any attributes makes the field to re-render.
-         *
-         * @return {string[]}
-         */
-        getAttributeList: function () {
-            return this.getFieldManager().getAttributes(this.fieldType, this.name);
-        },
-
-        /**
-         * Invoke inline-edit saving.
-         *
-         * @param {{[bypassClose]: boolean}} [options]
-         */
-        inlineEditSave: function (options) {
-            options = options || {}
-
-            if (this.recordHelper) {
-                this.recordHelper.trigger('inline-edit-save', this.name, options);
-
-                return;
-            }
-
-            // Code below supposed not to be executed.
-
-            let data = this.fetch();
-
-            let model = this.model;
-            let prev = this.initialAttributes;
-
-            model.set(data, {silent: true});
-            data = model.attributes;
-
-            let attrs = false;
-
-            for (let attr in data) {
-                if (_.isEqual(prev[attr], data[attr])) {
-                    continue;
-                }
-
-                (attrs || (attrs = {}))[attr] = data[attr];
-            }
-
-            if (!attrs) {
-                this.inlineEditClose();
-            }
-
-            let isInvalid = this.validateCallback ? this.validateCallback() : this.validate();
-
-            if (isInvalid) {
-                this.notify('Not valid', 'error');
+                this.notify('Saved', 'success');
+            })
+            .catch(() => {
+                this.notify('Error occurred', 'error');
 
                 model.set(prev, {silent: true});
 
-                return;
-            }
-
-            Espo.Ui.notify(this.translate('saving', 'messages'));
-
-            model
-                .save(attrs, {patch: true})
-                .then(() => {
-                    this.trigger('after:inline-save');
-                    this.trigger('after:save');
-
-                    model.trigger('after:save');
-
-                    this.notify('Saved', 'success');
-                })
-                .catch(() => {
-                    this.notify('Error occurred', 'error');
-
-                    model.set(prev, {silent: true});
-
-                    this.reRender();
-                });
-
-            if (!options.bypassClose) {
-                this.inlineEditClose(true);
-            }
-        },
-
-        /**
-         * @private
-         */
-        removeInlineEditLinks: function () {
-            var $cell = this.get$cell();
-
-            $cell.find('.inline-save-link').remove();
-            $cell.find('.inline-cancel-link').remove();
-            $cell.find('.inline-edit-link').addClass('hidden');
-        },
-
-        /**
-         * @private
-         */
-        addInlineEditLinks: function () {
-            let $cell = this.get$cell();
-
-            let $saveLink = $('<a>')
-                .attr('role', 'button')
-                .attr('tabindex', '-1')
-                .addClass('pull-right inline-save-link')
-                .attr('title', 'Ctrl+Enter')
-                .text(this.translate('Update'));
-
-            let $cancelLink = $('<a>')
-                .attr('role', 'button')
-                .attr('tabindex', '-1')
-                .addClass('pull-right inline-cancel-link')
-                .attr('title', 'Esc')
-                .text(this.translate('Cancel'));
-
-            $cell.prepend($saveLink);
-            $cell.prepend($cancelLink);
-
-            $cell.find('.inline-edit-link').addClass('hidden');
-
-            $saveLink.click(() => {
-                this.inlineEditSave();
+                this.reRender();
             });
 
-            $cancelLink.click(() => {
-                this.inlineEditClose();
-            });
-        },
+        if (!options.bypassClose) {
+            this.inlineEditClose(true);
+        }
+    },
 
-        /**
-         * @private
-         */
-        setIsInlineEditMode: function (value) {
-            this._isInlineEditMode = value;
-        },
+    /**
+     * @private
+     */
+    removeInlineEditLinks: function () {
+        var $cell = this.get$cell();
 
-        /**
-         * Exist inline-edit mode.
-         *
-         * @param {boolean} [noReset]
-         * @return {Promise}
-         */
-        inlineEditClose: function (noReset) {
-            this.trigger('inline-edit-off', {noReset: noReset});
+        $cell.find('.inline-save-link').remove();
+        $cell.find('.inline-cancel-link').remove();
+        $cell.find('.inline-edit-link').addClass('hidden');
+    },
 
-            this.$el.off('keydown.inline-edit');
+    /**
+     * @private
+     */
+    addInlineEditLinks: function () {
+        let $cell = this.get$cell();
 
-            this._isInlineEditMode = false;
+        let $saveLink = $('<a>')
+            .attr('role', 'button')
+            .attr('tabindex', '-1')
+            .addClass('pull-right inline-save-link')
+            .attr('title', 'Ctrl+Enter')
+            .text(this.translate('Update'));
 
-            if (!this.isEditMode()) {
-                return Promise.resolve();
-            }
+        let $cancelLink = $('<a>')
+            .attr('role', 'button')
+            .attr('tabindex', '-1')
+            .addClass('pull-right inline-cancel-link')
+            .attr('title', 'Esc')
+            .text(this.translate('Cancel'));
 
-            if (!noReset) {
-                this.model.set(this.initialAttributes, {skipReRenderInEditMode: true});
-            }
+        $cell.prepend($saveLink);
+        $cell.prepend($cancelLink);
 
-            let promise = this.setDetailMode()
-                .then(() => this.reRender(true))
-                .then(() => this.removeInlineEditLinks());
+        $cell.find('.inline-edit-link').addClass('hidden');
 
-            this.trigger('after:inline-edit-off', {noReset: noReset});
+        $saveLink.click(() => {
+            this.inlineEditSave();
+        });
 
-            return promise;
-        },
+        $cancelLink.click(() => {
+            this.inlineEditClose();
+        });
+    },
 
-        /**
-         * Switch to inline-edit mode.
-         *
-         * @return {Promise}
-         */
-        inlineEdit: function () {
-            this.trigger('edit', this);
+    /**
+     * @private
+     */
+    setIsInlineEditMode: function (value) {
+        this._isInlineEditMode = value;
+    },
 
-            this.initialAttributes = this.model.getClonedAttributes();
+    /**
+     * Exist inline-edit mode.
+     *
+     * @param {boolean} [noReset]
+     * @return {Promise}
+     */
+    inlineEditClose: function (noReset) {
+        this.trigger('inline-edit-off', {noReset: noReset});
 
-            this._isInlineEditMode = true;
+        this.$el.off('keydown.inline-edit');
 
-            let promise = this.setEditMode()
-                .then(() => this.reRender(true))
-                .then(() => this.addInlineEditLinks())
-                .then(() => {
-                    this.$el.on('keydown.inline-edit', e => {
-                        let key = Espo.Utils.getKeyFromKeyEvent(e);
+        this._isInlineEditMode = false;
 
-                        if (key === 'Control+Enter') {
-                            e.stopPropagation();
+        if (!this.isEditMode()) {
+            return Promise.resolve();
+        }
 
-                            this.inlineEditSave();
+        if (!noReset) {
+            this.model.set(this.initialAttributes, {skipReRenderInEditMode: true});
+        }
 
-                            setTimeout(() => {
+        let promise = this.setDetailMode()
+            .then(() => this.reRender(true))
+            .then(() => this.removeInlineEditLinks());
+
+        this.trigger('after:inline-edit-off', {noReset: noReset});
+
+        return promise;
+    },
+
+    /**
+     * Switch to inline-edit mode.
+     *
+     * @return {Promise}
+     */
+    inlineEdit: function () {
+        this.trigger('edit', this);
+
+        this.initialAttributes = this.model.getClonedAttributes();
+
+        this._isInlineEditMode = true;
+
+        let promise = this.setEditMode()
+            .then(() => this.reRender(true))
+            .then(() => this.addInlineEditLinks())
+            .then(() => {
+                this.$el.on('keydown.inline-edit', e => {
+                    let key = Espo.Utils.getKeyFromKeyEvent(e);
+
+                    if (key === 'Control+Enter') {
+                        e.stopPropagation();
+
+                        this.inlineEditSave();
+
+                        setTimeout(() => {
+                            this.get$cell().focus();
+                        }, 100);
+
+                        return;
+                    }
+
+                    if (key === 'Escape') {
+                        e.stopPropagation();
+
+                        this.inlineEditClose()
+                            .then(() => {
                                 this.get$cell().focus();
-                            }, 100);
+                            });
 
-                            return;
-                        }
+                        return;
+                    }
 
-                        if (key === 'Escape') {
-                            e.stopPropagation();
+                    if (key === 'Control+KeyS') {
+                        e.preventDefault();
+                        e.stopPropagation();
 
-                            this.inlineEditClose()
-                                .then(() => {
-                                    this.get$cell().focus();
-                                });
-
-                            return;
-                        }
-
-                        if (key === 'Control+KeyS') {
-                            e.preventDefault();
-                            e.stopPropagation();
-
-                            this.inlineEditSave({bypassClose: true});
-                        }
-                    });
-
-                    setTimeout(() => this.focusOnInlineEdit(), 10);
+                        this.inlineEditSave({bypassClose: true});
+                    }
                 });
 
-            this.trigger('inline-edit-on');
+                setTimeout(() => this.focusOnInlineEdit(), 10);
+            });
 
-            return promise;
-        },
+        this.trigger('inline-edit-on');
 
-        /**
-         * @protected
-         */
-        focusOnInlineEdit: function () {
-            let $element = this.$element && this.$element.length ?
-                this.$element :
-                this.$el.find('.form-control').first();
+        return promise;
+    },
 
-            if (!$element) {
+    /**
+     * @protected
+     */
+    focusOnInlineEdit: function () {
+        let $element = this.$element && this.$element.length ?
+            this.$element :
+            this.$el.find('.form-control').first();
+
+        if (!$element) {
+            return;
+        }
+
+        $element.first().focus();
+    },
+
+    /**
+     * Suspend a validation message.
+     *
+     * @internal
+     * @param {number} [time=200]
+     */
+    suspendValidationMessage: function (time) {
+        this.validationMessageSuspended = true;
+
+        setTimeout(() => this.validationMessageSuspended = false, time || 200);
+    },
+
+    /**
+     * Show a validation message.
+     *
+     * @param {string} message A message.
+     * @param {string|JQuery|Element} [target] A target element or selector.
+     */
+    showValidationMessage: function (message, target) {
+        if (this.validationMessageSuspended) {
+            return;
+        }
+
+        var $el;
+
+        target = target || this.validationElementSelector || '.main-element';
+
+        if (typeof target === 'string' || target instanceof String) {
+            $el = this.$el.find(target);
+        } else {
+            $el = $(target);
+        }
+
+        if (!$el.length && this.$element) {
+            $el = this.$element;
+        }
+
+        if (!$el.length) {
+            $el = this.$el;
+        }
+
+        if ($el.length) {
+            let rect = $el.get(0).getBoundingClientRect();
+
+            this.lastValidationMessage = message;
+
+            if (rect.top === 0 && rect.bottom === 0 && rect.left === 0) {
+                return;
+            }
+        }
+
+        $el
+            .popover({
+                placement: 'bottom',
+                container: 'body',
+                content: this.getHelper().transformMarkdownText(message).toString(),
+                html: true,
+                trigger: 'manual'
+            })
+            .popover('show');
+
+        var isDestroyed = false;
+
+        $el.closest('.field').one('mousedown click', () => {
+            if (isDestroyed) {
                 return;
             }
 
-            $element.first().focus();
-        },
+            $el.popover('destroy');
+            isDestroyed = true;
+        });
 
-        /**
-         * Suspend a validation message.
-         *
-         * @internal
-         * @param {number} [time=200]
-         */
-        suspendValidationMessage: function (time) {
-            this.validationMessageSuspended = true;
-
-            setTimeout(() => this.validationMessageSuspended = false, time || 200);
-        },
-
-        /**
-         * Show a validation message.
-         *
-         * @param {string} message A message.
-         * @param {string|JQuery|Element} [target] A target element or selector.
-         */
-        showValidationMessage: function (message, target) {
-            if (this.validationMessageSuspended) {
+        this.once('render remove', () => {
+            if (isDestroyed) {
                 return;
             }
 
-            var $el;
-
-            target = target || this.validationElementSelector || '.main-element';
-
-            if (typeof target === 'string' || target instanceof String) {
-                $el = this.$el.find(target);
-            } else {
-                $el = $(target);
-            }
-
-            if (!$el.length && this.$element) {
-                $el = this.$element;
-            }
-
-            if (!$el.length) {
-                $el = this.$el;
-            }
-
-            if ($el.length) {
-                let rect = $el.get(0).getBoundingClientRect();
-
-                this.lastValidationMessage = message;
-
-                if (rect.top === 0 && rect.bottom === 0 && rect.left === 0) {
-                    return;
-                }
-            }
-
-            $el
-                .popover({
-                    placement: 'bottom',
-                    container: 'body',
-                    content: this.getHelper().transformMarkdownText(message).toString(),
-                    html: true,
-                    trigger: 'manual'
-                })
-                .popover('show');
-
-            var isDestroyed = false;
-
-            $el.closest('.field').one('mousedown click', () => {
-                if (isDestroyed) {
-                    return;
-                }
-
+            if ($el) {
                 $el.popover('destroy');
                 isDestroyed = true;
-            });
+            }
+        });
 
-            this.once('render remove', () => {
-                if (isDestroyed) {
-                    return;
-                }
+        if (this._timeout) {
+            clearTimeout(this._timeout);
+        }
 
-                if ($el) {
-                    $el.popover('destroy');
-                    isDestroyed = true;
-                }
-            });
-
-            if (this._timeout) {
-                clearTimeout(this._timeout);
+        this._timeout = setTimeout(() => {
+            if (isDestroyed) {
+                return;
             }
 
-            this._timeout = setTimeout(() => {
-                if (isDestroyed) {
-                    return;
-                }
+            $el.popover('destroy');
+            isDestroyed = true;
 
-                $el.popover('destroy');
-                isDestroyed = true;
+        }, this.VALIDATION_POPOVER_TIMEOUT);
+    },
 
-            }, this.VALIDATION_POPOVER_TIMEOUT);
-        },
+    /**
+     * Validate field values.
+     *
+     * @return {boolean} True if not valid.
+     */
+    validate: function () {
+        this.lastValidationMessage = null;
 
-        /**
-         * Validate field values.
-         *
-         * @return {boolean} True if not valid.
-         */
-        validate: function () {
-            this.lastValidationMessage = null;
+        for (let i in this.validations) {
+            let method = 'validate' + Espo.Utils.upperCaseFirst(this.validations[i]);
 
-            for (let i in this.validations) {
-                let method = 'validate' + Espo.Utils.upperCaseFirst(this.validations[i]);
+            if (this[method].call(this)) {
+                this.trigger('invalid');
 
-                if (this[method].call(this)) {
-                    this.trigger('invalid');
-
-                    return true;
-                }
+                return true;
             }
+        }
 
-            return false;
-        },
+        return false;
+    },
 
-        /**
-         * Get a label text.
-         *
-         * @returns {string}
-         */
-        getLabelText: function () {
-            return this.options.labelText || this.translate(this.name, 'fields', this.model.name);
-        },
+    /**
+     * Get a label text.
+     *
+     * @returns {string}
+     */
+    getLabelText: function () {
+        return this.options.labelText || this.translate(this.name, 'fields', this.model.name);
+    },
 
-        /**
-         * Validate required.
-         *
-         * @return {boolean}
-         */
-        validateRequired: function () {
-            if (this.isRequired()) {
-                if (this.model.get(this.name) === '' || this.model.get(this.name) === null) {
-                    var msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
+    /**
+     * Validate required.
+     *
+     * @return {boolean}
+     */
+    validateRequired: function () {
+        if (this.isRequired()) {
+            if (this.model.get(this.name) === '' || this.model.get(this.name) === null) {
+                var msg = this.translate('fieldIsRequired', 'messages')
+                    .replace('{field}', this.getLabelText());
 
-                    this.showValidationMessage(msg);
+                this.showValidationMessage(msg);
 
-                    return true;
-                }
+                return true;
             }
-        },
+        }
+    },
 
-        /**
-         * Defines whether the field should have a required-marker rendered.
-         *
-         * @protected
-         * @return {boolean}
-         */
-        hasRequiredMarker: function () {
-            return this.isRequired();
-        },
+    /**
+     * Defines whether the field should have a required-marker rendered.
+     *
+     * @protected
+     * @return {boolean}
+     */
+    hasRequiredMarker: function () {
+        return this.isRequired();
+    },
 
-        /**
-         * Fetch field values to the model.
-         */
-        fetchToModel: function () {
-            this.model.set(this.fetch(), {silent: true});
-        },
+    /**
+     * Fetch field values to the model.
+     */
+    fetchToModel: function () {
+        this.model.set(this.fetch(), {silent: true});
+    },
 
-        /**
-         * Fetch field values from DOM.
-         *
-         * @return {Object.<string,any>}
-         */
-        fetch: function () {
-            if (!this.$element.length) {
-                return {};
-            }
+    /**
+     * Fetch field values from DOM.
+     *
+     * @return {Object.<string, *>}
+     */
+    fetch: function () {
+        if (!this.$element.length) {
+            return {};
+        }
 
-            let data = {};
+        let data = {};
 
-            data[this.name] = this.$element.val().trim();
+        data[this.name] = this.$element.val().trim();
 
-            return data;
-        },
+        return data;
+    },
 
-        /**
-         * Fetch search data from DOM.
-         *
-         * @return {Object.<string,any>|null}
-         */
-        fetchSearch: function () {
-            let value = this.$element.val().toString().trim();
+    /**
+     * Fetch search data from DOM.
+     *
+     * @return {Object.<string, *>|null}
+     */
+    fetchSearch: function () {
+        let value = this.$element.val().toString().trim();
 
-            if (value) {
-                return {
-                    type: 'equals',
-                    value: value,
-                };
-            }
+        if (value) {
+            return {
+                type: 'equals',
+                value: value,
+            };
+        }
 
-            return null;
-        },
+        return null;
+    },
 
-        /**
-         * Fetch a search type from DOM.
-         *
-         * @return {string}
-         */
-        fetchSearchType: function () {
-            return this.$el.find('select.search-type').val();
-        },
-    });
+    /**
+     * Fetch a search type from DOM.
+     *
+     * @return {string}
+     */
+    fetchSearchType: function () {
+        return this.$el.find('select.search-type').val();
+    },
 });
diff --git a/client/src/views/fields/bool.js b/client/src/views/fields/bool.js
index 611fb77b75..f430e9629e 100644
--- a/client/src/views/fields/bool.js
+++ b/client/src/views/fields/bool.js
@@ -26,96 +26,97 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/bool', ['views/fields/base', 'ui/select'], function (Dep, /** module:ui/select*/Select) {
+/** @module views/fields/bool */
 
-    /**
-     * A boolean field (checkbox).
-     *
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/bool
-     */
-    return Dep.extend(/** @lends module:views/fields/bool.Class# */{
+import Dep from 'views/fields/base';
+import Select from 'ui/select';
 
-        type: 'bool',
+/**
+ * A boolean field (checkbox).
+ *
+ * @class
+ * @name Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        listTemplate: 'fields/bool/list',
-        detailTemplate: 'fields/bool/detail',
-        editTemplate: 'fields/bool/edit',
-        searchTemplate: 'fields/bool/search',
+    type: 'bool',
 
-        validations: [],
+    listTemplate: 'fields/bool/list',
+    detailTemplate: 'fields/bool/detail',
+    editTemplate: 'fields/bool/edit',
+    searchTemplate: 'fields/bool/search',
 
-        initialSearchIsNotIdle: true,
+    validations: [],
 
-        data: function () {
-            let data = Dep.prototype.data.call(this);
+    initialSearchIsNotIdle: true,
 
-            data.valueIsSet = this.model.has(this.name);
+    data: function () {
+        let data = Dep.prototype.data.call(this);
 
-            return data;
-        },
+        data.valueIsSet = this.model.has(this.name);
 
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
+        return data;
+    },
 
-            if (this.mode === this.MODE_SEARCH) {
-                this.$element.on('change', () => {
-                    this.trigger('change');
-                });
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
 
-                Select.init(this.$element);
-            }
-        },
+        if (this.mode === this.MODE_SEARCH) {
+            this.$element.on('change', () => {
+                this.trigger('change');
+            });
 
-        fetch: function () {
-            let value = this.$element.get(0).checked;
+            Select.init(this.$element);
+        }
+    },
 
-            let data = {};
+    fetch: function () {
+        let value = this.$element.get(0).checked;
 
-            data[this.name] = value;
+        let data = {};
 
-            return data;
-        },
+        data[this.name] = value;
 
-        fetchSearch: function () {
-            let type = this.$element.val();
+        return data;
+    },
 
-            if (!type) {
-                return;
-            }
+    fetchSearch: function () {
+        let type = this.$element.val();
 
-            if (type === 'any') {
-                return {
-                    type: 'or',
-                    value: [
-                        {
-                            type: 'isTrue',
-                            attribute: this.name,
-
-                        },
-                        {
-                            type: 'isFalse',
-                            attribute: this.name,
-                        },
-                    ],
-                    data: {
-                        type: type,
-                    },
-                };
-            }
+        if (!type) {
+            return;
+        }
 
+        if (type === 'any') {
             return {
-                type: type,
+                type: 'or',
+                value: [
+                    {
+                        type: 'isTrue',
+                        attribute: this.name,
+
+                    },
+                    {
+                        type: 'isFalse',
+                        attribute: this.name,
+                    },
+                ],
                 data: {
                     type: type,
                 },
             };
-        },
+        }
 
-        getSearchType: function () {
-            return this.getSearchParamsData().type || this.searchParams.type || 'isTrue';
-        },
-    });
+        return {
+            type: type,
+            data: {
+                type: type,
+            },
+        };
+    },
+
+    getSearchType: function () {
+        return this.getSearchParamsData().type || this.searchParams.type || 'isTrue';
+    },
 });
diff --git a/client/src/views/fields/checklist.js b/client/src/views/fields/checklist.js
index a00f49dec6..9a80b878c5 100644
--- a/client/src/views/fields/checklist.js
+++ b/client/src/views/fields/checklist.js
@@ -26,132 +26,134 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/checklist', ['views/fields/array'], function (Dep) {
+/** @module views/fields/checklist */
 
-    /**
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/checklist
-     */
-    return Dep.extend(/** @lends module:views/fields/checklist.Class# */{
+import Dep from 'views/fields/array';
 
-        type: 'checklist',
+/**
+ * @class Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        listTemplate: 'fields/array/list',
+    type: 'checklist',
 
-        detailTemplate: 'fields/checklist/detail',
+    listTemplate: 'fields/array/list',
+    detailTemplate: 'fields/checklist/detail',
+    editTemplate: 'fields/checklist/edit',
 
-        editTemplate: 'fields/checklist/edit',
+    isInversed: false,
 
-        isInversed: false,
+    events: {},
 
-        events: {},
+    data: function () {
+        return {
+            optionDataList: this.getOptionDataList(),
+            ...Dep.prototype.data.call(this),
+        };
+    },
 
-        data: function () {
-            return _.extend({
-                optionDataList: this.getOptionDataList(),
-            }, Dep.prototype.data.call(this));
-        },
+    setup: function () {
+        Dep.prototype.setup.call(this);
 
-        setup: function () {
-            Dep.prototype.setup.call(this);
+        this.params.options = this.params.options || [];
 
-            this.params.options = this.params.options || [];
+        this.isInversed = this.params.isInversed || this.options.isInversed || this.isInversed;
+    },
 
-            this.isInversed = this.params.isInversed || this.options.isInversed || this.isInversed;
-        },
+    afterRender: function () {
+        if (this.isSearchMode()) {
+            this.renderSearch();
+        }
 
-        afterRender: function () {
-            if (this.isSearchMode()) {
-                this.renderSearch();
-            }
-
-            if (this.isEditMode()) {
-                this.$el.find('input').on('change', () => {
-                    this.trigger('change');
-                });
-            }
-        },
-
-        getOptionDataList: function () {
-            let valueList = this.model.get(this.name) || [];
-            let list = [];
-
-            this.params.options.forEach((item) => {
-                let isChecked = ~valueList.indexOf(item);
-                let dataName = item;
-                let id = this.cid + '-' + Espo.Utils.camelCaseToHyphen(item.replace(/\s+/g, '-'));
-
-                if (this.isInversed) {
-                    isChecked = !isChecked;
-                }
-
-                list.push({
-                    name: item,
-                    isChecked: isChecked,
-                    dataName: dataName,
-                    id: id,
-                    label: this.translatedOptions[item] || item,
-                });
+        if (this.isEditMode()) {
+            this.$el.find('input').on('change', () => {
+                this.trigger('change');
             });
+        }
+    },
 
-            return list;
-        },
+    getOptionDataList: function () {
+        let valueList = this.model.get(this.name) || [];
+        let list = [];
 
-        fetch: function () {
-            let list = [];
+        this.params.options.forEach((item) => {
+            let isChecked = ~valueList.indexOf(item);
+            let dataName = item;
+            let id = this.cid + '-' + Espo.Utils.camelCaseToHyphen(item.replace(/\s+/g, '-'));
 
-            this.params.options.forEach(item => {
-                let $item = this.$el.find('input[data-name="' + item + '"]');
-                let isChecked = $item.get(0) && $item.get(0).checked;
+            if (this.isInversed) {
+                isChecked = !isChecked;
+            }
 
-                if (this.isInversed) {
-                    isChecked = !isChecked;
-                }
-
-                if (isChecked) {
-                    list.push(item);
-                }
+            list.push({
+                name: item,
+                isChecked: isChecked,
+                dataName: dataName,
+                id: id,
+                label: this.translatedOptions[item] || item,
             });
+        });
 
-            let data = {};
+        return list;
+    },
 
-            data[this.name] = list;
+    fetch: function () {
+        let list = [];
 
-            return data;
-        },
+        this.params.options.forEach(item => {
+            let $item = this.$el.find('input[data-name="' + item + '"]');
+            let isChecked = $item.get(0) && $item.get(0).checked;
 
-        validateRequired: function () {
-            if (this.isRequired()) {
-                let value = this.model.get(this.name);
-
-                if (!value || value.length === 0) {
-                    var msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
-
-                    this.showValidationMessage(msg, '.checklist-item-container:last-child input');
-
-                    return true;
-                }
+            if (this.isInversed) {
+                isChecked = !isChecked;
             }
-        },
 
-        validateMaxCount: function () {
-            if (this.params.maxCount) {
-                let itemList = this.model.get(this.name) || [];
-
-                if (itemList.length > this.params.maxCount) {
-                    let msg =
-                        this.translate('fieldExceedsMaxCount', 'messages')
-                            .replace('{field}', this.getLabelText())
-                            .replace('{maxCount}', this.params.maxCount.toString());
-
-                    this.showValidationMessage(msg, '.checklist-item-container:last-child input');
-
-                    return true;
-                }
+            if (isChecked) {
+                list.push(item);
             }
-        },
-    });
+        });
+
+        let data = {};
+
+        data[this.name] = list;
+
+        return data;
+    },
+
+    validateRequired: function () {
+        if (!this.isRequired()) {
+            return;
+        }
+
+        let value = this.model.get(this.name);
+
+        if (!value || value.length === 0) {
+            var msg = this.translate('fieldIsRequired', 'messages')
+                .replace('{field}', this.getLabelText());
+
+            this.showValidationMessage(msg, '.checklist-item-container:last-child input');
+
+            return true;
+        }
+    },
+
+    validateMaxCount: function () {
+        if (!this.params.maxCount) {
+            return;
+        }
+
+        let itemList = this.model.get(this.name) || [];
+
+        if (itemList.length > this.params.maxCount) {
+            let msg =
+                this.translate('fieldExceedsMaxCount', 'messages')
+                    .replace('{field}', this.getLabelText())
+                    .replace('{maxCount}', this.params.maxCount.toString());
+
+            this.showValidationMessage(msg, '.checklist-item-container:last-child input');
+
+            return true;
+        }
+    },
 });
diff --git a/client/src/views/fields/currency-converted.js b/client/src/views/fields/currency-converted.js
index d78d4bcadb..48f57545e6 100644
--- a/client/src/views/fields/currency-converted.js
+++ b/client/src/views/fields/currency-converted.js
@@ -26,26 +26,23 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/currency-converted', ['views/fields/currency'], function (Dep) {
+import Dep from 'views/fields/currency';
 
-    /**
-     * @class
-     * @name Class
-     * @extends module:views/fields/currency.Class
-     * @memberOf module:views/fields/currency-converted
-     */
-    return Dep.extend(/** @lends module:views/fields/currency-converted.Class# */{
+/**
+ * @class Class
+ * @extends module:views/fields/currency
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        data: function () {
-            var currencyValue = this.getConfig().get('defaultCurrency');
+    data: function () {
+        let currencyValue = this.getConfig().get('defaultCurrency');
 
-            var data = Dep.prototype.data.call(this);
+        let data = Dep.prototype.data.call(this);
 
-            data.currencyValue = currencyValue;
-            data.currencySymbol = this.getMetadata()
-                .get(['app', 'currency', 'symbolMap', currencyValue]) || '';
+        data.currencyValue = currencyValue;
+        data.currencySymbol = this.getMetadata()
+            .get(['app', 'currency', 'symbolMap', currencyValue]) || '';
 
-            return data;
-        },
-    });
+        return data;
+    },
 });
diff --git a/client/src/views/fields/currency.js b/client/src/views/fields/currency.js
index ab72aff189..998c1e618b 100644
--- a/client/src/views/fields/currency.js
+++ b/client/src/views/fields/currency.js
@@ -26,253 +26,253 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/currency', ['views/fields/float', 'ui/select'],
-function (Dep, /** module:ui/select*/Select) {
+/** @module views/fields/currency */
+
+import Dep from 'views/fields/float';
+import Select from 'ui/select';
+
+/**
+ * @class
+ * @name Class
+ * @extends module:views/fields/float
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    type: 'currency',
+
+    editTemplate: 'fields/currency/edit',
+    detailTemplate: 'fields/currency/detail',
+    detailTemplate1: 'fields/currency/detail-1',
+    detailTemplate2: 'fields/currency/detail-2',
+    detailTemplate3: 'fields/currency/detail-3',
+    listTemplate: 'fields/currency/list',
+    listTemplate1: 'fields/currency/list-1',
+    listTemplate2: 'fields/currency/list-2',
+    listTemplate3: 'fields/currency/list-3',
+    detailTemplateNoCurrency: 'fields/currency/detail-no-currency',
+
+    maxDecimalPlaces: 3,
+
+    validations: [
+        'required',
+        'number',
+        'range',
+    ],
 
     /**
-     * @class
-     * @name Class
-     * @extends module:views/fields/float.Class
-     * @memberOf module:views/fields/currency
+     * @inheritDoc
      */
-    return Dep.extend(/** @lends module:views/fields/currency.Class# */{
+    data: function () {
+        let currencyValue = this.model.get(this.currencyFieldName) ||
+            this.getPreferences().get('defaultCurrency') ||
+            this.getConfig().get('defaultCurrency');
 
-        type: 'currency',
+        let multipleCurrencies = !this.isSingleCurrency || currencyValue !== this.defaultCurrency;
 
-        editTemplate: 'fields/currency/edit',
-        detailTemplate: 'fields/currency/detail',
-        detailTemplate1: 'fields/currency/detail-1',
-        detailTemplate2: 'fields/currency/detail-2',
-        detailTemplate3: 'fields/currency/detail-3',
-        listTemplate: 'fields/currency/list',
-        listTemplate1: 'fields/currency/list-1',
-        listTemplate2: 'fields/currency/list-2',
-        listTemplate3: 'fields/currency/list-3',
-        detailTemplateNoCurrency: 'fields/currency/detail-no-currency',
+        return _.extend({
+            currencyFieldName: this.currencyFieldName,
+            currencyValue: currencyValue,
+            currencyOptions: this.currencyOptions,
+            currencyList: this.currencyList,
+            currencySymbol: this.getMetadata().get(['app', 'currency', 'symbolMap', currencyValue]) || '',
+            multipleCurrencies: multipleCurrencies,
+            defaultCurrency: this.defaultCurrency,
+        }, Dep.prototype.data.call(this));
+    },
 
-        maxDecimalPlaces: 3,
+    /**
+     * @inheritDoc
+     */
+    setup: function () {
+        Dep.prototype.setup.call(this);
 
-        validations: [
-            'required',
-            'number',
-            'range',
-        ],
+        this.currencyFieldName = this.name + 'Currency';
+        this.defaultCurrency = this.getConfig().get('defaultCurrency');
+        this.currencyList = this.getConfig().get('currencyList') || [this.defaultCurrency];
+        this.decimalPlaces = this.getConfig().get('currencyDecimalPlaces');
 
-        /**
-         * @inheritDoc
-         */
-        data: function () {
-            let currencyValue = this.model.get(this.currencyFieldName) ||
-                this.getPreferences().get('defaultCurrency') ||
-                this.getConfig().get('defaultCurrency');
+        if (this.params.onlyDefaultCurrency) {
+            this.currencyList = [this.defaultCurrency];
+        }
 
-            let multipleCurrencies = !this.isSingleCurrency || currencyValue !== this.defaultCurrency;
+        this.isSingleCurrency = this.currencyList.length <= 1;
 
-            return _.extend({
-                currencyFieldName: this.currencyFieldName,
-                currencyValue: currencyValue,
-                currencyOptions: this.currencyOptions,
-                currencyList: this.currencyList,
-                currencySymbol: this.getMetadata().get(['app', 'currency', 'symbolMap', currencyValue]) || '',
-                multipleCurrencies: multipleCurrencies,
-                defaultCurrency: this.defaultCurrency,
-            }, Dep.prototype.data.call(this));
-        },
+        let currencyValue = this.currencyValue = this.model.get(this.currencyFieldName) ||
+            this.defaultCurrency;
 
-        /**
-         * @inheritDoc
-         */
-        setup: function () {
-            Dep.prototype.setup.call(this);
+        if (!~this.currencyList.indexOf(currencyValue)) {
+            this.currencyList = Espo.Utils.clone(this.currencyList);
+            this.currencyList.push(currencyValue);
+        }
+    },
 
-            this.currencyFieldName = this.name + 'Currency';
-            this.defaultCurrency = this.getConfig().get('defaultCurrency');
-            this.currencyList = this.getConfig().get('currencyList') || [this.defaultCurrency];
-            this.decimalPlaces = this.getConfig().get('currencyDecimalPlaces');
+    /**
+     * @inheritDoc
+     */
+    setupAutoNumericOptions: function () {
+        this.autoNumericOptions = {
+            digitGroupSeparator: this.thousandSeparator || '',
+            decimalCharacter: this.decimalMark,
+            modifyValueOnWheel: false,
+            selectOnFocus: false,
+            decimalPlaces: this.decimalPlaces,
+            allowDecimalPadding: true,
+            showWarnings: false,
+            formulaMode: true,
+        };
 
-            if (this.params.onlyDefaultCurrency) {
-                this.currencyList = [this.defaultCurrency];
+        if (this.decimalPlaces === null) {
+            this.autoNumericOptions.decimalPlaces = this.decimalPlacesRawValue;
+            this.autoNumericOptions.decimalPlacesRawValue = this.decimalPlacesRawValue;
+            this.autoNumericOptions.allowDecimalPadding = false;
+        }
+    },
+
+    getCurrencyFormat: function () {
+        return this.getConfig().get('currencyFormat') || 1;
+    },
+
+    _getTemplateName: function () {
+        if (this.mode === this.MODE_DETAIL || this.mode === this.MODE_LIST) {
+            var prop;
+
+            if (this.mode === this.MODE_LIST) {
+                prop = 'listTemplate' + this.getCurrencyFormat().toString();
+            }
+            else {
+                prop = 'detailTemplate' + this.getCurrencyFormat().toString();
             }
 
-            this.isSingleCurrency = this.currencyList.length <= 1;
-
-            let currencyValue = this.currencyValue = this.model.get(this.currencyFieldName) ||
-                this.defaultCurrency;
-
-            if (!~this.currencyList.indexOf(currencyValue)) {
-                this.currencyList = Espo.Utils.clone(this.currencyList);
-                this.currencyList.push(currencyValue);
-            }
-        },
-
-        /**
-         * @inheritDoc
-         */
-        setupAutoNumericOptions: function () {
-            this.autoNumericOptions = {
-                digitGroupSeparator: this.thousandSeparator || '',
-                decimalCharacter: this.decimalMark,
-                modifyValueOnWheel: false,
-                selectOnFocus: false,
-                decimalPlaces: this.decimalPlaces,
-                allowDecimalPadding: true,
-                showWarnings: false,
-                formulaMode: true,
-            };
-
-            if (this.decimalPlaces === null) {
-                this.autoNumericOptions.decimalPlaces = this.decimalPlacesRawValue;
-                this.autoNumericOptions.decimalPlacesRawValue = this.decimalPlacesRawValue;
-                this.autoNumericOptions.allowDecimalPadding = false;
-            }
-        },
-
-        getCurrencyFormat: function () {
-            return this.getConfig().get('currencyFormat') || 1;
-        },
-
-        _getTemplateName: function () {
-            if (this.mode === this.MODE_DETAIL || this.mode === this.MODE_LIST) {
-                var prop;
-
-                if (this.mode === this.MODE_LIST) {
-                    prop = 'listTemplate' + this.getCurrencyFormat().toString();
-                }
-                else {
-                    prop = 'detailTemplate' + this.getCurrencyFormat().toString();
-                }
-
-                if (this.options.hideCurrency) {
-                    prop = 'detailTemplateNoCurrency';
-                }
-
-                if (prop in this) {
-                    return this[prop];
-                }
+            if (this.options.hideCurrency) {
+                prop = 'detailTemplateNoCurrency';
             }
 
-            return Dep.prototype._getTemplateName.call(this);
-        },
+            if (prop in this) {
+                return this[prop];
+            }
+        }
 
-        formatNumber: function (value) {
-            return this.formatNumberDetail(value);
-        },
+        return Dep.prototype._getTemplateName.call(this);
+    },
 
-        formatNumberDetail: function (value) {
-            if (value !== null) {
-                let currencyDecimalPlaces = this.decimalPlaces;
+    formatNumber: function (value) {
+        return this.formatNumberDetail(value);
+    },
 
-                if (currencyDecimalPlaces === 0) {
-                    value = Math.round(value);
-                }
-                else if (currencyDecimalPlaces) {
-                    value = Math.round(
-                        value * Math.pow(10, currencyDecimalPlaces)) / (Math.pow(10, currencyDecimalPlaces)
-                    );
-                }
-                else {
-                    value = Math.round(
-                        value * Math.pow(10, this.maxDecimalPlaces)) / (Math.pow(10, this.maxDecimalPlaces)
-                    );
+    formatNumberDetail: function (value) {
+        if (value !== null) {
+            let currencyDecimalPlaces = this.decimalPlaces;
+
+            if (currencyDecimalPlaces === 0) {
+                value = Math.round(value);
+            }
+            else if (currencyDecimalPlaces) {
+                value = Math.round(
+                    value * Math.pow(10, currencyDecimalPlaces)) / (Math.pow(10, currencyDecimalPlaces)
+                );
+            }
+            else {
+                value = Math.round(
+                    value * Math.pow(10, this.maxDecimalPlaces)) / (Math.pow(10, this.maxDecimalPlaces)
+                );
+            }
+
+            let parts = value.toString().split(".");
+
+            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, this.thousandSeparator);
+
+            if (currencyDecimalPlaces === 0) {
+                return parts[0];
+            }
+            else if (currencyDecimalPlaces) {
+                let decimalPartLength = 0;
+
+                if (parts.length > 1) {
+                    decimalPartLength = parts[1].length;
+                } else {
+                    parts[1] = '';
                 }
 
-                let parts = value.toString().split(".");
+                if (currencyDecimalPlaces && decimalPartLength < currencyDecimalPlaces) {
+                    let limit = currencyDecimalPlaces - decimalPartLength;
 
-                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, this.thousandSeparator);
-
-                if (currencyDecimalPlaces === 0) {
-                    return parts[0];
-                }
-                else if (currencyDecimalPlaces) {
-                    let decimalPartLength = 0;
-
-                    if (parts.length > 1) {
-                        decimalPartLength = parts[1].length;
-                    } else {
-                        parts[1] = '';
-                    }
-
-                    if (currencyDecimalPlaces && decimalPartLength < currencyDecimalPlaces) {
-                        let limit = currencyDecimalPlaces - decimalPartLength;
-
-                        for (let i = 0; i < limit; i++) {
-                            parts[1] += '0';
-                        }
+                    for (let i = 0; i < limit; i++) {
+                        parts[1] += '0';
                     }
                 }
-
-                return parts.join(this.decimalMark);
             }
 
-            return '';
-        },
+            return parts.join(this.decimalMark);
+        }
 
-        parse: function (value) {
-            value = (value !== '') ? value : null;
+        return '';
+    },
 
-            if (value === null) {
-                return null;
-            }
+    parse: function (value) {
+        value = (value !== '') ? value : null;
 
-            value = value.split(this.thousandSeparator).join('');
-            value = value.split(this.decimalMark).join('.');
+        if (value === null) {
+            return null;
+        }
 
-            if (!this.params.decimal) {
-                value = parseFloat(value);
-            }
+        value = value.split(this.thousandSeparator).join('');
+        value = value.split(this.decimalMark).join('.');
 
-            return value;
-        },
+        if (!this.params.decimal) {
+            value = parseFloat(value);
+        }
 
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
+        return value;
+    },
 
-            if (this.mode === this.MODE_EDIT) {
-                this.$currency = this.$el.find('[data-name="' + this.currencyFieldName + '"]');
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
 
-                this.$currency.on('change', () => {
-                    this.model.set(this.currencyFieldName, this.$currency.val(), {ui: true});
-                });
+        if (this.mode === this.MODE_EDIT) {
+            this.$currency = this.$el.find('[data-name="' + this.currencyFieldName + '"]');
 
-                Select.init(this.$currency);
-            }
-        },
+            this.$currency.on('change', () => {
+                this.model.set(this.currencyFieldName, this.$currency.val(), {ui: true});
+            });
 
-        validateNumber: function () {
-            if (!this.params.decimal) {
-                return this.validateFloat();
-            }
+            Select.init(this.$currency);
+        }
+    },
 
-            let value = this.model.get(this.name);
+    validateNumber: function () {
+        if (!this.params.decimal) {
+            return this.validateFloat();
+        }
 
-            if (Number.isNaN(Number(value))) {
-                let msg = this.translate('fieldShouldBeNumber', 'messages').replace('{field}', this.getLabelText());
+        let value = this.model.get(this.name);
 
-                this.showValidationMessage(msg);
+        if (Number.isNaN(Number(value))) {
+            let msg = this.translate('fieldShouldBeNumber', 'messages').replace('{field}', this.getLabelText());
 
-                return true;
-            }
-        },
+            this.showValidationMessage(msg);
 
-        fetch: function () {
-            let value = this.$element.val().trim();
+            return true;
+        }
+    },
 
-            value = this.parse(value);
+    fetch: function () {
+        let value = this.$element.val().trim();
 
-            let data = {};
+        value = this.parse(value);
 
-            let currencyValue = this.$currency.length ?
-                this.$currency.val() :
-                this.defaultCurrency;
+        let data = {};
 
-            if (value === null) {
-                currencyValue = null;
-            }
+        let currencyValue = this.$currency.length ?
+            this.$currency.val() :
+            this.defaultCurrency;
 
-            data[this.name] = value;
-            data[this.currencyFieldName] = currencyValue;
+        if (value === null) {
+            currencyValue = null;
+        }
 
-            return data;
-        },
-    });
+        data[this.name] = value;
+        data[this.currencyFieldName] = currencyValue;
+
+        return data;
+    },
 });
diff --git a/client/src/views/fields/date.js b/client/src/views/fields/date.js
index 429c427295..e6cfe06dd1 100644
--- a/client/src/views/fields/date.js
+++ b/client/src/views/fields/date.js
@@ -26,443 +26,446 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/date', ['views/fields/base'], function (Dep) {
+/** @module views/fields/date */
 
-    /**
-     * A date field.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/date
-     */
-    return Dep.extend(/** @lends module:views/fields/date.Class# */{
+import Dep from 'views/fields/base';
+import moment from 'lib!moment';
 
-        type: 'date',
+/**
+ * A date field.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        listTemplate: 'fields/date/list',
+    type: 'date',
 
-        listLinkTemplate: 'fields/date/list-link',
+    listTemplate: 'fields/date/list',
+    listLinkTemplate: 'fields/date/list-link',
+    detailTemplate: 'fields/date/detail',
+    editTemplate: 'fields/date/edit',
+    searchTemplate: 'fields/date/search',
 
-        detailTemplate: 'fields/date/detail',
+    validations: ['required', 'date', 'after', 'before'],
 
-        editTemplate: 'fields/date/edit',
+    searchTypeList: [
+        'lastSevenDays', 'ever', 'isEmpty', 'currentMonth', 'lastMonth', 'nextMonth', 'currentQuarter',
+        'lastQuarter', 'currentYear', 'lastYear', 'today', 'past', 'future', 'lastXDays', 'nextXDays',
+        'olderThanXDays', 'afterXDays', 'on', 'after', 'before', 'between',
+    ],
 
-        searchTemplate: 'fields/date/search',
+    initialSearchIsNotIdle: true,
 
-        validations: ['required', 'date', 'after', 'before'],
+    setup: function () {
+        Dep.prototype.setup.call(this);
 
-        searchTypeList: [
-            'lastSevenDays', 'ever', 'isEmpty', 'currentMonth', 'lastMonth', 'nextMonth', 'currentQuarter',
-            'lastQuarter', 'currentYear', 'lastYear', 'today', 'past', 'future', 'lastXDays', 'nextXDays',
-            'olderThanXDays', 'afterXDays', 'on', 'after', 'before', 'between',
-        ],
+        if (this.getConfig().get('fiscalYearShift')) {
+            this.searchTypeList = Espo.Utils.clone(this.searchTypeList);
 
-        initialSearchIsNotIdle: true,
-
-        setup: function () {
-            Dep.prototype.setup.call(this);
-
-            if (this.getConfig().get('fiscalYearShift')) {
-                this.searchTypeList = Espo.Utils.clone(this.searchTypeList);
-
-                if (this.getConfig().get('fiscalYearShift') % 3 !== 0) {
-                    this.searchTypeList.push('currentFiscalQuarter');
-                    this.searchTypeList.push('lastFiscalQuarter');
-                }
-
-                this.searchTypeList.push('currentFiscalYear');
-                this.searchTypeList.push('lastFiscalYear');
-            }
-        },
-
-        data: function () {
-            var data = Dep.prototype.data.call(this);
-
-            data.dateValue = this.getDateStringValue();
-
-            data.isNone = data.dateValue === null;
-
-            if (data.dateValue === -1) {
-                data.dateValue = null;
-                data.isLoading = true;
+            if (this.getConfig().get('fiscalYearShift') % 3 !== 0) {
+                this.searchTypeList.push('currentFiscalQuarter');
+                this.searchTypeList.push('lastFiscalQuarter');
             }
 
-            if (this.isSearchMode()) {
-                let value = this.getSearchParamsData().value || this.searchParams.dateValue;
-                let valueTo = this.getSearchParamsData().valueTo || this.searchParams.dateValueTo;
+            this.searchTypeList.push('currentFiscalYear');
+            this.searchTypeList.push('lastFiscalYear');
+        }
+    },
 
-                data.dateValue = this.getDateTime().toDisplayDate(value);
-                data.dateValueTo = this.getDateTime().toDisplayDate(valueTo);
+    data: function () {
+        let data = Dep.prototype.data.call(this);
 
-                if (~['lastXDays', 'nextXDays', 'olderThanXDays', 'afterXDays']
-                        .indexOf(this.getSearchType())
-                ) {
-                    data.number = this.searchParams.value;
-                }
+        data.dateValue = this.getDateStringValue();
+
+        data.isNone = data.dateValue === null;
+
+        if (data.dateValue === -1) {
+            data.dateValue = null;
+            data.isLoading = true;
+        }
+
+        if (this.isSearchMode()) {
+            let value = this.getSearchParamsData().value || this.searchParams.dateValue;
+            let valueTo = this.getSearchParamsData().valueTo || this.searchParams.dateValueTo;
+
+            data.dateValue = this.getDateTime().toDisplayDate(value);
+            data.dateValueTo = this.getDateTime().toDisplayDate(valueTo);
+
+            if (~['lastXDays', 'nextXDays', 'olderThanXDays', 'afterXDays']
+                    .indexOf(this.getSearchType())
+            ) {
+                data.number = this.searchParams.value;
             }
+        }
 
-            return data;
-        },
+        return data;
+    },
 
-        setupSearch: function () {
-            this.events = _.extend({
-                'change select.search-type': (e) => {
-                    let type = $(e.currentTarget).val();
+    setupSearch: function () {
+        this.events = _.extend({
+            'change select.search-type': (e) => {
+                let type = $(e.currentTarget).val();
 
-                    this.handleSearchType(type);
-                },
-            }, this.events || {});
-        },
-
-        stringifyDateValue: function (value) {
-            if (!value) {
-                if (
-                    this.mode === this.MODE_EDIT ||
-                    this.mode === this.MODE_SEARCH ||
-                    this.mode === this.MODE_LIST ||
-                    this.mode === this.MODE_LIST_LINK
-                ) {
-                    return '';
-                }
-
-                return null;
-            }
+                this.handleSearchType(type);
+            },
+        }, this.events || {});
+    },
 
+    stringifyDateValue: function (value) {
+        if (!value) {
             if (
+                this.mode === this.MODE_EDIT ||
+                this.mode === this.MODE_SEARCH ||
                 this.mode === this.MODE_LIST ||
-                this.mode === this.MODE_DETAIL ||
                 this.mode === this.MODE_LIST_LINK
             ) {
-                return this.convertDateValueForDetail(value);
+                return '';
             }
 
+            return null;
+        }
+
+        if (
+            this.mode === this.MODE_LIST ||
+            this.mode === this.MODE_DETAIL ||
+            this.mode === this.MODE_LIST_LINK
+        ) {
+            return this.convertDateValueForDetail(value);
+        }
+
+        return this.getDateTime().toDisplayDate(value);
+    },
+
+    convertDateValueForDetail: function (value) {
+        if (this.getConfig().get('readableDateFormatDisabled') || this.params.useNumericFormat) {
             return this.getDateTime().toDisplayDate(value);
-        },
+        }
 
-        convertDateValueForDetail: function (value) {
-            if (this.getConfig().get('readableDateFormatDisabled') || this.params.useNumericFormat) {
-                return this.getDateTime().toDisplayDate(value);
-            }
+        let timezone = this.getDateTime().getTimeZone();
+        let internalDateTimeFormat = this.getDateTime().internalDateTimeFormat;
+        let readableFormat = this.getDateTime().getReadableDateFormat();
+        let valueWithTime = value + ' 00:00:00';
 
-            let timezone = this.getDateTime().getTimeZone();
-            let internalDateTimeFormat = this.getDateTime().internalDateTimeFormat;
-            let readableFormat = this.getDateTime().getReadableDateFormat();
-            let valueWithTime = value + ' 00:00:00';
+        let today = moment().tz(timezone).startOf('day');
+        let dateTime = moment.tz(valueWithTime, internalDateTimeFormat, timezone);
 
-            let today = moment().tz(timezone).startOf('day');
-            let dateTime = moment.tz(valueWithTime, internalDateTimeFormat, timezone);
+        var temp = today.clone();
 
-            var temp = today.clone();
+        var ranges = {
+            'today': [temp.unix(), temp.add(1, 'days').unix()],
+            'tomorrow': [temp.unix(), temp.add(1, 'days').unix()],
+            'yesterday': [temp.add(-3, 'days').unix(), temp.add(1, 'days').unix()],
+        };
 
-            var ranges = {
-                'today': [temp.unix(), temp.add(1, 'days').unix()],
-                'tomorrow': [temp.unix(), temp.add(1, 'days').unix()],
-                'yesterday': [temp.add(-3, 'days').unix(), temp.add(1, 'days').unix()],
+        if (dateTime.unix() >= ranges['today'][0] && dateTime.unix() < ranges['today'][1]) {
+            return this.translate('Today');
+        }
+
+        if (dateTime.unix() >= ranges['tomorrow'][0] && dateTime.unix() < ranges['tomorrow'][1]) {
+            return this.translate('Tomorrow');
+        }
+
+        if (dateTime.unix() >= ranges['yesterday'][0] && dateTime.unix() < ranges['yesterday'][1]) {
+            return this.translate('Yesterday');
+        }
+
+        // Need to use UTC, otherwise there's a DST issue with old dates.
+        dateTime = moment.utc(valueWithTime, internalDateTimeFormat);
+
+        if (dateTime.format('YYYY') === today.format('YYYY')) {
+            return dateTime.format(readableFormat);
+        }
+
+        return dateTime.format(readableFormat + ', YYYY');
+    },
+
+    getDateStringValue: function () {
+        if (this.mode === this.MODE_DETAIL && !this.model.has(this.name)) {
+            return -1;
+        }
+
+        var value = this.model.get(this.name);
+
+        return this.stringifyDateValue(value);
+    },
+
+    afterRender: function () {
+        if (this.mode === this.MODE_EDIT || this.mode === this.MODE_SEARCH) {
+            this.$element = this.$el.find('[data-name="' + this.name + '"]');
+
+            let wait = false;
+
+            // @todo Introduce ui/date-picker.
+
+            this.$element.on('change', (e) => {
+                if (!wait) {
+                    this.trigger('change');
+                    wait = true;
+                    setTimeout(() => wait = false, 100);
+                }
+
+                if (e.isTrigger) {
+                    if (document.activeElement !== this.$element.get(0)) {
+                        this.$element.focus();
+                    }
+                }
+            });
+
+            this.$element.on('click', () => {
+                this.$element.datepicker('show');
+            });
+
+            let options = {
+                format: this.getDateTime().dateFormat.toLowerCase(),
+                weekStart: this.getDateTime().weekStart,
+                autoclose: true,
+                todayHighlight: true,
+                keyboardNavigation: true,
+                todayBtn: this.getConfig().get('datepickerTodayButton') || false,
+                orientation: 'bottom auto',
+                templates: {
+                    leftArrow: '<span class="fas fa-chevron-left fa-sm"></span>',
+                    rightArrow: '<span class="fas fa-chevron-right fa-sm"></span>',
+                },
+                container: this.$el.closest('.modal-body').length ?
+                    this.$el.closest('.modal-body') :
+                    'body',
             };
 
-            if (dateTime.unix() >= ranges['today'][0] && dateTime.unix() < ranges['today'][1]) {
-                return this.translate('Today');
+            let language = this.getConfig().get('language');
+
+            if (!(language in $.fn.datepicker.dates)) {
+                $.fn.datepicker.dates[language] = {
+                    days: this.translate('dayNames', 'lists'),
+                    daysShort: this.translate('dayNamesShort', 'lists'),
+                    daysMin: this.translate('dayNamesMin', 'lists'),
+                    months: this.translate('monthNames', 'lists'),
+                    monthsShort: this.translate('monthNamesShort', 'lists'),
+                    today: this.translate('Today'),
+                    clear: this.translate('Clear'),
+                };
             }
 
-            if (dateTime.unix() >= ranges['tomorrow'][0] && dateTime.unix() < ranges['tomorrow'][1]) {
-                return this.translate('Tomorrow');
-            }
+            options.language = language;
 
-            if (dateTime.unix() >= ranges['yesterday'][0] && dateTime.unix() < ranges['yesterday'][1]) {
-                return this.translate('Yesterday');
-            }
+            this.$element.datepicker(options);
 
-            // Need to use UTC, otherwise there's a DST issue with old dates.
-            dateTime = moment.utc(valueWithTime, internalDateTimeFormat);
+            if (this.mode === this.MODE_SEARCH) {
+                let $elAdd = this.$el.find('input.additional');
 
-            if (dateTime.format('YYYY') === today.format('YYYY')) {
-                return dateTime.format(readableFormat);
-            }
+                $elAdd.datepicker(options);
 
-            return dateTime.format(readableFormat + ', YYYY');
-        },
+                $elAdd.parent().find('button.date-picker-btn').on('click', () => {
+                    $elAdd.datepicker('show');
+                });
 
-        getDateStringValue: function () {
-            if (this.mode === this.MODE_DETAIL && !this.model.has(this.name)) {
-                return -1;
-            }
+                this.$el.find('select.search-type').on('change', () => {
+                    this.trigger('change');
+                });
 
-            var value = this.model.get(this.name);
-
-            return this.stringifyDateValue(value);
-        },
-
-        afterRender: function () {
-            if (this.mode === this.MODE_EDIT || this.mode === this.MODE_SEARCH) {
-                this.$element = this.$el.find('[data-name="' + this.name + '"]');
-
-                let wait = false;
-
-                // @todo Introduce ui/date-picker.
-
-                this.$element.on('change', (e) => {
-                    if (!wait) {
-                        this.trigger('change');
-                        wait = true;
-                        setTimeout(() => wait = false, 100);
-                    }
+                $elAdd.on('change', e => {
+                    this.trigger('change');
 
                     if (e.isTrigger) {
-                        if (document.activeElement !== this.$element.get(0)) {
-                            this.$element.focus();
+                        if (document.activeElement !== $elAdd.get(0)) {
+                            $elAdd.focus();
                         }
                     }
                 });
 
-                this.$element.on('click', () => {
-                    this.$element.datepicker('show');
+                $elAdd.on('click', () => {
+                    $elAdd.datepicker('show');
                 });
-
-                let options = {
-                    format: this.getDateTime().dateFormat.toLowerCase(),
-                    weekStart: this.getDateTime().weekStart,
-                    autoclose: true,
-                    todayHighlight: true,
-                    keyboardNavigation: true,
-                    todayBtn: this.getConfig().get('datepickerTodayButton') || false,
-                    orientation: 'bottom auto',
-                    templates: {
-                        leftArrow: '<span class="fas fa-chevron-left fa-sm"></span>',
-                        rightArrow: '<span class="fas fa-chevron-right fa-sm"></span>',
-                    },
-                    container: this.$el.closest('.modal-body').length ?
-                        this.$el.closest('.modal-body') :
-                        'body',
-                };
-
-                let language = this.getConfig().get('language');
-
-                if (!(language in $.fn.datepicker.dates)) {
-                    $.fn.datepicker.dates[language] = {
-                        days: this.translate('dayNames', 'lists'),
-                        daysShort: this.translate('dayNamesShort', 'lists'),
-                        daysMin: this.translate('dayNamesMin', 'lists'),
-                        months: this.translate('monthNames', 'lists'),
-                        monthsShort: this.translate('monthNamesShort', 'lists'),
-                        today: this.translate('Today'),
-                        clear: this.translate('Clear'),
-                    };
-                }
-
-                options.language = language;
-
-                this.$element.datepicker(options);
-
-                if (this.mode === this.MODE_SEARCH) {
-                    let $elAdd = this.$el.find('input.additional');
-
-                    $elAdd.datepicker(options);
-
-                    $elAdd.parent().find('button.date-picker-btn').on('click', () => {
-                        $elAdd.datepicker('show');
-                    });
-
-                    this.$el.find('select.search-type').on('change', () => {
-                        this.trigger('change');
-                    });
-
-                    $elAdd.on('change', e => {
-                        this.trigger('change');
-
-                        if (e.isTrigger) {
-                            if (document.activeElement !== $elAdd.get(0)) {
-                                $elAdd.focus();
-                            }
-                        }
-                    });
-
-                    $elAdd.on('click', () => {
-                        $elAdd.datepicker('show');
-                    });
-                }
-
-                this.$element.parent().find('button.date-picker-btn').on('click', () => {
-                    this.$element.datepicker('show');
-                });
-
-                if (this.mode === this.MODE_SEARCH) {
-                    let $searchType = this.$el.find('select.search-type');
-
-                    this.handleSearchType($searchType.val());
-                }
             }
-        },
 
-        handleSearchType: function (type) {
-            this.$el.find('div.primary').addClass('hidden');
-            this.$el.find('div.additional').addClass('hidden');
-            this.$el.find('div.additional-number').addClass('hidden');
+            this.$element.parent().find('button.date-picker-btn').on('click', () => {
+                this.$element.datepicker('show');
+            });
 
-            if (~['on', 'notOn', 'after', 'before'].indexOf(type)) {
-                this.$el.find('div.primary').removeClass('hidden');
+            if (this.mode === this.MODE_SEARCH) {
+                let $searchType = this.$el.find('select.search-type');
+
+                this.handleSearchType($searchType.val());
             }
-            else if (~['lastXDays', 'nextXDays', 'olderThanXDays', 'afterXDays'].indexOf(type)) {
-                this.$el.find('div.additional-number').removeClass('hidden');
+        }
+    },
+
+    handleSearchType: function (type) {
+        this.$el.find('div.primary').addClass('hidden');
+        this.$el.find('div.additional').addClass('hidden');
+        this.$el.find('div.additional-number').addClass('hidden');
+
+        if (~['on', 'notOn', 'after', 'before'].indexOf(type)) {
+            this.$el.find('div.primary').removeClass('hidden');
+        }
+        else if (~['lastXDays', 'nextXDays', 'olderThanXDays', 'afterXDays'].indexOf(type)) {
+            this.$el.find('div.additional-number').removeClass('hidden');
+        }
+        else if (type === 'between') {
+            this.$el.find('div.primary').removeClass('hidden');
+            this.$el.find('div.additional').removeClass('hidden');
+        }
+    },
+
+    parseDate: function (string) {
+        return this.getDateTime().fromDisplayDate(string);
+    },
+
+    parse: function (string) {
+        return this.parseDate(string);
+    },
+
+    fetch: function () {
+        let data = {};
+
+        data[this.name] = this.parse(this.$element.val());
+
+        return data;
+    },
+
+    fetchSearch: function () {
+        let value = this.parseDate(this.$element.val());
+
+        let type = this.fetchSearchType();
+        let data;
+
+        if (type === 'between') {
+            if (!value) {
+                return false;
             }
-            else if (type === 'between') {
-                this.$el.find('div.primary').removeClass('hidden');
-                this.$el.find('div.additional').removeClass('hidden');
+
+            let valueTo = this.parseDate(this.$el.find('input.additional').val());
+
+            if (!valueTo) {
+                return false;
             }
-        },
 
-        parseDate: function (string) {
-            return this.getDateTime().fromDisplayDate(string);
-        },
-
-        parse: function (string) {
-            return this.parseDate(string);
-        },
-
-        fetch: function () {
-            let data = {};
-
-            data[this.name] = this.parse(this.$element.val());
-
-            return data;
-        },
-
-        fetchSearch: function () {
-            let value = this.parseDate(this.$element.val());
-
-            let type = this.fetchSearchType();
-            let data;
-
-            if (type === 'between') {
-                if (!value) {
-                    return false;
-                }
-
-                let valueTo = this.parseDate(this.$el.find('input.additional').val());
-
-                if (!valueTo) {
-                    return false;
-                }
-
-                data = {
-                    type: type,
-                    value: [value, valueTo],
-                    data: {
-                        value: value,
-                        valueTo: valueTo
-                    },
-                };
-            } else if (~['lastXDays', 'nextXDays', 'olderThanXDays', 'afterXDays'].indexOf(type)) {
-                let number = this.$el.find('input.number').val();
-
-                data = {
-                    type: type,
-                    value: number,
-                };
-            }
-            else if (~['on', 'notOn', 'after', 'before'].indexOf(type)) {
-                if (!value) {
-                    return false;
-                }
-
-                data = {
-                    type: type,
+            data = {
+                type: type,
+                value: [value, valueTo],
+                data: {
                     value: value,
-                    data: {
-                        value: value,
-                    },
-                };
+                    valueTo: valueTo
+                },
+            };
+        } else if (~['lastXDays', 'nextXDays', 'olderThanXDays', 'afterXDays'].indexOf(type)) {
+            let number = this.$el.find('input.number').val();
+
+            data = {
+                type: type,
+                value: number,
+            };
+        }
+        else if (~['on', 'notOn', 'after', 'before'].indexOf(type)) {
+            if (!value) {
+                return false;
             }
-            else if (type === 'isEmpty') {
-                data = {
-                    type: 'isNull',
-                    data: {
-                        type: type,
-                    },
-                };
-            }
-            else {
-                data = {
+
+            data = {
+                type: type,
+                value: value,
+                data: {
+                    value: value,
+                },
+            };
+        }
+        else if (type === 'isEmpty') {
+            data = {
+                type: 'isNull',
+                data: {
                     type: type,
-                };
-            }
+                },
+            };
+        }
+        else {
+            data = {
+                type: type,
+            };
+        }
 
-            return data;
-        },
+        return data;
+    },
 
-        getSearchType: function () {
-            return this.getSearchParamsData().type || this.searchParams.typeFront || this.searchParams.type;
-        },
+    getSearchType: function () {
+        return this.getSearchParamsData().type || this.searchParams.typeFront || this.searchParams.type;
+    },
 
-        validateRequired: function () {
-            if (this.isRequired()) {
-                if (this.model.get(this.name) === null) {
-                    let msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
+    validateRequired: function () {
+        if (!this.isRequired()) {
+            return;
+        }
 
-                    this.showValidationMessage(msg);
+        if (this.model.get(this.name) === null) {
+            let msg = this.translate('fieldIsRequired', 'messages')
+                .replace('{field}', this.getLabelText());
 
-                    return true;
-                }
-            }
-        },
+            this.showValidationMessage(msg);
 
-        validateDate: function () {
-            if (this.model.get(this.name) === -1) {
-                let msg = this.translate('fieldShouldBeDate', 'messages')
-                    .replace('{field}', this.getLabelText());
+            return true;
+        }
+    },
 
-                this.showValidationMessage(msg);
+    validateDate: function () {
+        if (this.model.get(this.name) === -1) {
+            let msg = this.translate('fieldShouldBeDate', 'messages')
+                .replace('{field}', this.getLabelText());
 
-                return true;
-            }
-        },
+            this.showValidationMessage(msg);
 
-        validateAfter: function () {
-            let field = this.model.getFieldParam(this.name, 'after');
+            return true;
+        }
+    },
 
-            if (!field) {
-                return false;
-            }
+    validateAfter: function () {
+        let field = this.model.getFieldParam(this.name, 'after');
 
-            let value = this.model.get(this.name);
-            let otherValue = this.model.get(field);
+        if (!field) {
+            return false;
+        }
 
-            if (value && otherValue) {
-                if (moment(value).unix() <= moment(otherValue).unix()) {
-                    var msg = this.translate('fieldShouldAfter', 'messages')
-                        .replace('{field}', this.getLabelText())
-                        .replace('{otherField}', this.translate(field, 'fields', this.model.name));
+        let value = this.model.get(this.name);
+        let otherValue = this.model.get(field);
 
-                    this.showValidationMessage(msg);
+        if (!(value && otherValue)) {
+            return;
+        }
 
-                    return true;
-                }
-            }
-        },
+        if (moment(value).unix() <= moment(otherValue).unix()) {
+            let msg = this.translate('fieldShouldAfter', 'messages')
+                .replace('{field}', this.getLabelText())
+                .replace('{otherField}', this.translate(field, 'fields', this.model.name));
 
-        validateBefore: function () {
-            let field = this.model.getFieldParam(this.name, 'before');
+            this.showValidationMessage(msg);
 
-            if (!field) {
-                return false;
-            }
+            return true;
+        }
+    },
 
-            let value = this.model.get(this.name);
-            let otherValue = this.model.get(field);
+    validateBefore: function () {
+        let field = this.model.getFieldParam(this.name, 'before');
 
-            if (value && otherValue) {
-                if (moment(value).unix() >= moment(otherValue).unix()) {
-                    var msg = this.translate('fieldShouldBefore', 'messages')
-                        .replace('{field}', this.getLabelText())
-                        .replace('{otherField}', this.translate(field, 'fields', this.model.name));
+        if (!field) {
+            return false;
+        }
 
-                    this.showValidationMessage(msg);
+        let value = this.model.get(this.name);
+        let otherValue = this.model.get(field);
 
-                    return true;
-                }
-            }
-        },
-    });
+        if (!(value && otherValue)) {
+            return;
+        }
+
+        if (moment(value).unix() >= moment(otherValue).unix()) {
+            let msg = this.translate('fieldShouldBefore', 'messages')
+                .replace('{field}', this.getLabelText())
+                .replace('{otherField}', this.translate(field, 'fields', this.model.name));
+
+            this.showValidationMessage(msg);
+
+            return true;
+        }
+    },
 });
 
diff --git a/client/src/views/fields/datetime-optional.js b/client/src/views/fields/datetime-optional.js
index ca281aa5bb..52cc8db97a 100644
--- a/client/src/views/fields/datetime-optional.js
+++ b/client/src/views/fields/datetime-optional.js
@@ -26,190 +26,197 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/datetime-optional', ['views/fields/datetime'], function (Dep) {
+/** @module views/fields/datetime-optional */
 
-    /**
-     * @class
-     * @name Class
-     * @extends module:views/fields/datetime.Class
-     * @memberOf module:views/fields/datetime-optional
-     */
-    return Dep.extend(/** @lends module:views/fields/datetime-optional.Class# */{
+import Dep from 'views/fields/datetime';
+import moment from 'lib!moment';
 
-        type: "datetimeOptional",
+/**
+ * A date-time or date.
+ *
+ * @class Class
+ * @extends module:views/fields/datetime
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        setup: function () {
-            Dep.prototype.setup.call(this);
+    type: 'datetimeOptional',
 
-            this.noneOption = this.translate('None');
-            this.nameDate = this.name + 'Date';
-        },
+    setup: function () {
+        Dep.prototype.setup.call(this);
 
-        isDate: function () {
+        this.noneOption = this.translate('None');
+        this.nameDate = this.name + 'Date';
+    },
+
+    isDate: function () {
+        let dateValue = this.model.get(this.nameDate);
+
+        if (dateValue && dateValue !== '') {
+            return true;
+        }
+
+        return false;
+    },
+
+    data: function () {
+        let data = Dep.prototype.data.call(this);
+
+        if (this.isDate()) {
+            let dateValue = this.model.get(this.nameDate);
+
+            data.date = this.getDateTime().toDisplayDate(dateValue);
+            data.time = this.noneOption;
+        }
+
+        return data;
+    },
+
+    getDateStringValue: function () {
+        if (this.isDate()) {
             var dateValue = this.model.get(this.nameDate);
 
-            if (dateValue && dateValue !== '') {
-                return true;
+            return this.stringifyDateValue(dateValue);
+        }
+
+        return Dep.prototype.getDateStringValue.call(this);
+    },
+
+    setDefaultTime: function () {
+        this.$time.val(this.noneOption);
+    },
+
+    initTimepicker: function () {
+        let $time = this.$time;
+
+        let o = {
+            step: this.params.minuteStep || 30,
+            scrollDefaultNow: true,
+            timeFormat: this.timeFormatMap[this.getDateTime().timeFormat],
+            noneOption: [{
+                label: this.noneOption,
+                value: this.noneOption,
+            }],
+        };
+
+        if (this.emptyTimeInInlineEditDisabled && this.isInlineEditMode() || this.noneOptionIsHidden) {
+            delete o.noneOption;
+        }
+
+        $time.timepicker(o);
+
+        $time.parent().find('button.time-picker-btn').on('click', () => {
+            $time.timepicker('show');
+        });
+    },
+
+    fetch: function () {
+        let data = {};
+
+        let date = this.$date.val();
+        let time = this.$time.val();
+        let value = null;
+
+        if (time !== this.noneOption && time !== '') {
+            if (date !== '' && time !== '') {
+                value = this.parse(date + ' ' + time);
             }
 
-            return false;
-        },
-
-        data: function () {
-            var data = Dep.prototype.data.call(this);
-
-            if (this.isDate()) {
-                var dateValue = this.model.get(this.nameDate);
-
-                data.date = this.getDateTime().toDisplayDate(dateValue);
-                data.time = this.noneOption;
-            }
+            data[this.name] = value;
+            data[this.nameDate] = null;
 
             return data;
-        },
+        }
 
-        getDateStringValue: function () {
-            if (this.isDate()) {
-                var dateValue = this.model.get(this.nameDate);
+        if (date !== '') {
+            data[this.nameDate] = this.getDateTime().fromDisplayDate(date);
 
-                return this.stringifyDateValue(dateValue);
-            }
+            let dateTimeValue = data[this.nameDate] + ' 00:00:00';
 
-            return Dep.prototype.getDateStringValue.call(this);
-        },
+            dateTimeValue = moment
+                .tz(dateTimeValue, this.getConfig().get('timeZone') || 'UTC')
+                .add(this.isEnd ? 1 : 0, 'days')
+                .utc()
+                .format(this.getDateTime().internalDateTimeFullFormat);
 
-        setDefaultTime: function () {
-            this.$time.val(this.noneOption);
-        },
-
-        initTimepicker: function () {
-            var $time = this.$time;
-
-            var o = {
-                step: this.params.minuteStep || 30,
-                scrollDefaultNow: true,
-                timeFormat: this.timeFormatMap[this.getDateTime().timeFormat],
-                noneOption: [{
-                    label: this.noneOption,
-                    value: this.noneOption,
-                }],
-            };
-
-            if (this.emptyTimeInInlineEditDisabled && this.isInlineEditMode() || this.noneOptionIsHidden) {
-                delete o.noneOption;
-            }
-
-            $time.timepicker(o);
-
-            $time.parent().find('button.time-picker-btn').on('click', () => {
-                $time.timepicker('show');
-            });
-        },
-
-        fetch: function () {
-            var data = {};
-
-            var date = this.$date.val();
-            var time = this.$time.val();
-
-            var value = null;
-
-            if (time !== this.noneOption && time !== '') {
-                if (date !== '' && time !== '') {
-                    value = this.parse(date + ' ' + time);
-                }
-
-                data[this.name] = value;
-                data[this.nameDate] = null;
-            }
-            else {
-                if (date !== '') {
-                    data[this.nameDate] = this.getDateTime().fromDisplayDate(date);
-
-                    var dateTimeValue = data[this.nameDate] + ' 00:00:00';
-
-                    dateTimeValue = moment
-                        .tz(dateTimeValue, this.getConfig().get('timeZone') || 'UTC')
-                        .add(this.isEnd ? 1 : 0, 'days')
-                        .utc()
-                        .format(this.getDateTime().internalDateTimeFullFormat);
-
-                    data[this.name] = dateTimeValue;
-                }
-                else {
-                    data[this.nameDate] = null;
-                    data[this.name] = null;
-                }
-            }
+            data[this.name] = dateTimeValue;
 
             return data;
-        },
+        }
 
-        validateAfter: function () {
-            var field = this.model.getFieldParam(this.name, 'after');
+        data[this.nameDate] = null;
+        data[this.name] = null;
 
-            if (field) {
-                var fieldDate  = field + 'Date';
-                var value = this.model.get(this.name) || this.model.get(this.nameDate);
-                var otherValue = this.model.get(field) || this.model.get(fieldDate);
+        return data;
+    },
 
-                if (value && otherValue) {
-                    var isNotValid = false;
+    validateAfter: function () {
+        let field = this.model.getFieldParam(this.name, 'after');
 
-                    if (this.validateAfterAllowSameDay && this.model.get(this.nameDate)) {
-                        isNotValid = moment(value).unix() < moment(otherValue).unix();
-                    }
-                    else {
-                        isNotValid = moment(value).unix() <= moment(otherValue).unix();
-                    }
+        if (!field) {
+            return;
+        }
 
-                    if (isNotValid) {
-                        var msg = this.translate('fieldShouldAfter', 'messages')
-                            .replace('{field}', this.getLabelText())
-                            .replace('{otherField}', this.translate(field, 'fields', this.model.name));
+        let fieldDate = field + 'Date';
+        let value = this.model.get(this.name) || this.model.get(this.nameDate);
+        let otherValue = this.model.get(field) || this.model.get(fieldDate);
 
-                        this.showValidationMessage(msg);
+        if (!(value && otherValue)) {
+            return;
+        }
 
-                        return true;
-                    }
-                }
-            }
-        },
+        let isNotValid = this.validateAfterAllowSameDay && this.model.get(this.nameDate) ?
+            moment(value).unix() < moment(otherValue).unix() :
+            moment(value).unix() <= moment(otherValue).unix();
 
-        validateBefore: function () {
-            var field = this.model.getFieldParam(this.name, 'before');
+        if (isNotValid) {
+            let msg = this.translate('fieldShouldAfter', 'messages')
+                .replace('{field}', this.getLabelText())
+                .replace('{otherField}', this.translate(field, 'fields', this.model.name));
 
-            if (field) {
-                var fieldDate  = field + 'Date';
-                var value = this.model.get(this.name) || this.model.get(this.nameDate);
+            this.showValidationMessage(msg);
 
-                var otherValue = this.model.get(field) || this.model.get(fieldDate);
+            return true;
+        }
+    },
 
-                if (value && otherValue) {
-                    if (moment(value).unix() >= moment(otherValue).unix()) {
-                        var msg = this.translate('fieldShouldBefore', 'messages')
-                            .replace('{field}', this.getLabelText())
-                            .replace('{otherField}', this.translate(field, 'fields', this.model.name));
+    validateBefore: function () {
+        var field = this.model.getFieldParam(this.name, 'before');
 
-                        this.showValidationMessage(msg);
+        if (!field) {
+            return;
+        }
 
-                        return true;
-                    }
-                }
-            }
-        },
+        let fieldDate = field + 'Date';
+        let value = this.model.get(this.name) || this.model.get(this.nameDate);
+        let otherValue = this.model.get(field) || this.model.get(fieldDate);
 
-        validateRequired: function () {
-            if (this.isRequired()) {
-                if (this.model.get(this.name) === null && this.model.get(this.nameDate) === null) {
-                    var msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
+        if (!(value && otherValue)) {
+            return;
+        }
 
-                    this.showValidationMessage(msg);
+        if (moment(value).unix() >= moment(otherValue).unix()) {
+            let msg = this.translate('fieldShouldBefore', 'messages')
+                .replace('{field}', this.getLabelText())
+                .replace('{otherField}', this.translate(field, 'fields', this.model.name));
 
-                    return true;
-                }
-            }
-        },
-    });
+            this.showValidationMessage(msg);
+
+            return true;
+        }
+    },
+
+    validateRequired: function () {
+        if (!this.isRequired()) {
+            return;
+        }
+
+        if (this.model.get(this.name) === null && this.model.get(this.nameDate) === null) {
+            let msg = this.translate('fieldIsRequired', 'messages')
+                .replace('{field}', this.getLabelText());
+
+            this.showValidationMessage(msg);
+
+            return true;
+        }
+    },
 });
diff --git a/client/src/views/fields/datetime-short.js b/client/src/views/fields/datetime-short.js
index 018fab4476..d7ae797c90 100644
--- a/client/src/views/fields/datetime-short.js
+++ b/client/src/views/fields/datetime-short.js
@@ -26,63 +26,61 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/datetime-short', ['views/fields/datetime'], function (Dep) {
+/** @module views/fields/datetime-short */
 
-    return Dep.extend({
+import Dep from 'views/fields/datetime';
+import moment from 'lib!moment';
 
-        listTemplate: 'fields/datetime-short/list',
+/**
+ * @class Class
+ * @extends module:views/fields/datetime
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        detailTemplate: 'fields/datetime-short/detail',
+    listTemplate: 'fields/datetime-short/list',
+    detailTemplate: 'fields/datetime-short/detail',
 
-        data: function () {
-            var data = Dep.prototype.data.call(this);
+    data: function () {
+        let data = Dep.prototype.data.call(this);
 
-            if (this.mode === 'list' || this.mode === 'detail') {
-                data.fullDateValue = Dep.prototype.getDateStringValue.call(this);
-            }
+        if (this.mode === this.MODE_LIST || this.mode === this.MODE_DETAIL) {
+            data.fullDateValue = Dep.prototype.getDateStringValue.call(this);
+        }
 
-            return data;
-        },
-
-        getDateStringValue: function () {
-            if (this.mode === 'list' || this.mode === 'detail') {
-                var value = this.model.get(this.name)
-
-                if (value) {
-                    var string;
-
-                    var timeFormat = this.getDateTime().timeFormat;
-
-                    if (this.params.hasSeconds) {
-                        timeFormat = timeFormat.replace(/:mm/, ':mm:ss');
-                    }
-
-                    var d = this.getDateTime().toMoment(value);
-
-                    var now = moment().tz(this.getDateTime().timeZone || 'UTC');
-
-                    if (
-                        d.unix() > now.clone().startOf('day').unix() &&
-                        d.unix() < now.clone().add(1, 'days').startOf('day').unix()
-                    ) {
-                        string = d.format(timeFormat);
-
-                        return string;
-                    }
-
-                    var readableFormat = this.getDateTime().getReadableShortDateFormat();
-
-                    if (d.format('YYYY') === now.format('YYYY')) {
-                        string = d.format(readableFormat);
-                    } else {
-                        string = d.format(readableFormat + ', YY');
-                    }
-
-                    return string;
-                }
-            }
+        return data;
+    },
 
+    getDateStringValue: function () {
+        if (!(this.mode === this.MODE_LIST || this.mode === this.MODE_DETAIL)) {
             return Dep.prototype.getDateStringValue.call(this);
-        },
-    });
+        }
+
+        let value = this.model.get(this.name)
+
+        if (!value) {
+            return Dep.prototype.getDateStringValue.call(this);
+        }
+
+        let timeFormat = this.getDateTime().timeFormat;
+
+        if (this.params.hasSeconds) {
+            timeFormat = timeFormat.replace(/:mm/, ':mm:ss');
+        }
+
+        let d = this.getDateTime().toMoment(value);
+        let now = moment().tz(this.getDateTime().timeZone || 'UTC');
+
+        if (
+            d.unix() > now.clone().startOf('day').unix() &&
+            d.unix() < now.clone().add(1, 'days').startOf('day').unix()
+        ) {
+            return  d.format(timeFormat);
+        }
+
+        let readableFormat = this.getDateTime().getReadableShortDateFormat();
+
+        return d.format('YYYY') === now.format('YYYY') ?
+            d.format(readableFormat) :
+            d.format(readableFormat + ', YY');
+    },
 });
diff --git a/client/src/views/fields/datetime.js b/client/src/views/fields/datetime.js
index a94e2d4b74..d7baf1c1de 100644
--- a/client/src/views/fields/datetime.js
+++ b/client/src/views/fields/datetime.js
@@ -26,281 +26,285 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/datetime', ['views/fields/date', 'lib!moment'], function (Dep, moment) {
+/** @module views/fields/datetime */
 
-    /**
-     * A date-time field.
-     * @class
-     * @name Class
-     * @extends module:views/fields/date.Class
-     * @memberOf module:views/fields/datetime
-     */
-    return Dep.extend(/** @lends module:views/fields/datetime.Class# */{
+import Dep from 'views/fields/date';
+import moment from 'lib!moment';
 
-        type: 'datetime',
+/**
+ * A date-time field.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/fields/date
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        editTemplate: 'fields/datetime/edit',
+    type: 'datetime',
 
-        validations: ['required', 'datetime', 'after', 'before'],
+    editTemplate: 'fields/datetime/edit',
 
-        searchTypeList: [
-            'lastSevenDays',
-            'ever',
-            'isEmpty',
-            'currentMonth',
-            'lastMonth',
-            'nextMonth',
-            'currentQuarter',
-            'lastQuarter',
-            'currentYear',
-            'lastYear',
-            'today',
-            'past',
-            'future',
-            'lastXDays',
-            'nextXDays',
-            'olderThanXDays',
-            'afterXDays',
-            'on',
-            'after',
-            'before',
-            'between',
-        ],
+    validations: ['required', 'datetime', 'after', 'before'],
 
-        timeFormatMap: {
-            'HH:mm': 'H:i',
-            'hh:mm A': 'h:i A',
-            'hh:mm a': 'h:i a',
-            'hh:mmA': 'h:iA',
-            'hh:mma': 'h:ia',
-        },
+    searchTypeList: [
+        'lastSevenDays',
+        'ever',
+        'isEmpty',
+        'currentMonth',
+        'lastMonth',
+        'nextMonth',
+        'currentQuarter',
+        'lastQuarter',
+        'currentYear',
+        'lastYear',
+        'today',
+        'past',
+        'future',
+        'lastXDays',
+        'nextXDays',
+        'olderThanXDays',
+        'afterXDays',
+        'on',
+        'after',
+        'before',
+        'between',
+    ],
 
-        data: function () {
-            let data = Dep.prototype.data.call(this);
+    timeFormatMap: {
+        'HH:mm': 'H:i',
+        'hh:mm A': 'h:i A',
+        'hh:mm a': 'h:i a',
+        'hh:mmA': 'h:iA',
+        'hh:mma': 'h:ia',
+    },
 
-            data.date = data.time = '';
+    data: function () {
+        let data = Dep.prototype.data.call(this);
 
-            let value = this.getDateTime().toDisplay(this.model.get(this.name));
+        data.date = data.time = '';
 
-            if (value) {
-                let pair = this.splitDatetime(value);
+        let value = this.getDateTime().toDisplay(this.model.get(this.name));
 
-                data.date = pair[0];
-                data.time = pair[1];
-            }
+        if (value) {
+            let pair = this.splitDatetime(value);
 
-            return data;
-        },
+            data.date = pair[0];
+            data.time = pair[1];
+        }
 
-        getDateStringValue: function () {
-            if (this.mode === this.MODE_DETAIL && !this.model.has(this.name)) {
-                return -1;
-            }
+        return data;
+    },
 
-            let value = this.model.get(this.name);
+    getDateStringValue: function () {
+        if (this.mode === this.MODE_DETAIL && !this.model.has(this.name)) {
+            return -1;
+        }
 
-            if (!value) {
-                if (
-                    this.mode === this.MODE_EDIT |
-                    this.mode === this.MODE_SEARCH |
-                    this.mode === this.MODE_LIST ||
-                    this.mode === this.MODE_LIST_LINK
-                ) {
-                    return '';
-                }
-
-                return null;
-            }
+        let value = this.model.get(this.name);
 
+        if (!value) {
             if (
+                this.mode === this.MODE_EDIT |
+                this.mode === this.MODE_SEARCH |
                 this.mode === this.MODE_LIST ||
-                this.mode === this.MODE_DETAIL ||
                 this.mode === this.MODE_LIST_LINK
             ) {
-                if (this.getConfig().get('readableDateFormatDisabled') || this.params.useNumericFormat) {
-                    return this.getDateTime().toDisplayDateTime(value);
-                }
-
-                let timeFormat = this.getDateTime().timeFormat;
-
-                if (this.params.hasSeconds) {
-                    timeFormat = timeFormat.replace(/:mm/, ':mm:ss');
-                }
-
-                let d = this.getDateTime().toMoment(value);
-                let now = moment().tz(this.getDateTime().timeZone || 'UTC');
-                let dt = now.clone().startOf('day');
-
-                let ranges = {
-                    'today': [dt.unix(), dt.add(1, 'days').unix()],
-                    'tomorrow': [dt.unix(), dt.add(1, 'days').unix()],
-                    'yesterday': [dt.add(-3, 'days').unix(), dt.add(1, 'days').unix()]
-                };
-
-                if (d.unix() > ranges['today'][0] && d.unix() < ranges['today'][1]) {
-                    return this.translate('Today') + ' ' + d.format(timeFormat);
-                }
-                else if (d.unix() > ranges['tomorrow'][0] && d.unix() < ranges['tomorrow'][1]) {
-                    return this.translate('Tomorrow') + ' ' + d.format(timeFormat);
-                }
-                else if (d.unix() > ranges['yesterday'][0] && d.unix() < ranges['yesterday'][1]) {
-                    return this.translate('Yesterday') + ' ' + d.format(timeFormat);
-                }
-
-                let readableFormat = this.getDateTime().getReadableDateFormat();
-
-                if (d.format('YYYY') === now.format('YYYY')) {
-                    return d.format(readableFormat) + ' ' + d.format(timeFormat);
-                }
-                else {
-                    return d.format(readableFormat + ', YYYY') + ' ' + d.format(timeFormat);
-                }
+                return '';
             }
 
-            return this.getDateTime().toDisplay(value);
-        },
+            return null;
+        }
 
-        initTimepicker: function () {
-            let $time = this.$time;
+        if (
+            this.mode === this.MODE_LIST ||
+            this.mode === this.MODE_DETAIL ||
+            this.mode === this.MODE_LIST_LINK
+        ) {
+            if (this.getConfig().get('readableDateFormatDisabled') || this.params.useNumericFormat) {
+                return this.getDateTime().toDisplay(value);
+            }
 
-            $time.timepicker({
-                step: this.params.minuteStep || 30,
-                scrollDefaultNow: true,
-                timeFormat: this.timeFormatMap[this.getDateTime().timeFormat],
+            let timeFormat = this.getDateTime().timeFormat;
+
+            if (this.params.hasSeconds) {
+                timeFormat = timeFormat.replace(/:mm/, ':mm:ss');
+            }
+
+            let d = this.getDateTime().toMoment(value);
+            let now = moment().tz(this.getDateTime().timeZone || 'UTC');
+            let dt = now.clone().startOf('day');
+
+            let ranges = {
+                'today': [dt.unix(), dt.add(1, 'days').unix()],
+                'tomorrow': [dt.unix(), dt.add(1, 'days').unix()],
+                'yesterday': [dt.add(-3, 'days').unix(), dt.add(1, 'days').unix()]
+            };
+
+            if (d.unix() > ranges['today'][0] && d.unix() < ranges['today'][1]) {
+                return this.translate('Today') + ' ' + d.format(timeFormat);
+            }
+            else if (d.unix() > ranges['tomorrow'][0] && d.unix() < ranges['tomorrow'][1]) {
+                return this.translate('Tomorrow') + ' ' + d.format(timeFormat);
+            }
+            else if (d.unix() > ranges['yesterday'][0] && d.unix() < ranges['yesterday'][1]) {
+                return this.translate('Yesterday') + ' ' + d.format(timeFormat);
+            }
+
+            let readableFormat = this.getDateTime().getReadableDateFormat();
+
+            if (d.format('YYYY') === now.format('YYYY')) {
+                return d.format(readableFormat) + ' ' + d.format(timeFormat);
+            }
+            else {
+                return d.format(readableFormat + ', YYYY') + ' ' + d.format(timeFormat);
+            }
+        }
+
+        return this.getDateTime().toDisplay(value);
+    },
+
+    initTimepicker: function () {
+        let $time = this.$time;
+
+        $time.timepicker({
+            step: this.params.minuteStep || 30,
+            scrollDefaultNow: true,
+            timeFormat: this.timeFormatMap[this.getDateTime().timeFormat],
+        });
+
+        $time
+            .parent()
+            .find('button.time-picker-btn')
+            .on('click', () => {
+                $time.timepicker('show');
             });
+    },
 
-            $time
-                .parent()
-                .find('button.time-picker-btn')
-                .on('click', () => {
-                    $time.timepicker('show');
-                });
-        },
+    setDefaultTime: function () {
+        let dtString = moment('2014-01-01 00:00').format(this.getDateTime().getDateTimeFormat()) || '';
 
-        setDefaultTime: function () {
-            let dtString = moment('2014-01-01 00:00').format(this.getDateTime().getDateTimeFormat()) || '';
+        let pair = this.splitDatetime(dtString);
 
-            let pair = this.splitDatetime(dtString);
+        if (pair.length === 2) {
+            this.$time.val(pair[1]);
+        }
+    },
 
-            if (pair.length === 2) {
-                this.$time.val(pair[1]);
+    splitDatetime: function (value) {
+        let m = moment(value, this.getDateTime().getDateTimeFormat());
+
+        let dateValue = m.format(this.getDateTime().getDateFormat());
+        let timeValue = value.substr(dateValue.length + 1);
+
+        return [dateValue, timeValue];
+    },
+
+    setup: function () {
+        Dep.prototype.setup.call(this);
+
+        this.on('remove', () => this.destroyTimepicker());
+        this.on('mode-changed', () => this.destroyTimepicker());
+    },
+
+    destroyTimepicker: function () {
+        if (this.$time && this.$time[0]) {
+            this.$time.timepicker('remove');
+        }
+    },
+
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
+
+        if (this.mode !== this.MODE_EDIT) {
+            return;
+        }
+
+        this.$date = this.$element;
+        let $time = this.$time = this.$el.find('input.time-part');
+
+        this.initTimepicker();
+
+        this.$element.on('change.datetime', () => {
+            if (this.$element.val() && !$time.val()) {
+                this.setDefaultTime();
+                this.trigger('change');
             }
-        },
+        });
 
-        splitDatetime: function (value) {
-            let m = moment(value, this.getDateTime().getDateTimeFormat());
+        let timeout = false;
+        let isTimeFormatError = false;
+        let previousValue = $time.val();
 
-            let dateValue = m.format(this.getDateTime().getDateFormat());
-            let timeValue = value.substr(dateValue.length + 1);
+        $time.on('change', () => {
+            if (!timeout) {
+                if (isTimeFormatError) {
+                    $time.val(previousValue);
 
-            return [dateValue, timeValue];
-        },
+                    return;
+                }
 
-        setup: function () {
-            Dep.prototype.setup.call(this);
+                if (this.noneOption && $time.val() === '' && this.$date.val() !== '') {
+                    $time.val(this.noneOption);
 
-            this.on('remove', () => this.destroyTimepicker());
-            this.on('mode-changed', () => this.destroyTimepicker());
-        },
+                    return;
+                }
 
-        destroyTimepicker: function () {
-            if (this.$time && this.$time[0]) {
-                this.$time.timepicker('remove');
-            }
-        },
+                this.trigger('change');
 
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
-
-            if (this.mode === this.MODE_EDIT) {
-                this.$date = this.$element;
-                let $time = this.$time = this.$el.find('input.time-part');
-
-                this.initTimepicker();
-
-                this.$element.on('change.datetime', (e) => {
-                    if (this.$element.val() && !$time.val()) {
-                        this.setDefaultTime();
-                        this.trigger('change');
-                    }
-                });
-
-                let timeout = false;
-                let isTimeFormatError = false;
-                let previousValue = $time.val();
-
-                $time.on('change', (e) => {
-                    if (!timeout) {
-                        if (isTimeFormatError) {
-                            $time.val(previousValue);
-
-                            return;
-                        }
-
-                        if (this.noneOption && $time.val() === '' && this.$date.val() !== '') {
-                            $time.val(this.noneOption);
-
-                            return;
-                        }
-
-                        this.trigger('change');
-
-                        previousValue = $time.val();
-                    }
-
-                    timeout = true;
-
-                    setTimeout(() => timeout = false, 100);
-                });
-
-                $time.on('timeFormatError', () => {
-                    isTimeFormatError = true;
-
-                    setTimeout(() => isTimeFormatError = false, 50);
-                });
-            }
-        },
-
-        parse: function (string) {
-            return this.getDateTime().fromDisplay(string);
-        },
-
-        fetch: function () {
-            let data = {};
-
-            let date = this.$date.val();
-            let time = this.$time.val();
-
-            let value = null;
-
-            if (date !== '' && time !== '') {
-                value = this.parse(date + ' ' + time);
+                previousValue = $time.val();
             }
 
-            data[this.name] = value;
+            timeout = true;
 
-            return data;
-        },
+            setTimeout(() => timeout = false, 100);
+        });
 
-        validateDatetime: function () {
-            if (this.model.get(this.name) === -1) {
-                let msg = this.translate('fieldShouldBeDatetime', 'messages')
-                    .replace('{field}', this.getLabelText());
+        $time.on('timeFormatError', () => {
+            isTimeFormatError = true;
 
-                this.showValidationMessage(msg);
+            setTimeout(() => isTimeFormatError = false, 50);
+        });
+    },
 
-                return true;
-            }
-        },
+    parse: function (string) {
+        return this.getDateTime().fromDisplay(string);
+    },
 
-        fetchSearch: function () {
-            let data = Dep.prototype.fetchSearch.call(this);
+    fetch: function () {
+        let data = {};
 
-            if (data) {
-                data.dateTime = true;
-            }
+        let date = this.$date.val();
+        let time = this.$time.val();
 
-            return data;
-        },
-    });
+        let value = null;
+
+        if (date !== '' && time !== '') {
+            value = this.parse(date + ' ' + time);
+        }
+
+        data[this.name] = value;
+
+        return data;
+    },
+
+    validateDatetime: function () {
+        if (this.model.get(this.name) === -1) {
+            let msg = this.translate('fieldShouldBeDatetime', 'messages')
+                .replace('{field}', this.getLabelText());
+
+            this.showValidationMessage(msg);
+
+            return true;
+        }
+    },
+
+    fetchSearch: function () {
+        let data = Dep.prototype.fetchSearch.call(this);
+
+        if (data) {
+            data.dateTime = true;
+        }
+
+        return data;
+    },
 });
diff --git a/client/src/views/fields/duration.js b/client/src/views/fields/duration.js
index 601f4189c3..2e96b8a758 100644
--- a/client/src/views/fields/duration.js
+++ b/client/src/views/fields/duration.js
@@ -33,7 +33,7 @@ function (Dep, /** module:ui/select*/Select) {
      * @class
      * @name Class
      * @memberOf module:views/fields/duration
-     * @extends module:views/fields/enum.Class
+     * @extends module:views/fields/enum
      */
     return Dep.extend(/** @lends module:views/fields/duration.Class# */{
 
diff --git a/client/src/views/fields/email-address.js b/client/src/views/fields/email-address.js
index cdeda4099b..9e1827539f 100644
--- a/client/src/views/fields/email-address.js
+++ b/client/src/views/fields/email-address.js
@@ -26,33 +26,35 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/email-address', ['views/fields/varchar'], function (Dep) {
+import Dep from 'views/fields/varchar';
 
-    return Dep.extend({
+export default Dep.extend({
 
-        editTemplate: 'fields/email-address/edit',
+    editTemplate: 'fields/email-address/edit',
 
-        validations: ['required', 'emailAddress'],
+    validations: ['required', 'emailAddress'],
 
-        emailAddressRe: /^[-!#$%&'*+/=?^_`{|}~A-Za-z0-9]+(?:\.[-!#$%&'*+/=?^_`{|}~A-Za-z0-9]+)*@([A-Za-z0-9]([A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9]/,
+    emailAddressRe: new RegExp(
+        /^[-!#$%&'*+/=?^_`{|}~A-Za-z0-9]+(?:\.[-!#$%&'*+/=?^_`{|}~A-Za-z0-9]+)*/.source +
+        /@([A-Za-z0-9]([A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9]/.source
+    ),
 
-        validateEmailAddress: function () {
-            let value = this.model.get(this.name);
-
-            if (!value) {
-                return false;
-            }
-
-            if (value !== '' && !this.emailAddressRe.test(value)) {
-                let msg = this.translate('fieldShouldBeEmail', 'messages')
-                    .replace('{field}', this.getLabelText());
-
-                this.showValidationMessage(msg);
-
-                return true;
-            }
+    validateEmailAddress: function () {
+        let value = this.model.get(this.name);
 
+        if (!value) {
             return false;
-        },
-    });
+        }
+
+        if (value !== '' && !this.emailAddressRe.test(value)) {
+            let msg = this.translate('fieldShouldBeEmail', 'messages')
+                .replace('{field}', this.getLabelText());
+
+            this.showValidationMessage(msg);
+
+            return true;
+        }
+
+        return false;
+    },
 });
diff --git a/client/src/views/fields/email.js b/client/src/views/fields/email.js
index 74276a75cb..d7f514656a 100644
--- a/client/src/views/fields/email.js
+++ b/client/src/views/fields/email.js
@@ -26,570 +26,576 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/email', ['views/fields/varchar'], function (Dep) {
+import Dep from 'views/fields/varchar';
 
-    return Dep.extend({
+/**
+ * @class Class
+ * @extends module:views/fields/varchar
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        type: 'email',
+    type: 'email',
 
-        editTemplate: 'fields/email/edit',
-        detailTemplate: 'fields/email/detail',
-        listTemplate: 'fields/email/list',
+    editTemplate: 'fields/email/edit',
+    detailTemplate: 'fields/email/detail',
+    listTemplate: 'fields/email/list',
 
-        validations: ['required', 'emailData'],
+    validations: ['required', 'emailData'],
 
-        validateEmailData: function () {
-            let data = this.model.get(this.dataFieldName);
+    validateEmailData: function () {
+        let data = this.model.get(this.dataFieldName);
+
+        if (!data || !data.length) {
+            return;
+        }
+
+        let addressList = [];
+
+        let regExp = new RegExp(
+            /^[-!#$%&'*+/=?^_`{|}~A-Za-z0-9]+(?:\.[-!#$%&'*+/=?^_`{|}~A-Za-z0-9]+)*/.source +
+            /@([A-Za-z0-9]([A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9]/.source
+        );
+
+        let notValid = false;
+
+        data.forEach((row, i) => {
+            let address = row.emailAddress || '';
+            let addressLowerCase = String(address).toLowerCase();
+
+            if (!regExp.test(addressLowerCase) && address.indexOf(this.erasedPlaceholder) !== 0) {
+                let msg = this.translate('fieldShouldBeEmail', 'messages')
+                    .replace('{field}', this.getLabelText());
+
+                this.reRender();
+
+                this.showValidationMessage(msg, 'div.email-address-block:nth-child(' + (i + 1)
+                    .toString() + ') input');
+
+                notValid = true;
 
-            if (!data || !data.length) {
                 return;
             }
 
-            let addressList = [];
+            if (~addressList.indexOf(addressLowerCase)) {
+                let msg = this.translate('fieldValueDuplicate', 'messages')
+                    .replace('{field}', this.getLabelText());
 
-            let re = /^[-!#$%&'*+/=?^_`{|}~A-Za-z0-9]+(?:\.[-!#$%&'*+/=?^_`{|}~A-Za-z0-9]+)*@([A-Za-z0-9]([A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9]/;
+                this.showValidationMessage(msg, 'div.email-address-block:nth-child(' + (i + 1)
+                    .toString() + ') input');
 
-            let notValid = false;
+                notValid = true;
 
-            data.forEach((row, i) => {
-                let address = row.emailAddress || '';
-                let addressLowerCase = String(address).toLowerCase();
+                return;
+            }
 
-                if (!re.test(addressLowerCase) && address.indexOf(this.erasedPlaceholder) !== 0) {
-                    let msg = this.translate('fieldShouldBeEmail', 'messages')
-                        .replace('{field}', this.getLabelText());
+            addressList.push(addressLowerCase);
+        });
 
-                    this.reRender();
+        if (notValid) {
+            return true;
+        }
+    },
 
-                    this.showValidationMessage(msg, 'div.email-address-block:nth-child(' + (i + 1)
-                        .toString() + ') input');
+    validateRequired: function () {
+        if (this.isRequired()) {
+            if (!this.model.get(this.name)) {
+                let msg = this.translate('fieldIsRequired', 'messages')
+                    .replace('{field}', this.getLabelText());
 
-                    notValid = true;
+                this.showValidationMessage(msg, 'div.email-address-block:nth-child(1) input');
 
-                    return;
-                }
-
-                if (~addressList.indexOf(addressLowerCase)) {
-                    let msg = this.translate('fieldValueDuplicate', 'messages')
-                        .replace('{field}', this.getLabelText());
-
-                    this.showValidationMessage(msg, 'div.email-address-block:nth-child(' + (i + 1)
-                        .toString() + ') input');
-
-                    notValid = true;
-
-                    return;
-                }
-
-                addressList.push(addressLowerCase);
-            });
-
-            if (notValid) {
                 return true;
             }
-        },
+        }
+    },
 
-        validateRequired: function () {
-            if (this.isRequired()) {
-                if (!this.model.get(this.name)) {
-                    let msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
+    data: function () {
+        let emailAddressData;
 
-                    this.showValidationMessage(msg, 'div.email-address-block:nth-child(1) input');
+        if (this.mode === this.MODE_EDIT) {
+            emailAddressData = Espo.Utils.clone(this.model.get(this.dataFieldName));
 
-                    return true;
-                }
-            }
-        },
+            if (this.model.isNew() || !this.model.get(this.name)) {
+                if (!emailAddressData || !emailAddressData.length) {
+                    let optOut;
 
-        data: function () {
-            let emailAddressData;
-
-            if (this.mode === this.MODE_EDIT) {
-                emailAddressData = Espo.Utils.clone(this.model.get(this.dataFieldName));
-
-                if (this.model.isNew() || !this.model.get(this.name)) {
-                    if (!emailAddressData || !emailAddressData.length) {
-                        let optOut;
-
-                        if (this.model.isNew()) {
-                            optOut = this.emailAddressOptedOutByDefault && this.model.name !== 'User';
-                        } else {
-                            optOut = this.model.get(this.isOptedOutFieldName)
-                        }
-
-                        emailAddressData = [{
-                            emailAddress: this.model.get(this.name) || '',
-                            primary: true,
-                            optOut: optOut,
-                            invalid: false,
-                        }];
-                    }
-                }
-            } else {
-                emailAddressData = this.model.get(this.dataFieldName) || false;
-            }
-
-            if ((!emailAddressData || emailAddressData.length === 0) && this.model.get(this.name)) {
-                emailAddressData = [{
-                    emailAddress: this.model.get(this.name),
-                    primary: true,
-                    optOut: false,
-                    invalid: false,
-                }];
-            }
-
-            if (emailAddressData) {
-                emailAddressData = Espo.Utils.cloneDeep(emailAddressData);
-
-                emailAddressData.forEach(item => {
-                    let address = item.emailAddress || '';
-
-                    item.erased = address.indexOf(this.erasedPlaceholder) === 0;
-                    item.lineThrough = item.optOut || item.invalid;
-                });
-            }
-
-            let data = _.extend({
-                emailAddressData: emailAddressData,
-            }, Dep.prototype.data.call(this));
-
-            if (this.isReadMode()) {
-                data.isOptedOut = this.model.get(this.isOptedOutFieldName);
-                data.isInvalid = this.model.get(this.isInvalidFieldName);
-
-                if (this.model.get(this.name)) {
-                    data.isErased = this.model.get(this.name).indexOf(this.erasedPlaceholder) === 0
-                }
-
-                data.valueIsSet = this.model.has(this.name);
-            }
-
-            data.itemMaxLength = this.itemMaxLength;
-
-            return data;
-        },
-
-        getAutocompleteMaxCount: function () {
-            if (this.autocompleteMaxCount) {
-                return this.autocompleteMaxCount;
-            }
-
-            return this.getConfig().get('recordsPerPage');
-        },
-
-        events: {
-            'click [data-action="mailTo"]': function (e) {
-                this.mailTo($(e.currentTarget).data('email-address'));
-            },
-            'click [data-action="switchEmailProperty"]': function (e) {
-                let $target = $(e.currentTarget);
-                let $block = $(e.currentTarget).closest('div.email-address-block');
-                let property = $target.data('property-type');
-
-                if (property === 'primary') {
-                    if (!$target.hasClass('active')) {
-                        if ($block.find('input.email-address').val() !== '') {
-                            this.$el.find('button.email-property[data-property-type="primary"]')
-                                .removeClass('active').children().addClass('text-muted');
-
-                            $target.addClass('active').children().removeClass('text-muted');
-                        }
-                    }
-                } else {
-                    if ($target.hasClass('active')) {
-                        $target.removeClass('active').children().addClass('text-muted');
+                    if (this.model.isNew()) {
+                        optOut = this.emailAddressOptedOutByDefault && this.model.name !== 'User';
                     } else {
+                        optOut = this.model.get(this.isOptedOutFieldName)
+                    }
+
+                    emailAddressData = [{
+                        emailAddress: this.model.get(this.name) || '',
+                        primary: true,
+                        optOut: optOut,
+                        invalid: false,
+                    }];
+                }
+            }
+        } else {
+            emailAddressData = this.model.get(this.dataFieldName) || false;
+        }
+
+        if ((!emailAddressData || emailAddressData.length === 0) && this.model.get(this.name)) {
+            emailAddressData = [{
+                emailAddress: this.model.get(this.name),
+                primary: true,
+                optOut: false,
+                invalid: false,
+            }];
+        }
+
+        if (emailAddressData) {
+            emailAddressData = Espo.Utils.cloneDeep(emailAddressData);
+
+            emailAddressData.forEach(item => {
+                let address = item.emailAddress || '';
+
+                item.erased = address.indexOf(this.erasedPlaceholder) === 0;
+                item.lineThrough = item.optOut || item.invalid;
+            });
+        }
+
+        let data = _.extend({
+            emailAddressData: emailAddressData,
+        }, Dep.prototype.data.call(this));
+
+        if (this.isReadMode()) {
+            data.isOptedOut = this.model.get(this.isOptedOutFieldName);
+            data.isInvalid = this.model.get(this.isInvalidFieldName);
+
+            if (this.model.get(this.name)) {
+                data.isErased = this.model.get(this.name).indexOf(this.erasedPlaceholder) === 0
+            }
+
+            data.valueIsSet = this.model.has(this.name);
+        }
+
+        data.itemMaxLength = this.itemMaxLength;
+
+        return data;
+    },
+
+    getAutocompleteMaxCount: function () {
+        if (this.autocompleteMaxCount) {
+            return this.autocompleteMaxCount;
+        }
+
+        return this.getConfig().get('recordsPerPage');
+    },
+
+    events: {
+        'click [data-action="mailTo"]': function (e) {
+            this.mailTo($(e.currentTarget).data('email-address'));
+        },
+        'click [data-action="switchEmailProperty"]': function (e) {
+            let $target = $(e.currentTarget);
+            let $block = $(e.currentTarget).closest('div.email-address-block');
+            let property = $target.data('property-type');
+
+            if (property === 'primary') {
+                if (!$target.hasClass('active')) {
+                    if ($block.find('input.email-address').val() !== '') {
+                        this.$el.find('button.email-property[data-property-type="primary"]')
+                            .removeClass('active').children().addClass('text-muted');
+
                         $target.addClass('active').children().removeClass('text-muted');
                     }
                 }
-
-                this.trigger('change');
-            },
-            'click [data-action="removeEmailAddress"]': function (e) {
-                let $block = $(e.currentTarget).closest('div.email-address-block');
-
-                this.removeEmailAddress($block);
-
-                let $last = this.$el.find('.email-address').last();
-
-                if ($last.length) {
-                    $last[0].focus({preventScroll: true});
-                }
-            },
-            'change input.email-address': function (e) {
-                let $input = $(e.currentTarget);
-                let $block = $input.closest('div.email-address-block');
-
-                if (this._itemJustRemoved) {
-                    return;
-                }
-
-                if ($input.val() === '' && $block.length) {
-                    this.removeEmailAddress($block);
-                }
-                else {
-                    this.trigger('change');
-                }
-
-                this.trigger('change');
-
-                this.manageAddButton();
-            },
-            'keypress input.email-address': function () {
-                this.manageAddButton();
-            },
-            'paste input.email-address': function () {
-                setTimeout(() => this.manageAddButton(), 10);
-            },
-            'click [data-action="addEmailAddress"]': function () {
-                this.addEmailAddress();
-            },
-            'keydown input.email-address': function (e) {
-                let key = Espo.Utils.getKeyFromKeyEvent(e);
-
-                let $target = $(e.currentTarget);
-
-                if (key === 'Enter') {
-                    if (!this.$el.find('[data-action="addEmailAddress"]').hasClass('disabled')) {
-                        this.addEmailAddress();
-
-                        e.stopPropagation();
-                    }
-
-                    return;
-                }
-
-                if (key === 'Backspace' && $target.val() === '') {
-                    let $block = $target.closest('div.email-address-block');
-
-                    this._itemJustRemoved = true;
-                    setTimeout(() => this._itemJustRemoved = false, 100);
-
-                    e.stopPropagation();
-
-                    this.removeEmailAddress($block);
-
-                    setTimeout(() => this.focusOnLast(true), 50);
-                }
-            },
-        },
-
-        focusOnLast: function (cursorAtEnd) {
-            let $item = this.$el.find('input.form-control').last();
-
-            $item.focus();
-
-            if (cursorAtEnd && $item[0]) {
-                // Not supported for email inputs.
-                // $item[0].setSelectionRange($item[0].value.length, $item[0].value.length);
-            }
-        },
-
-        removeEmailAddress: function ($block) {
-            if ($block.parent().children().length === 1) {
-                $block.find('input.email-address').val('');
             } else {
-                this.removeEmailAddressBlock($block);
+                if ($target.hasClass('active')) {
+                    $target.removeClass('active').children().addClass('text-muted');
+                } else {
+                    $target.addClass('active').children().removeClass('text-muted');
+                }
             }
 
             this.trigger('change');
         },
+        'click [data-action="removeEmailAddress"]': function (e) {
+            let $block = $(e.currentTarget).closest('div.email-address-block');
 
-        addEmailAddress: function () {
-            let data = Espo.Utils.cloneDeep(this.fetchEmailAddressData());
+            this.removeEmailAddress($block);
 
-            let o = {
-                emailAddress: '',
-                primary: !data.length,
-                optOut: this.emailAddressOptedOutByDefault,
-                invalid: false,
-                lower: '',
-            };
+            let $last = this.$el.find('.email-address').last();
 
-            data.push(o);
-
-            this.model.set(this.dataFieldName, data, {silent: true});
-
-            this.reRender()
-                .then(() => this.focusOnLast());
+            if ($last.length) {
+                $last[0].focus({preventScroll: true});
+            }
         },
+        'change input.email-address': function (e) {
+            let $input = $(e.currentTarget);
+            let $block = $input.closest('div.email-address-block');
 
-        removeEmailAddressBlock: function ($block) {
-            let changePrimary = false;
-
-            if ($block.find('button[data-property-type="primary"]').hasClass('active')) {
-                changePrimary = true;
+            if (this._itemJustRemoved) {
+                return;
             }
 
-            $block.remove();
-
-            if (changePrimary) {
-                this.$el.find('button[data-property-type="primary"]')
-                    .first().addClass('active').children().removeClass('text-muted');
+            if ($input.val() === '' && $block.length) {
+                this.removeEmailAddress($block);
+            }
+            else {
+                this.trigger('change');
             }
 
-            this.manageButtonsVisibility();
+            this.trigger('change');
+
             this.manageAddButton();
         },
-
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
-
-            this.manageButtonsVisibility();
+        'keypress input.email-address': function () {
             this.manageAddButton();
+        },
+        'paste input.email-address': function () {
+            setTimeout(() => this.manageAddButton(), 10);
+        },
+        'click [data-action="addEmailAddress"]': function () {
+            this.addEmailAddress();
+        },
+        'keydown input.email-address': function (e) {
+            let key = Espo.Utils.getKeyFromKeyEvent(e);
 
-            if (this.mode === this.MODE_SEARCH && this.getAcl().check('Email', 'create')) {
-                this.$element.autocomplete({
-                    serviceUrl: () => {
-                        return `EmailAddress/search` +
-                            `?maxSize=${this.getAutocompleteMaxCount()}`
-                    },
-                    paramName: 'q',
-                    minChars: 1,
-                    autoSelectFirst: true,
-                    triggerSelectOnValidInput: false,
-                    formatResult: (suggestion) => {
-                        return this.getHelper().escapeString(suggestion.name) + ' &#60;' +
-                            this.getHelper().escapeString(suggestion.id) + '&#62;';
-                    },
-                    transformResult: (response) => {
-                        response = JSON.parse(response);
-                        let list = [];
+            let $target = $(e.currentTarget);
 
-                        response.forEach(item => {
-                            list.push({
-                                id: item.emailAddress,
-                                name: item.entityName,
-                                emailAddress: item.emailAddress,
-                                entityId: item.entityId,
-                                entityName: item.entityName,
-                                entityType: item.entityType,
-                                data: item.emailAddress,
-                                value: item.emailAddress,
-                            });
+            if (key === 'Enter') {
+                if (!this.$el.find('[data-action="addEmailAddress"]').hasClass('disabled')) {
+                    this.addEmailAddress();
+
+                    e.stopPropagation();
+                }
+
+                return;
+            }
+
+            if (key === 'Backspace' && $target.val() === '') {
+                let $block = $target.closest('div.email-address-block');
+
+                this._itemJustRemoved = true;
+                setTimeout(() => this._itemJustRemoved = false, 100);
+
+                e.stopPropagation();
+
+                this.removeEmailAddress($block);
+
+                setTimeout(() => this.focusOnLast(true), 50);
+            }
+        },
+    },
+
+    focusOnLast: function (cursorAtEnd) {
+        let $item = this.$el.find('input.form-control').last();
+
+        $item.focus();
+
+        if (cursorAtEnd && $item[0]) {
+            // Not supported for email inputs.
+            // $item[0].setSelectionRange($item[0].value.length, $item[0].value.length);
+        }
+    },
+
+    removeEmailAddress: function ($block) {
+        if ($block.parent().children().length === 1) {
+            $block.find('input.email-address').val('');
+        } else {
+            this.removeEmailAddressBlock($block);
+        }
+
+        this.trigger('change');
+    },
+
+    addEmailAddress: function () {
+        let data = Espo.Utils.cloneDeep(this.fetchEmailAddressData());
+
+        let o = {
+            emailAddress: '',
+            primary: !data.length,
+            optOut: this.emailAddressOptedOutByDefault,
+            invalid: false,
+            lower: '',
+        };
+
+        data.push(o);
+
+        this.model.set(this.dataFieldName, data, {silent: true});
+
+        this.reRender()
+            .then(() => this.focusOnLast());
+    },
+
+    removeEmailAddressBlock: function ($block) {
+        let changePrimary = false;
+
+        if ($block.find('button[data-property-type="primary"]').hasClass('active')) {
+            changePrimary = true;
+        }
+
+        $block.remove();
+
+        if (changePrimary) {
+            this.$el.find('button[data-property-type="primary"]')
+                .first().addClass('active').children().removeClass('text-muted');
+        }
+
+        this.manageButtonsVisibility();
+        this.manageAddButton();
+    },
+
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
+
+        this.manageButtonsVisibility();
+        this.manageAddButton();
+
+        if (this.mode === this.MODE_SEARCH && this.getAcl().check('Email', 'create')) {
+            this.$element.autocomplete({
+                serviceUrl: () => {
+                    return `EmailAddress/search` +
+                        `?maxSize=${this.getAutocompleteMaxCount()}`
+                },
+                paramName: 'q',
+                minChars: 1,
+                autoSelectFirst: true,
+                triggerSelectOnValidInput: false,
+                formatResult: (suggestion) => {
+                    return this.getHelper().escapeString(suggestion.name) + ' &#60;' +
+                        this.getHelper().escapeString(suggestion.id) + '&#62;';
+                },
+                transformResult: (response) => {
+                    response = JSON.parse(response);
+                    let list = [];
+
+                    response.forEach(item => {
+                        list.push({
+                            id: item.emailAddress,
+                            name: item.entityName,
+                            emailAddress: item.emailAddress,
+                            entityId: item.entityId,
+                            entityName: item.entityName,
+                            entityType: item.entityType,
+                            data: item.emailAddress,
+                            value: item.emailAddress,
                         });
+                    });
 
-                        return {suggestions: list};
-                    },
-                    onSelect: (s) => {
-                        this.$element.val(s.emailAddress);
-                        this.$element.focus();
-                    },
-                });
-            }
-        },
-
-        manageAddButton: function () {
-            let $input = this.$el.find('input.email-address');
-            let c = 0;
-
-            $input.each((i, input) => {
-                if (input.value !== '') {
-                    c++;
-                }
+                    return {suggestions: list};
+                },
+                onSelect: (s) => {
+                    this.$element.val(s.emailAddress);
+                    this.$element.focus();
+                },
             });
+        }
+    },
 
-            if (c === $input.length) {
-                this.$el.find('[data-action="addEmailAddress"]')
-                    .removeClass('disabled')
-                    .removeAttr('disabled');
+    manageAddButton: function () {
+        let $input = this.$el.find('input.email-address');
+        let c = 0;
 
-                return;
+        $input.each((i, input) => {
+            if (input.value !== '') {
+                c++;
             }
+        });
 
+        if (c === $input.length) {
             this.$el.find('[data-action="addEmailAddress"]')
-                .addClass('disabled')
-                .attr('disabled', 'disabled');
-        },
+                .removeClass('disabled')
+                .removeAttr('disabled');
 
-        manageButtonsVisibility: function () {
-            let $primary = this.$el.find('button[data-property-type="primary"]');
-            let $remove = this.$el.find('button[data-action="removeEmailAddress"]');
+            return;
+        }
 
-            if ($primary.length > 1) {
-                $primary.removeClass('hidden');
-                $remove.removeClass('hidden');
-            } else {
-                $primary.addClass('hidden');
-                $remove.addClass('hidden');
-            }
-        },
+        this.$el.find('[data-action="addEmailAddress"]')
+            .addClass('disabled')
+            .attr('disabled', 'disabled');
+    },
 
-        mailTo: function (emailAddress) {
-            let attributes = {
-                status: 'Draft',
-                to: emailAddress
-            };
+    manageButtonsVisibility: function () {
+        let $primary = this.$el.find('button[data-property-type="primary"]');
+        let $remove = this.$el.find('button[data-action="removeEmailAddress"]');
 
-            let scope = this.model.name;
+        if ($primary.length > 1) {
+            $primary.removeClass('hidden');
+            $remove.removeClass('hidden');
+        } else {
+            $primary.addClass('hidden');
+            $remove.addClass('hidden');
+        }
+    },
 
-            switch (scope) {
-                case 'Account':
-                case 'Lead':
-                    attributes.parentType = scope;
+    mailTo: function (emailAddress) {
+        let attributes = {
+            status: 'Draft',
+            to: emailAddress
+        };
+
+        let scope = this.model.name;
+
+        switch (scope) {
+            case 'Account':
+            case 'Lead':
+                attributes.parentType = scope;
+                attributes.parentName = this.model.get('name');
+                attributes.parentId = this.model.id;
+                break;
+            case 'Contact':
+                if (this.getConfig().get('b2cMode')) {
+                    attributes.parentType = 'Contact';
                     attributes.parentName = this.model.get('name');
                     attributes.parentId = this.model.id;
-                    break;
-                case 'Contact':
-                    if (this.getConfig().get('b2cMode')) {
-                        attributes.parentType = 'Contact';
-                        attributes.parentName = this.model.get('name');
-                        attributes.parentId = this.model.id;
-                    } else {
-                        if (this.model.get('accountId')) {
-                            attributes.parentType = 'Account';
-                            attributes.parentName = this.model.get('accountName');
-                            attributes.parentId = this.model.get('accountId');
-                        }
-                    }
-                    break;
-            }
-
-            if (this.model.collection && this.model.collection.parentModel) {
-                if (this.checkParentTypeAvailability(this.model.collection.parentModel.entityType)) {
-                    attributes.parentType = this.model.collection.parentModel.entityType;
-                    attributes.parentId = this.model.collection.parentModel.id;
-                    attributes.parentName = this.model.collection.parentModel.get('name');
-                }
-            }
-
-            if (!attributes.parentId) {
-                if (this.checkParentTypeAvailability(this.model.name)) {
-                    attributes.parentType = this.model.name;
-                    attributes.parentId = this.model.id;
-                    attributes.parentName = this.model.get('name');
-                }
-            } else {
-                if (attributes.parentType && !this.checkParentTypeAvailability(attributes.parentType)) {
-                    attributes.parentType = null;
-                    attributes.parentId = null;
-                    attributes.parentName = null;
-                }
-            }
-
-
-            if (~['Contact', 'Lead', 'Account'].indexOf(this.model.name)) {
-                attributes.nameHash = {};
-                attributes.nameHash[emailAddress] = this.model.get('name');
-            }
-
-            if (
-                this.getConfig().get('emailForceUseExternalClient') ||
-                this.getPreferences().get('emailUseExternalClient') ||
-                !this.getAcl().checkScope('Email', 'create')
-            ) {
-                require('email-helper', EmailHelper => {
-                    let emailHelper = new EmailHelper();
-
-                    document.location.href = emailHelper
-                        .composeMailToLink(attributes, this.getConfig().get('outboundEmailBccAddress'));
-                });
-
-                return;
-            }
-
-            let viewName = this.getMetadata()
-                .get('clientDefs.' + this.scope + '.modalViews.compose') || 'views/modals/compose-email';
-
-            Espo.Ui.notify(' ... ');
-
-            this.createView('quickCreate', viewName, {
-                attributes: attributes,
-            }, view => {
-                view.render();
-                view.notify(false);
-            });
-        },
-
-        checkParentTypeAvailability: function (parentType) {
-            return ~(this.getMetadata()
-                .get(['entityDefs', 'Email', 'fields', 'parent', 'entityList']) || []).indexOf(parentType);
-        },
-
-        setup: function () {
-            this.dataFieldName = this.name + 'Data';
-            this.isOptedOutFieldName = this.name + 'IsOptedOut';
-            this.isInvalidFieldName = this.name + 'IsInvalid';
-
-            this.erasedPlaceholder = 'ERASED:';
-
-            this.emailAddressOptedOutByDefault = this.getConfig().get('emailAddressIsOptedOutByDefault');
-
-            this.itemMaxLength = this.getMetadata()
-                .get(['entityDefs', 'EmailAddress', 'fields', 'name', 'maxLength']) || 255;
-        },
-
-        fetchEmailAddressData: function () {
-            let data = [];
-
-            let $list = this.$el.find('div.email-address-block');
-
-            if ($list.length) {
-                $list.each((i, d) => {
-                    let row = {};
-                    let $d = $(d);
-
-                    row.emailAddress = $d.find('input.email-address').val().trim();
-
-                    if (row.emailAddress === '') {
-                        return;
-                    }
-
-                    row.primary = $d.find('button[data-property-type="primary"]').hasClass('active');
-                    row.optOut = $d.find('button[data-property-type="optOut"]').hasClass('active');
-                    row.invalid = $d.find('button[data-property-type="invalid"]').hasClass('active');
-                    row.lower = row.emailAddress.toLowerCase();
-
-                    data.push(row);
-                });
-            }
-
-            return data;
-        },
-
-
-        fetch: function () {
-            let data = {};
-
-            let addressData = this.fetchEmailAddressData() || [];
-
-            data[this.dataFieldName] = addressData;
-            data[this.name] = null;
-            data[this.isOptedOutFieldName] = false;
-            data[this.isInvalidFieldName] = false;
-
-            let primaryIndex = 0;
-
-            addressData.forEach((item, i) => {
-                if (item.primary) {
-                    primaryIndex = i;
-
-                    if (item.optOut) {
-                        data[this.isOptedOutFieldName] = true;
-                    }
-
-                    if (item.invalid) {
-                        data[this.isInvalidFieldName] = true;
+                } else {
+                    if (this.model.get('accountId')) {
+                        attributes.parentType = 'Account';
+                        attributes.parentName = this.model.get('accountName');
+                        attributes.parentId = this.model.get('accountId');
                     }
                 }
+                break;
+        }
+
+        if (this.model.collection && this.model.collection.parentModel) {
+            if (this.checkParentTypeAvailability(this.model.collection.parentModel.entityType)) {
+                attributes.parentType = this.model.collection.parentModel.entityType;
+                attributes.parentId = this.model.collection.parentModel.id;
+                attributes.parentName = this.model.collection.parentModel.get('name');
+            }
+        }
+
+        if (!attributes.parentId) {
+            if (this.checkParentTypeAvailability(this.model.name)) {
+                attributes.parentType = this.model.name;
+                attributes.parentId = this.model.id;
+                attributes.parentName = this.model.get('name');
+            }
+        } else {
+            if (attributes.parentType && !this.checkParentTypeAvailability(attributes.parentType)) {
+                attributes.parentType = null;
+                attributes.parentId = null;
+                attributes.parentName = null;
+            }
+        }
+
+
+        if (~['Contact', 'Lead', 'Account'].indexOf(this.model.name)) {
+            attributes.nameHash = {};
+            attributes.nameHash[emailAddress] = this.model.get('name');
+        }
+
+        if (
+            this.getConfig().get('emailForceUseExternalClient') ||
+            this.getPreferences().get('emailUseExternalClient') ||
+            !this.getAcl().checkScope('Email', 'create')
+        ) {
+            Espo.loader.require('email-helper', EmailHelper => {
+                let emailHelper = new EmailHelper();
+
+                document.location.href = emailHelper
+                    .composeMailToLink(attributes, this.getConfig().get('outboundEmailBccAddress'));
             });
 
-            if (addressData.length && primaryIndex > 0) {
-                let t = addressData[0];
+            return;
+        }
 
-                addressData[0] = addressData[primaryIndex];
-                addressData[primaryIndex] = t;
+        let viewName = this.getMetadata()
+            .get('clientDefs.' + this.scope + '.modalViews.compose') || 'views/modals/compose-email';
+
+        Espo.Ui.notify(' ... ');
+
+        this.createView('quickCreate', viewName, {
+            attributes: attributes,
+        }, view => {
+            view.render();
+            view.notify(false);
+        });
+    },
+
+    checkParentTypeAvailability: function (parentType) {
+        return ~(this.getMetadata()
+            .get(['entityDefs', 'Email', 'fields', 'parent', 'entityList']) || []).indexOf(parentType);
+    },
+
+    setup: function () {
+        this.dataFieldName = this.name + 'Data';
+        this.isOptedOutFieldName = this.name + 'IsOptedOut';
+        this.isInvalidFieldName = this.name + 'IsInvalid';
+
+        this.erasedPlaceholder = 'ERASED:';
+
+        this.emailAddressOptedOutByDefault = this.getConfig().get('emailAddressIsOptedOutByDefault');
+
+        this.itemMaxLength = this.getMetadata()
+            .get(['entityDefs', 'EmailAddress', 'fields', 'name', 'maxLength']) || 255;
+    },
+
+    fetchEmailAddressData: function () {
+        let data = [];
+
+        let $list = this.$el.find('div.email-address-block');
+
+        if ($list.length) {
+            $list.each((i, d) => {
+                let row = {};
+                let $d = $(d);
+
+                row.emailAddress = $d.find('input.email-address').val().trim();
+
+                if (row.emailAddress === '') {
+                    return;
+                }
+
+                row.primary = $d.find('button[data-property-type="primary"]').hasClass('active');
+                row.optOut = $d.find('button[data-property-type="optOut"]').hasClass('active');
+                row.invalid = $d.find('button[data-property-type="invalid"]').hasClass('active');
+                row.lower = row.emailAddress.toLowerCase();
+
+                data.push(row);
+            });
+        }
+
+        return data;
+    },
+
+
+    fetch: function () {
+        let data = {};
+
+        let addressData = this.fetchEmailAddressData() || [];
+
+        data[this.dataFieldName] = addressData;
+        data[this.name] = null;
+        data[this.isOptedOutFieldName] = false;
+        data[this.isInvalidFieldName] = false;
+
+        let primaryIndex = 0;
+
+        addressData.forEach((item, i) => {
+            if (item.primary) {
+                primaryIndex = i;
+
+                if (item.optOut) {
+                    data[this.isOptedOutFieldName] = true;
+                }
+
+                if (item.invalid) {
+                    data[this.isInvalidFieldName] = true;
+                }
             }
+        });
 
-            if (addressData.length) {
-                data[this.name] = addressData[0].emailAddress;
-            } else {
-                data[this.isOptedOutFieldName] = null;
-                data[this.isInvalidFieldName] = null;
-            }
+        if (addressData.length && primaryIndex > 0) {
+            let t = addressData[0];
 
-            return data;
-        },
-    });
+            addressData[0] = addressData[primaryIndex];
+            addressData[primaryIndex] = t;
+        }
+
+        if (addressData.length) {
+            data[this.name] = addressData[0].emailAddress;
+        } else {
+            data[this.isOptedOutFieldName] = null;
+            data[this.isInvalidFieldName] = null;
+        }
+
+        return data;
+    },
 });
diff --git a/client/src/views/fields/enum.js b/client/src/views/fields/enum.js
index 8eeb3756c8..6f4e77e45e 100644
--- a/client/src/views/fields/enum.js
+++ b/client/src/views/fields/enum.js
@@ -26,411 +26,403 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/enum', ['views/fields/base', 'ui/multi-select', 'ui/select'],
-function (Dep, /** module:ui/multi-select*/MultiSelect, /** module:ui/select*/Select) {
+/** @module views/fields/enum */
+
+import Dep from 'views/fields/base';
+import MultiSelect from 'ui/multi-select';
+import Select from 'ui/select'
+
+/**
+ * An enum field (select-box).
+ *
+ * @class
+ * @name Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    type: 'enum',
+
+    listTemplate: 'fields/enum/list',
+    listLinkTemplate: 'fields/enum/list-link',
+    detailTemplate: 'fields/enum/detail',
+    editTemplate: 'fields/enum/edit',
+    searchTemplate: 'fields/enum/search',
+
+    translatedOptions: null,
 
     /**
-     * An enum field (select-box).
-     *
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/enum
+     * @todo Remove? Always treat as true.
      */
-    return Dep.extend(/** @lends module:views/fields/enum.Class# */{
+    fetchEmptyValueAsNull: true,
 
-        type: 'enum',
+    searchTypeList: [
+        'anyOf',
+        'noneOf',
+        'isEmpty',
+        'isNotEmpty',
+    ],
 
-        listTemplate: 'fields/enum/list',
-        listLinkTemplate: 'fields/enum/list-link',
-        detailTemplate: 'fields/enum/detail',
-        editTemplate: 'fields/enum/edit',
-        searchTemplate: 'fields/enum/search',
+    validationElementSelector: '.selectize-control',
 
-        translatedOptions: null,
+    data: function () {
+        let data = Dep.prototype.data.call(this);
 
-        /**
-         * @todo Remove? Always treat as true.
-         */
-        fetchEmptyValueAsNull: true,
+        data.translatedOptions = this.translatedOptions;
 
-        searchTypeList: [
-            'anyOf',
-            'noneOf',
-            'isEmpty',
-            'isNotEmpty',
-        ],
+        let value = this.model.get(this.name);
 
-        validationElementSelector: '.selectize-control',
+        if (this.isReadMode() && this.styleMap) {
+            data.style = this.styleMap[value || ''] || 'default';
+        }
 
-        data: function () {
-            let data = Dep.prototype.data.call(this);
-
-            data.translatedOptions = this.translatedOptions;
-
-            let value = this.model.get(this.name);
-
-            if (this.isReadMode() && this.styleMap) {
-                data.style = this.styleMap[value || ''] || 'default';
-            }
-
-            if (this.isReadMode()) {
-                if (this.params.displayAsLabel && data.style && data.style !== 'default') {
-                    data.class = 'label label-md label';
-                } else {
-                    data.class = 'text';
-                }
-            }
-
-            let translationKey = value || '';
-
-            if (
-                typeof value !== 'undefined' && value !== null && value !== ''
-                ||
-                translationKey === '' && (
-                    translationKey in (this.translatedOptions || {}) &&
-                    (this.translatedOptions || {})[translationKey] !== ''
-                )
-            ) {
-                data.isNotEmpty = true;
-            }
-
-            data.valueIsSet = this.model.has(this.name);
-
-            if (data.isNotEmpty) {
-                data.valueTranslated =
-                    this.translatedOptions ?
-                        (this.translatedOptions[translationKey] || value) :
-                        this.getLanguage().translateOption(translationKey, this.name, this.entityType);
-
-            }
-
-            return data;
-        },
-
-        setup: function () {
-            if (!this.params.options) {
-                let methodName = 'get' + Espo.Utils.upperCaseFirst(this.name) + 'Options';
-
-                if (typeof this.model[methodName] === 'function') {
-                    this.params.options = this.model[methodName].call(this.model);
-                }
-            }
-
-            let optionsPath = this.params.optionsPath;
-            /** @type {?string} */
-            let optionsReference = this.params.optionsReference;
-
-            if (!optionsPath && optionsReference) {
-                let [refEntityType, refField] = optionsReference.split('.');
-
-                optionsPath = `entityDefs.${refEntityType}.fields.${refField}.options`;
-            }
-
-            if (optionsPath) {
-                this.params.options = Espo.Utils.clone(this.getMetadata().get(optionsPath)) || [];
-            }
-
-            this.styleMap = this.params.style || this.model.getFieldParam(this.name, 'style') || {};
-
-            this.setupOptions();
-
-            if ('translatedOptions' in this.options) {
-                this.translatedOptions = this.options.translatedOptions;
-            }
-
-            if ('translatedOptions' in this.params) {
-                this.translatedOptions = this.params.translatedOptions;
-            }
-
-            this.setupTranslation();
-
-            if (this.translatedOptions === null) {
-                this.translatedOptions = this.getLanguage()
-                    .translate(this.name, 'options', this.model.name) || {};
-
-                if (this.translatedOptions === this.name) {
-                    this.translatedOptions = null;
-                }
-            }
-
-            if (this.params.isSorted && this.translatedOptions) {
-                this.params.options = Espo.Utils.clone(this.params.options) || [];
-
-                this.params.options = this.params.options.sort((v1, v2) => {
-                     return (this.translatedOptions[v1] || v1)
-                         .localeCompare(this.translatedOptions[v2] || v2);
-                });
-            }
-
-            if (this.options.customOptionList) {
-                this.setOptionList(this.options.customOptionList);
-            }
-        },
-
-        setupTranslation: function () {
-            let translation = this.params.translation;
-            /** @type {?string} */
-            let optionsReference = this.params.optionsReference;
-
-            if (!translation && optionsReference) {
-                let [refEntityType, refField] = optionsReference.split('.');
-
-                translation = `${refEntityType}.options.${refField}`;
-            }
-
-            if (!translation) {
-                return;
-            }
-
-            let translationObj;
-
-            let arr = translation.split('.');
-            let pointer = this.getLanguage().data;
-
-            arr.forEach(key => {
-                if (key in pointer) {
-                    pointer = pointer[key];
-                    translationObj = pointer;
-                }
-            });
-
-            this.translatedOptions = null;
-
-            let translatedOptions = {};
-
-            if (!this.params.options) {
-                return;
-            }
-
-            this.params.options.forEach(item => {
-                if (typeof translationObj === 'object' && item in translationObj) {
-                    translatedOptions[item] = translationObj[item];
-                }
-                else if (
-                    Array.isArray(translationObj) &&
-                    typeof item === 'number' &&
-                    typeof translationObj[item] !== 'undefined'
-                ) {
-                    translatedOptions[item.toString()] = translationObj[item];
-                }
-                else {
-                    translatedOptions[item] = item;
-                }
-            });
-
-            let value = this.model.get(this.name);
-
-            if ((value || value === '') && !(value in translatedOptions)) {
-                if (typeof translationObj === 'object' && value in translationObj) {
-                    translatedOptions[value] = translationObj[value];
-                }
-            }
-
-            this.translatedOptions = translatedOptions;
-        },
-
-        /**
-         * Set up options.
-         */
-        setupOptions: function () {},
-
-        /**
-         * Set an option list.
-         *
-         * @param {string[]} optionList An option list.
-         */
-        setOptionList: function (optionList) {
-            let previousOptions = this.params.options;
-
-            if (!this.originalOptionList) {
-                this.originalOptionList = this.params.options;
-            }
-
-            let newOptions = Espo.Utils.clone(optionList) || [];
-
-            this.params.options = newOptions;
-
-            let isChanged = !_(previousOptions).isEqual(optionList);
-
-            if (!this.isEditMode() || !isChanged) {
-                return;
-            }
-
-            let triggerChange = false;
-            let currentValue = this.model.get(this.name);
-
-            if (!newOptions.includes(currentValue) && this.isReady) {
-                this.model.set(this.name, newOptions[0] ?? null, {silent: true});
-
-                triggerChange = true;
-            }
-
-            this.reRender()
-                .then(() => {
-                    if (triggerChange) {
-                        this.trigger('change');
-                    }
-                });
-        },
-
-        /**
-         * Reset a previously set option list.
-         */
-        resetOptionList: function () {
-            if (!this.originalOptionList) {
-                return;
-            }
-
-            let previousOptions = this.params.options;
-
-            this.params.options = Espo.Utils.clone(this.originalOptionList);
-
-            let isChanged = !_(previousOptions).isEqual(this.originalOptionList);
-
-            if (!this.isEditMode() || !isChanged) {
-                return;
-            }
-
-            if (this.isRendered()) {
-                this.reRender();
-            }
-        },
-
-        setupSearch: function () {
-            this.events = _.extend({
-                'change select.search-type': (e) => {
-                    this.handleSearchType($(e.currentTarget).val());
-                },
-            }, this.events || {});
-        },
-
-        handleSearchType: function (type) {
-            var $inputContainer = this.$el.find('div.input-container');
-
-            if (~['anyOf', 'noneOf'].indexOf(type)) {
-                $inputContainer.removeClass('hidden');
+        if (this.isReadMode()) {
+            if (this.params.displayAsLabel && data.style && data.style !== 'default') {
+                data.class = 'label label-md label';
             } else {
-                $inputContainer.addClass('hidden');
+                data.class = 'text';
             }
-        },
+        }
 
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
+        let translationKey = value || '';
 
-            if (this.isSearchMode()) {
-                this.$element = this.$el.find('.main-element');
+        if (
+            typeof value !== 'undefined' && value !== null && value !== ''
+            ||
+            translationKey === '' && (
+                translationKey in (this.translatedOptions || {}) &&
+                (this.translatedOptions || {})[translationKey] !== ''
+            )
+        ) {
+            data.isNotEmpty = true;
+        }
 
-                let type = this.$el.find('select.search-type').val();
+        data.valueIsSet = this.model.has(this.name);
 
-                this.handleSearchType(type);
+        if (data.isNotEmpty) {
+            data.valueTranslated =
+                this.translatedOptions ?
+                    (this.translatedOptions[translationKey] || value) :
+                    this.getLanguage().translateOption(translationKey, this.name, this.entityType);
 
-                let valueList = this.getSearchParamsData().valueList || this.searchParams.value || [];
+        }
 
-                this.$element.val(valueList.join(':,:'));
+        return data;
+    },
 
-                let items = [];
+    setup: function () {
+        if (!this.params.options) {
+            let methodName = 'get' + Espo.Utils.upperCaseFirst(this.name) + 'Options';
 
-                (this.params.options || []).forEach(value => {
-                    let label = this.getLanguage().translateOption(value, this.name, this.scope);
-
-                    if (this.translatedOptions) {
-                        if (value in this.translatedOptions) {
-                            label = this.translatedOptions[value];
-                        }
-                    }
-
-                    if (label === '') {
-                        return;
-                    }
-
-                    items.push({
-                        value: value,
-                        text: label,
-                    });
-                });
-
-                /** @type {module:ui/multi-select~Options} */
-                let multiSelectOptions = {
-                    items: items,
-                    delimiter: ':,:',
-                    matchAnyWord: true,
-                };
-
-                MultiSelect.init(this.$element, multiSelectOptions);
-
-                this.$el.find('.selectize-dropdown-content').addClass('small');
-                this.$el.find('select.search-type').on('change', () => this.trigger('change'));
-                this.$element.on('change', () => this.trigger('change'));
+            if (typeof this.model[methodName] === 'function') {
+                this.params.options = this.model[methodName].call(this.model);
             }
+        }
 
-            if (this.isEditMode() || this.isSearchMode()) {
-                Select.init(this.$element, {matchAnyWord: true});
+        let optionsPath = this.params.optionsPath;
+        /** @type {?string} */
+        let optionsReference = this.params.optionsReference;
+
+        if (!optionsPath && optionsReference) {
+            let [refEntityType, refField] = optionsReference.split('.');
+
+            optionsPath = `entityDefs.${refEntityType}.fields.${refField}.options`;
+        }
+
+        if (optionsPath) {
+            this.params.options = Espo.Utils.clone(this.getMetadata().get(optionsPath)) || [];
+        }
+
+        this.styleMap = this.params.style || this.model.getFieldParam(this.name, 'style') || {};
+
+        this.setupOptions();
+
+        if ('translatedOptions' in this.options) {
+            this.translatedOptions = this.options.translatedOptions;
+        }
+
+        if ('translatedOptions' in this.params) {
+            this.translatedOptions = this.params.translatedOptions;
+        }
+
+        this.setupTranslation();
+
+        if (this.translatedOptions === null) {
+            this.translatedOptions = this.getLanguage()
+                .translate(this.name, 'options', this.model.name) || {};
+
+            if (this.translatedOptions === this.name) {
+                this.translatedOptions = null;
             }
-        },
+        }
 
-        focusOnInlineEdit: function () {
-            Select.focus(this.$element);
-        },
+        if (this.params.isSorted && this.translatedOptions) {
+            this.params.options = Espo.Utils.clone(this.params.options) || [];
 
-        validateRequired: function () {
-            if (this.isRequired()) {
-                if (!this.model.get(this.name)) {
-                    let msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
+            this.params.options = this.params.options.sort((v1, v2) => {
+                 return (this.translatedOptions[v1] || v1)
+                     .localeCompare(this.translatedOptions[v2] || v2);
+            });
+        }
 
-                    this.showValidationMessage(msg);
+        if (this.options.customOptionList) {
+            this.setOptionList(this.options.customOptionList);
+        }
+    },
 
-                    return true;
+    setupTranslation: function () {
+        let translation = this.params.translation;
+        /** @type {?string} */
+        let optionsReference = this.params.optionsReference;
+
+        if (!translation && optionsReference) {
+            let [refEntityType, refField] = optionsReference.split('.');
+
+            translation = `${refEntityType}.options.${refField}`;
+        }
+
+        if (!translation) {
+            return;
+        }
+
+        let translationObj;
+
+        let arr = translation.split('.');
+        let pointer = this.getLanguage().data;
+
+        arr.forEach(key => {
+            if (key in pointer) {
+                pointer = pointer[key];
+                translationObj = pointer;
+            }
+        });
+
+        this.translatedOptions = null;
+
+        let translatedOptions = {};
+
+        if (!this.params.options) {
+            return;
+        }
+
+        this.params.options.forEach(item => {
+            if (typeof translationObj === 'object' && item in translationObj) {
+                translatedOptions[item] = translationObj[item];
+            }
+            else if (
+                Array.isArray(translationObj) &&
+                typeof item === 'number' &&
+                typeof translationObj[item] !== 'undefined'
+            ) {
+                translatedOptions[item.toString()] = translationObj[item];
+            }
+            else {
+                translatedOptions[item] = item;
+            }
+        });
+
+        let value = this.model.get(this.name);
+
+        if ((value || value === '') && !(value in translatedOptions)) {
+            if (typeof translationObj === 'object' && value in translationObj) {
+                translatedOptions[value] = translationObj[value];
+            }
+        }
+
+        this.translatedOptions = translatedOptions;
+    },
+
+    /**
+     * Set up options.
+     */
+    setupOptions: function () {},
+
+    /**
+     * Set an option list.
+     *
+     * @param {string[]} optionList An option list.
+     */
+    setOptionList: function (optionList) {
+        let previousOptions = this.params.options;
+
+        if (!this.originalOptionList) {
+            this.originalOptionList = this.params.options;
+        }
+
+        let newOptions = Espo.Utils.clone(optionList) || [];
+
+        this.params.options = newOptions;
+
+        let isChanged = !_(previousOptions).isEqual(optionList);
+
+        if (!this.isEditMode() || !isChanged) {
+            return;
+        }
+
+        let triggerChange = false;
+        let currentValue = this.model.get(this.name);
+
+        if (!newOptions.includes(currentValue) && this.isReady) {
+            this.model.set(this.name, newOptions[0] ?? null, {silent: true});
+
+            triggerChange = true;
+        }
+
+        this.reRender()
+            .then(() => {
+                if (triggerChange) {
+                    this.trigger('change');
                 }
-            }
-        },
+            });
+    },
 
-        fetch: function () {
-            let value = this.$element.val();
+    /**
+     * Reset a previously set option list.
+     */
+    resetOptionList: function () {
+        if (!this.originalOptionList) {
+            return;
+        }
 
-            if (this.fetchEmptyValueAsNull && !value) {
-                value = null;
-            }
+        let previousOptions = this.params.options;
 
-            let data = {};
+        this.params.options = Espo.Utils.clone(this.originalOptionList);
 
-            data[this.name] = value;
+        let isChanged = !_(previousOptions).isEqual(this.originalOptionList);
 
-            return data;
-        },
+        if (!this.isEditMode() || !isChanged) {
+            return;
+        }
 
-        parseItemForSearch: function (item) {
-            return item;
-        },
+        if (this.isRendered()) {
+            this.reRender();
+        }
+    },
 
-        fetchSearch: function () {
-            let type = this.fetchSearchType();
+    setupSearch: function () {
+        this.events = _.extend({
+            'change select.search-type': (e) => {
+                this.handleSearchType($(e.currentTarget).val());
+            },
+        }, this.events || {});
+    },
 
-            let list = this.$element.val().split(':,:');
+    handleSearchType: function (type) {
+        var $inputContainer = this.$el.find('div.input-container');
 
-            if (list.length === 1 && list[0] === '') {
-                list = [];
-            }
+        if (~['anyOf', 'noneOf'].indexOf(type)) {
+            $inputContainer.removeClass('hidden');
+        } else {
+            $inputContainer.addClass('hidden');
+        }
+    },
 
-            list.forEach((item, i) => {
-                list[i] = this.parseItemForSearch(item);
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
+
+        if (this.isSearchMode()) {
+            this.$element = this.$el.find('.main-element');
+
+            let type = this.$el.find('select.search-type').val();
+
+            this.handleSearchType(type);
+
+            let valueList = this.getSearchParamsData().valueList || this.searchParams.value || [];
+
+            this.$element.val(valueList.join(':,:'));
+
+            let items = [];
+
+            (this.params.options || []).forEach(value => {
+                let label = this.getLanguage().translateOption(value, this.name, this.scope);
+
+                if (this.translatedOptions) {
+                    if (value in this.translatedOptions) {
+                        label = this.translatedOptions[value];
+                    }
+                }
+
+                if (label === '') {
+                    return;
+                }
+
+                items.push({
+                    value: value,
+                    text: label,
+                });
             });
 
-            if (type === 'anyOf') {
-                if (list.length === 0) {
-                    return {
-                        type: 'any',
-                        data: {
-                            type: 'anyOf',
-                            valueList: list,
-                        },
-                    };
-                }
+            /** @type {module:ui/multi-select~Options} */
+            let multiSelectOptions = {
+                items: items,
+                delimiter: ':,:',
+                matchAnyWord: true,
+            };
 
+            MultiSelect.init(this.$element, multiSelectOptions);
+
+            this.$el.find('.selectize-dropdown-content').addClass('small');
+            this.$el.find('select.search-type').on('change', () => this.trigger('change'));
+            this.$element.on('change', () => this.trigger('change'));
+        }
+
+        if (this.isEditMode() || this.isSearchMode()) {
+            Select.init(this.$element, {matchAnyWord: true});
+        }
+    },
+
+    focusOnInlineEdit: function () {
+        Select.focus(this.$element);
+    },
+
+    validateRequired: function () {
+        if (this.isRequired()) {
+            if (!this.model.get(this.name)) {
+                let msg = this.translate('fieldIsRequired', 'messages')
+                    .replace('{field}', this.getLabelText());
+
+                this.showValidationMessage(msg);
+
+                return true;
+            }
+        }
+    },
+
+    fetch: function () {
+        let value = this.$element.val();
+
+        if (this.fetchEmptyValueAsNull && !value) {
+            value = null;
+        }
+
+        let data = {};
+
+        data[this.name] = value;
+
+        return data;
+    },
+
+    parseItemForSearch: function (item) {
+        return item;
+    },
+
+    fetchSearch: function () {
+        let type = this.fetchSearchType();
+
+        let list = this.$element.val().split(':,:');
+
+        if (list.length === 1 && list[0] === '') {
+            list = [];
+        }
+
+        list.forEach((item, i) => {
+            list[i] = this.parseItemForSearch(item);
+        });
+
+        if (type === 'anyOf') {
+            if (list.length === 0) {
                 return {
-                    type: 'in',
-                    value: list,
+                    type: 'any',
                     data: {
                         type: 'anyOf',
                         valueList: list,
@@ -438,30 +430,20 @@ function (Dep, /** module:ui/multi-select*/MultiSelect, /** module:ui/select*/Se
                 };
             }
 
-            if (type === 'noneOf') {
-                if (list.length === 0) {
-                    return {
-                        type: 'any',
-                        data: {
-                            type: 'noneOf',
-                            valueList: list,
-                        },
-                    };
-                }
+            return {
+                type: 'in',
+                value: list,
+                data: {
+                    type: 'anyOf',
+                    valueList: list,
+                },
+            };
+        }
 
+        if (type === 'noneOf') {
+            if (list.length === 0) {
                 return {
-                    type: 'or',
-                    value: [
-                        {
-                            type: 'isNull',
-                            attribute: this.name,
-                        },
-                        {
-                            type: 'notIn',
-                            value: list,
-                            attribute: this.name,
-                        },
-                    ],
+                    type: 'any',
                     data: {
                         type: 'noneOf',
                         valueList: list,
@@ -469,49 +451,68 @@ function (Dep, /** module:ui/multi-select*/MultiSelect, /** module:ui/select*/Se
                 };
             }
 
-            if (type === 'isEmpty') {
-                return {
-                    type: 'or',
-                    value: [
-                        {
-                            type: 'isNull',
-                            attribute: this.name,
-                        },
-                        {
-                            type: 'equals',
-                            value: '',
-                            attribute: this.name,
-                        }
-                    ],
-                    data: {
-                        type: 'isEmpty',
+            return {
+                type: 'or',
+                value: [
+                    {
+                        type: 'isNull',
+                        attribute: this.name,
                     },
-                };
-            }
-
-            if (type === 'isNotEmpty') {
-                return {
-                    type: 'and',
-                    value: [
-                        {
-                            type: 'isNotNull',
-                            attribute: this.name,
-                        },
-                        {
-                            type: 'notEquals',
-                            value: '',
-                            attribute: this.name,
-                        },
-                    ],
-                    data: {
-                        type: 'isNotEmpty',
+                    {
+                        type: 'notIn',
+                        value: list,
+                        attribute: this.name,
                     },
-                };
-            }
-        },
+                ],
+                data: {
+                    type: 'noneOf',
+                    valueList: list,
+                },
+            };
+        }
 
-        getSearchType: function () {
-            return this.getSearchParamsData().type || 'anyOf';
-        },
-    });
+        if (type === 'isEmpty') {
+            return {
+                type: 'or',
+                value: [
+                    {
+                        type: 'isNull',
+                        attribute: this.name,
+                    },
+                    {
+                        type: 'equals',
+                        value: '',
+                        attribute: this.name,
+                    }
+                ],
+                data: {
+                    type: 'isEmpty',
+                },
+            };
+        }
+
+        if (type === 'isNotEmpty') {
+            return {
+                type: 'and',
+                value: [
+                    {
+                        type: 'isNotNull',
+                        attribute: this.name,
+                    },
+                    {
+                        type: 'notEquals',
+                        value: '',
+                        attribute: this.name,
+                    },
+                ],
+                data: {
+                    type: 'isNotEmpty',
+                },
+            };
+        }
+    },
+
+    getSearchType: function () {
+        return this.getSearchParamsData().type || 'anyOf';
+    },
 });
diff --git a/client/src/views/fields/file.js b/client/src/views/fields/file.js
index 55aa9ea40f..a8996418be 100644
--- a/client/src/views/fields/file.js
+++ b/client/src/views/fields/file.js
@@ -26,787 +26,779 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/file', ['views/fields/link', 'helpers/file-upload'], function (Dep, FileUpload) {
+/** @module views/fields/file */
 
-    /**
-     * A file field.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/fields/link.Class
-     * @memberOf module:views/fields/file
-     */
-    return Dep.extend(/** @lends module:views/fields/file.Class# */{
+import Dep from 'views/fields/link';
+import FileUpload from 'helpers/file-upload';
 
-        type: 'file',
+/**
+ * A file field.
+ *
+ * @class Class
+ * @extends module:views/fields/link
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        listTemplate: 'fields/file/list',
+    type: 'file',
 
-        listLinkTemplate: 'fields/file/list',
+    listTemplate: 'fields/file/list',
+    listLinkTemplate: 'fields/file/list',
+    detailTemplate: 'fields/file/detail',
+    editTemplate: 'fields/file/edit',
 
-        detailTemplate: 'fields/file/detail',
+    showPreview: false,
+    accept: false,
+    defaultType: false,
+    previewSize: 'small',
+    validations: ['ready', 'required'],
+    searchTypeList: ['isNotEmpty', 'isEmpty'],
 
-        editTemplate: 'fields/file/edit',
+    ROW_HEIGHT: 37,
 
-        showPreview: false,
+    events: {
+        'click a.remove-attachment': function (e) {
+            let $div = $(e.currentTarget).parent();
 
-        accept: false,
+            this.deleteAttachment();
 
-        defaultType: false,
+            $div.parent().remove();
 
-        previewSize: 'small',
+            this.$el.find('input.file').val(null);
 
-        validations: ['ready', 'required'],
-
-        searchTypeList: ['isNotEmpty', 'isEmpty'],
-
-        ROW_HEIGHT: 37,
-
-        events: {
-            'click a.remove-attachment': function (e) {
-                let $div = $(e.currentTarget).parent();
-
-                this.deleteAttachment();
-
-                $div.parent().remove();
-
-                this.$el.find('input.file').val(null);
-
-                setTimeout(() => this.focusOnUploadButton(), 10);
-            },
-            'change input.file': function (e) {
-                let $file = $(e.currentTarget);
-                let files = e.currentTarget.files;
-
-                if (!files.length) {
-                    return;
-                }
-
-                this.uploadFile(files[0]);
-
-                e.target.value = null;
-
-                $file.replaceWith($file.clone(true));
-            },
-            'click a[data-action="showImagePreview"]': function (e) {
-                e.preventDefault();
-
-                var id = this.model.get(this.idName);
-
-                this.createView('preview', 'views/modals/image-preview', {
-                    id: id,
-                    model: this.model,
-                    name: this.model.get(this.nameName),
-                }, (view) => {
-                    view.render();
-                });
-            },
-            'click a.action[data-action="insertFromSource"]': function (e) {
-                var name = $(e.currentTarget).data('name');
-
-                this.insertFromSource(name);
-            },
-            'keydown label.attach-file-label': function (e) {
-                let key = Espo.Utils.getKeyFromKeyEvent(e);
-
-                if (key === 'Enter') {
-                    this.$el.find('input.file').get(0).click();
-                }
-            },
+            setTimeout(() => this.focusOnUploadButton(), 10);
         },
+        'change input.file': function (e) {
+            let $file = $(e.currentTarget);
+            let files = e.currentTarget.files;
 
-        data: function () {
-            var data =_.extend({
-                id: this.model.get(this.idName),
-                acceptAttribute: this.acceptAttribute,
-            }, Dep.prototype.data.call(this));
-
-            if (this.mode === this.MODE_EDIT) {
-                data.sourceList = this.sourceList;
+            if (!files.length) {
+                return;
             }
 
-            data.valueIsSet = this.model.has(this.idName);
+            this.uploadFile(files[0]);
 
-            return data;
+            e.target.value = null;
+
+            $file.replaceWith($file.clone(true));
         },
+        'click a[data-action="showImagePreview"]': function (e) {
+            e.preventDefault();
 
-        showValidationMessage: function (msg, selector) {
-            var $label = this.$el.find('label');
+            var id = this.model.get(this.idName);
 
-            var title = $label.attr('title');
-
-            $label.attr('title', '');
-
-            Dep.prototype.showValidationMessage.call(this, msg, selector);
-
-            $label.attr('title', title);
+            this.createView('preview', 'views/modals/image-preview', {
+                id: id,
+                model: this.model,
+                name: this.model.get(this.nameName),
+            }, (view) => {
+                view.render();
+            });
         },
+        'click a.action[data-action="insertFromSource"]': function (e) {
+            var name = $(e.currentTarget).data('name');
 
-        validateRequired: function () {
-            if (this.isRequired()) {
-                if (this.model.get(this.idName) == null) {
-                    var msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
+            this.insertFromSource(name);
+        },
+        'keydown label.attach-file-label': function (e) {
+            let key = Espo.Utils.getKeyFromKeyEvent(e);
 
-                    var $target;
-
-                    if (this.isUploading) {
-                        $target = this.$el.find('.gray-box');
-                    }
-                    else {
-                        $target = this.$el.find('.attachment-button label');
-                    }
-
-                    this.showValidationMessage(msg, $target);
-
-                    return true;
-                }
+            if (key === 'Enter') {
+                this.$el.find('input.file').get(0).click();
             }
         },
+    },
 
-        validateReady: function () {
-            if (this.isUploading) {
-                var $target = this.$el.find('.gray-box');
+    data: function () {
+        var data =_.extend({
+            id: this.model.get(this.idName),
+            acceptAttribute: this.acceptAttribute,
+        }, Dep.prototype.data.call(this));
 
-                var msg = this.translate('fieldIsUploading', 'messages')
+        if (this.mode === this.MODE_EDIT) {
+            data.sourceList = this.sourceList;
+        }
+
+        data.valueIsSet = this.model.has(this.idName);
+
+        return data;
+    },
+
+    showValidationMessage: function (msg, selector) {
+        var $label = this.$el.find('label');
+
+        var title = $label.attr('title');
+
+        $label.attr('title', '');
+
+        Dep.prototype.showValidationMessage.call(this, msg, selector);
+
+        $label.attr('title', title);
+    },
+
+    validateRequired: function () {
+        if (this.isRequired()) {
+            if (this.model.get(this.idName) == null) {
+                var msg = this.translate('fieldIsRequired', 'messages')
                     .replace('{field}', this.getLabelText());
 
+                var $target;
+
+                if (this.isUploading) {
+                    $target = this.$el.find('.gray-box');
+                }
+                else {
+                    $target = this.$el.find('.attachment-button label');
+                }
+
                 this.showValidationMessage(msg, $target);
 
                 return true;
             }
-        },
+        }
+    },
 
-        setup: function () {
-            this.nameName = this.name + 'Name';
-            this.idName = this.name + 'Id';
-            this.typeName = this.name + 'Type';
-            this.foreignScope = 'Attachment';
+    validateReady: function () {
+        if (this.isUploading) {
+            var $target = this.$el.find('.gray-box');
 
-            this.previewSize = this.options.previewSize || this.params.previewSize || this.previewSize;
+            var msg = this.translate('fieldIsUploading', 'messages')
+                .replace('{field}', this.getLabelText());
 
-            this.previewTypeList = this.getMetadata().get(['app', 'image', 'previewFileTypeList']) || [];
-            this.imageSizes = this.getMetadata().get(['app', 'image', 'sizes']) || {};
+            this.showValidationMessage(msg, $target);
 
-            var sourceDefs = this.getMetadata().get(['clientDefs', 'Attachment', 'sourceDefs']) || {};
+            return true;
+        }
+    },
 
-            this.sourceList = Espo.Utils.clone(this.params.sourceList || []);
+    setup: function () {
+        this.nameName = this.name + 'Name';
+        this.idName = this.name + 'Id';
+        this.typeName = this.name + 'Type';
+        this.foreignScope = 'Attachment';
 
-            this.sourceList = this.sourceList
-                .concat(
-                    this.getMetadata().get(['clientDefs', 'Attachment', 'generalSourceList']) || []
-                )
-                .filter((item, i, self) => {
-                    return self.indexOf(item) === i;
-                })
-                .filter((item) => {
-                    var defs = sourceDefs[item] || {};
+        this.previewSize = this.options.previewSize || this.params.previewSize || this.previewSize;
 
-                    if (defs.accessDataList) {
-                        if (
-                            !Espo.Utils.checkAccessDataList(
-                                defs.accessDataList, this.getAcl(), this.getUser()
-                            )
-                        ) {
-                            return false;
-                        }
-                    }
+        this.previewTypeList = this.getMetadata().get(['app', 'image', 'previewFileTypeList']) || [];
+        this.imageSizes = this.getMetadata().get(['app', 'image', 'sizes']) || {};
 
-                    if (defs.configCheck) {
-                        var arr = defs.configCheck.split('.');
+        var sourceDefs = this.getMetadata().get(['clientDefs', 'Attachment', 'sourceDefs']) || {};
 
-                        if (!this.getConfig().getByPath(arr)) {
-                            return false;
-                        }
-                    }
+        this.sourceList = Espo.Utils.clone(this.params.sourceList || []);
 
-                    return true;
-                });
-
-            if ('showPreview' in this.params) {
-                this.showPreview = this.params.showPreview;
-            }
-
-            if ('accept' in this.params) {
-                this.accept = this.params.accept;
-            }
-
-            if (this.accept && this.accept.length) {
-                this.acceptAttribute = this.accept.join(', ');
-            }
-
-            this.on('remove', () => {
-                if (this.resizeIsBeingListened) {
-                    $(window).off('resize.' + this.cid);
-                }
-            });
-
-            this.on('inline-edit-off', () => {
-                this.isUploading = false;
-            });
-        },
-
-        afterRender: function () {
-            if (this.mode === this.MODE_EDIT) {
-                this.$attachment = this.$el.find('div.attachment');
-
-                let name = this.model.get(this.nameName);
-                let type = this.model.get(this.typeName) || this.defaultType;
-                let id = this.model.get(this.idName);
-
-                if (id) {
-                    this.addAttachmentBox(name, type, id);
-                }
-
-                this.$el.off('drop');
-                this.$el.off('dragover');
-                this.$el.off('dragleave');
-
-                this.$el.on('drop', e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    event = e.originalEvent;
+        this.sourceList = this.sourceList
+            .concat(
+                this.getMetadata().get(['clientDefs', 'Attachment', 'generalSourceList']) || []
+            )
+            .filter((item, i, self) => {
+                return self.indexOf(item) === i;
+            })
+            .filter((item) => {
+                var defs = sourceDefs[item] || {};
 
+                if (defs.accessDataList) {
                     if (
-                        event.dataTransfer &&
-                        event.dataTransfer.files &&
-                        event.dataTransfer.files.length
+                        !Espo.Utils.checkAccessDataList(
+                            defs.accessDataList, this.getAcl(), this.getUser()
+                        )
                     ) {
-                        this.uploadFile(event.dataTransfer.files[0]);
+                        return false;
                     }
-                });
-
-                this.$el.on('dragover', e => {
-                    e.preventDefault();
-                });
-
-                this.$el.on('dragleave', e =>{
-                    e.preventDefault();
-                });
-            }
-
-            if (this.mode === this.MODE_SEARCH) {
-                let type = this.$el.find('select.search-type').val();
-
-                this.handleSearchType(type);
-            }
-
-            if (this.mode === this.MODE_DETAIL) {
-                if (this.previewSize === 'large') {
-                    this.handleResize();
-                    this.resizeIsBeingListened = true;
-
-                    $(window).on('resize.' + this.cid, () => {
-                        this.handleResize();
-                    });
                 }
+
+                if (defs.configCheck) {
+                    var arr = defs.configCheck.split('.');
+
+                    if (!this.getConfig().getByPath(arr)) {
+                        return false;
+                    }
+                }
+
+                return true;
+            });
+
+        if ('showPreview' in this.params) {
+            this.showPreview = this.params.showPreview;
+        }
+
+        if ('accept' in this.params) {
+            this.accept = this.params.accept;
+        }
+
+        if (this.accept && this.accept.length) {
+            this.acceptAttribute = this.accept.join(', ');
+        }
+
+        this.on('remove', () => {
+            if (this.resizeIsBeingListened) {
+                $(window).off('resize.' + this.cid);
             }
-        },
+        });
 
-        focusOnInlineEdit: function () {
-            this.focusOnUploadButton();
-        },
+        this.on('inline-edit-off', () => {
+            this.isUploading = false;
+        });
+    },
 
-        focusOnUploadButton: function () {
-            let $element = this.$el.find('.attach-file-label');
+    afterRender: function () {
+        if (this.mode === this.MODE_EDIT) {
+            this.$attachment = this.$el.find('div.attachment');
 
-            if ($element.length) {
-                $element.focus();
-            }
-        },
+            let name = this.model.get(this.nameName);
+            let type = this.model.get(this.typeName) || this.defaultType;
+            let id = this.model.get(this.idName);
 
-        handleResize: function () {
-            let width = this.$el.width();
-
-            this.$el.find('img.image-preview').css('maxWidth', width + 'px');
-        },
-
-        /**
-         * @return {string}
-         */
-        getDetailPreview: function (name, type, id) {
-            if (!~this.previewTypeList.indexOf(type)) {
-                return name;
+            if (id) {
+                this.addAttachmentBox(name, type, id);
             }
 
-            let previewSize = this.previewSize;
+            this.$el.off('drop');
+            this.$el.off('dragover');
+            this.$el.off('dragleave');
 
-            if (this.isListMode()) {
-                previewSize = this.params.listPreviewSize || 'small';
-            }
+            this.$el.on('drop', e => {
+                e.preventDefault();
+                e.stopPropagation();
 
-            let src = this.getBasePath() + '?entryPoint=image&size=' + previewSize + '&id=' + id;
+                event = e.originalEvent;
 
-            let maxHeight = (this.imageSizes[previewSize] || {})[1];
+                if (
+                    event.dataTransfer &&
+                    event.dataTransfer.files &&
+                    event.dataTransfer.files.length
+                ) {
+                    this.uploadFile(event.dataTransfer.files[0]);
+                }
+            });
 
-            if (this.isListMode() && !this.params.listPreviewSize) {
-                maxHeight = this.ROW_HEIGHT + 'px';
-            }
+            this.$el.on('dragover', e => {
+                e.preventDefault();
+            });
 
-            let $img = $('<img>')
-                .attr('src', src)
-                .addClass('image-preview')
-                .css({
-                    maxWidth: (this.imageSizes[previewSize] || {})[0],
-                    maxHeight: maxHeight,
+            this.$el.on('dragleave', e =>{
+                e.preventDefault();
+            });
+        }
+
+        if (this.mode === this.MODE_SEARCH) {
+            let type = this.$el.find('select.search-type').val();
+
+            this.handleSearchType(type);
+        }
+
+        if (this.mode === this.MODE_DETAIL) {
+            if (this.previewSize === 'large') {
+                this.handleResize();
+                this.resizeIsBeingListened = true;
+
+                $(window).on('resize.' + this.cid, () => {
+                    this.handleResize();
                 });
-
-            if (this.mode === this.MODE_LIST_LINK) {
-                let link = '#' + this.model.entityType + '/view/' + this.model.id;
-
-                return $('<a>')
-                    .attr('href', link)
-                    .append($img)
-                    .get(0)
-                    .outerHTML;
             }
+        }
+    },
+
+    focusOnInlineEdit: function () {
+        this.focusOnUploadButton();
+    },
+
+    focusOnUploadButton: function () {
+        let $element = this.$el.find('.attach-file-label');
+
+        if ($element.length) {
+            $element.focus();
+        }
+    },
+
+    handleResize: function () {
+        let width = this.$el.width();
+
+        this.$el.find('img.image-preview').css('maxWidth', width + 'px');
+    },
+
+    /**
+     * @return {string}
+     */
+    getDetailPreview: function (name, type, id) {
+        if (!~this.previewTypeList.indexOf(type)) {
+            return name;
+        }
+
+        let previewSize = this.previewSize;
+
+        if (this.isListMode()) {
+            previewSize = this.params.listPreviewSize || 'small';
+        }
+
+        let src = this.getBasePath() + '?entryPoint=image&size=' + previewSize + '&id=' + id;
+
+        let maxHeight = (this.imageSizes[previewSize] || {})[1];
+
+        if (this.isListMode() && !this.params.listPreviewSize) {
+            maxHeight = this.ROW_HEIGHT + 'px';
+        }
+
+        let $img = $('<img>')
+            .attr('src', src)
+            .addClass('image-preview')
+            .css({
+                maxWidth: (this.imageSizes[previewSize] || {})[0],
+                maxHeight: maxHeight,
+            });
+
+        if (this.mode === this.MODE_LIST_LINK) {
+            let link = '#' + this.model.entityType + '/view/' + this.model.id;
 
             return $('<a>')
-                .attr('data-action', 'showImagePreview')
-                .attr('data-id', id)
-                .attr('title', name)
-                .attr('href', this.getImageUrl(id))
+                .attr('href', link)
                 .append($img)
                 .get(0)
                 .outerHTML;
-        },
+        }
 
-        getEditPreview: function (name, type, id) {
-            if (!~this.previewTypeList.indexOf(type)) {
-                return null;
+        return $('<a>')
+            .attr('data-action', 'showImagePreview')
+            .attr('data-id', id)
+            .attr('title', name)
+            .attr('href', this.getImageUrl(id))
+            .append($img)
+            .get(0)
+            .outerHTML;
+    },
+
+    getEditPreview: function (name, type, id) {
+        if (!~this.previewTypeList.indexOf(type)) {
+            return null;
+        }
+
+        return $('<img>')
+            .attr('src', this.getImageUrl(id, 'small'))
+            .attr('title', name)
+            .attr('draggable', false)
+            .css({
+                maxWidth: (this.imageSizes[this.previewSize] || {})[0],
+                maxHeight: (this.imageSizes[this.previewSize] || {})[1],
+            })
+            .get(0)
+            .outerHTML;
+    },
+
+    getValueForDisplay: function () {
+        if (! (this.isDetailMode() || this.isListMode())) {
+            return '';
+        }
+
+        var name = this.model.get(this.nameName);
+        var type = this.model.get(this.typeName) || this.defaultType;
+        var id = this.model.get(this.idName);
+
+        if (!id) {
+            return false;
+        }
+
+        if (this.showPreview && ~this.previewTypeList.indexOf(type)) {
+            let className = '';
+
+            if (this.isListMode() && this.params.listPreviewSize) {
+                className += 'no-shrink';
             }
 
-            return $('<img>')
-                .attr('src', this.getImageUrl(id, 'small'))
-                .attr('title', name)
-                .attr('draggable', false)
-                .css({
-                    maxWidth: (this.imageSizes[this.previewSize] || {})[0],
-                    maxHeight: (this.imageSizes[this.previewSize] || {})[1],
-                })
-                .get(0)
-                .outerHTML;
-        },
-
-        getValueForDisplay: function () {
-            if (! (this.isDetailMode() || this.isListMode())) {
-                return '';
-            }
-
-            var name = this.model.get(this.nameName);
-            var type = this.model.get(this.typeName) || this.defaultType;
-            var id = this.model.get(this.idName);
-
-            if (!id) {
-                return false;
-            }
-
-            if (this.showPreview && ~this.previewTypeList.indexOf(type)) {
-                let className = '';
-
-                if (this.isListMode() && this.params.listPreviewSize) {
-                    className += 'no-shrink';
-                }
-
-                let $item = $('<div>')
-                    .addClass('attachment-preview')
-                    .addClass(className)
-                    .append(
-                        this.getDetailPreview(name, type, id)
-                    );
-
-                let containerClassName = 'attachment-block-container';
-
-                if (this.previewSize === 'large') {
-                    containerClassName += ' attachment-block-container-large';
-                }
-
-                if (this.previewSize === 'small') {
-                    containerClassName += ' attachment-block-container-small';
-                }
-
-                return $('<div>')
-                    .addClass(containerClassName)
-                    .append(
-                        $('<div>')
-                            .addClass('attachment-block')
-                            .append($item)
-                    )
-                    .get(0).outerHTML;
-            }
-
-            return $('<span>')
+            let $item = $('<div>')
+                .addClass('attachment-preview')
+                .addClass(className)
                 .append(
-                    $('<span>').addClass('fas fa-paperclip text-soft small'),
-                    ' ',
-                    $('<a>')
-                        .attr('href', this.getDownloadUrl(id))
-                        .attr('target', '_BLANK')
-                        .text(name)
-                )
-                .get(0).innerHTML;
-        },
-
-        getImageUrl: function (id, size) {
-            let url = this.getBasePath() + '?entryPoint=image&id=' + id;
-
-            if (size) {
-                url += '&size=' + size;
-            }
-
-            if (this.getUser().get('portalId')) {
-                url += '&portalId=' + this.getUser().get('portalId');
-            }
-
-            return url;
-        },
-
-        getDownloadUrl: function (id) {
-            var url = this.getBasePath() + '?entryPoint=download&id=' + id;
-
-            if (this.getUser().get('portalId')) {
-                url += '&portalId=' + this.getUser().get('portalId');
-            }
-
-            return url;
-        },
-
-        deleteAttachment: function () {
-            var id = this.model.get(this.idName);
-
-            var o = {};
-
-            o[this.idName] = null;
-            o[this.nameName] = null;
-
-            this.model.set(o);
-
-            this.$attachment.empty();
-
-            if (id) {
-                if (this.model.isNew()) {
-                    this.getModelFactory().create('Attachment', (attachment) => {
-                        attachment.id = id;
-                        attachment.destroy();
-                    });
-                }
-            }
-        },
-
-        setAttachment: function (attachment, ui) {
-            var o = {};
-
-            o[this.idName] = attachment.id;
-            o[this.nameName] = attachment.get('name');
-
-            this.model.set(o, {ui: ui});
-        },
-
-        getMaxFileSize: function () {
-            let maxFileSize = this.params.maxFileSize || 0;
-
-            let noChunk = !this.getConfig().get('attachmentUploadChunkSize');
-            let attachmentUploadMaxSize = this.getConfig().get('attachmentUploadMaxSize') || 0;
-            let appMaxUploadSize = this.getHelper().getAppParam('maxUploadSize') || 0;
-
-            if (!maxFileSize || maxFileSize > attachmentUploadMaxSize) {
-                maxFileSize = attachmentUploadMaxSize;
-            }
-
-            if (noChunk && maxFileSize > appMaxUploadSize) {
-                maxFileSize = appMaxUploadSize;
-            }
-
-            return maxFileSize;
-        },
-
-        uploadFile: function (file) {
-            let isCanceled = false;
-
-            let exceedsMaxFileSize = false;
-
-            let maxFileSize = this.getMaxFileSize();
-
-            if (maxFileSize) {
-                if (file.size > maxFileSize * 1024 * 1024) {
-                    exceedsMaxFileSize = true;
-                }
-            }
-
-            if (exceedsMaxFileSize) {
-                let msg = this.translate('fieldMaxFileSizeError', 'messages')
-                    .replace('{field}', this.getLabelText())
-                    .replace('{max}', maxFileSize);
-
-                this.showValidationMessage(msg, '.attachment-button label');
-
-                return;
-            }
-
-            this.isUploading = true;
-
-            let uploadHelper = new FileUpload(this.getConfig());
-
-            this.getModelFactory().create('Attachment', attachment => {
-                let $attachmentBox = this.addAttachmentBox(file.name, file.type);
-
-                let $uploadingMsg = $attachmentBox.parent().find('.uploading-message');
-
-                this.$el.find('.attachment-button').addClass('hidden');
-
-                let mediator = {};
-
-                $attachmentBox.find('.remove-attachment').on('click.uploading', () => {
-                    isCanceled = true;
-                    this.isUploading = false;
-
-                    this.$el.find('.attachment-button').removeClass('hidden');
-                    this.$el.find('input.file').val(null);
-
-                    mediator.isCanceled = true;
-                });
-
-                attachment.set('role', 'Attachment');
-                attachment.set('relatedType', this.model.name);
-                attachment.set('field', this.name);
-
-                this.handleUploadingFile(file).then(file => {
-                    uploadHelper
-                        .upload(file, attachment, {
-                            afterChunkUpload: (size) => {
-                                let msg = Math.floor((size / file.size) * 100) + '%';
-
-                                $uploadingMsg.html(msg);
-                            },
-                            afterAttachmentSave: (attachment) => {
-                                $attachmentBox.attr('data-id', attachment.id);
-                            },
-                            mediator: mediator,
-                        })
-                        .then(() => {
-                            if (isCanceled) {
-                                return;
-                            }
-
-                            if (!this.isUploading) {
-                                return;
-                            }
-
-                            this.setAttachment(attachment, true);
-
-                            $attachmentBox.trigger('ready');
-
-                            this.isUploading = false;
-
-                            setTimeout(() => {
-                                if (
-                                    document.activeElement &&
-                                    document.activeElement.tagName !== 'BODY'
-                                ) {
-                                    return;
-                                }
-
-                                let $a = this.$el.find('.preview a');
-                                $a.focus();
-                            }, 50);
-                        })
-                        .catch(() => {
-                            if (mediator.isCanceled) {
-                                return;
-                            }
-
-                            $attachmentBox.remove();
-
-                            this.$el.find('.uploading-message').remove();
-                            this.$el.find('.attachment-button').removeClass('hidden');
-
-                            this.isUploading = false;
-                        });
-                });
-            });
-        },
-
-        handleUploadingFile: function (file) {
-            return new Promise(resolve => resolve(file));
-        },
-
-        getBoxPreviewHtml: function (name, type, id) {
-            let $text = $('<span>').text(name);
-
-            if (!id) {
-                return $text.get(0).outerHTML;
-            }
-
-            if (this.showPreview) {
-                let html = this.getEditPreview(name, type, id);
-
-                if (html) {
-                    return html;
-                }
-            }
-
-            let url = this.getBasePath() + '?entryPoint=download&id=' + id;
-
-            return $('<a>')
-                .attr('href', url)
-                .attr('target', '_BLANK')
-                .text(name)
-                .get(0).outerHTML;
-        },
-
-        addAttachmentBox: function (name, type, id) {
-            this.$attachment.empty();
-
-            let $remove = $('<a>')
-                .attr('role', 'button')
-                .attr('tabindex', '0')
-                .addClass('remove-attachment pull-right')
-                .append(
-                    $('<span>').addClass('fas fa-times')
+                    this.getDetailPreview(name, type, id)
                 );
 
+            let containerClassName = 'attachment-block-container';
+
+            if (this.previewSize === 'large') {
+                containerClassName += ' attachment-block-container-large';
+            }
+
+            if (this.previewSize === 'small') {
+                containerClassName += ' attachment-block-container-small';
+            }
+
+            return $('<div>')
+                .addClass(containerClassName)
+                .append(
+                    $('<div>')
+                        .addClass('attachment-block')
+                        .append($item)
+                )
+                .get(0).outerHTML;
+        }
+
+        return $('<span>')
+            .append(
+                $('<span>').addClass('fas fa-paperclip text-soft small'),
+                ' ',
+                $('<a>')
+                    .attr('href', this.getDownloadUrl(id))
+                    .attr('target', '_BLANK')
+                    .text(name)
+            )
+            .get(0).innerHTML;
+    },
+
+    getImageUrl: function (id, size) {
+        let url = this.getBasePath() + '?entryPoint=image&id=' + id;
+
+        if (size) {
+            url += '&size=' + size;
+        }
+
+        if (this.getUser().get('portalId')) {
+            url += '&portalId=' + this.getUser().get('portalId');
+        }
+
+        return url;
+    },
+
+    getDownloadUrl: function (id) {
+        var url = this.getBasePath() + '?entryPoint=download&id=' + id;
+
+        if (this.getUser().get('portalId')) {
+            url += '&portalId=' + this.getUser().get('portalId');
+        }
+
+        return url;
+    },
+
+    deleteAttachment: function () {
+        var id = this.model.get(this.idName);
+
+        var o = {};
+
+        o[this.idName] = null;
+        o[this.nameName] = null;
+
+        this.model.set(o);
+
+        this.$attachment.empty();
+
+        if (id) {
+            if (this.model.isNew()) {
+                this.getModelFactory().create('Attachment', (attachment) => {
+                    attachment.id = id;
+                    attachment.destroy();
+                });
+            }
+        }
+    },
+
+    setAttachment: function (attachment, ui) {
+        var o = {};
+
+        o[this.idName] = attachment.id;
+        o[this.nameName] = attachment.get('name');
+
+        this.model.set(o, {ui: ui});
+    },
+
+    getMaxFileSize: function () {
+        let maxFileSize = this.params.maxFileSize || 0;
+
+        let noChunk = !this.getConfig().get('attachmentUploadChunkSize');
+        let attachmentUploadMaxSize = this.getConfig().get('attachmentUploadMaxSize') || 0;
+        let appMaxUploadSize = this.getHelper().getAppParam('maxUploadSize') || 0;
+
+        if (!maxFileSize || maxFileSize > attachmentUploadMaxSize) {
+            maxFileSize = attachmentUploadMaxSize;
+        }
+
+        if (noChunk && maxFileSize > appMaxUploadSize) {
+            maxFileSize = appMaxUploadSize;
+        }
+
+        return maxFileSize;
+    },
+
+    uploadFile: function (file) {
+        let isCanceled = false;
+
+        let exceedsMaxFileSize = false;
+
+        let maxFileSize = this.getMaxFileSize();
+
+        if (maxFileSize) {
+            if (file.size > maxFileSize * 1024 * 1024) {
+                exceedsMaxFileSize = true;
+            }
+        }
+
+        if (exceedsMaxFileSize) {
+            let msg = this.translate('fieldMaxFileSizeError', 'messages')
+                .replace('{field}', this.getLabelText())
+                .replace('{max}', maxFileSize);
+
+            this.showValidationMessage(msg, '.attachment-button label');
+
+            return;
+        }
+
+        this.isUploading = true;
+
+        let uploadHelper = new FileUpload(this.getConfig());
+
+        this.getModelFactory().create('Attachment', attachment => {
+            let $attachmentBox = this.addAttachmentBox(file.name, file.type);
+
+            let $uploadingMsg = $attachmentBox.parent().find('.uploading-message');
+
+            this.$el.find('.attachment-button').addClass('hidden');
+
+            let mediator = {};
+
+            $attachmentBox.find('.remove-attachment').on('click.uploading', () => {
+                isCanceled = true;
+                this.isUploading = false;
+
+                this.$el.find('.attachment-button').removeClass('hidden');
+                this.$el.find('input.file').val(null);
+
+                mediator.isCanceled = true;
+            });
+
+            attachment.set('role', 'Attachment');
+            attachment.set('relatedType', this.model.name);
+            attachment.set('field', this.name);
+
+            this.handleUploadingFile(file).then(file => {
+                uploadHelper
+                    .upload(file, attachment, {
+                        afterChunkUpload: (size) => {
+                            let msg = Math.floor((size / file.size) * 100) + '%';
+
+                            $uploadingMsg.html(msg);
+                        },
+                        afterAttachmentSave: (attachment) => {
+                            $attachmentBox.attr('data-id', attachment.id);
+                        },
+                        mediator: mediator,
+                    })
+                    .then(() => {
+                        if (isCanceled) {
+                            return;
+                        }
+
+                        if (!this.isUploading) {
+                            return;
+                        }
+
+                        this.setAttachment(attachment, true);
+
+                        $attachmentBox.trigger('ready');
+
+                        this.isUploading = false;
+
+                        setTimeout(() => {
+                            if (
+                                document.activeElement &&
+                                document.activeElement.tagName !== 'BODY'
+                            ) {
+                                return;
+                            }
+
+                            let $a = this.$el.find('.preview a');
+                            $a.focus();
+                        }, 50);
+                    })
+                    .catch(() => {
+                        if (mediator.isCanceled) {
+                            return;
+                        }
+
+                        $attachmentBox.remove();
+
+                        this.$el.find('.uploading-message').remove();
+                        this.$el.find('.attachment-button').removeClass('hidden');
+
+                        this.isUploading = false;
+                    });
+            });
+        });
+    },
+
+    handleUploadingFile: function (file) {
+        return new Promise(resolve => resolve(file));
+    },
+
+    getBoxPreviewHtml: function (name, type, id) {
+        let $text = $('<span>').text(name);
+
+        if (!id) {
+            return $text.get(0).outerHTML;
+        }
+
+        if (this.showPreview) {
+            let html = this.getEditPreview(name, type, id);
+
+            if (html) {
+                return html;
+            }
+        }
+
+        let url = this.getBasePath() + '?entryPoint=download&id=' + id;
+
+        return $('<a>')
+            .attr('href', url)
+            .attr('target', '_BLANK')
+            .text(name)
+            .get(0).outerHTML;
+    },
+
+    addAttachmentBox: function (name, type, id) {
+        this.$attachment.empty();
+
+        let $remove = $('<a>')
+            .attr('role', 'button')
+            .attr('tabindex', '0')
+            .addClass('remove-attachment pull-right')
+            .append(
+                $('<span>').addClass('fas fa-times')
+            );
+
+        let previewHtml = this.getBoxPreviewHtml(name, type, id);
+
+        let $att = $('<div>')
+            .addClass('gray-box')
+            .append($remove)
+            .append(
+                $('<span>')
+                    .addClass('preview')
+                    .append(previewHtml)
+            );
+
+        let $container = $('<div>').append($att);
+
+        this.$attachment.append($container);
+
+        if (id) {
+            return $att;
+        }
+
+        let $loading = $('<span>')
+            .addClass('small uploading-message')
+            .text(this.translate('Uploading...'));
+
+        $container.append($loading);
+
+        $att.on('ready', () => {
+            let id = this.model.get(this.idName);
+
             let previewHtml = this.getBoxPreviewHtml(name, type, id);
 
-            let $att = $('<div>')
-                .addClass('gray-box')
-                .append($remove)
-                .append(
-                    $('<span>')
-                        .addClass('preview')
-                        .append(previewHtml)
-                );
+            $att.find('.preview').html(previewHtml);
 
-            let $container = $('<div>').append($att);
+            $loading.html(this.translate('Ready'));
 
-            this.$attachment.append($container);
-
-            if (id) {
-                return $att;
+            if ($att.find('.preview').find('img').length) {
+                $loading.remove();
             }
+        });
 
-            let $loading = $('<span>')
-                .addClass('small uploading-message')
-                .text(this.translate('Uploading...'));
+        return $att;
+    },
 
-            $container.append($loading);
+    insertFromSource: function (source) {
+        var viewName =
+            this.getMetadata()
+                .get(['clientDefs', 'Attachment', 'sourceDefs', source, 'insertModalView']) ||
+            this.getMetadata().get(['clientDefs', source, 'modalViews', 'select']) ||
+            'views/modals/select-records';
 
-            $att.on('ready', () => {
-                let id = this.model.get(this.idName);
+        if (viewName) {
+            Espo.Ui.notify(' ... ');
 
-                let previewHtml = this.getBoxPreviewHtml(name, type, id);
+            var filters = null;
 
-                $att.find('.preview').html(previewHtml);
+            if (('getSelectFilters' + source) in this) {
+                filters = this['getSelectFilters' + source]();
 
-                $loading.html(this.translate('Ready'));
-
-                if ($att.find('.preview').find('img').length) {
-                    $loading.remove();
-                }
-            });
-
-            return $att;
-        },
-
-        insertFromSource: function (source) {
-            var viewName =
-                this.getMetadata()
-                    .get(['clientDefs', 'Attachment', 'sourceDefs', source, 'insertModalView']) ||
-                this.getMetadata().get(['clientDefs', source, 'modalViews', 'select']) ||
-                'views/modals/select-records';
-
-            if (viewName) {
-                Espo.Ui.notify(' ... ');
-
-                var filters = null;
-
-                if (('getSelectFilters' + source) in this) {
-                    filters = this['getSelectFilters' + source]();
-
-                    if (this.model.get('parentId') && this.model.get('parentType') === 'Account') {
-                        if (
-                            this.getMetadata()
-                                .get(['entityDefs', source, 'fields', 'account', 'type']) === 'link'
-                        ) {
-                            filters = {
-                                account: {
-                                    type: 'equals',
-                                    field: 'accountId',
-                                    value: this.model.get('parentId'),
-                                    valueName: this.model.get('parentName'),
-                                }
-                            };
-                        }
+                if (this.model.get('parentId') && this.model.get('parentType') === 'Account') {
+                    if (
+                        this.getMetadata()
+                            .get(['entityDefs', source, 'fields', 'account', 'type']) === 'link'
+                    ) {
+                        filters = {
+                            account: {
+                                type: 'equals',
+                                field: 'accountId',
+                                value: this.model.get('parentId'),
+                                valueName: this.model.get('parentName'),
+                            }
+                        };
                     }
                 }
+            }
 
-                var boolFilterList = this.getMetadata().get(
-                    ['clientDefs', 'Attachment', 'sourceDefs', source, 'boolFilterList']
-                );
+            var boolFilterList = this.getMetadata().get(
+                ['clientDefs', 'Attachment', 'sourceDefs', source, 'boolFilterList']
+            );
 
-                if (('getSelectBoolFilterList' + source) in this) {
-                    boolFilterList = this['getSelectBoolFilterList' + source]();
-                }
+            if (('getSelectBoolFilterList' + source) in this) {
+                boolFilterList = this['getSelectBoolFilterList' + source]();
+            }
 
-                var primaryFilterName = this.getMetadata().get(
-                    ['clientDefs', 'Attachment', 'sourceDefs', source, 'primaryFilter']
-                );
+            var primaryFilterName = this.getMetadata().get(
+                ['clientDefs', 'Attachment', 'sourceDefs', source, 'primaryFilter']
+            );
 
-                if (('getSelectPrimaryFilterName' + source) in this) {
-                    primaryFilterName = this['getSelectPrimaryFilterName' + source]();
-                }
+            if (('getSelectPrimaryFilterName' + source) in this) {
+                primaryFilterName = this['getSelectPrimaryFilterName' + source]();
+            }
 
-                this.createView('insertFromSource', viewName, {
-                    scope: source,
-                    createButton: false,
-                    filters: filters,
-                    boolFilterList: boolFilterList,
-                    primaryFilterName: primaryFilterName,
-                    multiple: false,
-                }, (view) => {
-                    view.render();
+            this.createView('insertFromSource', viewName, {
+                scope: source,
+                createButton: false,
+                filters: filters,
+                boolFilterList: boolFilterList,
+                primaryFilterName: primaryFilterName,
+                multiple: false,
+            }, (view) => {
+                view.render();
 
-                    this.notify(false);
+                this.notify(false);
 
-                    this.listenToOnce(view, 'select', (modelList) => {
-                        if (Object.prototype.toString.call(modelList) !== '[object Array]') {
-                            modelList = [modelList];
+                this.listenToOnce(view, 'select', (modelList) => {
+                    if (Object.prototype.toString.call(modelList) !== '[object Array]') {
+                        modelList = [modelList];
+                    }
+
+                    modelList.forEach(model => {
+                        if (model.name === 'Attachment') {
+                            this.setAttachment(model);
+
+                            return;
                         }
 
-                        modelList.forEach(model => {
-                            if (model.name === 'Attachment') {
-                                this.setAttachment(model);
+                        Espo.Ajax
+                            .postRequest(source + '/action/getAttachmentList', {
+                                id: model.id,
+                                field: this.name,
+                                relatedType: this.entityType,
+                            })
+                            .then(attachmentList => {
+                                attachmentList.forEach(item => {
+                                    this.getModelFactory().create('Attachment', (attachment) => {
+                                        attachment.set(item);
 
-                                return;
-                            }
-
-                            Espo.Ajax
-                                .postRequest(source + '/action/getAttachmentList', {
-                                    id: model.id,
-                                    field: this.name,
-                                    relatedType: this.entityType,
-                                })
-                                .then(attachmentList => {
-                                    attachmentList.forEach(item => {
-                                        this.getModelFactory().create('Attachment', (attachment) => {
-                                            attachment.set(item);
-
-                                            this.setAttachment(attachment);
-                                        });
+                                        this.setAttachment(attachment);
                                     });
                                 });
-                        });
+                            });
                     });
                 });
-            }
-        },
+            });
+        }
+    },
 
-        fetch: function () {
-            var data = {};
+    fetch: function () {
+        var data = {};
 
-            data[this.idName] = this.model.get(this.idName);
+        data[this.idName] = this.model.get(this.idName);
 
-            return data;
-        },
-    });
+        return data;
+    },
 });
diff --git a/client/src/views/fields/float.js b/client/src/views/fields/float.js
index bc02272d4f..63faaec4ff 100644
--- a/client/src/views/fields/float.js
+++ b/client/src/views/fields/float.js
@@ -26,164 +26,162 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/float', ['views/fields/int'], function (Dep) {
+/** @module views/fields/float */
+
+import Dep from 'views/fields/int';
+
+/**
+ * A float field.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/fields/int
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    type: 'float',
+
+    editTemplate: 'fields/float/edit',
+
+    decimalMark: '.',
+    validations: ['required', 'float', 'range'],
+    decimalPlacesRawValue: 10,
 
     /**
-     * A float field.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/fields/int.Class
-     * @memberOf module:views/fields/float
+     * @inheritDoc
      */
-    return Dep.extend(/** @lends module:views/fields/float.Class# */{
+    setup: function () {
+        Dep.prototype.setup.call(this);
 
-        type: 'float',
+        if (this.getPreferences().has('decimalMark')) {
+            this.decimalMark = this.getPreferences().get('decimalMark');
+        }
+        else if (this.getConfig().has('decimalMark')) {
+            this.decimalMark = this.getConfig().get('decimalMark');
+        }
 
-        editTemplate: 'fields/float/edit',
+        if (!this.decimalMark) {
+            this.decimalMark = '.';
+        }
 
-        decimalMark: '.',
+        if (this.decimalMark === this.thousandSeparator) {
+            this.thousandSeparator = '';
+        }
+    },
 
-        validations: ['required', 'float', 'range'],
+    /**
+     * @inheritDoc
+     */
+    setupAutoNumericOptions: function () {
+        this.autoNumericOptions = {
+            digitGroupSeparator: this.thousandSeparator || '',
+            decimalCharacter: this.decimalMark,
+            modifyValueOnWheel: false,
+            selectOnFocus: false,
+            decimalPlaces: this.decimalPlacesRawValue,
+            decimalPlacesRawValue: this.decimalPlacesRawValue,
+            allowDecimalPadding: false,
+            showWarnings: false,
+            formulaMode: true,
+        };
+    },
 
-        decimalPlacesRawValue: 10,
+    getValueForDisplay: function () {
+        var value = isNaN(this.model.get(this.name)) ? null : this.model.get(this.name);
 
-        /**
-         * @inheritDoc
-         */
-        setup: function () {
-            Dep.prototype.setup.call(this);
+        return this.formatNumber(value);
+    },
 
-            if (this.getPreferences().has('decimalMark')) {
-                this.decimalMark = this.getPreferences().get('decimalMark');
-            }
-            else if (this.getConfig().has('decimalMark')) {
-                this.decimalMark = this.getConfig().get('decimalMark');
+    formatNumber: function (value) {
+        if (this.disableFormatting) {
+            return value;
+        }
+
+        return this.formatNumberDetail(value);
+    },
+
+    formatNumberDetail: function (value) {
+        if (value === null) {
+            return '';
+        }
+
+        var decimalPlaces = this.params.decimalPlaces;
+
+        if (decimalPlaces === 0) {
+            value = Math.round(value);
+        }
+        else if (decimalPlaces) {
+            value = Math.round(
+                 value * Math.pow(10, decimalPlaces)) / (Math.pow(10, decimalPlaces)
+            );
+        }
+
+        var parts = value.toString().split(".");
+
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, this.thousandSeparator);
+
+        if (decimalPlaces === 0) {
+            return parts[0];
+        }
+        else if (decimalPlaces) {
+            var decimalPartLength = 0;
+
+            if (parts.length > 1) {
+                decimalPartLength = parts[1].length;
+            } else {
+                parts[1] = '';
             }
 
-            if (!this.decimalMark) {
-                this.decimalMark = '.';
-            }
+            if (decimalPlaces && decimalPartLength < decimalPlaces) {
+                var limit = decimalPlaces - decimalPartLength;
 
-            if (this.decimalMark === this.thousandSeparator) {
-                this.thousandSeparator = '';
-            }
-        },
-
-        /**
-         * @inheritDoc
-         */
-        setupAutoNumericOptions: function () {
-            this.autoNumericOptions = {
-                digitGroupSeparator: this.thousandSeparator || '',
-                decimalCharacter: this.decimalMark,
-                modifyValueOnWheel: false,
-                selectOnFocus: false,
-                decimalPlaces: this.decimalPlacesRawValue,
-                decimalPlacesRawValue: this.decimalPlacesRawValue,
-                allowDecimalPadding: false,
-                showWarnings: false,
-                formulaMode: true,
-            };
-        },
-
-        getValueForDisplay: function () {
-            var value = isNaN(this.model.get(this.name)) ? null : this.model.get(this.name);
-
-            return this.formatNumber(value);
-        },
-
-        formatNumber: function (value) {
-            if (this.disableFormatting) {
-                return value;
-            }
-
-            return this.formatNumberDetail(value);
-        },
-
-        formatNumberDetail: function (value) {
-            if (value === null) {
-                return '';
-            }
-
-            var decimalPlaces = this.params.decimalPlaces;
-
-            if (decimalPlaces === 0) {
-                value = Math.round(value);
-            }
-            else if (decimalPlaces) {
-                value = Math.round(
-                     value * Math.pow(10, decimalPlaces)) / (Math.pow(10, decimalPlaces)
-                );
-            }
-
-            var parts = value.toString().split(".");
-
-            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, this.thousandSeparator);
-
-            if (decimalPlaces === 0) {
-                return parts[0];
-            }
-            else if (decimalPlaces) {
-                var decimalPartLength = 0;
-
-                if (parts.length > 1) {
-                    decimalPartLength = parts[1].length;
-                } else {
-                    parts[1] = '';
-                }
-
-                if (decimalPlaces && decimalPartLength < decimalPlaces) {
-                    var limit = decimalPlaces - decimalPartLength;
-
-                    for (var i = 0; i < limit; i++) {
-                        parts[1] += '0';
-                    }
+                for (var i = 0; i < limit; i++) {
+                    parts[1] += '0';
                 }
             }
+        }
 
-            return parts.join(this.decimalMark);
-        },
+        return parts.join(this.decimalMark);
+    },
 
-        setupMaxLength: function () {
-        },
+    setupMaxLength: function () {
+    },
 
-        validateFloat: function () {
-            var value = this.model.get(this.name);
+    validateFloat: function () {
+        var value = this.model.get(this.name);
 
-            if (isNaN(value)) {
-                var msg = this.translate('fieldShouldBeFloat', 'messages').replace('{field}', this.getLabelText());
+        if (isNaN(value)) {
+            var msg = this.translate('fieldShouldBeFloat', 'messages').replace('{field}', this.getLabelText());
 
-                this.showValidationMessage(msg);
+            this.showValidationMessage(msg);
 
-                return true;
-            }
-        },
+            return true;
+        }
+    },
 
-        parse: function (value) {
-            value = (value !== '') ? value : null;
+    parse: function (value) {
+        value = (value !== '') ? value : null;
 
-            if (value === null) {
-                return null;
-            }
+        if (value === null) {
+            return null;
+        }
 
-            value = value
-                .split(this.thousandSeparator)
-                .join('')
-                .split(this.decimalMark)
-                .join('.');
+        value = value
+            .split(this.thousandSeparator)
+            .join('')
+            .split(this.decimalMark)
+            .join('.');
 
-            return parseFloat(value);
-        },
+        return parseFloat(value);
+    },
 
-        fetch: function () {
-            let value = this.$element.val();
-            value = this.parse(value);
+    fetch: function () {
+        let value = this.$element.val();
+        value = this.parse(value);
 
-            let data = {};
-            data[this.name] = value;
+        let data = {};
+        data[this.name] = value;
 
-            return data;
-        },
-    });
+        return data;
+    },
 });
diff --git a/client/src/views/fields/image.js b/client/src/views/fields/image.js
index cf8a7bfeac..a7b46308a0 100644
--- a/client/src/views/fields/image.js
+++ b/client/src/views/fields/image.js
@@ -26,24 +26,18 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/image', ['views/fields/file'], function (Dep) {
+import Dep from 'views/fields/file';
 
-    /**
-     * @class
-     * @name Class
-     * @extends module:views/fields/file.Class
-     * @memberOf module:views/fields/image
-     */
-    return Dep.extend(/** @lends module:views/fields/image.Class# */{
+/**
+ * @class Class
+ * @extends module:views/fields/file
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        type: 'image',
+    type: 'image',
 
-        showPreview: true,
-
-        accept: ['image/*'],
-
-        defaultType: 'image/jpeg',
-
-        previewSize: 'small',
-    });
+    showPreview: true,
+    accept: ['image/*'],
+    defaultType: 'image/jpeg',
+    previewSize: 'small',
 });
diff --git a/client/src/views/fields/int.js b/client/src/views/fields/int.js
index 9db95b3fcc..894c076f63 100644
--- a/client/src/views/fields/int.js
+++ b/client/src/views/fields/int.js
@@ -26,402 +26,405 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/int', ['views/fields/base', 'lib!autonumeric'], function (Dep, AutoNumeric) {
+/** @module views/fields/int */
+
+import Dep from 'views/fields/base';
+import AutoNumeric from 'lib!autonumeric';
+
+/**
+ * An integer field.
+ *
+ * @class Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** Class# */{
+
+    type: 'int',
+
+    listTemplate: 'fields/int/list',
+    detailTemplate: 'fields/int/detail',
+    editTemplate: 'fields/int/edit',
+    searchTemplate: 'fields/int/search',
+    validations: ['required', 'int', 'range'],
+
+    thousandSeparator: ',',
+
+    searchTypeList: [
+        'isNotEmpty',
+        'isEmpty',
+        'equals',
+        'notEquals',
+        'greaterThan',
+        'lessThan',
+        'greaterThanOrEquals',
+        'lessThanOrEquals',
+        'between',
+    ],
 
     /**
-     * An integer field.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/int
+     * @type {Object.<string, *>|null}
+     * @protected
      */
-    return Dep.extend(/** module:views/fields/int.Class# */{
+    autoNumericOptions: null,
 
-        type: 'int',
+    /**
+     * @type {?AutoNumeric}
+     * @protected
+     */
+    autoNumericInstance: null,
 
-        listTemplate: 'fields/int/list',
-        detailTemplate: 'fields/int/detail',
-        editTemplate: 'fields/int/edit',
-        searchTemplate: 'fields/int/search',
-        validations: ['required', 'int', 'range'],
+    setup: function () {
+        Dep.prototype.setup.call(this);
 
-        thousandSeparator: ',',
+        this.setupMaxLength();
 
-        searchTypeList: [
-            'isNotEmpty',
-            'isEmpty',
-            'equals',
-            'notEquals',
-            'greaterThan',
-            'lessThan',
-            'greaterThanOrEquals',
-            'lessThanOrEquals',
-            'between',
-        ],
+        if (this.getPreferences().has('thousandSeparator')) {
+            this.thousandSeparator = this.getPreferences().get('thousandSeparator');
+        }
+        else if (this.getConfig().has('thousandSeparator')) {
+            this.thousandSeparator = this.getConfig().get('thousandSeparator');
+        }
 
-        /**
-         * @type {?Object.<string, *>}
-         * @protected
-         */
-        autoNumericOptions: null,
+        if (this.params.disableFormatting) {
+            this.disableFormatting = true;
+        }
+    },
 
-        /**
-         * @type {?AutoNumeric}
-         * @protected
-         */
-        autoNumericInstance: null,
+    setupFinal: function () {
+        Dep.prototype.setupFinal.call(this);
 
-        setup: function () {
-            Dep.prototype.setup.call(this);
+        this.setupAutoNumericOptions();
+    },
 
-            this.setupMaxLength();
+    /**
+     * @protected
+     */
+    setupAutoNumericOptions: function () {
+        let separator = (!this.disableFormatting ? this.thousandSeparator : null) || '';
+        let decimalCharacter = '.';
 
-            if (this.getPreferences().has('thousandSeparator')) {
-                this.thousandSeparator = this.getPreferences().get('thousandSeparator');
+        if (separator === '.') {
+            decimalCharacter = ',';
+        }
+
+        this.autoNumericOptions = {
+            digitGroupSeparator: separator,
+            decimalCharacter: decimalCharacter,
+            modifyValueOnWheel: false,
+            decimalPlaces: 0,
+            selectOnFocus: false,
+            formulaMode: true,
+        };
+    },
+
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
+
+        if (this.mode === this.MODE_EDIT) {
+
+            if (this.autoNumericOptions) {
+                this.autoNumericInstance = new AutoNumeric(this.$element.get(0), this.autoNumericOptions);
             }
-            else if (this.getConfig().has('thousandSeparator')) {
-                this.thousandSeparator = this.getConfig().get('thousandSeparator');
+        }
+
+        if (this.mode === this.MODE_SEARCH) {
+            var $searchType = this.$el.find('select.search-type');
+
+            this.handleSearchType($searchType.val());
+
+            this.$el.find('select.search-type').on('change', () => {
+                this.trigger('change');
+            });
+
+            this.$element.on('input', () => {
+                this.trigger('change');
+            });
+
+            let $inputAdditional = this.$el.find('input.additional');
+
+            $inputAdditional.on('input', () => {
+                this.trigger('change');
+            });
+
+            if (this.autoNumericOptions) {
+                new AutoNumeric(this.$element.get(0), this.autoNumericOptions);
+                new AutoNumeric($inputAdditional.get(0), this.autoNumericOptions);
             }
+        }
+    },
 
-            if (this.params.disableFormatting) {
-                this.disableFormatting = true;
+    data: function () {
+        var data = Dep.prototype.data.call(this);
+
+        if (this.model.get(this.name) !== null && typeof this.model.get(this.name) !== 'undefined') {
+            data.isNotEmpty = true;
+        }
+
+        data.valueIsSet = this.model.has(this.name);
+
+        if (this.isSearchMode()) {
+            data.value = this.searchParams.value;
+
+            if (this.getSearchType() === 'between') {
+                data.value = this.getSearchParamsData().value1 || this.searchParams.value1;
+                data.value2 = this.getSearchParamsData().value2 || this.searchParams.value2;
             }
-        },
+        }
 
-        setupFinal: function () {
-            Dep.prototype.setupFinal.call(this);
+        if (this.isEditMode()) {
+            data.value = this.model.get(this.name);
+        }
 
-            this.setupAutoNumericOptions();
-        },
+        return data;
+    },
 
-        /**
-         * @protected
-         */
-        setupAutoNumericOptions: function () {
-            let separator = (!this.disableFormatting ? this.thousandSeparator : null) || '';
-            let decimalCharacter = '.';
+    getValueForDisplay: function () {
+        var value = isNaN(this.model.get(this.name)) ? null : this.model.get(this.name);
 
-            if (separator === '.') {
-                decimalCharacter = ',';
-            }
+        return this.formatNumber(value);
+    },
 
-            this.autoNumericOptions = {
-                digitGroupSeparator: separator,
-                decimalCharacter: decimalCharacter,
-                modifyValueOnWheel: false,
-                decimalPlaces: 0,
-                selectOnFocus: false,
-                formulaMode: true,
-            };
-        },
+    formatNumber: function (value) {
+        if (this.disableFormatting) {
+            return value;
+        }
 
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
+        return this.formatNumberDetail(value);
+    },
 
-            if (this.mode === this.MODE_EDIT) {
+    formatNumberDetail: function (value) {
+        if (value === null) {
+            return '';
+        }
 
-                if (this.autoNumericOptions) {
-                    this.autoNumericInstance = new AutoNumeric(this.$element.get(0), this.autoNumericOptions);
-                }
-            }
+        let stringValue = value.toString();
 
-            if (this.mode === this.MODE_SEARCH) {
-                var $searchType = this.$el.find('select.search-type');
+        stringValue = stringValue.replace(/\B(?=(\d{3})+(?!\d))/g, this.thousandSeparator);
 
-                this.handleSearchType($searchType.val());
+        return stringValue;
+    },
 
-                this.$el.find('select.search-type').on('change', () => {
-                    this.trigger('change');
-                });
+    setupSearch: function () {
+        this.events = _.extend({
+            'change select.search-type': (e) => {
+                this.handleSearchType($(e.currentTarget).val());
+            },
+        }, this.events || {});
+    },
 
-                this.$element.on('input', () => {
-                    this.trigger('change');
-                });
+    handleSearchType: function (type) {
+        var $additionalInput = this.$el.find('input.additional');
 
-                let $inputAdditional = this.$el.find('input.additional');
+        var $input = this.$el.find('input[data-name="'+this.name+'"]');
 
-                $inputAdditional.on('input', () => {
-                    this.trigger('change');
-                });
+        if (type === 'between') {
+            $additionalInput.removeClass('hidden');
+            $input.removeClass('hidden');
+        }
+        else if (~['isEmpty', 'isNotEmpty'].indexOf(type)) {
+            $additionalInput.addClass('hidden');
+            $input.addClass('hidden');
+        }
+        else {
+            $additionalInput.addClass('hidden');
+            $input.removeClass('hidden');
+        }
+    },
 
-                if (this.autoNumericOptions) {
-                    new AutoNumeric(this.$element.get(0), this.autoNumericOptions);
-                    new AutoNumeric($inputAdditional.get(0), this.autoNumericOptions);
-                }
-            }
-        },
+    getMaxValue: function () {
+        var maxValue = this.model.getFieldParam(this.name, 'max') || null;
 
-        data: function () {
-            var data = Dep.prototype.data.call(this);
+        if (!maxValue && maxValue !== 0) {
+            maxValue = null;
+        }
 
-            if (this.model.get(this.name) !== null && typeof this.model.get(this.name) !== 'undefined') {
-                data.isNotEmpty = true;
-            }
+        if ('max' in this.params) {
+            maxValue = this.params.max;
+        }
 
-            data.valueIsSet = this.model.has(this.name);
+        return maxValue;
+    },
 
-            if (this.isSearchMode()) {
-                data.value = this.searchParams.value;
+    getMinValue: function () {
+        var minValue = this.model.getFieldParam(this.name, 'min');
 
-                if (this.getSearchType() === 'between') {
-                    data.value = this.getSearchParamsData().value1 || this.searchParams.value1;
-                    data.value2 = this.getSearchParamsData().value2 || this.searchParams.value2;
-                }
-            }
+        if (!minValue && minValue !== 0) {
+            minValue = null;
+        }
 
-            if (this.isEditMode()) {
-                data.value = this.model.get(this.name);
-            }
+        if ('min' in this.params) {
+            minValue = this.params.min;
+        }
 
-            return data;
-        },
+        return minValue;
+    },
 
-        getValueForDisplay: function () {
-            var value = isNaN(this.model.get(this.name)) ? null : this.model.get(this.name);
+    setupMaxLength: function () {
+        var maxValue = this.getMaxValue();
 
-            return this.formatNumber(value);
-        },
+        if (typeof max !== 'undefined' && max !== null) {
+            maxValue = this.formatNumber(maxValue);
 
-        formatNumber: function (value) {
-            if (this.disableFormatting) {
-                return value;
-            }
+            this.params.maxLength = maxValue.toString().length;
+        }
+    },
 
-            return this.formatNumberDetail(value);
-        },
+    validateInt: function () {
+        var value = this.model.get(this.name);
 
-        formatNumberDetail: function (value) {
-            if (value === null) {
-                return '';
-            }
+        if (isNaN(value)) {
+            var msg = this.translate('fieldShouldBeInt', 'messages').replace('{field}', this.getLabelText());
 
-            let stringValue = value.toString();
+            this.showValidationMessage(msg);
 
-            stringValue = stringValue.replace(/\B(?=(\d{3})+(?!\d))/g, this.thousandSeparator);
+            return true;
+        }
+    },
 
-            return stringValue;
-        },
+    validateRange: function () {
+        let value = this.model.get(this.name);
 
-        setupSearch: function () {
-            this.events = _.extend({
-                'change select.search-type': (e) => {
-                    this.handleSearchType($(e.currentTarget).val());
-                },
-            }, this.events || {});
-        },
+        if (value === null) {
+            return false;
+        }
 
-        handleSearchType: function (type) {
-            var $additionalInput = this.$el.find('input.additional');
+        let minValue = this.getMinValue();
+        let maxValue = this.getMaxValue();
 
-            var $input = this.$el.find('input[data-name="'+this.name+'"]');
-
-            if (type === 'between') {
-                $additionalInput.removeClass('hidden');
-                $input.removeClass('hidden');
-            }
-            else if (~['isEmpty', 'isNotEmpty'].indexOf(type)) {
-                $additionalInput.addClass('hidden');
-                $input.addClass('hidden');
-            }
-            else {
-                $additionalInput.addClass('hidden');
-                $input.removeClass('hidden');
-            }
-        },
-
-        getMaxValue: function () {
-            var maxValue = this.model.getFieldParam(this.name, 'max') || null;
-
-            if (!maxValue && maxValue !== 0) {
-                maxValue = null;
-            }
-
-            if ('max' in this.params) {
-                maxValue = this.params.max;
-            }
-
-            return maxValue;
-        },
-
-        getMinValue: function () {
-            var minValue = this.model.getFieldParam(this.name, 'min');
-
-            if (!minValue && minValue !== 0) {
-                minValue = null;
-            }
-
-            if ('min' in this.params) {
-                minValue = this.params.min;
-            }
-
-            return minValue;
-        },
-
-        setupMaxLength: function () {
-            var maxValue = this.getMaxValue();
-
-            if (typeof max !== 'undefined' && max !== null) {
-                maxValue = this.formatNumber(maxValue);
-
-                this.params.maxLength = maxValue.toString().length;
-            }
-        },
-
-        validateInt: function () {
-            var value = this.model.get(this.name);
-
-            if (isNaN(value)) {
-                var msg = this.translate('fieldShouldBeInt', 'messages').replace('{field}', this.getLabelText());
+        if (minValue !== null && maxValue !== null) {
+            if (value < minValue || value > maxValue ) {
+                let msg = this.translate('fieldShouldBeBetween', 'messages')
+                    .replace('{field}', this.getLabelText())
+                    .replace('{min}', minValue)
+                    .replace('{max}', maxValue);
 
                 this.showValidationMessage(msg);
 
                 return true;
             }
-        },
-
-        validateRange: function () {
-            var value = this.model.get(this.name);
-
-            if (value === null) {
-                return false;
-            }
-
-            var minValue = this.getMinValue();
-            var maxValue = this.getMaxValue();
-
-            if (minValue !== null && maxValue !== null) {
-                if (value < minValue || value > maxValue ) {
-                    var msg = this.translate('fieldShouldBeBetween', 'messages')
+        }
+        else {
+            if (minValue !== null) {
+                if (value < minValue) {
+                    let msg = this.translate('fieldShouldBeGreater', 'messages')
                         .replace('{field}', this.getLabelText())
-                        .replace('{min}', minValue)
-                        .replace('{max}', maxValue);
+                        .replace('{value}', minValue);
 
                     this.showValidationMessage(msg);
 
                     return true;
                 }
             }
-            else {
-                if (minValue !== null) {
-                    if (value < minValue) {
-                        var msg = this.translate('fieldShouldBeGreater', 'messages')
-                            .replace('{field}', this.getLabelText())
-                            .replace('{value}', minValue);
-
-                        this.showValidationMessage(msg);
-                        return true;
-                    }
-                }
-                else if (maxValue !== null) {
-                    if (value > maxValue) {
-                        var msg = this.translate('fieldShouldBeLess', 'messages')
-                            .replace('{field}', this.getLabelText())
-                            .replace('{value}', maxValue);
-                        this.showValidationMessage(msg);
-
-                        return true;
-                    }
-                }
-            }
-        },
-
-        validateRequired: function () {
-            if (this.isRequired()) {
-                var value = this.model.get(this.name);
-
-                if (value === null || value === false) {
-                    var msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
-
+            else if (maxValue !== null) {
+                if (value > maxValue) {
+                    let msg = this.translate('fieldShouldBeLess', 'messages')
+                        .replace('{field}', this.getLabelText())
+                        .replace('{value}', maxValue);
                     this.showValidationMessage(msg);
 
                     return true;
                 }
             }
-        },
+        }
+    },
 
-        parse: function (value) {
-            value = (value !== '') ? value : null;
+    validateRequired: function () {
+        if (this.isRequired()) {
+            let value = this.model.get(this.name);
 
-            if (value === null) {
-                return null;
+            if (value === null || value === false) {
+                let msg = this.translate('fieldIsRequired', 'messages')
+                    .replace('{field}', this.getLabelText());
+
+                this.showValidationMessage(msg);
+
+                return true;
             }
+        }
+    },
 
-            value = value
-                .split(this.thousandSeparator)
-                .join('');
+    parse: function (value) {
+        value = (value !== '') ? value : null;
 
-            if (value.indexOf('.') !== -1 || value.indexOf(',') !== -1) {
-                return NaN;
-            }
+        if (value === null) {
+            return null;
+        }
 
-            return parseInt(value);
-        },
+        value = value
+            .split(this.thousandSeparator)
+            .join('');
 
-        fetch: function () {
-            var value = this.$element.val();
-            value = this.parse(value);
+        if (value.indexOf('.') !== -1 || value.indexOf(',') !== -1) {
+            return NaN;
+        }
 
-            var data = {};
+        return parseInt(value);
+    },
 
-            data[this.name] = value;
+    fetch: function () {
+        let value = this.$element.val();
+        value = this.parse(value);
 
-            return data;
-        },
+        let data = {};
 
-        fetchSearch: function () {
-            var value = this.parse(this.$element.val());
+        data[this.name] = value;
 
-            var type = this.fetchSearchType();
+        return data;
+    },
 
-            var data;
+    fetchSearch: function () {
+        let value = this.parse(this.$element.val());
 
-            if (isNaN(value)) {
+        let type = this.fetchSearchType();
+
+        let data;
+
+        if (isNaN(value)) {
+            return false;
+        }
+
+        if (type === 'between') {
+            let valueTo = this.parse(this.$el.find('input.additional').val());
+
+            if (isNaN(valueTo)) {
                 return false;
             }
 
-            if (type === 'between') {
-                var valueTo = this.parse(this.$el.find('input.additional').val());
-                if (isNaN(valueTo)) {
-                    return false;
+            data = {
+                type: type,
+                value: [value, valueTo],
+                data: {
+                    value1: value,
+                    value2: valueTo
                 }
-                data = {
-                    type: type,
-                    value: [value, valueTo],
-                    data: {
-                        value1: value,
-                        value2: valueTo
-                    }
-                };
-            }
-            else if (type === 'isEmpty') {
-                data = {
-                    type: 'isNull',
-                    typeFront: 'isEmpty'
-                };
-            }
-            else if (type === 'isNotEmpty') {
-                data = {
-                    type: 'isNotNull',
-                    typeFront: 'isNotEmpty'
-                };
-            }
-            else {
-                data = {
-                    type: type,
-                    value: value,
-                    data: {
-                        value1: value
-                    }
-                };
-            }
+            };
+        }
+        else if (type === 'isEmpty') {
+            data = {
+                type: 'isNull',
+                typeFront: 'isEmpty'
+            };
+        }
+        else if (type === 'isNotEmpty') {
+            data = {
+                type: 'isNotNull',
+                typeFront: 'isNotEmpty'
+            };
+        }
+        else {
+            data = {
+                type: type,
+                value: value,
+                data: {
+                    value1: value
+                }
+            };
+        }
 
-            return data;
-        },
+        return data;
+    },
 
-        getSearchType: function () {
-            return this.searchParams.typeFront || this.searchParams.type;
-        },
-    });
+    getSearchType: function () {
+        return this.searchParams.typeFront || this.searchParams.type;
+    },
 });
diff --git a/client/src/views/fields/link-multiple.js b/client/src/views/fields/link-multiple.js
index 909a8b5c55..d8b3df7464 100644
--- a/client/src/views/fields/link-multiple.js
+++ b/client/src/views/fields/link-multiple.js
@@ -26,968 +26,950 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/link-multiple', ['views/fields/base', 'helpers/record-modal'], function (Dep, RecordModal) {
+/** @module views/fields/link-multiple */
+
+import Dep from 'views/fields/base';
+import RecordModal from 'helpers/record-modal';
+
+/**
+ * A link-multiple field (for has-many relations).
+ *
+ * @class Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    type: 'linkMultiple',
+
+    listTemplate: 'fields/link-multiple/list',
+    detailTemplate: 'fields/link-multiple/detail',
+    editTemplate: 'fields/link-multiple/edit',
+    searchTemplate: 'fields/link-multiple/search',
 
     /**
-     * A link-multiple field (has-many relation).
+     * A name-hash attribute name.
      *
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/link-multiple
+     * @protected
+     * @type {string}
      */
-    return Dep.extend(/** @lends module:views/fields/link-multiple.Class# */{
+    nameHashName: null,
 
+    /**
+     * A IDs attribute name.
+     *
+     * @protected
+     * @type {string}
+     */
+    idsName: null,
+
+    /**
+     * @protected
+     * @type {Object.<string,string>|null}
+     */
+    nameHash: null,
+
+    /**
+     * @protected
+     * @type {string[]|null}
+     */
+    ids: null,
+
+    /**
+     * A foreign entity type.
+     *
+     * @protected
+     * @type {string}
+     */
+    foreignScope: null,
+
+    /**
+     * Autocomplete disabled.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    autocompleteDisabled: false,
+
+    /**
+     * A select-record view.
+     *
+     * @protected
+     * @type {string}
+     */
+    selectRecordsView: 'views/modals/select-records',
+
+    /**
+     * Create disabled.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    createDisabled: false,
+
+    /**
+     * Force create button even is disabled in clientDefs > relationshipPanels.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    forceCreateButton: false,
+
+    /**
+     * @protected
+     * @type {boolean}
+     */
+    sortable: false,
+
+    /**
+     * A search type list.
+     *
+     * @protected
+     * @type {string[]}
+     */
+    searchTypeList: [
+        'anyOf',
+        'isEmpty',
+        'isNotEmpty',
+        'noneOf',
+        'allOf',
+    ],
+
+    /**
+     * A primary filter list that will be available when selecting a record.
+     *
+     * @protected
+     * @type {string[]|null}
+     */
+    selectFilterList: null,
+
+    /**
+     * A select bool filter list.
+     *
+     * @protected
+     * @type {string[]|null}
+     */
+    selectBoolFilterList: null,
+
+    /**
+     * A select primary filter.
+     *
+     * @protected
+     * @type {string|null}
+     */
+    selectPrimaryFilterName: null,
+
+    /**
+     * An autocomplete max record number.
+     *
+     * @protected
+     * @type {number|null}
+     */
+    autocompleteMaxCount: null,
+
+    /**
+     * Select all attributes.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    forceSelectAllAttributes: false,
+
+    /**
+     * @protected
+     * @type {string}
+     */
+    iconHtml: '',
+
+    /**
+     * @inheritDoc
+     */
+    events: {
         /**
-         * @inheritDoc
+         * @param {JQueryMouseEventObject} e
+         * @this module:views/fields/link-multiple
          */
-        type: 'linkMultiple',
+        'auxclick a[href]:not([role="button"])': function (e) {
+            if (!this.isReadMode()) {
+                return;
+            }
 
-        /**
-         * @inheritDoc
-         */
-        listTemplate: 'fields/link-multiple/list',
+            let isCombination = e.button === 1 && (e.ctrlKey || e.metaKey);
 
-        /**
-         * @inheritDoc
-         */
-        detailTemplate: 'fields/link-multiple/detail',
+            if (!isCombination) {
+                return;
+            }
 
-        /**
-         * @inheritDoc
-         */
-        editTemplate: 'fields/link-multiple/edit',
+            let id = $(e.currentTarget).attr('data-id');
 
-        /**
-         * @inheritDoc
-         */
-        searchTemplate: 'fields/link-multiple/search',
+            if (!id) {
+                return;
+            }
 
-        /**
-         * A name-hash attribute name.
-         *
-         * @protected
-         * @type {string}
-         */
-        nameHashName: null,
+            e.preventDefault();
+            e.stopPropagation();
 
-        /**
-         * A IDs attribute name.
-         *
-         * @protected
-         * @type {string}
-         */
-        idsName: null,
+            this.quickView(id);
+        },
+    },
 
-        /**
-         * @protected
-         * @type {Object.<string,string>|null}
-         */
-        nameHash: null,
+    /**
+     * @inheritDoc
+     */
+    data: function () {
+        let ids = this.model.get(this.idsName);
 
-        /**
-         * @protected
-         * @type {string[]|null}
-         */
-        ids: null,
+        return _.extend({
+            idValues: this.model.get(this.idsName),
+            idValuesString: ids ? ids.join(',') : '',
+            nameHash: this.model.get(this.nameHashName),
+            foreignScope: this.foreignScope,
+            valueIsSet: this.model.has(this.idsName),
+        }, Dep.prototype.data.call(this));
+    },
 
-        /**
-         * A foreign entity type.
-         *
-         * @protected
-         * @type {string}
-         */
-        foreignScope: null,
+    /**
+     * Get advanced filters (field filters) to be applied when select a record.
+     * Can be extended.
+     *
+     * @protected
+     * @return {Object.<string,module:search-manager~advancedFilter>|null}
+     */
+    getSelectFilters: function () {
+        return null;
+    },
 
-        /**
-         * Autocomplete disabled.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        autocompleteDisabled: false,
+    /**
+     * Get a select bool filter list. Applied when select a record.
+     * Can be extended.
+     *
+     * @protected
+     * @return {string[]|null}
+     */
+    getSelectBoolFilterList: function () {
+        return this.selectBoolFilterList;
+    },
 
-        /**
-         * A select-record view.
-         *
-         * @protected
-         * @type {string}
-         */
-        selectRecordsView: 'views/modals/select-records',
+    /**
+     * Get a select primary filter. Applied when select a record.
+     * Can be extended.
+     *
+     * @protected
+     * @return {string|null}
+     */
+    getSelectPrimaryFilterName: function () {
+        return this.selectPrimaryFilterName;
+    },
 
-        /**
-         * Create disabled.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        createDisabled: false,
+    /**
+     * Get a primary filter list that will be available when selecting a record.
+     * Can be extended.
+     *
+     * @return {string[]|null}
+     */
+    getSelectFilterList: function () {
+        return this.selectFilterList;
+    },
 
-        /**
-         * Force create button even is disabled in clientDefs > relationshipPanels.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        forceCreateButton: false,
+    /**
+     * Attributes to pass to a model when creating a new record.
+     * Can be extended.
+     *
+     * @return {Object.<string, *>|null}
+     */
+    getCreateAttributes: function () {
+        let attributeMap = this.getMetadata()
+            .get(['clientDefs', this.entityType, 'relationshipPanels', this.name, 'createAttributeMap']) || {};
 
-        /**
-         * @protected
-         * @type {boolean}
-         */
-        sortable: false,
+        let attributes = {};
 
-        /**
-         * A search type list.
-         *
-         * @protected
-         * @type {string[]}
-         */
-        searchTypeList: [
-            'anyOf',
-            'isEmpty',
-            'isNotEmpty',
-            'noneOf',
-            'allOf',
-        ],
+        Object.keys(attributeMap).forEach(attr => attributes[attributeMap[attr]] = this.model.get(attr));
 
-        /**
-         * A primary filter list that will be available when selecting a record.
-         *
-         * @protected
-         * @type {string[]|null}
-         */
-        selectFilterList: null,
+        return attributes;
+    },
 
-        /**
-         * A select bool filter list.
-         *
-         * @protected
-         * @type {string[]|null}
-         */
-        selectBoolFilterList: null,
+    /**
+     * @inheritDoc
+     */
+    setup: function () {
+        this.nameHashName = this.name + 'Names';
+        this.idsName = this.name + 'Ids';
 
-        /**
-         * A select primary filter.
-         *
-         * @protected
-         * @type {string|null}
-         */
-        selectPrimaryFilterName: null,
+        this.foreignScope = this.options.foreignScope ||
+            this.foreignScope ||
+            this.model.getFieldParam(this.name, 'entity') ||
+            this.model.getLinkParam(this.name, 'entity');
 
-        /**
-         * An autocomplete max record number.
-         *
-         * @protected
-         * @type {number|null}
-         */
-        autocompleteMaxCount: null,
+        if ('createDisabled' in this.options) {
+            this.createDisabled = this.options.createDisabled;
+        }
 
-        /**
-         * Select all attributes.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        forceSelectAllAttributes: false,
+        if (this.isSearchMode()) {
+            let nameHash = this.getSearchParamsData().nameHash || this.searchParams.nameHash || {};
+            let idList = this.getSearchParamsData().idList || this.searchParams.value || [];
 
-        /**
-         * @protected
-         * @type {string}
-         */
-        iconHtml: '',
+            this.nameHash = Espo.Utils.clone(nameHash);
+            this.ids = Espo.Utils.clone(idList);
+        }
+        else {
+            this.copyValuesFromModel();
+        }
 
-        /**
-         * @inheritDoc
-         */
-        events: {
-            /**
-             * @param {JQueryMouseEventObject} e
-             * @this module:views/fields/link-multiple.Class
-             */
-            'auxclick a[href]:not([role="button"])': function (e) {
-                if (!this.isReadMode()) {
-                    return;
-                }
+        this.listenTo(this.model, 'change:' + this.idsName, () => {
+            this.copyValuesFromModel();
+        });
 
-                let isCombination = e.button === 1 && (e.ctrlKey || e.metaKey);
+        this.sortable = this.sortable || this.params.sortable;
 
-                if (!isCombination) {
-                    return;
-                }
+        this.iconHtml = this.getHelper().getScopeColorIconHtml(this.foreignScope);
 
+        if (!this.isListMode()) {
+            this.addActionHandler('selectLink', () => this.actionSelect());
+
+            this.events['click a[data-action="clearLink"]'] = (e) => {
                 let id = $(e.currentTarget).attr('data-id');
 
-                if (!id) {
-                    return;
-                }
+                this.deleteLink(id);
 
-                e.preventDefault();
-                e.stopPropagation();
+                this.$element.get(0).focus({preventScroll: true});
+            };
+        }
+    },
 
-                this.quickView(id);
+    /**
+     * Copy values from a model to view properties.
+     */
+    copyValuesFromModel: function () {
+        this.ids = Espo.Utils.clone(this.model.get(this.idsName) || []);
+        this.nameHash = Espo.Utils.clone(this.model.get(this.nameHashName) || {});
+    },
+
+    /**
+     * Handle a search type.
+     *
+     * @protected
+     * @param {string} type A type.
+     */
+    handleSearchType: function (type) {
+        if (~['anyOf', 'noneOf', 'allOf'].indexOf(type)) {
+            this.$el.find('div.link-group-container').removeClass('hidden');
+        }
+        else {
+            this.$el.find('div.link-group-container').addClass('hidden');
+        }
+    },
+
+    /**
+     * @inheritDoc
+     */
+    setupSearch: function () {
+        this.events = _.extend({
+            'change select.search-type': (e) => {
+                let type = $(e.currentTarget).val();
+
+                this.handleSearchType(type);
             },
-        },
+        }, this.events || {});
+    },
 
-        /**
-         * @inheritDoc
-         */
-        data: function () {
-            let ids = this.model.get(this.idsName);
+    /**
+     * Get an autocomplete max record number. Can be extended.
+     *
+     * @protected
+     * @return {number}
+     */
+    getAutocompleteMaxCount: function () {
+        if (this.autocompleteMaxCount) {
+            return this.autocompleteMaxCount;
+        }
 
-            return _.extend({
-                idValues: this.model.get(this.idsName),
-                idValuesString: ids ? ids.join(',') : '',
-                nameHash: this.model.get(this.nameHashName),
-                foreignScope: this.foreignScope,
-                valueIsSet: this.model.has(this.idsName),
-            }, Dep.prototype.data.call(this));
-        },
+        return this.getConfig().get('recordsPerPage');
+    },
 
-        /**
-         * Get advanced filters (field filters) to be applied when select a record.
-         * Can be extended.
-         *
-         * @protected
-         * @return {Object.<string,module:search-manager~advancedFilter>|null}
-         */
-        getSelectFilters: function () {
-            return null;
-        },
+    /**
+     * Compose an autocomplete URL. Can be extended.
+     *
+     * @protected
+     * @return {string}
+     */
+    getAutocompleteUrl: function () {
+        let url = this.foreignScope + '?&maxSize=' + this.getAutocompleteMaxCount();
 
-        /**
-         * Get a select bool filter list. Applied when select a record.
-         * Can be extended.
-         *
-         * @protected
-         * @return {string[]|null}
-         */
-        getSelectBoolFilterList: function () {
-            return this.selectBoolFilterList;
-        },
+        if (!this.forceSelectAllAttributes) {
+            let select = ['id', 'name'];
 
-        /**
-         * Get a select primary filter. Applied when select a record.
-         * Can be extended.
-         *
-         * @protected
-         * @return {string|null}
-         */
-        getSelectPrimaryFilterName: function () {
-            return this.selectPrimaryFilterName;
-        },
+            if (this.mandatorySelectAttributeList) {
+                select = select.concat(this.mandatorySelectAttributeList);
+            }
 
-        /**
-         * Get a primary filter list that will be available when selecting a record.
-         * Can be extended.
-         *
-         * @return {string[]|null}
-         */
-        getSelectFilterList: function () {
-            return this.selectFilterList;
-        },
+            url += '&select=' + select.join(',')
+        }
 
-        /**
-         * Attributes to pass to a model when creating a new record.
-         * Can be extended.
-         *
-         * @return {Object.<string, *>|null}
-         */
-        getCreateAttributes: function () {
-            let attributeMap = this.getMetadata()
-                .get(['clientDefs', this.entityType, 'relationshipPanels', this.name, 'createAttributeMap']) || {};
+        /** @var {Object.<string, *>} */
+        let panelDefs = this.getMetadata()
+            .get(['clientDefs', this.entityType, 'relationshipPanels', this.name]) || {};
 
-            let attributes = {};
+        let boolList = [
+            ...(this.getSelectBoolFilterList() || []),
+            ...(panelDefs.selectBoolFilterList || []),
+        ];
 
-            Object.keys(attributeMap).forEach(attr => attributes[attributeMap[attr]] = this.model.get(attr));
+        if (boolList.length) {
+            url += '&' + $.param({'boolFilterList': boolList});
+        }
 
-            return attributes;
-        },
+        let primary = this.getSelectPrimaryFilterName() || panelDefs.selectPrimaryFilter;
 
-        /**
-         * @inheritDoc
-         */
-        setup: function () {
-            this.nameHashName = this.name + 'Names';
-            this.idsName = this.name + 'Ids';
+        if (primary) {
+            url += '&' + $.param({'primaryFilter': primary});
+        }
 
-            this.foreignScope = this.options.foreignScope ||
-                this.foreignScope ||
-                this.model.getFieldParam(this.name, 'entity') ||
-                this.model.getLinkParam(this.name, 'entity');
+        return url;
+    },
 
-            if ('createDisabled' in this.options) {
-                this.createDisabled = this.options.createDisabled;
+    /**
+     * @inheritDoc
+     */
+    afterRender: function () {
+        if (this.isEditMode() || this.isSearchMode()) {
+            this.$element = this.$el.find('input.main-element');
+
+            let $element = this.$element;
+
+            if (!this.autocompleteDisabled) {
+                this.$element.on('blur', () => {
+                    setTimeout(() => this.$element.autocomplete('clear'), 300);
+                });
+
+                this.$element.autocomplete({
+                    serviceUrl: (q) => {
+                        return this.getAutocompleteUrl(q);
+                    },
+                    minChars: 1,
+                    paramName: 'q',
+                    noCache: true,
+                    autoSelectFirst: true,
+                    triggerSelectOnValidInput: false,
+                    beforeRender: ($c) => {
+                        if (this.$element.hasClass('input-sm')) {
+                            $c.addClass('small');
+                        }
+                    },
+                    formatResult: (suggestion) => {
+                        return this.getHelper().escapeString(suggestion.name);
+                    },
+                    transformResult: response => {
+                        response = JSON.parse(response);
+
+                        let list = [];
+
+                        response.list.forEach((item) => {
+                            list.push({
+                                id: item.id,
+                                name: item.name || item.id,
+                                data: item.id,
+                                value: item.name || item.id,
+                            });
+                        });
+
+                        return {
+                            suggestions: list
+                        };
+                    },
+                    onSelect: s => {
+                        this.addLink(s.id, s.name);
+
+                        this.$element.val('');
+                        this.$element.focus();
+                    },
+                });
+
+                this.$element.attr('autocomplete', 'espo-' + this.name);
+
+                this.once('render', () => {
+                    $element.autocomplete('dispose');
+                });
+
+                this.once('remove', () => {
+                    $element.autocomplete('dispose');
+                });
+            }
+
+            $element.on('change', () => {
+                $element.val('');
+            });
+
+            this.renderLinks();
+
+            if (this.isEditMode()) {
+                if (this.sortable) {
+                    this.$el.find('.link-container').sortable({
+                        stop: () => {
+                            this.fetchFromDom();
+                            this.trigger('change');
+                        },
+                    });
+                }
             }
 
             if (this.isSearchMode()) {
-                let nameHash = this.getSearchParamsData().nameHash || this.searchParams.nameHash || {};
-                let idList = this.getSearchParamsData().idList || this.searchParams.value || [];
+                let type = this.$el.find('select.search-type').val();
 
-                this.nameHash = Espo.Utils.clone(nameHash);
-                this.ids = Espo.Utils.clone(idList);
-            }
-            else {
-                this.copyValuesFromModel();
-            }
+                this.handleSearchType(type);
 
-            this.listenTo(this.model, 'change:' + this.idsName, () => {
-                this.copyValuesFromModel();
-            });
-
-            this.sortable = this.sortable || this.params.sortable;
-
-            this.iconHtml = this.getHelper().getScopeColorIconHtml(this.foreignScope);
-
-            if (!this.isListMode()) {
-                this.addActionHandler('selectLink', () => this.actionSelect());
-
-                this.events['click a[data-action="clearLink"]'] = (e) => {
-                    let id = $(e.currentTarget).attr('data-id');
-
-                    this.deleteLink(id);
-
-                    this.$element.get(0).focus({preventScroll: true});
-                };
-            }
-        },
-
-        /**
-         * Copy values from a model to view properties.
-         */
-        copyValuesFromModel: function () {
-            this.ids = Espo.Utils.clone(this.model.get(this.idsName) || []);
-            this.nameHash = Espo.Utils.clone(this.model.get(this.nameHashName) || {});
-        },
-
-        /**
-         * Handle a search type.
-         *
-         * @protected
-         * @param {string} type A type.
-         */
-        handleSearchType: function (type) {
-            if (~['anyOf', 'noneOf', 'allOf'].indexOf(type)) {
-                this.$el.find('div.link-group-container').removeClass('hidden');
-            }
-            else {
-                this.$el.find('div.link-group-container').addClass('hidden');
-            }
-        },
-
-        /**
-         * @inheritDoc
-         */
-        setupSearch: function () {
-            this.events = _.extend({
-                'change select.search-type': (e) => {
-                    let type = $(e.currentTarget).val();
-
-                    this.handleSearchType(type);
-                },
-            }, this.events || {});
-        },
-
-        /**
-         * Get an autocomplete max record number. Can be extended.
-         *
-         * @protected
-         * @return {number}
-         */
-        getAutocompleteMaxCount: function () {
-            if (this.autocompleteMaxCount) {
-                return this.autocompleteMaxCount;
-            }
-
-            return this.getConfig().get('recordsPerPage');
-        },
-
-        /**
-         * Compose an autocomplete URL. Can be extended.
-         *
-         * @protected
-         * @return {string}
-         */
-        getAutocompleteUrl: function () {
-            let url = this.foreignScope + '?&maxSize=' + this.getAutocompleteMaxCount();
-
-            if (!this.forceSelectAllAttributes) {
-                let select = ['id', 'name'];
-
-                if (this.mandatorySelectAttributeList) {
-                    select = select.concat(this.mandatorySelectAttributeList);
-                }
-
-                url += '&select=' + select.join(',')
-            }
-
-            /** @var {Object.<string, *>} */
-            let panelDefs = this.getMetadata()
-                .get(['clientDefs', this.entityType, 'relationshipPanels', this.name]) || {};
-
-            let boolList = [
-                ...(this.getSelectBoolFilterList() || []),
-                ...(panelDefs.selectBoolFilterList || []),
-            ];
-
-            if (boolList.length) {
-                url += '&' + $.param({'boolFilterList': boolList});
-            }
-
-            let primary = this.getSelectPrimaryFilterName() || panelDefs.selectPrimaryFilter;
-
-            if (primary) {
-                url += '&' + $.param({'primaryFilter': primary});
-            }
-
-            return url;
-        },
-
-        /**
-         * @inheritDoc
-         */
-        afterRender: function () {
-            if (this.isEditMode() || this.isSearchMode()) {
-                this.$element = this.$el.find('input.main-element');
-
-                let $element = this.$element;
-
-                if (!this.autocompleteDisabled) {
-                    this.$element.on('blur', () => {
-                        setTimeout(() => this.$element.autocomplete('clear'), 300);
-                    });
-
-                    this.$element.autocomplete({
-                        serviceUrl: (q) => {
-                            return this.getAutocompleteUrl(q);
-                        },
-                        minChars: 1,
-                        paramName: 'q',
-                        noCache: true,
-                        autoSelectFirst: true,
-                        triggerSelectOnValidInput: false,
-                        beforeRender: ($c) => {
-                            if (this.$element.hasClass('input-sm')) {
-                                $c.addClass('small');
-                            }
-                        },
-                        formatResult: (suggestion) => {
-                            return this.getHelper().escapeString(suggestion.name);
-                        },
-                        transformResult: response => {
-                            response = JSON.parse(response);
-
-                            let list = [];
-
-                            response.list.forEach((item) => {
-                                list.push({
-                                    id: item.id,
-                                    name: item.name || item.id,
-                                    data: item.id,
-                                    value: item.name || item.id,
-                                });
-                            });
-
-                            return {
-                                suggestions: list
-                            };
-                        },
-                        onSelect: (s) => {
-                            this.addLink(s.id, s.name);
-
-                            this.$element.val('');
-                            this.$element.focus();
-                        },
-                    });
-
-                    this.$element.attr('autocomplete', 'espo-' + this.name);
-
-                    this.once('render', () => {
-                        $element.autocomplete('dispose');
-                    });
-
-                    this.once('remove', () => {
-                        $element.autocomplete('dispose');
-                    });
-                }
-
-                $element.on('change', () => {
-                    $element.val('');
+                this.$el.find('select.search-type').on('change', () => {
+                    this.trigger('change');
                 });
-
-                this.renderLinks();
-
-                if (this.isEditMode()) {
-                    if (this.sortable) {
-                        this.$el.find('.link-container').sortable({
-                            stop: () => {
-                                this.fetchFromDom();
-                                this.trigger('change');
-                            },
-                        });
-                    }
-                }
-
-                if (this.isSearchMode()) {
-                    let type = this.$el.find('select.search-type').val();
-
-                    this.handleSearchType(type);
-
-                    this.$el.find('select.search-type').on('change', () => {
-                        this.trigger('change');
-                    });
-                }
             }
-        },
+        }
+    },
 
-        /**
-         * Render items.
-         *
-         * @protected
-         */
-        renderLinks: function () {
-            this.ids.forEach(id => {
-                this.addLinkHtml(id, this.nameHash[id]);
-            });
-        },
+    /**
+     * Render items.
+     *
+     * @protected
+     */
+    renderLinks: function () {
+        this.ids.forEach(id => {
+            this.addLinkHtml(id, this.nameHash[id]);
+        });
+    },
 
-        /**
-         * Delete an item.
-         *
-         * @protected
-         * @param {string} id An ID.
-         */
-        deleteLink: function (id) {
-            this.trigger('delete-link', id);
-            this.trigger('delete-link:' + id);
+    /**
+     * Delete an item.
+     *
+     * @protected
+     * @param {string} id An ID.
+     */
+    deleteLink: function (id) {
+        this.trigger('delete-link', id);
+        this.trigger('delete-link:' + id);
 
-            this.deleteLinkHtml(id);
+        this.deleteLinkHtml(id);
 
-            let index = this.ids.indexOf(id);
+        let index = this.ids.indexOf(id);
 
-            if (index > -1) {
-                this.ids.splice(index, 1);
-            }
+        if (index > -1) {
+            this.ids.splice(index, 1);
+        }
 
-            delete this.nameHash[id];
+        delete this.nameHash[id];
 
-            this.afterDeleteLink(id);
-            this.trigger('change');
-        },
+        this.afterDeleteLink(id);
+        this.trigger('change');
+    },
 
-        /**
-         * Add an item.
-         *
-         * @protected
-         * @param {string} id An ID.
-         * @param {string} name A name.
-         */
-        addLink: function (id, name) {
-            if (!~this.ids.indexOf(id)) {
-                this.ids.push(id);
+    /**
+     * Add an item.
+     *
+     * @protected
+     * @param {string} id An ID.
+     * @param {string} name A name.
+     */
+    addLink: function (id, name) {
+        if (!~this.ids.indexOf(id)) {
+            this.ids.push(id);
 
-                this.nameHash[id] = name;
+            this.nameHash[id] = name;
 
-                this.addLinkHtml(id, name);
-                this.afterAddLink(id);
+            this.addLinkHtml(id, name);
+            this.afterAddLink(id);
 
-                this.trigger('add-link', id);
-                this.trigger('add-link:' + id);
-            }
+            this.trigger('add-link', id);
+            this.trigger('add-link:' + id);
+        }
 
-            this.trigger('change');
-        },
+        this.trigger('change');
+    },
 
-        /**
-         * @protected
-         * @param {string} id An ID.
-         */
-        afterDeleteLink: function (id) {},
+    /**
+     * @protected
+     * @param {string} id An ID.
+     */
+    afterDeleteLink: function (id) {},
 
-        /**
-         * @protected
-         * @param {string} id An ID.
-         */
-        afterAddLink: function (id) {},
+    /**
+     * @protected
+     * @param {string} id An ID.
+     */
+    afterAddLink: function (id) {},
 
-        /**
-         * @protected
-         * @param {string} id An ID.
-         */
-        deleteLinkHtml: function (id) {
-            this.$el.find('.link-' + id).remove();
-        },
+    /**
+     * @protected
+     * @param {string} id An ID.
+     */
+    deleteLinkHtml: function (id) {
+        this.$el.find('.link-' + id).remove();
+    },
 
-        /**
-         * Add an item for edit mode.
-         *
-         * @protected
-         * @param {string} id An ID.
-         * @param {string} name A name.
-         * @return {JQuery|null}
-         */
-        addLinkHtml: function (id, name) {
-            // Do not use the `html` method to avoid XSS.
+    /**
+     * Add an item for edit mode.
+     *
+     * @protected
+     * @param {string} id An ID.
+     * @param {string} name A name.
+     * @return {JQuery|null}
+     */
+    addLinkHtml: function (id, name) {
+        // Do not use the `html` method to avoid XSS.
 
-            name = name || id;
+        name = name || id;
 
-            let $container = this.$el.find('.link-container');
+        let $container = this.$el.find('.link-container');
 
-            let $el = $('<div>')
-                .addClass('link-' + id)
-                .addClass('list-group-item')
-                .attr('data-id', id);
+        let $el = $('<div>')
+            .addClass('link-' + id)
+            .addClass('list-group-item')
+            .attr('data-id', id);
 
-            $el.text(name).append('&nbsp;');
+        $el.text(name).append('&nbsp;');
 
-            $el.prepend(
-                $('<a>')
-                    .addClass('pull-right')
-                    .attr('role', 'button')
-                    .attr('tabindex', '0')
-                    .attr('data-id', id)
-                    .attr('data-action', 'clearLink')
-                    .append(
-                        $('<span>').addClass('fas fa-times')
-                    )
-            );
-
-            $container.append($el);
-
-            return $el;
-        },
-
-        /**
-         * @param {string} id An ID.
-         * @return {string|null}
-         */
-        getIconHtml: function (id) {
-            return this.iconHtml;
-        },
-
-        /**
-         * Get an item HTML for detail mode.
-         *
-         * @param {string} id An ID.
-         * @return {string}
-         */
-        getDetailLinkHtml: function (id) {
-            // Do not use the `html` method to avoid XSS.
-
-            let name = this.nameHash[id] || id;
-
-            if (!name && id) {
-                name = this.translate(this.foreignScope, 'scopeNames');
-            }
-
-            let iconHtml = this.isDetailMode() ?
-                this.getIconHtml(id) : '';
-
-            let $a = $('<a>')
-                .attr('href', this.getUrl(id))
+        $el.prepend(
+            $('<a>')
+                .addClass('pull-right')
+                .attr('role', 'button')
+                .attr('tabindex', '0')
                 .attr('data-id', id)
-                .text(name);
-
-            if (iconHtml) {
-                $a.prepend(iconHtml)
-            }
-
-            return $a.get(0).outerHTML;
-        },
-
-        /**
-         * @protected
-         * @param {string} id An ID.
-         * @return {string}
-         */
-        getUrl: function (id) {
-            return '#' + this.foreignScope + '/view/' + id;
-        },
-
-        /**
-         * @inheritDoc
-         */
-        getValueForDisplay: function () {
-            if (!this.isDetailMode() && !this.isListMode()) {
-                return null;
-            }
-
-            let itemList = [];
-
-            this.ids.forEach(id => {
-                itemList.push(this.getDetailLinkHtml(id));
-            });
-
-            if (!itemList.length) {
-                return null;
-            }
-
-            return itemList
-                .map(item => $('<div>')
-                    .addClass('link-multiple-item')
-                    .html(item)
-                    .wrap('<div />').parent().html()
+                .attr('data-action', 'clearLink')
+                .append(
+                    $('<span>').addClass('fas fa-times')
                 )
-                .join('');
-        },
+        );
 
-        /**
-         * @inheritDoc
-         */
-        validateRequired: function () {
-            if (!this.isRequired()) {
-                return false;
-            }
+        $container.append($el);
 
-            let idList = this.model.get(this.idsName) || [];
+        return $el;
+    },
 
-            if (idList.length === 0) {
-                let msg = this.translate('fieldIsRequired', 'messages')
-                    .replace('{field}', this.getLabelText());
+    /**
+     * @param {string} id An ID.
+     * @return {string|null}
+     */
+    getIconHtml: function (id) {
+        return this.iconHtml;
+    },
 
-                this.showValidationMessage(msg);
+    /**
+     * Get an item HTML for detail mode.
+     *
+     * @param {string} id An ID.
+     * @return {string}
+     */
+    getDetailLinkHtml: function (id) {
+        // Do not use the `html` method to avoid XSS.
 
-                return true;
-            }
+        let name = this.nameHash[id] || id;
 
+        if (!name && id) {
+            name = this.translate(this.foreignScope, 'scopeNames');
+        }
+
+        let iconHtml = this.isDetailMode() ?
+            this.getIconHtml(id) : '';
+
+        let $a = $('<a>')
+            .attr('href', this.getUrl(id))
+            .attr('data-id', id)
+            .text(name);
+
+        if (iconHtml) {
+            $a.prepend(iconHtml)
+        }
+
+        return $a.get(0).outerHTML;
+    },
+
+    /**
+     * @protected
+     * @param {string} id An ID.
+     * @return {string}
+     */
+    getUrl: function (id) {
+        return '#' + this.foreignScope + '/view/' + id;
+    },
+
+    /**
+     * @inheritDoc
+     */
+    getValueForDisplay: function () {
+        if (!this.isDetailMode() && !this.isListMode()) {
+            return null;
+        }
+
+        let itemList = [];
+
+        this.ids.forEach(id => {
+            itemList.push(this.getDetailLinkHtml(id));
+        });
+
+        if (!itemList.length) {
+            return null;
+        }
+
+        return itemList
+            .map(item => $('<div>')
+                .addClass('link-multiple-item')
+                .html(item)
+                .wrap('<div />').parent().html()
+            )
+            .join('');
+    },
+
+    /**
+     * @inheritDoc
+     */
+    validateRequired: function () {
+        if (!this.isRequired()) {
             return false;
-        },
+        }
 
-        /**
-         * @inheritDoc
-         */
-        fetch: function () {
-            let data = {};
+        let idList = this.model.get(this.idsName) || [];
 
-            data[this.idsName] = Espo.Utils.clone(this.ids);
-            data[this.nameHashName] = Espo.Utils.clone(this.nameHash);
+        if (idList.length === 0) {
+            let msg = this.translate('fieldIsRequired', 'messages')
+                .replace('{field}', this.getLabelText());
+
+            this.showValidationMessage(msg);
+
+            return true;
+        }
+
+        return false;
+    },
+
+    /**
+     * @inheritDoc
+     */
+    fetch: function () {
+        let data = {};
+
+        data[this.idsName] = Espo.Utils.clone(this.ids);
+        data[this.nameHashName] = Espo.Utils.clone(this.nameHash);
+
+        return data;
+    },
+
+    /**
+     * @inheritDoc
+     */
+    fetchFromDom: function () {
+        this.ids = [];
+
+        this.$el.find('.link-container').children().each((i, li) => {
+            let id = $(li).attr('data-id');
+
+            if (!id) {
+                return;
+            }
+
+            this.ids.push(id);
+        });
+    },
+
+    /**
+     * @inheritDoc
+     */
+    fetchSearch: function () {
+        let type = this.$el.find('select.search-type').val();
+        let idList = this.ids || [];
+
+        if (~['anyOf', 'allOf', 'noneOf'].indexOf(type) && !idList.length) {
+            return {
+                type: 'isNotNull',
+                attribute: 'id',
+                data: {
+                    type: type,
+                },
+            };
+        }
+
+        let data;
+
+        if (type === 'anyOf') {
+            data = {
+                type: 'linkedWith',
+                value: idList,
+                data: {
+                    type: type,
+                    nameHash: this.nameHash,
+                },
+            };
 
             return data;
-        },
+        }
 
-        /**
-         * @inheritDoc
-         */
-        fetchFromDom: function () {
-            this.ids = [];
+        if (type === 'allOf') {
+            data = {
+                type: 'linkedWithAll',
+                value: idList,
+                data: {
+                    type: type,
+                    nameHash: this.nameHash,
+                },
+            };
 
-            this.$el.find('.link-container').children().each((i, li) => {
-                let id = $(li).attr('data-id');
+            if (!idList.length) {
+                data.value = null;
+            }
 
-                if (!id) {
-                    return;
+            return data;
+        }
+
+        if (type === 'noneOf') {
+            data = {
+                type: 'notLinkedWith',
+                value: idList,
+                data: {
+                    type: type,
+                    nameHash: this.nameHash,
+                },
+            };
+
+            return data;
+        }
+
+        if (type === 'isEmpty') {
+            data = {
+                type: 'isNotLinked',
+                data: {
+                    type: type,
+                },
+            };
+
+            return data;
+        }
+
+        if (type === 'isNotEmpty') {
+            data = {
+                type: 'isLinked',
+                data: {
+                    type: type,
+                },
+            };
+
+            return data;
+        }
+    },
+
+    /**
+     * @inheritDoc
+     */
+    getSearchType: function () {
+        return this.getSearchParamsData().type ||
+            this.searchParams.typeFront ||
+            this.searchParams.type || 'anyOf';
+    },
+
+    /**
+     * @protected
+     * @param {string} id
+     */
+    quickView: function (id) {
+        let entityType = this.foreignScope;
+
+        let helper = new RecordModal(this.getMetadata(), this.getAcl());
+
+        helper.showDetail(this, {
+            id: id,
+            scope: entityType,
+        });
+    },
+
+    /**
+     * @protected
+     */
+    actionSelect: function () {
+        Espo.Ui.notify(' ... ');
+
+        /** @var {Object.<string, *>} */
+        let panelDefs = this.getMetadata()
+            .get(['clientDefs', this.entityType, 'relationshipPanels', this.name]) || {};
+
+        let viewName = panelDefs.selectModalView ||
+            this.getMetadata().get(`clientDefs.${this.foreignScope}.modalViews.select`) ||
+            this.selectRecordsView;
+
+        let handler = panelDefs.selectHandler || null;
+
+        let createButton = this.isEditMode() &&
+            (!this.createDisabled && !panelDefs.createDisabled || this.forceCreateButton);
+
+        let createAttributesProvider = null;
+
+        if (createButton) {
+            createAttributesProvider = () => {
+                let attributes = this.getCreateAttributes() || {};
+
+                if (!panelDefs.createHandler) {
+                    return Promise.resolve(attributes);
                 }
 
-                this.ids.push(id);
-            });
-        },
+                return new Promise(resolve => {
+                    Espo.loader.requirePromise(panelDefs.createHandler)
+                        .then(Handler => new Handler(this.getHelper()))
+                        .then(handler => {
+                            handler.getAttributes(this.model)
+                                .then(additionalAttributes => {
+                                    resolve({
+                                        ...attributes,
+                                        ...additionalAttributes,
+                                    });
+                                });
+                        });
+                });
+            };
+        }
 
-        /**
-         * @inheritDoc
-         */
-        fetchSearch: function () {
-            let type = this.$el.find('select.search-type').val();
-            let idList = this.ids || [];
+        new Promise(resolve => {
+            if (!handler || this.isSearchMode()) {
+                resolve({});
 
-            if (~['anyOf', 'allOf', 'noneOf'].indexOf(type) && !idList.length) {
-                return {
-                    type: 'isNotNull',
-                    attribute: 'id',
-                    data: {
-                        type: type,
-                    },
-                };
+                return;
             }
 
-            let data;
+            Espo.loader.requirePromise(handler)
+                .then(Handler => new Handler(this.getHelper()))
+                .then(handler => {
+                    handler.getFilters(this.model)
+                        .then(filters => resolve(filters));
+                });
+        }).then(filters => {
+            let advanced = {...(this.getSelectFilters() || {}), ...(filters.advanced || {})};
+            let boolFilterList = [
+                ...(this.getSelectBoolFilterList() || []),
+                ...(filters.bool || []),
+                ...(panelDefs.selectBoolFilterList || []),
+            ];
+            let primaryFilter = this.getSelectPrimaryFilterName() ||
+                filters.primary || panelDefs.selectPrimaryFilter;
 
-            if (type === 'anyOf') {
-                data = {
-                    type: 'linkedWith',
-                    value: idList,
-                    data: {
-                        type: type,
-                        nameHash: this.nameHash,
-                    },
-                };
+            this.createView('dialog', viewName, {
+                scope: this.foreignScope,
+                createButton: createButton,
+                filters: advanced,
+                boolFilterList: boolFilterList,
+                primaryFilterName: primaryFilter,
+                filterList: this.getSelectFilterList(),
+                multiple: true,
+                mandatorySelectAttributeList: this.mandatorySelectAttributeList,
+                forceSelectAllAttributes: this.forceSelectAllAttributes,
+                createAttributesProvider: createAttributesProvider,
+            }, dialog => {
+                dialog.render();
 
-                return data;
-            }
+                Espo.Ui.notify(false);
 
-            if (type === 'allOf') {
-                data = {
-                    type: 'linkedWithAll',
-                    value: idList,
-                    data: {
-                        type: type,
-                        nameHash: this.nameHash,
-                    },
-                };
+                this.listenToOnce(dialog, 'select', models => {
+                    this.clearView('dialog');
 
-                if (!idList.length) {
-                    data.value = null;
-                }
-
-                return data;
-            }
-
-            if (type === 'noneOf') {
-                data = {
-                    type: 'notLinkedWith',
-                    value: idList,
-                    data: {
-                        type: type,
-                        nameHash: this.nameHash,
-                    },
-                };
-
-                return data;
-            }
-
-            if (type === 'isEmpty') {
-                data = {
-                    type: 'isNotLinked',
-                    data: {
-                        type: type,
-                    },
-                };
-
-                return data;
-            }
-
-            if (type === 'isNotEmpty') {
-                data = {
-                    type: 'isLinked',
-                    data: {
-                        type: type,
-                    },
-                };
-
-                return data;
-            }
-        },
-
-        /**
-         * @inheritDoc
-         */
-        getSearchType: function () {
-            return this.getSearchParamsData().type ||
-                this.searchParams.typeFront ||
-                this.searchParams.type || 'anyOf';
-        },
-
-        /**
-         * @protected
-         * @param {string} id
-         */
-        quickView: function (id) {
-            let entityType = this.foreignScope;
-
-            let helper = new RecordModal(this.getMetadata(), this.getAcl());
-
-            helper.showDetail(this, {
-                id: id,
-                scope: entityType,
-            });
-        },
-
-        /**
-         * @protected
-         */
-        actionSelect: function () {
-            Espo.Ui.notify(' ... ');
-
-            /** @var {Object.<string, *>} */
-            let panelDefs = this.getMetadata()
-                .get(['clientDefs', this.entityType, 'relationshipPanels', this.name]) || {};
-
-            let viewName = panelDefs.selectModalView ||
-                this.getMetadata().get(`clientDefs.${this.foreignScope}.modalViews.select`) ||
-                this.selectRecordsView;
-
-            let handler = panelDefs.selectHandler || null;
-
-            let createButton = this.isEditMode() &&
-                (!this.createDisabled && !panelDefs.createDisabled || this.forceCreateButton);
-
-            let createAttributesProvider = null;
-
-            if (createButton) {
-                createAttributesProvider = () => {
-                    let attributes = this.getCreateAttributes() || {};
-
-                    if (!panelDefs.createHandler) {
-                        return Promise.resolve(attributes);
+                    if (Object.prototype.toString.call(models) !== '[object Array]') {
+                        models = [models];
                     }
 
-                    return new Promise(resolve => {
-                        Espo.loader.requirePromise(panelDefs.createHandler)
-                            .then(Handler => new Handler(this.getHelper()))
-                            .then(handler => {
-                                handler.getAttributes(this.model)
-                                    .then(additionalAttributes => {
-                                        resolve({
-                                            ...attributes,
-                                            ...additionalAttributes,
-                                        });
-                                    });
-                            });
-                    });
-                };
-            }
-
-            new Promise(resolve => {
-                if (!handler || this.isSearchMode()) {
-                    resolve({});
-
-                    return;
-                }
-
-                Espo.loader.requirePromise(handler)
-                    .then(Handler => new Handler(this.getHelper()))
-                    .then(handler => {
-                        handler.getFilters(this.model)
-                            .then(filters => resolve(filters));
-                    });
-            }).then(filters => {
-                let advanced = {...(this.getSelectFilters() || {}), ...(filters.advanced || {})};
-                let boolFilterList = [
-                    ...(this.getSelectBoolFilterList() || []),
-                    ...(filters.bool || []),
-                    ...(panelDefs.selectBoolFilterList || []),
-                ];
-                let primaryFilter = this.getSelectPrimaryFilterName() ||
-                    filters.primary || panelDefs.selectPrimaryFilter;
-
-                this.createView('dialog', viewName, {
-                    scope: this.foreignScope,
-                    createButton: createButton,
-                    filters: advanced,
-                    boolFilterList: boolFilterList,
-                    primaryFilterName: primaryFilter,
-                    filterList: this.getSelectFilterList(),
-                    multiple: true,
-                    mandatorySelectAttributeList: this.mandatorySelectAttributeList,
-                    forceSelectAllAttributes: this.forceSelectAllAttributes,
-                    createAttributesProvider: createAttributesProvider,
-                }, dialog => {
-                    dialog.render();
-
-                    Espo.Ui.notify(false);
-
-                    this.listenToOnce(dialog, 'select', models => {
-                        this.clearView('dialog');
-
-                        if (Object.prototype.toString.call(models) !== '[object Array]') {
-                            models = [models];
-                        }
-
-                        models.forEach(model => {
-                            this.addLink(model.id, model.get('name'));
-                        });
+                    models.forEach(model => {
+                        this.addLink(model.id, model.get('name'));
                     });
                 });
             });
-        },
-    });
+        });
+    },
 });
diff --git a/client/src/views/fields/link-one.js b/client/src/views/fields/link-one.js
index ecd6bccfe9..edaa7a26c6 100644
--- a/client/src/views/fields/link-one.js
+++ b/client/src/views/fields/link-one.js
@@ -26,67 +26,58 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/link-one', ['views/fields/link'], function (Dep) {
+import Dep from 'views/fields/link';
 
-    return Dep.extend({
+export default Dep.extend({
 
-        searchTypeList: ['is', 'isEmpty', 'isNotEmpty', 'isOneOf'],
+    searchTypeList: ['is', 'isEmpty', 'isNotEmpty', 'isOneOf'],
 
-        fetchSearch: function () {
-            var type = this.$el.find('select.search-type').val();
-            var value = this.$el.find('[data-name="' + this.idName + '"]').val();
+    fetchSearch: function () {
+        let type = this.$el.find('select.search-type').val();
+        let value = this.$el.find('[data-name="' + this.idName + '"]').val();
 
-            if (type === 'isOneOf') {
-                var data = {
-                    type: 'linkedWith',
-                    field: this.name,
-                    value: this.searchData.oneOfIdList,
-                    data: {
-                        type: type,
-                        oneOfIdList: this.searchData.oneOfIdList,
-                        oneOfNameHash: this.searchData.oneOfNameHash,
-                    },
-                };
-
-                return data;
-
-            } else if (type === 'is' || !type) {
-                if (!value) {
-                    return false;
-                }
-
-                var data = {
-                    type: 'linkedWith',
-                    field: this.name,
-                    value: value,
-                    data: {
-                        type: type,
-                        nameValue: this.$el.find('[data-name="' + this.nameName + '"]').val(),
-                    },
-                };
-
-                return data;
+        if (type === 'isOneOf') {
+            return  {
+                type: 'linkedWith',
+                field: this.name,
+                value: this.searchData.oneOfIdList,
+                data: {
+                    type: type,
+                    oneOfIdList: this.searchData.oneOfIdList,
+                    oneOfNameHash: this.searchData.oneOfNameHash,
+                },
+            };
+        }
+        else if (type === 'is' || !type) {
+            if (!value) {
+                return false;
             }
-            else if (type === 'isEmpty') {
-                var data = {
-                    type: 'isNotLinked',
-                    data: {
-                        type: type,
-                    },
-                };
-                return data;
 
-            }
-            else if (type === 'isNotEmpty') {
-                var data = {
-                    type: 'isLinked',
-                    data: {
-                        type: type,
-                    },
-                };
-
-                return data;
-            }
-        },
-    });
+            return  {
+                type: 'linkedWith',
+                field: this.name,
+                value: value,
+                data: {
+                    type: type,
+                    nameValue: this.$el.find('[data-name="' + this.nameName + '"]').val(),
+                },
+            };
+        }
+        else if (type === 'isEmpty') {
+            return  {
+                type: 'isNotLinked',
+                data: {
+                    type: type,
+                },
+            };
+        }
+        else if (type === 'isNotEmpty') {
+            return  {
+                type: 'isLinked',
+                data: {
+                    type: type,
+                },
+            };
+        }
+    },
 });
diff --git a/client/src/views/fields/link-parent.js b/client/src/views/fields/link-parent.js
index 1fff0f6dac..95114d3db6 100644
--- a/client/src/views/fields/link-parent.js
+++ b/client/src/views/fields/link-parent.js
@@ -26,672 +26,650 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/link-parent', ['views/fields/base', 'helpers/record-modal', 'ui/select'],
-function (Dep, RecordModal, /** module:ui/select*/Select) {
+/** @module views/fields/link-parent */
+
+import Dep from 'views/fields/base';
+import RecordModal from 'helpers/record-modal';
+import Select from 'ui/select';
+
+/**
+ * A link-parent field (belongs-to-parent relation).
+ *
+ * @class Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    type: 'linkParent',
+
+    listTemplate: 'fields/link-parent/list',
+    detailTemplate: 'fields/link-parent/detail',
+    editTemplate: 'fields/link-parent/edit',
+    searchTemplate: 'fields/link-parent/search',
+    listLinkTemplate: 'fields/link-parent/list-link',
 
     /**
-     * A link-parent field (belongs-to-parent relation).
+     * A name attribute name.
      *
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/link-parent
+     * @type {string}
      */
-    return Dep.extend(/** @lends module:views/fields/link-parent.Class# */{
+    nameName: null,
 
-        type: 'linkParent',
+    /**
+     * An ID attribute name.
+     *
+     * @type {string}
+     */
+    idName: null,
 
-        listTemplate: 'fields/link-parent/list',
-        detailTemplate: 'fields/link-parent/detail',
-        editTemplate: 'fields/link-parent/edit',
-        searchTemplate: 'fields/link-parent/search',
-        listLinkTemplate: 'fields/link-parent/list-link',
+    /**
+     * A type attribute name.
+     *
+     * @type {string}
+     */
+    typeName: null,
 
+    /**
+     * A current foreign entity type.
+     *
+     * @type {string|null}
+     */
+    foreignScope: null,
+
+    /**
+     * A foreign entity type list.
+     *
+     * @type {string[]}
+     */
+    foreignScopeList: null,
+
+    /**
+     * Autocomplete disabled.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    autocompleteDisabled: false,
+
+    /**
+     * A select-record view.
+     *
+     * @protected
+     * @type {string}
+     */
+    selectRecordsView: 'views/modals/select-records',
+
+    /**
+     * Create disabled.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    createDisabled: false,
+
+    /**
+     * A search type list.
+     *
+     * @protected
+     * @type {string[]}
+     */
+    searchTypeList: [
+        'is',
+        'isEmpty',
+        'isNotEmpty',
+    ],
+
+    /**
+     * A primary filter list that will be available when selecting a record.
+     *
+     * @protected
+     * @type {string[]|null}
+     */
+    selectFilterList: null,
+
+    /**
+     * A select primary filter.
+     *
+     * @protected
+     * @type {string|null}
+     */
+    selectPrimaryFilterName: null,
+
+    /**
+     * A select bool filter list.
+     *
+     * @protected
+     * @type {string[]|null}
+     */
+    selectBoolFilterList: null,
+
+    /**
+     * An autocomplete max record number.
+     *
+     * @protected
+     * @type {number|null}
+     */
+    autocompleteMaxCount: null,
+
+    /**
+     * Select all attributes.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    forceSelectAllAttributes: false,
+
+    /**
+     * Mandatory select attributes.
+     *
+     * @protected
+     * @type {string[]|null}
+     */
+    mandatorySelectAttributeList: null,
+
+    /**
+     * @inheritDoc
+     */
+    initialSearchIsNotIdle: true,
+
+    /**
+     * @inheritDoc
+     */
+    events: {
         /**
-         * A name attribute name.
-         *
-         * @type {string}
+         * @param {JQueryMouseEventObject} e
+         * @this module:views/fields/link-parent.Class
          */
-        nameName: null,
-
-        /**
-         * An ID attribute name.
-         *
-         * @type {string}
-         */
-        idName: null,
-
-        /**
-         * A type attribute name.
-         *
-         * @type {string}
-         */
-        typeName: null,
-
-        /**
-         * A current foreign entity type.
-         *
-         * @type {string|null}
-         */
-        foreignScope: null,
-
-        /**
-         * A foreign entity type list.
-         *
-         * @type {string[]}
-         */
-        foreignScopeList: null,
-
-        /**
-         * Autocomplete disabled.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        autocompleteDisabled: false,
-
-        /**
-         * A select-record view.
-         *
-         * @protected
-         * @type {string}
-         */
-        selectRecordsView: 'views/modals/select-records',
-
-        /**
-         * Create disabled.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        createDisabled: false,
-
-        /**
-         * A search type list.
-         *
-         * @protected
-         * @type {string[]}
-         */
-        searchTypeList: [
-            'is',
-            'isEmpty',
-            'isNotEmpty',
-        ],
-
-        /**
-         * A primary filter list that will be available when selecting a record.
-         *
-         * @protected
-         * @type {string[]|null}
-         */
-        selectFilterList: null,
-
-        /**
-         * A select primary filter.
-         *
-         * @protected
-         * @type {string|null}
-         */
-        selectPrimaryFilterName: null,
-
-        /**
-         * A select bool filter list.
-         *
-         * @protected
-         * @type {string[]|null}
-         */
-        selectBoolFilterList: null,
-
-        /**
-         * An autocomplete max record number.
-         *
-         * @protected
-         * @type {number|null}
-         */
-        autocompleteMaxCount: null,
-
-        /**
-         * Select all attributes.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        forceSelectAllAttributes: false,
-
-        /**
-         * Mandatory select attributes.
-         *
-         * @protected
-         * @type {string[]|null}
-         */
-        mandatorySelectAttributeList: null,
-
-        /**
-         * @inheritDoc
-         */
-        initialSearchIsNotIdle: true,
-
-        /**
-         * @inheritDoc
-         */
-        events: {
-            /**
-             * @param {JQueryMouseEventObject} e
-             * @this module:views/fields/link-parent.Class
-             */
-            'auxclick a[href]:not([role="button"])': function (e) {
-                if (!this.isReadMode()) {
-                    return;
-                }
-
-                let isCombination = e.button === 1 && (e.ctrlKey || e.metaKey);
-
-                if (!isCombination) {
-                    return;
-                }
-
-                e.preventDefault();
-                e.stopPropagation();
-
-                this.quickView();
-            },
-        },
-
-        data: function () {
-            var nameValue = this.model.get(this.nameName);
-
-            if (!nameValue && this.model.get(this.idName) && this.model.get(this.typeName)) {
-                nameValue = this.translate(this.model.get(this.typeName), 'scopeNames');
+        'auxclick a[href]:not([role="button"])': function (e) {
+            if (!this.isReadMode()) {
+                return;
             }
 
-            var iconHtml = null;
+            let isCombination = e.button === 1 && (e.ctrlKey || e.metaKey);
 
-            if (
-                (
-                    this.mode === this.MODE_DETAIL ||
-                    this.mode === this.MODE_LIST && this.displayScopeColorInListMode
-                ) &&
-                this.foreignScope
-            ) {
-                iconHtml = this.getHelper().getScopeColorIconHtml(this.foreignScope);
+            if (!isCombination) {
+                return;
             }
 
-            return _.extend({
-                idName: this.idName,
-                nameName: this.nameName,
-                typeName: this.typeName,
-                idValue: this.model.get(this.idName),
-                nameValue: nameValue,
-                typeValue: this.model.get(this.typeName),
-                foreignScope: this.foreignScope,
-                foreignScopeList: this.foreignScopeList,
-                valueIsSet: this.model.has(this.idName) || this.model.has(this.typeName),
-                iconHtml: iconHtml,
-                displayEntityType: this.displayEntityType && this.model.get(this.typeName),
-            }, Dep.prototype.data.call(this));
+            e.preventDefault();
+            e.stopPropagation();
+
+            this.quickView();
         },
+    },
 
-        /**
-         * Get advanced filters (field filters) to be applied when select a record.
-         * Can be extended.
-         *
-         * @protected
-         * @return {Object.<string,module:search-manager~advancedFilter>|null}
-         */
-        getSelectFilters: function () {
-            return null;
-        },
+    data: function () {
+        var nameValue = this.model.get(this.nameName);
 
-        /**
-         * Get a select bool filter list. Applied when select a record.
-         * Can be extended.
-         *
-         * @protected
-         * @return {string[]|null}
-         */
-        getSelectBoolFilterList: function () {
-            return this.selectBoolFilterList;
-        },
+        if (!nameValue && this.model.get(this.idName) && this.model.get(this.typeName)) {
+            nameValue = this.translate(this.model.get(this.typeName), 'scopeNames');
+        }
 
-        /**
-         * Get a select primary filter. Applied when select a record.
-         * Can be extended.
-         *
-         * @protected
-         * @return {string|null}
-         */
-        getSelectPrimaryFilterName: function () {
-            return this.selectPrimaryFilterName;
-        },
+        var iconHtml = null;
 
-        /**
-         * Attributes to pass to a model when creating a new record.
-         * Can be extended.
-         *
-         * @return {Object.<string,*>|null}
-         */
-        getCreateAttributes: function () {
-            return null;
-        },
+        if (
+            (
+                this.mode === this.MODE_DETAIL ||
+                this.mode === this.MODE_LIST && this.displayScopeColorInListMode
+            ) &&
+            this.foreignScope
+        ) {
+            iconHtml = this.getHelper().getScopeColorIconHtml(this.foreignScope);
+        }
 
-        /**
-         * @inheritDoc
-         */
-        setup: function () {
-            this.nameName = this.name + 'Name';
-            this.typeName = this.name + 'Type';
-            this.idName = this.name + 'Id';
+        return _.extend({
+            idName: this.idName,
+            nameName: this.nameName,
+            typeName: this.typeName,
+            idValue: this.model.get(this.idName),
+            nameValue: nameValue,
+            typeValue: this.model.get(this.typeName),
+            foreignScope: this.foreignScope,
+            foreignScopeList: this.foreignScopeList,
+            valueIsSet: this.model.has(this.idName) || this.model.has(this.typeName),
+            iconHtml: iconHtml,
+            displayEntityType: this.displayEntityType && this.model.get(this.typeName),
+        }, Dep.prototype.data.call(this));
+    },
 
-            this.foreignScopeList = this.options.foreignScopeList || this.foreignScopeList;
+    /**
+     * Get advanced filters (field filters) to be applied when select a record.
+     * Can be extended.
+     *
+     * @protected
+     * @return {Object.<string,module:search-manager~advancedFilter>|null}
+     */
+    getSelectFilters: function () {
+        return null;
+    },
 
-            this.foreignScopeList = this.foreignScopeList ||
-                this.params.entityList ||
-                this.model.getLinkParam(this.name, 'entityList') || [];
+    /**
+     * Get a select bool filter list. Applied when select a record.
+     * Can be extended.
+     *
+     * @protected
+     * @return {string[]|null}
+     */
+    getSelectBoolFilterList: function () {
+        return this.selectBoolFilterList;
+    },
 
-            this.foreignScopeList = Espo.Utils.clone(this.foreignScopeList).filter(item => {
-                if (!this.getMetadata().get(['scopes', item, 'disabled'])) {
-                    return true;
-                }
-            });
+    /**
+     * Get a select primary filter. Applied when select a record.
+     * Can be extended.
+     *
+     * @protected
+     * @return {string|null}
+     */
+    getSelectPrimaryFilterName: function () {
+        return this.selectPrimaryFilterName;
+    },
 
+    /**
+     * Attributes to pass to a model when creating a new record.
+     * Can be extended.
+     *
+     * @return {Object.<string,*>|null}
+     */
+    getCreateAttributes: function () {
+        return null;
+    },
+
+    /**
+     * @inheritDoc
+     */
+    setup: function () {
+        this.nameName = this.name + 'Name';
+        this.typeName = this.name + 'Type';
+        this.idName = this.name + 'Id';
+
+        this.foreignScopeList = this.options.foreignScopeList || this.foreignScopeList;
+
+        this.foreignScopeList = this.foreignScopeList ||
+            this.params.entityList ||
+            this.model.getLinkParam(this.name, 'entityList') || [];
+
+        this.foreignScopeList = Espo.Utils.clone(this.foreignScopeList).filter(item => {
+            if (!this.getMetadata().get(['scopes', item, 'disabled'])) {
+                return true;
+            }
+        });
+
+        this.foreignScope = this.model.get(this.typeName) || this.foreignScopeList[0];
+
+        if (this.foreignScope && !~this.foreignScopeList.indexOf(this.foreignScope)) {
+            this.foreignScopeList.unshift(this.foreignScope);
+        }
+
+        this.listenTo(this.model, 'change:' + this.typeName, () => {
             this.foreignScope = this.model.get(this.typeName) || this.foreignScopeList[0];
+        });
 
-            if (this.foreignScope && !~this.foreignScopeList.indexOf(this.foreignScope)) {
-                this.foreignScopeList.unshift(this.foreignScope);
-            }
+        if ('createDisabled' in this.options) {
+            this.createDisabled = this.options.createDisabled;
+        }
 
-            this.listenTo(this.model, 'change:' + this.typeName, () => {
-                this.foreignScope = this.model.get(this.typeName) || this.foreignScopeList[0];
-            });
+        if (!this.isListMode()) {
+            this.addActionHandler('selectLink', () => {
+                Espo.Ui.notify(' ... ');
 
-            if ('createDisabled' in this.options) {
-                this.createDisabled = this.options.createDisabled;
-            }
+                let viewName = this.getMetadata()
+                        .get('clientDefs.' + this.foreignScope + '.modalViews.select') ||
+                    this.selectRecordsView;
 
-            if (!this.isListMode()) {
-                this.addActionHandler('selectLink', () => {
-                    Espo.Ui.notify(' ... ');
+                let createButton = !this.createDisabled && this.isEditMode();
 
-                    let viewName = this.getMetadata()
-                            .get('clientDefs.' + this.foreignScope + '.modalViews.select') ||
-                        this.selectRecordsView;
+                this.createView('dialog', viewName, {
+                    scope: this.foreignScope,
+                    createButton: createButton,
+                    filters: this.getSelectFilters(),
+                    boolFilterList: this.getSelectBoolFilterList(),
+                    primaryFilterName: this.getSelectPrimaryFilterName(),
+                    createAttributes: createButton ? this.getCreateAttributes() : null,
+                    mandatorySelectAttributeList: this.getMandatorySelectAttributeList(),
+                    forceSelectAllAttributes: this.isForceSelectAllAttributes(),
+                }, dialog => {
+                    dialog.render();
 
-                    let createButton = !this.createDisabled && this.isEditMode();
+                    Espo.Ui.notify(false);
 
-                    this.createView('dialog', viewName, {
-                        scope: this.foreignScope,
-                        createButton: createButton,
-                        filters: this.getSelectFilters(),
-                        boolFilterList: this.getSelectBoolFilterList(),
-                        primaryFilterName: this.getSelectPrimaryFilterName(),
-                        createAttributes: createButton ? this.getCreateAttributes() : null,
-                        mandatorySelectAttributeList: this.getMandatorySelectAttributeList(),
-                        forceSelectAllAttributes: this.isForceSelectAllAttributes(),
-                    }, dialog => {
-                        dialog.render();
-
-                        Espo.Ui.notify(false);
-
-                        this.listenToOnce(dialog, 'select', (model) => {
-                            this.clearView('dialog');
-                            this.select(model);
-                        });
+                    this.listenToOnce(dialog, 'select', (model) => {
+                        this.clearView('dialog');
+                        this.select(model);
                     });
                 });
+            });
 
-                this.addActionHandler('clearLink', () => {
-                    if (this.foreignScopeList.length) {
-                        this.foreignScope = this.foreignScopeList[0];
-                        Select.setValue(this.$elementType, this.foreignScope);
-                    }
-
-                    this.$elementName.val('');
-                    this.$elementId.val('');
-
-                    this.trigger('change');
-                });
-
-                this.events['change select[data-name="'+this.typeName+'"]'] = (e) => {
-                    this.foreignScope = e.currentTarget.value;
-                    this.$elementName.val('');
-                    this.$elementId.val('');
-                };
-            }
-        },
-
-        /**
-         * @inheritDoc
-         */
-        setupSearch: function () {
-            var type = this.getSearchParamsData().type;
-
-            if (type === 'is' || !type) {
-                this.searchData.idValue = this.getSearchParamsData().idValue ||
-                    this.searchParams.valueId;
-                this.searchData.nameValue = this.getSearchParamsData().nameValue ||
-                    this.searchParams.valueName;
-                this.searchData.typeValue = this.getSearchParamsData().typeValue ||
-                    this.searchParams.valueType;
-            }
-
-            this.events = _.extend({
-                'change select.search-type': (e) => {
-                    var type = $(e.currentTarget).val();
-                    this.handleSearchType(type);
-                },
-            }, this.events || {});
-        },
-
-        /**
-         * Handle a search type.
-         *
-         * @protected
-         * @param {string} type A type.
-         */
-        handleSearchType: function (type) {
-            if (~['is'].indexOf(type)) {
-                this.$el.find('div.primary').removeClass('hidden');
-            } else {
-                this.$el.find('div.primary').addClass('hidden');
-            }
-        },
-
-        /**
-         * Select.
-         *
-         * @param {module:model.Class} model A model.
-         * @protected
-         */
-        select: function (model) {
-            this.$elementName.val(model.get('name') || model.id);
-            this.$elementId.val(model.get('id'));
-
-            this.trigger('change');
-        },
-
-        /**
-         * Attributes to select regardless availability on a list layout.
-         * Can be extended.
-         *
-         * @protected
-         * @return {string[]|null}
-         */
-        getMandatorySelectAttributeList: function () {
-            return this.mandatorySelectAttributeList;
-        },
-
-        /**
-         * Select all attributes. Can be extended.
-         *
-         * @protected
-         * @return {boolean}
-         */
-        isForceSelectAllAttributes: function () {
-            return this.forceSelectAllAttributes;
-        },
-
-        /**
-         * Get an autocomplete max record number. Can be extended.
-         *
-         * @protected
-         * @return {number}
-         */
-        getAutocompleteMaxCount: function () {
-            if (this.autocompleteMaxCount) {
-                return this.autocompleteMaxCount;
-            }
-
-            return this.getConfig().get('recordsPerPage');
-        },
-
-        /**
-         * Compose an autocomplete URL. Can be extended.
-         *
-         * @protected
-         * @return {string}
-         */
-        getAutocompleteUrl: function () {
-            var url = this.foreignScope + '?maxSize=' + this.getAutocompleteMaxCount();
-
-            if (!this.isForceSelectAllAttributes()) {
-                var select = ['id', 'name'];
-
-                if (this.getMandatorySelectAttributeList()) {
-                    select = select.concat(this.getMandatorySelectAttributeList());
+            this.addActionHandler('clearLink', () => {
+                if (this.foreignScopeList.length) {
+                    this.foreignScope = this.foreignScopeList[0];
+                    Select.setValue(this.$elementType, this.foreignScope);
                 }
 
-                url += '&select=' + select.join(',');
+                this.$elementName.val('');
+                this.$elementId.val('');
+
+                this.trigger('change');
+            });
+
+            this.events['change select[data-name="'+this.typeName+'"]'] = (e) => {
+                this.foreignScope = e.currentTarget.value;
+                this.$elementName.val('');
+                this.$elementId.val('');
+            };
+        }
+    },
+
+    /**
+     * @inheritDoc
+     */
+    setupSearch: function () {
+        var type = this.getSearchParamsData().type;
+
+        if (type === 'is' || !type) {
+            this.searchData.idValue = this.getSearchParamsData().idValue ||
+                this.searchParams.valueId;
+            this.searchData.nameValue = this.getSearchParamsData().nameValue ||
+                this.searchParams.valueName;
+            this.searchData.typeValue = this.getSearchParamsData().typeValue ||
+                this.searchParams.valueType;
+        }
+
+        this.events = _.extend({
+            'change select.search-type': (e) => {
+                var type = $(e.currentTarget).val();
+                this.handleSearchType(type);
+            },
+        }, this.events || {});
+    },
+
+    /**
+     * Handle a search type.
+     *
+     * @protected
+     * @param {string} type A type.
+     */
+    handleSearchType: function (type) {
+        if (~['is'].indexOf(type)) {
+            this.$el.find('div.primary').removeClass('hidden');
+        } else {
+            this.$el.find('div.primary').addClass('hidden');
+        }
+    },
+
+    /**
+     * Select.
+     *
+     * @param {module:model} model A model.
+     * @protected
+     */
+    select: function (model) {
+        this.$elementName.val(model.get('name') || model.id);
+        this.$elementId.val(model.get('id'));
+
+        this.trigger('change');
+    },
+
+    /**
+     * Attributes to select regardless availability on a list layout.
+     * Can be extended.
+     *
+     * @protected
+     * @return {string[]|null}
+     */
+    getMandatorySelectAttributeList: function () {
+        return this.mandatorySelectAttributeList;
+    },
+
+    /**
+     * Select all attributes. Can be extended.
+     *
+     * @protected
+     * @return {boolean}
+     */
+    isForceSelectAllAttributes: function () {
+        return this.forceSelectAllAttributes;
+    },
+
+    /**
+     * Get an autocomplete max record number. Can be extended.
+     *
+     * @protected
+     * @return {number}
+     */
+    getAutocompleteMaxCount: function () {
+        if (this.autocompleteMaxCount) {
+            return this.autocompleteMaxCount;
+        }
+
+        return this.getConfig().get('recordsPerPage');
+    },
+
+    /**
+     * Compose an autocomplete URL. Can be extended.
+     *
+     * @protected
+     * @return {string}
+     */
+    getAutocompleteUrl: function () {
+        var url = this.foreignScope + '?maxSize=' + this.getAutocompleteMaxCount();
+
+        if (!this.isForceSelectAllAttributes()) {
+            var select = ['id', 'name'];
+
+            if (this.getMandatorySelectAttributeList()) {
+                select = select.concat(this.getMandatorySelectAttributeList());
             }
 
-            var boolList = this.getSelectBoolFilterList();
+            url += '&select=' + select.join(',');
+        }
 
-            if (boolList) {
-                url += '&' + $.param({'boolFilterList': boolList});
-            }
+        var boolList = this.getSelectBoolFilterList();
 
-            var primary = this.getSelectPrimaryFilterName();
+        if (boolList) {
+            url += '&' + $.param({'boolFilterList': boolList});
+        }
 
-            if (primary) {
-                url += '&' + $.param({'primaryFilter': primary});
-            }
+        var primary = this.getSelectPrimaryFilterName();
 
-            return url;
-        },
+        if (primary) {
+            url += '&' + $.param({'primaryFilter': primary});
+        }
 
-        afterRender: function () {
-            if (this.isEditMode() || this.isSearchMode()) {
-                this.$elementId = this.$el.find('input[data-name="' + this.idName + '"]');
-                this.$elementName = this.$el.find('input[data-name="' + this.nameName + '"]');
-                this.$elementType = this.$el.find('select[data-name="' + this.typeName + '"]');
+        return url;
+    },
 
-                this.$elementName.on('change', () => {
-                    if (this.$elementName.val() === '') {
-                        this.$elementName.val('');
-                        this.$elementId.val('');
+    afterRender: function () {
+        if (this.isEditMode() || this.isSearchMode()) {
+            this.$elementId = this.$el.find('input[data-name="' + this.idName + '"]');
+            this.$elementName = this.$el.find('input[data-name="' + this.nameName + '"]');
+            this.$elementType = this.$el.find('select[data-name="' + this.typeName + '"]');
 
-                        this.trigger('change');
-                    }
-                });
-
-                this.$elementType.on('change', () => {
+            this.$elementName.on('change', () => {
+                if (this.$elementName.val() === '') {
                     this.$elementName.val('');
                     this.$elementId.val('');
 
                     this.trigger('change');
-                });
+                }
+            });
 
-                this.$elementName.on('blur', e => {
-                    setTimeout(() => {
-                        if (this.mode === this.MODE_EDIT) {
-                            e.currentTarget.value = this.model.get(this.nameName) || '';
-                        }
-                    }, 100);
+            this.$elementType.on('change', () => {
+                this.$elementName.val('');
+                this.$elementId.val('');
 
-                    if (!this.autocompleteDisabled) {
-                        setTimeout(() => this.$elementName.autocomplete('clear'), 300);
+                this.trigger('change');
+            });
+
+            this.$elementName.on('blur', e => {
+                setTimeout(() => {
+                    if (this.mode === this.MODE_EDIT) {
+                        e.currentTarget.value = this.model.get(this.nameName) || '';
                     }
-                });
+                }, 100);
 
                 if (!this.autocompleteDisabled) {
-                    this.$elementName.autocomplete({
-                        serviceUrl: (q) => {
-                            return this.getAutocompleteUrl(q);
-                        },
-                        minChars: 1,
-                        paramName: 'q',
-                        noCache: true,
-                        triggerSelectOnValidInput: false,
-                        autoSelectFirst: true,
-                        beforeRender: ($c) => {
-                            if (this.$elementName.hasClass('input-sm')) {
-                                $c.addClass('small');
-                            }
-                        },
-                        formatResult: (suggestion) => {
-                            return this.getHelper().escapeString(suggestion.name);
-                        },
-                        transformResult: (response) => {
-                            response = JSON.parse(response);
-                            var list = [];
-
-                            response.list.forEach(item => {
-                                list.push({
-                                    id: item.id,
-                                    name: item.name || item.id,
-                                    data: item.id,
-                                    value: item.name || item.id,
-                                    attributes: item,
-                                });
-                            });
-
-                            return {suggestions: list};
-                        },
-                        onSelect: (s) => {
-                            this.getModelFactory().create(this.foreignScope, (model) => {
-                                model.set(s.attributes);
-
-                                this.select(model);
-                                this.$elementName.focus();
-                            });
-                        },
-                    });
-
-                    this.$elementName.off('focus.autocomplete');
-                    this.$elementName.on('focus', () => this.$elementName.get(0).select());
-
-                    this.$elementName.attr('autocomplete', 'espo-' + this.name);
-
-                    Select.init(this.$elementType, {});
+                    setTimeout(() => this.$elementName.autocomplete('clear'), 300);
                 }
+            });
 
-                var $elementName = this.$elementName;
-
-                this.once('render', () => {
-                    $elementName.autocomplete('dispose');
-                });
-
-                this.once('remove', () => {
-                    $elementName.autocomplete('dispose');
-                });
-            }
-
-            if (this.mode === 'search') {
-                var type = this.$el.find('select.search-type').val();
-
-                this.handleSearchType(type);
-
-                this.$el.find('select.search-type').on('change', () => {
-                    this.trigger('change');
-                });
-            }
-        },
-
-        /**
-         * @inheritDoc
-         */
-        getValueForDisplay: function () {
-            return this.model.get(this.nameName);
-        },
-
-        /**
-         * @inheritDoc
-         */
-        validateRequired: function () {
-            if (this.isRequired()) {
-                if (this.model.get(this.idName) === null || !this.model.get(this.typeName)) {
-                    var msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
-
-                    this.showValidationMessage(msg);
-
-                    return true;
-                }
-            }
-        },
-
-        /**
-         * @inheritDoc
-         */
-        fetch: function () {
-            var data = {};
-
-            data[this.typeName] = this.$elementType.val() || null;
-            data[this.nameName] = this.$elementName.val() || null;
-            data[this.idName] = this.$elementId.val() || null;
-
-            if (data[this.idName] === null) {
-                data[this.typeName] = null;
-            }
-
-            return data;
-        },
-
-        /**
-         * @inheritDoc
-         */
-        fetchSearch: function () {
-            let type = this.$el.find('select.search-type').val();
-
-            if (type === 'isEmpty') {
-                return {
-                    type: 'isNull',
-                    field: this.idName,
-                    data: {
-                        type: type,
-                    }
-                };
-            }
-
-            if (type === 'isNotEmpty') {
-                return {
-                    type: 'isNotNull',
-                    field: this.idName,
-                    data: {
-                        type: type,
-                    }
-                };
-            }
-
-            let entityType = this.$elementType.val();
-            let entityName = this.$elementName.val()
-            let entityId = this.$elementId.val();
-
-            if (!entityType) {
-                return null;
-            }
-
-            if (entityId) {
-                return {
-                    type: 'and',
-                    attribute: this.idName,
-                    value: [
-                        {
-                            type: 'equals',
-                            field: this.idName,
-                            value: entityId,
-                        },
-                        {
-                            type: 'equals',
-                            field: this.typeName,
-                            value: entityType,
+            if (!this.autocompleteDisabled) {
+                this.$elementName.autocomplete({
+                    serviceUrl: (q) => {
+                        return this.getAutocompleteUrl(q);
+                    },
+                    minChars: 1,
+                    paramName: 'q',
+                    noCache: true,
+                    triggerSelectOnValidInput: false,
+                    autoSelectFirst: true,
+                    beforeRender: ($c) => {
+                        if (this.$elementName.hasClass('input-sm')) {
+                            $c.addClass('small');
                         }
-                    ],
-                    data: {
-                        type: 'is',
-                        idValue: entityId,
-                        nameValue: entityName,
-                        typeValue: entityType,
-                    }
-                };
+                    },
+                    formatResult: (suggestion) => {
+                        return this.getHelper().escapeString(suggestion.name);
+                    },
+                    transformResult: (response) => {
+                        response = JSON.parse(response);
+                        var list = [];
+
+                        response.list.forEach(item => {
+                            list.push({
+                                id: item.id,
+                                name: item.name || item.id,
+                                data: item.id,
+                                value: item.name || item.id,
+                                attributes: item,
+                            });
+                        });
+
+                        return {suggestions: list};
+                    },
+                    onSelect: (s) => {
+                        this.getModelFactory().create(this.foreignScope, (model) => {
+                            model.set(s.attributes);
+
+                            this.select(model);
+                            this.$elementName.focus();
+                        });
+                    },
+                });
+
+                this.$elementName.off('focus.autocomplete');
+                this.$elementName.on('focus', () => this.$elementName.get(0).select());
+
+                this.$elementName.attr('autocomplete', 'espo-' + this.name);
+
+                Select.init(this.$elementType, {});
             }
 
+            var $elementName = this.$elementName;
+
+            this.once('render', () => {
+                $elementName.autocomplete('dispose');
+            });
+
+            this.once('remove', () => {
+                $elementName.autocomplete('dispose');
+            });
+        }
+
+        if (this.mode === 'search') {
+            var type = this.$el.find('select.search-type').val();
+
+            this.handleSearchType(type);
+
+            this.$el.find('select.search-type').on('change', () => {
+                this.trigger('change');
+            });
+        }
+    },
+
+    /**
+     * @inheritDoc
+     */
+    getValueForDisplay: function () {
+        return this.model.get(this.nameName);
+    },
+
+    /**
+     * @inheritDoc
+     */
+    validateRequired: function () {
+        if (this.isRequired()) {
+            if (this.model.get(this.idName) === null || !this.model.get(this.typeName)) {
+                var msg = this.translate('fieldIsRequired', 'messages')
+                    .replace('{field}', this.getLabelText());
+
+                this.showValidationMessage(msg);
+
+                return true;
+            }
+        }
+    },
+
+    /**
+     * @inheritDoc
+     */
+    fetch: function () {
+        var data = {};
+
+        data[this.typeName] = this.$elementType.val() || null;
+        data[this.nameName] = this.$elementName.val() || null;
+        data[this.idName] = this.$elementId.val() || null;
+
+        if (data[this.idName] === null) {
+            data[this.typeName] = null;
+        }
+
+        return data;
+    },
+
+    /**
+     * @inheritDoc
+     */
+    fetchSearch: function () {
+        let type = this.$el.find('select.search-type').val();
+
+        if (type === 'isEmpty') {
+            return {
+                type: 'isNull',
+                field: this.idName,
+                data: {
+                    type: type,
+                }
+            };
+        }
+
+        if (type === 'isNotEmpty') {
+            return {
+                type: 'isNotNull',
+                field: this.idName,
+                data: {
+                    type: type,
+                }
+            };
+        }
+
+        let entityType = this.$elementType.val();
+        let entityName = this.$elementName.val()
+        let entityId = this.$elementId.val();
+
+        if (!entityType) {
+            return null;
+        }
+
+        if (entityId) {
             return {
                 type: 'and',
                 attribute: this.idName,
                 value: [
                     {
-                        type: 'isNotNull',
+                        type: 'equals',
                         field: this.idName,
+                        value: entityId,
                     },
                     {
                         type: 'equals',
@@ -701,35 +679,57 @@ function (Dep, RecordModal, /** module:ui/select*/Select) {
                 ],
                 data: {
                     type: 'is',
+                    idValue: entityId,
+                    nameValue: entityName,
                     typeValue: entityType,
                 }
             };
-        },
+        }
 
-        /**
-         * @inheritDoc
-         */
-        getSearchType: function () {
-            return this.getSearchParamsData().type || this.searchParams.typeFront;
-        },
-
-        /**
-         * @protected
-         */
-        quickView: function () {
-            let id = this.model.get(this.idName);
-            let entityType = this.model.get(this.typeName);
-
-            if (!id || !entityType) {
-                return;
+        return {
+            type: 'and',
+            attribute: this.idName,
+            value: [
+                {
+                    type: 'isNotNull',
+                    field: this.idName,
+                },
+                {
+                    type: 'equals',
+                    field: this.typeName,
+                    value: entityType,
+                }
+            ],
+            data: {
+                type: 'is',
+                typeValue: entityType,
             }
+        };
+    },
 
-            let helper = new RecordModal(this.getMetadata(), this.getAcl());
+    /**
+     * @inheritDoc
+     */
+    getSearchType: function () {
+        return this.getSearchParamsData().type || this.searchParams.typeFront;
+    },
 
-            helper.showDetail(this, {
-                id: id,
-                scope: entityType,
-            });
-        },
-    });
+    /**
+     * @protected
+     */
+    quickView: function () {
+        let id = this.model.get(this.idName);
+        let entityType = this.model.get(this.typeName);
+
+        if (!id || !entityType) {
+            return;
+        }
+
+        let helper = new RecordModal(this.getMetadata(), this.getAcl());
+
+        helper.showDetail(this, {
+            id: id,
+            scope: entityType,
+        });
+    },
 });
diff --git a/client/src/views/fields/link.js b/client/src/views/fields/link.js
index e42479c9bf..d8c1eaa70f 100644
--- a/client/src/views/fields/link.js
+++ b/client/src/views/fields/link.js
@@ -26,880 +26,825 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/link', ['views/fields/base', 'helpers/record-modal'], function (Dep, RecordModal) {
+/** @module views/fields/link */
+
+import Dep from 'views/fields/base';
+import RecordModal from 'helpers/record-modal';
+
+/**
+ * A link field (belongs-to relation).
+ *
+ * @class
+ * @name Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** @lends Class# */{
 
     /**
-     * A link field (belongs-to relation).
-     *
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/link
+     * @inheritDoc
      */
-    return Dep.extend(/** @lends module:views/fields/link.Class# */{
+    type: 'link',
 
+    /** @inheritDoc */
+    listTemplate: 'fields/link/list',
+    /** @inheritDoc */
+    detailTemplate: 'fields/link/detail',
+    /** @inheritDoc */
+    editTemplate: 'fields/link/edit',
+    /** @inheritDoc */
+    searchTemplate: 'fields/link/search',
+
+    /**
+     * A name attribute name.
+     *
+     * @type {string}
+     */
+    nameName: null,
+
+    /**
+     * An ID attribute name.
+     *
+     * @type {string}
+     */
+    idName: null,
+
+    /**
+     * A foreign entity type.
+     *
+     * @type {string}
+     */
+    foreignScope: null,
+
+    /**
+     * A select-record view.
+     *
+     * @protected
+     * @type {string}
+     */
+    selectRecordsView: 'views/modals/select-records',
+
+    /**
+     * Autocomplete disabled.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    autocompleteDisabled: false,
+
+    /**
+     * Create disabled.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    createDisabled: false,
+
+    /**
+     * Force create button even is disabled in clientDefs > relationshipPanels.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    forceCreateButton: false,
+
+    /**
+     * A search type list.
+     *
+     * @protected
+     * @type {string[]}
+     */
+    searchTypeList: [
+        'is',
+        'isEmpty',
+        'isNotEmpty',
+        'isNot',
+        'isOneOf',
+        'isNotOneOf',
+    ],
+
+    /**
+     * A primary filter list that will be available when selecting a record.
+     *
+     * @protected
+     * @type {string[]|null}
+     */
+    selectFilterList: null,
+
+    /**
+     * A select primary filter.
+     *
+     * @protected
+     * @type {string|null}
+     */
+    selectPrimaryFilterName: null,
+
+    /**
+     * A select bool filter list.
+     *
+     * @protected
+     * @type {string[]|null}
+     */
+    selectBoolFilterList: null,
+
+    /**
+     * An autocomplete max record number.
+     *
+     * @protected
+     * @type {number|null}
+     */
+    autocompleteMaxCount: null,
+
+    /**
+     * Select all attributes.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    forceSelectAllAttributes: false,
+
+    /**
+     * @protected
+     * @type {string[]|null}
+     */
+    mandatorySelectAttributeList: null,
+
+    /**
+     * @inheritDoc
+     */
+    events: {
         /**
-         * @inheritDoc
+         * @param {JQueryMouseEventObject} e
+         * @this module:views/fields/link
          */
-        type: 'link',
+        'auxclick a[href]:not([role="button"])': function (e) {
+            if (!this.isReadMode()) {
+                return;
+            }
 
-        /**
-         * @inheritDoc
-         */
-        listTemplate: 'fields/link/list',
+            let isCombination = e.button === 1 && (e.ctrlKey || e.metaKey);
 
-        /**
-         * @inheritDoc
-         */
-        detailTemplate: 'fields/link/detail',
+            if (!isCombination) {
+                return;
+            }
 
-        /**
-         * @inheritDoc
-         */
-        editTemplate: 'fields/link/edit',
+            e.preventDefault();
+            e.stopPropagation();
 
-        /**
-         * @inheritDoc
-         */
-        searchTemplate: 'fields/link/search',
-
-        /**
-         * A name attribute name.
-         *
-         * @type {string}
-         */
-        nameName: null,
-
-        /**
-         * An ID attribute name.
-         *
-         * @type {string}
-         */
-        idName: null,
-
-        /**
-         * A foreign entity type.
-         *
-         * @type {string}
-         */
-        foreignScope: null,
-
-        /**
-         * A select-record view.
-         *
-         * @protected
-         * @type {string}
-         */
-        selectRecordsView: 'views/modals/select-records',
-
-        /**
-         * Autocomplete disabled.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        autocompleteDisabled: false,
-
-        /**
-         * Create disabled.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        createDisabled: false,
-
-        /**
-         * Force create button even is disabled in clientDefs > relationshipPanels.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        forceCreateButton: false,
-
-        /**
-         * A search type list.
-         *
-         * @protected
-         * @type {string[]}
-         */
-        searchTypeList: [
-            'is',
-            'isEmpty',
-            'isNotEmpty',
-            'isNot',
-            'isOneOf',
-            'isNotOneOf',
-        ],
-
-        /**
-         * A primary filter list that will be available when selecting a record.
-         *
-         * @protected
-         * @type {string[]|null}
-         */
-        selectFilterList: null,
-
-        /**
-         * A select primary filter.
-         *
-         * @protected
-         * @type {string|null}
-         */
-        selectPrimaryFilterName: null,
-
-        /**
-         * A select bool filter list.
-         *
-         * @protected
-         * @type {string[]|null}
-         */
-        selectBoolFilterList: null,
-
-        /**
-         * An autocomplete max record number.
-         *
-         * @protected
-         * @type {number|null}
-         */
-        autocompleteMaxCount: null,
-
-        /**
-         * Select all attributes.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        forceSelectAllAttributes: false,
-
-        /**
-         * @protected
-         * @type {string[]|null}
-         */
-        mandatorySelectAttributeList: null,
-
-        /**
-         * @inheritDoc
-         */
-        events: {
-            /**
-             * @param {JQueryMouseEventObject} e
-             * @this module:views/fields/link.Class
-             */
-            'auxclick a[href]:not([role="button"])': function (e) {
-                if (!this.isReadMode()) {
-                    return;
-                }
-
-                let isCombination = e.button === 1 && (e.ctrlKey || e.metaKey);
-
-                if (!isCombination) {
-                    return;
-                }
-
-                e.preventDefault();
-                e.stopPropagation();
-
-                this.quickView();
-            },
+            this.quickView();
         },
+    },
 
-        /**
-         * @inheritDoc
-         */
-        data: function () {
-            var nameValue = this.model.has(this.nameName) ?
-                this.model.get(this.nameName) :
-                this.model.get(this.idName);
+    /**
+     * @inheritDoc
+     */
+    data: function () {
+        var nameValue = this.model.has(this.nameName) ?
+            this.model.get(this.nameName) :
+            this.model.get(this.idName);
 
-            if (nameValue === null) {
-                nameValue = this.model.get(this.idName);
-            }
+        if (nameValue === null) {
+            nameValue = this.model.get(this.idName);
+        }
 
-            if (this.isReadMode() && !nameValue && this.model.get(this.idName)) {
-                nameValue = this.translate(this.foreignScope, 'scopeNames');
-            }
+        if (this.isReadMode() && !nameValue && this.model.get(this.idName)) {
+            nameValue = this.translate(this.foreignScope, 'scopeNames');
+        }
 
-            var iconHtml = null;
+        var iconHtml = null;
 
-            if (this.isDetailMode()) {
-                iconHtml = this.getHelper().getScopeColorIconHtml(this.foreignScope);
-            }
+        if (this.isDetailMode()) {
+            iconHtml = this.getHelper().getScopeColorIconHtml(this.foreignScope);
+        }
 
-            return _.extend({
-                idName: this.idName,
-                nameName: this.nameName,
-                idValue: this.model.get(this.idName),
-                nameValue: nameValue,
-                foreignScope: this.foreignScope,
-                valueIsSet: this.model.has(this.idName),
-                iconHtml: iconHtml,
-                url: this.getUrl(),
-            }, Dep.prototype.data.call(this));
-        },
+        return _.extend({
+            idName: this.idName,
+            nameName: this.nameName,
+            idValue: this.model.get(this.idName),
+            nameValue: nameValue,
+            foreignScope: this.foreignScope,
+            valueIsSet: this.model.has(this.idName),
+            iconHtml: iconHtml,
+            url: this.getUrl(),
+        }, Dep.prototype.data.call(this));
+    },
 
-        getEmptyAutocompleteResult: null,
+    getEmptyAutocompleteResult: null,
 
-        /**
-         * @protected
-         * @return {?string}
-         */
-        getUrl: function () {
-            let id = this.model.get(this.idName);
+    /**
+     * @protected
+     * @return {?string}
+     */
+    getUrl: function () {
+        let id = this.model.get(this.idName);
 
-            if (!id) {
-                return null;
-            }
-
-            return '#' + this.foreignScope + '/view/' + id;
-        },
-
-        /**
-         * Get advanced filters (field filters) to be applied when select a record.
-         * Can be extended.
-         *
-         * @protected
-         * @return {Object.<string,module:search-manager~advancedFilter>|null}
-         */
-        getSelectFilters: function () {
+        if (!id) {
             return null;
-        },
+        }
 
-        /**
-         * Get a select bool filter list. Applied when select a record.
-         * Can be extended.
-         *
-         * @protected
-         * @return {string[]|null}
-         */
-        getSelectBoolFilterList: function () {
-            return this.selectBoolFilterList;
-        },
+        return '#' + this.foreignScope + '/view/' + id;
+    },
 
-        /**
-         * Get a select primary filter. Applied when select a record.
-         * Can be extended.
-         *
-         * @protected
-         * @return {string|null}
-         */
-        getSelectPrimaryFilterName: function () {
-            return this.selectPrimaryFilterName;
-        },
+    /**
+     * Get advanced filters (field filters) to be applied when select a record.
+     * Can be extended.
+     *
+     * @protected
+     * @return {Object.<string,module:search-manager~advancedFilter>|null}
+     */
+    getSelectFilters: function () {
+        return null;
+    },
 
-        /**
-         * Get a primary filter list that will be available when selecting a record.
-         * Can be extended.
-         *
-         * @return {string[]|null}
-         */
-        getSelectFilterList: function () {
-            return this.selectFilterList;
-        },
+    /**
+     * Get a select bool filter list. Applied when select a record.
+     * Can be extended.
+     *
+     * @protected
+     * @return {string[]|null}
+     */
+    getSelectBoolFilterList: function () {
+        return this.selectBoolFilterList;
+    },
 
-        /**
-         * Attributes to pass to a model when creating a new record.
-         * Can be extended.
-         *
-         * @return {Object.<string,*>|null}
-         */
-        getCreateAttributes: function () {
-            let attributeMap = this.getMetadata()
-                .get(['clientDefs', this.entityType, 'relationshipPanels', this.name, 'createAttributeMap']) || {};
+    /**
+     * Get a select primary filter. Applied when select a record.
+     * Can be extended.
+     *
+     * @protected
+     * @return {string|null}
+     */
+    getSelectPrimaryFilterName: function () {
+        return this.selectPrimaryFilterName;
+    },
 
-            let attributes = {};
+    /**
+     * Get a primary filter list that will be available when selecting a record.
+     * Can be extended.
+     *
+     * @return {string[]|null}
+     */
+    getSelectFilterList: function () {
+        return this.selectFilterList;
+    },
 
-            Object.keys(attributeMap).forEach(attr => attributes[attributeMap[attr]] = this.model.get(attr));
+    /**
+     * Attributes to pass to a model when creating a new record.
+     * Can be extended.
+     *
+     * @return {Object.<string,*>|null}
+     */
+    getCreateAttributes: function () {
+        let attributeMap = this.getMetadata()
+            .get(['clientDefs', this.entityType, 'relationshipPanels', this.name, 'createAttributeMap']) || {};
 
-            return attributes;
-        },
+        let attributes = {};
 
-        /**
-         * @inheritDoc
-         */
-        setup: function () {
-            this.nameName = this.name + 'Name';
-            this.idName = this.name + 'Id';
+        Object.keys(attributeMap).forEach(attr => attributes[attributeMap[attr]] = this.model.get(attr));
 
-            this.foreignScope = this.options.foreignScope || this.foreignScope;
+        return attributes;
+    },
 
-            this.foreignScope = this.foreignScope ||
-                this.model.getFieldParam(this.name, 'entity') || this.model.getLinkParam(this.name, 'entity');
+    /**
+     * @inheritDoc
+     */
+    setup: function () {
+        this.nameName = this.name + 'Name';
+        this.idName = this.name + 'Id';
 
-            if ('createDisabled' in this.options) {
-                this.createDisabled = this.options.createDisabled;
+        this.foreignScope = this.options.foreignScope || this.foreignScope;
+
+        this.foreignScope = this.foreignScope ||
+            this.model.getFieldParam(this.name, 'entity') || this.model.getLinkParam(this.name, 'entity');
+
+        if ('createDisabled' in this.options) {
+            this.createDisabled = this.options.createDisabled;
+        }
+
+        if (!this.isListMode()) {
+            this.addActionHandler('selectLink', () => this.actionSelect());
+            this.addActionHandler('clearLink', () => this.clearLink());
+        }
+
+        if (this.isSearchMode()) {
+            this.addActionHandler('selectLinkOneOf', () => this.actionSelectOneOf());
+
+            this.events['click a[data-action="clearLinkOneOf"]'] = e =>{
+                let id = $(e.currentTarget).data('id').toString();
+
+                this.deleteLinkOneOf(id);
+            };
+        }
+    },
+
+    /**
+     * Select.
+     *
+     * @param {module:model} model A model.
+     * @protected
+     */
+    select: function (model) {
+        this.$elementName.val(model.get('name') || model.id);
+        this.$elementId.val(model.get('id'));
+
+        if (this.mode === this.MODE_SEARCH) {
+            this.searchData.idValue = model.get('id');
+            this.searchData.nameValue = model.get('name') || model.id;
+        }
+
+        this.trigger('change');
+    },
+
+    /**
+     * Clear.
+     */
+    clearLink: function () {
+        this.$elementName.val('');
+        this.$elementId.val('');
+        this.trigger('change');
+    },
+
+    /**
+     * @inheritDoc
+     */
+    setupSearch: function () {
+        this.searchData.oneOfIdList = this.getSearchParamsData().oneOfIdList ||
+            this.searchParams.oneOfIdList || [];
+
+        this.searchData.oneOfNameHash = this.getSearchParamsData().oneOfNameHash ||
+            this.searchParams.oneOfNameHash || {};
+
+        if (~['is', 'isNot', 'equals'].indexOf(this.getSearchType())) {
+            this.searchData.idValue = this.getSearchParamsData().idValue ||
+                this.searchParams.idValue || this.searchParams.value;
+
+            this.searchData.nameValue = this.getSearchParamsData().nameValue ||
+                this.searchParams.nameValue || this.searchParams.valueName;
+        }
+
+        this.events = _.extend({
+            'change select.search-type': function (e) {
+                var type = $(e.currentTarget).val();
+                this.handleSearchType(type);
+            },
+        }, this.events || {});
+    },
+
+    /**
+     * Handle a search type.
+     *
+     * @protected
+     * @param {string} type A type.
+     */
+    handleSearchType: function (type) {
+        if (~['is', 'isNot', 'isNotAndIsNotEmpty'].indexOf(type)) {
+            this.$el.find('div.primary').removeClass('hidden');
+        }
+        else {
+            this.$el.find('div.primary').addClass('hidden');
+        }
+
+        if (~['isOneOf', 'isNotOneOf', 'isNotOneOfAndIsNotEmpty'].indexOf(type)) {
+            this.$el.find('div.one-of-container').removeClass('hidden');
+        }
+        else {
+            this.$el.find('div.one-of-container').addClass('hidden');
+        }
+    },
+
+    /**
+     * Get an autocomplete max record number. Can be extended.
+     *
+     * @protected
+     * @return {number}
+     */
+    getAutocompleteMaxCount: function () {
+        if (this.autocompleteMaxCount) {
+            return this.autocompleteMaxCount;
+        }
+
+        return this.getConfig().get('recordsPerPage');
+    },
+
+    /**
+     * Compose an autocomplete URL. Can be extended.
+     *
+     * @protected
+     * @return {string}
+     */
+    getAutocompleteUrl: function () {
+        var url = this.foreignScope + '?maxSize=' + this.getAutocompleteMaxCount();
+
+        if (!this.forceSelectAllAttributes) {
+            var select = ['id', 'name'];
+
+            if (this.mandatorySelectAttributeList) {
+                select = select.concat(this.mandatorySelectAttributeList);
             }
 
-            if (!this.isListMode()) {
-                this.addActionHandler('selectLink', () => this.actionSelect());
-                this.addActionHandler('clearLink', () => this.clearLink());
-            }
+            url += '&select=' + select.join(',');
+        }
 
-            if (this.isSearchMode()) {
-                this.addActionHandler('selectLinkOneOf', () => this.actionSelectOneOf());
+        var boolList = this.getSelectBoolFilterList();
 
-                this.events['click a[data-action="clearLinkOneOf"]'] = e =>{
-                    let id = $(e.currentTarget).data('id').toString();
+        if (boolList) {
+            url += '&' + $.param({'boolFilterList': boolList});
+        }
 
-                    this.deleteLinkOneOf(id);
-                };
-            }
-        },
+        var primary = this.getSelectPrimaryFilterName();
 
-        /**
-         * Select.
-         *
-         * @param {module:model.Class} model A model.
-         * @protected
-         */
-        select: function (model) {
-            this.$elementName.val(model.get('name') || model.id);
-            this.$elementId.val(model.get('id'));
+        if (primary) {
+            url += '&' + $.param({'primaryFilter': primary});
+        }
 
-            if (this.mode === this.MODE_SEARCH) {
-                this.searchData.idValue = model.get('id');
-                this.searchData.nameValue = model.get('name') || model.id;
-            }
+        return url;
+    },
 
-            this.trigger('change');
-        },
+    /**
+     * @inheritDoc
+     */
+    afterRender: function () {
+        if (this.isEditMode() || this.isSearchMode()) {
+            this.$elementId = this.$el.find('input[data-name="' + this.idName + '"]');
+            this.$elementName = this.$el.find('input[data-name="' + this.nameName + '"]');
 
-        /**
-         * Clear.
-         */
-        clearLink: function () {
-            this.$elementName.val('');
-            this.$elementId.val('');
-            this.trigger('change');
-        },
+            this.$elementName.on('change', () => {
+                if (this.$elementName.val() === '') {
+                    this.$elementName.val('');
+                    this.$elementId.val('');
 
-        /**
-         * @inheritDoc
-         */
-        setupSearch: function () {
-            this.searchData.oneOfIdList = this.getSearchParamsData().oneOfIdList ||
-                this.searchParams.oneOfIdList || [];
-
-            this.searchData.oneOfNameHash = this.getSearchParamsData().oneOfNameHash ||
-                this.searchParams.oneOfNameHash || {};
-
-            if (~['is', 'isNot', 'equals'].indexOf(this.getSearchType())) {
-                this.searchData.idValue = this.getSearchParamsData().idValue ||
-                    this.searchParams.idValue || this.searchParams.value;
-
-                this.searchData.nameValue = this.getSearchParamsData().nameValue ||
-                    this.searchParams.nameValue || this.searchParams.valueName;
-            }
-
-            this.events = _.extend({
-                'change select.search-type': function (e) {
-                    var type = $(e.currentTarget).val();
-                    this.handleSearchType(type);
-                },
-            }, this.events || {});
-        },
-
-        /**
-         * Handle a search type.
-         *
-         * @protected
-         * @param {string} type A type.
-         */
-        handleSearchType: function (type) {
-            if (~['is', 'isNot', 'isNotAndIsNotEmpty'].indexOf(type)) {
-                this.$el.find('div.primary').removeClass('hidden');
-            }
-            else {
-                this.$el.find('div.primary').addClass('hidden');
-            }
-
-            if (~['isOneOf', 'isNotOneOf', 'isNotOneOfAndIsNotEmpty'].indexOf(type)) {
-                this.$el.find('div.one-of-container').removeClass('hidden');
-            }
-            else {
-                this.$el.find('div.one-of-container').addClass('hidden');
-            }
-        },
-
-        /**
-         * Get an autocomplete max record number. Can be extended.
-         *
-         * @protected
-         * @return {number}
-         */
-        getAutocompleteMaxCount: function () {
-            if (this.autocompleteMaxCount) {
-                return this.autocompleteMaxCount;
-            }
-
-            return this.getConfig().get('recordsPerPage');
-        },
-
-        /**
-         * Compose an autocomplete URL. Can be extended.
-         *
-         * @protected
-         * @return {string}
-         */
-        getAutocompleteUrl: function () {
-            var url = this.foreignScope + '?maxSize=' + this.getAutocompleteMaxCount();
-
-            if (!this.forceSelectAllAttributes) {
-                var select = ['id', 'name'];
-
-                if (this.mandatorySelectAttributeList) {
-                    select = select.concat(this.mandatorySelectAttributeList);
+                    this.trigger('change');
                 }
+            });
 
-                url += '&select=' + select.join(',');
-            }
-
-            var boolList = this.getSelectBoolFilterList();
-
-            if (boolList) {
-                url += '&' + $.param({'boolFilterList': boolList});
-            }
-
-            var primary = this.getSelectPrimaryFilterName();
-
-            if (primary) {
-                url += '&' + $.param({'primaryFilter': primary});
-            }
-
-            return url;
-        },
-
-        /**
-         * @inheritDoc
-         */
-        afterRender: function () {
-            if (this.isEditMode() || this.isSearchMode()) {
-                this.$elementId = this.$el.find('input[data-name="' + this.idName + '"]');
-                this.$elementName = this.$el.find('input[data-name="' + this.nameName + '"]');
-
-                this.$elementName.on('change', () => {
-                    if (this.$elementName.val() === '') {
-                        this.$elementName.val('');
-                        this.$elementId.val('');
-
-                        this.trigger('change');
+            this.$elementName.on('blur', e => {
+                setTimeout(() => {
+                    if (this.mode === this.MODE_EDIT && this.model.has(this.nameName)) {
+                        e.currentTarget.value = this.model.get(this.nameName);
                     }
-                });
-
-                this.$elementName.on('blur', e => {
-                    setTimeout(() => {
-                        if (this.mode === this.MODE_EDIT && this.model.has(this.nameName)) {
-                            e.currentTarget.value = this.model.get(this.nameName);
-                        }
-                    }, 100);
-
-                    if (!this.autocompleteDisabled) {
-                        setTimeout(() => this.$elementName.autocomplete('clear'), 300);
-                    }
-                });
-
-                let $elementName = this.$elementName;
+                }, 100);
 
                 if (!this.autocompleteDisabled) {
-                    let isEmptyQueryResult = false;
+                    setTimeout(() => this.$elementName.autocomplete('clear'), 300);
+                }
+            });
 
-                    if (this.getEmptyAutocompleteResult) {
-                        this.$elementName.on('keydown', e => {
-                            if (e.code === 'Tab' && isEmptyQueryResult) {
-                                e.stopImmediatePropagation();
-                            }
-                        });
-                    }
+            let $elementName = this.$elementName;
 
-                    this.$elementName.autocomplete({
-                        beforeRender: $c => {
-                            if (this.$elementName.hasClass('input-sm')) {
-                                $c.addClass('small');
-                            }
-                        },
-                        serviceUrl: q => {
-                            return this.getAutocompleteUrl(q);
-                        },
-                        lookup: (q, callback) => {
-                            if (q.length === 0) {
-                                isEmptyQueryResult = true;
+            if (!this.autocompleteDisabled) {
+                let isEmptyQueryResult = false;
 
-                                if (this.getEmptyAutocompleteResult) {
-                                    callback(
-                                        this._transformAutocompleteResult(this.getEmptyAutocompleteResult())
-                                    );
-                                }
-
-                                return;
-                            }
-
-                            isEmptyQueryResult = false;
-
-                            Espo.Ajax
-                                .getRequest(this.getAutocompleteUrl(q), {q: q})
-                                .then(response => {
-                                    callback(this._transformAutocompleteResult(response));
-                                });
-                        },
-                        minChars: 0,
-                        triggerSelectOnValidInput: false,
-                        autoSelectFirst: true,
-                        noCache: true,
-                        formatResult: suggestion => {
-                            return this.getHelper().escapeString(suggestion.name);
-                        },
-                        onSelect: (s) => {
-                            this.getModelFactory().create(this.foreignScope, (model) => {
-                                model.set(s.attributes);
-
-                                this.select(model);
-
-                                this.$elementName.focus();
-                            });
-                        },
+                if (this.getEmptyAutocompleteResult) {
+                    this.$elementName.on('keydown', e => {
+                        if (e.code === 'Tab' && isEmptyQueryResult) {
+                            e.stopImmediatePropagation();
+                        }
                     });
+                }
 
-                    this.$elementName.off('focus.autocomplete');
+                this.$elementName.autocomplete({
+                    beforeRender: $c => {
+                        if (this.$elementName.hasClass('input-sm')) {
+                            $c.addClass('small');
+                        }
+                    },
+                    serviceUrl: q => {
+                        return this.getAutocompleteUrl(q);
+                    },
+                    lookup: (q, callback) => {
+                        if (q.length === 0) {
+                            isEmptyQueryResult = true;
 
-                    this.$elementName.on('focus', () => {
-                        if (this.$elementName.val()) {
-                            this.$elementName.get(0).select();
+                            if (this.getEmptyAutocompleteResult) {
+                                callback(
+                                    this._transformAutocompleteResult(this.getEmptyAutocompleteResult())
+                                );
+                            }
 
                             return;
                         }
 
-                        this.$elementName.autocomplete('onFocus');
+                        isEmptyQueryResult = false;
+
+                        Espo.Ajax
+                            .getRequest(this.getAutocompleteUrl(q), {q: q})
+                            .then(response => {
+                                callback(this._transformAutocompleteResult(response));
+                            });
+                    },
+                    minChars: 0,
+                    triggerSelectOnValidInput: false,
+                    autoSelectFirst: true,
+                    noCache: true,
+                    formatResult: suggestion => {
+                        return this.getHelper().escapeString(suggestion.name);
+                    },
+                    onSelect: (s) => {
+                        this.getModelFactory().create(this.foreignScope, (model) => {
+                            model.set(s.attributes);
+
+                            this.select(model);
+
+                            this.$elementName.focus();
+                        });
+                    },
+                });
+
+                this.$elementName.off('focus.autocomplete');
+
+                this.$elementName.on('focus', () => {
+                    if (this.$elementName.val()) {
+                        this.$elementName.get(0).select();
+
+                        return;
+                    }
+
+                    this.$elementName.autocomplete('onFocus');
+                });
+
+                this.$elementName.attr('autocomplete', 'espo-' + this.name);
+
+                this.once('render', () => {
+                    $elementName.autocomplete('dispose');
+                });
+
+                this.once('remove', () => {
+                    $elementName.autocomplete('dispose');
+                });
+
+                if (this.isSearchMode()) {
+                    let $elementOneOf = this.$el.find('input.element-one-of');
+
+                    $elementOneOf.autocomplete({
+                        serviceUrl: q => {
+                            return this.getAutocompleteUrl(q);
+                        },
+                        minChars: 1,
+                        paramName: 'q',
+                        noCache: true,
+                        formatResult: suggestion => {
+                            return this.getHelper().escapeString(suggestion.name);
+                        },
+                        transformResult: response => {
+                            return this._transformAutocompleteResult(JSON.parse(response));
+                        },
+                        onSelect: s => {
+                            this.addLinkOneOf(s.id, s.name);
+
+                            $elementOneOf.val('');
+                            setTimeout(() => $elementOneOf.focus(), 50);
+                        },
                     });
 
-                    this.$elementName.attr('autocomplete', 'espo-' + this.name);
+                    $elementOneOf.attr('autocomplete', 'espo-' + this.name);
 
                     this.once('render', () => {
-                        $elementName.autocomplete('dispose');
+                        $elementOneOf.autocomplete('dispose');
                     });
 
                     this.once('remove', () => {
-                        $elementName.autocomplete('dispose');
+                        $elementOneOf.autocomplete('dispose');
                     });
 
-                    if (this.isSearchMode()) {
-                        let $elementOneOf = this.$el.find('input.element-one-of');
-
-                        $elementOneOf.autocomplete({
-                            serviceUrl: q => {
-                                return this.getAutocompleteUrl(q);
-                            },
-                            minChars: 1,
-                            paramName: 'q',
-                            noCache: true,
-                            formatResult: suggestion => {
-                                return this.getHelper().escapeString(suggestion.name);
-                            },
-                            transformResult: response => {
-                                return this._transformAutocompleteResult(JSON.parse(response));
-                            },
-                            onSelect: s => {
-                                this.addLinkOneOf(s.id, s.name);
-
-                                $elementOneOf.val('');
-                                setTimeout(() => $elementOneOf.focus(), 50);
-                            },
-                        });
-
-                        $elementOneOf.attr('autocomplete', 'espo-' + this.name);
-
-                        this.once('render', () => {
-                            $elementOneOf.autocomplete('dispose');
-                        });
-
-                        this.once('remove', () => {
-                            $elementOneOf.autocomplete('dispose');
-                        });
-
-                        this.$el.find('select.search-type').on('change', () => {
-                            this.trigger('change');
-                        });
-                    }
-                }
-
-                $elementName.on('change', () => {
-                    if (!this.isSearchMode() && !this.model.get(this.idName)) {
-                        $elementName.val(this.model.get(this.nameName));
-                    }
-                });
-            }
-
-            if (this.isSearchMode()) {
-                var type = this.$el.find('select.search-type').val();
-
-                this.handleSearchType(type);
-
-                if (~['isOneOf', 'isNotOneOf', 'isNotOneOfAndIsNotEmpty'].indexOf(type)) {
-                    this.searchData.oneOfIdList.forEach(id => {
-                        this.addLinkOneOfHtml(id, this.searchData.oneOfNameHash[id]);
+                    this.$el.find('select.search-type').on('change', () => {
+                        this.trigger('change');
                     });
                 }
             }
-        },
 
-        /**
-         * @private
-         */
-        _transformAutocompleteResult: function (response) {
-            let list = [];
-
-            response.list.forEach(item => {
-                list.push({
-                    id: item.id,
-                    name: item.name || item.id,
-                    data: item.id,
-                    value: item.name || item.id,
-                    attributes: item,
-                });
+            $elementName.on('change', () => {
+                if (!this.isSearchMode() && !this.model.get(this.idName)) {
+                    $elementName.val(this.model.get(this.nameName));
+                }
             });
+        }
 
-            return {suggestions: list};
-        },
+        if (this.isSearchMode()) {
+            var type = this.$el.find('select.search-type').val();
 
-        /**
-         * @inheritDoc
-         */
-        getValueForDisplay: function () {
-            return this.model.get(this.nameName);
-        },
+            this.handleSearchType(type);
 
-        /**
-         * @inheritDoc
-         */
-        validateRequired: function () {
-            if (this.isRequired()) {
-                if (this.model.get(this.idName) == null) {
-                    var msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
-
-                    this.showValidationMessage(msg);
-
-                    return true;
-                }
+            if (~['isOneOf', 'isNotOneOf', 'isNotOneOfAndIsNotEmpty'].indexOf(type)) {
+                this.searchData.oneOfIdList.forEach(id => {
+                    this.addLinkOneOfHtml(id, this.searchData.oneOfNameHash[id]);
+                });
             }
-        },
+        }
+    },
 
-        /**
-         * Delete a one-of item. For search mode.
-         *
-         * @param {string} id An ID.
-         */
-        deleteLinkOneOf: function (id) {
-            this.deleteLinkOneOfHtml(id);
+    /**
+     * @private
+     */
+    _transformAutocompleteResult: function (response) {
+        let list = [];
 
-            var index = this.searchData.oneOfIdList.indexOf(id);
+        response.list.forEach(item => {
+            list.push({
+                id: item.id,
+                name: item.name || item.id,
+                data: item.id,
+                value: item.name || item.id,
+                attributes: item,
+            });
+        });
 
-            if (index > -1) {
-                this.searchData.oneOfIdList.splice(index, 1);
+        return {suggestions: list};
+    },
+
+    /**
+     * @inheritDoc
+     */
+    getValueForDisplay: function () {
+        return this.model.get(this.nameName);
+    },
+
+    /**
+     * @inheritDoc
+     */
+    validateRequired: function () {
+        if (this.isRequired()) {
+            if (this.model.get(this.idName) == null) {
+                var msg = this.translate('fieldIsRequired', 'messages')
+                    .replace('{field}', this.getLabelText());
+
+                this.showValidationMessage(msg);
+
+                return true;
             }
+        }
+    },
 
-            delete this.searchData.oneOfNameHash[id];
+    /**
+     * Delete a one-of item. For search mode.
+     *
+     * @param {string} id An ID.
+     */
+    deleteLinkOneOf: function (id) {
+        this.deleteLinkOneOfHtml(id);
+
+        var index = this.searchData.oneOfIdList.indexOf(id);
+
+        if (index > -1) {
+            this.searchData.oneOfIdList.splice(index, 1);
+        }
+
+        delete this.searchData.oneOfNameHash[id];
+
+        this.trigger('change');
+    },
+
+    /**
+     * Add a one-of item. For search mode.
+     *
+     * @param {string} id An ID.
+     * @param {string} name A name.
+     */
+    addLinkOneOf: function (id, name) {
+        if (!~this.searchData.oneOfIdList.indexOf(id)) {
+            this.searchData.oneOfIdList.push(id);
+            this.searchData.oneOfNameHash[id] = name;
+            this.addLinkOneOfHtml(id, name);
 
             this.trigger('change');
-        },
+        }
+    },
 
-        /**
-         * Add a one-of item. For search mode.
-         *
-         * @param {string} id An ID.
-         * @param {string} name A name.
-         */
-        addLinkOneOf: function (id, name) {
-            if (!~this.searchData.oneOfIdList.indexOf(id)) {
-                this.searchData.oneOfIdList.push(id);
-                this.searchData.oneOfNameHash[id] = name;
-                this.addLinkOneOfHtml(id, name);
+    /**
+     * @protected
+     * @param {string} id An ID.
+     */
+    deleteLinkOneOfHtml: function (id) {
+        this.$el.find('.link-one-of-container .link-' + id).remove();
+    },
 
-                this.trigger('change');
-            }
-        },
+    /**
+     * @protected
+     * @param {string} id An ID.
+     * @param {string} name A name.
+     * @return {JQuery}
+     */
+    addLinkOneOfHtml: function (id, name) {
+        let $container = this.$el.find('.link-one-of-container');
 
-        /**
-         * @protected
-         * @param {string} id An ID.
-         */
-        deleteLinkOneOfHtml: function (id) {
-            this.$el.find('.link-one-of-container .link-' + id).remove();
-        },
+        let $el = $('<div>')
+            .addClass('link-' + id)
+            .addClass('list-group-item');
 
-        /**
-         * @protected
-         * @param {string} id An ID.
-         * @param {string} name A name.
-         * @return {JQuery}
-         */
-        addLinkOneOfHtml: function (id, name) {
-            let $container = this.$el.find('.link-one-of-container');
+        $el.append(
+            $('<a>')
+                .attr('role', 'button')
+                .addClass('pull-right')
+                .attr('data-id', id)
+                .attr('data-action', 'clearLinkOneOf')
+                .append(
+                    $('<span>').addClass('fas fa-times')
+                ),
+            $('<span>').text(name),
+            ' '
+        );
 
-            let $el = $('<div>')
-                .addClass('link-' + id)
-                .addClass('list-group-item');
+        $container.append($el);
 
-            $el.append(
-                $('<a>')
-                    .attr('role', 'button')
-                    .addClass('pull-right')
-                    .attr('data-id', id)
-                    .attr('data-action', 'clearLinkOneOf')
-                    .append(
-                        $('<span>').addClass('fas fa-times')
-                    ),
-                $('<span>').text(name),
-                ' '
-            );
+        return $el;
+    },
 
-            $container.append($el);
+    /**
+     * @inheritDoc
+     */
+    fetch: function () {
+        var data = {};
 
-            return $el;
-        },
+        data[this.nameName] = this.$el.find('[data-name="'+this.nameName+'"]').val() || null;
+        data[this.idName] = this.$el.find('[data-name="'+this.idName+'"]').val() || null;
 
-        /**
-         * @inheritDoc
-         */
-        fetch: function () {
-            var data = {};
+        return data;
+    },
 
-            data[this.nameName] = this.$el.find('[data-name="'+this.nameName+'"]').val() || null;
-            data[this.idName] = this.$el.find('[data-name="'+this.idName+'"]').val() || null;
+    /**
+     * @inheritDoc
+     */
+    fetchSearch: function () {
+        var type = this.$el.find('select.search-type').val();
+        var value = this.$el.find('[data-name="' + this.idName + '"]').val();
 
-            return data;
-        },
+        if (~['isOneOf', 'isNotOneOf'].indexOf(type) && !this.searchData.oneOfIdList.length) {
+            return {
+                type: 'isNotNull',
+                attribute: 'id',
+                data: {
+                    type: type,
+                },
+            };
+        }
 
-        /**
-         * @inheritDoc
-         */
-        fetchSearch: function () {
-            var type = this.$el.find('select.search-type').val();
-            var value = this.$el.find('[data-name="' + this.idName + '"]').val();
-
-            if (~['isOneOf', 'isNotOneOf'].indexOf(type) && !this.searchData.oneOfIdList.length) {
-                return {
-                    type: 'isNotNull',
-                    attribute: 'id',
-                    data: {
-                        type: type,
-                    },
-                };
-            }
-
-            if (type === 'isEmpty') {
-                return {
-                    type: 'isNull',
-                    attribute: this.idName,
-                    data: {
-                        type: type,
-                    }
-                };
-            }
-
-            if (type === 'isNotEmpty') {
-                return {
-                    type: 'isNotNull',
-                    attribute: this.idName,
-                    data: {
-                        type: type,
-                    },
-                };
-            }
-
-            if (type === 'isOneOf') {
-                return {
-                    type: 'in',
-                    attribute: this.idName,
-                    value: this.searchData.oneOfIdList,
-                    data: {
-                        type: type,
-                        oneOfIdList: this.searchData.oneOfIdList,
-                        oneOfNameHash: this.searchData.oneOfNameHash,
-                    },
-                };
-            }
-
-            if (type === 'isNotOneOf') {
-                return {
-                    type: 'or',
-                    value: [
-                        {
-                            type: 'notIn',
-                            attribute: this.idName,
-                            value: this.searchData.oneOfIdList,
-                        },
-                        {
-                            type: 'isNull',
-                            attribute: this.idName,
-                        },
-                    ],
-                    data: {
-                        type: type,
-                        oneOfIdList: this.searchData.oneOfIdList,
-                        oneOfNameHash: this.searchData.oneOfNameHash,
-                    }
-                };
-            }
-
-            if (type === 'isNotOneOfAndIsNotEmpty') {
-                return {
-                    type: 'notIn',
-                    attribute: this.idName,
-                    value: this.searchData.oneOfIdList,
-                    data: {
-                        type: type,
-                        oneOfIdList: this.searchData.oneOfIdList,
-                        oneOfNameHash: this.searchData.oneOfNameHash,
-                    },
-                };
-            }
-
-            if (type === 'isNot') {
-                if (!value) {
-                    return false;
+        if (type === 'isEmpty') {
+            return {
+                type: 'isNull',
+                attribute: this.idName,
+                data: {
+                    type: type,
                 }
+            };
+        }
 
-                let nameValue = this.$el.find('[data-name="' + this.nameName + '"]').val();
+        if (type === 'isNotEmpty') {
+            return {
+                type: 'isNotNull',
+                attribute: this.idName,
+                data: {
+                    type: type,
+                },
+            };
+        }
 
-                return {
-                    type: 'or',
-                    value: [
-                        {
-                            type: 'notEquals',
-                            attribute: this.idName,
-                            value: value
-                        },
-                        {
-                            type: 'isNull',
-                            attribute: this.idName,
-                        }
-                    ],
-                    data: {
-                        type: type,
-                        idValue: value,
-                        nameValue: nameValue,
-                    }
-                };
-            }
+        if (type === 'isOneOf') {
+            return {
+                type: 'in',
+                attribute: this.idName,
+                value: this.searchData.oneOfIdList,
+                data: {
+                    type: type,
+                    oneOfIdList: this.searchData.oneOfIdList,
+                    oneOfNameHash: this.searchData.oneOfNameHash,
+                },
+            };
+        }
 
-            if (type === 'isNotAndIsNotEmpty') {
-                if (!value) {
-                    return false;
-                }
-
-                let nameValue = this.$el.find('[data-name="' + this.nameName + '"]').val();
-
-                return {
-                    type: 'notEquals',
-                    attribute: this.idName,
-                    value: value,
-                    data: {
-                        type: type,
-                        idValue: value,
-                        nameValue: nameValue,
+        if (type === 'isNotOneOf') {
+            return {
+                type: 'or',
+                value: [
+                    {
+                        type: 'notIn',
+                        attribute: this.idName,
+                        value: this.searchData.oneOfIdList,
                     },
-                };
-            }
+                    {
+                        type: 'isNull',
+                        attribute: this.idName,
+                    },
+                ],
+                data: {
+                    type: type,
+                    oneOfIdList: this.searchData.oneOfIdList,
+                    oneOfNameHash: this.searchData.oneOfNameHash,
+                }
+            };
+        }
 
+        if (type === 'isNotOneOfAndIsNotEmpty') {
+            return {
+                type: 'notIn',
+                attribute: this.idName,
+                value: this.searchData.oneOfIdList,
+                data: {
+                    type: type,
+                    oneOfIdList: this.searchData.oneOfIdList,
+                    oneOfNameHash: this.searchData.oneOfNameHash,
+                },
+            };
+        }
+
+        if (type === 'isNot') {
             if (!value) {
                 return false;
             }
@@ -907,169 +852,214 @@ define('views/fields/link', ['views/fields/base', 'helpers/record-modal'], funct
             let nameValue = this.$el.find('[data-name="' + this.nameName + '"]').val();
 
             return {
-                type: 'equals',
-                attribute: this.idName,
-                value: value,
+                type: 'or',
+                value: [
+                    {
+                        type: 'notEquals',
+                        attribute: this.idName,
+                        value: value
+                    },
+                    {
+                        type: 'isNull',
+                        attribute: this.idName,
+                    }
+                ],
                 data: {
                     type: type,
                     idValue: value,
                     nameValue: nameValue,
                 }
             };
-        },
+        }
 
-        /**
-         * @inheritDoc
-         */
-        getSearchType: function () {
-            return this.getSearchParamsData().type ||
-                this.searchParams.typeFront ||
-                this.searchParams.type;
-        },
+        if (type === 'isNotAndIsNotEmpty') {
+            if (!value) {
+                return false;
+            }
 
-        /**
-         * @protected
-         */
-        quickView: function () {
-            let id = this.model.get(this.idName);
+            let nameValue = this.$el.find('[data-name="' + this.nameName + '"]').val();
+
+            return {
+                type: 'notEquals',
+                attribute: this.idName,
+                value: value,
+                data: {
+                    type: type,
+                    idValue: value,
+                    nameValue: nameValue,
+                },
+            };
+        }
+
+        if (!value) {
+            return false;
+        }
+
+        let nameValue = this.$el.find('[data-name="' + this.nameName + '"]').val();
+
+        return {
+            type: 'equals',
+            attribute: this.idName,
+            value: value,
+            data: {
+                type: type,
+                idValue: value,
+                nameValue: nameValue,
+            }
+        };
+    },
+
+    /**
+     * @inheritDoc
+     */
+    getSearchType: function () {
+        return this.getSearchParamsData().type ||
+            this.searchParams.typeFront ||
+            this.searchParams.type;
+    },
+
+    /**
+     * @protected
+     */
+    quickView: function () {
+        let id = this.model.get(this.idName);
+
+        if (!id) {
+            return;
+        }
+
+        let entityType = this.foreignScope;
+
+        let helper = new RecordModal(this.getMetadata(), this.getAcl());
+
+        helper.showDetail(this, {
+            id: id,
+            scope: entityType,
+        });
+    },
+
+    /**
+     * @protected
+     */
+    actionSelect: function () {
+        Espo.Ui.notify(' ... ');
+
+        /** @var {Object.<string, *>} */
+        let panelDefs = this.getMetadata()
+            .get(['clientDefs', this.entityType, 'relationshipPanels', this.name]) || {};
+
+        let viewName = panelDefs.selectModalView ||
+            this.getMetadata().get(['clientDefs', this.foreignScope, 'modalViews', 'select']) ||
+            this.selectRecordsView;
+
+        let handler = panelDefs.selectHandler || null;
+
+        let createButton = this.isEditMode() &&
+            (!this.createDisabled && !panelDefs.createDisabled || this.forceCreateButton);
+
+        let createAttributesProvider = null;
+
+        if (createButton) {
+            createAttributesProvider = () => {
+                let attributes = this.getCreateAttributes() || {};
+
+                if (!panelDefs.createHandler) {
+                    return Promise.resolve(attributes);
+                }
+
+                return new Promise(resolve => {
+                    Espo.loader.requirePromise(panelDefs.createHandler)
+                        .then(Handler => new Handler(this.getHelper()))
+                        .then(handler => {
+                            handler.getAttributes(this.model)
+                                .then(additionalAttributes => {
+                                    resolve({
+                                        ...attributes,
+                                        ...additionalAttributes,
+                                    });
+                                });
+                        });
+                });
+            };
+        }
+
+        new Promise(resolve => {
+            if (!handler || this.isSearchMode()) {
+                resolve({});
 
-            if (!id) {
                 return;
             }
 
-            let entityType = this.foreignScope;
-
-            let helper = new RecordModal(this.getMetadata(), this.getAcl());
-
-            helper.showDetail(this, {
-                id: id,
-                scope: entityType,
-            });
-        },
-
-        /**
-         * @protected
-         */
-        actionSelect: function () {
-            Espo.Ui.notify(' ... ');
-
-            /** @var {Object.<string, *>} */
-            let panelDefs = this.getMetadata()
-                .get(['clientDefs', this.entityType, 'relationshipPanels', this.name]) || {};
-
-            let viewName = panelDefs.selectModalView ||
-                this.getMetadata().get(['clientDefs', this.foreignScope, 'modalViews', 'select']) ||
-                this.selectRecordsView;
-
-            let handler = panelDefs.selectHandler || null;
-
-            let createButton = this.isEditMode() &&
-                (!this.createDisabled && !panelDefs.createDisabled || this.forceCreateButton);
-
-            let createAttributesProvider = null;
-
-            if (createButton) {
-                createAttributesProvider = () => {
-                    let attributes = this.getCreateAttributes() || {};
-
-                    if (!panelDefs.createHandler) {
-                        return Promise.resolve(attributes);
-                    }
-
-                    return new Promise(resolve => {
-                        Espo.loader.requirePromise(panelDefs.createHandler)
-                            .then(Handler => new Handler(this.getHelper()))
-                            .then(handler => {
-                                handler.getAttributes(this.model)
-                                    .then(additionalAttributes => {
-                                        resolve({
-                                            ...attributes,
-                                            ...additionalAttributes,
-                                        });
-                                    });
-                            });
-                    });
-                };
-            }
-
-            new Promise(resolve => {
-                if (!handler || this.isSearchMode()) {
-                    resolve({});
-
-                    return;
-                }
-
-                Espo.loader.requirePromise(handler)
-                    .then(Handler => new Handler(this.getHelper()))
-                    .then(handler => {
-                        handler.getFilters(this.model)
-                            .then(filters => resolve(filters));
-                    });
-            }).then(filters => {
-                let advanced = {...(this.getSelectFilters() || {}), ...(filters.advanced || {})};
-                let boolFilterList = [
-                    ...(this.getSelectBoolFilterList() || []),
-                    ...(filters.bool || []),
-                    ...(panelDefs.selectBoolFilterList || []),
-                ];
-                let primaryFilter = this.getSelectPrimaryFilterName() ||
-                    filters.primary || panelDefs.selectPrimaryFilter;
-
-                this.createView('dialog', viewName, {
-                    scope: this.foreignScope,
-                    createButton: createButton,
-                    filters: advanced,
-                    boolFilterList: boolFilterList,
-                    primaryFilterName: primaryFilter,
-                    mandatorySelectAttributeList: this.mandatorySelectAttributeList,
-                    forceSelectAllAttributes: this.forceSelectAllAttributes,
-                    filterList: this.getSelectFilterList(),
-                    createAttributesProvider: createAttributesProvider,
-                }, view => {
-                    view.render();
-
-                    Espo.Ui.notify(false);
-
-                    this.listenToOnce(view, 'select', model => {
-                        this.clearView('dialog');
-
-                        this.select(model);
-                    });
+            Espo.loader.requirePromise(handler)
+                .then(Handler => new Handler(this.getHelper()))
+                .then(handler => {
+                    handler.getFilters(this.model)
+                        .then(filters => resolve(filters));
                 });
-            });
-        },
-
-        actionSelectOneOf: function () {
-            Espo.Ui.notify(' ... ');
-
-            let viewName = this.getMetadata()
-                    .get(['clientDefs', this.foreignScope, 'modalViews', 'select']) ||
-                this.selectRecordsView;
+        }).then(filters => {
+            let advanced = {...(this.getSelectFilters() || {}), ...(filters.advanced || {})};
+            let boolFilterList = [
+                ...(this.getSelectBoolFilterList() || []),
+                ...(filters.bool || []),
+                ...(panelDefs.selectBoolFilterList || []),
+            ];
+            let primaryFilter = this.getSelectPrimaryFilterName() ||
+                filters.primary || panelDefs.selectPrimaryFilter;
 
             this.createView('dialog', viewName, {
                 scope: this.foreignScope,
-                createButton: false,
-                filters: this.getSelectFilters(),
-                boolFilterList: this.getSelectBoolFilterList(),
-                primaryFilterName: this.getSelectPrimaryFilterName(),
-                multiple: true,
+                createButton: createButton,
+                filters: advanced,
+                boolFilterList: boolFilterList,
+                primaryFilterName: primaryFilter,
+                mandatorySelectAttributeList: this.mandatorySelectAttributeList,
+                forceSelectAllAttributes: this.forceSelectAllAttributes,
+                filterList: this.getSelectFilterList(),
+                createAttributesProvider: createAttributesProvider,
             }, view => {
                 view.render();
 
                 Espo.Ui.notify(false);
 
-                this.listenToOnce(view, 'select', models => {
+                this.listenToOnce(view, 'select', model => {
                     this.clearView('dialog');
 
-                    if (Object.prototype.toString.call(models) !== '[object Array]') {
-                        models = [models];
-                    }
-
-                    models.forEach(model => {
-                        this.addLinkOneOf(model.id, model.get('name'));
-                    });
+                    this.select(model);
                 });
             });
-        },
-    });
+        });
+    },
+
+    actionSelectOneOf: function () {
+        Espo.Ui.notify(' ... ');
+
+        let viewName = this.getMetadata()
+                .get(['clientDefs', this.foreignScope, 'modalViews', 'select']) ||
+            this.selectRecordsView;
+
+        this.createView('dialog', viewName, {
+            scope: this.foreignScope,
+            createButton: false,
+            filters: this.getSelectFilters(),
+            boolFilterList: this.getSelectBoolFilterList(),
+            primaryFilterName: this.getSelectPrimaryFilterName(),
+            multiple: true,
+        }, view => {
+            view.render();
+
+            Espo.Ui.notify(false);
+
+            this.listenToOnce(view, 'select', models => {
+                this.clearView('dialog');
+
+                if (Object.prototype.toString.call(models) !== '[object Array]') {
+                    models = [models];
+                }
+
+                models.forEach(model => {
+                    this.addLinkOneOf(model.id, model.get('name'));
+                });
+            });
+        });
+    },
 });
diff --git a/client/src/views/fields/map.js b/client/src/views/fields/map.js
index 11678ea327..6205be1edd 100644
--- a/client/src/views/fields/map.js
+++ b/client/src/views/fields/map.js
@@ -113,7 +113,7 @@ define('views/fields/map', ['views/fields/base'], function (Dep) {
                         .get(['clientDefs', 'AddressMap', 'implementations', this.provider]);
 
                     if (implClassName) {
-                        require(implClassName, impl => {
+                        Espo.loader.require(implClassName, impl => {
                             impl.render(this);
                         });
                     }
diff --git a/client/src/views/fields/multi-enum.js b/client/src/views/fields/multi-enum.js
index 9f2086966e..780b59ad14 100644
--- a/client/src/views/fields/multi-enum.js
+++ b/client/src/views/fields/multi-enum.js
@@ -26,239 +26,239 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/multi-enum', ['views/fields/array', 'helpers/reg-exp-pattern', 'ui/multi-select'],
-function (Dep, RegExpPattern, /** module:ui/multi-select*/MultiSelect) {
+/** @module views/fields/multi-enum */
+
+import Dep from 'views/fields/array';
+import RegExpPattern from 'helpers/reg-exp-pattern';
+import MultiSelect from 'ui/multi-select';
+
+/**
+ * A multi-enum field.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/fields/array
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    type: 'multiEnum',
+
+    listTemplate: 'fields/array/list',
+    detailTemplate: 'fields/array/detail',
+    editTemplate: 'fields/multi-enum/edit',
+
+    /** @const */
+    MAX_ITEM_LENGTH: 100,
 
     /**
-     * A multi-enum field.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/fields/array.Class
-     * @memberOf module:views/fields/multi-enum
+     * @protected
+     * @type {boolean}
      */
-    return Dep.extend(/** @lends module:views/fields/multi-enum.Class# */{
+    restoreOnBackspace: false,
 
-        type: 'multiEnum',
+    validationElementSelector: '.selectize-control',
 
-        listTemplate: 'fields/array/list',
+    events: {},
 
-        detailTemplate: 'fields/array/detail',
+    /** @inheritDoc */
+    data: function () {
+        return {
+            optionList: this.params.options || [],
+            ...Dep.prototype.data.call(this),
+        };
+    },
 
-        editTemplate: 'fields/multi-enum/edit',
-
-        /**
-         * @const
-         */
-        MAX_ITEM_LENGTH: 100,
-
-        /**
-         * @protected
-         * @type {boolean}
-         */
-        restoreOnBackspace: false,
-
-        validationElementSelector: '.selectize-control',
-
-        events: {},
-
-        /**
-         * @inheritDoc
-         */
-        data: function () {
-            return _.extend({
-                optionList: this.params.options || []
-            }, Dep.prototype.data.call(this));
-        },
-
-        getTranslatedOptions: function () {
-            return (this.params.options || []).map((item) => {
-                if (this.translatedOptions !== null) {
-                    if (item in this.translatedOptions) {
-                        return this.translatedOptions[item];
-                    }
-                }
-
-                return item;
-            });
-        },
-
-        translateValueToEditLabel: function (value) {
-            var label = value;
-
-            if (~(this.params.options || []).indexOf(value)) {
-                label = this.getLanguage().translateOption(value, this.name, this.scope);
-            }
-
-            if (this.translatedOptions) {
-                if (value in this.translatedOptions) {
-                    label = this.translatedOptions[value];
+    getTranslatedOptions: function () {
+        return (this.params.options || []).map(item => {
+            if (this.translatedOptions !== null) {
+                if (item in this.translatedOptions) {
+                    return this.translatedOptions[item];
                 }
             }
 
-            if (label === '') {
-                label = this.translate('None');
+            return item;
+        });
+    },
+
+    translateValueToEditLabel: function (value) {
+        let label = value;
+
+        if (~(this.params.options || []).indexOf(value)) {
+            label = this.getLanguage().translateOption(value, this.name, this.scope);
+        }
+
+        if (this.translatedOptions) {
+            if (value in this.translatedOptions) {
+                label = this.translatedOptions[value];
             }
+        }
 
-            return label;
-        },
+        if (label === '') {
+            label = this.translate('None');
+        }
 
-        afterRender: function () {
-            if (this.isEditMode()) {
-                this.$element = this.$el.find('[data-name="' + this.name + '"]');
+        return label;
+    },
 
-                let items = [];
+    afterRender: function () {
+        if (this.isSearchMode()) {
+            this.renderSearch();
 
-                let valueList = Espo.Utils.clone(this.selected);
+            return;
+        }
 
-                for (let i in valueList) {
-                    var value = valueList[i];
-                    var originalValue = value;
+        if (this.isEditMode()) {
+            this.$element = this.$el.find('[data-name="' + this.name + '"]');
 
-                    if (value === '') {
-                        value = valueList[i] = '__emptystring__';
-                    }
+            let items = [];
+            let valueList = Espo.Utils.clone(this.selected);
 
-                    if (!~(this.params.options || []).indexOf(value)) {
-                        items.push({
-                            value: value,
-                            text: this.translateValueToEditLabel(originalValue),
-                        });
-                    }
+            for (let i in valueList) {
+                let value = valueList[i];
+                let originalValue = value;
+
+                if (value === '') {
+                    value = valueList[i] = '__emptystring__';
                 }
 
-                this.$element.val(valueList.join(this.itemDelimiter));
-
-                (this.params.options || []).forEach(value => {
-                    let originalValue = value;
-
-                    if (value === '') {
-                        value = '__emptystring__';
-                    }
-
+                if (!~(this.params.options || []).indexOf(value)) {
                     items.push({
                         value: value,
                         text: this.translateValueToEditLabel(originalValue),
                     });
-                });
-
-                /** @type {module:ui/multi-select~Options} */
-                let multiSelectOptions = {
-                    items: items,
-                    delimiter: this.itemDelimiter,
-                    matchAnyWord: this.matchAnyWord,
-                    draggable: true,
-                    allowCustomOptions: this.allowCustomOptions,
-                    create: input => this.createCustomOptionCallback(input),
-                };
-
-                MultiSelect.init(this.$element, multiSelectOptions);
-
-                this.$element.on('change', () => {
-                    this.trigger('change');
-                });
+                }
             }
 
-            if (this.isSearchMode()) {
-                this.renderSearch();
-            }
-        },
+            this.$element.val(valueList.join(this.itemDelimiter));
 
-        /**
-         * @protected
-         * @param {string} input
-         * @return {{text: string, value: string}|null}
-         */
-        createCustomOptionCallback: function (input) {
-            if (input.length > this.MAX_ITEM_LENGTH) {
-                let message = this.translate('arrayItemMaxLength', 'messages')
-                    .replace('{max}', this.MAX_ITEM_LENGTH.toString())
+            (this.params.options || []).forEach(value => {
+                let originalValue = value;
 
-                this.showValidationMessage(message, '.selectize-control')
+                if (value === '') {
+                    value = '__emptystring__';
+                }
+
+                items.push({
+                    value: value,
+                    text: this.translateValueToEditLabel(originalValue),
+                });
+            });
+
+            /** @type {module:ui/multi-select~Options} */
+            let multiSelectOptions = {
+                items: items,
+                delimiter: this.itemDelimiter,
+                matchAnyWord: this.matchAnyWord,
+                draggable: true,
+                allowCustomOptions: this.allowCustomOptions,
+                create: input => this.createCustomOptionCallback(input),
+            };
+
+            MultiSelect.init(this.$element, multiSelectOptions);
+
+            this.$element.on('change', () => {
+                this.trigger('change');
+            });
+        }
+    },
+
+    /**
+     * @protected
+     * @param {string} input
+     * @return {{text: string, value: string}|null}
+     */
+    createCustomOptionCallback: function (input) {
+        if (input.length > this.MAX_ITEM_LENGTH) {
+            let message = this.translate('arrayItemMaxLength', 'messages')
+                .replace('{max}', this.MAX_ITEM_LENGTH.toString())
+
+            this.showValidationMessage(message, '.selectize-control')
+
+            return null;
+        }
+
+        if (this.params.pattern) {
+            let helper = new RegExpPattern(this.getMetadata(), this.getLanguage());
+
+            let result = helper.validate(this.params.pattern, input, this.name, this.entityType);
+
+            if (result) {
+                this.showValidationMessage(result.message, '.selectize-control')
 
                 return null;
             }
+        }
 
-            if (this.params.pattern) {
-                /** @type module:helpers/reg-exp-pattern.Class */
-                let helper = new RegExpPattern(this.getMetadata(), this.getLanguage());
+        return {
+            value: input,
+            text: input,
+        };
+    },
 
-                let result = helper.validate(this.params.pattern, input, this.name, this.entityType);
+    focusOnInlineEdit: function () {
+        MultiSelect.focus(this.$element);
+    },
 
-                if (result) {
-                    this.showValidationMessage(result.message, '.selectize-control')
+    fetch: function () {
+        let list = this.$element.val().split(this.itemDelimiter);
 
-                    return null;
-                }
+        if (list.length === 1 && list[0] === '') {
+            list = [];
+        }
+
+        for (let i in list) {
+            if (list[i] === '__emptystring__') {
+                list[i] = '';
             }
+        }
 
-            return {
-                value: input,
-                text: input,
-            };
-        },
+        if (this.params.isSorted && this.translatedOptions) {
+            list = list.sort((v1, v2) => {
+                 return (this.translatedOptions[v1] || v1)
+                     .localeCompare(this.translatedOptions[v2] || v2);
+            });
+        }
 
-        focusOnInlineEdit: function () {
-            MultiSelect.focus(this.$element);
-        },
+        let data = {};
 
-        fetch: function () {
-            let list = this.$element.val().split(this.itemDelimiter);
+        data[this.name] = list;
 
-            if (list.length === 1 && list[0] === '') {
-                list = [];
-            }
+        return data;
+    },
 
-            for (let i in list) {
-                if (list[i] === '__emptystring__') {
-                    list[i] = '';
-                }
-            }
+    validateRequired: function () {
+        if (!this.isRequired()) {
+            return;
+        }
 
-            if (this.params.isSorted && this.translatedOptions) {
-                list = list.sort((v1, v2) => {
-                     return (this.translatedOptions[v1] || v1)
-                         .localeCompare(this.translatedOptions[v2] || v2);
-                });
-            }
+        let value = this.model.get(this.name);
 
-            let data = {};
+        if (!value || value.length === 0) {
+            let msg = this.translate('fieldIsRequired', 'messages')
+                .replace('{field}', this.getLabelText());
 
-            data[this.name] = list;
+            this.showValidationMessage(msg, '.selectize-control');
 
-            return data;
-        },
+            return true;
+        }
+    },
 
-        validateRequired: function () {
-            if (this.isRequired()) {
-                let value = this.model.get(this.name);
+    validateMaxCount: function () {
+        if (!this.params.maxCount) {
+            return;
+        }
 
-                if (!value || value.length === 0) {
-                    let msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
+        let itemList = this.model.get(this.name) || [];
 
-                    this.showValidationMessage(msg, '.selectize-control');
+        if (itemList.length > this.params.maxCount) {
+            let msg =
+                this.translate('fieldExceedsMaxCount', 'messages')
+                    .replace('{field}', this.getLabelText())
+                    .replace('{maxCount}', this.params.maxCount.toString());
 
-                    return true;
-                }
-            }
-        },
+            this.showValidationMessage(msg, '.selectize-control');
 
-        validateMaxCount: function () {
-            if (this.params.maxCount) {
-                let itemList = this.model.get(this.name) || [];
-
-                if (itemList.length > this.params.maxCount) {
-                    let msg =
-                        this.translate('fieldExceedsMaxCount', 'messages')
-                            .replace('{field}', this.getLabelText())
-                            .replace('{maxCount}', this.params.maxCount.toString());
-
-                    this.showValidationMessage(msg, '.selectize-control');
-
-                    return true;
-                }
-            }
-        },
-    });
+            return true;
+        }
+    },
 });
diff --git a/client/src/views/fields/person-name.js b/client/src/views/fields/person-name.js
index 18dea25c54..f7388ace73 100644
--- a/client/src/views/fields/person-name.js
+++ b/client/src/views/fields/person-name.js
@@ -26,268 +26,267 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/person-name', ['views/fields/varchar', 'ui/select'],
-function (Dep, /** module:ui/select*/Select) {
+/** @module views/fields/person-name */
+
+import Dep from 'views/fields/varchar';
+import Select from 'ui/select';
+
+/**
+ * @class Class
+ * @extends module:views/fields/varchar
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    type: 'personName',
+
+    detailTemplate: 'fields/person-name/detail',
+    editTemplate: 'fields/person-name/edit',
+    editTemplateLastFirst: 'fields/person-name/edit-last-first',
+    editTemplateLastFirstMiddle: 'fields/person-name/edit-last-first-middle',
+    editTemplateFirstMiddleLast: 'fields/person-name/edit-first-middle-last',
 
     /**
-     * @class
-     * @name Class
-     * @extends module:views/fields/varchar.Class
-     * @memberOf module:views/fields/person-name
+     * @inheritDoc
      */
-    return Dep.extend(/** @lends module:views/fields/person-name.Class# */{
+    validations: [
+        'required',
+        'pattern',
+    ],
 
-        type: 'personName',
+    data: function () {
+        let data = Dep.prototype.data.call(this);
 
-        detailTemplate: 'fields/person-name/detail',
-        editTemplate: 'fields/person-name/edit',
-        editTemplateLastFirst: 'fields/person-name/edit-last-first',
-        editTemplateLastFirstMiddle: 'fields/person-name/edit-last-first-middle',
-        editTemplateFirstMiddleLast: 'fields/person-name/edit-first-middle-last',
+        data.ucName = Espo.Utils.upperCaseFirst(this.name);
+        data.salutationValue = this.model.get(this.salutationField);
+        data.firstValue = this.model.get(this.firstField);
+        data.lastValue = this.model.get(this.lastField);
+        data.middleValue = this.model.get(this.middleField);
+        data.salutationOptions = this.model.getFieldParam(this.salutationField, 'options');
 
-        /**
-         * @inheritDoc
-         */
-        validations: [
-            'required',
-            'pattern',
-        ],
+        if (this.isEditMode()) {
+            data.firstMaxLength = this.model.getFieldParam(this.firstField, 'maxLength');
+            data.lastMaxLength = this.model.getFieldParam(this.lastField, 'maxLength');
+            data.middleMaxLength = this.model.getFieldParam(this.middleField, 'maxLength');
+        }
 
-        data: function () {
-            let data = Dep.prototype.data.call(this);
+        data.valueIsSet = this.model.has(this.firstField) || this.model.has(this.lastField);
 
-            data.ucName = Espo.Utils.upperCaseFirst(this.name);
-            data.salutationValue = this.model.get(this.salutationField);
-            data.firstValue = this.model.get(this.firstField);
-            data.lastValue = this.model.get(this.lastField);
-            data.middleValue = this.model.get(this.middleField);
-            data.salutationOptions = this.model.getFieldParam(this.salutationField, 'options');
+        if (this.isDetailMode()) {
+            data.isNotEmpty = !!data.firstValue || !!data.lastValue ||
+                !!data.salutationValue || !!data.middleValue;
+        }
+        else if (this.isListMode()) {
+            data.isNotEmpty = !!data.firstValue || !!data.lastValue || !!data.middleValue;
+        }
 
-            if (this.isEditMode()) {
-                data.firstMaxLength = this.model.getFieldParam(this.firstField, 'maxLength');
-                data.lastMaxLength = this.model.getFieldParam(this.lastField, 'maxLength');
-                data.middleMaxLength = this.model.getFieldParam(this.middleField, 'maxLength');
+        if (
+            data.isNotEmpty && this.isDetailMode() ||
+            this.isListMode()
+        ) {
+            data.formattedValue = this.getFormattedValue();
+        }
+
+        return data;
+    },
+
+    setup: function () {
+        Dep.prototype.setup.call(this);
+
+        var ucName = Espo.Utils.upperCaseFirst(this.name)
+        this.salutationField = 'salutation' + ucName;
+        this.firstField = 'first' + ucName;
+        this.lastField = 'last' + ucName;
+        this.middleField = 'middle' + ucName;
+    },
+
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
+
+        if (this.isEditMode()) {
+            this.$salutation = this.$el.find('[data-name="' + this.salutationField + '"]');
+            this.$first = this.$el.find('[data-name="' + this.firstField + '"]');
+            this.$last = this.$el.find('[data-name="' + this.lastField + '"]');
+
+            if (this.formatHasMiddle()) {
+                this.$middle = this.$el.find('[data-name="' + this.middleField + '"]');
             }
 
-            data.valueIsSet = this.model.has(this.firstField) || this.model.has(this.lastField);
-
-            if (this.isDetailMode()) {
-                data.isNotEmpty = !!data.firstValue || !!data.lastValue ||
-                    !!data.salutationValue || !!data.middleValue;
-            }
-            else if (this.isListMode()) {
-                data.isNotEmpty = !!data.firstValue || !!data.lastValue || !!data.middleValue;
-            }
-
-            if (
-                data.isNotEmpty && this.isDetailMode() ||
-                this.isListMode()
-            ) {
-                data.formattedValue = this.getFormattedValue();
-            }
-
-            return data;
-        },
-
-        setup: function () {
-            Dep.prototype.setup.call(this);
-
-            var ucName = Espo.Utils.upperCaseFirst(this.name)
-            this.salutationField = 'salutation' + ucName;
-            this.firstField = 'first' + ucName;
-            this.lastField = 'last' + ucName;
-            this.middleField = 'middle' + ucName;
-        },
-
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
-
-            if (this.isEditMode()) {
-                this.$salutation = this.$el.find('[data-name="' + this.salutationField + '"]');
-                this.$first = this.$el.find('[data-name="' + this.firstField + '"]');
-                this.$last = this.$el.find('[data-name="' + this.lastField + '"]');
-
-                if (this.formatHasMiddle()) {
-                    this.$middle = this.$el.find('[data-name="' + this.middleField + '"]');
-                }
-
-                this.$salutation.on('change', () => {
-                    this.trigger('change');
-                });
-
-                this.$first.on('change', () => {
-                    this.trigger('change');
-                });
-
-                this.$last.on('change', () => {
-                    this.trigger('change');
-                });
-
-                Select.init(this.$salutation);
-            }
-        },
-
-        getFormattedValue: function () {
-            let salutation = this.model.get(this.salutationField);
-            let first = this.model.get(this.firstField);
-            let last = this.model.get(this.lastField);
-            let middle = this.model.get(this.middleField);
-
-            if (salutation) {
-                salutation = this.getLanguage()
-                    .translateOption(salutation, 'salutationName', this.model.entityType);
-            }
-
-            return this.formatName({
-                salutation: salutation,
-                first: first,
-                middle: middle,
-                last: last,
+            this.$salutation.on('change', () => {
+                this.trigger('change');
             });
-        },
 
-        _getTemplateName: function () {
-            if (this.isEditMode()) {
-                let prop = 'editTemplate' + Espo.Utils.upperCaseFirst(this.getFormat().toString());
+            this.$first.on('change', () => {
+                this.trigger('change');
+            });
 
-                if (prop in this) {
-                    return this[prop];
-                }
+            this.$last.on('change', () => {
+                this.trigger('change');
+            });
+
+            Select.init(this.$salutation);
+        }
+    },
+
+    getFormattedValue: function () {
+        let salutation = this.model.get(this.salutationField);
+        let first = this.model.get(this.firstField);
+        let last = this.model.get(this.lastField);
+        let middle = this.model.get(this.middleField);
+
+        if (salutation) {
+            salutation = this.getLanguage()
+                .translateOption(salutation, 'salutationName', this.model.entityType);
+        }
+
+        return this.formatName({
+            salutation: salutation,
+            first: first,
+            middle: middle,
+            last: last,
+        });
+    },
+
+    _getTemplateName: function () {
+        if (this.isEditMode()) {
+            let prop = 'editTemplate' + Espo.Utils.upperCaseFirst(this.getFormat().toString());
+
+            if (prop in this) {
+                return this[prop];
             }
+        }
 
-            return Dep.prototype._getTemplateName.call(this);
-        },
+        return Dep.prototype._getTemplateName.call(this);
+    },
 
-        getFormat: function () {
-            this.format = this.format || this.getConfig().get('personNameFormat') || 'firstLast';
+    getFormat: function () {
+        this.format = this.format || this.getConfig().get('personNameFormat') || 'firstLast';
 
-            return this.format;
-        },
+        return this.format;
+    },
 
-        formatHasMiddle: function () {
-            let format = this.getFormat();
+    formatHasMiddle: function () {
+        let format = this.getFormat();
 
-            return format === 'firstMiddleLast' || format === 'lastFirstMiddle';
-        },
+        return format === 'firstMiddleLast' || format === 'lastFirstMiddle';
+    },
 
-        validateRequired: function () {
-            let isRequired = this.isRequired();
+    validateRequired: function () {
+        let isRequired = this.isRequired();
 
-            let validate = (name) => {
-                if (this.model.isRequired(name)) {
-                    if (!this.model.get(name)) {
-                        let msg = this.translate('fieldIsRequired', 'messages')
-                            .replace('{field}', this.translate(name, 'fields', this.model.name));
-                        this.showValidationMessage(msg, '[data-name="'+name+'"]');
-
-                        return true;
-                    }
-                }
-            };
-
-            if (isRequired) {
-                if (!this.model.get(this.firstField) && !this.model.get(this.lastField)) {
+        let validate = (name) => {
+            if (this.model.isRequired(name)) {
+                if (!this.model.get(name)) {
                     let msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
-
-                    this.showValidationMessage(msg, '[data-name="'+this.lastField+'"]');
+                        .replace('{field}', this.translate(name, 'fields', this.model.name));
+                    this.showValidationMessage(msg, '[data-name="'+name+'"]');
 
                     return true;
                 }
             }
+        };
 
-            let result = false;
+        if (isRequired) {
+            if (!this.model.get(this.firstField) && !this.model.get(this.lastField)) {
+                let msg = this.translate('fieldIsRequired', 'messages')
+                    .replace('{field}', this.getLabelText());
 
-            result = validate(this.salutationField) || result;
-            result = validate(this.firstField) || result;
-            result = validate(this.lastField) || result;
-            result = validate(this.middleField) || result;
+                this.showValidationMessage(msg, '[data-name="'+this.lastField+'"]');
 
-            return result;
-        },
-
-        validatePattern: function () {
-            let result = false;
-
-            result = this.fieldValidatePattern(this.firstField) || result;
-            result = this.fieldValidatePattern(this.lastField) || result;
-            result = this.fieldValidatePattern(this.middleField) || result;
-
-            return result;
-        },
-
-        hasRequiredMarker: function () {
-            if (this.isRequired()) {
                 return true;
             }
+        }
 
-            return this.model.getFieldParam(this.salutationField, 'required') ||
-                   this.model.getFieldParam(this.firstField, 'required') ||
-                   this.model.getFieldParam(this.middleField, 'required') ||
-                   this.model.getFieldParam(this.lastField, 'required');
-        },
+        let result = false;
 
-        fetch: function () {
-            let data = {};
+        result = validate(this.salutationField) || result;
+        result = validate(this.firstField) || result;
+        result = validate(this.lastField) || result;
+        result = validate(this.middleField) || result;
 
-            data[this.salutationField] = this.$salutation.val() || null;
-            data[this.firstField] = this.$first.val().trim() || null;
-            data[this.lastField] = this.$last.val().trim() || null;
+        return result;
+    },
 
-            if (this.formatHasMiddle()) {
-                data[this.middleField] = this.$middle.val().trim() || null;
-            }
+    validatePattern: function () {
+        let result = false;
 
-            data[this.name] = this.formatName({
-                first: data[this.firstField],
-                last: data[this.lastField],
-                middle: data[this.middleField],
-            });
+        result = this.fieldValidatePattern(this.firstField) || result;
+        result = this.fieldValidatePattern(this.lastField) || result;
+        result = this.fieldValidatePattern(this.middleField) || result;
 
-            return data;
-        },
+        return result;
+    },
 
-        /**
-         * @param {{first?: string, last?: string, middle?: string, salutation?: string}}data
-         * @return {?string}
-         */
-        formatName: function (data) {
-            let name = '';
-            let format = this.getFormat();
-            let arr = [];
+    hasRequiredMarker: function () {
+        if (this.isRequired()) {
+            return true;
+        }
 
-            arr.push(data.salutation);
+        return this.model.getFieldParam(this.salutationField, 'required') ||
+               this.model.getFieldParam(this.firstField, 'required') ||
+               this.model.getFieldParam(this.middleField, 'required') ||
+               this.model.getFieldParam(this.lastField, 'required');
+    },
 
-            if (format === 'firstLast') {
-                arr.push(data.first);
-                arr.push(data.last);
-            }
-            else if (format === 'lastFirst') {
-                arr.push(data.last);
-                arr.push(data.first);
-            }
-            else if (format === 'firstMiddleLast') {
-                arr.push(data.first);
-                arr.push(data.middle);
-                arr.push(data.last);
-            }
-            else if (format === 'lastFirstMiddle') {
-                arr.push(data.last);
-                arr.push(data.first);
-                arr.push(data.middle);
-            }
-            else {
-                arr.push(data.first);
-                arr.push(data.last);
-            }
+    fetch: function () {
+        let data = {};
 
-            name = arr.filter(item => !!item).join(' ').trim();
+        data[this.salutationField] = this.$salutation.val() || null;
+        data[this.firstField] = this.$first.val().trim() || null;
+        data[this.lastField] = this.$last.val().trim() || null;
 
-            if (name === '') {
-                name = null;
-            }
+        if (this.formatHasMiddle()) {
+            data[this.middleField] = this.$middle.val().trim() || null;
+        }
 
-            return name;
-        },
-    });
+        data[this.name] = this.formatName({
+            first: data[this.firstField],
+            last: data[this.lastField],
+            middle: data[this.middleField],
+        });
+
+        return data;
+    },
+
+    /**
+     * @param {{first?: string, last?: string, middle?: string, salutation?: string}}data
+     * @return {?string}
+     */
+    formatName: function (data) {
+        let name = '';
+        let format = this.getFormat();
+        let arr = [];
+
+        arr.push(data.salutation);
+
+        if (format === 'firstLast') {
+            arr.push(data.first);
+            arr.push(data.last);
+        }
+        else if (format === 'lastFirst') {
+            arr.push(data.last);
+            arr.push(data.first);
+        }
+        else if (format === 'firstMiddleLast') {
+            arr.push(data.first);
+            arr.push(data.middle);
+            arr.push(data.last);
+        }
+        else if (format === 'lastFirstMiddle') {
+            arr.push(data.last);
+            arr.push(data.first);
+            arr.push(data.middle);
+        }
+        else {
+            arr.push(data.first);
+            arr.push(data.last);
+        }
+
+        name = arr.filter(item => !!item).join(' ').trim();
+
+        if (name === '') {
+            name = null;
+        }
+
+        return name;
+    },
 });
diff --git a/client/src/views/fields/phone.js b/client/src/views/fields/phone.js
index dd8459aa9d..8e122fa4c7 100644
--- a/client/src/views/fields/phone.js
+++ b/client/src/views/fields/phone.js
@@ -26,483 +26,482 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/phone', ['views/fields/varchar', 'ui/select'],
-function (Dep, /** module:ui/select*/Select) {
+import Dep from 'views/fields/varchar';
+import Select from 'ui/select';
 
-    /**
-     * @class
-     * @name Class
-     * @memberOf module:views/fields/phone
-     * @extends module:views/fields/varchar.Class
-     */
-    return Dep.extend(/** @lends module:views/fields/phone.Class */{
+/**
+ * @class Class
+ * @extends module:views/fields/varchar
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        type: 'phone',
+    type: 'phone',
 
-        editTemplate: 'fields/phone/edit',
-        detailTemplate: 'fields/phone/detail',
-        listTemplate: 'fields/phone/list',
+    editTemplate: 'fields/phone/edit',
+    detailTemplate: 'fields/phone/detail',
+    listTemplate: 'fields/phone/list',
 
-        validations: ['required', 'phoneData'],
+    validations: ['required', 'phoneData'],
 
-        validateRequired: function () {
-            if (this.isRequired()) {
-                if (!this.model.get(this.name)) {
-                    let msg = this.translate('fieldIsRequired', 'messages')
-                        .replace('{field}', this.getLabelText());
+    validateRequired: function () {
+        if (!this.isRequired()) {
+            return;
+        }
 
-                    this.showValidationMessage(msg, 'div.phone-number-block:nth-child(1) input.phone-number');
+        if (!this.model.get(this.name)) {
+            let msg = this.translate('fieldIsRequired', 'messages')
+                .replace('{field}', this.getLabelText());
 
-                    return true;
-                }
+            this.showValidationMessage(msg, 'div.phone-number-block:nth-child(1) input.phone-number');
+
+            return true;
+        }
+    },
+
+    validatePhoneData: function () {
+        let data = this.model.get(this.dataFieldName);
+
+        if (!data || !data.length) {
+            return;
+        }
+
+        /** @var {string} */
+        let pattern = '^' + this.getMetadata().get(['app', 'regExpPatterns', 'phoneNumberLoose', 'pattern']) + '$';
+        let regExp = new RegExp(pattern);
+
+        let numberList = [];
+        let notValid = false;
+
+        data.forEach((row, i) => {
+            let number = row.phoneNumber;
+
+            if (!regExp.test(number)) {
+                notValid = true;
+
+                let msg = this.translate('fieldPhoneInvalidCharacters', 'messages')
+                    .replace('{field}', this.getLabelText());
+
+                this.showValidationMessage(msg, 'div.phone-number-block:nth-child(' + (i + 1)
+                    .toString() + ') input.phone-number');
             }
-        },
 
-        validatePhoneData: function () {
-            let data = this.model.get(this.dataFieldName);
+            let numberClean = String(number).replace(/[\s\+]/g, '');
+
+            if (~numberList.indexOf(numberClean)) {
+                let msg = this.translate('fieldValueDuplicate', 'messages')
+                    .replace('{field}', this.getLabelText());
+
+                this.showValidationMessage(msg, 'div.phone-number-block:nth-child(' + (i + 1)
+                    .toString() + ') input.phone-number');
+
+                notValid = true;
 
-            if (!data || !data.length) {
                 return;
             }
 
-            /** @var {string} */
-            let pattern = '^' + this.getMetadata().get(['app', 'regExpPatterns', 'phoneNumberLoose', 'pattern']) + '$';
-            let regExp = new RegExp(pattern);
+            numberList.push(numberClean);
+        });
 
-            let numberList = [];
-            let notValid = false;
+        if (notValid) {
+            return true;
+        }
+    },
 
-            data.forEach((row, i) => {
-                let number = row.phoneNumber;
+    data: function () {
+        let phoneNumberData;
 
-                if (!regExp.test(number)) {
-                    notValid = true;
+        if (this.mode === this.MODE_EDIT) {
+            phoneNumberData = Espo.Utils.cloneDeep(this.model.get(this.dataFieldName));
 
-                    let msg = this.translate('fieldPhoneInvalidCharacters', 'messages')
-                        .replace('{field}', this.getLabelText());
+            if (this.model.isNew() || !this.model.get(this.name)) {
+                if (!phoneNumberData || !phoneNumberData.length) {
+                    let optOut;
 
-                    this.showValidationMessage(msg, 'div.phone-number-block:nth-child(' + (i + 1)
-                        .toString() + ') input.phone-number');
-                }
-
-                let numberClean = String(number).replace(/[\s\+]/g, '');
-
-                if (~numberList.indexOf(numberClean)) {
-                    let msg = this.translate('fieldValueDuplicate', 'messages')
-                        .replace('{field}', this.getLabelText());
-
-                    this.showValidationMessage(msg, 'div.phone-number-block:nth-child(' + (i + 1)
-                        .toString() + ') input.phone-number');
-
-                    notValid = true;
-
-                    return;
-                }
-
-                numberList.push(numberClean);
-            });
-
-            if (notValid) {
-                return true;
-            }
-        },
-
-        data: function () {
-            let phoneNumberData;
-
-            if (this.mode === this.MODE_EDIT) {
-                phoneNumberData = Espo.Utils.cloneDeep(this.model.get(this.dataFieldName));
-
-                if (this.model.isNew() || !this.model.get(this.name)) {
-                    if (!phoneNumberData || !phoneNumberData.length) {
-                        let optOut;
-
-                        if (this.model.isNew()) {
-                            optOut = this.phoneNumberOptedOutByDefault && this.model.name !== 'User';
-                        } else {
-                            optOut = this.model.get(this.isOptedOutFieldName)
-                        }
-
-                        phoneNumberData = [{
-                            phoneNumber: this.model.get(this.name) || '',
-                            primary: true,
-                            type: this.defaultType,
-                            optOut: optOut,
-                            invalid: false,
-                        }];
-                    }
-                }
-            } else {
-                phoneNumberData = this.model.get(this.dataFieldName) || false;
-            }
-
-            if (phoneNumberData) {
-                phoneNumberData = Espo.Utils.cloneDeep(phoneNumberData);
-
-                phoneNumberData.forEach((item) => {
-                    let number = item.phoneNumber || '';
-
-                    item.erased = number.indexOf(this.erasedPlaceholder) === 0;
-
-                    if (!item.erased) {
-                        item.valueForLink = number.replace(/ /g, '');
-                    }
-
-                    item.lineThrough = item.optOut || item.invalid || this.model.get('doNotCall');
-                });
-            }
-
-            if ((!phoneNumberData || phoneNumberData.length === 0) && this.model.get(this.name)) {
-                let number = this.model.get(this.name);
-
-                let o = {
-                    phoneNumber: number,
-                    primary: true,
-                    valueForLink: number.replace(/ /g, ''),
-                };
-
-                if (this.mode === 'edit' && this.model.isNew()) {
-                    o.type = this.defaultType;
-                }
-
-                phoneNumberData = [o];
-            }
-
-            let data = _.extend({
-                phoneNumberData: phoneNumberData,
-                doNotCall: this.model.get('doNotCall'),
-                lineThrough: this.model.get('doNotCall') || this.model.get(this.isOptedOutFieldName),
-            }, Dep.prototype.data.call(this));
-
-            if (this.isReadMode()) {
-                data.isOptedOut = this.model.get(this.isOptedOutFieldName);
-                data.isInvalid = this.model.get(this.isInvalidFieldName);
-
-                if (this.model.get(this.name)) {
-                    data.isErased = this.model.get(this.name).indexOf(this.erasedPlaceholder) === 0;
-
-                    if (!data.isErased) {
-                        data.valueForLink = this.model.get(this.name).replace(/ /g, '');
-                    }
-                }
-
-                data.valueIsSet = this.model.has(this.name);
-            }
-
-            data.itemMaxLength = this.itemMaxLength;
-
-            return data;
-        },
-
-        events: {
-            'click [data-action="switchPhoneProperty"]': function (e) {
-                let $target = $(e.currentTarget);
-                let $block = $(e.currentTarget).closest('div.phone-number-block');
-                let property = $target.data('property-type');
-
-                if (property === 'primary') {
-                    if (!$target.hasClass('active')) {
-                        if ($block.find('input.phone-number').val() !== '') {
-                            this.$el.find('button.phone-property[data-property-type="primary"]')
-                                .removeClass('active').children().addClass('text-muted');
-
-                            $target.addClass('active').children().removeClass('text-muted');
-                        }
-                    }
-                }
-                else {
-                    if ($target.hasClass('active')) {
-                        $target.removeClass('active').children().addClass('text-muted');
+                    if (this.model.isNew()) {
+                        optOut = this.phoneNumberOptedOutByDefault && this.model.name !== 'User';
                     } else {
+                        optOut = this.model.get(this.isOptedOutFieldName)
+                    }
+
+                    phoneNumberData = [{
+                        phoneNumber: this.model.get(this.name) || '',
+                        primary: true,
+                        type: this.defaultType,
+                        optOut: optOut,
+                        invalid: false,
+                    }];
+                }
+            }
+        } else {
+            phoneNumberData = this.model.get(this.dataFieldName) || false;
+        }
+
+        if (phoneNumberData) {
+            phoneNumberData = Espo.Utils.cloneDeep(phoneNumberData);
+
+            phoneNumberData.forEach((item) => {
+                let number = item.phoneNumber || '';
+
+                item.erased = number.indexOf(this.erasedPlaceholder) === 0;
+
+                if (!item.erased) {
+                    item.valueForLink = number.replace(/ /g, '');
+                }
+
+                item.lineThrough = item.optOut || item.invalid || this.model.get('doNotCall');
+            });
+        }
+
+        if ((!phoneNumberData || phoneNumberData.length === 0) && this.model.get(this.name)) {
+            let number = this.model.get(this.name);
+
+            let o = {
+                phoneNumber: number,
+                primary: true,
+                valueForLink: number.replace(/ /g, ''),
+            };
+
+            if (this.mode === 'edit' && this.model.isNew()) {
+                o.type = this.defaultType;
+            }
+
+            phoneNumberData = [o];
+        }
+
+        let data = _.extend({
+            phoneNumberData: phoneNumberData,
+            doNotCall: this.model.get('doNotCall'),
+            lineThrough: this.model.get('doNotCall') || this.model.get(this.isOptedOutFieldName),
+        }, Dep.prototype.data.call(this));
+
+        if (this.isReadMode()) {
+            data.isOptedOut = this.model.get(this.isOptedOutFieldName);
+            data.isInvalid = this.model.get(this.isInvalidFieldName);
+
+            if (this.model.get(this.name)) {
+                data.isErased = this.model.get(this.name).indexOf(this.erasedPlaceholder) === 0;
+
+                if (!data.isErased) {
+                    data.valueForLink = this.model.get(this.name).replace(/ /g, '');
+                }
+            }
+
+            data.valueIsSet = this.model.has(this.name);
+        }
+
+        data.itemMaxLength = this.itemMaxLength;
+
+        return data;
+    },
+
+    events: {
+        'click [data-action="switchPhoneProperty"]': function (e) {
+            let $target = $(e.currentTarget);
+            let $block = $(e.currentTarget).closest('div.phone-number-block');
+            let property = $target.data('property-type');
+
+            if (property === 'primary') {
+                if (!$target.hasClass('active')) {
+                    if ($block.find('input.phone-number').val() !== '') {
+                        this.$el.find('button.phone-property[data-property-type="primary"]')
+                            .removeClass('active').children().addClass('text-muted');
+
                         $target.addClass('active').children().removeClass('text-muted');
                     }
                 }
-
-                this.trigger('change');
-            },
-            'click [data-action="removePhoneNumber"]': function (e) {
-                let $block = $(e.currentTarget).closest('div.phone-number-block');
-
-                this.removePhoneNumber($block);
-
-                this.trigger('change');
-
-                let $last = this.$el.find('.phone-number').last();
-
-                if ($last.length) {
-                    $last[0].focus({preventScroll: true});
-                }
-            },
-            'change input.phone-number': function (e) {
-                let $input = $(e.currentTarget);
-                let $block = $input.closest('div.phone-number-block');
-
-                if (this._itemJustRemoved) {
-                    return;
-                }
-
-                if ($input.val() === '' && $block.length) {
-                    this.removePhoneNumber($block);
-                }
-                else {
-                    this.trigger('change');
-                }
-
-                this.manageAddButton();
-            },
-            'keypress input.phone-number': function (e) {
-                this.manageAddButton();
-            },
-            'paste input.phone-number': function () {
-                setTimeout(() => this.manageAddButton(), 10);
-            },
-            'click [data-action="addPhoneNumber"]': function () {
-                this.addPhoneNumber();
-            },
-            'keydown input.phone-number': function (e) {
-                let key = Espo.Utils.getKeyFromKeyEvent(e);
-
-                let $target = $(e.currentTarget);
-
-                if (key === 'Enter') {
-                    if (!this.$el.find('[data-action="addPhoneNumber"]').hasClass('disabled')) {
-                        this.addPhoneNumber();
-
-                        e.stopPropagation();
-                    }
-
-                    return;
-                }
-
-                if (key === 'Backspace' && $target.val() === '') {
-                    let $block = $target.closest('div.phone-number-block');
-
-                    this._itemJustRemoved = true;
-                    setTimeout(() => this._itemJustRemoved = false, 100);
-
-                    e.stopPropagation();
-
-                    this.removePhoneNumber($block);
-
-                    setTimeout(() => this.focusOnLast(true), 50);
-                }
-            },
-        },
-
-        focusOnLast: function (cursorAtEnd) {
-            let $item = this.$el.find('input.form-control').last();
-
-            $item.focus();
-
-            if (cursorAtEnd && $item[0]) {
-                $item[0].setSelectionRange($item[0].value.length, $item[0].value.length);
             }
-        },
-
-        removePhoneNumber: function ($block) {
-            if ($block.parent().children().length === 1) {
-                $block.find('input.phone-number').val('');
-            } else {
-                this.removePhoneNumberBlock($block);
+            else {
+                if ($target.hasClass('active')) {
+                    $target.removeClass('active').children().addClass('text-muted');
+                } else {
+                    $target.addClass('active').children().removeClass('text-muted');
+                }
             }
 
             this.trigger('change');
         },
+        'click [data-action="removePhoneNumber"]': function (e) {
+            let $block = $(e.currentTarget).closest('div.phone-number-block');
 
-        addPhoneNumber: function () {
-            let data = Espo.Utils.cloneDeep(this.fetchPhoneNumberData());
+            this.removePhoneNumber($block);
 
-            let o = {
-                phoneNumber: '',
-                primary: !data.length,
-                type: false,
-                optOut: this.emailAddressOptedOutByDefault,
-                invalid: false,
-            };
+            this.trigger('change');
 
-            data.push(o);
+            let $last = this.$el.find('.phone-number').last();
 
-            this.model.set(this.dataFieldName, data, {silent: true});
-
-            this.reRender()
-                .then(() => this.focusOnLast());
-        },
-
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
-
-            this.manageButtonsVisibility();
-            this.manageAddButton();
-
-            if (this.mode === this.MODE_EDIT) {
-                this.$el.find('select').toArray().forEach(selectElement => {
-                    Select.init($(selectElement));
-                });
+            if ($last.length) {
+                $last[0].focus({preventScroll: true});
             }
         },
+        'change input.phone-number': function (e) {
+            let $input = $(e.currentTarget);
+            let $block = $input.closest('div.phone-number-block');
 
-        removePhoneNumberBlock: function ($block) {
-            let changePrimary = false;
-
-            if ($block.find('button[data-property-type="primary"]').hasClass('active')) {
-                changePrimary = true;
+            if (this._itemJustRemoved) {
+                return;
             }
 
-            $block.remove();
-
-            if (changePrimary) {
-                this.$el.find('button[data-property-type="primary"]')
-                    .first()
-                    .addClass('active')
-                    .children()
-                    .removeClass('text-muted');
+            if ($input.val() === '' && $block.length) {
+                this.removePhoneNumber($block);
+            }
+            else {
+                this.trigger('change');
             }
 
-            this.manageButtonsVisibility();
             this.manageAddButton();
         },
+        'keypress input.phone-number': function (e) {
+            this.manageAddButton();
+        },
+        'paste input.phone-number': function () {
+            setTimeout(() => this.manageAddButton(), 10);
+        },
+        'click [data-action="addPhoneNumber"]': function () {
+            this.addPhoneNumber();
+        },
+        'keydown input.phone-number': function (e) {
+            let key = Espo.Utils.getKeyFromKeyEvent(e);
 
-        manageAddButton: function () {
-            let $input = this.$el.find('input.phone-number');
-            let c = 0;
+            let $target = $(e.currentTarget);
 
-            $input.each((i, input) => {
-                if (input.value !== '') {
-                    c++;
+            if (key === 'Enter') {
+                if (!this.$el.find('[data-action="addPhoneNumber"]').hasClass('disabled')) {
+                    this.addPhoneNumber();
+
+                    e.stopPropagation();
                 }
-            });
-
-            if (c === $input.length) {
-                this.$el.find('[data-action="addPhoneNumber"]')
-                    .removeClass('disabled')
-                    .removeAttr('disabled');
 
                 return;
             }
 
+            if (key === 'Backspace' && $target.val() === '') {
+                let $block = $target.closest('div.phone-number-block');
+
+                this._itemJustRemoved = true;
+                setTimeout(() => this._itemJustRemoved = false, 100);
+
+                e.stopPropagation();
+
+                this.removePhoneNumber($block);
+
+                setTimeout(() => this.focusOnLast(true), 50);
+            }
+        },
+    },
+
+    focusOnLast: function (cursorAtEnd) {
+        let $item = this.$el.find('input.form-control').last();
+
+        $item.focus();
+
+        if (cursorAtEnd && $item[0]) {
+            $item[0].setSelectionRange($item[0].value.length, $item[0].value.length);
+        }
+    },
+
+    removePhoneNumber: function ($block) {
+        if ($block.parent().children().length === 1) {
+            $block.find('input.phone-number').val('');
+        } else {
+            this.removePhoneNumberBlock($block);
+        }
+
+        this.trigger('change');
+    },
+
+    addPhoneNumber: function () {
+        let data = Espo.Utils.cloneDeep(this.fetchPhoneNumberData());
+
+        let o = {
+            phoneNumber: '',
+            primary: !data.length,
+            type: false,
+            optOut: this.emailAddressOptedOutByDefault,
+            invalid: false,
+        };
+
+        data.push(o);
+
+        this.model.set(this.dataFieldName, data, {silent: true});
+
+        this.reRender()
+            .then(() => this.focusOnLast());
+    },
+
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
+
+        this.manageButtonsVisibility();
+        this.manageAddButton();
+
+        if (this.mode === this.MODE_EDIT) {
+            this.$el.find('select').toArray().forEach(selectElement => {
+                Select.init($(selectElement));
+            });
+        }
+    },
+
+    removePhoneNumberBlock: function ($block) {
+        let changePrimary = false;
+
+        if ($block.find('button[data-property-type="primary"]').hasClass('active')) {
+            changePrimary = true;
+        }
+
+        $block.remove();
+
+        if (changePrimary) {
+            this.$el.find('button[data-property-type="primary"]')
+                .first()
+                .addClass('active')
+                .children()
+                .removeClass('text-muted');
+        }
+
+        this.manageButtonsVisibility();
+        this.manageAddButton();
+    },
+
+    manageAddButton: function () {
+        let $input = this.$el.find('input.phone-number');
+        let c = 0;
+
+        $input.each((i, input) => {
+            if (input.value !== '') {
+                c++;
+            }
+        });
+
+        if (c === $input.length) {
             this.$el.find('[data-action="addPhoneNumber"]')
-                .addClass('disabled')
-                .attr('disabled', 'disabled');
-        },
+                .removeClass('disabled')
+                .removeAttr('disabled');
 
-        manageButtonsVisibility: function () {
-            let $primary = this.$el.find('button[data-property-type="primary"]');
-            let $remove = this.$el.find('button[data-action="removePhoneNumber"]');
-            let $container = this.$el.find('.phone-number-block-container');
+            return;
+        }
 
-            if ($primary.length > 1) {
-                $primary.removeClass('hidden');
-                $remove.removeClass('hidden');
-                $container.addClass('many')
+        this.$el.find('[data-action="addPhoneNumber"]')
+            .addClass('disabled')
+            .attr('disabled', 'disabled');
+    },
 
-                return;
-            }
+    manageButtonsVisibility: function () {
+        let $primary = this.$el.find('button[data-property-type="primary"]');
+        let $remove = this.$el.find('button[data-action="removePhoneNumber"]');
+        let $container = this.$el.find('.phone-number-block-container');
 
-            $container.removeClass('many')
-            $primary.addClass('hidden');
-            $remove.addClass('hidden');
-        },
+        if ($primary.length > 1) {
+            $primary.removeClass('hidden');
+            $remove.removeClass('hidden');
+            $container.addClass('many')
 
-        setup: function () {
-            this.dataFieldName = this.name + 'Data';
-            this.defaultType = this.defaultType ||
-                this.getMetadata()
-                    .get('entityDefs.' + this.model.name + '.fields.' + this.name + '.defaultType');
+            return;
+        }
 
-            this.isOptedOutFieldName = this.name + 'IsOptedOut';
-            this.isInvalidFieldName = this.name + 'IsInvalid';
+        $container.removeClass('many')
+        $primary.addClass('hidden');
+        $remove.addClass('hidden');
+    },
 
-            this.phoneNumberOptedOutByDefault = this.getConfig().get('phoneNumberIsOptedOutByDefault');
+    setup: function () {
+        this.dataFieldName = this.name + 'Data';
+        this.defaultType = this.defaultType ||
+            this.getMetadata()
+                .get('entityDefs.' + this.model.name + '.fields.' + this.name + '.defaultType');
 
-            if (this.model.has('doNotCall')) {
-                this.listenTo(this.model, 'change:doNotCall', (model, value, o) => {
-                    if (this.mode !== 'detail' && this.mode !== 'list') {
-                        return;
-                    }
+        this.isOptedOutFieldName = this.name + 'IsOptedOut';
+        this.isInvalidFieldName = this.name + 'IsInvalid';
 
-                    if (!o.ui) {
-                        return;
-                    }
+        this.phoneNumberOptedOutByDefault = this.getConfig().get('phoneNumberIsOptedOutByDefault');
 
-                    this.reRender();
-                });
-            }
-
-            this.erasedPlaceholder = 'ERASED:';
-
-            this.itemMaxLength = this.getMetadata()
-                .get(['entityDefs', 'PhoneNumber', 'fields', 'name', 'maxLength']);
-        },
-
-        fetchPhoneNumberData: function () {
-            let data = [];
-
-            let $list = this.$el.find('div.phone-number-block');
-
-            if ($list.length) {
-                $list.each((i, d) => {
-                    let row = {};
-                    let $d = $(d);
-
-                    row.phoneNumber = $d.find('input.phone-number').val().trim();
-
-                    if (row.phoneNumber === '') {
-                        return;
-                    }
-
-                    row.primary = $d.find('button[data-property-type="primary"]').hasClass('active');
-                    row.type = $d.find('select[data-property-type="type"]').val();
-                    row.optOut = $d.find('button[data-property-type="optOut"]').hasClass('active');
-                    row.invalid = $d.find('button[data-property-type="invalid"]').hasClass('active');
-
-                    data.push(row);
-                });
-            }
-
-            return data;
-        },
-
-        fetch: function () {
-            let data = {};
-
-            let addressData = this.fetchPhoneNumberData() || [];
-
-            data[this.dataFieldName] = addressData;
-            data[this.name] = null;
-            data[this.isOptedOutFieldName] = false;
-            data[this.isInvalidFieldName] = false;
-
-            let primaryIndex = 0;
-
-            addressData.forEach((item, i) => {
-                if (item.primary) {
-                    primaryIndex = i;
-
-                    if (item.optOut) {
-                        data[this.isOptedOutFieldName] = true;
-                    }
-
-                    if (item.invalid) {
-                        data[this.isInvalidFieldName] = true;
-                    }
+        if (this.model.has('doNotCall')) {
+            this.listenTo(this.model, 'change:doNotCall', (model, value, o) => {
+                if (this.mode !== 'detail' && this.mode !== 'list') {
+                    return;
                 }
+
+                if (!o.ui) {
+                    return;
+                }
+
+                this.reRender();
             });
+        }
 
-            if (addressData.length && primaryIndex > 0) {
-                let t = addressData[0];
+        this.erasedPlaceholder = 'ERASED:';
 
-                addressData[0] = addressData[primaryIndex];
-                addressData[primaryIndex] = t;
+        this.itemMaxLength = this.getMetadata()
+            .get(['entityDefs', 'PhoneNumber', 'fields', 'name', 'maxLength']);
+    },
+
+    fetchPhoneNumberData: function () {
+        let data = [];
+
+        let $list = this.$el.find('div.phone-number-block');
+
+        if ($list.length) {
+            $list.each((i, d) => {
+                let row = {};
+                let $d = $(d);
+
+                row.phoneNumber = $d.find('input.phone-number').val().trim();
+
+                if (row.phoneNumber === '') {
+                    return;
+                }
+
+                row.primary = $d.find('button[data-property-type="primary"]').hasClass('active');
+                row.type = $d.find('select[data-property-type="type"]').val();
+                row.optOut = $d.find('button[data-property-type="optOut"]').hasClass('active');
+                row.invalid = $d.find('button[data-property-type="invalid"]').hasClass('active');
+
+                data.push(row);
+            });
+        }
+
+        return data;
+    },
+
+    fetch: function () {
+        let data = {};
+
+        let addressData = this.fetchPhoneNumberData() || [];
+
+        data[this.dataFieldName] = addressData;
+        data[this.name] = null;
+        data[this.isOptedOutFieldName] = false;
+        data[this.isInvalidFieldName] = false;
+
+        let primaryIndex = 0;
+
+        addressData.forEach((item, i) => {
+            if (item.primary) {
+                primaryIndex = i;
+
+                if (item.optOut) {
+                    data[this.isOptedOutFieldName] = true;
+                }
+
+                if (item.invalid) {
+                    data[this.isInvalidFieldName] = true;
+                }
             }
+        });
 
-            if (addressData.length) {
-                data[this.name] = addressData[0].phoneNumber;
-            } else {
-                data[this.isOptedOutFieldName] = null;
-                data[this.isInvalidFieldName] = null;
-            }
+        if (addressData.length && primaryIndex > 0) {
+            let t = addressData[0];
 
-            return data;
-        },
-    });
+            addressData[0] = addressData[primaryIndex];
+            addressData[primaryIndex] = t;
+        }
+
+        if (addressData.length) {
+            data[this.name] = addressData[0].phoneNumber;
+        } else {
+            data[this.isOptedOutFieldName] = null;
+            data[this.isInvalidFieldName] = null;
+        }
+
+        return data;
+    },
 });
diff --git a/client/src/views/fields/text.js b/client/src/views/fields/text.js
index 4c2ac398f5..e06c23c33e 100644
--- a/client/src/views/fields/text.js
+++ b/client/src/views/fields/text.js
@@ -26,387 +26,368 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/text', ['views/fields/base'], function (Dep) {
+/** @module views/fields/text */
 
-    /**
-     * A text field.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/text
-     */
-    return Dep.extend(/** @lends module:views/fields/text.Class# */{
+import Dep from 'views/fields/base';
 
-        type: 'text',
+/**
+ * A text field.
+ *
+ * @class Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        listTemplate: 'fields/text/list',
+    type: 'text',
 
-        detailTemplate: 'fields/text/detail',
+    listTemplate: 'fields/text/list',
+    detailTemplate: 'fields/text/detail',
+    editTemplate: 'fields/text/edit',
+    searchTemplate: 'fields/text/search',
 
-        editTemplate: 'fields/text/edit',
+    seeMoreText: false,
+    rowsDefault: 10,
+    rowsMin: 2,
+    seeMoreDisabled: false,
+    cutHeight: 200,
+    noResize: false,
+    changeInterval: 5,
 
-        searchTemplate: 'fields/text/search',
+    searchTypeList: [
+        'contains',
+        'startsWith',
+        'equals',
+        'endsWith',
+        'like',
+        'notContains',
+        'notLike',
+        'isEmpty',
+        'isNotEmpty',
+    ],
 
-        seeMoreText: false,
+    events: {
+        'click a[data-action="seeMoreText"]': function () {
+            this.seeMoreText = true;
 
-        rowsDefault: 10,
-
-        rowsMin: 2,
-
-        seeMoreDisabled: false,
-
-        cutHeight: 200,
-
-        searchTypeList: [
-            'contains',
-            'startsWith',
-            'equals',
-            'endsWith',
-            'like',
-            'notContains',
-            'notLike',
-            'isEmpty',
-            'isNotEmpty',
-        ],
-
-        noResize: false,
-
-        changeInterval: 5,
-
-        events: {
-            'click a[data-action="seeMoreText"]': function (e) {
-                this.seeMoreText = true;
-                this.reRender();
-            },
-            'click [data-action="mailTo"]': function (e) {
-                this.mailTo($(e.currentTarget).data('email-address'));
-            },
+            this.reRender();
         },
-
-        setup: function () {
-            Dep.prototype.setup.call(this);
-
-            this.params.rows = this.params.rows || this.rowsDefault;
-            this.noResize = this.options.noResize || this.params.noResize || this.noResize;
-            this.seeMoreDisabled = this.seeMoreDisabled || this.params.seeMoreDisabled;
-            this.autoHeightDisabled = this.options.autoHeightDisabled || this.params.autoHeightDisabled ||
-                this.autoHeightDisabled;
-
-            if (this.params.cutHeight) {
-                this.cutHeight = this.params.cutHeight;
-            }
-
-            this.rowsMin = this.options.rowsMin || this.params.rowsMin || this.rowsMin;
-
-            if (this.params.rows < this.rowsMin) {
-                this.rowsMin = this.params.rows;
-            }
-
-            this.on('remove', () => {
-                $(window).off('resize.see-more-' + this.cid);
-            });
+        'click [data-action="mailTo"]': function (e) {
+            this.mailTo($(e.currentTarget).data('email-address'));
         },
+    },
 
-        setupSearch: function () {
-            this.events = _.extend({
-                'change select.search-type': function (e) {
-                    var type = $(e.currentTarget).val();
-                    this.handleSearchType(type);
-                },
-            }, this.events || {});
-        },
+    setup: function () {
+        Dep.prototype.setup.call(this);
 
-        data: function () {
-            var data = Dep.prototype.data.call(this);
+        this.params.rows = this.params.rows || this.rowsDefault;
+        this.noResize = this.options.noResize || this.params.noResize || this.noResize;
+        this.seeMoreDisabled = this.seeMoreDisabled || this.params.seeMoreDisabled;
+        this.autoHeightDisabled = this.options.autoHeightDisabled || this.params.autoHeightDisabled ||
+            this.autoHeightDisabled;
 
-            if (
-                this.model.get(this.name) !== null &&
-                this.model.get(this.name) !== '' &&
-                this.model.has(this.name)
-            ) {
-                data.isNotEmpty = true;
-            }
+        if (this.params.cutHeight) {
+            this.cutHeight = this.params.cutHeight;
+        }
 
-            if (this.mode === this.MODE_SEARCH) {
-                if (typeof this.searchParams.value === 'string') {
-                    this.searchData.value = this.searchParams.value;
-                }
-            }
+        this.rowsMin = this.options.rowsMin || this.params.rowsMin || this.rowsMin;
 
-            if (this.mode === this.MODE_EDIT) {
-                if (this.autoHeightDisabled) {
-                    data.rows = this.params.rows;
-                } else {
-                    data.rows = this.rowsMin;
-                }
-            }
+        if (this.params.rows < this.rowsMin) {
+            this.rowsMin = this.params.rows;
+        }
 
-            data.valueIsSet = this.model.has(this.name);
+        this.on('remove', () => {
+            $(window).off('resize.see-more-' + this.cid);
+        });
+    },
 
-            if (this.isReadMode()) {
-                data.isCut = this.isCut();
-
-                if (data.isCut) {
-                    data.cutHeight = this.cutHeight;
-                }
-
-                data.displayRawText = this.params.displayRawText;
-            }
-
-            data.noResize = this.noResize;
-
-            return data;
-        },
-
-        handleSearchType: function (type) {
-            if (~['isEmpty', 'isNotEmpty'].indexOf(type)) {
-                this.$el.find('input.main-element').addClass('hidden');
-            } else {
-                this.$el.find('input.main-element').removeClass('hidden');
-            }
-        },
-
-        getValueForDisplay: function () {
-            var text = this.model.get(this.name);
-
-            return text || '';
-        },
-
-        controlTextareaHeight: function (lastHeight) {
-            var scrollHeight = this.$element.prop('scrollHeight');
-            var clientHeight = this.$element.prop('clientHeight');
-
-            if (typeof lastHeight === 'undefined' && clientHeight === 0) {
-                setTimeout(this.controlTextareaHeight.bind(this), 10);
-
-                return;
-            }
-
-            if (clientHeight === lastHeight) {
-                return;
-            }
-
-            if (scrollHeight > clientHeight + 1) {
-                var rows = this.$element.prop('rows');
-
-                if (this.params.rows && rows >= this.params.rows) {
-                    return;
-                }
-
-                this.$element.attr('rows', rows + 1);
-                this.controlTextareaHeight(clientHeight);
-            }
-
-            if (this.$element.val().length === 0) {
-                this.$element.attr('rows', this.rowsMin);
-            }
-        },
-
-        isCut: function () {
-            return !this.seeMoreText && !this.seeMoreDisabled;
-        },
-
-        controlSeeMore: function () {
-            if (!this.isCut()) {
-                return;
-            }
-
-            if (this.$text.height() > this.cutHeight) {
-                this.$seeMoreContainer.removeClass('hidden');
-                this.$textContainer.addClass('cut');
-            } else {
-                this.$seeMoreContainer.addClass('hidden');
-                this.$textContainer.removeClass('cut');
-            }
-        },
-
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
-
-            if (this.isReadMode()) {
-                $(window).off('resize.see-more-' + this.cid);
-
-                this.$textContainer = this.$el.find('> .complex-text-container');
-                this.$text = this.$textContainer.find('> .complex-text');
-                this.$seeMoreContainer = this.$el.find('> .see-more-container');
-
-                if (this.isCut()) {
-                    this.controlSeeMore();
-
-                    if (this.model.get(this.name) && this.$text.height() === 0) {
-                        this.$textContainer.addClass('cut');
-
-                        setTimeout(this.controlSeeMore.bind(this), 50);
-                    }
-
-                    this.listenTo(this.recordHelper, 'panel-show', () => this.controlSeeMore());
-                    this.on('panel-show-propagated', () => this.controlSeeMore());
-
-                    $(window).on('resize.see-more-' + this.cid, () => {
-                        this.controlSeeMore();
-                    });
-                }
-            }
-
-            if (this.mode === this.MODE_EDIT) {
-                var text = this.getValueForDisplay();
-                if (text) {
-                    this.$element.val(text);
-                }
-            }
-
-            if (this.mode === this.MODE_SEARCH) {
-                var type = this.$el.find('select.search-type').val();
+    setupSearch: function () {
+        this.events = _.extend({
+            'change select.search-type': function (e) {
+                let type = $(e.currentTarget).val();
 
                 this.handleSearchType(type);
+            },
+        }, this.events || {});
+    },
 
-                this.$el.find('select.search-type').on('change', () => {
-                    this.trigger('change');
-                });
+    data: function () {
+        let data = Dep.prototype.data.call(this);
 
-                this.$element.on('input', () => {
-                    this.trigger('change');
-                });
+        if (
+            this.model.get(this.name) !== null &&
+            this.model.get(this.name) !== '' &&
+            this.model.has(this.name)
+        ) {
+            data.isNotEmpty = true;
+        }
+
+        if (this.mode === this.MODE_SEARCH) {
+            if (typeof this.searchParams.value === 'string') {
+                this.searchData.value = this.searchParams.value;
+            }
+        }
+
+        if (this.mode === this.MODE_EDIT) {
+            if (this.autoHeightDisabled) {
+                data.rows = this.params.rows;
+            } else {
+                data.rows = this.rowsMin;
+            }
+        }
+
+        data.valueIsSet = this.model.has(this.name);
+
+        if (this.isReadMode()) {
+            data.isCut = this.isCut();
+
+            if (data.isCut) {
+                data.cutHeight = this.cutHeight;
             }
 
-            if (this.mode === this.MODE_EDIT && !this.autoHeightDisabled) {
-                this.controlTextareaHeight();
+            data.displayRawText = this.params.displayRawText;
+        }
 
-                this.$element.on('input', () => {
-                    this.controlTextareaHeight();
-                });
+        data.noResize = this.noResize;
 
-                let lastChangeKeydown = new Date();
-                const changeKeydownInterval = this.changeInterval * 1000;
+        return data;
+    },
 
-                this.$element.on('keydown', () => {
-                    if (Date.now() - lastChangeKeydown > changeKeydownInterval) {
-                        this.trigger('change');
-                        lastChangeKeydown = Date.now();
-                    }
-                });
-            }
-        },
+    handleSearchType: function (type) {
+        if (~['isEmpty', 'isNotEmpty'].indexOf(type)) {
+            this.$el.find('input.main-element').addClass('hidden');
+        } else {
+            this.$el.find('input.main-element').removeClass('hidden');
+        }
+    },
 
-        fetch: function () {
-            let data = {};
+    getValueForDisplay: function () {
+        var text = this.model.get(this.name);
 
-            let value = this.$element.val() || null;
+        return text || '';
+    },
 
-            if (value && value.trim() === '') {
-                value = '';
-            }
+    controlTextareaHeight: function (lastHeight) {
+        var scrollHeight = this.$element.prop('scrollHeight');
+        var clientHeight = this.$element.prop('clientHeight');
 
-            data[this.name] = value
+        if (typeof lastHeight === 'undefined' && clientHeight === 0) {
+            setTimeout(this.controlTextareaHeight.bind(this), 10);
 
-            return data;
-        },
+            return;
+        }
 
-        fetchSearch: function () {
-            var type = this.fetchSearchType() || 'startsWith';
+        if (clientHeight === lastHeight) {
+            return;
+        }
 
-            var data;
-
-            if (~['isEmpty', 'isNotEmpty'].indexOf(type)) {
-                if (type === 'isEmpty') {
-                    data = {
-                        type: 'or',
-                        value: [
-                            {
-                                type: 'isNull',
-                                field: this.name,
-                            },
-                            {
-                                type: 'equals',
-                                field: this.name,
-                                value: ''
-                            }
-                        ],
-                        data: {
-                            type: type
-                        }
-                    };
-                } else {
-                    data = {
-                        type: 'and',
-                        value: [
-                            {
-                                type: 'notEquals',
-                                field: this.name,
-                                value: ''
-                            },
-                            {
-                                type: 'isNotNull',
-                                field: this.name,
-                                value: null
-                            }
-                        ],
-                        data: {
-                            type: type
-                        }
-                    };
-                }
-
-                return data;
-            }
-            else {
-                var value = this.$element.val().toString().trim();
-
-                value = value.trim();
-
-                if (value) {
-                    data = {
-                        value: value,
-                        type: type
-                    };
-
-                    return data;
-                }
-            }
-
-            return false;
-        },
-
-        getSearchType: function () {
-            return this.getSearchParamsData().type || this.searchParams.typeFront ||
-                this.searchParams.type;
-        },
-
-        mailTo: function (emailAddress) {
-            var attributes = {
-                status: 'Draft',
-                to: emailAddress
-            };
-
-            if (
-                this.getConfig().get('emailForceUseExternalClient') ||
-                this.getPreferences().get('emailUseExternalClient') ||
-                !this.getAcl().checkScope('Email', 'create')
-            ) {
-                require('email-helper', (EmailHelper) => {
-                    var emailHelper = new EmailHelper();
-
-                    var link = emailHelper
-                        .composeMailToLink(attributes, this.getConfig().get('outboundEmailBccAddress'));
-
-                    document.location.href = link;
-                });
+        if (scrollHeight > clientHeight + 1) {
+            var rows = this.$element.prop('rows');
 
+            if (this.params.rows && rows >= this.params.rows) {
                 return;
             }
 
-            var viewName = this.getMetadata().get('clientDefs.' + this.scope + '.modalViews.compose') ||
-                'views/modals/compose-email';
+            this.$element.attr('rows', rows + 1);
+            this.controlTextareaHeight(clientHeight);
+        }
 
-            Espo.Ui.notify(' ... ');
+        if (this.$element.val().length === 0) {
+            this.$element.attr('rows', this.rowsMin);
+        }
+    },
 
-            this.createView('quickCreate', viewName, {
-                attributes: attributes,
-            }, (view) => {
-                view.render();
-                view.notify(false);
+    isCut: function () {
+        return !this.seeMoreText && !this.seeMoreDisabled;
+    },
+
+    controlSeeMore: function () {
+        if (!this.isCut()) {
+            return;
+        }
+
+        if (this.$text.height() > this.cutHeight) {
+            this.$seeMoreContainer.removeClass('hidden');
+            this.$textContainer.addClass('cut');
+        } else {
+            this.$seeMoreContainer.addClass('hidden');
+            this.$textContainer.removeClass('cut');
+        }
+    },
+
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
+
+        if (this.isReadMode()) {
+            $(window).off('resize.see-more-' + this.cid);
+
+            this.$textContainer = this.$el.find('> .complex-text-container');
+            this.$text = this.$textContainer.find('> .complex-text');
+            this.$seeMoreContainer = this.$el.find('> .see-more-container');
+
+            if (this.isCut()) {
+                this.controlSeeMore();
+
+                if (this.model.get(this.name) && this.$text.height() === 0) {
+                    this.$textContainer.addClass('cut');
+
+                    setTimeout(this.controlSeeMore.bind(this), 50);
+                }
+
+                this.listenTo(this.recordHelper, 'panel-show', () => this.controlSeeMore());
+                this.on('panel-show-propagated', () => this.controlSeeMore());
+
+                $(window).on('resize.see-more-' + this.cid, () => {
+                    this.controlSeeMore();
+                });
+            }
+        }
+
+        if (this.mode === this.MODE_EDIT) {
+            var text = this.getValueForDisplay();
+            if (text) {
+                this.$element.val(text);
+            }
+        }
+
+        if (this.mode === this.MODE_SEARCH) {
+            var type = this.$el.find('select.search-type').val();
+
+            this.handleSearchType(type);
+
+            this.$el.find('select.search-type').on('change', () => {
+                this.trigger('change');
             });
-        },
-    });
+
+            this.$element.on('input', () => {
+                this.trigger('change');
+            });
+        }
+
+        if (this.mode === this.MODE_EDIT && !this.autoHeightDisabled) {
+            this.controlTextareaHeight();
+
+            this.$element.on('input', () => {
+                this.controlTextareaHeight();
+            });
+
+            let lastChangeKeydown = new Date();
+            const changeKeydownInterval = this.changeInterval * 1000;
+
+            this.$element.on('keydown', () => {
+                if (Date.now() - lastChangeKeydown > changeKeydownInterval) {
+                    this.trigger('change');
+                    lastChangeKeydown = Date.now();
+                }
+            });
+        }
+    },
+
+    fetch: function () {
+        let data = {};
+
+        let value = this.$element.val() || null;
+
+        if (value && value.trim() === '') {
+            value = '';
+        }
+
+        data[this.name] = value
+
+        return data;
+    },
+
+    fetchSearch: function () {
+        let type = this.fetchSearchType() || 'startsWith';
+
+        if (type === 'isEmpty') {
+            return  {
+                type: 'or',
+                value: [
+                    {
+                        type: 'isNull',
+                        field: this.name,
+                    },
+                    {
+                        type: 'equals',
+                        field: this.name,
+                        value: ''
+                    }
+                ],
+                data: {
+                    type: type,
+                },
+            };
+        }
+
+        if (type === 'isNotEmpty') {
+            return  {
+                type: 'and',
+                value: [
+                    {
+                        type: 'notEquals',
+                        field: this.name,
+                        value: '',
+                    },
+                    {
+                        type: 'isNotNull',
+                        field: this.name,
+                        value: null,
+                    }
+                ],
+                data: {
+                    type: type,
+                },
+            };
+        }
+
+        let value = this.$element.val().toString().trim();
+
+        if (value) {
+            return {
+                value: value,
+                type: type,
+            };
+        }
+
+        return false;
+    },
+
+    getSearchType: function () {
+        return this.getSearchParamsData().type || this.searchParams.typeFront ||
+            this.searchParams.type;
+    },
+
+    mailTo: function (emailAddress) {
+        let attributes = {
+            status: 'Draft',
+            to: emailAddress,
+        };
+
+        if (
+            this.getConfig().get('emailForceUseExternalClient') ||
+            this.getPreferences().get('emailUseExternalClient') ||
+            !this.getAcl().checkScope('Email', 'create')
+        ) {
+            Espo.loader.require('email-helper', EmailHelper => {
+                let emailHelper = new EmailHelper();
+
+                document.location.href = emailHelper
+                    .composeMailToLink(attributes, this.getConfig().get('outboundEmailBccAddress'));
+            });
+
+            return;
+        }
+
+        let viewName = this.getMetadata().get('clientDefs.' + this.scope + '.modalViews.compose') ||
+            'views/modals/compose-email';
+
+        Espo.Ui.notify(' ... ');
+
+        this.createView('quickCreate', viewName, {
+            attributes: attributes,
+        }, view => {
+            view.render();
+            view.notify(false);
+        });
+    },
 });
diff --git a/client/src/views/fields/url-multiple.js b/client/src/views/fields/url-multiple.js
index 7998d56d0c..d6f800be07 100644
--- a/client/src/views/fields/url-multiple.js
+++ b/client/src/views/fields/url-multiple.js
@@ -26,100 +26,97 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/url-multiple', ['views/fields/array'], function (Dep) {
+import Dep from 'views/fields/array';
+
+/**
+ * An Url-Multiple field.
+ *
+ * @class Class
+ * @extends module:views/fields/array
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    type: 'urlMultiple',
+
+    maxItemLength: 255,
+    displayAsList: true,
+    defaultProtocol: 'https:',
+
+    setup: function () {
+        Dep.prototype.setup.call(this);
+
+        this.noEmptyString = true;
+        this.params.pattern = '$uriOptionalProtocol';
+    },
+
+    addValueFromUi: function (value) {
+        value = value.trim();
+
+        if (this.params.strip) {
+            value = this.strip(value);
+        }
+
+        if (value === decodeURI(value)) {
+            value = encodeURI(value);
+        }
+
+        Dep.prototype.addValueFromUi.call(this, value);
+    },
 
     /**
-     * An Url-Multiple field.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/fields/array.Class
-     * @memberOf module:views/fields/url-multiple
+     * @param {string} value
+     * @return {string}
      */
-    return Dep.extend(/** @lends module:views/fields/url-multiple.Class# */{
+    strip: function (value) {
+        if (value.indexOf('//') !== -1) {
+            value = value.substring(value.indexOf('//') + 2);
+        }
 
-        type: 'urlMultiple',
+        value = value.replace(/\/+$/, '');
 
-        maxItemLength: 255,
-        displayAsList: true,
-        defaultProtocol: 'https:',
+        return value;
+    },
 
-        setup: function () {
-            Dep.prototype.setup.call(this);
+    prepareUrl: function (url) {
+        if (url.indexOf('//') === -1) {
+            url = this.defaultProtocol + '//' + url;
+        }
 
-            this.noEmptyString = true;
-            this.params.pattern = '$uriOptionalProtocol';
-        },
+        return url;
+    },
 
-        addValueFromUi: function (value) {
-            value = value.trim();
+    getValueForDisplay: function () {
+        /** @type {JQuery[]} */
+        let $list = this.selected.map(value => {
+            return $('<a>')
+                .attr('href', this.prepareUrl(value))
+                .attr('target', '_blank')
+                .text(decodeURI(value));
+        });
 
-            if (this.params.strip) {
-                value = this.strip(value);
-            }
+        return $list
+            .map($item =>
+                $('<div>')
+                    .addClass('multi-enum-item-container')
+                    .append($item)
+                    .get(0).outerHTML
+            )
+            .join('');
+    },
 
-            if (value === decodeURI(value)) {
-                value = encodeURI(value);
-            }
+    getItemHtml: function (value) {
+        let html = Dep.prototype.getItemHtml.call(this, value);
 
-            Dep.prototype.addValueFromUi.call(this, value);
-        },
+        let $item = $(html);
 
-        /**
-         * @param {string} value
-         * @return {string}
-         */
-        strip: function (value) {
-            if (value.indexOf('//') !== -1) {
-                value = value.substring(value.indexOf('//') + 2);
-            }
+        $item.find('span.text').html(
+            $('<a>')
+                .attr('href', this.prepareUrl(value))
+                .css('user-drag', 'none')
+                .attr('target', '_blank')
+                .text(decodeURI(value))
+        );
 
-            value = value.replace(/\/+$/, '');
-
-            return value;
-        },
-
-        prepareUrl: function (url) {
-            if (url.indexOf('//') === -1) {
-                url = this.defaultProtocol + '//' + url;
-            }
-
-            return url;
-        },
-
-        getValueForDisplay: function () {
-            /** @type {JQuery[]} */
-            let $list = this.selected.map(value => {
-                return $('<a>')
-                    .attr('href', this.prepareUrl(value))
-                    .attr('target', '_blank')
-                    .text(decodeURI(value));
-            });
-
-            return $list
-                .map($item =>
-                    $('<div>')
-                        .addClass('multi-enum-item-container')
-                        .append($item)
-                        .get(0).outerHTML
-                )
-                .join('');
-        },
-
-        getItemHtml: function (value) {
-            let html = Dep.prototype.getItemHtml.call(this, value);
-
-            let $item = $(html);
-
-            $item.find('span.text').html(
-                $('<a>')
-                    .attr('href', this.prepareUrl(value))
-                    .css('user-drag', 'none')
-                    .attr('target', '_blank')
-                    .text(decodeURI(value))
-            );
-
-            return $item.get(0).outerHTML;
-        },
-    });
+        return $item.get(0).outerHTML;
+    },
 });
diff --git a/client/src/views/fields/url.js b/client/src/views/fields/url.js
index 3c0ddd35c5..9e59de2ed4 100644
--- a/client/src/views/fields/url.js
+++ b/client/src/views/fields/url.js
@@ -26,176 +26,173 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/url', ['views/fields/varchar', 'lib!underscore'], function (Dep, _) {
+/** @module views/fields/url */
 
-    /**
-     * @class
-     * @name Class
-     * @extends module:views/fields/varchar.Class
-     * @memberOf module:views/fields/url
-     */
-    return Dep.extend(/** @lends module:views/fields/url.Class# */{
+import Dep from 'views/fields/varchar';
 
-        type: 'url',
+/**
+ * @class Class
+ * @extends module:views/fields/varchar
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        listTemplate: 'fields/url/list',
+    type: 'url',
 
-        detailTemplate: 'fields/url/detail',
+    listTemplate: 'fields/url/list',
+    detailTemplate: 'fields/url/detail',
+    defaultProtocol: 'https:',
 
-        defaultProtocol: 'https:',
+    validations: [
+        'required',
+        'valid',
+        'maxLength',
+    ],
 
-        validations: [
-            'required',
-            'valid',
-            'maxLength',
-        ],
+    noSpellCheck: true,
 
-        noSpellCheck: true,
+    DEFAULT_MAX_LENGTH: 255,
 
-        DEFAULT_MAX_LENGTH: 255,
+    setup: function () {
+        Dep.prototype.setup.call(this);
+    },
 
-        setup: function () {
-            Dep.prototype.setup.call(this);
-        },
+    data: function () {
+        let data = Dep.prototype.data.call(this);
 
-        data: function () {
-            let data = Dep.prototype.data.call(this);
+        data.url = this.getUrl();
 
-            data.url = this.getUrl();
+        return data;
+    },
 
-            return data;
-        },
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
 
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
+        if (this.isEditMode()) {
+            this.$element.on('change', () => {
+                let value = this.$element.val() || '';
 
-            if (this.isEditMode()) {
-                this.$element.on('change', () => {
-                    let value = this.$element.val() || '';
+                let parsedValue = this.parse(value);
 
-                    let parsedValue = this.parse(value);
-
-                    if (parsedValue === value) {
-                        return;
-                    }
-
-                    let decoded = parsedValue ? decodeURI(parsedValue) : '';
-
-                    this.$element.val(decoded);
-                });
-            }
-        },
-
-        getValueForDisplay: function () {
-            let value = this.model.get(this.name);
-
-            return value ? decodeURI(value) : null;
-        },
-
-        /**
-         * @param {string} value
-         * @return {string}
-         */
-        parse: function (value) {
-            value = value.trim();
-
-            if (this.params.strip) {
-                value = this.strip(value);
-            }
-
-            if (value === decodeURI(value)) {
-                value = encodeURI(value);
-            }
-
-            return value;
-        },
-
-        /**
-         * @param {string} value
-         * @return {string}
-         */
-        strip: function (value) {
-            if (value.indexOf('//') !== -1) {
-                value = value.substr(value.indexOf('//') + 2);
-            }
-
-            value = value.replace(/\/+$/, '');
-
-            return value;
-        },
-
-        getUrl: function () {
-            let url = this.model.get(this.name);
-
-            if (url && url !== '') {
-                if (url.indexOf('//') === -1) {
-                    url = this.defaultProtocol + '//' + url;
+                if (parsedValue === value) {
+                    return;
                 }
 
-                return url;
+                let decoded = parsedValue ? decodeURI(parsedValue) : '';
+
+                this.$element.val(decoded);
+            });
+        }
+    },
+
+    getValueForDisplay: function () {
+        let value = this.model.get(this.name);
+
+        return value ? decodeURI(value) : null;
+    },
+
+    /**
+     * @param {string} value
+     * @return {string}
+     */
+    parse: function (value) {
+        value = value.trim();
+
+        if (this.params.strip) {
+            value = this.strip(value);
+        }
+
+        if (value === decodeURI(value)) {
+            value = encodeURI(value);
+        }
+
+        return value;
+    },
+
+    /**
+     * @param {string} value
+     * @return {string}
+     */
+    strip: function (value) {
+        if (value.indexOf('//') !== -1) {
+            value = value.substr(value.indexOf('//') + 2);
+        }
+
+        value = value.replace(/\/+$/, '');
+
+        return value;
+    },
+
+    getUrl: function () {
+        let url = this.model.get(this.name);
+
+        if (url && url !== '') {
+            if (url.indexOf('//') === -1) {
+                url = this.defaultProtocol + '//' + url;
             }
 
             return url;
-        },
+        }
 
-        validateValid: function () {
-            let value = this.model.get(this.name);
+        return url;
+    },
 
-            if (!value) {
-                return false;
-            }
+    validateValid: function () {
+        let value = this.model.get(this.name);
 
-            /** @var {string} */
-            let pattern = this.getMetadata().get(['app', 'regExpPatterns', 'uriOptionalProtocol', 'pattern']);
+        if (!value) {
+            return false;
+        }
 
-            let regExp = new RegExp('^' + pattern + '$');
+        /** @var {string} */
+        let pattern = this.getMetadata().get(['app', 'regExpPatterns', 'uriOptionalProtocol', 'pattern']);
 
-            if (regExp.test(value)) {
-                return false;
-            }
+        let regExp = new RegExp('^' + pattern + '$');
 
-            let msg = this.translate('fieldInvalid', 'messages')
-                .replace('{field}', this.translate(this.name, 'fields', this.entityType));
+        if (regExp.test(value)) {
+            return false;
+        }
 
-            this.showValidationMessage(msg);
+        let msg = this.translate('fieldInvalid', 'messages')
+            .replace('{field}', this.translate(this.name, 'fields', this.entityType));
 
-            return true;
-        },
+        this.showValidationMessage(msg);
 
-        validateMaxLength: function () {
-            let maxLength = this.params.maxLength || this.DEFAULT_MAX_LENGTH;
+        return true;
+    },
 
-            let value = this.model.get(this.name);
+    validateMaxLength: function () {
+        let maxLength = this.params.maxLength || this.DEFAULT_MAX_LENGTH;
 
-            if (!value || !value.length) {
-                return false;
-            }
+        let value = this.model.get(this.name);
 
-            if (value.length <= maxLength) {
-                return false;
-            }
+        if (!value || !value.length) {
+            return false;
+        }
 
-            let msg = this.translate('fieldUrlExceedsMaxLength', 'messages')
-                .replace('{maxLength}', maxLength)
-                .replace('{field}', this.translate(this.name, 'fields', this.entityType));
+        if (value.length <= maxLength) {
+            return false;
+        }
 
-            this.showValidationMessage(msg);
+        let msg = this.translate('fieldUrlExceedsMaxLength', 'messages')
+            .replace('{maxLength}', maxLength)
+            .replace('{field}', this.translate(this.name, 'fields', this.entityType));
 
-            return true;
-        },
+        this.showValidationMessage(msg);
 
-        fetch: function () {
-            let data = Dep.prototype.fetch.call(this);
+        return true;
+    },
 
-            let value = data[this.name];
+    fetch: function () {
+        let data = Dep.prototype.fetch.call(this);
 
-            if (!value) {
-                return data;
-            }
-
-            data[this.name] = this.parse(value);
+        let value = data[this.name];
 
+        if (!value) {
             return data;
-        },
-    });
+        }
+
+        data[this.name] = this.parse(value);
+
+        return data;
+    },
 });
diff --git a/client/src/views/fields/varchar.js b/client/src/views/fields/varchar.js
index 85a206ba1c..983bb0043c 100644
--- a/client/src/views/fields/varchar.js
+++ b/client/src/views/fields/varchar.js
@@ -26,365 +26,342 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/varchar', ['views/fields/base', 'helpers/reg-exp-pattern'], function (Dep, RegExpPattern) {
+/** @module views/fields/varchar */
+
+import Dep from 'views/fields/base';
+import RegExpPattern from 'helpers/reg-exp-pattern';
+
+/**
+ * A varchar field.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    type: 'varchar',
+
+    listTemplate: 'fields/varchar/list',
+    detailTemplate: 'fields/varchar/detail',
+    searchTemplate: 'fields/varchar/search',
+
+    searchTypeList: [
+        'startsWith',
+        'contains',
+        'equals',
+        'endsWith',
+        'like',
+        'notContains',
+        'notEquals',
+        'notLike',
+        'isEmpty',
+        'isNotEmpty',
+    ],
+
+    /** @inheritDoc */
+    validations: [
+        'required',
+        'pattern',
+    ],
 
     /**
-     * A varchar field.
+     * Use an autocomplete requesting data from the backend.
      *
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/varchar
+     * @protected
+     * @type {boolean}
      */
-    return Dep.extend(/** @lends module:views/fields/varchar.Class# */{
+    useAutocompleteUrl: false,
 
-        type: 'varchar',
+    /**
+     * No spell-check.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    noSpellCheck: false,
 
-        listTemplate: 'fields/varchar/list',
+    setup: function () {
+        this.setupOptions();
 
-        detailTemplate: 'fields/varchar/detail',
+        this.noSpellCheck = this.noSpellCheck || this.params.noSpellCheck;
 
-        searchTemplate: 'fields/varchar/search',
+        if (this.params.optionsPath) {
+            this.params.options = Espo.Utils.clone(
+                this.getMetadata().get(this.params.optionsPath) || []);
+        }
 
-        searchTypeList: [
-            'startsWith',
-            'contains',
-            'equals',
-            'endsWith',
-            'like',
-            'notContains',
-            'notEquals',
-            'notLike',
-            'isEmpty',
-            'isNotEmpty',
-        ],
+        if (this.options.customOptionList) {
+            this.setOptionList(this.options.customOptionList);
+        }
 
-        /**
-         * @inheritDoc
-         */
-        validations: [
-            'required',
-            'pattern',
-        ],
-
-        /**
-         * Use an autocomplete requesting data from the backend.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        useAutocompleteUrl: false,
-
-        /**
-         * No spell-check.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        noSpellCheck: false,
-
-        setup: function () {
-            this.setupOptions();
-
-            this.noSpellCheck = this.noSpellCheck || this.params.noSpellCheck;
-
-            if (this.params.optionsPath) {
-                this.params.options = Espo.Utils.clone(
-                    this.getMetadata().get(this.params.optionsPath) || []);
+        if (this.mode === this.MODE_DETAIL) {
+            if (this.params.copyToClipboard) {
+                this.events['click [data-action="copyToClipboard"]'] = () => this.copyToClipboard();
             }
+        }
+    },
 
-            if (this.options.customOptionList) {
-                this.setOptionList(this.options.customOptionList);
+    /**
+     * Set up options.
+     */
+    setupOptions: function () {},
+
+    /**
+     * Set options.
+     *
+     * @param {string[]} optionList Options.
+     */
+    setOptionList: function (optionList) {
+        if (!this.originalOptionList) {
+            this.originalOptionList = this.params.options || [];
+        }
+
+        this.params.options = Espo.Utils.clone(optionList);
+
+        if (this.isEditMode()) {
+            if (this.isRendered()) {
+                this.reRender();
             }
+        }
+    },
 
-            if (this.mode === this.MODE_DETAIL) {
-                if (this.params.copyToClipboard) {
-                    this.events['click [data-action="copyToClipboard"]'] = () => this.copyToClipboard();
-                }
+    /**
+     * Reset options.
+     */
+    resetOptionList: function () {
+        if (this.originalOptionList) {
+            this.params.options = Espo.Utils.clone(this.originalOptionList);
+        }
+
+        if (this.isEditMode()) {
+            if (this.isRendered()) {
+                this.reRender();
             }
-        },
+        }
+    },
 
-        /**
-         * Set up options.
-         */
-        setupOptions: function () {},
+    /**
+     * @protected
+     */
+    copyToClipboard: function () {
+        let value = this.model.get(this.name);
 
-        /**
-         * Set options.
-         *
-         * @param {string[]} optionList Options.
-         */
-        setOptionList: function (optionList) {
-            if (!this.originalOptionList) {
-                this.originalOptionList = this.params.options || [];
-            }
+        navigator.clipboard.writeText(value).then(() => {
+            Espo.Ui.success(this.translate('Copied to clipboard'));
+        });
+    },
 
-            this.params.options = Espo.Utils.clone(optionList);
+    /**
+     * Compose an autocomplete URL.
+     *
+     * @param {string} q A query.
+     * @return {string}
+     */
+    getAutocompleteUrl: function (q) {
+        return '';
+    },
 
-            if (this.isEditMode()) {
-                if (this.isRendered()) {
-                    this.reRender();
-                }
-            }
-        },
+    transformAutocompleteResult: function (response) {
+        let responseParsed = JSON.parse(response);
 
-        /**
-         * Reset options.
-         */
-        resetOptionList: function () {
-            if (this.originalOptionList) {
-                this.params.options = Espo.Utils.clone(this.originalOptionList);
-            }
+        let list = [];
 
-            if (this.isEditMode()) {
-                if (this.isRendered()) {
-                    this.reRender();
-                }
-            }
-        },
-
-        /**
-         * @protected
-         */
-        copyToClipboard: function () {
-            let value = this.model.get(this.name);
-
-            navigator.clipboard.writeText(value).then(() => {
-                Espo.Ui.success(this.translate('Copied to clipboard'));
+        responseParsed.list.forEach(item => {
+            list.push({
+                id: item.id,
+                name: item.name || item.id,
+                data: item.id,
+                value: item.name || item.id,
+                attributes: item,
             });
-        },
+        });
 
-        /**
-         * Compose an autocomplete URL.
-         *
-         * @param {string} q A query.
-         * @return {string}
-         */
-        getAutocompleteUrl: function (q) {
-            return '';
-        },
-
-        transformAutocompleteResult: function (response) {
-            let responseParsed = JSON.parse(response);
-
-            let list = [];
-
-            responseParsed.list.forEach(item => {
-                list.push({
-                    id: item.id,
-                    name: item.name || item.id,
-                    data: item.id,
-                    value: item.name || item.id,
-                    attributes: item,
-                });
-            });
-
-            return {
-                suggestions: list,
-            };
-        },
-
-        setupSearch: function () {
-            this.events = _.extend({
-                'change select.search-type': function (e) {
-                    var type = $(e.currentTarget).val();
-                    this.handleSearchType(type);
-                },
-            }, this.events || {});
-        },
-
-        data: function () {
-            let data = Dep.prototype.data.call(this);
-
-            if (
-                this.model.get(this.name) !== null &&
-                this.model.get(this.name) !== '' &&
-                this.model.has(this.name)
-            ) {
-                data.isNotEmpty = true;
-            }
-
-            data.valueIsSet = this.model.has(this.name);
-
-            if (this.isSearchMode()) {
-                if (typeof this.searchParams.value === 'string') {
-                    this.searchData.value = this.searchParams.value;
-                }
-            }
-
-            data.noSpellCheck = this.noSpellCheck;
-            data.copyToClipboard = this.params.copyToClipboard;
-
-            return data;
-        },
-
-        handleSearchType: function (type) {
-            if (~['isEmpty', 'isNotEmpty'].indexOf(type)) {
-                this.$el.find('input.main-element').addClass('hidden');
-
-                return;
-            }
-
-            this.$el.find('input.main-element').removeClass('hidden');
-        },
-
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
-
-            if (this.isSearchMode()) {
-                let type = this.$el.find('select.search-type').val();
+        return {
+            suggestions: list,
+        };
+    },
 
+    setupSearch: function () {
+        this.events = _.extend({
+            'change select.search-type': function (e) {
+                var type = $(e.currentTarget).val();
                 this.handleSearchType(type);
+            },
+        }, this.events || {});
+    },
+
+    data: function () {
+        let data = Dep.prototype.data.call(this);
+
+        if (
+            this.model.get(this.name) !== null &&
+            this.model.get(this.name) !== '' &&
+            this.model.has(this.name)
+        ) {
+            data.isNotEmpty = true;
+        }
+
+        data.valueIsSet = this.model.has(this.name);
+
+        if (this.isSearchMode()) {
+            if (typeof this.searchParams.value === 'string') {
+                this.searchData.value = this.searchParams.value;
             }
+        }
 
-            if (
-                (this.isEditMode() || this.isSearchMode()) &&
-                (
-                    this.params.options && this.params.options.length ||
-                    this.useAutocompleteUrl
-                )
-            ) {
-                let autocompleteOptions = {
-                    minChars: 0,
-                    lookup: this.params.options,
-                    maxHeight: 200,
-                    beforeRender: ($c) => {
-                        if (this.$element.hasClass('input-sm')) {
-                            $c.addClass('small');
-                        }
-                    },
-                    formatResult: (suggestion) => {
-                        return this.getHelper().escapeString(suggestion.value);
-                    },
-                    lookupFilter: (suggestion, query, queryLowerCase) => {
-                        if (suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0) {
-                            return suggestion.value.length !== queryLowerCase.length;
-                        }
+        data.noSpellCheck = this.noSpellCheck;
+        data.copyToClipboard = this.params.copyToClipboard;
 
-                        return false;
-                    },
-                    onSelect: () => {
-                        this.trigger('change');
+        return data;
+    },
 
-                        this.$element.focus();
-                    },
-                };
+    handleSearchType: function (type) {
+        if (~['isEmpty', 'isNotEmpty'].indexOf(type)) {
+            this.$el.find('input.main-element').addClass('hidden');
 
-                if (this.useAutocompleteUrl) {
-                    autocompleteOptions.serviceUrl = q => this.getAutocompleteUrl(q);
-                    autocompleteOptions.transformResult = response =>
-                        this.transformAutocompleteResult(response);
-                    autocompleteOptions.noCache = true;
-                    autocompleteOptions.lookup = null;
-                }
+            return;
+        }
 
-                this.$element.autocomplete(autocompleteOptions);
-                this.$element.attr('autocomplete', 'espo-' + this.name);
+        this.$el.find('input.main-element').removeClass('hidden');
+    },
 
-                this.$element.on('focus', () => {
-                    if (this.$element.val()) {
-                        return;
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
+
+        if (this.isSearchMode()) {
+            let type = this.$el.find('select.search-type').val();
+
+            this.handleSearchType(type);
+        }
+
+        if (
+            (this.isEditMode() || this.isSearchMode()) &&
+            (
+                this.params.options && this.params.options.length ||
+                this.useAutocompleteUrl
+            )
+        ) {
+            let autocompleteOptions = {
+                minChars: 0,
+                lookup: this.params.options,
+                maxHeight: 200,
+                beforeRender: $c => {
+                    if (this.$element.hasClass('input-sm')) {
+                        $c.addClass('small');
+                    }
+                },
+                formatResult: (suggestion) => {
+                    return this.getHelper().escapeString(suggestion.value);
+                },
+                lookupFilter: (suggestion, query, queryLowerCase) => {
+                    if (suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0) {
+                        return suggestion.value.length !== queryLowerCase.length;
                     }
 
-                    this.$element.autocomplete('onValueChange');
-                });
-
-                this.once('render', () => this.$element.autocomplete('dispose'));
-                this.once('remove', () => this.$element.autocomplete('dispose'));
-            }
-
-            if (this.isSearchMode()) {
-                this.$el.find('select.search-type').on('change', () => {
+                    return false;
+                },
+                onSelect: () => {
                     this.trigger('change');
-                });
 
-                this.$element.on('input', () => {
-                    this.trigger('change');
-                });
-            }
-        },
+                    this.$element.focus();
+                },
+            };
 
-        validatePattern: function () {
-            let pattern = this.params.pattern;
-
-            return this.fieldValidatePattern(this.name, pattern);
-        },
-
-        /**
-         * Used by other field views.
-         *
-         * @param {string} name
-         * @param {string} [pattern]
-         */
-        fieldValidatePattern: function (name, pattern) {
-            pattern = pattern || this.model.getFieldParam(name, 'pattern');
-            /** @var {string|null} value */
-            let value = this.model.get(name);
-
-            if (!pattern) {
-                return false;
+            if (this.useAutocompleteUrl) {
+                autocompleteOptions.serviceUrl = q => this.getAutocompleteUrl(q);
+                autocompleteOptions.transformResult = response =>
+                    this.transformAutocompleteResult(response);
+                autocompleteOptions.noCache = true;
+                autocompleteOptions.lookup = null;
             }
 
-            /** @type module:helpers/reg-exp-pattern.Class */
-            let helper = new RegExpPattern(this.getMetadata(), this.getLanguage());
+            this.$element.autocomplete(autocompleteOptions);
+            this.$element.attr('autocomplete', 'espo-' + this.name);
 
-            let result = helper.validate(pattern, value, name, this.entityType);
-
-            if (!result) {
-                return false;
-            }
-
-            this.showValidationMessage(result.message, '[data-name="' + name + '"]');
-
-            return true;
-        },
-
-        fetch: function () {
-            let data = {};
-
-            let value = this.$element.val().trim();
-
-            data[this.name] = value || null;
-
-            return data;
-        },
-
-        fetchSearch: function () {
-            let type = this.fetchSearchType() || 'startsWith';
-
-            if (~['isEmpty', 'isNotEmpty'].indexOf(type)) {
-                if (type === 'isEmpty') {
-                    return {
-                        type: 'or',
-                        value: [
-                            {
-                                type: 'isNull',
-                                field: this.name,
-                            },
-                            {
-                                type: 'equals',
-                                field: this.name,
-                                value: '',
-                            }
-                        ],
-                        data: {
-                            type: type,
-                        },
-                    };
+            this.$element.on('focus', () => {
+                if (this.$element.val()) {
+                    return;
                 }
 
+                this.$element.autocomplete('onValueChange');
+            });
+
+            this.once('render', () => this.$element.autocomplete('dispose'));
+            this.once('remove', () => this.$element.autocomplete('dispose'));
+        }
+
+        if (this.isSearchMode()) {
+            this.$el.find('select.search-type').on('change', () => {
+                this.trigger('change');
+            });
+
+            this.$element.on('input', () => {
+                this.trigger('change');
+            });
+        }
+    },
+
+    validatePattern: function () {
+        let pattern = this.params.pattern;
+
+        return this.fieldValidatePattern(this.name, pattern);
+    },
+
+    /**
+     * Used by other field views.
+     *
+     * @param {string} name
+     * @param {string} [pattern]
+     */
+    fieldValidatePattern: function (name, pattern) {
+        pattern = pattern || this.model.getFieldParam(name, 'pattern');
+        /** @var {string|null} value */
+        let value = this.model.get(name);
+
+        if (!pattern) {
+            return false;
+        }
+
+        let helper = new RegExpPattern(this.getMetadata(), this.getLanguage());
+
+        let result = helper.validate(pattern, value, name, this.entityType);
+
+        if (!result) {
+            return false;
+        }
+
+        this.showValidationMessage(result.message, '[data-name="' + name + '"]');
+
+        return true;
+    },
+
+    fetch: function () {
+        let data = {};
+
+        let value = this.$element.val().trim();
+
+        data[this.name] = value || null;
+
+        return data;
+    },
+
+    fetchSearch: function () {
+        let type = this.fetchSearchType() || 'startsWith';
+
+        if (~['isEmpty', 'isNotEmpty'].indexOf(type)) {
+            if (type === 'isEmpty') {
                 return {
-                    type: 'and',
+                    type: 'or',
                     value: [
                         {
-                            type: 'notEquals',
+                            type: 'isNull',
                             field: this.name,
-                            value: '',
                         },
                         {
-                            type: 'isNotNull',
+                            type: 'equals',
                             field: this.name,
-                            value: null,
+                            value: '',
                         }
                     ],
                     data: {
@@ -393,25 +370,44 @@ define('views/fields/varchar', ['views/fields/base', 'helpers/reg-exp-pattern'],
                 };
             }
 
-            let value = this.$element.val().toString().trim();
-
-            if (!value) {
-                // @todo Change to `null` in v7.4 (and for all other fields).
-                return false;
-            }
-
             return {
-                value: value,
-                type: type,
+                type: 'and',
+                value: [
+                    {
+                        type: 'notEquals',
+                        field: this.name,
+                        value: '',
+                    },
+                    {
+                        type: 'isNotNull',
+                        field: this.name,
+                        value: null,
+                    }
+                ],
                 data: {
                     type: type,
                 },
             };
-        },
+        }
 
-        getSearchType: function () {
-            return this.getSearchParamsData().type || this.searchParams.typeFront ||
-                this.searchParams.type;
-        },
-    });
+        let value = this.$element.val().toString().trim();
+
+        if (!value) {
+            // @todo Change to `null` in v7.7 (and for all other fields).
+            return false;
+        }
+
+        return {
+            value: value,
+            type: type,
+            data: {
+                type: type,
+            },
+        };
+    },
+
+    getSearchType: function () {
+        return this.getSearchParamsData().type || this.searchParams.typeFront ||
+            this.searchParams.type;
+    },
 });
diff --git a/client/src/views/fields/wysiwyg.js b/client/src/views/fields/wysiwyg.js
index 47c0569a68..74be2a27c4 100644
--- a/client/src/views/fields/wysiwyg.js
+++ b/client/src/views/fields/wysiwyg.js
@@ -26,1076 +26,1082 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/wysiwyg', ['views/fields/text', 'lib!Summernote'], function (Dep, Summernote) {
+/** @module views/fields/wysiwyg */
 
-    /**
-     * A wysiwyg field.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/fields/base.Class
-     * @memberOf module:views/fields/wysiwyg
-     */
-    return Dep.extend(/** @lends module:views/fields/wysiwyg.Class# */{
+import Dep from 'views/fields/text';
 
-        type: 'wysiwyg',
+/**
+ * A wysiwyg field.
+ *
+ * @class Class
+ * @extends module:views/fields/base
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        listTemplate: 'fields/wysiwyg/detail',
-        detailTemplate: 'fields/wysiwyg/detail',
-        editTemplate: 'fields/wysiwyg/edit',
+    type: 'wysiwyg',
 
-        height: 250,
+    listTemplate: 'fields/wysiwyg/detail',
+    detailTemplate: 'fields/wysiwyg/detail',
+    editTemplate: 'fields/wysiwyg/edit',
 
-        rowsDefault: 10000,
+    height: 250,
+    rowsDefault: 10000,
+    fallbackBodySideMargin: 5,
+    fallbackBodyTopMargin: 4,
+    seeMoreDisabled: true,
+    fetchEmptyValueAsNull: false,
+    validationElementSelector: '.note-editor',
+    htmlPurificationDisabled: false,
 
-        fallbackBodySideMargin: 5,
+    setup: function () {
+        Dep.prototype.setup.call(this);
 
-        fallbackBodyTopMargin: 4,
-
-        seeMoreDisabled: true,
-
-        fetchEmptyValueAsNull: false,
-
-        validationElementSelector: '.note-editor',
-
-        setup: function () {
-            Dep.prototype.setup.call(this);
-
-            if ($.summernote.options && !('espoImage' in $.summernote.options)) {
-                this.initEspoPlugin();
-            }
-
-            this.hasBodyPlainField = !!~this.getFieldManager()
-                .getEntityTypeFieldList(this.model.entityType)
-                .indexOf(this.name + 'Plain');
-
-            if ('height' in this.params) {
-                this.height = this.params.height;
-            }
-
-            if ('minHeight' in this.params) {
-                this.minHeight = this.params.minHeight;
-            }
-
-            this.useIframe = this.params.useIframe || this.useIframe;
-
-            this.setupToolbar();
-
-            this.listenTo(this.model, 'change:isHtml', (model, value, o) => {
-                if (o.ui && this.isEditMode()) {
-                    if (!this.isRendered()) {
+        this.wait(
+            Espo.loader.requirePromise('lib!Summernote')
+                .then(() => {
+                    if (!$.summernote.options || 'espoImage' in $.summernote.options) {
                         return;
                     }
 
-                    if (!model.has('isHtml') || model.get('isHtml')) {
-                        let value = this.plainToHtml(this.model.get(this.name));
+                    this.initEspoPlugin();
+                })
+        );
 
-                        if (
-                            this.lastHtmlValue &&
-                            this.model.get(this.name) === this.htmlToPlain(this.lastHtmlValue)
-                        ) {
-                            value = this.lastHtmlValue;
-                        }
+        this.hasBodyPlainField = !!~this.getFieldManager()
+            .getEntityTypeFieldList(this.model.entityType)
+            .indexOf(this.name + 'Plain');
 
-                        this.model.set(this.name, value, {skipReRender: true});
-                        this.enableWysiwygMode();
+        if ('height' in this.params) {
+            this.height = this.params.height;
+        }
 
-                        return;
-                    }
+        if ('minHeight' in this.params) {
+            this.minHeight = this.params.minHeight;
+        }
 
-                    this.lastHtmlValue = this.model.get(this.name);
+        this.useIframe = this.params.useIframe || this.useIframe;
 
-                    let value = this.htmlToPlain(this.model.get(this.name));
-
-                    this.disableWysiwygMode();
-
-                    this.model.set(this.name, value);
+        this.setupToolbar();
 
+        this.listenTo(this.model, 'change:isHtml', (model, value, o) => {
+            if (o.ui && this.isEditMode()) {
+                if (!this.isRendered()) {
                     return;
                 }
 
-                if (this.isDetailMode()) {
-                    if (this.isRendered()) {
-                        this.reRender();
+                if (!model.has('isHtml') || model.get('isHtml')) {
+                    let value = this.plainToHtml(this.model.get(this.name));
+
+                    if (
+                        this.lastHtmlValue &&
+                        this.model.get(this.name) === this.htmlToPlain(this.lastHtmlValue)
+                    ) {
+                        value = this.lastHtmlValue;
                     }
-                }
-            });
 
-            this.once('remove', () => {
-                this.destroySummernote();
-            });
-
-            this.on('inline-edit-off', () => {
-                this.destroySummernote();
-            });
-
-            this.on('render', () => {
-                this.destroySummernote();
-            });
-
-            this.once('remove', () => {
-                $(window).off('resize.' + this.cid);
-
-                if (this.$scrollable) {
-                    this.$scrollable.off('scroll.' + this.cid + '-edit');
-                }
-            });
-        },
-
-        data: function () {
-            let data = Dep.prototype.data.call(this);
-
-            data.useIframe = this.useIframe;
-            data.isPlain = this.isPlain();
-
-            return data;
-        },
-
-        events: {
-            'click .note-editable': function () {
-                this.fixPopovers();
-            },
-            'focus .note-editable': function () {
-                this.$noteEditor.addClass('in-focus');
-            },
-            'blur .note-editable': function () {
-                this.$noteEditor.removeClass('in-focus');
-            },
-        },
-
-        setupToolbar: function () {
-            this.buttons = {};
-
-            this.toolbar = this.params.toolbar || this.toolbar || [
-                ['style', ['style']],
-                ['style', ['bold', 'italic', 'underline', 'clear']],
-                ['fontsize', ['fontsize']],
-                ['color', ['color']],
-                ['para', ['ul', 'ol', 'paragraph']],
-                ['height', ['height']],
-                ['table', ['table', 'espoLink', 'espoImage', 'hr']],
-                ['misc', ['codeview', 'fullscreen']],
-            ];
-
-            if (!this.params.toolbar) {
-                if (this.params.attachmentField) {
-                    this.toolbar.push(['attachment', ['attachment']]);
-
-                    this.buttons['attachment'] = () => {
-                        let ui = $.summernote.ui;
-
-                        let button = ui.button({
-                            contents: '<i class="fas fa-paperclip"></i>',
-                            tooltip: this.translate('Attach File'),
-                            click: () => {
-                                this.attachFile();
-
-                                this.listenToOnce(this.model, 'attachment-uploaded:attachments', () => {
-                                    if (this.isEditMode()) {
-                                        Espo.Ui.success(this.translate('Attached'));
-                                    }
-                                });
-                            }
-                        });
-
-                        return button.render();
-                    };
-                }
-            }
-        },
-
-        isPlain: function () {
-            return this.model.has('isHtml') && !this.model.get('isHtml');
-        },
-
-        fixPopovers: function () {
-            $('body > .note-popover').removeClass('hidden');
-        },
-
-        getValueForDisplay: function () {
-            let value = Dep.prototype.getValueForDisplay.call(this);
-
-            if (this.isPlain()) {
-                return value;
-            }
-
-            return this.sanitizeHtml(value);
-        },
-
-        sanitizeHtml: function (value) {
-            if (value) {
-                if (!this.htmlPurificationDisabled) {
-                    value = this.getHelper().sanitizeHtml(value);
-                } else {
-                    value = this.sanitizeHtmlLight(value);
-                }
-            }
-
-            return value || '';
-        },
-
-        sanitizeHtmlLight: function (value) {
-           return this.getHelper().moderateSanitizeHtml(value);
-        },
-
-        getValueForEdit: function () {
-            let value = this.model.get(this.name) || '';
-
-            if (this.htmlPurificationForEditDisabled) {
-                return this.sanitizeHtmlLight(value);
-            }
-
-            return this.sanitizeHtml(value);
-        },
-
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
-
-            if (this.isEditMode()) {
-                this.$summernote = this.$el.find('.summernote');
-            }
-
-            let language = this.getConfig().get('language');
-
-            if (!(language in $.summernote.lang)) {
-                $.summernote.lang[language] = this.getLanguage().translate('summernote', 'sets');
-            }
-
-            if (this.isEditMode()) {
-                if (!this.model.has('isHtml') || this.model.get('isHtml')) {
+                    this.model.set(this.name, value, {skipReRender: true});
                     this.enableWysiwygMode();
-                }
-                else {
-                    this.$element.removeClass('hidden');
-                }
-            }
 
-            if (this.isReadMode()) {
-                this.renderDetail();
-            }
-        },
-
-        renderDetail: function () {
-            if (this.model.has('isHtml') && !this.model.get('isHtml')) {
-                this.$el.find('.plain').removeClass('hidden');
-
-                return;
-
-            }
-
-            if (!this.useIframe) {
-                this.$element = this.$el.find('.html-container');
-
-                return;
-            }
-
-            this.$el.find('iframe').removeClass('hidden');
-
-            let $iframe = this.$el.find('iframe');
-
-            let iframeElement = this.iframe = $iframe.get(0);
-
-            if (!iframeElement) {
-                return;
-            }
-
-            $iframe.on('load', () => {
-                $iframe.contents().find('a').attr('target', '_blank');
-            });
-
-            let documentElement = iframeElement.contentWindow.document;
-
-            let body = this.sanitizeHtml(this.model.get(this.name) || '');
-
-            let useFallbackStylesheet = this.getThemeManager().getParam('isDark') && this.htmlHasColors(body);
-
-            let $iframeContainer = $iframe.parent();
-
-            useFallbackStylesheet ?
-                $iframeContainer.addClass('fallback') :
-                $iframeContainer.removeClass('fallback');
-
-            let linkElement = iframeElement.contentWindow.document.createElement('link');
-
-            linkElement.type = 'text/css';
-            linkElement.rel = 'stylesheet';
-            linkElement.href = this.getBasePath() + (
-                useFallbackStylesheet ?
-                this.getThemeManager().getIframeFallbackStylesheet() :
-                this.getThemeManager().getIframeStylesheet()
-            );
-
-            body = linkElement.outerHTML + body;
-
-            documentElement.write(body);
-            documentElement.close();
-
-            let $body = $iframe.contents().find('html body');
-
-            $body.find('img').each((i, img) => {
-                let $img = $(img);
-
-                if ($img.css('max-width') !== 'none') {
                     return;
                 }
 
-                $img.css('max-width', '100%');
-            });
+                this.lastHtmlValue = this.model.get(this.name);
 
-            let $document = $(documentElement);
+                let value = this.htmlToPlain(this.model.get(this.name));
 
-            // Make dropdowns closed.
-            $document.on('click', () => {
-                let event = new MouseEvent('click', {
-                    bubbles: true,
-                });
+                this.disableWysiwygMode();
 
-                $iframe[0].dispatchEvent(event);
-            });
+                this.model.set(this.name, value);
 
-            // Make notifications & global-search popup closed.
-            $document.on('mouseup', () => {
-                let event = new MouseEvent('mouseup', {
-                    bubbles: true,
-                });
-
-                $iframe[0].dispatchEvent(event);
-            });
-
-            // Make shortcuts working.
-            $document.on('keydown', e => {
-                /** @var {KeyboardEvent} originalEvent */
-                let originalEvent = e.originalEvent;
-
-                let event = new KeyboardEvent('keydown', {
-                    bubbles: true,
-                    code: originalEvent.code,
-                    ctrlKey: originalEvent.ctrlKey,
-                    metaKey: originalEvent.metaKey,
-                    altKey: originalEvent.altKey,
-                });
-
-                $iframe[0].dispatchEvent(event);
-            });
-
-            let processWidth = function () {
-                let bodyElement = $body.get(0);
-
-                if (bodyElement) {
-                    if (bodyElement.clientWidth !== iframeElement.scrollWidth) {
-                        iframeElement.style.height = (iframeElement.scrollHeight + 20) + 'px';
-                    }
-                }
-            };
-
-            if (useFallbackStylesheet) {
-                $iframeContainer.css({
-                    paddingLeft: this.fallbackBodySideMargin + 'px',
-                    paddingRight: this.fallbackBodySideMargin + 'px',
-                    paddingTop: this.fallbackBodyTopMargin + 'px',
-                });
+                return;
             }
 
-            let increaseHeightStep = 10;
-
-            let processIncreaseHeight = function (iteration, previousDiff) {
-                $body.css('height', '');
-
-                iteration = iteration || 0;
-
-                if (iteration > 200) {
-                    return;
+            if (this.isDetailMode()) {
+                if (this.isRendered()) {
+                    this.reRender();
                 }
-
-                iteration ++;
-
-                let diff = $document.height() - iframeElement.scrollHeight;
-
-                if (typeof previousDiff !== 'undefined') {
-                    if (diff === previousDiff) {
-                        $body.css('height', (iframeElement.clientHeight - increaseHeightStep) + 'px');
-                        processWidth();
-
-                        return;
-                    }
-                }
-
-                if (diff) {
-                    let height = iframeElement.scrollHeight + increaseHeightStep;
-
-                    iframeElement.style.height = height + 'px';
-                    processIncreaseHeight(iteration, diff);
-                }
-                else {
-                    processWidth();
-                }
-            };
-
-            let processBg = () => {
-                let color = iframeElement.contentWindow.getComputedStyle($body.get(0)).backgroundColor;
-
-                $iframeContainer.css({
-                    backgroundColor: color,
-                });
-            };
-
-            let processHeight = function (isOnLoad) {
-                if (!isOnLoad) {
-                    $iframe.css({
-                        overflowY: 'hidden',
-                        overflowX: 'hidden'
-                    });
-
-                    iframeElement.style.height = '0px';
-                }
-                else {
-                    if (iframeElement.scrollHeight >= $document.height()) {
-                        return;
-                    }
-                }
-
-                let $body = $iframe.contents().find('html body');
-                let height = $body.height();
-
-                if (height === 0) {
-                    height = $body.children(0).height() + 100;
-                }
-
-                iframeElement.style.height = height + 'px';
-
-                processIncreaseHeight();
-
-                if (!isOnLoad) {
-                    $iframe.css({
-                        overflowY: 'hidden',
-                        overflowX: 'scroll'
-                    });
-                }
-            };
-
-            $iframe.css({
-                visibility: 'hidden'
-            });
-
-            setTimeout(() => {
-                processHeight();
-
-                $iframe.css({
-                    visibility: 'visible'
-                });
-
-                $iframe.on('load', () => {
-                    processHeight(true);
-
-                    if (useFallbackStylesheet) {
-                        processBg();
-                    }
-                });
-            }, 40);
-
-            if (!this.model.get(this.name)) {
-                $iframe.addClass('hidden');
             }
+        });
 
-            let windowWidth = $(window).width();
+        this.once('remove', () => {
+            this.destroySummernote();
+        });
 
+        this.on('inline-edit-off', () => {
+            this.destroySummernote();
+        });
+
+        this.on('render', () => {
+            this.destroySummernote();
+        });
+
+        this.once('remove', () => {
             $(window).off('resize.' + this.cid);
-            $(window).on('resize.' + this.cid, () => {
-                if ($(window).width() !== windowWidth) {
-                    processHeight();
-                    windowWidth = $(window).width();
-                }
-            });
-        },
-
-        enableWysiwygMode: function () {
-            if (!this.$element) {
-                return;
-            }
-
-            this.$element.addClass('hidden');
-            this.$summernote.removeClass('hidden');
-
-            let contents = this.getValueForEdit();
-
-            this.$summernote.html(contents);
-
-            this.$summernote.find('style').remove();
-            this.$summernote.find('link[ref="stylesheet"]').remove();
-
-            let keyMap = Espo.Utils.cloneDeep($.summernote.options.keyMap);
-
-            keyMap.pc['CTRL+K'] = 'espoLink.show';
-            keyMap.mac['CMD+K'] = 'espoLink.show';
-            keyMap.pc['CTRL+DELETE'] = 'removeFormat';
-            keyMap.mac['CMD+DELETE']  = 'removeFormat';
-
-            delete keyMap.pc['CTRL+ENTER'];
-            delete keyMap.mac['CMD+ENTER'];
-            delete keyMap.pc['CTRL+BACKSLASH'];
-            delete keyMap.mac['CMD+BACKSLASH'];
-
-            let toolbar = this.toolbar;
-
-            let lastChangeKeydown = new Date();
-            const changeKeydownInterval = this.changeInterval * 1000;
-
-            let options = {
-                espoView: this,
-                lang: this.getConfig().get('language'),
-                keyMap: keyMap,
-                callbacks: {
-                    onImageUpload: (files) =>  {
-                        let file = files[0];
-
-                        Espo.Ui.notify(this.translate('Uploading...'));
-
-                        this.uploadInlineAttachment(file)
-                            .then(attachment => {
-                                let url = '?entryPoint=attachment&id=' + attachment.id;
-                                this.$summernote.summernote('insertImage', url);
-
-                                Espo.Ui.notify(false);
-                            });
-                    },
-                    onBlur: () => {
-                        this.trigger('change');
-                    },
-                    onKeydown: () => {
-                        if (Date.now() - lastChangeKeydown > changeKeydownInterval) {
-                            this.trigger('change');
-                            lastChangeKeydown = Date.now();
-                        }
-                    },
-                },
-                onCreateLink: function (link) {
-                    return link;
-                },
-                toolbar: toolbar,
-                buttons: this.buttons,
-                dialogsInBody: this.$el,
-                codeviewFilter: true,
-            };
-
-            if (this.height) {
-                options.height = this.height;
-            }
-            else {
-                let $scrollable = this.$el.closest('.modal-body');
-
-                if (!$scrollable.length) {
-                    $scrollable = $(window);
-                }
-
-                this.$scrollable = $scrollable;
-
-                $scrollable.off('scroll.' + this.cid + '-edit');
-                $scrollable.on('scroll.' + this.cid + '-edit', (e) => {
-                    this.onScrollEdit(e);
-                });
-            }
-
-            if (this.minHeight) {
-                options.minHeight = this.minHeight;
-            }
-
-            this.destroySummernote();
-
-            this.$summernote.summernote(options);
-            this.summernoteIsInitialized = true;
-
-            this.$toolbar = this.$el.find('.note-toolbar');
-            this.$area = this.$el.find('.note-editing-area');
-
-            this.$noteEditor = this.$el.find('> .note-editor');
-        },
-
-        focusOnInlineEdit: function () {
-            if (this.$noteEditor)  {
-                this.$summernote.summernote('focus');
-
-                return;
-            }
-
-            Dep.prototype.focusOnInlineEdit.call(this);
-        },
-
-        uploadInlineAttachment: function (file) {
-            return new Promise((resolve, reject) => {
-                this.getModelFactory().create('Attachment', attachment => {
-                    let fileReader = new FileReader();
-
-                    fileReader.onload = (e) => {
-                        attachment.set('name', file.name);
-                        attachment.set('type', file.type);
-                        attachment.set('role', 'Inline Attachment');
-                        attachment.set('global', true);
-                        attachment.set('size', file.size);
-
-                        if (this.model.id) {
-                            attachment.set('relatedId', this.model.id);
-                        }
-
-                        attachment.set('relatedType', this.model.name);
-                        attachment.set('file', e.target.result);
-                        attachment.set('field', this.name);
-
-                        attachment
-                            .save()
-                            .then(() => resolve(attachment))
-                            .catch(() => reject());
-                    };
-
-                    fileReader.readAsDataURL(file);
-                });
-            });
-        },
-
-        destroySummernote: function () {
-            if (this.summernoteIsInitialized && this.$summernote) {
-                this.$summernote.summernote('destroy');
-                this.summernoteIsInitialized = false;
-            }
-        },
-
-        plainToHtml: function (html) {
-            html = html || '';
-
-            return html.replace(/\n/g, '<br>');
-        },
-
-        htmlToPlain: function (text) {
-            text = text || '';
-
-            let value = text
-                .replace(/<br\s*\/?>/mg, '\n')
-                .replace(/<\/p\s*\/?>/mg, '\n\n');
-
-            let $div = $('<div>').html(value);
-
-            $div.find('style').remove();
-            $div.find('link[ref="stylesheet"]').remove();
-
-            value =  $div.text();
-
-            return value;
-        },
-
-        disableWysiwygMode: function () {
-            this.destroySummernote();
-
-            this.$noteEditor = null;
-
-            if (this.$summernote) {
-                this.$summernote.addClass('hidden');
-            }
-
-            this.$element.removeClass('hidden');
 
             if (this.$scrollable) {
                 this.$scrollable.off('scroll.' + this.cid + '-edit');
             }
+        });
+    },
+
+    data: function () {
+        let data = Dep.prototype.data.call(this);
+
+        data.useIframe = this.useIframe;
+        data.isPlain = this.isPlain();
+
+        return data;
+    },
+
+    events: {
+        'click .note-editable': function () {
+            this.fixPopovers();
         },
+        'focus .note-editable': function () {
+            this.$noteEditor.addClass('in-focus');
+        },
+        'blur .note-editable': function () {
+            this.$noteEditor.removeClass('in-focus');
+        },
+    },
 
-        fetch: function () {
-            let data = {};
+    setupToolbar: function () {
+        this.buttons = {};
 
+        this.toolbar = this.params.toolbar || this.toolbar || [
+            ['style', ['style']],
+            ['style', ['bold', 'italic', 'underline', 'clear']],
+            ['fontsize', ['fontsize']],
+            ['color', ['color']],
+            ['para', ['ul', 'ol', 'paragraph']],
+            ['height', ['height']],
+            ['table', ['table', 'espoLink', 'espoImage', 'hr']],
+            ['misc', ['codeview', 'fullscreen']],
+        ];
+
+        if (this.params.toolbar) {
+            return;
+        }
+
+        if (!this.params.attachmentField) {
+            return;
+        }
+
+        this.toolbar.push(['attachment', ['attachment']]);
+
+        this.buttons['attachment'] = () => {
+            let ui = $.summernote.ui;
+
+            let button = ui.button({
+                contents: '<i class="fas fa-paperclip"></i>',
+                tooltip: this.translate('Attach File'),
+                click: () => {
+                    this.attachFile();
+
+                    this.listenToOnce(this.model, 'attachment-uploaded:attachments', () => {
+                        if (this.isEditMode()) {
+                            Espo.Ui.success(this.translate('Attached'));
+                        }
+                    });
+                }
+            });
+
+            return button.render();
+        };
+    },
+
+    isPlain: function () {
+        return this.model.has('isHtml') && !this.model.get('isHtml');
+    },
+
+    fixPopovers: function () {
+        $('body > .note-popover').removeClass('hidden');
+    },
+
+    getValueForDisplay: function () {
+        let value = Dep.prototype.getValueForDisplay.call(this);
+
+        if (this.isPlain()) {
+            return value;
+        }
+
+        return this.sanitizeHtml(value);
+    },
+
+    sanitizeHtml: function (value) {
+        if (value) {
+            if (!this.htmlPurificationDisabled) {
+                value = this.getHelper().sanitizeHtml(value);
+            } else {
+                value = this.sanitizeHtmlLight(value);
+            }
+        }
+
+        return value || '';
+    },
+
+    sanitizeHtmlLight: function (value) {
+       return this.getHelper().moderateSanitizeHtml(value);
+    },
+
+    getValueForEdit: function () {
+        let value = this.model.get(this.name) || '';
+
+        if (this.htmlPurificationForEditDisabled) {
+            return this.sanitizeHtmlLight(value);
+        }
+
+        return this.sanitizeHtml(value);
+    },
+
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
+
+        if (this.isEditMode()) {
+            this.$summernote = this.$el.find('.summernote');
+        }
+
+        let language = this.getConfig().get('language');
+
+        if (!(language in $.summernote.lang)) {
+            $.summernote.lang[language] = this.getLanguage().translate('summernote', 'sets');
+        }
+
+        if (this.isEditMode()) {
             if (!this.model.has('isHtml') || this.model.get('isHtml')) {
-                let code = this.$summernote.summernote('code');
-
-                if (code === '<p><br></p>') {
-                    code = '';
-                }
-
-                let imageTagString = '<img src="' + window.location.origin + window.location.pathname +
-                    '?entryPoint=attachment';
-
-                code = code.replace(
-                    new RegExp(imageTagString.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), 'g'),
-                    '<img src="?entryPoint=attachment'
-                );
-                data[this.name] = code;
+                this.enableWysiwygMode();
             }
             else {
-                data[this.name] = this.$element.val();
-
-                if (this.fetchEmptyValueAsNull) {
-                    if (!data[this.name]) {
-                        data[this.name] = null;
-                    }
-                }
+                this.$element.removeClass('hidden');
             }
+        }
 
-            if (this.model.has('isHtml') && this.hasBodyPlainField) {
-                if (this.model.get('isHtml')) {
-                    data[this.name + 'Plain'] = this.htmlToPlain(data[this.name]);
-                }
-                else {
-                    data[this.name + 'Plain'] = data[this.name];
-                }
-            }
+        if (this.isReadMode()) {
+            this.renderDetail();
+        }
+    },
 
-            return data;
-        },
+    renderDetail: function () {
+        if (this.model.has('isHtml') && !this.model.get('isHtml')) {
+            this.$el.find('.plain').removeClass('hidden');
 
-        onScrollEdit: function (e) {
-            let $target = $(e.target);
-            let toolbarHeight = this.$toolbar.height();
-            let toolbarWidth = this.$toolbar.parent().width();
-            let edgeTop, edgeTopAbsolute;
+            return;
 
-            if ($target.get(0) === window.document) {
-                let $buttonContainer = $target.find('.detail-button-container:not(.hidden)');
-                let offset = $buttonContainer.offset();
+        }
 
-                if (offset) {
-                    edgeTop = offset.top + $buttonContainer.height();
-                    edgeTopAbsolute = edgeTop - $(window).scrollTop();
-                }
-            }
-            else {
-                let offset = $target.offset();
+        if (!this.useIframe) {
+            this.$element = this.$el.find('.html-container');
 
-                if (offset) {
-                    edgeTop = offset.top;
-                    edgeTopAbsolute = edgeTop - $(window).scrollTop();
-                }
-            }
+            return;
+        }
 
-            let top = this.$el.offset().top;
-            let bottom = top + this.$el.height() - toolbarHeight;
+        this.$el.find('iframe').removeClass('hidden');
 
-            let toStick = false;
+        let $iframe = this.$el.find('iframe');
 
-            if (edgeTop > top && bottom > edgeTop) {
-                toStick = true;
-            }
+        let iframeElement = this.iframe = $iframe.get(0);
 
-            if (toStick) {
-                this.$toolbar.css({
-                    top: edgeTopAbsolute + 'px',
-                    width: toolbarWidth + 'px',
-                });
+        if (!iframeElement) {
+            return;
+        }
 
-                this.$toolbar.addClass('sticked');
+        $iframe.on('load', () => {
+            $iframe.contents().find('a').attr('target', '_blank');
+        });
 
-                this.$area.css({
-                    marginTop: toolbarHeight + 'px',
-                    backgroundColor: ''
-                });
+        let documentElement = iframeElement.contentWindow.document;
 
+        let body = this.sanitizeHtml(this.model.get(this.name) || '');
+
+        let useFallbackStylesheet = this.getThemeManager().getParam('isDark') && this.htmlHasColors(body);
+
+        let $iframeContainer = $iframe.parent();
+
+        useFallbackStylesheet ?
+            $iframeContainer.addClass('fallback') :
+            $iframeContainer.removeClass('fallback');
+
+        let linkElement = iframeElement.contentWindow.document.createElement('link');
+
+        linkElement.type = 'text/css';
+        linkElement.rel = 'stylesheet';
+        linkElement.href = this.getBasePath() + (
+            useFallbackStylesheet ?
+            this.getThemeManager().getIframeFallbackStylesheet() :
+            this.getThemeManager().getIframeStylesheet()
+        );
+
+        body = linkElement.outerHTML + body;
+
+        documentElement.write(body);
+        documentElement.close();
+
+        let $body = $iframe.contents().find('html body');
+
+        $body.find('img').each((i, img) => {
+            let $img = $(img);
+
+            if ($img.css('max-width') !== 'none') {
                 return;
             }
 
-            this.$toolbar.css({
-                top: '',
-                width: '',
+            $img.css('max-width', '100%');
+        });
+
+        let $document = $(documentElement);
+
+        // Make dropdowns closed.
+        $document.on('click', () => {
+            let event = new MouseEvent('click', {
+                bubbles: true,
             });
 
-            this.$toolbar.removeClass('sticked');
+            $iframe[0].dispatchEvent(event);
+        });
+
+        // Make notifications & global-search popup closed.
+        $document.on('mouseup', () => {
+            let event = new MouseEvent('mouseup', {
+                bubbles: true,
+            });
+
+            $iframe[0].dispatchEvent(event);
+        });
+
+        // Make shortcuts working.
+        $document.on('keydown', e => {
+            /** @var {KeyboardEvent} originalEvent */
+            let originalEvent = e.originalEvent;
+
+            let event = new KeyboardEvent('keydown', {
+                bubbles: true,
+                code: originalEvent.code,
+                ctrlKey: originalEvent.ctrlKey,
+                metaKey: originalEvent.metaKey,
+                altKey: originalEvent.altKey,
+            });
+
+            $iframe[0].dispatchEvent(event);
+        });
+
+        let processWidth = function () {
+            let bodyElement = $body.get(0);
+
+            if (bodyElement) {
+                if (bodyElement.clientWidth !== iframeElement.scrollWidth) {
+                    iframeElement.style.height = (iframeElement.scrollHeight + 20) + 'px';
+                }
+            }
+        };
+
+        if (useFallbackStylesheet) {
+            $iframeContainer.css({
+                paddingLeft: this.fallbackBodySideMargin + 'px',
+                paddingRight: this.fallbackBodySideMargin + 'px',
+                paddingTop: this.fallbackBodyTopMargin + 'px',
+            });
+        }
+
+        let increaseHeightStep = 10;
+
+        let processIncreaseHeight = function (iteration, previousDiff) {
+            $body.css('height', '');
+
+            iteration = iteration || 0;
+
+            if (iteration > 200) {
+                return;
+            }
+
+            iteration ++;
+
+            let diff = $document.height() - iframeElement.scrollHeight;
+
+            if (typeof previousDiff !== 'undefined') {
+                if (diff === previousDiff) {
+                    $body.css('height', (iframeElement.clientHeight - increaseHeightStep) + 'px');
+                    processWidth();
+
+                    return;
+                }
+            }
+
+            if (diff) {
+                let height = iframeElement.scrollHeight + increaseHeightStep;
+
+                iframeElement.style.height = height + 'px';
+                processIncreaseHeight(iteration, diff);
+            }
+            else {
+                processWidth();
+            }
+        };
+
+        let processBg = () => {
+            let color = iframeElement.contentWindow.getComputedStyle($body.get(0)).backgroundColor;
+
+            $iframeContainer.css({
+                backgroundColor: color,
+            });
+        };
+
+        let processHeight = function (isOnLoad) {
+            if (!isOnLoad) {
+                $iframe.css({
+                    overflowY: 'hidden',
+                    overflowX: 'hidden'
+                });
+
+                iframeElement.style.height = '0px';
+            }
+            else {
+                if (iframeElement.scrollHeight >= $document.height()) {
+                    return;
+                }
+            }
+
+            let $body = $iframe.contents().find('html body');
+            let height = $body.height();
+
+            if (height === 0) {
+                height = $body.children(0).height() + 100;
+            }
+
+            iframeElement.style.height = height + 'px';
+
+            processIncreaseHeight();
+
+            if (!isOnLoad) {
+                $iframe.css({
+                    overflowY: 'hidden',
+                    overflowX: 'scroll'
+                });
+            }
+        };
+
+        $iframe.css({
+            visibility: 'hidden'
+        });
+
+        setTimeout(() => {
+            processHeight();
+
+            $iframe.css({
+                visibility: 'visible'
+            });
+
+            $iframe.on('load', () => {
+                processHeight(true);
+
+                if (useFallbackStylesheet) {
+                    processBg();
+                }
+            });
+        }, 40);
+
+        if (!this.model.get(this.name)) {
+            $iframe.addClass('hidden');
+        }
+
+        let windowWidth = $(window).width();
+
+        $(window).off('resize.' + this.cid);
+        $(window).on('resize.' + this.cid, () => {
+            if ($(window).width() !== windowWidth) {
+                processHeight();
+                windowWidth = $(window).width();
+            }
+        });
+    },
+
+    enableWysiwygMode: function () {
+        if (!this.$element) {
+            return;
+        }
+
+        this.$element.addClass('hidden');
+        this.$summernote.removeClass('hidden');
+
+        let contents = this.getValueForEdit();
+
+        this.$summernote.html(contents);
+
+        this.$summernote.find('style').remove();
+        this.$summernote.find('link[ref="stylesheet"]').remove();
+
+        let keyMap = Espo.Utils.cloneDeep($.summernote.options.keyMap);
+
+        keyMap.pc['CTRL+K'] = 'espoLink.show';
+        keyMap.mac['CMD+K'] = 'espoLink.show';
+        keyMap.pc['CTRL+DELETE'] = 'removeFormat';
+        keyMap.mac['CMD+DELETE']  = 'removeFormat';
+
+        delete keyMap.pc['CTRL+ENTER'];
+        delete keyMap.mac['CMD+ENTER'];
+        delete keyMap.pc['CTRL+BACKSLASH'];
+        delete keyMap.mac['CMD+BACKSLASH'];
+
+        let toolbar = this.toolbar;
+
+        let lastChangeKeydown = new Date();
+        const changeKeydownInterval = this.changeInterval * 1000;
+
+        let options = {
+            espoView: this,
+            lang: this.getConfig().get('language'),
+            keyMap: keyMap,
+            callbacks: {
+                onImageUpload: (files) =>  {
+                    let file = files[0];
+
+                    Espo.Ui.notify(this.translate('Uploading...'));
+
+                    this.uploadInlineAttachment(file)
+                        .then(attachment => {
+                            let url = '?entryPoint=attachment&id=' + attachment.id;
+                            this.$summernote.summernote('insertImage', url);
+
+                            Espo.Ui.notify(false);
+                        });
+                },
+                onBlur: () => {
+                    this.trigger('change');
+                },
+                onKeydown: () => {
+                    if (Date.now() - lastChangeKeydown > changeKeydownInterval) {
+                        this.trigger('change');
+                        lastChangeKeydown = Date.now();
+                    }
+                },
+            },
+            onCreateLink: function (link) {
+                return link;
+            },
+            toolbar: toolbar,
+            buttons: this.buttons,
+            dialogsInBody: this.$el,
+            codeviewFilter: true,
+        };
+
+        if (this.height) {
+            options.height = this.height;
+        }
+        else {
+            let $scrollable = this.$el.closest('.modal-body');
+
+            if (!$scrollable.length) {
+                $scrollable = $(window);
+            }
+
+            this.$scrollable = $scrollable;
+
+            $scrollable.off('scroll.' + this.cid + '-edit');
+            $scrollable.on('scroll.' + this.cid + '-edit', (e) => {
+                this.onScrollEdit(e);
+            });
+        }
+
+        if (this.minHeight) {
+            options.minHeight = this.minHeight;
+        }
+
+        this.destroySummernote();
+
+        this.$summernote.summernote(options);
+        this.summernoteIsInitialized = true;
+
+        this.$toolbar = this.$el.find('.note-toolbar');
+        this.$area = this.$el.find('.note-editing-area');
+
+        this.$noteEditor = this.$el.find('> .note-editor');
+    },
+
+    focusOnInlineEdit: function () {
+        if (this.$noteEditor)  {
+            this.$summernote.summernote('focus');
+
+            return;
+        }
+
+        Dep.prototype.focusOnInlineEdit.call(this);
+    },
+
+    uploadInlineAttachment: function (file) {
+        return new Promise((resolve, reject) => {
+            this.getModelFactory().create('Attachment', attachment => {
+                let fileReader = new FileReader();
+
+                fileReader.onload = (e) => {
+                    attachment.set('name', file.name);
+                    attachment.set('type', file.type);
+                    attachment.set('role', 'Inline Attachment');
+                    attachment.set('global', true);
+                    attachment.set('size', file.size);
+
+                    if (this.model.id) {
+                        attachment.set('relatedId', this.model.id);
+                    }
+
+                    attachment.set('relatedType', this.model.name);
+                    attachment.set('file', e.target.result);
+                    attachment.set('field', this.name);
+
+                    attachment
+                        .save()
+                        .then(() => resolve(attachment))
+                        .catch(() => reject());
+                };
+
+                fileReader.readAsDataURL(file);
+            });
+        });
+    },
+
+    destroySummernote: function () {
+        if (this.summernoteIsInitialized && this.$summernote) {
+            this.$summernote.summernote('destroy');
+            this.summernoteIsInitialized = false;
+        }
+    },
+
+    plainToHtml: function (html) {
+        html = html || '';
+
+        return html.replace(/\n/g, '<br>');
+    },
+
+    htmlToPlain: function (text) {
+        text = text || '';
+
+        let value = text
+            .replace(/<br\s*\/?>/mg, '\n')
+            .replace(/<\/p\s*\/?>/mg, '\n\n');
+
+        let $div = $('<div>').html(value);
+
+        $div.find('style').remove();
+        $div.find('link[ref="stylesheet"]').remove();
+
+        value =  $div.text();
+
+        return value;
+    },
+
+    disableWysiwygMode: function () {
+        this.destroySummernote();
+
+        this.$noteEditor = null;
+
+        if (this.$summernote) {
+            this.$summernote.addClass('hidden');
+        }
+
+        this.$element.removeClass('hidden');
+
+        if (this.$scrollable) {
+            this.$scrollable.off('scroll.' + this.cid + '-edit');
+        }
+    },
+
+    fetch: function () {
+        let data = {};
+
+        if (!this.model.has('isHtml') || this.model.get('isHtml')) {
+            let code = this.$summernote.summernote('code');
+
+            if (code === '<p><br></p>') {
+                code = '';
+            }
+
+            let imageTagString = '<img src="' + window.location.origin + window.location.pathname +
+                '?entryPoint=attachment';
+
+            code = code.replace(
+                new RegExp(imageTagString.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), 'g'),
+                '<img src="?entryPoint=attachment'
+            );
+            data[this.name] = code;
+        }
+        else {
+            data[this.name] = this.$element.val();
+
+            if (this.fetchEmptyValueAsNull) {
+                if (!data[this.name]) {
+                    data[this.name] = null;
+                }
+            }
+        }
+
+        if (this.model.has('isHtml') && this.hasBodyPlainField) {
+            if (this.model.get('isHtml')) {
+                data[this.name + 'Plain'] = this.htmlToPlain(data[this.name]);
+            }
+            else {
+                data[this.name + 'Plain'] = data[this.name];
+            }
+        }
+
+        return data;
+    },
+
+    onScrollEdit: function (e) {
+        let $target = $(e.target);
+        let toolbarHeight = this.$toolbar.height();
+        let toolbarWidth = this.$toolbar.parent().width();
+        let edgeTop, edgeTopAbsolute;
+
+        if ($target.get(0) === window.document) {
+            let $buttonContainer = $target.find('.detail-button-container:not(.hidden)');
+            let offset = $buttonContainer.offset();
+
+            if (offset) {
+                edgeTop = offset.top + $buttonContainer.height();
+                edgeTopAbsolute = edgeTop - $(window).scrollTop();
+            }
+        }
+        else {
+            let offset = $target.offset();
+
+            if (offset) {
+                edgeTop = offset.top;
+                edgeTopAbsolute = edgeTop - $(window).scrollTop();
+            }
+        }
+
+        let top = this.$el.offset().top;
+        let bottom = top + this.$el.height() - toolbarHeight;
+
+        let toStick = false;
+
+        if (edgeTop > top && bottom > edgeTop) {
+            toStick = true;
+        }
+
+        if (toStick) {
+            this.$toolbar.css({
+                top: edgeTopAbsolute + 'px',
+                width: toolbarWidth + 'px',
+            });
+
+            this.$toolbar.addClass('sticked');
 
             this.$area.css({
-                marginTop: '',
-            });
-        },
-
-        attachFile: function () {
-            let $form = this.$el.closest('.record');
-
-            $form.find('.field[data-name="' + this.params.attachmentField + '"] input.file').click();
-        },
-
-       initEspoPlugin: function () {
-           let langSets = this.getLanguage().get('Global', 'sets', 'summernote') || {
-                image: {},
-                link: {},
-                video: {},
-            };
-
-            $.extend($.summernote.options, {
-                espoImage: {
-                    icon: '<i class="note-icon-picture"/>',
-                    tooltip: langSets.image.image,
-                },
-                espoLink: {
-                    icon: '<i class="note-icon-link"/>',
-                    tooltip: langSets.link.link,
-                },
+                marginTop: toolbarHeight + 'px',
+                backgroundColor: ''
             });
 
-            $.extend($.summernote.plugins, {
-                'espoImage': function (context) {
-                    let ui = $.summernote.ui;
-                    let options = context.options;
-                    let self = options.espoView;
-                    let lang = options.langInfo;
+            return;
+        }
 
-                    if (!self) {
-                        return;
-                    }
+        this.$toolbar.css({
+            top: '',
+            width: '',
+        });
 
-                    context.memo('button.espoImage', () => {
-                        let button = ui.button({
-                            contents: options.espoImage.icon,
-                            tooltip: options.espoImage.tooltip,
-                            click: function () {
-                                context.invoke('espoImage.show');
-                            },
-                        });
+        this.$toolbar.removeClass('sticked');
 
-                        return button.render();
+        this.$area.css({
+            marginTop: '',
+        });
+    },
+
+    attachFile: function () {
+        let $form = this.$el.closest('.record');
+
+        $form.find('.field[data-name="' + this.params.attachmentField + '"] input.file').click();
+    },
+
+    initEspoPlugin: function () {
+        let langSets = this.getLanguage().get('Global', 'sets', 'summernote') || {
+            image: {},
+            link: {},
+            video: {},
+        };
+
+        $.extend($.summernote.options, {
+            espoImage: {
+                icon: '<i class="note-icon-picture"/>',
+                tooltip: langSets.image.image,
+            },
+            espoLink: {
+                icon: '<i class="note-icon-link"/>',
+                tooltip: langSets.link.link,
+            },
+        });
+
+        $.extend($.summernote.plugins, {
+            'espoImage': function (context) {
+                let ui = $.summernote.ui;
+                let options = context.options;
+                let self = options.espoView;
+                let lang = options.langInfo;
+
+                if (!self) {
+                    return;
+                }
+
+                context.memo('button.espoImage', () => {
+                    let button = ui.button({
+                        contents: options.espoImage.icon,
+                        tooltip: options.espoImage.tooltip,
+                        click: function () {
+                            context.invoke('espoImage.show');
+                        },
                     });
 
-                    this.initialize = function () {};
+                    return button.render();
+                });
 
-                    this.destroy = function () {
-                        if (!self) {
-                            return;
-                        }
-
-                        self.clearView('insertImageDialog');
-                    };
-
-                    this.show = function () {
-                        self.createView('insertImageDialog', 'views/wysiwyg/modals/insert-image', {
-                            labels: {
-                                insert: lang.image.insert,
-                                url: lang.image.url,
-                                selectFromFiles: lang.image.selectFromFiles,
-                            },
-                        }, view => {
-                            view.render();
-
-                            self.listenToOnce(view, 'upload', (target) => {
-                                self.$summernote.summernote('insertImagesOrCallback', target);
-                            });
-
-                            self.listenToOnce(view, 'insert', (target) => {
-                                self.$summernote.summernote('insertImage', target);
-                            });
-
-                            self.listenToOnce(view, 'close', () => {
-                                self.clearView('insertImageDialog');
-                                self.fixPopovers();
-                            });
-                        });
-                    };
-                },
-
-                'linkDialog': function (context) {
-                    let options = context.options;
-                    let self = options.espoView;
-                    let lang = options.langInfo;
+                this.initialize = function () {};
 
+                this.destroy = function () {
                     if (!self) {
                         return;
                     }
 
-                    this.show = function () {
-                        let linkInfo = context.invoke('editor.getLinkInfo');
+                    self.clearView('insertImageDialog');
+                };
 
-                        self.createView('dialogInsertLink', 'views/wysiwyg/modals/insert-link', {
-                            labels: {
-                                insert: lang.link.insert,
-                                openInNewWindow: lang.link.openInNewWindow,
-                                url: lang.link.url,
-                                textToDisplay: lang.link.textToDisplay,
-                            },
-                            linkInfo: linkInfo,
-                        }, view => {
-                            view.render();
+                this.show = function () {
+                    self.createView('insertImageDialog', 'views/wysiwyg/modals/insert-image', {
+                        labels: {
+                            insert: lang.image.insert,
+                            url: lang.image.url,
+                            selectFromFiles: lang.image.selectFromFiles,
+                        },
+                    }, view => {
+                        view.render();
 
-                            self.listenToOnce(view, 'insert', (data) => {
-                                self.$summernote.summernote('createLink', data);
-                            });
-
-                            self.listenToOnce(view, 'close', () => {
-                                self.clearView('dialogInsertLink');
-                                self.fixPopovers();
-                            });
-                        });
-                    };
-                },
-
-                'espoLink': function (context) {
-                    let ui = $.summernote.ui;
-                    let options = context.options;
-                    let self = options.espoView;
-                    let lang = options.langInfo;
-
-                    if (!self) {
-                        return;
-                    }
-
-                    let isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
-
-                    context.memo('button.espoLink', function () {
-                        let button = ui.button({
-                            contents: options.espoLink.icon,
-                            tooltip: options.espoLink.tooltip + ' (' + (isMacLike ? 'CMD+K': 'CTRL+K') +')',
-                            click: function (e) {
-                                context.invoke('espoLink.show');
-                            },
+                        self.listenToOnce(view, 'upload', (target) => {
+                            self.$summernote.summernote('insertImagesOrCallback', target);
                         });
 
-                        return button.render();
+                        self.listenToOnce(view, 'insert', (target) => {
+                            self.$summernote.summernote('insertImage', target);
+                        });
+
+                        self.listenToOnce(view, 'close', () => {
+                            self.clearView('insertImageDialog');
+                            self.fixPopovers();
+                        });
+                    });
+                };
+            },
+
+            'linkDialog': function (context) {
+                let options = context.options;
+                let self = options.espoView;
+                let lang = options.langInfo;
+
+                if (!self) {
+                    return;
+                }
+
+                this.show = function () {
+                    let linkInfo = context.invoke('editor.getLinkInfo');
+
+                    self.createView('dialogInsertLink', 'views/wysiwyg/modals/insert-link', {
+                        labels: {
+                            insert: lang.link.insert,
+                            openInNewWindow: lang.link.openInNewWindow,
+                            url: lang.link.url,
+                            textToDisplay: lang.link.textToDisplay,
+                        },
+                        linkInfo: linkInfo,
+                    }, view => {
+                        view.render();
+
+                        self.listenToOnce(view, 'insert', (data) => {
+                            self.$summernote.summernote('createLink', data);
+                        });
+
+                        self.listenToOnce(view, 'close', () => {
+                            self.clearView('dialogInsertLink');
+                            self.fixPopovers();
+                        });
+                    });
+                };
+            },
+
+            'espoLink': function (context) {
+                let ui = $.summernote.ui;
+                let options = context.options;
+                let self = options.espoView;
+                let lang = options.langInfo;
+
+                if (!self) {
+                    return;
+                }
+
+                let isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+
+                context.memo('button.espoLink', function () {
+                    let button = ui.button({
+                        contents: options.espoLink.icon,
+                        tooltip: options.espoLink.tooltip + ' (' + (isMacLike ? 'CMD+K': 'CTRL+K') +')',
+                        click: function () {
+                            context.invoke('espoLink.show');
+                        },
                     });
 
-                    this.initialize = function () {
-                        this.$modalBody = self.$el.closest('.modal-body');
+                    return button.render();
+                });
 
-                        this.isInModal = this.$modalBody.length > 0;
-                    };
+                this.initialize = function () {
+                    this.$modalBody = self.$el.closest('.modal-body');
 
-                    this.destroy = function () {
-                        if (!self) {
-                            return;
-                        }
-
-                        self.clearView('dialogInsertLink');
-                    };
-
-                    this.show = function () {
-                        let linkInfo = context.invoke('editor.getLinkInfo');
-
-                        let container = this.isInModal ? this.$modalBody.get(0) : window;
-
-                        self.createView('dialogInsertLink', 'views/wysiwyg/modals/insert-link', {
-                            labels: {
-                                insert: lang.link.insert,
-                                openInNewWindow: lang.link.openInNewWindow,
-                                url: lang.link.url,
-                                textToDisplay: lang.link.textToDisplay,
-                            },
-                            linkInfo: linkInfo,
-                        }, (view) => {
-                            view.render();
-
-                            self.listenToOnce(view, 'insert', (data) => {
-                                let scrollY = ('scrollY' in container) ?
-                                    container.scrollY :
-                                    container.scrollTop;
-
-                                self.$summernote.summernote('createLink', data);
-
-                                setTimeout(() => container.scroll(0, scrollY), 20);
-                            });
-
-                            self.listenToOnce(view, 'close', () => {
-                                self.clearView('dialogInsertLink');
-                                self.fixPopovers();
-                            });
-                        });
-                    };
-                },
-
-                'fullscreen': function (context) {
-                    let ui = $.summernote.ui;
-                    let options = context.options;
-                    let self = options.espoView;
-                    let lang = options.langInfo;
+                    this.isInModal = this.$modalBody.length > 0;
+                };
 
+                this.destroy = function () {
                     if (!self) {
                         return;
                     }
 
-                    this.$window = $(window);
-                    this.$scrollbar = $('html, body');
+                    self.clearView('dialogInsertLink');
+                };
 
-                    this.initialize = function () {
-                        this.$editor = context.layoutInfo.editor;
-                        this.$toolbar = context.layoutInfo.toolbar;
-                        this.$editable = context.layoutInfo.editable;
-                        this.$codable = context.layoutInfo.codable;
+                this.show = function () {
+                    let linkInfo = context.invoke('editor.getLinkInfo');
 
-                        this.$modal = self.$el.closest('.modal');
-                        this.isInModal = this.$modal.length > 0;
-                    };
+                    let container = this.isInModal ? this.$modalBody.get(0) : window;
 
-                    this.resizeTo = function (size) {
-                        this.$editable.css('height', size.h);
-                        this.$codable.css('height', size.h);
-                        if (this.$codable.data('cmeditor')) {
-                            this.$codable.data('cmeditor').setsize(null, size.h);
-                        }
-                    };
+                    self.createView('dialogInsertLink', 'views/wysiwyg/modals/insert-link', {
+                        labels: {
+                            insert: lang.link.insert,
+                            openInNewWindow: lang.link.openInNewWindow,
+                            url: lang.link.url,
+                            textToDisplay: lang.link.textToDisplay,
+                        },
+                        linkInfo: linkInfo,
+                    }, (view) => {
+                        view.render();
 
-                    this.onResize = function () {
-                        this.resizeTo({
-                            h: this.$window.height() - this.$toolbar.outerHeight(),
+                        self.listenToOnce(view, 'insert', (data) => {
+                            let scrollY = ('scrollY' in container) ?
+                                container.scrollY :
+                                container.scrollTop;
+
+                            self.$summernote.summernote('createLink', data);
+
+                            setTimeout(() => container.scroll(0, scrollY), 20);
                         });
-                    };
 
-                    this.isFullscreen = function () {
-                        return this.$editor.hasClass('fullscreen');
-                    };
+                        self.listenToOnce(view, 'close', () => {
+                            self.clearView('dialogInsertLink');
+                            self.fixPopovers();
+                        });
+                    });
+                };
+            },
 
-                    this.destroy = function () {
-                        this.$window.off('resize.summernote' + self.cid);
+            'fullscreen': function (context) {
+                let options = context.options;
+                let self = options.espoView;
+                //let lang = options.langInfo;
+                //let ui = $.summernote.ui;
+
+                if (!self) {
+                    return;
+                }
+
+                this.$window = $(window);
+                this.$scrollbar = $('html, body');
+
+                this.initialize = function () {
+                    this.$editor = context.layoutInfo.editor;
+                    this.$toolbar = context.layoutInfo.toolbar;
+                    this.$editable = context.layoutInfo.editable;
+                    this.$codable = context.layoutInfo.codable;
+
+                    this.$modal = self.$el.closest('.modal');
+                    this.isInModal = this.$modal.length > 0;
+                };
+
+                this.resizeTo = function (size) {
+                    this.$editable.css('height', size.h);
+                    this.$codable.css('height', size.h);
+
+                    if (this.$codable.data('cmeditor')) {
+                        this.$codable.data('cmeditor').setsize(null, size.h);
+                    }
+                };
+
+                this.onResize = function () {
+                    this.resizeTo({
+                        h: this.$window.height() - this.$toolbar.outerHeight(),
+                    });
+                };
+
+                this.isFullscreen = function () {
+                    return this.$editor.hasClass('fullscreen');
+                };
+
+                this.destroy = function () {
+                    this.$window.off('resize.summernote' + self.cid);
+
+                    if (this.isInModal) {
+                        this.$modal.css('overflow-y', '');
+                    }
+                    else {
+                        this.$scrollbar.css('overflow', '');
+                    }
+                };
+
+                this.toggle = function () {
+                    this.$editor.toggleClass('fullscreen');
+
+                    if (this.isFullscreen()) {
+                        this.$editable.data('orgHeight', this.$editable.css('height'));
+                        this.$editable.data('orgMaxHeight', this.$editable.css('maxHeight'));
+                        this.$editable.css('maxHeight', '');
+
+                        this.$window
+                            .on('resize.summernote' + self.cid, this.onResize.bind(this))
+                            .trigger('resize');
+
+                        if (this.isInModal) {
+                            this.$modal.css('overflow-y', 'hidden');
+                        }
+                        else {
+                            this.$scrollbar.css('overflow', 'hidden');
+                        }
+
+                        this._isFullscreen = true;
+                    }
+                    else {
+                        this.$window.off('resize.summernote'  + self.cid);
+                        this.resizeTo({ h: this.$editable.data('orgHeight') });
+                        this.$editable.css('maxHeight', this.$editable.css('orgMaxHeight'));
 
                         if (this.isInModal) {
                             this.$modal.css('overflow-y', '');
-                        }
-                        else {
+                        } else {
                             this.$scrollbar.css('overflow', '');
                         }
-                    };
 
-                    this.toggle = function () {
-                        this.$editor.toggleClass('fullscreen');
+                        this._isFullscreen = false;
+                    }
 
-                        if (this.isFullscreen()) {
-                            this.$editable.data('orgHeight', this.$editable.css('height'));
-                            this.$editable.data('orgMaxHeight', this.$editable.css('maxHeight'));
-                            this.$editable.css('maxHeight', '');
+                    context.invoke('toolbar.updateFullscreen', this.isFullscreen());
+                };
+            },
+        });
+    },
 
-                            this.$window
-                                .on('resize.summernote' + self.cid, this.onResize.bind(this))
-                                .trigger('resize');
+    htmlHasColors: function (string) {
+        if (~string.indexOf('background-color:')) {
+            return true;
+        }
 
-                            if (this.isInModal) {
-                                this.$modal.css('overflow-y', 'hidden');
-                            }
-                            else {
-                                this.$scrollbar.css('overflow', 'hidden');
-                            }
+        if (~string.indexOf('color:')) {
+            return true;
+        }
 
-                            this._isFullscreen = true;
-                        }
-                        else {
-                            this.$window.off('resize.summernote'  + self.cid);
-                            this.resizeTo({ h: this.$editable.data('orgHeight') });
-                            this.$editable.css('maxHeight', this.$editable.css('orgMaxHeight'));
+        if (~string.indexOf('<font color="')) {
+            return true;
+        }
 
-                            if (this.isInModal) {
-                                this.$modal.css('overflow-y', '');
-                            } else {
-                                this.$scrollbar.css('overflow', '');
-                            }
-
-                            this._isFullscreen = false;
-                        }
-
-                        context.invoke('toolbar.updateFullscreen', this.isFullscreen());
-                    };
-                },
-            });
-        },
-
-        htmlHasColors: function (string) {
-            if (~string.indexOf('background-color:')) {
-                return true;
-            }
-
-            if (~string.indexOf('color:')) {
-                return true;
-            }
-
-            if (~string.indexOf('<font color="')) {
-                return true;
-            }
-
-            return false;
-        },
-    });
+        return false;
+    },
 });
diff --git a/client/src/views/header.js b/client/src/views/header.js
index b27cef00b6..0f6019a2ed 100644
--- a/client/src/views/header.js
+++ b/client/src/views/header.js
@@ -32,7 +32,7 @@ define('views/header', ['view'], function (Dep) {
      * @class
      * @name Class
      * @memberOf module:views/header
-     * @extends module:view.Class
+     * @extends module:view
      */
     return Dep.extend(/** @lends module:views/header.Class# */{
 
diff --git a/client/src/views/import-error/fields/validation-failures.js b/client/src/views/import-error/fields/validation-failures.js
index 3eee2bde39..77cd5c25a9 100644
--- a/client/src/views/import-error/fields/validation-failures.js
+++ b/client/src/views/import-error/fields/validation-failures.js
@@ -31,7 +31,7 @@ define('views/import-error/fields/validation-failures', ['views/fields/base'], (
     /**
      * @class
      * @name Class
-     * @extends module:views/fields/base.Class
+     * @extends module:views/fields/base
      * @memberOf module:views/import-error/fields/validation-failures
      */
     return Dep.extend(/** @lends module:views/import-error/fields/validation-failures.Class# */{
diff --git a/client/src/views/list-related.js b/client/src/views/list-related.js
index 322796d66f..6a32ad2297 100644
--- a/client/src/views/list-related.js
+++ b/client/src/views/list-related.js
@@ -26,816 +26,816 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/list-related', ['views/main', 'search-manager'],
-function (Dep, /** typeof module:search-manager.Class */SearchManager) {
+/** @module module:views/list-related */
+
+import Dep from 'views/main';
+import SearchManager from 'search-manager';
+
+/**
+ * A list-related view page.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/main
+ */
+export default Dep.extend(/** @lends Class# */{
 
     /**
-     * A list-related view page.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/main.Class
-     * @memberOf module:views/list
+     * @inheritDoc
      */
-    return Dep.extend(/** @lends module:views/list-related.Class# */{
+    template: 'list',
 
-        /**
-         * @inheritDoc
-         */
-        template: 'list',
+    /**
+     * @inheritDoc
+     */
+    scope: null,
 
-        /**
-         * @inheritDoc
-         */
-        scope: null,
+    /**
+     * @inheritDoc
+     */
+    name: 'ListRelated',
 
-        /**
-         * @inheritDoc
-         */
-        name: 'ListRelated',
+    /**
+     * A header view name.
+     *
+     * @type {string}
+     */
+    headerView: 'views/header',
 
-        /**
-         * A header view name.
-         *
-         * @type {string}
-         */
-        headerView: 'views/header',
+    /**
+     * A search view name.
+     *
+     * @type {string}
+     */
+    searchView: 'views/record/search',
 
-        /**
-         * A search view name.
-         *
-         * @type {string}
-         */
-        searchView: 'views/record/search',
+    /**
+     * A record/list view name.
+     *
+     * @type {string}
+     */
+    recordView: 'views/record/list',
 
-        /**
-         * A record/list view name.
-         *
-         * @type {string}
-         */
-        recordView: 'views/record/list',
+    /**
+     * Has a search panel.
+     *
+     * @type {boolean}
+     */
+    searchPanel: true,
 
-        /**
-         * Has a search panel.
-         *
-         * @type {boolean}
-         */
-        searchPanel: true,
+    /**
+     * @type {module:search-manager}
+     */
+    searchManager: null,
 
-        /**
-         * @type {module:search-manager.Class}
-         */
-        searchManager: null,
+    /**
+     * @inheritDoc
+     */
+    optionsToPass: [],
 
-        /**
-         * @inheritDoc
-         */
-        optionsToPass: [],
+    /**
+     * Use a current URL as a root URL when open a record. To be able to return to the same URL.
+     */
+    keepCurrentRootUrl: false,
 
-        /**
-         * Use a current URL as a root URL when open a record. To be able to return to the same URL.
-         */
-        keepCurrentRootUrl: false,
+    /**
+     * A view mode.
+     *
+     * @type {string}
+     */
+    viewMode: null,
 
-        /**
-         * A view mode.
-         *
-         * @type {string}
-         */
-        viewMode: null,
+    /**
+     * An available view mode list.
+     *
+     * @type {string[]}
+     */
+    viewModeList: null,
 
-        /**
-         * An available view mode list.
-         *
-         * @type {string[]}
-         */
-        viewModeList: null,
+    /**
+     * A default view mode.
+     *
+     * @type {string}
+     */
+    defaultViewMode: 'list',
 
-        /**
-         * A default view mode.
-         *
-         * @type {string}
-         */
-        defaultViewMode: 'list',
+    /**
+     * @const
+     */
+    MODE_LIST: 'list',
 
-        /**
-         * @const
-         */
-        MODE_LIST: 'list',
+    /**
+     * @private
+     */
+    rowActionsView: 'views/record/row-actions/relationship',
 
-        /**
-         * @private
-         */
-        rowActionsView: 'views/record/row-actions/relationship',
+    /**
+     * A create button.
+     *
+     * @protected
+     */
+    createButton: true,
 
-        /**
-         * A create button.
-         *
-         * @protected
-         */
-        createButton: true,
+    /**
+     * @protected
+     */
+    unlinkDisabled: false,
 
-        /**
-         * @protected
-         */
-        unlinkDisabled: false,
+    /**
+     * @protected
+     */
+    filtersDisabled: false,
 
-        /**
-         * @protected
-         */
-        filtersDisabled: false,
-
-        /**
-         * @inheritDoc
-         */
-        shortcutKeys: {
-            'Control+Space': function (e) {
-                this.handleShortcutKeyCtrlSpace(e);
-            },
-            'Control+Slash': function (e) {
-                this.handleShortcutKeyCtrlSlash(e);
-            },
-            'Control+Comma': function (e) {
-                this.handleShortcutKeyCtrlComma(e);
-            },
-            'Control+Period': function (e) {
-                this.handleShortcutKeyCtrlPeriod(e);
-            },
+    /**
+     * @inheritDoc
+     */
+    shortcutKeys: {
+        'Control+Space': function (e) {
+            this.handleShortcutKeyCtrlSpace(e);
         },
+        'Control+Slash': function (e) {
+            this.handleShortcutKeyCtrlSlash(e);
+        },
+        'Control+Comma': function (e) {
+            this.handleShortcutKeyCtrlComma(e);
+        },
+        'Control+Period': function (e) {
+            this.handleShortcutKeyCtrlPeriod(e);
+        },
+    },
 
-        /**
-         * @inheritDoc
-         */
-        setup: function () {
-            this.link = this.options.link;
+    /**
+     * @inheritDoc
+     */
+    setup: function () {
+        this.link = this.options.link;
 
-            if (!this.link) {
-                console.error(`Link not passed.`);
-                throw new Error();
-            }
+        if (!this.link) {
+            console.error(`Link not passed.`);
+            throw new Error();
+        }
 
-            if (!this.model) {
-                console.error(`Model not passed.`);
-                throw new Error();
-            }
+        if (!this.model) {
+            console.error(`Model not passed.`);
+            throw new Error();
+        }
 
-            if (!this.collection) {
-                console.error(`Collection not passed.`);
-                throw new Error();
-            }
+        if (!this.collection) {
+            console.error(`Collection not passed.`);
+            throw new Error();
+        }
 
-            this.panelDefs = this.getMetadata().get(['clientDefs', this.scope, 'relationshipPanels', this.link]) || {};
+        this.panelDefs = this.getMetadata().get(['clientDefs', this.scope, 'relationshipPanels', this.link]) || {};
 
-            if (this.panelDefs.fullFormDisabled) {
-                console.error(`Full-form disabled.`);
-                throw new Error();
-            }
+        if (this.panelDefs.fullFormDisabled) {
+            console.error(`Full-form disabled.`);
+            throw new Error();
+        }
 
-            this.collection.maxSize = this.getConfig().get('recordsPerPage') || this.collection.maxSize;
-            this.collectionUrl = this.collection.url;
-            this.collectionMaxSize = this.collection.maxSize;
+        this.collection.maxSize = this.getConfig().get('recordsPerPage') || this.collection.maxSize;
+        this.collectionUrl = this.collection.url;
+        this.collectionMaxSize = this.collection.maxSize;
 
-            this.foreignScope = this.collection.entityType;
+        this.foreignScope = this.collection.entityType;
 
-            this.setupModes();
-            this.setViewMode(this.viewMode);
+        this.setupModes();
+        this.setViewMode(this.viewMode);
 
-            if (this.getMetadata().get(['clientDefs', this.foreignScope, 'searchPanelDisabled'])) {
+        if (this.getMetadata().get(['clientDefs', this.foreignScope, 'searchPanelDisabled'])) {
+            this.searchPanel = false;
+        }
+
+        if (this.getUser().isPortal()) {
+            if (this.getMetadata().get(['clientDefs', this.foreignScope, 'searchPanelInPortalDisabled'])) {
                 this.searchPanel = false;
             }
+        }
 
-            if (this.getUser().isPortal()) {
-                if (this.getMetadata().get(['clientDefs', this.foreignScope, 'searchPanelInPortalDisabled'])) {
-                    this.searchPanel = false;
-                }
-            }
+        if (this.getMetadata().get(['clientDefs', this.foreignScope, 'createDisabled'])) {
+            this.createButton = false;
+        }
 
-            if (this.getMetadata().get(['clientDefs', this.foreignScope, 'createDisabled'])) {
-                this.createButton = false;
-            }
+        if (
+            this.panelDefs.create === false ||
+            this.panelDefs.createDisabled ||
+            this.panelDefs.createAction
+        ) {
+            this.createButton = false;
+        }
 
-            if (
-                this.panelDefs.create === false ||
-                this.panelDefs.createDisabled ||
-                this.panelDefs.createAction
-            ) {
-                this.createButton = false;
-            }
+        this.entityType = this.collection.name;
 
-            this.entityType = this.collection.name;
+        this.headerView = this.options.headerView || this.headerView;
+        this.recordView = this.options.recordView || this.recordView;
+        this.searchView = this.options.searchView || this.searchView;
 
-            this.headerView = this.options.headerView || this.headerView;
-            this.recordView = this.options.recordView || this.recordView;
-            this.searchView = this.options.searchView || this.searchView;
+        this.setupHeader();
 
-            this.setupHeader();
+        this.defaultOrderBy = this.panelDefs.orderBy || this.collection.orderBy;
+        this.defaultOrder = this.panelDefs.orderDirection || this.collection.order;
 
-            this.defaultOrderBy = this.panelDefs.orderBy || this.collection.orderBy;
-            this.defaultOrder = this.panelDefs.orderDirection || this.collection.order;
+        if (this.panelDefs.orderBy && !this.panelDefs.orderDirection) {
+            this.defaultOrder = 'asc';
+        }
 
-            if (this.panelDefs.orderBy && !this.panelDefs.orderDirection) {
-                this.defaultOrder = 'asc';
-            }
+        this.collection.setOrder(this.defaultOrderBy, this.defaultOrder, true);
 
-            this.collection.setOrder(this.defaultOrderBy, this.defaultOrder, true);
+        if (this.searchPanel) {
+            this.setupSearchManager();
+        }
 
-            if (this.searchPanel) {
-                this.setupSearchManager();
-            }
+        this.setupSorting();
 
-            this.setupSorting();
+        if (this.searchPanel) {
+            this.setupSearchPanel();
+        }
 
-            if (this.searchPanel) {
-                this.setupSearchPanel();
-            }
+        if (this.createButton) {
+            this.setupCreateButton();
+        }
 
-            if (this.createButton) {
-                this.setupCreateButton();
-            }
+        if (this.options.params && this.options.params.fromAdmin) {
+            this.keepCurrentRootUrl = true;
+        }
 
-            if (this.options.params && this.options.params.fromAdmin) {
-                this.keepCurrentRootUrl = true;
-            }
+        this.getHelper().processSetupHandlers(this, 'list');
+    },
 
-            this.getHelper().processSetupHandlers(this, 'list');
-        },
+    /**
+     * Set up modes.
+     */
+    setupModes: function () {
+        this.defaultViewMode = this.options.defaultViewMode ||
+            this.getMetadata().get(['clientDefs', this.foreignScope, 'listRelatedDefaultViewMode']) ||
+            this.defaultViewMode;
 
-        /**
-         * Set up modes.
-         */
-        setupModes: function () {
-            this.defaultViewMode = this.options.defaultViewMode ||
-                this.getMetadata().get(['clientDefs', this.foreignScope, 'listRelatedDefaultViewMode']) ||
-                this.defaultViewMode;
+        this.viewMode = this.viewMode || this.defaultViewMode;
 
-            this.viewMode = this.viewMode || this.defaultViewMode;
+        let viewModeList = this.options.viewModeList ||
+            this.viewModeList ||
+            this.getMetadata().get(['clientDefs', this.foreignScope, 'listRelatedViewModeList']);
 
-            let viewModeList = this.options.viewModeList ||
-                this.viewModeList ||
-                this.getMetadata().get(['clientDefs', this.foreignScope, 'listRelatedViewModeList']);
+        this.viewModeList = viewModeList ? viewModeList : [this.MODE_LIST];
 
-            this.viewModeList = viewModeList ? viewModeList : [this.MODE_LIST];
+        if (this.viewModeList.length > 1) {
+            this.viewMode = null;
 
-            if (this.viewModeList.length > 1) {
-                this.viewMode = null;
+            let modeKey = 'listRelatedViewMode' + this.scope + this.link;
 
-                let modeKey = 'listRelatedViewMode' + this.scope + this.link;
+            if (this.getStorage().has('state', modeKey)) {
+                let storedViewMode = this.getStorage().get('state', modeKey);
 
-                if (this.getStorage().has('state', modeKey)) {
-                    let storedViewMode = this.getStorage().get('state', modeKey);
-
-                    if (storedViewMode) {
-                        if (~this.viewModeList.indexOf(storedViewMode)) {
-                            this.viewMode = storedViewMode;
-                        }
+                if (storedViewMode) {
+                    if (~this.viewModeList.indexOf(storedViewMode)) {
+                        this.viewMode = storedViewMode;
                     }
                 }
-
-                if (!this.viewMode) {
-                    this.viewMode = this.defaultViewMode;
-                }
             }
-        },
 
-        /**
-         * Set up a header.
-         */
-        setupHeader: function () {
-            this.createView('header', this.headerView, {
-                collection: this.collection,
-                el: '#main > .page-header',
-                scope: this.scope,
-                isXsSingleRow: true,
-            });
-        },
+            if (!this.viewMode) {
+                this.viewMode = this.defaultViewMode;
+            }
+        }
+    },
 
-        /**
-         * Set up a create button.
-         */
-        setupCreateButton: function () {
-            this.menu.buttons.unshift({
-                action: 'quickCreate',
-                iconHtml: '<span class="fas fa-plus fa-sm"></span>',
-                text: this.translate('Create ' + this.foreignScope, 'labels', this.foreignScope),
-                style: 'default',
-                acl: 'create',
-                aclScope: this.foreignScope,
-                title: 'Ctrl+Space',
-            });
-        },
+    /**
+     * Set up a header.
+     */
+    setupHeader: function () {
+        this.createView('header', this.headerView, {
+            collection: this.collection,
+            el: '#main > .page-header',
+            scope: this.scope,
+            isXsSingleRow: true,
+        });
+    },
 
-        /**
-         * Set up a search panel.
-         *
-         * @protected
-         */
-        setupSearchPanel: function () {
-            this.createSearchView();
-        },
+    /**
+     * Set up a create button.
+     */
+    setupCreateButton: function () {
+        this.menu.buttons.unshift({
+            action: 'quickCreate',
+            iconHtml: '<span class="fas fa-plus fa-sm"></span>',
+            text: this.translate('Create ' + this.foreignScope, 'labels', this.foreignScope),
+            style: 'default',
+            acl: 'create',
+            aclScope: this.foreignScope,
+            title: 'Ctrl+Space',
+        });
+    },
 
-        /**
-         * Create a search view.
-         *
-         * @return {Promise<module:view.Class>}
-         * @protected
-         */
-        createSearchView: function () {
-            let filterList = Espo.Utils
-                .clone(this.getMetadata().get(['clientDefs', this.foreignScope, 'filterList']) || []);
+    /**
+     * Set up a search panel.
+     *
+     * @protected
+     */
+    setupSearchPanel: function () {
+        this.createSearchView();
+    },
 
-            if (this.panelDefs.filterList) {
-                this.panelDefs.filterList.forEach(item1 => {
-                    let isFound = false;
-                    let name1 = item1.name || item1;
+    /**
+     * Create a search view.
+     *
+     * @return {Promise<module:view>}
+     * @protected
+     */
+    createSearchView: function () {
+        let filterList = Espo.Utils
+            .clone(this.getMetadata().get(['clientDefs', this.foreignScope, 'filterList']) || []);
 
-                    if (!name1 || name1 === 'all') {
-                        return;
-                    }
+        if (this.panelDefs.filterList) {
+            this.panelDefs.filterList.forEach(item1 => {
+                let isFound = false;
+                let name1 = item1.name || item1;
 
-                    filterList.forEach(item2 => {
-                        let name2 = item2.name || item2;
+                if (!name1 || name1 === 'all') {
+                    return;
+                }
 
-                        if (name1 === name2) {
-                            isFound = true;
-                        }
-                    });
+                filterList.forEach(item2 => {
+                    let name2 = item2.name || item2;
 
-                    if (!isFound) {
-                        filterList.push(item1);
+                    if (name1 === name2) {
+                        isFound = true;
                     }
                 });
-            }
 
-            if (this.filtersDisabled) {
-                filterList = [];
-            }
-
-            return this.createView('search', this.searchView, {
-                collection: this.collection,
-                el: '#main > .search-container',
-                searchManager: this.searchManager,
-                scope: this.foreignScope,
-                viewMode: this.viewMode,
-                viewModeList: this.viewModeList,
-                isWide: true,
-                filterList: filterList,
-            }, view => {
-                if (this.viewModeList.length > 1) {
-                    this.listenTo(view, 'change-view-mode', () => this.switchViewMode());
+                if (!isFound) {
+                    filterList.push(item1);
                 }
             });
-        },
+        }
 
-        /**
-         * Switch a view mode.
-         *
-         * @param {string} mode
-         */
-        switchViewMode: function (mode) {
-            this.clearView('list');
-            this.collection.isFetched = false;
-            this.collection.reset();
-            this.setViewMode(mode, true);
+        if (this.filtersDisabled) {
+            filterList = [];
+        }
+
+        return this.createView('search', this.searchView, {
+            collection: this.collection,
+            el: '#main > .search-container',
+            searchManager: this.searchManager,
+            scope: this.foreignScope,
+            viewMode: this.viewMode,
+            viewModeList: this.viewModeList,
+            isWide: true,
+            filterList: filterList,
+        }, view => {
+            if (this.viewModeList.length > 1) {
+                this.listenTo(view, 'change-view-mode', () => this.switchViewMode());
+            }
+        });
+    },
+
+    /**
+     * Switch a view mode.
+     *
+     * @param {string} mode
+     */
+    switchViewMode: function (mode) {
+        this.clearView('list');
+        this.collection.isFetched = false;
+        this.collection.reset();
+        this.setViewMode(mode, true);
+        this.loadList();
+    },
+
+    /**
+     * Set a view mode.
+     *
+     * @param {string} mode A mode.
+     * @param {boolean} [toStore=false] To preserve a mode being set.
+     */
+    setViewMode: function (mode, toStore) {
+        this.viewMode = mode;
+
+        this.collection.url = this.collectionUrl;
+        this.collection.maxSize = this.collectionMaxSize;
+
+        if (toStore) {
+            var modeKey = 'listViewMode' + this.scope + this.link;
+
+            this.getStorage().set('state', modeKey, mode);
+        }
+
+        if (this.searchView && this.getView('search')) {
+            this.getView('search').setViewMode(mode);
+        }
+
+        let methodName = 'setViewMode' + Espo.Utils.upperCaseFirst(this.viewMode);
+
+        if (this[methodName]) {
+            this[methodName]();
+        }
+    },
+
+    /**
+     * Set up a search manager.
+     */
+    setupSearchManager: function () {
+        let collection = this.collection;
+
+        let searchManager = new SearchManager(
+            collection,
+            'list',
+            null,
+            this.getDateTime(),
+            null
+        );
+
+        searchManager.scope = this.foreignScope;
+
+        collection.where = searchManager.getWhere();
+
+        this.searchManager = searchManager;
+    },
+
+    /**
+     * Set up sorting.
+     */
+    setupSorting: function () {
+        if (!this.searchPanel) {
+            return;
+        }
+    },
+
+    /**
+     * @protected
+     * @return {module:views/record/search}
+     */
+    getSearchView: function () {
+        return this.getView('search');
+    },
+
+    /**
+     * @protected
+     * @return {module:view}
+     */
+    getRecordView: function () {
+        return this.getView('list');
+    },
+
+    /**
+     * Get a record view name.
+     *
+     * @returns {string}
+     */
+    getRecordViewName: function () {
+        if (this.viewMode === this.MODE_LIST) {
+            return this.panelDefs.recordListView ||
+                this.getMetadata().get(['clientDefs', this.foreignScope, 'recordViews', this.MODE_LIST]) ||
+                    this.recordView;
+        }
+
+        let propertyName = 'record' + Espo.Utils.upperCaseFirst(this.viewMode) + 'View';
+
+        return this.getMetadata().get(['clientDefs', this.foreignScope, 'recordViews', this.viewMode]) ||
+            this[propertyName];
+    },
+
+    /**
+     * @inheritDoc
+     */
+    afterRender: function () {
+        Espo.Ui.notify(false);
+
+        if (!this.hasView('list')) {
             this.loadList();
-        },
+        }
 
-        /**
-         * Set a view mode.
-         *
-         * @param {string} mode A mode.
-         * @param {boolean} [toStore=false] To preserve a mode being set.
-         */
-        setViewMode: function (mode, toStore) {
-            this.viewMode = mode;
+        this.$el.get(0).focus({preventScroll: true});
+    },
 
-            this.collection.url = this.collectionUrl;
-            this.collection.maxSize = this.collectionMaxSize;
+    /**
+     * Load a record list view.
+     */
+    loadList: function () {
+        let methodName = 'loadList' + Espo.Utils.upperCaseFirst(this.viewMode);
 
-            if (toStore) {
-                var modeKey = 'listViewMode' + this.scope + this.link;
+        if (this[methodName]) {
+            this[methodName]();
 
-                this.getStorage().set('state', modeKey, mode);
-            }
+            return;
+        }
 
-            if (this.searchView && this.getView('search')) {
-                this.getView('search').setViewMode(mode);
-            }
+        if (this.collection.isFetched) {
+            this.createListRecordView(false);
 
-            let methodName = 'setViewMode' + Espo.Utils.upperCaseFirst(this.viewMode);
+            return;
+        }
 
-            if (this[methodName]) {
-                this[methodName]();
-            }
-        },
+        Espo.Ui.notify(' ... ');
 
-        /**
-         * Set up a search manager.
-         */
-        setupSearchManager: function () {
-            let collection = this.collection;
+        this.createListRecordView(true);
+    },
 
-            let searchManager = new SearchManager(
-                collection,
-                'list',
-                null,
-                this.getDateTime(),
-                null
-            );
+    /**
+     * Prepare record view options. Options can be modified in an extended method.
+     *
+     * @param {Object} options Options
+     */
+    prepareRecordViewOptions: function (options) {},
 
-            searchManager.scope = this.foreignScope;
+    /**
+     * Create a record list view.
+     */
+    createListRecordView: function () {
+        let o = {
+            collection: this.collection,
+            el: this.options.el + ' .list-container',
+            scope: this.foreignScope,
+            skipBuildRows: true,
+            shortcutKeysEnabled: true,
+        };
 
-            collection.where = searchManager.getWhere();
+        this.optionsToPass.forEach(option => {
+            o[option] = this.options[option];
+        });
 
-            this.searchManager = searchManager;
-        },
+        if (this.keepCurrentRootUrl) {
+            o.keepCurrentRootUrl = true;
+        }
 
-        /**
-         * Set up sorting.
-         */
-        setupSorting: function () {
-            if (!this.searchPanel) {
-                return;
-            }
-        },
+        if (this.panelDefs.layout && typeof this.panelDefs.layout === 'string') {
+            o.layoutName = this.panelDefs.layout;
+        }
 
-        /**
-         * @protected
-         * @return {?module:views/record/search.Class}
-         */
-        getSearchView: function () {
-            return this.getView('search');
-        },
+        o.rowActionsView = this.panelDefs.readOnly ? false :
+            (this.panelDefs.rowActionsView || this.rowActionsView);
 
-        /**
-         * @protected
-         * @return {?module:view}
-         */
-        getRecordView: function () {
-            return this.getView('list');
-        },
+        if (
+            this.getConfig().get('listPagination') ||
+            this.getMetadata().get(['clientDefs', this.foreignScope, 'listPagination'])
+        ) {
+            o.pagination = true;
+        }
 
-        /**
-         * Get a record view name.
-         *
-         * @returns {string}
-         */
-        getRecordViewName: function () {
-            if (this.viewMode === this.MODE_LIST) {
-                return this.panelDefs.recordListView ||
-                    this.getMetadata().get(['clientDefs', this.foreignScope, 'recordViews', this.MODE_LIST]) ||
-                        this.recordView;
-            }
+        let massUnlinkDisabled = this.panelDefs.massUnlinkDisabled ||
+            this.panelDefs.unlinkDisabled || this.unlinkDisabled;
 
-            let propertyName = 'record' + Espo.Utils.upperCaseFirst(this.viewMode) + 'View';
+        o = {
+            unlinkMassAction: !massUnlinkDisabled,
+            skipBuildRows: true,
+            buttonsDisabled: true,
+            forceDisplayTopBar: true,
+            rowActionsOptions:  {
+                unlinkDisabled: this.panelDefs.unlinkDisabled || this.unlinkDisabled,
+            },
+            ...o
+        };
 
-            return this.getMetadata().get(['clientDefs', this.foreignScope, 'recordViews', this.viewMode]) ||
-                this[propertyName];
-        },
+        this.prepareRecordViewOptions(o);
 
-        /**
-         * @inheritDoc
-         */
-        afterRender: function () {
-            Espo.Ui.notify(false);
+        let listViewName = this.getRecordViewName();
 
-            if (!this.hasView('list')) {
-                this.loadList();
-            }
-
-            this.$el.get(0).focus({preventScroll: true});
-        },
-
-        /**
-         * Load a record list view.
-         */
-        loadList: function () {
-            let methodName = 'loadList' + Espo.Utils.upperCaseFirst(this.viewMode);
-
-            if (this[methodName]) {
-                this[methodName]();
+        this.createView('list', listViewName, o, view =>{
+            if (!this.hasParentView()) {
+                view.undelegateEvents();
 
                 return;
             }
 
-            if (this.collection.isFetched) {
-                this.createListRecordView(false);
-
-                return;
-            }
-
-            Espo.Ui.notify(' ... ');
-
-            this.createListRecordView(true);
-        },
-
-        /**
-         * Prepare record view options. Options can be modified in an extended method.
-         *
-         * @param {Object} options Options
-         */
-        prepareRecordViewOptions: function (options) {},
-
-        /**
-         * Create a record list view.
-         */
-        createListRecordView: function () {
-            let o = {
-                collection: this.collection,
-                el: this.options.el + ' .list-container',
-                scope: this.foreignScope,
-                skipBuildRows: true,
-                shortcutKeysEnabled: true,
-            };
-
-            this.optionsToPass.forEach(option => {
-                o[option] = this.options[option];
-            });
-
-            if (this.keepCurrentRootUrl) {
-                o.keepCurrentRootUrl = true;
-            }
-
-            if (this.panelDefs.layout && typeof this.panelDefs.layout === 'string') {
-                o.layoutName = this.panelDefs.layout;
-            }
-
-            o.rowActionsView = this.panelDefs.readOnly ? false :
-                (this.panelDefs.rowActionsView || this.rowActionsView);
-
-            if (
-                this.getConfig().get('listPagination') ||
-                this.getMetadata().get(['clientDefs', this.foreignScope, 'listPagination'])
-            ) {
-                o.pagination = true;
-            }
-
-            let massUnlinkDisabled = this.panelDefs.massUnlinkDisabled ||
-                this.panelDefs.unlinkDisabled || this.unlinkDisabled;
-
-            o = {
-                unlinkMassAction: !massUnlinkDisabled,
-                skipBuildRows: true,
-                buttonsDisabled: true,
-                forceDisplayTopBar: true,
-                rowActionsOptions:  {
-                    unlinkDisabled: this.panelDefs.unlinkDisabled || this.unlinkDisabled,
-                },
-                ...o
-            };
-
-            this.prepareRecordViewOptions(o);
-
-            let listViewName = this.getRecordViewName();
-
-            this.createView('list', listViewName, o, view =>{
+            this.listenToOnce(view, 'after:render', () => {
                 if (!this.hasParentView()) {
                     view.undelegateEvents();
 
-                    return;
+                    this.clearView('list');
                 }
-
-                this.listenToOnce(view, 'after:render', () => {
-                    if (!this.hasParentView()) {
-                        view.undelegateEvents();
-
-                        this.clearView('list');
-                    }
-                });
-
-                view.getSelectAttributeList(selectAttributeList => {
-                    if (this.options.mediator && this.options.mediator.abort) {
-                        return;
-                    }
-
-                    if (selectAttributeList) {
-                        this.collection.data.select = selectAttributeList.join(',');
-                    }
-
-                    Espo.Ui.notify(' ... ');
-
-                    this.collection.fetch({main: true})
-                        .then(() => Espo.Ui.notify(false));
-                });
             });
-        },
-
-        /**
-         * A quick-create action.
-         *
-         * @protected
-         */
-        actionQuickCreate: function () {
-            let link = this.link;
-            let foreignScope = this.foreignScope;
-            let foreignLink = this.model.getLinkParam(link, 'foreign');
-
-            let attributes = {};
-
-            let attributeMap = this.getMetadata()
-                    .get(['clientDefs', this.scope, 'relationshipPanels', link, 'createAttributeMap']) || {};
-
-            Object.keys(attributeMap)
-                .forEach(attr => {
-                    attributes[attributeMap[attr]] = this.model.get(attr);
-                });
-
-            Espo.Ui.notify(' ... ');
-
-            let handler = this.getMetadata()
-                .get(['clientDefs', this.scope, 'relationshipPanels', link, 'createHandler']);
-
-            (new Promise(resolve => {
-                if (!handler) {
-                    resolve({});
 
+            view.getSelectAttributeList(selectAttributeList => {
+                if (this.options.mediator && this.options.mediator.abort) {
                     return;
                 }
 
-                Espo.loader.requirePromise(handler)
-                    .then(Handler => new Handler(this.getHelper()))
-                    .then(handler => {
-                        handler.getAttributes(this.model)
-                            .then(attributes => resolve(attributes));
-                    });
-            }))
-                .then(additionalAttributes => {
-                    attributes = {...attributes, ...additionalAttributes};
+                if (selectAttributeList) {
+                    this.collection.data.select = selectAttributeList.join(',');
+                }
 
-                    let viewName = this.getMetadata()
-                        .get(['clientDefs', foreignScope, 'modalViews', 'edit']) || 'views/modals/edit';
-
-                    this.createView('quickCreate', viewName, {
-                        scope: foreignScope,
-                        relate: {
-                            model: this.model,
-                            link: foreignLink,
-                        },
-                        attributes: attributes,
-                    }, view => {
-                        view.render();
-                        view.notify(false);
-
-                        this.listenToOnce(view, 'after:save', () => {
-                            this.collection.fetch();
-
-                            this.model.trigger('after:relate');
-                            this.model.trigger('after:relate:' + link);
-                        });
-                    });
-                });
-        },
-
-        /**
-         * An `unlink-related` action.
-         *
-         * @protected
-         */
-        actionUnlinkRelated: function (data) {
-            let id = data.id;
-
-            this.confirm({
-                message: this.translate('unlinkRecordConfirmation', 'messages'),
-                confirmText: this.translate('Unlink'),
-            }, () => {
                 Espo.Ui.notify(' ... ');
 
-                Espo.Ajax
-                    .deleteRequest(this.collection.url, {id: id})
-                    .then(() => {
-                        this.notify('Unlinked', 'success');
+                this.collection.fetch({main: true})
+                    .then(() => Espo.Ui.notify(false));
+            });
+        });
+    },
 
+    /**
+     * A quick-create action.
+     *
+     * @protected
+     */
+    actionQuickCreate: function () {
+        let link = this.link;
+        let foreignScope = this.foreignScope;
+        let foreignLink = this.model.getLinkParam(link, 'foreign');
+
+        let attributes = {};
+
+        let attributeMap = this.getMetadata()
+                .get(['clientDefs', this.scope, 'relationshipPanels', link, 'createAttributeMap']) || {};
+
+        Object.keys(attributeMap)
+            .forEach(attr => {
+                attributes[attributeMap[attr]] = this.model.get(attr);
+            });
+
+        Espo.Ui.notify(' ... ');
+
+        let handler = this.getMetadata()
+            .get(['clientDefs', this.scope, 'relationshipPanels', link, 'createHandler']);
+
+        (new Promise(resolve => {
+            if (!handler) {
+                resolve({});
+
+                return;
+            }
+
+            Espo.loader.requirePromise(handler)
+                .then(Handler => new Handler(this.getHelper()))
+                .then(handler => {
+                    handler.getAttributes(this.model)
+                        .then(attributes => resolve(attributes));
+                });
+        }))
+            .then(additionalAttributes => {
+                attributes = {...attributes, ...additionalAttributes};
+
+                let viewName = this.getMetadata()
+                    .get(['clientDefs', foreignScope, 'modalViews', 'edit']) || 'views/modals/edit';
+
+                this.createView('quickCreate', viewName, {
+                    scope: foreignScope,
+                    relate: {
+                        model: this.model,
+                        link: foreignLink,
+                    },
+                    attributes: attributes,
+                }, view => {
+                    view.render();
+                    view.notify(false);
+
+                    this.listenToOnce(view, 'after:save', () => {
                         this.collection.fetch();
 
-                        this.model.trigger('after:unrelate');
-                        this.model.trigger('after:unrelate:' + this.link);
+                        this.model.trigger('after:relate');
+                        this.model.trigger('after:relate:' + link);
                     });
+                });
             });
-        },
+    },
 
-        /**
-         * @inheritDoc
-         */
-        getHeader: function () {
-            let name = this.model.get('name') || this.model.id;
+    /**
+     * An `unlink-related` action.
+     *
+     * @protected
+     */
+    actionUnlinkRelated: function (data) {
+        let id = data.id;
 
-            let recordUrl = '#' + this.scope  + '/view/' + this.model.id;
+        this.confirm({
+            message: this.translate('unlinkRecordConfirmation', 'messages'),
+            confirmText: this.translate('Unlink'),
+        }, () => {
+            Espo.Ui.notify(' ... ');
 
-            let $name =
-                $('<a>')
-                    .attr('href', recordUrl)
-                    .addClass('font-size-flexible title')
-                    .text(name);
+            Espo.Ajax
+                .deleteRequest(this.collection.url, {id: id})
+                .then(() => {
+                    this.notify('Unlinked', 'success');
 
-            if (this.model.get('deleted')) {
-                $name.css('text-decoration', 'line-through');
-            }
+                    this.collection.fetch();
 
-            let headerIconHtml = this.getHelper().getScopeColorIconHtml(this.foreignScope);
-            let scopeLabel = this.getLanguage().translate(this.scope, 'scopeNamesPlural');
+                    this.model.trigger('after:unrelate');
+                    this.model.trigger('after:unrelate:' + this.link);
+                });
+        });
+    },
 
-            let $root = $('<span>').text(scopeLabel);
+    /**
+     * @inheritDoc
+     */
+    getHeader: function () {
+        let name = this.model.get('name') || this.model.id;
 
-            if (!this.rootLinkDisabled) {
-                $root = $('<span>')
-                    .append(
-                        $('<a>')
-                            .attr('href', '#' + this.scope)
-                            .addClass('action')
-                            .attr('data-action', 'navigateToRoot')
-                            .text(scopeLabel)
-                    );
-            }
+        let recordUrl = '#' + this.scope  + '/view/' + this.model.id;
 
-            if (headerIconHtml) {
-                $root.prepend(headerIconHtml);
-            }
+        let $name =
+            $('<a>')
+                .attr('href', recordUrl)
+                .addClass('font-size-flexible title')
+                .text(name);
 
-            let $link = $('<span>').text(this.translate(this.link, 'links', this.scope));
+        if (this.model.get('deleted')) {
+            $name.css('text-decoration', 'line-through');
+        }
 
-            return this.buildHeaderHtml([
-                $root,
-                $name,
-                $link
-            ]);
-        },
+        let headerIconHtml = this.getHelper().getScopeColorIconHtml(this.foreignScope);
+        let scopeLabel = this.getLanguage().translate(this.scope, 'scopeNamesPlural');
 
-        /**
-         * @inheritDoc
-         */
-        updatePageTitle: function () {
-            this.setPageTitle(this.getLanguage().translate(this.link, 'links', this.scope));
-        },
+        let $root = $('<span>').text(scopeLabel);
 
-        /**
-         * Create attributes for an entity being created.
-         *
-         * @return {Object}
-         */
-        getCreateAttributes: function () {},
+        if (!this.rootLinkDisabled) {
+            $root = $('<span>')
+                .append(
+                    $('<a>')
+                        .attr('href', '#' + this.scope)
+                        .addClass('action')
+                        .attr('data-action', 'navigateToRoot')
+                        .text(scopeLabel)
+                );
+        }
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlSpace: function (e) {
-            if (!this.createButton) {
-                return;
-            }
+        if (headerIconHtml) {
+            $root.prepend(headerIconHtml);
+        }
 
-            if (!this.getAcl().checkScope(this.foreignScope, 'create')) {
-                return;
-            }
+        let $link = $('<span>').text(this.translate(this.link, 'links', this.scope));
 
-            e.preventDefault();
-            e.stopPropagation();
+        return this.buildHeaderHtml([
+            $root,
+            $name,
+            $link
+        ]);
+    },
+
+    /**
+     * @inheritDoc
+     */
+    updatePageTitle: function () {
+        this.setPageTitle(this.getLanguage().translate(this.link, 'links', this.scope));
+    },
+
+    /**
+     * Create attributes for an entity being created.
+     *
+     * @return {Object}
+     */
+    getCreateAttributes: function () {},
+
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlSpace: function (e) {
+        if (!this.createButton) {
+            return;
+        }
+
+        if (!this.getAcl().checkScope(this.foreignScope, 'create')) {
+            return;
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
 
 
-            this.actionQuickCreate({focusForCreate: true});
-        },
+        this.actionQuickCreate({focusForCreate: true});
+    },
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlSlash: function (e) {
-            if (!this.searchPanel) {
-                return;
-            }
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlSlash: function (e) {
+        if (!this.searchPanel) {
+            return;
+        }
 
-            let $search = this.$el.find('input.text-filter').first();
+        let $search = this.$el.find('input.text-filter').first();
 
-            if (!$search.length) {
-                return;
-            }
+        if (!$search.length) {
+            return;
+        }
 
-            e.preventDefault();
-            e.stopPropagation();
+        e.preventDefault();
+        e.stopPropagation();
 
-            $search.focus();
-        },
+        $search.focus();
+    },
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlComma: function (e) {
-            if (!this.getSearchView()) {
-                return;
-            }
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlComma: function (e) {
+        if (!this.getSearchView()) {
+            return;
+        }
 
-            this.getSearchView().selectPreviousPreset();
-        },
+        this.getSearchView().selectPreviousPreset();
+    },
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlPeriod: function (e) {
-            if (!this.getSearchView()) {
-                return;
-            }
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlPeriod: function (e) {
+        if (!this.getSearchView()) {
+            return;
+        }
 
-            this.getSearchView().selectNextPreset();
-        },
-    });
+        this.getSearchView().selectNextPreset();
+    },
 });
diff --git a/client/src/views/list-with-categories.js b/client/src/views/list-with-categories.js
index 9e18e8cdcb..91e724b742 100644
--- a/client/src/views/list-with-categories.js
+++ b/client/src/views/list-with-categories.js
@@ -26,711 +26,696 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/list-with-categories', ['views/list'], function (Dep) {
+/** @module views/list-with-categories */
 
-    /**
-     * @class
-     * @name Class
-     * @extends module:views/list.Class
-     * @memberOf module:views/list-with-categories
-     */
-    return Dep.extend(/** @lends module:views/list-with-categories.Class# */{
+import Dep from 'views/list';
 
-        template: 'list-with-categories',
+/**
+ * @class
+ * @name Class
+ * @extends module:views/list
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        quickCreate: true,
+    template: 'list-with-categories',
 
-        storeViewAfterCreate: true,
+    quickCreate: true,
+    storeViewAfterCreate: true,
+    storeViewAfterUpdate: true,
+    currentCategoryId: null,
+    currentCategoryName: '',
+    categoryScope: null,
+    categoryField: 'category',
+    categoryFilterType: 'inCategory',
+    isExpanded: false,
+    hasExpandedToggler: true,
+    expandedTogglerDisabled: false,
+    keepCurrentRootUrl: true,
+    hasNavigationPanel: false,
+    /** @private */
+    nestedCollectionIsBeingFetched: false,
 
-        storeViewAfterUpdate: true,
+    data: function () {
+        let data = {};
 
-        currentCategoryId: null,
+        data.hasTree = (this.isExpanded || this.hasNavigationPanel) && !this.categoriesDisabled;
+        data.hasNestedCategories = !this.isExpanded;
 
-        currentCategoryName: '',
+        data.fallback = !data.hasTree && !data.hasNestedCategories;
 
-        categoryScope: null,
+        return data;
+    },
 
-        categoryField: 'category',
+    setup: function () {
+        Dep.prototype.setup.call(this);
 
-        categoryFilterType: 'inCategory',
+        if (!this.categoryScope) {
+            this.categoryScope = this.scope + 'Category';
+        }
 
-        isExpanded: false,
+        var isExpandedByDefault = this.getMetadata()
+            .get(['clientDefs', this.categoryScope, 'isExpandedByDefault']) || false;
 
-        hasExpandedToggler: true,
+        if (isExpandedByDefault) {
+            this.isExpanded = true;
+        }
 
-        expandedTogglerDisabled: false,
+        var isCollapsedByDefault = this.getMetadata()
+            .get(['clientDefs', this.categoryScope, 'isCollapsedByDefault']) || false;
 
-        keepCurrentRootUrl: true,
+        if (isCollapsedByDefault) {
+            this.isExpanded = false;
+        }
 
-        hasNavigationPanel: false,
+        this.categoriesDisabled =
+            this.categoriesDisabled ||
+            this.getMetadata().get(['scopes', this.categoryScope, 'disabled']) ||
+            !this.getAcl().checkScope(this.categoryScope);
 
-        /**
-         * @private
-         */
-        nestedCollectionIsBeingFetched: false,
-
-        data: function () {
-            let data = {};
-
-            data.hasTree = (this.isExpanded || this.hasNavigationPanel) && !this.categoriesDisabled;
-            data.hasNestedCategories = !this.isExpanded;
-
-            data.fallback = !data.hasTree && !data.hasNestedCategories;
-
-            return data;
-        },
-
-        setup: function () {
-            Dep.prototype.setup.call(this);
-
-            if (!this.categoryScope) {
-                this.categoryScope = this.scope + 'Category';
+        if (this.categoriesDisabled) {
+            this.isExpanded = true;
+            this.hasExpandedToggler = false;
+            this.hasNavigationPanel = false;
+        }
+        else if (!this.expandedTogglerDisabled) {
+            if (!this.getUser().isPortal()) {
+                if (this.hasIsExpandedStoredValue()) {
+                    this.isExpanded = this.getIsExpandedStoredValue();
+                }
             }
 
-            var isExpandedByDefault = this.getMetadata()
-                .get(['clientDefs', this.categoryScope, 'isExpandedByDefault']) || false;
-
-            if (isExpandedByDefault) {
-                this.isExpanded = true;
-            }
-
-            var isCollapsedByDefault = this.getMetadata()
-                .get(['clientDefs', this.categoryScope, 'isCollapsedByDefault']) || false;
-
-            if (isCollapsedByDefault) {
+            if (this.getUser().isPortal()) {
+                this.hasExpandedToggler = false;
                 this.isExpanded = false;
             }
+        }
 
-            this.categoriesDisabled =
-                this.categoriesDisabled ||
-                this.getMetadata().get(['scopes', this.categoryScope, 'disabled']) ||
-                !this.getAcl().checkScope(this.categoryScope);
+        if (this.hasNavigationPanelStoredValue()) {
+            this.hasNavigationPanel = this.getNavigationPanelStoredValue();
+        }
 
-            if (this.categoriesDisabled) {
-                this.isExpanded = true;
-                this.hasExpandedToggler = false;
-                this.hasNavigationPanel = false;
-            }
-            else if (!this.expandedTogglerDisabled) {
-                if (!this.getUser().isPortal()) {
-                    if (this.hasIsExpandedStoredValue()) {
-                        this.isExpanded = this.getIsExpandedStoredValue();
-                    }
-                }
+        var params = this.options.params || {};
 
-                if (this.getUser().isPortal()) {
-                    this.hasExpandedToggler = false;
-                    this.isExpanded = false;
-                }
+        if ('categoryId' in params) {
+            this.currentCategoryId = params.categoryId;
+        }
+
+        this.applyCategoryToCollection();
+
+        this.listenTo(this.collection, 'sync', (c, d, o) => {
+            if (o && o.openCategory) {
+                return;
             }
 
-            if (this.hasNavigationPanelStoredValue()) {
-                this.hasNavigationPanel = this.getNavigationPanelStoredValue();
-            }
+            this.controlListVisibility();
+        });
+    },
 
-            var params = this.options.params || {};
+    prepareCreateReturnDispatchParams: function (params) {
+        if (this.currentCategoryId) {
+            params.options.categoryId = this.currentCategoryId;
+            params.options.categoryName = this.currentCategoryName;
+        }
+    },
 
+    /**
+     * @inheritDoc
+     */
+    setupReuse: function (params) {
+        this.applyRoutingParams(params);
+    },
+
+    applyRoutingParams: function (params) {
+        if (!this.isExpanded) {
             if ('categoryId' in params) {
-                this.currentCategoryId = params.categoryId;
-            }
-
-            this.applyCategoryToCollection();
-
-            this.listenTo(this.collection, 'sync', (c, d, o) => {
-                if (o && o.openCategory) {
-                    return;
-                }
-
-                this.controlListVisibility();
-            });
-        },
-
-        prepareCreateReturnDispatchParams: function (params) {
-            if (this.currentCategoryId) {
-                params.options.categoryId = this.currentCategoryId;
-                params.options.categoryName = this.currentCategoryName;
-            }
-        },
-
-        /**
-         * @inheritDoc
-         */
-        setupReuse: function (params) {
-            this.applyRoutingParams(params);
-        },
-
-        applyRoutingParams: function (params) {
-            if (!this.isExpanded) {
-                if ('categoryId' in params) {
-                    if (params.categoryId !== this.currentCategoryId) {
-                        this.openCategory(params.categoryId, params.categoryName);
-                    }
-                }
-
-                this.selectCurrentCategory();
-            }
-        },
-
-        hasTextFilter: function () {
-            if (this.collection.where) {
-                for (var i = 0; i < this.collection.where.length; i++) {
-                    if (this.collection.where[i].type === 'textFilter') {
-                        return true;
-                    }
+                if (params.categoryId !== this.currentCategoryId) {
+                    this.openCategory(params.categoryId, params.categoryName);
                 }
             }
 
-            if (this.collection.data && this.collection.data.textFilter) {
-                return true;
-            }
-
-            return false;
-        },
-
-        hasNavigationPanelStoredValue: function () {
-            return this.getStorage().has('state', 'categories-navigation-panel-' + this.scope);
-        },
-
-        getNavigationPanelStoredValue: function () {
-            var value = this.getStorage().get('state', 'categories-navigation-panel-' + this.scope);
-
-            return value === 'true' || value === true;
-        },
-
-        setNavigationPanelStoredValue: function (value) {
-            return this.getStorage().set('state', 'categories-navigation-panel-' + this.scope, value);
-        },
-
-        hasIsExpandedStoredValue: function () {
-            return this.getStorage().has('state', 'categories-expanded-' + this.scope);
-        },
-
-        getIsExpandedStoredValue: function () {
-            var value = this.getStorage().get('state', 'categories-expanded-' + this.scope);
-
-            return value === 'true' || value === true ;
-        },
-
-        setIsExpandedStoredValue: function (value) {
-            return this.getStorage().set('state', 'categories-expanded-' + this.scope, value);
-        },
-
-        afterRender: function () {
-            this.$nestedCategoriesContainer = this.$el.find('.nested-categories-container');
-            this.$listContainer = this.$el.find('.list-container');
-
-            if (!this.hasView('list')) {
-                if (!this.isExpanded) {
-                    this.hideListContainer();
-                }
-
-                this.loadList();
-            }
-            else {
-                this.controlListVisibility();
-            }
-
-            if (
-                !this.categoriesDisabled &&
-                (this.isExpanded || this.hasNavigationPanel) &&
-                !this.hasView('categories')
-            ) {
-                this.loadCategories();
-            }
-
-            if (!this.isExpanded && !this.hasView('nestedCategories')) {
-                this.loadNestedCategories();
-            }
-
-            this.$el.focus();
-        },
-
-        actionExpand: function () {
-            this.isExpanded = true;
-
-            this.setIsExpandedStoredValue(true);
-
-            this.applyCategoryToCollection();
-
-            this.clearView('nestedCategories');
-            this.clearView('categories');
-
-            this.getRouter().navigate('#' + this.scope);
-            this.updateLastUrl();
-
-            this.nestedCategoriesCollection = null;
-
-            this.reRender();
-
-            this.$listContainer.empty();
-
-            this.collection.fetch();
-        },
-
-        actionCollapse: function () {
-            this.isExpanded = false;
-            this.setIsExpandedStoredValue(false);
-
-            this.applyCategoryToCollection();
-            this.applyCategoryToNestedCategoriesCollection();
-
-            this.clearView('categories');
-
-            this.navigateToCurrentCategory();
-
-            this.reRender();
-
-            this.$listContainer.empty();
-
-            this.collection.fetch();
-        },
-
-        actionOpenCategory: function (data) {
-            this.openCategory(data.id || null, data.name);
-
             this.selectCurrentCategory();
-            this.navigateToCurrentCategory();
-        },
+        }
+    },
 
-        navigateToCurrentCategory: function () {
+    hasTextFilter: function () {
+        if (this.collection.where) {
+            for (var i = 0; i < this.collection.where.length; i++) {
+                if (this.collection.where[i].type === 'textFilter') {
+                    return true;
+                }
+            }
+        }
+
+        if (this.collection.data && this.collection.data.textFilter) {
+            return true;
+        }
+
+        return false;
+    },
+
+    hasNavigationPanelStoredValue: function () {
+        return this.getStorage().has('state', 'categories-navigation-panel-' + this.scope);
+    },
+
+    getNavigationPanelStoredValue: function () {
+        var value = this.getStorage().get('state', 'categories-navigation-panel-' + this.scope);
+
+        return value === 'true' || value === true;
+    },
+
+    setNavigationPanelStoredValue: function (value) {
+        return this.getStorage().set('state', 'categories-navigation-panel-' + this.scope, value);
+    },
+
+    hasIsExpandedStoredValue: function () {
+        return this.getStorage().has('state', 'categories-expanded-' + this.scope);
+    },
+
+    getIsExpandedStoredValue: function () {
+        var value = this.getStorage().get('state', 'categories-expanded-' + this.scope);
+
+        return value === 'true' || value === true ;
+    },
+
+    setIsExpandedStoredValue: function (value) {
+        return this.getStorage().set('state', 'categories-expanded-' + this.scope, value);
+    },
+
+    afterRender: function () {
+        this.$nestedCategoriesContainer = this.$el.find('.nested-categories-container');
+        this.$listContainer = this.$el.find('.list-container');
+
+        if (!this.hasView('list')) {
             if (!this.isExpanded) {
-                if (this.currentCategoryId) {
-                    this.getRouter().navigate('#' + this.scope + '/list/categoryId=' + this.currentCategoryId);
-                }
-                else {
-                    this.getRouter().navigate('#' + this.scope);
-                }
+                this.hideListContainer();
+            }
+
+            this.loadList();
+        }
+        else {
+            this.controlListVisibility();
+        }
+
+        if (
+            !this.categoriesDisabled &&
+            (this.isExpanded || this.hasNavigationPanel) &&
+            !this.hasView('categories')
+        ) {
+            this.loadCategories();
+        }
+
+        if (!this.isExpanded && !this.hasView('nestedCategories')) {
+            this.loadNestedCategories();
+        }
+
+        this.$el.focus();
+    },
+
+    actionExpand: function () {
+        this.isExpanded = true;
+
+        this.setIsExpandedStoredValue(true);
+
+        this.applyCategoryToCollection();
+
+        this.clearView('nestedCategories');
+        this.clearView('categories');
+
+        this.getRouter().navigate('#' + this.scope);
+        this.updateLastUrl();
+
+        this.nestedCategoriesCollection = null;
+
+        this.reRender();
+
+        this.$listContainer.empty();
+
+        this.collection.fetch();
+    },
+
+    actionCollapse: function () {
+        this.isExpanded = false;
+        this.setIsExpandedStoredValue(false);
+
+        this.applyCategoryToCollection();
+        this.applyCategoryToNestedCategoriesCollection();
+
+        this.clearView('categories');
+
+        this.navigateToCurrentCategory();
+
+        this.reRender();
+
+        this.$listContainer.empty();
+
+        this.collection.fetch();
+    },
+
+    actionOpenCategory: function (data) {
+        this.openCategory(data.id || null, data.name);
+
+        this.selectCurrentCategory();
+        this.navigateToCurrentCategory();
+    },
+
+    navigateToCurrentCategory: function () {
+        if (!this.isExpanded) {
+            if (this.currentCategoryId) {
+                this.getRouter().navigate('#' + this.scope + '/list/categoryId=' + this.currentCategoryId);
             }
             else {
                 this.getRouter().navigate('#' + this.scope);
             }
+        }
+        else {
+            this.getRouter().navigate('#' + this.scope);
+        }
 
-            this.updateLastUrl();
-        },
+        this.updateLastUrl();
+    },
 
-        selectCurrentCategory: function () {
-            var categoriesView = this.getView('categories');
+    selectCurrentCategory: function () {
+        var categoriesView = this.getView('categories');
 
-            if (categoriesView) {
-                categoriesView.setSelected(this.currentCategoryId);
-                categoriesView.reRender();
-            }
-        },
+        if (categoriesView) {
+            categoriesView.setSelected(this.currentCategoryId);
+            categoriesView.reRender();
+        }
+    },
 
-        openCategory: function (id, name) {
-            this.getView('nestedCategories').isLoading = true;
-            this.getView('nestedCategories').reRender();
-            this.getView('nestedCategories').isLoading = false;
+    openCategory: function (id, name) {
+        this.getView('nestedCategories').isLoading = true;
+        this.getView('nestedCategories').reRender();
+        this.getView('nestedCategories').isLoading = false;
 
-            this.nestedCategoriesCollection.reset();
-            this.collection.reset();
+        this.nestedCategoriesCollection.reset();
+        this.collection.reset();
 
-            this.$listContainer.empty();
+        this.$listContainer.empty();
 
-            this.currentCategoryId = id;
-            this.currentCategoryName = name || id;
+        this.currentCategoryId = id;
+        this.currentCategoryName = name || id;
 
-            this.applyCategoryToNestedCategoriesCollection();
-            this.applyCategoryToCollection();
+        this.applyCategoryToNestedCategoriesCollection();
+        this.applyCategoryToCollection();
 
-            this.collection.abortLastFetch();
+        this.collection.abortLastFetch();
 
-            if (this.nestedCategoriesCollection) {
-                this.nestedCategoriesCollection.abortLastFetch();
+        if (this.nestedCategoriesCollection) {
+            this.nestedCategoriesCollection.abortLastFetch();
 
-                this.hideListContainer();
-                this.$nestedCategoriesContainer.addClass('hidden');
+            this.hideListContainer();
+            this.$nestedCategoriesContainer.addClass('hidden');
 
-                Espo.Ui.notify(' ... ');
+            Espo.Ui.notify(' ... ');
 
-                Promise
-                    .all([
-                        this.nestedCategoriesCollection
-                            .fetch()
-                            .then(() => {
-                                this.updateHeader();
-                            }),
-                        this.collection.fetch({openCategory: true})
-                    ])
-                    .then(() => {
-                        Espo.Ui.notify(false);
-
-                        this.controlNestedCategoriesVisibility();
-                        this.controlListVisibility();
-                    });
-
-                return;
-            }
-
-            this.collection
-                .fetch()
+            Promise
+                .all([
+                    this.nestedCategoriesCollection
+                        .fetch()
+                        .then(() => {
+                            this.updateHeader();
+                        }),
+                    this.collection.fetch({openCategory: true})
+                ])
                 .then(() => {
                     Espo.Ui.notify(false);
+
+                    this.controlNestedCategoriesVisibility();
+                    this.controlListVisibility();
                 });
-        },
 
-        controlListVisibility: function () {
-            if (this.isExpanded) {
-                this.showListContainer();
+            return;
+        }
 
-                return;
-            }
-
-            if (this.nestedCollectionIsBeingFetched) {
-                return;
-            }
-
-            if (
-                !this.collection.models.length &&
-                this.nestedCategoriesCollection &&
-                this.nestedCategoriesCollection.models.length &&
-                !this.hasTextFilter()
-            ) {
-                this.hideListContainer();
-
-                return;
-            }
+        this.collection
+            .fetch()
+            .then(() => {
+                Espo.Ui.notify(false);
+            });
+    },
 
+    controlListVisibility: function () {
+        if (this.isExpanded) {
             this.showListContainer();
-        },
 
-        controlNestedCategoriesVisibility: function () {
-            this.$nestedCategoriesContainer.removeClass('hidden');
-        },
+            return;
+        }
 
-        getTreeCollection: function (callback) {
-            this.getCollectionFactory().create(this.categoryScope, collection => {
-                collection.url = collection.name + '/action/listTree';
+        if (this.nestedCollectionIsBeingFetched) {
+            return;
+        }
 
-                collection.setOrder(null, null);
+        if (
+            !this.collection.models.length &&
+            this.nestedCategoriesCollection &&
+            this.nestedCategoriesCollection.models.length &&
+            !this.hasTextFilter()
+        ) {
+            this.hideListContainer();
 
-                this.collection.treeCollection = collection;
+            return;
+        }
+
+        this.showListContainer();
+    },
+
+    controlNestedCategoriesVisibility: function () {
+        this.$nestedCategoriesContainer.removeClass('hidden');
+    },
+
+    getTreeCollection: function (callback) {
+        this.getCollectionFactory().create(this.categoryScope, collection => {
+            collection.url = collection.name + '/action/listTree';
+
+            collection.setOrder(null, null);
+
+            this.collection.treeCollection = collection;
+
+            this.listenToOnce(collection, 'sync', () => {
+                callback.call(this, collection);
+            });
+
+            collection.fetch();
+        });
+    },
+
+    applyCategoryToNestedCategoriesCollection: function () {
+        if (!this.nestedCategoriesCollection) {
+            return;
+        }
+
+        this.nestedCategoriesCollection.where = null;
+
+        var filter;
+
+        this.nestedCategoriesCollection.parentId = this.currentCategoryId;
+
+        this.nestedCategoriesCollection.currentCategoryId = this.currentCategoryId;
+        this.nestedCategoriesCollection.currentCategoryName = this.currentCategoryName ||
+            this.currentCategoryId;
+
+        this.nestedCategoriesCollection.where = [filter];
+    },
+
+    getNestedCategoriesCollection: function (callback) {
+        this.getCollectionFactory().create(this.categoryScope, collection => {
+            this.nestedCategoriesCollection = collection;
+
+            collection.setOrder(null, null);
+
+            collection.url = collection.name + '/action/listTree';
+            collection.maxDepth = null;
+            collection.data.checkIfEmpty = true;
+
+            if (!this.getAcl().checkScope(this.scope, 'create')) {
+                collection.data.onlyNotEmpty = true;
+            }
+
+            this.applyCategoryToNestedCategoriesCollection();
+
+            this.nestedCollectionIsBeingFetched = true;
+
+            collection
+                .fetch()
+                .then(() => {
+                    this.nestedCollectionIsBeingFetched = false;
+
+                    this.controlNestedCategoriesVisibility();
+                    this.controlListVisibility();
+
+                    this.updateHeader();
 
-                this.listenToOnce(collection, 'sync', () => {
                     callback.call(this, collection);
                 });
+        });
+    },
 
-                collection.fetch();
+    loadNestedCategories: function () {
+        this.getNestedCategoriesCollection(collection => {
+            this.createView('nestedCategories', 'views/record/list-nested-categories', {
+                collection: collection,
+                el: this.options.el + ' .nested-categories-container',
+                showEditLink: this.getAcl().check(this.categoryScope, 'edit'),
+                isExpanded: this.isExpanded,
+                hasExpandedToggler: this.hasExpandedToggler,
+                hasNavigationPanel: this.hasNavigationPanel,
+                subjectEntityType: this.collection.entityType,
+            }, view => {
+                view.render();
             });
-        },
+        });
+    },
 
-        applyCategoryToNestedCategoriesCollection: function () {
-            if (!this.nestedCategoriesCollection) {
-                return;
-            }
-
-            this.nestedCategoriesCollection.where = null;
-
-            var filter;
-
-            this.nestedCategoriesCollection.parentId = this.currentCategoryId;
-
-            this.nestedCategoriesCollection.currentCategoryId = this.currentCategoryId;
-            this.nestedCategoriesCollection.currentCategoryName = this.currentCategoryName ||
-                this.currentCategoryId;
-
-            this.nestedCategoriesCollection.where = [filter];
-        },
-
-        getNestedCategoriesCollection: function (callback) {
-            this.getCollectionFactory().create(this.categoryScope, collection => {
-                this.nestedCategoriesCollection = collection;
-
-                collection.setOrder(null, null);
-
-                collection.url = collection.name + '/action/listTree';
-                collection.maxDepth = null;
-                collection.data.checkIfEmpty = true;
-
-                if (!this.getAcl().checkScope(this.scope, 'create')) {
-                    collection.data.onlyNotEmpty = true;
+    loadCategories: function () {
+        this.getTreeCollection(collection => {
+            this.createView('categories', 'views/record/list-tree', {
+                collection: collection,
+                el: this.options.el + ' .categories-container',
+                selectable: true,
+                showRoot: true,
+                rootName: this.translate(this.scope, 'scopeNamesPlural'),
+                buttonsDisabled: true,
+                checkboxes: false,
+                showEditLink: this.getAcl().check(this.categoryScope, 'edit'),
+                isExpanded: this.isExpanded,
+                hasExpandedToggler: this.hasExpandedToggler,
+                menuDisabled: !this.isExpanded && this.hasNavigationPanel,
+                readOnly: true,
+            }, view => {
+                if (this.currentCategoryId) {
+                    view.setSelected(this.currentCategoryId);
                 }
 
-                this.applyCategoryToNestedCategoriesCollection();
+                view.render();
 
-                this.nestedCollectionIsBeingFetched = true;
-
-                collection
-                    .fetch()
-                    .then(() => {
-                        this.nestedCollectionIsBeingFetched = false;
-
-                        this.controlNestedCategoriesVisibility();
-                        this.controlListVisibility();
-
-                        this.updateHeader();
-
-                        callback.call(this, collection);
-                    });
-            });
-        },
-
-        loadNestedCategories: function () {
-            this.getNestedCategoriesCollection(collection => {
-                this.createView('nestedCategories', 'views/record/list-nested-categories', {
-                    collection: collection,
-                    el: this.options.el + ' .nested-categories-container',
-                    showEditLink: this.getAcl().check(this.categoryScope, 'edit'),
-                    isExpanded: this.isExpanded,
-                    hasExpandedToggler: this.hasExpandedToggler,
-                    hasNavigationPanel: this.hasNavigationPanel,
-                    subjectEntityType: this.collection.entityType,
-                }, view => {
-                    view.render();
-                });
-            });
-        },
-
-        loadCategories: function () {
-            this.getTreeCollection(collection => {
-                this.createView('categories', 'views/record/list-tree', {
-                    collection: collection,
-                    el: this.options.el + ' .categories-container',
-                    selectable: true,
-                    showRoot: true,
-                    rootName: this.translate(this.scope, 'scopeNamesPlural'),
-                    buttonsDisabled: true,
-                    checkboxes: false,
-                    showEditLink: this.getAcl().check(this.categoryScope, 'edit'),
-                    isExpanded: this.isExpanded,
-                    hasExpandedToggler: this.hasExpandedToggler,
-                    menuDisabled: !this.isExpanded && this.hasNavigationPanel,
-                    readOnly: true,
-                }, view => {
-                    if (this.currentCategoryId) {
-                        view.setSelected(this.currentCategoryId);
-                    }
-
-                    view.render();
-
-                    this.listenTo(view, 'select', model => {
-                        if (!this.isExpanded) {
-                            var id = null;
-                            var name = null;
-
-                            if (model && model.id) {
-                                id = model.id;
-                                name = model.get('name');
-                            }
-
-                            this.openCategory(id, name);
-                            this.navigateToCurrentCategory();
-
-                            return;
-                        }
-
-                        this.currentCategoryId = null;
-                        this.currentCategoryName = '';
+                this.listenTo(view, 'select', model => {
+                    if (!this.isExpanded) {
+                        var id = null;
+                        var name = null;
 
                         if (model && model.id) {
-                            this.currentCategoryId = model.id;
-                            this.currentCategoryName = model.get('name');
+                            id = model.id;
+                            name = model.get('name');
                         }
 
-                        this.applyCategoryToCollection();
+                        this.openCategory(id, name);
+                        this.navigateToCurrentCategory();
 
-                        this.collection.abortLastFetch();
+                        return;
+                    }
 
-                        Espo.Ui.notify(' ... ');
+                    this.currentCategoryId = null;
+                    this.currentCategoryName = '';
 
-                        this.collection
-                            .fetch()
-                            .then(() => Espo.Ui.notify(false));
-                    });
+                    if (model && model.id) {
+                        this.currentCategoryId = model.id;
+                        this.currentCategoryName = model.get('name');
+                    }
+
+                    this.applyCategoryToCollection();
+
+                    this.collection.abortLastFetch();
+
+                    Espo.Ui.notify(' ... ');
+
+                    this.collection
+                        .fetch()
+                        .then(() => Espo.Ui.notify(false));
                 });
-
             });
-        },
 
-        applyCategoryToCollection: function () {
-            this.collection.whereFunction = () => {
-                var filter;
-                var isExpanded = this.isExpanded;
+        });
+    },
 
-                if (!isExpanded && !this.hasTextFilter()) {
-                    if (this.isCategoryMultiple()) {
-                        if (this.currentCategoryId) {
-                            filter = {
-                                attribute: this.categoryField,
-                                type: 'linkedWith',
-                                value: [this.currentCategoryId]
-                            };
-                        }
-                        else {
-                            filter = {
-                                attribute: this.categoryField,
-                                type: 'isNotLinked'
-                            };
-                        }
+    applyCategoryToCollection: function () {
+        this.collection.whereFunction = () => {
+            var filter;
+            var isExpanded = this.isExpanded;
+
+            if (!isExpanded && !this.hasTextFilter()) {
+                if (this.isCategoryMultiple()) {
+                    if (this.currentCategoryId) {
+                        filter = {
+                            attribute: this.categoryField,
+                            type: 'linkedWith',
+                            value: [this.currentCategoryId]
+                        };
                     }
                     else {
-                        if (this.currentCategoryId) {
-                            filter = {
-                                attribute: this.categoryField + 'Id',
-                                type: 'equals',
-                                value: this.currentCategoryId
-                            };
-                        }
-                        else {
-                            filter = {
-                                attribute: this.categoryField + 'Id',
-                                type: 'isNull'
-                            };
-                        }
+                        filter = {
+                            attribute: this.categoryField,
+                            type: 'isNotLinked'
+                        };
                     }
                 }
                 else {
                     if (this.currentCategoryId) {
                         filter = {
-                            attribute: this.categoryField,
-                            type: this.categoryFilterType,
-                            value: this.currentCategoryId,
+                            attribute: this.categoryField + 'Id',
+                            type: 'equals',
+                            value: this.currentCategoryId
+                        };
+                    }
+                    else {
+                        filter = {
+                            attribute: this.categoryField + 'Id',
+                            type: 'isNull'
                         };
                     }
                 }
-
-                if (filter) {
-                    return [filter];
-                }
-            };
-        },
-
-        isCategoryMultiple: function () {
-            return this.getMetadata()
-                .get(['entityDefs', this.scope, 'fields', this.categoryField, 'type']) === 'linkMultiple';
-        },
-
-        getCreateAttributes: function () {
-            let data;
-
-            if (this.isCategoryMultiple()) {
+            }
+            else {
                 if (this.currentCategoryId) {
-                    var names = {};
-
-                    names[this.currentCategoryId] = this.getCurrentCategoryName();
-
-                    data = {};
-
-                    var idsAttribute = this.categoryField + 'Ids';
-                    var namesAttribute = this.categoryField + 'Names';
-
-                    data[idsAttribute] = [this.currentCategoryId];
-                    data[namesAttribute] = names;
-
-                    return data;
+                    filter = {
+                        attribute: this.categoryField,
+                        type: this.categoryFilterType,
+                        value: this.currentCategoryId,
+                    };
                 }
-
-                return null;
             }
 
-            var idAttribute = this.categoryField + 'Id';
-            var nameAttribute = this.categoryField + 'Name';
+            if (filter) {
+                return [filter];
+            }
+        };
+    },
 
-            data = {};
+    isCategoryMultiple: function () {
+        return this.getMetadata()
+            .get(['entityDefs', this.scope, 'fields', this.categoryField, 'type']) === 'linkMultiple';
+    },
 
-            data[idAttribute] = this.currentCategoryId;
-            data[nameAttribute] = this.getCurrentCategoryName();
+    getCreateAttributes: function () {
+        let data;
 
-            return data;
-        },
+        if (this.isCategoryMultiple()) {
+            if (this.currentCategoryId) {
+                var names = {};
 
-        getCurrentCategoryName: function () {
-            if (this.currentCategoryName) {
-                return this.currentCategoryName;
+                names[this.currentCategoryId] = this.getCurrentCategoryName();
+
+                data = {};
+
+                var idsAttribute = this.categoryField + 'Ids';
+                var namesAttribute = this.categoryField + 'Names';
+
+                data[idsAttribute] = [this.currentCategoryId];
+                data[namesAttribute] = names;
+
+                return data;
             }
 
-            if (
-                this.nestedCategoriesCollection &&
-                this.nestedCategoriesCollection.categoryData &&
-                this.nestedCategoriesCollection.categoryData.name
-            ) {
-                return this.nestedCategoriesCollection.categoryData.name;
-            }
+            return null;
+        }
 
-            return this.currentCategoryId;
-        },
+        var idAttribute = this.categoryField + 'Id';
+        var nameAttribute = this.categoryField + 'Name';
 
-        actionManageCategories: function () {
-            this.clearView('categories');
-            this.clearView('nestedCategories');
+        data = {};
 
-            this.getRouter().navigate('#' + this.categoryScope, {trigger: true});
-        },
+        data[idAttribute] = this.currentCategoryId;
+        data[nameAttribute] = this.getCurrentCategoryName();
 
-        getHeader: function () {
-            if (!this.nestedCategoriesCollection) {
-                return Dep.prototype.getHeader.call(this);
-            }
+        return data;
+    },
 
-            let path = this.nestedCategoriesCollection.path;
+    getCurrentCategoryName: function () {
+        if (this.currentCategoryName) {
+            return this.currentCategoryName;
+        }
 
-            if (!path || path.length === 0) {
-                return Dep.prototype.getHeader.call(this);
-            }
+        if (
+            this.nestedCategoriesCollection &&
+            this.nestedCategoriesCollection.categoryData &&
+            this.nestedCategoriesCollection.categoryData.name
+        ) {
+            return this.nestedCategoriesCollection.categoryData.name;
+        }
 
-            let rootUrl = '#' + this.scope;
+        return this.currentCategoryId;
+    },
 
-            let $root = $('<a>')
-                .attr('href', rootUrl)
+    actionManageCategories: function () {
+        this.clearView('categories');
+        this.clearView('nestedCategories');
+
+        this.getRouter().navigate('#' + this.categoryScope, {trigger: true});
+    },
+
+    getHeader: function () {
+        if (!this.nestedCategoriesCollection) {
+            return Dep.prototype.getHeader.call(this);
+        }
+
+        let path = this.nestedCategoriesCollection.path;
+
+        if (!path || path.length === 0) {
+            return Dep.prototype.getHeader.call(this);
+        }
+
+        let rootUrl = '#' + this.scope;
+
+        let $root = $('<a>')
+            .attr('href', rootUrl)
+            .addClass('action')
+            .text(this.translate(this.scope, 'scopeNamesPlural'))
+            .addClass('action')
+            .attr('data-action', 'openCategory');
+
+        let list = [$root];
+
+        let currentName = this.nestedCategoriesCollection.categoryData.name;
+
+        let upperId = this.nestedCategoriesCollection.categoryData.upperId;
+        let upperName = this.nestedCategoriesCollection.categoryData.upperName;
+
+        if (path.length > 2) {
+            list.push('...');
+        }
+
+        if (upperId) {
+            let url = rootUrl + '/' + 'list/categoryId=' + this.escapeString(upperId);
+
+            let $folder = $('<a>')
+                .attr('href', url)
+                .text(upperName)
                 .addClass('action')
-                .text(this.translate(this.scope, 'scopeNamesPlural'))
-                .addClass('action')
-                .attr('data-action', 'openCategory');
+                .attr('data-action', 'openCategory')
+                .attr('data-id', upperId)
+                .attr('data-name', upperName);
 
-            let list = [$root];
+            list.push($folder);
+        }
 
-            let currentName = this.nestedCategoriesCollection.categoryData.name;
+        let $last = $('<span>').text(currentName);
 
-            let upperId = this.nestedCategoriesCollection.categoryData.upperId;
-            let upperName = this.nestedCategoriesCollection.categoryData.upperName;
+        list.push($last);
 
-            if (path.length > 2) {
-                list.push('...');
-            }
+        return this.buildHeaderHtml(list);
+    },
 
-            if (upperId) {
-                let url = rootUrl + '/' + 'list/categoryId=' + this.escapeString(upperId);
+    updateHeader: function () {
+        this.getView('header').reRender();
+    },
 
-                let $folder = $('<a>')
-                    .attr('href', url)
-                    .text(upperName)
-                    .addClass('action')
-                    .attr('data-action', 'openCategory')
-                    .attr('data-id', upperId)
-                    .attr('data-name', upperName);
+    hideListContainer: function () {
+        this.$listContainer.addClass('hidden');
+    },
 
-                list.push($folder);
-            }
+    showListContainer: function () {
+        this.$listContainer.removeClass('hidden');
+    },
 
-            let $last = $('<span>').text(currentName);
+    actionToggleNavigationPanel: function () {
+        let value = !this.hasNavigationPanel;
 
-            list.push($last);
+        this.hasNavigationPanel = value;
 
-            return this.buildHeaderHtml(list);
-        },
+        this.setNavigationPanelStoredValue(value);
 
-        updateHeader: function () {
-            this.getView('header').reRender();
-        },
-
-        hideListContainer: function () {
-            this.$listContainer.addClass('hidden');
-        },
-
-        showListContainer: function () {
-            this.$listContainer.removeClass('hidden');
-        },
-
-        actionToggleNavigationPanel: function () {
-            let value = !this.hasNavigationPanel;
-
-            this.hasNavigationPanel = value;
-
-            this.setNavigationPanelStoredValue(value);
-
-            this.reRender().then(() => {
-                this.loadNestedCategories();
-            });
-        },
-    });
+        this.reRender().then(() => {
+            this.loadNestedCategories();
+        });
+    },
 });
diff --git a/client/src/views/list.js b/client/src/views/list.js
index 5fe68a529e..c7f5dc426c 100644
--- a/client/src/views/list.js
+++ b/client/src/views/list.js
@@ -26,853 +26,847 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/list', ['views/main', 'search-manager'],
-function (Dep, /** typeof module:search-manager.Class */SearchManager) {
+/** @module module:views/list */
+
+import Dep from 'views/main';
+import SearchManager from 'search-manager';
+
+/**
+ * A list view page.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/main
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    /** @inheritDoc */
+    template: 'list',
+
+    /** @inheritDoc */
+    scope: null,
+
+    /** @inheritDoc */
+    name: 'List',
 
     /**
-     * A list view page.
+     * A header view name.
      *
-     * @class
-     * @name Class
-     * @extends module:views/main.Class
-     * @memberOf module:views/list
+     * @type {string}
      */
-    return Dep.extend(/** @lends module:views/list.Class# */{
+    headerView: 'views/header',
 
-        /**
-         * @inheritDoc
-         */
-        template: 'list',
+    /**
+     * A search view name.
+     *
+     * @type {string}
+     */
+    searchView: 'views/record/search',
 
-        /**
-         * @inheritDoc
-         */
-        scope: null,
+    /**
+     * A record/list view name.
+     *
+     * @type {string}
+     */
+    recordView: 'views/record/list',
 
-        /**
-         * @inheritDoc
-         */
-        name: 'List',
+    /**
+     * A record/kanban view name.
+     *
+     * @type {string}
+     */
+    recordKanbanView: 'views/record/kanban',
 
-        /**
-         * A header view name.
-         *
-         * @type {string}
-         */
-        headerView: 'views/header',
+    /**
+     * Has a search panel.
+     *
+     * @type {boolean}
+     */
+    searchPanel: true,
 
-        /**
-         * A search view name.
-         *
-         * @type {string}
-         */
-        searchView: 'views/record/search',
+    /**
+     * @type {module:search-manager}
+     */
+    searchManager: null,
 
-        /**
-         * A record/list view name.
-         *
-         * @type {string}
-         */
-        recordView: 'views/record/list',
+    /**
+     * Has a create button.
+     *
+     * @type {boolean}
+     */
+    createButton: true,
 
-        /**
-         * A record/kanban view name.
-         *
-         * @type {string}
-         */
-        recordKanbanView: 'views/record/kanban',
+    /**
+     * To use a modal dialog when creating a record.
+     *
+     * @type {boolean}
+     */
+    quickCreate: false,
 
-        /**
-         * Has a search panel.
-         *
-         * @type {boolean}
-         */
-        searchPanel: true,
+    /**
+     * @inheritDoc
+     */
+    optionsToPass: [],
 
-        /**
-         * @type {module:search-manager.Class}
-         */
-        searchManager: null,
+    /**
+     * After create a view will be stored, so it can be re-used after.
+     * Useful to avoid re-rendering when come back the list view.
+     *
+     * @type {boolean}
+     */
+    storeViewAfterCreate: false,
 
-        /**
-         * Has a create button.
-         *
-         * @type {boolean}
-         */
-        createButton: true,
+    /**
+     * After update a view will be stored, so it can be re-used after.
+     * Useful to avoid re-rendering when come back the list view.
+     *
+     * @type {boolean}
+     */
+    storeViewAfterUpdate: true,
 
-        /**
-         * To use a modal dialog when creating a record.
-         *
-         * @type {boolean}
-         */
-        quickCreate: false,
+    /**
+     * Use a current URL as a root URL when open a record. To be able to return to the same URL.
+     */
+    keepCurrentRootUrl: false,
 
-        /**
-         * @inheritDoc
-         */
-        optionsToPass: [],
+    /**
+     * A view mode. 'list', 'kanban`.
+     *
+     * @type {string}
+     */
+    viewMode: null,
 
-        /**
-         * After create a view will be stored, so it can be re-used after.
-         * Useful to avoid re-rendering when come back the list view.
-         *
-         * @type {boolean}
-         */
-        storeViewAfterCreate: false,
+    /**
+     * An available view mode list.
+     *
+     * @type {string[]}
+     */
+    viewModeList: null,
 
-        /**
-         * After update a view will be stored, so it can be re-used after.
-         * Useful to avoid re-rendering when come back the list view.
-         *
-         * @type {boolean}
-         */
-        storeViewAfterUpdate: true,
+    /**
+     * A default view mode.
+     *
+     * @type {string}
+     */
+    defaultViewMode: 'list',
 
-        /**
-         * Use a current URL as a root URL when open a record. To be able to return to the same URL.
-         */
-        keepCurrentRootUrl: false,
+    /**
+     * @const
+     */
+    MODE_LIST: 'list',
 
-        /**
-         * A view mode. 'list', 'kanban`.
-         *
-         * @type {string}
-         */
-        viewMode: null,
+    /**
+     * @const
+     */
+    MODE_KANBAN: 'kanban',
 
-        /**
-         * An available view mode list.
-         *
-         * @type {string[]}
-         */
-        viewModeList: null,
-
-        /**
-         * A default view mode.
-         *
-         * @type {string}
-         */
-        defaultViewMode: 'list',
-
-        /**
-         * @const
-         */
-        MODE_LIST: 'list',
-
-        /**
-         * @const
-         */
-        MODE_KANBAN: 'kanban',
-
-        /**
-         * @inheritDoc
-         */
-        shortcutKeys: {
-            'Control+Space': function (e) {
-                this.handleShortcutKeyCtrlSpace(e);
-            },
-            'Control+Slash': function (e) {
-                this.handleShortcutKeyCtrlSlash(e);
-            },
-            'Control+Comma': function (e) {
-                this.handleShortcutKeyCtrlComma(e);
-            },
-            'Control+Period': function (e) {
-                this.handleShortcutKeyCtrlPeriod(e);
-            },
+    /**
+     * @inheritDoc
+     */
+    shortcutKeys: {
+        'Control+Space': function (e) {
+            this.handleShortcutKeyCtrlSpace(e);
         },
+        'Control+Slash': function (e) {
+            this.handleShortcutKeyCtrlSlash(e);
+        },
+        'Control+Comma': function (e) {
+            this.handleShortcutKeyCtrlComma(e);
+        },
+        'Control+Period': function (e) {
+            this.handleShortcutKeyCtrlPeriod(e);
+        },
+    },
 
-        /**
-         * @inheritDoc
-         */
-        setup: function () {
-            this.collection.maxSize = this.getConfig().get('recordsPerPage') || this.collection.maxSize;
+    /**
+     * @inheritDoc
+     */
+    setup: function () {
+        this.collection.maxSize = this.getConfig().get('recordsPerPage') || this.collection.maxSize;
 
-            this.collectionUrl = this.collection.url;
-            this.collectionMaxSize = this.collection.maxSize;
+        this.collectionUrl = this.collection.url;
+        this.collectionMaxSize = this.collection.maxSize;
 
-            this.setupModes();
-            this.setViewMode(this.viewMode);
+        this.setupModes();
+        this.setViewMode(this.viewMode);
 
-            if (this.getMetadata().get(['clientDefs', this.scope, 'searchPanelDisabled'])) {
+        if (this.getMetadata().get(['clientDefs', this.scope, 'searchPanelDisabled'])) {
+            this.searchPanel = false;
+        }
+
+        if (this.getUser().isPortal()) {
+            if (this.getMetadata().get(['clientDefs', this.scope, 'searchPanelInPortalDisabled'])) {
                 this.searchPanel = false;
             }
+        }
 
-            if (this.getUser().isPortal()) {
-                if (this.getMetadata().get(['clientDefs', this.scope, 'searchPanelInPortalDisabled'])) {
-                    this.searchPanel = false;
+        if (this.getMetadata().get(['clientDefs', this.scope, 'createDisabled'])) {
+            this.createButton = false;
+        }
+
+        this.entityType = this.collection.name;
+
+        this.headerView = this.options.headerView || this.headerView;
+        this.recordView = this.options.recordView || this.recordView;
+        this.searchView = this.options.searchView || this.searchView;
+
+        this.setupHeader();
+
+        this.defaultOrderBy = this.defaultOrderBy || this.collection.orderBy;
+        this.defaultOrder = this.defaultOrder || this.collection.order;
+
+        this.collection.setOrder(this.defaultOrderBy, this.defaultOrder, true);
+
+        if (this.searchPanel) {
+            this.setupSearchManager();
+        }
+
+        this.setupSorting();
+
+        if (this.searchPanel) {
+            this.setupSearchPanel();
+        }
+
+        if (this.createButton) {
+            this.setupCreateButton();
+        }
+
+        if (this.options.params && this.options.params.fromAdmin) {
+            this.keepCurrentRootUrl = true;
+        }
+    },
+
+    setupFinal: function () {
+        Dep.prototype.setupFinal.call(this);
+
+        this.getHelper().processSetupHandlers(this, 'list');
+    },
+
+    /**
+     * Set up modes.
+     */
+    setupModes: function () {
+        this.defaultViewMode = this.options.defaultViewMode ||
+            this.getMetadata().get(['clientDefs', this.scope, 'listDefaultViewMode']) ||
+            this.defaultViewMode;
+
+        this.viewMode = this.viewMode || this.defaultViewMode;
+
+        var viewModeList = this.options.viewModeList ||
+            this.viewModeList ||
+            this.getMetadata().get(['clientDefs', this.scope, 'listViewModeList']);
+
+        if (viewModeList) {
+            this.viewModeList = viewModeList;
+        }
+        else {
+            this.viewModeList = [this.MODE_LIST];
+
+            if (this.getMetadata().get(['clientDefs', this.scope, 'kanbanViewMode'])) {
+                if (!~this.viewModeList.indexOf(this.MODE_KANBAN)) {
+                    this.viewModeList.push(this.MODE_KANBAN);
                 }
             }
+        }
 
-            if (this.getMetadata().get(['clientDefs', this.scope, 'createDisabled'])) {
-                this.createButton = false;
-            }
+        if (this.viewModeList.length > 1) {
+            this.viewMode = null;
 
-            this.entityType = this.collection.name;
+            var modeKey = 'listViewMode' + this.scope;
+            if (this.getStorage().has('state', modeKey)) {
 
-            this.headerView = this.options.headerView || this.headerView;
-            this.recordView = this.options.recordView || this.recordView;
-            this.searchView = this.options.searchView || this.searchView;
+                var storedViewMode = this.getStorage().get('state', modeKey);
 
-            this.setupHeader();
-
-            this.defaultOrderBy = this.defaultOrderBy || this.collection.orderBy;
-            this.defaultOrder = this.defaultOrder || this.collection.order;
-
-            this.collection.setOrder(this.defaultOrderBy, this.defaultOrder, true);
-
-            if (this.searchPanel) {
-                this.setupSearchManager();
-            }
-
-            this.setupSorting();
-
-            if (this.searchPanel) {
-                this.setupSearchPanel();
-            }
-
-            if (this.createButton) {
-                this.setupCreateButton();
-            }
-
-            if (this.options.params && this.options.params.fromAdmin) {
-                this.keepCurrentRootUrl = true;
-            }
-        },
-
-        setupFinal: function () {
-            Dep.prototype.setupFinal.call(this);
-
-            this.getHelper().processSetupHandlers(this, 'list');
-        },
-
-        /**
-         * Set up modes.
-         */
-        setupModes: function () {
-            this.defaultViewMode = this.options.defaultViewMode ||
-                this.getMetadata().get(['clientDefs', this.scope, 'listDefaultViewMode']) ||
-                this.defaultViewMode;
-
-            this.viewMode = this.viewMode || this.defaultViewMode;
-
-            var viewModeList = this.options.viewModeList ||
-                this.viewModeList ||
-                this.getMetadata().get(['clientDefs', this.scope, 'listViewModeList']);
-
-            if (viewModeList) {
-                this.viewModeList = viewModeList;
-            }
-            else {
-                this.viewModeList = [this.MODE_LIST];
-
-                if (this.getMetadata().get(['clientDefs', this.scope, 'kanbanViewMode'])) {
-                    if (!~this.viewModeList.indexOf(this.MODE_KANBAN)) {
-                        this.viewModeList.push(this.MODE_KANBAN);
+                if (storedViewMode) {
+                    if (~this.viewModeList.indexOf(storedViewMode)) {
+                        this.viewMode = storedViewMode;
                     }
                 }
             }
-
-            if (this.viewModeList.length > 1) {
-                this.viewMode = null;
-
-                var modeKey = 'listViewMode' + this.scope;
-                if (this.getStorage().has('state', modeKey)) {
-
-                    var storedViewMode = this.getStorage().get('state', modeKey);
-
-                    if (storedViewMode) {
-                        if (~this.viewModeList.indexOf(storedViewMode)) {
-                            this.viewMode = storedViewMode;
-                        }
-                    }
-                }
-                if (!this.viewMode) {
-                    this.viewMode = this.defaultViewMode;
-                }
+            if (!this.viewMode) {
+                this.viewMode = this.defaultViewMode;
             }
-        },
+        }
+    },
 
-        /**
-         * Set up a header.
-         */
-        setupHeader: function () {
-            this.createView('header', this.headerView, {
-                collection: this.collection,
-                el: '#main > .page-header',
-                scope: this.scope,
-                isXsSingleRow: true,
-            });
-        },
-
-        /**
-         * Set up a create button.
-         */
-        setupCreateButton: function () {
-            if (this.quickCreate) {
-                this.menu.buttons.unshift({
-                    action: 'quickCreate',
-                    iconHtml: '<span class="fas fa-plus fa-sm"></span>',
-                    text: this.translate('Create ' +  this.scope, 'labels', this.scope),
-                    style: 'default',
-                    acl: 'create',
-                    aclScope: this.entityType || this.scope,
-                    title: 'Ctrl+Space',
-                });
-
-                return;
-            }
+    /**
+     * Set up a header.
+     */
+    setupHeader: function () {
+        this.createView('header', this.headerView, {
+            collection: this.collection,
+            el: '#main > .page-header',
+            scope: this.scope,
+            isXsSingleRow: true,
+        });
+    },
 
+    /**
+     * Set up a create button.
+     */
+    setupCreateButton: function () {
+        if (this.quickCreate) {
             this.menu.buttons.unshift({
-                link: '#' + this.scope + '/create',
-                action: 'create',
+                action: 'quickCreate',
                 iconHtml: '<span class="fas fa-plus fa-sm"></span>',
-                text: this.translate('Create ' +  this.scope,  'labels', this.scope),
+                text: this.translate('Create ' +  this.scope, 'labels', this.scope),
                 style: 'default',
                 acl: 'create',
                 aclScope: this.entityType || this.scope,
                 title: 'Ctrl+Space',
             });
-        },
 
-        /**
-         * Set up a search panel.
-         *
-         * @protected
-         */
-        setupSearchPanel: function () {
-            this.createSearchView();
-        },
+            return;
+        }
 
-        /**
-         * Create a search view.
-         *
-         * @return {Promise<module:view.Class>}
-         * @protected
-         */
-        createSearchView: function () {
-            return this.createView('search', this.searchView, {
-                collection: this.collection,
-                el: '#main > .search-container',
-                searchManager: this.searchManager,
-                scope: this.scope,
-                viewMode: this.viewMode,
-                viewModeList: this.viewModeList,
-                isWide: true,
-            }, view => {
-                this.listenTo(view, 'reset', () => this.resetSorting());
+        this.menu.buttons.unshift({
+            link: '#' + this.scope + '/create',
+            action: 'create',
+            iconHtml: '<span class="fas fa-plus fa-sm"></span>',
+            text: this.translate('Create ' +  this.scope,  'labels', this.scope),
+            style: 'default',
+            acl: 'create',
+            aclScope: this.entityType || this.scope,
+            title: 'Ctrl+Space',
+        });
+    },
 
-                if (this.viewModeList.length > 1) {
-                    this.listenTo(view, 'change-view-mode', mode => this.switchViewMode(mode));
-                }
-            });
-        },
+    /**
+     * Set up a search panel.
+     *
+     * @protected
+     */
+    setupSearchPanel: function () {
+        this.createSearchView();
+    },
 
-        /**
-         * Switch a view mode.
-         *
-         * @param {string} mode
-         */
-        switchViewMode: function (mode) {
-            this.clearView('list');
-            this.collection.isFetched = false;
-            this.collection.reset();
-            this.applyStoredSorting();
-            this.setViewMode(mode, true);
+    /**
+     * Create a search view.
+     *
+     * @return {Promise<module:view>}
+     * @protected
+     */
+    createSearchView: function () {
+        return this.createView('search', this.searchView, {
+            collection: this.collection,
+            el: '#main > .search-container',
+            searchManager: this.searchManager,
+            scope: this.scope,
+            viewMode: this.viewMode,
+            viewModeList: this.viewModeList,
+            isWide: true,
+        }, view => {
+            this.listenTo(view, 'reset', () => this.resetSorting());
+
+            if (this.viewModeList.length > 1) {
+                this.listenTo(view, 'change-view-mode', mode => this.switchViewMode(mode));
+            }
+        });
+    },
+
+    /**
+     * Switch a view mode.
+     *
+     * @param {string} mode
+     */
+    switchViewMode: function (mode) {
+        this.clearView('list');
+        this.collection.isFetched = false;
+        this.collection.reset();
+        this.applyStoredSorting();
+        this.setViewMode(mode, true);
+        this.loadList();
+    },
+
+    /**
+     * Set a view mode.
+     *
+     * @param {string} mode A mode.
+     * @param {boolean} [toStore=false] To preserve a mode being set.
+     */
+    setViewMode: function (mode, toStore) {
+        this.viewMode = mode;
+
+        this.collection.url = this.collectionUrl;
+        this.collection.maxSize = this.collectionMaxSize;
+
+        if (toStore) {
+            var modeKey = 'listViewMode' + this.scope;
+
+            this.getStorage().set('state', modeKey, mode);
+        }
+
+        if (this.searchView && this.getView('search')) {
+            this.getView('search').setViewMode(mode);
+        }
+
+        var methodName = 'setViewMode' + Espo.Utils.upperCaseFirst(this.viewMode);
+
+        if (this[methodName]) {
+            this[methodName]();
+        }
+    },
+
+    /**
+     * Called when the kanban mode is set.
+     */
+    setViewModeKanban: function () {
+        this.collection.url = 'Kanban/' + this.scope;
+        this.collection.maxSize = this.getConfig().get('recordsPerPageKanban');
+        this.collection.resetOrderToDefault();
+    },
+
+    /**
+     * Reset sorting in a storage.
+     */
+    resetSorting: function () {
+        this.getStorage().clear('listSorting', this.collection.name);
+    },
+
+    /**
+     * Get default search data.
+     *
+     * @returns {Object}
+     */
+    getSearchDefaultData: function () {
+        return this.getMetadata().get('clientDefs.' + this.scope + '.defaultFilterData');
+    },
+
+    /**
+     * Set up a search manager.
+     */
+    setupSearchManager: function () {
+        var collection = this.collection;
+
+        var searchManager = new SearchManager(
+            collection,
+            'list',
+            this.getStorage(),
+            this.getDateTime(),
+            this.getSearchDefaultData()
+        );
+
+        searchManager.scope = this.scope;
+        searchManager.loadStored();
+
+        collection.where = searchManager.getWhere();
+
+        this.searchManager = searchManager;
+    },
+
+    /**
+     * Set up sorting.
+     */
+    setupSorting: function () {
+        if (!this.searchPanel) {
+            return;
+        }
+
+        this.applyStoredSorting();
+    },
+
+    /**
+     * Apply stored sorting.
+     */
+    applyStoredSorting: function () {
+        var sortingParams = this.getStorage().get('listSorting', this.collection.entityType) || {};
+
+        if ('orderBy' in sortingParams) {
+            this.collection.orderBy = sortingParams.orderBy;
+        }
+
+        if ('order' in sortingParams) {
+            this.collection.order = sortingParams.order;
+        }
+    },
+
+    /**
+     * @protected
+     * @return {module:views/record/search}
+     */
+    getSearchView: function () {
+        return this.getView('search');
+    },
+
+    /**
+     * @protected
+     * @return {module:view}
+     */
+    getRecordView: function () {
+        return this.getView('list');
+    },
+
+    /**
+     * Get a record view name.
+     *
+     * @returns {string}
+     */
+    getRecordViewName: function () {
+        if (this.viewMode === this.MODE_LIST) {
+            return this.getMetadata().get(['clientDefs', this.scope, 'recordViews', this.MODE_LIST]) ||
+                this.recordView;
+        }
+
+        var propertyName = 'record' + Espo.Utils.upperCaseFirst(this.viewMode) + 'View';
+
+        return this.getMetadata().get(['clientDefs', this.scope, 'recordViews', this.viewMode]) ||
+            this[propertyName];
+    },
+
+    /**
+     * @inheritDoc
+     */
+    afterRender: function () {
+        Espo.Ui.notify(false);
+
+        if (!this.hasView('list')) {
             this.loadList();
-        },
+        }
 
-        /**
-         * Set a view mode.
-         *
-         * @param {string} mode A mode.
-         * @param {boolean} [toStore=false] To preserve a mode being set.
-         */
-        setViewMode: function (mode, toStore) {
-            this.viewMode = mode;
+        this.$el.get(0).focus({preventScroll: true});
+    },
 
-            this.collection.url = this.collectionUrl;
-            this.collection.maxSize = this.collectionMaxSize;
+    /**
+     * Load a record list view.
+     */
+    loadList: function () {
+        var methodName = 'loadList' + Espo.Utils.upperCaseFirst(this.viewMode);
 
-            if (toStore) {
-                var modeKey = 'listViewMode' + this.scope;
+        if (this[methodName]) {
+            this[methodName]();
 
-                this.getStorage().set('state', modeKey, mode);
-            }
+            return;
+        }
 
-            if (this.searchView && this.getView('search')) {
-                this.getView('search').setViewMode(mode);
-            }
+        if (this.collection.isFetched) {
+            this.createListRecordView(false);
 
-            var methodName = 'setViewMode' + Espo.Utils.upperCaseFirst(this.viewMode);
+            return;
+        }
 
-            if (this[methodName]) {
-                this[methodName]();
-            }
-        },
+        Espo.Ui.notify(' ... ');
 
-        /**
-         * Called when the kanban mode is set.
-         */
-        setViewModeKanban: function () {
-            this.collection.url = 'Kanban/' + this.scope;
-            this.collection.maxSize = this.getConfig().get('recordsPerPageKanban');
-            this.collection.resetOrderToDefault();
-        },
+        this.createListRecordView(true);
+    },
 
-        /**
-         * Reset sorting in a storage.
-         */
-        resetSorting: function () {
-            this.getStorage().clear('listSorting', this.collection.name);
-        },
+    /**
+     * Prepare record view options. Options can be modified in an extended method.
+     *
+     * @param {Object} options Options
+     */
+    prepareRecordViewOptions: function (options) {},
 
-        /**
-         * Get default search data.
-         *
-         * @returns {Object}
-         */
-        getSearchDefaultData: function () {
-            return this.getMetadata().get('clientDefs.' + this.scope + '.defaultFilterData');
-        },
+    /**
+     * Create a record list view.
+     *
+     * @param {boolean} [fetch=false] To fetch after creation.
+     * @return {Promise<module:views/record/list>}
+     */
+    createListRecordView: function (fetch) {
+        let o = {
+            collection: this.collection,
+            el: this.options.el + ' .list-container',
+            scope: this.scope,
+            skipBuildRows: true,
+            shortcutKeysEnabled: true,
+            forceDisplayTopBar: true,
+        };
 
-        /**
-         * Set up a search manager.
-         */
-        setupSearchManager: function () {
-            var collection = this.collection;
+        this.optionsToPass.forEach(option => {
+            o[option] = this.options[option];
+        });
 
-            var searchManager = new SearchManager(
-                collection,
-                'list',
-                this.getStorage(),
-                this.getDateTime(),
-                this.getSearchDefaultData()
-            );
+        if (this.keepCurrentRootUrl) {
+            o.keepCurrentRootUrl = true;
+        }
 
-            searchManager.scope = this.scope;
-            searchManager.loadStored();
+        if (
+            this.getConfig().get('listPagination') ||
+            this.getMetadata().get(['clientDefs', this.scope, 'listPagination'])
+        ) {
+            o.pagination = true;
+        }
 
-            collection.where = searchManager.getWhere();
+        this.prepareRecordViewOptions(o);
 
-            this.searchManager = searchManager;
-        },
+        let listViewName = this.getRecordViewName();
 
-        /**
-         * Set up sorting.
-         */
-        setupSorting: function () {
-            if (!this.searchPanel) {
-                return;
-            }
-
-            this.applyStoredSorting();
-        },
-
-        /**
-         * Apply stored sorting.
-         */
-        applyStoredSorting: function () {
-            var sortingParams = this.getStorage().get('listSorting', this.collection.entityType) || {};
-
-            if ('orderBy' in sortingParams) {
-                this.collection.orderBy = sortingParams.orderBy;
-            }
-
-            if ('order' in sortingParams) {
-                this.collection.order = sortingParams.order;
-            }
-        },
-
-        /**
-         * @protected
-         * @return {?module:views/record/search.Class}
-         */
-        getSearchView: function () {
-            return this.getView('search');
-        },
-
-        /**
-         * @protected
-         * @return {?module:view}
-         */
-        getRecordView: function () {
-            return this.getView('list');
-        },
-
-        /**
-         * Get a record view name.
-         *
-         * @returns {string}
-         */
-        getRecordViewName: function () {
-            if (this.viewMode === this.MODE_LIST) {
-                return this.getMetadata().get(['clientDefs', this.scope, 'recordViews', this.MODE_LIST]) ||
-                    this.recordView;
-            }
-
-            var propertyName = 'record' + Espo.Utils.upperCaseFirst(this.viewMode) + 'View';
-
-            return this.getMetadata().get(['clientDefs', this.scope, 'recordViews', this.viewMode]) ||
-                this[propertyName];
-        },
-
-        /**
-         * @inheritDoc
-         */
-        afterRender: function () {
-            Espo.Ui.notify(false);
-
-            if (!this.hasView('list')) {
-                this.loadList();
-            }
-
-            this.$el.get(0).focus({preventScroll: true});
-        },
-
-        /**
-         * Load a record list view.
-         */
-        loadList: function () {
-            var methodName = 'loadList' + Espo.Utils.upperCaseFirst(this.viewMode);
-
-            if (this[methodName]) {
-                this[methodName]();
+        return this.createView('list', listViewName, o, view => {
+            if (!this.hasParentView()) {
+                view.undelegateEvents();
 
                 return;
             }
 
-            if (this.collection.isFetched) {
-                this.createListRecordView(false);
-
-                return;
-            }
-
-            Espo.Ui.notify(' ... ');
-
-            this.createListRecordView(true);
-        },
-
-        /**
-         * Prepare record view options. Options can be modified in an extended method.
-         *
-         * @param {Object} options Options
-         */
-        prepareRecordViewOptions: function (options) {},
-
-        /**
-         * Create a record list view.
-         *
-         * @param {boolean} [fetch=false] To fetch after creation.
-         * @return {Promise<module:views/record/list.Class>}
-         */
-        createListRecordView: function (fetch) {
-            let o = {
-                collection: this.collection,
-                el: this.options.el + ' .list-container',
-                scope: this.scope,
-                skipBuildRows: true,
-                shortcutKeysEnabled: true,
-                forceDisplayTopBar: true,
-            };
-
-            this.optionsToPass.forEach(option => {
-                o[option] = this.options[option];
-            });
-
-            if (this.keepCurrentRootUrl) {
-                o.keepCurrentRootUrl = true;
-            }
-
-            if (
-                this.getConfig().get('listPagination') ||
-                this.getMetadata().get(['clientDefs', this.scope, 'listPagination'])
-            ) {
-                o.pagination = true;
-            }
-
-            this.prepareRecordViewOptions(o);
-
-            let listViewName = this.getRecordViewName();
-
-            return this.createView('list', listViewName, o, view => {
+            this.listenToOnce(view, 'after:render', () => {
                 if (!this.hasParentView()) {
                     view.undelegateEvents();
 
-                    return;
+                    this.clearView('list');
                 }
-
-                this.listenToOnce(view, 'after:render', () => {
-                    if (!this.hasParentView()) {
-                        view.undelegateEvents();
-
-                        this.clearView('list');
-                    }
-                });
-
-                if (!fetch) {
-                    Espo.Ui.notify(false);
-                }
-
-                if (this.searchPanel) {
-                    this.listenTo(view, 'sort', obj => {
-                        this.getStorage().set('listSorting', this.collection.name, obj);
-                    });
-                }
-
-                if (fetch) {
-                    view.getSelectAttributeList(selectAttributeList => {
-                        if (this.options.mediator && this.options.mediator.abort) {
-                            return;
-                        }
-
-                        if (selectAttributeList) {
-                            this.collection.data.select = selectAttributeList.join(',');
-                        }
-
-                        Espo.Ui.notify(' ... ');
-
-                        this.collection.fetch({main: true})
-                            .then(() => Espo.Ui.notify(false));
-
-                    });
-
-                    return;
-                }
-
-                view.render();
             });
-        },
 
-        /**
-         * @inheritDoc
-         */
-        getHeader: function () {
-            if (this.options.params && this.options.params.fromAdmin) {
-                let $root = $('<a>')
-                    .attr('href', '#Admin')
-                    .text(this.translate('Administration', 'labels', 'Admin'));
-
-                let $scope = $('<span>')
-                    .text(this.getLanguage().translate(this.scope, 'scopeNamesPlural'));
-
-                return this.buildHeaderHtml([$root, $scope]);
+            if (!fetch) {
+                Espo.Ui.notify(false);
             }
 
-            let $root = $('<span>')
+            if (this.searchPanel) {
+                this.listenTo(view, 'sort', obj => {
+                    this.getStorage().set('listSorting', this.collection.name, obj);
+                });
+            }
+
+            if (fetch) {
+                view.getSelectAttributeList(selectAttributeList => {
+                    if (this.options.mediator && this.options.mediator.abort) {
+                        return;
+                    }
+
+                    if (selectAttributeList) {
+                        this.collection.data.select = selectAttributeList.join(',');
+                    }
+
+                    Espo.Ui.notify(' ... ');
+
+                    this.collection.fetch({main: true})
+                        .then(() => Espo.Ui.notify(false));
+
+                });
+
+                return;
+            }
+
+            view.render();
+        });
+    },
+
+    /**
+     * @inheritDoc
+     */
+    getHeader: function () {
+        if (this.options.params && this.options.params.fromAdmin) {
+            let $root = $('<a>')
+                .attr('href', '#Admin')
+                .text(this.translate('Administration', 'labels', 'Admin'));
+
+            let $scope = $('<span>')
                 .text(this.getLanguage().translate(this.scope, 'scopeNamesPlural'));
 
-            let headerIconHtml = this.getHeaderIconHtml();
+            return this.buildHeaderHtml([$root, $scope]);
+        }
 
-            if (headerIconHtml) {
-                $root.prepend(headerIconHtml);
-            }
+        let $root = $('<span>')
+            .text(this.getLanguage().translate(this.scope, 'scopeNamesPlural'));
 
-            return this.buildHeaderHtml([$root]);
-        },
+        let headerIconHtml = this.getHeaderIconHtml();
 
-        /**
-         * @inheritDoc
-         */
-        updatePageTitle: function () {
-            this.setPageTitle(this.getLanguage().translate(this.scope, 'scopeNamesPlural'));
-        },
+        if (headerIconHtml) {
+            $root.prepend(headerIconHtml);
+        }
 
-        /**
-         * Create attributes for an entity being created.
-         *
-         * @return {Object}
-         */
-        getCreateAttributes: function () {},
+        return this.buildHeaderHtml([$root]);
+    },
 
-        /**
-         * Prepare return dispatch parameters to pass to a view when creating a record.
-         * To pass some data to restore when returning to the list view.
-         *
-         * Example:
-         * ```
-         * params.options.categoryId = this.currentCategoryId;
-         * params.options.categoryName = this.currentCategoryName;
-         * ```
-         *
-         * @param {Object} params Parameters to be modified.
-         */
-        prepareCreateReturnDispatchParams: function (params) {},
+    /**
+     * @inheritDoc
+     */
+    updatePageTitle: function () {
+        this.setPageTitle(this.getLanguage().translate(this.scope, 'scopeNamesPlural'));
+    },
 
-        /**
-         * Action `quickCreate`.
-         *
-         * @param {Object.<string,*>} [data]
-         * @returns {Promise<module:views/modals/edit.Class>}
-         */
-        actionQuickCreate: function (data) {
-            data = data || {};
+    /**
+     * Create attributes for an entity being created.
+     *
+     * @return {Object}
+     */
+    getCreateAttributes: function () {},
 
-            let attributes = this.getCreateAttributes() || {};
+    /**
+     * Prepare return dispatch parameters to pass to a view when creating a record.
+     * To pass some data to restore when returning to the list view.
+     *
+     * Example:
+     * ```
+     * params.options.categoryId = this.currentCategoryId;
+     * params.options.categoryName = this.currentCategoryName;
+     * ```
+     *
+     * @param {Object} params Parameters to be modified.
+     */
+    prepareCreateReturnDispatchParams: function (params) {},
 
-            Espo.Ui.notify(' ... ');
+    /**
+     * Action `quickCreate`.
+     *
+     * @param {Object.<string,*>} [data]
+     * @returns {Promise<module:views/modals/edit>}
+     */
+    actionQuickCreate: function (data) {
+        data = data || {};
 
-            let viewName = this.getMetadata().get('clientDefs.' + this.scope + '.modalViews.edit') ||
-                'views/modals/edit';
+        let attributes = this.getCreateAttributes() || {};
 
-            let options = {
-                scope: this.scope,
-                attributes: attributes,
-            };
+        Espo.Ui.notify(' ... ');
 
-            if (this.keepCurrentRootUrl) {
-                options.rootUrl = this.getRouter().getCurrentUrl();
-            }
+        let viewName = this.getMetadata().get('clientDefs.' + this.scope + '.modalViews.edit') ||
+            'views/modals/edit';
 
-            if (data.focusForCreate) {
-                options.focusForCreate = true;
-            }
+        let options = {
+            scope: this.scope,
+            attributes: attributes,
+        };
 
-            let returnDispatchParams = {
-                controller: this.scope,
-                action: null,
-                options: {isReturn: true},
-            };
+        if (this.keepCurrentRootUrl) {
+            options.rootUrl = this.getRouter().getCurrentUrl();
+        }
 
-            this.prepareCreateReturnDispatchParams(returnDispatchParams);
+        if (data.focusForCreate) {
+            options.focusForCreate = true;
+        }
 
-            _.extend(options, {
-                returnUrl: this.getRouter().getCurrentUrl(),
-                returnDispatchParams: returnDispatchParams,
+        let returnDispatchParams = {
+            controller: this.scope,
+            action: null,
+            options: {isReturn: true},
+        };
+
+        this.prepareCreateReturnDispatchParams(returnDispatchParams);
+
+        _.extend(options, {
+            returnUrl: this.getRouter().getCurrentUrl(),
+            returnDispatchParams: returnDispatchParams,
+        });
+
+        return this.createView('quickCreate', viewName, options, (view) => {
+            view.render();
+            view.notify(false);
+
+            this.listenToOnce(view, 'after:save', () => {
+                this.collection.fetch();
             });
+        });
+    },
 
-            return this.createView('quickCreate', viewName, options, (view) => {
-                view.render();
-                view.notify(false);
+    /**
+     * Action `create'.
+     *
+     * @param {Object.<string,*>} [data]
+     */
+    actionCreate: function (data) {
+        data = data || {};
 
-                this.listenToOnce(view, 'after:save', () => {
-                    this.collection.fetch();
-                });
-            });
-        },
+        let router = this.getRouter();
 
-        /**
-         * Action `create'.
-         *
-         * @param {Object.<string,*>} [data]
-         */
-        actionCreate: function (data) {
-            data = data || {};
+        let url = '#' + this.scope + '/create';
+        let attributes = this.getCreateAttributes() || {};
 
-            let router = this.getRouter();
+        let options = {attributes: attributes};
 
-            let url = '#' + this.scope + '/create';
-            let attributes = this.getCreateAttributes() || {};
+        if (this.keepCurrentRootUrl) {
+            options.rootUrl = this.getRouter().getCurrentUrl();
+        }
 
-            let options = {attributes: attributes};
+        if (data.focusForCreate) {
+            options.focusForCreate = true;
+        }
 
-            if (this.keepCurrentRootUrl) {
-                options.rootUrl = this.getRouter().getCurrentUrl();
-            }
+        let returnDispatchParams = {
+            controller: this.scope,
+            action: null,
+            options: {isReturn: true},
+        };
 
-            if (data.focusForCreate) {
-                options.focusForCreate = true;
-            }
+        this.prepareCreateReturnDispatchParams(returnDispatchParams);
 
-            let returnDispatchParams = {
-                controller: this.scope,
-                action: null,
-                options: {isReturn: true},
-            };
+        _.extend(options, {
+            returnUrl: this.getRouter().getCurrentUrl(),
+            returnDispatchParams: returnDispatchParams
+        });
 
-            this.prepareCreateReturnDispatchParams(returnDispatchParams);
+        router.navigate(url, {trigger: false});
+        router.dispatch(this.scope, 'create', options);
+    },
 
-            _.extend(options, {
-                returnUrl: this.getRouter().getCurrentUrl(),
-                returnDispatchParams: returnDispatchParams
-            });
+    /**
+     * Whether the view is actual to be reused.
+     *
+     * @returns {boolean}
+     */
+    isActualForReuse: function () {
+        return this.collection.isFetched;
+    },
 
-            router.navigate(url, {trigger: false});
-            router.dispatch(this.scope, 'create', options);
-        },
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlSpace: function (e) {
+        if (!this.createButton) {
+            return;
+        }
 
-        /**
-         * Whether the view is actual to be reused.
-         *
-         * @returns {boolean}
-         */
-        isActualForReuse: function () {
-            return this.collection.isFetched;
-        },
+        /*if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
+            return;
+        }*/
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlSpace: function (e) {
-            if (!this.createButton) {
-                return;
-            }
+        if (!this.getAcl().checkScope(this.scope, 'create')) {
+            return;
+        }
 
-            /*if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
-                return;
-            }*/
+        e.preventDefault();
+        e.stopPropagation();
 
-            if (!this.getAcl().checkScope(this.scope, 'create')) {
-                return;
-            }
+        if (this.quickCreate) {
+            this.actionQuickCreate({focusForCreate: true});
 
-            e.preventDefault();
-            e.stopPropagation();
+            return;
+        }
 
-            if (this.quickCreate) {
-                this.actionQuickCreate({focusForCreate: true});
+        this.actionCreate({focusForCreate: true});
+    },
 
-                return;
-            }
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlSlash: function (e) {
+        if (!this.searchPanel) {
+            return;
+        }
 
-            this.actionCreate({focusForCreate: true});
-        },
+        let $search = this.$el.find('input.text-filter').first();
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlSlash: function (e) {
-            if (!this.searchPanel) {
-                return;
-            }
+        if (!$search.length) {
+            return;
+        }
 
-            let $search = this.$el.find('input.text-filter').first();
+        e.preventDefault();
+        e.stopPropagation();
 
-            if (!$search.length) {
-                return;
-            }
+        $search.focus();
+    },
 
-            e.preventDefault();
-            e.stopPropagation();
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlComma: function (e) {
+        if (!this.getSearchView()) {
+            return;
+        }
 
-            $search.focus();
-        },
+        this.getSearchView().selectPreviousPreset();
+    },
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlComma: function (e) {
-            if (!this.getSearchView()) {
-                return;
-            }
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlPeriod: function (e) {
+        if (!this.getSearchView()) {
+            return;
+        }
 
-            this.getSearchView().selectPreviousPreset();
-        },
-
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlPeriod: function (e) {
-            if (!this.getSearchView()) {
-                return;
-            }
-
-            this.getSearchView().selectNextPreset();
-        },
-    });
+        this.getSearchView().selectNextPreset();
+    },
 });
diff --git a/client/src/views/login-second-step.js b/client/src/views/login-second-step.js
index a8b39c1e65..ef1b09831b 100644
--- a/client/src/views/login-second-step.js
+++ b/client/src/views/login-second-step.js
@@ -26,236 +26,236 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/login-second-step', ['view'], function (Dep) {
+/** @module views/login-second-step */
+
+import Dep from 'view';
+
+/**
+ * @class
+ * @name Class
+ * @extends module:view
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    /** @inheritDoc */
+    template: 'login-second-step',
+
+    /** @inheritDoc */
+    views: {
+        footer: {
+            el: 'body > footer',
+            view: 'views/site/footer'
+        },
+    },
 
     /**
-     * @class
-     * @name Class
-     * @extends module:view.Class
-     * @memberOf module:views/login-second-step
+     * @type {?string}
+     * @private
      */
-    return Dep.extend(/** @lends module:views/login-second-step.Class# */{
+    anotherUser: null,
 
-        /** @inheritDoc */
-        template: 'login-second-step',
+    /**
+     * Response from the first step.
+     *
+     * @type {Object.<string, *>}
+     * @private
+     */
+    loginData: null,
 
-        /** @inheritDoc */
-        views: {
-            footer: {
-                el: 'body > footer',
-                view: 'views/site/footer'
-            },
+    /**
+     * Headers composed in the first step.
+     *
+     * @type {Object.<string, string>}
+     * @private
+     */
+    headers: null,
+
+    /** @private */
+    isPopoverDestroyed: false,
+
+    /** @inheritDoc */
+    events: {
+        'submit #login-form': function (e) {
+            e.preventDefault();
+
+            this.send();
         },
-
-        /**
-         * @type {?string}
-         * @private
-         */
-        anotherUser: null,
-
-        /**
-         * Response from the first step.
-         *
-         * @type {Object.<string, *>}
-         * @private
-         */
-        loginData: null,
-
-        /**
-         * Headers composed in the first step.
-         *
-         * @type {Object.<string, string>}
-         * @private
-         */
-        headers: null,
-
-        /** @private */
-        isPopoverDestroyed: false,
-
-        /** @inheritDoc */
-        events: {
-            'submit #login-form': function (e) {
+        'click [data-action="backToLogin"]': function () {
+            this.trigger('back');
+        },
+        'keydown': function (e) {
+            if (Espo.Utils.getKeyFromKeyEvent(e) === 'Control+Enter') {
                 e.preventDefault();
 
                 this.send();
-            },
-            'click [data-action="backToLogin"]': function () {
-                this.trigger('back');
-            },
-            'keydown': function (e) {
-                if (Espo.Utils.getKeyFromKeyEvent(e) === 'Control+Enter') {
-                    e.preventDefault();
+            }
+        },
+    },
 
-                    this.send();
+    /** @inheritDoc */
+    data: function () {
+        return {
+            message: this.message,
+        };
+    },
+
+    /** @inheritDoc */
+    setup: function () {
+        this.message = this.translate(this.options.loginData.message, 'messages', 'User');
+        this.anotherUser = this.options.anotherUser || null;
+        this.headers = this.options.headers || {};
+        this.loginData = this.options.loginData;
+    },
+
+    /** @inheritDoc */
+    afterRender: function () {
+        this.$code = $('[data-name="field-code"]');
+        this.$submit = this.$el.find('#btn-send');
+
+        this.$code.focus();
+    },
+
+    /**
+     * @private
+     */
+    send: function () {
+        let code = this.$code.val().trim().replace(/\s/g, '');
+
+        let userName = this.options.userName;
+        let token = this.loginData.token;
+        let headers = Espo.Utils.clone(this.headers);
+
+        if (code === '') {
+            this.processEmptyCode();
+
+            return;
+        }
+
+        this.disableForm();
+
+        if (userName && token) {
+            let authString = Base64.encode(userName  + ':' + token);
+
+            headers['Authorization'] = 'Basic ' + authString;
+            headers['Espo-Authorization'] = authString;
+        }
+
+        headers['Espo-Authorization-Code'] = code;
+        headers['Espo-Authorization-Create-Token-Secret'] = 'true';
+
+        if (this.anotherUser !== null) {
+            headers['X-Another-User'] = this.anotherUser;
+        }
+
+        this.notifyLoading();
+
+        Espo.Ajax
+            .getRequest('App/user', null, {
+                login: true,
+                headers: headers,
+            })
+            .then(data => {
+                Espo.Ui.notify(false);
+
+                this.triggerLogin(userName, data);
+            })
+            .catch(xhr => {
+                this.undisableForm();
+
+                if (xhr.status === 401) {
+                    this.onWrongCredentials();
                 }
-            },
-        },
+            });
+    },
 
-        /** @inheritDoc */
-        data: function () {
-            return {
-                message: this.message,
-            };
-        },
+    /**
+     * Trigger login to proceed to the application.
+     *
+     * @private
+     * @param {string} userName A username.
+     * @param {Object.<string, *>} data Data returned from the `App/user` request.
+     */
+    triggerLogin: function (userName, data) {
+        if (this.anotherUser) {
+            data.anotherUser = this.anotherUser;
+        }
 
-        /** @inheritDoc */
-        setup: function () {
-            this.message = this.translate(this.options.loginData.message, 'messages', 'User');
-            this.anotherUser = this.options.anotherUser || null;
-            this.headers = this.options.headers || {};
-            this.loginData = this.options.loginData;
-        },
+        if (!userName) {
+            userName = (data.user || {}).userName;
+        }
 
-        /** @inheritDoc */
-        afterRender: function () {
-            this.$code = $('[data-name="field-code"]');
-            this.$submit = this.$el.find('#btn-send');
+        this.trigger('login', userName, data);
+    },
 
-            this.$code.focus();
-        },
+    /**
+     * @private
+     */
+    processEmptyCode: function () {
+        this.isPopoverDestroyed = false;
 
-        /**
-         * @private
-         */
-        send: function () {
-            let code = this.$code.val().trim().replace(/\s/g, '');
+        let $el = this.$code;
 
-            let userName = this.options.userName;
-            let token = this.loginData.token;
-            let headers = Espo.Utils.clone(this.headers);
+        let message = this.getLanguage().translate('codeIsRequired', 'messages', 'User');
 
-            if (code === '') {
-                this.processEmptyCode();
+        $el
+            .popover({
+                placement: 'bottom',
+                container: 'body',
+                content: message,
+                trigger: 'manual',
+            })
+            .popover('show');
 
+        let $cell = $el.closest('.form-group');
+
+        $cell.addClass('has-error');
+
+        $el.one('mousedown click', () => {
+            $cell.removeClass('has-error');
+
+            if (this.isPopoverDestroyed) {
                 return;
             }
 
-            this.disableForm();
+            $el.popover('destroy');
 
-            if (userName && token) {
-                let authString = Base64.encode(userName  + ':' + token);
+            this.isPopoverDestroyed = true;
+        });
+    },
 
-                headers['Authorization'] = 'Basic ' + authString;
-                headers['Espo-Authorization'] = authString;
-            }
+    /**
+     * @private
+     */
+    onWrongCredentials: function () {
+        let $cell = $('#login .form-group');
 
-            headers['Espo-Authorization-Code'] = code;
-            headers['Espo-Authorization-Create-Token-Secret'] = 'true';
+        $cell.addClass('has-error');
 
-            if (this.anotherUser !== null) {
-                headers['X-Another-User'] = this.anotherUser;
-            }
+        this.$el.one('mousedown click', () => {
+            $cell.removeClass('has-error');
+        });
 
-            this.notifyLoading();
+        Espo.Ui.error(this.translate('wrongCode', 'messages', 'User'));
+    },
 
-            Espo.Ajax
-                .getRequest('App/user', null, {
-                    login: true,
-                    headers: headers,
-                })
-                .then(data => {
-                    Espo.Ui.notify(false);
+    /**
+     * @private
+     */
+    notifyLoading: function () {
+        Espo.Ui.notify(' ... ');
+    },
 
-                    this.triggerLogin(userName, data);
-                })
-                .catch(xhr => {
-                    this.undisableForm();
+    /**
+     * @private
+     */
+    disableForm: function () {
+        this.$submit.addClass('disabled').attr('disabled', 'disabled');
+    },
 
-                    if (xhr.status === 401) {
-                        this.onWrongCredentials();
-                    }
-                });
-        },
-
-        /**
-         * Trigger login to proceed to the application.
-         *
-         * @private
-         * @param {string} userName A username.
-         * @param {Object.<string, *>} data Data returned from the `App/user` request.
-         */
-        triggerLogin: function (userName, data) {
-            if (this.anotherUser) {
-                data.anotherUser = this.anotherUser;
-            }
-
-            if (!userName) {
-                userName = (data.user || {}).userName;
-            }
-
-            this.trigger('login', userName, data);
-        },
-
-        /**
-         * @private
-         */
-        processEmptyCode: function () {
-            this.isPopoverDestroyed = false;
-
-            let $el = this.$code;
-
-            let message = this.getLanguage().translate('codeIsRequired', 'messages', 'User');
-
-            $el
-                .popover({
-                    placement: 'bottom',
-                    container: 'body',
-                    content: message,
-                    trigger: 'manual',
-                })
-                .popover('show');
-
-            let $cell = $el.closest('.form-group');
-
-            $cell.addClass('has-error');
-
-            $el.one('mousedown click', () => {
-                $cell.removeClass('has-error');
-
-                if (this.isPopoverDestroyed) {
-                    return;
-                }
-
-                $el.popover('destroy');
-
-                this.isPopoverDestroyed = true;
-            });
-        },
-
-        /**
-         * @private
-         */
-        onWrongCredentials: function () {
-            let $cell = $('#login .form-group');
-
-            $cell.addClass('has-error');
-
-            this.$el.one('mousedown click', () => {
-                $cell.removeClass('has-error');
-            });
-
-            Espo.Ui.error(this.translate('wrongCode', 'messages', 'User'));
-        },
-
-        /**
-         * @private
-         */
-        notifyLoading: function () {
-            Espo.Ui.notify(' ... ');
-        },
-
-        /**
-         * @private
-         */
-        disableForm: function () {
-            this.$submit.addClass('disabled').attr('disabled', 'disabled');
-        },
-
-        /**
-         * @private
-         */
-        undisableForm: function () {
-            this.$submit.removeClass('disabled').removeAttr('disabled');
-        },
-    });
+    /**
+     * @private
+     */
+    undisableForm: function () {
+        this.$submit.removeClass('disabled').removeAttr('disabled');
+    },
 });
diff --git a/client/src/views/login.js b/client/src/views/login.js
index 55310c6717..acf55b9229 100644
--- a/client/src/views/login.js
+++ b/client/src/views/login.js
@@ -26,410 +26,411 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/login', ['view'], function (Dep) {
+/** @module views/login */
+
+import Dep from 'view';
+import Base64 from 'lib!base64';
+
+/**
+ * @class
+ * @name Class
+ * @extends module:view
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    /** @inheritDoc */
+    template: 'login',
+
+    /** @inheritDoc */
+    views: {
+        footer: {
+            el: 'body > footer',
+            view: 'views/site/footer',
+        },
+    },
 
     /**
-     * @class
-     * @name Class
-     * @extends module:view.Class
-     * @memberOf module:views/login
+     * @type {?string}
+     * @private
      */
-    return Dep.extend(/** @lends module:views/login.Class# */{
+    anotherUser: null,
 
-        /** @inheritDoc */
-        template: 'login',
+    /** @private */
+    isPopoverDestroyed: false,
 
-        /** @inheritDoc */
-        views: {
-            footer: {
-                el: 'body > footer',
-                view: 'views/site/footer',
-            },
+    /**
+     * @type {module:handlers/login}
+     * @private
+     */
+    handler: null,
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    fallback: false,
+
+    /**
+     * @type {?string}
+     * @private
+     */
+    method: null,
+
+    /** @inheritDoc */
+    events: {
+        'submit #login-form': function (e) {
+            e.preventDefault();
+
+            this.login();
         },
-
-        /**
-         * @type {?string}
-         * @private
-         */
-        anotherUser: null,
-
-        /** @private */
-        isPopoverDestroyed: false,
-
-        /**
-         * @type {module:handlers/login.Class}
-         * @private
-         */
-        handler: null,
-
-        /**
-         * @type {boolean}
-         * @private
-         */
-        fallback: false,
-
-        /**
-         * @type {?string}
-         * @private
-         */
-        method: null,
-
-        /** @inheritDoc */
-        events: {
-            'submit #login-form': function (e) {
+        'click #sign-in': function () {
+            this.signIn();
+        },
+        'click a[data-action="passwordChangeRequest"]': function () {
+            this.showPasswordChangeRequest();
+        },
+        'click a[data-action="showFallback"]': function () {
+            this.showFallback();
+        },
+        'keydown': function (e) {
+            if (Espo.Utils.getKeyFromKeyEvent(e) === 'Control+Enter') {
                 e.preventDefault();
 
-                this.login();
-            },
-            'click #sign-in': function (e) {
-                this.signIn();
-            },
-            'click a[data-action="passwordChangeRequest"]': function () {
-                this.showPasswordChangeRequest();
-            },
-            'click a[data-action="showFallback"]': function () {
-                this.showFallback();
-            },
-            'keydown': function (e) {
-                if (Espo.Utils.getKeyFromKeyEvent(e) === 'Control+Enter') {
-                    e.preventDefault();
+                if (
+                    this.handler &&
+                    (!this.fallback || !this.$username.val())
+                ) {
+                    this.signIn();
 
-                    if (
-                        this.handler &&
-                        (!this.fallback || !this.$username.val())
-                    ) {
-                        this.signIn();
+                    return;
+                }
+
+                this.login();
+            }
+        },
+    },
+
+    /** @inheritDoc */
+    data: function () {
+        return {
+            logoSrc: this.getLogoSrc(),
+            showForgotPassword: this.getConfig().get('passwordRecoveryEnabled'),
+            anotherUser: this.anotherUser,
+            hasSignIn: !!this.handler,
+            hasFallback: !!this.handler && this.fallback,
+            method: this.method,
+            signInText: this.signInText,
+            logInText: this.logInText,
+        };
+    },
+
+    /** @inheritDoc */
+    setup: function () {
+        this.anotherUser = this.options.anotherUser || null;
+
+        let loginData = this.getConfig().get('loginData') || {};
+
+        this.fallback = !!loginData.fallback;
+        this.method = loginData.method;
+
+        if (loginData.handler) {
+            this.wait(
+                Espo.loader
+                    .requirePromise(loginData.handler)
+                    .then(Handler => {
+                        this.handler = new Handler(this, loginData.data || {});
+                    })
+            );
+
+            this.signInText = this.getLanguage().has(this.method, 'signInLabels', 'Global') ?
+                this.translate(this.method, 'signInLabels') :
+                this.translate('Sign in');
+        }
+
+        if (this.getLanguage().has('Log in', 'labels', 'Global')) {
+            this.logInText = this.translate('Log in');
+        }
+
+        this.logInText = this.getLanguage().has('Log in', 'labels', 'Global') ?
+            this.translate('Log in') :
+            this.translate('Login');
+    },
+
+    /**
+     * @private
+     * @return {string}
+     */
+    getLogoSrc: function () {
+        let companyLogoId = this.getConfig().get('companyLogoId');
+
+        if (!companyLogoId) {
+            return this.getBasePath() + ('client/img/logo.svg');
+        }
+
+        return this.getBasePath() + '?entryPoint=LogoImage&id=' + companyLogoId;
+    },
+
+    /** @inheritDoc */
+    afterRender: function () {
+        this.$submit = this.$el.find('#btn-login');
+        this.$signIn = this.$el.find('#sign-in');
+        this.$username = this.$el.find('#field-userName');
+        this.$password = this.$el.find('#field-password');
+
+        if (this.options.prefilledUsername) {
+            this.$username.val(this.options.prefilledUsername);
+        }
+
+        if (this.handler) {
+            this.$username.closest('.cell').addClass('hidden');
+            this.$password.closest('.cell').addClass('hidden');
+            this.$submit.closest('.cell').addClass('hidden');
+        }
+    },
+
+    /**
+     * @private
+     */
+    signIn: function () {
+        this.disableForm();
+
+        this.handler
+            .process()
+            .then(headers => {
+                this.proceed(headers);
+            })
+            .catch(() => {
+                this.undisableForm();
+            })
+    },
+
+    /**
+     * @private
+     */
+    login: function () {
+        let authString;
+        let userName = this.$username.val();
+        let password = this.$password.val();
+
+        let trimmedUserName = userName.trim();
+
+        if (trimmedUserName !== userName) {
+            this.$username.val(trimmedUserName);
+
+            userName = trimmedUserName;
+        }
+
+        if (userName === '') {
+            this.processEmptyUsername();
+
+            return;
+        }
+
+        this.disableForm();
+
+        try {
+            authString = Base64.encode(userName  + ':' + password);
+        }
+        catch (e) {
+            Espo.Ui.error(this.translate('Error') + ': ' + e.message, true);
+
+            this.undisableForm();
+
+            throw e;
+        }
+
+        let headers = {
+            'Authorization': 'Basic ' + authString,
+            'Espo-Authorization': authString,
+        };
+
+        this.proceed(headers, userName, password);
+    },
+
+    /**
+     * @private
+     * @param {Object.<string, string>} headers
+     * @param {string} [userName]
+     * @param {string} [password]
+     */
+    proceed: function (headers, userName, password) {
+        headers = Espo.Utils.clone(headers);
+
+        let initialHeaders = Espo.Utils.clone(headers);
+
+        headers['Espo-Authorization-By-Token'] = 'false';
+        headers['Espo-Authorization-Create-Token-Secret'] = 'true';
+
+        if (this.anotherUser !== null) {
+            headers['X-Another-User'] = this.anotherUser;
+        }
+
+        this.notifyLoading();
+
+        Espo.Ajax
+            .getRequest('App/user', null, {
+                login: true,
+                headers: headers,
+            })
+            .then(data => {
+                Espo.Ui.notify(false);
+
+                this.triggerLogin(userName, data);
+            })
+            .catch(xhr => {
+                this.undisableForm();
+
+                if (xhr.status === 401) {
+                    let data = xhr.responseJSON || {};
+                    let statusReason = xhr.getResponseHeader('X-Status-Reason');
+
+                    if (statusReason === 'second-step-required') {
+                        xhr.errorIsHandled = true;
+                        this.onSecondStepRequired(initialHeaders, userName, password, data);
 
                         return;
                     }
 
-                    this.login();
+                    this.onWrongCredentials();
                 }
-            },
-        },
+            });
+    },
 
-        /** @inheritDoc */
-        data: function () {
-            return {
-                logoSrc: this.getLogoSrc(),
-                showForgotPassword: this.getConfig().get('passwordRecoveryEnabled'),
-                anotherUser: this.anotherUser,
-                hasSignIn: !!this.handler,
-                hasFallback: !!this.handler && this.fallback,
-                method: this.method,
-                signInText: this.signInText,
-                logInText: this.logInText,
-            };
-        },
+    /**
+     * Trigger login to proceed to the application.
+     *
+     * @private
+     * @param {?string} userName A username.
+     * @param {Object.<string, *>} data Data returned from the `App/user` request.
+     */
+    triggerLogin: function (userName, data) {
+        if (this.anotherUser) {
+            data.anotherUser = this.anotherUser;
+        }
 
-        /** @inheritDoc */
-        setup: function () {
-            this.anotherUser = this.options.anotherUser || null;
+        if (!userName) {
+            userName = (data.user || {}).userName;
+        }
 
-            let loginData = this.getConfig().get('loginData') || {};
+        this.trigger('login', userName, data);
+    },
 
-            this.fallback = !!loginData.fallback;
-            this.method = loginData.method;
+    /**
+     * @private
+     */
+    processEmptyUsername: function () {
+        this.isPopoverDestroyed = false;
 
-            if (loginData.handler) {
-                this.wait(
-                    Espo.loader
-                        .requirePromise(loginData.handler)
-                        .then(Handler => {
-                            this.handler = new Handler(this, loginData.data || {});
-                        })
-                );
+        let $el = this.$username;
 
-                this.signInText = this.getLanguage().has(this.method, 'signInLabels', 'Global') ?
-                    this.translate(this.method, 'signInLabels') :
-                    this.translate('Sign in');
-            }
+        let message = this.getLanguage().translate('userCantBeEmpty', 'messages', 'User');
 
-            if (this.getLanguage().has('Log in', 'labels', 'Global')) {
-                this.logInText = this.translate('Log in');
-            }
+        $el
+            .popover({
+                placement: 'bottom',
+                container: 'body',
+                content: message,
+                trigger: 'manual',
+            })
+            .popover('show');
 
-            this.logInText = this.getLanguage().has('Log in', 'labels', 'Global') ?
-                this.translate('Log in') :
-                this.translate('Login');
-        },
+        let $cell = $el.closest('.form-group');
 
-        /**
-         * @private
-         * @return {string}
-         */
-        getLogoSrc: function () {
-            let companyLogoId = this.getConfig().get('companyLogoId');
+        $cell.addClass('has-error');
 
-            if (!companyLogoId) {
-                return this.getBasePath() + ('client/img/logo.svg');
-            }
-
-            return this.getBasePath() + '?entryPoint=LogoImage&id=' + companyLogoId;
-        },
-
-        /** @inheritDoc */
-        afterRender: function () {
-            this.$submit = this.$el.find('#btn-login');
-            this.$signIn = this.$el.find('#sign-in');
-            this.$username = this.$el.find('#field-userName');
-            this.$password = this.$el.find('#field-password');
-
-            if (this.options.prefilledUsername) {
-                this.$username.val(this.options.prefilledUsername);
-            }
-
-            if (this.handler) {
-                this.$username.closest('.cell').addClass('hidden');
-                this.$password.closest('.cell').addClass('hidden');
-                this.$submit.closest('.cell').addClass('hidden');
-            }
-        },
-
-        /**
-         * @private
-         */
-        signIn: function () {
-            this.disableForm();
-
-            this.handler
-                .process()
-                .then(headers => {
-                    this.proceed(headers);
-                })
-                .catch(() => {
-                    this.undisableForm();
-                })
-        },
-
-        /**
-         * @private
-         */
-        login: function () {
-            let authString;
-            let userName = this.$username.val();
-            let password = this.$password.val();
-
-            let trimmedUserName = userName.trim();
-
-            if (trimmedUserName !== userName) {
-                this.$username.val(trimmedUserName);
-
-                userName = trimmedUserName;
-            }
-
-            if (userName === '') {
-                this.processEmptyUsername();
+        $el.one('mousedown click', () => {
+            $cell.removeClass('has-error');
 
+            if (this.isPopoverDestroyed) {
                 return;
             }
 
-            this.disableForm();
+            $el.popover('destroy');
 
-            try {
-                authString = Base64.encode(userName  + ':' + password);
-            }
-            catch (e) {
-                Espo.Ui.error(this.translate('Error') + ': ' + e.message, true);
+            this.isPopoverDestroyed = true;
+        });
+    },
 
-                this.undisableForm();
+    /**
+     * @private
+     */
+    disableForm: function () {
+        this.$submit.addClass('disabled').attr('disabled', 'disabled');
+        this.$signIn.addClass('disabled').attr('disabled', 'disabled');
+    },
 
-                throw e;
-            }
+    /**
+     * @private
+     */
+    undisableForm: function () {
+        this.$submit.removeClass('disabled').removeAttr('disabled');
+        this.$signIn.removeClass('disabled').removeAttr('disabled');
+    },
 
-            let headers = {
-                'Authorization': 'Basic ' + authString,
-                'Espo-Authorization': authString,
-            };
+    /**
+     * @private
+     * @param {Object.<string, string>} headers
+     * @param {string} userName
+     * @param {string} password
+     * @param {Object.<string, *>} data
+     */
+    onSecondStepRequired: function (headers, userName, password, data) {
+        let view = data.view || 'views/login-second-step';
 
-            this.proceed(headers, userName, password);
-        },
+        this.trigger('redirect', view, headers, userName, password, data);
+    },
 
-        /**
-         * @private
-         * @param {Object.<string, string>} headers
-         * @param {string} [userName]
-         * @param {string} [password]
-         */
-        proceed: function (headers, userName, password) {
-            headers = Espo.Utils.clone(headers);
+    /**
+     * @private
+     */
+    onWrongCredentials: function () {
+        let $cell = $('#login .form-group');
 
-            let initialHeaders = Espo.Utils.clone(headers);
+        $cell.addClass('has-error');
 
-            headers['Espo-Authorization-By-Token'] = 'false';
-            headers['Espo-Authorization-Create-Token-Secret'] = 'true';
+        this.$el.one('mousedown click', () => {
+            $cell.removeClass('has-error');
+        });
 
-            if (this.anotherUser !== null) {
-                headers['X-Another-User'] = this.anotherUser;
-            }
+        let messageKey = this.handler ?
+            'failedToLogIn' :
+            'wrongUsernamePassword';
 
-            this.notifyLoading();
+        Espo.Ui.error(this.translate(messageKey, 'messages', 'User'));
+    },
 
-            Espo.Ajax
-                .getRequest('App/user', null, {
-                    login: true,
-                    headers: headers,
-                })
-                .then(data => {
-                    Espo.Ui.notify(false);
+    /**
+     * @private
+     */
+    showFallback: function () {
+        this.$el.find('[data-action="showFallback"]').addClass('hidden');
 
-                    this.triggerLogin(userName, data);
-                })
-                .catch(xhr => {
-                    this.undisableForm();
+        this.$el.find('.panel-body').addClass('fallback-shown');
 
-                    if (xhr.status === 401) {
-                        let data = xhr.responseJSON || {};
-                        let statusReason = xhr.getResponseHeader('X-Status-Reason');
+        this.$username.closest('.cell').removeClass('hidden');
+        this.$password.closest('.cell').removeClass('hidden');
+        this.$submit.closest('.cell').removeClass('hidden');
+    },
 
-                        if (statusReason === 'second-step-required') {
-                            xhr.errorIsHandled = true;
-                            this.onSecondStepRequired(initialHeaders, userName, password, data);
+    /**
+     * @private
+     */
+    notifyLoading: function () {
+        Espo.Ui.notify(' ... ');
+    },
 
-                            return;
-                        }
+    /**
+     * @private
+     */
+    showPasswordChangeRequest: function () {
+        this.notifyLoading();
 
-                        this.onWrongCredentials();
-                    }
-                });
-        },
+        this.createView('passwordChangeRequest', 'views/modals/password-change-request', {
+            url: window.location.href,
+        }, view => {
+            view.render();
 
-        /**
-         * Trigger login to proceed to the application.
-         *
-         * @private
-         * @param {?string} userName A username.
-         * @param {Object.<string, *>} data Data returned from the `App/user` request.
-         */
-        triggerLogin: function (userName, data) {
-            if (this.anotherUser) {
-                data.anotherUser = this.anotherUser;
-            }
-
-            if (!userName) {
-                userName = (data.user || {}).userName;
-            }
-
-            this.trigger('login', userName, data);
-        },
-
-        /**
-         * @private
-         */
-        processEmptyUsername: function () {
-            this.isPopoverDestroyed = false;
-
-            let $el = this.$username;
-
-            let message = this.getLanguage().translate('userCantBeEmpty', 'messages', 'User');
-
-            $el
-                .popover({
-                    placement: 'bottom',
-                    container: 'body',
-                    content: message,
-                    trigger: 'manual',
-                })
-                .popover('show');
-
-            let $cell = $el.closest('.form-group');
-
-            $cell.addClass('has-error');
-
-            $el.one('mousedown click', () => {
-                $cell.removeClass('has-error');
-
-                if (this.isPopoverDestroyed) {
-                    return;
-                }
-
-                $el.popover('destroy');
-
-                this.isPopoverDestroyed = true;
-            });
-        },
-
-        /**
-         * @private
-         */
-        disableForm: function () {
-            this.$submit.addClass('disabled').attr('disabled', 'disabled');
-            this.$signIn.addClass('disabled').attr('disabled', 'disabled');
-        },
-
-        /**
-         * @private
-         */
-        undisableForm: function () {
-            this.$submit.removeClass('disabled').removeAttr('disabled');
-            this.$signIn.removeClass('disabled').removeAttr('disabled');
-        },
-
-        /**
-         * @private
-         * @param {Object.<string, string>} headers
-         * @param {string} userName
-         * @param {string} password
-         * @param {Object.<string, *>} data
-         */
-        onSecondStepRequired: function (headers, userName, password, data) {
-            let view = data.view || 'views/login-second-step';
-
-            this.trigger('redirect', view, headers, userName, password, data);
-        },
-
-        /**
-         * @private
-         */
-        onWrongCredentials: function () {
-            let $cell = $('#login .form-group');
-
-            $cell.addClass('has-error');
-
-            this.$el.one('mousedown click', () => {
-                $cell.removeClass('has-error');
-            });
-
-            let messageKey = this.handler ?
-                'failedToLogIn' :
-                'wrongUsernamePassword';
-
-            Espo.Ui.error(this.translate(messageKey, 'messages', 'User'));
-        },
-
-        /**
-         * @private
-         */
-        showFallback: function () {
-            this.$el.find('[data-action="showFallback"]').addClass('hidden');
-
-            this.$el.find('.panel-body').addClass('fallback-shown');
-
-            this.$username.closest('.cell').removeClass('hidden');
-            this.$password.closest('.cell').removeClass('hidden');
-            this.$submit.closest('.cell').removeClass('hidden');
-        },
-
-        /**
-         * @private
-         */
-        notifyLoading: function () {
-            Espo.Ui.notify(' ... ');
-        },
-
-        /**
-         * @private
-         */
-        showPasswordChangeRequest: function () {
-            this.notifyLoading();
-
-            this.createView('passwordChangeRequest', 'views/modals/password-change-request', {
-                url: window.location.href,
-            }, view => {
-                view.render();
-
-                Espo.Ui.notify(false);
-            });
-        },
-    });
+            Espo.Ui.notify(false);
+        });
+    },
 });
diff --git a/client/src/views/main.js b/client/src/views/main.js
index fc24e59f0b..ea9ba113a5 100644
--- a/client/src/views/main.js
+++ b/client/src/views/main.js
@@ -26,625 +26,625 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/main', ['view'], function (Dep) {
+import Dep from 'view';
+
+/**
+ * A base main view. The detail, edit, list views to be extended from.
+ *
+ * @class
+ * @extends Dep
+ */
+let Class = Dep.extend(/** @lends Class# */{
 
     /**
-     * A base main view. The detail, edit, list views to be extended from.
+     * A scope name.
      *
-     * @class
-     * @name Class
-     * @extends module:view.Class
-     * @memberOf module:views/main
+     * @type {string} scope
      */
-    return Dep.extend(/** @lends module:views/main.Class.prototype */{
+    scope: null,
 
-        /**
-         * A scope name.
-         *
-         * @type {string} scope
-         */
-        scope: null,
+    /**
+     * A name.
+     *
+     * @type {string} name
+     */
+    name: null,
 
-        /**
-         * A name.
-         *
-         * @type {string} name
-         */
-        name: null,
+    /**
+     * A top-right menu item (button or dropdown action).
+     * Handled by a class method `action{Action}`.
+     *
+     * @typedef {Object} module:views/main~MenuItem
+     *
+     * @property {string} name A name.
+     * @property {string} [action] An action.
+     * @property {string} [link] A link.
+     * @property {string} [label] A translatable label.
+     * @property {string} [labelTranslation] A label translation path.
+     * @property {'default'|'danger'|'success'|'warning'} [style] A style. Only for buttons.
+     * @property {boolean} [hidden]
+     * @property {Object.<string,string|number|boolean>} [data] Data attribute values.
+     * @property {string} [title] A title.
+     * @property {string} [iconHtml] An icon HTML.
+     * @property {string} [html] An HTML.
+     * @property {string} [text] A text.
+     * @property {string} [className] An additional class name. Only for buttons.
+     * @property {'read'|'edit'|'stream'|'delete'} [acl] Access to a record (or a scope if `aclScope` specified)
+     *   required for a menu item.
+     * @property {string} [aclScope] A scope to check access to with the `acl` parameter.
+     * @property {string} [configCheck] A config parameter defining a menu item availability.
+     *   If starts with `!`, then the result is negated.
+     * @property {module:utils~AccessDefs[]} [accessDataList] Access definitions.
+     */
 
-        /**
-         * A top-right menu item (button or dropdown action).
-         * Handled by a class method `action{Action}`.
-         *
-         * @typedef {Object} module:views/main~MenuItem
-         *
-         * @property {string} name A name.
-         * @property {string} [action] An action.
-         * @property {string} [link] A link.
-         * @property {string} [label] A translatable label.
-         * @property {string} [labelTranslation] A label translation path.
-         * @property {'default'|'danger'|'success'|'warning'} [style] A style. Only for buttons.
-         * @property {boolean} [hidden]
-         * @property {Object.<string,string|number|boolean>} [data] Data attribute values.
-         * @property {string} [title] A title.
-         * @property {string} [iconHtml] An icon HTML.
-         * @property {string} [html] An HTML.
-         * @property {string} [text] A text.
-         * @property {string} [className] An additional class name. Only for buttons.
-         * @property {'read'|'edit'|'stream'|'delete'} [acl] Access to a record (or a scope if `aclScope` specified)
-         *   required for a menu item.
-         * @property {string} [aclScope] A scope to check access to with the `acl` parameter.
-         * @property {string} [configCheck] A config parameter defining a menu item availability.
-         *   If starts with `!`, then the result is negated.
-         * @property {module:utils~AccessDefs[]} [accessDataList] Access definitions.
-         */
+    /**
+     * Top-right menu definitions.
+     *
+     * @type {{
+     *     buttons: module:views/main~MenuItem[],
+     *     dropdown: module:views/main~MenuItem[],
+     *     actions: module:views/main~MenuItem[],
+     * }} menu
+     * @protected
+     * @internal
+     */
+    menu: null,
 
-        /**
-         * Top-right menu definitions.
-         *
-         * @type {{
-         *     buttons: module:views/main~MenuItem[],
-         *     dropdown: module:views/main~MenuItem[],
-         *     actions: module:views/main~MenuItem[],
-         * }} menu
-         * @protected
-         * @internal
-         */
-        menu: null,
+    /**
+     * @private
+     * @type {JQuery|null}
+     */
+    $headerActionsContainer: null,
+
+    /**
+     * A shortcut-key => action map.
+     *
+     * @protected
+     * @type {?Object.<string,string|function (JQueryKeyEventObject): void>}
+     */
+    shortcutKeys: null,
+
+    /**
+     * @inheritDoc
+     */
+    events: {
+        'click .action': function (e) {
+            Espo.Utils.handleAction(this, e);
+        },
+    },
+
+    /**
+     * @inheritDoc
+     */
+    init: function () {
+        this.scope = this.options.scope || this.scope;
+        this.menu = {};
+
+        this.options.params = this.options.params || {};
+
+        if (this.name && this.scope) {
+            this.menu = this.getMetadata()
+                .get(['clientDefs', this.scope, 'menu',
+                    this.name.charAt(0).toLowerCase() + this.name.slice(1)]) || {};
+        }
 
         /**
          * @private
-         * @type {JQuery|null}
+         * @type {string[]}
          */
-        $headerActionsContainer: null,
+        this.headerActionItemTypeList = ['buttons', 'dropdown', 'actions'];
 
-        /**
-         * A shortcut-key => action map.
-         *
-         * @protected
-         * @type {?Object.<string,string|function (JQueryKeyEventObject): void>}
-         */
-        shortcutKeys: null,
+        this.menu = Espo.Utils.cloneDeep(this.menu);
 
-        /**
-         * @inheritDoc
-         */
-        events: {
-            'click .action': function (e) {
-                Espo.Utils.handleAction(this, e);
-            },
-        },
+        let globalMenu = {};
 
-        /**
-         * @inheritDoc
-         */
-        init: function () {
-            this.scope = this.options.scope || this.scope;
-            this.menu = {};
+        if (this.name) {
+            globalMenu = Espo.Utils.cloneDeep(
+                this.getMetadata()
+                    .get(['clientDefs', 'Global', 'menu',
+                        this.name.charAt(0).toLowerCase() + this.name.slice(1)]) || {}
+            );
+        }
 
-            this.options.params = this.options.params || {};
+        this.headerActionItemTypeList.forEach(type => {
+            this.menu[type] = this.menu[type] || [];
+            this.menu[type] = this.menu[type].concat(globalMenu[type] || []);
 
-            if (this.name && this.scope) {
-                this.menu = this.getMetadata()
-                    .get(['clientDefs', this.scope, 'menu',
-                        this.name.charAt(0).toLowerCase() + this.name.slice(1)]) || {};
-            }
+            let itemList = this.menu[type];
 
-            /**
-             * @private
-             * @type {string[]}
-             */
-            this.headerActionItemTypeList = ['buttons', 'dropdown', 'actions'];
+            itemList.forEach(item => {
+                let viewObject = this;
 
-            this.menu = Espo.Utils.cloneDeep(this.menu);
+                if (item.initFunction && item.data.handler) {
+                    this.wait(new Promise(resolve => {
+                        Espo.loader.require(item.data.handler, Handler => {
+                            let handler = new Handler(viewObject);
 
-            let globalMenu = {};
+                            handler[item.initFunction].call(handler);
 
-            if (this.name) {
-                globalMenu = Espo.Utils.cloneDeep(
-                    this.getMetadata()
-                        .get(['clientDefs', 'Global', 'menu',
-                            this.name.charAt(0).toLowerCase() + this.name.slice(1)]) || {}
-                );
-            }
-
-            this.headerActionItemTypeList.forEach(type => {
-                this.menu[type] = this.menu[type] || [];
-                this.menu[type] = this.menu[type].concat(globalMenu[type] || []);
-
-                let itemList = this.menu[type];
-
-                itemList.forEach(item => {
-                    let viewObject = this;
-
-                    if (item.initFunction && item.data.handler) {
-                        this.wait(new Promise(resolve => {
-                            require(item.data.handler, Handler => {
-                                let handler = new Handler(viewObject);
-
-                                handler[item.initFunction].call(handler);
-
-                                resolve();
-                            });
-                        }));
-                    }
-                });
+                            resolve();
+                        });
+                    }));
+                }
             });
+        });
 
-            this.updateLastUrl();
+        this.updateLastUrl();
 
-            this.on('after:render-internal', () => {
-                this.$headerActionsContainer = this.$el.find('.page-header .header-buttons');
-            });
+        this.on('after:render-internal', () => {
+            this.$headerActionsContainer = this.$el.find('.page-header .header-buttons');
+        });
 
-            this.on('header-rendered', () => {
-                this.$headerActionsContainer = this.$el.find('.page-header .header-buttons');
+        this.on('header-rendered', () => {
+            this.$headerActionsContainer = this.$el.find('.page-header .header-buttons');
 
-                this.adjustButtons();
-            });
+            this.adjustButtons();
+        });
 
-            this.on('after:render', () => this.adjustButtons());
+        this.on('after:render', () => this.adjustButtons());
 
-            if (this.shortcutKeys) {
-                this.shortcutKeys = Espo.Utils.cloneDeep(this.shortcutKeys);
-            }
-        },
+        if (this.shortcutKeys) {
+            this.shortcutKeys = Espo.Utils.cloneDeep(this.shortcutKeys);
+        }
+    },
 
-        setupFinal: function () {
-            if (this.shortcutKeys) {
-                this.events['keydown.main'] = e => {
-                    let key = Espo.Utils.getKeyFromKeyEvent(e);
+    setupFinal: function () {
+        if (this.shortcutKeys) {
+            this.events['keydown.main'] = e => {
+                let key = Espo.Utils.getKeyFromKeyEvent(e);
 
-                    if (typeof this.shortcutKeys[key] === 'function') {
-                        this.shortcutKeys[key].call(this, e);
+                if (typeof this.shortcutKeys[key] === 'function') {
+                    this.shortcutKeys[key].call(this, e);
 
-                        return;
-                    }
-
-                    let actionName = this.shortcutKeys[key];
-
-                    if (!actionName) {
-                        return;
-                    }
-
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    let methodName = 'action' + Espo.Utils.upperCaseFirst(actionName);
-
-                    this[methodName]();
-                };
-            }
-        },
-
-        /**
-         * Update a last history URL.
-         */
-        updateLastUrl: function () {
-            this.lastUrl = this.getRouter().getCurrentUrl();
-        },
-
-        /**
-         * @internal
-         * @returns {{
-         *     buttons?: module:views/main~MenuItem[],
-         *     dropdown?: module:views/main~MenuItem[],
-         *     actions?: module:views/main~MenuItem[],
-         * }}
-         */
-        getMenu: function () {
-            if (this.menuDisabled) {
-                return {};
-            }
-
-            let menu = {};
-
-            if (this.menu) {
-                this.headerActionItemTypeList.forEach(type => {
-                    (this.menu[type] || []).forEach(item => {
-                        if (item === false) {
-                            menu[type].push(false);
-
-                            return;
-                        }
-
-                        item = Espo.Utils.clone(item);
-
-                        menu[type] = menu[type] || [];
-
-                        if (!Espo.Utils.checkActionAvailability(this.getHelper(), item)) {
-                            return;
-                        }
-
-                        if (!Espo.Utils.checkActionAccess(this.getAcl(), this.model || this.scope, item)) {
-                            return;
-                        }
-
-                        if (item.accessDataList) {
-                            if (!Espo.Utils
-                                .checkAccessDataList(item.accessDataList, this.getAcl(), this.getUser())
-                            ) {
-                                return;
-                            }
-                        }
-
-                        item.name = item.name || item.action;
-                        item.action = item.action || null;
-
-                        if (item.labelTranslation) {
-                            item.html = this.getHelper().escapeString(
-                                this.getLanguage().translatePath(item.labelTranslation)
-                            );
-                        }
-
-                        menu[type].push(item);
-                    });
-                });
-            }
-
-            return menu;
-        },
-
-        /**
-         * Get a header HTML. To be overridden.
-         *
-         * @returns {string} HTML.
-         */
-        getHeader: function () {
-            return '';
-        },
-
-        /**
-         * Build a header HTML. To be called from the #getHeader method.
-         * Beware of XSS.
-         *
-         * @param {(string|Element|JQuery)[]} itemList A breadcrumb path. Like: Account > Name > edit.
-         * @returns {string} HTML
-         */
-        buildHeaderHtml: function (itemList) {
-            let $itemList = itemList.map(item => {
-                return $('<div>')
-                    .addClass('breadcrumb-item')
-                    .append(item);
-            });
-
-            let $div = $('<div>')
-                .addClass('header-breadcrumbs');
-
-            $itemList.forEach(($item, i) => {
-                $div.append($item);
-
-                if (i === $itemList.length - 1) {
                     return;
                 }
 
-                $div.append(
-                    $('<div>')
-                        .addClass('breadcrumb-separator')
-                        .append(
-                            $('<span>').addClass('chevron-right')
-                        )
-                )
+                let actionName = this.shortcutKeys[key];
+
+                if (!actionName) {
+                    return;
+                }
+
+                e.preventDefault();
+                e.stopPropagation();
+
+                let methodName = 'action' + Espo.Utils.upperCaseFirst(actionName);
+
+                this[methodName]();
+            };
+        }
+    },
+
+    /**
+     * Update a last history URL.
+     */
+    updateLastUrl: function () {
+        this.lastUrl = this.getRouter().getCurrentUrl();
+    },
+
+    /**
+     * @internal
+     * @returns {{
+     *     buttons?: module:views/main~MenuItem[],
+     *     dropdown?: module:views/main~MenuItem[],
+     *     actions?: module:views/main~MenuItem[],
+     * }}
+     */
+    getMenu: function () {
+        if (this.menuDisabled) {
+            return {};
+        }
+
+        let menu = {};
+
+        if (this.menu) {
+            this.headerActionItemTypeList.forEach(type => {
+                (this.menu[type] || []).forEach(item => {
+                    if (item === false) {
+                        menu[type].push(false);
+
+                        return;
+                    }
+
+                    item = Espo.Utils.clone(item);
+
+                    menu[type] = menu[type] || [];
+
+                    if (!Espo.Utils.checkActionAvailability(this.getHelper(), item)) {
+                        return;
+                    }
+
+                    if (!Espo.Utils.checkActionAccess(this.getAcl(), this.model || this.scope, item)) {
+                        return;
+                    }
+
+                    if (item.accessDataList) {
+                        if (!Espo.Utils
+                            .checkAccessDataList(item.accessDataList, this.getAcl(), this.getUser())
+                        ) {
+                            return;
+                        }
+                    }
+
+                    item.name = item.name || item.action;
+                    item.action = item.action || null;
+
+                    if (item.labelTranslation) {
+                        item.html = this.getHelper().escapeString(
+                            this.getLanguage().translatePath(item.labelTranslation)
+                        );
+                    }
+
+                    menu[type].push(item);
+                });
             });
+        }
 
-            return $div.get(0).outerHTML;
-        },
+        return menu;
+    },
 
+    /**
+     * Get a header HTML. To be overridden.
+     *
+     * @returns {string} HTML.
+     */
+    getHeader: function () {
+        return '';
+    },
 
-        /**
-         * Get an icon HTML.
-         *
-         * @returns {string} HTML
-         */
-        getHeaderIconHtml: function () {
-            return this.getHelper().getScopeColorIconHtml(this.scope);
-        },
+    /**
+     * Build a header HTML. To be called from the #getHeader method.
+     * Beware of XSS.
+     *
+     * @param {(string|Element|JQuery)[]} itemList A breadcrumb path. Like: Account > Name > edit.
+     * @returns {string} HTML
+     */
+    buildHeaderHtml: function (itemList) {
+        let $itemList = itemList.map(item => {
+            return $('<div>')
+                .addClass('breadcrumb-item')
+                .append(item);
+        });
 
-        /**
-         * Action 'showModal'.
-         *
-         * @todo Revise. To be removed?
-         *
-         * @param {Object} data
-         */
-        actionShowModal: function (data) {
-            let view = data.view;
+        let $div = $('<div>')
+            .addClass('header-breadcrumbs');
 
-            if (!view) {
+        $itemList.forEach(($item, i) => {
+            $div.append($item);
+
+            if (i === $itemList.length - 1) {
                 return;
             }
 
-            this.createView('modal', view, {
-                model: this.model,
-                collection: this.collection,
-            }, view => {
-                view.render();
+            $div.append(
+                $('<div>')
+                    .addClass('breadcrumb-separator')
+                    .append(
+                        $('<span>').addClass('chevron-right')
+                    )
+            )
+        });
 
-                this.listenTo(view, 'after:save', () => {
-                    if (this.model) {
-                        this.model.fetch();
-                    }
+        return $div.get(0).outerHTML;
+    },
 
-                    if (this.collection) {
-                        this.collection.fetch();
+
+    /**
+     * Get an icon HTML.
+     *
+     * @returns {string} HTML
+     */
+    getHeaderIconHtml: function () {
+        return this.getHelper().getScopeColorIconHtml(this.scope);
+    },
+
+    /**
+     * Action 'showModal'.
+     *
+     * @todo Revise. To be removed?
+     *
+     * @param {Object} data
+     */
+    actionShowModal: function (data) {
+        let view = data.view;
+
+        if (!view) {
+            return;
+        }
+
+        this.createView('modal', view, {
+            model: this.model,
+            collection: this.collection,
+        }, view => {
+            view.render();
+
+            this.listenTo(view, 'after:save', () => {
+                if (this.model) {
+                    this.model.fetch();
+                }
+
+                if (this.collection) {
+                    this.collection.fetch();
+                }
+            });
+        });
+    },
+
+    /**
+     * Add a menu item.
+     *
+     * @param {'buttons'|'dropdown'|'actions'} type A type.
+     * @param {module:views/main~MenuItem|false} item Item definitions.
+     * @param {boolean} [toBeginning=false] To beginning.
+     * @param {boolean} [doNotReRender=false] Skip re-render.
+     */
+    addMenuItem: function (type, item, toBeginning, doNotReRender) {
+        if (item) {
+            item.name = item.name || item.action;
+
+            let name = item.name;
+
+            if (name) {
+                let index = -1;
+
+                this.menu[type].forEach((data, i) => {
+                    data = data || {};
+
+                    if (data.name === name) {
+                        index = i;
                     }
                 });
-            });
-        },
 
-        /**
-         * Add a menu item.
-         *
-         * @param {'buttons'|'dropdown'|'actions'} type A type.
-         * @param {module:views/main~MenuItem|false} item Item definitions.
-         * @param {boolean} [toBeginning=false] To beginning.
-         * @param {boolean} [doNotReRender=false] Skip re-render.
-         */
-        addMenuItem: function (type, item, toBeginning, doNotReRender) {
-            if (item) {
-                item.name = item.name || item.action;
-
-                let name = item.name;
-
-                if (name) {
-                    let index = -1;
-
-                    this.menu[type].forEach((data, i) => {
-                        data = data || {};
-
-                        if (data.name === name) {
-                            index = i;
-                        }
-                    });
-
-                    if (~index) {
-                        this.menu[type].splice(index, 1);
-                    }
+                if (~index) {
+                    this.menu[type].splice(index, 1);
                 }
             }
+        }
 
-            let method = 'push';
+        let method = 'push';
 
-            if (toBeginning) {
-                method  = 'unshift';
-            }
+        if (toBeginning) {
+            method  = 'unshift';
+        }
 
-            this.menu[type][method](item);
+        this.menu[type][method](item);
 
-            if (!doNotReRender && this.isRendered()) {
+        if (!doNotReRender && this.isRendered()) {
+            this.getHeaderView()
+                .reRender();
+
+            return;
+        }
+
+        if (!doNotReRender && this.isBeingRendered()) {
+            this.once('after:render', () => {
+                this.getHeaderView()
+                    .reRender();
+            });
+        }
+    },
+
+    /**
+     * Remove a menu item.
+     *
+     * @param {string} name An item name.
+     * @param {boolean} [doNotReRender] Skip re-render.
+     */
+    removeMenuItem: function (name, doNotReRender) {
+        let index = -1;
+        let type = false;
+
+        this.headerActionItemTypeList.forEach(t => {
+            (this.menu[t] || []).forEach((item, i) => {
+                item = item || {};
+
+                if (item.name === name) {
+                    index = i;
+                    type = t;
+                }
+            });
+        });
+
+        if (~index && type) {
+            this.menu[type].splice(index, 1);
+        }
+
+        if (!doNotReRender && this.isRendered()) {
+            this.getHeaderView()
+                .reRender();
+
+            return;
+        }
+
+        if (!doNotReRender && this.isBeingRendered()) {
+            this.once('after:render', () => {
                 this.getHeaderView()
                     .reRender();
 
-                return;
-            }
-
-            if (!doNotReRender && this.isBeingRendered()) {
-                this.once('after:render', () => {
-                    this.getHeaderView()
-                        .reRender();
-                });
-            }
-        },
-
-        /**
-         * Remove a menu item.
-         *
-         * @param {string} name An item name.
-         * @param {boolean} [doNotReRender] Skip re-render.
-         */
-        removeMenuItem: function (name, doNotReRender) {
-            let index = -1;
-            let type = false;
-
-            this.headerActionItemTypeList.forEach(t => {
-                (this.menu[t] || []).forEach((item, i) => {
-                    item = item || {};
-
-                    if (item.name === name) {
-                        index = i;
-                        type = t;
-                    }
-                });
             });
 
-            if (~index && type) {
-                this.menu[type].splice(index, 1);
-            }
+            return;
+        }
 
-            if (!doNotReRender && this.isRendered()) {
-                this.getHeaderView()
-                    .reRender();
+        if (doNotReRender && this.isRendered()) {
+            this.$headerActionsContainer.find('[data-name="' + name + '"]').remove();
+        }
+    },
 
-                return;
-            }
+    /**
+     * Disable a menu item.
+     *
+     * @param {string} name A name.
+     */
+    disableMenuItem: function (name) {
+        this.$headerActionsContainer
+            .find('[data-name="' + name + '"]')
+            .addClass('disabled')
+            .attr('disabled');
+    },
 
-            if (!doNotReRender && this.isBeingRendered()) {
-                this.once('after:render', () => {
-                    this.getHeaderView()
-                        .reRender();
+    /**
+     * Enable a menu item.
+     *
+     * @param {string} name A name.
+     */
+    enableMenuItem: function (name) {
+        this.$headerActionsContainer
+            .find('[data-name="' + name + '"]')
+            .removeClass('disabled')
+            .removeAttr('disabled');
+    },
 
-                });
+    /**
+     * Action 'navigateToRoot'.
+     *
+     * @param {Object} data
+     * @param {jQuery.Event} e
+     */
+    actionNavigateToRoot: function (data, e) {
+        e.stopPropagation();
 
-                return;
-            }
+        this.getRouter().checkConfirmLeaveOut(() => {
+            let options = {
+                isReturn: true,
+            };
 
-            if (doNotReRender && this.isRendered()) {
-                this.$headerActionsContainer.find('[data-name="' + name + '"]').remove();
-            }
-        },
+            let rootUrl = this.options.rootUrl || this.options.params.rootUrl || '#' + this.scope;
 
-        /**
-         * Disable a menu item.
-         *
-         * @param {string} name A name.
-         */
-        disableMenuItem: function (name) {
-            this.$headerActionsContainer
-                .find('[data-name="' + name + '"]')
-                .addClass('disabled')
-                .attr('disabled');
-        },
+            this.getRouter().navigate(rootUrl, {trigger: false});
+            this.getRouter().dispatch(this.scope, null, options);
+        });
+    },
 
-        /**
-         * Enable a menu item.
-         *
-         * @param {string} name A name.
-         */
-        enableMenuItem: function (name) {
-            this.$headerActionsContainer
-                .find('[data-name="' + name + '"]')
-                .removeClass('disabled')
-                .removeAttr('disabled');
-        },
+    /**
+     * Hide a menu item.
+     *
+     * @param {string} name A name.
+     */
+    hideHeaderActionItem: function (name) {
+        this.headerActionItemTypeList.forEach(t => {
+            (this.menu[t] || []).forEach((item, i) => {
+                item = item || {};
 
-        /**
-         * Action 'navigateToRoot'.
-         *
-         * @param {Object} data
-         * @param {jQuery.Event} e
-         */
-        actionNavigateToRoot: function (data, e) {
-            e.stopPropagation();
-
-            this.getRouter().checkConfirmLeaveOut(() => {
-                let options = {
-                    isReturn: true,
-                };
-
-                let rootUrl = this.options.rootUrl || this.options.params.rootUrl || '#' + this.scope;
-
-                this.getRouter().navigate(rootUrl, {trigger: false});
-                this.getRouter().dispatch(this.scope, null, options);
+                if (item.name === name) {
+                    item.hidden = true;
+                }
             });
-        },
+        });
 
-        /**
-         * Hide a menu item.
-         *
-         * @param {string} name A name.
-         */
-        hideHeaderActionItem: function (name) {
-            this.headerActionItemTypeList.forEach(t => {
-                (this.menu[t] || []).forEach((item, i) => {
-                    item = item || {};
+        if (!this.isRendered()) {
+            return;
+        }
 
-                    if (item.name === name) {
-                        item.hidden = true;
-                    }
-                });
+        this.$headerActionsContainer.find('li > .action[data-name="'+name+'"]').parent().addClass('hidden');
+        this.$headerActionsContainer.find('a.action[data-name="'+name+'"]').addClass('hidden');
+
+        this.controlMenuDropdownVisibility();
+        this.adjustButtons();
+    },
+
+    /**
+     * Show a hidden menu item.
+     *
+     * @param {string} name A name.
+     */
+    showHeaderActionItem: function (name) {
+        this.headerActionItemTypeList.forEach(t => {
+            (this.menu[t] || []).forEach((item, i) => {
+                item = item || {};
+
+                if (item.name === name) {
+                    item.hidden = false;
+                }
             });
+        });
 
-            if (!this.isRendered()) {
-                return;
-            }
-
-            this.$headerActionsContainer.find('li > .action[data-name="'+name+'"]').parent().addClass('hidden');
-            this.$headerActionsContainer.find('a.action[data-name="'+name+'"]').addClass('hidden');
+        let processUi = () => {
+            this.$headerActionsContainer.find('li > .action[data-name="'+name+'"]').parent().removeClass('hidden');
+            this.$headerActionsContainer.find('a.action[data-name="'+name+'"]').removeClass('hidden');
 
             this.controlMenuDropdownVisibility();
             this.adjustButtons();
-        },
+        };
 
-        /**
-         * Show a hidden menu item.
-         *
-         * @param {string} name A name.
-         */
-        showHeaderActionItem: function (name) {
-            this.headerActionItemTypeList.forEach(t => {
-                (this.menu[t] || []).forEach((item, i) => {
-                    item = item || {};
-
-                    if (item.name === name) {
-                        item.hidden = false;
-                    }
-                });
-            });
-
-            let processUi = () => {
-                this.$headerActionsContainer.find('li > .action[data-name="'+name+'"]').parent().removeClass('hidden');
-                this.$headerActionsContainer.find('a.action[data-name="'+name+'"]').removeClass('hidden');
-
-                this.controlMenuDropdownVisibility();
-                this.adjustButtons();
-            };
-
-            if (!this.isRendered()) {
-                if (this.isBeingRendered()) {
-                    this.whenRendered().then(() => processUi());
-                }
-
-                return;
+        if (!this.isRendered()) {
+            if (this.isBeingRendered()) {
+                this.whenRendered().then(() => processUi());
             }
 
-            processUi();
-        },
+            return;
+        }
 
-        /**
-         * Whether a menu has any non-hidden dropdown items.
-         *
-         * @private
-         * @returns {boolean}
-         */
-        hasMenuVisibleDropdownItems: function () {
-            let hasItems = false;
+        processUi();
+    },
 
-            (this.menu.dropdown || []).forEach(item => {
-                if (!item.hidden) {
-                    hasItems = true;
-                }
-            });
+    /**
+     * Whether a menu has any non-hidden dropdown items.
+     *
+     * @private
+     * @returns {boolean}
+     */
+    hasMenuVisibleDropdownItems: function () {
+        let hasItems = false;
 
-            return hasItems;
-        },
-
-        /**
-         * @private
-         */
-        controlMenuDropdownVisibility: function () {
-            let $group = this.$headerActionsContainer.find('.dropdown-group');
-
-            if (this.hasMenuVisibleDropdownItems()) {
-                $group.removeClass('hidden');
-                $group.find('> button').removeClass('hidden');
-
-                return;
+        (this.menu.dropdown || []).forEach(item => {
+            if (!item.hidden) {
+                hasItems = true;
             }
+        });
 
-            $group.addClass('hidden');
-            $group.find('> button').addClass('hidden');
-        },
+        return hasItems;
+    },
 
-        /**
-         * @protected
-         * @return {module:views/header.Class}
-         */
-        getHeaderView: function () {
-            return this.getView('header');
-        },
+    /**
+     * @private
+     */
+    controlMenuDropdownVisibility: function () {
+        let $group = this.$headerActionsContainer.find('.dropdown-group');
 
-        /**
-         * @private
-         */
-        adjustButtons: function () {
-            let $buttons = this.$headerActionsContainer.find('.btn');
+        if (this.hasMenuVisibleDropdownItems()) {
+            $group.removeClass('hidden');
+            $group.find('> button').removeClass('hidden');
 
-            $buttons
-                .removeClass('radius-left')
-                .removeClass('radius-right');
+            return;
+        }
 
-            let $buttonsVisible = $buttons.filter(':not(.hidden)');
+        $group.addClass('hidden');
+        $group.find('> button').addClass('hidden');
+    },
 
-            $buttonsVisible.first().addClass('radius-left');
-            $buttonsVisible.last().addClass('radius-right');
-        },
+    /**
+     * @protected
+     * @return {module:views/header.Class}
+     */
+    getHeaderView: function () {
+        return this.getView('header');
+    },
 
-        /**
-         * Called when a stored view is reused (by the controller).
-         *
-         * @public
-         * @param {Object.<string, *>} params Routing params.
-         */
-        setupReuse: function (params) {},
-    });
+    /**
+     * @private
+     */
+    adjustButtons: function () {
+        let $buttons = this.$headerActionsContainer.find('.btn');
+
+        $buttons
+            .removeClass('radius-left')
+            .removeClass('radius-right');
+
+        let $buttonsVisible = $buttons.filter(':not(.hidden)');
+
+        $buttonsVisible.first().addClass('radius-left');
+        $buttonsVisible.last().addClass('radius-right');
+    },
+
+    /**
+     * Called when a stored view is reused (by the controller).
+     *
+     * @public
+     * @param {Object.<string, *>} params Routing params.
+     */
+    setupReuse: function (params) {},
 });
+
+/** @module views/main */
+export default Class;
diff --git a/client/src/views/modal.js b/client/src/views/modal.js
index 2c6aaed44f..5a1a48139f 100644
--- a/client/src/views/modal.js
+++ b/client/src/views/modal.js
@@ -26,1078 +26,1078 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/modal', ['view'], function (Dep) {
+/** @module views/modal */
+
+import Dep from 'view';
+
+/**
+ * A base modal view. Can be extended or used directly.
+ *
+ * Options:
+ * - `headerElement`
+ * - `headerHtml`
+ * - `headerText`
+ * - `$header`
+ * - `backdrop`
+ * - `buttonList`
+ * - `dropdownItemList`
+ *
+ * @see {@link https://docs.espocrm.com/development/modal/}
+ *
+ * @class
+ * @name Class
+ * @extends module:view
+ */
+export default Dep.extend(/** @lends Class# */{
 
     /**
-     * A base modal view. Can be extended or used directly.
+     * A button or dropdown action item.
      *
-     * Options:
-     * - `headerElement`
-     * - `headerHtml`
-     * - `headerText`
-     * - `$header`
-     * - `backdrop`
-     * - `buttonList`
-     * - `dropdownItemList`
+     * @typedef {Object} module:views/modal~Button
      *
-     * @see {@link https://docs.espocrm.com/development/modal/}
-     *
-     * @class
-     * @name Class
-     * @extends module:view.Class
-     * @memberOf module:views/modal
+     * @property {string} name A name.
+     * @property {string} [label] A label. To be translated
+     *   (with a scope defined in the `scope` class property).
+     * @property {string} [text] A text (not translated).
+     * @property {string} [labelTranslation] A label translation path.
+     * @property {string} [html] HTML.
+     * @property {boolean} [pullLeft=false] Deprecated. Use the `position` property.
+     * @property {'left'|'right'} [position='left'] A position.
+     * @property {'default'|'danger'|'success'|'warning'} [style='default'] A style.
+     * @property {boolean} [hidden=false] Is hidden.
+     * @property {boolean} [disabled=false] Disabled.
+     * @property {function():void} [onClick] Called on click. If not defined, then
+     * the `action<Name>` class method will be called.
+     * @property {string} [className] An additional class name.
      */
-    return Dep.extend(/** @lends module:views/modal.Class# */{
 
-        /**
-         * A button or dropdown action item.
-         *
-         * @typedef {Object} module:views/modal.Class~Button
-         *
-         * @property {string} name A name.
-         * @property {string} [label] A label. To be translated
-         *   (with a scope defined in the `scope` class property).
-         * @property {string} [text] A text (not translated).
-         * @property {string} [labelTranslation] A label translation path.
-         * @property {string} [html] HTML.
-         * @property {boolean} [pullLeft=false] Deprecated. Use the `position` property.
-         * @property {'left'|'right'} [position='left'] A position.
-         * @property {'default'|'danger'|'success'|'warning'} [style='default'] A style.
-         * @property {boolean} [hidden=false] Is hidden.
-         * @property {boolean} [disabled=false] Disabled.
-         * @property {function():void} [onClick] Called on click. If not defined, then
-         * the `action<Name>` class method will be called.
-         * @property {string} [className] An additional class name.
-         */
+    /**
+     * A CSS name.
+     *
+     * @protected
+     */
+    cssName: 'modal-dialog',
 
-        /**
-         * A CSS name.
-         *
-         * @protected
-         */
-        cssName: 'modal-dialog',
+    /**
+     * A class-name. Use `'dialog dialog-record'` for modals containing a record form.
+     *
+     * @protected
+     */
+    className: 'dialog',
 
-        /**
-         * A class-name. Use `'dialog dialog-record'` for modals containing a record form.
-         *
-         * @protected
-         */
-        className: 'dialog',
+    /**
+     * @protected
+     * @deprecated Use `headerHtml`
+     */
+    header: false,
 
-        /**
-         * @protected
-         * @deprecated Use `headerHtml`
-         */
-        header: false,
+    /**
+     * A header HTML. Beware of XSS.
+     *
+     * @protected
+     * @type {string}
+     */
+    headerHtml: null,
 
-        /**
-         * A header HTML. Beware of XSS.
-         *
-         * @protected
-         * @type {string}
-         */
-        headerHtml: null,
+    /**
+     * A header JQuery instance.
+     *
+     * @protected
+     * @type {JQuery}
+     */
+    $header: null,
 
-        /**
-         * A header JQuery instance.
-         *
-         * @protected
-         * @type {JQuery}
-         */
-        $header: null,
+    /**
+     * A header element.
+     *
+     * @protected
+     * @type {Element}
+     */
+    headerElement: null,
 
-        /**
-         * A header element.
-         *
-         * @protected
-         * @type {Element}
-         */
-        headerElement: null,
+    /**
+     * A header text.
+     *
+     * @protected
+     * @type {string}
+     */
+    headerText: null,
 
-        /**
-         * A header text.
-         *
-         * @protected
-         * @type {string}
-         */
-        headerText: null,
+    /**
+     * A dialog instance.
+     *
+     * @protected
+     * @type {Espo.Ui.Dialog}
+     */
+    dialog: null,
 
-        /**
-         * A dialog instance.
-         *
-         * @protected
-         * @type {Espo.Ui.Dialog}
-         */
-        dialog: null,
+    /**
+     * A container selector.
+     *
+     * @protected
+     * @type {string}
+     */
+    containerSelector: null,
 
-        /**
-         * A container selector.
-         *
-         * @protected
-         * @type {string}
-         */
-        containerSelector: null,
+    /**
+     * A scope name. Used when translating button labels.
+     *
+     * @type {string|null}
+     */
+    scope: null,
 
-        /**
-         * A scope name. Used when translating button labels.
-         *
-         * @type {string|null}
-         */
-        scope: null,
+    /**
+     * A backdrop.
+     *
+     * @protected
+     * @type {'static'|boolean}
+     */
+    backdrop: 'static',
 
-        /**
-         * A backdrop.
-         *
-         * @protected
-         * @type {'static'|boolean}
-         */
-        backdrop: 'static',
+    /**
+     * Buttons.
+     *
+     * @protected
+     * @type {module:views/modal~Button[]}
+     */
+    buttonList: [],
 
-        /**
-         * Buttons.
-         *
-         * @protected
-         * @type {module:views/modal.Class~Button[]}
-         */
-        buttonList: [],
+    /**
+     * Dropdown action items.
+     *
+     * @protected
+     * @type {module:views/modal~Button[]}
+     */
+    dropdownItemList: [],
 
-        /**
-         * Dropdown action items.
-         *
-         * @protected
-         * @type {module:views/modal.Class~Button[]}
-         */
-        dropdownItemList: [],
+    /**
+     * @deprecated Use `buttonList`.
+     * @protected
+     * @todo Remove.
+     */
+    buttons: [],
 
-        /**
-         * @deprecated Use `buttonList`.
-         * @protected
-         * @todo Remove.
-         */
-        buttons: [],
+    /**
+     * A width.
+     *
+     * @protected
+     * @type {number|null}
+     */
+    width: null,
 
-        /**
-         * A width.
-         *
-         * @protected
-         * @type {number|null}
-         */
-        width: null,
+    /**
+     * Not used.
+     *
+     * @deprecated
+     */
+    fitHeight: false,
 
-        /**
-         * Not used.
-         *
-         * @deprecated
-         */
-        fitHeight: false,
+    /**
+     * To disable fitting to a window height.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    noFullHeight: false,
 
-        /**
-         * To disable fitting to a window height.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        noFullHeight: false,
+    /**
+     * Disable the ability to close by pressing the `Esc` key.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    escapeDisabled: false,
 
-        /**
-         * Disable the ability to close by pressing the `Esc` key.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        escapeDisabled: false,
+    /**
+     * Is draggable.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    isDraggable: false,
 
-        /**
-         * Is draggable.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        isDraggable: false,
+    /**
+     * Is collapsable.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    isCollapsable: false,
 
-        /**
-         * Is collapsable.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        isCollapsable: false,
+    /**
+     * Is collapsed. Do not change value. Only for reading.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    isCollapsed: false,
 
-        /**
-         * Is collapsed. Do not change value. Only for reading.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        isCollapsed: false,
-
-        /**
-         * @inheritDoc
-         */
-        events: {
-            /** @this module:views/modal.Class */
-            'click .action': function (e) {
-                Espo.Utils.handleAction(this, e);
-            },
-            /** @this module:views/modal.Class */
-            'click [data-action="collapseModal"]': function () {
-                this.collapse();
-            },
+    /**
+     * @inheritDoc
+     */
+    events: {
+        /** @this module:views/modal */
+        'click .action': function (e) {
+            Espo.Utils.handleAction(this, e);
         },
+        /** @this module:views/modal */
+        'click [data-action="collapseModal"]': function () {
+            this.collapse();
+        },
+    },
 
-        /**
-         * @protected
-         * @type {boolean|null}
-         */
-        footerAtTheTop: null,
+    /**
+     * @protected
+     * @type {boolean|null}
+     */
+    footerAtTheTop: null,
 
-        /**
-         * A shortcut-key => action map.
-         *
-         * @protected
-         * @type {?Object.<string,string|function (JQueryKeyEventObject): void>}
-         */
-        shortcutKeys: null,
+    /**
+     * A shortcut-key => action map.
+     *
+     * @protected
+     * @type {?Object.<string,string|function (JQueryKeyEventObject): void>}
+     */
+    shortcutKeys: null,
 
-        /**
-         * @inheritDoc
-         */
-        init: function () {
-            var id = this.cssName + '-container-' + Math.floor((Math.random() * 10000) + 1).toString();
-            var containerSelector = this.containerSelector = '#' + id;
+    /**
+     * @inheritDoc
+     */
+    init: function () {
+        var id = this.cssName + '-container-' + Math.floor((Math.random() * 10000) + 1).toString();
+        var containerSelector = this.containerSelector = '#' + id;
 
-            this.header = this.options.header || this.header;
-            this.headerHtml = this.options.headerHtml || this.headerHtml;
-            this.$header = this.options.$header || this.$header;
-            this.headerElement = this.options.headerElement || this.headerElement;
-            this.headerText = this.options.headerText || this.headerText;
+        this.header = this.options.header || this.header;
+        this.headerHtml = this.options.headerHtml || this.headerHtml;
+        this.$header = this.options.$header || this.$header;
+        this.headerElement = this.options.headerElement || this.headerElement;
+        this.headerText = this.options.headerText || this.headerText;
 
-            this.backdrop = this.options.backdrop || this.backdrop;
+        this.backdrop = this.options.backdrop || this.backdrop;
 
-            this.setSelector(this.containerSelector);
+        this.setSelector(this.containerSelector);
 
-            this.buttonList = this.options.buttonList || this.buttonList;
-            this.dropdownItemList = this.options.dropdownItemList || this.dropdownItemList;
+        this.buttonList = this.options.buttonList || this.buttonList;
+        this.dropdownItemList = this.options.dropdownItemList || this.dropdownItemList;
 
-            this.buttonList = Espo.Utils.cloneDeep(this.buttonList);
-            this.dropdownItemList = Espo.Utils.cloneDeep(this.dropdownItemList);
+        this.buttonList = Espo.Utils.cloneDeep(this.buttonList);
+        this.dropdownItemList = Espo.Utils.cloneDeep(this.dropdownItemList);
 
-            // @todo Remove it as deprecated.
-            this.buttons = Espo.Utils.cloneDeep(this.buttons);
+        // @todo Remove it as deprecated.
+        this.buttons = Espo.Utils.cloneDeep(this.buttons);
 
-            if (this.shortcutKeys) {
-                this.shortcutKeys = Espo.Utils.cloneDeep(this.shortcutKeys);
+        if (this.shortcutKeys) {
+            this.shortcutKeys = Espo.Utils.cloneDeep(this.shortcutKeys);
+        }
+
+        this.on('render', () => {
+            if (this.dialog) {
+                this.dialog.close();
             }
 
-            this.on('render', () => {
-                if (this.dialog) {
-                    this.dialog.close();
-                }
+            this.isCollapsed = false;
 
-                this.isCollapsed = false;
+            $(containerSelector).remove();
 
-                $(containerSelector).remove();
+            $('<div />').css('display', 'none')
+                .attr('id', id)
+                .addClass('modal-container')
+                .appendTo('body');
 
-                $('<div />').css('display', 'none')
-                    .attr('id', id)
-                    .addClass('modal-container')
-                    .appendTo('body');
+            var modalBodyDiffHeight = 92;
 
-                var modalBodyDiffHeight = 92;
+            if (this.getThemeManager().getParam('modalBodyDiffHeight') !== null) {
+                modalBodyDiffHeight = this.getThemeManager().getParam('modalBodyDiffHeight');
+            }
 
-                if (this.getThemeManager().getParam('modalBodyDiffHeight') !== null) {
-                    modalBodyDiffHeight = this.getThemeManager().getParam('modalBodyDiffHeight');
-                }
+            let headerHtml = this.headerHtml || this.header;
 
-                let headerHtml = this.headerHtml || this.header;
+            if (this.$header && this.$header.length) {
+                headerHtml = this.$header.get(0).outerHTML;
+            }
 
-                if (this.$header && this.$header.length) {
-                    headerHtml = this.$header.get(0).outerHTML;
-                }
+            if (this.headerElement) {
+                headerHtml = this.headerElement.outerHTML;
+            }
 
-                if (this.headerElement) {
-                    headerHtml = this.headerElement.outerHTML;
-                }
+            if (this.headerText) {
+                headerHtml = Handlebars.Utils.escapeExpression(this.headerText);
+            }
 
-                if (this.headerText) {
-                    headerHtml = Handlebars.Utils.escapeExpression(this.headerText);
-                }
+            let footerAtTheTop = (this.footerAtTheTop !== null) ? this.footerAtTheTop :
+                this.getThemeManager().getParam('modalFooterAtTheTop');
 
-                let footerAtTheTop = (this.footerAtTheTop !== null) ? this.footerAtTheTop :
-                    this.getThemeManager().getParam('modalFooterAtTheTop');
-
-                this.dialog = new Espo.Ui.Dialog({
-                    backdrop: this.backdrop,
-                    header: headerHtml,
-                    container: containerSelector,
-                    body: '',
-                    buttonList: this.getDialogButtonList(),
-                    dropdownItemList: this.getDialogDropdownItemList(),
-                    width: this.width,
-                    keyboard: !this.escapeDisabled,
-                    fitHeight: this.fitHeight,
-                    draggable: this.isDraggable,
-                    className: this.className,
-                    bodyDiffHeight: modalBodyDiffHeight,
-                    footerAtTheTop: footerAtTheTop,
-                    fullHeight: !this.noFullHeight && this.getThemeManager().getParam('modalFullHeight'),
-                    screenWidthXs: this.getThemeManager().getParam('screenWidthXs'),
-                    fixedHeaderHeight: this.fixedHeaderHeight,
-                    closeButton: !this.noCloseButton,
-                    collapseButton: this.isCollapsable,
-                    onRemove: () => this.onDialogClose(),
-                    onBackdropClick: () => this.onBackdropClick(),
-                });
-
-                this.setElement(containerSelector + ' .body');
+            this.dialog = new Espo.Ui.Dialog({
+                backdrop: this.backdrop,
+                header: headerHtml,
+                container: containerSelector,
+                body: '',
+                buttonList: this.getDialogButtonList(),
+                dropdownItemList: this.getDialogDropdownItemList(),
+                width: this.width,
+                keyboard: !this.escapeDisabled,
+                fitHeight: this.fitHeight,
+                draggable: this.isDraggable,
+                className: this.className,
+                bodyDiffHeight: modalBodyDiffHeight,
+                footerAtTheTop: footerAtTheTop,
+                fullHeight: !this.noFullHeight && this.getThemeManager().getParam('modalFullHeight'),
+                screenWidthXs: this.getThemeManager().getParam('screenWidthXs'),
+                fixedHeaderHeight: this.fixedHeaderHeight,
+                closeButton: !this.noCloseButton,
+                collapseButton: this.isCollapsable,
+                onRemove: () => this.onDialogClose(),
+                onBackdropClick: () => this.onBackdropClick(),
             });
 
-            this.on('after:render', () => {
-                $(containerSelector).show();
+            this.setElement(containerSelector + ' .body');
+        });
 
-                this.dialog.show();
+        this.on('after:render', () => {
+            $(containerSelector).show();
 
-                if (this.fixedHeaderHeight && this.flexibleHeaderFontSize) {
-                    this.adjustHeaderFontSize();
-                }
+            this.dialog.show();
 
-                this.adjustButtons();
-
-                if (!this.noFullHeight) {
-                    this.initBodyScrollListener();
-                }
-            });
-
-            this.once('remove', () => {
-                if (this.dialog) {
-                    this.dialog.close();
-                }
-
-                $(containerSelector).remove();
-            });
-        },
-
-        setupFinal: function () {
-            if (this.shortcutKeys) {
-                this.events['keydown.modal-base'] = e => {
-                    let key = Espo.Utils.getKeyFromKeyEvent(e);
-
-                    if (typeof this.shortcutKeys[key] === 'function') {
-                        this.shortcutKeys[key].call(this, e);
-
-                        return;
-                    }
-
-                    let actionName = this.shortcutKeys[key];
-
-                    if (!actionName) {
-                        return;
-                    }
-
-                    if (this.hasActionItem(actionName) && !this.hasAvailableActionItem(actionName)) {
-                        return;
-                    }
-
-                    e.preventDefault();
-                    e.stopPropagation();
-
-                    let methodName = 'action' + Espo.Utils.upperCaseFirst(actionName);
-
-                    this[methodName]();
-                };
-            }
-        },
-
-        /**
-         * Get a button list for a dialog.
-         *
-         * @private
-         * @return {module:ui.Dialog~Button[]}
-         */
-        getDialogButtonList: function () {
-            var buttonListExt = [];
-
-            // TODO remove it as deprecated
-            this.buttons.forEach(item => {
-                var o = Espo.Utils.clone(item);
-
-                if (!('text' in o) && ('label' in o)) {
-                    o.text = this.getLanguage().translate(o.label);
-                }
-
-                buttonListExt.push(o);
-            });
-
-            this.buttonList.forEach(item => {
-                let o = {};
-
-                if (typeof item === 'string') {
-                    o.name = item;
-                } else if (typeof item === 'object') {
-                    o = item;
-                } else {
-                    return;
-                }
-
-                if (!o.text) {
-                    if (o.labelTranslation) {
-                        o.text = this.getLanguage().translatePath(o.labelTranslation);
-                    }
-                    else if ('label' in o) {
-                        o.text = this.translate(o.label, 'labels', this.scope);
-                    }
-                    else {
-                        o.text = this.translate(o.name, 'modalActions', this.scope);
-                    }
-                }
-
-                o.onClick = o.onClick || ((d, e) => {
-                    let handler = o.handler || (o.data || {}).handler;
-
-                    Espo.Utils.handleAction(this, e, o.name, handler);
-                });
-
-                buttonListExt.push(o);
-            });
-
-            return buttonListExt;
-        },
-
-        /**
-         * Get a dropdown item list for a dialog.
-         *
-         * @private
-         * @return {module:ui.Dialog~Button[]}
-         */
-        getDialogDropdownItemList: function () {
-            var dropdownItemListExt = [];
-
-            this.dropdownItemList.forEach((item) => {
-                var o = {};
-
-                if (typeof item === 'string') {
-                    o.name = item;
-                } else if (typeof item === 'object') {
-                    o = item;
-                } else {
-                    return;
-                }
-
-                if (!o.text) {
-                    if (o.labelTranslation) {
-                        o.text = this.getLanguage().translatePath(o.labelTranslation);
-                    }
-                    else if ('label' in o) {
-                        o.text = this.translate(o.label, 'labels', this.scope)
-                    }
-                    else {
-                        o.text = this.translate(o.name, 'modalActions', this.scope);
-                    }
-                }
-
-                o.onClick = o.onClick || ((d, e) => {
-                    let handler = o.handler || (o.data || {}).handler;
-
-                    Espo.Utils.handleAction(this, e, o.name, handler);
-                });
-
-                dropdownItemListExt.push(o);
-            });
-
-            return dropdownItemListExt;
-        },
-
-        /**
-         * @private
-         */
-        updateDialog: function () {
-            if (!this.dialog) {
-                return;
-            }
-
-            this.dialog.buttonList = this.getDialogButtonList();
-            this.dialog.dropdownItemList = this.getDialogDropdownItemList();
-        },
-
-        /**
-         * @private
-         */
-        onDialogClose: function () {
-            if (!this.isBeingRendered() && !this.isCollapsed) {
-                this.trigger('close');
-                this.remove();
-            }
-        },
-
-        /**
-         * @protected
-         */
-        onBackdropClick: function () {},
-
-        /**
-         * A `cancel` action.
-         */
-        actionCancel: function () {
-            this.trigger('cancel');
-            this.dialog.close();
-        },
-
-        /**
-         * A `close` action.
-         */
-        actionClose: function () {
-            this.trigger('cancel');
-            this.dialog.close();
-        },
-
-        /**
-         * Close a dialog.
-         */
-        close: function () {
-            this.dialog.close();
-        },
-
-        /**
-         * Disable a button.
-         *
-         * @param {string} name A button name.
-         */
-        disableButton: function (name) {
-            this.buttonList.forEach((d) => {
-                if (d.name !== name) {
-                    return;
-                }
-
-                d.disabled = true;
-            });
-
-            if (!this.isRendered()) {
-                return;
-            }
-
-            this.$el.find('footer button[data-name="'+name+'"]')
-                .addClass('disabled')
-                .attr('disabled', 'disabled');
-        },
-
-        /**
-         * Enable a button.
-         *
-         * @param {string} name A button name.
-         */
-        enableButton: function (name) {
-            this.buttonList.forEach((d) => {
-                if (d.name !== name) {
-                    return;
-                }
-
-                d.disabled = false;
-            });
-
-            if (!this.isRendered()) {
-                return;
-            }
-
-            this.$el.find('footer button[data-name="'+name+'"]')
-                .removeClass('disabled')
-                .removeAttr('disabled');
-        },
-
-        /**
-         * Add a button.
-         *
-         * @param {module:views/modal.Class~Button} o Button definitions.
-         * @param {boolean|string} [position=false] True prepends, false appends. If a string,
-         *   then will be added after a button with a corresponding name.
-         * @param {boolean} [doNotReRender=false] Do not re-render.
-         */
-        addButton: function (o, position, doNotReRender) {
-            var index = -1;
-
-            this.buttonList.forEach((item, i) => {
-                if (item.name === o.name) {
-                    index = i;
-                }
-            });
-
-            if (~index) {
-                return;
-            }
-
-            if (position === true) {
-                this.buttonList.unshift(o);
-            }
-            else if (typeof position === 'string') {
-                index = -1;
-
-                this.buttonList.forEach((item, i) => {
-                    if (item.name === position) {
-                        index = i;
-                    }
-                });
-
-                if (~index) {
-                    this.buttonList.splice(index, 0, o);
-                } else {
-                    this.buttonList.push(o);
-                }
-            }
-            else {
-                this.buttonList.push(o);
-            }
-
-            if (!doNotReRender && this.isRendered()) {
-                this.reRenderFooter();
-            }
-        },
-
-        /**
-         * Add a dropdown item.
-         *
-         * @param {module:views/modal.Class~Button} o Button definitions.
-         * @param {boolean} [toBeginning=false] To prepend.
-         * @param {boolean} [doNotReRender=false] Do not re-render.
-         */
-        addDropdownItem: function (o, toBeginning, doNotReRender) {
-            let method = toBeginning ? 'unshift' : 'push';
-
-            if (!o) {
-                this.dropdownItemList[method](false);
-
-                return;
-            }
-
-            let name = o.name;
-
-            if (!name) {
-                return;
-            }
-
-            for (let item of this.dropdownItemList) {
-                if (item.name === name) {
-                    return;
-                }
-            }
-
-            this.dropdownItemList[method](o);
-
-            if (!doNotReRender && this.isRendered()) {
-                this.reRenderFooter();
-            }
-        },
-
-        /**
-         * @private
-         */
-        reRenderFooter: function () {
-            if (!this.dialog) {
-                return;
-            }
-
-            this.updateDialog();
-
-            let html = this.dialog.getFooterHtml();
-
-            this.$el.find('footer.modal-footer').html(html);
-
-            this.dialog.initButtonEvents();
-        },
-
-        /**
-         * Remove a button or a dropdown action item.
-         *
-         * @param {string} name A name.
-         * @param {boolean} [doNotReRender=false] Do not re-render.
-         */
-        removeButton: function (name, doNotReRender) {
-            let index = -1;
-
-            for (const [i, item] of this.buttonList.entries()) {
-                if (item.name === name) {
-                    index = i;
-
-                    break;
-                }
-            }
-
-            if (~index) {
-                this.buttonList.splice(index, 1);
-            }
-
-            for (const [i, item] of this.dropdownItemList.entries()) {
-                if (item.name === name) {
-                    this.dropdownItemList.splice(i, 1);
-
-                    break;
-                }
-            }
-
-            if (this.isRendered()) {
-                this.$el.find('.modal-footer [data-name="'+name+'"]').remove();
-            }
-
-            if (!doNotReRender && this.isRendered()) {
-                this.reRender();
-            }
-        },
-
-        /**
-         * @deprecated Use `showActionItem`.
-         *
-         * @protected
-         * @param {string} name
-         */
-        showButton: function (name) {
-            for (let item of this.buttonList) {
-                if (item.name === name) {
-                    item.hidden = false;
-
-                    break;
-                }
-            }
-
-            if (!this.isRendered()) {
-                return;
-            }
-
-            this.$el.find('footer button[data-name="'+name+'"]').removeClass('hidden');
-
-            this.adjustButtons();
-        },
-
-        /**
-         * @deprecated Use `hideActionItem`.
-         *
-         * @protected
-         * @param {string} name
-         */
-        hideButton: function (name) {
-            for (let item of this.buttonList) {
-                if (item.name === name) {
-                    item.hidden = true;
-
-                    break;
-                }
-            }
-
-            if (!this.isRendered()) {
-                return;
-            }
-
-            this.$el.find('footer button[data-name="'+name+'"]').addClass('hidden');
-
-            this.adjustButtons();
-        },
-
-        /**
-         * Show an action item (button or dropdown item).
-         *
-         * @param {string} name A name.
-         */
-        showActionItem: function (name) {
-            for (let item of this.buttonList) {
-                if (item.name === name) {
-                    item.hidden = false;
-
-                    break;
-                }
-            }
-
-            for (let item of this.dropdownItemList) {
-                if (item.name === name) {
-                    item.hidden = false;
-
-                    break;
-                }
-            }
-
-            if (!this.isRendered()) {
-                return;
-            }
-
-            this.$el.find('footer button[data-name="'+name+'"]').removeClass('hidden');
-            this.$el.find('footer li > a[data-name="'+name+'"]').parent().removeClass('hidden');
-
-            if (!this.isDropdownItemListEmpty()) {
-                let $dropdownGroup = this.$el.find('footer .main-btn-group > .btn-group');
-
-                $dropdownGroup.removeClass('hidden');
-                $dropdownGroup.find('> button').removeClass('hidden');
+            if (this.fixedHeaderHeight && this.flexibleHeaderFontSize) {
+                this.adjustHeaderFontSize();
             }
 
             this.adjustButtons();
-        },
 
-        /**
-         * Hide an action item (button or dropdown item).
-         *
-         * @param {string} name A name.
-         */
-        hideActionItem: function (name) {
-            for (let item of this.buttonList) {
-                if (item.name === name) {
-                    item.hidden = true;
+            if (!this.noFullHeight) {
+                this.initBodyScrollListener();
+            }
+        });
 
-                    break;
-                }
+        this.once('remove', () => {
+            if (this.dialog) {
+                this.dialog.close();
             }
 
-            for (let item of this.dropdownItemList) {
-                if (item.name === name) {
-                    item.hidden = true;
+            $(containerSelector).remove();
+        });
+    },
 
-                    break;
-                }
-            }
+    setupFinal: function () {
+        if (this.shortcutKeys) {
+            this.events['keydown.modal-base'] = e => {
+                let key = Espo.Utils.getKeyFromKeyEvent(e);
 
-            if (!this.isRendered()) {
-                return;
-            }
-
-            this.$el.find('footer button[data-name="'+name+'"]').addClass('hidden');
-            this.$el.find('footer li > a[data-name="'+name+'"]').parent().addClass('hidden');
-
-            if (this.isDropdownItemListEmpty()) {
-                let $dropdownGroup = this.$el.find('footer .main-btn-group > .btn-group');
-
-                $dropdownGroup.addClass('hidden');
-                $dropdownGroup.find('> button').addClass('hidden');
-            }
-        },
-
-        /**
-         * Whether an action item exists (hidden, disabled or not).
-         *
-         * @param {string} name An action item name.
-         */
-        hasActionItem: function (name) {
-            let hasButton = this.buttonList
-                .findIndex(item => item.name === name) !== -1;
-
-            if (hasButton) {
-                return true;
-            }
-
-            return this.dropdownItemList
-                .findIndex(item => item.name === name) !== -1;
-        },
-
-        /**
-         * Whether an action item is visible and not disabled.
-         *
-         * @param {string} name An action item name.
-         */
-        hasAvailableActionItem: function (name) {
-            let hasButton = this.buttonList
-                .findIndex(item => item.name === name && !item.disabled && !item.hidden) !== -1;
-
-            if (hasButton) {
-                return true;
-            }
-
-            return this.dropdownItemList
-                .findIndex(item => item.name === name && !item.disabled && !item.hidden) !== -1;
-        },
-
-        /**
-         * @private
-         * @return {boolean}
-         */
-        isDropdownItemListEmpty: function () {
-            if (this.dropdownItemList.length === 0) {
-                return true;
-            }
-
-            var isEmpty = true;
-
-            this.dropdownItemList.forEach((item) => {
-                if (!item.hidden) {
-                    isEmpty = false;
-                }
-            });
-
-            return isEmpty;
-        },
-
-        /**
-         * @private
-         * @param {number} [step=0]
-         */
-        adjustHeaderFontSize: function (step) {
-            step = step || 0;
-
-            if (!step) {
-                this.fontSizePercentage = 100;
-            }
-
-            var $titleText = this.$el.find('.modal-title > .modal-title-text');
-
-            var containerWidth = $titleText.parent().width();
-            var textWidth = 0;
-
-            $titleText.children().each((i, el) => {
-                textWidth += $(el).outerWidth(true);
-            });
-
-            if (containerWidth < textWidth) {
-                if (step > 5) {
-                    var $title = this.$el.find('.modal-title');
-
-                    $title.attr('title', $titleText.text());
-                    $title.addClass('overlapped');
-
-                    $titleText.children().each((i, el) => {
-                       $(el).removeAttr('title');
-                    });
+                if (typeof this.shortcutKeys[key] === 'function') {
+                    this.shortcutKeys[key].call(this, e);
 
                     return;
                 }
 
-                this.fontSizePercentage -= 4;
+                let actionName = this.shortcutKeys[key];
 
-                this.$el.find('.modal-title .font-size-flexible')
-                    .css('font-size', this.fontSizePercentage + '%');
-
-                this.adjustHeaderFontSize(step + 1);
-            }
-        },
-
-        /**
-         * Collapse.
-         */
-        collapse: function () {
-            this.beforeCollapse().then(data => {
-                if (!this.getParentView()) {
-                    throw new Error("Can't collapse w/o parent view.");
+                if (!actionName) {
+                    return;
                 }
 
-                this.isCollapsed = true;
+                if (this.hasActionItem(actionName) && !this.hasAvailableActionItem(actionName)) {
+                    return;
+                }
 
-                data = data || {};
+                e.preventDefault();
+                e.stopPropagation();
 
-                let title;
+                let methodName = 'action' + Espo.Utils.upperCaseFirst(actionName);
 
-                if (data.title) {
-                    title = data.title;
+                this[methodName]();
+            };
+        }
+    },
+
+    /**
+     * Get a button list for a dialog.
+     *
+     * @private
+     * @return {module:ui.Dialog~Button[]}
+     */
+    getDialogButtonList: function () {
+        var buttonListExt = [];
+
+        // TODO remove it as deprecated
+        this.buttons.forEach(item => {
+            var o = Espo.Utils.clone(item);
+
+            if (!('text' in o) && ('label' in o)) {
+                o.text = this.getLanguage().translate(o.label);
+            }
+
+            buttonListExt.push(o);
+        });
+
+        this.buttonList.forEach(item => {
+            let o = {};
+
+            if (typeof item === 'string') {
+                o.name = item;
+            } else if (typeof item === 'object') {
+                o = item;
+            } else {
+                return;
+            }
+
+            if (!o.text) {
+                if (o.labelTranslation) {
+                    o.text = this.getLanguage().translatePath(o.labelTranslation);
+                }
+                else if ('label' in o) {
+                    o.text = this.translate(o.label, 'labels', this.scope);
                 }
                 else {
-                    let $title = this.$el.find('.modal-header .modal-title .modal-title-text');
-
-                    if ($title.children().length) {
-                        $title.children()[0];
-                    }
-
-                    title = $title.text();
+                    o.text = this.translate(o.name, 'modalActions', this.scope);
                 }
-
-                let key = this._path.split('/').pop();
-
-                this.dialog.close();
-
-                let masterView = this;
-
-                while (masterView.getParentView()) {
-                    masterView = masterView.getParentView();
-                }
-
-                this.getParentView().unchainView(key);
-
-                (new Promise(resolve => {
-                    if (masterView.hasView('collapsedModalBar')) {
-                        resolve(masterView.getView('collapsedModalBar'));
-
-                        return;
-                    }
-
-                    masterView
-                        .createView('collapsedModalBar', 'views/collapsed-modal-bar', {
-                            el: 'body > .collapsed-modal-bar',
-                        })
-                        .then(view => resolve(view));
-                }))
-                .then(barView => {
-                    barView.addModalView(this, {title: title});
-                });
-            });
-        },
-
-        /**
-         * Called before collapse. Can be extended to execute some logic, e.g. save form data.
-         *
-         * @protected
-         * @return {Promise}
-         */
-        beforeCollapse: function () {
-            return new Promise(resolve => resolve());
-        },
-
-        /**
-         * @private
-         */
-        adjustButtons: function () {
-            this.adjustLeftButtons();
-            this.adjustRightButtons();
-        },
-
-        /**
-         * @private
-         */
-        adjustLeftButtons: function () {
-            let $buttons = this.$el.find('footer.modal-footer > .main-btn-group button.btn');
-
-            $buttons
-                .removeClass('radius-left')
-                .removeClass('radius-right');
-
-            let $buttonsVisible = $buttons.filter('button:not(.hidden)');
-
-            $buttonsVisible.first().addClass('radius-left');
-            $buttonsVisible.last().addClass('radius-right');
-        },
-
-        /**
-         * @private
-         */
-        adjustRightButtons: function () {
-            let $buttons = this.$el.find('footer.modal-footer > .additional-btn-group button.btn:not(.btn-text)');
-
-            $buttons
-                .removeClass('radius-left')
-                .removeClass('radius-right')
-                .removeClass('margin-right');
-
-            let $buttonsVisible = $buttons.filter('button:not(.hidden)');
-
-            $buttonsVisible.first().addClass('radius-left');
-            $buttonsVisible.last().addClass('radius-right');
-
-            if ($buttonsVisible.last().next().hasClass('btn-text')) {
-                $buttonsVisible.last().addClass('margin-right');
             }
-        },
 
-        /**
-         * @protected
-         */
-        initBodyScrollListener: function () {
-            let $body = this.$el.find('> .dialog > .modal-dialog > .modal-content > .modal-body');
-            let $footer = $body.parent().find('> .modal-footer');
+            o.onClick = o.onClick || ((d, e) => {
+                let handler = o.handler || (o.data || {}).handler;
 
-            if (!$footer.length) {
+                Espo.Utils.handleAction(this, e, o.name, handler);
+            });
+
+            buttonListExt.push(o);
+        });
+
+        return buttonListExt;
+    },
+
+    /**
+     * Get a dropdown item list for a dialog.
+     *
+     * @private
+     * @return {module:ui.Dialog~Button[]}
+     */
+    getDialogDropdownItemList: function () {
+        var dropdownItemListExt = [];
+
+        this.dropdownItemList.forEach((item) => {
+            var o = {};
+
+            if (typeof item === 'string') {
+                o.name = item;
+            } else if (typeof item === 'object') {
+                o = item;
+            } else {
                 return;
             }
 
-            $body.off('scroll.footer-shadow');
+            if (!o.text) {
+                if (o.labelTranslation) {
+                    o.text = this.getLanguage().translatePath(o.labelTranslation);
+                }
+                else if ('label' in o) {
+                    o.text = this.translate(o.label, 'labels', this.scope)
+                }
+                else {
+                    o.text = this.translate(o.name, 'modalActions', this.scope);
+                }
+            }
 
-            $body.on('scroll.footer-shadow', () => {
-                if ($body.scrollTop()) {
-                    $footer.addClass('shadowed');
+            o.onClick = o.onClick || ((d, e) => {
+                let handler = o.handler || (o.data || {}).handler;
+
+                Espo.Utils.handleAction(this, e, o.name, handler);
+            });
+
+            dropdownItemListExt.push(o);
+        });
+
+        return dropdownItemListExt;
+    },
+
+    /**
+     * @private
+     */
+    updateDialog: function () {
+        if (!this.dialog) {
+            return;
+        }
+
+        this.dialog.buttonList = this.getDialogButtonList();
+        this.dialog.dropdownItemList = this.getDialogDropdownItemList();
+    },
+
+    /**
+     * @private
+     */
+    onDialogClose: function () {
+        if (!this.isBeingRendered() && !this.isCollapsed) {
+            this.trigger('close');
+            this.remove();
+        }
+    },
+
+    /**
+     * @protected
+     */
+    onBackdropClick: function () {},
+
+    /**
+     * A `cancel` action.
+     */
+    actionCancel: function () {
+        this.trigger('cancel');
+        this.dialog.close();
+    },
+
+    /**
+     * A `close` action.
+     */
+    actionClose: function () {
+        this.trigger('cancel');
+        this.dialog.close();
+    },
+
+    /**
+     * Close a dialog.
+     */
+    close: function () {
+        this.dialog.close();
+    },
+
+    /**
+     * Disable a button.
+     *
+     * @param {string} name A button name.
+     */
+    disableButton: function (name) {
+        this.buttonList.forEach((d) => {
+            if (d.name !== name) {
+                return;
+            }
+
+            d.disabled = true;
+        });
+
+        if (!this.isRendered()) {
+            return;
+        }
+
+        this.$el.find('footer button[data-name="'+name+'"]')
+            .addClass('disabled')
+            .attr('disabled', 'disabled');
+    },
+
+    /**
+     * Enable a button.
+     *
+     * @param {string} name A button name.
+     */
+    enableButton: function (name) {
+        this.buttonList.forEach((d) => {
+            if (d.name !== name) {
+                return;
+            }
+
+            d.disabled = false;
+        });
+
+        if (!this.isRendered()) {
+            return;
+        }
+
+        this.$el.find('footer button[data-name="'+name+'"]')
+            .removeClass('disabled')
+            .removeAttr('disabled');
+    },
+
+    /**
+     * Add a button.
+     *
+     * @param {module:views/modal~Button} o Button definitions.
+     * @param {boolean|string} [position=false] True prepends, false appends. If a string,
+     *   then will be added after a button with a corresponding name.
+     * @param {boolean} [doNotReRender=false] Do not re-render.
+     */
+    addButton: function (o, position, doNotReRender) {
+        var index = -1;
+
+        this.buttonList.forEach((item, i) => {
+            if (item.name === o.name) {
+                index = i;
+            }
+        });
+
+        if (~index) {
+            return;
+        }
+
+        if (position === true) {
+            this.buttonList.unshift(o);
+        }
+        else if (typeof position === 'string') {
+            index = -1;
+
+            this.buttonList.forEach((item, i) => {
+                if (item.name === position) {
+                    index = i;
+                }
+            });
+
+            if (~index) {
+                this.buttonList.splice(index, 0, o);
+            } else {
+                this.buttonList.push(o);
+            }
+        }
+        else {
+            this.buttonList.push(o);
+        }
+
+        if (!doNotReRender && this.isRendered()) {
+            this.reRenderFooter();
+        }
+    },
+
+    /**
+     * Add a dropdown item.
+     *
+     * @param {module:views/modal~Button} o Button definitions.
+     * @param {boolean} [toBeginning=false] To prepend.
+     * @param {boolean} [doNotReRender=false] Do not re-render.
+     */
+    addDropdownItem: function (o, toBeginning, doNotReRender) {
+        let method = toBeginning ? 'unshift' : 'push';
+
+        if (!o) {
+            this.dropdownItemList[method](false);
+
+            return;
+        }
+
+        let name = o.name;
+
+        if (!name) {
+            return;
+        }
+
+        for (let item of this.dropdownItemList) {
+            if (item.name === name) {
+                return;
+            }
+        }
+
+        this.dropdownItemList[method](o);
+
+        if (!doNotReRender && this.isRendered()) {
+            this.reRenderFooter();
+        }
+    },
+
+    /**
+     * @private
+     */
+    reRenderFooter: function () {
+        if (!this.dialog) {
+            return;
+        }
+
+        this.updateDialog();
+
+        let html = this.dialog.getFooterHtml();
+
+        this.$el.find('footer.modal-footer').html(html);
+
+        this.dialog.initButtonEvents();
+    },
+
+    /**
+     * Remove a button or a dropdown action item.
+     *
+     * @param {string} name A name.
+     * @param {boolean} [doNotReRender=false] Do not re-render.
+     */
+    removeButton: function (name, doNotReRender) {
+        let index = -1;
+
+        for (const [i, item] of this.buttonList.entries()) {
+            if (item.name === name) {
+                index = i;
+
+                break;
+            }
+        }
+
+        if (~index) {
+            this.buttonList.splice(index, 1);
+        }
+
+        for (const [i, item] of this.dropdownItemList.entries()) {
+            if (item.name === name) {
+                this.dropdownItemList.splice(i, 1);
+
+                break;
+            }
+        }
+
+        if (this.isRendered()) {
+            this.$el.find('.modal-footer [data-name="'+name+'"]').remove();
+        }
+
+        if (!doNotReRender && this.isRendered()) {
+            this.reRender();
+        }
+    },
+
+    /**
+     * @deprecated Use `showActionItem`.
+     *
+     * @protected
+     * @param {string} name
+     */
+    showButton: function (name) {
+        for (let item of this.buttonList) {
+            if (item.name === name) {
+                item.hidden = false;
+
+                break;
+            }
+        }
+
+        if (!this.isRendered()) {
+            return;
+        }
+
+        this.$el.find('footer button[data-name="'+name+'"]').removeClass('hidden');
+
+        this.adjustButtons();
+    },
+
+    /**
+     * @deprecated Use `hideActionItem`.
+     *
+     * @protected
+     * @param {string} name
+     */
+    hideButton: function (name) {
+        for (let item of this.buttonList) {
+            if (item.name === name) {
+                item.hidden = true;
+
+                break;
+            }
+        }
+
+        if (!this.isRendered()) {
+            return;
+        }
+
+        this.$el.find('footer button[data-name="'+name+'"]').addClass('hidden');
+
+        this.adjustButtons();
+    },
+
+    /**
+     * Show an action item (button or dropdown item).
+     *
+     * @param {string} name A name.
+     */
+    showActionItem: function (name) {
+        for (let item of this.buttonList) {
+            if (item.name === name) {
+                item.hidden = false;
+
+                break;
+            }
+        }
+
+        for (let item of this.dropdownItemList) {
+            if (item.name === name) {
+                item.hidden = false;
+
+                break;
+            }
+        }
+
+        if (!this.isRendered()) {
+            return;
+        }
+
+        this.$el.find('footer button[data-name="'+name+'"]').removeClass('hidden');
+        this.$el.find('footer li > a[data-name="'+name+'"]').parent().removeClass('hidden');
+
+        if (!this.isDropdownItemListEmpty()) {
+            let $dropdownGroup = this.$el.find('footer .main-btn-group > .btn-group');
+
+            $dropdownGroup.removeClass('hidden');
+            $dropdownGroup.find('> button').removeClass('hidden');
+        }
+
+        this.adjustButtons();
+    },
+
+    /**
+     * Hide an action item (button or dropdown item).
+     *
+     * @param {string} name A name.
+     */
+    hideActionItem: function (name) {
+        for (let item of this.buttonList) {
+            if (item.name === name) {
+                item.hidden = true;
+
+                break;
+            }
+        }
+
+        for (let item of this.dropdownItemList) {
+            if (item.name === name) {
+                item.hidden = true;
+
+                break;
+            }
+        }
+
+        if (!this.isRendered()) {
+            return;
+        }
+
+        this.$el.find('footer button[data-name="'+name+'"]').addClass('hidden');
+        this.$el.find('footer li > a[data-name="'+name+'"]').parent().addClass('hidden');
+
+        if (this.isDropdownItemListEmpty()) {
+            let $dropdownGroup = this.$el.find('footer .main-btn-group > .btn-group');
+
+            $dropdownGroup.addClass('hidden');
+            $dropdownGroup.find('> button').addClass('hidden');
+        }
+    },
+
+    /**
+     * Whether an action item exists (hidden, disabled or not).
+     *
+     * @param {string} name An action item name.
+     */
+    hasActionItem: function (name) {
+        let hasButton = this.buttonList
+            .findIndex(item => item.name === name) !== -1;
+
+        if (hasButton) {
+            return true;
+        }
+
+        return this.dropdownItemList
+            .findIndex(item => item.name === name) !== -1;
+    },
+
+    /**
+     * Whether an action item is visible and not disabled.
+     *
+     * @param {string} name An action item name.
+     */
+    hasAvailableActionItem: function (name) {
+        let hasButton = this.buttonList
+            .findIndex(item => item.name === name && !item.disabled && !item.hidden) !== -1;
+
+        if (hasButton) {
+            return true;
+        }
+
+        return this.dropdownItemList
+            .findIndex(item => item.name === name && !item.disabled && !item.hidden) !== -1;
+    },
+
+    /**
+     * @private
+     * @return {boolean}
+     */
+    isDropdownItemListEmpty: function () {
+        if (this.dropdownItemList.length === 0) {
+            return true;
+        }
+
+        var isEmpty = true;
+
+        this.dropdownItemList.forEach((item) => {
+            if (!item.hidden) {
+                isEmpty = false;
+            }
+        });
+
+        return isEmpty;
+    },
+
+    /**
+     * @private
+     * @param {number} [step=0]
+     */
+    adjustHeaderFontSize: function (step) {
+        step = step || 0;
+
+        if (!step) {
+            this.fontSizePercentage = 100;
+        }
+
+        var $titleText = this.$el.find('.modal-title > .modal-title-text');
+
+        var containerWidth = $titleText.parent().width();
+        var textWidth = 0;
+
+        $titleText.children().each((i, el) => {
+            textWidth += $(el).outerWidth(true);
+        });
+
+        if (containerWidth < textWidth) {
+            if (step > 5) {
+                var $title = this.$el.find('.modal-title');
+
+                $title.attr('title', $titleText.text());
+                $title.addClass('overlapped');
+
+                $titleText.children().each((i, el) => {
+                   $(el).removeAttr('title');
+                });
+
+                return;
+            }
+
+            this.fontSizePercentage -= 4;
+
+            this.$el.find('.modal-title .font-size-flexible')
+                .css('font-size', this.fontSizePercentage + '%');
+
+            this.adjustHeaderFontSize(step + 1);
+        }
+    },
+
+    /**
+     * Collapse.
+     */
+    collapse: function () {
+        this.beforeCollapse().then(data => {
+            if (!this.getParentView()) {
+                throw new Error("Can't collapse w/o parent view.");
+            }
+
+            this.isCollapsed = true;
+
+            data = data || {};
+
+            let title;
+
+            if (data.title) {
+                title = data.title;
+            }
+            else {
+                let $title = this.$el.find('.modal-header .modal-title .modal-title-text');
+
+                if ($title.children().length) {
+                    $title.children()[0];
+                }
+
+                title = $title.text();
+            }
+
+            let key = this._path.split('/').pop();
+
+            this.dialog.close();
+
+            let masterView = this;
+
+            while (masterView.getParentView()) {
+                masterView = masterView.getParentView();
+            }
+
+            this.getParentView().unchainView(key);
+
+            (new Promise(resolve => {
+                if (masterView.hasView('collapsedModalBar')) {
+                    resolve(masterView.getView('collapsedModalBar'));
 
                     return;
                 }
 
-                $footer.removeClass('shadowed');
+                masterView
+                    .createView('collapsedModalBar', 'views/collapsed-modal-bar', {
+                        el: 'body > .collapsed-modal-bar',
+                    })
+                    .then(view => resolve(view));
+            }))
+            .then(barView => {
+                barView.addModalView(this, {title: title});
             });
-        },
-    });
+        });
+    },
+
+    /**
+     * Called before collapse. Can be extended to execute some logic, e.g. save form data.
+     *
+     * @protected
+     * @return {Promise}
+     */
+    beforeCollapse: function () {
+        return new Promise(resolve => resolve());
+    },
+
+    /**
+     * @private
+     */
+    adjustButtons: function () {
+        this.adjustLeftButtons();
+        this.adjustRightButtons();
+    },
+
+    /**
+     * @private
+     */
+    adjustLeftButtons: function () {
+        let $buttons = this.$el.find('footer.modal-footer > .main-btn-group button.btn');
+
+        $buttons
+            .removeClass('radius-left')
+            .removeClass('radius-right');
+
+        let $buttonsVisible = $buttons.filter('button:not(.hidden)');
+
+        $buttonsVisible.first().addClass('radius-left');
+        $buttonsVisible.last().addClass('radius-right');
+    },
+
+    /**
+     * @private
+     */
+    adjustRightButtons: function () {
+        let $buttons = this.$el.find('footer.modal-footer > .additional-btn-group button.btn:not(.btn-text)');
+
+        $buttons
+            .removeClass('radius-left')
+            .removeClass('radius-right')
+            .removeClass('margin-right');
+
+        let $buttonsVisible = $buttons.filter('button:not(.hidden)');
+
+        $buttonsVisible.first().addClass('radius-left');
+        $buttonsVisible.last().addClass('radius-right');
+
+        if ($buttonsVisible.last().next().hasClass('btn-text')) {
+            $buttonsVisible.last().addClass('margin-right');
+        }
+    },
+
+    /**
+     * @protected
+     */
+    initBodyScrollListener: function () {
+        let $body = this.$el.find('> .dialog > .modal-dialog > .modal-content > .modal-body');
+        let $footer = $body.parent().find('> .modal-footer');
+
+        if (!$footer.length) {
+            return;
+        }
+
+        $body.off('scroll.footer-shadow');
+
+        $body.on('scroll.footer-shadow', () => {
+            if ($body.scrollTop()) {
+                $footer.addClass('shadowed');
+
+                return;
+            }
+
+            $footer.removeClass('shadowed');
+        });
+    },
 });
diff --git a/client/src/views/modals/compose-email.js b/client/src/views/modals/compose-email.js
index b5f82c78d9..c7dd41fe2b 100644
--- a/client/src/views/modals/compose-email.js
+++ b/client/src/views/modals/compose-email.js
@@ -116,10 +116,10 @@ define('views/modals/compose-email', ['views/modals/edit'], function (Dep) {
             ) {
                 var attributes = this.options.attributes || {};
 
-                require('email-helper', (EmailHelper) => {
+                Espo.loader.require('email-helper', EmailHelper => {
                     this.getRouter().confirmLeaveOut = false;
 
-                    var emailHelper = new EmailHelper();
+                    let emailHelper = new EmailHelper();
 
                     document.location.href = emailHelper
                         .composeMailToLink(attributes, this.getConfig().get('outboundEmailBccAddress'));
diff --git a/client/src/views/modals/detail.js b/client/src/views/modals/detail.js
index 902c69f242..bc0bb647f0 100644
--- a/client/src/views/modals/detail.js
+++ b/client/src/views/modals/detail.js
@@ -26,475 +26,173 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/modals/detail', ['views/modal', 'helpers/action-item-setup'], function (Dep, ActionItemSetup) {
+/** @module views/modals/detail */
 
-    /**
-     * A quick view modal.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:views/modals/detail
-     * @extends module:views/modal.Class
-     */
-    return Dep.extend(/** @lends module:views/modals/detail.Class# */{
+import Dep from 'views/modal';
+import ActionItemSetup from 'helpers/action-item-setup';
 
-        cssName: 'detail-modal',
+/**
+ * A quick view modal.
+ *
+ * @class
+ * @name Class
+ * @memberOf module:views/modals/detail
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        template: 'modals/detail',
+    template: 'modals/detail',
 
-        editDisabled: false,
+    cssName: 'detail-modal',
+    className: 'dialog dialog-record',
 
-        fullFormDisabled: false,
+    editDisabled: false,
+    fullFormDisabled: false,
+    detailView: null,
+    removeDisabled: true,
+    backdrop: true,
+    fitHeight: true,
+    sideDisabled: false,
+    bottomDisabled: false,
+    fixedHeaderHeight: true,
+    flexibleHeaderFontSize: true,
+    duplicateAction: false,
 
-        detailView: null,
-
-        removeDisabled: true,
-
-        backdrop: true,
-
-        fitHeight: true,
-
-        className: 'dialog dialog-record',
-
-        sideDisabled: false,
-
-        bottomDisabled: false,
-
-        fixedHeaderHeight: true,
-
-        flexibleHeaderFontSize: true,
-
-        duplicateAction: false,
-
-        shortcutKeys: {
-            'Control+Space': function (e) {
-                if (this.editDisabled) {
-                    return;
-                }
-
-                if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
-                    return;
-                }
-
-                if (this.buttonList.findIndex(item => item.name === 'edit') === -1) {
-                    return;
-                }
-
-                e.stopPropagation();
-                e.preventDefault();
-
-                this.actionEdit()
-                    .then(view => {
-                        view.$el
-                            .find('.form-control:not([disabled])')
-                            .first()
-                            .focus();
-                    });
-            },
-            'Control+Backslash': function (e) {
-                this.getRecordView().handleShortcutKeyControlBackslash(e);
-            },
-            'Control+ArrowLeft': function (e) {
-                this.handleShortcutKeyControlArrowLeft(e);
-            },
-            'Control+ArrowRight': function (e) {
-                this.handleShortcutKeyControlArrowRight(e);
-            },
-        },
-
-        setup: function () {
-            this.scope = this.scope || this.options.scope;
-            this.id = this.options.id;
-
-            this.buttonList = [];
-
-            if ('editDisabled' in this.options) {
-                this.editDisabled = this.options.editDisabled;
+    shortcutKeys: {
+        'Control+Space': function (e) {
+            if (this.editDisabled) {
+                return;
             }
 
-            if ('removeDisabled' in this.options) {
-                this.removeDisabled = this.options.removeDisabled;
+            if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
+                return;
             }
 
-            this.editDisabled = this.getMetadata().get(['clientDefs', this.scope, 'editDisabled']) ||
-                this.editDisabled;
-            this.removeDisabled = this.getMetadata().get(['clientDefs', this.scope, 'removeDisabled']) ||
-                this.removeDisabled;
-
-            this.fullFormDisabled = this.options.fullFormDisabled || this.fullFormDisabled;
-
-            this.layoutName = this.options.layoutName || this.layoutName;
-
-            this.setupRecordButtons();
-
-            if (this.model) {
-                this.controlRecordButtonsVisibility();
+            if (this.buttonList.findIndex(item => item.name === 'edit') === -1) {
+                return;
             }
 
-            if (!this.fullFormDisabled) {
-                this.buttonList.push({
-                    name: 'fullForm',
-                    label: 'Full Form',
+            e.stopPropagation();
+            e.preventDefault();
+
+            this.actionEdit()
+                .then(view => {
+                    view.$el
+                        .find('.form-control:not([disabled])')
+                        .first()
+                        .focus();
                 });
-            }
+        },
+        'Control+Backslash': function (e) {
+            this.getRecordView().handleShortcutKeyControlBackslash(e);
+        },
+        'Control+ArrowLeft': function (e) {
+            this.handleShortcutKeyControlArrowLeft(e);
+        },
+        'Control+ArrowRight': function (e) {
+            this.handleShortcutKeyControlArrowRight(e);
+        },
+    },
 
+    setup: function () {
+        this.scope = this.scope || this.options.scope;
+        this.id = this.options.id;
+
+        this.buttonList = [];
+
+        if ('editDisabled' in this.options) {
+            this.editDisabled = this.options.editDisabled;
+        }
+
+        if ('removeDisabled' in this.options) {
+            this.removeDisabled = this.options.removeDisabled;
+        }
+
+        this.editDisabled = this.getMetadata().get(['clientDefs', this.scope, 'editDisabled']) ||
+            this.editDisabled;
+        this.removeDisabled = this.getMetadata().get(['clientDefs', this.scope, 'removeDisabled']) ||
+            this.removeDisabled;
+
+        this.fullFormDisabled = this.options.fullFormDisabled || this.fullFormDisabled;
+
+        this.layoutName = this.options.layoutName || this.layoutName;
+
+        this.setupRecordButtons();
+
+        if (this.model) {
+            this.controlRecordButtonsVisibility();
+        }
+
+        if (!this.fullFormDisabled) {
             this.buttonList.push({
-                name: 'cancel',
-                label: 'Close',
-                title: 'Esc',
+                name: 'fullForm',
+                label: 'Full Form',
+            });
+        }
+
+        this.buttonList.push({
+            name: 'cancel',
+            label: 'Close',
+            title: 'Esc',
+        });
+
+        if (this.model && this.model.collection && !this.navigateButtonsDisabled) {
+            this.buttonList.push({
+                name: 'previous',
+                html: '<span class="fas fa-chevron-left"></span>',
+                title: this.translate('Previous Entry'),
+                position: 'right',
+                className: 'btn-icon',
+                style: 'text',
+                disabled: true,
             });
 
-            if (this.model && this.model.collection && !this.navigateButtonsDisabled) {
-                this.buttonList.push({
-                    name: 'previous',
-                    html: '<span class="fas fa-chevron-left"></span>',
-                    title: this.translate('Previous Entry'),
-                    position: 'right',
-                    className: 'btn-icon',
-                    style: 'text',
-                    disabled: true,
-                });
+            this.buttonList.push({
+                name: 'next',
+                html: '<span class="fas fa-chevron-right"></span>',
+                title: this.translate('Next Entry'),
+                position: 'right',
+                className: 'btn-icon',
+                style: 'text',
+                disabled: true,
+            });
 
-                this.buttonList.push({
-                    name: 'next',
-                    html: '<span class="fas fa-chevron-right"></span>',
-                    title: this.translate('Next Entry'),
-                    position: 'right',
-                    className: 'btn-icon',
-                    style: 'text',
-                    disabled: true,
-                });
+            this.indexOfRecord = this.model.collection.indexOf(this.model);
+        }
+        else {
+            this.navigateButtonsDisabled = true;
+        }
 
-                this.indexOfRecord = this.model.collection.indexOf(this.model);
-            }
-            else {
-                this.navigateButtonsDisabled = true;
-            }
+        this.waitForView('record');
 
-            this.waitForView('record');
+        this.sourceModel = this.model;
 
-            this.sourceModel = this.model;
-
-            this.getModelFactory().create(this.scope).then(model => {
-                if (!this.sourceModel) {
-                    this.model = model;
-                    this.model.id = this.id;
-
-                    this.setupAfterModelCreated();
-
-                    this.listenTo(this.model, 'sync', () => {
-                        this.controlRecordButtonsVisibility();
-
-                        this.trigger('model-sync');
-                    });
-
-                    this.listenToOnce(this.model, 'sync', () => {
-                        this.setupActionItems();
-                        this.createRecordView();
-                    });
-
-                    this.model.fetch();
-
-                    return;
-                }
-
-                this.model = this.sourceModel.clone();
-                this.model.collection = this.sourceModel.collection.clone();
+        this.getModelFactory().create(this.scope).then(model => {
+            if (!this.sourceModel) {
+                this.model = model;
+                this.model.id = this.id;
 
                 this.setupAfterModelCreated();
 
-                this.listenTo(this.model, 'change', () => {
-                    this.sourceModel.set(this.model.getClonedAttributes());
-                });
-
                 this.listenTo(this.model, 'sync', () => {
                     this.controlRecordButtonsVisibility();
 
                     this.trigger('model-sync');
                 });
 
-                this.once('after:render', () => {
-                    this.model.fetch();
+                this.listenToOnce(this.model, 'sync', () => {
+                    this.setupActionItems();
+                    this.createRecordView();
                 });
 
-                this.setupActionItems();
-                this.createRecordView();
-            });
+                this.model.fetch();
 
-            this.listenToOnce(this.getRouter(), 'routed', () => {
-                this.remove();
-            });
-
-            if (this.duplicateAction && this.getAcl().checkScope(this.scope, 'create')) {
-                this.addDropdownItem({
-                    name: 'duplicate',
-                    label: 'Duplicate',
-                });
-            }
-        },
-
-        /**
-         * @private
-         */
-        setupActionItems: function () {
-            /** @var {module:helpers/action-item-setup.Class} */
-            let actionItemSetup = new ActionItemSetup(
-                this.getMetadata(),
-                this.getHelper(),
-                this.getAcl(),
-                this.getLanguage()
-            );
-
-            actionItemSetup.setup(
-                this,
-                'modalDetail',
-                promise => this.wait(promise),
-                item => this.addDropdownItem(item),
-                name => this.showActionItem(name),
-                name => this.hideActionItem(name),
-                {listenToViewModelSync: true}
-            );
-        },
-
-        /**
-         * @protected
-         */
-        setupAfterModelCreated: function () {},
-
-        /**
-         * @protected
-         */
-        setupRecordButtons: function () {
-            if (!this.removeDisabled) {
-                this.addRemoveButton();
-            }
-
-            if (!this.editDisabled) {
-                this.addEditButton();
-            }
-        },
-
-        controlRecordButtonsVisibility: function () {
-            if (this.getAcl().check(this.model, 'edit')) {
-                this.showButton('edit');
-            } else {
-                this.hideButton('edit');
-            }
-
-            if (this.getAcl().check(this.model, 'delete')) {
-                this.showActionItem('remove');
-            } else {
-                this.hideActionItem('remove');
-            }
-        },
-
-        addEditButton: function () {
-            this.addButton({
-                name: 'edit',
-                label: 'Edit',
-                title: 'Ctrl+Space',
-            }, true);
-        },
-
-        removeEditButton: function () {
-            this.removeButton('edit');
-        },
-
-        addRemoveButton: function () {
-            this.addDropdownItem({
-                name: 'remove',
-                label: 'Remove',
-            });
-        },
-
-        removeRemoveButton: function () {
-            this.removeButton('remove');
-        },
-
-        getScope: function () {
-            return this.scope;
-        },
-
-        createRecordView: function (callback) {
-            let model = this.model;
-            let scope = this.getScope();
-
-            this.headerHtml = '';
-
-            this.headerHtml += $('<span>')
-                .text(this.getLanguage().translate(scope, 'scopeNames'))
-                .get(0).outerHTML;
-
-            if (model.get('name')) {
-                this.headerHtml += ' ' +
-                    $('<span>')
-                        .addClass('chevron-right')
-                        .get(0).outerHTML;
-
-                this.headerHtml += ' ' +
-                    $('<span>')
-                        .text(model.get('name'))
-                        .get(0).outerHTML;
-            }
-
-            if (!this.fullFormDisabled) {
-                let url = '#' + scope + '/view/' + this.id;
-
-                this.headerHtml =
-                    $('<a>')
-                        .attr('href', url)
-                        .addClass('action font-size-flexible')
-                        .attr('title', this.translate('Full Form'))
-                        .attr('data-action', 'fullForm')
-                        .append(this.headerHtml)
-                        .get(0).outerHTML;
-            }
-
-            this.headerHtml = this.getHelper().getScopeColorIconHtml(this.scope) + this.headerHtml;
-
-            if (!this.editDisabled) {
-                let editAccess = this.getAcl().check(model, 'edit', true);
-
-                if (editAccess) {
-                    this.showButton('edit');
-                } else {
-                    this.hideButton('edit');
-
-                    if (editAccess === null) {
-                        this.listenToOnce(model, 'sync', () => {
-                            if (this.getAcl().check(model, 'edit')) {
-                                this.showButton('edit');
-                            }
-                        });
-                    }
-                }
-            }
-
-            if (!this.removeDisabled) {
-                var removeAccess = this.getAcl().check(model, 'delete', true);
-
-                if (removeAccess) {
-                    this.showButton('remove');
-                }
-                else {
-                    this.hideButton('remove');
-
-                    if (removeAccess === null) {
-                        this.listenToOnce(model, 'sync', () => {
-                            if (this.getAcl().check(model, 'delete')) {
-                                this.showButton('remove');
-                            }
-                        });
-                    }
-                }
-            }
-
-            let viewName =
-                this.detailViewName ||
-                this.detailView ||
-                this.getMetadata().get(['clientDefs', model.name, 'recordViews', 'detailSmall']) ||
-                this.getMetadata().get(['clientDefs', model.name, 'recordViews', 'detailQuick']) ||
-                'views/record/detail-small';
-
-            let options = {
-                model: model,
-                el: this.containerSelector + ' .record-container',
-                type: 'detailSmall',
-                layoutName: this.layoutName || 'detailSmall',
-                buttonsDisabled: true,
-                inlineEditDisabled: true,
-                sideDisabled: this.sideDisabled,
-                bottomDisabled: this.bottomDisabled,
-                exit: function () {},
-            };
-
-            this.createView('record', viewName, options, callback);
-        },
-
-        /**
-         * @return {module:views/record/detail.Class}
-         */
-        getRecordView: function () {
-            return this.getView('record');
-        },
-
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
-
-            setTimeout(() => {
-                this.$el.children(0).scrollTop(0);
-            }, 50);
-
-            if (!this.navigateButtonsDisabled) {
-                this.controlNavigationButtons();
-            }
-        },
-
-        controlNavigationButtons: function () {
-            let recordView = this.getView('record');
-
-            if (!recordView) {
                 return;
             }
 
-            let indexOfRecord = this.indexOfRecord;
-
-            let previousButtonEnabled = false;
-            let nextButtonEnabled = false;
-
-            if (indexOfRecord > 0) {
-                previousButtonEnabled = true;
-            }
-
-            if (indexOfRecord < this.model.collection.total - 1) {
-                nextButtonEnabled = true;
-            }
-            else {
-                if (this.model.collection.total === -1) {
-                    nextButtonEnabled = true;
-                } else if (this.model.collection.total === -2) {
-                    if (indexOfRecord < this.model.collection.length - 1) {
-                        nextButtonEnabled = true;
-                    }
-                }
-            }
-
-            if (previousButtonEnabled) {
-                this.enableButton('previous');
-            } else {
-                this.disableButton('previous');
-            }
-
-            if (nextButtonEnabled) {
-                this.enableButton('next');
-            } else {
-                 this.disableButton('next');
-            }
-        },
-
-        switchToModelByIndex: function (indexOfRecord) {
-            if (!this.model.collection) {
-                return;
-            }
-
-            let previousModel = this.model;
-
-            this.sourceModel = this.model.collection.at(indexOfRecord);
-
-            if (!this.sourceModel) {
-                throw new Error("Model is not found in collection by index.");
-            }
-
-            this.indexOfRecord = indexOfRecord;
-
-            this.id = this.sourceModel.id;
-            this.scope = this.sourceModel.name;
-
             this.model = this.sourceModel.clone();
             this.model.collection = this.sourceModel.collection.clone();
 
-            this.stopListening(previousModel, 'change');
-            this.stopListening(previousModel, 'sync');
+            this.setupAfterModelCreated();
 
             this.listenTo(this.model, 'change', () => {
                 this.sourceModel.set(this.model.getClonedAttributes());
@@ -506,246 +204,538 @@ define('views/modals/detail', ['views/modal', 'helpers/action-item-setup'], func
                 this.trigger('model-sync');
             });
 
-            this.createRecordView(() => {
-                this.reRender()
-                    .then(() => {
-                        this.model.fetch();
-                    })
+            this.once('after:render', () => {
+                this.model.fetch();
             });
 
-            this.controlNavigationButtons();
-            this.trigger('switch-model', this.model, previousModel);
-        },
+            this.setupActionItems();
+            this.createRecordView();
+        });
 
-        actionPrevious: function () {
-            if (!this.model.collection) {
-                return;
-            }
+        this.listenToOnce(this.getRouter(), 'routed', () => {
+            this.remove();
+        });
 
-            if (!(this.indexOfRecord > 0)) {
-                return;
-            }
+        if (this.duplicateAction && this.getAcl().checkScope(this.scope, 'create')) {
+            this.addDropdownItem({
+                name: 'duplicate',
+                label: 'Duplicate',
+            });
+        }
+    },
 
-            let indexOfRecord = this.indexOfRecord - 1;
+    /**
+     * @private
+     */
+    setupActionItems: function () {
+        /** @var {module:helpers/action-item-setup.Class} */
+        let actionItemSetup = new ActionItemSetup(
+            this.getMetadata(),
+            this.getHelper(),
+            this.getAcl(),
+            this.getLanguage()
+        );
 
-            this.switchToModelByIndex(indexOfRecord);
-        },
+        actionItemSetup.setup(
+            this,
+            'modalDetail',
+            promise => this.wait(promise),
+            item => this.addDropdownItem(item),
+            name => this.showActionItem(name),
+            name => this.hideActionItem(name),
+            {listenToViewModelSync: true}
+        );
+    },
 
-        actionNext: function () {
-            if (!this.model.collection) {
-                return;
-            }
+    /**
+     * @protected
+     */
+    setupAfterModelCreated: function () {},
 
-            if (!(this.indexOfRecord < this.model.collection.total - 1) && this.model.collection.total >= 0) {
-                return;
-            }
+    /**
+     * @protected
+     */
+    setupRecordButtons: function () {
+        if (!this.removeDisabled) {
+            this.addRemoveButton();
+        }
 
-            if (this.model.collection.total === -2 && this.indexOfRecord >= this.model.collection.length - 1) {
-                return;
-            }
+        if (!this.editDisabled) {
+            this.addEditButton();
+        }
+    },
 
-            let collection = this.model.collection;
+    controlRecordButtonsVisibility: function () {
+        if (this.getAcl().check(this.model, 'edit')) {
+            this.showButton('edit');
+        } else {
+            this.hideButton('edit');
+        }
 
-            let indexOfRecord = this.indexOfRecord + 1;
+        if (this.getAcl().check(this.model, 'delete')) {
+            this.showActionItem('remove');
+        } else {
+            this.hideActionItem('remove');
+        }
+    },
 
-            if (indexOfRecord <= collection.length - 1) {
-                this.switchToModelByIndex(indexOfRecord);
+    addEditButton: function () {
+        this.addButton({
+            name: 'edit',
+            label: 'Edit',
+            title: 'Ctrl+Space',
+        }, true);
+    },
 
-                return;
-            }
+    removeEditButton: function () {
+        this.removeButton('edit');
+    },
 
-            collection
-                .fetch({
-                    more: true,
-                    remove: false,
-                })
-                .then(() => {
-                    this.switchToModelByIndex(indexOfRecord);
-                });
-        },
+    addRemoveButton: function () {
+        this.addDropdownItem({
+            name: 'remove',
+            label: 'Remove',
+        });
+    },
 
-        /**
-         * @return {Promise}
-         */
-        actionEdit: function () {
-            if (this.options.quickEditDisabled) {
-                let options = {
-                    id: this.id,
-                    model: this.model,
-                    returnUrl: this.getRouter().getCurrentUrl(),
-                };
+    removeRemoveButton: function () {
+        this.removeButton('remove');
+    },
 
-                if (this.options.rootUrl) {
-                    options.rootUrl = this.options.rootUrl;
+    getScope: function () {
+        return this.scope;
+    },
+
+    createRecordView: function (callback) {
+        let model = this.model;
+        let scope = this.getScope();
+
+        this.headerHtml = '';
+
+        this.headerHtml += $('<span>')
+            .text(this.getLanguage().translate(scope, 'scopeNames'))
+            .get(0).outerHTML;
+
+        if (model.get('name')) {
+            this.headerHtml += ' ' +
+                $('<span>')
+                    .addClass('chevron-right')
+                    .get(0).outerHTML;
+
+            this.headerHtml += ' ' +
+                $('<span>')
+                    .text(model.get('name'))
+                    .get(0).outerHTML;
+        }
+
+        if (!this.fullFormDisabled) {
+            let url = '#' + scope + '/view/' + this.id;
+
+            this.headerHtml =
+                $('<a>')
+                    .attr('href', url)
+                    .addClass('action font-size-flexible')
+                    .attr('title', this.translate('Full Form'))
+                    .attr('data-action', 'fullForm')
+                    .append(this.headerHtml)
+                    .get(0).outerHTML;
+        }
+
+        this.headerHtml = this.getHelper().getScopeColorIconHtml(this.scope) + this.headerHtml;
+
+        if (!this.editDisabled) {
+            let editAccess = this.getAcl().check(model, 'edit', true);
+
+            if (editAccess) {
+                this.showButton('edit');
+            } else {
+                this.hideButton('edit');
+
+                if (editAccess === null) {
+                    this.listenToOnce(model, 'sync', () => {
+                        if (this.getAcl().check(model, 'edit')) {
+                            this.showButton('edit');
+                        }
+                    });
                 }
-
-                this.getRouter().navigate('#' + this.scope + '/edit/' + this.id, {trigger: false});
-                this.getRouter().dispatch(this.scope, 'edit', options);
-
-                return Promise.reject();
             }
+        }
 
-            let viewName = this.getMetadata().get(['clientDefs', this.scope, 'modalViews', 'edit']) ||
-                'views/modals/edit';
+        if (!this.removeDisabled) {
+            var removeAccess = this.getAcl().check(model, 'delete', true);
 
-            Espo.Ui.notify(' ... ');
+            if (removeAccess) {
+                this.showButton('remove');
+            }
+            else {
+                this.hideButton('remove');
 
-            return new Promise(resolve => {
-                this.createView('quickEdit', viewName, {
-                    scope: this.scope,
-                    entityType: this.model.entityType,
-                    id: this.id,
-                    fullFormDisabled: this.fullFormDisabled
-                }, view => {
-                    this.listenToOnce(view, 'remove', () => {
-                        this.dialog.show();
+                if (removeAccess === null) {
+                    this.listenToOnce(model, 'sync', () => {
+                        if (this.getAcl().check(model, 'delete')) {
+                            this.showButton('remove');
+                        }
                     });
+                }
+            }
+        }
 
-                    this.listenToOnce(view, 'leave', () => {
-                        this.remove();
-                    });
+        let viewName =
+            this.detailViewName ||
+            this.detailView ||
+            this.getMetadata().get(['clientDefs', model.name, 'recordViews', 'detailSmall']) ||
+            this.getMetadata().get(['clientDefs', model.name, 'recordViews', 'detailQuick']) ||
+            'views/record/detail-small';
 
-                    this.listenTo(view, 'after:save', (model, o) => {
-                        this.model.set(model.getClonedAttributes());
+        let options = {
+            model: model,
+            el: this.containerSelector + ' .record-container',
+            type: 'detailSmall',
+            layoutName: this.layoutName || 'detailSmall',
+            buttonsDisabled: true,
+            inlineEditDisabled: true,
+            sideDisabled: this.sideDisabled,
+            bottomDisabled: this.bottomDisabled,
+            exit: function () {},
+        };
 
-                        this.trigger('after:save', model, o);
-                        this.controlRecordButtonsVisibility();
+        this.createView('record', viewName, options, callback);
+    },
 
-                        this.trigger('model-sync');
-                    });
+    /**
+     * @return {module:views/record/detail}
+     */
+    getRecordView: function () {
+        return this.getView('record');
+    },
 
-                    view.render()
-                        .then(() => {
-                            Espo.Ui.notify(false);
-                            this.dialog.hide();
+    afterRender: function () {
+        Dep.prototype.afterRender.call(this);
 
-                            resolve(view);
-                        });
-                });
+        setTimeout(() => {
+            this.$el.children(0).scrollTop(0);
+        }, 50);
+
+        if (!this.navigateButtonsDisabled) {
+            this.controlNavigationButtons();
+        }
+    },
+
+    controlNavigationButtons: function () {
+        let recordView = this.getView('record');
+
+        if (!recordView) {
+            return;
+        }
+
+        let indexOfRecord = this.indexOfRecord;
+
+        let previousButtonEnabled = false;
+        let nextButtonEnabled = false;
+
+        if (indexOfRecord > 0) {
+            previousButtonEnabled = true;
+        }
+
+        if (indexOfRecord < this.model.collection.total - 1) {
+            nextButtonEnabled = true;
+        }
+        else {
+            if (this.model.collection.total === -1) {
+                nextButtonEnabled = true;
+            } else if (this.model.collection.total === -2) {
+                if (indexOfRecord < this.model.collection.length - 1) {
+                    nextButtonEnabled = true;
+                }
+            }
+        }
+
+        if (previousButtonEnabled) {
+            this.enableButton('previous');
+        } else {
+            this.disableButton('previous');
+        }
+
+        if (nextButtonEnabled) {
+            this.enableButton('next');
+        } else {
+             this.disableButton('next');
+        }
+    },
+
+    switchToModelByIndex: function (indexOfRecord) {
+        if (!this.model.collection) {
+            return;
+        }
+
+        let previousModel = this.model;
+
+        this.sourceModel = this.model.collection.at(indexOfRecord);
+
+        if (!this.sourceModel) {
+            throw new Error("Model is not found in collection by index.");
+        }
+
+        this.indexOfRecord = indexOfRecord;
+
+        this.id = this.sourceModel.id;
+        this.scope = this.sourceModel.name;
+
+        this.model = this.sourceModel.clone();
+        this.model.collection = this.sourceModel.collection.clone();
+
+        this.stopListening(previousModel, 'change');
+        this.stopListening(previousModel, 'sync');
+
+        this.listenTo(this.model, 'change', () => {
+            this.sourceModel.set(this.model.getClonedAttributes());
+        });
+
+        this.listenTo(this.model, 'sync', () => {
+            this.controlRecordButtonsVisibility();
+
+            this.trigger('model-sync');
+        });
+
+        this.createRecordView(() => {
+            this.reRender()
+                .then(() => {
+                    this.model.fetch();
+                })
+        });
+
+        this.controlNavigationButtons();
+        this.trigger('switch-model', this.model, previousModel);
+    },
+
+    actionPrevious: function () {
+        if (!this.model.collection) {
+            return;
+        }
+
+        if (!(this.indexOfRecord > 0)) {
+            return;
+        }
+
+        let indexOfRecord = this.indexOfRecord - 1;
+
+        this.switchToModelByIndex(indexOfRecord);
+    },
+
+    actionNext: function () {
+        if (!this.model.collection) {
+            return;
+        }
+
+        if (!(this.indexOfRecord < this.model.collection.total - 1) && this.model.collection.total >= 0) {
+            return;
+        }
+
+        if (this.model.collection.total === -2 && this.indexOfRecord >= this.model.collection.length - 1) {
+            return;
+        }
+
+        let collection = this.model.collection;
+
+        let indexOfRecord = this.indexOfRecord + 1;
+
+        if (indexOfRecord <= collection.length - 1) {
+            this.switchToModelByIndex(indexOfRecord);
+
+            return;
+        }
+
+        collection
+            .fetch({
+                more: true,
+                remove: false,
+            })
+            .then(() => {
+                this.switchToModelByIndex(indexOfRecord);
             });
-        },
+    },
 
-        actionRemove: function () {
-            let model = this.getView('record').model;
-
-            this.confirm(this.translate('removeRecordConfirmation', 'messages'), () => {
-                let $buttons = this.dialog.$el.find('.modal-footer button');
-
-                $buttons.addClass('disabled').attr('disabled', 'disabled');
-
-                model.destroy()
-                    .then(() => {
-                        this.trigger('after:destroy', model);
-                        this.dialog.close();
-                    })
-                    .catch(() => {
-                        $buttons.removeClass('disabled').removeAttr('disabled');
-                    });
-            });
-        },
-
-        actionFullForm: function () {
-            let url;
-            let router = this.getRouter();
-
-            let scope = this.getScope();
-
-            url = '#' + scope + '/view/' + this.id;
-
-            var attributes = this.getView('record').fetch();
-            var model = this.getView('record').model;
-
-            attributes = _.extend(attributes, model.getClonedAttributes());
-
-            var options = {
-                attributes: attributes,
-                returnUrl: Backbone.history.fragment,
-                model: this.sourceModel || this.model,
+    /**
+     * @return {Promise}
+     */
+    actionEdit: function () {
+        if (this.options.quickEditDisabled) {
+            let options = {
                 id: this.id,
+                model: this.model,
+                returnUrl: this.getRouter().getCurrentUrl(),
             };
 
             if (this.options.rootUrl) {
                 options.rootUrl = this.options.rootUrl;
             }
 
-            setTimeout(() => {
-                router.dispatch(scope, 'view', options);
-                router.navigate(url, {trigger: false});
-            }, 10);
+            this.getRouter().navigate('#' + this.scope + '/edit/' + this.id, {trigger: false});
+            this.getRouter().dispatch(this.scope, 'edit', options);
 
-            this.trigger('leave');
-            this.dialog.close();
-        },
+            return Promise.reject();
+        }
 
-        actionDuplicate: function () {
-            Espo.Ui.notify(' ... ');
+        let viewName = this.getMetadata().get(['clientDefs', this.scope, 'modalViews', 'edit']) ||
+            'views/modals/edit';
 
-            Espo.Ajax
-                .postRequest(this.scope + '/action/getDuplicateAttributes', {
-                    id: this.model.id,
-                })
-                .then(attributes => {
-                    Espo.Ui.notify(false);
+        Espo.Ui.notify(' ... ');
 
-                    let url = '#' + this.scope + '/create';
-
-                    this.getRouter().dispatch(this.scope, 'create', {
-                        attributes: attributes,
-                        returnUrl: this.getRouter().getCurrentUrl(),
-                        options: {
-                            duplicateSourceId: this.model.id,
-                            returnAfterCreate: true,
-                        },
-                    });
-
-                    this.getRouter().navigate(url, {trigger: false});
+        return new Promise(resolve => {
+            this.createView('quickEdit', viewName, {
+                scope: this.scope,
+                entityType: this.model.entityType,
+                id: this.id,
+                fullFormDisabled: this.fullFormDisabled
+            }, view => {
+                this.listenToOnce(view, 'remove', () => {
+                    this.dialog.show();
                 });
-        },
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyControlArrowLeft: function (e) {
-            if (!this.model.collection) {
-                return;
-            }
+                this.listenToOnce(view, 'leave', () => {
+                    this.remove();
+                });
 
-            if (this.buttonList.findIndex(item => item.name === 'previous' && !item.disabled) === -1) {
-                return;
-            }
+                this.listenTo(view, 'after:save', (model, o) => {
+                    this.model.set(model.getClonedAttributes());
 
-            if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
-                return;
-            }
+                    this.trigger('after:save', model, o);
+                    this.controlRecordButtonsVisibility();
 
-            e.preventDefault();
-            e.stopPropagation();
+                    this.trigger('model-sync');
+                });
 
-            this.actionPrevious();
-        },
+                view.render()
+                    .then(() => {
+                        Espo.Ui.notify(false);
+                        this.dialog.hide();
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyControlArrowRight: function (e) {
-            if (!this.model.collection) {
-                return;
-            }
+                        resolve(view);
+                    });
+            });
+        });
+    },
 
-            if (this.buttonList.findIndex(item => item.name === 'next' && !item.disabled) === -1) {
-                return;
-            }
+    actionRemove: function () {
+        let model = this.getView('record').model;
 
-            if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
-                return;
-            }
+        this.confirm(this.translate('removeRecordConfirmation', 'messages'), () => {
+            let $buttons = this.dialog.$el.find('.modal-footer button');
 
-            e.preventDefault();
-            e.stopPropagation();
+            $buttons.addClass('disabled').attr('disabled', 'disabled');
 
-            this.actionNext();
-        },
-    });
+            model.destroy()
+                .then(() => {
+                    this.trigger('after:destroy', model);
+                    this.dialog.close();
+                })
+                .catch(() => {
+                    $buttons.removeClass('disabled').removeAttr('disabled');
+                });
+        });
+    },
+
+    actionFullForm: function () {
+        let url;
+        let router = this.getRouter();
+
+        let scope = this.getScope();
+
+        url = '#' + scope + '/view/' + this.id;
+
+        var attributes = this.getView('record').fetch();
+        var model = this.getView('record').model;
+
+        attributes = _.extend(attributes, model.getClonedAttributes());
+
+        var options = {
+            attributes: attributes,
+            returnUrl: Backbone.history.fragment,
+            model: this.sourceModel || this.model,
+            id: this.id,
+        };
+
+        if (this.options.rootUrl) {
+            options.rootUrl = this.options.rootUrl;
+        }
+
+        setTimeout(() => {
+            router.dispatch(scope, 'view', options);
+            router.navigate(url, {trigger: false});
+        }, 10);
+
+        this.trigger('leave');
+        this.dialog.close();
+    },
+
+    actionDuplicate: function () {
+        Espo.Ui.notify(' ... ');
+
+        Espo.Ajax
+            .postRequest(this.scope + '/action/getDuplicateAttributes', {
+                id: this.model.id,
+            })
+            .then(attributes => {
+                Espo.Ui.notify(false);
+
+                let url = '#' + this.scope + '/create';
+
+                this.getRouter().dispatch(this.scope, 'create', {
+                    attributes: attributes,
+                    returnUrl: this.getRouter().getCurrentUrl(),
+                    options: {
+                        duplicateSourceId: this.model.id,
+                        returnAfterCreate: true,
+                    },
+                });
+
+                this.getRouter().navigate(url, {trigger: false});
+            });
+    },
+
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyControlArrowLeft: function (e) {
+        if (!this.model.collection) {
+            return;
+        }
+
+        if (this.buttonList.findIndex(item => item.name === 'previous' && !item.disabled) === -1) {
+            return;
+        }
+
+        if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
+            return;
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.actionPrevious();
+    },
+
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyControlArrowRight: function (e) {
+        if (!this.model.collection) {
+            return;
+        }
+
+        if (this.buttonList.findIndex(item => item.name === 'next' && !item.disabled) === -1) {
+            return;
+        }
+
+        if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
+            return;
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.actionNext();
+    },
 });
diff --git a/client/src/views/modals/edit.js b/client/src/views/modals/edit.js
index 47c4804723..f1f8eba78c 100644
--- a/client/src/views/modals/edit.js
+++ b/client/src/views/modals/edit.js
@@ -26,376 +26,376 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/modals/edit', ['views/modal'], function (Dep) {
+/** @module views/modals/edit */
 
-    /**
-     * A quick edit modal.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:views/modals/edit
-     * @extends module:views/modal.Class
-     */
-    return Dep.extend(/** @lends module:views/modals/edit.Class# */{
+import Dep from 'views/modal';
+import Backbone from 'lib!backbone';
 
-        cssName: 'edit-modal',
-        template: 'modals/edit',
-        saveDisabled: false,
-        fullFormDisabled: false,
-        editView: null,
-        escapeDisabled: true,
-        fitHeight: true,
-        className: 'dialog dialog-record',
-        sideDisabled: false,
-        bottomDisabled: false,
+/**
+ * A quick edit modal.
+ *
+ * @class
+ * @name Class
+ * @memberOf module:views/modals/edit
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        shortcutKeys: {
-            'Control+Enter': function (e) {
-                if (this.saveDisabled) {
-                    return;
-                }
+    cssName: 'edit-modal',
+    template: 'modals/edit',
+    saveDisabled: false,
+    fullFormDisabled: false,
+    editView: null,
+    escapeDisabled: true,
+    fitHeight: true,
+    className: 'dialog dialog-record',
+    sideDisabled: false,
+    bottomDisabled: false,
 
-                if (this.buttonList.findIndex(item => item.name === 'save' && !item.hidden) === -1) {
-                    return;
-                }
-
-                e.preventDefault();
-                e.stopPropagation();
-
-                this.actionSave();
-            },
-            'Control+KeyS': function (e) {
-                if (this.saveDisabled) {
-                    return;
-                }
-
-                if (this.buttonList.findIndex(item => item.name === 'save' && !item.hidden) === -1) {
-                    return;
-                }
-
-                e.preventDefault();
-                e.stopPropagation();
-
-                this.actionSaveAndContinueEditing();
-            },
-            'Escape': function (e) {
-                if (this.saveDisabled) {
-                    return;
-                }
-
-                e.stopPropagation();
-                e.preventDefault();
-
-                let focusedFieldView = this.getRecordView().getFocusedFieldView();
-
-                if (focusedFieldView) {
-                    this.model.set(focusedFieldView.fetch(), {skipReRender: true});
-                }
-
-                if (this.getRecordView().isChanged) {
-                    this.confirm(this.translate('confirmLeaveOutMessage', 'messages'))
-                        .then(() => this.actionClose());
-
-                    return;
-                }
-
-                this.actionClose();
-            },
-            'Control+Backslash': function (e) {
-                this.getRecordView().handleShortcutKeyControlBackslash(e);
-            },
-        },
-
-        setup: function () {
-            this.buttonList = [];
-
-            if ('saveDisabled' in this.options) {
-                this.saveDisabled = this.options.saveDisabled;
-            }
-
-            if (!this.saveDisabled) {
-                this.buttonList.push({
-                    name: 'save',
-                    label: 'Save',
-                    style: 'primary',
-                    title: 'Ctrl+Enter',
-                });
-            }
-
-            this.fullFormDisabled = this.options.fullFormDisabled || this.fullFormDisabled;
-
-            this.layoutName = this.options.layoutName || this.layoutName;
-
-            if (!this.fullFormDisabled) {
-                this.buttonList.push({
-                    name: 'fullForm',
-                    label: 'Full Form',
-                });
-            }
-
-            this.buttonList.push({
-                name: 'cancel',
-                label: 'Cancel',
-                title: 'Esc',
-            });
-
-            this.scope = this.scope || this.options.scope;
-            this.entityType = this.options.entityType || this.scope;
-            this.id = this.options.id;
-
-            this.headerHtml = this.composeHeaderHtml();
-
-            this.sourceModel = this.model;
-
-            this.waitForView('edit');
-
-            this.getModelFactory().create(this.entityType, (model) => {
-                if (this.id) {
-                    if (this.sourceModel) {
-                        model = this.model = this.sourceModel.clone();
-                    }
-                    else {
-                        this.model = model;
-
-                        model.id = this.id;
-                    }
-
-                    model
-                        .fetch()
-                        .then(() => {
-                            this.createRecordView(model);
-                        });
-
-                    return;
-                }
-
-                this.model = model;
-
-                if (this.options.relate) {
-                    model.setRelate(this.options.relate);
-                }
-
-                if (this.options.attributes) {
-                    model.set(this.options.attributes);
-                }
-
-                this.createRecordView(model);
-            });
-        },
-
-        /**
-         * @param {module:model.Class} model
-         * @param {function} [callback]
-         */
-        createRecordView: function (model, callback) {
-            let viewName =
-                this.editView ||
-                this.getMetadata().get(['clientDefs', model.name, 'recordViews', 'editSmall']) ||
-                this.getMetadata().get(['clientDefs', model.name, 'recordViews', 'editQuick']) ||
-                'views/record/edit-small';
-
-            let options = {
-                model: model,
-                el: this.containerSelector + ' .edit-container',
-                type: 'editSmall',
-                layoutName: this.layoutName || 'detailSmall',
-                buttonsDisabled: true,
-                sideDisabled: this.sideDisabled,
-                bottomDisabled: this.bottomDisabled,
-                focusForCreate: this.options.focusForCreate,
-                exit: () => {},
-            };
-
-            this.handleRecordViewOptions(options);
-
-            this.createView('edit', viewName, options, callback)
-                .then(view => {
-                    this.listenTo(view, 'before:save', () => this.trigger('before:save', model));
-
-                    if (this.options.relate && ('link' in this.options.relate)) {
-                        let link = this.options.relate.link;
-
-                        if (
-                            model.hasField(link) &&
-                            ['link'].includes(model.getFieldType(link))
-                        ) {
-                            view.setFieldReadOnly(link);
-                        }
-                    }
-                });
-        },
-
-        handleRecordViewOptions: function (options) {},
-
-        /**
-         * @return {module:views/record/edit.Class}
-         */
-        getRecordView: function () {
-            return this.getView('edit');
-        },
-
-        onBackdropClick: function () {
-            if (this.getRecordView().isChanged) {
+    shortcutKeys: {
+        'Control+Enter': function (e) {
+            if (this.saveDisabled) {
                 return;
             }
 
-            this.close();
+            if (this.buttonList.findIndex(item => item.name === 'save' && !item.hidden) === -1) {
+                return;
+            }
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            this.actionSave();
         },
-
-        /**
-         * @protected
-         * @return {string}
-         */
-        composeHeaderHtml: function () {
-            let html;
-
-            if (!this.id) {
-                html = $('<span>')
-                    .text(this.getLanguage().translate('Create ' + this.scope, 'labels', this.scope))
-                    .get(0).outerHTML;
-            }
-            else {
-                let text = this.getLanguage().translate('Edit') + ' · ' +
-                    this.getLanguage().translate(this.scope, 'scopeNames');
-
-                html = $('<span>')
-                    .text(text)
-                    .get(0).outerHTML;
+        'Control+KeyS': function (e) {
+            if (this.saveDisabled) {
+                return;
             }
 
-            if (!this.fullFormDisabled) {
-                let url = this.id ?
-                    '#' + this.scope + '/edit/' + this.id :
-                    '#' + this.scope + '/create';
-
-                html =
-                    $('<a>')
-                        .attr('href', url)
-                        .addClass('action')
-                        .attr('title', this.translate('Full Form'))
-                        .attr('data-action', 'fullForm')
-                        .append(html)
-                        .get(0).outerHTML;
+            if (this.buttonList.findIndex(item => item.name === 'save' && !item.hidden) === -1) {
+                return;
             }
 
-            html = this.getHelper().getScopeColorIconHtml(this.scope) + html;
+            e.preventDefault();
+            e.stopPropagation();
 
-            return html;
+            this.actionSaveAndContinueEditing();
         },
+        'Escape': function (e) {
+            if (this.saveDisabled) {
+                return;
+            }
 
-        actionSave: function (data) {
-            data = data || {};
+            e.stopPropagation();
+            e.preventDefault();
 
-            let editView = this.getRecordView();
+            let focusedFieldView = this.getRecordView().getFocusedFieldView();
 
-            let model = editView.model;
+            if (focusedFieldView) {
+                this.model.set(focusedFieldView.fetch(), {skipReRender: true});
+            }
 
-            let $buttons = this.dialog.$el.find('.modal-footer button');
+            if (this.getRecordView().isChanged) {
+                this.confirm(this.translate('confirmLeaveOutMessage', 'messages'))
+                    .then(() => this.actionClose());
 
-            $buttons.addClass('disabled').attr('disabled', 'disabled');
+                return;
+            }
 
-            editView
-                .save()
-                .then(() => {
-                    let wasNew = !this.id;
+            this.actionClose();
+        },
+        'Control+Backslash': function (e) {
+            this.getRecordView().handleShortcutKeyControlBackslash(e);
+        },
+    },
+
+    setup: function () {
+        this.buttonList = [];
+
+        if ('saveDisabled' in this.options) {
+            this.saveDisabled = this.options.saveDisabled;
+        }
+
+        if (!this.saveDisabled) {
+            this.buttonList.push({
+                name: 'save',
+                label: 'Save',
+                style: 'primary',
+                title: 'Ctrl+Enter',
+            });
+        }
+
+        this.fullFormDisabled = this.options.fullFormDisabled || this.fullFormDisabled;
+
+        this.layoutName = this.options.layoutName || this.layoutName;
+
+        if (!this.fullFormDisabled) {
+            this.buttonList.push({
+                name: 'fullForm',
+                label: 'Full Form',
+            });
+        }
+
+        this.buttonList.push({
+            name: 'cancel',
+            label: 'Cancel',
+            title: 'Esc',
+        });
+
+        this.scope = this.scope || this.options.scope;
+        this.entityType = this.options.entityType || this.scope;
+        this.id = this.options.id;
+
+        this.headerHtml = this.composeHeaderHtml();
+
+        this.sourceModel = this.model;
+
+        this.waitForView('edit');
+
+        this.getModelFactory().create(this.entityType, (model) => {
+            if (this.id) {
+                if (this.sourceModel) {
+                    model = this.model = this.sourceModel.clone();
+                }
+                else {
+                    this.model = model;
+
+                    model.id = this.id;
+                }
+
+                model
+                    .fetch()
+                    .then(() => {
+                        this.createRecordView(model);
+                    });
+
+                return;
+            }
+
+            this.model = model;
+
+            if (this.options.relate) {
+                model.setRelate(this.options.relate);
+            }
+
+            if (this.options.attributes) {
+                model.set(this.options.attributes);
+            }
+
+            this.createRecordView(model);
+        });
+    },
+
+    /**
+     * @param {module:model} model
+     * @param {function} [callback]
+     */
+    createRecordView: function (model, callback) {
+        let viewName =
+            this.editView ||
+            this.getMetadata().get(['clientDefs', model.name, 'recordViews', 'editSmall']) ||
+            this.getMetadata().get(['clientDefs', model.name, 'recordViews', 'editQuick']) ||
+            'views/record/edit-small';
+
+        let options = {
+            model: model,
+            el: this.containerSelector + ' .edit-container',
+            type: 'editSmall',
+            layoutName: this.layoutName || 'detailSmall',
+            buttonsDisabled: true,
+            sideDisabled: this.sideDisabled,
+            bottomDisabled: this.bottomDisabled,
+            focusForCreate: this.options.focusForCreate,
+            exit: () => {},
+        };
+
+        this.handleRecordViewOptions(options);
+
+        this.createView('edit', viewName, options, callback)
+            .then(view => {
+                this.listenTo(view, 'before:save', () => this.trigger('before:save', model));
+
+                if (this.options.relate && ('link' in this.options.relate)) {
+                    let link = this.options.relate.link;
+
+                    if (
+                        model.hasField(link) &&
+                        ['link'].includes(model.getFieldType(link))
+                    ) {
+                        view.setFieldReadOnly(link);
+                    }
+                }
+            });
+    },
+
+    handleRecordViewOptions: function (options) {},
+
+    /**
+     * @return {module:views/record/edit}
+     */
+    getRecordView: function () {
+        return this.getView('edit');
+    },
+
+    onBackdropClick: function () {
+        if (this.getRecordView().isChanged) {
+            return;
+        }
+
+        this.close();
+    },
+
+    /**
+     * @protected
+     * @return {string}
+     */
+    composeHeaderHtml: function () {
+        let html;
+
+        if (!this.id) {
+            html = $('<span>')
+                .text(this.getLanguage().translate('Create ' + this.scope, 'labels', this.scope))
+                .get(0).outerHTML;
+        }
+        else {
+            let text = this.getLanguage().translate('Edit') + ' · ' +
+                this.getLanguage().translate(this.scope, 'scopeNames');
+
+            html = $('<span>')
+                .text(text)
+                .get(0).outerHTML;
+        }
+
+        if (!this.fullFormDisabled) {
+            let url = this.id ?
+                '#' + this.scope + '/edit/' + this.id :
+                '#' + this.scope + '/create';
+
+            html =
+                $('<a>')
+                    .attr('href', url)
+                    .addClass('action')
+                    .attr('title', this.translate('Full Form'))
+                    .attr('data-action', 'fullForm')
+                    .append(html)
+                    .get(0).outerHTML;
+        }
+
+        html = this.getHelper().getScopeColorIconHtml(this.scope) + html;
+
+        return html;
+    },
+
+    actionSave: function (data) {
+        data = data || {};
+
+        let editView = this.getRecordView();
+
+        let model = editView.model;
+
+        let $buttons = this.dialog.$el.find('.modal-footer button');
+
+        $buttons.addClass('disabled').attr('disabled', 'disabled');
+
+        editView
+            .save()
+            .then(() => {
+                let wasNew = !this.id;
+
+                if (wasNew) {
+                    this.id = model.id;
+                }
+
+                this.trigger('after:save', model, {bypassClose: data.bypassClose});
+
+                if (!data.bypassClose) {
+                    this.dialog.close();
 
                     if (wasNew) {
-                        this.id = model.id;
+                        let url = '#' + this.scope + '/view/' + model.id;
+                        let name = model.get('name');
+
+                        let msg = this.translate('Created')  + '\n' +
+                            `[${name}](${url})`;
+
+                        Espo.Ui.notify(msg, 'success', 4000, true);
                     }
 
-                    this.trigger('after:save', model, {bypassClose: data.bypassClose});
-
-                    if (!data.bypassClose) {
-                        this.dialog.close();
-
-                        if (wasNew) {
-                            let url = '#' + this.scope + '/view/' + model.id;
-                            let name = model.get('name');
-
-                            let msg = this.translate('Created')  + '\n' +
-                                `[${name}](${url})`;
-
-                            Espo.Ui.notify(msg, 'success', 4000, true);
-                        }
-
-                        return;
-                    }
-
-                    this.$el.find('.modal-header .modal-title-text')
-                        .html(this.composeHeaderHtml());
-
-                    $buttons.removeClass('disabled').removeAttr('disabled');
-                })
-                .catch(() => {
-                    $buttons.removeClass('disabled').removeAttr('disabled');
-                })
-        },
-
-        actionSaveAndContinueEditing: function () {
-            this.actionSave({bypassClose: true});
-        },
-
-        actionFullForm: function (dialog) {
-            var url;
-            var router = this.getRouter();
-
-            var attributes;
-            var model;
-            var options;
-
-            if (!this.id) {
-                url = '#' + this.scope + '/create';
-
-                attributes = this.getView('edit').fetch();
-                model = this.getView('edit').model;
-
-                attributes = _.extend(attributes, model.getClonedAttributes());
-
-                options = {
-                    attributes: attributes,
-                    relate: this.options.relate,
-                    returnUrl: this.options.returnUrl || Backbone.history.fragment,
-                    returnDispatchParams: this.options.returnDispatchParams || null,
-                };
-
-                if (this.options.rootUrl) {
-                    options.rootUrl = this.options.rootUrl;
+                    return;
                 }
 
-                setTimeout(() => {
-                    router.dispatch(this.scope, 'create', options);
-                    router.navigate(url, {trigger: false});
-                }, 10);
-            }
-            else {
-                url = '#' + this.scope + '/edit/' + this.id;
+                this.$el.find('.modal-header .modal-title-text')
+                    .html(this.composeHeaderHtml());
 
-                attributes = this.getView('edit').fetch();
-                model = this.getView('edit').model;
+                $buttons.removeClass('disabled').removeAttr('disabled');
+            })
+            .catch(() => {
+                $buttons.removeClass('disabled').removeAttr('disabled');
+            })
+    },
 
-                attributes = _.extend(attributes, model.getClonedAttributes());
+    actionSaveAndContinueEditing: function () {
+        this.actionSave({bypassClose: true});
+    },
 
-                options = {
-                    attributes: attributes,
-                    returnUrl: this.options.returnUrl || Backbone.history.fragment,
-                    returnDispatchParams: this.options.returnDispatchParams || null,
-                    model: this.sourceModel,
-                    id: this.id,
-                };
+    actionFullForm: function (dialog) {
+        var url;
+        var router = this.getRouter();
 
-                if (this.options.rootUrl) {
-                    options.rootUrl = this.options.rootUrl;
-                }
+        var attributes;
+        var model;
+        var options;
 
-                setTimeout(() => {
-                    router.dispatch(this.scope, 'edit', options);
-                    router.navigate(url, {trigger: false});
-                }, 10);
+        if (!this.id) {
+            url = '#' + this.scope + '/create';
+
+            attributes = this.getView('edit').fetch();
+            model = this.getView('edit').model;
+
+            attributes = _.extend(attributes, model.getClonedAttributes());
+
+            options = {
+                attributes: attributes,
+                relate: this.options.relate,
+                returnUrl: this.options.returnUrl || Backbone.history.fragment,
+                returnDispatchParams: this.options.returnDispatchParams || null,
+            };
+
+            if (this.options.rootUrl) {
+                options.rootUrl = this.options.rootUrl;
             }
 
-            this.trigger('leave');
-            this.dialog.close();
-        },
-    });
+            setTimeout(() => {
+                router.dispatch(this.scope, 'create', options);
+                router.navigate(url, {trigger: false});
+            }, 10);
+        }
+        else {
+            url = '#' + this.scope + '/edit/' + this.id;
+
+            attributes = this.getView('edit').fetch();
+            model = this.getView('edit').model;
+
+            attributes = _.extend(attributes, model.getClonedAttributes());
+
+            options = {
+                attributes: attributes,
+                returnUrl: this.options.returnUrl || Backbone.history.fragment,
+                returnDispatchParams: this.options.returnDispatchParams || null,
+                model: this.sourceModel,
+                id: this.id,
+            };
+
+            if (this.options.rootUrl) {
+                options.rootUrl = this.options.rootUrl;
+            }
+
+            setTimeout(() => {
+                router.dispatch(this.scope, 'edit', options);
+                router.navigate(url, {trigger: false});
+            }, 10);
+        }
+
+        this.trigger('leave');
+        this.dialog.close();
+    },
 });
-
diff --git a/client/src/views/modals/related-list.js b/client/src/views/modals/related-list.js
index 96f915ae4f..5838227c5d 100644
--- a/client/src/views/modals/related-list.js
+++ b/client/src/views/modals/related-list.js
@@ -26,606 +26,599 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/modals/related-list', ['views/modal', 'search-manager'], function (Dep, SearchManager) {
+/** @module views/modals/related-records */
+
+import Dep from 'views/modal';
+import SearchManager from 'search-manager';
+
+/**
+ * A related-list modal.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/modal
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    template: 'modals/related-list',
+
+    className: 'dialog dialog-record',
+
+    searchPanel: true,
+    scope: null,
+    noCreateScopeList: ['User', 'Team', 'Role', 'Portal'],
+    backdrop: true,
+    fixedHeaderHeight: true,
+    mandatorySelectAttributeList: null,
 
     /**
-     * A related-list modal.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:views/modals/related-list
-     * @extends module:views/modal.Class
+     * @inheritDoc
      */
-    return Dep.extend(/** @lends module:views/modals/related-list.Class# */{
-
-        template: 'modals/related-list',
-
-        searchPanel: true,
-
-        scope: null,
-
-        noCreateScopeList: ['User', 'Team', 'Role', 'Portal'],
-
-        className: 'dialog dialog-record',
-
-        backdrop: true,
-
-        fixedHeaderHeight: true,
-
-        mandatorySelectAttributeList: null,
-
-        /**
-         * @inheritDoc
-         */
-        shortcutKeys: {
-            'Control+Space': function (e) {
-                this.handleShortcutKeyCtrlSpace(e);
-            },
-            'Control+Slash': function (e) {
-                this.handleShortcutKeyCtrlSlash(e);
-            },
-            'Control+Comma': function (e) {
-                this.handleShortcutKeyCtrlComma(e);
-            },
-            'Control+Period': function (e) {
-                this.handleShortcutKeyCtrlPeriod(e);
-            },
+    shortcutKeys: {
+        'Control+Space': function (e) {
+            this.handleShortcutKeyCtrlSpace(e);
         },
-
-        events: {
-            'click button[data-action="createRelated"]': function () {
-                this.actionCreateRelated();
-            },
-            'click .action': function (e) {
-                var $el = $(e.currentTarget);
-
-                var action = $el.data('action');
-
-                var method = 'action' + Espo.Utils.upperCaseFirst(action);
-
-                var data = $el.data();
-
-                if (typeof this[method] === 'function') {
-                    this[method](data, e);
-
-                    e.preventDefault();
-                }
-                else {
-                    this.trigger('action', action, data, e);
-                }
-            }
+        'Control+Slash': function (e) {
+            this.handleShortcutKeyCtrlSlash(e);
         },
+        'Control+Comma': function (e) {
+            this.handleShortcutKeyCtrlComma(e);
+        },
+        'Control+Period': function (e) {
+            this.handleShortcutKeyCtrlPeriod(e);
+        },
+    },
 
-        setup: function () {
-            this.primaryFilterName = this.options.primaryFilterName || null;
+    events: {
+        'click button[data-action="createRelated"]': function () {
+            this.actionCreateRelated();
+        },
+        'click .action': function (e) {
+            let $el = $(e.currentTarget);
+            let action = $el.data('action');
+            let method = 'action' + Espo.Utils.upperCaseFirst(action);
+            let data = $el.data();
 
-            this.buttonList = [
-                {
-                    name: 'cancel',
-                    label: 'Close',
+            if (typeof this[method] === 'function') {
+                this[method](data, e);
+
+                e.preventDefault();
+            }
+            else {
+                this.trigger('action', action, data, e);
+            }
+        }
+    },
+
+    setup: function () {
+        this.primaryFilterName = this.options.primaryFilterName || null;
+
+        this.buttonList = [
+            {
+                name: 'cancel',
+                label: 'Close',
+            }
+        ];
+
+        this.scope = this.options.scope || this.scope;
+
+        this.defaultOrderBy = this.options.defaultOrderBy;
+        this.defaultOrder = this.options.defaultOrder;
+
+        this.panelName = this.options.panelName;
+        this.link = this.options.link;
+
+        this.defs = this.options.defs || {};
+
+        this.filterList = this.options.filterList;
+        this.filter = this.options.filter;
+        this.layoutName = this.options.layoutName || 'listSmall';
+        this.url = this.options.url;
+        this.listViewName = this.options.listViewName;
+        this.rowActionsView = this.options.rowActionsView;
+
+        this.createDisabled = this.options.createDisabled || this.createDisabled;
+        this.selectDisabled = this.options.selectDisabled || this.selectDisabled;
+
+        this.massUnlinkDisabled = this.options.massUnlinkDisabled || this.massUnlinkDisabled;
+
+        this.massActionRemoveDisabled = this.options.massActionRemoveDisabled ||
+            this.massActionRemoveDisabled;
+
+        this.massActionMassUpdateDisabled = this.options.massActionMassUpdateDisabled ||
+            this.massActionMassUpdateDisabled;
+
+        this.panelCollection = this.options.panelCollection;
+
+        if (this.panelCollection) {
+            this.listenTo(this.panelCollection, 'sync', (c, r, o) => {
+                if (o.skipCollectionSync) {
+                    return;
                 }
-            ];
 
-            this.scope = this.options.scope || this.scope;
+                this.collection.fetch();
+            });
 
-            this.defaultOrderBy = this.options.defaultOrderBy;
-            this.defaultOrder = this.options.defaultOrder;
+            // Sync changing models.
+            this.listenTo(this.panelCollection, 'change', (m, o) => {
+                // Prevent change after save.
+                if (o.xhr || !m.id) {
+                    return;
+                }
 
-            this.panelName = this.options.panelName;
-            this.link = this.options.link;
+                let model = this.collection.get(m.id);
 
-            this.defs = this.options.defs || {};
+                if (!model) {
+                    return;
+                }
 
-            this.filterList = this.options.filterList;
-            this.filter = this.options.filter;
-            this.layoutName = this.options.layoutName || 'listSmall';
-            this.url = this.options.url;
-            this.listViewName = this.options.listViewName;
-            this.rowActionsView = this.options.rowActionsView;
+                let attributes = {};
 
-            this.createDisabled = this.options.createDisabled || this.createDisabled;
-            this.selectDisabled = this.options.selectDisabled || this.selectDisabled;
-
-            this.massUnlinkDisabled = this.options.massUnlinkDisabled || this.massUnlinkDisabled;
-
-            this.massActionRemoveDisabled = this.options.massActionRemoveDisabled ||
-                this.massActionRemoveDisabled;
-
-            this.massActionMassUpdateDisabled = this.options.massActionMassUpdateDisabled ||
-                this.massActionMassUpdateDisabled;
-
-            this.panelCollection = this.options.panelCollection;
-
-            if (this.panelCollection) {
-                this.listenTo(this.panelCollection, 'sync', (c, r, o) => {
-                    if (o.skipCollectionSync) {
-                        return;
+                for (let name in m.attributes) {
+                    if (m.hasChanged(name)) {
+                        attributes[name] = m.attributes[name];
                     }
-
-                    this.collection.fetch();
-                });
-
-                // Sync changing models.
-                this.listenTo(this.panelCollection, 'change', (m, o) => {
-                    // Prevent change after save.
-                    if (o.xhr || !m.id) {
-                        return;
-                    }
-
-                    let model = this.collection.get(m.id);
-
-                    if (!model) {
-                        return;
-                    }
-
-                    let attributes = {};
-
-                    for (let name in m.attributes) {
-                        if (m.hasChanged(name)) {
-                            attributes[name] = m.attributes[name];
-                        }
-                    }
-
-                    model.set(attributes);
-                });
-
-                if (this.model) {
-                    this.listenTo(this.model, 'after:unrelate', () => {
-                        this.panelCollection.fetch({
-                            skipCollectionSync: true,
-                        });
-                    });
-                }
-            }
-            else if (this.model) {
-                this.listenTo(this.model, 'after:relate', () => {
-                    this.collection.fetch();
-                });
-            }
-
-            if (this.noCreateScopeList.indexOf(this.scope) !== -1) {
-                this.createDisabled = true;
-            }
-
-            this.primaryFilterName = this.filter;
-
-            if (!this.createDisabled) {
-                if (
-                    !this.getAcl().check(this.scope, 'create') ||
-                    this.getMetadata().get(['clientDefs', this.scope, 'createDisabled'])
-                ) {
-                    this.createDisabled = true;
-                }
-            }
-
-            this.unlinkDisabled = this.unlinkDisabled || this.options.unlinkDisabled;
-
-            if (!this.massUnlinkDisabled) {
-                if (this.unlinkDisabled || this.defs.massUnlinkDisabled || this.defs.unlinkDisabled) {
-                    this.massUnlinkDisabled = true;
                 }
 
-                if (!this.getAcl().check(this.model, 'edit')) {
-                    this.massUnlinkDisabled = true;
-                }
-            }
-
-            if (!this.selectDisabled) {
-                this.buttonList.unshift({
-                    name: 'selectRelated',
-                    label: 'Select',
-                    pullLeft: true,
-                });
-            }
-
-            if (!this.createDisabled) {
-                this.buttonList.unshift({
-                    name: 'createRelated',
-                    label: 'Create',
-                    pullLeft: true,
-                });
-            }
-
-            this.$header = $('<span>');
+                model.set(attributes);
+            });
 
             if (this.model) {
-                if (this.model.get('name')) {
-                    this.$header.append(
-                        $('<span>').text(this.model.get('name')),
-                        ' <span class="chevron-right"></span> '
-                    );
-                }
-            }
-
-            let title = this.options.title;
-
-            if (title) {
-                title = this.getHelper().escapeString(this.options.title)
-                    .replace(/@right/, '<span class="chevron-right"></span>');
-            }
-
-            this.$header.append(
-                title ||
-                $('<span>').text(
-                    this.getLanguage().translate(this.link, 'links', this.model.name)
-                )
-            );
-
-            if (this.options.listViewUrl) {
-                this.$header = $('<a>')
-                    .attr('href', this.options.listViewUrl)
-                    .append(this.$header);
-            }
-
-            if (
-                !this.options.listViewUrl &&
-                (
-                    !this.defs.fullFormDisabled && this.link && this.model.hasLink(this.link) ||
-                    this.options.fullFormUrl
-                )
-            ) {
-                let url = this.options.fullFormUrl ||
-                    '#' + this.model.entityType + '/related/' + this.model.id + '/' + this.link;
-
-                this.buttonList.unshift({
-                    name: 'fullForm',
-                    label: 'Full Form',
-                    onClick: () => this.getRouter().navigate(url, {trigger: true}),
-                });
-
-                this.$header = $('<a>')
-                    .attr('href', url)
-                    .append(this.$header);
-            }
-
-            let iconHtml = this.getHelper().getScopeColorIconHtml(this.scope);
-
-            if (iconHtml) {
-                this.$header = $('<span>')
-                    .append(iconHtml)
-                    .append(this.$header);
-            }
-
-            this.waitForView('list');
-
-            if (this.searchPanel) {
-                this.waitForView('search');
-            }
-
-            this.getCollectionFactory().create(this.scope, (collection) => {
-                collection.maxSize = this.getConfig().get('recordsPerPage');
-                collection.url = this.url;
-
-                collection.setOrder(this.defaultOrderBy, this.defaultOrder, true);
-
-                this.collection = collection;
-
-                if (this.panelCollection) {
-                    this.listenTo(collection, 'change', (model) => {
-                        var panelModel = this.panelCollection.get(model.id);
-
-                        if (panelModel) {
-                            panelModel.set(model.attributes);
-                        }
+                this.listenTo(this.model, 'after:unrelate', () => {
+                    this.panelCollection.fetch({
+                        skipCollectionSync: true,
                     });
-                }
-
-                this.loadSearch();
-
-                this.wait(true);
-
-                this.loadList();
+                });
+            }
+        }
+        else if (this.model) {
+            this.listenTo(this.model, 'after:relate', () => {
+                this.collection.fetch();
             });
-        },
+        }
 
-        setFilter: function (filter) {
-            this.searchManager.setPrimary(filter);
-        },
+        if (this.noCreateScopeList.indexOf(this.scope) !== -1) {
+            this.createDisabled = true;
+        }
 
-        /**
-         * @protected
-         * @return {?module:views/record/search.Class}
-         */
-        getSearchView: function () {
-            return this.getView('search');
-        },
+        this.primaryFilterName = this.filter;
 
-        loadSearch: function () {
-            var searchManager = this.searchManager =
-                new SearchManager(this.collection, 'listSelect', null, this.getDateTime());
+        if (!this.createDisabled) {
+            if (
+                !this.getAcl().check(this.scope, 'create') ||
+                this.getMetadata().get(['clientDefs', this.scope, 'createDisabled'])
+            ) {
+                this.createDisabled = true;
+            }
+        }
 
-            searchManager.emptyOnReset = true;
+        this.unlinkDisabled = this.unlinkDisabled || this.options.unlinkDisabled;
 
-            var primaryFilterName = this.primaryFilterName;
-
-            if (primaryFilterName) {
-                searchManager.setPrimary(primaryFilterName);
+        if (!this.massUnlinkDisabled) {
+            if (this.unlinkDisabled || this.defs.massUnlinkDisabled || this.defs.unlinkDisabled) {
+                this.massUnlinkDisabled = true;
             }
 
-            this.collection.where = searchManager.getWhere();
+            if (!this.getAcl().check(this.model, 'edit')) {
+                this.massUnlinkDisabled = true;
+            }
+        }
 
-            var filterList = Espo.Utils.clone(this.getMetadata().get(['clientDefs', this.scope, 'filterList']) || []);
+        if (!this.selectDisabled) {
+            this.buttonList.unshift({
+                name: 'selectRelated',
+                label: 'Select',
+                pullLeft: true,
+            });
+        }
 
-            if (this.filterList) {
-                this.filterList.forEach((item1) => {
-                    var isFound = false;
+        if (!this.createDisabled) {
+            this.buttonList.unshift({
+                name: 'createRelated',
+                label: 'Create',
+                pullLeft: true,
+            });
+        }
 
-                    var name1 = item1.name || item1;
+        this.$header = $('<span>');
 
-                    if (!name1 || name1 === 'all') {
-                        return;
-                    }
+        if (this.model) {
+            if (this.model.get('name')) {
+                this.$header.append(
+                    $('<span>').text(this.model.get('name')),
+                    ' <span class="chevron-right"></span> '
+                );
+            }
+        }
 
-                    filterList.forEach((item2) => {
-                        var name2 = item2.name || item2;
+        let title = this.options.title;
 
-                        if (name1 === name2) {
-                            isFound = true;
-                        }
-                    });
+        if (title) {
+            title = this.getHelper().escapeString(this.options.title)
+                .replace(/@right/, '<span class="chevron-right"></span>');
+        }
 
-                    if (!isFound) {
-                        filterList.push(item1);
+        this.$header.append(
+            title ||
+            $('<span>').text(
+                this.getLanguage().translate(this.link, 'links', this.model.name)
+            )
+        );
+
+        if (this.options.listViewUrl) {
+            this.$header = $('<a>')
+                .attr('href', this.options.listViewUrl)
+                .append(this.$header);
+        }
+
+        if (
+            !this.options.listViewUrl &&
+            (
+                !this.defs.fullFormDisabled && this.link && this.model.hasLink(this.link) ||
+                this.options.fullFormUrl
+            )
+        ) {
+            let url = this.options.fullFormUrl ||
+                '#' + this.model.entityType + '/related/' + this.model.id + '/' + this.link;
+
+            this.buttonList.unshift({
+                name: 'fullForm',
+                label: 'Full Form',
+                onClick: () => this.getRouter().navigate(url, {trigger: true}),
+            });
+
+            this.$header = $('<a>')
+                .attr('href', url)
+                .append(this.$header);
+        }
+
+        let iconHtml = this.getHelper().getScopeColorIconHtml(this.scope);
+
+        if (iconHtml) {
+            this.$header = $('<span>')
+                .append(iconHtml)
+                .append(this.$header);
+        }
+
+        this.waitForView('list');
+
+        if (this.searchPanel) {
+            this.waitForView('search');
+        }
+
+        this.getCollectionFactory().create(this.scope, (collection) => {
+            collection.maxSize = this.getConfig().get('recordsPerPage');
+            collection.url = this.url;
+
+            collection.setOrder(this.defaultOrderBy, this.defaultOrder, true);
+
+            this.collection = collection;
+
+            if (this.panelCollection) {
+                this.listenTo(collection, 'change', (model) => {
+                    var panelModel = this.panelCollection.get(model.id);
+
+                    if (panelModel) {
+                        panelModel.set(model.attributes);
                     }
                 });
             }
 
-            if (this.options.filtersDisabled) {
-                filterList = [];
-            }
+            this.loadSearch();
 
-            if (this.searchPanel) {
-                this.createView('search', 'views/record/search', {
-                    collection: this.collection,
-                    el: this.containerSelector + ' .search-container',
-                    searchManager: searchManager,
-                    disableSavePreset: true,
-                    filterList: filterList,
-                }, (view) => {
-                    this.listenTo(view, 'reset', () => {});
-                });
-            }
-        },
+            this.wait(true);
 
-        loadList: function () {
-            var viewName =
-                this.listViewName ||
-                this.getMetadata().get(['clientDefs', this.scope, 'recordViews', 'listRelated']) ||
-                this.getMetadata().get(['clientDefs', this.scope, 'recordViews', 'list']) ||
-                'views/record/list';
+            this.loadList();
+        });
+    },
 
-            this.createView('list', viewName, {
-                collection: this.collection,
-                el: this.containerSelector + ' .list-container',
-                rowActionsView: this.rowActionsView,
-                layoutName: this.layoutName,
-                searchManager: this.searchManager,
-                buttonsDisabled: true,
-                skipBuildRows: true,
-                model: this.model,
-                unlinkMassAction: !this.massUnlinkDisabled,
-                massActionRemoveDisabled: this.massActionRemoveDisabled,
-                massActionMassUpdateDisabled: this.massActionMassUpdateDisabled,
-                mandatorySelectAttributeList: this.mandatorySelectAttributeList,
-                rowActionsOptions: {
-                    unlinkDisabled: this.unlinkDisabled,
-                },
-                pagination: this.getConfig().get('listPagination') ||
-                    this.getMetadata().get(['clientDefs', this.scope, 'listPagination']) ||
-                    null,
-            }, (view) => {
-                this.listenToOnce(view, 'select', (model) => {
-                    this.trigger('select', model);
+    setFilter: function (filter) {
+        this.searchManager.setPrimary(filter);
+    },
 
-                    this.close();
-                });
+    /**
+     * @protected
+     * @return {module:views/record/search}
+     */
+    getSearchView: function () {
+        return this.getView('search');
+    },
 
-                if (this.multiple) {
-                    this.listenTo(view, 'check', () => {
-                        if (view.checkedList.length) {
-                            this.enableButton('select');
-                        } else {
-                            this.disableButton('select');
-                        }
-                    });
+    loadSearch: function () {
+        var searchManager = this.searchManager =
+            new SearchManager(this.collection, 'listSelect', null, this.getDateTime());
 
-                    this.listenTo(view, 'select-all-results', () => {
-                        this.enableButton('select');
-                    });
+        searchManager.emptyOnReset = true;
+
+        var primaryFilterName = this.primaryFilterName;
+
+        if (primaryFilterName) {
+            searchManager.setPrimary(primaryFilterName);
+        }
+
+        this.collection.where = searchManager.getWhere();
+
+        var filterList = Espo.Utils.clone(this.getMetadata().get(['clientDefs', this.scope, 'filterList']) || []);
+
+        if (this.filterList) {
+            this.filterList.forEach((item1) => {
+                var isFound = false;
+
+                var name1 = item1.name || item1;
+
+                if (!name1 || name1 === 'all') {
+                    return;
                 }
 
-                if (this.options.forceSelectAllAttributes || this.forceSelectAllAttributes) {
+                filterList.forEach((item2) => {
+                    var name2 = item2.name || item2;
+
+                    if (name1 === name2) {
+                        isFound = true;
+                    }
+                });
+
+                if (!isFound) {
+                    filterList.push(item1);
+                }
+            });
+        }
+
+        if (this.options.filtersDisabled) {
+            filterList = [];
+        }
+
+        if (this.searchPanel) {
+            this.createView('search', 'views/record/search', {
+                collection: this.collection,
+                el: this.containerSelector + ' .search-container',
+                searchManager: searchManager,
+                disableSavePreset: true,
+                filterList: filterList,
+            }, (view) => {
+                this.listenTo(view, 'reset', () => {});
+            });
+        }
+    },
+
+    loadList: function () {
+        var viewName =
+            this.listViewName ||
+            this.getMetadata().get(['clientDefs', this.scope, 'recordViews', 'listRelated']) ||
+            this.getMetadata().get(['clientDefs', this.scope, 'recordViews', 'list']) ||
+            'views/record/list';
+
+        this.createView('list', viewName, {
+            collection: this.collection,
+            el: this.containerSelector + ' .list-container',
+            rowActionsView: this.rowActionsView,
+            layoutName: this.layoutName,
+            searchManager: this.searchManager,
+            buttonsDisabled: true,
+            skipBuildRows: true,
+            model: this.model,
+            unlinkMassAction: !this.massUnlinkDisabled,
+            massActionRemoveDisabled: this.massActionRemoveDisabled,
+            massActionMassUpdateDisabled: this.massActionMassUpdateDisabled,
+            mandatorySelectAttributeList: this.mandatorySelectAttributeList,
+            rowActionsOptions: {
+                unlinkDisabled: this.unlinkDisabled,
+            },
+            pagination: this.getConfig().get('listPagination') ||
+                this.getMetadata().get(['clientDefs', this.scope, 'listPagination']) ||
+                null,
+        }, (view) => {
+            this.listenToOnce(view, 'select', (model) => {
+                this.trigger('select', model);
+
+                this.close();
+            });
+
+            if (this.multiple) {
+                this.listenTo(view, 'check', () => {
+                    if (view.checkedList.length) {
+                        this.enableButton('select');
+                    } else {
+                        this.disableButton('select');
+                    }
+                });
+
+                this.listenTo(view, 'select-all-results', () => {
+                    this.enableButton('select');
+                });
+            }
+
+            if (this.options.forceSelectAllAttributes || this.forceSelectAllAttributes) {
+                this.listenToOnce(view, 'after:build-rows', () => {
+                    this.wait(false);
+                });
+
+                this.collection.fetch();
+            }
+            else {
+                view.getSelectAttributeList((selectAttributeList) => {
+                    if (!~selectAttributeList.indexOf('name')) {
+                        selectAttributeList.push('name');
+                    }
+
+                    var mandatorySelectAttributeList = this.options.mandatorySelectAttributeList ||
+                        this.mandatorySelectAttributeList || [];
+
+                    mandatorySelectAttributeList.forEach((attribute) => {
+                        if (!~selectAttributeList.indexOf(attribute)) {
+                            selectAttributeList.push(attribute);
+                        }
+                    });
+
+                    if (selectAttributeList) {
+                        this.collection.data.select = selectAttributeList.join(',');
+                    }
+
                     this.listenToOnce(view, 'after:build-rows', () => {
                         this.wait(false);
                     });
 
                     this.collection.fetch();
-                }
-                else {
-                    view.getSelectAttributeList((selectAttributeList) => {
-                        if (!~selectAttributeList.indexOf('name')) {
-                            selectAttributeList.push('name');
-                        }
+                });
+            }
+        });
+    },
 
-                        var mandatorySelectAttributeList = this.options.mandatorySelectAttributeList ||
-                            this.mandatorySelectAttributeList || [];
+    actionUnlinkRelated: function (data) {
+        let id = data.id;
 
-                        mandatorySelectAttributeList.forEach((attribute) => {
-                            if (!~selectAttributeList.indexOf(attribute)) {
-                                selectAttributeList.push(attribute);
-                            }
-                        });
+        this.confirm({
+            message: this.translate('unlinkRecordConfirmation', 'messages'),
+            confirmText: this.translate('Unlink'),
+        }, () => {
+            Espo.Ui.notify(' ... ');
 
-                        if (selectAttributeList) {
-                            this.collection.data.select = selectAttributeList.join(',');
-                        }
+            Espo.Ajax.deleteRequest(this.collection.url, {id: id}).then(() => {
+                Espo.Ui.success(this.translate('Unlinked'));
 
-                        this.listenToOnce(view, 'after:build-rows', () => {
-                            this.wait(false);
-                        });
+                this.collection.fetch();
 
-                        this.collection.fetch();
-                    });
-                }
+                this.model.trigger('after:unrelate');
+                this.model.trigger('after:unrelate:' + this.link);
             });
-        },
+        });
+    },
 
-        actionUnlinkRelated: function (data) {
-            let id = data.id;
+    actionCreateRelated: function () {
+        let actionName = this.defs.createAction || 'createRelated';
+        let methodName = 'action' + Espo.Utils.upperCaseFirst(actionName);
 
-            this.confirm({
-                message: this.translate('unlinkRecordConfirmation', 'messages'),
-                confirmText: this.translate('Unlink'),
-            }, () => {
-                Espo.Ui.notify(' ... ');
+        let p = this.getParentView();
 
-                Espo.Ajax.deleteRequest(this.collection.url, {id: id}).then(() => {
-                    Espo.Ui.success(this.translate('Unlinked'));
+        let view = null;
+
+        while (p) {
+            if (p[methodName]) {
+                view = p;
+
+                break;
+            }
+
+            p = p.getParentView();
+        }
+
+        p[methodName]({
+            link: this.link,
+            scope: this.scope,
+        });
+    },
+
+    actionSelectRelated: function () {
+        let actionName = this.defs.selectAction || 'selectRelated';
+        let methodName = 'action' + Espo.Utils.upperCaseFirst(actionName);
+
+        let p = this.getParentView();
+
+        let view = null;
+
+        while (p) {
+            if (p[methodName]) {
+                view = p;
+
+                break;
+            }
+
+            p = p.getParentView();
+        }
+
+        p[methodName]({
+            link: this.link,
+            primaryFilterName: this.defs.selectPrimaryFilterName,
+            boolFilterList: this.defs.selectBoolFilterList,
+            massSelect: this.defs.massSelect,
+        });
+    },
+
+    actionRemoveRelated: function (data) {
+        let id = data.id;
+
+        this.confirm({
+            message: this.translate('removeRecordConfirmation', 'messages'),
+            confirmText: this.translate('Remove'),
+        }, () => {
+            let model = this.collection.get(id);
+
+            Espo.Ui.notify(' ... ');
+
+            model
+                .destroy()
+                .then(() => {
+                    Espo.Ui.success(this.translate('Removed'));
 
                     this.collection.fetch();
 
                     this.model.trigger('after:unrelate');
                     this.model.trigger('after:unrelate:' + this.link);
                 });
-            });
-        },
+        });
+    },
 
-        actionCreateRelated: function () {
-            let actionName = this.defs.createAction || 'createRelated';
-            let methodName = 'action' + Espo.Utils.upperCaseFirst(actionName);
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlSlash: function (e) {
+        if (!this.searchPanel) {
+            return;
+        }
 
-            let p = this.getParentView();
+        let $search = this.$el.find('input.text-filter').first();
 
-            let view = null;
+        if (!$search.length) {
+            return;
+        }
 
-            while (p) {
-                if (p[methodName]) {
-                    view = p;
+        e.preventDefault();
+        e.stopPropagation();
 
-                    break;
-                }
+        $search.focus();
+    },
 
-                p = p.getParentView();
-            }
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlSpace: function (e) {
+        if (this.createDisabled) {
+            return;
+        }
 
-            p[methodName]({
-                link: this.link,
-                scope: this.scope,
-            });
-        },
+        if (this.buttonList.findIndex(item => item.name === 'createRelated' && !item.hidden) === -1) {
+            return;
+        }
 
-        actionSelectRelated: function () {
-            let actionName = this.defs.selectAction || 'selectRelated';
-            let methodName = 'action' + Espo.Utils.upperCaseFirst(actionName);
+        e.preventDefault();
+        e.stopPropagation();
 
-            let p = this.getParentView();
+        this.actionCreateRelated();
+    },
 
-            let view = null;
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlComma: function (e) {
+        if (!this.getSearchView()) {
+            return;
+        }
 
-            while (p) {
-                if (p[methodName]) {
-                    view = p;
+        this.getSearchView().selectPreviousPreset();
+    },
 
-                    break;
-                }
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlPeriod: function (e) {
+        if (!this.getSearchView()) {
+            return;
+        }
 
-                p = p.getParentView();
-            }
-
-            p[methodName]({
-                link: this.link,
-                primaryFilterName: this.defs.selectPrimaryFilterName,
-                boolFilterList: this.defs.selectBoolFilterList,
-                massSelect: this.defs.massSelect,
-            });
-        },
-
-        actionRemoveRelated: function (data) {
-            let id = data.id;
-
-            this.confirm({
-                message: this.translate('removeRecordConfirmation', 'messages'),
-                confirmText: this.translate('Remove'),
-            }, () => {
-                let model = this.collection.get(id);
-
-                Espo.Ui.notify(' ... ');
-
-                model
-                    .destroy()
-                    .then(() => {
-                        Espo.Ui.success(this.translate('Removed'));
-
-                        this.collection.fetch();
-
-                        this.model.trigger('after:unrelate');
-                        this.model.trigger('after:unrelate:' + this.link);
-                    });
-            });
-        },
-
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlSlash: function (e) {
-            if (!this.searchPanel) {
-                return;
-            }
-
-            let $search = this.$el.find('input.text-filter').first();
-
-            if (!$search.length) {
-                return;
-            }
-
-            e.preventDefault();
-            e.stopPropagation();
-
-            $search.focus();
-        },
-
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlSpace: function (e) {
-            if (this.createDisabled) {
-                return;
-            }
-
-            if (this.buttonList.findIndex(item => item.name === 'createRelated' && !item.hidden) === -1) {
-                return;
-            }
-
-            e.preventDefault();
-            e.stopPropagation();
-
-            this.actionCreateRelated();
-        },
-
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlComma: function (e) {
-            if (!this.getSearchView()) {
-                return;
-            }
-
-            this.getSearchView().selectPreviousPreset();
-        },
-
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlPeriod: function (e) {
-            if (!this.getSearchView()) {
-                return;
-            }
-
-            this.getSearchView().selectNextPreset();
-        },
-    });
+        this.getSearchView().selectNextPreset();
+    },
 });
diff --git a/client/src/views/modals/select-category-tree-records.js b/client/src/views/modals/select-category-tree-records.js
index bd45b94403..bc210d9544 100644
--- a/client/src/views/modals/select-category-tree-records.js
+++ b/client/src/views/modals/select-category-tree-records.js
@@ -93,7 +93,7 @@ define('views/modals/select-category-tree-records', ['views/modals/select-record
 
             this.waitForView('list');
 
-            Espo.require('search-manager', (SearchManager) => {
+            Espo.loader.require('search-manager', SearchManager => {
                 this.getCollectionFactory().create(this.scope, (collection) => {
                     collection.maxSize = this.getConfig().get('recordsPerPageSelect') || 5;
 
diff --git a/client/src/views/modals/select-records.js b/client/src/views/modals/select-records.js
index 1d0639869d..661f7a5fe8 100644
--- a/client/src/views/modals/select-records.js
+++ b/client/src/views/modals/select-records.js
@@ -26,458 +26,453 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/modals/select-records', ['views/modal', 'search-manager'], function (Dep, SearchManager) {
+/** @module views/modals/select-records */
+
+import Dep from 'views/modal';
+import SearchManager from 'search-manager';
+
+/**
+ * A select-records modal.
+ *
+ * @class
+ * @name Class
+ * @memberOf module:views/modals/select-records
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    template: 'modals/select-records',
+
+    cssName: 'select-modal',
+    className: 'dialog dialog-record',
+
+    multiple: false,
+    header: false,
+    createButton: true,
+    searchPanel: true,
+    scope: null,
+    noCreateScopeList: ['User', 'Team', 'Role', 'Portal'],
 
     /**
-     * A select-records modal.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:views/modals/select-records
-     * @extends module:views/modal.Class
+     * @inheritDoc
      */
-    return Dep.extend(/** @lends module:views/modals/select-records.Class# */{
-
-        cssName: 'select-modal',
-
-        multiple: false,
-
-        header: false,
-
-        template: 'modals/select-records',
-
-        createButton: true,
-
-        searchPanel: true,
-
-        scope: null,
-
-        noCreateScopeList: ['User', 'Team', 'Role', 'Portal'],
-
-        className: 'dialog dialog-record',
-
-        /**
-         * @inheritDoc
-         */
-        shortcutKeys: {
-            'Control+Enter': function (e) {
-                this.handleShortcutKeyCtrlEnter(e);
-            },
-            'Control+Space': function (e) {
-                this.handleShortcutKeyCtrlSpace(e);
-            },
-            'Control+Slash': function (e) {
-                this.handleShortcutKeyCtrlSlash(e);
-            },
-            'Control+Comma': function (e) {
-                this.handleShortcutKeyCtrlComma(e);
-            },
-            'Control+Period': function (e) {
-                this.handleShortcutKeyCtrlPeriod(e);
-            },
+    shortcutKeys: {
+        'Control+Enter': function (e) {
+            this.handleShortcutKeyCtrlEnter(e);
         },
-
-        data: function () {
-            return {
-                createButton: this.createButton,
-                createText: this.translate('Create ' + this.scope, 'labels', this.scope),
-            };
+        'Control+Space': function (e) {
+            this.handleShortcutKeyCtrlSpace(e);
         },
-
-        events: {
-            'click button[data-action="create"]': function () {
-                this.create();
-            },
-            'click .list a': function (e) {
-                e.preventDefault();
-            }
+        'Control+Slash': function (e) {
+            this.handleShortcutKeyCtrlSlash(e);
         },
+        'Control+Comma': function (e) {
+            this.handleShortcutKeyCtrlComma(e);
+        },
+        'Control+Period': function (e) {
+            this.handleShortcutKeyCtrlPeriod(e);
+        },
+    },
 
-        setup: function () {
-            this.filters = this.options.filters || {};
-            this.boolFilterList = this.options.boolFilterList || [];
-            this.primaryFilterName = this.options.primaryFilterName || null;
-            this.filterList = this.options.filterList || this.filterList || null;
+    data: function () {
+        return {
+            createButton: this.createButton,
+            createText: this.translate('Create ' + this.scope, 'labels', this.scope),
+        };
+    },
 
-            if ('multiple' in this.options) {
-                this.multiple = this.options.multiple;
+    events: {
+        'click button[data-action="create"]': function () {
+            this.create();
+        },
+        'click .list a': function (e) {
+            e.preventDefault();
+        }
+    },
+
+    setup: function () {
+        this.filters = this.options.filters || {};
+        this.boolFilterList = this.options.boolFilterList || [];
+        this.primaryFilterName = this.options.primaryFilterName || null;
+        this.filterList = this.options.filterList || this.filterList || null;
+
+        if ('multiple' in this.options) {
+            this.multiple = this.options.multiple;
+        }
+
+        if ('createButton' in this.options) {
+            this.createButton = this.options.createButton;
+        }
+
+        this.massRelateEnabled = this.options.massRelateEnabled;
+
+        this.buttonList = [
+            {
+                name: 'cancel',
+                label: 'Cancel',
             }
+        ];
 
-            if ('createButton' in this.options) {
-                this.createButton = this.options.createButton;
-            }
+        if (this.multiple) {
+            this.buttonList.unshift({
+                name: 'select',
+                style: 'danger',
+                label: 'Select',
+                disabled: true,
+                title: 'Ctrl+Enter',
+            });
+        }
 
-            this.massRelateEnabled = this.options.massRelateEnabled;
+        this.scope = this.entityType = this.options.scope || this.scope;
 
-            this.buttonList = [
-                {
-                    name: 'cancel',
-                    label: 'Cancel',
-                }
-            ];
+        let customDefaultOrderBy = this.getMetadata().get(['clientDefs', this.scope, 'selectRecords', 'orderBy']);
+        let customDefaultOrder = this.getMetadata().get(['clientDefs', this.scope, 'selectRecords', 'order']);
 
-            if (this.multiple) {
-                this.buttonList.unshift({
-                    name: 'select',
-                    style: 'danger',
-                    label: 'Select',
-                    disabled: true,
-                    title: 'Ctrl+Enter',
-                });
-            }
+        if (customDefaultOrderBy) {
+            this.defaultOrderBy = customDefaultOrderBy;
+            this.defaultOrder = customDefaultOrder || false;
+        }
 
-            this.scope = this.entityType = this.options.scope || this.scope;
+        if (this.noCreateScopeList.indexOf(this.scope) !== -1) {
+            this.createButton = false;
+        }
 
-            let customDefaultOrderBy = this.getMetadata().get(['clientDefs', this.scope, 'selectRecords', 'orderBy']);
-            let customDefaultOrder = this.getMetadata().get(['clientDefs', this.scope, 'selectRecords', 'order']);
-
-            if (customDefaultOrderBy) {
-                this.defaultOrderBy = customDefaultOrderBy;
-                this.defaultOrder = customDefaultOrder || false;
-            }
-
-            if (this.noCreateScopeList.indexOf(this.scope) !== -1) {
+        if (this.createButton) {
+            if (
+                !this.getAcl().check(this.scope, 'create') ||
+                this.getMetadata().get(['clientDefs', this.scope, 'createDisabled'])
+            ) {
                 this.createButton = false;
             }
+        }
 
-            if (this.createButton) {
-                if (
-                    !this.getAcl().check(this.scope, 'create') ||
-                    this.getMetadata().get(['clientDefs', this.scope, 'createDisabled'])
-                ) {
-                    this.createButton = false;
-                }
-            }
+        if (this.getMetadata().get(['clientDefs', this.scope, 'searchPanelDisabled'])) {
+            this.searchPanel = false;
+        }
 
-            if (this.getMetadata().get(['clientDefs', this.scope, 'searchPanelDisabled'])) {
+        if (this.getUser().isPortal()) {
+            if (this.getMetadata().get(['clientDefs', this.scope, 'searchPanelInPortalDisabled'])) {
                 this.searchPanel = false;
             }
+        }
 
-            if (this.getUser().isPortal()) {
-                if (this.getMetadata().get(['clientDefs', this.scope, 'searchPanelInPortalDisabled'])) {
-                    this.searchPanel = false;
-                }
+        this.$header = $('<span>');
+
+        this.$header.append(
+            $('<span>').text(
+                this.translate('Select') + ' · ' +
+                this.getLanguage().translate(this.scope, 'scopeNamesPlural')
+            )
+        );
+
+        this.$header.prepend(
+            this.getHelper().getScopeColorIconHtml(this.scope)
+        );
+
+        this.waitForView('list');
+
+        if (this.searchPanel) {
+            this.waitForView('search');
+        }
+
+        this.getCollectionFactory().create(this.scope, (collection) => {
+            collection.maxSize = this.getConfig().get('recordsPerPageSelect') || 5;
+
+            this.collection = collection;
+
+            if (this.defaultOrderBy) {
+                this.collection.setOrder(this.defaultOrderBy, this.defaultOrder || 'asc', true);
             }
 
-            this.$header = $('<span>');
+            this.loadSearch();
+            this.wait(true);
+            this.loadList();
+        });
+    },
 
-            this.$header.append(
-                $('<span>').text(
-                    this.translate('Select') + ' · ' +
-                    this.getLanguage().translate(this.scope, 'scopeNamesPlural')
-                )
-            );
+    loadSearch: function () {
+        var searchManager = this.searchManager =
+            new SearchManager(this.collection, 'listSelect', null, this.getDateTime());
 
-            this.$header.prepend(
-                this.getHelper().getScopeColorIconHtml(this.scope)
-            );
+        searchManager.emptyOnReset = true;
 
-            this.waitForView('list');
+        if (this.filters) {
+            searchManager.setAdvanced(this.filters);
+        }
 
-            if (this.searchPanel) {
-                this.waitForView('search');
-            }
+        var boolFilterList = this.boolFilterList ||
+            this.getMetadata().get('clientDefs.' + this.scope + '.selectDefaultFilters.boolFilterList');
 
-            this.getCollectionFactory().create(this.scope, (collection) => {
-                collection.maxSize = this.getConfig().get('recordsPerPageSelect') || 5;
+        if (boolFilterList) {
+            var d = {};
 
-                this.collection = collection;
-
-                if (this.defaultOrderBy) {
-                    this.collection.setOrder(this.defaultOrderBy, this.defaultOrder || 'asc', true);
-                }
-
-                this.loadSearch();
-                this.wait(true);
-                this.loadList();
+            boolFilterList.forEach((item) => {
+                d[item] = true;
             });
-        },
 
-        loadSearch: function () {
-            var searchManager = this.searchManager =
-                new SearchManager(this.collection, 'listSelect', null, this.getDateTime());
+            searchManager.setBool(d);
+        }
 
-            searchManager.emptyOnReset = true;
+        var primaryFilterName = this.primaryFilterName ||
+            this.getMetadata().get('clientDefs.' + this.scope + '.selectDefaultFilters.filter');
 
-            if (this.filters) {
-                searchManager.setAdvanced(this.filters);
-            }
+        if (primaryFilterName) {
+            searchManager.setPrimary(primaryFilterName);
+        }
 
-            var boolFilterList = this.boolFilterList ||
-                this.getMetadata().get('clientDefs.' + this.scope + '.selectDefaultFilters.boolFilterList');
+        this.collection.where = searchManager.getWhere();
 
-            if (boolFilterList) {
-                var d = {};
-
-                boolFilterList.forEach((item) => {
-                    d[item] = true;
-                });
-
-                searchManager.setBool(d);
-            }
-
-            var primaryFilterName = this.primaryFilterName ||
-                this.getMetadata().get('clientDefs.' + this.scope + '.selectDefaultFilters.filter');
-
-            if (primaryFilterName) {
-                searchManager.setPrimary(primaryFilterName);
-            }
-
-            this.collection.where = searchManager.getWhere();
-
-            if (this.searchPanel) {
-                this.createView('search', 'views/record/search', {
-                    collection: this.collection,
-                    el: this.containerSelector + ' .search-container',
-                    searchManager: searchManager,
-                    disableSavePreset: true,
-                    filterList: this.filterList,
-                }, (view) => {
-                    this.listenTo(view, 'reset', () => {});
-                });
-            }
-        },
-
-        loadList: function () {
-            var viewName = this.getMetadata().get('clientDefs.' + this.scope + '.recordViews.listSelect') ||
-                this.getMetadata().get('clientDefs.' + this.scope + '.recordViews.list') ||
-                'views/record/list';
-
-            this.createView('list', viewName, {
+        if (this.searchPanel) {
+            this.createView('search', 'views/record/search', {
                 collection: this.collection,
-                el: this.containerSelector + ' .list-container',
-                selectable: true,
-                checkboxes: this.multiple,
-                massActionsDisabled: true,
-                rowActionsView: false,
-                layoutName: 'listSmall',
-                searchManager: this.searchManager,
-                checkAllResultDisabled: !this.massRelateEnabled,
-                buttonsDisabled: true,
-                skipBuildRows: true,
-                pagination: this.getConfig().get('listPagination') ||
-                    this.getMetadata().get(['clientDefs', this.scope, 'listPagination']) ||
-                    null,
-            }, function (view) {
-                this.listenToOnce(view, 'select', (model) =>{
-                    this.trigger('select', model);
+                el: this.containerSelector + ' .search-container',
+                searchManager: searchManager,
+                disableSavePreset: true,
+                filterList: this.filterList,
+            }, (view) => {
+                this.listenTo(view, 'reset', () => {});
+            });
+        }
+    },
 
-                    this.close();
+    loadList: function () {
+        var viewName = this.getMetadata().get('clientDefs.' + this.scope + '.recordViews.listSelect') ||
+            this.getMetadata().get('clientDefs.' + this.scope + '.recordViews.list') ||
+            'views/record/list';
+
+        this.createView('list', viewName, {
+            collection: this.collection,
+            el: this.containerSelector + ' .list-container',
+            selectable: true,
+            checkboxes: this.multiple,
+            massActionsDisabled: true,
+            rowActionsView: false,
+            layoutName: 'listSmall',
+            searchManager: this.searchManager,
+            checkAllResultDisabled: !this.massRelateEnabled,
+            buttonsDisabled: true,
+            skipBuildRows: true,
+            pagination: this.getConfig().get('listPagination') ||
+                this.getMetadata().get(['clientDefs', this.scope, 'listPagination']) ||
+                null,
+        }, function (view) {
+            this.listenToOnce(view, 'select', (model) =>{
+                this.trigger('select', model);
+
+                this.close();
+            });
+
+            if (this.multiple) {
+                this.listenTo(view, 'check', () => {
+                    if (view.checkedList.length) {
+                        this.enableButton('select');
+                    }
+                    else {
+                        this.disableButton('select');
+                    }
                 });
 
-                if (this.multiple) {
-                    this.listenTo(view, 'check', () => {
-                        if (view.checkedList.length) {
-                            this.enableButton('select');
-                        }
-                        else {
-                            this.disableButton('select');
+                this.listenTo(view, 'select-all-results', () => {
+                    this.enableButton('select');
+                });
+            }
+
+            if (this.options.forceSelectAllAttributes || this.forceSelectAllAttributes) {
+                this.listenToOnce(view, 'after:build-rows', () => {
+                    this.wait(false);
+                });
+
+                this.collection.fetch();
+            }
+            else {
+                view.getSelectAttributeList((selectAttributeList) => {
+                    if (!~selectAttributeList.indexOf('name')) {
+                        selectAttributeList.push('name');
+                    }
+
+                    var mandatorySelectAttributeList = this.options.mandatorySelectAttributeList ||
+                        this.mandatorySelectAttributeList || [];
+
+                    mandatorySelectAttributeList.forEach((attribute) => {
+                        if (!~selectAttributeList.indexOf(attribute)) {
+                            selectAttributeList.push(attribute);
                         }
                     });
 
-                    this.listenTo(view, 'select-all-results', () => {
-                        this.enableButton('select');
-                    });
-                }
+                    if (selectAttributeList) {
+                        this.collection.data.select = selectAttributeList.join(',');
+                    }
 
-                if (this.options.forceSelectAllAttributes || this.forceSelectAllAttributes) {
                     this.listenToOnce(view, 'after:build-rows', () => {
                         this.wait(false);
                     });
 
                     this.collection.fetch();
-                }
-                else {
-                    view.getSelectAttributeList((selectAttributeList) => {
-                        if (!~selectAttributeList.indexOf('name')) {
-                            selectAttributeList.push('name');
-                        }
+                });
+            }
+        });
+    },
 
-                        var mandatorySelectAttributeList = this.options.mandatorySelectAttributeList ||
-                            this.mandatorySelectAttributeList || [];
+    create: function () {
+        if (this.options.triggerCreateEvent) {
+            this.trigger('create');
 
-                        mandatorySelectAttributeList.forEach((attribute) => {
-                            if (!~selectAttributeList.indexOf(attribute)) {
-                                selectAttributeList.push(attribute);
-                            }
-                        });
+            return;
+        }
 
-                        if (selectAttributeList) {
-                            this.collection.data.select = selectAttributeList.join(',');
-                        }
+        Espo.Ui.notify(' ... ');
 
-                        this.listenToOnce(view, 'after:build-rows', () => {
-                            this.wait(false);
-                        });
+        let viewName = this.getMetadata()
+            .get(['clientDefs', this.scope, 'modalViews', 'edit']) ||
+            'views/modals/edit';
 
-                        this.collection.fetch();
+        new Promise(resolve => {
+            if (this.options.createAttributesProvider) {
+                this.options.createAttributesProvider().then(attributes => {
+                    resolve(attributes)
+                });
+
+                return;
+            }
+
+            resolve(this.options.createAttributes || {});
+        })
+            .then(attributes => {
+                this.createView('quickCreate', viewName, {
+                    scope: this.scope,
+                    fullFormDisabled: true,
+                    attributes: attributes,
+                }, view => {
+                    view.render()
+                        .then(() => Espo.Ui.notify(false));
+
+                    this.listenToOnce(view, 'leave', () => {
+                        view.close();
+                        this.close();
                     });
-                }
+
+                    this.listenToOnce(view, 'after:save', (model) => {
+                        view.close();
+
+                        this.trigger('select', model);
+
+                        setTimeout(() => this.close(), 10);
+                    });
+                });
             });
-        },
+    },
 
-        create: function () {
-            if (this.options.triggerCreateEvent) {
-                this.trigger('create');
+    actionSelect: function () {
+        if (!this.multiple) {
+            return;
+        }
 
-                return;
-            }
+        let listView = this.getView('list');
 
-            Espo.Ui.notify(' ... ');
-
-            let viewName = this.getMetadata()
-                .get(['clientDefs', this.scope, 'modalViews', 'edit']) ||
-                'views/modals/edit';
-
-            new Promise(resolve => {
-                if (this.options.createAttributesProvider) {
-                    this.options.createAttributesProvider().then(attributes => {
-                        resolve(attributes)
-                    });
-
-                    return;
-                }
-
-                resolve(this.options.createAttributes || {});
-            })
-                .then(attributes => {
-                    this.createView('quickCreate', viewName, {
-                        scope: this.scope,
-                        fullFormDisabled: true,
-                        attributes: attributes,
-                    }, view => {
-                        view.render()
-                            .then(() => Espo.Ui.notify(false));
-
-                        this.listenToOnce(view, 'leave', () => {
-                            view.close();
-                            this.close();
-                        });
-
-                        this.listenToOnce(view, 'after:save', (model) => {
-                            view.close();
-
-                            this.trigger('select', model);
-
-                            setTimeout(() => this.close(), 10);
-                        });
-                    });
-                });
-        },
-
-        actionSelect: function () {
-            if (!this.multiple) {
-                return;
-            }
-
-            let listView = this.getView('list');
-
-            if (listView.allResultIsChecked) {
-                this.trigger('select', {
-                    massRelate: true,
-                    where: this.collection.getWhere(),
-                    searchParams: this.collection.data,
-                });
-
-                this.close();
-
-                return;
-            }
-
-            let list = listView.getSelected();
-
-            if (list.length) {
-                this.trigger('select', list);
-            }
+        if (listView.allResultIsChecked) {
+            this.trigger('select', {
+                massRelate: true,
+                where: this.collection.getWhere(),
+                searchParams: this.collection.data,
+            });
 
             this.close();
-        },
 
-        /**
-         * @protected
-         * @return {?module:views/record/search.Class}
-         */
-        getSearchView: function () {
-            return this.getView('search');
-        },
+            return;
+        }
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlSlash: function (e) {
-            if (!this.searchPanel) {
-                return;
-            }
+        let list = listView.getSelected();
 
-            let $search = this.$el.find('input.text-filter').first();
+        if (list.length) {
+            this.trigger('select', list);
+        }
 
-            if (!$search.length) {
-                return;
-            }
+        this.close();
+    },
 
-            e.preventDefault();
-            e.stopPropagation();
+    /**
+     * @protected
+     * @return {?module:views/record/search}
+     */
+    getSearchView: function () {
+        return this.getView('search');
+    },
 
-            $search.focus();
-        },
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlSlash: function (e) {
+        if (!this.searchPanel) {
+            return;
+        }
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlEnter: function (e) {
-            if (!this.multiple) {
-                return;
-            }
+        let $search = this.$el.find('input.text-filter').first();
 
-            if (!this.hasAvailableActionItem('select')) {
-                return;
-            }
+        if (!$search.length) {
+            return;
+        }
 
-            e.stopPropagation();
-            e.preventDefault();
+        e.preventDefault();
+        e.stopPropagation();
 
-            this.actionSelect();
-        },
+        $search.focus();
+    },
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlSpace: function (e) {
-            if (!this.createButton) {
-                return;
-            }
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlEnter: function (e) {
+        if (!this.multiple) {
+            return;
+        }
 
-            e.preventDefault();
-            e.stopPropagation();
+        if (!this.hasAvailableActionItem('select')) {
+            return;
+        }
 
-            this.create();
-        },
+        e.stopPropagation();
+        e.preventDefault();
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlComma: function (e) {
-            if (!this.getSearchView()) {
-                return;
-            }
+        this.actionSelect();
+    },
 
-            this.getSearchView().selectPreviousPreset();
-        },
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlSpace: function (e) {
+        if (!this.createButton) {
+            return;
+        }
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlPeriod: function (e) {
-            if (!this.getSearchView()) {
-                return;
-            }
+        e.preventDefault();
+        e.stopPropagation();
 
-            this.getSearchView().selectNextPreset();
-        },
-    });
+        this.create();
+    },
+
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlComma: function (e) {
+        if (!this.getSearchView()) {
+            return;
+        }
+
+        this.getSearchView().selectPreviousPreset();
+    },
+
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlPeriod: function (e) {
+        if (!this.getSearchView()) {
+            return;
+        }
+
+        this.getSearchView().selectNextPreset();
+    },
 });
diff --git a/client/src/views/note/detail.js b/client/src/views/note/detail.js
index 56c18933b5..2309912bf4 100644
--- a/client/src/views/note/detail.js
+++ b/client/src/views/note/detail.js
@@ -31,7 +31,7 @@ define('views/note/detail', ['views/main'], (Dep) => {
     /**
      * @class
      * @name Class
-     * @extends module:views/main.Class
+     * @extends module:views/main
      * @memberOf module:views/note/detail
      */
     return Dep.extend(/** @lends module:views/note/detail.Class# */{
diff --git a/client/src/views/record/base.js b/client/src/views/record/base.js
index 48ca228769..51e7698cde 100644
--- a/client/src/views/record/base.js
+++ b/client/src/views/record/base.js
@@ -26,1555 +26,1555 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define(
-    'views/record/base',
-    ['view', 'view-record-helper', 'dynamic-logic', 'lib!underscore'],
-function (Dep, ViewRecordHelper, DynamicLogic, _) {
+/** @module views/record/base */
+
+import Dep from "view";
+import ViewRecordHelper from "view-record-helper";
+import DynamicLogic from "dynamic-logic";
+import _ from "lib!underscore";
+
+/**
+ * A base record view. To be extended.
+ *
+ * @class
+ * @name Class
+ * @extends module:view
+ */
+export default Dep.extend(/** @lends Class# */{
 
     /**
-     * A base record view. To be extended.
-     *
-     * @class
-     * @name Class
-     * @extends module:view.Class
-     * @memberOf module:views/record/base
+     * A type.
      */
-    return Dep.extend(/** @lends module:views/record/base.Class# */{
+    type: 'edit',
 
-        /**
-         * A type.
-         */
-        type: 'edit',
+    /**
+     * An entity type.
+     */
+    entityType: null,
 
-        /**
-         * An entity type.
-         */
-        entityType: null,
+    /**
+     * A scope.
+     */
+    scope: null,
 
-        /**
-         * A scope.
-         */
-        scope: null,
+    /**
+     * Is new. Is set automatically.
+     */
+    isNew: false,
 
-        /**
-         * Is new. Is set automatically.
-         */
-        isNew: false,
+    /**
+     * @deprecated
+     * @protected
+     */
+    dependencyDefs: {},
 
-        /**
-         * @deprecated
-         * @protected
-         */
-        dependencyDefs: {},
+    /**
+     * Dynamic logic.
+     *
+     * @protected
+     * @type {Object}
+     */
+    dynamicLogicDefs: {},
 
-        /**
-         * Dynamic logic.
-         *
-         * @protected
-         * @type {Object}
-         */
-        dynamicLogicDefs: {},
+    /**
+     * A field list.
+     *
+     * @protected
+     */
+    fieldList: null,
 
-        /**
-         * A field list.
-         *
-         * @protected
-         */
-        fieldList: null,
+    /**
+     * A mode.
+     *
+     * @type {'detail'|'edit'|null}
+     */
+    mode: null,
 
-        /**
-         * A mode.
-         *
-         * @type {'detail'|'edit'|null}
-         */
-        mode: null,
+    /**
+     * A last save cancel reason.
+     *
+     * @protected
+     * @type {string|null}
+     */
+    lastSaveCancelReason: null,
 
-        /**
-         * A last save cancel reason.
-         *
-         * @protected
-         * @type {string|null}
-         */
-        lastSaveCancelReason: null,
+    /**
+     * A record-helper.
+     *
+     * @protected
+     * @type {module:view-record-helper}
+     */
+    recordHelper: null,
 
-        /**
-         * A record-helper.
-         *
-         * @protected
-         * @type {module:view-record-helper.Class}
-         */
-        recordHelper: null,
+    /**
+     * @const
+     */
+    MODE_DETAIL: 'detail',
 
-        /**
-         * @const
-         */
-        MODE_DETAIL: 'detail',
+    /**
+     * @const
+     */
+    MODE_EDIT: 'edit',
 
-        /**
-         * @const
-         */
-        MODE_EDIT: 'edit',
+    /**
+     * @const
+     */
+    TYPE_DETAIL: 'detail',
 
-        /**
-         * @const
-         */
-        TYPE_DETAIL: 'detail',
+    /**
+     * @const
+     */
+    TYPE_EDIT: 'edit',
 
-        /**
-         * @const
-         */
-        TYPE_EDIT: 'edit',
+    /**
+     * Hide a field.
+     *
+     * @param {string} name A field name.
+     * @param {boolean } [locked] To lock. Won't be able to un-hide.
+     */
+    hideField: function (name, locked) {
+        this.recordHelper.setFieldStateParam(name, 'hidden', true);
 
-        /**
-         * Hide a field.
-         *
-         * @param {string} name A field name.
-         * @param {boolean } [locked] To lock. Won't be able to un-hide.
-         */
-        hideField: function (name, locked) {
-            this.recordHelper.setFieldStateParam(name, 'hidden', true);
+        if (locked) {
+            this.recordHelper.setFieldStateParam(name, 'hiddenLocked', true);
+        }
 
-            if (locked) {
-                this.recordHelper.setFieldStateParam(name, 'hiddenLocked', true);
-            }
+        let processHtml = () => {
+            let fieldView = this.getFieldView(name);
 
-            let processHtml = () => {
-                let fieldView = this.getFieldView(name);
+            if (fieldView) {
+                let $field = fieldView.$el;
+                let $cell = $field.closest('.cell[data-name="' + name + '"]');
+                let $label = $cell.find('label.control-label[data-name="' + name + '"]');
 
-                if (fieldView) {
-                    let $field = fieldView.$el;
-                    let $cell = $field.closest('.cell[data-name="' + name + '"]');
-                    let $label = $cell.find('label.control-label[data-name="' + name + '"]');
-
-                    $field.addClass('hidden');
-                    $label.addClass('hidden');
-                    $cell.addClass('hidden-cell');
-                }
-                else {
-                    this.$el.find('.cell[data-name="' + name + '"]').addClass('hidden-cell');
-                    this.$el.find('.field[data-name="' + name + '"]').addClass('hidden');
-                    this.$el.find('label.control-label[data-name="' + name + '"]').addClass('hidden');
-                }
-            };
-
-            if (this.isRendered()) {
-                processHtml();
+                $field.addClass('hidden');
+                $label.addClass('hidden');
+                $cell.addClass('hidden-cell');
             }
             else {
-                this.once('after:render', () => {
-                    processHtml();
-                });
+                this.$el.find('.cell[data-name="' + name + '"]').addClass('hidden-cell');
+                this.$el.find('.field[data-name="' + name + '"]').addClass('hidden');
+                this.$el.find('label.control-label[data-name="' + name + '"]').addClass('hidden');
             }
+        };
 
-            let view = this.getFieldView(name);
-
-            if (view) {
-                view.setDisabled(locked);
-            }
-        },
-
-        /**
-         * Show a field.
-         *
-         * @param {string} name A field name.
-         */
-        showField: function (name) {
-            if (this.recordHelper.getFieldStateParam(name, 'hiddenLocked')) {
-                return;
-            }
-
-            this.recordHelper.setFieldStateParam(name, 'hidden', false);
-
-            let processHtml = () => {
-                let fieldView = this.getFieldView(name);
-
-                if (fieldView) {
-                    let $field = fieldView.$el;
-                    let $cell = $field.closest('.cell[data-name="' + name + '"]');
-                    let $label = $cell.find('label.control-label[data-name="' + name + '"]');
-
-                    $field.removeClass('hidden');
-                    $label.removeClass('hidden');
-                    $cell.removeClass('hidden-cell');
-
-                    return;
-                }
-
-                this.$el.find('.cell[data-name="' + name + '"]').removeClass('hidden-cell');
-                this.$el.find('.field[data-name="' + name + '"]').removeClass('hidden');
-                this.$el.find('label.control-label[data-name="' + name + '"]').removeClass('hidden');
-            };
-
-            if (this.isRendered()) {
+        if (this.isRendered()) {
+            processHtml();
+        }
+        else {
+            this.once('after:render', () => {
                 processHtml();
-            }
-            else {
-                this.once('after:render', () => {
-                    processHtml();
-                });
-            }
+            });
+        }
 
-            let view = this.getFieldView(name);
+        let view = this.getFieldView(name);
 
-            if (view) {
-                if (!view.disabledLocked) {
-                    view.setNotDisabled();
-                }
-            }
-        },
+        if (view) {
+            view.setDisabled(locked);
+        }
+    },
 
-        /**
-         * Set a field as read-only.
-         *
-         * @param {string} name A field name.
-         * @param {boolean } [locked] To lock. Won't be able to un-set.
-         */
-        setFieldReadOnly: function (name, locked) {
-            let previousvalue = this.recordHelper.getFieldStateParam(name, 'readOnly');
+    /**
+     * Show a field.
+     *
+     * @param {string} name A field name.
+     */
+    showField: function (name) {
+        if (this.recordHelper.getFieldStateParam(name, 'hiddenLocked')) {
+            return;
+        }
 
-            this.recordHelper.setFieldStateParam(name, 'readOnly', true);
+        this.recordHelper.setFieldStateParam(name, 'hidden', false);
 
-            if (locked) {
-                this.recordHelper.setFieldStateParam(name, 'readOnlyLocked', true);
-            }
+        let processHtml = () => {
+            let fieldView = this.getFieldView(name);
 
-            let view = this.getFieldView(name);
+            if (fieldView) {
+                let $field = fieldView.$el;
+                let $cell = $field.closest('.cell[data-name="' + name + '"]');
+                let $label = $cell.find('label.control-label[data-name="' + name + '"]');
 
-            if (view) {
-                view.setReadOnly(locked);
-            }
-
-            if (!previousvalue) {
-                this.trigger('set-field-read-only', name);
-            }
-        },
-
-        /**
-         * Set a field as not read-only.
-         *
-         * @param {string} name A field name.
-         */
-        setFieldNotReadOnly: function (name) {
-            let previousvalue = this.recordHelper.getFieldStateParam(name, 'readOnly');
-
-            this.recordHelper.setFieldStateParam(name, 'readOnly', false);
-
-            let view = this.getFieldView(name);
-
-            if (view) {
-                if (view.readOnly) {
-                    view.setNotReadOnly();
-
-                    if (this.mode === this.MODE_EDIT) {
-                        if (!view.readOnlyLocked && view.isDetailMode()) {
-                            view.setEditMode()
-                                .then(() => view.reRender());
-                        }
-                    }
-                }
-            }
-
-            if (previousvalue) {
-                this.trigger('set-field-not-read-only', name);
-            }
-        },
-
-        /**
-         * Set a field as required.
-         *
-         * @param {string} name A field name.
-         */
-        setFieldRequired: function (name) {
-            let previousvalue = this.recordHelper.getFieldStateParam(name, 'required');
-
-            this.recordHelper.setFieldStateParam(name, 'required', true);
-
-            let view = this.getFieldView(name);
-
-            if (view) {
-                view.setRequired();
-            }
-
-            if (!previousvalue) {
-                this.trigger('set-field-required', name);
-            }
-        },
-
-        /**
-         * Set a field as not required.
-         *
-         * @param {string} name A field name.
-         */
-        setFieldNotRequired: function (name) {
-            let previousvalue = this.recordHelper.getFieldStateParam(name, 'required');
-
-            this.recordHelper.setFieldStateParam(name, 'required', false);
-
-            let view = this.getFieldView(name);
-
-            if (view) {
-                view.setNotRequired();
-            }
-
-            if (previousvalue) {
-                this.trigger('set-field-not-required', name);
-            }
-        },
-
-        /**
-         * Set an option list for a field.
-         *
-         * @param {string} name A field name.
-         * @param {string[]} list Options.
-         */
-        setFieldOptionList: function (name, list) {
-            let had = this.recordHelper.hasFieldOptionList(name);
-            let previousList = this.recordHelper.getFieldOptionList(name);
-
-            this.recordHelper.setFieldOptionList(name, list);
-
-            let view = this.getFieldView(name);
-
-            if (view) {
-                if ('setOptionList' in view) {
-                    view.setOptionList(list);
-                }
-            }
-
-            if (!had || !_(previousList).isEqual(list)) {
-                this.trigger('set-field-option-list', name, list);
-            }
-        },
-
-        /**
-         * Reset field options (revert to default).
-         *
-         * @param {string} name A field name.
-         */
-        resetFieldOptionList: function (name) {
-            let had = this.recordHelper.hasFieldOptionList(name);
-
-            this.recordHelper.clearFieldOptionList(name);
-
-            let view = this.getFieldView(name);
-
-            if (view) {
-                if ('resetOptionList' in view) {
-                    view.resetOptionList();
-                }
-            }
-
-            if (had) {
-                this.trigger('reset-field-option-list', name);
-            }
-        },
-
-        /**
-         * Show a panel.
-         *
-         * @param {string} name A panel name.
-         */
-        showPanel: function (name) {
-            this.recordHelper.setPanelStateParam(name, 'hidden', false);
-
-            if (this.isRendered()) {
-                this.$el.find('.panel[data-name="'+name+'"]').removeClass('hidden');
-            }
-        },
-
-        /**
-         * Hide a panel.
-         *
-         * @param {string} name A panel name.
-         */
-        hidePanel: function (name) {
-            this.recordHelper.setPanelStateParam(name, 'hidden', true);
-
-            if (this.isRendered()) {
-                this.$el.find('.panel[data-name="'+name+'"]').addClass('hidden');
-            }
-        },
-
-        /**
-         * Style a panel. Style is set in the `data-style` DOM attribute.
-         *
-         * @param {string} name A panel name.
-         */
-        stylePanel: function (name) {
-            this.recordHelper.setPanelStateParam(name, 'styled', true);
-
-            let process = () => {
-                let $panel = this.$el.find('.panel[data-name="'+name+'"]');
-                let $btn = $panel.find('> .panel-heading .btn');
-
-                let style = $panel.attr('data-style');
-
-                if (!style) {
-                    return;
-                }
-
-                $panel.removeClass('panel-default');
-                $panel.addClass('panel-' + style);
-
-                $btn.removeClass('btn-default');
-                $btn.addClass('btn-' + style);
-            };
-
-            if (this.isRendered()) {
-                process();
+                $field.removeClass('hidden');
+                $label.removeClass('hidden');
+                $cell.removeClass('hidden-cell');
 
                 return;
             }
 
+            this.$el.find('.cell[data-name="' + name + '"]').removeClass('hidden-cell');
+            this.$el.find('.field[data-name="' + name + '"]').removeClass('hidden');
+            this.$el.find('label.control-label[data-name="' + name + '"]').removeClass('hidden');
+        };
+
+        if (this.isRendered()) {
+            processHtml();
+        }
+        else {
             this.once('after:render', () => {
-                process();
+                processHtml();
             });
-        },
+        }
 
-        /**
-         * Un-style a panel.
-         *
-         * @param {string} name A panel name.
-         */
-        unstylePanel: function (name) {
-            this.recordHelper.setPanelStateParam(name, 'styled', false);
+        let view = this.getFieldView(name);
 
-            let process = () => {
-                let $panel = this.$el.find('.panel[data-name="'+name+'"]');
-                let $btn = $panel.find('> .panel-heading .btn');
-
-                let style = $panel.attr('data-style');
-
-                if (!style) {
-                    return;
-                }
-
-                $panel.removeClass('panel-' + style);
-                $panel.addClass('panel-default');
-
-                $btn.removeClass('btn-' + style);
-                $btn.addClass('btn-default');
-            };
-
-            if (this.isRendered()) {
-                process();
-
-                return;
+        if (view) {
+            if (!view.disabledLocked) {
+                view.setNotDisabled();
             }
+        }
+    },
 
-            this.once('after:render', () => {
-                process();
-            });
-        },
+    /**
+     * Set a field as read-only.
+     *
+     * @param {string} name A field name.
+     * @param {boolean } [locked] To lock. Won't be able to un-set.
+     */
+    setFieldReadOnly: function (name, locked) {
+        let previousvalue = this.recordHelper.getFieldStateParam(name, 'readOnly');
 
-        /**
-         * Set/unset a confirmation upon leaving the form.
-         *
-         * @param {boolean} value True sets a required confirmation.
-         */
-        setConfirmLeaveOut: function (value) {
-            if (!this.getRouter()) {
-                return;
-            }
+        this.recordHelper.setFieldStateParam(name, 'readOnly', true);
 
-            this.getRouter().confirmLeaveOut = value;
-        },
+        if (locked) {
+            this.recordHelper.setFieldStateParam(name, 'readOnlyLocked', true);
+        }
 
-        /**
-         * Get field views.
-         *
-         * @param {boolean} [withHidden] With hidden.
-         * @return {Object.<string,module:views/fields/base.Class>}
-         */
-        getFieldViews: function (withHidden) {
-            let fields = {};
+        let view = this.getFieldView(name);
 
-            this.fieldList.forEach(item => {
-                let view = this.getFieldView(item);
+        if (view) {
+            view.setReadOnly(locked);
+        }
 
-                if (view) {
-                    fields[item] = view;
-                }
-            });
+        if (!previousvalue) {
+            this.trigger('set-field-read-only', name);
+        }
+    },
 
-            return fields;
-        },
+    /**
+     * Set a field as not read-only.
+     *
+     * @param {string} name A field name.
+     */
+    setFieldNotReadOnly: function (name) {
+        let previousvalue = this.recordHelper.getFieldStateParam(name, 'readOnly');
 
-        /**
-         * @deprecated Use `getFieldViews`.
-         * @return {Object<string, module:views/fields/base.Class>}
-         */
-        getFields: function () {
-            return this.getFieldViews();
-        },
+        this.recordHelper.setFieldStateParam(name, 'readOnly', false);
 
-        /**
-         * Get a field view.
-         *
-         * @param {string} name A field name.
-         * @return {module:views/fields/base.Class|null}
-         */
-        getFieldView: function (name) {
-            /** @type {module:views/fields/base.Class|null} */
-            let view =  this.getView(name + 'Field') || null;
+        let view = this.getFieldView(name);
 
-            // @todo Remove.
-            if (!view) {
-                view = this.getView(name) || null;
-            }
-
-            return view;
-        },
-
-        /**
-         * @deprecated Use `getFieldView`.
-         * @return {module:views/fields/base.Class|null}
-         */
-        getField: function (name) {
-            return this.getFieldView(name);
-        },
-
-        /**
-         * Get a field list.
-         *
-         * @return {string[]}
-         */
-        getFieldList: function () {
-            return Object.keys(this.getFieldViews());
-        },
-
-        /**
-         * Get a field view list.
-         *
-         * @return {module:views/fields/base.Class[]}
-         */
-        getFieldViewList: function () {
-            return this.getFieldList()
-                .map(field => this.getFieldView(field))
-                .filter(view => view !== null);
-        },
-
-        /**
-         * @inheritDoc
-         */
-        data: function () {
-            return {
-                scope: this.scope,
-                entityType: this.entityType,
-                hiddenPanels: this.recordHelper.getHiddenPanels(),
-                hiddenFields: this.recordHelper.getHiddenFields(),
-            };
-        },
-
-        /**
-         * @todo Remove.
-         * @private
-         */
-        handleDataBeforeRender: function (data) {
-            this.getFieldList().forEach((field) => {
-                let viewKey = field + 'Field';
-
-                data[field] = data[viewKey];
-            });
-        },
-
-        /**
-         * @inheritDoc
-         */
-        setup: function () {
-            if (typeof this.model === 'undefined') {
-                throw new Error('Model has not been injected into record view.');
-            }
-
-            /** @type {module:view-record-helper.Class} */
-            this.recordHelper = new ViewRecordHelper();
-
-            this.dynamicLogicDefs = this.options.dynamicLogicDefs || this.dynamicLogicDefs;
-
-            this.on('remove', () => {
-                if (this.isChanged) {
-                    this.resetModelChanges();
-                }
-
-                this.setIsNotChanged();
-            });
-
-            this.events = this.events || {};
-
-            this.entityType = this.model.name;
-            this.scope = this.options.scope || this.entityType;
-
-            this.fieldList = this.options.fieldList || this.fieldList || [];
-
-            this.numId = Math.floor((Math.random() * 10000) + 1);
-
-            this.id = Espo.Utils.toDom(this.entityType) + '-' +
-                Espo.Utils.toDom(this.type) + '-' + this.numId;
-
-            if (this.model.isNew()) {
-                this.isNew = true;
-            }
-
-            this.setupBeforeFinal();
-        },
-
-        /**
-         * Set up before final.
-         *
-         * @protected
-         */
-        setupBeforeFinal: function () {
-            this.attributes = this.model.getClonedAttributes();
-
-            this.listenTo(this.model, 'change', (m, o) => {
-                if (o.sync) {
-                    for (let attribute in m.attributes) {
-                        if (!m.hasChanged(attribute)) {
-                            continue;
-                        }
-
-                        this.attributes[attribute] = Espo.Utils.cloneDeep(
-                            m.get(attribute)
-                        );
-                    }
-
-                    return;
-                }
+        if (view) {
+            if (view.readOnly) {
+                view.setNotReadOnly();
 
                 if (this.mode === this.MODE_EDIT) {
-                    this.setIsChanged();
+                    if (!view.readOnlyLocked && view.isDetailMode()) {
+                        view.setEditMode()
+                            .then(() => view.reRender());
+                    }
                 }
-            });
+            }
+        }
 
-            if (this.options.attributes) {
-                this.model.set(this.options.attributes);
+        if (previousvalue) {
+            this.trigger('set-field-not-read-only', name);
+        }
+    },
+
+    /**
+     * Set a field as required.
+     *
+     * @param {string} name A field name.
+     */
+    setFieldRequired: function (name) {
+        let previousvalue = this.recordHelper.getFieldStateParam(name, 'required');
+
+        this.recordHelper.setFieldStateParam(name, 'required', true);
+
+        let view = this.getFieldView(name);
+
+        if (view) {
+            view.setRequired();
+        }
+
+        if (!previousvalue) {
+            this.trigger('set-field-required', name);
+        }
+    },
+
+    /**
+     * Set a field as not required.
+     *
+     * @param {string} name A field name.
+     */
+    setFieldNotRequired: function (name) {
+        let previousvalue = this.recordHelper.getFieldStateParam(name, 'required');
+
+        this.recordHelper.setFieldStateParam(name, 'required', false);
+
+        let view = this.getFieldView(name);
+
+        if (view) {
+            view.setNotRequired();
+        }
+
+        if (previousvalue) {
+            this.trigger('set-field-not-required', name);
+        }
+    },
+
+    /**
+     * Set an option list for a field.
+     *
+     * @param {string} name A field name.
+     * @param {string[]} list Options.
+     */
+    setFieldOptionList: function (name, list) {
+        let had = this.recordHelper.hasFieldOptionList(name);
+        let previousList = this.recordHelper.getFieldOptionList(name);
+
+        this.recordHelper.setFieldOptionList(name, list);
+
+        let view = this.getFieldView(name);
+
+        if (view) {
+            if ('setOptionList' in view) {
+                view.setOptionList(list);
+            }
+        }
+
+        if (!had || !_(previousList).isEqual(list)) {
+            this.trigger('set-field-option-list', name, list);
+        }
+    },
+
+    /**
+     * Reset field options (revert to default).
+     *
+     * @param {string} name A field name.
+     */
+    resetFieldOptionList: function (name) {
+        let had = this.recordHelper.hasFieldOptionList(name);
+
+        this.recordHelper.clearFieldOptionList(name);
+
+        let view = this.getFieldView(name);
+
+        if (view) {
+            if ('resetOptionList' in view) {
+                view.resetOptionList();
+            }
+        }
+
+        if (had) {
+            this.trigger('reset-field-option-list', name);
+        }
+    },
+
+    /**
+     * Show a panel.
+     *
+     * @param {string} name A panel name.
+     */
+    showPanel: function (name) {
+        this.recordHelper.setPanelStateParam(name, 'hidden', false);
+
+        if (this.isRendered()) {
+            this.$el.find('.panel[data-name="'+name+'"]').removeClass('hidden');
+        }
+    },
+
+    /**
+     * Hide a panel.
+     *
+     * @param {string} name A panel name.
+     */
+    hidePanel: function (name) {
+        this.recordHelper.setPanelStateParam(name, 'hidden', true);
+
+        if (this.isRendered()) {
+            this.$el.find('.panel[data-name="'+name+'"]').addClass('hidden');
+        }
+    },
+
+    /**
+     * Style a panel. Style is set in the `data-style` DOM attribute.
+     *
+     * @param {string} name A panel name.
+     */
+    stylePanel: function (name) {
+        this.recordHelper.setPanelStateParam(name, 'styled', true);
+
+        let process = () => {
+            let $panel = this.$el.find('.panel[data-name="'+name+'"]');
+            let $btn = $panel.find('> .panel-heading .btn');
+
+            let style = $panel.attr('data-style');
+
+            if (!style) {
+                return;
             }
 
-            this.listenTo(this.model, 'sync', () => {
-                 this.attributes = this.model.getClonedAttributes();
-            });
+            $panel.removeClass('panel-default');
+            $panel.addClass('panel-' + style);
 
-            this.initDependancy();
-            this.initDynamicLogic();
-        },
+            $btn.removeClass('btn-default');
+            $btn.addClass('btn-' + style);
+        };
 
-        /**
-         * Set an initial attribute value.
-         *
-         * @protected
-         * @param {string} attribute An attribute name.
-         * @param {*} value
-         */
-        setInitialAttributeValue: function (attribute, value) {
-            this.attributes[attribute] = value;
-        },
+        if (this.isRendered()) {
+            process();
 
-        /**
-         * Check whether a current attribute value differs from initial.
-         *
-         * @param {string} name An attribute name.
-         * @return {boolean}
-         */
-        checkAttributeIsChanged: function (name) {
-            return !_.isEqual(this.attributes[name], this.model.get(name));
-        },
+            return;
+        }
 
-        /**
-         * Reset model changes.
-         */
-        resetModelChanges: function () {
-            if (this.updatedAttributes) {
-                this.attributes = this.updatedAttributes;
+        this.once('after:render', () => {
+            process();
+        });
+    },
 
-                this.updatedAttributes = null;
+    /**
+     * Un-style a panel.
+     *
+     * @param {string} name A panel name.
+     */
+    unstylePanel: function (name) {
+        this.recordHelper.setPanelStateParam(name, 'styled', false);
+
+        let process = () => {
+            let $panel = this.$el.find('.panel[data-name="'+name+'"]');
+            let $btn = $panel.find('> .panel-heading .btn');
+
+            let style = $panel.attr('data-style');
+
+            if (!style) {
+                return;
             }
 
-            let attributes = this.model.attributes;
+            $panel.removeClass('panel-' + style);
+            $panel.addClass('panel-default');
 
+            $btn.removeClass('btn-' + style);
+            $btn.addClass('btn-default');
+        };
+
+        if (this.isRendered()) {
+            process();
+
+            return;
+        }
+
+        this.once('after:render', () => {
+            process();
+        });
+    },
+
+    /**
+     * Set/unset a confirmation upon leaving the form.
+     *
+     * @param {boolean} value True sets a required confirmation.
+     */
+    setConfirmLeaveOut: function (value) {
+        if (!this.getRouter()) {
+            return;
+        }
+
+        this.getRouter().confirmLeaveOut = value;
+    },
+
+    /**
+     * Get field views.
+     *
+     * @param {boolean} [withHidden] With hidden.
+     * @return {Object.<string, module:views/fields/base>}
+     */
+    getFieldViews: function (withHidden) {
+        let fields = {};
+
+        this.fieldList.forEach(item => {
+            let view = this.getFieldView(item);
+
+            if (view) {
+                fields[item] = view;
+            }
+        });
+
+        return fields;
+    },
+
+    /**
+     * @deprecated Use `getFieldViews`.
+     * @return {Object<string, module:views/fields/base>}
+     */
+    getFields: function () {
+        return this.getFieldViews();
+    },
+
+    /**
+     * Get a field view.
+     *
+     * @param {string} name A field name.
+     * @return {module:views/fields/base|null}
+     */
+    getFieldView: function (name) {
+        /** @type {module:views/fields/base|null} */
+        let view =  this.getView(name + 'Field') || null;
+
+        // @todo Remove.
+        if (!view) {
+            view = this.getView(name) || null;
+        }
+
+        return view;
+    },
+
+    /**
+     * @deprecated Use `getFieldView`.
+     * @return {module:views/fields/base|null}
+     */
+    getField: function (name) {
+        return this.getFieldView(name);
+    },
+
+    /**
+     * Get a field list.
+     *
+     * @return {string[]}
+     */
+    getFieldList: function () {
+        return Object.keys(this.getFieldViews());
+    },
+
+    /**
+     * Get a field view list.
+     *
+     * @return {module:views/fields/base[]}
+     */
+    getFieldViewList: function () {
+        return this.getFieldList()
+            .map(field => this.getFieldView(field))
+            .filter(view => view !== null);
+    },
+
+    /**
+     * @inheritDoc
+     */
+    data: function () {
+        return {
+            scope: this.scope,
+            entityType: this.entityType,
+            hiddenPanels: this.recordHelper.getHiddenPanels(),
+            hiddenFields: this.recordHelper.getHiddenFields(),
+        };
+    },
+
+    /**
+     * @todo Remove.
+     * @private
+     */
+    handleDataBeforeRender: function (data) {
+        this.getFieldList().forEach((field) => {
+            let viewKey = field + 'Field';
+
+            data[field] = data[viewKey];
+        });
+    },
+
+    /**
+     * @inheritDoc
+     */
+    setup: function () {
+        if (typeof this.model === 'undefined') {
+            throw new Error('Model has not been injected into record view.');
+        }
+
+        /** @type {module:view-record-helper} */
+        this.recordHelper = new ViewRecordHelper();
+
+        this.dynamicLogicDefs = this.options.dynamicLogicDefs || this.dynamicLogicDefs;
+
+        this.on('remove', () => {
+            if (this.isChanged) {
+                this.resetModelChanges();
+            }
+
+            this.setIsNotChanged();
+        });
+
+        this.events = this.events || {};
+
+        this.entityType = this.model.name;
+        this.scope = this.options.scope || this.entityType;
+
+        this.fieldList = this.options.fieldList || this.fieldList || [];
+
+        this.numId = Math.floor((Math.random() * 10000) + 1);
+
+        this.id = Espo.Utils.toDom(this.entityType) + '-' +
+            Espo.Utils.toDom(this.type) + '-' + this.numId;
+
+        if (this.model.isNew()) {
+            this.isNew = true;
+        }
+
+        this.setupBeforeFinal();
+    },
+
+    /**
+     * Set up before final.
+     *
+     * @protected
+     */
+    setupBeforeFinal: function () {
+        this.attributes = this.model.getClonedAttributes();
+
+        this.listenTo(this.model, 'change', (m, o) => {
+            if (o.sync) {
+                for (let attribute in m.attributes) {
+                    if (!m.hasChanged(attribute)) {
+                        continue;
+                    }
+
+                    this.attributes[attribute] = Espo.Utils.cloneDeep(
+                        m.get(attribute)
+                    );
+                }
+
+                return;
+            }
+
+            if (this.mode === this.MODE_EDIT) {
+                this.setIsChanged();
+            }
+        });
+
+        if (this.options.attributes) {
+            this.model.set(this.options.attributes);
+        }
+
+        this.listenTo(this.model, 'sync', () => {
+             this.attributes = this.model.getClonedAttributes();
+        });
+
+        this.initDependancy();
+        this.initDynamicLogic();
+    },
+
+    /**
+     * Set an initial attribute value.
+     *
+     * @protected
+     * @param {string} attribute An attribute name.
+     * @param {*} value
+     */
+    setInitialAttributeValue: function (attribute, value) {
+        this.attributes[attribute] = value;
+    },
+
+    /**
+     * Check whether a current attribute value differs from initial.
+     *
+     * @param {string} name An attribute name.
+     * @return {boolean}
+     */
+    checkAttributeIsChanged: function (name) {
+        return !_.isEqual(this.attributes[name], this.model.get(name));
+    },
+
+    /**
+     * Reset model changes.
+     */
+    resetModelChanges: function () {
+        if (this.updatedAttributes) {
+            this.attributes = this.updatedAttributes;
+
+            this.updatedAttributes = null;
+        }
+
+        let attributes = this.model.attributes;
+
+        for (let attr in attributes) {
+            if (!(attr in this.attributes)) {
+                this.model.unset(attr);
+            }
+        }
+
+        this.model.set(this.attributes, {skipReRender: true});
+    },
+
+    /**
+     * Set model attribute values.
+     *
+     * @param {Object.<string,*>} setAttributes Values.
+     * @param {Object.<string,*>} [options] Options.
+     */
+    setModelAttributes: function (setAttributes, options) {
+        for (let item in this.model.attributes) {
+            if (!(item in setAttributes)) {
+                this.model.unset(item);
+            }
+        }
+
+        this.model.set(setAttributes, options || {});
+    },
+
+    /**
+     * Init dynamic logic.
+     *
+     * @protected
+     */
+    initDynamicLogic: function () {
+        this.dynamicLogicDefs = Espo.Utils.clone(this.dynamicLogicDefs || {});
+        this.dynamicLogicDefs.fields = Espo.Utils.clone(this.dynamicLogicDefs.fields);
+        this.dynamicLogicDefs.panels = Espo.Utils.clone(this.dynamicLogicDefs.panels);
+
+        this.dynamicLogic = new DynamicLogic(this.dynamicLogicDefs, this);
+
+        this.listenTo(this.model, 'change', () => this.processDynamicLogic());
+        this.processDynamicLogic();
+    },
+
+    /**
+     * Process dynamic logic.
+     *
+     * @protected
+     */
+    processDynamicLogic: function () {
+        this.dynamicLogic.process();
+    },
+
+    /**
+     * @deprecated
+     */
+    applyDependancy: function () {
+        this._handleDependencyAttributes();
+    },
+
+    /**
+     * @deprecated
+     */
+    initDependancy: function () {
+        Object.keys(this.dependencyDefs || {}).forEach((attr) => {
+            this.listenTo(this.model, 'change:' + attr, () => {
+                this._handleDependencyAttribute(attr);
+            });
+        });
+
+        this._handleDependencyAttributes();
+    },
+
+    /**
+     * Set up a field level security.
+     *
+     * @protected
+     */
+    setupFieldLevelSecurity: function () {
+        let forbiddenFieldList = this.getAcl().getScopeForbiddenFieldList(this.entityType, 'read');
+
+        forbiddenFieldList.forEach((field) => {
+            this.hideField(field, true);
+        });
+
+        let readOnlyFieldList = this.getAcl().getScopeForbiddenFieldList(this.entityType, 'edit');
+
+        readOnlyFieldList.forEach((field) => {
+            this.setFieldReadOnly(field, true);
+        });
+    },
+
+    /**
+     * Set is changed.
+     *
+     * @protected
+     */
+    setIsChanged: function () {
+        this.isChanged = true;
+    },
+
+    /**
+     * Set is not changed.
+     *
+     * @protected
+     */
+    setIsNotChanged: function () {
+        this.isChanged = false;
+    },
+
+    /**
+     * Validate.
+     *
+     * @return {boolean} True if not valid.
+     */
+    validate: function () {
+        let invalidFieldList = [];
+
+        this.getFieldList().forEach(field => {
+            let fieldIsInvalid = this.validateField(field);
+
+            if (fieldIsInvalid) {
+                invalidFieldList.push(field)
+            }
+        });
+
+        if (!!invalidFieldList.length) {
+            this.onInvalid(invalidFieldList);
+        }
+
+        return !!invalidFieldList.length;
+    },
+
+    /**
+     * @protected
+     * @param {string[]} invalidFieldList Invalid fields.
+     */
+    onInvalid: function (invalidFieldList) {},
+
+    /**
+     * Validate a specific field.
+     *
+     * @param {string} field A field name.
+     * @return {boolean} True if not valid.
+     */
+    validateField: function (field) {
+        let fieldView = this.getFieldView(field);
+
+        if (!fieldView) {
+            return false;
+        }
+
+        let notValid = false;
+
+        if (
+            fieldView.isEditMode() &&
+            !fieldView.disabled &&
+            !fieldView.readOnly
+        ) {
+            notValid = fieldView.validate() || notValid;
+        }
+
+        if (notValid) {
+            if (fieldView.$el) {
+                let rect = fieldView.$el.get(0).getBoundingClientRect();
+
+                if (
+                    rect.top === 0 &&
+                    rect.bottom === 0 &&
+                    rect.left === 0 &&
+                    fieldView.$el.closest('.panel.hidden').length
+                ) {
+                    setTimeout(() => {
+                        let msg = this.translate('Not valid') + ': ' +
+                            (
+                                fieldView.lastValidationMessage ||
+                                this.translate(field, 'fields', this.entityType)
+                            );
+
+                        Espo.Ui.error(msg, true);
+                    }, 10);
+                }
+            }
+
+            return true;
+        }
+
+        if (
+            this.dynamicLogic &&
+            this.dynamicLogicDefs &&
+            this.dynamicLogicDefs.fields &&
+            this.dynamicLogicDefs.fields[field] &&
+            this.dynamicLogicDefs.fields[field].invalid &&
+            this.dynamicLogicDefs.fields[field].invalid.conditionGroup
+        ) {
+            let invalidConditionGroup = this.dynamicLogicDefs.fields[field].invalid.conditionGroup;
+
+            let fieldInvalid = this.dynamicLogic.checkConditionGroup(invalidConditionGroup);
+
+            notValid = fieldInvalid || notValid;
+
+            if (fieldInvalid) {
+                let msg =
+                    this.translate('fieldInvalid', 'messages')
+                        .replace('{field}', this.translate(field, 'fields', this.entityType));
+
+                fieldView.showValidationMessage(msg);
+
+                fieldView.trigger('invalid');
+            }
+        }
+
+        return notValid;
+    },
+
+    /**
+     * Processed after save.
+     */
+    afterSave: function () {
+        if (this.isNew) {
+            Espo.Ui.success(this.translate('Created'));
+        }
+        else {
+            Espo.Ui.success(this.translate('Saved'));
+        }
+
+        this.setIsNotChanged();
+    },
+
+    /**
+     * Processed before before-save.
+     */
+    beforeBeforeSave: function () {},
+
+    /**
+     * Processed before save.
+     */
+    beforeSave: function () {
+        Espo.Ui.notify(this.translate('saving', 'messages'));
+    },
+
+    /**
+     * Processed after save error.
+     */
+    afterSaveError: function () {},
+
+    /**
+     * Processed after save a not modified record.
+     */
+    afterNotModified: function () {
+        Espo.Ui.warning(this.translate('notModified', 'messages'));
+
+        this.setIsNotChanged();
+    },
+
+    /**
+     * Processed after save not valid.
+     */
+    afterNotValid: function () {
+        Espo.Ui.error(this.translate('Not valid'));
+    },
+
+    /**
+     * Save options.
+     *
+     * @typedef {Object} module:views/record/base~saveOptions
+     *
+     * @property {Object.<string,string>} [headers] HTTP headers.
+     * @property {boolean} [skipNotModifiedWarning] Don't show a not-modified warning.
+     * @property {function():void} [afterValidate] A callback called after validate.
+     * @property {boolean} [bypassClose] Bypass closing. Only for inline-edit.
+     */
+
+    /**
+     * Save.
+     *
+     * @param {module:views/record/base~saveOptions} [options] Options.
+     * @return {Promise<never,string>}
+     */
+    save: function (options) {
+        options = options || {};
+
+        let headers = options.headers || {};
+
+        let model = this.model;
+
+        this.lastSaveCancelReason = null;
+
+        this.beforeBeforeSave();
+
+        let fetchedAttributes = this.fetch();
+        let initialAttributes = this.attributes;
+        let beforeSaveAttributes = this.model.getClonedAttributes();
+
+        let attributes = _.extend(
+            Espo.Utils.cloneDeep(beforeSaveAttributes),
+            fetchedAttributes
+        );
+
+        let setAttributes = {};
+
+        if (model.isNew()) {
+            setAttributes = attributes;
+        }
+
+        if (!model.isNew()) {
             for (let attr in attributes) {
-                if (!(attr in this.attributes)) {
-                    this.model.unset(attr);
-                }
-            }
-
-            this.model.set(this.attributes, {skipReRender: true});
-        },
-
-        /**
-         * Set model attribute values.
-         *
-         * @param {Object.<string,*>} setAttributes Values.
-         * @param {Object.<string,*>} [options] Options.
-         */
-        setModelAttributes: function (setAttributes, options) {
-            for (let item in this.model.attributes) {
-                if (!(item in setAttributes)) {
-                    this.model.unset(item);
-                }
-            }
-
-            this.model.set(setAttributes, options || {});
-        },
-
-        /**
-         * Init dynamic logic.
-         *
-         * @protected
-         */
-        initDynamicLogic: function () {
-            this.dynamicLogicDefs = Espo.Utils.clone(this.dynamicLogicDefs || {});
-            this.dynamicLogicDefs.fields = Espo.Utils.clone(this.dynamicLogicDefs.fields);
-            this.dynamicLogicDefs.panels = Espo.Utils.clone(this.dynamicLogicDefs.panels);
-
-            this.dynamicLogic = new DynamicLogic(this.dynamicLogicDefs, this);
-
-            this.listenTo(this.model, 'change', () => this.processDynamicLogic());
-            this.processDynamicLogic();
-        },
-
-        /**
-         * Process dynamic logic.
-         *
-         * @protected
-         */
-        processDynamicLogic: function () {
-            this.dynamicLogic.process();
-        },
-
-        /**
-         * @deprecated
-         */
-        applyDependancy: function () {
-            this._handleDependencyAttributes();
-        },
-
-        /**
-         * @deprecated
-         */
-        initDependancy: function () {
-            Object.keys(this.dependencyDefs || {}).forEach((attr) => {
-                this.listenTo(this.model, 'change:' + attr, () => {
-                    this._handleDependencyAttribute(attr);
-                });
-            });
-
-            this._handleDependencyAttributes();
-        },
-
-        /**
-         * Set up a field level security.
-         *
-         * @protected
-         */
-        setupFieldLevelSecurity: function () {
-            let forbiddenFieldList = this.getAcl().getScopeForbiddenFieldList(this.entityType, 'read');
-
-            forbiddenFieldList.forEach((field) => {
-                this.hideField(field, true);
-            });
-
-            let readOnlyFieldList = this.getAcl().getScopeForbiddenFieldList(this.entityType, 'edit');
-
-            readOnlyFieldList.forEach((field) => {
-                this.setFieldReadOnly(field, true);
-            });
-        },
-
-        /**
-         * Set is changed.
-         *
-         * @protected
-         */
-        setIsChanged: function () {
-            this.isChanged = true;
-        },
-
-        /**
-         * Set is not changed.
-         *
-         * @protected
-         */
-        setIsNotChanged: function () {
-            this.isChanged = false;
-        },
-
-        /**
-         * Validate.
-         *
-         * @return {boolean} True if not valid.
-         */
-        validate: function () {
-            let invalidFieldList = [];
-
-            this.getFieldList().forEach(field => {
-                let fieldIsInvalid = this.validateField(field);
-
-                if (fieldIsInvalid) {
-                    invalidFieldList.push(field)
-                }
-            });
-
-            if (!!invalidFieldList.length) {
-                this.onInvalid(invalidFieldList);
-            }
-
-            return !!invalidFieldList.length;
-        },
-
-        /**
-         * @protected
-         * @param {string[]} invalidFieldList Invalid fields.
-         */
-        onInvalid: function (invalidFieldList) {},
-
-        /**
-         * Validate a specific field.
-         *
-         * @param {string} field A field name.
-         * @return {boolean} True if not valid.
-         */
-        validateField: function (field) {
-            let fieldView = this.getFieldView(field);
-
-            if (!fieldView) {
-                return false;
-            }
-
-            let notValid = false;
-
-            if (
-                fieldView.isEditMode() &&
-                !fieldView.disabled &&
-                !fieldView.readOnly
-            ) {
-                notValid = fieldView.validate() || notValid;
-            }
-
-            if (notValid) {
-                if (fieldView.$el) {
-                    let rect = fieldView.$el.get(0).getBoundingClientRect();
-
-                    if (
-                        rect.top === 0 &&
-                        rect.bottom === 0 &&
-                        rect.left === 0 &&
-                        fieldView.$el.closest('.panel.hidden').length
-                    ) {
-                        setTimeout(() => {
-                            let msg = this.translate('Not valid') + ': ' +
-                                (
-                                    fieldView.lastValidationMessage ||
-                                    this.translate(field, 'fields', this.entityType)
-                                );
-
-                            Espo.Ui.error(msg, true);
-                        }, 10);
-                    }
-                }
-
-                return true;
-            }
-
-            if (
-                this.dynamicLogic &&
-                this.dynamicLogicDefs &&
-                this.dynamicLogicDefs.fields &&
-                this.dynamicLogicDefs.fields[field] &&
-                this.dynamicLogicDefs.fields[field].invalid &&
-                this.dynamicLogicDefs.fields[field].invalid.conditionGroup
-            ) {
-                let invalidConditionGroup = this.dynamicLogicDefs.fields[field].invalid.conditionGroup;
-
-                let fieldInvalid = this.dynamicLogic.checkConditionGroup(invalidConditionGroup);
-
-                notValid = fieldInvalid || notValid;
-
-                if (fieldInvalid) {
-                    let msg =
-                        this.translate('fieldInvalid', 'messages')
-                            .replace('{field}', this.translate(field, 'fields', this.entityType));
-
-                    fieldView.showValidationMessage(msg);
-
-                    fieldView.trigger('invalid');
-                }
-            }
-
-            return notValid;
-        },
-
-        /**
-         * Processed after save.
-         */
-        afterSave: function () {
-            if (this.isNew) {
-                Espo.Ui.success(this.translate('Created'));
-            }
-            else {
-                Espo.Ui.success(this.translate('Saved'));
-            }
-
-            this.setIsNotChanged();
-        },
-
-        /**
-         * Processed before before-save.
-         */
-        beforeBeforeSave: function () {},
-
-        /**
-         * Processed before save.
-         */
-        beforeSave: function () {
-            Espo.Ui.notify(this.translate('saving', 'messages'));
-        },
-
-        /**
-         * Processed after save error.
-         */
-        afterSaveError: function () {},
-
-        /**
-         * Processed after save a not modified record.
-         */
-        afterNotModified: function () {
-            Espo.Ui.warning(this.translate('notModified', 'messages'));
-
-            this.setIsNotChanged();
-        },
-
-        /**
-         * Processed after save not valid.
-         */
-        afterNotValid: function () {
-            Espo.Ui.error(this.translate('Not valid'));
-        },
-
-        /**
-         * Save options.
-         *
-         * @typedef {Object} module:views/record/base~saveOptions
-         *
-         * @property {Object.<string,string>} [headers] HTTP headers.
-         * @property {boolean} [skipNotModifiedWarning] Don't show a not-modified warning.
-         * @property {function():void} [afterValidate] A callback called after validate.
-         * @property {boolean} [bypassClose] Bypass closing. Only for inline-edit.
-         */
-
-        /**
-         * Save.
-         *
-         * @param {module:views/record/base~saveOptions} [options] Options.
-         * @return {Promise<never,string>}
-         */
-        save: function (options) {
-            options = options || {};
-
-            let headers = options.headers || {};
-
-            let model = this.model;
-
-            this.lastSaveCancelReason = null;
-
-            this.beforeBeforeSave();
-
-            let fetchedAttributes = this.fetch();
-            let initialAttributes = this.attributes;
-            let beforeSaveAttributes = this.model.getClonedAttributes();
-
-            let attributes = _.extend(
-                Espo.Utils.cloneDeep(beforeSaveAttributes),
-                fetchedAttributes
-            );
-
-            let setAttributes = {};
-
-            if (model.isNew()) {
-                setAttributes = attributes;
-            }
-
-            if (!model.isNew()) {
-                for (let attr in attributes) {
-                    if (_.isEqual(initialAttributes[attr], attributes[attr])) {
-                        continue;
-                    }
-
-                    setAttributes[attr] = attributes[attr];
-                }
-
-                let forcePatchAttributeDependencyMap = this.forcePatchAttributeDependencyMap || {};
-
-                for (let attr in forcePatchAttributeDependencyMap) {
-                    if (attr in setAttributes) {
-                        continue;
-                    }
-
-                    if (!(attr in fetchedAttributes)) {
-                        continue;
-                    }
-
-                    let depAttributeList = forcePatchAttributeDependencyMap[attr];
-
-                    let treatAsChanged = !! depAttributeList.find(attr => attr in setAttributes);
-
-                    if (treatAsChanged) {
-                        setAttributes[attr] = attributes[attr];
-                    }
-                }
-            }
-
-            if (Object.keys(setAttributes).length === 0) {
-                if (!options.skipNotModifiedWarning) {
-                    this.afterNotModified();
-                }
-
-                this.lastSaveCancelReason = 'notModified';
-
-                this.trigger('cancel:save', {reason: 'notModified'});
-
-                return Promise.reject('notModified');
-            }
-
-            model.set(setAttributes, {silent: true});
-
-            if (this.validate()) {
-                model.attributes = beforeSaveAttributes;
-
-                this.afterNotValid();
-
-                this.lastSaveCancelReason = 'invalid';
-
-                this.trigger('cancel:save', {reason: 'invalid'});
-
-                return Promise.reject('invalid');
-            }
-
-            if (options.afterValidate) {
-                options.afterValidate();
-            }
-
-            let optimisticConcurrencyControl = this.getMetadata()
-                .get(['entityDefs', this.entityType, 'optimisticConcurrencyControl']);
-
-            if (optimisticConcurrencyControl && this.model.get('versionNumber') !== null) {
-                headers['X-Version-Number'] = this.model.get('versionNumber');
-            }
-
-            if (this.model.isNew() && this.options.duplicateSourceId) {
-                headers['X-Duplicate-Source-Id'] = this.options.duplicateSourceId;
-            }
-
-            this.beforeSave();
-
-            this.trigger('before:save');
-            model.trigger('before:save');
-
-            let onError = (xhr, reject) => {
-                this.handleSaveError(xhr, options);
-                this.afterSaveError();
-
-                this.setModelAttributes(beforeSaveAttributes);
-
-                this.lastSaveCancelReason = 'error';
-
-                this.trigger('error:save');
-                this.trigger('cancel:save', {reason: 'error'});
-
-                reject('error');
-            };
-
-            return new Promise((resolve, reject) => {
-                model
-                    .save(
-                        setAttributes,
-                        {
-                            patch: !model.isNew(),
-                            headers: headers,
-                            // Can't use a promise-catch, as it's called
-                            // after the default ajaxError callback.
-                            error: (m, xhr) => onError(xhr, reject),
-                        },
-                    )
-                    .then(() => {
-                        this.trigger('save', initialAttributes);
-
-                        this.afterSave();
-
-                        if (this.isNew) {
-                            this.isNew = false;
-                        }
-
-                        this.trigger('after:save');
-                        model.trigger('after:save');
-
-                        resolve();
-                    });
-            });
-        },
-
-        /**
-         * Handle a save error.
-         *
-         * @param {JQueryXHR} xhr XHR.
-         * @param {module:views/record/base~saveOptions} [options] Options.
-         */
-        handleSaveError: function (xhr, options) {
-            let handlerData = null;
-
-            if (~[409, 500].indexOf(xhr.status)) {
-                let statusReason = xhr.getResponseHeader('X-Status-Reason');
-
-                if (!statusReason) {
-                    return;
-                }
-
-                try {
-                    handlerData = JSON.parse(statusReason);
-                }
-                catch (e) {}
-
-                if (!handlerData) {
-                    handlerData = {
-                        reason: statusReason.toString(),
-                    };
-
-                    if (xhr.responseText) {
-                        let data;
-
-                        try {
-                            data = JSON.parse(xhr.responseText);
-                        }
-                        catch (e) {
-                            console.error('Could not parse error response body.');
-
-                            return;
-                        }
-
-                        handlerData.data = data;
-                    }
-                }
-            }
-
-            if (!handlerData || !handlerData.reason) {
-                return;
-            }
-
-            let reason = handlerData.reason;
-
-            let handlerName =
-                this.getMetadata()
-                    .get(['clientDefs', this.scope, 'saveErrorHandlers', reason]) ||
-                this.getMetadata()
-                    .get(['clientDefs', 'Global', 'saveErrorHandlers', reason]);
-
-            if (handlerName) {
-                require(handlerName, Handler => {
-                    let handler = new Handler(this);
-
-                    handler.process(handlerData.data, options);
-                });
-
-                xhr.errorIsHandled = true;
-
-                return;
-            }
-
-            let methodName = 'errorHandler' + Espo.Utils.upperCaseFirst(reason);
-
-            if (methodName in this) {
-                xhr.errorIsHandled = true;
-
-                this[methodName](handlerData.data, options);
-            }
-        },
-
-        /**
-         * Fetch data from the form.
-         *
-         * @return {Object.<string,*>}
-         */
-        fetch: function () {
-            let data = {};
-            let fieldViews = this.getFieldViews();
-
-            for (let i in fieldViews) {
-                let view = fieldViews[i];
-
-                if (!view.isEditMode()) {
+                if (_.isEqual(initialAttributes[attr], attributes[attr])) {
                     continue;
                 }
 
-                if (!view.disabled && !view.readOnly && view.isFullyRendered()) {
-                    _.extend(data, view.fetch());
-                }
+                setAttributes[attr] = attributes[attr];
             }
 
-            return data;
-        },
+            let forcePatchAttributeDependencyMap = this.forcePatchAttributeDependencyMap || {};
 
-        /**
-         * Process fetch.
-         *
-         * @return {Object<string,*>|null}
-         */
-        processFetch: function () {
-            let data = this.fetch();
-
-            this.model.set(data);
-
-            if (this.validate()) {
-                return null;
-            }
-
-            return data;
-        },
-
-        /**
-         * Populate defaults.
-         */
-        populateDefaults: function () {
-            this.model.populateDefaults();
-
-            let defaultHash = {};
-
-            if (!this.getUser().get('portalId')) {
-                if (this.model.hasField('assignedUser') || this.model.hasField('assignedUsers')) {
-                    let assignedUserField = 'assignedUser';
-
-                    if (this.model.hasField('assignedUsers')) {
-                        assignedUserField = 'assignedUsers';
-                    }
-
-                    let fillAssignedUser = true;
-
-                    if (this.getPreferences().get('doNotFillAssignedUserIfNotRequired')) {
-                        fillAssignedUser = false;
-
-                        if (this.model.getFieldParam(assignedUserField, 'required')) {
-                            fillAssignedUser = true;
-                        }
-                        else if (this.getAcl().get('assignmentPermission') === 'no') {
-                            fillAssignedUser = true;
-                        }
-                        else if (
-                            this.getAcl().get('assignmentPermission') === 'team' &&
-                            !this.getUser().get('defaultTeamId')
-                        ) {
-                            fillAssignedUser = true;
-                        }
-                        else if (
-                            ~this.getAcl()
-                                .getScopeForbiddenFieldList(this.model.name, 'edit').indexOf(assignedUserField)
-                            ) {
-
-                            fillAssignedUser = true;
-                        }
-                    }
-
-                    if (fillAssignedUser) {
-                        if (assignedUserField === 'assignedUsers') {
-                            defaultHash['assignedUsersIds'] = [this.getUser().id];
-                            defaultHash['assignedUsersNames'] = {};
-
-                            defaultHash['assignedUsersNames'][this.getUser().id] = this.getUser().get('name');
-                        }
-                        else {
-                            defaultHash['assignedUserId'] = this.getUser().id;
-
-                            defaultHash['assignedUserName'] = this.getUser().get('name');
-                        }
-                    }
+            for (let attr in forcePatchAttributeDependencyMap) {
+                if (attr in setAttributes) {
+                    continue;
                 }
 
-                let defaultTeamId = this.getUser().get('defaultTeamId');
+                if (!(attr in fetchedAttributes)) {
+                    continue;
+                }
 
-                if (defaultTeamId) {
-                    if (
-                        this.model.hasField('teams') &&
-                        !this.model.getFieldParam('teams', 'default') &&
-                        Espo.Utils
-                            .lowerCaseFirst(this.model.getLinkParam('teams', 'relationName') || '') === 'entityTeam'
+                let depAttributeList = forcePatchAttributeDependencyMap[attr];
+
+                let treatAsChanged = !! depAttributeList.find(attr => attr in setAttributes);
+
+                if (treatAsChanged) {
+                    setAttributes[attr] = attributes[attr];
+                }
+            }
+        }
+
+        if (Object.keys(setAttributes).length === 0) {
+            if (!options.skipNotModifiedWarning) {
+                this.afterNotModified();
+            }
+
+            this.lastSaveCancelReason = 'notModified';
+
+            this.trigger('cancel:save', {reason: 'notModified'});
+
+            return Promise.reject('notModified');
+        }
+
+        model.set(setAttributes, {silent: true});
+
+        if (this.validate()) {
+            model.attributes = beforeSaveAttributes;
+
+            this.afterNotValid();
+
+            this.lastSaveCancelReason = 'invalid';
+
+            this.trigger('cancel:save', {reason: 'invalid'});
+
+            return Promise.reject('invalid');
+        }
+
+        if (options.afterValidate) {
+            options.afterValidate();
+        }
+
+        let optimisticConcurrencyControl = this.getMetadata()
+            .get(['entityDefs', this.entityType, 'optimisticConcurrencyControl']);
+
+        if (optimisticConcurrencyControl && this.model.get('versionNumber') !== null) {
+            headers['X-Version-Number'] = this.model.get('versionNumber');
+        }
+
+        if (this.model.isNew() && this.options.duplicateSourceId) {
+            headers['X-Duplicate-Source-Id'] = this.options.duplicateSourceId;
+        }
+
+        this.beforeSave();
+
+        this.trigger('before:save');
+        model.trigger('before:save');
+
+        let onError = (xhr, reject) => {
+            this.handleSaveError(xhr, options);
+            this.afterSaveError();
+
+            this.setModelAttributes(beforeSaveAttributes);
+
+            this.lastSaveCancelReason = 'error';
+
+            this.trigger('error:save');
+            this.trigger('cancel:save', {reason: 'error'});
+
+            reject('error');
+        };
+
+        return new Promise((resolve, reject) => {
+            model
+                .save(
+                    setAttributes,
+                    {
+                        patch: !model.isNew(),
+                        headers: headers,
+                        // Can't use a promise-catch, as it's called
+                        // after the default ajaxError callback.
+                        error: (m, xhr) => onError(xhr, reject),
+                    },
+                )
+                .then(() => {
+                    this.trigger('save', initialAttributes);
+
+                    this.afterSave();
+
+                    if (this.isNew) {
+                        this.isNew = false;
+                    }
+
+                    this.trigger('after:save');
+                    model.trigger('after:save');
+
+                    resolve();
+                });
+        });
+    },
+
+    /**
+     * Handle a save error.
+     *
+     * @param {JQueryXHR} xhr XHR.
+     * @param {module:views/record/base~saveOptions} [options] Options.
+     */
+    handleSaveError: function (xhr, options) {
+        let handlerData = null;
+
+        if (~[409, 500].indexOf(xhr.status)) {
+            let statusReason = xhr.getResponseHeader('X-Status-Reason');
+
+            if (!statusReason) {
+                return;
+            }
+
+            try {
+                handlerData = JSON.parse(statusReason);
+            }
+            catch (e) {}
+
+            if (!handlerData) {
+                handlerData = {
+                    reason: statusReason.toString(),
+                };
+
+                if (xhr.responseText) {
+                    let data;
+
+                    try {
+                        data = JSON.parse(xhr.responseText);
+                    }
+                    catch (e) {
+                        console.error('Could not parse error response body.');
+
+                        return;
+                    }
+
+                    handlerData.data = data;
+                }
+            }
+        }
+
+        if (!handlerData || !handlerData.reason) {
+            return;
+        }
+
+        let reason = handlerData.reason;
+
+        let handlerName =
+            this.getMetadata()
+                .get(['clientDefs', this.scope, 'saveErrorHandlers', reason]) ||
+            this.getMetadata()
+                .get(['clientDefs', 'Global', 'saveErrorHandlers', reason]);
+
+        if (handlerName) {
+            Espo.loader.require(handlerName, Handler => {
+                let handler = new Handler(this);
+
+                handler.process(handlerData.data, options);
+            });
+
+            xhr.errorIsHandled = true;
+
+            return;
+        }
+
+        let methodName = 'errorHandler' + Espo.Utils.upperCaseFirst(reason);
+
+        if (methodName in this) {
+            xhr.errorIsHandled = true;
+
+            this[methodName](handlerData.data, options);
+        }
+    },
+
+    /**
+     * Fetch data from the form.
+     *
+     * @return {Object.<string,*>}
+     */
+    fetch: function () {
+        let data = {};
+        let fieldViews = this.getFieldViews();
+
+        for (let i in fieldViews) {
+            let view = fieldViews[i];
+
+            if (!view.isEditMode()) {
+                continue;
+            }
+
+            if (!view.disabled && !view.readOnly && view.isFullyRendered()) {
+                _.extend(data, view.fetch());
+            }
+        }
+
+        return data;
+    },
+
+    /**
+     * Process fetch.
+     *
+     * @return {Object<string,*>|null}
+     */
+    processFetch: function () {
+        let data = this.fetch();
+
+        this.model.set(data);
+
+        if (this.validate()) {
+            return null;
+        }
+
+        return data;
+    },
+
+    /**
+     * Populate defaults.
+     */
+    populateDefaults: function () {
+        this.model.populateDefaults();
+
+        let defaultHash = {};
+
+        if (!this.getUser().get('portalId')) {
+            if (this.model.hasField('assignedUser') || this.model.hasField('assignedUsers')) {
+                let assignedUserField = 'assignedUser';
+
+                if (this.model.hasField('assignedUsers')) {
+                    assignedUserField = 'assignedUsers';
+                }
+
+                let fillAssignedUser = true;
+
+                if (this.getPreferences().get('doNotFillAssignedUserIfNotRequired')) {
+                    fillAssignedUser = false;
+
+                    if (this.model.getFieldParam(assignedUserField, 'required')) {
+                        fillAssignedUser = true;
+                    }
+                    else if (this.getAcl().get('assignmentPermission') === 'no') {
+                        fillAssignedUser = true;
+                    }
+                    else if (
+                        this.getAcl().get('assignmentPermission') === 'team' &&
+                        !this.getUser().get('defaultTeamId')
                     ) {
-                        defaultHash['teamsIds'] = [defaultTeamId];
-                        defaultHash['teamsNames'] = {};
-                        defaultHash['teamsNames'][defaultTeamId] = this.getUser().get('defaultTeamName');
+                        fillAssignedUser = true;
                     }
-                }
-            }
+                    else if (
+                        ~this.getAcl()
+                            .getScopeForbiddenFieldList(this.model.name, 'edit').indexOf(assignedUserField)
+                        ) {
 
-            if (this.getUser().get('portalId')) {
-                if (
-                    this.model.hasField('account') &&
-                    ~['belongsTo', 'hasOne'].indexOf(this.model.getLinkType('account'))
-                ) {
-                    if (this.getUser().get('accountId')) {
-                        defaultHash['accountId'] =  this.getUser().get('accountId');
-                        defaultHash['accountName'] = this.getUser().get('accountName');
+                        fillAssignedUser = true;
                     }
                 }
 
-                if (
-                    this.model.hasField('contact') &&
-                    ~['belongsTo', 'hasOne'].indexOf(this.model.getLinkType('contact'))
-                ) {
-                    if (this.getUser().get('contactId')) {
-                        defaultHash['contactId'] = this.getUser().get('contactId');
-                        defaultHash['contactName'] = this.getUser().get('contactName');
-                    }
-                }
+                if (fillAssignedUser) {
+                    if (assignedUserField === 'assignedUsers') {
+                        defaultHash['assignedUsersIds'] = [this.getUser().id];
+                        defaultHash['assignedUsersNames'] = {};
 
-                if (this.model.hasField('parent') && this.model.getLinkType('parent') === 'belongsToParent') {
-                    if (!this.getConfig().get('b2cMode')) {
-                        if (this.getUser().get('accountId')) {
-                            if (~(this.model.getFieldParam('parent', 'entityList') || []).indexOf('Account')) {
-                                defaultHash['parentId'] = this.getUser().get('accountId');
-                                defaultHash['parentName'] = this.getUser().get('accountName');
-                                defaultHash['parentType'] = 'Account';
-                            }
-                        }
+                        defaultHash['assignedUsersNames'][this.getUser().id] = this.getUser().get('name');
                     }
                     else {
-                        if (this.getUser().get('contactId')) {
-                            if (~(this.model.getFieldParam('parent', 'entityList') || []).indexOf('Contact')) {
-                                defaultHash['contactId'] = this.getUser().get('contactId');
-                                defaultHash['parentName'] = this.getUser().get('contactName');
-                                defaultHash['parentType'] = 'Contact';
-                            }
+                        defaultHash['assignedUserId'] = this.getUser().id;
+
+                        defaultHash['assignedUserName'] = this.getUser().get('name');
+                    }
+                }
+            }
+
+            let defaultTeamId = this.getUser().get('defaultTeamId');
+
+            if (defaultTeamId) {
+                if (
+                    this.model.hasField('teams') &&
+                    !this.model.getFieldParam('teams', 'default') &&
+                    Espo.Utils
+                        .lowerCaseFirst(this.model.getLinkParam('teams', 'relationName') || '') === 'entityTeam'
+                ) {
+                    defaultHash['teamsIds'] = [defaultTeamId];
+                    defaultHash['teamsNames'] = {};
+                    defaultHash['teamsNames'][defaultTeamId] = this.getUser().get('defaultTeamName');
+                }
+            }
+        }
+
+        if (this.getUser().get('portalId')) {
+            if (
+                this.model.hasField('account') &&
+                ~['belongsTo', 'hasOne'].indexOf(this.model.getLinkType('account'))
+            ) {
+                if (this.getUser().get('accountId')) {
+                    defaultHash['accountId'] =  this.getUser().get('accountId');
+                    defaultHash['accountName'] = this.getUser().get('accountName');
+                }
+            }
+
+            if (
+                this.model.hasField('contact') &&
+                ~['belongsTo', 'hasOne'].indexOf(this.model.getLinkType('contact'))
+            ) {
+                if (this.getUser().get('contactId')) {
+                    defaultHash['contactId'] = this.getUser().get('contactId');
+                    defaultHash['contactName'] = this.getUser().get('contactName');
+                }
+            }
+
+            if (this.model.hasField('parent') && this.model.getLinkType('parent') === 'belongsToParent') {
+                if (!this.getConfig().get('b2cMode')) {
+                    if (this.getUser().get('accountId')) {
+                        if (~(this.model.getFieldParam('parent', 'entityList') || []).indexOf('Account')) {
+                            defaultHash['parentId'] = this.getUser().get('accountId');
+                            defaultHash['parentName'] = this.getUser().get('accountName');
+                            defaultHash['parentType'] = 'Account';
                         }
                     }
                 }
-
-                if (this.model.hasField('accounts') && this.model.getLinkType('accounts') === 'hasMany') {
-                    if (this.getUser().get('accountsIds')) {
-                        defaultHash['accountsIds'] = this.getUser().get('accountsIds');
-                        defaultHash['accountsNames'] = this.getUser().get('accountsNames');
-                    }
-                }
-
-                if (this.model.hasField('contacts') && this.model.getLinkType('contacts') === 'hasMany') {
+                else {
                     if (this.getUser().get('contactId')) {
-                        defaultHash['contactsIds'] = [this.getUser().get('contactId')];
-
-                        let names = {};
-
-                        names[this.getUser().get('contactId')] = this.getUser().get('contactName');
-                        defaultHash['contactsNames'] = names;
+                        if (~(this.model.getFieldParam('parent', 'entityList') || []).indexOf('Contact')) {
+                            defaultHash['contactId'] = this.getUser().get('contactId');
+                            defaultHash['parentName'] = this.getUser().get('contactName');
+                            defaultHash['parentType'] = 'Contact';
+                        }
                     }
                 }
             }
 
-            for (let attr in defaultHash) {
-                if (this.model.has(attr)) {
-                    delete defaultHash[attr];
+            if (this.model.hasField('accounts') && this.model.getLinkType('accounts') === 'hasMany') {
+                if (this.getUser().get('accountsIds')) {
+                    defaultHash['accountsIds'] = this.getUser().get('accountsIds');
+                    defaultHash['accountsNames'] = this.getUser().get('accountsNames');
                 }
             }
 
-            this.model.set(defaultHash, {silent: true});
-        },
+            if (this.model.hasField('contacts') && this.model.getLinkType('contacts') === 'hasMany') {
+                if (this.getUser().get('contactId')) {
+                    defaultHash['contactsIds'] = [this.getUser().get('contactId')];
 
-        /**
-         * @protected
-         * @param duplicates
-         */
-        errorHandlerDuplicate: function (duplicates) {},
+                    let names = {};
 
-        /**
-         * @private
-         */
-        _handleDependencyAttributes: function () {
-            Object.keys(this.dependencyDefs || {}).forEach((attr) => {
-                this._handleDependencyAttribute(attr);
+                    names[this.getUser().get('contactId')] = this.getUser().get('contactName');
+                    defaultHash['contactsNames'] = names;
+                }
+            }
+        }
+
+        for (let attr in defaultHash) {
+            if (this.model.has(attr)) {
+                delete defaultHash[attr];
+            }
+        }
+
+        this.model.set(defaultHash, {silent: true});
+    },
+
+    /**
+     * @protected
+     * @param duplicates
+     */
+    errorHandlerDuplicate: function (duplicates) {},
+
+    /**
+     * @private
+     */
+    _handleDependencyAttributes: function () {
+        Object.keys(this.dependencyDefs || {}).forEach((attr) => {
+            this._handleDependencyAttribute(attr);
+        });
+    },
+
+    /**
+     * @private
+     */
+    _handleDependencyAttribute: function (attr) {
+        let data = this.dependencyDefs[attr];
+        let value = this.model.get(attr);
+
+        if (value in (data.map || {})) {
+            (data.map[value] || []).forEach((item) => {
+                this._doDependencyAction(item);
             });
-        },
 
-        /**
-         * @private
-         */
-        _handleDependencyAttribute: function (attr) {
-            let data = this.dependencyDefs[attr];
-            let value = this.model.get(attr);
+            return;
+        }
 
-            if (value in (data.map || {})) {
-                (data.map[value] || []).forEach((item) => {
-                    this._doDependencyAction(item);
+        if ('default' in data) {
+            (data.default || []).forEach((item) => {
+                this._doDependencyAction(item);
+            });
+        }
+    },
+
+    /**
+     * @private
+     */
+    _doDependencyAction: function (data) {
+        let action = data.action;
+
+        let methodName = 'dependencyAction' + Espo.Utils.upperCaseFirst(action);
+
+        if (methodName in this && typeof this.methodName === 'function') {
+            this.methodName(data);
+
+            return;
+        }
+
+        let fieldList = data.fieldList || data.fields || [];
+        let panelList = data.panelList || data.panels || [];
+
+        switch (action) {
+            case 'hide':
+                panelList.forEach((item) => {
+                    this.hidePanel(item);
                 });
 
-                return;
-            }
-
-            if ('default' in data) {
-                (data.default || []).forEach((item) => {
-                    this._doDependencyAction(item);
+                fieldList.forEach((item) => {
+                    this.hideField(item);
                 });
+
+                break;
+
+            case 'show':
+                panelList.forEach((item) => {
+                    this.showPanel(item);
+                });
+
+                fieldList.forEach((item) => {
+                    this.showField(item);
+                });
+
+                break;
+
+            case 'setRequired':
+                fieldList.forEach((field) => {
+                    this.setFieldRequired(field);
+                });
+
+                break;
+
+            case 'setNotRequired':
+                fieldList.forEach((field) => {
+                    this.setFieldNotRequired(field);
+                });
+
+                break;
+
+            case 'setReadOnly':
+                fieldList.forEach((field) => {
+                    this.setFieldReadOnly(field);
+                });
+
+                break;
+
+            case 'setNotReadOnly':
+                fieldList.forEach((field) => {
+                    this.setFieldNotReadOnly(field);
+                });
+
+                break;
+        }
+    },
+
+    /**
+     * Create a field view.
+     *
+     * @protected
+     * @param {string} name A field name.
+     * @param {string|null} [view] A view name/path.
+     * @param {Object<string,*>} [params] Field params.
+     * @param {'detail'|'edit'} [mode='edit'] A mode.
+     * @param {boolean} [readOnly] Read-only.
+     * @param {Object<string,*>} [options] View options.
+     */
+    createField: function (name, view, params, mode, readOnly, options) {
+        let o = {
+            model: this.model,
+            mode: mode || 'edit',
+            el: this.options.el + ' .field[data-name="' + name + '"]',
+            defs: {
+                name: name,
+                params: params || {},
+            },
+        };
+
+        if (readOnly) {
+            o.readOnly = true;
+        }
+
+        view = view || this.model.getFieldParam(name, 'view');
+
+        if (!view) {
+            let type = this.model.getFieldType(name) || 'base';
+            view = this.getFieldManager().getViewName(type);
+        }
+
+        if (options) {
+            for (let param in options) {
+                o[param] = options[param];
             }
-        },
+        }
 
-        /**
-         * @private
-         */
-        _doDependencyAction: function (data) {
-            let action = data.action;
+        if (this.recordHelper.getFieldStateParam(name, 'hidden')) {
+            o.disabled = true;
+        }
 
-            let methodName = 'dependencyAction' + Espo.Utils.upperCaseFirst(action);
+        if (this.recordHelper.getFieldStateParam(name, 'readOnly')) {
+            o.readOnly = true;
+        }
 
-            if (methodName in this && typeof this.methodName === 'function') {
-                this.methodName(data);
+        if (this.recordHelper.getFieldStateParam(name, 'required') !== null) {
+            o.defs.params.required = this.recordHelper.getFieldStateParam(name, 'required');
+        }
 
-                return;
-            }
+        if (this.recordHelper.hasFieldOptionList(name)) {
+            o.customOptionList = this.recordHelper.getFieldOptionList(name);
+        }
 
-            let fieldList = data.fieldList || data.fields || [];
-            let panelList = data.panelList || data.panels || [];
+        let viewKey = name + 'Field';
 
-            switch (action) {
-                case 'hide':
-                    panelList.forEach((item) => {
-                        this.hidePanel(item);
-                    });
+        this.createView(viewKey, view, o);
 
-                    fieldList.forEach((item) => {
-                        this.hideField(item);
-                    });
+        if (!~this.fieldList.indexOf(name)) {
+            this.fieldList.push(name);
+        }
+    },
 
-                    break;
+    /**
+     * Get a currently focused field view.
+     *
+     * @return {?module:views/fields/base}
+     */
+    getFocusedFieldView: function () {
+        let $active = $(window.document.activeElement);
 
-                case 'show':
-                    panelList.forEach((item) => {
-                        this.showPanel(item);
-                    });
+        if (!$active.length) {
+            return null;
+        }
 
-                    fieldList.forEach((item) => {
-                        this.showField(item);
-                    });
+        let $field = $active.closest('.field');
 
-                    break;
+        if (!$field.length) {
+            return null;
+        }
 
-                case 'setRequired':
-                    fieldList.forEach((field) => {
-                        this.setFieldRequired(field);
-                    });
+        let name = $field.attr('data-name');
 
-                    break;
+        if (!name) {
+            return null;
+        }
 
-                case 'setNotRequired':
-                    fieldList.forEach((field) => {
-                        this.setFieldNotRequired(field);
-                    });
+        return this.getFieldView(name);
+    },
 
-                    break;
-
-                case 'setReadOnly':
-                    fieldList.forEach((field) => {
-                        this.setFieldReadOnly(field);
-                    });
-
-                    break;
-
-                case 'setNotReadOnly':
-                    fieldList.forEach((field) => {
-                        this.setFieldNotReadOnly(field);
-                    });
-
-                    break;
-            }
-        },
-
-        /**
-         * Create a field view.
-         *
-         * @protected
-         * @param {string} name A field name.
-         * @param {string|null} [view] A view name/path.
-         * @param {Object<string,*>} [params] Field params.
-         * @param {'detail'|'edit'} [mode='edit'] A mode.
-         * @param {boolean} [readOnly] Read-only.
-         * @param {Object<string,*>} [options] View options.
-         */
-        createField: function (name, view, params, mode, readOnly, options) {
-            let o = {
-                model: this.model,
-                mode: mode || 'edit',
-                el: this.options.el + ' .field[data-name="' + name + '"]',
-                defs: {
-                    name: name,
-                    params: params || {},
-                },
-            };
-
-            if (readOnly) {
-                o.readOnly = true;
-            }
-
-            view = view || this.model.getFieldParam(name, 'view');
-
-            if (!view) {
-                let type = this.model.getFieldType(name) || 'base';
-                view = this.getFieldManager().getViewName(type);
-            }
-
-            if (options) {
-                for (let param in options) {
-                    o[param] = options[param];
-                }
-            }
-
-            if (this.recordHelper.getFieldStateParam(name, 'hidden')) {
-                o.disabled = true;
-            }
-
-            if (this.recordHelper.getFieldStateParam(name, 'readOnly')) {
-                o.readOnly = true;
-            }
-
-            if (this.recordHelper.getFieldStateParam(name, 'required') !== null) {
-                o.defs.params.required = this.recordHelper.getFieldStateParam(name, 'required');
-            }
-
-            if (this.recordHelper.hasFieldOptionList(name)) {
-                o.customOptionList = this.recordHelper.getFieldOptionList(name);
-            }
-
-            let viewKey = name + 'Field';
-
-            this.createView(viewKey, view, o);
-
-            if (!~this.fieldList.indexOf(name)) {
-                this.fieldList.push(name);
-            }
-        },
-
-        /**
-         * Get a currently focused field view.
-         *
-         * @return {?module:views/fields/base.Class}
-         */
-        getFocusedFieldView: function () {
-            let $active = $(window.document.activeElement);
-
-            if (!$active.length) {
-                return null;
-            }
-
-            let $field = $active.closest('.field');
-
-            if (!$field.length) {
-                return null;
-            }
-
-            let name = $field.attr('data-name');
-
-            if (!name) {
-                return null;
-            }
-
-            return this.getFieldView(name);
-        },
-
-        /**
-         * Process exit.
-         *
-         * @param {string} [after] An exit parameter.
-         */
-        exit: function (after) {},
-    });
+    /**
+     * Process exit.
+     *
+     * @param {string} [after] An exit parameter.
+     */
+    exit: function (after) {},
 });
diff --git a/client/src/views/record/detail-bottom.js b/client/src/views/record/detail-bottom.js
index b3af03097a..08c58e958d 100644
--- a/client/src/views/record/detail-bottom.js
+++ b/client/src/views/record/detail-bottom.js
@@ -26,263 +26,258 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/detail-bottom', ['views/record/panels-container'], function (Dep) {
+/** @module views/record/detail-bottom */
+
+import Dep from 'views/record/panels-container';
+
+/**
+ * A detail-bottom record view.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/record/panels-container
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    template: 'record/bottom',
+
+    /** @inheritDoc */
+    mode: 'detail',
+    streamPanel: true,
+    relationshipPanels: true,
+    readOnly: false,
+    portalLayoutDisabled: false,
+    name: 'bottom',
+
+    /** @inheritDoc */
+    setupPanels: function () {
+        let scope = this.scope;
+
+        this.panelList = Espo.Utils.clone(
+            this.getMetadata()
+                .get(['clientDefs', scope, 'bottomPanels', this.type]) || this.panelList || []);
+
+        this.panelList.forEach(item => {
+            if ('index' in item) {
+                return;
+            }
+
+            if ('order' in item) {
+                item.index = item.order;
+            }
+        });
+
+        if (this.streamPanel && this.getMetadata().get(['scopes', scope, 'stream'])) {
+            this.setupStreamPanel();
+        }
+    },
 
     /**
-     * A detail-bottom record view.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/record/panels-container.Class
-     * @memberOf module:views/record/detail-bottom
+     * Set up a stream panel.
      */
-    return Dep.extend(/** @lends module:views/record/detail-bottom.Class# */{
+    setupStreamPanel: function () {
+        let streamAllowed = this.getAcl().checkModel(this.model, 'stream', true);
 
-        template: 'record/bottom',
+        if (streamAllowed === null) {
+            this.listenToOnce(this.model, 'sync', () => {
+                streamAllowed = this.getAcl().checkModel(this.model, 'stream', true);
 
-        mode: 'detail',
-
-        streamPanel: true,
-
-        relationshipPanels: true,
-
-        readOnly: false,
-
-        portalLayoutDisabled: false,
-
-        name: 'bottom',
-
-        /**
-         * @inheritDoc
-         */
-        setupPanels: function () {
-            let scope = this.scope;
-
-            this.panelList = Espo.Utils.clone(
-                this.getMetadata()
-                    .get(['clientDefs', scope, 'bottomPanels', this.type]) || this.panelList || []);
-
-            this.panelList.forEach(item => {
-                if ('index' in item) {
-                    return;
-                }
-
-                if ('order' in item) {
-                    item.index = item.order;
+                if (streamAllowed) {
+                    this.onPanelsReady(() => {
+                        this.showPanel('stream', 'acl');
+                    });
                 }
             });
+        }
 
-            if (this.streamPanel && this.getMetadata().get(['scopes', scope, 'stream'])) {
-                this.setupStreamPanel();
-            }
-        },
-
-        /**
-         * Set up a stream panel.
-         */
-        setupStreamPanel: function () {
-            let streamAllowed = this.getAcl().checkModel(this.model, 'stream', true);
-
-            if (streamAllowed === null) {
-                this.listenToOnce(this.model, 'sync', () => {
-                    streamAllowed = this.getAcl().checkModel(this.model, 'stream', true);
-
-                    if (streamAllowed) {
-                        this.onPanelsReady(() => {
-                            this.showPanel('stream', 'acl');
-                        });
-                    }
-                });
-            }
-            if (streamAllowed !== false) {
-                this.panelList.push({
-                    name: 'stream',
-                    label: 'Stream',
-                    view: this.getMetadata().get(['clientDefs', this.scope, 'streamPanelView']) || 'views/stream/panel',
-                    sticked: true,
-                    hidden: !streamAllowed,
-                    index: 2,
-                });
-
-                if (!streamAllowed) {
-                    this.recordHelper.setPanelStateParam('stream', 'hiddenAclLocked', true);
-                }
-            }
-        },
-
-        init: function () {
-            this.recordHelper = this.options.recordHelper;
-            this.scope = this.entityType = this.model.name;
-
-            this.readOnlyLocked = this.options.readOnlyLocked || this.readOnly;
-            this.readOnly = this.options.readOnly || this.readOnly;
-            this.inlineEditDisabled = this.options.inlineEditDisabled || this.inlineEditDisabled;
-
-            this.portalLayoutDisabled = this.options.portalLayoutDisabled || this.portalLayoutDisabled;
-
-            this.recordViewObject = this.options.recordViewObject;
-        },
-
-        setup: function () {
-            this.type = this.mode;
-
-            if ('type' in this.options) {
-                this.type = this.options.type;
-            }
-
-            this.panelList = [];
-
-            this.setupPanels();
-
-            this.wait(true);
-
-            Promise.all([
-                new Promise(resolve => {
-                    this.getHelper().layoutManager.get(
-                        this.scope,
-                        'bottomPanels' + Espo.Utils.upperCaseFirst(this.type),
-                        (layoutData) => {
-                            this.layoutData = layoutData;
-
-                            resolve();
-                        }
-                    );
-                })
-            ]).then(() => {
-                let panelNameList = [];
-
-                this.panelList = this.panelList.filter(p => {
-                    panelNameList.push(p.name);
-
-                    if (p.aclScope) {
-                        if (!this.getAcl().checkScope(p.aclScope)) {
-                            return;
-                        }
-                    }
-
-                    if (p.accessDataList) {
-                        if (!Espo.Utils.checkAccessDataList(p.accessDataList, this.getAcl(), this.getUser())) {
-                            return false;
-                        }
-                    }
-
-                    return true;
-                });
-
-                if (this.relationshipPanels) {
-                    let linkDefs = (this.model.defs || {}).links || {};
-
-                    if (this.layoutData) {
-                        for (let name in this.layoutData) {
-                            if (!linkDefs[name]) {
-                                continue;
-                            }
-
-                            let p = this.layoutData[name];
-
-                            if (!~panelNameList.indexOf(name) && !p.disabled) {
-                                this.addRelationshipPanel(name, p);
-                            }
-                        }
-                    }
-                }
-
-                this.panelList = this.panelList.map((p) => {
-                    let item = Espo.Utils.clone(p);
-
-                    if (this.recordHelper.getPanelStateParam(p.name, 'hidden') !== null) {
-                        item.hidden = this.recordHelper.getPanelStateParam(p.name, 'hidden');
-                    }
-                    else {
-                        this.recordHelper.setPanelStateParam(p.name, 'hidden', item.hidden || false);
-                    }
-
-                    return item;
-                });
-
-                this.panelList.forEach((item) => {
-                    item.actionsViewKey = item.name + 'Actions';
-                });
-
-                this.alterPanels();
-                this.setupPanelsFinal();
-                this.setupPanelViews();
-
-                this.wait(false);
+        if (streamAllowed !== false) {
+            this.panelList.push({
+                name: 'stream',
+                label: 'Stream',
+                view: this.getMetadata().get(['clientDefs', this.scope, 'streamPanelView']) || 'views/stream/panel',
+                sticked: true,
+                hidden: !streamAllowed,
+                index: 2,
             });
-        },
 
-        /**
-         * Set read-only.
-         */
-        setReadOnly: function () {
-            this.readOnly = true;
-        },
-
-        /**
-         * @private
-         */
-        addRelationshipPanel: function (name, item) {
-            let scope = this.scope;
-            let scopesDefs = this.getMetadata().get('scopes') || {};
-
-            let p;
-
-            if (typeof item === 'string' || item instanceof String) {
-                p = {name: item};
-            }
-            else {
-                p = Espo.Utils.clone(item || {});
+            if (!streamAllowed) {
+                this.recordHelper.setPanelStateParam('stream', 'hiddenAclLocked', true);
             }
+        }
+    },
 
-            p.name = p.name || name;
-            if (!p.name) {
-                return;
-            }
+    init: function () {
+        this.recordHelper = this.options.recordHelper;
+        this.scope = this.entityType = this.model.name;
 
-            if (typeof p.order === 'undefined') p.order = 5;
+        this.readOnlyLocked = this.options.readOnlyLocked || this.readOnly;
+        this.readOnly = this.options.readOnly || this.readOnly;
+        this.inlineEditDisabled = this.options.inlineEditDisabled || this.inlineEditDisabled;
 
-            name = p.name;
+        this.portalLayoutDisabled = this.options.portalLayoutDisabled || this.portalLayoutDisabled;
 
-            let links = (this.model.defs || {}).links || {};
+        this.recordViewObject = this.options.recordViewObject;
+    },
 
-            if (!(name in links)) {
-                return;
-            }
+    setup: function () {
+        this.type = this.mode;
 
-            let foreignScope = links[name].entity;
+        if ('type' in this.options) {
+            this.type = this.options.type;
+        }
 
-            if ((scopesDefs[foreignScope] || {}).disabled) {
-                return;
-            }
+        this.panelList = [];
 
-            if (!this.getAcl().check(foreignScope, 'read')) {
-                return;
-            }
+        this.setupPanels();
 
-            let defs = this.getMetadata().get(['clientDefs', scope, 'relationshipPanels', name]) || {};
-            defs = Espo.Utils.clone(defs);
+        this.wait(true);
 
-            for (let i in defs) {
-                if (i in p) {
-                    continue;
+        Promise.all([
+            new Promise(resolve => {
+                this.getHelper().layoutManager.get(
+                    this.scope,
+                    'bottomPanels' + Espo.Utils.upperCaseFirst(this.type),
+                    (layoutData) => {
+                        this.layoutData = layoutData;
+
+                        resolve();
+                    }
+                );
+            })
+        ]).then(() => {
+            let panelNameList = [];
+
+            this.panelList = this.panelList.filter(p => {
+                panelNameList.push(p.name);
+
+                if (p.aclScope) {
+                    if (!this.getAcl().checkScope(p.aclScope)) {
+                        return;
+                    }
                 }
 
-                p[i] = defs[i];
+                if (p.accessDataList) {
+                    if (!Espo.Utils.checkAccessDataList(p.accessDataList, this.getAcl(), this.getUser())) {
+                        return false;
+                    }
+                }
+
+                return true;
+            });
+
+            if (this.relationshipPanels) {
+                let linkDefs = (this.model.defs || {}).links || {};
+
+                if (this.layoutData) {
+                    for (let name in this.layoutData) {
+                        if (!linkDefs[name]) {
+                            continue;
+                        }
+
+                        let p = this.layoutData[name];
+
+                        if (!~panelNameList.indexOf(name) && !p.disabled) {
+                            this.addRelationshipPanel(name, p);
+                        }
+                    }
+                }
             }
 
-            if (!p.view) {
-                p.view = 'views/record/panels/relationship';
+            this.panelList = this.panelList.map((p) => {
+                let item = Espo.Utils.clone(p);
+
+                if (this.recordHelper.getPanelStateParam(p.name, 'hidden') !== null) {
+                    item.hidden = this.recordHelper.getPanelStateParam(p.name, 'hidden');
+                }
+                else {
+                    this.recordHelper.setPanelStateParam(p.name, 'hidden', item.hidden || false);
+                }
+
+                return item;
+            });
+
+            this.panelList.forEach((item) => {
+                item.actionsViewKey = item.name + 'Actions';
+            });
+
+            this.alterPanels();
+            this.setupPanelsFinal();
+            this.setupPanelViews();
+
+            this.wait(false);
+        });
+    },
+
+    /**
+     * Set read-only.
+     */
+    setReadOnly: function () {
+        this.readOnly = true;
+    },
+
+    /**
+     * @private
+     */
+    addRelationshipPanel: function (name, item) {
+        let scope = this.scope;
+        let scopesDefs = this.getMetadata().get('scopes') || {};
+
+        let p;
+
+        if (typeof item === 'string' || item instanceof String) {
+            p = {name: item};
+        }
+        else {
+            p = Espo.Utils.clone(item || {});
+        }
+
+        p.name = p.name || name;
+        if (!p.name) {
+            return;
+        }
+
+        if (typeof p.order === 'undefined') p.order = 5;
+
+        name = p.name;
+
+        let links = (this.model.defs || {}).links || {};
+
+        if (!(name in links)) {
+            return;
+        }
+
+        let foreignScope = links[name].entity;
+
+        if ((scopesDefs[foreignScope] || {}).disabled) {
+            return;
+        }
+
+        if (!this.getAcl().check(foreignScope, 'read')) {
+            return;
+        }
+
+        let defs = this.getMetadata().get(['clientDefs', scope, 'relationshipPanels', name]) || {};
+        defs = Espo.Utils.clone(defs);
+
+        for (let i in defs) {
+            if (i in p) {
+                continue;
             }
 
-            if (this.recordHelper.getPanelStateParam(p.name, 'hidden') !== null) {
-                p.hidden = this.recordHelper.getPanelStateParam(p.name, 'hidden');
-            }
-            else {
-                this.recordHelper.setPanelStateParam(p.name, 'hidden', p.hidden || false);
-            }
+            p[i] = defs[i];
+        }
 
-            this.panelList.push(p);
-        },
-    });
+        if (!p.view) {
+            p.view = 'views/record/panels/relationship';
+        }
+
+        if (this.recordHelper.getPanelStateParam(p.name, 'hidden') !== null) {
+            p.hidden = this.recordHelper.getPanelStateParam(p.name, 'hidden');
+        }
+        else {
+            this.recordHelper.setPanelStateParam(p.name, 'hidden', p.hidden || false);
+        }
+
+        this.panelList.push(p);
+    },
 });
diff --git a/client/src/views/record/detail-middle.js b/client/src/views/record/detail-middle.js
index 1c7a6bfaa3..b84c0d4817 100644
--- a/client/src/views/record/detail-middle.js
+++ b/client/src/views/record/detail-middle.js
@@ -26,233 +26,233 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/detail-middle', ['view'], function (Dep) {
+/** @module views/record/detail-middle */
+
+import Dep from 'view';
+
+/**
+ * A detail-middle record view.
+ *
+ * @class
+ * @name Class
+ * @extends module:view
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    init: function () {
+        this.recordHelper = this.options.recordHelper;
+        this.scope = this.model.name;
+    },
+
+    data: function () {
+        return {
+            hiddenPanels: this.recordHelper.getHiddenPanels(),
+            hiddenFields: this.recordHelper.getHiddenFields(),
+        };
+    },
 
     /**
-     * A detail-middle record view.
+     * Show a panel.
      *
-     * @class
-     * @name Class
-     * @extends module:view.Class
-     * @memberOf module:views/record/detail-middle
+     * @param {string} name
      */
-    return Dep.extend(/** @lends module:views/record/detail-middle.Class# */{
+    showPanel: function (name) {
+        if (this.recordHelper.getPanelStateParam(name, 'hiddenLocked')) {
+            return;
+        }
 
-        init: function () {
-            this.recordHelper = this.options.recordHelper;
-            this.scope = this.model.name;
-        },
+        this.showPanelInternal(name);
 
-        data: function () {
-            return {
-                hiddenPanels: this.recordHelper.getHiddenPanels(),
-                hiddenFields: this.recordHelper.getHiddenFields(),
-            };
-        },
+        this.recordHelper.setPanelStateParam(name, 'hidden', false);
+    },
 
-        /**
-         * Show a panel.
-         *
-         * @param {string} name
-         */
-        showPanel: function (name) {
-            if (this.recordHelper.getPanelStateParam(name, 'hiddenLocked')) {
-                return;
-            }
+    /**
+     * @private
+     * @param {string} name
+     */
+    showPanelInternal: function (name) {
+        if (this.isRendered()) {
+            this.$el.find('.panel[data-name="'+name+'"]').removeClass('hidden');
+        }
 
-            this.showPanelInternal(name);
+        let wasShown = !this.recordHelper.getPanelStateParam(name, 'hidden');
 
-            this.recordHelper.setPanelStateParam(name, 'hidden', false);
-        },
+        if (
+            !wasShown &&
+            this.options.panelFieldListMap &&
+            this.options.panelFieldListMap[name]
+        ) {
+            this.options.panelFieldListMap[name].forEach(field => {
+                var view = this.getFieldView(field);
 
-        /**
-         * @private
-         * @param {string} name
-         */
-        showPanelInternal: function (name) {
-            if (this.isRendered()) {
-                this.$el.find('.panel[data-name="'+name+'"]').removeClass('hidden');
-            }
-
-            let wasShown = !this.recordHelper.getPanelStateParam(name, 'hidden');
-
-            if (
-                !wasShown &&
-                this.options.panelFieldListMap &&
-                this.options.panelFieldListMap[name]
-            ) {
-                this.options.panelFieldListMap[name].forEach(field => {
-                    var view = this.getFieldView(field);
-
-                    if (!view) {
-                        return;
-                    }
-
-                    view.reRender();
-                });
-            }
-        },
-
-        /**
-         * Hide a panel.
-         *
-         * @param {string} name
-         */
-        hidePanel: function (name) {
-            this.hidePanelInternal(name);
-
-            this.recordHelper.setPanelStateParam(name, 'hidden', true);
-        },
-
-        /**
-         * @private
-         * @param {string} name
-         */
-        hidePanelInternal: function (name) {
-            if (this.isRendered()) {
-                this.$el.find('.panel[data-name="'+name+'"]').addClass('hidden');
-            }
-        },
-
-        /**
-         * Hide a field.
-         *
-         * @param {string} name
-         */
-        hideField: function (name) {
-            this.recordHelper.setFieldStateParam(name, 'hidden', true);
-
-            var processHtml = () => {
-                var fieldView = this.getFieldView(name);
-
-                if (fieldView) {
-                    var $field = fieldView.$el;
-                    var $cell = $field.closest('.cell[data-name="' + name + '"]');
-                    var $label = $cell.find('label.control-label[data-name="' + name + '"]');
-
-                    $field.addClass('hidden');
-                    $label.addClass('hidden');
-                    $cell.addClass('hidden-cell');
+                if (!view) {
+                    return;
                 }
-                else {
-                    this.$el.find('.cell[data-name="' + name + '"]').addClass('hidden-cell');
-                    this.$el.find('.field[data-name="' + name + '"]').addClass('hidden');
-                    this.$el.find('label.control-label[data-name="' + name + '"]').addClass('hidden');
-                }
-            };
 
-            if (this.isRendered()) {
-                processHtml();
+                view.reRender();
+            });
+        }
+    },
+
+    /**
+     * Hide a panel.
+     *
+     * @param {string} name
+     */
+    hidePanel: function (name) {
+        this.hidePanelInternal(name);
+
+        this.recordHelper.setPanelStateParam(name, 'hidden', true);
+    },
+
+    /**
+     * @private
+     * @param {string} name
+     */
+    hidePanelInternal: function (name) {
+        if (this.isRendered()) {
+            this.$el.find('.panel[data-name="'+name+'"]').addClass('hidden');
+        }
+    },
+
+    /**
+     * Hide a field.
+     *
+     * @param {string} name
+     */
+    hideField: function (name) {
+        this.recordHelper.setFieldStateParam(name, 'hidden', true);
+
+        var processHtml = () => {
+            var fieldView = this.getFieldView(name);
+
+            if (fieldView) {
+                var $field = fieldView.$el;
+                var $cell = $field.closest('.cell[data-name="' + name + '"]');
+                var $label = $cell.find('label.control-label[data-name="' + name + '"]');
+
+                $field.addClass('hidden');
+                $label.addClass('hidden');
+                $cell.addClass('hidden-cell');
             }
             else {
-                this.once('after:render', () => {
-                    processHtml();
-                });
+                this.$el.find('.cell[data-name="' + name + '"]').addClass('hidden-cell');
+                this.$el.find('.field[data-name="' + name + '"]').addClass('hidden');
+                this.$el.find('label.control-label[data-name="' + name + '"]').addClass('hidden');
             }
+        };
 
-            var view = this.getFieldView(name);
-
-            if (view) {
-                view.setDisabled();
-            }
-        },
-
-        /**
-         * Show a field.
-         *
-         * @param {string} name
-         */
-        showField: function (name) {
-            if (this.recordHelper.getFieldStateParam(name, 'hiddenLocked')) {
-                return;
-            }
-
-            this.recordHelper.setFieldStateParam(name, 'hidden', false);
-
-            var processHtml = () => {
-                var fieldView = this.getFieldView(name);
-
-                if (fieldView) {
-                    var $field = fieldView.$el;
-                    var $cell = $field.closest('.cell[data-name="' + name + '"]');
-                    var $label = $cell.find('label.control-label[data-name="' + name + '"]');
-
-                    $field.removeClass('hidden');
-                    $label.removeClass('hidden');
-                    $cell.removeClass('hidden-cell');
-                }
-                else {
-                    this.$el.find('.cell[data-name="' + name + '"]').removeClass('hidden-cell');
-                    this.$el.find('.field[data-name="' + name + '"]').removeClass('hidden');
-                    this.$el.find('label.control-label[data-name="' + name + '"]').removeClass('hidden');
-                }
-            };
-
-            if (this.isRendered()) {
+        if (this.isRendered()) {
+            processHtml();
+        }
+        else {
+            this.once('after:render', () => {
                 processHtml();
+            });
+        }
+
+        var view = this.getFieldView(name);
+
+        if (view) {
+            view.setDisabled();
+        }
+    },
+
+    /**
+     * Show a field.
+     *
+     * @param {string} name
+     */
+    showField: function (name) {
+        if (this.recordHelper.getFieldStateParam(name, 'hiddenLocked')) {
+            return;
+        }
+
+        this.recordHelper.setFieldStateParam(name, 'hidden', false);
+
+        var processHtml = () => {
+            var fieldView = this.getFieldView(name);
+
+            if (fieldView) {
+                var $field = fieldView.$el;
+                var $cell = $field.closest('.cell[data-name="' + name + '"]');
+                var $label = $cell.find('label.control-label[data-name="' + name + '"]');
+
+                $field.removeClass('hidden');
+                $label.removeClass('hidden');
+                $cell.removeClass('hidden-cell');
             }
             else {
-                this.once('after:render', () => {
-                    processHtml();
-                });
+                this.$el.find('.cell[data-name="' + name + '"]').removeClass('hidden-cell');
+                this.$el.find('.field[data-name="' + name + '"]').removeClass('hidden');
+                this.$el.find('label.control-label[data-name="' + name + '"]').removeClass('hidden');
             }
+        };
 
-            var view = this.getFieldView(name);
+        if (this.isRendered()) {
+            processHtml();
+        }
+        else {
+            this.once('after:render', () => {
+                processHtml();
+            });
+        }
 
-            if (view) {
-                if (!view.disabledLocked) {
-                    view.setNotDisabled();
-                }
+        var view = this.getFieldView(name);
+
+        if (view) {
+            if (!view.disabledLocked) {
+                view.setNotDisabled();
             }
-        },
+        }
+    },
 
-        /**
-         * @deprecated Use `getFieldViews`.
-         */
-        getFields: function () {
-            return this.getFieldViews();
-        },
+    /**
+     * @deprecated Use `getFieldViews`.
+     */
+    getFields: function () {
+        return this.getFieldViews();
+    },
 
-        /**
-         * Get field views.
-         *
-         * @return {{string: module:views/fields/base.Class}}
-         */
-        getFieldViews: function () {
-            var fieldViews = {};
+    /**
+     * Get field views.
+     *
+     * @return {{string: module:views/fields/base}}
+     */
+    getFieldViews: function () {
+        var fieldViews = {};
 
-            for (var viewKey in this.nestedViews) {
-                var name = this.nestedViews[viewKey].name;
+        for (var viewKey in this.nestedViews) {
+            var name = this.nestedViews[viewKey].name;
 
-                fieldViews[name] = this.nestedViews[viewKey];
-            }
+            fieldViews[name] = this.nestedViews[viewKey];
+        }
 
-            return fieldViews;
-        },
+        return fieldViews;
+    },
 
-        /**
-         * Get a field view.
-         *
-         * @param {string} name A field name.
-         * @return {module:views/fields/base.Class}
-         */
-        getFieldView: function (name) {
-            return (this.getFieldViews() || {})[name];
-        },
+    /**
+     * Get a field view.
+     *
+     * @param {string} name A field name.
+     * @return {module:views/fields/base}
+     */
+    getFieldView: function (name) {
+        return (this.getFieldViews() || {})[name];
+    },
 
-        /**
-         * For backward compatibility.
-         *
-         * @todo Remove.
-         */
-        getView: function (name) {
-            var view = Dep.prototype.getView.call(this, name);
+    /**
+     * For backward compatibility.
+     *
+     * @todo Remove.
+     */
+    getView: function (name) {
+        var view = Dep.prototype.getView.call(this, name);
 
-            if (!view) {
-                view = this.getFieldView(name);
-            }
+        if (!view) {
+            view = this.getFieldView(name);
+        }
 
-            return view;
-        },
-    });
+        return view;
+    },
 });
diff --git a/client/src/views/record/detail-side.js b/client/src/views/record/detail-side.js
index 49888b5452..d20a65e0f9 100644
--- a/client/src/views/record/detail-side.js
+++ b/client/src/views/record/detail-side.js
@@ -26,258 +26,256 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/detail-side', ['views/record/panels-container'], function (Dep) {
+/** @module views/record/detail-side */
+
+import Dep from 'views/record/panels-container';
+
+/**
+ * A detail-side record view.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/record/panels-container
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    template: 'record/side',
+
+    /** @inheritDoc */
+    mode: 'detail',
+    readOnly: false,
+    inlineEditDisabled: false,
+    name: 'side',
+    defaultPanel: true,
 
     /**
-     * A detail-side record view.
+     * A panel list.
      *
-     * @class
-     * @name Class
-     * @extends module:views/record/panels-container.Class
-     * @memberOf module:views/record/detail-side
+     * @protected
+     * @type {module:views/record/panels-container~panel[]}
      */
-    return Dep.extend(/** @lends module:views/record/detail-side.Class# */{
+    panelList: [],
 
-        template: 'record/side',
+    /**
+     * A default panel.
+     *
+     * @type {module:views/record/panels-container~panel}
+     */
+    defaultPanelDefs: {
+        name: 'default',
+        label: false,
+        view: 'views/record/panels/default-side',
+        isForm: true,
+        options: {
+            fieldList: [
+                {
+                    name: ':assignedUser'
+                },
+                {
+                    name: 'teams'
+                },
+            ],
+        }
+    },
 
-        mode: 'detail',
+    init: function () {
+        this.panelList = this.options.panelList || this.panelList;
+        this.scope = this.entityType = this.options.model.name;
 
-        readOnly: false,
+        this.recordHelper = this.options.recordHelper;
 
-        inlineEditDisabled: false,
+        this.panelList = Espo.Utils.clone(this.panelList);
 
-        name: 'side',
+        this.readOnlyLocked = this.options.readOnlyLocked || this.readOnly;
+        this.readOnly = this.options.readOnly || this.readOnly;
+        this.inlineEditDisabled = this.options.inlineEditDisabled || this.inlineEditDisabled;
 
-        defaultPanel: true,
+        this.recordViewObject = this.options.recordViewObject;
+    },
 
-        /**
-         * A panel list.
-         *
-         * @protected
-         * @type {module:views/record/panels-container~panel[]}
-         */
-        panelList: [],
+    /**
+     * @inheritDoc
+     */
+    setupPanels: function () {},
 
-        /**
-         * A default panel.
-         *
-         * @type {module:views/record/panels-container~panel}
-         */
-        defaultPanelDefs: {
-            name: 'default',
-            label: false,
-            view: 'views/record/panels/default-side',
-            isForm: true,
-            options: {
-                fieldList: [
-                    {
-                        name: ':assignedUser'
-                    },
-                    {
-                        name: 'teams'
-                    },
-                ],
-            }
-        },
+    setup: function () {
+        this.type = this.mode;
 
-        init: function () {
-            this.panelList = this.options.panelList || this.panelList;
-            this.scope = this.entityType = this.options.model.name;
+        if ('type' in this.options) {
+            this.type = this.options.type;
+        }
 
-            this.recordHelper = this.options.recordHelper;
+        this.setupPanels();
 
-            this.panelList = Espo.Utils.clone(this.panelList);
+        if (!this.additionalPanelsDisabled) {
+            var additionalPanels = this.getMetadata()
+                .get(['clientDefs', this.scope, 'sidePanels', this.type]) || [];
 
-            this.readOnlyLocked = this.options.readOnlyLocked || this.readOnly;
-            this.readOnly = this.options.readOnly || this.readOnly;
-            this.inlineEditDisabled = this.options.inlineEditDisabled || this.inlineEditDisabled;
+            additionalPanels.forEach((panel) => {
+                this.panelList.push(panel);
+            });
+        }
 
-            this.recordViewObject = this.options.recordViewObject;
-        },
-
-        /**
-         * @inheritDoc
-         */
-        setupPanels: function () {},
-
-        setup: function () {
-            this.type = this.mode;
-            if ('type' in this.options) {
-                this.type = this.options.type;
+        this.panelList = this.panelList.filter((p) => {
+            if (p.aclScope) {
+                if (!this.getAcl().checkScope(p.aclScope)) {
+                    return;
+                }
             }
 
-            this.setupPanels();
-
-            if (!this.additionalPanelsDisabled) {
-                var additionalPanels = this.getMetadata()
-                    .get(['clientDefs', this.scope, 'sidePanels', this.type]) || [];
-
-                additionalPanels.forEach((panel) => {
-                    this.panelList.push(panel);
-                });
+            if (p.accessDataList) {
+                if (!Espo.Utils.checkAccessDataList(p.accessDataList, this.getAcl(), this.getUser())) {
+                    return false;
+                }
             }
 
-            this.panelList = this.panelList.filter((p) => {
-                if (p.aclScope) {
-                    if (!this.getAcl().checkScope(p.aclScope)) {
+            return true;
+        });
+
+        this.panelList = this.panelList.map((p) => {
+            var item = Espo.Utils.clone(p);
+
+            if (this.recordHelper.getPanelStateParam(p.name, 'hidden') !== null) {
+                item.hidden = this.recordHelper.getPanelStateParam(p.name, 'hidden');
+            } else {
+                this.recordHelper.setPanelStateParam(p.name, 'hidden', item.hidden || false);
+            }
+
+            return item;
+        });
+
+        this.panelList.forEach((item) => {
+            item.actionsViewKey = item.name + 'Actions';
+        });
+
+        this.wait(
+            Promise.all([
+                new Promise((resolve) => {
+                    this.getHelper().layoutManager.get(
+                        this.scope,
+                        'sidePanels' + Espo.Utils.upperCaseFirst(this.type),
+                        (layoutData) => {
+                            this.layoutData = layoutData;
+
+                            resolve();
+                        });
+                }),
+                new Promise((resolve) => {
+                    if (
+                        !this.defaultPanel ||
+                        this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanelDisabled']) ||
+                        this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanel', this.type]) ||
+                        this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanelFieldLists', this.type]) ||
+                        this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanelFieldList'])
+                    ) {
+                        resolve();
+
                         return;
                     }
-                }
 
-                if (p.accessDataList) {
-                    if (!Espo.Utils.checkAccessDataList(p.accessDataList, this.getAcl(), this.getUser())) {
-                        return false;
-                    }
-                }
+                    this.getHelper()
+                        .layoutManager
+                        .get(this.scope, 'defaultSidePanel', (layoutData) => {
+                            this.defaultSidePanelLayoutData = layoutData;
 
-                return true;
-            });
-
-            this.panelList = this.panelList.map((p) => {
-                var item = Espo.Utils.clone(p);
-
-                if (this.recordHelper.getPanelStateParam(p.name, 'hidden') !== null) {
-                    item.hidden = this.recordHelper.getPanelStateParam(p.name, 'hidden');
-                } else {
-                    this.recordHelper.setPanelStateParam(p.name, 'hidden', item.hidden || false);
-                }
-
-                return item;
-            });
-
-            this.panelList.forEach((item) => {
-                item.actionsViewKey = item.name + 'Actions';
-            });
-
-            this.wait(
-                Promise.all([
-                    new Promise((resolve) => {
-                        this.getHelper().layoutManager.get(
-                            this.scope,
-                            'sidePanels' + Espo.Utils.upperCaseFirst(this.type),
-                            (layoutData) => {
-                                this.layoutData = layoutData;
-
-                                resolve();
-                            });
-                    }),
-                    new Promise((resolve) => {
-                        if (
-                            !this.defaultPanel ||
-                            this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanelDisabled']) ||
-                            this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanel', this.type]) ||
-                            this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanelFieldLists', this.type]) ||
-                            this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanelFieldList'])
-                        ) {
                             resolve();
+                        });
+                }),
+            ]).then(() => {
+                if (this.defaultPanel) {
+                    this.setupDefaultPanel();
+                }
 
-                            return;
+                this.alterPanels();
+                this.setupPanelsFinal();
+                this.setupPanelViews();
+            })
+        );
+    },
+
+    /**
+     * Set up a default panel.
+     *
+     * @protected
+     */
+    setupDefaultPanel: function () {
+        var met = false;
+
+        this.panelList.forEach((item) => {
+            if (item.name === 'default') {
+                met = true;
+            }
+        });
+
+        if (met) {
+            return;
+        }
+
+        var defaultPanelDefs = this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanel', this.type]);
+
+        if (defaultPanelDefs === false) {
+            return;
+        }
+
+        if (this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanelDisabled'])) {
+            return;
+        }
+
+        defaultPanelDefs = defaultPanelDefs || this.defaultPanelDefs;
+
+        if (!defaultPanelDefs) {
+            return;
+        }
+
+        defaultPanelDefs = Espo.Utils.cloneDeep(defaultPanelDefs);
+
+        defaultPanelDefs.view = this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanelView']) ||
+            defaultPanelDefs.view;
+
+        var fieldList = this.getMetadata()
+            .get(['clientDefs', this.scope, 'defaultSidePanelFieldLists', this.type]);
+
+        if (!fieldList) {
+            fieldList = this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanelFieldList']);
+        }
+
+        if (!fieldList && this.defaultSidePanelLayoutData) {
+            fieldList = this.defaultSidePanelLayoutData;
+        }
+
+        if (fieldList) {
+            defaultPanelDefs.options = defaultPanelDefs.options || {};
+            defaultPanelDefs.options.fieldList = fieldList;
+        }
+
+        if (defaultPanelDefs.options.fieldList && defaultPanelDefs.options.fieldList.length) {
+            defaultPanelDefs.options.fieldList.forEach((item, i) => {
+                if (typeof item !== 'object') {
+                    item = {
+                        name: item
+                    };
+
+                    defaultPanelDefs.options.fieldList[i] = item;
+                }
+
+                if (item.name === ':assignedUser') {
+                    if (this.model.hasField('assignedUsers')) {
+                        item.name = 'assignedUsers';
+
+                        if (!this.model.getFieldParam('assignedUsers', 'view')) {
+                            item.view = 'views/fields/assigned-users';
                         }
-
-                        this.getHelper()
-                            .layoutManager
-                            .get(this.scope, 'defaultSidePanel', (layoutData) => {
-                                this.defaultSidePanelLayoutData = layoutData;
-
-                                resolve();
-                            });
-                    }),
-                ]).then(() => {
-                    if (this.defaultPanel) {
-                        this.setupDefaultPanel();
                     }
-
-                    this.alterPanels();
-                    this.setupPanelsFinal();
-                    this.setupPanelViews();
-                })
-            );
-        },
-
-        /**
-         * Set up a default panel.
-         *
-         * @protected
-         */
-        setupDefaultPanel: function () {
-            var met = false;
-
-            this.panelList.forEach((item) => {
-                if (item.name === 'default') {
-                    met = true;
+                    else if (this.model.hasField('assignedUser')) {
+                        item.name = 'assignedUser';
+                    }
+                    else {
+                        defaultPanelDefs.options.fieldList[i] = {};
+                    }
                 }
             });
+        }
 
-            if (met) {
-                return;
-            }
-
-            var defaultPanelDefs = this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanel', this.type]);
-
-            if (defaultPanelDefs === false) {
-                return;
-            }
-
-            if (this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanelDisabled'])) {
-                return;
-            }
-
-            defaultPanelDefs = defaultPanelDefs || this.defaultPanelDefs;
-
-            if (!defaultPanelDefs) {
-                return;
-            }
-
-            defaultPanelDefs = Espo.Utils.cloneDeep(defaultPanelDefs);
-
-            defaultPanelDefs.view = this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanelView']) ||
-                defaultPanelDefs.view;
-
-            var fieldList = this.getMetadata()
-                .get(['clientDefs', this.scope, 'defaultSidePanelFieldLists', this.type]);
-
-            if (!fieldList) {
-                fieldList = this.getMetadata().get(['clientDefs', this.scope, 'defaultSidePanelFieldList']);
-            }
-
-            if (!fieldList && this.defaultSidePanelLayoutData) {
-                fieldList = this.defaultSidePanelLayoutData;
-            }
-
-            if (fieldList) {
-                defaultPanelDefs.options = defaultPanelDefs.options || {};
-                defaultPanelDefs.options.fieldList = fieldList;
-            }
-
-            if (defaultPanelDefs.options.fieldList && defaultPanelDefs.options.fieldList.length) {
-                defaultPanelDefs.options.fieldList.forEach((item, i) => {
-                    if (typeof item !== 'object') {
-                        item = {
-                            name: item
-                        };
-
-                        defaultPanelDefs.options.fieldList[i] = item;
-                    }
-
-                    if (item.name === ':assignedUser') {
-                        if (this.model.hasField('assignedUsers')) {
-                            item.name = 'assignedUsers';
-
-                            if (!this.model.getFieldParam('assignedUsers', 'view')) {
-                                item.view = 'views/fields/assigned-users';
-                            }
-                        }
-                        else if (this.model.hasField('assignedUser')) {
-                            item.name = 'assignedUser';
-                        }
-                        else {
-                            defaultPanelDefs.options.fieldList[i] = {};
-                        }
-                    }
-                });
-            }
-
-            this.panelList.unshift(defaultPanelDefs);
-        },
-    });
+        this.panelList.unshift(defaultPanelDefs);
+    },
 });
diff --git a/client/src/views/record/detail.js b/client/src/views/record/detail.js
index 92294c9ac9..b4b7f335f6 100644
--- a/client/src/views/record/detail.js
+++ b/client/src/views/record/detail.js
@@ -26,3990 +26,3985 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/detail', ['views/record/base', 'view-record-helper', 'helpers/action-item-setup'],
-function (Dep, ViewRecordHelper, ActionItemSetup) {
+/** @module views/record/detail */
+
+import Dep from "views/record/base";
+import ViewRecordHelper from "view-record-helper";
+import ActionItemSetup from "helpers/action-item-setup";
+
+/**
+ * A detail record view.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/record/base
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    /** @inheritDoc */
+    template: 'record/detail',
+
+    /** @inheritDoc */
+    type: 'detail',
 
     /**
-     * A detail record view.
+     * Not used.
      *
-     * @class
-     * @name Class
-     * @extends module:views/record/base.Class
-     * @memberOf module:views/record/detail
+     * @deprecated
+     * @protected
      */
-    return Dep.extend(/** @lends module:views/record/detail.Class# */{
+    name: 'detail',
 
-        /**
-         * @inheritDoc
-         */
-        template: 'record/detail',
+    /**
+     * A layout name. Can be overridden by an option parameter.
+     *
+     * @protected
+     * @type {string}
+     */
+    layoutName: 'detail',
 
-        /**
-         * @inheritDoc
-         */
-        type: 'detail',
+    /**
+     * Panel definitions.
+     *
+     * @typedef module:views/record/detail~panelDefs
+     * @type Object
+     * @property {string} [label] A translatable label.
+     * @property {string} [customLabel] A custom label.
+     * @property {string} [name] A name. Useful to be able to show/hide by a name.
+     * @property {'default'|'success'|'danger'|'warning'} [style] A style.
+     * @property {boolean} [tabBreak] Is a tab-break.
+     * @property {string} [tabLabel] A tab label. If starts with `$`, a translation
+     *   of the `tabs` category is used.
+     * @property {module:views/record/detail~rowDefs[]} [rows] Rows.
+     */
 
-        /**
-         * Not used.
-         *
-         * @deprecated
-         * @protected
-         */
-        name: 'detail',
+    /**
+     * A row.
+     *
+     * @typedef module:views/record/detail~rowDefs
+     * @type Array<module:views/record/detail~cellDefs|false>
+     */
 
-        /**
-         * A layout name. Can be overridden by an option parameter.
-         *
-         * @protected
-         * @type {string}
-         */
-        layoutName: 'detail',
+    /**
+     * Cell definitions.
+     *
+     * @typedef module:views/record/detail~cellDefs
+     * @type Object
+     * @property {string} [name] A name (usually a field name).
+     * @property {string} [view] An overridden field view name.
+     * @property {string} [type] An overridden field type.
+     * @property {boolean} [readOnly] Read-only.
+     * @property {boolean} [inlineEditDisabled ] Disable inline edit.
+     * @property {Object.<string, *>} [params] Overridden field parameters.
+     * @property {Object.<string, *>} [options] Field view options.
+     * @property {string} [labelText] A label text (not-translatable).
+     * @property {boolean} [noLabel] No label.
+     * @property {string} [label] A translatable label (using the `fields` category).
+     * @property {1|2|3|4} [span] A width.
+     */
 
-        /**
-         * Panel definitions.
-         *
-         * @typedef module:views/record/detail~panelDefs
-         * @type Object
-         * @property {string} [label] A translatable label.
-         * @property {string} [customLabel] A custom label.
-         * @property {string} [name] A name. Useful to be able to show/hide by a name.
-         * @property {'default'|'success'|'danger'|'warning'} [style] A style.
-         * @property {boolean} [tabBreak] Is a tab-break.
-         * @property {string} [tabLabel] A tab label. If starts with `$`, a translation
-         *   of the `tabs` category is used.
-         * @property {module:views/record/detail~rowDefs[]} [rows] Rows.
-         */
+    /**
+     * A layout. If null, then will be loaded from the backend (using the `layoutName` value).
+     * Can be overridden by an option parameter.
+     *
+     * @protected
+     * @type {module:views/record/detail~panelDefs[]|null}
+     */
+    detailLayout: null,
 
-        /**
-         * A row.
-         *
-         * @typedef module:views/record/detail~rowDefs
-         * @type Array<module:views/record/detail~cellDefs|false>
-         */
+    /**
+     * A fields mode.
+     *
+     * @protected
+     * @type {'detail'|'edit'|'list'}
+     */
+    fieldsMode: 'detail',
 
-        /**
-         * Cell definitions.
-         *
-         * @typedef module:views/record/detail~cellDefs
-         * @type Object
-         * @property {string} [name] A name (usually a field name).
-         * @property {string} [view] An overridden field view name.
-         * @property {string} [type] An overridden field type.
-         * @property {boolean} [readOnly] Read-only.
-         * @property {boolean} [inlineEditDisabled ] Disable inline edit.
-         * @property {Object.<string, *>} [params] Overridden field parameters.
-         * @property {Object.<string, *>} [options] Field view options.
-         * @property {string} [labelText] A label text (not-translatable).
-         * @property {boolean} [noLabel] No label.
-         * @property {string} [label] A translatable label (using the `fields` category).
-         * @property {1|2|3|4} [span] A width.
-         */
+    /**
+     * A current mode. Only for reading.
+     *
+     * @protected
+     * @type {'detail'|'edit'}
+     */
+    mode: 'detail',
 
-        /**
-         * A layout. If null, then will be loaded from the backend (using the `layoutName` value).
-         * Can be overridden by an option parameter.
-         *
-         * @protected
-         * @type {module:views/record/detail~panelDefs[]|null}
-         */
-        detailLayout: null,
+    /**
+     * @private
+     */
+    gridLayout: null,
 
-        /**
-         * A fields mode.
-         *
-         * @protected
-         * @type {'detail'|'edit'|'list'}
-         */
-        fieldsMode: 'detail',
+    /**
+     * Disable buttons. Can be overridden by an option parameter.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    buttonsDisabled: false,
 
-        /**
-         * A current mode. Only for reading.
-         *
-         * @protected
-         * @type {'detail'|'edit'}
-         */
-        mode: 'detail',
+    /**
+     * Is record new. Only for reading.
+     *
+     * @protected
+     */
+    isNew: false,
 
-        /**
-         * @private
-         */
-        gridLayout: null,
+    /**
+     * A button. Handled by an `action{Name}` method.
+     *
+     * @typedef module:views/record/detail~button
+     *
+     * @property {string} name A name.
+     * @property {string} [label] A label.
+     * @property {string} [labelTranslation] A label translation path.
+     * @property {string} [html] An HTML.
+     * @property {string} [text] A text.
+     * @property {'default'|'danger'|'success'|'warning'} [style] A style.
+     * @property {boolean} [hidden] Hidden.
+     * @property {string} [title] A title (not translatable).
+     * @property {boolean} [disabled] Disabled.
+     */
 
-        /**
-         * Disable buttons. Can be overridden by an option parameter.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        buttonsDisabled: false,
+    /**
+     * A dropdown item. Handled by an `action{Name}` method.
+     *
+     * @typedef module:views/record/detail~dropdownItem
+     *
+     * @property {string} name A name.
+     * @property {string} [label] A label.
+     * @property {string} [labelTranslation] A label translation path.
+     * @property {string} [html] An HTML.
+     * @property {string} [text] A text.
+     * @property {boolean} [hidden] Hidden.
+     * @property {Object.<string,string>} [data] Data attributes.
+     * @property {string} [title] A title (not translatable).
+     * @property {boolean} [disabled] Disabled.
+     */
 
-        /**
-         * Is record new. Only for reading.
-         *
-         * @protected
-         */
-        isNew: false,
-
-        /**
-         * A button. Handled by an `action{Name}` method.
-         *
-         * @typedef module:views/record/detail~button
-         *
-         * @property {string} name A name.
-         * @property {string} [label] A label.
-         * @property {string} [labelTranslation] A label translation path.
-         * @property {string} [html] An HTML.
-         * @property {string} [text] A text.
-         * @property {'default'|'danger'|'success'|'warning'} [style] A style.
-         * @property {boolean} [hidden] Hidden.
-         * @property {string} [title] A title (not translatable).
-         * @property {boolean} [disabled] Disabled.
-         */
-
-        /**
-         * A dropdown item. Handled by an `action{Name}` method.
-         *
-         * @typedef module:views/record/detail~dropdownItem
-         *
-         * @property {string} name A name.
-         * @property {string} [label] A label.
-         * @property {string} [labelTranslation] A label translation path.
-         * @property {string} [html] An HTML.
-         * @property {string} [text] A text.
-         * @property {boolean} [hidden] Hidden.
-         * @property {Object.<string,string>} [data] Data attributes.
-         * @property {string} [title] A title (not translatable).
-         * @property {boolean} [disabled] Disabled.
-         */
-
-        /**
-         * A button list.
-         *
-         * @protected
-         * @type {module:views/record/detail~button[]}
-         */
-        buttonList: [
-            {
-                name: 'edit',
-                label: 'Edit',
-                title: 'Ctrl+Space',
-            },
-        ],
-
-        /**
-         * A dropdown item list.
-         *
-         * @protected
-         * @type {module:views/record/detail~dropdownItem[]}
-         */
-        dropdownItemList: [
-            {
-                name: 'delete',
-                label: 'Remove',
-            },
-        ],
-
-        /**
-         * A button list for edit mode.
-         *
-         * @protected
-         * @type {module:views/record/detail~button[]}
-         */
-        buttonEditList: [
-            {
-                name: 'save',
-                label: 'Save',
-                style: 'primary',
-                edit: true,
-                title: 'Ctrl+Enter',
-            },
-            {
-                name: 'cancelEdit',
-                label: 'Cancel',
-                edit: true,
-                title: 'Esc',
-            },
-        ],
-
-        /**
-         * A dropdown item list for edit mode.
-         *
-         * @protected
-         * @type {module:views/record/detail~dropdownItem[]}
-         */
-        dropdownEditItemList: [],
-
-        /**
-         * All action items disabled;
-         *
-         * @protected
-         */
-        allActionItemsDisabled: false,
-
-        /**
-         * A DOM element ID. Only for reading.
-         *
-         * @private
-         * @type {string}
-         */
-        id: null,
-
-        /**
-         * A return-URL. Can be overridden by an option parameter.
-         *
-         * @protected
-         * @type {string|null}
-         */
-        returnUrl: null,
-
-        /**
-         * A return dispatch params. Can be overridden by an option parameter.
-         *
-         * @protected
-         * @type {Object|null}
-         */
-        returnDispatchParams: null,
-
-        /**
-         * A middle view name.
-         *
-         * @protected
-         */
-        middleView: 'views/record/detail-middle',
-
-        /**
-         * A side view name.
-         *
-         * @protected
-         */
-        sideView: 'views/record/detail-side',
-
-        /**
-         * A bottom view name.
-         *
-         * @protected
-         */
-        bottomView: 'views/record/detail-bottom',
-
-        /**
-         * Disable a side view. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        sideDisabled: false,
-
-        /**
-         * Disable a bottom view. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        bottomDisabled: false,
-
-        /**
-         * @protected
-         */
-        gridLayoutType: 'record',
-
-        /**
-         * Disable edit mode. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        editModeDisabled: false,
-
-        /**
-         * Disable navigate (prev, next) buttons. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        navigateButtonsDisabled: false,
-
-        /**
-         * Read-only. Can be overridden by an option parameter.
-         */
-        readOnly: false,
-
-        /**
-         * Middle view expanded to full width (no side view).
-         * Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        isWide: false,
-
-        /**
-         * Enable a duplicate action.
-         *
-         * @protected
-         */
-        duplicateAction: true,
-
-        /**
-         * Enable a self-assign action.
-         *
-         * @protected
-         */
-        selfAssignAction: false,
-
-        /**
-         * Enable a print-pdf action.
-         *
-         * @protected
-         */
-        printPdfAction: true,
-
-        /**
-         * Enable a convert-currency action.
-         *
-         * @protected
-         */
-        convertCurrencyAction: true,
-
-        /**
-         * Enable a save-and-continue-editing action.
-         *
-         * @protected
-         */
-        saveAndContinueEditingAction: true,
-
-        /**
-         * Disable the inline-edit. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        inlineEditDisabled: false,
-
-        /**
-         * Disable a portal layout usage. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        portalLayoutDisabled: false,
-
-        /**
-         * A panel soft-locked type.
-         *
-         * @typedef {'default'|'acl'|'delimiter'|'dynamicLogic'
-         * } module:views/record/detail~panelSoftLockedType
-         */
-
-        /**
-         * @private
-         * @type {module:views/record/detail~panelSoftLockedType[]}
-         */
-        panelSoftLockedTypeList: [
-            'default',
-            'acl',
-            'delimiter',
-            'dynamicLogic',
-        ],
-
-        /**
-         * Dynamic logic. Can be overridden by an option parameter.
-         *
-         * @protected
-         * @type {Object}
-         */
-        dynamicLogicDefs: {},
-
-        /**
-         * Disable confirm leave-out processing.
-         *
-         * @protected
-         */
-        confirmLeaveDisabled: false,
-
-        /**
-         * @protected
-         */
-        setupHandlerType: 'record/detail',
-
-        /**
-         * @protected
-         */
-        currentTab: 0,
-
-        /**
-         * @protected
-         * @type {Object.<string,*>|null}
-         */
-        middlePanelDefs: null,
-
-        /**
-         * @protected
-         * @type {Object.<string,*>[]|null}
-         */
-        middlePanelDefsList: null,
-
-        /**
-         * @protected
-         * @type {JQuery|null}
-         */
-        $middle: null,
-
-        /**
-         * @protected
-         * @type {JQuery|null}
-         */
-        $bottom: null,
-
-        /**
-         * @private
-         * @type {JQuery|null}
-         */
-        $detailButtonContainer: null,
-
-        /**
-         * A Ctrl+Enter shortcut action.
-         *
-         * @protected
-         * @type {?string}
-         */
-        shortcutKeyCtrlEnterAction: 'save',
-
-        /**
-         * A shortcut-key => action map.
-         *
-         * @protected
-         * @type {?Object.<string,string|function (JQueryKeyEventObject): void>}
-         */
-        shortcutKeys: {
-            'Control+Enter': function (e) {
-                this.handleShortcutKeyCtrlEnter(e);
-            },
-            'Control+Alt+Enter': function (e) {
-                this.handleShortcutKeyCtrlAltEnter(e);
-            },
-            'Control+KeyS': function (e) {
-                this.handleShortcutKeyCtrlS(e);
-            },
-            'Control+Space': function (e) {
-                this.handleShortcutKeyCtrlSpace(e);
-            },
-            'Escape': function (e) {
-                this.handleShortcutKeyEscape(e);
-            },
-            'Control+Backslash': function (e) {
-                this.handleShortcutKeyControlBackslash(e);
-            },
-            'Control+ArrowLeft': function (e) {
-                this.handleShortcutKeyControlArrowLeft(e);
-            },
-            'Control+ArrowRight': function (e) {
-                this.handleShortcutKeyControlArrowRight(e);
-            },
+    /**
+     * A button list.
+     *
+     * @protected
+     * @type {module:views/record/detail~button[]}
+     */
+    buttonList: [
+        {
+            name: 'edit',
+            label: 'Edit',
+            title: 'Ctrl+Space',
         },
+    ],
 
-        /**
-         * @inheritDoc
-         */
-        events: {
-            'click .button-container .action': function (e) {
-                Espo.Utils.handleAction(this, e);
-            },
-            /** @this module:views/record/detail.Class */
-            'click [data-action="showMoreDetailPanels"]': function () {
-                this.showMoreDetailPanels();
-            },
-            /** @this module:views/record/detail.Class */
-            'click .middle-tabs > button': function (e) {
-                let tab = parseInt($(e.currentTarget).attr('data-tab'));
-
-                this.selectTab(tab);
-            },
+    /**
+     * A dropdown item list.
+     *
+     * @protected
+     * @type {module:views/record/detail~dropdownItem[]}
+     */
+    dropdownItemList: [
+        {
+            name: 'delete',
+            label: 'Remove',
         },
+    ],
 
-        /**
-         * An `edit` action.
-         */
-        actionEdit: function () {
-            if (!this.editModeDisabled) {
-                this.setEditMode();
-
-                this.focusOnFirstDiv();
-                $(window).scrollTop(0);
-
-                return;
-            }
-
-            let options = {
-                id: this.model.id,
-                model: this.model,
-            };
-
-            if (this.options.rootUrl) {
-                options.rootUrl = this.options.rootUrl;
-            }
-
-            this.getRouter().navigate('#' + this.scope + '/edit/' + this.model.id, {trigger: false});
-            this.getRouter().dispatch(this.scope, 'edit', options);
+    /**
+     * A button list for edit mode.
+     *
+     * @protected
+     * @type {module:views/record/detail~button[]}
+     */
+    buttonEditList: [
+        {
+            name: 'save',
+            label: 'Save',
+            style: 'primary',
+            edit: true,
+            title: 'Ctrl+Enter',
         },
-
-        actionDelete: function () {
-            this.delete();
+        {
+            name: 'cancelEdit',
+            label: 'Cancel',
+            edit: true,
+            title: 'Esc',
         },
+    ],
 
-        /**
-         * A `save` action.
-         *
-         * @param {{options?: module:views/record/base~saveOptions}} [data] Data.
-         */
-        actionSave: function (data) {
-            data = data || {};
+    /**
+     * A dropdown item list for edit mode.
+     *
+     * @protected
+     * @type {module:views/record/detail~dropdownItem[]}
+     */
+    dropdownEditItemList: [],
 
-            let modeBeforeSave = this.mode;
+    /**
+     * All action items disabled;
+     *
+     * @protected
+     */
+    allActionItemsDisabled: false,
 
-            this.save(data.options)
-                .catch(reason => {
-                    if (modeBeforeSave === this.MODE_EDIT && reason === 'error') {
-                        this.setEditMode();
-                    }
-                });
+    /**
+     * A DOM element ID. Only for reading.
+     *
+     * @private
+     * @type {string}
+     */
+    id: null,
 
-            if (!this.lastSaveCancelReason || this.lastSaveCancelReason === 'notModified') {
-                this.setDetailMode();
+    /**
+     * A return-URL. Can be overridden by an option parameter.
+     *
+     * @protected
+     * @type {string|null}
+     */
+    returnUrl: null,
 
-                this.focusOnFirstDiv();
-                $(window).scrollTop(0);
-            }
+    /**
+     * A return dispatch params. Can be overridden by an option parameter.
+     *
+     * @protected
+     * @type {Object|null}
+     */
+    returnDispatchParams: null,
+
+    /**
+     * A middle view name.
+     *
+     * @protected
+     */
+    middleView: 'views/record/detail-middle',
+
+    /**
+     * A side view name.
+     *
+     * @protected
+     */
+    sideView: 'views/record/detail-side',
+
+    /**
+     * A bottom view name.
+     *
+     * @protected
+     */
+    bottomView: 'views/record/detail-bottom',
+
+    /**
+     * Disable a side view. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    sideDisabled: false,
+
+    /**
+     * Disable a bottom view. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    bottomDisabled: false,
+
+    /**
+     * @protected
+     */
+    gridLayoutType: 'record',
+
+    /**
+     * Disable edit mode. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    editModeDisabled: false,
+
+    /**
+     * Disable navigate (prev, next) buttons. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    navigateButtonsDisabled: false,
+
+    /**
+     * Read-only. Can be overridden by an option parameter.
+     */
+    readOnly: false,
+
+    /**
+     * Middle view expanded to full width (no side view).
+     * Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    isWide: false,
+
+    /**
+     * Enable a duplicate action.
+     *
+     * @protected
+     */
+    duplicateAction: true,
+
+    /**
+     * Enable a self-assign action.
+     *
+     * @protected
+     */
+    selfAssignAction: false,
+
+    /**
+     * Enable a print-pdf action.
+     *
+     * @protected
+     */
+    printPdfAction: true,
+
+    /**
+     * Enable a convert-currency action.
+     *
+     * @protected
+     */
+    convertCurrencyAction: true,
+
+    /**
+     * Enable a save-and-continue-editing action.
+     *
+     * @protected
+     */
+    saveAndContinueEditingAction: true,
+
+    /**
+     * Disable the inline-edit. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    inlineEditDisabled: false,
+
+    /**
+     * Disable a portal layout usage. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    portalLayoutDisabled: false,
+
+    /**
+     * A panel soft-locked type.
+     *
+     * @typedef {'default'|'acl'|'delimiter'|'dynamicLogic'
+     * } module:views/record/detail~panelSoftLockedType
+     */
+
+    /**
+     * @private
+     * @type {module:views/record/detail~panelSoftLockedType[]}
+     */
+    panelSoftLockedTypeList: [
+        'default',
+        'acl',
+        'delimiter',
+        'dynamicLogic',
+    ],
+
+    /**
+     * Dynamic logic. Can be overridden by an option parameter.
+     *
+     * @protected
+     * @type {Object}
+     */
+    dynamicLogicDefs: {},
+
+    /**
+     * Disable confirm leave-out processing.
+     *
+     * @protected
+     */
+    confirmLeaveDisabled: false,
+
+    /**
+     * @protected
+     */
+    setupHandlerType: 'record/detail',
+
+    /**
+     * @protected
+     */
+    currentTab: 0,
+
+    /**
+     * @protected
+     * @type {Object.<string,*>|null}
+     */
+    middlePanelDefs: null,
+
+    /**
+     * @protected
+     * @type {Object.<string,*>[]|null}
+     */
+    middlePanelDefsList: null,
+
+    /**
+     * @protected
+     * @type {JQuery|null}
+     */
+    $middle: null,
+
+    /**
+     * @protected
+     * @type {JQuery|null}
+     */
+    $bottom: null,
+
+    /**
+     * @private
+     * @type {JQuery|null}
+     */
+    $detailButtonContainer: null,
+
+    /**
+     * A Ctrl+Enter shortcut action.
+     *
+     * @protected
+     * @type {?string}
+     */
+    shortcutKeyCtrlEnterAction: 'save',
+
+    /**
+     * A shortcut-key => action map.
+     *
+     * @protected
+     * @type {?Object.<string,string|function (JQueryKeyEventObject): void>}
+     */
+    shortcutKeys: {
+        'Control+Enter': function (e) {
+            this.handleShortcutKeyCtrlEnter(e);
         },
+        'Control+Alt+Enter': function (e) {
+            this.handleShortcutKeyCtrlAltEnter(e);
+        },
+        'Control+KeyS': function (e) {
+            this.handleShortcutKeyCtrlS(e);
+        },
+        'Control+Space': function (e) {
+            this.handleShortcutKeyCtrlSpace(e);
+        },
+        'Escape': function (e) {
+            this.handleShortcutKeyEscape(e);
+        },
+        'Control+Backslash': function (e) {
+            this.handleShortcutKeyControlBackslash(e);
+        },
+        'Control+ArrowLeft': function (e) {
+            this.handleShortcutKeyControlArrowLeft(e);
+        },
+        'Control+ArrowRight': function (e) {
+            this.handleShortcutKeyControlArrowRight(e);
+        },
+    },
 
-        actionCancelEdit: function () {
-            this.cancelEdit();
+    /**
+     * @inheritDoc
+     */
+    events: {
+        'click .button-container .action': function (e) {
+            Espo.Utils.handleAction(this, e);
+        },
+        /** @this module:views/record/detail */
+        'click [data-action="showMoreDetailPanels"]': function () {
+            this.showMoreDetailPanels();
+        },
+        /** @this module:views/record/detail */
+        'click .middle-tabs > button': function (e) {
+            let tab = parseInt($(e.currentTarget).attr('data-tab'));
+
+            this.selectTab(tab);
+        },
+    },
+
+    /**
+     * An `edit` action.
+     */
+    actionEdit: function () {
+        if (!this.editModeDisabled) {
+            this.setEditMode();
 
             this.focusOnFirstDiv();
             $(window).scrollTop(0);
-        },
 
-        focusOnFirstDiv: function () {
-            let element = this.$el.find('> div').get(0);
+            return;
+        }
 
-            if (element) {
-                element.focus({preventScroll: true});
-            }
-        },
+        let options = {
+            id: this.model.id,
+            model: this.model,
+        };
 
-        /**
-         * A `save-and-continue-editing` action.
-         */
-        actionSaveAndContinueEditing: function (data) {
-            data = data || {};
+        if (this.options.rootUrl) {
+            options.rootUrl = this.options.rootUrl;
+        }
 
-            this.save(data.options)
-                .catch(() => {});
-        },
+        this.getRouter().navigate('#' + this.scope + '/edit/' + this.model.id, {trigger: false});
+        this.getRouter().dispatch(this.scope, 'edit', options);
+    },
 
-        /**
-         * A `self-assign` action.
-         */
-        actionSelfAssign: function () {
-            let attributes = {
-                assignedUserId: this.getUser().id,
-                assignedUserName: this.getUser().get('name'),
-            };
+    actionDelete: function () {
+        this.delete();
+    },
 
-            if ('getSelfAssignAttributes' in this) {
-                let attributesAdditional = this.getSelfAssignAttributes();
+    /**
+     * A `save` action.
+     *
+     * @param {{options?: module:views/record/base~saveOptions}} [data] Data.
+     */
+    actionSave: function (data) {
+        data = data || {};
 
-                if (attributesAdditional) {
-                    for (let i in attributesAdditional) {
-                        attributes[i] = attributesAdditional[i];
-                    }
+        let modeBeforeSave = this.mode;
+
+        this.save(data.options)
+            .catch(reason => {
+                if (modeBeforeSave === this.MODE_EDIT && reason === 'error') {
+                    this.setEditMode();
                 }
-            }
-
-            this.model
-                .save(attributes, {patch: true})
-                .then(() => {
-                    Espo.Ui.success(this.translate('Self-Assigned'));
-                });
-        },
-
-        /**
-         * A `convert-currency` action.
-         */
-        actionConvertCurrency: function () {
-            this.createView('modalConvertCurrency', 'views/modals/convert-currency', {
-                entityType: this.entityType,
-                model: this.model,
-            }, view => {
-                view.render();
-
-                this.listenToOnce(view, 'after:update', attributes => {
-                    let isChanged = false;
-
-                    for (let a in attributes) {
-                        if (attributes[a] !== this.model.get(a)) {
-                            isChanged = true;
-
-                            break;
-                        }
-                    }
-
-                    if (!isChanged) {
-                        Espo.Ui.warning(this.translate('notUpdated', 'messages'));
-
-                        return;
-                    }
-
-                    this.model
-                        .fetch()
-                        .then(() => {
-                            Espo.Ui.success(this.translate('done', 'messages'));
-                        });
-                });
             });
-        },
 
-        /**
-         * Compose attribute values for a self-assignment.
-         *
-         * @protected
-         * @return {Object.<string,*>|null}
-         */
-        getSelfAssignAttributes: function () {
-            return null;
-        },
+        if (!this.lastSaveCancelReason || this.lastSaveCancelReason === 'notModified') {
+            this.setDetailMode();
 
-        /**
-         * Set up action items.
-         *
-         * @protected
-         */
-        setupActionItems: function () {
-            if (this.model.isNew()) {
-                this.isNew = true;
+            this.focusOnFirstDiv();
+            $(window).scrollTop(0);
+        }
+    },
 
-                this.removeActionItem('delete');
-            }
-            else if (this.getMetadata().get(['clientDefs', this.scope, 'removeDisabled'])) {
-                this.removeActionItem('delete');
-            }
+    actionCancelEdit: function () {
+        this.cancelEdit();
 
-            if (this.duplicateAction) {
-                if (
-                    this.getAcl().check(this.entityType, 'create') &&
-                    !this.getMetadata().get(['clientDefs', this.scope, 'duplicateDisabled'])
-                ) {
-                    this.addDropdownItem({
-                        'label': 'Duplicate',
-                        'name': 'duplicate',
-                    });
+        this.focusOnFirstDiv();
+        $(window).scrollTop(0);
+    },
+
+    focusOnFirstDiv: function () {
+        let element = this.$el.find('> div').get(0);
+
+        if (element) {
+            element.focus({preventScroll: true});
+        }
+    },
+
+    /**
+     * A `save-and-continue-editing` action.
+     */
+    actionSaveAndContinueEditing: function (data) {
+        data = data || {};
+
+        this.save(data.options)
+            .catch(() => {});
+    },
+
+    /**
+     * A `self-assign` action.
+     */
+    actionSelfAssign: function () {
+        let attributes = {
+            assignedUserId: this.getUser().id,
+            assignedUserName: this.getUser().get('name'),
+        };
+
+        if ('getSelfAssignAttributes' in this) {
+            let attributesAdditional = this.getSelfAssignAttributes();
+
+            if (attributesAdditional) {
+                for (let i in attributesAdditional) {
+                    attributes[i] = attributesAdditional[i];
                 }
             }
+        }
 
-            if (this.selfAssignAction) {
-                if (
-                    this.getAcl().check(this.entityType, 'edit') &&
-                    !~this.getAcl().getScopeForbiddenFieldList(this.entityType).indexOf('assignedUser') &&
-                    !this.getUser().isPortal()
-                ) {
-                    if (this.model.has('assignedUserId')) {
-                        this.dropdownItemList.push({
-                            'label': 'Self-Assign',
-                            'name': 'selfAssign',
-                            'hidden': !!this.model.get('assignedUserId')
-                        });
+        this.model
+            .save(attributes, {patch: true})
+            .then(() => {
+                Espo.Ui.success(this.translate('Self-Assigned'));
+            });
+    },
 
-                        this.listenTo(this.model, 'change:assignedUserId', () => {
-                            if (!this.model.get('assignedUserId')) {
-                                this.showActionItem('selfAssign');
-                            }
-                            else {
-                                this.hideActionItem('selfAssign');
-                            }
-                        });
+    /**
+     * A `convert-currency` action.
+     */
+    actionConvertCurrency: function () {
+        this.createView('modalConvertCurrency', 'views/modals/convert-currency', {
+            entityType: this.entityType,
+            model: this.model,
+        }, view => {
+            view.render();
+
+            this.listenToOnce(view, 'after:update', attributes => {
+                let isChanged = false;
+
+                for (let a in attributes) {
+                    if (attributes[a] !== this.model.get(a)) {
+                        isChanged = true;
+
+                        break;
                     }
                 }
-            }
 
-            if (this.type === this.TYPE_DETAIL && this.printPdfAction) {
-                let printPdfAction = true;
+                if (!isChanged) {
+                    Espo.Ui.warning(this.translate('notUpdated', 'messages'));
 
-                if (
-                    !~(this.getHelper().getAppParam('templateEntityTypeList') || [])
-                        .indexOf(this.entityType)
-                ) {
-                    printPdfAction = false;
+                    return;
                 }
 
-                if (printPdfAction) {
+                this.model
+                    .fetch()
+                    .then(() => {
+                        Espo.Ui.success(this.translate('done', 'messages'));
+                    });
+            });
+        });
+    },
+
+    /**
+     * Compose attribute values for a self-assignment.
+     *
+     * @protected
+     * @return {Object.<string,*>|null}
+     */
+    getSelfAssignAttributes: function () {
+        return null;
+    },
+
+    /**
+     * Set up action items.
+     *
+     * @protected
+     */
+    setupActionItems: function () {
+        if (this.model.isNew()) {
+            this.isNew = true;
+
+            this.removeActionItem('delete');
+        }
+        else if (this.getMetadata().get(['clientDefs', this.scope, 'removeDisabled'])) {
+            this.removeActionItem('delete');
+        }
+
+        if (this.duplicateAction) {
+            if (
+                this.getAcl().check(this.entityType, 'create') &&
+                !this.getMetadata().get(['clientDefs', this.scope, 'duplicateDisabled'])
+            ) {
+                this.addDropdownItem({
+                    'label': 'Duplicate',
+                    'name': 'duplicate',
+                });
+            }
+        }
+
+        if (this.selfAssignAction) {
+            if (
+                this.getAcl().check(this.entityType, 'edit') &&
+                !~this.getAcl().getScopeForbiddenFieldList(this.entityType).indexOf('assignedUser') &&
+                !this.getUser().isPortal()
+            ) {
+                if (this.model.has('assignedUserId')) {
                     this.dropdownItemList.push({
-                        'label': 'Print to PDF',
-                        'name': 'printPdf',
+                        'label': 'Self-Assign',
+                        'name': 'selfAssign',
+                        'hidden': !!this.model.get('assignedUserId')
+                    });
+
+                    this.listenTo(this.model, 'change:assignedUserId', () => {
+                        if (!this.model.get('assignedUserId')) {
+                            this.showActionItem('selfAssign');
+                        }
+                        else {
+                            this.hideActionItem('selfAssign');
+                        }
                     });
                 }
             }
+        }
 
-            if (this.type === this.TYPE_DETAIL && this.convertCurrencyAction) {
-                if (
-                    this.getAcl().check(this.entityType, 'edit') &&
-                    !this.getMetadata().get(['clientDefs', this.scope, 'convertCurrencyDisabled'])
-                ) {
-                    let currencyFieldList = this.getFieldManager()
-                        .getEntityTypeFieldList(this.entityType, {
-                            type: 'currency',
-                            acl: 'edit',
-                        });
-
-                    if (currencyFieldList.length) {
-                        this.addDropdownItem({
-                            label: 'Convert Currency',
-                            name: 'convertCurrency',
-                        });
-                    }
-                }
-            }
+        if (this.type === this.TYPE_DETAIL && this.printPdfAction) {
+            let printPdfAction = true;
 
             if (
-                this.type === this.TYPE_DETAIL &&
-                this.getMetadata().get(['scopes', this.scope, 'hasPersonalData'])
+                !~(this.getHelper().getAppParam('templateEntityTypeList') || [])
+                    .indexOf(this.entityType)
             ) {
-                if (this.getAcl().get('dataPrivacyPermission') === 'yes') {
-                    this.dropdownItemList.push({
-                        'label': 'View Personal Data',
-                        'name': 'viewPersonalData'
-                    });
-                }
+                printPdfAction = false;
             }
 
-            if (this.type === this.TYPE_DETAIL && this.getMetadata().get(['scopes', this.scope, 'stream'])) {
-                this.addDropdownItem({
-                    label: 'View Followers',
-                    name: 'viewFollowers'
+            if (printPdfAction) {
+                this.dropdownItemList.push({
+                    'label': 'Print to PDF',
+                    'name': 'printPdf',
                 });
             }
+        }
 
-            if (this.type === this.TYPE_DETAIL) {
-                /** @var {module:helpers/action-item-setup.Class} */
-                let actionItemSetup = new ActionItemSetup(
-                    this.getMetadata(),
-                    this.getHelper(),
-                    this.getAcl(),
-                    this.getLanguage()
-                );
+        if (this.type === this.TYPE_DETAIL && this.convertCurrencyAction) {
+            if (
+                this.getAcl().check(this.entityType, 'edit') &&
+                !this.getMetadata().get(['clientDefs', this.scope, 'convertCurrencyDisabled'])
+            ) {
+                let currencyFieldList = this.getFieldManager()
+                    .getEntityTypeFieldList(this.entityType, {
+                        type: 'currency',
+                        acl: 'edit',
+                    });
 
-                actionItemSetup.setup(
-                    this,
-                    this.type,
-                    promise => this.wait(promise),
-                    item => this.addDropdownItem(item),
-                    name => this.showActionItem(name),
-                    name => this.hideActionItem(name)
-                );
-
-                if (this.saveAndContinueEditingAction) {
-                    this.dropdownEditItemList.push({
-                        name: 'saveAndContinueEditing',
-                        label: 'Save & Continue Editing',
-                        title: 'Ctrl+S',
+                if (currencyFieldList.length) {
+                    this.addDropdownItem({
+                        label: 'Convert Currency',
+                        name: 'convertCurrency',
                     });
                 }
             }
-        },
+        }
 
-        /**
-         * Disable action items.
-         */
-        disableActionItems: function () {
-            this.disableButtons();
-        },
+        if (
+            this.type === this.TYPE_DETAIL &&
+            this.getMetadata().get(['scopes', this.scope, 'hasPersonalData'])
+        ) {
+            if (this.getAcl().get('dataPrivacyPermission') === 'yes') {
+                this.dropdownItemList.push({
+                    'label': 'View Personal Data',
+                    'name': 'viewPersonalData'
+                });
+            }
+        }
 
-        /**
-         * Enable action items.
-         */
-        enableActionItems: function () {
-            this.enableButtons();
-        },
+        if (this.type === this.TYPE_DETAIL && this.getMetadata().get(['scopes', this.scope, 'stream'])) {
+            this.addDropdownItem({
+                label: 'View Followers',
+                name: 'viewFollowers'
+            });
+        }
 
-        /**
-         * Hide a button or dropdown action item.
-         *
-         * @param {string} name A name.
-         */
-        hideActionItem: function (name) {
-            for (let item of this.buttonList) {
-                if (item.name === name) {
-                    item.hidden = true;
+        if (this.type === this.TYPE_DETAIL) {
+            let actionItemSetup = new ActionItemSetup(
+                this.getMetadata(),
+                this.getHelper(),
+                this.getAcl(),
+                this.getLanguage()
+            );
 
-                    break;
-                }
+            actionItemSetup.setup(
+                this,
+                this.type,
+                promise => this.wait(promise),
+                item => this.addDropdownItem(item),
+                name => this.showActionItem(name),
+                name => this.hideActionItem(name)
+            );
+
+            if (this.saveAndContinueEditingAction) {
+                this.dropdownEditItemList.push({
+                    name: 'saveAndContinueEditing',
+                    label: 'Save & Continue Editing',
+                    title: 'Ctrl+S',
+                });
+            }
+        }
+    },
+
+    /**
+     * Disable action items.
+     */
+    disableActionItems: function () {
+        this.disableButtons();
+    },
+
+    /**
+     * Enable action items.
+     */
+    enableActionItems: function () {
+        this.enableButtons();
+    },
+
+    /**
+     * Hide a button or dropdown action item.
+     *
+     * @param {string} name A name.
+     */
+    hideActionItem: function (name) {
+        for (let item of this.buttonList) {
+            if (item.name === name) {
+                item.hidden = true;
+
+                break;
+            }
+        }
+
+        for (let item of this.dropdownItemList) {
+            if (item.name === name) {
+                item.hidden = true;
+
+                break;
+            }
+        }
+
+        for (let item of this.dropdownEditItemList) {
+            if (item.name === name) {
+                item.hidden = true;
+
+                break;
+            }
+        }
+
+        for (let item of this.buttonEditList) {
+            if (item.name === name) {
+                item.hidden = true;
+
+                break;
+            }
+        }
+
+        if (this.isRendered()) {
+            this.$detailButtonContainer
+                .find('li > .action[data-action="'+name+'"]')
+                .parent()
+                .addClass('hidden');
+
+            this.$detailButtonContainer
+                .find('button.action[data-action="'+name+'"]')
+                .addClass('hidden');
+
+            if (this.isDropdownItemListEmpty()) {
+                this.$dropdownItemListButton.addClass('hidden');
             }
 
-            for (let item of this.dropdownItemList) {
-                if (item.name === name) {
-                    item.hidden = true;
-
-                    break;
-                }
+            if (this.isDropdownEditItemListEmpty()) {
+                this.$dropdownEditItemListButton.addClass('hidden');
             }
 
-            for (let item of this.dropdownEditItemList) {
-                if (item.name === name) {
-                    item.hidden = true;
+            this.adjustButtons();
+        }
+    },
 
-                    break;
-                }
+    /**
+     * Show a button or dropdown action item.
+     *
+     * @param {string} name A name.
+     */
+    showActionItem: function (name) {
+        for (let item of this.buttonList) {
+            if (item.name === name) {
+                item.hidden = false;
+
+                break;
+            }
+        }
+
+        for (let item of this.dropdownItemList) {
+            if (item.name === name) {
+                item.hidden = false;
+
+                break;
+            }
+        }
+
+        for (let item of this.dropdownEditItemList) {
+            if (item.name === name) {
+                item.hidden = false;
+
+                break;
+            }
+        }
+
+        for (let item of this.buttonEditList) {
+            if (item.name === name) {
+                item.hidden = false;
+
+                break;
+            }
+        }
+
+        if (this.isRendered()) {
+            this.$detailButtonContainer
+                .find('li > .action[data-action="'+name+'"]')
+                .parent()
+                .removeClass('hidden');
+
+            this.$detailButtonContainer
+                .find('button.action[data-action="'+name+'"]')
+                .removeClass('hidden');
+
+            if (!this.isDropdownItemListEmpty()) {
+                this.$dropdownItemListButton.removeClass('hidden');
             }
 
-            for (let item of this.buttonEditList) {
-                if (item.name === name) {
-                    item.hidden = true;
-
-                    break;
-                }
+            if (!this.isDropdownEditItemListEmpty()) {
+                this.$dropdownEditItemListButton.removeClass('hidden');
             }
 
-            if (this.isRendered()) {
-                this.$detailButtonContainer
-                    .find('li > .action[data-action="'+name+'"]')
-                    .parent()
-                    .addClass('hidden');
+            this.adjustButtons();
+        }
+    },
 
-                this.$detailButtonContainer
-                    .find('button.action[data-action="'+name+'"]')
-                    .addClass('hidden');
+    /**
+     * Disable a button or dropdown action item.
+     *
+     * @param {string} name A name.
+     */
+    disableActionItem: function (name) {
+        for (let item of this.buttonList) {
+            if (item.name === name) {
+                item.disabled = true;
 
-                if (this.isDropdownItemListEmpty()) {
-                    this.$dropdownItemListButton.addClass('hidden');
-                }
-
-                if (this.isDropdownEditItemListEmpty()) {
-                    this.$dropdownEditItemListButton.addClass('hidden');
-                }
-
-                this.adjustButtons();
+                break;
             }
-        },
+        }
 
-        /**
-         * Show a button or dropdown action item.
-         *
-         * @param {string} name A name.
-         */
-        showActionItem: function (name) {
-            for (let item of this.buttonList) {
-                if (item.name === name) {
-                    item.hidden = false;
+        for (let item of this.dropdownItemList) {
+            if (item.name === name) {
+                item.disabled = true;
 
-                    break;
-                }
+                break;
             }
+        }
 
-            for (let item of this.dropdownItemList) {
-                if (item.name === name) {
-                    item.hidden = false;
+        for (let item of this.dropdownEditItemList) {
+            if (item.name === name) {
+                item.disabled = true;
 
-                    break;
-                }
+                break;
             }
+        }
 
-            for (let item of this.dropdownEditItemList) {
-                if (item.name === name) {
-                    item.hidden = false;
+        for (let item of this.buttonEditList) {
+            if (item.name === name) {
+                item.disabled = true;
 
-                    break;
-                }
+                break;
             }
+        }
 
-            for (let item of this.buttonEditList) {
-                if (item.name === name) {
-                    item.hidden = false;
+        if (this.isRendered()) {
+            this.$detailButtonContainer
+                .find('li > .action[data-action="'+name+'"]')
+                .parent()
+                .addClass('disabled')
+                .attr('disabled', 'disabled');
 
-                    break;
-                }
+            this.$detailButtonContainer
+                .find('button.action[data-action="'+name+'"]')
+                .addClass('disabled')
+                .attr('disabled', 'disabled');
+        }
+    },
+
+    /**
+     * Enable a button or dropdown action item.
+     *
+     * @param {string} name A name.
+     */
+    enableActionItem: function (name) {
+        for (let item of this.buttonList) {
+            if (item.name === name) {
+                item.disabled = false;
+
+                break;
             }
+        }
 
-            if (this.isRendered()) {
-                this.$detailButtonContainer
-                    .find('li > .action[data-action="'+name+'"]')
-                    .parent()
-                    .removeClass('hidden');
+        for (let item of this.dropdownItemList) {
+            if (item.name === name) {
+                item.disabled = false;
 
-                this.$detailButtonContainer
-                    .find('button.action[data-action="'+name+'"]')
-                    .removeClass('hidden');
-
-                if (!this.isDropdownItemListEmpty()) {
-                    this.$dropdownItemListButton.removeClass('hidden');
-                }
-
-                if (!this.isDropdownEditItemListEmpty()) {
-                    this.$dropdownEditItemListButton.removeClass('hidden');
-                }
-
-                this.adjustButtons();
+                break;
             }
-        },
+        }
 
-        /**
-         * Disable a button or dropdown action item.
-         *
-         * @param {string} name A name.
-         */
-        disableActionItem: function (name) {
-            for (let item of this.buttonList) {
-                if (item.name === name) {
-                    item.disabled = true;
+        for (let item of this.dropdownEditItemList) {
+            if (item.name === name) {
+                item.disabled = false;
 
-                    break;
-                }
+                break;
             }
+        }
 
-            for (let item of this.dropdownItemList) {
-                if (item.name === name) {
-                    item.disabled = true;
+        for (let item of this.buttonEditList) {
+            if (item.name === name) {
+                item.disabled = false;
 
-                    break;
-                }
+                break;
             }
+        }
 
-            for (let item of this.dropdownEditItemList) {
-                if (item.name === name) {
-                    item.disabled = true;
+        if (this.isRendered()) {
+            this.$detailButtonContainer
+                .find('li > .action[data-action="'+name+'"]')
+                .parent()
+                .removeClass('disabled')
+                .removeAttr('disabled');
 
-                    break;
-                }
-            }
+            this.$detailButtonContainer
+                .find('button.action[data-action="'+name+'"]')
+                .removeClass('disabled')
+                .removeAttr('disabled');
+        }
+    },
 
-            for (let item of this.buttonEditList) {
-                if (item.name === name) {
-                    item.disabled = true;
+    /**
+     * Whether an action item is visible and not disabled.
+     *
+     * @param {string} name An action item name.
+     */
+    hasAvailableActionItem: function (name) {
+        if (this.allActionItemsDisabled) {
+            return false;
+        }
 
-                    break;
-                }
-            }
-
-            if (this.isRendered()) {
-                this.$detailButtonContainer
-                    .find('li > .action[data-action="'+name+'"]')
-                    .parent()
-                    .addClass('disabled')
-                    .attr('disabled', 'disabled');
-
-                this.$detailButtonContainer
-                    .find('button.action[data-action="'+name+'"]')
-                    .addClass('disabled')
-                    .attr('disabled', 'disabled');
-            }
-        },
-
-        /**
-         * Enable a button or dropdown action item.
-         *
-         * @param {string} name A name.
-         */
-        enableActionItem: function (name) {
-            for (let item of this.buttonList) {
-                if (item.name === name) {
-                    item.disabled = false;
-
-                    break;
-                }
-            }
-
-            for (let item of this.dropdownItemList) {
-                if (item.name === name) {
-                    item.disabled = false;
-
-                    break;
-                }
-            }
-
-            for (let item of this.dropdownEditItemList) {
-                if (item.name === name) {
-                    item.disabled = false;
-
-                    break;
-                }
-            }
-
-            for (let item of this.buttonEditList) {
-                if (item.name === name) {
-                    item.disabled = false;
-
-                    break;
-                }
-            }
-
-            if (this.isRendered()) {
-                this.$detailButtonContainer
-                    .find('li > .action[data-action="'+name+'"]')
-                    .parent()
-                    .removeClass('disabled')
-                    .removeAttr('disabled');
-
-                this.$detailButtonContainer
-                    .find('button.action[data-action="'+name+'"]')
-                    .removeClass('disabled')
-                    .removeAttr('disabled');
-            }
-        },
-
-        /**
-         * Whether an action item is visible and not disabled.
-         *
-         * @param {string} name An action item name.
-         */
-        hasAvailableActionItem: function (name) {
-            if (this.allActionItemsDisabled) {
-                return false;
-            }
-
-            if (this.type === this.TYPE_DETAIL && this.mode === this.MODE_EDIT) {
-                let hasButton = this.buttonEditList
-                    .findIndex(item => item.name === name && !item.disabled && !item.hidden) !== -1;
-
-                if (hasButton) {
-                    return true;
-                }
-
-                return this.dropdownEditItemList
-                    .findIndex(item => item.name === name && !item.disabled && !item.hidden) !== -1;
-            }
-
-            let hasButton = this.buttonList
+        if (this.type === this.TYPE_DETAIL && this.mode === this.MODE_EDIT) {
+            let hasButton = this.buttonEditList
                 .findIndex(item => item.name === name && !item.disabled && !item.hidden) !== -1;
 
             if (hasButton) {
                 return true;
             }
 
-            return this.dropdownItemList
+            return this.dropdownEditItemList
                 .findIndex(item => item.name === name && !item.disabled && !item.hidden) !== -1;
-        },
+        }
+
+        let hasButton = this.buttonList
+            .findIndex(item => item.name === name && !item.disabled && !item.hidden) !== -1;
+
+        if (hasButton) {
+            return true;
+        }
+
+        return this.dropdownItemList
+            .findIndex(item => item.name === name && !item.disabled && !item.hidden) !== -1;
+    },
+
+    /**
+     * Show a panel.
+     *
+     * @param {string} name A panel name.
+     * @param {module:views/record/detail~panelSoftLockedType} [softLockedType='default']
+     *   A soft-locked type.
+     */
+    showPanel: function (name, softLockedType) {
+        if (this.recordHelper.getPanelStateParam(name, 'hiddenLocked')) {
+            return;
+        }
+
+        softLockedType = softLockedType || 'default';
+
+        this.recordHelper
+            .setPanelStateParam(name,
+                'hidden' + Espo.Utils.upperCaseFirst(softLockedType) + 'Locked', false);
+
+        if (softLockedType === 'dynamicLogic') {
+            if (this.recordHelper.getPanelStateParam(name, 'hidden') === false) {
+                return;
+            }
+        }
+
+        for (let i = 0; i < this.panelSoftLockedTypeList.length; i++) {
+            let iType = this.panelSoftLockedTypeList[i];
+
+            if (iType === softLockedType) {
+                continue;
+            }
+
+            let iParam = 'hidden' +  Espo.Utils.upperCaseFirst(iType) + 'Locked';
+
+            if (this.recordHelper.getPanelStateParam(name, iParam)) {
+                return;
+            }
+        }
+
+        let middleView = this.getView('middle');
+
+        if (middleView) {
+            middleView.showPanelInternal(name);
+        }
+
+        let bottomView = this.getView('bottom');
+
+        if (bottomView) {
+            if ('showPanel' in bottomView) {
+                bottomView.showPanel(name);
+            }
+        }
+        else if (this.bottomView) {
+            this.once('ready', () => {
+                let view = this.getView('bottom');
+
+                if (view) {
+                    if ('processShowPanel' in view) {
+                        view.processShowPanel(name);
+
+                        return;
+                    }
+
+                    if ('showPanel' in view) {
+                        view.showPanel(name);
+                    }
+                }
+            });
+        }
+
+        let sideView = this.getView('side');
+
+        if (sideView) {
+            if ('showPanel' in sideView) {
+                sideView.showPanel(name);
+            }
+        }
+        else if (this.sideView) {
+            this.once('ready', () => {
+                let view = this.getView('side');
+
+                if (view) {
+                    if ('processShowPanel' in view) {
+                        view.processShowPanel(name);
+
+                        return;
+                    }
+
+                    if ('showPanel' in view) {
+                        view.showPanel(name);
+                    }
+                }
+            });
+        }
+
+        this.recordHelper.setPanelStateParam(name, 'hidden', false);
+
+        if (this.middlePanelDefs[name]) {
+            this.controlTabVisibilityShow(this.middlePanelDefs[name].tabNumber);
+
+            this.adjustMiddlePanels();
+        }
+
+        this.recordHelper.trigger('panel-show');
+    },
+
+    /**
+     * Hide a panel.
+     *
+     * @param {string} name A panel name.
+     * @param {boolean} [locked=false] Won't be able to un-hide.
+     * @param {module:views/record/detail~panelSoftLockedType} [softLockedType='default']
+     *   A soft-locked type.
+     */
+    hidePanel: function (name, locked, softLockedType) {
+        softLockedType = softLockedType || 'default';
+
+        if (locked) {
+            this.recordHelper.setPanelStateParam(name, 'hiddenLocked', true);
+        }
+
+        if (softLockedType) {
+            this.recordHelper
+                .setPanelStateParam(name,
+                    'hidden' + Espo.Utils.upperCaseFirst(softLockedType) + 'Locked', true);
+        }
+
+        if (softLockedType === 'dynamicLogic') {
+            if (this.recordHelper.getPanelStateParam(name, 'hidden') === true) {
+                return;
+            }
+        }
+
+        let middleView = this.getView('middle');
+
+        if (middleView) {
+            middleView.hidePanelInternal(name);
+        }
+
+        let bottomView = this.getView('bottom');
+
+        if (bottomView) {
+            if ('hidePanel' in bottomView) {
+                bottomView.hidePanel(name);
+            }
+        }
+        else if (this.bottomView) {
+            this.once('ready', () => {
+                let view = this.getView('bottom');
+
+                if (view) {
+                    if ('processHidePanel' in view) {
+                        view.processHidePanel(name);
+
+                        return;
+                    }
+
+                    if ('hidePanel' in view) {
+                        view.hidePanel(name);
+                    }
+                }
+            });
+        }
+
+        let sideView = this.getView('side');
+
+        if (sideView) {
+            if ('hidePanel' in sideView) {
+                sideView.hidePanel(name);
+            }
+        }
+        else if (this.sideView) {
+            this.once('ready', () => {
+                let view = this.getView('side');
+
+                if (view) {
+                    if ('processHidePanel' in view) {
+                        view.processHidePanel(name);
+
+                        return;
+                    }
+
+                    if ('hidePanel' in view) {
+                        view.hidePanel(name);
+                    }
+                }
+            });
+        }
+
+        this.recordHelper.setPanelStateParam(name, 'hidden', true);
+
+        if (this.middlePanelDefs[name]) {
+            this.controlTabVisibilityHide(this.middlePanelDefs[name].tabNumber);
+
+            this.adjustMiddlePanels();
+        }
+    },
+
+    afterRender: function () {
+        this.$middle = this.$el.find('.middle');
+
+        if (this.bottomView) {
+            this.$bottom = this.$el.find('.bottom');
+        }
+
+        this.initElementReferences();
+
+        this.adjustMiddlePanels();
+        this.adjustButtons();
+
+        this.initStickableButtonsContainer();
+        this.initFieldsControlBehaviour();
+    },
+
+    /**
+     * @private
+     */
+    initFieldsControlBehaviour: function () {
+        let fields = this.getFieldViews();
+
+        let fieldInEditMode = null;
+
+        for (let field in fields) {
+            let fieldView = fields[field];
+
+            this.listenTo(fieldView, 'edit', (view) => {
+                if (fieldInEditMode && fieldInEditMode.isEditMode()) {
+                    fieldInEditMode.inlineEditClose();
+                }
+
+                fieldInEditMode = view;
+            });
+
+            this.listenTo(fieldView, 'inline-edit-on', () => {
+                this.inlineEditModeIsOn = true;
+            });
+
+            this.listenTo(fieldView, 'inline-edit-off', (o) => {
+                o = o || {};
+
+                if (o.all) {
+                    return;
+                }
+
+                this.inlineEditModeIsOn = false;
+
+                this.setIsNotChanged();
+            });
+
+            this.listenTo(fieldView, 'after:inline-edit-off', o => {
+                if (this.updatedAttributes && !o.noReset) {
+                    this.resetModelChanges();
+                }
+            });
+        }
+    },
+
+    /**
+     * @private
+     */
+    initStickableButtonsContainer: function () {
+        let $containers = this.$el.find('.detail-button-container');
+        let $container = this.$el.find('.detail-button-container.record-buttons');
+
+        if (!$container.length) {
+            return;
+        }
+
+        let navbarHeight = this.getThemeManager().getParam('navbarHeight');
+        let screenWidthXs = this.getThemeManager().getParam('screenWidthXs');
+
+        let isSmallScreen = $(window.document).width() < screenWidthXs;
+
+        let getOffsetTop = (/** JQuery */$element) => {
+            let element = $element.get(0);
+
+            let value = -3;
+
+            while (element) {
+                value += !isNaN(element.offsetTop) ? element.offsetTop : 0;
+
+                element = element.offsetParent;
+            }
+
+            if (isSmallScreen) {
+                return value;
+            }
+
+            return value - navbarHeight;
+        };
+
+        let stickTop = getOffsetTop($container);
+        let blockHeight = $container.outerHeight();
+
+        let $block = $('<div>')
+            .css('height', blockHeight + 'px')
+            .html('&nbsp;')
+            .hide()
+            .insertAfter($container);
+
+        let $middle = this.getView('middle').$el;
+        let $window = $(window);
+        let $navbarRight = $('#navbar .navbar-right');
+
+        if (this.stickButtonsFormBottomSelector) {
+            let $bottom = this.$el.find(this.stickButtonsFormBottomSelector);
+
+            if ($bottom.length) {
+                $middle = $bottom;
+            }
+        }
+
+        $window.off('scroll.detail-' + this.numId);
+
+        $window.on('scroll.detail-' + this.numId, () => {
+            let edge = $middle.position().top + $middle.outerHeight(false) - blockHeight;
+            let scrollTop = $window.scrollTop();
+
+            if (scrollTop >= edge && !this.stickButtonsContainerAllTheWay) {
+                $containers.hide();
+                $navbarRight.removeClass('has-sticked-bar');
+                $block.show();
 
-        /**
-         * Show a panel.
-         *
-         * @param {string} name A panel name.
-         * @param {module:views/record/detail~panelSoftLockedType} [softLockedType='default']
-         *   A soft-locked type.
-         */
-        showPanel: function (name, softLockedType) {
-            if (this.recordHelper.getPanelStateParam(name, 'hiddenLocked')) {
                 return;
             }
 
-            softLockedType = softLockedType || 'default';
-
-            this.recordHelper
-                .setPanelStateParam(name,
-                    'hidden' + Espo.Utils.upperCaseFirst(softLockedType) + 'Locked', false);
-
-            if (softLockedType === 'dynamicLogic') {
-                if (this.recordHelper.getPanelStateParam(name, 'hidden') === false) {
-                    return;
-                }
+            if (isSmallScreen && $('#navbar .navbar-body').hasClass('in')) {
+                return;
             }
 
-            for (let i = 0; i < this.panelSoftLockedTypeList.length; i++) {
-                let iType = this.panelSoftLockedTypeList[i];
+            if (scrollTop > stickTop) {
+                if (!$containers.hasClass('stick-sub')) {
+                    $containers.addClass('stick-sub');
+                    $block.show();
 
-                if (iType === softLockedType) {
-                    continue;
+                    /*$('.popover').each((i, el) => {
+                        let $el = $(el);
+                        $el.css('top', ($el.position().top - blockHeight) + 'px');
+                    });*/
                 }
 
-                let iParam = 'hidden' +  Espo.Utils.upperCaseFirst(iType) + 'Locked';
+                $navbarRight.addClass('has-sticked-bar');
 
-                if (this.recordHelper.getPanelStateParam(name, iParam)) {
-                    return;
-                }
+                $containers.show();
+
+                return;
             }
 
-            let middleView = this.getView('middle');
+            if ($containers.hasClass('stick-sub')) {
+                $containers.removeClass('stick-sub');
+                $navbarRight.removeClass('has-sticked-bar');
+                $block.hide();
 
-            if (middleView) {
-                middleView.showPanelInternal(name);
+                /*$('.popover').each((i, el) => {
+                    let $el = $(el);
+                    $el.css('top', ($el.position().top + blockHeight) + 'px');
+                });*/
             }
 
-            let bottomView = this.getView('bottom');
+            $containers.show();
+        });
+    },
 
-            if (bottomView) {
-                if ('showPanel' in bottomView) {
-                    bottomView.showPanel(name);
-                }
+    fetch: function () {
+        let data = Dep.prototype.fetch.call(this);
+
+        if (this.hasView('side')) {
+            let view = this.getView('side');
+
+            if ('fetch' in view) {
+                data = _.extend(data, view.fetch());
             }
-            else if (this.bottomView) {
-                this.once('ready', () => {
-                    let view = this.getView('bottom');
+        }
 
-                    if (view) {
-                        if ('processShowPanel' in view) {
-                            view.processShowPanel(name);
+        if (this.hasView('bottom')) {
+            let view = this.getView('bottom');
 
-                            return;
-                        }
-
-                        if ('showPanel' in view) {
-                            view.showPanel(name);
-                        }
-                    }
-                });
+            if ('fetch' in view) {
+                data = _.extend(data, view.fetch());
             }
+        }
 
-            let sideView = this.getView('side');
+        return data;
+    },
 
-            if (sideView) {
-                if ('showPanel' in sideView) {
-                    sideView.showPanel(name);
-                }
-            }
-            else if (this.sideView) {
-                this.once('ready', () => {
-                    let view = this.getView('side');
+    setEditMode: function () {
+        this.trigger('before:set-edit-mode');
 
-                    if (view) {
-                        if ('processShowPanel' in view) {
-                            view.processShowPanel(name);
+        this.inlineEditModeIsOn = false;
 
-                            return;
-                        }
+        this.$el.find('.record-buttons').addClass('hidden');
+        this.$el.find('.edit-buttons').removeClass('hidden');
 
-                        if ('showPanel' in view) {
-                            view.showPanel(name);
-                        }
-                    }
-                });
-            }
+        return new Promise(resolve => {
+            let fields = this.getFieldViews(true);
 
-            this.recordHelper.setPanelStateParam(name, 'hidden', false);
-
-            if (this.middlePanelDefs[name]) {
-                this.controlTabVisibilityShow(this.middlePanelDefs[name].tabNumber);
-
-                this.adjustMiddlePanels();
-            }
-
-            this.recordHelper.trigger('panel-show');
-        },
-
-        /**
-         * Hide a panel.
-         *
-         * @param {string} name A panel name.
-         * @param {boolean} [locked=false] Won't be able to un-hide.
-         * @param {module:views/record/detail~panelSoftLockedType} [softLockedType='default']
-         *   A soft-locked type.
-         */
-        hidePanel: function (name, locked, softLockedType) {
-            softLockedType = softLockedType || 'default';
-
-            if (locked) {
-                this.recordHelper.setPanelStateParam(name, 'hiddenLocked', true);
-            }
-
-            if (softLockedType) {
-                this.recordHelper
-                    .setPanelStateParam(name,
-                        'hidden' + Espo.Utils.upperCaseFirst(softLockedType) + 'Locked', true);
-            }
-
-            if (softLockedType === 'dynamicLogic') {
-                if (this.recordHelper.getPanelStateParam(name, 'hidden') === true) {
-                    return;
-                }
-            }
-
-            let middleView = this.getView('middle');
-
-            if (middleView) {
-                middleView.hidePanelInternal(name);
-            }
-
-            let bottomView = this.getView('bottom');
-
-            if (bottomView) {
-                if ('hidePanel' in bottomView) {
-                    bottomView.hidePanel(name);
-                }
-            }
-            else if (this.bottomView) {
-                this.once('ready', () => {
-                    let view = this.getView('bottom');
-
-                    if (view) {
-                        if ('processHidePanel' in view) {
-                            view.processHidePanel(name);
-
-                            return;
-                        }
-
-                        if ('hidePanel' in view) {
-                            view.hidePanel(name);
-                        }
-                    }
-                });
-            }
-
-            let sideView = this.getView('side');
-
-            if (sideView) {
-                if ('hidePanel' in sideView) {
-                    sideView.hidePanel(name);
-                }
-            }
-            else if (this.sideView) {
-                this.once('ready', () => {
-                    let view = this.getView('side');
-
-                    if (view) {
-                        if ('processHidePanel' in view) {
-                            view.processHidePanel(name);
-
-                            return;
-                        }
-
-                        if ('hidePanel' in view) {
-                            view.hidePanel(name);
-                        }
-                    }
-                });
-            }
-
-            this.recordHelper.setPanelStateParam(name, 'hidden', true);
-
-            if (this.middlePanelDefs[name]) {
-                this.controlTabVisibilityHide(this.middlePanelDefs[name].tabNumber);
-
-                this.adjustMiddlePanels();
-            }
-        },
-
-        afterRender: function () {
-            this.$middle = this.$el.find('.middle');
-
-            if (this.bottomView) {
-                this.$bottom = this.$el.find('.bottom');
-            }
-
-            this.initElementReferences();
-
-            this.adjustMiddlePanels();
-            this.adjustButtons();
-
-            this.initStickableButtonsContainer();
-            this.initFieldsControlBehaviour();
-        },
-
-        /**
-         * @private
-         */
-        initFieldsControlBehaviour: function () {
-            let fields = this.getFieldViews();
-
-            let fieldInEditMode = null;
+            let promiseList = [];
 
             for (let field in fields) {
                 let fieldView = fields[field];
 
-                this.listenTo(fieldView, 'edit', (view) => {
-                    if (fieldInEditMode && fieldInEditMode.isEditMode()) {
-                        fieldInEditMode.inlineEditClose();
-                    }
+                if (fieldView.readOnly) {
+                    continue;
+                }
 
-                    fieldInEditMode = view;
-                });
+                if (fieldView.isEditMode()) {
+                    fieldView.fetchToModel();
+                    fieldView.removeInlineEditLinks();
+                    fieldView.setIsInlineEditMode(false);
+                }
 
-                this.listenTo(fieldView, 'inline-edit-on', () => {
-                    this.inlineEditModeIsOn = true;
-                });
-
-                this.listenTo(fieldView, 'inline-edit-off', (o) => {
-                    o = o || {};
-
-                    if (o.all) {
-                        return;
-                    }
-
-                    this.inlineEditModeIsOn = false;
-
-                    this.setIsNotChanged();
-                });
-
-                this.listenTo(fieldView, 'after:inline-edit-off', o => {
-                    if (this.updatedAttributes && !o.noReset) {
-                        this.resetModelChanges();
-                    }
-                });
-            }
-        },
-
-        /**
-         * @private
-         */
-        initStickableButtonsContainer: function () {
-            let $containers = this.$el.find('.detail-button-container');
-            let $container = this.$el.find('.detail-button-container.record-buttons');
-
-            if (!$container.length) {
-                return;
+                promiseList.push(
+                    fieldView
+                        .setEditMode()
+                        .then(() => {
+                            return fieldView.render();
+                        })
+                );
             }
 
-            let navbarHeight = this.getThemeManager().getParam('navbarHeight');
-            let screenWidthXs = this.getThemeManager().getParam('screenWidthXs');
+            this.mode = this.MODE_EDIT;
 
-            let isSmallScreen = $(window.document).width() < screenWidthXs;
+            this.trigger('after:set-edit-mode');
+            this.trigger('after:mode-change');
 
-            let getOffsetTop = (/** JQuery */$element) => {
-                let element = $element.get(0);
+            Promise.all(promiseList).then(() => resolve());
+        });
+    },
 
-                let value = -3;
+    setDetailMode: function () {
+        this.trigger('before:set-detail-mode');
 
-                while (element) {
-                    value += !isNaN(element.offsetTop) ? element.offsetTop : 0;
+        this.$el.find('.edit-buttons').addClass('hidden');
+        this.$el.find('.record-buttons').removeClass('hidden');
 
-                    element = element.offsetParent;
-                }
+        this.inlineEditModeIsOn = false;
 
-                if (isSmallScreen) {
-                    return value;
-                }
+        return new Promise(resolve => {
+            let fields = this.getFieldViews(true);
 
-                return value - navbarHeight;
-            };
+            let promiseList = [];
 
-            let stickTop = getOffsetTop($container);
-            let blockHeight = $container.outerHeight();
-
-            let $block = $('<div>')
-                .css('height', blockHeight + 'px')
-                .html('&nbsp;')
-                .hide()
-                .insertAfter($container);
-
-            let $middle = this.getView('middle').$el;
-            let $window = $(window);
-            let $navbarRight = $('#navbar .navbar-right');
-
-            if (this.stickButtonsFormBottomSelector) {
-                let $bottom = this.$el.find(this.stickButtonsFormBottomSelector);
-
-                if ($bottom.length) {
-                    $middle = $bottom;
-                }
-            }
-
-            $window.off('scroll.detail-' + this.numId);
-
-            $window.on('scroll.detail-' + this.numId, () => {
-                let edge = $middle.position().top + $middle.outerHeight(false) - blockHeight;
-                let scrollTop = $window.scrollTop();
-
-                if (scrollTop >= edge && !this.stickButtonsContainerAllTheWay) {
-                    $containers.hide();
-                    $navbarRight.removeClass('has-sticked-bar');
-                    $block.show();
-
-                    return;
-                }
-
-                if (isSmallScreen && $('#navbar .navbar-body').hasClass('in')) {
-                    return;
-                }
-
-                if (scrollTop > stickTop) {
-                    if (!$containers.hasClass('stick-sub')) {
-                        $containers.addClass('stick-sub');
-                        $block.show();
-
-                        /*$('.popover').each((i, el) => {
-                            let $el = $(el);
-                            $el.css('top', ($el.position().top - blockHeight) + 'px');
-                        });*/
-                    }
-
-                    $navbarRight.addClass('has-sticked-bar');
-
-                    $containers.show();
-
-                    return;
-                }
-
-                if ($containers.hasClass('stick-sub')) {
-                    $containers.removeClass('stick-sub');
-                    $navbarRight.removeClass('has-sticked-bar');
-                    $block.hide();
-
-                    /*$('.popover').each((i, el) => {
-                        let $el = $(el);
-                        $el.css('top', ($el.position().top + blockHeight) + 'px');
-                    });*/
-                }
-
-                $containers.show();
-            });
-        },
-
-        fetch: function () {
-            let data = Dep.prototype.fetch.call(this);
-
-            if (this.hasView('side')) {
-                let view = this.getView('side');
-
-                if ('fetch' in view) {
-                    data = _.extend(data, view.fetch());
-                }
-            }
-
-            if (this.hasView('bottom')) {
-                let view = this.getView('bottom');
-
-                if ('fetch' in view) {
-                    data = _.extend(data, view.fetch());
-                }
-            }
-
-            return data;
-        },
-
-        setEditMode: function () {
-            this.trigger('before:set-edit-mode');
-
-            this.inlineEditModeIsOn = false;
-
-            this.$el.find('.record-buttons').addClass('hidden');
-            this.$el.find('.edit-buttons').removeClass('hidden');
-
-            return new Promise(resolve => {
-                let fields = this.getFieldViews(true);
-
-                let promiseList = [];
-
-                for (let field in fields) {
-                    let fieldView = fields[field];
-
-                    if (fieldView.readOnly) {
-                        continue;
-                    }
+            for (let field in fields) {
+                let fieldView = fields[field];
 
+                if (!fieldView.isDetailMode()) {
                     if (fieldView.isEditMode()) {
-                        fieldView.fetchToModel();
-                        fieldView.removeInlineEditLinks();
-                        fieldView.setIsInlineEditMode(false);
+                        fieldView.trigger('inline-edit-off', {
+                            all: true,
+                        });
                     }
 
                     promiseList.push(
                         fieldView
-                            .setEditMode()
-                            .then(() => {
-                                return fieldView.render();
-                            })
+                            .setDetailMode()
+                            .then(() => fieldView.render())
                     );
                 }
+            }
 
-                this.mode = this.MODE_EDIT;
+            this.mode = this.MODE_DETAIL;
 
-                this.trigger('after:set-edit-mode');
-                this.trigger('after:mode-change');
+            this.trigger('after:set-detail-mode');
+            this.trigger('after:mode-change');
 
-                Promise.all(promiseList).then(() => resolve());
-            });
-        },
+            Promise.all(promiseList).then(() => resolve());
+        });
+    },
 
-        setDetailMode: function () {
-            this.trigger('before:set-detail-mode');
+    cancelEdit: function () {
+        this.resetModelChanges();
 
-            this.$el.find('.edit-buttons').addClass('hidden');
-            this.$el.find('.record-buttons').removeClass('hidden');
+        this.setDetailMode();
+        this.setIsNotChanged();
+    },
 
-            this.inlineEditModeIsOn = false;
+    resetModelChanges: function () {
+        let skipReRender = true;
 
-            return new Promise(resolve => {
-                let fields = this.getFieldViews(true);
+        if (this.updatedAttributes) {
+            this.attributes = this.updatedAttributes;
+            this.updatedAttributes = null;
 
-                let promiseList = [];
+            skipReRender = false;
+        }
 
-                for (let field in fields) {
-                    let fieldView = fields[field];
+        let attributes = this.model.attributes;
 
-                    if (!fieldView.isDetailMode()) {
-                        if (fieldView.isEditMode()) {
-                            fieldView.trigger('inline-edit-off', {
-                                all: true,
-                            });
+        for (let attr in attributes) {
+            if (!(attr in this.attributes)) {
+                this.model.unset(attr);
+            }
+        }
+
+        this.model.set(this.attributes, {skipReRender: skipReRender});
+    },
+
+    delete: function () {
+        this.confirm({
+            message: this.translate('removeRecordConfirmation', 'messages', this.scope),
+            confirmText: this.translate('Remove'),
+        }, () => {
+            this.trigger('before:delete');
+            this.trigger('delete');
+
+            Espo.Ui.notify(' ... ');
+
+            let collection = this.model.collection;
+
+            this.model
+                .destroy({wait: true})
+                .then(() => {
+                    if (collection) {
+                        if (collection.total > 0) {
+                            collection.total--;
                         }
-
-                        promiseList.push(
-                            fieldView
-                                .setDetailMode()
-                                .then(() => fieldView.render())
-                        );
                     }
-                }
 
-                this.mode = this.MODE_DETAIL;
+                    this.model.set('deleted', true, {silent: true});
 
-                this.trigger('after:set-detail-mode');
-                this.trigger('after:mode-change');
+                    Espo.Ui.success(this.translate('Removed'));
 
-                Promise.all(promiseList).then(() => resolve());
-            });
-        },
+                    this.trigger('after:delete');
+                    this.exit('delete');
+                });
+        });
+    },
 
-        cancelEdit: function () {
-            this.resetModelChanges();
+    /**
+     * Get field views.
+     *
+     * @param {boolean} [withHidden] With hidden.
+     * @return {Object.<string, module:views/fields/base>}
+     */
+    getFieldViews: function (withHidden) {
+        let fields = {};
 
-            this.setDetailMode();
-            this.setIsNotChanged();
-        },
+        if (this.hasView('middle')) {
+            if ('getFieldViews' in this.getView('middle')) {
+                _.extend(fields, Espo.Utils.clone(this.getView('middle').getFieldViews(withHidden)));
+            }
+        }
 
-        resetModelChanges: function () {
-            let skipReRender = true;
+        if (this.hasView('side')) {
+            if ('getFieldViews' in this.getView('side')) {
+                _.extend(fields, this.getView('side').getFieldViews(withHidden));
+            }
+        }
 
-            if (this.updatedAttributes) {
-                this.attributes = this.updatedAttributes;
-                this.updatedAttributes = null;
+        if (this.hasView('bottom')) {
+            if ('getFieldViews' in this.getView('bottom')) {
+                _.extend(fields, this.getView('bottom').getFieldViews(withHidden));
+            }
+        }
 
-                skipReRender = false;
+        return fields;
+    },
+
+    /**
+     * Get a field view.
+     *
+     * @param {string} name A field name.
+     * @return {module:views/fields/base|null}
+     */
+    getFieldView: function (name) {
+        let view;
+
+        if (this.hasView('middle')) {
+            view = (this.getView('middle').getFieldViews(true) || {})[name];
+        }
+
+        if (!view && this.hasView('side')) {
+            view = (this.getView('side').getFieldViews(true) || {})[name];
+        }
+
+        if (!view && this.hasView('bottom')) {
+            view = (this.getView('bottom').getFieldViews(true) || {})[name];
+        }
+
+        return view || null;
+    },
+
+    // @todo Remove.
+    handleDataBeforeRender: function (data) {},
+
+    data: function () {
+        let navigateButtonsEnabled = !this.navigateButtonsDisabled && !!this.model.collection;
+
+        let previousButtonEnabled = false;
+        let nextButtonEnabled = false;
+
+        if (navigateButtonsEnabled) {
+            if (this.indexOfRecord > 0) {
+                previousButtonEnabled = true;
             }
 
-            let attributes = this.model.attributes;
-
-            for (let attr in attributes) {
-                if (!(attr in this.attributes)) {
-                    this.model.unset(attr);
-                }
+            if (this.indexOfRecord < this.model.collection.total - 1) {
+                nextButtonEnabled = true;
             }
-
-            this.model.set(this.attributes, {skipReRender: skipReRender});
-        },
-
-        delete: function () {
-            this.confirm({
-                message: this.translate('removeRecordConfirmation', 'messages', this.scope),
-                confirmText: this.translate('Remove'),
-            }, () => {
-                this.trigger('before:delete');
-                this.trigger('delete');
-
-                Espo.Ui.notify(' ... ');
-
-                let collection = this.model.collection;
-
-                this.model
-                    .destroy({wait: true})
-                    .then(() => {
-                        if (collection) {
-                            if (collection.total > 0) {
-                                collection.total--;
-                            }
-                        }
-
-                        this.model.set('deleted', true, {silent: true});
-
-                        Espo.Ui.success(this.translate('Removed'));
-
-                        this.trigger('after:delete');
-                        this.exit('delete');
-                    });
-            });
-        },
-
-        /**
-         * Get field views.
-         *
-         * @param {boolean} [withHidden] With hidden.
-         * @return {Object.<string,module:views/fields/base.Class>}
-         */
-        getFieldViews: function (withHidden) {
-            let fields = {};
-
-            if (this.hasView('middle')) {
-                if ('getFieldViews' in this.getView('middle')) {
-                    _.extend(fields, Espo.Utils.clone(this.getView('middle').getFieldViews(withHidden)));
-                }
-            }
-
-            if (this.hasView('side')) {
-                if ('getFieldViews' in this.getView('side')) {
-                    _.extend(fields, this.getView('side').getFieldViews(withHidden));
-                }
-            }
-
-            if (this.hasView('bottom')) {
-                if ('getFieldViews' in this.getView('bottom')) {
-                    _.extend(fields, this.getView('bottom').getFieldViews(withHidden));
-                }
-            }
-
-            return fields;
-        },
-
-        /**
-         * Get a field view.
-         *
-         * @param {string} name A field name.
-         * @return {module:views/fields/base.Class|null}
-         */
-        getFieldView: function (name) {
-            let view;
-
-            if (this.hasView('middle')) {
-                view = (this.getView('middle').getFieldViews(true) || {})[name];
-            }
-
-            if (!view && this.hasView('side')) {
-                view = (this.getView('side').getFieldViews(true) || {})[name];
-            }
-
-            if (!view && this.hasView('bottom')) {
-                view = (this.getView('bottom').getFieldViews(true) || {})[name];
-            }
-
-            return view || null;
-        },
-
-        // @todo Remove.
-        handleDataBeforeRender: function (data) {},
-
-        data: function () {
-            let navigateButtonsEnabled = !this.navigateButtonsDisabled && !!this.model.collection;
-
-            let previousButtonEnabled = false;
-            let nextButtonEnabled = false;
-
-            if (navigateButtonsEnabled) {
-                if (this.indexOfRecord > 0) {
-                    previousButtonEnabled = true;
-                }
-
-                if (this.indexOfRecord < this.model.collection.total - 1) {
+            else {
+                if (this.model.collection.total === -1) {
                     nextButtonEnabled = true;
                 }
-                else {
-                    if (this.model.collection.total === -1) {
+                else if (this.model.collection.total === -2) {
+                    if (this.indexOfRecord < this.model.collection.length - 1) {
                         nextButtonEnabled = true;
                     }
-                    else if (this.model.collection.total === -2) {
-                        if (this.indexOfRecord < this.model.collection.length - 1) {
-                            nextButtonEnabled = true;
-                        }
-                    }
-                }
-
-                if (!previousButtonEnabled && !nextButtonEnabled) {
-                    navigateButtonsEnabled = false;
                 }
             }
 
-            let hasMiddleTabs = this.hasTabs();
-            let middleTabDataList = hasMiddleTabs ? this.getMiddleTabDataList() : [];
-
-            return {
-                scope: this.scope,
-                entityType: this.entityType,
-                buttonList: this.buttonList,
-                buttonEditList: this.buttonEditList,
-                dropdownItemList: this.dropdownItemList,
-                dropdownEditItemList: this.dropdownEditItemList,
-                dropdownItemListEmpty: this.isDropdownItemListEmpty(),
-                dropdownEditItemListEmpty: this.isDropdownEditItemListEmpty(),
-                buttonsDisabled: this.buttonsDisabled,
-                name: this.name,
-                id: this.id,
-                isWide: this.isWide,
-                isSmall: this.type === 'editSmall' || this.type === 'detailSmall',
-                navigateButtonsEnabled: navigateButtonsEnabled,
-                previousButtonEnabled: previousButtonEnabled,
-                nextButtonEnabled: nextButtonEnabled,
-                hasMiddleTabs: hasMiddleTabs,
-                middleTabDataList: middleTabDataList,
-            };
-        },
-
-        init: function () {
-            this.entityType = this.model.name;
-            this.scope = this.options.scope || this.entityType;
-
-            this.layoutName = this.options.layoutName || this.layoutName;
-            this.detailLayout = this.options.detailLayout || this.detailLayout;
-
-            this.type = this.options.type || this.type;
-
-            this.buttons = this.options.buttons || this.buttons;
-            this.buttonList = this.options.buttonList || this.buttonList;
-            this.dropdownItemList = this.options.dropdownItemList || this.dropdownItemList;
-
-            this.buttonList = Espo.Utils.cloneDeep(this.buttonList);
-            this.buttonEditList = Espo.Utils.cloneDeep(this.buttonEditList);
-            this.dropdownItemList = Espo.Utils.cloneDeep(this.dropdownItemList);
-            this.dropdownEditItemList = Espo.Utils.cloneDeep(this.dropdownEditItemList);
-
-            this.returnAfterCreate = this.options.returnAfterCreate;
-
-            this.returnUrl = this.options.returnUrl || this.returnUrl;
-            this.returnDispatchParams = this.options.returnDispatchParams || this.returnDispatchParams;
-
-            this.exit = this.options.exit || this.exit;
-
-            if (this.shortcutKeys) {
-                this.shortcutKeys = Espo.Utils.cloneDeep(this.shortcutKeys);
+            if (!previousButtonEnabled && !nextButtonEnabled) {
+                navigateButtonsEnabled = false;
             }
-        },
+        }
 
-        isDropdownItemListEmpty: function () {
-            if (this.dropdownItemList.length === 0) {
-                return true;
+        let hasMiddleTabs = this.hasTabs();
+        let middleTabDataList = hasMiddleTabs ? this.getMiddleTabDataList() : [];
+
+        return {
+            scope: this.scope,
+            entityType: this.entityType,
+            buttonList: this.buttonList,
+            buttonEditList: this.buttonEditList,
+            dropdownItemList: this.dropdownItemList,
+            dropdownEditItemList: this.dropdownEditItemList,
+            dropdownItemListEmpty: this.isDropdownItemListEmpty(),
+            dropdownEditItemListEmpty: this.isDropdownEditItemListEmpty(),
+            buttonsDisabled: this.buttonsDisabled,
+            name: this.name,
+            id: this.id,
+            isWide: this.isWide,
+            isSmall: this.type === 'editSmall' || this.type === 'detailSmall',
+            navigateButtonsEnabled: navigateButtonsEnabled,
+            previousButtonEnabled: previousButtonEnabled,
+            nextButtonEnabled: nextButtonEnabled,
+            hasMiddleTabs: hasMiddleTabs,
+            middleTabDataList: middleTabDataList,
+        };
+    },
+
+    init: function () {
+        this.entityType = this.model.name;
+        this.scope = this.options.scope || this.entityType;
+
+        this.layoutName = this.options.layoutName || this.layoutName;
+        this.detailLayout = this.options.detailLayout || this.detailLayout;
+
+        this.type = this.options.type || this.type;
+
+        this.buttons = this.options.buttons || this.buttons;
+        this.buttonList = this.options.buttonList || this.buttonList;
+        this.dropdownItemList = this.options.dropdownItemList || this.dropdownItemList;
+
+        this.buttonList = Espo.Utils.cloneDeep(this.buttonList);
+        this.buttonEditList = Espo.Utils.cloneDeep(this.buttonEditList);
+        this.dropdownItemList = Espo.Utils.cloneDeep(this.dropdownItemList);
+        this.dropdownEditItemList = Espo.Utils.cloneDeep(this.dropdownEditItemList);
+
+        this.returnAfterCreate = this.options.returnAfterCreate;
+
+        this.returnUrl = this.options.returnUrl || this.returnUrl;
+        this.returnDispatchParams = this.options.returnDispatchParams || this.returnDispatchParams;
+
+        this.exit = this.options.exit || this.exit;
+
+        if (this.shortcutKeys) {
+            this.shortcutKeys = Espo.Utils.cloneDeep(this.shortcutKeys);
+        }
+    },
+
+    isDropdownItemListEmpty: function () {
+        if (this.dropdownItemList.length === 0) {
+            return true;
+        }
+
+        let isEmpty = true;
+
+        this.dropdownItemList.forEach(item => {
+            if (!item.hidden) {
+                isEmpty = false;
             }
+        });
 
-            let isEmpty = true;
+        return isEmpty;
+    },
 
-            this.dropdownItemList.forEach(item => {
-                if (!item.hidden) {
-                    isEmpty = false;
-                }
+    isDropdownEditItemListEmpty: function () {
+        if (this.dropdownEditItemList.length === 0) {
+            return true;
+        }
+
+        let isEmpty = true;
+
+        this.dropdownEditItemList.forEach(item => {
+            if (!item.hidden) {
+                isEmpty = false;
+            }
+        });
+
+        return isEmpty;
+    },
+
+    setup: function () {
+        if (typeof this.model === 'undefined') {
+            throw new Error('Model has not been injected into record view.');
+        }
+
+        this.recordHelper = new ViewRecordHelper(this.defaultFieldStates, this.defaultFieldStates);
+
+        this._initInlineEditSave();
+
+        let collection = this.collection = this.model.collection;
+
+        if (collection) {
+            this.listenTo(this.model, 'destroy', () => {
+                collection.remove(this.model.id);
+                collection.trigger('sync', {});
             });
 
-            return isEmpty;
-        },
-
-        isDropdownEditItemListEmpty: function () {
-            if (this.dropdownEditItemList.length === 0) {
-                return true;
+            if ('indexOfRecord' in this.options) {
+                this.indexOfRecord = this.options.indexOfRecord;
+            } else {
+                this.indexOfRecord = collection.indexOf(this.model);
             }
+        }
 
-            let isEmpty = true;
+        /** @type {Object.<string,*>|null} */
+        this.middlePanelDefs = {};
 
-            this.dropdownEditItemList.forEach(item => {
-                if (!item.hidden) {
-                    isEmpty = false;
-                }
-            });
+        /** @type {Object.<string,*>[]} */
+        this.middlePanelDefsList = [];
 
-            return isEmpty;
-        },
-
-        setup: function () {
-            if (typeof this.model === 'undefined') {
-                throw new Error('Model has not been injected into record view.');
+        if (this.getUser().isPortal() && !this.portalLayoutDisabled) {
+            if (
+                this.getMetadata().get(
+                    ['clientDefs', this.scope, 'additionalLayouts', this.layoutName + 'Portal']
+                )
+            ) {
+                this.layoutName += 'Portal';
             }
+        }
 
-            /** @type {module:view-record-helper.Class} */
-            this.recordHelper = new ViewRecordHelper(this.defaultFieldStates, this.defaultFieldStates);
+        this.numId = Math.floor((Math.random() * 10000) + 1);
 
-            this._initInlineEditSave();
+        // For testing purpose.
+        $(window).on('fetch-record.' + this.cid, () => this.handleRecordUpdate());
 
-            let collection = this.collection = this.model.collection;
-
-            if (collection) {
-                this.listenTo(this.model, 'destroy', () => {
-                    collection.remove(this.model.id);
-                    collection.trigger('sync', {});
-                });
-
-                if ('indexOfRecord' in this.options) {
-                    this.indexOfRecord = this.options.indexOfRecord;
-                } else {
-                    this.indexOfRecord = collection.indexOf(this.model);
-                }
+        this.once('remove', () => {
+            if (this.isChanged) {
+                this.resetModelChanges();
             }
+            this.setIsNotChanged();
 
-            /** @type {Object.<string,*>|null} */
-            this.middlePanelDefs = {};
+            $(window).off('scroll.detail-' + this.numId);
+            $(window).off('fetch-record.' + this.cid);
+        });
 
-            /** @type {Object.<string,*>[]} */
-            this.middlePanelDefsList = [];
+        this.id = Espo.Utils.toDom(this.entityType) + '-' +
+            Espo.Utils.toDom(this.type) + '-' + this.numId;
 
-            if (this.getUser().isPortal() && !this.portalLayoutDisabled) {
-                if (
-                    this.getMetadata().get(
-                        ['clientDefs', this.scope, 'additionalLayouts', this.layoutName + 'Portal']
-                    )
-                ) {
-                    this.layoutName += 'Portal';
-                }
+        this.isNew = this.model.isNew();
+
+        if (!this.editModeDisabled) {
+            if ('editModeDisabled' in this.options) {
+                this.editModeDisabled = this.options.editModeDisabled;
             }
+        }
 
-            this.numId = Math.floor((Math.random() * 10000) + 1);
+        this.confirmLeaveDisabled = this.options.confirmLeaveDisabled || this.confirmLeaveDisabled;
 
-            // For testing purpose.
-            $(window).on('fetch-record.' + this.cid, () => this.handleRecordUpdate());
+        this.buttonsDisabled = this.options.buttonsDisabled || this.buttonsDisabled;
+
+        // for backward compatibility
+        // @todo remove
+        if ('buttonsPosition' in this.options && !this.options.buttonsPosition) {
+            this.buttonsDisabled = true;
+        }
+
+        if ('isWide' in this.options) {
+            this.isWide = this.options.isWide;
+        }
+
+        if ('sideView' in this.options) {
+            this.sideView = this.options.sideView;
+        }
+
+        if ('bottomView' in this.options) {
+            this.bottomView = this.options.bottomView;
+        }
+
+        this.sideDisabled = this.options.sideDisabled || this.sideDisabled;
+        this.bottomDisabled = this.options.bottomDisabled || this.bottomDisabled;
+
+        this.readOnly = this.options.readOnly || this.readOnly;
+
+        if (!this.readOnly && !this.isNew) {
+            this.readOnly = this.getMetadata()
+                .get(['clientDefs', this.scope, 'editDisabled']) || false;
+        }
+
+        if (this.getMetadata().get(['clientDefs', this.scope, 'createDisabled'])) {
+            this.duplicateAction = false;
+        }
+
+        if ((this.getConfig().get('currencyList') || []).length <= 1) {
+            this.convertCurrencyAction = false;
+        }
+
+        this.readOnlyLocked = this.readOnly;
+
+        this.inlineEditDisabled = this.inlineEditDisabled ||
+            this.getMetadata().get(['clientDefs', this.scope, 'inlineEditDisabled']) ||
+            false;
+
+        this.inlineEditDisabled = this.options.inlineEditDisabled || this.inlineEditDisabled;
+        this.navigateButtonsDisabled = this.options.navigateButtonsDisabled ||
+            this.navigateButtonsDisabled;
+        this.portalLayoutDisabled = this.options.portalLayoutDisabled || this.portalLayoutDisabled;
+        this.dynamicLogicDefs = this.options.dynamicLogicDefs || this.dynamicLogicDefs;
+
+        this.accessControlDisabled = this.options.accessControlDisabled || this.accessControlDisabled;
+
+        this.setupActionItems();
+        this.setupBeforeFinal();
+
+        this.on('after:render', () => {
+            this.initElementReferences();
+        });
+
+        if (
+            !this.isNew &&
+            !!this.getHelper().webSocketManager &&
+            this.getMetadata().get(['scopes', this.entityType, 'object'])
+        ) {
+            this.subscribeToWebSocket();
 
             this.once('remove', () => {
-                if (this.isChanged) {
-                    this.resetModelChanges();
+                if (this.isSubscribedToWebSocket) {
+                    this.unsubscribeFromWebSocket();
                 }
-                this.setIsNotChanged();
-
-                $(window).off('scroll.detail-' + this.numId);
-                $(window).off('fetch-record.' + this.cid);
             });
+        }
 
-            this.id = Espo.Utils.toDom(this.entityType) + '-' +
-                Espo.Utils.toDom(this.type) + '-' + this.numId;
+        this.getHelper().processSetupHandlers(this, this.setupHandlerType);
 
-            this.isNew = this.model.isNew();
+        this.initInlineEditDynamicWithLogicInteroperability();
 
-            if (!this.editModeDisabled) {
-                if ('editModeDisabled' in this.options) {
-                    this.editModeDisabled = this.options.editModeDisabled;
-                }
-            }
+        this.forcePatchAttributeDependencyMap = this.getMetadata()
+            .get(['clientDefs', this.scope, 'forcePatchAttributeDependencyMap']) || {};
+    },
 
-            this.confirmLeaveDisabled = this.options.confirmLeaveDisabled || this.confirmLeaveDisabled;
+    setupBeforeFinal: function () {
+        if (!this.accessControlDisabled) {
+            this.manageAccess();
+        }
 
-            this.buttonsDisabled = this.options.buttonsDisabled || this.buttonsDisabled;
+        this.attributes = this.model.getClonedAttributes();
 
-            // for backward compatibility
-            // @todo remove
-            if ('buttonsPosition' in this.options && !this.options.buttonsPosition) {
-                this.buttonsDisabled = true;
-            }
-
-            if ('isWide' in this.options) {
-                this.isWide = this.options.isWide;
-            }
-
-            if ('sideView' in this.options) {
-                this.sideView = this.options.sideView;
-            }
-
-            if ('bottomView' in this.options) {
-                this.bottomView = this.options.bottomView;
-            }
-
-            this.sideDisabled = this.options.sideDisabled || this.sideDisabled;
-            this.bottomDisabled = this.options.bottomDisabled || this.bottomDisabled;
-
-            this.readOnly = this.options.readOnly || this.readOnly;
-
-            if (!this.readOnly && !this.isNew) {
-                this.readOnly = this.getMetadata()
-                    .get(['clientDefs', this.scope, 'editDisabled']) || false;
-            }
-
-            if (this.getMetadata().get(['clientDefs', this.scope, 'createDisabled'])) {
-                this.duplicateAction = false;
-            }
-
-            if ((this.getConfig().get('currencyList') || []).length <= 1) {
-                this.convertCurrencyAction = false;
-            }
-
-            this.readOnlyLocked = this.readOnly;
-
-            this.inlineEditDisabled = this.inlineEditDisabled ||
-                this.getMetadata().get(['clientDefs', this.scope, 'inlineEditDisabled']) ||
-                false;
-
-            this.inlineEditDisabled = this.options.inlineEditDisabled || this.inlineEditDisabled;
-            this.navigateButtonsDisabled = this.options.navigateButtonsDisabled ||
-                this.navigateButtonsDisabled;
-            this.portalLayoutDisabled = this.options.portalLayoutDisabled || this.portalLayoutDisabled;
-            this.dynamicLogicDefs = this.options.dynamicLogicDefs || this.dynamicLogicDefs;
-
-            this.accessControlDisabled = this.options.accessControlDisabled || this.accessControlDisabled;
-
-            this.setupActionItems();
-            this.setupBeforeFinal();
-
-            this.on('after:render', () => {
-                this.initElementReferences();
-            });
-
-            if (
-                !this.isNew &&
-                !!this.getHelper().webSocketManager &&
-                this.getMetadata().get(['scopes', this.entityType, 'object'])
-            ) {
-                this.subscribeToWebSocket();
-
-                this.once('remove', () => {
-                    if (this.isSubscribedToWebSocket) {
-                        this.unsubscribeFromWebSocket();
-                    }
-                });
-            }
-
-            this.getHelper().processSetupHandlers(this, this.setupHandlerType);
-
-            this.initInlineEditDynamicWithLogicInteroperability();
-
-            this.forcePatchAttributeDependencyMap = this.getMetadata()
-                .get(['clientDefs', this.scope, 'forcePatchAttributeDependencyMap']) || {};
-        },
-
-        setupBeforeFinal: function () {
-            if (!this.accessControlDisabled) {
-                this.manageAccess();
-            }
+        if (this.options.attributes) {
+            this.model.set(this.options.attributes);
+        }
 
+        this.listenTo(this.model, 'sync', () => {
             this.attributes = this.model.getClonedAttributes();
+        });
 
-            if (this.options.attributes) {
-                this.model.set(this.options.attributes);
-            }
-
-            this.listenTo(this.model, 'sync', () => {
-                this.attributes = this.model.getClonedAttributes();
-            });
-
-            this.listenTo(this.model, 'change', (m, o) => {
-                if (o.sync) {
-                    for (let attribute in m.attributes) {
-                        if (!m.hasChanged(attribute)) {
-                            continue;
-                        }
-
-                        this.attributes[attribute] = Espo.Utils.cloneDeep(
-                            m.get(attribute)
-                        );
+        this.listenTo(this.model, 'change', (m, o) => {
+            if (o.sync) {
+                for (let attribute in m.attributes) {
+                    if (!m.hasChanged(attribute)) {
+                        continue;
                     }
 
-                    return;
-                }
-
-                if (this.mode === this.MODE_EDIT || this.inlineEditModeIsOn) {
-                    this.setIsChanged();
-                }
-            });
-
-            let dependencyDefs = Espo.Utils.clone(
-                this.getMetadata().get(['clientDefs', this.model.name, 'formDependency']) || {}
-            );
-
-            this.dependencyDefs = _.extend(dependencyDefs, this.dependencyDefs);
-
-            this.initDependancy();
-
-            let dynamicLogic = Espo.Utils.clone(
-                this.getMetadata().get(['clientDefs', this.model.name, 'dynamicLogic']) || {}
-            );
-
-            this.dynamicLogicDefs = _.extend(dynamicLogic, this.dynamicLogicDefs);
-
-            this.initDynamicLogic();
-            this.setupFieldLevelSecurity();
-            this.initDynamicHandler();
-        },
-
-        /**
-         * @private
-         */
-        _initInlineEditSave: function () {
-            this.listenTo(this.recordHelper, 'inline-edit-save', (field, o) => {
-                this.inlineEditSave(field, o);
-            });
-        },
-
-        /**
-         * @param {string} field
-         * @param {module:views/record/base~saveOptions} [options]
-         */
-        inlineEditSave: function (field, options) {
-            let view = this.getFieldView(field);
-
-            if (!view) {
-                throw new Error(`No field '${field}'.`);
-            }
-
-            options = _.extend({
-                inline: true,
-                field: field,
-                afterValidate: () => {
-                    if (options.bypassClose) {
-                        return;
-                    }
-
-                    view.inlineEditClose(true)
-                },
-            }, options || {});
-
-            this.save(options)
-                .then(() => {
-                    view.trigger('after:inline-save');
-                    view.trigger('after:save');
-
-
-                    if (options.bypassClose) {
-                        view.initialAttributes = this.model.getClonedAttributes();
-                    }
-                })
-                .catch(reason => {
-                    if (reason === 'notModified') {
-                        if (options.bypassClose) {
-                            return;
-                        }
-
-                        view.inlineEditClose(true);
-
-                        return;
-                    }
-
-                    if (reason === 'error') {
-                        if (options.bypassClose) {
-                            return;
-                        }
-
-                        view.inlineEdit();
-                    }
-                });
-        },
-
-        /**
-         * @private
-         */
-        initInlineEditDynamicWithLogicInteroperability: function () {
-            let blockEdit = false;
-
-            let process = (type, field) => {
-                if (!this.inlineEditModeIsOn || this.editModeDisabled) {
-                    return;
-                }
-
-                if (blockEdit) {
-                    return;
-                }
-
-                if (type === 'required') {
-                    let fieldView = this.getFieldView(field);
-
-                    if (fieldView.validateRequired) {
-                        fieldView.suspendValidationMessage();
-
-                        try {
-                            if (!fieldView.validateRequired()) {
-                                return;
-                            }
-                        }
-                        catch (e) {}
-                    }
-                }
-
-                blockEdit = true;
-
-                setTimeout(() => blockEdit = false, 300);
-
-                setTimeout(() => {
-                    this.setEditMode();
-
-                    this.getFieldViewList()
-                        .forEach(view => view.removeInlineEditLinks());
-                }, 10);
-            };
-
-            this.on('set-field-required', (field) => process('required', field));
-            this.on('set-field-option-list', (field) => process('options', field));
-            this.on('reset-field-option-list', (field) => process('options', field));
-        },
-
-        /**
-         * @private
-         */
-        initDynamicHandler: function () {
-            let dynamicHandlerClassName = this.dynamicHandlerClassName ||
-                this.getMetadata().get(['clientDefs', this.scope, 'dynamicHandler']);
-
-            let init = dynamicHandler => {
-                this.listenTo(this.model, 'change', (model, o) => {
-                    if ('onChange' in dynamicHandler) {
-                        dynamicHandler.onChange.call(dynamicHandler, model, o);
-                    }
-
-                    let changedAttributes = model.changedAttributes();
-
-                    for (let attribute in changedAttributes) {
-                        let methodName = 'onChange' + Espo.Utils.upperCaseFirst(attribute);
-
-                        if (methodName in dynamicHandler) {
-                            dynamicHandler[methodName]
-                                .call(dynamicHandler, model, changedAttributes[attribute], o);
-                        }
-                    }
-                });
-
-                if ('init' in dynamicHandler) {
-                    dynamicHandler.init();
-                }
-            };
-
-            if (dynamicHandlerClassName) {
-                this.wait(
-                    new Promise(resolve => {
-                        require(dynamicHandlerClassName, (DynamicHandler) => {
-                            let dynamicHandler = this.dynamicHandler = new DynamicHandler(this);
-
-                            init(dynamicHandler);
-
-                            resolve();
-                        });
-                    })
-                );
-            }
-
-            let handlerList = this.getMetadata().get(['clientDefs', this.scope, 'dynamicHandlerList']) || [];
-
-            if (handlerList.length) {
-                let self = this;
-
-                let promiseList = [];
-
-                handlerList.forEach((className) => {
-                    promiseList.push(
-                        new Promise(resolve => {
-                            require(className, (DynamicHandler) => {
-                                resolve(new DynamicHandler(self));
-                            });
-                        })
+                    this.attributes[attribute] = Espo.Utils.cloneDeep(
+                        m.get(attribute)
                     );
-                });
+                }
 
-                this.wait(
-                    Promise.all(promiseList).then(list => {
-                        list.forEach((dynamicHandler) => {
-                            init(dynamicHandler);
+                return;
+            }
+
+            if (this.mode === this.MODE_EDIT || this.inlineEditModeIsOn) {
+                this.setIsChanged();
+            }
+        });
+
+        let dependencyDefs = Espo.Utils.clone(
+            this.getMetadata().get(['clientDefs', this.model.name, 'formDependency']) || {}
+        );
+
+        this.dependencyDefs = _.extend(dependencyDefs, this.dependencyDefs);
+
+        this.initDependancy();
+
+        let dynamicLogic = Espo.Utils.clone(
+            this.getMetadata().get(['clientDefs', this.model.name, 'dynamicLogic']) || {}
+        );
+
+        this.dynamicLogicDefs = _.extend(dynamicLogic, this.dynamicLogicDefs);
+
+        this.initDynamicLogic();
+        this.setupFieldLevelSecurity();
+        this.initDynamicHandler();
+    },
+
+    /**
+     * @private
+     */
+    _initInlineEditSave: function () {
+        this.listenTo(this.recordHelper, 'inline-edit-save', (field, o) => {
+            this.inlineEditSave(field, o);
+        });
+    },
+
+    /**
+     * @param {string} field
+     * @param {module:views/record/base~saveOptions} [options]
+     */
+    inlineEditSave: function (field, options) {
+        let view = this.getFieldView(field);
+
+        if (!view) {
+            throw new Error(`No field '${field}'.`);
+        }
+
+        options = _.extend({
+            inline: true,
+            field: field,
+            afterValidate: () => {
+                if (options.bypassClose) {
+                    return;
+                }
+
+                view.inlineEditClose(true)
+            },
+        }, options || {});
+
+        this.save(options)
+            .then(() => {
+                view.trigger('after:inline-save');
+                view.trigger('after:save');
+
+
+                if (options.bypassClose) {
+                    view.initialAttributes = this.model.getClonedAttributes();
+                }
+            })
+            .catch(reason => {
+                if (reason === 'notModified') {
+                    if (options.bypassClose) {
+                        return;
+                    }
+
+                    view.inlineEditClose(true);
+
+                    return;
+                }
+
+                if (reason === 'error') {
+                    if (options.bypassClose) {
+                        return;
+                    }
+
+                    view.inlineEdit();
+                }
+            });
+    },
+
+    /**
+     * @private
+     */
+    initInlineEditDynamicWithLogicInteroperability: function () {
+        let blockEdit = false;
+
+        let process = (type, field) => {
+            if (!this.inlineEditModeIsOn || this.editModeDisabled) {
+                return;
+            }
+
+            if (blockEdit) {
+                return;
+            }
+
+            if (type === 'required') {
+                let fieldView = this.getFieldView(field);
+
+                if (fieldView.validateRequired) {
+                    fieldView.suspendValidationMessage();
+
+                    try {
+                        if (!fieldView.validateRequired()) {
+                            return;
+                        }
+                    }
+                    catch (e) {}
+                }
+            }
+
+            blockEdit = true;
+
+            setTimeout(() => blockEdit = false, 300);
+
+            setTimeout(() => {
+                this.setEditMode();
+
+                this.getFieldViewList()
+                    .forEach(view => view.removeInlineEditLinks());
+            }, 10);
+        };
+
+        this.on('set-field-required', (field) => process('required', field));
+        this.on('set-field-option-list', (field) => process('options', field));
+        this.on('reset-field-option-list', (field) => process('options', field));
+    },
+
+    /**
+     * @private
+     */
+    initDynamicHandler: function () {
+        let dynamicHandlerClassName = this.dynamicHandlerClassName ||
+            this.getMetadata().get(['clientDefs', this.scope, 'dynamicHandler']);
+
+        let init = dynamicHandler => {
+            this.listenTo(this.model, 'change', (model, o) => {
+                if ('onChange' in dynamicHandler) {
+                    dynamicHandler.onChange.call(dynamicHandler, model, o);
+                }
+
+                let changedAttributes = model.changedAttributes();
+
+                for (let attribute in changedAttributes) {
+                    let methodName = 'onChange' + Espo.Utils.upperCaseFirst(attribute);
+
+                    if (methodName in dynamicHandler) {
+                        dynamicHandler[methodName]
+                            .call(dynamicHandler, model, changedAttributes[attribute], o);
+                    }
+                }
+            });
+
+            if ('init' in dynamicHandler) {
+                dynamicHandler.init();
+            }
+        };
+
+        if (dynamicHandlerClassName) {
+            this.wait(
+                new Promise(resolve => {
+                    Espo.loader.require(dynamicHandlerClassName, DynamicHandler => {
+                        let dynamicHandler = this.dynamicHandler = new DynamicHandler(this);
+
+                        init(dynamicHandler);
+
+                        resolve();
+                    });
+                })
+            );
+        }
+
+        let handlerList = this.getMetadata().get(['clientDefs', this.scope, 'dynamicHandlerList']) || [];
+
+        if (handlerList.length) {
+            let self = this;
+
+            let promiseList = [];
+
+            handlerList.forEach((className) => {
+                promiseList.push(
+                    new Promise(resolve => {
+                        Espo.loader.require(className, DynamicHandler => {
+                            resolve(new DynamicHandler(self));
                         });
                     })
                 );
-            }
-        },
+            });
 
-        setupFinal: function () {
-            this.build();
+            this.wait(
+                Promise.all(promiseList).then(list => {
+                    list.forEach((dynamicHandler) => {
+                        init(dynamicHandler);
+                    });
+                })
+            );
+        }
+    },
 
-            if (this.shortcutKeys && this.options.shortcutKeysEnabled) {
-                this.events['keydown.record-detail'] = e => {
-                    let key = Espo.Utils.getKeyFromKeyEvent(e);
+    setupFinal: function () {
+        this.build();
 
-                    if (typeof this.shortcutKeys[key] === 'function') {
-                        this.shortcutKeys[key].call(this, e);
+        if (this.shortcutKeys && this.options.shortcutKeysEnabled) {
+            this.events['keydown.record-detail'] = e => {
+                let key = Espo.Utils.getKeyFromKeyEvent(e);
 
-                        return;
-                    }
+                if (typeof this.shortcutKeys[key] === 'function') {
+                    this.shortcutKeys[key].call(this, e);
 
-                    let actionName = this.shortcutKeys[key];
+                    return;
+                }
 
-                    if (!actionName) {
-                        return;
-                    }
+                let actionName = this.shortcutKeys[key];
 
-                    e.preventDefault();
-                    e.stopPropagation();
+                if (!actionName) {
+                    return;
+                }
 
-                    let methodName = 'action' + Espo.Utils.upperCaseFirst(actionName);
+                e.preventDefault();
+                e.stopPropagation();
 
-                    this[methodName]();
-                };
-            }
+                let methodName = 'action' + Espo.Utils.upperCaseFirst(actionName);
 
-            if (!this.options.focusForCreate) {
-                this.once('after:render', () => this.focusOnFirstDiv());
-            }
-        },
+                this[methodName]();
+            };
+        }
 
-        setIsChanged: function () {
-            this.isChanged = true;
+        if (!this.options.focusForCreate) {
+            this.once('after:render', () => this.focusOnFirstDiv());
+        }
+    },
 
-            if (this.confirmLeaveDisabled) {
-                return;
-            }
+    setIsChanged: function () {
+        this.isChanged = true;
 
-            this.setConfirmLeaveOut(true);
-        },
+        if (this.confirmLeaveDisabled) {
+            return;
+        }
 
-        setIsNotChanged: function () {
-            this.isChanged = false;
+        this.setConfirmLeaveOut(true);
+    },
 
-            if (this.confirmLeaveDisabled) {
-                return;
-            }
+    setIsNotChanged: function () {
+        this.isChanged = false;
 
-            this.setConfirmLeaveOut(false);
-        },
+        if (this.confirmLeaveDisabled) {
+            return;
+        }
 
-        switchToModelByIndex: function (indexOfRecord) {
-            let collection = this.model.collection || this.collection;
+        this.setConfirmLeaveOut(false);
+    },
+
+    switchToModelByIndex: function (indexOfRecord) {
+        let collection = this.model.collection || this.collection;
+
+        if (!collection) {
+            return;
+        }
+
+        let model = collection.at(indexOfRecord);
+
+        if (!model) {
+            throw new Error("Model is not found in collection by index.");
+        }
+
+        let id = model.id;
+        let scope = model.name || this.scope;
+
+        let url;
+
+        if (this.mode === this.MODE_EDIT) {
+            url = '#' + scope + '/edit/' + id;
+        } else {
+            url = '#' + scope + '/view/' + id;
+        }
+
+        this.getRouter().navigate('#' + scope + '/view/' + id, {trigger: false});
+
+        this.getRouter().dispatch(scope, 'view', {
+            id: id,
+            model: model,
+            indexOfRecord: indexOfRecord,
+            rootUrl: this.options.rootUrl,
+        });
+    },
+
+    actionPrevious: function () {
+        this.model.abortLastFetch();
+
+        let collection;
+
+        if (!this.model.collection) {
+            collection = this.collection;
 
             if (!collection) {
                 return;
             }
 
-            let model = collection.at(indexOfRecord);
+            this.indexOfRecord--;
 
-            if (!model) {
-                throw new Error("Model is not found in collection by index.");
+            if (this.indexOfRecord < 0) {
+                this.indexOfRecord = 0;
             }
+        }
+        else {
+            collection = this.model.collection;
+        }
 
-            let id = model.id;
-            let scope = model.name || this.scope;
+        if (!(this.indexOfRecord > 0)) {
+            return;
+        }
 
-            let url;
+        let indexOfRecord = this.indexOfRecord - 1;
 
-            if (this.mode === this.MODE_EDIT) {
-                url = '#' + scope + '/edit/' + id;
-            } else {
-                url = '#' + scope + '/view/' + id;
-            }
+        this.switchToModelByIndex(indexOfRecord);
+    },
 
-            this.getRouter().navigate('#' + scope + '/view/' + id, {trigger: false});
+    actionNext: function () {
+        this.model.abortLastFetch();
 
-            this.getRouter().dispatch(scope, 'view', {
-                id: id,
-                model: model,
-                indexOfRecord: indexOfRecord,
-                rootUrl: this.options.rootUrl,
-            });
-        },
+        let collection;
 
-        actionPrevious: function () {
-            this.model.abortLastFetch();
+        if (!this.model.collection) {
+            collection = this.collection;
 
-            let collection;
-
-            if (!this.model.collection) {
-                collection = this.collection;
-
-                if (!collection) {
-                    return;
-                }
-
-                this.indexOfRecord--;
-
-                if (this.indexOfRecord < 0) {
-                    this.indexOfRecord = 0;
-                }
-            }
-            else {
-                collection = this.model.collection;
-            }
-
-            if (!(this.indexOfRecord > 0)) {
+            if (!collection) {
                 return;
             }
 
-            let indexOfRecord = this.indexOfRecord - 1;
+            this.indexOfRecord--;
 
+            if (this.indexOfRecord < 0) {
+                this.indexOfRecord = 0;
+            }
+        }
+        else {
+            collection = this.model.collection;
+        }
+
+        if (!(this.indexOfRecord < collection.total - 1) && collection.total >= 0) {
+            return;
+        }
+
+        if (collection.total === -2 && this.indexOfRecord >= collection.length - 1) {
+            return;
+        }
+
+        let indexOfRecord = this.indexOfRecord + 1;
+
+        if (indexOfRecord <= collection.length - 1) {
             this.switchToModelByIndex(indexOfRecord);
-        },
 
-        actionNext: function () {
-            this.model.abortLastFetch();
+            return;
+        }
 
-            let collection;
-
-            if (!this.model.collection) {
-                collection = this.collection;
-
-                if (!collection) {
-                    return;
-                }
-
-                this.indexOfRecord--;
-
-                if (this.indexOfRecord < 0) {
-                    this.indexOfRecord = 0;
-                }
-            }
-            else {
-                collection = this.model.collection;
-            }
-
-            if (!(this.indexOfRecord < collection.total - 1) && collection.total >= 0) {
-                return;
-            }
-
-            if (collection.total === -2 && this.indexOfRecord >= collection.length - 1) {
-                return;
-            }
-
-            let indexOfRecord = this.indexOfRecord + 1;
-
-            if (indexOfRecord <= collection.length - 1) {
+        collection
+            .fetch({
+                more: true,
+                remove: false,
+            })
+            .then(() => {
                 this.switchToModelByIndex(indexOfRecord);
-
-                return;
-            }
-
-            collection
-                .fetch({
-                    more: true,
-                    remove: false,
-                })
-                .then(() => {
-                    this.switchToModelByIndex(indexOfRecord);
-                });
-        },
-
-        actionViewPersonalData: function () {
-            this.createView('viewPersonalData', 'views/personal-data/modals/personal-data', {
-                model: this.model
-            }, view => {
-                view.render();
-
-                this.listenToOnce(view, 'erase', () => {
-                    this.clearView('viewPersonalData');
-                    this.model.fetch();
-                });
             });
-        },
+    },
 
-        actionViewFollowers: function (data) {
-            let viewName = this.getMetadata().get(
-                    ['clientDefs', this.model.name, 'relationshipPanels', 'followers', 'viewModalView']
-                ) ||
-                this.getMetadata().get(['clientDefs', 'User', 'modalViews', 'relatedList']) ||
-                'views/modals/followers-list';
+    actionViewPersonalData: function () {
+        this.createView('viewPersonalData', 'views/personal-data/modals/personal-data', {
+            model: this.model
+        }, view => {
+            view.render();
 
-            let selectDisabled =
-                !this.getUser().isAdmin() &&
-                this.getAcl().get('followerManagementPermission') === 'no' &&
-                this.getAcl().get('portalPermission') === 'no';
+            this.listenToOnce(view, 'erase', () => {
+                this.clearView('viewPersonalData');
+                this.model.fetch();
+            });
+        });
+    },
 
-            let options = {
-                model: this.model,
-                link: 'followers',
-                scope: 'User',
-                title: this.translate('Followers'),
-                filtersDisabled: true,
-                url: this.model.entityType + '/' + this.model.id + '/followers',
-                createDisabled: true,
-                selectDisabled: selectDisabled,
-                rowActionsView: 'views/user/record/row-actions/relationship-followers',
-            };
+    actionViewFollowers: function (data) {
+        let viewName = this.getMetadata().get(
+                ['clientDefs', this.model.name, 'relationshipPanels', 'followers', 'viewModalView']
+            ) ||
+            this.getMetadata().get(['clientDefs', 'User', 'modalViews', 'relatedList']) ||
+            'views/modals/followers-list';
 
-            if (data.viewOptions) {
-                for (let item in data.viewOptions) {
-                    options[item] = data.viewOptions[item];
-                }
+        let selectDisabled =
+            !this.getUser().isAdmin() &&
+            this.getAcl().getPermissionLevel('followerManagementPermission') === 'no' &&
+            this.getAcl().getPermissionLevel('portalPermission') === 'no';
+
+        let options = {
+            model: this.model,
+            link: 'followers',
+            scope: 'User',
+            title: this.translate('Followers'),
+            filtersDisabled: true,
+            url: this.model.entityType + '/' + this.model.id + '/followers',
+            createDisabled: true,
+            selectDisabled: selectDisabled,
+            rowActionsView: 'views/user/record/row-actions/relationship-followers',
+        };
+
+        if (data.viewOptions) {
+            for (let item in data.viewOptions) {
+                options[item] = data.viewOptions[item];
             }
+        }
 
-            Espo.Ui.notify(' ... ');
+        Espo.Ui.notify(' ... ');
 
-            this.createView('modalRelatedList', viewName, options, (view) => {
-                Espo.Ui.notify(false);
+        this.createView('modalRelatedList', viewName, options, (view) => {
+            Espo.Ui.notify(false);
 
-                view.render();
+            view.render();
 
-                this.listenTo(view, 'action', (action, data, e) => {
-                    let method = 'action' + Espo.Utils.upperCaseFirst(action);
+            this.listenTo(view, 'action', (action, data, e) => {
+                let method = 'action' + Espo.Utils.upperCaseFirst(action);
 
-                    if (typeof this[method] === 'function') {
-                        this[method](data, e);
+                if (typeof this[method] === 'function') {
+                    this[method](data, e);
 
-                        e.preventDefault();
+                    e.preventDefault();
+                }
+            });
+
+            this.listenToOnce(view, 'close', () => {
+                this.clearView('modalRelatedList');
+            });
+
+            view.listenTo(this.model, 'after:relate:followers', () => {
+                this.model.fetch();
+            });
+
+            view.listenTo(this.model, 'after:unrelate:followers', () => {
+                this.model.fetch();
+            });
+        });
+    },
+
+    actionPrintPdf: function () {
+        this.createView('pdfTemplate', 'views/modals/select-template', {
+            entityType: this.model.name,
+        }, (view) => {
+            view.render();
+
+            this.listenToOnce(view, 'select', (model) => {
+                this.clearView('pdfTemplate');
+
+                window.open(
+                    '?entryPoint=pdf&entityType=' +
+                    this.model.name+'&entityId=' +
+                    this.model.id+'&templateId=' + model.id, '_blank'
+                );
+            });
+        });
+    },
+
+    afterSave: function () {
+        if (this.isNew) {
+            this.notify('Created', 'success');
+        }
+        else {
+            this.notify('Saved', 'success');
+        }
+
+        this.enableActionItems();
+
+        this.setIsNotChanged();
+
+        setTimeout(() => {
+            this.unblockUpdateWebSocket();
+        }, this.blockUpdateWebSocketPeriod || 500);
+    },
+
+    beforeSave: function () {
+        Espo.Ui.notify(this.translate('saving', 'messages'));
+
+        this.blockUpdateWebSocket();
+    },
+
+    beforeBeforeSave: function () {
+        this.disableActionItems();
+    },
+
+    afterSaveError: function () {
+        this.enableActionItems();
+    },
+
+    afterNotModified: function () {
+        let msg = this.translate('notModified', 'messages');
+
+        Espo.Ui.warning(msg, 'warning');
+
+        this.enableActionItems();
+        this.setIsNotChanged();
+    },
+
+    afterNotValid: function () {
+        this.notify('Not valid', 'error');
+
+        this.enableActionItems();
+    },
+
+    errorHandlerDuplicate: function (duplicates) {
+        this.notify(false);
+
+        this.createView('duplicate', 'views/modals/duplicate', {
+            scope: this.entityType,
+            duplicates: duplicates,
+            model: this.model,
+        }, (view) => {
+            view.render();
+
+            this.listenToOnce(view, 'save', () => {
+                this.actionSave({
+                    options: {
+                        headers: {
+                            'X-Skip-Duplicate-Check': 'true',
+                        }
                     }
                 });
-
-                this.listenToOnce(view, 'close', () => {
-                    this.clearView('modalRelatedList');
-                });
-
-                view.listenTo(this.model, 'after:relate:followers', () => {
-                    this.model.fetch();
-                });
-
-                view.listenTo(this.model, 'after:unrelate:followers', () => {
-                    this.model.fetch();
-                });
             });
-        },
+        });
+    },
 
-        actionPrintPdf: function () {
-            this.createView('pdfTemplate', 'views/modals/select-template', {
-                entityType: this.model.name,
-            }, (view) => {
-                view.render();
+    errorHandlerModified: function (data, options) {
+        Espo.Ui.notify(false);
 
-                this.listenToOnce(view, 'select', (model) => {
-                    this.clearView('pdfTemplate');
+        let versionNumber = data.versionNumber;
+        let values = data.values || {};
 
-                    window.open(
-                        '?entryPoint=pdf&entityType=' +
-                        this.model.name+'&entityId=' +
-                        this.model.id+'&templateId=' + model.id, '_blank'
-                    );
-                });
+        let attributeList = Object.keys(values);
+
+        let diffAttributeList = [];
+
+        attributeList.forEach(attribute => {
+            if (this.attributes[attribute] !== values[attribute]) {
+                diffAttributeList.push(attribute);
+            }
+        });
+
+        if (diffAttributeList.length === 0) {
+            setTimeout(() => {
+                this.model.set('versionNumber', versionNumber, {silent: true});
+                this.attributes.versionNumber = versionNumber;
+
+                if (options.inline && options.field) {
+                    this.inlineEditSave(options.field);
+
+                    return;
+                }
+
+                this.actionSave();
+            }, 5);
+
+            return;
+        }
+
+        this.createView(
+            'dialog',
+            'views/modals/resolve-save-conflict',
+            {
+                model: this.model,
+                attributeList: diffAttributeList,
+                currentAttributes: Espo.Utils.cloneDeep(this.model.attributes),
+                originalAttributes: Espo.Utils.cloneDeep(this.attributes),
+                actualAttributes: Espo.Utils.cloneDeep(values),
+            }
+        )
+        .then(view => {
+            view.render();
+
+            this.listenTo(view, 'resolve', () => {
+                this.model.set('versionNumber', versionNumber, {silent: true});
+                this.attributes.versionNumber = versionNumber;
+
+                for (let attribute in values) {
+                    this.setInitialAttributeValue(attribute, values[attribute]);
+                }
             });
-        },
+        });
+    },
 
-        afterSave: function () {
-            if (this.isNew) {
-                this.notify('Created', 'success');
+    /**
+     * Get the middle-view.
+     *
+     * @return {module:views/record/detail-middle}
+     */
+    getMiddleView: function () {
+        return this.getView('middle');
+    },
+
+    setReadOnly: function () {
+        if (!this.readOnlyLocked) {
+            this.readOnly = true;
+        }
+
+        let bottomView = this.getView('bottom');
+
+        if (bottomView && 'setReadOnly' in bottomView) {
+            bottomView.setReadOnly();
+        }
+
+        let sideView = this.getView('side');
+
+        if (sideView && 'setReadOnly' in sideView) {
+            sideView.setReadOnly();
+        }
+
+        this.getFieldList().forEach((field) => {
+            this.setFieldReadOnly(field);
+        });
+    },
+
+    setNotReadOnly: function (onlyNotSetAsReadOnly) {
+        if (!this.readOnlyLocked) {
+            this.readOnly = false;
+        }
+
+        let bottomView = this.getView('bottom');
+
+        if (bottomView && 'setNotReadOnly' in bottomView) {
+            bottomView.setNotReadOnly(onlyNotSetAsReadOnly);
+        }
+
+        let sideView = this.getView('side');
+
+        if (sideView && 'setNotReadOnly' in sideView) {
+            sideView.setNotReadOnly(onlyNotSetAsReadOnly);
+        }
+
+        this.getFieldList().forEach((field) => {
+            if (onlyNotSetAsReadOnly) {
+                if (this.recordHelper.getFieldStateParam(field, 'readOnly')) {
+                    return;
+                }
+            }
+
+            this.setFieldNotReadOnly(field);
+        });
+    },
+
+    manageAccessEdit: function (second) {
+        if (this.isNew) {
+            return;
+        }
+
+        let editAccess = this.getAcl().checkModel(this.model, 'edit', true);
+
+        if (!editAccess || this.readOnlyLocked) {
+            this.readOnly = true;
+
+            this.hideActionItem('edit');
+
+            if (this.selfAssignAction) {
+                this.hideActionItem('selfAssign');
+            }
+        } else {
+            this.showActionItem('edit');
+
+            if (this.selfAssignAction) {
+                this.hideActionItem('selfAssign');
+
+                if (this.model.has('assignedUserId')) {
+                    if (!this.model.get('assignedUserId')) {
+                        this.showActionItem('selfAssign');
+                    }
+                }
+            }
+
+            if (!this.readOnlyLocked) {
+                if (this.readOnly && second) {
+                    if (this.isReady) {
+                        this.setNotReadOnly(true);
+                    }
+                    else {
+                        this.on('ready', () => this.setNotReadOnly(true));
+                    }
+                }
+
+                this.readOnly = false;
+            }
+        }
+
+        if (editAccess === null) {
+            this.listenToOnce(this.model, 'sync', () => {
+                this.manageAccessEdit(true);
+            });
+        }
+    },
+
+    manageAccessDelete: function (second) {
+        if (this.isNew) {
+            return;
+        }
+
+        let deleteAccess = this.getAcl().checkModel(this.model, 'delete', true);
+
+        if (!deleteAccess) {
+            this.hideActionItem('delete');
+        } else {
+            this.showActionItem('delete');
+        }
+
+        if (deleteAccess === null) {
+            this.listenToOnce(this.model, 'sync', () => {
+                this.manageAccessDelete(true);
+            });
+        }
+    },
+
+    manageAccessStream: function (second) {
+        if (this.isNew) {
+            return;
+        }
+
+        if (
+            ~['no', 'own'].indexOf(this.getAcl().getLevel('User', 'read'))
+            &&
+            this.getAcl().get('portalPermission') === 'no'
+        ) {
+            this.hideActionItem('viewFollowers');
+
+            return;
+        }
+
+        let streamAccess = this.getAcl().checkModel(this.model, 'stream', true);
+
+        if (!streamAccess) {
+            this.hideActionItem('viewFollowers');
+        } else {
+            this.showActionItem('viewFollowers');
+        }
+
+        if (streamAccess === null) {
+            this.listenToOnce(this.model, 'sync', () => {
+                this.manageAccessStream(true);
+            });
+        }
+    },
+
+    manageAccess: function () {
+        this.manageAccessEdit();
+        this.manageAccessDelete();
+        this.manageAccessStream();
+    },
+
+    addButton: function (o, toBeginning) {
+        let method = toBeginning ? 'unshift' : 'push';
+
+        let name = o.name;
+
+        if (!name) {
+            return;
+        }
+
+        for (let item of this.buttonList) {
+            if (item.name === name) {
+                return;
+            }
+        }
+
+        this.buttonList[method](o);
+    },
+
+    addDropdownItem: function (o, toBeginning) {
+        let method = toBeginning ? 'unshift' : 'push';
+
+        if (!o) {
+            this.dropdownItemList[method](false);
+
+            return;
+        }
+
+        let name = o.name;
+
+        if (!name) {
+            return;
+        }
+
+        for (let item of this.dropdownItemList) {
+            if (item.name === name) {
+                return;
+            }
+        }
+
+        this.dropdownItemList[method](o);
+    },
+
+    addButtonEdit: function (o, toBeginning) {
+        let method = toBeginning ? 'unshift' : 'push';
+
+        let name = o.name;
+
+        if (!name) {
+            return;
+        }
+
+        for (let item of this.buttonEditList) {
+            if (item.name === name) {
+                return;
+            }
+        }
+
+        this.buttonEditList[method](o);
+    },
+
+    /**
+     * @deprecated Use `enableActionItems`.
+     */
+    enableButtons: function () {
+        this.allActionItemsDisabled = false;
+
+        this.$el.find(".button-container .actions-btn-group .action")
+            .removeAttr('disabled')
+            .removeClass('disabled');
+
+        this.$el.find(".button-container .actions-btn-group .dropdown-toggle")
+            .removeAttr('disabled')
+            .removeClass('disabled');
+
+        this.buttonList
+            .filter(item => item.disabled)
+            .forEach(item => {
+                this.$detailButtonContainer
+                    .find(`button.action[data-action="${item.name}"]`)
+                    .addClass('disabled')
+                    .attr('disabled', 'disabled');
+            });
+
+        this.buttonEditList
+            .filter(item => item.disabled)
+            .forEach(item => {
+                this.$detailButtonContainer
+                    .find(`button.action[data-action="${item.name}"]`)
+                    .addClass('disabled')
+                    .attr('disabled', 'disabled');
+            });
+
+        this.dropdownItemList
+            .filter(item => item.disabled)
+            .forEach(item => {
+                this.$detailButtonContainer
+                    .find(`li > .action[data-action="${item.name}"]`)
+                    .parent()
+                    .addClass('disabled')
+                    .attr('disabled', 'disabled');
+            });
+
+        this.dropdownEditItemList
+            .filter(item => item.disabled)
+            .forEach(item => {
+                this.$detailButtonContainer
+                    .find(`li > .action[data-action="${item.name}"]`)
+                    .parent()
+                    .addClass('disabled')
+                    .attr('disabled', 'disabled');
+            });
+    },
+
+    /**
+     * @deprecated Use `disableActionItems`.
+     */
+    disableButtons: function () {
+        this.allActionItemsDisabled = true;
+
+        this.$el.find(".button-container .actions-btn-group .action")
+            .attr('disabled', 'disabled')
+            .addClass('disabled');
+
+        this.$el.find(".button-container .actions-btn-group .dropdown-toggle")
+            .attr('disabled', 'disabled')
+            .addClass('disabled');
+    },
+
+    /**
+     * Remove a button or dropdown item.
+     *
+     * @param {string} name A name.
+     */
+    removeActionItem: function (name) {
+        this.removeButton(name);
+    },
+
+    /**
+     * @deprecated Use `removeActionItem`.
+     *
+     * @param {string} name A name.
+     */
+    removeButton: function (name) {
+        for (const [i, item] of this.buttonList.entries()) {
+            if (item.name === name) {
+                this.buttonList.splice(i, 1);
+
+                break;
+            }
+        }
+
+        for (const [i, item] of this.dropdownItemList.entries()) {
+            if (item.name === name) {
+                this.dropdownItemList.splice(i, 1);
+
+                break;
+            }
+        }
+
+        if (this.isRendered()) {
+            this.$el.find('.detail-button-container .action[data-action="'+name+'"]').remove();
+        }
+    },
+
+    /**
+     * Convert a detail layout to an internal layout.
+     *
+     * @protected
+     * @param {Object[]} simplifiedLayout A detail layout.
+     * @return {Object[]}
+     */
+    convertDetailLayout: function (simplifiedLayout) {
+        let layout = [];
+        let el = this.options.el || '#' + (this.id);
+
+        this.panelFieldListMap = {};
+
+        let tabNumber = -1;
+
+        for (let p = 0; p < simplifiedLayout.length; p++) {
+            let item = simplifiedLayout[p];
+
+            let panel = {};
+
+            let tabBreak = item.tabBreak || p === 0;
+
+            if (tabBreak) {
+                tabNumber++;
+            }
+
+            if ('customLabel' in item) {
+                panel.label = item.customLabel;
+
+                if (panel.label) {
+                    panel.label = this.getLanguage()
+                        .translate(panel.label, 'panelCustomLabels', this.entityType);
+                }
+            } else {
+                panel.label = item.label || null;
+
+                if (panel.label) {
+                    panel.label = this.getLanguage()
+                        .translate(panel.label, 'labels', this.entityType);
+                }
+            }
+
+            panel.name = item.name || 'panel-' + p.toString();
+            panel.style = item.style || 'default';
+            panel.rows = [];
+            panel.tabNumber = tabNumber;
+
+            this.middlePanelDefs[panel.name] = {
+                name: panel.name,
+                style: panel.style,
+                tabNumber: panel.tabNumber,
+                tabBreak: tabBreak,
+                tabLabel: item.tabLabel,
+            };
+
+            this.middlePanelDefsList.push(this.middlePanelDefs[panel.name]);
+
+            if (item.dynamicLogicVisible && this.dynamicLogic) {
+                this.dynamicLogic.addPanelVisibleCondition(panel.name, item.dynamicLogicVisible);
+            }
+
+            if (simplifiedLayout[p].dynamicLogicStyled && this.dynamicLogic) {
+                this.dynamicLogic.addPanelStyledCondition(panel.name, item.dynamicLogicStyled);
+            }
+
+            if (item.hidden && tabNumber === 0) {
+                panel.hidden = true;
+
+                this.hidePanel(panel.name);
+
+                this.underShowMoreDetailPanelList = this.underShowMoreDetailPanelList || [];
+                this.underShowMoreDetailPanelList.push(panel.name);
+            }
+
+            let lType = 'rows';
+
+            if (item.columns) {
+                lType = 'columns';
+
+                panel.columns = [];
+            }
+
+            if (panel.name) {
+                this.panelFieldListMap[panel.name] = [];
+            }
+
+            for (const [i, itemI] of item[lType].entries()) {
+                let row = [];
+
+                for (const cellDefs of itemI) {
+                    if (cellDefs === false) {
+                        row.push(false);
+
+                        continue;
+                    }
+
+                    if (!cellDefs.name) {
+                        continue;
+                    }
+
+                    let name = cellDefs.name;
+
+                    if (panel.name) {
+                        this.panelFieldListMap[panel.name].push(name);
+                    }
+
+                    let type = cellDefs.type || this.model.getFieldType(name) || 'base';
+
+                    let viewName = cellDefs.view ||
+                        this.model.getFieldParam(name, 'view') ||
+                        this.getFieldManager().getViewName(type);
+
+                    let o = {
+                        el: el + ' .middle .field[data-name="' + name + '"]',
+                        defs: {
+                            name: name,
+                            params: cellDefs.params || {},
+                        },
+                        mode: this.fieldsMode,
+                    };
+
+                    if (this.readOnly) {
+                        o.readOnly = true;
+                    }
+
+                    if (cellDefs.readOnly) {
+                        o.readOnly = true;
+                        o.readOnlyLocked = true;
+                    }
+
+                    if (this.readOnlyLocked) {
+                        o.readOnlyLocked = true;
+                    }
+
+                    if (this.inlineEditDisabled || cellDefs.inlineEditDisabled) {
+                        o.inlineEditDisabled = true;
+                    }
+
+                    let fullWidth = cellDefs.fullWidth || false;
+
+                    if (!fullWidth) {
+                        if (item[lType][i].length === 1) {
+                            fullWidth = true;
+                        }
+                    }
+
+                    if (this.recordHelper.getFieldStateParam(name, 'hidden')) {
+                        o.disabled = true;
+                    }
+
+                    if (this.recordHelper.getFieldStateParam(name, 'hiddenLocked')) {
+                        o.disabledLocked = true;
+                    }
+
+                    if (this.recordHelper.getFieldStateParam(name, 'readOnly')) {
+                        o.readOnly = true;
+                    }
+
+                    if (!o.readOnlyLocked && this.recordHelper.getFieldStateParam(name, 'readOnlyLocked')) {
+                        o.readOnlyLocked = true;
+                    }
+
+                    if (this.recordHelper.getFieldStateParam(name, 'required') !== null) {
+                        o.defs.params = o.defs.params || {};
+                        o.defs.params.required = this.recordHelper.getFieldStateParam(name, 'required');
+                    }
+
+                    if (this.recordHelper.hasFieldOptionList(name)) {
+                        o.customOptionList = this.recordHelper.getFieldOptionList(name);
+                    }
+
+                    o.validateCallback = () => this.validateField(name);
+
+                    o.recordHelper = this.recordHelper;
+
+                    if (cellDefs.options) {
+                        for (let optionName in cellDefs.options) {
+                            if (typeof o[optionName] !== 'undefined') {
+                                continue;
+                            }
+
+                            o[optionName] = cellDefs.options[optionName];
+                        }
+                    }
+
+                    let cell = {
+                        name: name + 'Field',
+                        view: viewName,
+                        field: name,
+                        el: el + ' .middle .field[data-name="' + name + '"]',
+                        fullWidth: fullWidth,
+                        options: o,
+                    };
+
+                    if ('labelText' in cellDefs) {
+                        o.labelText = cellDefs.labelText;
+                        cell.customLabel = cellDefs.labelText;
+                    }
+
+                    if ('customLabel' in cellDefs) {
+                        cell.customLabel = cellDefs.customLabel;
+                    }
+
+                    if ('label' in cellDefs) {
+                        cell.label = cellDefs.label;
+                    }
+
+                    if ('customCode' in cellDefs) {
+                        cell.customCode = cellDefs.customCode;
+                    }
+
+                    if ('noLabel' in cellDefs) {
+                        cell.noLabel = cellDefs.noLabel;
+                    }
+
+                    if ('span' in cellDefs) {
+                        cell.span = cellDefs.span;
+                    }
+
+                    row.push(cell);
+                }
+
+                panel[lType].push(row);
+            }
+
+            layout.push(panel);
+        }
+
+        return layout;
+    },
+
+    /**
+     * @private
+     * @param {function(Object[]): void}callback
+     */
+    getGridLayout: function (callback) {
+        if (this.gridLayout !== null) {
+            callback(this.gridLayout);
+
+            return;
+        }
+
+        if (this.detailLayout) {
+            this.gridLayout = {
+                type: this.gridLayoutType,
+                layout: this.convertDetailLayout(this.detailLayout),
+            };
+
+            callback(this.gridLayout);
+
+            return;
+        }
+
+        this.getHelper().layoutManager.get(this.model.name, this.layoutName, detailLayout => {
+            if (typeof this.modifyDetailLayout === 'function') {
+                detailLayout = Espo.Utils.cloneDeep(detailLayout);
+
+                this.modifyDetailLayout(detailLayout);
+            }
+
+            this.detailLayout = detailLayout;
+
+            this.gridLayout = {
+                type: this.gridLayoutType,
+                layout: this.convertDetailLayout(this.detailLayout),
+            };
+
+            callback(this.gridLayout);
+        });
+    },
+
+    /**
+     * Create a side view.
+     *
+     * @protected
+     */
+    createSideView: function () {
+        let el = this.options.el || '#' + (this.id);
+
+        this.createView('side', this.sideView, {
+            model: this.model,
+            scope: this.scope,
+            el: el + ' .side',
+            type: this.type,
+            readOnly: this.readOnly,
+            inlineEditDisabled: this.inlineEditDisabled,
+            recordHelper: this.recordHelper,
+            recordViewObject: this,
+            isReturn: this.options.isReturn,
+        });
+    },
+
+    /**
+     * Create a middle view.
+     *
+     * @protected
+     */
+    createMiddleView: function (callback) {
+        let el = this.options.el || '#' + (this.id);
+
+        this.waitForView('middle');
+
+        this.getGridLayout(layout => {
+            if (
+                this.hasTabs() &&
+                this.options.isReturn &&
+                this.isStoredTabForThisRecord()
+            ) {
+                this.selectStoredTab();
+            }
+
+            this.createView('middle', this.middleView, {
+                model: this.model,
+                scope: this.scope,
+                type: this.type,
+                layoutDefs: layout,
+                el: el + ' .middle',
+                layoutData: {
+                    model: this.model,
+                },
+                recordHelper: this.recordHelper,
+                recordViewObject: this,
+                panelFieldListMap: this.panelFieldListMap,
+            }, callback);
+        });
+    },
+
+    /**
+     * Create a bottom view.
+     *
+     * @protected
+     */
+    createBottomView: function () {
+        let el = this.options.el || '#' + (this.id);
+
+        this.createView('bottom', this.bottomView, {
+            model: this.model,
+            scope: this.scope,
+            el: el + ' .bottom',
+            readOnly: this.readOnly,
+            type: this.type,
+            inlineEditDisabled: this.inlineEditDisabled,
+            recordHelper: this.recordHelper,
+            recordViewObject: this,
+            portalLayoutDisabled: this.portalLayoutDisabled,
+            isReturn: this.options.isReturn,
+        });
+    },
+
+    /**
+     * Create views.
+     *
+     * @protected
+     * @param {function(module:views/record/detail-middle): void} [callback]
+     */
+    build: function (callback) {
+        if (!this.sideDisabled && this.sideView) {
+            this.createSideView();
+        }
+
+        if (this.middleView) {
+            this.createMiddleView(callback);
+        }
+
+        if (!this.bottomDisabled && this.bottomView) {
+            this.createBottomView();
+        }
+    },
+
+    /**
+     * Called after create.
+     *
+     * @return {boolean} True if redirecting is processed.
+     */
+    exitAfterCreate: function () {
+        if (!this.returnAfterCreate && this.model.id) {
+            let url = '#' + this.scope + '/view/' + this.model.id;
+
+            this.getRouter().navigate(url, {trigger: false});
+
+            this.getRouter().dispatch(this.scope, 'view', {
+                id: this.model.id,
+                rootUrl: this.options.rootUrl,
+                model: this.model,
+                isAfterCreate: true,
+            });
+
+            return true;
+        }
+
+        return false;
+    },
+
+    /**
+     * Called after save or cancel. By default, redirects a page. Can be overridden in options.
+     *
+     * @param {string} after Name of an action (`save`, `cancel,` etc.) after which #exit is invoked.
+     */
+    exit: function (after) {
+        if (after) {
+            let methodName = 'exitAfter' + Espo.Utils.upperCaseFirst(after);
+
+            if (methodName in this) {
+                let result = this[methodName]();
+
+                if (result) {
+                    return;
+                }
+            }
+        }
+
+        let url;
+        let options;
+
+        if (this.returnUrl) {
+            url = this.returnUrl;
+        }
+        else {
+            if (after === 'delete') {
+                url = this.options.rootUrl || '#' + this.scope;
+
+                this.getRouter().navigate(url, {trigger: false});
+
+                this.getRouter().dispatch(this.scope, null, {
+                    isReturn: true
+                });
+
+                return;
+            }
+
+            if (this.model.id) {
+                url = '#' + this.scope + '/view/' + this.model.id;
+
+                if (!this.returnDispatchParams) {
+                    this.getRouter().navigate(url, {trigger: false});
+
+                    options = {
+                        id: this.model.id,
+                        model: this.model,
+                    };
+
+                    if (this.options.rootUrl) {
+                        options.rootUrl = this.options.rootUrl;
+                    }
+
+                    this.getRouter().dispatch(this.scope, 'view', options);
+                }
             }
             else {
-                this.notify('Saved', 'success');
+                url = this.options.rootUrl || '#' + this.scope;
             }
+        }
 
-            this.enableActionItems();
+        if (this.returnDispatchParams) {
+            let controller = this.returnDispatchParams.controller;
+            let action = this.returnDispatchParams.action;
+            options = this.returnDispatchParams.options || {};
 
-            this.setIsNotChanged();
+            this.getRouter().navigate(url, {trigger: false});
+            this.getRouter().dispatch(controller, action, options);
 
+            return;
+        }
+
+        this.getRouter().navigate(url, {trigger: true});
+    },
+
+    subscribeToWebSocket: function () {
+        let topic = 'recordUpdate.' + this.entityType + '.' + this.model.id;
+
+        this.recordUpdateWebSocketTopic = topic;
+        this.isSubscribedToWebSocket = true;
+
+        this.getHelper().webSocketManager.subscribe(topic, () => {
+            this.handleRecordUpdate();
+        });
+    },
+
+    unsubscribeFromWebSocket: function () {
+        if (!this.isSubscribedToWebSocket) {
+            return;
+        }
+
+        this.getHelper().webSocketManager.unsubscribe(this.recordUpdateWebSocketTopic);
+    },
+
+    handleRecordUpdate: function () {
+        if (this.updateWebSocketIsBlocked) {
+            return;
+        }
+
+        if (this.inlineEditModeIsOn || this.mode === this.MODE_EDIT) {
+            let m = this.model.clone();
+
+            m.fetch().then(() => {
+                if (this.inlineEditModeIsOn || this.mode === this.MODE_EDIT) {
+                    this.updatedAttributes = Espo.Utils.cloneDeep(m.attributes);
+                }
+            });
+
+            return;
+        }
+
+        this.model.fetch({highlight: true});
+    },
+
+    blockUpdateWebSocket: function (toUnblock) {
+        this.updateWebSocketIsBlocked = true;
+
+        if (toUnblock) {
             setTimeout(() => {
                 this.unblockUpdateWebSocket();
             }, this.blockUpdateWebSocketPeriod || 500);
-        },
+        }
+    },
 
-        beforeSave: function () {
-            Espo.Ui.notify(this.translate('saving', 'messages'));
+    unblockUpdateWebSocket: function () {
+        this.updateWebSocketIsBlocked = false;
+    },
 
-            this.blockUpdateWebSocket();
-        },
+    /**
+     * Show more detail panels.
+     */
+    showMoreDetailPanels: function () {
+        this.hidePanel('showMoreDelimiter');
 
-        beforeBeforeSave: function () {
-            this.disableActionItems();
-        },
+        this.underShowMoreDetailPanelList.forEach(item => {
+            this.showPanel(item);
+        });
+    },
 
-        afterSaveError: function () {
-            this.enableActionItems();
-        },
+    /**
+     * @protected
+     * @return {Number}
+     */
+    getTabCount: function () {
+        if (!this.hasTabs()) {
+            return 0;
+        }
 
-        afterNotModified: function () {
-            let msg = this.translate('notModified', 'messages');
+        let count = 1;
 
-            Espo.Ui.warning(msg, 'warning');
-
-            this.enableActionItems();
-            this.setIsNotChanged();
-        },
-
-        afterNotValid: function () {
-            this.notify('Not valid', 'error');
-
-            this.enableActionItems();
-        },
-
-        errorHandlerDuplicate: function (duplicates) {
-            this.notify(false);
-
-            this.createView('duplicate', 'views/modals/duplicate', {
-                scope: this.entityType,
-                duplicates: duplicates,
-                model: this.model,
-            }, (view) => {
-                view.render();
-
-                this.listenToOnce(view, 'save', () => {
-                    this.actionSave({
-                        options: {
-                            headers: {
-                                'X-Skip-Duplicate-Check': 'true',
-                            }
-                        }
-                    });
-                });
-            });
-        },
-
-        errorHandlerModified: function (data, options) {
-            Espo.Ui.notify(false);
-
-            let versionNumber = data.versionNumber;
-            let values = data.values || {};
-
-            let attributeList = Object.keys(values);
-
-            let diffAttributeList = [];
-
-            attributeList.forEach(attribute => {
-                if (this.attributes[attribute] !== values[attribute]) {
-                    diffAttributeList.push(attribute);
-                }
-            });
-
-            if (diffAttributeList.length === 0) {
-                setTimeout(() => {
-                    this.model.set('versionNumber', versionNumber, {silent: true});
-                    this.attributes.versionNumber = versionNumber;
-
-                    if (options.inline && options.field) {
-                        this.inlineEditSave(options.field);
-
-                        return;
-                    }
-
-                    this.actionSave();
-                }, 5);
-
-                return;
+        (this.detailLayout || []).forEach(item => {
+            if (item.tabBreak) {
+                count ++;
             }
-
-            this.createView(
-                'dialog',
-                'views/modals/resolve-save-conflict',
-                {
-                    model: this.model,
-                    attributeList: diffAttributeList,
-                    currentAttributes: Espo.Utils.cloneDeep(this.model.attributes),
-                    originalAttributes: Espo.Utils.cloneDeep(this.attributes),
-                    actualAttributes: Espo.Utils.cloneDeep(values),
-                }
-            )
-            .then(view => {
-                view.render();
-
-                this.listenTo(view, 'resolve', () => {
-                    this.model.set('versionNumber', versionNumber, {silent: true});
-                    this.attributes.versionNumber = versionNumber;
-
-                    for (let attribute in values) {
-                        this.setInitialAttributeValue(attribute, values[attribute]);
-                    }
-                });
-            });
-        },
-
-        /**
-         * Get the middle-view.
-         *
-         * @return {module:views/record/detail-middle.Class}
-         */
-        getMiddleView: function () {
-            return this.getView('middle');
-        },
-
-        setReadOnly: function () {
-            if (!this.readOnlyLocked) {
-                this.readOnly = true;
-            }
-
-            let bottomView = this.getView('bottom');
-
-            if (bottomView && 'setReadOnly' in bottomView) {
-                bottomView.setReadOnly();
-            }
-
-            let sideView = this.getView('side');
-
-            if (sideView && 'setReadOnly' in sideView) {
-                sideView.setReadOnly();
-            }
-
-            this.getFieldList().forEach((field) => {
-                this.setFieldReadOnly(field);
-            });
-        },
-
-        setNotReadOnly: function (onlyNotSetAsReadOnly) {
-            if (!this.readOnlyLocked) {
-                this.readOnly = false;
-            }
-
-            let bottomView = this.getView('bottom');
-
-            if (bottomView && 'setNotReadOnly' in bottomView) {
-                bottomView.setNotReadOnly(onlyNotSetAsReadOnly);
-            }
-
-            let sideView = this.getView('side');
-
-            if (sideView && 'setNotReadOnly' in sideView) {
-                sideView.setNotReadOnly(onlyNotSetAsReadOnly);
-            }
-
-            this.getFieldList().forEach((field) => {
-                if (onlyNotSetAsReadOnly) {
-                    if (this.recordHelper.getFieldStateParam(field, 'readOnly')) {
-                        return;
-                    }
-                }
-
-                this.setFieldNotReadOnly(field);
-            });
-        },
-
-        manageAccessEdit: function (second) {
-            if (this.isNew) {
-                return;
-            }
-
-            let editAccess = this.getAcl().checkModel(this.model, 'edit', true);
-
-            if (!editAccess || this.readOnlyLocked) {
-                this.readOnly = true;
-
-                this.hideActionItem('edit');
-
-                if (this.selfAssignAction) {
-                    this.hideActionItem('selfAssign');
-                }
-            } else {
-                this.showActionItem('edit');
-
-                if (this.selfAssignAction) {
-                    this.hideActionItem('selfAssign');
-
-                    if (this.model.has('assignedUserId')) {
-                        if (!this.model.get('assignedUserId')) {
-                            this.showActionItem('selfAssign');
-                        }
-                    }
-                }
-
-                if (!this.readOnlyLocked) {
-                    if (this.readOnly && second) {
-                        if (this.isReady) {
-                            this.setNotReadOnly(true);
-                        }
-                        else {
-                            this.on('ready', () => this.setNotReadOnly(true));
-                        }
-                    }
-
-                    this.readOnly = false;
-                }
-            }
-
-            if (editAccess === null) {
-                this.listenToOnce(this.model, 'sync', () => {
-                    this.manageAccessEdit(true);
-                });
-            }
-        },
-
-        manageAccessDelete: function (second) {
-            if (this.isNew) {
-                return;
-            }
-
-            let deleteAccess = this.getAcl().checkModel(this.model, 'delete', true);
-
-            if (!deleteAccess) {
-                this.hideActionItem('delete');
-            } else {
-                this.showActionItem('delete');
-            }
-
-            if (deleteAccess === null) {
-                this.listenToOnce(this.model, 'sync', () => {
-                    this.manageAccessDelete(true);
-                });
-            }
-        },
-
-        manageAccessStream: function (second) {
-            if (this.isNew) {
-                return;
-            }
-
-            if (
-                ~['no', 'own'].indexOf(this.getAcl().getLevel('User', 'read'))
-                &&
-                this.getAcl().get('portalPermission') === 'no'
-            ) {
-                this.hideActionItem('viewFollowers');
-
-                return;
-            }
-
-            let streamAccess = this.getAcl().checkModel(this.model, 'stream', true);
-
-            if (!streamAccess) {
-                this.hideActionItem('viewFollowers');
-            } else {
-                this.showActionItem('viewFollowers');
-            }
-
-            if (streamAccess === null) {
-                this.listenToOnce(this.model, 'sync', () => {
-                    this.manageAccessStream(true);
-                });
-            }
-        },
-
-        manageAccess: function () {
-            this.manageAccessEdit();
-            this.manageAccessDelete();
-            this.manageAccessStream();
-        },
-
-        addButton: function (o, toBeginning) {
-            let method = toBeginning ? 'unshift' : 'push';
-
-            let name = o.name;
-
-            if (!name) {
-                return;
-            }
-
-            for (let item of this.buttonList) {
-                if (item.name === name) {
-                    return;
-                }
-            }
-
-            this.buttonList[method](o);
-        },
-
-        addDropdownItem: function (o, toBeginning) {
-            let method = toBeginning ? 'unshift' : 'push';
-
-            if (!o) {
-                this.dropdownItemList[method](false);
-
-                return;
-            }
-
-            let name = o.name;
-
-            if (!name) {
-                return;
-            }
-
-            for (let item of this.dropdownItemList) {
-                if (item.name === name) {
-                    return;
-                }
-            }
-
-            this.dropdownItemList[method](o);
-        },
-
-        addButtonEdit: function (o, toBeginning) {
-            let method = toBeginning ? 'unshift' : 'push';
-
-            let name = o.name;
-
-            if (!name) {
-                return;
-            }
-
-            for (let item of this.buttonEditList) {
-                if (item.name === name) {
-                    return;
-                }
-            }
-
-            this.buttonEditList[method](o);
-        },
-
-        /**
-         * @deprecated Use `enableActionItems`.
-         */
-        enableButtons: function () {
-            this.allActionItemsDisabled = false;
-
-            this.$el.find(".button-container .actions-btn-group .action")
-                .removeAttr('disabled')
-                .removeClass('disabled');
-
-            this.$el.find(".button-container .actions-btn-group .dropdown-toggle")
-                .removeAttr('disabled')
-                .removeClass('disabled');
-
-            this.buttonList
-                .filter(item => item.disabled)
-                .forEach(item => {
-                    this.$detailButtonContainer
-                        .find(`button.action[data-action="${item.name}"]`)
-                        .addClass('disabled')
-                        .attr('disabled', 'disabled');
-                });
-
-            this.buttonEditList
-                .filter(item => item.disabled)
-                .forEach(item => {
-                    this.$detailButtonContainer
-                        .find(`button.action[data-action="${item.name}"]`)
-                        .addClass('disabled')
-                        .attr('disabled', 'disabled');
-                });
-
-            this.dropdownItemList
-                .filter(item => item.disabled)
-                .forEach(item => {
-                    this.$detailButtonContainer
-                        .find(`li > .action[data-action="${item.name}"]`)
-                        .parent()
-                        .addClass('disabled')
-                        .attr('disabled', 'disabled');
-                });
-
-            this.dropdownEditItemList
-                .filter(item => item.disabled)
-                .forEach(item => {
-                    this.$detailButtonContainer
-                        .find(`li > .action[data-action="${item.name}"]`)
-                        .parent()
-                        .addClass('disabled')
-                        .attr('disabled', 'disabled');
-                });
-        },
-
-        /**
-         * @deprecated Use `disableActionItems`.
-         */
-        disableButtons: function () {
-            this.allActionItemsDisabled = true;
-
-            this.$el.find(".button-container .actions-btn-group .action")
-                .attr('disabled', 'disabled')
-                .addClass('disabled');
-
-            this.$el.find(".button-container .actions-btn-group .dropdown-toggle")
-                .attr('disabled', 'disabled')
-                .addClass('disabled');
-        },
-
-        /**
-         * Remove a button or dropdown item.
-         *
-         * @param {string} name A name.
-         */
-        removeActionItem: function (name) {
-            this.removeButton(name);
-        },
-
-        /**
-         * @deprecated Use `removeActionItem`.
-         *
-         * @param {string} name A name.
-         */
-        removeButton: function (name) {
-            for (const [i, item] of this.buttonList.entries()) {
-                if (item.name === name) {
-                    this.buttonList.splice(i, 1);
-
-                    break;
-                }
-            }
-
-            for (const [i, item] of this.dropdownItemList.entries()) {
-                if (item.name === name) {
-                    this.dropdownItemList.splice(i, 1);
-
-                    break;
-                }
-            }
-
-            if (this.isRendered()) {
-            	this.$el.find('.detail-button-container .action[data-action="'+name+'"]').remove();
-            }
-        },
-
-        /**
-         * Convert a detail layout to an internal layout.
-         *
-         * @protected
-         * @param {Object[]} simplifiedLayout A detail layout.
-         * @return {Object[]}
-         */
-        convertDetailLayout: function (simplifiedLayout) {
-            let layout = [];
-            let el = this.options.el || '#' + (this.id);
-
-            this.panelFieldListMap = {};
-
-            let tabNumber = -1;
-
-            for (let p = 0; p < simplifiedLayout.length; p++) {
-                let item = simplifiedLayout[p];
-
-                let panel = {};
-
-                let tabBreak = item.tabBreak || p === 0;
-
-                if (tabBreak) {
-                    tabNumber++;
-                }
-
-                if ('customLabel' in item) {
-                    panel.label = item.customLabel;
-
-                    if (panel.label) {
-                        panel.label = this.getLanguage()
-                            .translate(panel.label, 'panelCustomLabels', this.entityType);
-                    }
-                } else {
-                    panel.label = item.label || null;
-
-                    if (panel.label) {
-                        panel.label = this.getLanguage()
-                            .translate(panel.label, 'labels', this.entityType);
-                    }
-                }
-
-                panel.name = item.name || 'panel-' + p.toString();
-                panel.style = item.style || 'default';
-                panel.rows = [];
-                panel.tabNumber = tabNumber;
-
-                this.middlePanelDefs[panel.name] = {
-                    name: panel.name,
-                    style: panel.style,
-                    tabNumber: panel.tabNumber,
-                    tabBreak: tabBreak,
-                    tabLabel: item.tabLabel,
-                };
-
-                this.middlePanelDefsList.push(this.middlePanelDefs[panel.name]);
-
-                if (item.dynamicLogicVisible && this.dynamicLogic) {
-                    this.dynamicLogic.addPanelVisibleCondition(panel.name, item.dynamicLogicVisible);
-                }
-
-                if (simplifiedLayout[p].dynamicLogicStyled && this.dynamicLogic) {
-                    this.dynamicLogic.addPanelStyledCondition(panel.name, item.dynamicLogicStyled);
-                }
-
-                if (item.hidden && tabNumber === 0) {
-                    panel.hidden = true;
-
-                    this.hidePanel(panel.name);
-
-                    this.underShowMoreDetailPanelList = this.underShowMoreDetailPanelList || [];
-                    this.underShowMoreDetailPanelList.push(panel.name);
-                }
-
-                let lType = 'rows';
-
-                if (item.columns) {
-                    lType = 'columns';
-
-                    panel.columns = [];
-                }
-
-                if (panel.name) {
-                    this.panelFieldListMap[panel.name] = [];
-                }
-
-                for (const [i, itemI] of item[lType].entries()) {
-                    let row = [];
-
-                    for (const cellDefs of itemI) {
-                        if (cellDefs === false) {
-                            row.push(false);
-
-                            continue;
-                        }
-
-                        if (!cellDefs.name) {
-                            continue;
-                        }
-
-                        let name = cellDefs.name;
-
-                        if (panel.name) {
-                            this.panelFieldListMap[panel.name].push(name);
-                        }
-
-                        let type = cellDefs.type || this.model.getFieldType(name) || 'base';
-
-                        let viewName = cellDefs.view ||
-                            this.model.getFieldParam(name, 'view') ||
-                            this.getFieldManager().getViewName(type);
-
-                        let o = {
-                            el: el + ' .middle .field[data-name="' + name + '"]',
-                            defs: {
-                                name: name,
-                                params: cellDefs.params || {},
-                            },
-                            mode: this.fieldsMode,
-                        };
-
-                        if (this.readOnly) {
-                            o.readOnly = true;
-                        }
-
-                        if (cellDefs.readOnly) {
-                            o.readOnly = true;
-                            o.readOnlyLocked = true;
-                        }
-
-                        if (this.readOnlyLocked) {
-                            o.readOnlyLocked = true;
-                        }
-
-                        if (this.inlineEditDisabled || cellDefs.inlineEditDisabled) {
-                            o.inlineEditDisabled = true;
-                        }
-
-                        let fullWidth = cellDefs.fullWidth || false;
-
-                        if (!fullWidth) {
-                            if (item[lType][i].length === 1) {
-                                fullWidth = true;
-                            }
-                        }
-
-                        if (this.recordHelper.getFieldStateParam(name, 'hidden')) {
-                            o.disabled = true;
-                        }
-
-                        if (this.recordHelper.getFieldStateParam(name, 'hiddenLocked')) {
-                            o.disabledLocked = true;
-                        }
-
-                        if (this.recordHelper.getFieldStateParam(name, 'readOnly')) {
-                            o.readOnly = true;
-                        }
-
-                        if (!o.readOnlyLocked && this.recordHelper.getFieldStateParam(name, 'readOnlyLocked')) {
-                            o.readOnlyLocked = true;
-                        }
-
-                        if (this.recordHelper.getFieldStateParam(name, 'required') !== null) {
-                            o.defs.params = o.defs.params || {};
-                            o.defs.params.required = this.recordHelper.getFieldStateParam(name, 'required');
-                        }
-
-                        if (this.recordHelper.hasFieldOptionList(name)) {
-                            o.customOptionList = this.recordHelper.getFieldOptionList(name);
-                        }
-
-                        o.validateCallback = () => this.validateField(name);
-
-                        o.recordHelper = this.recordHelper;
-
-                        if (cellDefs.options) {
-                            for (let optionName in cellDefs.options) {
-                                if (typeof o[optionName] !== 'undefined') {
-                                    continue;
-                                }
-
-                                o[optionName] = cellDefs.options[optionName];
-                            }
-                        }
-
-                        let cell = {
-                            name: name + 'Field',
-                            view: viewName,
-                            field: name,
-                            el: el + ' .middle .field[data-name="' + name + '"]',
-                            fullWidth: fullWidth,
-                            options: o,
-                        };
-
-                        if ('labelText' in cellDefs) {
-                            o.labelText = cellDefs.labelText;
-                            cell.customLabel = cellDefs.labelText;
-                        }
-
-                        if ('customLabel' in cellDefs) {
-                            cell.customLabel = cellDefs.customLabel;
-                        }
-
-                        if ('label' in cellDefs) {
-                            cell.label = cellDefs.label;
-                        }
-
-                        if ('customCode' in cellDefs) {
-                            cell.customCode = cellDefs.customCode;
-                        }
-
-                        if ('noLabel' in cellDefs) {
-                            cell.noLabel = cellDefs.noLabel;
-                        }
-
-                        if ('span' in cellDefs) {
-                            cell.span = cellDefs.span;
-                        }
-
-                        row.push(cell);
-                    }
-
-                    panel[lType].push(row);
-                }
-
-                layout.push(panel);
-            }
-
-            return layout;
-        },
-
-        /**
-         * @private
-         * @param {function(Object[]): void}callback
-         */
-        getGridLayout: function (callback) {
-            if (this.gridLayout !== null) {
-                callback(this.gridLayout);
-
-                return;
-            }
-
-            if (this.detailLayout) {
-                this.gridLayout = {
-                    type: this.gridLayoutType,
-                    layout: this.convertDetailLayout(this.detailLayout),
-                };
-
-                callback(this.gridLayout);
-
-                return;
-            }
-
-            this.getHelper().layoutManager.get(this.model.name, this.layoutName, detailLayout => {
-                if (typeof this.modifyDetailLayout === 'function') {
-                    detailLayout = Espo.Utils.cloneDeep(detailLayout);
-
-                    this.modifyDetailLayout(detailLayout);
-                }
-
-                this.detailLayout = detailLayout;
-
-                this.gridLayout = {
-                    type: this.gridLayoutType,
-                    layout: this.convertDetailLayout(this.detailLayout),
-                };
-
-                callback(this.gridLayout);
-            });
-        },
-
-        /**
-         * Create a side view.
-         *
-         * @protected
-         */
-        createSideView: function () {
-            let el = this.options.el || '#' + (this.id);
-
-            this.createView('side', this.sideView, {
-                model: this.model,
-                scope: this.scope,
-                el: el + ' .side',
-                type: this.type,
-                readOnly: this.readOnly,
-                inlineEditDisabled: this.inlineEditDisabled,
-                recordHelper: this.recordHelper,
-                recordViewObject: this,
-                isReturn: this.options.isReturn,
-            });
-        },
-
-        /**
-         * Create a middle view.
-         *
-         * @protected
-         */
-        createMiddleView: function (callback) {
-            let el = this.options.el || '#' + (this.id);
-
-            this.waitForView('middle');
-
-            this.getGridLayout(layout => {
-                if (
-                    this.hasTabs() &&
-                    this.options.isReturn &&
-                    this.isStoredTabForThisRecord()
-                ) {
-                    this.selectStoredTab();
-                }
-
-                this.createView('middle', this.middleView, {
-                    model: this.model,
-                    scope: this.scope,
-                    type: this.type,
-                    layoutDefs: layout,
-                    el: el + ' .middle',
-                    layoutData: {
-                        model: this.model,
-                    },
-                    recordHelper: this.recordHelper,
-                    recordViewObject: this,
-                    panelFieldListMap: this.panelFieldListMap,
-                }, callback);
-            });
-        },
-
-        /**
-         * Create a bottom view.
-         *
-         * @protected
-         */
-        createBottomView: function () {
-            let el = this.options.el || '#' + (this.id);
-
-            this.createView('bottom', this.bottomView, {
-                model: this.model,
-                scope: this.scope,
-                el: el + ' .bottom',
-                readOnly: this.readOnly,
-                type: this.type,
-                inlineEditDisabled: this.inlineEditDisabled,
-                recordHelper: this.recordHelper,
-                recordViewObject: this,
-                portalLayoutDisabled: this.portalLayoutDisabled,
-                isReturn: this.options.isReturn,
-            });
-        },
-
-        /**
-         * Create views.
-         *
-         * @protected
-         * @param {function(module:views/record/detail-middle): void} [callback]
-         */
-        build: function (callback) {
-            if (!this.sideDisabled && this.sideView) {
-                this.createSideView();
-            }
-
-            if (this.middleView) {
-                this.createMiddleView(callback);
-            }
-
-            if (!this.bottomDisabled && this.bottomView) {
-                this.createBottomView();
-            }
-        },
-
-        /**
-         * Called after create.
-         *
-         * @return {boolean} True if redirecting is processed.
-         */
-        exitAfterCreate: function () {
-            if (!this.returnAfterCreate && this.model.id) {
-                let url = '#' + this.scope + '/view/' + this.model.id;
-
-                this.getRouter().navigate(url, {trigger: false});
-
-                this.getRouter().dispatch(this.scope, 'view', {
-                    id: this.model.id,
-                    rootUrl: this.options.rootUrl,
-                    model: this.model,
-                    isAfterCreate: true,
-                });
+        });
+
+        return count;
+    },
+
+    /**
+     * @protected
+     * @return {boolean}
+     */
+    hasTabs: function () {
+        if (typeof this._hasMiddleTabs !== 'undefined') {
+            return this._hasMiddleTabs;
+        }
+
+        if (!this.detailLayout) {
+            return false;
+        }
+
+        for (let item of this.detailLayout) {
+            if (item.tabBreak) {
+                this._hasMiddleTabs = true;
 
                 return true;
             }
+        }
 
-            return false;
-        },
+        this._hasMiddleTabs = false;
 
-        /**
-         * Called after save or cancel. By default, redirects a page. Can be overridden in options.
-         *
-         * @param {string} after Name of an action (`save`, `cancel,` etc.) after which #exit is invoked.
-         */
-        exit: function (after) {
-            if (after) {
-                let methodName = 'exitAfter' + Espo.Utils.upperCaseFirst(after);
+        return false;
+    },
 
-                if (methodName in this) {
-                    let result = this[methodName]();
+    /**
+     * @private
+     * @return {{label: string}[]}
+     */
+    getMiddleTabDataList: function () {
+        let currentTab = this.currentTab;
 
-                    if (result) {
-                        return;
-                    }
-                }
-            }
+        let panelDataList = this.middlePanelDefsList;
 
-            let url;
-            let options;
+        return panelDataList
+            .filter((item, i) => i === 0 || item.tabBreak)
+            .map((item, i) => {
+                let label = item.tabLabel;
 
-            if (this.returnUrl) {
-                url = this.returnUrl;
-            }
-            else {
-                if (after === 'delete') {
-                    url = this.options.rootUrl || '#' + this.scope;
+                let hidden = false;
 
-                    this.getRouter().navigate(url, {trigger: false});
-
-                    this.getRouter().dispatch(this.scope, null, {
-                        isReturn: true
-                    });
-
-                    return;
+                if (i > 0) {
+                    hidden = panelDataList
+                        .filter(panel => panel.tabNumber === i)
+                        .findIndex(panel => !this.recordHelper.getPanelStateParam(panel.name, 'hidden')) === -1;
                 }
 
-                if (this.model.id) {
-                    url = '#' + this.scope + '/view/' + this.model.id;
-
-                    if (!this.returnDispatchParams) {
-                        this.getRouter().navigate(url, {trigger: false});
-
-                        options = {
-                            id: this.model.id,
-                            model: this.model,
-                        };
-
-                        if (this.options.rootUrl) {
-                            options.rootUrl = this.options.rootUrl;
-                        }
-
-                        this.getRouter().dispatch(this.scope, 'view', options);
-                    }
+                if (!label) {
+                    label = i === 0 ?
+                        this.translate('Overview') :
+                        (i + 1).toString();
                 }
-                else {
-                    url = this.options.rootUrl || '#' + this.scope;
+                else if (label.substring(0, 7) === '$label:') {
+                    label = this.translate(label.substring(7), 'labels', this.scope);
+                }
+                else if (label[0] === '$') {
+                    label = this.translate(label.substring(1), 'tabs', this.scope);
                 }
-            }
 
-            if (this.returnDispatchParams) {
-                let controller = this.returnDispatchParams.controller;
-                let action = this.returnDispatchParams.action;
-                options = this.returnDispatchParams.options || {};
-
-                this.getRouter().navigate(url, {trigger: false});
-                this.getRouter().dispatch(controller, action, options);
-
-                return;
-            }
-
-            this.getRouter().navigate(url, {trigger: true});
-        },
-
-        subscribeToWebSocket: function () {
-            let topic = 'recordUpdate.' + this.entityType + '.' + this.model.id;
-
-            this.recordUpdateWebSocketTopic = topic;
-            this.isSubscribedToWebSocket = true;
-
-            this.getHelper().webSocketManager.subscribe(topic, (t, data) => {
-                this.handleRecordUpdate();
+                return {
+                    label: label,
+                    isActive: currentTab === i,
+                    hidden: hidden,
+                };
             });
-        },
+    },
 
-        unsubscribeFromWebSocket: function () {
-            if (!this.isSubscribedToWebSocket) {
-                return;
+    /**
+     * Select a tab.
+     *
+     * @protected
+     * @param {Number} tab
+     */
+    selectTab: function (tab) {
+        this.currentTab = tab;
+
+        $('.popover.in').removeClass('in');
+
+        this.whenRendered().then(() => {
+            this.$el.find('.middle-tabs > button').removeClass('active');
+            this.$el.find(`.middle-tabs > button[data-tab="${tab}"]`).addClass('active');
+
+            this.$el.find('.middle > .panel[data-tab]').addClass('tab-hidden');
+            this.$el.find(`.middle > .panel[data-tab="${tab}"]`).removeClass('tab-hidden');
+
+            this.adjustMiddlePanels();
+            this.recordHelper.trigger('panel-show');
+        });
+
+        this.storeTab();
+    },
+
+    /**
+     * @private
+     */
+    storeTab: function () {
+        let key = 'tab_middle';
+        let keyRecord = 'tab_middle_record';
+
+        this.getSessionStorage().set(key, this.currentTab);
+        this.getSessionStorage().set(keyRecord, this.entityType + '_' + this.model.id);
+    },
+
+    /**
+     * @private
+     */
+    selectStoredTab: function () {
+        let key = 'tab_middle';
+
+        let tab = this.getSessionStorage().get(key);
+
+        if (tab > 0) {
+            this.selectTab(tab);
+        }
+    },
+
+    /**
+     * @private
+     */
+    isStoredTabForThisRecord: function () {
+        let keyRecord = 'tab_middle_record';
+
+        return this.getSessionStorage().get(keyRecord) === this.entityType + '_' + this.model.id;
+    },
+
+    /**
+     * @inheritDoc
+      */
+    onInvalid: function (invalidFieldList) {
+        if (!this.hasTabs()) {
+            return;
+        }
+
+        let tabList = [];
+
+        for (let field of invalidFieldList) {
+            let view = this.getMiddleView().getFieldView(field);
+
+            if (!view) {
+                continue;
             }
 
-            this.getHelper().webSocketManager.unsubscribe(this.recordUpdateWebSocketTopic);
-        },
+            let tabString = view.$el
+                .closest('.panel.tab-hidden')
+                .attr('data-tab');
 
-        handleRecordUpdate: function () {
-            if (this.updateWebSocketIsBlocked) {
-                return;
+            let tab = parseInt(tabString);
+
+            if (tabList.indexOf(tab) !== -1) {
+                continue;
             }
 
-            if (this.inlineEditModeIsOn || this.mode === this.MODE_EDIT) {
-                let m = this.model.clone();
+            tabList.push(tab);
+        }
 
-                m.fetch().then(() => {
-                    if (this.inlineEditModeIsOn || this.mode === this.MODE_EDIT) {
-                        this.updatedAttributes = Espo.Utils.cloneDeep(m.attributes);
-                    }
-                });
+        if (!tabList.length) {
+            return;
+        }
 
-                return;
-            }
+        let $tabs = this.$el.find('.middle-tabs');
 
-            this.model.fetch({highlight: true});
-        },
+        tabList.forEach(tab => {
+            let $tab = $tabs.find(`> [data-tab="${tab.toString()}"]`);
 
-        blockUpdateWebSocket: function (toUnblock) {
-            this.updateWebSocketIsBlocked = true;
+            $tab.addClass('invalid');
 
-            if (toUnblock) {
-                setTimeout(() => {
-                    this.unblockUpdateWebSocket();
-                }, this.blockUpdateWebSocketPeriod || 500);
-            }
-        },
-
-        unblockUpdateWebSocket: function () {
-            this.updateWebSocketIsBlocked = false;
-        },
-
-        /**
-         * Show more detail panels.
-         */
-        showMoreDetailPanels: function () {
-            this.hidePanel('showMoreDelimiter');
-
-            this.underShowMoreDetailPanelList.forEach(item => {
-                this.showPanel(item);
+            $tab.one('click', () => {
+                $tab.removeClass('invalid');
             });
-        },
+        })
+    },
 
-        /**
-         * @protected
-         * @return {Number}
-         */
-        getTabCount: function () {
-            if (!this.hasTabs()) {
-                return 0;
-            }
+    /**
+     * @private
+     */
+    controlTabVisibilityShow: function (tab) {
+        if (!this.hasTabs() || tab === 0) {
+            return;
+        }
 
-            let count = 1;
+        if (this.isBeingRendered()) {
+            this.once('after:render', () => this.controlTabVisibilityShow(tab));
 
-            (this.detailLayout || []).forEach(item => {
-                if (item.tabBreak) {
-                    count ++;
-                }
-            });
+            return;
+        }
 
-            return count;
-        },
+        this.$el.find(`.middle-tabs > [data-tab="${tab.toString()}"]`).removeClass('hidden');
+    },
 
-        /**
-         * @protected
-         * @return {boolean}
-         */
-        hasTabs: function () {
-            if (typeof this._hasMiddleTabs !== 'undefined') {
-                return this._hasMiddleTabs;
-            }
+    /**
+     * @private
+     */
+    controlTabVisibilityHide: function (tab) {
+        if (!this.hasTabs() || tab === 0) {
+            return;
+        }
 
-            if (!this.detailLayout) {
-                return false;
-            }
+        if (this.isBeingRendered()) {
+            this.once('after:render', () => this.controlTabVisibilityHide(tab));
 
-            for (let item of this.detailLayout) {
-                if (item.tabBreak) {
-                    this._hasMiddleTabs = true;
+            return;
+        }
 
-                    return true;
-                }
-            }
+        let panelList = this.middlePanelDefsList.filter(panel => panel.tabNumber === tab);
 
-            this._hasMiddleTabs = false;
+        let allIsHidden = panelList
+            .findIndex(panel => !this.recordHelper.getPanelStateParam(panel.name, 'hidden')) === -1;
 
-            return false;
-        },
+        if (!allIsHidden) {
+            return;
+        }
 
-        /**
-         * @private
-         * @return {{label: string}[]}
-         */
-        getMiddleTabDataList: function () {
-            let currentTab = this.currentTab;
+        let $tab = this.$el.find(`.middle-tabs > [data-tab="${tab.toString()}"]`);
 
-            let panelDataList = this.middlePanelDefsList;
+        $tab.addClass('hidden');
 
-            return panelDataList
-                .filter((item, i) => i === 0 || item.tabBreak)
-                .map((item, i) => {
-                    let label = item.tabLabel;
+        if (this.currentTab === tab) {
+            this.selectTab(0);
+        }
+    },
 
-                    let hidden = false;
+    /**
+     * @private
+     */
+    adjustMiddlePanels: function () {
+        if (!this.isRendered() || !this.$middle.length) {
+            return;
+        }
 
-                    if (i > 0) {
-                        hidden = panelDataList
-                            .filter(panel => panel.tabNumber === i)
-                            .findIndex(panel => !this.recordHelper.getPanelStateParam(panel.name, 'hidden')) === -1;
-                    }
+        let $panels = this.$middle.find('> .panel');
+        let $bottomPanels = this.$bottom ? this.$bottom.find('> .panel') : null;
 
-                    if (!label) {
-                        label = i === 0 ?
-                            this.translate('Overview') :
-                            (i + 1).toString();
-                    }
-                    else if (label.substring(0, 7) === '$label:') {
-                        label = this.translate(label.substring(7), 'labels', this.scope);
-                    }
-                    else if (label[0] === '$') {
-                        label = this.translate(label.substring(1), 'tabs', this.scope);
-                    }
+        $panels
+            .removeClass('first')
+            .removeClass('last')
+            .removeClass('in-middle');
 
-                    return {
-                        label: label,
-                        isActive: currentTab === i,
-                        hidden: hidden,
-                    };
-                });
-        },
+        let $visiblePanels = $panels.filter(`:not(.tab-hidden):not(.hidden)`)
 
-        /**
-         * Select a tab.
-         *
-         * @protected
-         * @param {Number} tab
-         */
-        selectTab: function (tab) {
-            this.currentTab = tab;
-
-            $('.popover.in').removeClass('in');
-
-            this.whenRendered().then(() => {
-                this.$el.find('.middle-tabs > button').removeClass('active');
-                this.$el.find(`.middle-tabs > button[data-tab="${tab}"]`).addClass('active');
-
-                this.$el.find('.middle > .panel[data-tab]').addClass('tab-hidden');
-                this.$el.find(`.middle > .panel[data-tab="${tab}"]`).removeClass('tab-hidden');
-
-                this.adjustMiddlePanels();
-                this.recordHelper.trigger('panel-show');
-            });
-
-            this.storeTab();
-        },
-
-        /**
-         * @private
-         */
-        storeTab: function () {
-            let key = 'tab_middle';
-            let keyRecord = 'tab_middle_record';
-
-            this.getSessionStorage().set(key, this.currentTab);
-            this.getSessionStorage().set(keyRecord, this.entityType + '_' + this.model.id);
-        },
-
-        /**
-         * @private
-         */
-        selectStoredTab: function () {
-            let key = 'tab_middle';
-
-            let tab = this.getSessionStorage().get(key);
-
-            if (tab > 0) {
-                this.selectTab(tab);
-            }
-        },
-
-        /**
-         * @private
-         */
-        isStoredTabForThisRecord: function () {
-            let keyRecord = 'tab_middle_record';
-
-            return this.getSessionStorage().get(keyRecord) === this.entityType + '_' + this.model.id;
-        },
-
-        /**
-         * @inheritDoc
-          */
-        onInvalid: function (invalidFieldList) {
-            if (!this.hasTabs()) {
-                return;
-            }
-
-            let tabList = [];
-
-            for (let field of invalidFieldList) {
-                let view = this.getMiddleView().getFieldView(field);
-
-                if (!view) {
-                    continue;
-                }
-
-                let tabString = view.$el
-                    .closest('.panel.tab-hidden')
-                    .attr('data-tab');
-
-                let tab = parseInt(tabString);
-
-                if (tabList.indexOf(tab) !== -1) {
-                    continue;
-                }
-
-                tabList.push(tab);
-            }
-
-            if (!tabList.length) {
-                return;
-            }
-
-            let $tabs = this.$el.find('.middle-tabs');
-
-            tabList.forEach(tab => {
-                let $tab = $tabs.find(`> [data-tab="${tab.toString()}"]`);
-
-                $tab.addClass('invalid');
-
-                $tab.one('click', () => {
-                    $tab.removeClass('invalid');
-                });
-            })
-        },
-
-        /**
-         * @private
-         */
-        controlTabVisibilityShow: function (tab) {
-            if (!this.hasTabs() || tab === 0) {
-                return;
-            }
-
-            if (this.isBeingRendered()) {
-                this.once('after:render', () => this.controlTabVisibilityShow(tab));
-
-                return;
-            }
-
-            this.$el.find(`.middle-tabs > [data-tab="${tab.toString()}"]`).removeClass('hidden');
-        },
-
-        /**
-         * @private
-         */
-        controlTabVisibilityHide: function (tab) {
-            if (!this.hasTabs() || tab === 0) {
-                return;
-            }
-
-            if (this.isBeingRendered()) {
-                this.once('after:render', () => this.controlTabVisibilityHide(tab));
-
-                return;
-            }
-
-            let panelList = this.middlePanelDefsList.filter(panel => panel.tabNumber === tab);
-
-            let allIsHidden = panelList
-                .findIndex(panel => !this.recordHelper.getPanelStateParam(panel.name, 'hidden')) === -1;
-
-            if (!allIsHidden) {
-                return;
-            }
-
-            let $tab = this.$el.find(`.middle-tabs > [data-tab="${tab.toString()}"]`);
-
-            $tab.addClass('hidden');
-
-            if (this.currentTab === tab) {
-                this.selectTab(0);
-            }
-        },
-
-        /**
-         * @private
-         */
-        adjustMiddlePanels: function () {
-            if (!this.isRendered() || !this.$middle.length) {
-                return;
-            }
-
-            let $panels = this.$middle.find('> .panel');
-            let $bottomPanels = this.$bottom ? this.$bottom.find('> .panel') : null;
-
-            $panels
-                .removeClass('first')
-                .removeClass('last')
-                .removeClass('in-middle');
-
-            let $visiblePanels = $panels.filter(`:not(.tab-hidden):not(.hidden)`)
-
-            $visiblePanels.each((i, el) => {
-                let $el = $(el);
-
-                if (i === $visiblePanels.length - 1) {
-                    if ($bottomPanels && $bottomPanels.first().hasClass('sticked')) {
-                        if (i === 0) {
-                            $el.addClass('first');
-
-                            return;
-                        }
-
-                        $el.addClass('in-middle');
-
-                        return;
-                    }
+        $visiblePanels.each((i, el) => {
+            let $el = $(el);
 
+            if (i === $visiblePanels.length - 1) {
+                if ($bottomPanels && $bottomPanels.first().hasClass('sticked')) {
                     if (i === 0) {
+                        $el.addClass('first');
+
                         return;
                     }
 
-                    $el.addClass('last');
-
-                    return;
-                }
-
-                if (i > 0 && i < $visiblePanels.length - 1) {
                     $el.addClass('in-middle');
 
                     return;
                 }
 
                 if (i === 0) {
-                    $el.addClass('first');
+                    return;
                 }
-            });
-        },
 
-        /**
-         * @private
-         */
-        adjustButtons: function () {
-            let $buttons = this.$detailButtonContainer.filter('.record-buttons').find('button.btn');
-
-            $buttons
-                .removeClass('radius-left')
-                .removeClass('radius-right');
-
-            let $buttonsVisible = $buttons.filter('button:not(.hidden)');
-
-            $buttonsVisible.first().addClass('radius-left');
-            $buttonsVisible.last().addClass('radius-right');
-
-            this.adjustEditButtons();
-        },
-
-        /**
-         * @private
-         */
-        adjustEditButtons: function () {
-            let $buttons = this.$detailButtonContainer.filter('.edit-buttons').find('button.btn');
-
-            $buttons
-                .removeClass('radius-left')
-                .removeClass('radius-right');
-
-            let $buttonsVisible = $buttons.filter('button:not(.hidden)');
-
-            $buttonsVisible.first().addClass('radius-left');
-            $buttonsVisible.last().addClass('radius-right');
-        },
-
-        /**
-         * @private
-         */
-        initElementReferences() {
-            if (this.$detailButtonContainer && this.$detailButtonContainer.length) {
-                return;
-            }
-
-            this.$detailButtonContainer = this.$el.find('.detail-button-container');
-
-            this.$dropdownItemListButton = this.$detailButtonContainer
-                .find('.dropdown-item-list-button');
-
-            this.$dropdownEditItemListButton = this.$detailButtonContainer
-                .find('.dropdown-edit-item-list-button');
-        },
-
-        /**
-         * @protected
-         */
-        focusForEdit: function () {
-            this.$el
-                .find('.field:not(.hidden) .form-control:not([disabled])')
-                .first()
-                .focus();
-        },
-
-        /**
-         * @protected
-         */
-        focusForCreate: function () {
-            this.$el
-                .find('.form-control:not([disabled])')
-                .first()
-                .focus();
-        },
-
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlEnter: function (e) {
-            let action = this.shortcutKeyCtrlEnterAction;
-
-            if (this.inlineEditModeIsOn || this.buttonsDisabled || !action) {
-                return;
-            }
-
-            if (this.mode !== this.MODE_EDIT) {
-                return;
-            }
-
-            if (!this.hasAvailableActionItem(action)) {
-                return;
-            }
-
-            e.preventDefault();
-            e.stopPropagation();
-
-            let methodName = 'action' + Espo.Utils.upperCaseFirst(action);
-
-            this[methodName]();
-        },
-
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlS: function (e) {
-            if (this.inlineEditModeIsOn || this.buttonsDisabled) {
-                return;
-            }
-
-            e.preventDefault();
-            e.stopPropagation();
-
-            if (this.mode !== this.MODE_EDIT) {
-                return;
-            }
-
-            if (!this.saveAndContinueEditingAction) {
-                return;
-            }
-
-            if (!this.hasAvailableActionItem('saveAndContinueEditing')) {
-                return;
-            }
-
-            this.actionSaveAndContinueEditing();
-        },
-
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlSpace: function (e) {
-            if (this.inlineEditModeIsOn || this.buttonsDisabled) {
-                return;
-            }
-
-            if (this.type !== this.TYPE_DETAIL || this.mode !== this.MODE_DETAIL) {
-                return;
-            }
-
-            if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
-                return;
-            }
-
-            if (!this.hasAvailableActionItem('edit')) {
-                return;
-            }
-
-            $(e.currentTarget)
-
-            e.preventDefault();
-            e.stopPropagation();
-
-            this.actionEdit();
-
-            if (!this.editModeDisabled) {
-                setTimeout(() => this.focusForEdit(), 200);
-            }
-        },
-
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyEscape: function (e) {
-            if (this.inlineEditModeIsOn || this.buttonsDisabled) {
-                return;
-            }
-
-            if (this.type !== this.TYPE_DETAIL || this.mode !== this.MODE_EDIT) {
-                return;
-            }
-
-            e.preventDefault();
-            e.stopPropagation();
-
-            // Fetching a currently edited form element.
-            this.model.set(this.fetch());
-
-            if (this.isChanged) {
-                this.confirm(this.translate('confirmLeaveOutMessage', 'messages'))
-                    .then(() => this.actionCancelEdit());
+                $el.addClass('last');
 
                 return;
             }
 
-            this.actionCancelEdit();
-        },
-
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlAltEnter: function (e) {},
-
-        /**
-         * @public
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyControlBackslash: function (e) {
-            if (!this.hasTabs()) {
-                return;
-            }
-
-            let $buttons = this.$el.find('.middle-tabs > button:not(.hidden)');
-
-            if ($buttons.length === 1) {
-                return;
-            }
-
-            e.preventDefault();
-            e.stopPropagation();
-
-            let index = $buttons.toArray().findIndex(el => $(el).hasClass('active'));
-
-            index++;
-
-            if (index >= $buttons.length) {
-                index = 0;
-            }
-
-            let $tab = $($buttons.get(index));
-
-            let tab = parseInt($tab.attr('data-tab'));
-
-            this.selectTab(tab);
-
-            if (this.mode === this.MODE_EDIT) {
-                setTimeout(() => {
-                    this.$middle
-                        .find(`.panel[data-tab="${tab}"] .cell:not(.hidden)`)
-                        .first()
-                        .focus();
-                }, 50);
+            if (i > 0 && i < $visiblePanels.length - 1) {
+                $el.addClass('in-middle');
 
                 return;
             }
 
-            this.$el
-                .find(`.middle-tabs button[data-tab="${tab}"]`)
-                .focus();
-        },
-
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyControlArrowLeft: function (e) {
-            if (this.inlineEditModeIsOn || this.buttonsDisabled) {
-                return;
+            if (i === 0) {
+                $el.addClass('first');
             }
+        });
+    },
 
-            if (this.navigateButtonsDisabled) {
-                return;
-            }
+    /**
+     * @private
+     */
+    adjustButtons: function () {
+        let $buttons = this.$detailButtonContainer.filter('.record-buttons').find('button.btn');
 
-            if (this.type !== this.TYPE_DETAIL || this.mode !== this.MODE_DETAIL) {
-                return;
-            }
+        $buttons
+            .removeClass('radius-left')
+            .removeClass('radius-right');
 
-            if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
-                return;
-            }
+        let $buttonsVisible = $buttons.filter('button:not(.hidden)');
 
-            let $button = this.$el.find('button[data-action="previous"]');
+        $buttonsVisible.first().addClass('radius-left');
+        $buttonsVisible.last().addClass('radius-right');
 
-            if (!$button.length || $button.hasClass('disabled')) {
-                return;
-            }
+        this.adjustEditButtons();
+    },
 
-            e.preventDefault();
-            e.stopPropagation();
+    /**
+     * @private
+     */
+    adjustEditButtons: function () {
+        let $buttons = this.$detailButtonContainer.filter('.edit-buttons').find('button.btn');
 
-            this.actionPrevious();
-        },
+        $buttons
+            .removeClass('radius-left')
+            .removeClass('radius-right');
 
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyControlArrowRight: function (e) {
-            if (this.inlineEditModeIsOn || this.buttonsDisabled) {
-                return;
-            }
+        let $buttonsVisible = $buttons.filter('button:not(.hidden)');
 
-            if (this.navigateButtonsDisabled) {
-                return;
-            }
+        $buttonsVisible.first().addClass('radius-left');
+        $buttonsVisible.last().addClass('radius-right');
+    },
 
-            if (this.type !== this.TYPE_DETAIL || this.mode !== this.MODE_DETAIL) {
-                return;
-            }
+    /**
+     * @private
+     */
+    initElementReferences() {
+        if (this.$detailButtonContainer && this.$detailButtonContainer.length) {
+            return;
+        }
 
-            if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
-                return;
-            }
+        this.$detailButtonContainer = this.$el.find('.detail-button-container');
 
-            let $button = this.$el.find('button[data-action="next"]');
+        this.$dropdownItemListButton = this.$detailButtonContainer
+            .find('.dropdown-item-list-button');
 
-            if (!$button.length || $button.hasClass('disabled')) {
-                return;
-            }
+        this.$dropdownEditItemListButton = this.$detailButtonContainer
+            .find('.dropdown-edit-item-list-button');
+    },
 
-            e.preventDefault();
-            e.stopPropagation();
+    /**
+     * @protected
+     */
+    focusForEdit: function () {
+        this.$el
+            .find('.field:not(.hidden) .form-control:not([disabled])')
+            .first()
+            .focus();
+    },
 
-            this.actionNext();
-        },
-    });
+    /**
+     * @protected
+     */
+    focusForCreate: function () {
+        this.$el
+            .find('.form-control:not([disabled])')
+            .first()
+            .focus();
+    },
+
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlEnter: function (e) {
+        let action = this.shortcutKeyCtrlEnterAction;
+
+        if (this.inlineEditModeIsOn || this.buttonsDisabled || !action) {
+            return;
+        }
+
+        if (this.mode !== this.MODE_EDIT) {
+            return;
+        }
+
+        if (!this.hasAvailableActionItem(action)) {
+            return;
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        let methodName = 'action' + Espo.Utils.upperCaseFirst(action);
+
+        this[methodName]();
+    },
+
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlS: function (e) {
+        if (this.inlineEditModeIsOn || this.buttonsDisabled) {
+            return;
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (this.mode !== this.MODE_EDIT) {
+            return;
+        }
+
+        if (!this.saveAndContinueEditingAction) {
+            return;
+        }
+
+        if (!this.hasAvailableActionItem('saveAndContinueEditing')) {
+            return;
+        }
+
+        this.actionSaveAndContinueEditing();
+    },
+
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlSpace: function (e) {
+        if (this.inlineEditModeIsOn || this.buttonsDisabled) {
+            return;
+        }
+
+        if (this.type !== this.TYPE_DETAIL || this.mode !== this.MODE_DETAIL) {
+            return;
+        }
+
+        if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
+            return;
+        }
+
+        if (!this.hasAvailableActionItem('edit')) {
+            return;
+        }
+
+        $(e.currentTarget)
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.actionEdit();
+
+        if (!this.editModeDisabled) {
+            setTimeout(() => this.focusForEdit(), 200);
+        }
+    },
+
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyEscape: function (e) {
+        if (this.inlineEditModeIsOn || this.buttonsDisabled) {
+            return;
+        }
+
+        if (this.type !== this.TYPE_DETAIL || this.mode !== this.MODE_EDIT) {
+            return;
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        // Fetching a currently edited form element.
+        this.model.set(this.fetch());
+
+        if (this.isChanged) {
+            this.confirm(this.translate('confirmLeaveOutMessage', 'messages'))
+                .then(() => this.actionCancelEdit());
+
+            return;
+        }
+
+        this.actionCancelEdit();
+    },
+
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlAltEnter: function (e) {},
+
+    /**
+     * @public
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyControlBackslash: function (e) {
+        if (!this.hasTabs()) {
+            return;
+        }
+
+        let $buttons = this.$el.find('.middle-tabs > button:not(.hidden)');
+
+        if ($buttons.length === 1) {
+            return;
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        let index = $buttons.toArray().findIndex(el => $(el).hasClass('active'));
+
+        index++;
+
+        if (index >= $buttons.length) {
+            index = 0;
+        }
+
+        let $tab = $($buttons.get(index));
+
+        let tab = parseInt($tab.attr('data-tab'));
+
+        this.selectTab(tab);
+
+        if (this.mode === this.MODE_EDIT) {
+            setTimeout(() => {
+                this.$middle
+                    .find(`.panel[data-tab="${tab}"] .cell:not(.hidden)`)
+                    .first()
+                    .focus();
+            }, 50);
+
+            return;
+        }
+
+        this.$el
+            .find(`.middle-tabs button[data-tab="${tab}"]`)
+            .focus();
+    },
+
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyControlArrowLeft: function (e) {
+        if (this.inlineEditModeIsOn || this.buttonsDisabled) {
+            return;
+        }
+
+        if (this.navigateButtonsDisabled) {
+            return;
+        }
+
+        if (this.type !== this.TYPE_DETAIL || this.mode !== this.MODE_DETAIL) {
+            return;
+        }
+
+        if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
+            return;
+        }
+
+        let $button = this.$el.find('button[data-action="previous"]');
+
+        if (!$button.length || $button.hasClass('disabled')) {
+            return;
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.actionPrevious();
+    },
+
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyControlArrowRight: function (e) {
+        if (this.inlineEditModeIsOn || this.buttonsDisabled) {
+            return;
+        }
+
+        if (this.navigateButtonsDisabled) {
+            return;
+        }
+
+        if (this.type !== this.TYPE_DETAIL || this.mode !== this.MODE_DETAIL) {
+            return;
+        }
+
+        if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
+            return;
+        }
+
+        let $button = this.$el.find('button[data-action="next"]');
+
+        if (!$button.length || $button.hasClass('disabled')) {
+            return;
+        }
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.actionNext();
+    },
 });
diff --git a/client/src/views/record/edit-for-modal.js b/client/src/views/record/edit-for-modal.js
index b833626666..95e02769ab 100644
--- a/client/src/views/record/edit-for-modal.js
+++ b/client/src/views/record/edit-for-modal.js
@@ -26,28 +26,22 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/edit-for-modal', ['views/record/edit'], function (Dep) {
+/** @module views/record/edit-for-modal */
 
-    /**
-     * An edit-record view to used for custom forms.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/record/edit.Class
-     * @memberOf module:views/record/edit-for-modal
-     */
-    return Dep.extend(/** @lends module:views/record/edit-for-modal.Class# */{
+import Dep from 'views/record/edit';
 
-        bottomView: null,
+/**
+ * An edit-record view to used for custom forms.
+ *
+ * @class
+ * @name Class
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        sideView: null,
-
-        buttonsDisabled: true,
-
-        isWide: true,
-
-        accessControlDisabled: true,
-
-        confirmLeaveDisabled: true,
-    });
+    bottomView: null,
+    sideView: null,
+    buttonsDisabled: true,
+    isWide: true,
+    accessControlDisabled: true,
+    confirmLeaveDisabled: true,
 });
diff --git a/client/src/views/record/edit-side.js b/client/src/views/record/edit-side.js
index a3ff65df8e..6074225ec2 100644
--- a/client/src/views/record/edit-side.js
+++ b/client/src/views/record/edit-side.js
@@ -26,28 +26,35 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/edit-side', ['views/record/detail-side'], function (Dep) {
+/** @module views/record/edit-side */
 
-    return Dep.extend({
+import Dep from 'views/record/detail-side';
 
-        mode: 'edit',
+/**
+ * @class
+ * @name Class
+ * @extends module:views/record/detail-side
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        defaultPanelDefs: {
-            name: 'default',
-            label: false,
-            view: 'views/record/panels/side',
-            isForm: true,
-            options: {
-                fieldList: [
-                    {
-                        name: ':assignedUser'
-                    },
-                    {
-                        name: 'teams',
-                        view: 'views/fields/teams'
-                    }
-                ]
-            }
-        },
-    });
+    /** @inheritDoc */
+    mode: 'edit',
+
+    defaultPanelDefs: {
+        name: 'default',
+        label: false,
+        view: 'views/record/panels/side',
+        isForm: true,
+        options: {
+            fieldList: [
+                {
+                    name: ':assignedUser'
+                },
+                {
+                    name: 'teams',
+                    view: 'views/fields/teams'
+                }
+            ]
+        }
+    },
 });
diff --git a/client/src/views/record/edit.js b/client/src/views/record/edit.js
index db700d3575..15a9ab4f77 100644
--- a/client/src/views/record/edit.js
+++ b/client/src/views/record/edit.js
@@ -26,271 +26,228 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/edit', ['views/record/detail'], function (Dep) {
+/** @module views/record/edit */
+
+import Dep from 'views/record/detail';
+
+/**
+ * An edit-record view. Used for create and edit.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/record/detail
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    /** @inheritDoc */
+    template: 'record/edit',
+
+    /** @inheritDoc */
+    type: 'edit',
+    /** @inheritDoc */
+    name: 'edit',
+    /** @inheritDoc */
+    fieldsMode: 'edit',
+    /** @inheritDoc */
+    mode: 'edit',
+    /** @inheritDoc */
+    buttonList: [
+        {
+            name: 'save',
+            label: 'Save',
+            style: 'primary',
+            title: 'Ctrl+Enter',
+        },
+        {
+            name: 'cancel',
+            label: 'Cancel',
+            title: 'Esc',
+        }
+    ],
+    /** @inheritDoc */
+    dropdownItemList: [],
+    /** @inheritDoc */
+    sideView: 'views/record/edit-side',
+    /** @inheritDoc */
+    bottomView: 'views/record/edit-bottom',
+    /** @inheritDoc */
+    duplicateAction: false,
+    /** @inheritDoc */
+    saveAndContinueEditingAction: true,
+    /** @inheritDoc */
+    saveAndNewAction: true,
+    /** @inheritDoc */
+    setupHandlerType: 'record/edit',
+
+    /** @inheritDoc */
+    actionSave: function (data) {
+        data = data || {};
+
+        let isNew = this.isNew;
+
+        this.save(data.options)
+            .then(() => {
+                if (this.options.duplicateSourceId) {
+                    this.returnUrl = null;
+                }
+
+                this.exit(isNew ? 'create' : 'save');
+            })
+            .catch(() => {});
+    },
 
     /**
-     * An edit-record view. Used for create and edit.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/record/detail.Class
-     * @memberOf module:views/record/edit
+     * A `cancel` action.
      */
-    return Dep.extend(/** @lends module:views/record/edit.Class# */{
+    actionCancel: function () {
+        this.cancel();
+    },
 
-        /**
-         * @inheritDoc
-         */
-        template: 'record/edit',
+    /**
+     * Cancel.
+     */
+    cancel: function () {
+        if (this.isChanged) {
+            this.resetModelChanges();
+        }
 
-        /**
-         * @inheritDoc
-         */
-        type: 'edit',
+        this.setIsNotChanged();
+        this.exit('cancel');
+    },
 
-        /**
-         * @inheritDoc
-         */
-        name: 'edit',
+    /** @inheritDoc */
+    setupBeforeFinal: function () {
+        if (this.model.isNew()) {
+            this.populateDefaults();
+        }
 
-        /**
-         * @inheritDoc
-         */
-        fieldsMode: 'edit',
+        Dep.prototype.setupBeforeFinal.call(this);
 
-        /**
-         * @inheritDoc
-         */
-        mode: 'edit',
+        if (this.model.isNew()) {
+            this.once('after:render', () => {
+                this.model.set(this.fetch(), {silent: true});
+            })
+        }
 
-        /**
-         * @inheritDoc
-         */
-        buttonList: [
-            {
-                name: 'save',
-                label: 'Save',
-                style: 'primary',
-                title: 'Ctrl+Enter',
-            },
-            {
-                name: 'cancel',
-                label: 'Cancel',
-                title: 'Esc',
-            }
-        ],
+        if (this.options.focusForCreate) {
+            this.once('after:render', () => {
+                if (this.$el.closest('.modal').length) {
+                    setTimeout(() => this.focusForCreate(), 50);
 
-        /**
-         * @inheritDoc
-         */
-        dropdownItemList: [],
+                    return;
+                }
 
-        /**
-         * @inheritDoc
-         */
-        sideView: 'views/record/edit-side',
+                this.focusForCreate();
+            });
+        }
+    },
 
-        /**
-         * @inheritDoc
-         */
-        bottomView: 'views/record/edit-bottom',
+    /** @inheritDoc */
+    setupActionItems: function () {
+        Dep.prototype.setupActionItems.call(this);
 
-        /**
-         * @inheritDoc
-         */
-        duplicateAction: false,
+        if (
+            this.saveAndContinueEditingAction &&
+            this.getAcl().checkScope(this.entityType, 'edit')
+        ) {
+            this.dropdownItemList.push({
+                name: 'saveAndContinueEditing',
+                label: 'Save & Continue Editing',
+                title: 'Ctrl+S',
+            });
+        }
 
-        /**
-         * @inheritDoc
-         */
-        saveAndContinueEditingAction: true,
+        if (
+            this.isNew &&
+            this.saveAndNewAction &&
+            this.getAcl().checkScope(this.entityType, 'create')
+        ) {
+            this.dropdownItemList.push({
+                name: 'saveAndNew',
+                label: 'Save & New',
+                title: 'Ctrl+Alt+Enter',
+            });
+        }
+    },
 
-        /**
-         * @inheritDoc
-         */
-        saveAndNewAction: true,
+    /**
+     * A `save-and-create-new` action.
+     */
+    actionSaveAndNew: function (data) {
+        data = data || {};
 
-        /**
-         * @inheritDoc
-         */
-        setupHandlerType: 'record/edit',
+        let proceedCallback = () => {
+            Espo.Ui.success(this.translate('Created'));
 
-        /**
-         * @inheritDoc
-         */
-        actionSave: function (data) {
-            data = data || {};
+            this.getRouter().dispatch(this.scope, 'create', {
+                rootUrl: this.options.rootUrl,
+                focusForCreate: !!data.focusForCreate,
+            });
 
-            let isNew = this.isNew;
+            this.getRouter().navigate('#' + this.scope + '/create', {trigger: false});
+        };
 
-            this.save(data.options)
-                .then(() => {
-                    if (this.options.duplicateSourceId) {
-                        this.returnUrl = null;
-                    }
+        this.save(data.options)
+            .then(proceedCallback)
+            .catch(() => {});
 
-                    this.exit(isNew ? 'create' : 'save');
-                })
-                .catch(() => {});
-        },
+        if (this.lastSaveCancelReason === 'notModified') {
+             proceedCallback();
+        }
+    },
 
-        /**
-         * A `cancel` action.
-         */
-        actionCancel: function () {
-            this.cancel();
-        },
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyEscape: function (e) {
+        if (this.buttonsDisabled) {
+            return;
+        }
 
-        /**
-         * Cancel.
-         */
-        cancel: function () {
-            if (this.isChanged) {
-                this.resetModelChanges();
-            }
+        if (this.buttonList.findIndex(item => item.name === 'cancel' && !item.hidden) === -1) {
+            return;
+        }
 
-            this.setIsNotChanged();
-            this.exit('cancel');
-        },
+        e.preventDefault();
+        e.stopPropagation();
 
-        /**
-         * @inheritDoc
-         */
-        setupBeforeFinal: function () {
-            if (this.model.isNew()) {
-                this.populateDefaults();
-            }
+        let focusedFieldView = this.getFocusedFieldView();
 
-            Dep.prototype.setupBeforeFinal.call(this);
+        if (focusedFieldView) {
+            this.model.set(focusedFieldView.fetch());
+        }
 
-            if (this.model.isNew()) {
-                this.once('after:render', () => {
-                    this.model.set(this.fetch(), {silent: true});
-                })
-            }
+        if (this.isChanged) {
+            this.confirm(this.translate('confirmLeaveOutMessage', 'messages'))
+                .then(() => this.actionCancel());
 
-            if (this.options.focusForCreate) {
-                this.once('after:render', () => {
-                    if (this.$el.closest('.modal').length) {
-                        setTimeout(() => this.focusForCreate(), 50);
+            return;
+        }
 
-                        return;
-                    }
+        this.actionCancel();
+    },
 
-                    this.focusForCreate();
-                });
-            }
-        },
+    /**
+     * @protected
+     * @param {JQueryKeyEventObject} e
+     */
+    handleShortcutKeyCtrlAltEnter: function (e) {
+        if (this.buttonsDisabled) {
+            return;
+        }
 
-        /**
-         * @inheritDoc
-         */
-        setupActionItems: function () {
-            Dep.prototype.setupActionItems.call(this);
+        e.preventDefault();
+        e.stopPropagation();
 
-            if (
-                this.saveAndContinueEditingAction &&
-                this.getAcl().checkScope(this.entityType, 'edit')
-            ) {
-                this.dropdownItemList.push({
-                    name: 'saveAndContinueEditing',
-                    label: 'Save & Continue Editing',
-                    title: 'Ctrl+S',
-                });
-            }
+        if (!this.saveAndNewAction) {
+            return;
+        }
 
-            if (
-                this.isNew &&
-                this.saveAndNewAction &&
-                this.getAcl().checkScope(this.entityType, 'create')
-            ) {
-                this.dropdownItemList.push({
-                    name: 'saveAndNew',
-                    label: 'Save & New',
-                    title: 'Ctrl+Alt+Enter',
-                });
-            }
-        },
+        if (!this.hasAvailableActionItem('saveAndNew')) {
+            return;
+        }
 
-        /**
-         * A `save-and-create-new` action.
-         */
-        actionSaveAndNew: function (data) {
-            data = data || {};
-
-            let proceedCallback = () => {
-                Espo.Ui.success(this.translate('Created'));
-
-                this.getRouter().dispatch(this.scope, 'create', {
-                    rootUrl: this.options.rootUrl,
-                    focusForCreate: !!data.focusForCreate,
-                });
-
-                this.getRouter().navigate('#' + this.scope + '/create', {trigger: false});
-            };
-
-            this.save(data.options)
-                .then(proceedCallback)
-                .catch(() => {});
-
-            if (this.lastSaveCancelReason === 'notModified') {
-                 proceedCallback();
-            }
-        },
-
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyEscape: function (e) {
-            if (this.buttonsDisabled) {
-                return;
-            }
-
-            if (this.buttonList.findIndex(item => item.name === 'cancel' && !item.hidden) === -1) {
-                return;
-            }
-
-            e.preventDefault();
-            e.stopPropagation();
-
-            let focusedFieldView = this.getFocusedFieldView();
-
-            if (focusedFieldView) {
-                this.model.set(focusedFieldView.fetch());
-            }
-
-            if (this.isChanged) {
-                this.confirm(this.translate('confirmLeaveOutMessage', 'messages'))
-                    .then(() => this.actionCancel());
-
-                return;
-            }
-
-            this.actionCancel();
-        },
-
-        /**
-         * @protected
-         * @param {JQueryKeyEventObject} e
-         */
-        handleShortcutKeyCtrlAltEnter: function (e) {
-            if (this.buttonsDisabled) {
-                return;
-            }
-
-            e.preventDefault();
-            e.stopPropagation();
-
-            if (!this.saveAndNewAction) {
-                return;
-            }
-
-            if (!this.hasAvailableActionItem('saveAndNew')) {
-                return;
-            }
-
-            this.actionSaveAndNew({focusForCreate: true});
-        },
-    });
+        this.actionSaveAndNew({focusForCreate: true});
+    },
 });
diff --git a/client/src/views/record/kanban-item.js b/client/src/views/record/kanban-item.js
index c8b3cb92c1..4d7d3e398e 100644
--- a/client/src/views/record/kanban-item.js
+++ b/client/src/views/record/kanban-item.js
@@ -26,75 +26,78 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/kanban-item', ['view'], function (Dep) {
+import Dep from 'view';
 
-    return Dep.extend({
+/**
+ * @class
+ * @name Class
+ * @extends module:view
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        template: 'record/kanban-item',
+    template: 'record/kanban-item',
 
-        data: function () {
-            return {
-                layoutDataList: this.layoutDataList,
-                rowActionsDisabled: this.rowActionsDisabled,
+    data: function () {
+        return {
+            layoutDataList: this.layoutDataList,
+            rowActionsDisabled: this.rowActionsDisabled,
+        };
+    },
+
+    events: {},
+
+    setup: function () {
+        this.itemLayout = this.options.itemLayout;
+        this.rowActionsView = this.options.rowActionsView;
+        this.rowActionsDisabled = this.options.rowActionsDisabled;
+
+        this.layoutDataList = [];
+
+        this.itemLayout.forEach((item, i) => {
+            var name = item.name;
+            var key = name + 'Field';
+            var o = {
+                name: name,
+                isAlignRight: item.align === 'right',
+                isLarge: item.isLarge,
+                isFirst: i === 0,
+                key: key,
             };
-        },
 
-        events: {
-        },
+            this.layoutDataList.push(o);
 
-        setup: function () {
-            this.itemLayout = this.options.itemLayout;
-            this.rowActionsView = this.options.rowActionsView;
-            this.rowActionsDisabled = this.options.rowActionsDisabled;
-
-            this.layoutDataList = [];
-
-            this.itemLayout.forEach(function (item, i) {
-                var name = item.name;
-                var key = name + 'Field';
-                var o = {
-                    name: name,
-                    isAlignRight: item.align === 'right',
-                    isLarge: item.isLarge,
-                    isFirst: i === 0,
-                    key: key
-                };
-                this.layoutDataList.push(o);
-
-                var viewName = item.view || this.model.getFieldParam(name, 'view');
-                if (!viewName) {
-                    var type = this.model.getFieldType(name) || 'base';
-                    viewName = this.getFieldManager().getViewName(type);
-                }
-
-                var mode = 'list';
-                if (item.link) {
-                    mode = 'listLink';
-                }
-
-                this.createView(key, viewName, {
-                    model: this.model,
-                    name: name,
-                    mode: mode,
-                    readOnly: true,
-                    el: this.getSelector() + ' .field[data-name="'+name+'"]'
-                });
-
-            }, this);
-
-            if (!this.rowActionsDisabled) {
-                var acl =  {
-                    edit: this.getAcl().checkModel(this.model, 'edit'),
-                    delete: this.getAcl().checkModel(this.model, 'delete'),
-                };
-
-                this.createView('itemMenu', this.rowActionsView, {
-                    el: this.getSelector() + ' .item-menu-container',
-                    model: this.model,
-                    acl: acl,
-                    statusFieldIsEditable: this.options.statusFieldIsEditable,
-                });
+            var viewName = item.view || this.model.getFieldParam(name, 'view');
+            if (!viewName) {
+                var type = this.model.getFieldType(name) || 'base';
+                viewName = this.getFieldManager().getViewName(type);
             }
-        },
-    });
+
+            var mode = 'list';
+            if (item.link) {
+                mode = 'listLink';
+            }
+
+            this.createView(key, viewName, {
+                model: this.model,
+                name: name,
+                mode: mode,
+                readOnly: true,
+                el: this.getSelector() + ' .field[data-name="'+name+'"]',
+            });
+        });
+
+        if (!this.rowActionsDisabled) {
+            var acl =  {
+                edit: this.getAcl().checkModel(this.model, 'edit'),
+                delete: this.getAcl().checkModel(this.model, 'delete'),
+            };
+
+            this.createView('itemMenu', this.rowActionsView, {
+                el: this.getSelector() + ' .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 310352736e..620bb0b0d4 100644
--- a/client/src/views/record/kanban.js
+++ b/client/src/views/record/kanban.js
@@ -26,1167 +26,1159 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/kanban', ['views/record/list'], function (Dep) {
+/** @module views/record/kanban */
 
-    /**
-     * A kanban record view.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/record/list.Class
-     * @memberOf module:views/record/kanban
-     */
-    return Dep.extend(/** @lends module:views/record/kanban.Class# */{
+import Dep from 'views/record/list';
 
-        template: 'record/kanban',
+/**
+ * A kanban record view.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/record/list
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        type: 'kanban',
+    template: 'record/kanban',
 
-        name: 'kanban',
+    type: 'kanban',
+    name: 'kanban',
 
-        scope: null,
+    scope: null,
+    showCount: true,
+    buttonList: [],
+    headerDisabled: false,
+    layoutName: 'kanban',
+    portalLayoutDisabled: false,
+    minColumnWidthPx: 220,
 
-        showCount: true,
+    itemViewName: 'views/record/kanban-item',
+    rowActionsView: 'views/record/row-actions/default-kanban',
 
-        buttonList: [],
+    events: {
+        'click a.link': function (e) {
+            if (e.ctrlKey || e.metaKey || e.shiftKey) {
+                return;
+            }
 
-        headerDisabled: false,
+            e.stopPropagation();
 
-        layoutName: 'kanban',
+            if (!this.scope || this.selectable) {
+                return;
+            }
 
-        portalLayoutDisabled: false,
+            e.preventDefault();
 
-        itemViewName: 'views/record/kanban-item',
+            let id = $(e.currentTarget).data('id');
+            let model = this.collection.get(id);
 
-        rowActionsView: 'views/record/row-actions/default-kanban',
+            let scope = this.getModelScope(id);
 
-        minColumnWidthPx: 220,
-
-        events: {
-            'click a.link': function (e) {
-                if (e.ctrlKey || e.metaKey || e.shiftKey) {
-                    return;
-                }
-
-                e.stopPropagation();
-
-                if (!this.scope || this.selectable) {
-                    return;
-                }
-
-                e.preventDefault();
-
-                let id = $(e.currentTarget).data('id');
-                let model = this.collection.get(id);
-
-                let scope = this.getModelScope(id);
-
-                let options = {
-                    id: id,
-                    model: model,
-                };
-
-                if (this.options.keepCurrentRootUrl) {
-                    options.rootUrl = this.getRouter().getCurrentUrl();
-                }
-
-                this.getRouter().navigate('#' + scope + '/view/' + id, {trigger: false});
-                this.getRouter().dispatch(scope, 'view', options);
-            },
-            'click [data-action="groupShowMore"]': function (e) {
-                let $target = $(e.currentTarget);
-
-                let group = $target.data('name');
-
-                this.groupShowMore(group);
-            },
-            'click .action': function (e) {
-                Espo.Utils.handleAction(this, e);
-            },
-            'mouseenter th.group-header': function (e) {
-                let group = $(e.currentTarget).attr('data-name');
-
-                this.showPlus(group);
-            },
-            'mouseleave th.group-header': function (e) {
-                let group = $(e.currentTarget).attr('data-name');
-
-                this.hidePlus(group);
-            },
-            'click [data-action="createInGroup"]': function (e) {
-                let group = $(e.currentTarget).attr('data-group');
-
-                this.actionCreateInGroup(group);
-            },
-            'mousedown .kanban-columns td': function (e) {
-                if ($(e.originalEvent.target).closest('.item').length) {
-                    return;
-                }
-
-                this.initBackDrag(e.originalEvent);
-            },
-            /**
-             * @param {JQueryMouseEventObject} e
-             * @this module:views/record/kanban.Class
-             */
-            'auxclick a.link': function (e) {
-                let isCombination = e.button === 1 && (e.ctrlKey || e.metaKey);
-
-                if (!isCombination) {
-                    return;
-                }
-
-                let $target = $(e.currentTarget);
-
-                let id = $target.attr('data-id');
-
-                if (!id) {
-                    return;
-                }
-
-                if (this.quickDetailDisabled) {
-                    return;
-                }
-
-                let $quickView = $target.parent().closest(`[data-id="${id}"]`)
-                    .find(`ul.list-row-dropdown-menu[data-id="${id}"] a[data-action="quickView"]`);
-
-                if (!$quickView.length) {
-                    return;
-                }
-
-                e.preventDefault();
-                e.stopPropagation();
-
-                this.actionQuickView({id: id});
-            },
-        },
-
-        showMore: true,
-
-        quickDetailDisabled: false,
-
-        quickEditDisabled: false,
-
-        listLayout: null,
-
-        _internalLayout: null,
-
-        buttonsDisabled: false,
-
-        backDragStarted: true,
-
-        data: function () {
-            return {
-                scope: this.scope,
-                header: this.header,
-                topBar: this.displayTotalCount || this.buttonList.length && !this.buttonsDisabled,
-                showCount: this.showCount && this.collection.total > 0,
-                buttonList: this.buttonList,
-                displayTotalCount: this.displayTotalCount && this.collection.total >= 0,
-                totalCount: this.collection.total,
-                statusList: this.statusList,
-                groupDataList: this.groupDataList,
-                minTableWidthPx: this.minColumnWidthPx * this.statusList.length,
-                isEmptyList: this.collection.models.length === 0,
-                totalCountFormatted: this.getNumberUtil().formatInt(this.collection.total),
-                isCreatable: this.isCreatable,
+            let options = {
+                id: id,
+                model: model,
             };
+
+            if (this.options.keepCurrentRootUrl) {
+                options.rootUrl = this.getRouter().getCurrentUrl();
+            }
+
+            this.getRouter().navigate('#' + scope + '/view/' + id, {trigger: false});
+            this.getRouter().dispatch(scope, 'view', options);
         },
+        'click [data-action="groupShowMore"]': function (e) {
+            let $target = $(e.currentTarget);
 
-        init: function () {
-            this.listLayout = this.options.listLayout || this.listLayout;
-            this.type = this.options.type || this.type;
+            let group = $target.data('name');
 
-            this.layoutName = this.options.layoutName || this.layoutName || this.type;
-
-            this.rowActionsView = _.isUndefined(this.options.rowActionsView) ?
-                this.rowActionsView :
-                this.options.rowActionsView;
-
-            if (this.massActionsDisabled && !this.selectable) {
-                this.checkboxes = false;
-            }
-
-            this.rowActionsDisabled = this.options.rowActionsDisabled || this.rowActionsDisabled;
-
-            if ('buttonsDisabled' in this.options) {
-                this.buttonsDisabled = this.options.buttonsDisabled;
-            }
+            this.groupShowMore(group);
         },
-
-        getModelScope: function (id) {
-            return this.scope;
+        'click .action': function (e) {
+            Espo.Utils.handleAction(this, e);
         },
+        'mouseenter th.group-header': function (e) {
+            let group = $(e.currentTarget).attr('data-name');
 
-        setup: function () {
-            if (typeof this.collection === 'undefined') {
-                throw new Error('Collection has not been injected into Record.List view.');
+            this.showPlus(group);
+        },
+        'mouseleave th.group-header': function (e) {
+            let group = $(e.currentTarget).attr('data-name');
+
+            this.hidePlus(group);
+        },
+        'click [data-action="createInGroup"]': function (e) {
+            let group = $(e.currentTarget).attr('data-group');
+
+            this.actionCreateInGroup(group);
+        },
+        'mousedown .kanban-columns td': function (e) {
+            if ($(e.originalEvent.target).closest('.item').length) {
+                return;
             }
 
-            this.layoutLoadCallbackList = [];
+            this.initBackDrag(e.originalEvent);
+        },
+        /**
+         * @param {JQueryMouseEventObject} e
+         * @this module:views/record/kanban.Class
+         */
+        'auxclick a.link': function (e) {
+            let isCombination = e.button === 1 && (e.ctrlKey || e.metaKey);
 
-            this.entityType = this.collection.name || null;
-            this.scope = this.options.scope || this.entityType;
-
-            this.buttonList = Espo.Utils.clone(this.buttonList);
-
-            if ('showCount' in this.options) {
-                this.showCount = this.options.showCount;
+            if (!isCombination) {
+                return;
             }
 
-            this.displayTotalCount = this.showCount && this.getConfig().get('displayListViewRecordCount');
+            let $target = $(e.currentTarget);
 
-            this.minColumnWidthPx = this.getConfig().get('kanbanMinColumnWidth') || this.minColumnWidthPx;
+            let id = $target.attr('data-id');
 
-            if ('displayTotalCount' in this.options) {
-                this.displayTotalCount = this.options.displayTotalCount;
+            if (!id) {
+                return;
             }
 
-            if (this.getUser().isPortal() && !this.portalLayoutDisabled) {
-                if (
-                    this.getMetadata()
-                        .get(['clientDefs', this.scope, 'additionalLayouts', this.layoutName + 'Portal'])
-                ) {
-                    this.layoutName += 'Portal';
-                }
+            if (this.quickDetailDisabled) {
+                return;
             }
 
-            this.orderDisabled = this.getMetadata().get(['scopes', this.scope, 'kanbanOrderDisabled']);
+            let $quickView = $target.parent().closest(`[data-id="${id}"]`)
+                .find(`ul.list-row-dropdown-menu[data-id="${id}"] a[data-action="quickView"]`);
 
-            if (this.getUser().isPortal()) {
-                this.orderDisabled = true;
+            if (!$quickView.length) {
+                return;
             }
 
-            this.statusField = this.getMetadata().get(['scopes', this.scope, 'statusField']);
+            e.preventDefault();
+            e.stopPropagation();
 
-            if (!this.statusField) {
-                throw new Error("No status field for entity type '" + this.scope + "'.");
-            }
+            this.actionQuickView({id: id});
+        },
+    },
 
-            this.statusList = Espo.Utils.clone(this.getMetadata().get(
-                ['entityDefs', this.scope, 'fields', this.statusField, 'options'])
-            );
+    showMore: true,
 
-            let statusIgnoreList = this.getMetadata().get(['scopes', this.scope, 'kanbanStatusIgnoreList']) || [];
+    quickDetailDisabled: false,
 
-            this.statusList = this.statusList.filter((item) => {
-                if (~statusIgnoreList.indexOf(item)) {
-                    return;
-                }
+    quickEditDisabled: false,
 
-                return true;
-            });
+    listLayout: null,
 
-            this.seedCollection = this.collection.clone();
-            this.seedCollection.reset();
-            this.seedCollection.url = this.scope;
-            this.seedCollection.maxSize = this.collection.maxSize;
-            this.seedCollection.name = this.collection.name;
-            this.seedCollection.orderBy = this.collection.defaultOrderBy;
-            this.seedCollection.order = this.collection.defaultOrder;
+    _internalLayout: null,
 
-            this.listenTo(this.collection, 'sync', () => {
-                if (this.hasView('modal') && this.getView('modal').isRendered()) {
-                    return;
-                }
+    buttonsDisabled: false,
 
-                this.buildRows(() => {
-                    this.render();
-                });
-            });
+    backDragStarted: true,
 
-            this.collection.listenTo(
-                this.collection,
-                'change:' + this.statusField,
-                this.onChangeGroup.bind(this),
-                this
-            );
+    data: function () {
+        return {
+            scope: this.scope,
+            header: this.header,
+            topBar: this.displayTotalCount || this.buttonList.length && !this.buttonsDisabled,
+            showCount: this.showCount && this.collection.total > 0,
+            buttonList: this.buttonList,
+            displayTotalCount: this.displayTotalCount && this.collection.total >= 0,
+            totalCount: this.collection.total,
+            statusList: this.statusList,
+            groupDataList: this.groupDataList,
+            minTableWidthPx: this.minColumnWidthPx * this.statusList.length,
+            isEmptyList: this.collection.models.length === 0,
+            totalCountFormatted: this.getNumberUtil().formatInt(this.collection.total),
+            isCreatable: this.isCreatable,
+        };
+    },
 
-            this.buildRows();
+    init: function () {
+        this.listLayout = this.options.listLayout || this.listLayout;
+        this.type = this.options.type || this.type;
 
-            this.on('remove', () => {
-                $(window).off('resize.kanban-a-' + this.cid);
-                $(window).off('scroll.kanban-' + this.cid);
-                $(window).off('resize.kanban-' + this.cid);
-            });
+        this.layoutName = this.options.layoutName || this.layoutName || this.type;
 
+        this.rowActionsView = _.isUndefined(this.options.rowActionsView) ?
+            this.rowActionsView :
+            this.options.rowActionsView;
+
+        if (this.massActionsDisabled && !this.selectable) {
+            this.checkboxes = false;
+        }
+
+        this.rowActionsDisabled = this.options.rowActionsDisabled || this.rowActionsDisabled;
+
+        if ('buttonsDisabled' in this.options) {
+            this.buttonsDisabled = this.options.buttonsDisabled;
+        }
+    },
+
+    getModelScope: function (id) {
+        return this.scope;
+    },
+
+    setup: function () {
+        if (typeof this.collection === 'undefined') {
+            throw new Error('Collection has not been injected into Record.List view.');
+        }
+
+        this.layoutLoadCallbackList = [];
+
+        this.entityType = this.collection.name || null;
+        this.scope = this.options.scope || this.entityType;
+
+        this.buttonList = Espo.Utils.clone(this.buttonList);
+
+        if ('showCount' in this.options) {
+            this.showCount = this.options.showCount;
+        }
+
+        this.displayTotalCount = this.showCount && this.getConfig().get('displayListViewRecordCount');
+
+        this.minColumnWidthPx = this.getConfig().get('kanbanMinColumnWidth') || this.minColumnWidthPx;
+
+        if ('displayTotalCount' in this.options) {
+            this.displayTotalCount = this.options.displayTotalCount;
+        }
+
+        if (this.getUser().isPortal() && !this.portalLayoutDisabled) {
             if (
-                this.getAcl().checkScope(this.entityType, 'edit') &&
-                !~this.getAcl().getScopeForbiddenFieldList(this.entityType, 'edit').indexOf(this.statusField) &&
-                !this.getMetadata().get(['clientDefs', this.scope, 'editDisabled'])
+                this.getMetadata()
+                    .get(['clientDefs', this.scope, 'additionalLayouts', this.layoutName + 'Portal'])
             ) {
-                this.statusFieldIsEditable = true;
-            } else {
-                this.statusFieldIsEditable = false;
+                this.layoutName += 'Portal';
+            }
+        }
+
+        this.orderDisabled = this.getMetadata().get(['scopes', this.scope, 'kanbanOrderDisabled']);
+
+        if (this.getUser().isPortal()) {
+            this.orderDisabled = true;
+        }
+
+        this.statusField = this.getMetadata().get(['scopes', this.scope, 'statusField']);
+
+        if (!this.statusField) {
+            throw new Error("No status field for entity type '" + this.scope + "'.");
+        }
+
+        this.statusList = Espo.Utils.clone(this.getMetadata().get(
+            ['entityDefs', this.scope, 'fields', this.statusField, 'options'])
+        );
+
+        let statusIgnoreList = this.getMetadata().get(['scopes', this.scope, 'kanbanStatusIgnoreList']) || [];
+
+        this.statusList = this.statusList.filter((item) => {
+            if (~statusIgnoreList.indexOf(item)) {
+                return;
             }
 
-            this.isCreatable = this.statusFieldIsEditable && this.getAcl().check(this.entityType, 'create');
+            return true;
+        });
 
-            this.getHelper().processSetupHandlers(this, 'record/kanban');
-        },
+        this.seedCollection = this.collection.clone();
+        this.seedCollection.reset();
+        this.seedCollection.url = this.scope;
+        this.seedCollection.maxSize = this.collection.maxSize;
+        this.seedCollection.name = this.collection.name;
+        this.seedCollection.orderBy = this.collection.defaultOrderBy;
+        this.seedCollection.order = this.collection.defaultOrder;
 
-        afterRender: function () {
-            let $window = $(window);
-
-            this.$listKanban = this.$el.find('.list-kanban');
-            this.$content = $('#content');
-
-            this.$groupColumnList = this.$listKanban.find('.group-column-list');
-
-            this.$container = this.$el.find('.list-kanban-container');
-
-            $window.off('resize.kanban-a-' + this.cid);
-            $window.on('resize.kanban-a-' + this.cid, () => this.adjustMinHeight());
-
-            this.$container.on('scroll', () => this.syncHeadScroll());
-
-            this.adjustMinHeight();
-
-            if (this.statusFieldIsEditable) {
-                this.initSortable();
+        this.listenTo(this.collection, 'sync', () => {
+            if (this.hasView('modal') && this.getView('modal').isRendered()) {
+                return;
             }
 
-            this.initStickableHeader();
-
-            this.$showMore = this.$el.find('.group-column .show-more');
-
-            this.plusElementMap = {};
-
-            this.statusList.forEach(status => {
-                let value = status.replace(/"/g, '\\"');
-
-                this.plusElementMap[status] = this.$el
-                    .find('.kanban-head .create-button[data-group="' + value + '"]');
+            this.buildRows(() => {
+                this.render();
             });
-        },
+        });
 
-        initStickableHeader: function () {
-            let $container = this.$headContainer = this.$el.find('.kanban-head-container');
-            let topBarHeight = this.getThemeManager().getParam('navbarHeight') || 30;
+        this.collection.listenTo(
+            this.collection,
+            'change:' + this.statusField,
+            this.onChangeGroup.bind(this),
+            this
+        );
 
-            let screenWidthXs = this.getThemeManager().getParam('screenWidthXs');
+        this.buildRows();
 
-            let $middle = this.$el.find('.kanban-columns-container');
-            let $window = $(window);
+        this.on('remove', () => {
+            $(window).off('resize.kanban-a-' + this.cid);
+            $(window).off('scroll.kanban-' + this.cid);
+            $(window).off('resize.kanban-' + this.cid);
+        });
 
-            let $block = $('<div>')
-                .addClass('kanban-head-placeholder')
-                .html('&nbsp;')
-                .hide()
-                .insertAfter($container);
+        if (
+            this.getAcl().checkScope(this.entityType, 'edit') &&
+            !~this.getAcl().getScopeForbiddenFieldList(this.entityType, 'edit').indexOf(this.statusField) &&
+            !this.getMetadata().get(['clientDefs', this.scope, 'editDisabled'])
+        ) {
+            this.statusFieldIsEditable = true;
+        } else {
+            this.statusFieldIsEditable = false;
+        }
 
-            $window.off('scroll.kanban-' + this.cid);
-            $window.on('scroll.kanban-' + this.cid, () => {
-                controlSticking();
-            });
+        this.isCreatable = this.statusFieldIsEditable && this.getAcl().check(this.entityType, 'create');
 
-            $window.off('resize.kanban-' + this.cid);
-            $window.on('resize.kanban-' + this.cid, () => controlSticking());
+        this.getHelper().processSetupHandlers(this, 'record/kanban');
+    },
 
-            let controlSticking = () => {
-                let width = $middle.width();
+    afterRender: function () {
+        let $window = $(window);
 
-                if ($(window.document).width() < screenWidthXs) {
-                    $container.removeClass('sticked');
-                    $container.css('width', '');
-                    $block.hide();
-                    $container.show();
+        this.$listKanban = this.$el.find('.list-kanban');
+        this.$content = $('#content');
 
-                    $container.get(0).scrollLeft = 0;
-                    $container.children(0).css('width', '');
+        this.$groupColumnList = this.$listKanban.find('.group-column-list');
 
-                    return;
-                }
+        this.$container = this.$el.find('.list-kanban-container');
 
-                let stickTop = this.$listKanban.offset().top - topBarHeight;
+        $window.off('resize.kanban-a-' + this.cid);
+        $window.on('resize.kanban-a-' + this.cid, () => this.adjustMinHeight());
 
-                let edge = $middle.offset().top + $middle.outerHeight(true);
-                let scrollTop = $window.scrollTop();
+        this.$container.on('scroll', () => this.syncHeadScroll());
 
-                if (scrollTop < edge) {
-                    if (scrollTop > stickTop) {
-                        let containerWidth = this.$container.width() - 3;
+        this.adjustMinHeight();
 
-                        $container.children().css('width', width);
+        if (this.statusFieldIsEditable) {
+            this.initSortable();
+        }
 
-                        $container.css('width', containerWidth + 'px');
+        this.initStickableHeader();
 
-                        if (!$container.hasClass('sticked')) {
-                            $container.addClass('sticked');
-                            $block.show();
-                        }
-                    } else {
-                        $container.css('width', '');
+        this.$showMore = this.$el.find('.group-column .show-more');
 
-                        if ($container.hasClass('sticked')) {
-                            $container.removeClass('sticked');
-                            $block.hide();
-                        }
-                    }
+        this.plusElementMap = {};
 
-                    $container.show();
+        this.statusList.forEach(status => {
+            let value = status.replace(/"/g, '\\"');
 
-                    this.syncHeadScroll();
+            this.plusElementMap[status] = this.$el
+                .find('.kanban-head .create-button[data-group="' + value + '"]');
+        });
+    },
 
-                    return;
-                }
+    initStickableHeader: function () {
+        let $container = this.$headContainer = this.$el.find('.kanban-head-container');
+        let topBarHeight = this.getThemeManager().getParam('navbarHeight') || 30;
 
-                $container.css('width', width + 'px');
-                $container.hide();
+        let screenWidthXs = this.getThemeManager().getParam('screenWidthXs');
 
-                $block.show();
+        let $middle = this.$el.find('.kanban-columns-container');
+        let $window = $(window);
+
+        let $block = $('<div>')
+            .addClass('kanban-head-placeholder')
+            .html('&nbsp;')
+            .hide()
+            .insertAfter($container);
+
+        $window.off('scroll.kanban-' + this.cid);
+        $window.on('scroll.kanban-' + this.cid, () => {
+            controlSticking();
+        });
+
+        $window.off('resize.kanban-' + this.cid);
+        $window.on('resize.kanban-' + this.cid, () => controlSticking());
+
+        let controlSticking = () => {
+            let width = $middle.width();
+
+            if ($(window.document).width() < screenWidthXs) {
+                $container.removeClass('sticked');
+                $container.css('width', '');
+                $block.hide();
+                $container.show();
 
                 $container.get(0).scrollLeft = 0;
-                $container.children().css('width', '');
-            };
-        },
+                $container.children(0).css('width', '');
 
-        initSortable: function () {
-            let $list = this.$groupColumnList;
-
-            $list.find('> .item').on('touchstart', (e) => {
-                e.originalEvent.stopPropagation();
-            });
-
-            let orderDisabled = this.orderDisabled;
-
-            let $groupColumnList = this.$el.find('.group-column-list');
-
-            $list.sortable({
-                distance: 10,
-                connectWith: '.group-column-list',
-                cancel: '.btn-group *',
-                containment: this.getSelector(),
-                scroll: false,
-                over: function (e, ui) {
-                    $(this).addClass('drop-hover');
-                },
-                out: function (e, ui) {
-                    $(this).removeClass('drop-hover');
-                },
-                sort: (e, ui) => {
-                    if (!this.blockScrollControl) {
-                        this.controlHorizontalScroll(e.originalEvent);
-                    }
-                },
-                start: (e, ui) => {
-                    $groupColumnList.addClass('drop-active');
-
-                    $list.sortable('refreshPositions');
-
-                    $(ui.item)
-                        .find('.btn-group.open > .dropdown-toggle')
-                        .parent()
-                        .removeClass('open');
-
-                    this.draggedGroupFrom = $(ui.item).closest('.group-column-list').data('name');
-                    this.$showMore.addClass('hidden');
-
-                    this.sortIsStarted = true;
-                    this.sortWasCentered = false;
-
-                    this.$draggable = ui.item;
-                },
-                stop: (e, ui) => {
-                    this.blockScrollControl = false;
-                    this.sortIsStarted = false;
-                    this.$draggable = null;
-
-                    let $item = $(ui.item);
-
-                    this.$el.find('.group-column-list').removeClass('drop-active');
-
-                    let group = $item.closest('.group-column-list').data('name');
-                    let id = $item.data('id');
-
-                    let draggedGroupFrom = this.draggedGroupFrom;
-
-                    this.draggedGroupFrom = null;
-
-                    this.$showMore.removeClass('hidden');
-
-                    if (group !== draggedGroupFrom) {
-                        let model = this.collection.get(id);
-
-                        if (!model) {
-                            $list.sortable('cancel');
-
-                            return;
-                        }
-
-                        let attributes = {};
-
-                        attributes[this.statusField] = group;
-
-                        this.handleAttributesOnGroupChange(model, attributes, group);
-
-                        $list.sortable('disable');
-
-                        model
-                            .save(attributes, {
-                                patch: true,
-                                isDrop: true,
-                            })
-                            .then(() => {
-                                Espo.Ui.success(this.translate('Saved'));
-
-                                $list.sortable('destroy');
-
-                                this.initSortable();
-
-                                this.moveModelBetweenGroupCollections(model, draggedGroupFrom, group);
-
-                                if (!orderDisabled) {
-                                    this.reOrderGroup(group);
-                                    this.storeGroupOrder(group);
-                                }
-
-                                this.rebuildGroupDataList();
-                            })
-                            .catch(() => {
-                                $list.sortable('cancel');
-                                $list.sortable('enable');
-                            });
-
-                        return;
-                    }
-
-                    if (orderDisabled) {
-                        $list.sortable('cancel');
-                        $list.sortable('enable');
-
-                        return;
-                    }
-
-                    this.reOrderGroup(group);
-                    this.storeGroupOrder(group);
-                    this.rebuildGroupDataList();
-                },
-            });
-        },
-
-        storeGroupOrder: function (group) {
-            Espo.Ajax.putRequest('Kanban/order', {
-                entityType: this.entityType,
-                group: group,
-                ids: this.getGroupOrderFromDom(group),
-            });
-        },
-
-        getGroupOrderFromDom: function (group) {
-            let ids = [];
-
-            let $group = this.$el.find('.group-column-list[data-name="'+group+'"]');
-
-            $group.children().each((i, el) => {
-                ids.push($(el).data('id'));
-            });
-
-            return ids;
-        },
-
-        reOrderGroup: function (group) {
-            let groupCollection = this.getGroupCollection(group);
-            let ids = this.getGroupOrderFromDom(group);
-
-            let modelMap = {};
-
-            groupCollection.models.forEach((m) => {
-                modelMap[m.id] = m;
-            });
-
-            while (groupCollection.models.length) {
-                groupCollection.pop({silent: true});
+                return;
             }
 
-            ids.forEach(id => {
-                let model = modelMap[id];
+            let stickTop = this.$listKanban.offset().top - topBarHeight;
+
+            let edge = $middle.offset().top + $middle.outerHeight(true);
+            let scrollTop = $window.scrollTop();
+
+            if (scrollTop < edge) {
+                if (scrollTop > stickTop) {
+                    let containerWidth = this.$container.width() - 3;
+
+                    $container.children().css('width', width);
+
+                    $container.css('width', containerWidth + 'px');
+
+                    if (!$container.hasClass('sticked')) {
+                        $container.addClass('sticked');
+                        $block.show();
+                    }
+                } else {
+                    $container.css('width', '');
+
+                    if ($container.hasClass('sticked')) {
+                        $container.removeClass('sticked');
+                        $block.hide();
+                    }
+                }
+
+                $container.show();
+
+                this.syncHeadScroll();
+
+                return;
+            }
+
+            $container.css('width', width + 'px');
+            $container.hide();
+
+            $block.show();
+
+            $container.get(0).scrollLeft = 0;
+            $container.children().css('width', '');
+        };
+    },
+
+    initSortable: function () {
+        let $list = this.$groupColumnList;
+
+        $list.find('> .item').on('touchstart', (e) => {
+            e.originalEvent.stopPropagation();
+        });
+
+        let orderDisabled = this.orderDisabled;
+
+        let $groupColumnList = this.$el.find('.group-column-list');
+
+        $list.sortable({
+            distance: 10,
+            connectWith: '.group-column-list',
+            cancel: '.btn-group *',
+            containment: this.getSelector(),
+            scroll: false,
+            over: function (e, ui) {
+                $(this).addClass('drop-hover');
+            },
+            out: function (e, ui) {
+                $(this).removeClass('drop-hover');
+            },
+            sort: (e, ui) => {
+                if (!this.blockScrollControl) {
+                    this.controlHorizontalScroll(e.originalEvent);
+                }
+            },
+            start: (e, ui) => {
+                $groupColumnList.addClass('drop-active');
+
+                $list.sortable('refreshPositions');
+
+                $(ui.item)
+                    .find('.btn-group.open > .dropdown-toggle')
+                    .parent()
+                    .removeClass('open');
+
+                this.draggedGroupFrom = $(ui.item).closest('.group-column-list').data('name');
+                this.$showMore.addClass('hidden');
+
+                this.sortIsStarted = true;
+                this.sortWasCentered = false;
+
+                this.$draggable = ui.item;
+            },
+            stop: (e, ui) => {
+                this.blockScrollControl = false;
+                this.sortIsStarted = false;
+                this.$draggable = null;
+
+                let $item = $(ui.item);
+
+                this.$el.find('.group-column-list').removeClass('drop-active');
+
+                let group = $item.closest('.group-column-list').data('name');
+                let id = $item.data('id');
+
+                let draggedGroupFrom = this.draggedGroupFrom;
+
+                this.draggedGroupFrom = null;
+
+                this.$showMore.removeClass('hidden');
+
+                if (group !== draggedGroupFrom) {
+                    let model = this.collection.get(id);
+
+                    if (!model) {
+                        $list.sortable('cancel');
+
+                        return;
+                    }
+
+                    let attributes = {};
+
+                    attributes[this.statusField] = group;
+
+                    this.handleAttributesOnGroupChange(model, attributes, group);
+
+                    $list.sortable('disable');
+
+                    model
+                        .save(attributes, {
+                            patch: true,
+                            isDrop: true,
+                        })
+                        .then(() => {
+                            Espo.Ui.success(this.translate('Saved'));
+
+                            $list.sortable('destroy');
+
+                            this.initSortable();
+
+                            this.moveModelBetweenGroupCollections(model, draggedGroupFrom, group);
+
+                            if (!orderDisabled) {
+                                this.reOrderGroup(group);
+                                this.storeGroupOrder(group);
+                            }
+
+                            this.rebuildGroupDataList();
+                        })
+                        .catch(() => {
+                            $list.sortable('cancel');
+                            $list.sortable('enable');
+                        });
 
-                if (!model) {
                     return;
                 }
 
-                groupCollection.add(model, {silent: true});
-            });
-        },
+                if (orderDisabled) {
+                    $list.sortable('cancel');
+                    $list.sortable('enable');
 
-        rebuildGroupDataList: function () {
-            this.groupDataList.forEach(item => {
-                item.dataList = [];
+                    return;
+                }
 
-                for (let model of item.collection.models) {
-                    item.dataList.push({
+                this.reOrderGroup(group);
+                this.storeGroupOrder(group);
+                this.rebuildGroupDataList();
+            },
+        });
+    },
+
+    storeGroupOrder: function (group) {
+        Espo.Ajax.putRequest('Kanban/order', {
+            entityType: this.entityType,
+            group: group,
+            ids: this.getGroupOrderFromDom(group),
+        });
+    },
+
+    getGroupOrderFromDom: function (group) {
+        let ids = [];
+
+        let $group = this.$el.find('.group-column-list[data-name="'+group+'"]');
+
+        $group.children().each((i, el) => {
+            ids.push($(el).data('id'));
+        });
+
+        return ids;
+    },
+
+    reOrderGroup: function (group) {
+        let groupCollection = this.getGroupCollection(group);
+        let ids = this.getGroupOrderFromDom(group);
+
+        let modelMap = {};
+
+        groupCollection.models.forEach((m) => {
+            modelMap[m.id] = m;
+        });
+
+        while (groupCollection.models.length) {
+            groupCollection.pop({silent: true});
+        }
+
+        ids.forEach(id => {
+            let model = modelMap[id];
+
+            if (!model) {
+                return;
+            }
+
+            groupCollection.add(model, {silent: true});
+        });
+    },
+
+    rebuildGroupDataList: function () {
+        this.groupDataList.forEach(item => {
+            item.dataList = [];
+
+            for (let model of item.collection.models) {
+                item.dataList.push({
+                    key: model.id,
+                    id: model.id,
+                });
+            }
+        });
+    },
+
+    moveModelBetweenGroupCollections: function (model, groupFrom, groupTo) {
+        let collection = this.getGroupCollection(groupFrom);
+
+        if (!collection) {
+            return;
+        }
+
+        collection.remove(model.id, {silent: true});
+
+        collection = this.getGroupCollection(groupTo);
+
+        if (!collection) {
+            return;
+        }
+
+        collection.add(model, {silent: true});
+    },
+
+    handleAttributesOnGroupChange: function (model, attributes, group) {},
+
+    adjustMinHeight: function () {
+        if (
+            this.collection.models.length === 0 ||
+            !this.$container
+        ) {
+            return;
+        }
+
+        let height = this.getHelper()
+            .calculateContentContainerHeight(this.$el.find('.kanban-columns-container'));
+
+        let containerEl = this.$container.get(0);
+
+        if (containerEl.scrollWidth > containerEl.clientWidth) {
+            height -= 18;
+        }
+
+        if (height < 100) {
+            height = 100;
+        }
+
+        this.$listKanban.find('td.group-column').css({
+            minHeight: height + 'px',
+        });
+    },
+
+    getListLayout: function (callback) {
+        if (this.listLayout) {
+            callback.call(this, this.listLayout);
+
+            return;
+        }
+
+        this._loadListLayout((listLayout) => {
+            this.listLayout = listLayout;
+            callback.call(this, listLayout);
+        });
+    },
+
+    getSelectAttributeList: function (callback) {
+        Dep.prototype.getSelectAttributeList.call(this, (attributeList) => {
+            if (attributeList) {
+                if (!~attributeList.indexOf(this.statusField)) {
+                    attributeList.push(this.statusField);
+                }
+            }
+
+            callback(attributeList);
+        });
+    },
+
+    buildRows: function (callback) {
+        let groupList = (this.collection.dataAdditional || {}).groupList || [];
+
+        this.collection.reset();
+
+        this.collection.subCollectionList = [];
+
+        this.wait(true);
+
+        this.groupDataList = [];
+
+        let count = 0;
+        let loadedCount = 0;
+
+        this.getListLayout((listLayout) => {
+            this.listLayout = listLayout;
+
+            groupList.forEach((item, i) => {
+                let collection = this.seedCollection.clone();
+
+                this.listenTo(collection, 'destroy', (model, attributes, o) => {
+                    if (o.fromList) {
+                        return;
+                    }
+
+                    this.removeRecordFromList(model.id);
+                });
+
+                collection.total = item.total;
+
+                collection.url = this.collection.url;
+
+                collection.where = this.collection.where;
+                collection.name = this.seedCollection.name;
+                collection.maxSize = this.seedCollection.maxSize;
+                collection.orderBy = this.seedCollection.orderBy;
+                collection.order = this.seedCollection.order;
+
+                collection.whereAdditional = [
+                    {
+                        field: this.statusField,
+                        type: 'equals',
+                        value: item.name,
+                    }
+                ];
+
+                collection.groupName = item.name;
+                collection.set(item.list);
+
+                this.collection.subCollectionList.push(collection);
+
+                this.collection.add(collection.models);
+
+                let itemDataList = [];
+
+                collection.models.forEach(model => {
+                    count ++;
+
+                    itemDataList.push({
                         key: model.id,
                         id: model.id,
                     });
-                }
-            });
-        },
-
-        moveModelBetweenGroupCollections: function (model, groupFrom, groupTo) {
-            let collection = this.getGroupCollection(groupFrom);
-
-            if (!collection) {
-                return;
-            }
-
-            collection.remove(model.id, {silent: true});
-
-            collection = this.getGroupCollection(groupTo);
-
-            if (!collection) {
-                return;
-            }
-
-            collection.add(model, {silent: true});
-        },
-
-        handleAttributesOnGroupChange: function (model, attributes, group) {},
-
-        adjustMinHeight: function () {
-            if (
-                this.collection.models.length === 0 ||
-                !this.$container
-            ) {
-                return;
-            }
-
-            let height = this.getHelper()
-                .calculateContentContainerHeight(this.$el.find('.kanban-columns-container'));
-
-            let containerEl = this.$container.get(0);
-
-            if (containerEl.scrollWidth > containerEl.clientWidth) {
-                height -= 18;
-            }
-
-            if (height < 100) {
-                height = 100;
-            }
-
-            this.$listKanban.find('td.group-column').css({
-                minHeight: height + 'px',
-            });
-        },
-
-        getListLayout: function (callback) {
-            if (this.listLayout) {
-                callback.call(this, this.listLayout);
-
-                return;
-            }
-
-            this._loadListLayout((listLayout) => {
-                this.listLayout = listLayout;
-                callback.call(this, listLayout);
-            });
-        },
-
-        getSelectAttributeList: function (callback) {
-            Dep.prototype.getSelectAttributeList.call(this, (attributeList) => {
-                if (attributeList) {
-                    if (!~attributeList.indexOf(this.statusField)) {
-                        attributeList.push(this.statusField);
-                    }
-                }
-
-                callback(attributeList);
-            });
-        },
-
-        buildRows: function (callback) {
-            let groupList = (this.collection.dataAdditional || {}).groupList || [];
-
-            this.collection.reset();
-
-            this.collection.subCollectionList = [];
-
-            this.wait(true);
-
-            this.groupDataList = [];
-
-            let count = 0;
-            let loadedCount = 0;
-
-            this.getListLayout((listLayout) => {
-                this.listLayout = listLayout;
-
-                groupList.forEach((item, i) => {
-                    let collection = this.seedCollection.clone();
-
-                    this.listenTo(collection, 'destroy', (model, attributes, o) => {
-                        if (o.fromList) {
-                            return;
-                        }
-
-                        this.removeRecordFromList(model.id);
-                    });
-
-                    collection.total = item.total;
-
-                    collection.url = this.collection.url;
-
-                    collection.where = this.collection.where;
-                    collection.name = this.seedCollection.name;
-                    collection.maxSize = this.seedCollection.maxSize;
-                    collection.orderBy = this.seedCollection.orderBy;
-                    collection.order = this.seedCollection.order;
-
-                    collection.whereAdditional = [
-                        {
-                            field: this.statusField,
-                            type: 'equals',
-                            value: item.name,
-                        }
-                    ];
-
-                    collection.groupName = item.name;
-                    collection.set(item.list);
-
-                    this.collection.subCollectionList.push(collection);
-
-                    this.collection.add(collection.models);
-
-                    let itemDataList = [];
-
-                    collection.models.forEach(model => {
-                        count ++;
-
-                        itemDataList.push({
-                            key: model.id,
-                            id: model.id,
-                        });
-                    });
-
-                    let nextStyle = null;
-
-                    if (i < groupList.length - 1) {
-                        nextStyle = this.getMetadata()
-                            .get(['entityDefs', this.scope, 'fields', this.statusField,
-                                'style', groupList[i + 1].name]);
-                    }
-
-                    let o = {
-                        name: item.name,
-                        label: this.getLanguage().translateOption(item.name, this.statusField, this.scope),
-                        dataList: itemDataList,
-                        collection: collection,
-                        isLast: i === groupList.length - 1,
-                        hasShowMore: collection.total > collection.length || collection.total === -1,
-                        style: this.getMetadata().get(
-                            ['entityDefs', this.scope, 'fields', this.statusField, 'style', item.name]
-                        ),
-                        nextStyle: nextStyle,
-                    };
-
-                    this.groupDataList.push(o);
                 });
 
-                if (count === 0) {
-                    this.wait(false);
+                let nextStyle = null;
 
-                    if (callback) {
-                        callback();
-                    }
-
-                    return;
+                if (i < groupList.length - 1) {
+                    nextStyle = this.getMetadata()
+                        .get(['entityDefs', this.scope, 'fields', this.statusField,
+                            'style', groupList[i + 1].name]);
                 }
 
-                this.groupDataList.forEach(groupItem => {
-                    groupItem.dataList.forEach((item, j) => {
-                        let model = groupItem.collection.get(item.id);
+                let o = {
+                    name: item.name,
+                    label: this.getLanguage().translateOption(item.name, this.statusField, this.scope),
+                    dataList: itemDataList,
+                    collection: collection,
+                    isLast: i === groupList.length - 1,
+                    hasShowMore: collection.total > collection.length || collection.total === -1,
+                    style: this.getMetadata().get(
+                        ['entityDefs', this.scope, 'fields', this.statusField, 'style', item.name]
+                    ),
+                    nextStyle: nextStyle,
+                };
 
-                        this.buildRow(j, model, () => {
-                            loadedCount++;
+                this.groupDataList.push(o);
+            });
 
-                            if (loadedCount === count) {
-                                this.wait(false);
+            if (count === 0) {
+                this.wait(false);
 
-                                if (callback) {
-                                    callback();
-                                }
+                if (callback) {
+                    callback();
+                }
+
+                return;
+            }
+
+            this.groupDataList.forEach(groupItem => {
+                groupItem.dataList.forEach((item, j) => {
+                    let model = groupItem.collection.get(item.id);
+
+                    this.buildRow(j, model, () => {
+                        loadedCount++;
+
+                        if (loadedCount === count) {
+                            this.wait(false);
+
+                            if (callback) {
+                                callback();
                             }
-                        });
+                        }
                     });
                 });
             });
-        },
+        });
+    },
 
-        buildRow: function (i, model, callback) {
-            let key = model.id;
+    buildRow: function (i, model, callback) {
+        let key = model.id;
 
-            this.createView(key, this.itemViewName, {
-                model: model,
-                el: this.getSelector() + ' .item[data-id="'+model.id+'"]',
-                itemLayout: this.listLayout,
-                rowActionsDisabled: this.rowActionsDisabled,
-                rowActionsView: this.rowActionsView,
-                setViewBeforeCallback: this.options.skipBuildRows && !this.isRendered(),
-                statusFieldIsEditable: this.statusFieldIsEditable,
-            }, callback);
-        },
+        this.createView(key, this.itemViewName, {
+            model: model,
+            el: this.getSelector() + ' .item[data-id="'+model.id+'"]',
+            itemLayout: this.listLayout,
+            rowActionsDisabled: this.rowActionsDisabled,
+            rowActionsView: this.rowActionsView,
+            setViewBeforeCallback: this.options.skipBuildRows && !this.isRendered(),
+            statusFieldIsEditable: this.statusFieldIsEditable,
+        }, callback);
+    },
 
-        removeRecordFromList: function (id) {
-            this.collection.remove(id);
+    removeRecordFromList: function (id) {
+        this.collection.remove(id);
 
-            if (this.collection.total > 0) {
-                this.collection.total--;
+        if (this.collection.total > 0) {
+            this.collection.total--;
+        }
+
+        this.totalCount = this.collection.total;
+
+        this.$el.find('.total-count-span').text(this.totalCount.toString());
+
+        this.clearView(id);
+
+        this.$el.find('.item[data-id="'+id+'"]').remove();
+
+        this.collection.subCollectionList.forEach(collection => {
+            if (collection.get(id)) {
+                collection.remove(id);
             }
+        });
 
-            this.totalCount = this.collection.total;
+        for (let groupItem of this.groupDataList) {
+            for (let j = 0; j < groupItem.dataList.length; j++) {
+                let item = groupItem.dataList[j];
 
-            this.$el.find('.total-count-span').text(this.totalCount.toString());
-
-            this.clearView(id);
-
-            this.$el.find('.item[data-id="'+id+'"]').remove();
-
-            this.collection.subCollectionList.forEach(collection => {
-                if (collection.get(id)) {
-                    collection.remove(id);
-                }
-            });
-
-            for (let groupItem of this.groupDataList) {
-                for (let j = 0; j < groupItem.dataList.length; j++) {
-                    let item = groupItem.dataList[j];
-
-                    if (item.id !== id) {
-                        continue;
-                    }
-
-                    groupItem.dataList.splice(j, 1);
-
-                    if (groupItem.collection.total > 0) {
-                        groupItem.collection.total--;
-                    }
-
-                    groupItem.hasShowMore = groupItem.collection.total > groupItem.collection.length ||
-                        groupItem.collection.total === -1;
-
-                    break;
-                }
-            }
-        },
-
-        onChangeGroup: function (model, value, o) {
-            let id = model.id;
-            let group = model.get(this.statusField);
-
-            this.collection.subCollectionList.forEach((collection) => {
-                if (collection.get(id)) {
-                    collection.remove(id);
-
-                    if (collection.total > 0) {
-                        collection.total--;
-                    }
-                }
-            });
-
-            let dataItem;
-
-            for (let groupItem of this.groupDataList) {
-                for (let j = 0; j < groupItem.dataList.length; j++) {
-                    let item = groupItem.dataList[j];
-
-                    if (item.id === id) {
-                        dataItem = item;
-                        groupItem.dataList.splice(j, 1);
-
-                        break;
-                    }
-                }
-            }
-
-            if (!group) {
-                return;
-            }
-
-            if (o.isDrop) {
-                return;
-            }
-
-            for (let groupItem of this.groupDataList) {
-                if (groupItem.name !== group) {
+                if (item.id !== id) {
                     continue;
                 }
 
-                groupItem.collection.unshift(model);
-                groupItem.collection.total++;
+                groupItem.dataList.splice(j, 1);
 
-                if (dataItem) {
-                    groupItem.dataList.unshift(dataItem);
+                if (groupItem.collection.total > 0) {
+                    groupItem.collection.total--;
+                }
 
-                    groupItem.hasShowMore = groupItem.collection.total > groupItem.collection.length ||
-                        groupItem.collection.total === -1;
+                groupItem.hasShowMore = groupItem.collection.total > groupItem.collection.length ||
+                    groupItem.collection.total === -1;
+
+                break;
+            }
+        }
+    },
+
+    onChangeGroup: function (model, value, o) {
+        let id = model.id;
+        let group = model.get(this.statusField);
+
+        this.collection.subCollectionList.forEach((collection) => {
+            if (collection.get(id)) {
+                collection.remove(id);
+
+                if (collection.total > 0) {
+                    collection.total--;
                 }
             }
+        });
 
-            let $item = this.$el.find('.item[data-id="' + id + '"]');
-            let $column = this.$el.find('.group-column[data-name="' + group + '"] .group-column-list');
+        let dataItem;
 
-            if ($column.length) {
-                $column.prepend($item);
-            } else {
-                $item.remove();
-            }
+        for (let groupItem of this.groupDataList) {
+            for (let j = 0; j < groupItem.dataList.length; j++) {
+                let item = groupItem.dataList[j];
 
-            if (!this.orderDisabled) {
-                this.storeGroupOrder(group);
-            }
-        },
+                if (item.id === id) {
+                    dataItem = item;
+                    groupItem.dataList.splice(j, 1);
 
-        groupShowMore: function (group) {
-            let groupItem;
-
-            for (let i in this.groupDataList) {
-                groupItem = this.groupDataList[i];
-
-                if (groupItem.name === group) {
                     break;
                 }
+            }
+        }
 
-                groupItem = null;
+        if (!group) {
+            return;
+        }
+
+        if (o.isDrop) {
+            return;
+        }
+
+        for (let groupItem of this.groupDataList) {
+            if (groupItem.name !== group) {
+                continue;
             }
 
-            if (!groupItem) {
-                return;
+            groupItem.collection.unshift(model);
+            groupItem.collection.total++;
+
+            if (dataItem) {
+                groupItem.dataList.unshift(dataItem);
+
+                groupItem.hasShowMore = groupItem.collection.total > groupItem.collection.length ||
+                    groupItem.collection.total === -1;
+            }
+        }
+
+        let $item = this.$el.find('.item[data-id="' + id + '"]');
+        let $column = this.$el.find('.group-column[data-name="' + group + '"] .group-column-list');
+
+        if ($column.length) {
+            $column.prepend($item);
+        } else {
+            $item.remove();
+        }
+
+        if (!this.orderDisabled) {
+            this.storeGroupOrder(group);
+        }
+    },
+
+    groupShowMore: function (group) {
+        let groupItem;
+
+        for (let i in this.groupDataList) {
+            groupItem = this.groupDataList[i];
+
+            if (groupItem.name === group) {
+                break;
             }
 
-            let collection = groupItem.collection;
+            groupItem = null;
+        }
 
-            let $list = this.$el.find('.group-column-list[data-name="'+group+'"]');
-            let $showMore = this.$el.find('.group-column[data-name="'+group+'"] .show-more');
+        if (!groupItem) {
+            return;
+        }
 
-            collection.data.select = this.collection.data.select;
+        let collection = groupItem.collection;
 
-            this.showMoreRecords({}, collection, $list, $showMore, () => {
-                this.noRebuild = false;
+        let $list = this.$el.find('.group-column-list[data-name="'+group+'"]');
+        let $showMore = this.$el.find('.group-column[data-name="'+group+'"] .show-more');
 
-                collection.models.forEach((model) => {
-                    if (this.collection.get(model.id)) {
-                        return;
-                    }
+        collection.data.select = this.collection.data.select;
 
-                    this.collection.add(model);
-
-                    groupItem.dataList.push({
-                        key: model.id,
-                        id: model.id,
-                    });
-                });
-            });
-        },
-
-        getDomRowItem: function (id) {
-            return this.$el.find('.item[data-id="'+id+'"]');
-        },
-
-        getRowContainerHtml: function (id) {
-            return $('<div>')
-                .attr('data-id', id)
-                .addClass('item')
-                .get(0).outerHTML;
-        },
-
-        actionMoveOver: function (data) {
-            let model = this.collection.get(data.id);
-
-            this.createView('moveOverDialog', 'views/modals/kanban-move-over', {
-                model: model,
-                statusField: this.statusField,
-            }, (view) => {
-                view.render();
-            });
-        },
-
-        getGroupCollection: function (group) {
-            let collection = null;
-
-            this.collection.subCollectionList.forEach((itemCollection) => {
-                if (itemCollection.groupName === group) {
-                    collection = itemCollection;
-                }
-            });
-
-            return collection;
-        },
-
-        showPlus: function (group) {
-            let $el = this.plusElementMap[group];
-
-            if (!$el) {
-                return;
-            }
-
-            $el.removeClass('hidden');
-        },
-
-        hidePlus: function (group) {
-            let $el = this.plusElementMap[group];
-
-            if (!$el) {
-                return;
-            }
-
-            $el.addClass('hidden');
-        },
-
-        actionCreateInGroup: function (group) {
-            let attributes = {};
-
-            attributes[this.statusField] = group;
-
-            let viewName = this.getMetadata().get('clientDefs.' + this.scope + '.modalViews.edit') ||
-                'views/modals/edit';
-
-            let options = {
-                attributes: attributes,
-                scope: this.scope,
-            };
-
-            this.createView('quickCreate', viewName, options, (view) => {
-                view.render();
-
-                this.listenToOnce(view, 'after:save', () => {
-                    this.collection.fetch();
-                });
-            });
-        },
-
-        initBackDrag: function (e) {
-            this.backDragStarted = true;
-
-            let containerEl = this.$container.get(0);
-
-            containerEl.style.cursor = 'grabbing';
-            containerEl.style.userSelect = 'none';
-
-            let $document = $(document);
-
-            let startLeft = containerEl.scrollLeft;
-            let startX = e.clientX;
-
-            $document.on('mousemove.' + this.cid, (e) => {
-                let dx = e.originalEvent.clientX - startX;
-
-                containerEl.scrollLeft = startLeft - dx;
-
-                this.syncHeadScroll();
-            });
-
-            $document.one('mouseup.' + this.cid, () => {
-                this.stopBackDrag();
-            });
-        },
-
-        stopBackDrag: function () {
-            this.$container.get(0).style.cursor = 'default';
-            this.$container.get(0).style.userSelect = 'none';
-
-            $(document).off('mousemove.' + this.cid);
-        },
-
-        syncHeadScroll: function () {
-            if (!this.$headContainer.hasClass('sticked')) {
-                return;
-            }
-
-            this.$headContainer.get(0).scrollLeft = this.$container.get(0).scrollLeft;
-        },
-
-        controlHorizontalScroll: function (e) {
-            if (!this.sortIsStarted) {
-                return;
-            }
-
-            if (!this.$draggable) {
-                return;
-            }
-
-            let draggableRect = this.$draggable.get(0).getBoundingClientRect();
-
-            let itemLeft = draggableRect.left;
-            let itemRight = draggableRect.right;
-
-            let containerEl = this.$container.get(0);
-
-            let rect = containerEl.getBoundingClientRect();
-
-            let marginSens = 70;
-            let step = 2;
-            let interval = 5;
-            let marginSensStepRatio = 4;
-            let stepRatio = 3;
-
-            let isRight = rect.right - marginSens < itemRight &&
-                containerEl.scrollLeft + containerEl.offsetWidth < containerEl.scrollWidth;
-
-            let isLeft = rect.left + marginSens > itemLeft &&
-                containerEl.scrollLeft > 0;
-
-            this.$groupColumnList.sortable('refreshPositions');
-
-            if (isRight && this.sortWasCentered) {
-                let margin = rect.right - itemRight;
-
-                if (margin < marginSens / marginSensStepRatio) {
-                    step *= stepRatio;
-                }
-
-                let stepActual = Math.min(step, containerEl.offsetWidth - containerEl.scrollLeft);
-
-                containerEl.scrollLeft = containerEl.scrollLeft + stepActual;
-
-                this.syncHeadScroll();
-
-                if (containerEl.scrollLeft + containerEl.offsetWidth === containerEl.scrollWidth) {
-                    this.blockScrollControl = false;
+        this.showMoreRecords({}, collection, $list, $showMore, () => {
+            this.noRebuild = false;
 
+            collection.models.forEach((model) => {
+                if (this.collection.get(model.id)) {
                     return;
                 }
 
-                this.blockScrollControl = true;
+                this.collection.add(model);
 
-                setTimeout(() => this.controlHorizontalScroll(e), interval);
+                groupItem.dataList.push({
+                    key: model.id,
+                    id: model.id,
+                });
+            });
+        });
+    },
 
-                return;
+    getDomRowItem: function (id) {
+        return this.$el.find('.item[data-id="'+id+'"]');
+    },
+
+    getRowContainerHtml: function (id) {
+        return $('<div>')
+            .attr('data-id', id)
+            .addClass('item')
+            .get(0).outerHTML;
+    },
+
+    actionMoveOver: function (data) {
+        let model = this.collection.get(data.id);
+
+        this.createView('moveOverDialog', 'views/modals/kanban-move-over', {
+            model: model,
+            statusField: this.statusField,
+        }, (view) => {
+            view.render();
+        });
+    },
+
+    getGroupCollection: function (group) {
+        let collection = null;
+
+        this.collection.subCollectionList.forEach((itemCollection) => {
+            if (itemCollection.groupName === group) {
+                collection = itemCollection;
+            }
+        });
+
+        return collection;
+    },
+
+    showPlus: function (group) {
+        let $el = this.plusElementMap[group];
+
+        if (!$el) {
+            return;
+        }
+
+        $el.removeClass('hidden');
+    },
+
+    hidePlus: function (group) {
+        let $el = this.plusElementMap[group];
+
+        if (!$el) {
+            return;
+        }
+
+        $el.addClass('hidden');
+    },
+
+    actionCreateInGroup: function (group) {
+        let attributes = {};
+
+        attributes[this.statusField] = group;
+
+        let viewName = this.getMetadata().get('clientDefs.' + this.scope + '.modalViews.edit') ||
+            'views/modals/edit';
+
+        let options = {
+            attributes: attributes,
+            scope: this.scope,
+        };
+
+        this.createView('quickCreate', viewName, options, (view) => {
+            view.render();
+
+            this.listenToOnce(view, 'after:save', () => {
+                this.collection.fetch();
+            });
+        });
+    },
+
+    initBackDrag: function (e) {
+        this.backDragStarted = true;
+
+        let containerEl = this.$container.get(0);
+
+        containerEl.style.cursor = 'grabbing';
+        containerEl.style.userSelect = 'none';
+
+        let $document = $(document);
+
+        let startLeft = containerEl.scrollLeft;
+        let startX = e.clientX;
+
+        $document.on('mousemove.' + this.cid, (e) => {
+            let dx = e.originalEvent.clientX - startX;
+
+            containerEl.scrollLeft = startLeft - dx;
+
+            this.syncHeadScroll();
+        });
+
+        $document.one('mouseup.' + this.cid, () => {
+            this.stopBackDrag();
+        });
+    },
+
+    stopBackDrag: function () {
+        this.$container.get(0).style.cursor = 'default';
+        this.$container.get(0).style.userSelect = 'none';
+
+        $(document).off('mousemove.' + this.cid);
+    },
+
+    syncHeadScroll: function () {
+        if (!this.$headContainer.hasClass('sticked')) {
+            return;
+        }
+
+        this.$headContainer.get(0).scrollLeft = this.$container.get(0).scrollLeft;
+    },
+
+    controlHorizontalScroll: function (e) {
+        if (!this.sortIsStarted) {
+            return;
+        }
+
+        if (!this.$draggable) {
+            return;
+        }
+
+        let draggableRect = this.$draggable.get(0).getBoundingClientRect();
+
+        let itemLeft = draggableRect.left;
+        let itemRight = draggableRect.right;
+
+        let containerEl = this.$container.get(0);
+
+        let rect = containerEl.getBoundingClientRect();
+
+        let marginSens = 70;
+        let step = 2;
+        let interval = 5;
+        let marginSensStepRatio = 4;
+        let stepRatio = 3;
+
+        let isRight = rect.right - marginSens < itemRight &&
+            containerEl.scrollLeft + containerEl.offsetWidth < containerEl.scrollWidth;
+
+        let isLeft = rect.left + marginSens > itemLeft &&
+            containerEl.scrollLeft > 0;
+
+        this.$groupColumnList.sortable('refreshPositions');
+
+        if (isRight && this.sortWasCentered) {
+            let margin = rect.right - itemRight;
+
+            if (margin < marginSens / marginSensStepRatio) {
+                step *= stepRatio;
             }
 
-            if (isLeft && this.sortWasCentered) {
-                let margin = - (rect.left - itemLeft);
+            let stepActual = Math.min(step, containerEl.offsetWidth - containerEl.scrollLeft);
 
-                if (margin < marginSens / marginSensStepRatio) {
-                    step *= stepRatio;
-                }
+            containerEl.scrollLeft = containerEl.scrollLeft + stepActual;
 
-                let stepActual = Math.min(step, containerEl.scrollLeft);
+            this.syncHeadScroll();
 
-                containerEl.scrollLeft = containerEl.scrollLeft - stepActual;
-
-                this.syncHeadScroll();
-
-                if (containerEl.scrollLeft === 0) {
-                    this.blockScrollControl = false;
-
-                    return;
-                }
-
-                this.blockScrollControl = true;
-
-                setTimeout(() => this.controlHorizontalScroll(e), interval);
-
-                return;
-            }
-
-            if (this.blockScrollControl && !isLeft && !isRight) {
+            if (containerEl.scrollLeft + containerEl.offsetWidth === containerEl.scrollWidth) {
                 this.blockScrollControl = false;
+
+                return;
             }
 
-            if (!isLeft && !isRight) {
-                this.sortWasCentered = true;
+            this.blockScrollControl = true;
+
+            setTimeout(() => this.controlHorizontalScroll(e), interval);
+
+            return;
+        }
+
+        if (isLeft && this.sortWasCentered) {
+            let margin = - (rect.left - itemLeft);
+
+            if (margin < marginSens / marginSensStepRatio) {
+                step *= stepRatio;
             }
-        },
-    });
+
+            let stepActual = Math.min(step, containerEl.scrollLeft);
+
+            containerEl.scrollLeft = containerEl.scrollLeft - stepActual;
+
+            this.syncHeadScroll();
+
+            if (containerEl.scrollLeft === 0) {
+                this.blockScrollControl = false;
+
+                return;
+            }
+
+            this.blockScrollControl = true;
+
+            setTimeout(() => this.controlHorizontalScroll(e), interval);
+
+            return;
+        }
+
+        if (this.blockScrollControl && !isLeft && !isRight) {
+            this.blockScrollControl = false;
+        }
+
+        if (!isLeft && !isRight) {
+            this.sortWasCentered = true;
+        }
+    },
 });
diff --git a/client/src/views/record/list.js b/client/src/views/record/list.js
index 9003bb449c..dc3dae4f09 100644
--- a/client/src/views/record/list.js
+++ b/client/src/views/record/list.js
@@ -26,2064 +26,2087 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/list', ['view', 'helpers/mass-action', 'helpers/export', 'helpers/record-modal'],
-function (Dep, MassActionHelper, ExportHelper, RecordModal) {
+/** @module views/record/list */
+
+import Dep from 'view';
+import MassActionHelper from 'helpers/mass-action';
+import ExportHelper from 'helpers/export';
+import RecordModal from 'helpers/record-modal';
+
+/**
+ * A record-list view. Renders and processes list items, actions.
+ *
+ * @class
+ * @name Class
+ * @extends module:view
+ *
+ * @todo Document all options.
+ */
+export default Dep.extend(/** @lends Class# */{
 
     /**
-     * A record-list view. Renders and processes list items, actions.
+     * A row action.
      *
-     * @class
-     * @name Class
-     * @extends module:view.Class
-     * @memberOf module:views/record/list
+     * @typedef {Object} module:views/record/list~rowAction
      *
-     * @todo Document all options.
+     * @property {string} action An action.
+     * @property {string} [label] A label.
+     * @property {string} [link] A link.
+     * @property {Object.<string, string|number|boolean>} [data] Data attributes.
      */
-    return Dep.extend(/** @lends module:views/record/list.Class# */{
 
+    /**
+     * @inheritDoc
+     */
+    template: 'record/list',
+
+    /**
+     * A type. Can be 'list', 'listSmall'.
+     */
+    type: 'list',
+
+    /**
+     * @inheritDoc
+     */
+    name: 'list',
+
+    /**
+     * A presentation type.
+     */
+    presentationType: 'table',
+
+    /**
+     * If true checkboxes will be shown. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    checkboxes: true,
+
+    /**
+     * If true clicking on the record link will trigger 'select' event with model passed.
+     * Can be overridden by an option parameter.
+     */
+    selectable: false,
+
+    /**
+     * A row-actions view. A dropdown on the right side.
+     *
+     * @protected
+     * @type {string}
+     */
+    rowActionsView: 'views/record/row-actions/default',
+
+    /**
+     * Disable row-actions. Can be overridden by an option parameter.
+     */
+    rowActionsDisabled: false,
+
+    /**
+     * An entity type. Set automatically.
+     *
+     * @type {string|null}
+     */
+    entityType: null,
+
+    /**
+     * A scope. Set automatically.
+     *
+     * @type {?string}
+     */
+    scope: null,
+
+    /**
+     * @protected
+     */
+    _internalLayoutType: 'list-row',
+
+    /**
+     * A selector to a list container.
+     *
+     * @protected
+     */
+    listContainerEl: '.list > table > tbody',
+
+    /**
+     * To show number of records. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    showCount: true,
+
+    /**
+     * @protected
+     */
+    rowActionsColumnWidth: 25,
+
+    /**
+     * @protected
+     */
+    checkboxColumnWidth: 40,
+
+    /**
+     * @protected
+     */
+    minColumnWidth: 100,
+
+    /**
+     * A button. Handled by a class method `action{Name}`.
+     *
+     * @typedef {Object} module:views/record/list~button
+     *
+     * @property {string} name A name.
+     * @property {string} label A label. To be translated in a current scope.
+     * @property {'default'|'danger'|'warning'|'success'} [style] A style.
+     * @property {boolean} [hidden] Hidden.
+     */
+
+    /**
+     * A button list.
+     *
+     * @protected
+     * @type {module:views/record/list~button[]}
+     */
+    buttonList: [],
+
+    /**
+     * A dropdown item. Handled by a class method `action{Name}`.
+     *
+     * @typedef {Object} module:views/record/list~dropdownItem
+     *
+     * @property {string} name A name.
+     * @property {string} [label] A label. To be translated in a current scope.
+     * @property {string} [html] An HTML.
+     * @property {boolean} [hidden] Hidden.
+     */
+
+    /**
+     * A dropdown item list. Can be overridden by an option parameter.
+     *
+     * @protected
+     * @type {module:views/record/list~dropdownItem[]}
+     */
+    dropdownItemList: [],
+
+    /**
+     * Disable a header. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    headerDisabled: false,
+
+    /**
+     * Disable mass actions. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    massActionsDisabled: false,
+
+    /**
+     * Disable a portal layout usage. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    portalLayoutDisabled: false,
+
+    /**
+     * Mandatory select attributes. Can be overridden by an option parameter.
+     * Attributes to be selected regardless being on a layout.
+     *
+     * @protected
+     * @type {string[]|null}
+     */
+    mandatorySelectAttributeList: null,
+
+    /**
+     * A layout name. If null, a value from `type` property will be used.
+     * Can be overridden by an option parameter.
+     *
+     * @protected
+     * @type {string|null}
+     */
+    layoutName: null,
+
+    /**
+     * A scope name for layout loading. If null, an entity type of collection will be used.
+     * Can be overridden by an option parameter.
+     *
+     * @protected
+     * @type {string|null}
+     */
+    layoutScope: null,
+
+    /**
+     * To disable field-level access check for a layout.
+     * Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    layoutAclDisabled: false,
+
+    /**
+     * A setup-handler type.
+     *
+     * @protected
+     */
+    setupHandlerType: 'record/list',
+
+    /**
+     * @internal
+     * @private
+     */
+    checkboxesDisabled: false,
+
+    /**
+     * Force displaying the top bar even if empty. Can be overridden by an option parameter.
+     * @protected
+     */
+    forceDisplayTopBar: false,
+
+    /**
+     * Where to display the pagination. Can be overridden by an option parameter.
+     *
+     * @protected
+     * @type {'top'|'bottom'|boolean|null}
+     */
+    pagination: false,
+
+    /**
+     * To display a table header with column names. Can be overridden by an option parameter.
+     *
+     * @protected
+     * @type {boolean}
+     */
+    header: true,
+
+    /**
+     * A show-more button. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    showMore: true,
+
+    /**
+     * A mass-action list.
+     *
+     * @protected
+     * @type {string[]}
+     */
+    massActionList: [
+        'remove',
+        'merge',
+        'massUpdate',
+        'export',
+    ],
+
+    /**
+     * A mass-action list available when selecting all results.
+     *
+     * @protected
+     * @type {string[]}
+     */
+    checkAllResultMassActionList: [
+        'remove',
+        'massUpdate',
+        'export',
+    ],
+
+    /**
+     * A forced mass-action list.
+     *
+     * @protected
+     * @type {?string[]}
+     */
+    forcedCheckAllResultMassActionList: null,
+
+    /**
+     * Disable quick-detail (viewing a record in modal)
+     *
+     * @protected
+     */
+    quickDetailDisabled: false,
+
+    /**
+     * Disable quick-edit (editing a record in modal)
+     *
+     * @protected
+     */
+    quickEditDisabled: false,
+
+    /**
+     * Column definitions.
+     *
+     * @typedef module:views/record/list~columnDefs
+     * @type {Object}
+     * @property {string} name A name (usually a field name).
+     * @property {string} [view] An overridden field view name.
+     * @property {number} [width] A width in percents.
+     * @property {number} [widthPx] A width in pixels.
+     * @property {boolean} [link] To use `listLink` mode (link to the detail view).
+     * @property {'left'|'right'} [align] An alignment.
+     * @property {string} [type] An overridden field type.
+     * @property {Object.<string, *>} [params] Overridden field parameters.
+     * @property {Object.<string, *>} [options] Field view options.
+     */
+
+    /**
+     * A list layout. Can be overridden by an option parameter.
+     * If null, then will be loaded from the backend (using the `layoutName` value).
+     *
+     * @protected
+     * @type {module:views/record/list~columnDefs[]|null}
+     */
+    listLayout: null,
+
+    /**
+     * @private
+     */
+    _internalLayout: null,
+
+    /**
+     * A list of record IDs currently selected. Only for reading.
+     *
+     * @protected
+     * @type {string[]|null}
+     */
+    checkedList: null,
+
+    /**
+     * Whether all results currently selected. Only for reading.
+     *
+     * @protected
+     */
+    allResultIsChecked: false,
+
+    /**
+     * Disable the ability to select all results. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    checkAllResultDisabled: false,
+
+    /**
+     * Disable buttons. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    buttonsDisabled: false,
+
+    /**
+     * Disable edit. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    editDisabled: false,
+
+    /**
+     * Disable remove. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    removeDisabled: false,
+
+    /**
+     * Disable a stick-bar. Can be overridden by an option parameter.
+     *
+     * @protected
+     */
+    stickedBarDisabled: false,
+
+    /**
+     * Disable the follow/unfollow mass action.
+     *
+     * @protected
+     */
+    massFollowDisabled: false,
+
+    /**
+     * Disable the print-pdf mass action.
+     *
+     * @protected
+     */
+    massPrintPdfDisabled: false,
+
+    /**
+     * Disable the convert-currency mass action.
+     *
+     * @protected
+     */
+    massConvertCurrencyDisabled: false,
+
+    /**
+     * Disable mass-update.
+     *
+     * @protected
+     */
+    massUpdateDisabled: false,
+
+    /**
+     * Disable export.
+     *
+     * @protected
+     */
+    exportDisabled: false,
+
+    /**
+     * Disable merge.
+     *
+     * @protected
+     */
+    mergeDisabled: false,
+
+    /**
+     * Disable a no-data label (when no result).
+     *
+     * @protected
+     */
+    noDataDisabled: false,
+
+    /**
+     * @private
+     */
+    _$focusedCheckbox: null,
+
+    /**
+     * @protected
+     * @type {?JQuery}
+     */
+    $selectAllCheckbox: null,
+
+    /**
+     * @protected
+     * @type {?Object.<string, Object.<string, *>>}
+     */
+    massActionDefs: null,
+
+    /**
+     * @inheritDoc
+     */
+    events: {
         /**
-         * A row action.
-         *
-         * @typedef {Object} module:views/record/list~rowAction
-         *
-         * @property {string} action An action.
-         * @property {string} [label] A label.
-         * @property {string} [link] A link.
-         * @property {Object.<string,string|number|boolean>} [data] Data attributes.
+         * @param {JQueryKeyEventObject} e
+         * @this module:views/record/list
          */
-
-        /**
-         * @inheritDoc
-         */
-        template: 'record/list',
-
-        /**
-         * A type. Can be 'list', 'listSmall'.
-         */
-        type: 'list',
-
-        /**
-         * @inheritDoc
-         */
-        name: 'list',
-
-        /**
-         * A presentation type.
-         */
-        presentationType: 'table',
-
-        /**
-         * If true checkboxes will be shown. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        checkboxes: true,
-
-        /**
-         * If true clicking on the record link will trigger 'select' event with model passed.
-         * Can be overridden by an option parameter.
-         */
-        selectable: false,
-
-        /**
-         * A row-actions view. A dropdown on the right side.
-         *
-         * @protected
-         * @type {string}
-         */
-        rowActionsView: 'views/record/row-actions/default',
-
-        /**
-         * Disable row-actions. Can be overridden by an option parameter.
-         */
-        rowActionsDisabled: false,
-
-        /**
-         * An entity type. Set automatically.
-         *
-         * @type {string|null}
-         */
-        entityType: null,
-
-        /**
-         * A scope. Set automatically.
-         *
-         * @type {?string}
-         */
-        scope: null,
-
-        /**
-         * @protected
-         */
-        _internalLayoutType: 'list-row',
-
-        /**
-         * A selector to a list container.
-         *
-         * @protected
-         */
-        listContainerEl: '.list > table > tbody',
-
-        /**
-         * To show number of records. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        showCount: true,
-
-        /**
-         * @protected
-         */
-        rowActionsColumnWidth: 25,
-
-        /**
-         * @protected
-         */
-        checkboxColumnWidth: 40,
-
-        /**
-         * @protected
-         */
-        minColumnWidth: 100,
-
-        /**
-         * A button. Handled by a class method `action{Name}`.
-         *
-         * @typedef {Object} module:views/record/list~button
-         *
-         * @property {string} name A name.
-         * @property {string} label A label. To be translated in a current scope.
-         * @property {'default'|'danger'|'warning'|'success'} [style] A style.
-         * @property {boolean} [hidden] Hidden.
-         */
-
-        /**
-         * A button list.
-         *
-         * @protected
-         * @type {module:views/record/list~button[]}
-         */
-        buttonList: [],
-
-        /**
-         * A dropdown item. Handled by a class method `action{Name}`.
-         *
-         * @typedef {Object} module:views/record/list~dropdownItem
-         *
-         * @property {string} name A name.
-         * @property {string} [label] A label. To be translated in a current scope.
-         * @property {string} [html] An HTML.
-         * @property {boolean} [hidden] Hidden.
-         */
-
-        /**
-         * A dropdown item list. Can be overridden by an option parameter.
-         *
-         * @protected
-         * @type {module:views/record/list~dropdownItem[]}
-         */
-        dropdownItemList: [],
-
-        /**
-         * Disable a header. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        headerDisabled: false,
-
-        /**
-         * Disable mass actions. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        massActionsDisabled: false,
-
-        /**
-         * Disable a portal layout usage. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        portalLayoutDisabled: false,
-
-        /**
-         * Mandatory select attributes. Can be overridden by an option parameter.
-         * Attributes to be selected regardless being on a layout.
-         *
-         * @protected
-         * @type {string[]|null}
-         */
-        mandatorySelectAttributeList: null,
-
-        /**
-         * A layout name. If null, a value from `type` property will be used.
-         * Can be overridden by an option parameter.
-         *
-         * @protected
-         * @type {string|null}
-         */
-        layoutName: null,
-
-        /**
-         * A scope name for layout loading. If null, an entity type of collection will be used.
-         * Can be overridden by an option parameter.
-         *
-         * @protected
-         * @type {string|null}
-         */
-        layoutScope: null,
-
-        /**
-         * To disable field-level access check for a layout.
-         * Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        layoutAclDisabled: false,
-
-        /**
-         * A setup-handler type.
-         *
-         * @protected
-         */
-        setupHandlerType: 'record/list',
-
-        /**
-         * @internal
-         * @private
-         */
-        checkboxesDisabled: false,
-
-        /**
-         * Force displaying the top bar even if empty. Can be overridden by an option parameter.
-         * @protected
-         */
-        forceDisplayTopBar: false,
-
-        /**
-         * Where to display the pagination. Can be overridden by an option parameter.
-         *
-         * @protected
-         * @type {'top'|'bottom'|boolean|null}
-         */
-        pagination: false,
-
-        /**
-         * To display a table header with column names. Can be overridden by an option parameter.
-         *
-         * @protected
-         * @type {boolean}
-         */
-        header: true,
-
-        /**
-         * A show-more button. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        showMore: true,
-
-        /**
-         * A mass-action list.
-         *
-         * @protected
-         * @type {string[]}
-         */
-        massActionList: [
-            'remove',
-            'merge',
-            'massUpdate',
-            'export',
-        ],
-
-        /**
-         * A mass-action list available when selecting all results.
-         *
-         * @protected
-         * @type {string[]}
-         */
-        checkAllResultMassActionList: [
-            'remove',
-            'massUpdate',
-            'export',
-        ],
-
-        /**
-         * A forced mass-action list.
-         *
-         * @protected
-         * @type {?string[]}
-         */
-        forcedCheckAllResultMassActionList: null,
-
-        /**
-         * Disable quick-detail (viewing a record in modal)
-         *
-         * @protected
-         */
-        quickDetailDisabled: false,
-
-        /**
-         * Disable quick-edit (editing a record in modal)
-         *
-         * @protected
-         */
-        quickEditDisabled: false,
-
-        /**
-         * Column definitions.
-         *
-         * @typedef module:views/record/list~columnDefs
-         * @type {Object}
-         * @property {string} name A name (usually a field name).
-         * @property {string} [view] An overridden field view name.
-         * @property {number} [width] A width in percents.
-         * @property {number} [widthPx] A width in pixels.
-         * @property {boolean} [link] To use `listLink` mode (link to the detail view).
-         * @property {'left'|'right'} [align] An alignment.
-         * @property {string} [type] An overridden field type.
-         * @property {Object.<string, *>} [params] Overridden field parameters.
-         * @property {Object.<string, *>} [options] Field view options.
-         */
-
-        /**
-         * A list layout. Can be overridden by an option parameter.
-         * If null, then will be loaded from the backend (using the `layoutName` value).
-         *
-         * @protected
-         * @type {module:views/record/list~columnDefs[]|null}
-         */
-        listLayout: null,
-
-        /**
-         * @private
-         */
-        _internalLayout: null,
-
-        /**
-         * A list of record IDs currently selected. Only for reading.
-         *
-         * @protected
-         * @type {string[]|null}
-         */
-        checkedList: null,
-
-        /**
-         * Whether all results currently selected. Only for reading.
-         *
-         * @protected
-         */
-        allResultIsChecked: false,
-
-        /**
-         * Disable the ability to select all results. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        checkAllResultDisabled: false,
-
-        /**
-         * Disable buttons. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        buttonsDisabled: false,
-
-        /**
-         * Disable edit. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        editDisabled: false,
-
-        /**
-         * Disable remove. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        removeDisabled: false,
-
-        /**
-         * Disable a stick-bar. Can be overridden by an option parameter.
-         *
-         * @protected
-         */
-        stickedBarDisabled: false,
-
-        /**
-         * Disable the follow/unfollow mass action.
-         *
-         * @protected
-         */
-        massFollowDisabled: false,
-
-        /**
-         * Disable the print-pdf mass action.
-         *
-         * @protected
-         */
-        massPrintPdfDisabled: false,
-
-        /**
-         * Disable the convert-currency mass action.
-         *
-         * @protected
-         */
-        massConvertCurrencyDisabled: false,
-
-        /**
-         * Disable mass-update.
-         *
-         * @protected
-         */
-        massUpdateDisabled: false,
-
-        /**
-         * Disable export.
-         *
-         * @protected
-         */
-        exportDisabled: false,
-
-        /**
-         * Disable merge.
-         *
-         * @protected
-         */
-        mergeDisabled: false,
-
-        /**
-         * Disable a no-data label (when no result).
-         *
-         * @protected
-         */
-        noDataDisabled: false,
-
-        /**
-         * @private
-         */
-        _$focusedCheckbox: null,
-
-        /**
-         * @protected
-         * @type {?JQuery}
-         */
-        $selectAllCheckbox: null,
-
-        /**
-         * @protected
-         * @type {?Object.<string, Object.<string, *>>}
-         */
-        massActionDefs: null,
-
-        /**
-         * @inheritDoc
-         */
-        events: {
-            /**
-             * @param {JQueryKeyEventObject} e
-             * @this module:views/record/list.Class
-             */
-            'click a.link': function (e) {
-                if (e.ctrlKey || e.metaKey || e.shiftKey) {
-                    return;
-                }
-
-                e.stopPropagation();
-
-                if (!this.scope || this.selectable) {
-                    return;
-                }
-
-                e.preventDefault();
-
-                let id = $(e.currentTarget).attr('data-id');
-                let model = this.collection.get(id);
-                let scope = this.getModelScope(id);
-
-                let options = {
-                    id: id,
-                    model: model,
-                };
-
-                if (this.options.keepCurrentRootUrl) {
-                    options.rootUrl = this.getRouter().getCurrentUrl();
-                }
-
-                this.getRouter().navigate('#' + scope + '/view/' + id, {trigger: false});
-                this.getRouter().dispatch(scope, 'view', options);
-            },
-            /**
-             * @param {JQueryMouseEventObject} e
-             * @this module:views/record/list.Class
-             */
-            'auxclick a.link': function (e) {
-                let isCombination = e.button === 1 && (e.ctrlKey || e.metaKey);
-
-                if (!isCombination) {
-                    return;
-                }
-
-                let $target = $(e.currentTarget);
-
-                let id = $target.attr('data-id');
-
-                if (!id) {
-                    return;
-                }
-
-                if (this.quickDetailDisabled) {
-                    return;
-                }
-
-                let $menu = $target.parent().closest(`[data-id="${id}"]`)
-                    .find(`ul.list-row-dropdown-menu[data-id="${id}"]`);
-
-                let $quickView = $menu.find(`a[data-action="quickView"]`);
-
-                if ($menu.length && !$quickView.length) {
-                    return;
-                }
-
-                e.preventDefault();
-                e.stopPropagation();
-
-                this.actionQuickView({id: id});
-            },
-            /**
-             * @this module:views/record/list.Class
-             */
-            'click [data-action="showMore"]': function () {
-                this.showMoreRecords();
-            },
-            'mousedown a.sort': function (e) {
-                e.preventDefault();
-            },
-            /**
-             * @param {JQueryKeyEventObject} e
-             * @this module:views/record/list.Class
-             */
-            'click a.sort': function (e) {
-                let field = $(e.currentTarget).data('name');
-
-                this.toggleSort(field);
-            },
-            /**
-             * @param {JQueryKeyEventObject} e
-             * @this module:views/record/list.Class
-             */
-            'click .pagination a': function (e) {
-                let page = $(e.currentTarget).data('page');
-
-                if ($(e.currentTarget).parent().hasClass('disabled')) {
-                    return;
-                }
-
-                Espo.Ui.notify(' ... ');
-
-                this.collection.once('sync', () => {
-                    Espo.Ui.notify(false);
-                });
-
-                if (page === 'current') {
-                    this.collection.fetch();
-                }
-                else {
-                    this.collection[page + 'Page'].call(this.collection);
-                    this.trigger('paginate');
-                }
-
-                this.deactivate();
-            },
-            /**
-             * @param {JQueryKeyEventObject} e
-             * @this module:views/record/list.Class
-             */
-            'mousedown input.record-checkbox': function (e) {
-                let $focused = $(document.activeElement);
-
-                this._$focusedCheckbox = null;
-
-                if (
-                    $focused.length &&
-                    $focused.get(0).tagName === 'INPUT' &&
-                    $focused.hasClass('record-checkbox')
-                ) {
-                    this._$focusedCheckbox = $focused;
-                }
-            },
-            /**
-             * @param {JQueryKeyEventObject} e
-             * @this module:views/record/list.Class
-             */
-            'click input.record-checkbox': function (e) {
-                let $target = $(e.currentTarget);
-
-                let $from = this._$focusedCheckbox;
-
-                if (e.shiftKey && $from) {
-                    let $checkboxes = this.$el.find('input.record-checkbox');
-                    let start = $checkboxes.index($target);
-                    let end = $checkboxes.index($from);
-                    let checked = $from.prop('checked');
-
-                    $checkboxes.slice(Math.min(start, end), Math.max(start, end) + 1).each((i, el) => {
-                        let $el = $(el);
-
-                        $el.prop('checked', checked);
-                        this.checkboxClick($el, checked);
-                    });
-
-                    return;
-                }
-
-                this.checkboxClick($target, $target.is(':checked'));
-            },
-            /**
-             * @param {JQueryKeyEventObject} e
-             * @this module:views/record/list.Class
-             */
-            'click .select-all': function (e) {
-                this.selectAllHandler(e.currentTarget.checked);
-            },
-            /**
-             * @param {JQueryKeyEventObject} e
-             * @this module:views/record/list.Class
-             */
-            'click .action': function (e) {
-                Espo.Utils.handleAction(this, e);
-            },
-            /**
-             * @this module:views/record/list.Class
-             */
-            'click .checkbox-dropdown [data-action="selectAllResult"]': function () {
-                this.selectAllResult();
-            },
-            /**
-             * @param {JQueryKeyEventObject} e
-             * @this module:views/record/list.Class
-             */
-            'click .actions-menu a.mass-action': function (e) {
-                let $el = $(e.currentTarget);
-
-                let action = $el.data('action');
-                let method = 'massAction' + Espo.Utils.upperCaseFirst(action);
-
-                e.preventDefault();
-                e.stopPropagation();
-
-                let $parent = $el.closest('.dropdown-menu').parent();
-
-                $parent.find('.actions-button[data-toggle="dropdown"]')
-                    .dropdown('toggle')
-                    .focus();
-
-                if (method in this) {
-                    this[method]();
-
-                    return;
-                }
-
-                this.massAction(action);
-            },
-            /**
-             * @this module:views/record/list.Class
-             */
-            'click a.reset-custom-order': function () {
-                this.resetCustomOrder();
-            },
-        },
-
-        /**
-         * @param {JQuery} $checkbox
-         * @param {boolean} checked
-         * @private
-         */
-        checkboxClick: function ($checkbox, checked) {
-            let id = $checkbox.attr('data-id');
-
-            if (checked) {
-                this.checkRecord(id, $checkbox);
-
+        'click a.link': function (e) {
+            if (e.ctrlKey || e.metaKey || e.shiftKey) {
                 return;
             }
 
-            this.uncheckRecord(id, $checkbox);
-        },
+            e.stopPropagation();
 
-        resetCustomOrder: function () {
-            this.collection.resetOrderToDefault();
-            this.collection.trigger('order-changed');
-
-            this.collection
-                .fetch()
-                .then(() => {
-                    this.trigger('sort', {
-                        orderBy: this.collection.orderBy,
-                        order: this.collection.order,
-                    });
-                })
-        },
-
-        /**
-         * @param {string} orderBy
-         * @protected
-         */
-        toggleSort: function (orderBy) {
-            let asc = true;
-
-            if (orderBy === this.collection.orderBy && this.collection.order === 'asc') {
-                asc = false;
+            if (!this.scope || this.selectable) {
+                return;
             }
 
-            let order = asc ? 'asc' : 'desc';
+            e.preventDefault();
+
+            let id = $(e.currentTarget).attr('data-id');
+            let model = this.collection.get(id);
+            let scope = this.getModelScope(id);
+
+            let options = {
+                id: id,
+                model: model,
+            };
+
+            if (this.options.keepCurrentRootUrl) {
+                options.rootUrl = this.getRouter().getCurrentUrl();
+            }
+
+            this.getRouter().navigate('#' + scope + '/view/' + id, {trigger: false});
+            this.getRouter().dispatch(scope, 'view', options);
+        },
+        /**
+         * @param {JQueryMouseEventObject} e
+         * @this module:views/record/list
+         */
+        'auxclick a.link': function (e) {
+            let isCombination = e.button === 1 && (e.ctrlKey || e.metaKey);
+
+            if (!isCombination) {
+                return;
+            }
+
+            let $target = $(e.currentTarget);
+
+            let id = $target.attr('data-id');
+
+            if (!id) {
+                return;
+            }
+
+            if (this.quickDetailDisabled) {
+                return;
+            }
+
+            let $menu = $target.parent().closest(`[data-id="${id}"]`)
+                .find(`ul.list-row-dropdown-menu[data-id="${id}"]`);
+
+            let $quickView = $menu.find(`a[data-action="quickView"]`);
+
+            if ($menu.length && !$quickView.length) {
+                return;
+            }
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            this.actionQuickView({id: id});
+        },
+        /**
+         * @this module:views/record/list
+         */
+        'click [data-action="showMore"]': function () {
+            this.showMoreRecords();
+        },
+        'mousedown a.sort': function (e) {
+            e.preventDefault();
+        },
+        /**
+         * @param {JQueryKeyEventObject} e
+         * @this module:views/record/list
+         */
+        'click a.sort': function (e) {
+            let field = $(e.currentTarget).data('name');
+
+            this.toggleSort(field);
+        },
+        /**
+         * @param {JQueryKeyEventObject} e
+         * @this module:views/record/list
+         */
+        'click .pagination a': function (e) {
+            let page = $(e.currentTarget).data('page');
+
+            if ($(e.currentTarget).parent().hasClass('disabled')) {
+                return;
+            }
 
             Espo.Ui.notify(' ... ');
 
-            let maxSizeLimit = this.getConfig().get('recordListMaxSizeLimit') || 200;
+            this.collection.once('sync', () => {
+                Espo.Ui.notify(false);
+            });
 
-            while (this.collection.length > maxSizeLimit) {
-                this.collection.pop();
+            if (page === 'current') {
+                this.collection.fetch();
+            }
+            else {
+                this.collection[page + 'Page'].call(this.collection);
+                this.trigger('paginate');
             }
-
-            this.collection
-                .sort(orderBy, order)
-                .then(() => {
-                    Espo.Ui.notify(false);
-
-                    this.trigger('sort', {orderBy: orderBy, order: order});
-                })
-
-            this.collection.trigger('order-changed');
 
             this.deactivate();
         },
-
         /**
-         * @protected
+         * @this module:views/record/list
          */
-        initStickedBar: function () {
-            let $stickedBar = this.$stickedBar = this.$el.find('.sticked-bar');
-            let $middle = this.$el.find('> .list');
+        'mousedown input.record-checkbox': function () {
+            let $focused = $(document.activeElement);
 
-            let $window = $(window);
-            let $scrollable = $window;
-            let $navbarRight = $('#navbar .navbar-right');
-
-            this.on('render', () => {
-                this.$stickedBar = null;
-            });
-
-            let isModal = !!this.$el.closest('.modal-body').length;
-
-            let screenWidthXs = this.getThemeManager().getParam('screenWidthXs');
-            let navbarHeight = this.getThemeManager().getParam('navbarHeight');
-
-            let isSmallWindow = $(window.document).width() < screenWidthXs;
-
-            let getOffsetTop = (element) => {
-                let offsetTop = 0;
-
-                let withHeader = !isSmallWindow && !isModal;
-
-                do {
-                    if (element.classList.contains('modal-body')) {
-                        break;
-                    }
-
-                    if (!isNaN(element.offsetTop)) {
-                        offsetTop += element.offsetTop;
-                    }
-
-                    element = element.offsetParent;
-                } while (element);
-
-                if (withHeader) {
-                    offsetTop -= navbarHeight;
-                }
-
-                return offsetTop;
-            };
-
-            if (isModal) {
-                $scrollable = this.$el.closest('.modal-body');
-                $navbarRight = $scrollable.parent().find('.modal-footer');
-            }
-
-            let middleTop = getOffsetTop($middle.get(0));
-            let buttonsTop =  getOffsetTop(this.$el.find('.list-buttons-container').get(0));
-
-            $scrollable.off('scroll.list-' + this.cid);
-            $scrollable.on('scroll.list-' + this.cid, () => controlSticking());
-
-            $window.off('resize.list-' + this.cid);
-            $window.on('resize.list-' + this.cid, () => controlSticking());
-
-            this.on('check', () => {
-                if (this.checkedList.length === 0 && !this.allResultIsChecked) {
-                    return;
-                }
-
-                controlSticking();
-            });
-
-            this.on('remove', () => {
-                $scrollable.off('scroll.list-' + this.cid);
-                $window.off('resize.list-' + this.cid);
-            });
-
-            let controlSticking = () => {
-                if (this.checkedList.length === 0 && !this.allResultIsChecked) {
-                    return;
-                }
-
-                let scrollTop = $scrollable.scrollTop();
-
-                let stickTop = buttonsTop;
-                let edge = middleTop + $middle.outerHeight(true);
-
-                if (isSmallWindow && $('#navbar .navbar-body').hasClass('in')) {
-                    return;
-                }
-
-                if (scrollTop >= edge) {
-                    $stickedBar.removeClass('hidden');
-                    $navbarRight.addClass('has-sticked-bar');
-
-                    return;
-                }
-
-                if (scrollTop > stickTop) {
-                    $stickedBar.removeClass('hidden');
-                    $navbarRight.addClass('has-sticked-bar');
-
-                    return;
-                }
-
-                $stickedBar.addClass('hidden');
-                $navbarRight.removeClass('has-sticked-bar');
-            };
-        },
-
-        /**
-         * @protected
-         */
-        showActions: function () {
-            this.$el.find('.actions-button').removeClass('hidden');
+            this._$focusedCheckbox = null;
 
             if (
-                !this.options.stickedBarDisabled &&
-                !this.stickedBarDisabled &&
-                this.massActionList.length
+                $focused.length &&
+                $focused.get(0).tagName === 'INPUT' &&
+                $focused.hasClass('record-checkbox')
             ) {
-                if (!this.$stickedBar) {
-                    this.initStickedBar();
-                }
+                this._$focusedCheckbox = $focused;
             }
         },
-
         /**
-         * @protected
+         * @param {JQueryKeyEventObject} e
+         * @this module:views/record/list
          */
-        hideActions: function () {
-            this.$el.find('.actions-button').addClass('hidden');
+        'click input.record-checkbox': function (e) {
+            let $target = $(e.currentTarget);
 
-            if (this.$stickedBar) {
-                this.$stickedBar.addClass('hidden');
-            }
-        },
+            let $from = this._$focusedCheckbox;
 
-        /**
-         * @protected
-         */
-        selectAllHandler: function (isChecked) {
-            this.checkedList = [];
+            if (e.shiftKey && $from) {
+                let $checkboxes = this.$el.find('input.record-checkbox');
+                let start = $checkboxes.index($target);
+                let end = $checkboxes.index($from);
+                let checked = $from.prop('checked');
 
-            if (isChecked) {
-                this.$el.find('input.record-checkbox').prop('checked', true);
+                $checkboxes.slice(Math.min(start, end), Math.max(start, end) + 1).each((i, el) => {
+                    let $el = $(el);
 
-                this.showActions();
-
-                this.collection.models.forEach((model) => {
-                    this.checkedList.push(model.id);
-                });
-
-                this.$el.find('.list > table tbody tr').addClass('active');
-            }
-            else {
-                if (this.allResultIsChecked) {
-                    this.unselectAllResult();
-                }
-
-                this.$el.find('input.record-checkbox').prop('checked', false);
-                this.hideActions();
-                this.$el.find('.list > table tbody tr').removeClass('active');
-            }
-
-            this.trigger('check');
-        },
-
-        /**
-         * @inheritDoc
-         */
-        data: function () {
-            let paginationTop = this.pagination === 'both' ||
-                this.pagination === 'top';
-
-            let paginationBottom = this.pagination === 'both' ||
-                this.pagination === true ||
-                this.pagination === 'bottom';
-
-            let moreCount = this.collection.total - this.collection.length;
-            let checkAllResultDisabled = this.checkAllResultDisabled;
-
-            if (!this.massActionsDisabled) {
-                if (!this.checkAllResultMassActionList.length) {
-                    checkAllResultDisabled = true;
-                }
-            }
-
-            let displayTotalCount = this.displayTotalCount && this.collection.total > 0;
-
-            let topBar =
-                paginationTop ||
-                this.checkboxes ||
-                (this.buttonList.length && !this.buttonsDisabled) ||
-                (this.dropdownItemList.length && !this.buttonsDisabled) ||
-                this.forceDisplayTopBar ||
-                displayTotalCount;
-
-            return {
-                scope: this.scope,
-                entityType: this.entityType,
-                header: this.header,
-                headerDefs: this._getHeaderDefs(),
-                paginationEnabled: this.pagination,
-                paginationTop: paginationTop,
-                paginationBottom: paginationBottom,
-                showMoreActive: this.collection.hasMore(),
-                showMoreEnabled: this.showMore,
-                showCount: this.showCount && this.collection.total > 0,
-                moreCount: moreCount,
-                checkboxes: this.checkboxes,
-                massActionList: this.massActionList,
-                rowList: this.rowList,
-                topBar: topBar,
-                bottomBar: paginationBottom,
-                checkAllResultDisabled: checkAllResultDisabled,
-                buttonList: this.buttonList,
-                dropdownItemList: this.dropdownItemList,
-                displayTotalCount: displayTotalCount,
-                displayActionsButtonGroup: this.checkboxes ||
-                    this.massActionList || this.buttonList.length || this.dropdownItemList.length,
-                totalCountFormatted: this.getNumberUtil().formatInt(this.collection.total),
-                moreCountFormatted: this.getNumberUtil().formatInt(moreCount),
-                checkboxColumnWidth: this.checkboxColumnWidth,
-                noDataDisabled: this.noDataDisabled,
-            };
-        },
-
-        /**
-         * @inheritDoc
-         */
-        init: function () {
-            this.type = this.options.type || this.type;
-            this.listLayout = this.options.listLayout || this.listLayout;
-            this.layoutName = this.options.layoutName || this.layoutName || this.type;
-            this.layoutScope = this.options.layoutScope || this.layoutScope;
-            this.layoutAclDisabled = this.options.layoutAclDisabled || this.layoutAclDisabled;
-            this.headerDisabled = this.options.headerDisabled || this.headerDisabled;
-            this.noDataDisabled = this.options.noDataDisabled || this.noDataDisabled;
-
-            if (!this.headerDisabled) {
-                this.header = _.isUndefined(this.options.header) ? this.header : this.options.header;
-            } else {
-                this.header = false;
-            }
-
-            this.pagination = _.isUndefined(this.options.pagination) || this.options.pagination === null ?
-                this.pagination :
-                this.options.pagination;
-
-            this.checkboxes = _.isUndefined(this.options.checkboxes) ? this.checkboxes :
-                this.options.checkboxes;
-            this.selectable = _.isUndefined(this.options.selectable) ? this.selectable :
-                this.options.selectable;
-
-            this.checkboxesDisabled = this.options.checkboxes === false;
-
-            this.rowActionsView = _.isUndefined(this.options.rowActionsView) ?
-                this.rowActionsView :
-                this.options.rowActionsView;
-
-            this.showMore = _.isUndefined(this.options.showMore) ? this.showMore : this.options.showMore;
-
-            this.massActionsDisabled = this.options.massActionsDisabled || this.massActionsDisabled;
-            this.portalLayoutDisabled = this.options.portalLayoutDisabled || this.portalLayoutDisabled;
-
-            if (this.massActionsDisabled && !this.selectable) {
-                this.checkboxes = false;
-            }
-
-            this.rowActionsDisabled = this.options.rowActionsDisabled || this.rowActionsDisabled;
-
-            this.dropdownItemList = Espo.Utils.cloneDeep(
-                this.options.dropdownItemList || this.dropdownItemList);
-
-            if ('buttonsDisabled' in this.options) {
-                this.buttonsDisabled = this.options.buttonsDisabled;
-            }
-
-            if ('checkAllResultDisabled' in this.options) {
-                this.checkAllResultDisabled = this.options.checkAllResultDisabled;
-            }
-        },
-
-        /**
-         * Get a record entity type (scope).
-         *
-         * @param {string} id A record ID.
-         * @return {string}
-         */
-        getModelScope: function (id) {
-            return this.scope;
-        },
-
-        /**
-         * Select all results.
-         */
-        selectAllResult: function () {
-            this.allResultIsChecked = true;
-
-            this.hideActions();
-
-            this.$el.find('input.record-checkbox').prop('checked', true).attr('disabled', 'disabled');
-            this.$selectAllCheckbox.prop('checked', true);
-
-            this.massActionList.forEach(item => {
-                if (!~this.checkAllResultMassActionList.indexOf(item)) {
-                    this.$el
-                        .find(
-                            'div.list-buttons-container .actions-menu li a.mass-action[data-action="'+item+'"]'
-                        )
-                        .parent()
-                        .addClass('hidden');
-                }
-            });
-
-            if (this.checkAllResultMassActionList.length) {
-                this.showActions();
-            }
-
-            this.$el.find('.list > table tbody tr').removeClass('active');
-
-            this.trigger('select-all-results');
-        },
-
-        /**
-         * Unselect all results.
-         */
-        unselectAllResult: function () {
-            this.allResultIsChecked = false;
-
-            this.$el.find('input.record-checkbox').prop('checked', false).removeAttr('disabled');
-            this.$selectAllCheckbox.prop('checked', false);
-
-            this.massActionList.forEach(item => {
-                if (!~this.checkAllResultMassActionList.indexOf(item)) {
-                    this.$el
-                        .find('div.list-buttons-container .actions-menu ' +
-                            'li a.mass-action[data-action="'+item+'"]')
-                        .parent()
-                        .removeClass('hidden');
-                }
-            });
-        },
-
-        /**
-         * @protected
-         */
-        deactivate: function () {
-            if (this.$el) {
-                this.$el.find(".pagination li").addClass('disabled');
-                this.$el.find("a.sort").addClass('disabled');
-            }
-        },
-
-        /**
-         * Process export.
-         *
-         * @param {Object<string,*>} [data]
-         * @param {string} [url='Export'] An API URL.
-         * @param {string[]} [fieldList] A field list.
-         */
-        export: function (data, url, fieldList) {
-            if (!data) {
-                data = {
-                    entityType: this.entityType,
-                };
-
-                if (this.allResultIsChecked) {
-                    data.where = this.collection.getWhere();
-                    data.searchParams = this.collection.data || null;
-                    data.searchData = this.collection.data || {}; // for bc;
-                }
-                else {
-                    data.ids = this.checkedList;
-                }
-            }
-
-            url = url || 'Export';
-
-            let o = {
-                scope: this.entityType,
-            };
-
-            if (fieldList) {
-                o.fieldList = fieldList;
-            }
-            else {
-                let layoutFieldList = [];
-
-                (this.listLayout || []).forEach((item) => {
-                    if (item.name) {
-                        layoutFieldList.push(item.name);
-                    }
-                });
-
-                o.fieldList = layoutFieldList;
-            }
-
-            let helper = new ExportHelper(this);
-            let idle = this.allResultIsChecked && helper.checkIsIdle(this.collection.total);
-
-            let proceedDownload = (attachmentId) => {
-                window.location = this.getBasePath() + '?entryPoint=download&id=' + attachmentId;
-            };
-
-            this.createView('dialogExport', 'views/export/modals/export', o, (view) => {
-                view.render();
-
-                this.listenToOnce(view, 'proceed', (dialogData) => {
-                    if (!dialogData.exportAllFields) {
-                        data.attributeList = dialogData.attributeList;
-                        data.fieldList = dialogData.fieldList;
-                    }
-
-                    data.idle = idle;
-                    data.format = dialogData.format;
-                    data.params = dialogData.params;
-
-                    Espo.Ui.notify(this.translate('pleaseWait', 'messages'));
-
-                    Espo.Ajax
-                        .postRequest(url, data, {timeout: 0})
-                        .then(response => {
-                            Espo.Ui.notify(false);
-
-                            if (response.exportId) {
-                                helper
-                                    .process(response.exportId)
-                                    .then(view => {
-                                        this.listenToOnce(view, 'download', id => {
-                                            proceedDownload(id);
-                                        });
-                                    });
-
-                                return;
-                            }
-
-                            if (!response.id) {
-                                throw new Error("No attachment-id.");
-                            }
-
-                            window.location = this.getBasePath() + '?entryPoint=download&id=' + response.id;
-
-                            proceedDownload(response.id);
-                        });
-                });
-            });
-        },
-
-        /**
-         * Process a mass-action.
-         *
-         * @param {string} name An action.
-         */
-        massAction: function (name) {
-            let defs = this.massActionDefs[name] || {};
-
-            let handler = defs.handler;
-
-            if (handler) {
-                let method = 'action' + Espo.Utils.upperCaseFirst(name);
-
-                let data = {
-                    entityType: this.entityType,
-                    action: name,
-                    params: this.getMassActionSelectionPostData(),
-                };
-
-                require(handler, Handler => {
-                    let handler = new Handler(this);
-
-                    handler[method].call(handler, data);
+                    $el.prop('checked', checked);
+                    this.checkboxClick($el, checked);
                 });
 
                 return;
             }
 
-            let bypassConfirmation = defs.bypassConfirmation || false;
-            let confirmationMsg = defs.confirmationMessage || 'confirmation';
-            let acl = defs.acl;
-            let aclScope = defs.aclScope;
-
-            let proceed = () => {
-                if (acl || aclScope) {
-                    if (!this.getAcl().check(aclScope || this.scope, acl)) {
-                        this.notify('Access denied', 'error');
-
-                        return;
-                    }
-                }
-
-                let idList = [];
-                let data = {};
-
-                if (this.allResultIsChecked) {
-                    data.where = this.collection.getWhere();
-                    data.searchParams =  this.collection.data || {};
-                    data.selectData = data.searchData; // for bc;
-                    data.byWhere = true; // for bc
-                }
-                else {
-                    data.idList = idList; // for bc
-                    data.ids = idList;
-                }
-
-                for (let i in this.checkedList) {
-                    idList.push(this.checkedList[i]);
-                }
-
-                data.entityType = this.entityType;
-
-                let waitMessage = defs.waitMessage || 'pleaseWait';
-
-                Espo.Ui.notify(this.translate(waitMessage, 'messages', this.scope));
-
-                let url = defs.url;
-
-                Espo.Ajax.postRequest(url, data)
-                    .then(result=> {
-                        let successMessage = result.successMessage || defs.successMessage || 'done';
-
-                        this.collection
-                            .fetch()
-                            .then(() => {
-                                let message = this.translate(successMessage, 'messages', this.scope);
-
-                                if ('count' in result) {
-                                    message = message.replace('{count}', result.count);
-                                }
-
-                                Espo.Ui.success(message);
-                            });
-                    });
-            };
-
-            if (!bypassConfirmation) {
-                this.confirm(this.translate(confirmationMsg, 'messages', this.scope), proceed, this);
-            }
-            else {
-                proceed.call(this);
-            }
+            this.checkboxClick($target, $target.is(':checked'));
         },
+        /**
+         * @param {JQueryKeyEventObject} e
+         * @this module:views/record/list
+         */
+        'click .select-all': function (e) {
+            this.selectAllHandler(e.currentTarget.checked);
+        },
+        /**
+         * @param {JQueryKeyEventObject} e
+         * @this module:views/record/list
+         */
+        'click .action': function (e) {
+            Espo.Utils.handleAction(this, e);
+        },
+        /**
+         * @this module:views/record/list
+         */
+        'click .checkbox-dropdown [data-action="selectAllResult"]': function () {
+            this.selectAllResult();
+        },
+        /**
+         * @param {JQueryKeyEventObject} e
+         * @this module:views/record/list
+         */
+        'click .actions-menu a.mass-action': function (e) {
+            let $el = $(e.currentTarget);
 
-        getMassActionSelectionPostData: function () {
-            let data = {};
+            let action = $el.data('action');
+            let method = 'massAction' + Espo.Utils.upperCaseFirst(action);
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            let $parent = $el.closest('.dropdown-menu').parent();
+
+            $parent.find('.actions-button[data-toggle="dropdown"]')
+                .dropdown('toggle')
+                .focus();
+
+            if (method in this) {
+                this[method]();
+
+                return;
+            }
+
+            this.massAction(action);
+        },
+        /**
+         * @this module:views/record/list
+         */
+        'click a.reset-custom-order': function () {
+            this.resetCustomOrder();
+        },
+    },
+
+    /**
+     * @param {JQuery} $checkbox
+     * @param {boolean} checked
+     * @private
+     */
+    checkboxClick: function ($checkbox, checked) {
+        let id = $checkbox.attr('data-id');
+
+        if (checked) {
+            this.checkRecord(id, $checkbox);
+
+            return;
+        }
+
+        this.uncheckRecord(id, $checkbox);
+    },
+
+    resetCustomOrder: function () {
+        this.collection.resetOrderToDefault();
+        this.collection.trigger('order-changed');
+
+        this.collection
+            .fetch()
+            .then(() => {
+                this.trigger('sort', {
+                    orderBy: this.collection.orderBy,
+                    order: this.collection.order,
+                });
+            })
+    },
+
+    /**
+     * @param {string} orderBy
+     * @protected
+     */
+    toggleSort: function (orderBy) {
+        let asc = true;
+
+        if (orderBy === this.collection.orderBy && this.collection.order === 'asc') {
+            asc = false;
+        }
+
+        let order = asc ? 'asc' : 'desc';
+
+        Espo.Ui.notify(' ... ');
+
+        let maxSizeLimit = this.getConfig().get('recordListMaxSizeLimit') || 200;
+
+        while (this.collection.length > maxSizeLimit) {
+            this.collection.pop();
+        }
+
+        this.collection
+            .sort(orderBy, order)
+            .then(() => {
+                Espo.Ui.notify(false);
+
+                this.trigger('sort', {orderBy: orderBy, order: order});
+            })
+
+        this.collection.trigger('order-changed');
+
+        this.deactivate();
+    },
+
+    /**
+     * @protected
+     */
+    initStickedBar: function () {
+        let $stickedBar = this.$stickedBar = this.$el.find('.sticked-bar');
+        let $middle = this.$el.find('> .list');
+
+        let $window = $(window);
+        let $scrollable = $window;
+        let $navbarRight = $('#navbar .navbar-right');
+
+        this.on('render', () => {
+            this.$stickedBar = null;
+        });
+
+        let isModal = !!this.$el.closest('.modal-body').length;
+
+        let screenWidthXs = this.getThemeManager().getParam('screenWidthXs');
+        let navbarHeight = this.getThemeManager().getParam('navbarHeight');
+
+        let isSmallWindow = $(window.document).width() < screenWidthXs;
+
+        let getOffsetTop = (element) => {
+            let offsetTop = 0;
+
+            let withHeader = !isSmallWindow && !isModal;
+
+            do {
+                if (element.classList.contains('modal-body')) {
+                    break;
+                }
+
+                if (!isNaN(element.offsetTop)) {
+                    offsetTop += element.offsetTop;
+                }
+
+                element = element.offsetParent;
+            } while (element);
+
+            if (withHeader) {
+                offsetTop -= navbarHeight;
+            }
+
+            return offsetTop;
+        };
+
+        if (isModal) {
+            $scrollable = this.$el.closest('.modal-body');
+            $navbarRight = $scrollable.parent().find('.modal-footer');
+        }
+
+        let middleTop = getOffsetTop($middle.get(0));
+        let buttonsTop =  getOffsetTop(this.$el.find('.list-buttons-container').get(0));
+
+        $scrollable.off('scroll.list-' + this.cid);
+        $scrollable.on('scroll.list-' + this.cid, () => controlSticking());
+
+        $window.off('resize.list-' + this.cid);
+        $window.on('resize.list-' + this.cid, () => controlSticking());
+
+        this.on('check', () => {
+            if (this.checkedList.length === 0 && !this.allResultIsChecked) {
+                return;
+            }
+
+            controlSticking();
+        });
+
+        this.on('remove', () => {
+            $scrollable.off('scroll.list-' + this.cid);
+            $window.off('resize.list-' + this.cid);
+        });
+
+        let controlSticking = () => {
+            if (this.checkedList.length === 0 && !this.allResultIsChecked) {
+                return;
+            }
+
+            let scrollTop = $scrollable.scrollTop();
+
+            let stickTop = buttonsTop;
+            let edge = middleTop + $middle.outerHeight(true);
+
+            if (isSmallWindow && $('#navbar .navbar-body').hasClass('in')) {
+                return;
+            }
+
+            if (scrollTop >= edge) {
+                $stickedBar.removeClass('hidden');
+                $navbarRight.addClass('has-sticked-bar');
+
+                return;
+            }
+
+            if (scrollTop > stickTop) {
+                $stickedBar.removeClass('hidden');
+                $navbarRight.addClass('has-sticked-bar');
+
+                return;
+            }
+
+            $stickedBar.addClass('hidden');
+            $navbarRight.removeClass('has-sticked-bar');
+        };
+    },
+
+    /**
+     * @protected
+     */
+    showActions: function () {
+        this.$el.find('.actions-button').removeClass('hidden');
+
+        if (
+            !this.options.stickedBarDisabled &&
+            !this.stickedBarDisabled &&
+            this.massActionList.length
+        ) {
+            if (!this.$stickedBar) {
+                this.initStickedBar();
+            }
+        }
+    },
+
+    /**
+     * @protected
+     */
+    hideActions: function () {
+        this.$el.find('.actions-button').addClass('hidden');
+
+        if (this.$stickedBar) {
+            this.$stickedBar.addClass('hidden');
+        }
+    },
+
+    /**
+     * @protected
+     */
+    selectAllHandler: function (isChecked) {
+        this.checkedList = [];
+
+        if (isChecked) {
+            this.$el.find('input.record-checkbox').prop('checked', true);
+
+            this.showActions();
+
+            this.collection.models.forEach((model) => {
+                this.checkedList.push(model.id);
+            });
+
+            this.$el.find('.list > table tbody tr').addClass('active');
+        }
+        else {
+            if (this.allResultIsChecked) {
+                this.unselectAllResult();
+            }
+
+            this.$el.find('input.record-checkbox').prop('checked', false);
+            this.hideActions();
+            this.$el.find('.list > table tbody tr').removeClass('active');
+        }
+
+        this.trigger('check');
+    },
+
+    /**
+     * @inheritDoc
+     */
+    data: function () {
+        let paginationTop = this.pagination === 'both' ||
+            this.pagination === 'top';
+
+        let paginationBottom = this.pagination === 'both' ||
+            this.pagination === true ||
+            this.pagination === 'bottom';
+
+        let moreCount = this.collection.total - this.collection.length;
+        let checkAllResultDisabled = this.checkAllResultDisabled;
+
+        if (!this.massActionsDisabled) {
+            if (!this.checkAllResultMassActionList.length) {
+                checkAllResultDisabled = true;
+            }
+        }
+
+        let displayTotalCount = this.displayTotalCount && this.collection.total > 0;
+
+        let topBar =
+            paginationTop ||
+            this.checkboxes ||
+            (this.buttonList.length && !this.buttonsDisabled) ||
+            (this.dropdownItemList.length && !this.buttonsDisabled) ||
+            this.forceDisplayTopBar ||
+            displayTotalCount;
+
+        return {
+            scope: this.scope,
+            entityType: this.entityType,
+            header: this.header,
+            headerDefs: this._getHeaderDefs(),
+            paginationEnabled: this.pagination,
+            paginationTop: paginationTop,
+            paginationBottom: paginationBottom,
+            showMoreActive: this.collection.hasMore(),
+            showMoreEnabled: this.showMore,
+            showCount: this.showCount && this.collection.total > 0,
+            moreCount: moreCount,
+            checkboxes: this.checkboxes,
+            massActionList: this.massActionList,
+            rowList: this.rowList,
+            topBar: topBar,
+            bottomBar: paginationBottom,
+            checkAllResultDisabled: checkAllResultDisabled,
+            buttonList: this.buttonList,
+            dropdownItemList: this.dropdownItemList,
+            displayTotalCount: displayTotalCount,
+            displayActionsButtonGroup: this.checkboxes ||
+                this.massActionList || this.buttonList.length || this.dropdownItemList.length,
+            totalCountFormatted: this.getNumberUtil().formatInt(this.collection.total),
+            moreCountFormatted: this.getNumberUtil().formatInt(moreCount),
+            checkboxColumnWidth: this.checkboxColumnWidth,
+            noDataDisabled: this.noDataDisabled,
+        };
+    },
+
+    /**
+     * @inheritDoc
+     */
+    init: function () {
+        this.type = this.options.type || this.type;
+        this.listLayout = this.options.listLayout || this.listLayout;
+        this.layoutName = this.options.layoutName || this.layoutName || this.type;
+        this.layoutScope = this.options.layoutScope || this.layoutScope;
+        this.layoutAclDisabled = this.options.layoutAclDisabled || this.layoutAclDisabled;
+        this.headerDisabled = this.options.headerDisabled || this.headerDisabled;
+        this.noDataDisabled = this.options.noDataDisabled || this.noDataDisabled;
+
+        if (!this.headerDisabled) {
+            this.header = _.isUndefined(this.options.header) ? this.header : this.options.header;
+        } else {
+            this.header = false;
+        }
+
+        this.pagination = _.isUndefined(this.options.pagination) || this.options.pagination === null ?
+            this.pagination :
+            this.options.pagination;
+
+        this.checkboxes = _.isUndefined(this.options.checkboxes) ? this.checkboxes :
+            this.options.checkboxes;
+        this.selectable = _.isUndefined(this.options.selectable) ? this.selectable :
+            this.options.selectable;
+
+        this.checkboxesDisabled = this.options.checkboxes === false;
+
+        this.rowActionsView = _.isUndefined(this.options.rowActionsView) ?
+            this.rowActionsView :
+            this.options.rowActionsView;
+
+        this.showMore = _.isUndefined(this.options.showMore) ? this.showMore : this.options.showMore;
+
+        this.massActionsDisabled = this.options.massActionsDisabled || this.massActionsDisabled;
+        this.portalLayoutDisabled = this.options.portalLayoutDisabled || this.portalLayoutDisabled;
+
+        if (this.massActionsDisabled && !this.selectable) {
+            this.checkboxes = false;
+        }
+
+        this.rowActionsDisabled = this.options.rowActionsDisabled || this.rowActionsDisabled;
+
+        this.dropdownItemList = Espo.Utils.cloneDeep(
+            this.options.dropdownItemList || this.dropdownItemList);
+
+        if ('buttonsDisabled' in this.options) {
+            this.buttonsDisabled = this.options.buttonsDisabled;
+        }
+
+        if ('checkAllResultDisabled' in this.options) {
+            this.checkAllResultDisabled = this.options.checkAllResultDisabled;
+        }
+    },
+
+    /**
+     * Get a record entity type (scope).
+     *
+     * @param {string} id A record ID.
+     * @return {string}
+     */
+    getModelScope: function (id) {
+        return this.scope;
+    },
+
+    /**
+     * Select all results.
+     */
+    selectAllResult: function () {
+        this.allResultIsChecked = true;
+
+        this.hideActions();
+
+        this.$el.find('input.record-checkbox').prop('checked', true).attr('disabled', 'disabled');
+        this.$selectAllCheckbox.prop('checked', true);
+
+        this.massActionList.forEach(item => {
+            if (!~this.checkAllResultMassActionList.indexOf(item)) {
+                this.$el
+                    .find(
+                        'div.list-buttons-container .actions-menu li a.mass-action[data-action="'+item+'"]'
+                    )
+                    .parent()
+                    .addClass('hidden');
+            }
+        });
+
+        if (this.checkAllResultMassActionList.length) {
+            this.showActions();
+        }
+
+        this.$el.find('.list > table tbody tr').removeClass('active');
+
+        this.trigger('select-all-results');
+    },
+
+    /**
+     * Unselect all results.
+     */
+    unselectAllResult: function () {
+        this.allResultIsChecked = false;
+
+        this.$el.find('input.record-checkbox').prop('checked', false).removeAttr('disabled');
+        this.$selectAllCheckbox.prop('checked', false);
+
+        this.massActionList.forEach(item => {
+            if (!~this.checkAllResultMassActionList.indexOf(item)) {
+                this.$el
+                    .find('div.list-buttons-container .actions-menu ' +
+                        'li a.mass-action[data-action="'+item+'"]')
+                    .parent()
+                    .removeClass('hidden');
+            }
+        });
+    },
+
+    /**
+     * @protected
+     */
+    deactivate: function () {
+        if (this.$el) {
+            this.$el.find(".pagination li").addClass('disabled');
+            this.$el.find("a.sort").addClass('disabled');
+        }
+    },
+
+    /**
+     * Process export.
+     *
+     * @param {Object<string,*>} [data]
+     * @param {string} [url='Export'] An API URL.
+     * @param {string[]} [fieldList] A field list.
+     */
+    export: function (data, url, fieldList) {
+        if (!data) {
+            data = {
+                entityType: this.entityType,
+            };
 
             if (this.allResultIsChecked) {
                 data.where = this.collection.getWhere();
-                data.searchParams = this.collection.data || {};
-                data.selectData = this.collection.data || {}; // for bc;
-                data.byWhere = true; // for bc;
+                data.searchParams = this.collection.data || null;
+                data.searchData = this.collection.data || {}; // for bc;
             }
             else {
-                data.ids = [];
+                data.ids = this.checkedList;
+            }
+        }
 
-                for (let i in this.checkedList) {
-                    data.ids.push(this.checkedList[i]);
+        url = url || 'Export';
+
+        let o = {
+            scope: this.entityType,
+        };
+
+        if (fieldList) {
+            o.fieldList = fieldList;
+        }
+        else {
+            let layoutFieldList = [];
+
+            (this.listLayout || []).forEach((item) => {
+                if (item.name) {
+                    layoutFieldList.push(item.name);
                 }
-            }
+            });
 
-            return data;
-        },
+            o.fieldList = layoutFieldList;
+        }
 
-        massActionRecalculateFormula: function () {
-            let ids = false;
+        let helper = new ExportHelper(this);
+        let idle = this.allResultIsChecked && helper.checkIsIdle(this.collection.total);
 
-            let allResultIsChecked = this.allResultIsChecked;
+        let proceedDownload = (attachmentId) => {
+            window.location = this.getBasePath() + '?entryPoint=download&id=' + attachmentId;
+        };
 
-            if (!allResultIsChecked) {
-                ids = this.checkedList;
-            }
+        this.createView('dialogExport', 'views/export/modals/export', o, (view) => {
+            view.render();
+
+            this.listenToOnce(view, 'proceed', (dialogData) => {
+                if (!dialogData.exportAllFields) {
+                    data.attributeList = dialogData.attributeList;
+                    data.fieldList = dialogData.fieldList;
+                }
+
+                data.idle = idle;
+                data.format = dialogData.format;
+                data.params = dialogData.params;
 
-            this.confirm({
-                message: this.translate('recalculateFormulaConfirmation', 'messages'),
-                confirmText: this.translate('Yes'),
-            }, () => {
                 Espo.Ui.notify(this.translate('pleaseWait', 'messages'));
 
-                let params = this.getMassActionSelectionPostData();
-                let helper = new MassActionHelper(this);
-                let idle = !!params.searchParams && helper.checkIsIdle(this.collection.total);
+                Espo.Ajax
+                    .postRequest(url, data, {timeout: 0})
+                    .then(response => {
+                        Espo.Ui.notify(false);
 
-                Espo.Ajax.postRequest('MassAction', {
-                    entityType: this.entityType,
-                    action: 'recalculateFormula',
-                    params: params,
-                    idle: idle,
-                })
-                    .then((result) => {
-                        result = result || {};
-
-                        let final = () => {
-                            this.collection
-                                .fetch()
-                                .then(() => {
-                                    Espo.Ui.success(this.translate('Done'));
-
-                                    if (allResultIsChecked) {
-                                        this.selectAllResult();
-
-                                        return;
-                                    }
-
-                                    ids.forEach((id) => {
-                                        this.checkRecord(id);
+                        if (response.exportId) {
+                            helper
+                                .process(response.exportId)
+                                .then(view => {
+                                    this.listenToOnce(view, 'download', id => {
+                                        proceedDownload(id);
                                     });
                                 });
-                        };
-
-                        if (result.id) {
-                            helper
-                                .process(result.id, 'recalculateFormula')
-                                .then(view => {
-                                    this.listenToOnce(view, 'close:success', () => final());
-                                });
 
                             return;
                         }
 
-                        final();
-                    });
-            });
-        },
-
-        massActionRemove: function () {
-            if (!this.getAcl().check(this.entityType, 'delete')) {
-                Espo.Ui.error(this.translate('Access denied'));
-
-                return false;
-            }
-
-            this.confirm({
-                message: this.translate('removeSelectedRecordsConfirmation', 'messages', this.scope),
-                confirmText: this.translate('Remove'),
-            }, () => {
-                Espo.Ui.notify(' ... ');
-
-                let helper = new MassActionHelper(this);
-                let params = this.getMassActionSelectionPostData();
-                let idle = !!params.searchParams && helper.checkIsIdle(this.collection.total);
-
-                Espo.Ajax.postRequest('MassAction', {
-                    entityType: this.entityType,
-                    action: 'delete',
-                    params: params,
-                    idle: idle,
-                })
-                .then(result => {
-                    result = result || {};
-
-                    let afterAllResult = count => {
-                        if (!count) {
-                            Espo.Ui.warning(this.translate('noRecordsRemoved', 'messages'));
-
-                            return;
+                        if (!response.id) {
+                            throw new Error("No attachment-id.");
                         }
 
-                        this.unselectAllResult();
+                        window.location = this.getBasePath() + '?entryPoint=download&id=' + response.id;
 
-                        this.collection
-                            .fetch()
-                            .then(() => {
-                                let msg = count === 1 ? 'massRemoveResultSingle' : 'massRemoveResult';
-
-                                Espo.Ui.success(this.translate(msg, 'messages').replace('{count}', count));
-                            });
-
-                        Espo.Ui.notify(false);
-                    };
-
-                    if (result.id) {
-                        helper
-                            .process(result.id, 'delete')
-                            .then(view => {
-                                this.listenToOnce(view, 'close:success', result => afterAllResult(result.count));
-                            });
-
-                        return;
-                    }
-
-                    let count = result.count;
-
-                    if (this.allResultIsChecked) {
-                        afterAllResult(count);
-
-                        return;
-                    }
-
-                    let idsRemoved = result.ids || [];
-
-                    if (!count) {
-                        Espo.Ui.warning(this.translate('noRecordsRemoved', 'messages'));
-
-                        return;
-                    }
-
-                    idsRemoved.forEach(id => {
-                        Espo.Ui.notify(false);
-
-                        this.collection.trigger('model-removing', id);
-                        this.removeRecordFromList(id);
-                        this.uncheckRecord(id, null, true);
+                        proceedDownload(response.id);
                     });
-
-                    if (this.$selectAllCheckbox.prop('checked')) {
-                        this.$selectAllCheckbox.prop('checked', false);
-
-                        if (this.collection.hasMore()) {
-                            this.showMoreRecords({skipNotify: true});
-                        }
-                    }
-
-                    let msg = count === 1 ? 'massRemoveResultSingle' : 'massRemoveResult';
-
-                    Espo.Ui.success(this.translate(msg, 'messages').replace('{count}', count));
-                });
             });
-        },
+        });
+    },
 
-        massActionPrintPdf: function () {
-            let maxCount = this.getConfig().get('massPrintPdfMaxCount');
+    /**
+     * Process a mass-action.
+     *
+     * @param {string} name An action.
+     */
+    massAction: function (name) {
+        let defs = this.massActionDefs[name] || {};
 
-            if (maxCount) {
-                if (this.checkedList.length > maxCount) {
-                    let msg = this.translate('massPrintPdfMaxCountError', 'messages')
-                        .replace('{maxCount}', maxCount.toString());
+        let handler = defs.handler;
 
-                    Espo.Ui.error(msg);
+        if (handler) {
+            let method = 'action' + Espo.Utils.upperCaseFirst(name);
+
+            let data = {
+                entityType: this.entityType,
+                action: name,
+                params: this.getMassActionSelectionPostData(),
+            };
+
+            Espo.loader.require(handler, Handler => {
+                let handler = new Handler(this);
+
+                handler[method].call(handler, data);
+            });
+
+            return;
+        }
+
+        let bypassConfirmation = defs.bypassConfirmation || false;
+        let confirmationMsg = defs.confirmationMessage || 'confirmation';
+        let acl = defs.acl;
+        let aclScope = defs.aclScope;
+
+        let proceed = () => {
+            if (acl || aclScope) {
+                if (!this.getAcl().check(aclScope || this.scope, acl)) {
+                    this.notify('Access denied', 'error');
 
                     return;
                 }
             }
 
             let idList = [];
+            let data = {};
+
+            if (this.allResultIsChecked) {
+                data.where = this.collection.getWhere();
+                data.searchParams =  this.collection.data || {};
+                data.selectData = data.searchData; // for bc;
+                data.byWhere = true; // for bc
+            }
+            else {
+                data.idList = idList; // for bc
+                data.ids = idList;
+            }
 
             for (let i in this.checkedList) {
                 idList.push(this.checkedList[i]);
             }
 
-            this.createView('pdfTemplate', 'views/modals/select-template', {
-                entityType: this.entityType,
-            }, view => {
-                view.render();
+            data.entityType = this.entityType;
 
-                this.listenToOnce(view, 'select', (templateModel) => {
-                    this.clearView('pdfTemplate');
+            let waitMessage = defs.waitMessage || 'pleaseWait';
 
-                    Espo.Ui.notify(' ... ');
+            Espo.Ui.notify(this.translate(waitMessage, 'messages', this.scope));
 
-                    Espo.Ajax.postRequest(
-                        'Pdf/action/massPrint',
-                        {
-                            idList: idList,
-                            entityType: this.entityType,
-                            templateId: templateModel.id,
-                        },
-                        {timeout: 0}
-                    ).then(result => {
-                        Espo.Ui.notify(false);
+            let url = defs.url;
 
-                        window.open('?entryPoint=download&id=' + result.id, '_blank');
-                    });
+            Espo.Ajax.postRequest(url, data)
+                .then(result=> {
+                    let successMessage = result.successMessage || defs.successMessage || 'done';
+
+                    this.collection
+                        .fetch()
+                        .then(() => {
+                            let message = this.translate(successMessage, 'messages', this.scope);
+
+                            if ('count' in result) {
+                                message = message.replace('{count}', result.count);
+                            }
+
+                            Espo.Ui.success(message);
+                        });
                 });
-            });
-        },
+        };
 
-        massActionFollow: function () {
-            let count = this.checkedList.length;
+        if (!bypassConfirmation) {
+            this.confirm(this.translate(confirmationMsg, 'messages', this.scope), proceed, this);
+        }
+        else {
+            proceed.call(this);
+        }
+    },
 
-            let confirmMsg = this.translate('confirmMassFollow', 'messages')
-                .replace('{count}', count.toString());
+    getMassActionSelectionPostData: function () {
+        let data = {};
 
-            this.confirm({
-                message: confirmMsg,
-                confirmText: this.translate('Follow'),
-            }, () => {
-                Espo.Ui.notify(this.translate('pleaseWait', 'messages'));
+        if (this.allResultIsChecked) {
+            data.where = this.collection.getWhere();
+            data.searchParams = this.collection.data || {};
+            data.selectData = this.collection.data || {}; // for bc;
+            data.byWhere = true; // for bc;
+        }
+        else {
+            data.ids = [];
 
-                Espo.Ajax
-                    .postRequest('MassAction', {
-                        action: 'follow',
-                        entityType: this.entityType,
-                        params: this.getMassActionSelectionPostData(),
-                    })
-                    .then(result => {
-                        let resultCount = result.count || 0;
+            for (let i in this.checkedList) {
+                data.ids.push(this.checkedList[i]);
+            }
+        }
 
-                        let msg = 'massFollowResult';
+        return data;
+    },
 
-                        if (resultCount) {
-                            if (resultCount === 1) {
-                                msg += 'Single';
-                            }
+    massActionRecalculateFormula: function () {
+        let ids = false;
 
-                            Espo.Ui.success(
-                                this.translate(msg, 'messages').replace('{count}', resultCount)
-                            );
+        let allResultIsChecked = this.allResultIsChecked;
 
-                            return;
-                        }
+        if (!allResultIsChecked) {
+            ids = this.checkedList;
+        }
 
-                        Espo.Ui.warning(
-                            this.translate('massFollowZeroResult', 'messages')
-                        );
-                    });
-            });
-        },
+        this.confirm({
+            message: this.translate('recalculateFormulaConfirmation', 'messages'),
+            confirmText: this.translate('Yes'),
+        }, () => {
+            Espo.Ui.notify(this.translate('pleaseWait', 'messages'));
 
-        massActionUnfollow: function () {
-            let count = this.checkedList.length;
+            let params = this.getMassActionSelectionPostData();
+            let helper = new MassActionHelper(this);
+            let idle = !!params.searchParams && helper.checkIsIdle(this.collection.total);
 
-            let confirmMsg = this.translate('confirmMassUnfollow', 'messages')
-                .replace('{count}', count.toString());
+            Espo.Ajax.postRequest('MassAction', {
+                entityType: this.entityType,
+                action: 'recalculateFormula',
+                params: params,
+                idle: idle,
+            })
+                .then((result) => {
+                    result = result || {};
 
-            this.confirm({
-                message: confirmMsg,
-                confirmText: this.translate('Unfollow'),
-            }, () => {
-                Espo.Ui.notify(this.translate('pleaseWait', 'messages'));
+                    let final = () => {
+                        this.collection
+                            .fetch()
+                            .then(() => {
+                                Espo.Ui.success(this.translate('Done'));
 
-                let params = this.getMassActionSelectionPostData();
-                let helper = new MassActionHelper(this);
-                let idle = !!params.searchParams && helper.checkIsIdle(this.collection.total);
+                                if (allResultIsChecked) {
+                                    this.selectAllResult();
 
-                Espo.Ajax
-                    .postRequest('MassAction', {
-                        action: 'unfollow',
-                        entityType: this.entityType,
-                        params: params,
-                        idle: idle,
-                    })
-                    .then(result => {
-                        let final = (count) => {
-                            let msg = 'massUnfollowResult';
+                                    return;
+                                }
 
-                            if (!count) {
-                                Espo.Ui.warning(
-                                    this.translate('massUnfollowZeroResult', 'messages')
-                                );
-                            }
-
-                            if (count === 1) {
-                                msg += 'Single';
-                            }
-
-                            Espo.Ui.success(
-                                this.translate(msg, 'messages').replace('{count}', count)
-                            );
-                        };
-
-                        if (result.id) {
-                            helper
-                                .process(result.id, 'unfollow')
-                                .then(view => {
-                                    this.listenToOnce(view, 'close:success', result => final(result.count));
+                                ids.forEach((id) => {
+                                    this.checkRecord(id);
                                 });
+                            });
+                    };
 
-                            return;
-                        }
+                    if (result.id) {
+                        helper
+                            .process(result.id, 'recalculateFormula')
+                            .then(view => {
+                                this.listenToOnce(view, 'close:success', () => final());
+                            });
 
-                        final(result.count || 0);
-                    });
-            });
-        },
+                        return;
+                    }
 
-        massActionMerge: function () {
-            if (!this.getAcl().check(this.entityType, 'edit')) {
-                this.notify('Access denied', 'error');
+                    final();
+                });
+        });
+    },
 
-                return false;
-            }
+    massActionRemove: function () {
+        if (!this.getAcl().check(this.entityType, 'delete')) {
+            Espo.Ui.error(this.translate('Access denied'));
 
-            if (this.checkedList.length < 2) {
-                this.notify('Select 2 or more records', 'error');
-
-                return;
-            }
-            if (this.checkedList.length > 4) {
-                this.notify('Select not more than 4 records', 'error');
-
-                return;
-            }
-
-            this.checkedList.sort();
-
-            let url = '#' + this.entityType + '/merge/ids=' + this.checkedList.join(',');
-
-            this.getRouter().navigate(url, {trigger: false});
-
-            this.getRouter().dispatch(this.entityType, 'merge', {
-                ids: this.checkedList.join(','),
-                collection: this.collection,
-            });
-        },
-
-        massActionMassUpdate: function () {
-            if (!this.getAcl().check(this.entityType, 'edit')) {
-                this.notify('Access denied', 'error');
-
-                return false;
-            }
+            return false;
+        }
 
+        this.confirm({
+            message: this.translate('removeSelectedRecordsConfirmation', 'messages', this.scope),
+            confirmText: this.translate('Remove'),
+        }, () => {
             Espo.Ui.notify(' ... ');
 
-            let ids = false;
+            let helper = new MassActionHelper(this);
+            let params = this.getMassActionSelectionPostData();
+            let idle = !!params.searchParams && helper.checkIsIdle(this.collection.total);
 
-            let allResultIsChecked = this.allResultIsChecked;
-
-            if (!allResultIsChecked) {
-                ids = this.checkedList;
-            }
-
-            let viewName = this.getMetadata()
-                .get(['clientDefs', this.entityType, 'modalViews', 'massUpdate']) ||
-                'views/modals/mass-update';
-
-            this.createView('massUpdate', viewName, {
-                scope: this.scope,
+            Espo.Ajax.postRequest('MassAction', {
                 entityType: this.entityType,
-                ids: ids,
-                where: this.collection.getWhere(),
-                searchParams: this.collection.data,
-                byWhere: this.allResultIsChecked,
-                totalCount: this.collection.total,
-            }, (view) => {
-                view.render();
+                action: 'delete',
+                params: params,
+                idle: idle,
+            })
+            .then(result => {
+                result = result || {};
 
-                view.notify(false);
-
-                this.listenToOnce(view, 'after:update', (o) => {
-                    if (o.idle) {
-                        this.listenToOnce(view, 'close', () => {
-                            this.collection
-                                .fetch()
-                                .then(() => {
-                                    if (allResultIsChecked) {
-                                        this.selectAllResult();
-
-                                        return;
-                                    }
-
-                                    ids.forEach((id) => {
-                                        this.checkRecord(id);
-                                    });
-                                });
-                        });
+                let afterAllResult = count => {
+                    if (!count) {
+                        Espo.Ui.warning(this.translate('noRecordsRemoved', 'messages'));
 
                         return;
                     }
 
-                    view.close();
-
-                    let count = o.count;
+                    this.unselectAllResult();
 
                     this.collection
                         .fetch()
                         .then(() => {
-                            if (count) {
-                                let msg = 'massUpdateResult';
+                            let msg = count === 1 ? 'massRemoveResultSingle' : 'massRemoveResult';
 
-                                if (count === 1) {
-                                    msg = 'massUpdateResultSingle';
-                                }
-
-                                Espo.Ui.success(this.translate(msg, 'messages').replace('{count}', count));
-                            }
-                            else {
-                                Espo.Ui.warning(this.translate('noRecordsUpdated', 'messages'));
-                            }
-
-                            if (allResultIsChecked) {
-                                this.selectAllResult();
-
-                                return;
-                            }
-
-                            ids.forEach(id => {
-                                this.checkRecord(id);
-                            });
+                            Espo.Ui.success(this.translate(msg, 'messages').replace('{count}', count));
                         });
+
+                    Espo.Ui.notify(false);
+                };
+
+                if (result.id) {
+                    helper
+                        .process(result.id, 'delete')
+                        .then(view => {
+                            this.listenToOnce(view, 'close:success', result => afterAllResult(result.count));
+                        });
+
+                    return;
+                }
+
+                let count = result.count;
+
+                if (this.allResultIsChecked) {
+                    afterAllResult(count);
+
+                    return;
+                }
+
+                let idsRemoved = result.ids || [];
+
+                if (!count) {
+                    Espo.Ui.warning(this.translate('noRecordsRemoved', 'messages'));
+
+                    return;
+                }
+
+                idsRemoved.forEach(id => {
+                    Espo.Ui.notify(false);
+
+                    this.collection.trigger('model-removing', id);
+                    this.removeRecordFromList(id);
+                    this.uncheckRecord(id, null, true);
+                });
+
+                if (this.$selectAllCheckbox.prop('checked')) {
+                    this.$selectAllCheckbox.prop('checked', false);
+
+                    if (this.collection.hasMore()) {
+                        this.showMoreRecords({skipNotify: true});
+                    }
+                }
+
+                let msg = count === 1 ? 'massRemoveResultSingle' : 'massRemoveResult';
+
+                Espo.Ui.success(this.translate(msg, 'messages').replace('{count}', count));
+            });
+        });
+    },
+
+    massActionPrintPdf: function () {
+        let maxCount = this.getConfig().get('massPrintPdfMaxCount');
+
+        if (maxCount) {
+            if (this.checkedList.length > maxCount) {
+                let msg = this.translate('massPrintPdfMaxCountError', 'messages')
+                    .replace('{maxCount}', maxCount.toString());
+
+                Espo.Ui.error(msg);
+
+                return;
+            }
+        }
+
+        let idList = [];
+
+        for (let i in this.checkedList) {
+            idList.push(this.checkedList[i]);
+        }
+
+        this.createView('pdfTemplate', 'views/modals/select-template', {
+            entityType: this.entityType,
+        }, view => {
+            view.render();
+
+            this.listenToOnce(view, 'select', (templateModel) => {
+                this.clearView('pdfTemplate');
+
+                Espo.Ui.notify(' ... ');
+
+                Espo.Ajax.postRequest(
+                    'Pdf/action/massPrint',
+                    {
+                        idList: idList,
+                        entityType: this.entityType,
+                        templateId: templateModel.id,
+                    },
+                    {timeout: 0}
+                ).then(result => {
+                    Espo.Ui.notify(false);
+
+                    window.open('?entryPoint=download&id=' + result.id, '_blank');
                 });
             });
-        },
+        });
+    },
 
-        massActionExport: function () {
-            if (this.getConfig().get('exportDisabled') && !this.getUser().isAdmin()) {
+    massActionFollow: function () {
+        let count = this.checkedList.length;
+
+        let confirmMsg = this.translate('confirmMassFollow', 'messages')
+            .replace('{count}', count.toString());
+
+        this.confirm({
+            message: confirmMsg,
+            confirmText: this.translate('Follow'),
+        }, () => {
+            Espo.Ui.notify(this.translate('pleaseWait', 'messages'));
+
+            Espo.Ajax
+                .postRequest('MassAction', {
+                    action: 'follow',
+                    entityType: this.entityType,
+                    params: this.getMassActionSelectionPostData(),
+                })
+                .then(result => {
+                    let resultCount = result.count || 0;
+
+                    let msg = 'massFollowResult';
+
+                    if (resultCount) {
+                        if (resultCount === 1) {
+                            msg += 'Single';
+                        }
+
+                        Espo.Ui.success(
+                            this.translate(msg, 'messages').replace('{count}', resultCount)
+                        );
+
+                        return;
+                    }
+
+                    Espo.Ui.warning(
+                        this.translate('massFollowZeroResult', 'messages')
+                    );
+                });
+        });
+    },
+
+    massActionUnfollow: function () {
+        let count = this.checkedList.length;
+
+        let confirmMsg = this.translate('confirmMassUnfollow', 'messages')
+            .replace('{count}', count.toString());
+
+        this.confirm({
+            message: confirmMsg,
+            confirmText: this.translate('Unfollow'),
+        }, () => {
+            Espo.Ui.notify(this.translate('pleaseWait', 'messages'));
+
+            let params = this.getMassActionSelectionPostData();
+            let helper = new MassActionHelper(this);
+            let idle = !!params.searchParams && helper.checkIsIdle(this.collection.total);
+
+            Espo.Ajax
+                .postRequest('MassAction', {
+                    action: 'unfollow',
+                    entityType: this.entityType,
+                    params: params,
+                    idle: idle,
+                })
+                .then(result => {
+                    let final = (count) => {
+                        let msg = 'massUnfollowResult';
+
+                        if (!count) {
+                            Espo.Ui.warning(
+                                this.translate('massUnfollowZeroResult', 'messages')
+                            );
+                        }
+
+                        if (count === 1) {
+                            msg += 'Single';
+                        }
+
+                        Espo.Ui.success(
+                            this.translate(msg, 'messages').replace('{count}', count)
+                        );
+                    };
+
+                    if (result.id) {
+                        helper
+                            .process(result.id, 'unfollow')
+                            .then(view => {
+                                this.listenToOnce(view, 'close:success', result => final(result.count));
+                            });
+
+                        return;
+                    }
+
+                    final(result.count || 0);
+                });
+        });
+    },
+
+    massActionMerge: function () {
+        if (!this.getAcl().check(this.entityType, 'edit')) {
+            this.notify('Access denied', 'error');
+
+            return false;
+        }
+
+        if (this.checkedList.length < 2) {
+            this.notify('Select 2 or more records', 'error');
+
+            return;
+        }
+        if (this.checkedList.length > 4) {
+            this.notify('Select not more than 4 records', 'error');
+
+            return;
+        }
+
+        this.checkedList.sort();
+
+        let url = '#' + this.entityType + '/merge/ids=' + this.checkedList.join(',');
+
+        this.getRouter().navigate(url, {trigger: false});
+
+        this.getRouter().dispatch(this.entityType, 'merge', {
+            ids: this.checkedList.join(','),
+            collection: this.collection,
+        });
+    },
+
+    massActionMassUpdate: function () {
+        if (!this.getAcl().check(this.entityType, 'edit')) {
+            this.notify('Access denied', 'error');
+
+            return false;
+        }
+
+        Espo.Ui.notify(' ... ');
+
+        let ids = false;
+
+        let allResultIsChecked = this.allResultIsChecked;
+
+        if (!allResultIsChecked) {
+            ids = this.checkedList;
+        }
+
+        let viewName = this.getMetadata()
+            .get(['clientDefs', this.entityType, 'modalViews', 'massUpdate']) ||
+            'views/modals/mass-update';
+
+        this.createView('massUpdate', viewName, {
+            scope: this.scope,
+            entityType: this.entityType,
+            ids: ids,
+            where: this.collection.getWhere(),
+            searchParams: this.collection.data,
+            byWhere: this.allResultIsChecked,
+            totalCount: this.collection.total,
+        }, (view) => {
+            view.render();
+
+            view.notify(false);
+
+            this.listenToOnce(view, 'after:update', (o) => {
+                if (o.idle) {
+                    this.listenToOnce(view, 'close', () => {
+                        this.collection
+                            .fetch()
+                            .then(() => {
+                                if (allResultIsChecked) {
+                                    this.selectAllResult();
+
+                                    return;
+                                }
+
+                                ids.forEach((id) => {
+                                    this.checkRecord(id);
+                                });
+                            });
+                    });
+
+                    return;
+                }
+
+                view.close();
+
+                let count = o.count;
+
+                this.collection
+                    .fetch()
+                    .then(() => {
+                        if (count) {
+                            let msg = 'massUpdateResult';
+
+                            if (count === 1) {
+                                msg = 'massUpdateResultSingle';
+                            }
+
+                            Espo.Ui.success(this.translate(msg, 'messages').replace('{count}', count));
+                        }
+                        else {
+                            Espo.Ui.warning(this.translate('noRecordsUpdated', 'messages'));
+                        }
+
+                        if (allResultIsChecked) {
+                            this.selectAllResult();
+
+                            return;
+                        }
+
+                        ids.forEach(id => {
+                            this.checkRecord(id);
+                        });
+                    });
+            });
+        });
+    },
+
+    massActionExport: function () {
+        if (this.getConfig().get('exportDisabled') && !this.getUser().isAdmin()) {
+            return;
+        }
+
+        this.export();
+    },
+
+    massActionUnlink: function () {
+        this.confirm({
+            message: this.translate('unlinkSelectedRecordsConfirmation', 'messages'),
+            confirmText: this.translate('Unlink'),
+        }, () => {
+            Espo.Ui.notify(' ... ');
+
+            Espo.Ajax.deleteRequest(this.collection.url, {ids: this.checkedList})
+                .then(() => {
+                    this.notify('Unlinked', 'success');
+
+                    this.collection.fetch();
+
+                    this.model.trigger('after:unrelate');
+                });
+        });
+    },
+
+    massActionConvertCurrency: function () {
+        let ids = false;
+
+        let allResultIsChecked = this.allResultIsChecked;
+
+        if (!allResultIsChecked) {
+            ids = this.checkedList;
+        }
+
+        this.createView('modalConvertCurrency', 'views/modals/mass-convert-currency', {
+            entityType: this.entityType,
+            ids: ids,
+            where: this.collection.getWhere(),
+            searchParams: this.collection.data,
+            byWhere: this.allResultIsChecked,
+            totalCount: this.collection.total,
+        }, (view) => {
+            view.render();
+
+            this.listenToOnce(view, 'after:update', o => {
+                if (o.idle) {
+                    this.listenToOnce(view, 'close', () => {
+                        this.collection
+                            .fetch()
+                            .then(() => {
+                                if (allResultIsChecked) {
+                                    this.selectAllResult();
+
+                                    return;
+                                }
+
+                                ids.forEach((id) => {
+                                    this.checkRecord(id);
+                                });
+                            });
+                    });
+
+                    return;
+                }
+
+                let count = o.count;
+
+                this.collection
+                    .fetch()
+                    .then(() => {
+                        if (count) {
+                            let msg = 'massUpdateResult';
+
+                            if (count === 1) {
+                                msg = 'massUpdateResultSingle';
+                            }
+
+                            Espo.Ui.success(this.translate(msg, 'messages').replace('{count}', count));
+                        }
+                        else {
+                            Espo.Ui.warning(this.translate('noRecordsUpdated', 'messages'));
+                        }
+
+                        if (allResultIsChecked) {
+                            this.selectAllResult();
+
+                            return;
+                        }
+
+                        ids.forEach(id => {
+                            this.checkRecord(id);
+                        });
+                    });
+            });
+        });
+    },
+
+    /**
+     * Add a mass action.
+     *
+     * @protected
+     * @param {string} item An action.
+     * @param {boolean} [allResult] To make available for all-result.
+     * @param {boolean} [toBeginning] Add to the beginning of the list.
+     */
+    addMassAction: function (item, allResult, toBeginning) {
+        toBeginning ?
+            this.massActionList.unshift(item) :
+            this.massActionList.push(item);
+
+        if (allResult && this.collection.url === this.entityType) {
+            toBeginning ?
+                this.checkAllResultMassActionList.unshift(item) :
+                this.checkAllResultMassActionList.push(item);
+        }
+
+        if (!this.checkboxesDisabled) {
+            this.checkboxes = true;
+        }
+    },
+
+    /**
+     * Remove a mass action.
+     *
+     * @protected
+     * @param {string} item An action.
+     */
+    removeMassAction: function (item) {
+        let index = this.massActionList.indexOf(item);
+
+        if (~index) {
+            this.massActionList.splice(index, 1);
+        }
+
+        index = this.checkAllResultMassActionList.indexOf(item);
+
+        if (~index) {
+            this.checkAllResultMassActionList.splice(index, 1);
+        }
+    },
+
+    /**
+     * Remove an all-result mass action.
+     *
+     * @protected
+     * @param {string} item An action.
+     */
+    removeAllResultMassAction: function (item) {
+        let index = this.checkAllResultMassActionList.indexOf(item);
+
+        if (~index) {
+            this.checkAllResultMassActionList.splice(index, 1);
+        }
+    },
+
+    /**
+     * @inheritDoc
+     */
+    setup: function () {
+        if (typeof this.collection === 'undefined') {
+            throw new Error('Collection has not been injected into views/record/list view.');
+        }
+
+        this.layoutLoadCallbackList = [];
+
+        this.entityType = this.collection.name || null;
+        this.scope = this.options.scope || this.entityType;
+
+        this.massActionList = Espo.Utils.clone(this.massActionList);
+        this.checkAllResultMassActionList = Espo.Utils.clone(this.checkAllResultMassActionList);
+        this.buttonList = Espo.Utils.clone(this.buttonList);
+
+        this.mandatorySelectAttributeList = Espo.Utils.clone(
+            this.options.mandatorySelectAttributeList || this.mandatorySelectAttributeList || []
+        );
+
+        this.editDisabled = this.options.editDisabled || this.editDisabled ||
+            this.getMetadata().get(['clientDefs', this.scope, 'editDisabled']);
+
+        this.removeDisabled = this.options.removeDisabled || this.removeDisabled ||
+            this.getMetadata().get(['clientDefs', this.scope, 'removeDisabled']);
+
+        this.setupMassActions();
+
+        if (this.selectable) {
+            this.events['click .list a.link'] = (e) => {
+                e.preventDefault();
+
+                let id = $(e.target).attr('data-id');
+
+                if (id) {
+                    let model = this.collection.get(id);
+
+                    if (this.checkboxes) {
+                        let list = [];
+
+                        list.push(model);
+
+                        this.trigger('select', list);
+                    }
+                    else {
+                        this.trigger('select', model);
+                    }
+                }
+
+                e.stopPropagation();
+            };
+        }
+
+        if ('showCount' in this.options) {
+            this.showCount = this.options.showCount;
+        }
+
+        this.displayTotalCount = this.showCount && this.getConfig().get('displayListViewRecordCount');
+
+        if ('displayTotalCount' in this.options) {
+            this.displayTotalCount = this.options.displayTotalCount;
+        }
+
+        this.forceDisplayTopBar = this.options.forceDisplayTopBar || this.forceDisplayTopBar;
+
+        if (!this.massActionList.length && !this.selectable) {
+            this.checkboxes = false;
+        }
+
+        if (
+            this.getUser().isPortal() &&
+            !this.portalLayoutDisabled &&
+            this.getMetadata().get(['clientDefs', this.scope, 'additionalLayouts', this.layoutName + 'Portal'])
+        ) {
+            this.layoutName += 'Portal';
+        }
+
+        this.getHelper().processSetupHandlers(this, this.setupHandlerType);
+
+        this.listenTo(this.collection, 'sync', (c, r, options) => {
+            if (this.hasView('modal') && this.getView('modal').isRendered()) {
                 return;
             }
 
-            this.export();
-        },
+            options = options || {};
 
-        massActionUnlink: function () {
-            this.confirm({
-                message: this.translate('unlinkSelectedRecordsConfirmation', 'messages'),
-                confirmText: this.translate('Unlink'),
-            }, () => {
-                Espo.Ui.notify(' ... ');
-
-                Espo.Ajax.deleteRequest(this.collection.url, {ids: this.checkedList})
-                    .then(() => {
-                        this.notify('Unlinked', 'success');
-
-                        this.collection.fetch();
-
-                        this.model.trigger('after:unrelate');
-                    });
-            });
-        },
-
-        massActionConvertCurrency: function () {
-            let ids = false;
-
-            let allResultIsChecked = this.allResultIsChecked;
-
-            if (!allResultIsChecked) {
-                ids = this.checkedList;
-            }
-
-            this.createView('modalConvertCurrency', 'views/modals/mass-convert-currency', {
-                entityType: this.entityType,
-                ids: ids,
-                where: this.collection.getWhere(),
-                searchParams: this.collection.data,
-                byWhere: this.allResultIsChecked,
-                totalCount: this.collection.total,
-            }, (view) => {
-                view.render();
-
-                this.listenToOnce(view, 'after:update', o => {
-                    if (o.idle) {
-                        this.listenToOnce(view, 'close', () => {
-                            this.collection
-                                .fetch()
-                                .then(() => {
-                                    if (allResultIsChecked) {
-                                        this.selectAllResult();
-
-                                        return;
-                                    }
-
-                                    ids.forEach((id) => {
-                                        this.checkRecord(id);
-                                    });
-                                });
-                        });
-
-                        return;
-                    }
-
-                    let count = o.count;
-
-                    this.collection
-                        .fetch()
-                        .then(() => {
-                            if (count) {
-                                let msg = 'massUpdateResult';
-
-                                if (count === 1) {
-                                    msg = 'massUpdateResultSingle';
-                                }
-
-                                Espo.Ui.success(this.translate(msg, 'messages').replace('{count}', count));
-                            }
-                            else {
-                                Espo.Ui.warning(this.translate('noRecordsUpdated', 'messages'));
-                            }
-
-                            if (allResultIsChecked) {
-                                this.selectAllResult();
-
-                                return;
-                            }
-
-                            ids.forEach(id => {
-                                this.checkRecord(id);
-                            });
-                        });
+            if (options.previousDataList) {
+                let currentDataList = this.collection.models.map(model => {
+                    return Espo.Utils.cloneDeep(model.attributes);
                 });
-            });
-        },
 
-        /**
-         * Add a mass action.
-         *
-         * @protected
-         * @param {string} item An action.
-         * @param {boolean} [allResult] To make available for all-result.
-         * @param {boolean} [toBeginning] Add to the beginning of the list.
-         */
-        addMassAction: function (item, allResult, toBeginning) {
-            toBeginning ?
-                this.massActionList.unshift(item) :
-                this.massActionList.push(item);
-
-            if (allResult && this.collection.url === this.entityType) {
-                toBeginning ?
-                    this.checkAllResultMassActionList.unshift(item) :
-                    this.checkAllResultMassActionList.push(item);
-            }
-
-            if (!this.checkboxesDisabled) {
-                this.checkboxes = true;
-            }
-        },
-
-        /**
-         * Remove a mass action.
-         *
-         * @protected
-         * @param {string} item An action.
-         */
-        removeMassAction: function (item) {
-            let index = this.massActionList.indexOf(item);
-
-            if (~index) {
-                this.massActionList.splice(index, 1);
-            }
-
-            index = this.checkAllResultMassActionList.indexOf(item);
-
-            if (~index) {
-                this.checkAllResultMassActionList.splice(index, 1);
-            }
-        },
-
-        /**
-         * Remove an all-result mass action.
-         *
-         * @protected
-         * @param {string} item An action.
-         */
-        removeAllResultMassAction: function (item) {
-            let index = this.checkAllResultMassActionList.indexOf(item);
-
-            if (~index) {
-                this.checkAllResultMassActionList.splice(index, 1);
-            }
-        },
-
-        /**
-         * @inheritDoc
-         */
-        setup: function () {
-            if (typeof this.collection === 'undefined') {
-                throw new Error('Collection has not been injected into views/record/list view.');
-            }
-
-            this.layoutLoadCallbackList = [];
-
-            this.entityType = this.collection.name || null;
-            this.scope = this.options.scope || this.entityType;
-
-            this.massActionList = Espo.Utils.clone(this.massActionList);
-            this.checkAllResultMassActionList = Espo.Utils.clone(this.checkAllResultMassActionList);
-            this.buttonList = Espo.Utils.clone(this.buttonList);
-
-            this.mandatorySelectAttributeList = Espo.Utils.clone(
-                this.options.mandatorySelectAttributeList || this.mandatorySelectAttributeList || []
-            );
-
-            this.editDisabled = this.options.editDisabled || this.editDisabled ||
-                this.getMetadata().get(['clientDefs', this.scope, 'editDisabled']);
-
-            this.removeDisabled = this.options.removeDisabled || this.removeDisabled ||
-                this.getMetadata().get(['clientDefs', this.scope, 'removeDisabled']);
-
-            this.setupMassActions();
-
-            if (this.selectable) {
-                this.events['click .list a.link'] = (e) => {
-                    e.preventDefault();
-
-                    let id = $(e.target).attr('data-id');
-
-                    if (id) {
-                        let model = this.collection.get(id);
-
-                        if (this.checkboxes) {
-                            let list = [];
-
-                            list.push(model);
-
-                            this.trigger('select', list);
-                        }
-                        else {
-                            this.trigger('select', model);
-                        }
-                    }
-
-                    e.stopPropagation();
-                };
-            }
-
-            if ('showCount' in this.options) {
-                this.showCount = this.options.showCount;
-            }
-
-            this.displayTotalCount = this.showCount && this.getConfig().get('displayListViewRecordCount');
-
-            if ('displayTotalCount' in this.options) {
-                this.displayTotalCount = this.options.displayTotalCount;
-            }
-
-            this.forceDisplayTopBar = this.options.forceDisplayTopBar || this.forceDisplayTopBar;
-
-            if (!this.massActionList.length && !this.selectable) {
-                this.checkboxes = false;
-            }
-
-            if (
-                this.getUser().isPortal() &&
-                !this.portalLayoutDisabled &&
-                this.getMetadata().get(['clientDefs', this.scope, 'additionalLayouts', this.layoutName + 'Portal'])
-            ) {
-                this.layoutName += 'Portal';
-            }
-
-            this.getHelper().processSetupHandlers(this, this.setupHandlerType);
-
-            this.listenTo(this.collection, 'sync', (c, r, options) => {
-                if (this.hasView('modal') && this.getView('modal').isRendered()) {
+                if (_.isEqual(currentDataList, options.previousDataList)) {
                     return;
                 }
+            }
 
-                options = options || {};
+            if (this.noRebuild) {
+                this.noRebuild = null;
 
-                if (options.previousDataList) {
-                    let currentDataList = this.collection.models.map(model => {
-                        return Espo.Utils.cloneDeep(model.attributes);
-                    });
+                return;
+            }
 
-                    if (_.isEqual(currentDataList, options.previousDataList)) {
-                        return;
-                    }
-                }
+            if (options.noRebuild) {
+                this.noRebuild = null;
 
-                if (this.noRebuild) {
-                    this.noRebuild = null;
-
-                    return;
-                }
-
-                if (options.noRebuild) {
-                    this.noRebuild = null;
-
-                    return;
-                }
-
-                this.checkedList = [];
-
-                this.allResultIsChecked = false;
-
-                this.buildRows(() => {
-                    this.render();
-                });
-            });
+                return;
+            }
 
             this.checkedList = [];
 
-            if (!this.options.skipBuildRows) {
-                this.buildRows();
-            }
-        },
+            this.allResultIsChecked = false;
 
-        afterRender: function () {
-            this.$selectAllCheckbox = this.$el.find('input.select-all');
+            this.buildRows(() => {
+                this.render();
+            });
+        });
 
-            if (this.allResultIsChecked) {
-                this.selectAllResult();
-            }
-            else if (this.checkedList.length) {
-                this.checkedList.forEach(id => {
-                    this.checkRecord(id);
-                });
-            }
-        },
+        this.checkedList = [];
 
-        /**
-         * @private
-         */
-        setupMassActions: function () {
-            if (this.massActionsDisabled) {
-                this.massActionList = [];
-                this.checkAllResultMassActionList = [];
+        if (!this.options.skipBuildRows) {
+            this.buildRows();
+        }
+    },
 
+    afterRender: function () {
+        this.$selectAllCheckbox = this.$el.find('input.select-all');
+
+        if (this.allResultIsChecked) {
+            this.selectAllResult();
+        }
+        else if (this.checkedList.length) {
+            this.checkedList.forEach(id => {
+                this.checkRecord(id);
+            });
+        }
+    },
+
+    /**
+     * @private
+     */
+    setupMassActions: function () {
+        if (this.massActionsDisabled) {
+            this.massActionList = [];
+            this.checkAllResultMassActionList = [];
+
+            return;
+        }
+
+        if (!this.getAcl().checkScope(this.entityType, 'delete')) {
+            this.removeMassAction('remove');
+            this.removeMassAction('merge');
+        }
+
+        if (
+            this.removeDisabled ||
+            this.getMetadata().get(['clientDefs', this.scope, 'massRemoveDisabled'])
+        ) {
+            this.removeMassAction('remove');
+        }
+
+        if (!this.getAcl().checkScope(this.entityType, 'edit')) {
+            this.removeMassAction('massUpdate');
+            this.removeMassAction('merge');
+        }
+
+        if (
+            this.getMetadata().get(['clientDefs', this.scope, 'mergeDisabled']) ||
+            this.mergeDisabled
+        ) {
+            this.removeMassAction('merge');
+        }
+
+        this.massActionDefs = {
+            ...this.getMetadata().get(['clientDefs', 'Global', 'massActionDefs']) || {},
+            ...this.getMetadata().get(['clientDefs', this.scope, 'massActionDefs']) || {},
+        };
+
+        let metadataMassActionList = [
+            ...this.getMetadata().get(['clientDefs', 'Global', 'massActionList']) || [],
+            ...this.getMetadata().get(['clientDefs', this.scope, 'massActionList']) || [],
+        ];
+
+        let metadataCheckAllMassActionList = [
+            ...this.getMetadata().get(['clientDefs', 'Global', 'checkAllResultMassActionList']) || [],
+            ...this.getMetadata().get(['clientDefs', this.scope, 'checkAllResultMassActionList']) || [],
+        ];
+
+        metadataMassActionList.forEach(item => {
+            let defs = this.massActionDefs[item] || {};
+
+            if (
+                !Espo.Utils.checkActionAvailability(this.getHelper(), defs) ||
+                !Espo.Utils.checkActionAccess(this.getAcl(), null, defs)
+            ) {
                 return;
             }
 
-            if (!this.getAcl().checkScope(this.entityType, 'delete')) {
-                this.removeMassAction('remove');
-                this.removeMassAction('merge');
+            this.massActionList.push(item);
+        });
+
+        this.checkAllResultMassActionList = this.checkAllResultMassActionList
+            .filter(item => this.massActionList.includes(item));
+
+        metadataCheckAllMassActionList.forEach(item => {
+            if (this.collection.url !== this.entityType) {
+                return;
             }
 
-            if (
-                this.removeDisabled ||
-                this.getMetadata().get(['clientDefs', this.scope, 'massRemoveDisabled'])
-            ) {
-                this.removeMassAction('remove');
-            }
-
-            if (!this.getAcl().checkScope(this.entityType, 'edit')) {
-                this.removeMassAction('massUpdate');
-                this.removeMassAction('merge');
-            }
-
-            if (
-                this.getMetadata().get(['clientDefs', this.scope, 'mergeDisabled']) ||
-                this.mergeDisabled
-            ) {
-                this.removeMassAction('merge');
-            }
-
-            this.massActionDefs = {
-                ...this.getMetadata().get(['clientDefs', 'Global', 'massActionDefs']) || {},
-                ...this.getMetadata().get(['clientDefs', this.scope, 'massActionDefs']) || {},
-            };
-
-            let metadataMassActionList = [
-                ...this.getMetadata().get(['clientDefs', 'Global', 'massActionList']) || [],
-                ...this.getMetadata().get(['clientDefs', this.scope, 'massActionList']) || [],
-            ];
-
-            let metadataCheckAllMassActionList = [
-                ...this.getMetadata().get(['clientDefs', 'Global', 'checkAllResultMassActionList']) || [],
-                ...this.getMetadata().get(['clientDefs', this.scope, 'checkAllResultMassActionList']) || [],
-            ];
-
-            metadataMassActionList.forEach(item => {
+            if (~this.massActionList.indexOf(item)) {
                 let defs = this.massActionDefs[item] || {};
 
                 if (
@@ -2093,1023 +2116,960 @@ function (Dep, MassActionHelper, ExportHelper, RecordModal) {
                     return;
                 }
 
-                this.massActionList.push(item);
-            });
+                this.checkAllResultMassActionList.push(item);
+            }
+        });
 
-            this.checkAllResultMassActionList = this.checkAllResultMassActionList
-                .filter(item => this.massActionList.includes(item));
+        metadataMassActionList
+            .concat(metadataCheckAllMassActionList)
+            .forEach(action => {
+                let defs = this.massActionDefs[action] || {};
 
-            metadataCheckAllMassActionList.forEach(item => {
-                if (this.collection.url !== this.entityType) {
+                if (!defs.initFunction || !defs.handler) {
                     return;
                 }
 
-                if (~this.massActionList.indexOf(item)) {
-                    let defs = this.massActionDefs[item] || {};
+                let viewObject = this;
 
-                    if (
-                        !Espo.Utils.checkActionAvailability(this.getHelper(), defs) ||
-                        !Espo.Utils.checkActionAccess(this.getAcl(), null, defs)
-                    ) {
-                        return;
-                    }
+                this.wait(
+                    new Promise((resolve) => {
+                        Espo.loader.require(defs.handler, Handler => {
+                            let handler = new Handler(viewObject);
 
-                    this.checkAllResultMassActionList.push(item);
-                }
+                            handler[defs.initFunction].call(handler);
+
+                            resolve();
+                        });
+                    })
+                );
             });
 
-            metadataMassActionList
-                .concat(metadataCheckAllMassActionList)
-                .forEach(action => {
-                    let defs = this.massActionDefs[action] || {};
+        if (
+            this.getConfig().get('exportDisabled') && !this.getUser().isAdmin() ||
+            this.getAcl().getPermissionLevel('exportPermission') === 'no' ||
+            this.getMetadata().get(['clientDefs', this.scope, 'exportDisabled']) ||
+            this.exportDisabled
+        ) {
+            this.removeMassAction('export');
+        }
 
-                    if (!defs.initFunction || !defs.handler) {
-                        return;
-                    }
+        if (
+            this.getAcl().getPermissionLevel('massUpdatePermission') !== 'yes' ||
+            this.editDisabled ||
+            this.massUpdateDisabled ||
+            this.getMetadata().get(['clientDefs', this.scope, 'massUpdateDisabled'])
+        ) {
+            this.removeMassAction('massUpdate');
+        }
 
-                    let viewObject = this;
+        if (
+            !this.massFollowDisabled &&
+            this.getMetadata().get(['scopes', this.entityType, 'stream']) &&
+            this.getAcl().check(this.entityType, 'stream') ||
+            this.getMetadata().get(['clientDefs', this.scope, 'massFollowDisabled'])
+        ) {
+            this.addMassAction('follow');
+            this.addMassAction('unfollow', true);
+        }
 
-                    this.wait(
-                        new Promise((resolve) => {
-                            require(defs.handler, (Handler) => {
-                                let handler = new Handler(viewObject);
+        if (
+            !this.massPrintPdfDisabled &&
+            (this.getHelper().getAppParam('templateEntityTypeList') || []).includes(this.entityType)
+        ) {
+            this.addMassAction('printPdf');
+        }
 
-                                handler[defs.initFunction].call(handler);
+        if (this.options.unlinkMassAction && this.collection) {
+            this.addMassAction('unlink', false, true);
+        }
 
-                                resolve();
-                            });
-                        })
-                    );
-                });
-
-            if (
-                this.getConfig().get('exportDisabled') && !this.getUser().isAdmin() ||
-                this.getAcl().getPermissionLevel('exportPermission') === 'no' ||
-                this.getMetadata().get(['clientDefs', this.scope, 'exportDisabled']) ||
-                this.exportDisabled
-            ) {
-                this.removeMassAction('export');
-            }
-
-            if (
-                this.getAcl().getPermissionLevel('massUpdatePermission') !== 'yes' ||
-                this.editDisabled ||
-                this.massUpdateDisabled ||
-                this.getMetadata().get(['clientDefs', this.scope, 'massUpdateDisabled'])
-            ) {
-                this.removeMassAction('massUpdate');
-            }
-
-            if (
-                !this.massFollowDisabled &&
-                this.getMetadata().get(['scopes', this.entityType, 'stream']) &&
-                this.getAcl().check(this.entityType, 'stream') ||
-                this.getMetadata().get(['clientDefs', this.scope, 'massFollowDisabled'])
-            ) {
-                this.addMassAction('follow');
-                this.addMassAction('unfollow', true);
-            }
-
-            if (
-                !this.massPrintPdfDisabled &&
-                (this.getHelper().getAppParam('templateEntityTypeList') || []).includes(this.entityType)
-            ) {
-                this.addMassAction('printPdf');
-            }
-
-            if (this.options.unlinkMassAction && this.collection) {
-                this.addMassAction('unlink', false, true);
-            }
-
-            if (
-                !this.massConvertCurrencyDisabled &&
-                !this.getMetadata().get(['clientDefs', this.scope, 'convertCurrencyDisabled']) &&
-                this.getConfig().get('currencyList').length > 1 &&
-                this.getAcl().checkScope(this.scope, 'edit') &&
-                this.getAcl().getPermissionLevel('massUpdatePermission') === 'yes'
-            ) {
-                let currencyFieldList = this.getFieldManager().getEntityTypeFieldList(this.entityType, {
-                    type: 'currency',
-                    acl: 'edit',
-                });
-
-                if (currencyFieldList.length) {
-                    this.addMassAction('convertCurrency', true);
-                }
-            }
-
-            this.setupMassActionItems();
-
-            if (this.getUser().isAdmin()) {
-                if (this.getMetadata().get(['formula', this.entityType, 'beforeSaveCustomScript'])) {
-                    this.addMassAction('recalculateFormula', true);
-                }
-            }
-
-            if (this.collection.url !== this.entityType) {
-                Espo.Utils.clone(this.checkAllResultMassActionList).forEach((item) => {
-                    this.removeAllResultMassAction(item);
-                });
-            }
-
-            if (this.forcedCheckAllResultMassActionList) {
-                this.checkAllResultMassActionList = Espo.Utils.clone(this.forcedCheckAllResultMassActionList);
-            }
-
-            if (this.getAcl().getPermissionLevel('massUpdatePermission') !== 'yes') {
-                this.removeAllResultMassAction('remove');
-            }
-
-            Espo.Utils.clone(this.massActionList).forEach(item => {
-                let propName = 'massAction' + Espo.Utils.upperCaseFirst(item) + 'Disabled';
-
-                if (this[propName] || this.options[propName]) {
-                    this.removeMassAction(item);
-                }
+        if (
+            !this.massConvertCurrencyDisabled &&
+            !this.getMetadata().get(['clientDefs', this.scope, 'convertCurrencyDisabled']) &&
+            this.getConfig().get('currencyList').length > 1 &&
+            this.getAcl().checkScope(this.scope, 'edit') &&
+            this.getAcl().getPermissionLevel('massUpdatePermission') === 'yes'
+        ) {
+            let currencyFieldList = this.getFieldManager().getEntityTypeFieldList(this.entityType, {
+                type: 'currency',
+                acl: 'edit',
             });
-        },
 
-        /**
-         * @protected
-         */
-        setupMassActionItems: function () {},
-
-        /**
-         * @protected
-         */
-        filterListLayout: function (listLayout) {
-            if (this._cachedFilteredListLayout) {
-                return this._cachedFilteredListLayout;
+            if (currencyFieldList.length) {
+                this.addMassAction('convertCurrency', true);
             }
+        }
 
-            let forbiddenFieldList = this._cachedScopeForbiddenFieldList =
-                this._cachedScopeForbiddenFieldList ||
-                this.getAcl().getScopeForbiddenFieldList(this.entityType, 'read');
+        this.setupMassActionItems();
 
-            if (this.layoutAclDisabled) {
-                forbiddenFieldList = [];
+        if (this.getUser().isAdmin()) {
+            if (this.getMetadata().get(['formula', this.entityType, 'beforeSaveCustomScript'])) {
+                this.addMassAction('recalculateFormula', true);
             }
+        }
 
-            if (!forbiddenFieldList.length) {
-                this._cachedFilteredListLayout = listLayout;
+        if (this.collection.url !== this.entityType) {
+            Espo.Utils.clone(this.checkAllResultMassActionList).forEach((item) => {
+                this.removeAllResultMassAction(item);
+            });
+        }
 
-                return this._cachedFilteredListLayout;
+        if (this.forcedCheckAllResultMassActionList) {
+            this.checkAllResultMassActionList = Espo.Utils.clone(this.forcedCheckAllResultMassActionList);
+        }
+
+        if (this.getAcl().getPermissionLevel('massUpdatePermission') !== 'yes') {
+            this.removeAllResultMassAction('remove');
+        }
+
+        Espo.Utils.clone(this.massActionList).forEach(item => {
+            let propName = 'massAction' + Espo.Utils.upperCaseFirst(item) + 'Disabled';
+
+            if (this[propName] || this.options[propName]) {
+                this.removeMassAction(item);
             }
+        });
+    },
 
-            let filteredListLayout = Espo.Utils.clone(listLayout);
+    /**
+     * @protected
+     */
+    setupMassActionItems: function () {},
 
-            for (let i in listLayout) {
-                let name = listLayout[i].name;
+    /**
+     * @protected
+     */
+    filterListLayout: function (listLayout) {
+        if (this._cachedFilteredListLayout) {
+            return this._cachedFilteredListLayout;
+        }
 
-                if (name && ~forbiddenFieldList.indexOf(name)) {
-                    filteredListLayout[i].customLabel = '';
-                    filteredListLayout[i].notSortable = true;
-                }
-            }
+        let forbiddenFieldList = this._cachedScopeForbiddenFieldList =
+            this._cachedScopeForbiddenFieldList ||
+            this.getAcl().getScopeForbiddenFieldList(this.entityType, 'read');
 
-            this._cachedFilteredListLayout = filteredListLayout;
+        if (this.layoutAclDisabled) {
+            forbiddenFieldList = [];
+        }
+
+        if (!forbiddenFieldList.length) {
+            this._cachedFilteredListLayout = listLayout;
 
             return this._cachedFilteredListLayout;
-        },
+        }
 
-        /**
-         * @protected
-         * @param {function(Object[]):void} callback A callback.
-         * @private
-         */
-        _loadListLayout: function (callback) {
-            this.layoutLoadCallbackList.push(callback);
+        let filteredListLayout = Espo.Utils.clone(listLayout);
 
-            if (this.layoutIsBeingLoaded) {
+        for (let i in listLayout) {
+            let name = listLayout[i].name;
+
+            if (name && ~forbiddenFieldList.indexOf(name)) {
+                filteredListLayout[i].customLabel = '';
+                filteredListLayout[i].notSortable = true;
+            }
+        }
+
+        this._cachedFilteredListLayout = filteredListLayout;
+
+        return this._cachedFilteredListLayout;
+    },
+
+    /**
+     * @protected
+     * @param {function(Object[]):void} callback A callback.
+     * @private
+     */
+    _loadListLayout: function (callback) {
+        this.layoutLoadCallbackList.push(callback);
+
+        if (this.layoutIsBeingLoaded) {
+            return;
+        }
+
+        this.layoutIsBeingLoaded = true;
+
+        let layoutName = this.layoutName;
+        let layoutScope = this.layoutScope || this.collection.name;
+
+        this._helper.layoutManager.get(layoutScope, layoutName, (listLayout) => {
+            let filteredListLayout = this.filterListLayout(listLayout);
+
+            this.layoutLoadCallbackList.forEach((callbackItem) => {
+                callbackItem(filteredListLayout);
+
+                this.layoutLoadCallbackList = [];
+
+                this.layoutIsBeingLoaded = false;
+            });
+        });
+    },
+
+    /**
+     * Get a select-attribute list.
+     *
+     * @param {function(string[]):void} callback A callback.
+     */
+    getSelectAttributeList: function (callback) {
+        if (this.scope === null || this.rowHasOwnLayout) {
+            callback(null);
+
+            return;
+        }
+
+        if (this.listLayout) {
+            let attributeList = this.fetchAttributeListFromLayout();
+
+            callback(attributeList);
+
+            return;
+        }
+
+        this._loadListLayout(listLayout => {
+            this.listLayout = listLayout;
+
+            let attributeList = this.fetchAttributeListFromLayout();
+
+            if (this.mandatorySelectAttributeList) {
+                attributeList = attributeList.concat(this.mandatorySelectAttributeList);
+            }
+
+            callback(attributeList);
+        });
+    },
+
+    /**
+     * @protected
+     * @return {Object[]}
+     */
+    fetchAttributeListFromLayout: function () {
+        let list = [];
+
+        this.listLayout.forEach((item) => {
+            if (!item.name) {
                 return;
             }
 
-            this.layoutIsBeingLoaded = true;
+            let field = item.name;
 
-            let layoutName = this.layoutName;
-            let layoutScope = this.layoutScope || this.collection.name;
+            let fieldType = this.getMetadata().get(['entityDefs', this.entityType, 'fields', field, 'type']);
 
-            this._helper.layoutManager.get(layoutScope, layoutName, (listLayout) => {
-                let filteredListLayout = this.filterListLayout(listLayout);
+            if (!fieldType) {
+                return;
+            }
 
-                this.layoutLoadCallbackList.forEach((callbackItem) => {
-                    callbackItem(filteredListLayout);
-
-                    this.layoutLoadCallbackList = [];
-
-                    this.layoutIsBeingLoaded = false;
+            this.getFieldManager()
+                .getEntityTypeFieldAttributeList(this.entityType, field)
+                .forEach((attribute) => {
+                    list.push(attribute);
                 });
-            });
-        },
+        });
 
-        /**
-         * Get a select-attribute list.
-         *
-         * @param {function(string[]):void} callback A callback.
-         */
-        getSelectAttributeList: function (callback) {
-            if (this.scope === null || this.rowHasOwnLayout) {
+        return list;
+    },
+
+    /**
+     * @protected
+     */
+    _getHeaderDefs: function () {
+        let defs = [];
+
+        for (let i in this.listLayout) {
+            let width = false;
+
+            if ('width' in this.listLayout[i] && this.listLayout[i].width !== null) {
+                width = this.listLayout[i].width + '%';
+            }
+            else if ('widthPx' in this.listLayout[i]) {
+                width = this.listLayout[i].widthPx;
+            }
+
+            let itemName = this.listLayout[i].name;
+
+            let item = {
+                name: itemName,
+                isSortable: !(this.listLayout[i].notSortable || false),
+                width: width,
+                align: ('align' in this.listLayout[i]) ? this.listLayout[i].align : false,
+            };
+
+            if ('customLabel' in this.listLayout[i]) {
+                item.customLabel = this.listLayout[i].customLabel;
+                item.hasCustomLabel = true;
+                item.label = item.customLabel;
+            }
+            else {
+                item.label = this.translate(itemName, 'fields', this.collection.entityType);
+            }
+
+            if (this.listLayout[i].noLabel) {
+                item.label = null;
+            }
+
+            if (item.isSortable) {
+                item.isSorted = this.collection.orderBy === itemName;
+
+                if (item.isSorted) {
+                    item.isDesc = this.collection.order === 'desc' ;
+                }
+            }
+
+            defs.push(item);
+        }
+
+        let isCustomSorted =
+            this.collection.orderBy !== this.collection.defaultOrderBy ||
+            this.collection.order !== this.collection.defaultOrder;
+
+        if (this.rowActionsView && !this.rowActionsDisabled || isCustomSorted) {
+            let html = null;
+
+            if (isCustomSorted) {
+                html =
+                    $('<a>')
+                        .attr('role', 'button')
+                        .attr('tabindex', '0')
+                        .addClass('reset-custom-order')
+                        .attr('title', this.translate('Reset'))
+                        .append(
+                            $('<span>').addClass('fas fa-times fa-sm')
+                        )
+                        .get(0).outerHTML
+            }
+
+            defs.push({
+                width: this.rowActionsColumnWidth,
+                html: html,
+                className: 'action-cell',
+            });
+        }
+
+        return defs;
+    },
+
+    /**
+     * @protected
+     */
+    _convertLayout: function (listLayout, model) {
+        model = model || this.collection.model.prototype;
+
+        let layout = [];
+
+        if (this.checkboxes) {
+            layout.push({
+                name: 'r-checkboxField',
+                columnName: 'r-checkbox',
+                template: 'record/list-checkbox'
+            });
+        }
+
+        for (let i in listLayout) {
+            let col = listLayout[i];
+            let type = col.type || model.getFieldType(col.name) || 'base';
+
+            if (!col.name) {
+                continue;
+            }
+
+            let item = {
+                columnName: col.name,
+                name: col.name + 'Field',
+                view: col.view ||
+                    model.getFieldParam(col.name, 'view') ||
+                    this.getFieldManager().getViewName(type),
+                options: {
+                    defs: {
+                        name: col.name,
+                        params: col.params || {}
+                    },
+                    mode: 'list',
+                },
+            };
+
+            if (col.width) {
+                item.options.defs.width = col.width;
+            }
+
+            if (col.widthPx) {
+                item.options.defs.widthPx = col.widthPx;
+            }
+
+            if (col.link) {
+                item.options.mode = 'listLink';
+            }
+            if (col.align) {
+                item.options.defs.align = col.align;
+            }
+
+            if (col.options) {
+                for (let optionName in col.options) {
+                    if (typeof item.options[optionName] !== 'undefined') {
+                        continue;
+                    }
+
+                    item.options[optionName] = col.options[optionName];
+                }
+            }
+
+            layout.push(item);
+        }
+        if (this.rowActionsView && !this.rowActionsDisabled) {
+            layout.push(this.getRowActionsDefs());
+        }
+
+        return layout;
+    },
+
+    /**
+     * Select a record.
+     *
+     * @param {string} id An ID.
+     * @param {JQuery} [$target]
+     * @param {boolean} [isSilent] Do not trigger the `check` event.
+     */
+    checkRecord: function (id, $target, isSilent) {
+        if (!this.collection.get(id)) {
+            return;
+        }
+
+        $target = $target || this.$el.find('.record-checkbox[data-id="' + id + '"]');
+
+        if ($target.length) {
+            $target.get(0).checked = true;
+            $target.closest('tr').addClass('active');
+        }
+
+        let index = this.checkedList.indexOf(id);
+
+        if (index === -1) {
+            this.checkedList.push(id);
+        }
+
+        this.handleAfterCheck(isSilent);
+    },
+
+    /**
+     * Unselect a record.
+     *
+     * @param {string} id An ID.
+     * @param {JQuery} [$target]
+     * @param {boolean} [isSilent] Do not trigger the `check` event.
+     */
+    uncheckRecord: function (id, $target, isSilent) {
+        $target = $target || this.$el.find('.record-checkbox[data-id="' + id + '"]');
+
+        if ($target.get(0)) {
+            $target.get(0).checked = false;
+            $target.closest('tr').removeClass('active');
+        }
+
+        let index = this.checkedList.indexOf(id);
+
+        if (index !== -1) {
+            this.checkedList.splice(index, 1);
+        }
+
+        this.handleAfterCheck(isSilent);
+    },
+
+    /**
+     * @protected
+     * @param {boolean} [isSilent]
+     */
+    handleAfterCheck: function (isSilent) {
+        if (this.checkedList.length) {
+            this.showActions();
+        }
+        else {
+            this.hideActions();
+        }
+
+        if (this.checkedList.length === this.collection.models.length) {
+            this.$el.find('.select-all').prop('checked', true);
+        }
+        else {
+            this.$el.find('.select-all').prop('checked', false);
+        }
+
+        if (!isSilent) {
+            this.trigger('check');
+        }
+    },
+
+    /**
+     * Get row-actions defs.
+     *
+     * @return {Object}
+     */
+    getRowActionsDefs: function () {
+        let options = {
+            defs: {
+                params: {}
+            },
+        };
+
+        if (this.options.rowActionsOptions) {
+            for (let item in this.options.rowActionsOptions) {
+                options[item] = this.options.rowActionsOptions[item];
+            }
+        }
+
+        return {
+            columnName: 'buttons',
+            name: 'buttonsField',
+            view: this.rowActionsView,
+            options: options
+        };
+    },
+
+    /**
+     * Get selected models.
+     *
+     * @return {module:model[]}
+     */
+    getSelected: function () {
+        let list = [];
+
+        this.$el.find('input.record-checkbox:checked').each((i, el) => {
+            let id = $(el).attr('data-id');
+            let model = this.collection.get(id);
+
+            list.push(model);
+        });
+
+        return list;
+    },
+
+    /**
+     * @protected
+     */
+    getInternalLayoutForModel: function (callback, model) {
+        let scope = model.name;
+
+        if (this._internalLayout === null) {
+            this._internalLayout = {};
+        }
+
+        if (!(scope in this._internalLayout)) {
+            this._internalLayout[scope] = this._convertLayout(this.listLayout[scope], model);
+        }
+
+        callback(this._internalLayout[scope]);
+    },
+
+    /**
+     * @protected
+     */
+    getInternalLayout: function (callback, model) {
+        if (
+            (this.scope === null || this.rowHasOwnLayout) &&
+            !Array.isArray(this.listLayout)
+        ) {
+            if (!model) {
                 callback(null);
 
                 return;
             }
 
-            if (this.listLayout) {
-                let attributeList = this.fetchAttributeListFromLayout();
+            this.getInternalLayoutForModel(callback, model);
 
-                callback(attributeList);
+            return;
+        }
 
-                return;
-            }
+        if (this._internalLayout !== null) {
+            callback(this._internalLayout);
 
-            this._loadListLayout(listLayout => {
-                this.listLayout = listLayout;
+            return;
+        }
 
-                let attributeList = this.fetchAttributeListFromLayout();
+        if (this.listLayout !== null) {
+            this._internalLayout = this._convertLayout(this.listLayout);
 
-                if (this.mandatorySelectAttributeList) {
-                    attributeList = attributeList.concat(this.mandatorySelectAttributeList);
-                }
+            callback(this._internalLayout);
 
-                callback(attributeList);
-            });
-        },
+            return;
+        }
 
-        /**
-         * @protected
-         * @return {Object[]}
-         */
-        fetchAttributeListFromLayout: function () {
-            let list = [];
+        this._loadListLayout(listLayout => {
+            this.listLayout = listLayout;
+            this._internalLayout = this._convertLayout(listLayout);
 
-            this.listLayout.forEach((item) => {
-                if (!item.name) {
-                    return;
-                }
+            callback(this._internalLayout);
+        });
+    },
 
-                let field = item.name;
+    /**
+     * Compose a cell selector for a layout item.
+     *
+     * @param {module:model} model A model.
+     * @param {Object} item An item.
+     * @return {string}
+     */
+    getItemEl: function (model, item) {
+        return this.options.el + ' tr[data-id="' + model.id + '"] ' +
+            'td.cell[data-name="' + item.columnName + '"]';
+    },
 
-                let fieldType = this.getMetadata().get(['entityDefs', this.entityType, 'fields', field, 'type']);
+    prepareInternalLayout: function (internalLayout, model) {
+        internalLayout.forEach((item) => {
+            item.el = this.getItemEl(model, item);
+        });
+    },
 
-                if (!fieldType) {
-                    return;
-                }
+    /**
+     * Build a row.
+     *
+     * @param {number} i An index.
+     * @param {module:model} model A model.
+     * @param {function(module:view):void} [callback] A callback.
+     */
+    buildRow: function (i, model, callback) {
+        let key = model.id;
 
-                this.getFieldManager()
-                    .getEntityTypeFieldAttributeList(this.entityType, field)
-                    .forEach((attribute) => {
-                        list.push(attribute);
-                    });
-            });
+        this.rowList.push(key);
 
-            return list;
-        },
+        this.getInternalLayout(internalLayout => {
+            internalLayout = Espo.Utils.cloneDeep(internalLayout);
 
-        /**
-         * @protected
-         */
-        _getHeaderDefs: function () {
-            let defs = [];
+            this.prepareInternalLayout(internalLayout, model);
 
-            for (let i in this.listLayout) {
-                let width = false;
+            let acl =  {
+                edit: this.getAcl().checkModel(model, 'edit') && !this.editDisabled,
+                delete: this.getAcl().checkModel(model, 'delete') && !this.removeDisabled,
+            };
 
-                if ('width' in this.listLayout[i] && this.listLayout[i].width !== null) {
-                    width = this.listLayout[i].width + '%';
-                }
-                else if ('widthPx' in this.listLayout[i]) {
-                    width = this.listLayout[i].widthPx;
-                }
-
-                let itemName = this.listLayout[i].name;
-
-                let item = {
-                    name: itemName,
-                    isSortable: !(this.listLayout[i].notSortable || false),
-                    width: width,
-                    align: ('align' in this.listLayout[i]) ? this.listLayout[i].align : false,
-                };
-
-                if ('customLabel' in this.listLayout[i]) {
-                    item.customLabel = this.listLayout[i].customLabel;
-                    item.hasCustomLabel = true;
-                    item.label = item.customLabel;
-                }
-                else {
-                    item.label = this.translate(itemName, 'fields', this.collection.entityType);
-                }
-
-                if (this.listLayout[i].noLabel) {
-                    item.label = null;
-                }
-
-                if (item.isSortable) {
-                    item.isSorted = this.collection.orderBy === itemName;
-
-                    if (item.isSorted) {
-                        item.isDesc = this.collection.order === 'desc' ;
-                    }
-                }
-
-                defs.push(item);
-            }
-
-            let isCustomSorted =
-                this.collection.orderBy !== this.collection.defaultOrderBy ||
-                this.collection.order !== this.collection.defaultOrder;
-
-            if (this.rowActionsView && !this.rowActionsDisabled || isCustomSorted) {
-                let html = null;
-
-                if (isCustomSorted) {
-                    html =
-                        $('<a>')
-                            .attr('role', 'button')
-                            .attr('tabindex', '0')
-                            .addClass('reset-custom-order')
-                            .attr('title', this.translate('Reset'))
-                            .append(
-                                $('<span>').addClass('fas fa-times fa-sm')
-                            )
-                            .get(0).outerHTML
-                }
-
-                defs.push({
-                    width: this.rowActionsColumnWidth,
-                    html: html,
-                    className: 'action-cell',
-                });
-            }
-
-            return defs;
-        },
-
-        /**
-         * @protected
-         */
-        _convertLayout: function (listLayout, model) {
-            model = model || this.collection.model.prototype;
-
-            let layout = [];
-
-            if (this.checkboxes) {
-                layout.push({
-                    name: 'r-checkboxField',
-                    columnName: 'r-checkbox',
-                    template: 'record/list-checkbox'
-                });
-            }
-
-            for (let i in listLayout) {
-                let col = listLayout[i];
-                let type = col.type || model.getFieldType(col.name) || 'base';
-
-                if (!col.name) {
-                    continue;
-                }
-
-                let item = {
-                    columnName: col.name,
-                    name: col.name + 'Field',
-                    view: col.view ||
-                        model.getFieldParam(col.name, 'view') ||
-                        this.getFieldManager().getViewName(type),
-                    options: {
-                        defs: {
-                            name: col.name,
-                            params: col.params || {}
-                        },
-                        mode: 'list',
-                    },
-                };
-
-                if (col.width) {
-                    item.options.defs.width = col.width;
-                }
-
-                if (col.widthPx) {
-                    item.options.defs.widthPx = col.widthPx;
-                }
-
-                if (col.link) {
-                    item.options.mode = 'listLink';
-                }
-                if (col.align) {
-                    item.options.defs.align = col.align;
-                }
-
-                if (col.options) {
-                    for (let optionName in col.options) {
-                        if (typeof item.options[optionName] !== 'undefined') {
-                            continue;
-                        }
-
-                        item.options[optionName] = col.options[optionName];
-                    }
-                }
-
-                layout.push(item);
-            }
-            if (this.rowActionsView && !this.rowActionsDisabled) {
-                layout.push(this.getRowActionsDefs());
-            }
-
-            return layout;
-        },
-
-        /**
-         * Select a record.
-         *
-         * @param {string} id An ID.
-         * @param {JQuery} [$target]
-         * @param {boolean} [isSilent] Do not trigger the `check` event.
-         */
-        checkRecord: function (id, $target, isSilent) {
-            if (!this.collection.get(id)) {
-                return;
-            }
-
-            $target = $target || this.$el.find('.record-checkbox[data-id="' + id + '"]');
-
-            if ($target.length) {
-                $target.get(0).checked = true;
-                $target.closest('tr').addClass('active');
-            }
-
-            let index = this.checkedList.indexOf(id);
-
-            if (index === -1) {
-                this.checkedList.push(id);
-            }
-
-            this.handleAfterCheck(isSilent);
-        },
-
-        /**
-         * Unselect a record.
-         *
-         * @param {string} id An ID.
-         * @param {JQuery} [$target]
-         * @param {boolean} [isSilent] Do not trigger the `check` event.
-         */
-        uncheckRecord: function (id, $target, isSilent) {
-            $target = $target || this.$el.find('.record-checkbox[data-id="' + id + '"]');
-
-            if ($target.get(0)) {
-                $target.get(0).checked = false;
-                $target.closest('tr').removeClass('active');
-            }
-
-            let index = this.checkedList.indexOf(id);
-
-            if (index !== -1) {
-                this.checkedList.splice(index, 1);
-            }
-
-            this.handleAfterCheck(isSilent);
-        },
-
-        /**
-         * @protected
-         * @param {boolean} [isSilent]
-         */
-        handleAfterCheck: function (isSilent) {
-            if (this.checkedList.length) {
-                this.showActions();
-            }
-            else {
-                this.hideActions();
-            }
-
-            if (this.checkedList.length === this.collection.models.length) {
-                this.$el.find('.select-all').prop('checked', true);
-            }
-            else {
-                this.$el.find('.select-all').prop('checked', false);
-            }
-
-            if (!isSilent) {
-                this.trigger('check');
-            }
-        },
-
-        /**
-         * Get row-actions defs.
-         *
-         * @return {Object}
-         */
-        getRowActionsDefs: function () {
-            let options = {
-                defs: {
-                    params: {}
+            this.createView(key, 'views/base', {
+                model: model,
+                acl: acl,
+                el: this.options.el + ' .list-row[data-id="'+key+'"]',
+                optionsToPass: ['acl'],
+                noCache: true,
+                layoutDefs: {
+                    type: this._internalLayoutType,
+                    layout: internalLayout
                 },
-            };
+                name: this.type + '-' + model.name,
+                setViewBeforeCallback: this.options.skipBuildRows && !this.isRendered(),
+            }, callback);
+        }, model);
+    },
 
-            if (this.options.rowActionsOptions) {
-                for (let item in this.options.rowActionsOptions) {
-                    options[item] = this.options.rowActionsOptions[item];
-                }
+    /**
+     * Build rows.
+     *
+     * @param {function():void} [callback] A callback.
+     */
+    buildRows: function (callback) {
+        this.checkedList = [];
+
+        this.rowList = [];
+
+        if (this.collection.length <= 0) {
+            if (typeof callback === 'function') {
+                callback();
+
+                this.trigger('after:build-rows');
             }
 
-            return {
-                columnName: 'buttons',
-                name: 'buttonsField',
-                view: this.rowActionsView,
-                options: options
-            };
-        },
+            return;
+        }
 
-        /**
-         * Get selected models.
-         *
-         * @return {module:model[]}
-         */
-        getSelected: function () {
-            let list = [];
+        let iteration = 0;
+        let repeatCount = !this.pagination ? 1 : 2;
 
-            this.$el.find('input.record-checkbox:checked').each((i, el) => {
-                let id = $(el).attr('data-id');
-                let model = this.collection.get(id);
+        let callbackWrapped = () => {
+            iteration++;
 
-                list.push(model);
-            });
-
-            return list;
-        },
-
-        /**
-         * @protected
-         */
-        getInternalLayoutForModel: function (callback, model) {
-            let scope = model.name;
-
-            if (this._internalLayout === null) {
-                this._internalLayout = {};
-            }
-
-            if (!(scope in this._internalLayout)) {
-                this._internalLayout[scope] = this._convertLayout(this.listLayout[scope], model);
-            }
-
-            callback(this._internalLayout[scope]);
-        },
-
-        /**
-         * @protected
-         */
-        getInternalLayout: function (callback, model) {
-            if (
-                (this.scope === null || this.rowHasOwnLayout) &&
-                !Array.isArray(this.listLayout)
-            ) {
-                if (!model) {
-                    callback(null);
-
-                    return;
-                }
-
-                this.getInternalLayoutForModel(callback, model);
-
-                return;
-            }
-
-            if (this._internalLayout !== null) {
-                callback(this._internalLayout);
-
-                return;
-            }
-
-            if (this.listLayout !== null) {
-                this._internalLayout = this._convertLayout(this.listLayout);
-
-                callback(this._internalLayout);
-
-                return;
-            }
-
-            this._loadListLayout(listLayout => {
-                this.listLayout = listLayout;
-                this._internalLayout = this._convertLayout(listLayout);
-
-                callback(this._internalLayout);
-            });
-        },
-
-        /**
-         * Compose a cell selector for a layout item.
-         *
-         * @param {module:model} model A model.
-         * @param {Object} item An item.
-         * @return {string}
-         */
-        getItemEl: function (model, item) {
-            return this.options.el + ' tr[data-id="' + model.id + '"] ' +
-                'td.cell[data-name="' + item.columnName + '"]';
-        },
-
-        prepareInternalLayout: function (internalLayout, model) {
-            internalLayout.forEach((item) => {
-                item.el = this.getItemEl(model, item);
-            });
-        },
-
-        /**
-         * Build a row.
-         *
-         * @param {number} i An index.
-         * @param {module:model} model A model.
-         * @param {function(module:view):void} [callback] A callback.
-         */
-        buildRow: function (i, model, callback) {
-            let key = model.id;
-
-            this.rowList.push(key);
-
-            this.getInternalLayout(internalLayout => {
-                internalLayout = Espo.Utils.cloneDeep(internalLayout);
-
-                this.prepareInternalLayout(internalLayout, model);
-
-                let acl =  {
-                    edit: this.getAcl().checkModel(model, 'edit') && !this.editDisabled,
-                    delete: this.getAcl().checkModel(model, 'delete') && !this.removeDisabled,
-                };
-
-                this.createView(key, 'views/base', {
-                    model: model,
-                    acl: acl,
-                    el: this.options.el + ' .list-row[data-id="'+key+'"]',
-                    optionsToPass: ['acl'],
-                    noCache: true,
-                    layoutDefs: {
-                        type: this._internalLayoutType,
-                        layout: internalLayout
-                    },
-                    name: this.type + '-' + model.name,
-                    setViewBeforeCallback: this.options.skipBuildRows && !this.isRendered(),
-                }, callback);
-            }, model);
-        },
-
-        /**
-         * Build rows.
-         *
-         * @param {function():void} [callback] A callback.
-         */
-        buildRows: function (callback) {
-            this.checkedList = [];
-
-            this.rowList = [];
-
-            if (this.collection.length <= 0) {
+            if (iteration === repeatCount) {
                 if (typeof callback === 'function') {
                     callback();
+                }
+            }
+        }
+
+        this.wait(true);
+
+        let modelList = this.collection.models;
+        let count = modelList.length;
+        let builtCount = 0;
+
+        modelList.forEach((model) => {
+            this.buildRow(iteration, model, () => {
+                builtCount++;
+
+                if (builtCount === count) {
+                    callbackWrapped();
+
+                    this.wait(false);
 
                     this.trigger('after:build-rows');
                 }
-
-                return;
-            }
-
-            let iteration = 0;
-            let repeatCount = !this.pagination ? 1 : 2;
-
-            let callbackWrapped = () => {
-                iteration++;
-
-                if (iteration === repeatCount) {
-                    if (typeof callback === 'function') {
-                        callback();
-                    }
-                }
-            }
-
-            this.wait(true);
-
-            let modelList = this.collection.models;
-            let count = modelList.length;
-            let builtCount = 0;
-
-            modelList.forEach((model) => {
-                this.buildRow(iteration, model, () => {
-                    builtCount++;
-
-                    if (builtCount === count) {
-                        callbackWrapped();
-
-                        this.wait(false);
-
-                        this.trigger('after:build-rows');
-                    }
-                });
             });
+        });
 
-            if (this.pagination) {
-                this.createView('pagination', 'views/record/list-pagination', {
-                    collection: this.collection,
-                }, callbackWrapped);
+        if (this.pagination) {
+            this.createView('pagination', 'views/record/list-pagination', {
+                collection: this.collection,
+            }, callbackWrapped);
+        }
+    },
+
+    /**
+     * Show more records.
+     *
+     * @param {{skipNotify?: boolean}} [options]
+     * @param {module:collection} [collection]
+     * @param {JQuery} [$list]
+     * @param {JQuery} [$showMore]
+     * @param {function(): void} [callback] A callback.
+     */
+    showMoreRecords: function (options, collection, $list, $showMore, callback) {
+        collection = collection || this.collection;
+        $showMore =  $showMore || this.$el.find('.show-more');
+        $list = $list || this.$el.find(this.listContainerEl);
+        options = options || {};
+
+        $showMore.children('a').addClass('disabled');
+
+        if (!options.skipNotify) {
+            Espo.Ui.notify(' ... ');
+        }
+
+        let lengthBefore = collection.length;
+
+        let final = () => {
+            $showMore.parent().append($showMore);
+
+            if (
+                collection.total > collection.length + collection.lengthCorrection ||
+                collection.total === -1
+            ) {
+                let moreCount = collection.total - collection.length - collection.lengthCorrection;
+                let moreCountString = this.getNumberUtil().formatInt(moreCount);
+
+                this.$el.find('.more-count').text(moreCountString);
+
+                $showMore.removeClass('hidden');
+            }
+            else {
+                $showMore.remove();
             }
-        },
 
-        /**
-         * Show more records.
-         *
-         * @param {{skipNotify?: boolean}} [options]
-         * @param {module:collection.Class} [collection]
-         * @param {JQuery} [$list]
-         * @param {JQuery} [$showMore]
-         * @param {function(): void} [callback] A callback.
-         */
-        showMoreRecords: function (options, collection, $list, $showMore, callback) {
-            collection = collection || this.collection;
-            $showMore =  $showMore || this.$el.find('.show-more');
-            $list = $list || this.$el.find(this.listContainerEl);
-            options = options || {};
+            $showMore.children('a').removeClass('disabled');
 
-            $showMore.children('a').addClass('disabled');
+            if (this.allResultIsChecked) {
+                this.$el
+                    .find('input.record-checkbox')
+                    .attr('disabled', 'disabled')
+                    .prop('checked', true);
+            }
 
             if (!options.skipNotify) {
-                Espo.Ui.notify(' ... ');
+                Espo.Ui.notify(false);
             }
 
-            let lengthBefore = collection.length;
-
-            let final = () => {
-                $showMore.parent().append($showMore);
-
-                if (
-                    collection.total > collection.length + collection.lengthCorrection ||
-                    collection.total === -1
-                ) {
-                    let moreCount = collection.total - collection.length - collection.lengthCorrection;
-                    let moreCountString = this.getNumberUtil().formatInt(moreCount);
-
-                    this.$el.find('.more-count').text(moreCountString);
-
-                    $showMore.removeClass('hidden');
-                }
-                else {
-                    $showMore.remove();
-                }
-
-                $showMore.children('a').removeClass('disabled');
-
-                if (this.allResultIsChecked) {
-                    this.$el
-                        .find('input.record-checkbox')
-                        .attr('disabled', 'disabled')
-                        .prop('checked', true);
-                }
-
-                if (!options.skipNotify) {
-                    Espo.Ui.notify(false);
-                }
-
-                if (callback) {
-                    callback.call(this);
-                }
-
-                this.trigger('after:show-more', lengthBefore);
-            };
-
-            let initialCount = collection.length;
-
-            let success = () => {
-                if (!options.skipNotify) {
-                    Espo.Ui.notify(false);
-                }
-
-                $showMore.addClass('hidden');
-
-                let rowCount = collection.length - initialCount;
-                let rowsReady = 0;
-
-                if (collection.length <= initialCount) {
-                    final();
-                }
-
-                for (let i = initialCount; i < collection.length; i++) {
-                    let model = collection.at(i);
-
-                    this.buildRow(i, model, (view) => {
-                        let model = view.model;
-
-                        view.getHtml(html => {
-                            let $row = $(this.getRowContainerHtml(model.id));
-
-                            $row.append(html);
-
-                            let $existingRowItem = this.getDomRowItem(model.id);
-
-                            if ($existingRowItem && $existingRowItem.length) {
-                                $existingRowItem.remove();
-                            }
-
-                            $list.append($row);
-
-                            rowsReady++;
-
-                            if (rowsReady === rowCount) {
-                                final();
-                            }
-
-                            view._afterRender();
-
-                            if (view.options.el) {
-                                view.setElement(view.options.el);
-                            }
-                        });
-                    });
-                }
-
-                this.noRebuild = true;
-            };
-
-            this.listenToOnce(collection, 'update', (collection, o) => {
-                if (o.changes.merged.length) {
-                    collection.lengthCorrection += o.changes.merged.length;
-                }
-            });
-
-            // If using promise callback, then need to pass `noRebuild: true`.
-            collection.fetch({
-                success: success,
-                remove: false,
-                more: true,
-            });
-        },
-
-        getDomRowItem: function (id) {
-            return null;
-        },
-
-        /**
-         * Compose a row-container HTML.
-         *
-         * @param {string} id A record ID.
-         * @return {string} HTML.
-         */
-        getRowContainerHtml: function (id) {
-            return $('<tr>')
-                .attr('data-id', id)
-                .addClass('list-row')
-                .get(0).outerHTML;
-        },
-
-        actionQuickView: function (data) {
-            data = data || {};
-
-            let id = data.id;
-
-            if (!id) {
-                console.error("No id.");
-
-                return;
+            if (callback) {
+                callback.call(this);
             }
 
-            let model = null;
+            this.trigger('after:show-more', lengthBefore);
+        };
 
-            if (this.collection) {
-                model = this.collection.get(id);
+        let initialCount = collection.length;
+
+        let success = () => {
+            if (!options.skipNotify) {
+                Espo.Ui.notify(false);
             }
 
-            let scope = data.scope;
+            $showMore.addClass('hidden');
 
-            if (!scope && model) {
-                scope = model.name;
+            let rowCount = collection.length - initialCount;
+            let rowsReady = 0;
+
+            if (collection.length <= initialCount) {
+                final();
             }
 
-            if (!scope) {
-                scope = this.scope;
-            }
+            for (let i = initialCount; i < collection.length; i++) {
+                let model = collection.at(i);
 
-            if (!scope) {
-                console.error("No scope.");
+                this.buildRow(i, model, (view) => {
+                    let model = view.model;
 
-                return;
-            }
+                    view.getHtml(html => {
+                        let $row = $(this.getRowContainerHtml(model.id));
 
-            if (this.quickDetailDisabled) {
-                this.getRouter().navigate('#' + scope + '/view/' + id, {trigger: true});
+                        $row.append(html);
 
-                return;
-            }
+                        let $existingRowItem = this.getDomRowItem(model.id);
 
-            let helper = new RecordModal(this.getMetadata(), this.getAcl());
-
-            helper
-                .showDetail(this, {
-                    id: id,
-                    scope: scope,
-                    model: model,
-                    rootUrl: this.options.keepCurrentRootUrl ?
-                        this.getRouter().getCurrentUrl() : null,
-                    editDisabled: this.quickEditDisabled,
-                })
-                .then(view => {
-                    if (!model) {
-                        return;
-                    }
-
-                    this.listenTo(view, 'after:save', model => {
-                        this.trigger('after:save', model);
-                    });
-                });
-        },
-
-        actionQuickEdit: function (data) {
-            data = data || {};
-
-            let id = data.id;
-
-            if (!id) {
-                console.error("No id.");
-
-                return;
-            }
-
-            let model = null;
-
-            if (this.collection) {
-                model = this.collection.get(id);
-            }
-
-            let scope = data.scope;
-
-            if (!scope && model) {
-                scope = model.name;
-            }
-
-            if (!scope) {
-                scope = this.scope;
-            }
-
-            if (!scope) {
-                console.error("No scope.");
-
-                return;
-            }
-
-            let viewName = this.getMetadata().get(['clientDefs', scope, 'modalViews', 'edit']) ||
-                'views/modals/edit';
-
-            if (!this.quickEditDisabled) {
-                Espo.Ui.notify(' ... ');
-
-                let options = {
-                    scope: scope,
-                    id: id,
-                    model: model,
-                    fullFormDisabled: data.noFullForm,
-                    returnUrl: this.getRouter().getCurrentUrl(),
-                    returnDispatchParams: {
-                        controller: scope,
-                        action: null,
-                        options: {
-                            isReturn: true,
-                        },
-                    },
-                };
-
-                if (this.options.keepCurrentRootUrl) {
-                    options.rootUrl = this.getRouter().getCurrentUrl();
-                }
-
-                this.createView('modal', viewName, options, (view) => {
-                    view.once('after:render', () => {
-                        Espo.Ui.notify(false);
-                    });
-
-                    view.render();
-
-                    this.listenToOnce(view, 'remove', () => {
-                        this.clearView('modal');
-                    });
-
-                    this.listenToOnce(view, 'after:save', (m) => {
-                        let model = this.collection.get(m.id);
-
-                        if (model) {
-                            model.set(m.getClonedAttributes());
+                        if ($existingRowItem && $existingRowItem.length) {
+                            $existingRowItem.remove();
                         }
 
-                        this.trigger('after:save', m);
+                        $list.append($row);
+
+                        rowsReady++;
+
+                        if (rowsReady === rowCount) {
+                            final();
+                        }
+
+                        view._afterRender();
+
+                        if (view.options.el) {
+                            view.setElement(view.options.el);
+                        }
                     });
                 });
-
-                return;
             }
 
-            let options = {
+            this.noRebuild = true;
+        };
+
+        this.listenToOnce(collection, 'update', (collection, o) => {
+            if (o.changes.merged.length) {
+                collection.lengthCorrection += o.changes.merged.length;
+            }
+        });
+
+        // If using promise callback, then need to pass `noRebuild: true`.
+        collection.fetch({
+            success: success,
+            remove: false,
+            more: true,
+        });
+    },
+
+    getDomRowItem: function (id) {
+        return null;
+    },
+
+    /**
+     * Compose a row-container HTML.
+     *
+     * @param {string} id A record ID.
+     * @return {string} HTML.
+     */
+    getRowContainerHtml: function (id) {
+        return $('<tr>')
+            .attr('data-id', id)
+            .addClass('list-row')
+            .get(0).outerHTML;
+    },
+
+    actionQuickView: function (data) {
+        data = data || {};
+
+        let id = data.id;
+
+        if (!id) {
+            console.error("No id.");
+
+            return;
+        }
+
+        let model = null;
+
+        if (this.collection) {
+            model = this.collection.get(id);
+        }
+
+        let scope = data.scope;
+
+        if (!scope && model) {
+            scope = model.name;
+        }
+
+        if (!scope) {
+            scope = this.scope;
+        }
+
+        if (!scope) {
+            console.error("No scope.");
+
+            return;
+        }
+
+        if (this.quickDetailDisabled) {
+            this.getRouter().navigate('#' + scope + '/view/' + id, {trigger: true});
+
+            return;
+        }
+
+        let helper = new RecordModal(this.getMetadata(), this.getAcl());
+
+        helper
+            .showDetail(this, {
                 id: id,
-                model: this.collection.get(id),
+                scope: scope,
+                model: model,
+                rootUrl: this.options.keepCurrentRootUrl ?
+                    this.getRouter().getCurrentUrl() : null,
+                editDisabled: this.quickEditDisabled,
+            })
+            .then(view => {
+                if (!model) {
+                    return;
+                }
+
+                this.listenTo(view, 'after:save', model => {
+                    this.trigger('after:save', model);
+                });
+            });
+    },
+
+    actionQuickEdit: function (data) {
+        data = data || {};
+
+        let id = data.id;
+
+        if (!id) {
+            console.error("No id.");
+
+            return;
+        }
+
+        let model = null;
+
+        if (this.collection) {
+            model = this.collection.get(id);
+        }
+
+        let scope = data.scope;
+
+        if (!scope && model) {
+            scope = model.name;
+        }
+
+        if (!scope) {
+            scope = this.scope;
+        }
+
+        if (!scope) {
+            console.error("No scope.");
+
+            return;
+        }
+
+        let viewName = this.getMetadata().get(['clientDefs', scope, 'modalViews', 'edit']) ||
+            'views/modals/edit';
+
+        if (!this.quickEditDisabled) {
+            Espo.Ui.notify(' ... ');
+
+            let options = {
+                scope: scope,
+                id: id,
+                model: model,
+                fullFormDisabled: data.noFullForm,
                 returnUrl: this.getRouter().getCurrentUrl(),
                 returnDispatchParams: {
                     controller: scope,
                     action: null,
                     options: {
                         isReturn: true,
-                    }
+                    },
                 },
             };
 
@@ -3117,162 +3077,203 @@ function (Dep, MassActionHelper, ExportHelper, RecordModal) {
                 options.rootUrl = this.getRouter().getCurrentUrl();
             }
 
-            this.getRouter().navigate('#' + scope + '/edit/' + id, {trigger: false});
-            this.getRouter().dispatch(scope, 'edit', options);
-        },
+            this.createView('modal', viewName, options, (view) => {
+                view.once('after:render', () => {
+                    Espo.Ui.notify(false);
+                });
 
-        /**
-         * Compose a row selector.
-         *
-         * @param {string} id A record ID.
-         * @return {string}
-         */
-        getRowSelector: function (id) {
-            return 'tr[data-id="' + id + '"]';
-        },
+                view.render();
 
-        actionQuickRemove: function (data) {
-            data = data || {};
+                this.listenToOnce(view, 'remove', () => {
+                    this.clearView('modal');
+                });
 
-            let id = data.id;
+                this.listenToOnce(view, 'after:save', (m) => {
+                    let model = this.collection.get(m.id);
 
-            if (!id) {
-                return;
-            }
+                    if (model) {
+                        model.set(m.getClonedAttributes());
+                    }
 
-            let model = this.collection.get(id);
-
-            if (!this.getAcl().checkModel(model, 'delete')) {
-                Espo.Ui.error(this.translate('Access denied'));
-
-                return;
-            }
-
-            this.confirm({
-                message: this.translate('removeRecordConfirmation', 'messages', this.scope),
-                confirmText: this.translate('Remove'),
-            }, () => {
-                this.collection.trigger('model-removing', id);
-                this.collection.remove(model);
-
-                Espo.Ui.notify(' ... ');
-
-                model
-                    .destroy({wait: true, fromList: true})
-                    .then(() => {
-                        Espo.Ui.success(this.translate('Removed'));
-
-                        this.removeRecordFromList(id);
-                    })
-                    .catch(() => {
-                        this.collection.push(model);
-                    });
-            });
-        },
-
-        /**
-         * @protected
-         * @param {string} id An ID.
-         */
-        removeRecordFromList: function (id) {
-            this.collection.remove(id);
-
-            if (this.collection.total > 0) {
-                this.collection.total--;
-            }
-
-            this.$el.find('.total-count-span').text(this.collection.total.toString());
-
-            let index = this.checkedList.indexOf(id);
-
-            if (index !== -1) {
-                this.checkedList.splice(index, 1);
-            }
-
-            let key = id;
-
-            this.clearView(key);
-
-            index = this.rowList.indexOf(key);
-
-            if (~index) {
-                this.rowList.splice(index, 1);
-            }
-
-            this.removeRowHtml(id);
-        },
-
-        /**
-         * @protected
-         * @param {string} id An ID.
-         */
-        removeRowHtml: function (id) {
-            this.$el.find(this.getRowSelector(id)).remove();
-
-            if (
-                this.collection.length === 0 &&
-                (this.collection.total === 0 || this.collection.total === -2)
-            ) {
-                this.reRender();
-            }
-        },
-
-        /**
-         * @public
-         * @param {string} id An ID.
-         * @return {boolean}
-         */
-        isIdChecked: function (id) {
-            return this.checkedList.indexOf(id) !== -1;
-        },
-
-        getTableMinWidth: function () {
-            if (!this.listLayout) {
-                return;
-            }
-
-            let totalWidth = 0;
-            let totalWidthPx = 0;
-            let emptyCount = 0;
-            let columnCount = 0;
-
-            this.listLayout.forEach((item) => {
-                columnCount ++;
-
-                if (item.widthPx) {
-                    totalWidthPx += item.widthPx;
-
-                    return;
-                }
-
-                if (item.width) {
-                    totalWidth += item.width;
-
-                    return;
-                }
-
-                emptyCount ++;
+                    this.trigger('after:save', m);
+                });
             });
 
-            if (this.rowActionsView && !this.rowActionsDisabled) {
-                totalWidthPx += this.rowActionsColumnWidth;
+            return;
+        }
+
+        let options = {
+            id: id,
+            model: this.collection.get(id),
+            returnUrl: this.getRouter().getCurrentUrl(),
+            returnDispatchParams: {
+                controller: scope,
+                action: null,
+                options: {
+                    isReturn: true,
+                }
+            },
+        };
+
+        if (this.options.keepCurrentRootUrl) {
+            options.rootUrl = this.getRouter().getCurrentUrl();
+        }
+
+        this.getRouter().navigate('#' + scope + '/edit/' + id, {trigger: false});
+        this.getRouter().dispatch(scope, 'edit', options);
+    },
+
+    /**
+     * Compose a row selector.
+     *
+     * @param {string} id A record ID.
+     * @return {string}
+     */
+    getRowSelector: function (id) {
+        return 'tr[data-id="' + id + '"]';
+    },
+
+    actionQuickRemove: function (data) {
+        data = data || {};
+
+        let id = data.id;
+
+        if (!id) {
+            return;
+        }
+
+        let model = this.collection.get(id);
+
+        if (!this.getAcl().checkModel(model, 'delete')) {
+            Espo.Ui.error(this.translate('Access denied'));
+
+            return;
+        }
+
+        this.confirm({
+            message: this.translate('removeRecordConfirmation', 'messages', this.scope),
+            confirmText: this.translate('Remove'),
+        }, () => {
+            this.collection.trigger('model-removing', id);
+            this.collection.remove(model);
+
+            Espo.Ui.notify(' ... ');
+
+            model
+                .destroy({wait: true, fromList: true})
+                .then(() => {
+                    Espo.Ui.success(this.translate('Removed'));
+
+                    this.removeRecordFromList(id);
+                })
+                .catch(() => {
+                    this.collection.push(model);
+                });
+        });
+    },
+
+    /**
+     * @protected
+     * @param {string} id An ID.
+     */
+    removeRecordFromList: function (id) {
+        this.collection.remove(id);
+
+        if (this.collection.total > 0) {
+            this.collection.total--;
+        }
+
+        this.$el.find('.total-count-span').text(this.collection.total.toString());
+
+        let index = this.checkedList.indexOf(id);
+
+        if (index !== -1) {
+            this.checkedList.splice(index, 1);
+        }
+
+        let key = id;
+
+        this.clearView(key);
+
+        index = this.rowList.indexOf(key);
+
+        if (~index) {
+            this.rowList.splice(index, 1);
+        }
+
+        this.removeRowHtml(id);
+    },
+
+    /**
+     * @protected
+     * @param {string} id An ID.
+     */
+    removeRowHtml: function (id) {
+        this.$el.find(this.getRowSelector(id)).remove();
+
+        if (
+            this.collection.length === 0 &&
+            (this.collection.total === 0 || this.collection.total === -2)
+        ) {
+            this.reRender();
+        }
+    },
+
+    /**
+     * @public
+     * @param {string} id An ID.
+     * @return {boolean}
+     */
+    isIdChecked: function (id) {
+        return this.checkedList.indexOf(id) !== -1;
+    },
+
+    getTableMinWidth: function () {
+        if (!this.listLayout) {
+            return;
+        }
+
+        let totalWidth = 0;
+        let totalWidthPx = 0;
+        let emptyCount = 0;
+        let columnCount = 0;
+
+        this.listLayout.forEach((item) => {
+            columnCount ++;
+
+            if (item.widthPx) {
+                totalWidthPx += item.widthPx;
+
+                return;
             }
 
-            if (this.checkboxes) {
-                totalWidthPx += this.checkboxColumnWidth;
+            if (item.width) {
+                totalWidth += item.width;
+
+                return;
             }
 
-            let minWidth;
+            emptyCount ++;
+        });
 
-            if (totalWidth >= 100) {
-                minWidth = columnCount * this.minColumnWidth;
-            }
-            else {
-                minWidth = (totalWidthPx + this.minColumnWidth * emptyCount) / (1 - totalWidth / 100);
-                minWidth = Math.round(minWidth);
-            }
+        if (this.rowActionsView && !this.rowActionsDisabled) {
+            totalWidthPx += this.rowActionsColumnWidth;
+        }
 
-            return minWidth;
-        },
-    });
+        if (this.checkboxes) {
+            totalWidthPx += this.checkboxColumnWidth;
+        }
+
+        let minWidth;
+
+        if (totalWidth >= 100) {
+            minWidth = columnCount * this.minColumnWidth;
+        }
+        else {
+            minWidth = (totalWidthPx + this.minColumnWidth * emptyCount) / (1 - totalWidth / 100);
+            minWidth = Math.round(minWidth);
+        }
+
+        return minWidth;
+    },
 });
diff --git a/client/src/views/record/panel-actions.js b/client/src/views/record/panel-actions.js
index 31b1e466fb..22d60c437b 100644
--- a/client/src/views/record/panel-actions.js
+++ b/client/src/views/record/panel-actions.js
@@ -26,55 +26,57 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/panel-actions', ['view'], function (Dep) {
+import Dep from 'view';
 
-    return Dep.extend({
+/**
+ * @class Class
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        template: 'record/panel-actions',
+    template: 'record/panel-actions',
 
-        data: function () {
-            return {
-                defs: this.options.defs,
-                buttonList: this.getButtonList(),
-                actionList: this.getActionList(),
-                entityType: this.options.entityType,
-                scope: this.options.scope,
-            };
-        },
+    data: function () {
+        return {
+            defs: this.options.defs,
+            buttonList: this.getButtonList(),
+            actionList: this.getActionList(),
+            entityType: this.options.entityType,
+            scope: this.options.scope,
+        };
+    },
 
-        setup: function () {
-            this.buttonList = this.options.defs.buttonList || [];
-            this.actionList = this.options.defs.actionList || [];
-            this.defs = this.options.defs;
-        },
+    setup: function () {
+        this.buttonList = this.options.defs.buttonList || [];
+        this.actionList = this.options.defs.actionList || [];
+        this.defs = this.options.defs;
+    },
 
-        getButtonList: function () {
-            let list = [];
+    getButtonList: function () {
+        let list = [];
 
-            this.buttonList.forEach(item => {
-                if (item.hidden) {
-                    return;
+        this.buttonList.forEach(item => {
+            if (item.hidden) {
+                return;
+            }
+
+            list.push(item);
+        });
+
+        return list;
+    },
+
+    getActionList: function () {
+        return this.actionList
+            .filter(item => !item.hidden)
+            .map(item => {
+                item = Espo.Utils.clone(item);
+
+                if (item.action) {
+                    item.data = Espo.Utils.clone(item.data || {});
+                    item.data.panel = this.options.defs.name;
                 }
 
-                list.push(item);
+                return item;
             });
-
-            return list;
-        },
-
-        getActionList: function () {
-            return this.actionList
-                .filter(item => !item.hidden)
-                .map(item => {
-                    item = Espo.Utils.clone(item);
-
-                    if (item.action) {
-                        item.data = Espo.Utils.clone(item.data || {});
-                        item.data.panel = this.options.defs.name;
-                    }
-
-                    return item;
-                });
-        },
-    });
+    },
 });
diff --git a/client/src/views/record/panels-container.js b/client/src/views/record/panels-container.js
index 64d93c2624..23f2a506e1 100644
--- a/client/src/views/record/panels-container.js
+++ b/client/src/views/record/panels-container.js
@@ -26,912 +26,917 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/panels-container', ['view'], function (Dep) {
+/** @module views/record/panels-container */
+
+import Dep from 'view';
+
+/**
+ * A detail record view.
+ *
+ * @class
+ * @name Class
+ * @extends module:view
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    /** @private */
+    panelSoftLockedTypeList: ['default', 'acl', 'delimiter', 'dynamicLogic'],
 
     /**
-     * A detail record view.
+     * A panel.
      *
-     * @class
-     * @name Class
-     * @extends module:view.Class
-     * @memberOf module:views/record/panels-container
+     * @typedef {Object} module:views/record/panels-container~panel
+     *
+     * @property {string} name A name.
+     * @property {boolean} [hidden] Hidden.
+     * @property {string} [label] A label.
+     * @property {'default'|'success'|'danger'|'warning'} [style] A style.
+     * @property {string} [titleHtml] A title HTML.
+     * @property {boolean} [notRefreshable] Not refreshable.
+     * @property {boolean} [isForm] If for a form.
+     * @property {module:views/record/panels-container~button[]} [buttonList] Buttons.
+     * @property {module:views/record/panels-container~action[]} [actionList] Dropdown actions.
+     * @property {string} [view] A view name.
+     * @property {Object.<string,*>} [Options] A view options.
+     * @property {boolean} [sticked] To stick to an upper panel.
+     * @property {Number} [tabNumber]
      */
-    return Dep.extend(/** @lends module:views/record/panels-container.Class# */{
 
-        /**
-         * @private
-         */
-        panelSoftLockedTypeList: ['default', 'acl', 'delimiter', 'dynamicLogic'],
+    /**
+     * A button.
+     *
+     * @typedef {Object} module:views/record/panels-container~button
+     *
+     * @property {string} action An action.
+     * @property {boolean} [hidden] Hidden.
+     * @property {string} [label] A label. Translatable.
+     * @property {string} [html] A HTML.
+     * @property {string} [text] A text.
+     * @property {string} [title] A title (on hover). Translatable.
+     * @property {Object.<string,(string|number|boolean)>} [data] Data attributes.
+     */
 
-        /**
-         * A panel.
-         *
-         * @typedef {Object} module:views/record/panels-container~panel
-         *
-         * @property {string} name A name.
-         * @property {boolean} [hidden] Hidden.
-         * @property {string} [label] A label.
-         * @property {'default'|'success'|'danger'|'warning'} [style] A style.
-         * @property {string} [titleHtml] A title HTML.
-         * @property {boolean} [notRefreshable] Not refreshable.
-         * @property {boolean} [isForm] If for a form.
-         * @property {module:views/record/panels-container~button[]} [buttonList] Buttons.
-         * @property {module:views/record/panels-container~action[]} [actionList] Dropdown actions.
-         * @property {string} [view] A view name.
-         * @property {Object.<string,*>} [Options] A view options.
-         * @property {boolean} [sticked] To stick to an upper panel.
-         * @property {Number} [tabNumber]
-         */
+    /**
+     * An action.
+     *
+     * @typedef {Object} module:views/record/panels-container~action
+     *
+     * @property {string} [action] An action.
+     * @property {string} [link] A link URL.
+     * @property {boolean} [hidden] Hidden.
+     * @property {string} [label] A label. Translatable.
+     * @property {string} [html] A HTML.
+     * @property {string} [text] A text.
+     * @property {Object.<string,(string|number|boolean)>} [data] Data attributes.
+     */
 
-        /**
-         * A button.
-         *
-         * @typedef {Object} module:views/record/panels-container~button
-         *
-         * @property {string} action An action.
-         * @property {boolean} [hidden] Hidden.
-         * @property {string} [label] A label. Translatable.
-         * @property {string} [html] A HTML.
-         * @property {string} [text] A text.
-         * @property {string} [title] A title (on hover). Translatable.
-         * @property {Object.<string,(string|number|boolean)>} [data] Data attributes.
-         */
+    /**
+     * A panel list.
+     *
+     * @protected
+     * @type {module:views/record/panels-container~panel[]}
+     */
+    panelList: null,
 
-        /**
-         * An action.
-         *
-         * @typedef {Object} module:views/record/panels-container~action
-         *
-         * @property {string} [action] An action.
-         * @property {string} [link] A link URL.
-         * @property {boolean} [hidden] Hidden.
-         * @property {string} [label] A label. Translatable.
-         * @property {string} [html] A HTML.
-         * @property {string} [text] A text.
-         * @property {Object.<string,(string|number|boolean)>} [data] Data attributes.
-         */
+    /**
+     * @private
+     */
+    hasTabs: false,
 
-        /**
-         * A panel list.
-         *
-         * @protected
-         * @type {module:views/record/panels-container~panel[]}
-         */
-        panelList: null,
+    /**
+     * @private
+     * @type {Object.<string,*>[]|null}
+     */
+    tabDataList: null,
 
-        /**
-         * @private
-         */
-        hasTabs: false,
+    /**
+     * @protected
+     */
+    currentTab: 0,
 
-        /**
-         * @private
-         * @type {Object.<string,*>[]|null}
-         */
-        tabDataList: null,
+    /**
+     * @protected
+     * @type {string}
+     */
+    scope: '',
 
-        /**
-         * @protected
-         */
-        currentTab: 0,
+    /**
+     * @protected
+     * @type {string}
+     */
+    entityType: '',
 
-        /**
-         * @protected
-         * @type {string}
-         */
-        scope: '',
+    /**
+     * @protected
+     * @type {string}
+     */
+    name: '',
 
-        /**
-         * @protected
-         * @type {string}
-         */
-        entityType: '',
+    /**
+     * A mode.
+     *
+     * @type 'detail'|'edit'
+     */
+    mode: 'detail',
 
-        /**
-         * @protected
-         * @type {string}
-         */
-        name: '',
+    data: function () {
+        let tabDataList = this.hasTabs ? this.getTabDataList() : [];
 
-        data: function () {
-            let tabDataList = this.hasTabs ? this.getTabDataList() : [];
+        return {
+            panelList: this.panelList,
+            scope: this.scope,
+            entityType: this.entityType,
+            tabDataList: tabDataList,
+        };
+    },
 
-            return {
-                panelList: this.panelList,
-                scope: this.scope,
-                entityType: this.entityType,
-                tabDataList: tabDataList,
-            };
-        },
+    events: {
+        'click .action': function (e) {
+            let $target = $(e.currentTarget);
+            let action = $target.data('action');
+            let panel = $target.data('panel');
+            let data = $target.data();
 
-        events: {
-            'click .action': function (e) {
-                let $target = $(e.currentTarget);
-                let action = $target.data('action');
-                let panel = $target.data('panel');
-                let data = $target.data();
+            if (action && panel) {
+                let method = 'action' + Espo.Utils.upperCaseFirst(action);
+                let d = _.clone(data);
 
-                if (action && panel) {
-                    let method = 'action' + Espo.Utils.upperCaseFirst(action);
-                    let d = _.clone(data);
+                delete d['action'];
+                delete d['panel'];
 
-                    delete d['action'];
-                    delete d['panel'];
+                let view = this.getView(panel);
 
-                    let view = this.getView(panel);
-
-                    if (view && typeof view[method] == 'function') {
-                        view[method].call(view, d, e);
-                    }
+                if (view && typeof view[method] == 'function') {
+                    view[method].call(view, d, e);
                 }
-            },
-            'click .panels-show-more-delimiter [data-action="showMorePanels"]': 'actionShowMorePanels',
-            /** @this module:views/record/panels-container.Class */
-            'click .tabs > button': function (e) {
-                let tab = parseInt($(e.currentTarget).attr('data-tab'));
-
-                this.selectTab(tab);
-            },
+            }
         },
+        'click .panels-show-more-delimiter [data-action="showMorePanels"]': 'actionShowMorePanels',
+        /** @this module:views/record/panels-container */
+        'click .tabs > button': function (e) {
+            let tab = parseInt($(e.currentTarget).attr('data-tab'));
 
-        afterRender: function () {
-            this.adjustPanels();
+            this.selectTab(tab);
         },
+    },
 
-        adjustPanels: function () {
-            if (!this.isRendered()) {
-                return;
+    afterRender: function () {
+        this.adjustPanels();
+    },
+
+    adjustPanels: function () {
+        if (!this.isRendered()) {
+            return;
+        }
+
+        let $panels = this.$el.find('> .panel');
+
+        $panels
+            .removeClass('first')
+            .removeClass('last')
+            .removeClass('in-middle');
+
+        let $visiblePanels = $panels.filter(`:not(.tab-hidden):not(.hidden)`);
+
+        let groups = [];
+        let currentGroup = [];
+        let inTab = false;
+
+        $visiblePanels.each((i, el) => {
+            let $el = $(el);
+
+            let breakGroup = false;
+
+            if (
+                !breakGroup &&
+                this.hasTabs &&
+                !inTab &&
+                $el.attr('data-tab') !== '-1'
+            ) {
+                inTab = true;
+                breakGroup = true;
             }
 
-            let $panels = this.$el.find('> .panel');
+            if (!breakGroup && !$el.hasClass('sticked')) {
+                breakGroup = true;
+            }
 
-            $panels
-                .removeClass('first')
-                .removeClass('last')
-                .removeClass('in-middle');
-
-            let $visiblePanels = $panels.filter(`:not(.tab-hidden):not(.hidden)`);
-
-            let groups = [];
-            let currentGroup = [];
-            let inTab = false;
-
-            $visiblePanels.each((i, el) => {
-                let $el = $(el);
-
-                let breakGroup = false;
-
-                if (
-                    !breakGroup &&
-                    this.hasTabs &&
-                    !inTab &&
-                    $el.attr('data-tab') !== '-1'
-                ) {
-                    inTab = true;
-                    breakGroup = true;
-                }
-
-                if (!breakGroup && !$el.hasClass('sticked')) {
-                    breakGroup = true;
-                }
-
-                if (breakGroup) {
-                    if (i !== 0) {
-                        groups.push(currentGroup);
-                    }
-
-                    currentGroup = [];
-                }
-
-                currentGroup.push($el);
-
-                if (i === $visiblePanels.length - 1) {
+            if (breakGroup) {
+                if (i !== 0) {
                     groups.push(currentGroup);
                 }
-            });
 
-            groups.forEach(group => {
-                group.forEach(($el, i) => {
-                    if (i === group.length - 1) {
-                        if (i === 0) {
-                            return;
-                        }
+                currentGroup = [];
+            }
 
-                        $el.addClass('last')
+            currentGroup.push($el);
 
+            if (i === $visiblePanels.length - 1) {
+                groups.push(currentGroup);
+            }
+        });
+
+        groups.forEach(group => {
+            group.forEach(($el, i) => {
+                if (i === group.length - 1) {
+                    if (i === 0) {
                         return;
                     }
 
-                    if (i === 0 && group.length) {
-                        $el.addClass('first')
-
-                        return;
-                    }
-
-                    $el.addClass('in-middle');
-                });
-            });
-        },
-
-        /**
-         * Set read-only.
-         */
-        setReadOnly: function () {
-            this.readOnly = true;
-        },
-
-        /**
-         * Set not read-only.
-         */
-        setNotReadOnly: function (onlyNotSetAsReadOnly) {
-            this.readOnly = false;
-
-            if (onlyNotSetAsReadOnly) {
-                this.panelList.forEach(item => {
-                    this.applyAccessToActions(item.buttonList);
-                    this.applyAccessToActions(item.actionList);
-
-                    if (this.isRendered()) {
-                        let actionsView = this.getView(item.actionsViewKey);
-
-                        if (actionsView) {
-                            actionsView.reRender();
-                        }
-                    }
-                });
-            }
-        },
-
-        /**
-         * @private
-         * @param {Object[]} actionList
-         */
-        applyAccessToActions: function (actionList) {
-            if (!actionList) {
-                return;
-            }
-
-            actionList.forEach(item => {
-                if (!Espo.Utils.checkActionAvailability(this.getHelper(), item)) {
-                    item.hidden = true;
+                    $el.addClass('last')
 
                     return;
                 }
 
-                if (Espo.Utils.checkActionAccess(this.getAcl(), this.model, item, true)) {
-                    if (item.isHiddenByAcl) {
-                        item.isHiddenByAcl = false;
-                        item.hidden = false;
-                    }
+                if (i === 0 && group.length) {
+                    $el.addClass('first')
+
+                    return;
                 }
-                else {
-                    if (!item.hidden) {
-                        item.isHiddenByAcl = true;
-                        item.hidden = true;
+
+                $el.addClass('in-middle');
+            });
+        });
+    },
+
+    /**
+     * Set read-only.
+     */
+    setReadOnly: function () {
+        this.readOnly = true;
+    },
+
+    /**
+     * Set not read-only.
+     */
+    setNotReadOnly: function (onlyNotSetAsReadOnly) {
+        this.readOnly = false;
+
+        if (onlyNotSetAsReadOnly) {
+            this.panelList.forEach(item => {
+                this.applyAccessToActions(item.buttonList);
+                this.applyAccessToActions(item.actionList);
+
+                if (this.isRendered()) {
+                    let actionsView = this.getView(item.actionsViewKey);
+
+                    if (actionsView) {
+                        actionsView.reRender();
                     }
                 }
             });
-        },
+        }
+    },
 
-        /**
-         * Set up panel views.
-         *
-         * @protected
-         */
-        setupPanelViews: function () {
-            this.panelList.forEach(p => {
-                let name = p.name;
+    /**
+     * @private
+     * @param {Object[]} actionList
+     */
+    applyAccessToActions: function (actionList) {
+        if (!actionList) {
+            return;
+        }
 
-                let options = {
-                    model: this.model,
-                    panelName: name,
-                    el: this.options.el + ' .panel[data-name="' + name + '"] > .panel-body',
-                    defs: p,
-                    mode: this.mode,
-                    recordHelper: this.recordHelper,
-                    inlineEditDisabled: this.inlineEditDisabled,
-                    readOnly: this.readOnly,
-                    disabled: p.hidden || false,
-                    recordViewObject: this.recordViewObject,
-                };
-
-                options = _.extend(options, p.options);
-
-                this.createView(name, p.view, options, (view) => {
-                    if ('getActionList' in view) {
-                        p.actionList = view.getActionList();
-
-                        this.applyAccessToActions(p.actionList);
-                    }
-
-                    if ('getButtonList' in view) {
-                        p.buttonList = view.getButtonList();
-                        this.applyAccessToActions(p.buttonList);
-                    }
-
-                    if (view.titleHtml) {
-                        p.titleHtml = view.titleHtml;
-                    }
-                    else {
-                        if (p.label) {
-                            p.title = this.translate(p.label, 'labels', this.scope);
-                        }
-                        else {
-                            p.title = view.title;
-                        }
-                    }
-
-                    this.createView(name + 'Actions', 'views/record/panel-actions', {
-                        el: this.getSelector() +
-                            '.panel[data-name="'+p.name+'"] > .panel-heading > .panel-actions-container',
-                        model: this.model,
-                        defs: p,
-                        scope: this.scope,
-                        entityType: this.entityType,
-                    });
-                });
-            });
-        },
-
-        /**
-         * Set up panels.
-         *
-         * @protected
-         */
-        setupPanels: function () {},
-
-        getFieldViews: function (withHidden) {
-            let fields = {};
-
-            this.panelList.forEach(p => {
-                let panelView = this.getView(p.name);
-
-                if ((!panelView.disabled || withHidden) && 'getFieldViews' in panelView) {
-                    fields = _.extend(fields, panelView.getFieldViews());
-                }
-            });
-
-            return fields;
-        },
-
-        getFields: function () {
-            return this.getFieldViews();
-        },
-
-        fetch: function () {
-            let data = {};
-
-            this.panelList.forEach((p) => {
-                let panelView = this.getView(p.name);
-
-                if (!panelView.disabled && 'fetch' in panelView) {
-                    data = _.extend(data, panelView.fetch());
-                }
-            });
-
-            return data;
-        },
-
-        /**
-         * @param {string} name
-         * @return {boolean}
-         */
-        hasPanel: function (name) {
-            return !!this.panelList.find(item => item.name === name);
-        },
-
-        processShowPanel: function (name, callback, wasShown) {
-            if (this.recordHelper.getPanelStateParam(name, 'hidden')) {
-                return;
-            }
-
-            if (!this.hasPanel(name)) {
-                return;
-            }
-
-            this.panelList.filter(item => item.name === name).forEach(item => {
-                item.hidden = false;
-
-                if (typeof item.tabNumber !== 'undefined') {
-                    this.controlTabVisibilityShow(item.tabNumber);
-                }
-            });
-
-            this.showPanelFinalize(name, callback, wasShown);
-        },
-
-        processHidePanel: function (name, callback) {
-            if (!this.recordHelper.getPanelStateParam(name, 'hidden')) {
-                return;
-            }
-
-            if (!this.hasPanel(name)) {
-                return;
-            }
-
-             this.panelList.filter(item => item.name === name).forEach(item => {
+        actionList.forEach(item => {
+            if (!Espo.Utils.checkActionAvailability(this.getHelper(), item)) {
                 item.hidden = true;
 
-                if (typeof item.tabNumber !== 'undefined') {
-                    this.controlTabVisibilityHide(item.tabNumber);
-                }
-            });
-
-            this.hidePanelFinalize(name, callback);
-        },
-
-        showPanelFinalize: function (name, callback, wasShown) {
-            let process = (wasRendered) => {
-                let view = this.getView(name);
-
-                if (view) {
-                    view.$el.closest('.panel').removeClass('hidden');
-
-                    view.disabled = false;
-                    view.trigger('show');
-                    view.trigger('panel-show-propagated');
-
-                    if (wasRendered && !wasShown && view.getFieldViews) {
-                        let fields = view.getFieldViews();
-
-                        if (fields) {
-                            for (let i in fields) {
-                                fields[i].reRender();
-                            }
-                        }
-                    }
-                }
-
-                if (typeof callback === 'function') {
-                    callback.call(this);
-                }
-            };
-
-            if (this.isRendered()) {
-                process(true);
-
-                this.adjustPanels();
-
                 return;
             }
 
-            this.once('after:render', () => {
-                process();
+            if (Espo.Utils.checkActionAccess(this.getAcl(), this.model, item, true)) {
+                if (item.isHiddenByAcl) {
+                    item.isHiddenByAcl = false;
+                    item.hidden = false;
+                }
+            }
+            else {
+                if (!item.hidden) {
+                    item.isHiddenByAcl = true;
+                    item.hidden = true;
+                }
+            }
+        });
+    },
+
+    /**
+     * Set up panel views.
+     *
+     * @protected
+     */
+    setupPanelViews: function () {
+        this.panelList.forEach(p => {
+            let name = p.name;
+
+            let options = {
+                model: this.model,
+                panelName: name,
+                el: this.options.el + ' .panel[data-name="' + name + '"] > .panel-body',
+                defs: p,
+                mode: this.mode,
+                recordHelper: this.recordHelper,
+                inlineEditDisabled: this.inlineEditDisabled,
+                readOnly: this.readOnly,
+                disabled: p.hidden || false,
+                recordViewObject: this.recordViewObject,
+            };
+
+            options = _.extend(options, p.options);
+
+            this.createView(name, p.view, options, (view) => {
+                if ('getActionList' in view) {
+                    p.actionList = view.getActionList();
+
+                    this.applyAccessToActions(p.actionList);
+                }
+
+                if ('getButtonList' in view) {
+                    p.buttonList = view.getButtonList();
+                    this.applyAccessToActions(p.buttonList);
+                }
+
+                if (view.titleHtml) {
+                    p.titleHtml = view.titleHtml;
+                }
+                else {
+                    if (p.label) {
+                        p.title = this.translate(p.label, 'labels', this.scope);
+                    }
+                    else {
+                        p.title = view.title;
+                    }
+                }
+
+                this.createView(name + 'Actions', 'views/record/panel-actions', {
+                    el: this.getSelector() +
+                        '.panel[data-name="'+p.name+'"] > .panel-heading > .panel-actions-container',
+                    model: this.model,
+                    defs: p,
+                    scope: this.scope,
+                    entityType: this.entityType,
+                });
             });
-        },
+        });
+    },
 
-        hidePanelFinalize: function (name, callback) {
-            if (this.isRendered()) {
-                let view = this.getView(name);
+    /**
+     * Set up panels.
+     *
+     * @protected
+     */
+    setupPanels: function () {},
 
-                if (view) {
-                    view.$el.closest('.panel').addClass('hidden');
-                    view.disabled = true;
-                    view.trigger('hide');
+    getFieldViews: function (withHidden) {
+        let fields = {};
+
+        this.panelList.forEach(p => {
+            let panelView = this.getView(p.name);
+
+            if ((!panelView.disabled || withHidden) && 'getFieldViews' in panelView) {
+                fields = _.extend(fields, panelView.getFieldViews());
+            }
+        });
+
+        return fields;
+    },
+
+    getFields: function () {
+        return this.getFieldViews();
+    },
+
+    fetch: function () {
+        let data = {};
+
+        this.panelList.forEach((p) => {
+            let panelView = this.getView(p.name);
+
+            if (!panelView.disabled && 'fetch' in panelView) {
+                data = _.extend(data, panelView.fetch());
+            }
+        });
+
+        return data;
+    },
+
+    /**
+     * @param {string} name
+     * @return {boolean}
+     */
+    hasPanel: function (name) {
+        return !!this.panelList.find(item => item.name === name);
+    },
+
+    processShowPanel: function (name, callback, wasShown) {
+        if (this.recordHelper.getPanelStateParam(name, 'hidden')) {
+            return;
+        }
+
+        if (!this.hasPanel(name)) {
+            return;
+        }
+
+        this.panelList.filter(item => item.name === name).forEach(item => {
+            item.hidden = false;
+
+            if (typeof item.tabNumber !== 'undefined') {
+                this.controlTabVisibilityShow(item.tabNumber);
+            }
+        });
+
+        this.showPanelFinalize(name, callback, wasShown);
+    },
+
+    processHidePanel: function (name, callback) {
+        if (!this.recordHelper.getPanelStateParam(name, 'hidden')) {
+            return;
+        }
+
+        if (!this.hasPanel(name)) {
+            return;
+        }
+
+         this.panelList.filter(item => item.name === name).forEach(item => {
+            item.hidden = true;
+
+            if (typeof item.tabNumber !== 'undefined') {
+                this.controlTabVisibilityHide(item.tabNumber);
+            }
+        });
+
+        this.hidePanelFinalize(name, callback);
+    },
+
+    showPanelFinalize: function (name, callback, wasShown) {
+        let process = (wasRendered) => {
+            let view = this.getView(name);
+
+            if (view) {
+                view.$el.closest('.panel').removeClass('hidden');
+
+                view.disabled = false;
+                view.trigger('show');
+                view.trigger('panel-show-propagated');
+
+                if (wasRendered && !wasShown && view.getFieldViews) {
+                    let fields = view.getFieldViews();
+
+                    if (fields) {
+                        for (let i in fields) {
+                            fields[i].reRender();
+                        }
+                    }
                 }
-
-                if (typeof callback === 'function') {
-                    callback.call(this);
-                }
-
-                this.adjustPanels();
-
-                return;
             }
 
             if (typeof callback === 'function') {
-                this.once('after:render', () => {
-                    callback.call(this);
-                });
-            }
-        },
-
-        showPanel: function (name, softLockedType, callback) {
-            if (!this.hasPanel(name)) {
-                return;
-            }
-
-            if (this.recordHelper.getPanelStateParam(name, 'hiddenLocked')) {
-                return;
-            }
-
-            if (softLockedType) {
-                let param = 'hidden' + Espo.Utils.upperCaseFirst(softLockedType) + 'Locked';
-
-                this.recordHelper.setPanelStateParam(name, param, false);
-
-                for (let i = 0; i < this.panelSoftLockedTypeList.length; i++) {
-                    let iType = this.panelSoftLockedTypeList[i];
-
-                    if (iType === softLockedType) {
-                        continue;
-                    }
-
-                    let iParam = 'hidden' +  Espo.Utils.upperCaseFirst(iType) + 'Locked';
-
-                    if (this.recordHelper.getPanelStateParam(name, iParam)) {
-                        return;
-                    }
-                }
-            }
-
-            let wasShown = this.recordHelper.getPanelStateParam(name, 'hidden') === false;
-
-            this.recordHelper.setPanelStateParam(name, 'hidden', false);
-
-            this.processShowPanel(name, callback, wasShown);
-        },
-
-        hidePanel: function (name, locked, softLockedType, callback) {
-            if (!this.hasPanel(name)) {
-                return;
-            }
-
-            this.recordHelper.setPanelStateParam(name, 'hidden', true);
-
-            if (locked) {
-                this.recordHelper.setPanelStateParam(name, 'hiddenLocked', true);
-            }
-
-            if (softLockedType) {
-                let param = 'hidden' + Espo.Utils.upperCaseFirst(softLockedType) + 'Locked';
-
-                this.recordHelper.setPanelStateParam(name, param, true);
-            }
-
-            this.processHidePanel(name, callback);
-        },
-
-        alterPanels: function (layoutData) {
-            layoutData = layoutData || this.layoutData || {};
-
-            let tabBreakIndexList = [];
-
-            let tabDataList = [];
-
-            for (let name in layoutData) {
-                let item = layoutData[name];
-
-                if (name === '_delimiter_') {
-                    this.panelList.push({
-                        name: name,
-                    });
-                }
-
-                if (item.tabBreak) {
-                    tabBreakIndexList.push(item.index);
-
-                    tabDataList.push({
-                        index: item.index,
-                        label: item.tabLabel,
-                    })
-                }
-            }
-
-            /**
-             * @private
-             * @type {Object.<string,*>[]}
-             */
-            this.tabDataList = tabDataList.sort((v1, v2) => v1.index - v2.index);
-
-            let newList = [];
-
-            this.panelList.forEach((item, i) => {
-                item.index = ('index' in item) ? item.index : i;
-
-                let allowedInLayout = false;
-
-                if (item.name) {
-                    let itemData = layoutData[item.name] || {};
-
-                    if (itemData.disabled) {
-                        return;
-                    }
-
-                    if (layoutData[item.name]) {
-                        allowedInLayout = true;
-                    }
-
-                    for (let i in itemData) {
-                        item[i] = itemData[i];
-                    }
-                }
-
-                if (item.disabled && !allowedInLayout) {
-                    return;
-                }
-
-                item.tabNumber = tabBreakIndexList.length -
-                    tabBreakIndexList.slice().reverse().findIndex(index => item.index > index) - 1;
-
-                if (item.tabNumber === tabBreakIndexList.length) {
-                    item.tabNumber = -1;
-                }
-
-                newList.push(item);
-            });
-
-            newList.sort((v1, v2) => v1.index - v2.index);
-
-            let firstTabIndex = newList.findIndex(item => item.tabNumber !== -1);
-
-            if (firstTabIndex !== -1) {
-                newList[firstTabIndex].isTabsBeginning = true;
-                this.hasTabs = true;
-                this.currentTab = newList[firstTabIndex].tabNumber;
-
-                this.panelList
-                    .filter(item => item.tabNumber !== -1 && item.tabNumber !== this.currentTab)
-                    .forEach(item => {
-                        item.tabHidden = true;
-                    });
-
-                this.panelList
-                    .forEach((item, i) => {
-                        if (
-                            item.tabNumber !== -1 &&
-                            (i === 0 || this.panelList[i - 1].tabNumber !== item.tabNumber)
-                        ) {
-                            item.sticked = false;
-                        }
-                    });
-            }
-
-            this.panelList = newList;
-
-            if (this.recordViewObject && this.recordViewObject.dynamicLogic) {
-                let dynamicLogic = this.recordViewObject.dynamicLogic;
-
-                this.panelList.forEach(item => {
-                    if (item.dynamicLogicVisible) {
-                        dynamicLogic.addPanelVisibleCondition(item.name, item.dynamicLogicVisible);
-
-                        if (this.recordHelper.getPanelStateParam(item.name, 'hidden')) {
-                            item.hidden = true;
-                        }
-                    }
-
-                    if (item.style && item.style !== 'default' && item.dynamicLogicStyled) {
-                        dynamicLogic.addPanelStyledCondition(item.name, item.dynamicLogicStyled);
-                    }
-                });
-            }
-
-            if (
-                this.hasTabs &&
-                this.options.isReturn &&
-                this.isStoredTabForThisRecord()
-            ) {
-                this.selectStoredTab();
-            }
-        },
-
-        setupPanelsFinal: function () {
-            let afterDelimiter = false;
-            let rightAfterDelimiter = false;
-
-            let index = -1;
-
-            this.panelList.forEach((p, i) => {
-                if (p.name === '_delimiter_') {
-                    afterDelimiter = true;
-                    rightAfterDelimiter = true;
-                    index = i;
-
-                    return;
-                }
-
-                if (afterDelimiter) {
-                    p.hidden = true;
-                    p.hiddenAfterDelimiter = true;
-
-                    this.recordHelper.setPanelStateParam(p.name, 'hidden', true);
-                    this.recordHelper.setPanelStateParam(p.name, 'hiddenDelimiterLocked', true);
-                }
-
-                if (rightAfterDelimiter) {
-                    p.isRightAfterDelimiter = true;
-                    rightAfterDelimiter = false;
-                }
-            });
-
-            if (~index) {
-                this.panelList.splice(index, 1);
-            }
-
-            this.panelList = this.panelList.filter((p) => {
-                return !this.recordHelper.getPanelStateParam(p.name, 'hiddenLocked');
-            });
-
-            this.panelsAreSet = true;
-
-            this.trigger('panels-set');
-        },
-
-        actionShowMorePanels: function () {
-            this.panelList.forEach(p => {
-                if (!p.hiddenAfterDelimiter) {
-                    return;
-                }
-
-                delete p.isRightAfterDelimiter;
-
-                this.showPanel(p.name, 'delimiter');
-            });
-
-            this.$el.find('.panels-show-more-delimiter').remove();
-        },
-
-        onPanelsReady: function (callback) {
-            Promise.race([
-                new Promise(resolve => {
-                    if (this.panelsAreSet) {
-                        resolve();
-                    }
-                }),
-                new Promise(resolve => {
-                    this.once('panels-set', resolve);
-                })
-            ]).then(() => {
                 callback.call(this);
-            });
-        },
+            }
+        };
 
-        getTabDataList: function () {
-            return this.tabDataList.map((item, i) => {
-                let label = item.label;
+        if (this.isRendered()) {
+            process(true);
 
-                if (!label) {
-                    label = (i + 1).toString();
-                }
-                else if (label[0] === '$') {
-                    label = this.translate(label.substring(1), 'tabs', this.scope);
-                }
+            this.adjustPanels();
 
-                let hidden = this.panelList
-                    .filter(panel => panel.tabNumber === i)
-                    .findIndex(panel => !this.recordHelper.getPanelStateParam(panel.name, 'hidden')) === -1;
+            return;
+        }
 
-                return {
-                    label: label,
-                    isActive: i === this.currentTab,
-                    hidden: hidden,
-                };
-            });
-        },
+        this.once('after:render', () => {
+            process();
+        });
+    },
 
-        selectTab: function (tab) {
-            this.currentTab = tab;
+    hidePanelFinalize: function (name, callback) {
+        if (this.isRendered()) {
+            let view = this.getView(name);
 
-            if (this.isRendered()) {
-                $('body > .popover').remove();
+            if (view) {
+                view.$el.closest('.panel').addClass('hidden');
+                view.disabled = true;
+                view.trigger('hide');
+            }
 
-                this.$el.find('.tabs > button').removeClass('active');
-                this.$el.find(`.tabs > button[data-tab="${tab}"]`).addClass('active');
-
-                this.$el.find('.panel[data-tab]:not([data-tab="-1"])').addClass('tab-hidden');
-                this.$el.find(`.panel[data-tab="${tab}"]`).removeClass('tab-hidden');
+            if (typeof callback === 'function') {
+                callback.call(this);
             }
 
             this.adjustPanels();
 
+            return;
+        }
+
+        if (typeof callback === 'function') {
+            this.once('after:render', () => {
+                callback.call(this);
+            });
+        }
+    },
+
+    showPanel: function (name, softLockedType, callback) {
+        if (!this.hasPanel(name)) {
+            return;
+        }
+
+        if (this.recordHelper.getPanelStateParam(name, 'hiddenLocked')) {
+            return;
+        }
+
+        if (softLockedType) {
+            let param = 'hidden' + Espo.Utils.upperCaseFirst(softLockedType) + 'Locked';
+
+            this.recordHelper.setPanelStateParam(name, param, false);
+
+            for (let i = 0; i < this.panelSoftLockedTypeList.length; i++) {
+                let iType = this.panelSoftLockedTypeList[i];
+
+                if (iType === softLockedType) {
+                    continue;
+                }
+
+                let iParam = 'hidden' +  Espo.Utils.upperCaseFirst(iType) + 'Locked';
+
+                if (this.recordHelper.getPanelStateParam(name, iParam)) {
+                    return;
+                }
+            }
+        }
+
+        let wasShown = this.recordHelper.getPanelStateParam(name, 'hidden') === false;
+
+        this.recordHelper.setPanelStateParam(name, 'hidden', false);
+
+        this.processShowPanel(name, callback, wasShown);
+    },
+
+    hidePanel: function (name, locked, softLockedType, callback) {
+        if (!this.hasPanel(name)) {
+            return;
+        }
+
+        this.recordHelper.setPanelStateParam(name, 'hidden', true);
+
+        if (locked) {
+            this.recordHelper.setPanelStateParam(name, 'hiddenLocked', true);
+        }
+
+        if (softLockedType) {
+            let param = 'hidden' + Espo.Utils.upperCaseFirst(softLockedType) + 'Locked';
+
+            this.recordHelper.setPanelStateParam(name, param, true);
+        }
+
+        this.processHidePanel(name, callback);
+    },
+
+    alterPanels: function (layoutData) {
+        layoutData = layoutData || this.layoutData || {};
+
+        let tabBreakIndexList = [];
+
+        let tabDataList = [];
+
+        for (let name in layoutData) {
+            let item = layoutData[name];
+
+            if (name === '_delimiter_') {
+                this.panelList.push({
+                    name: name,
+                });
+            }
+
+            if (item.tabBreak) {
+                tabBreakIndexList.push(item.index);
+
+                tabDataList.push({
+                    index: item.index,
+                    label: item.tabLabel,
+                })
+            }
+        }
+
+        /**
+         * @private
+         * @type {Object.<string,*>[]}
+         */
+        this.tabDataList = tabDataList.sort((v1, v2) => v1.index - v2.index);
+
+        let newList = [];
+
+        this.panelList.forEach((item, i) => {
+            item.index = ('index' in item) ? item.index : i;
+
+            let allowedInLayout = false;
+
+            if (item.name) {
+                let itemData = layoutData[item.name] || {};
+
+                if (itemData.disabled) {
+                    return;
+                }
+
+                if (layoutData[item.name]) {
+                    allowedInLayout = true;
+                }
+
+                for (let i in itemData) {
+                    item[i] = itemData[i];
+                }
+            }
+
+            if (item.disabled && !allowedInLayout) {
+                return;
+            }
+
+            item.tabNumber = tabBreakIndexList.length -
+                tabBreakIndexList.slice().reverse().findIndex(index => item.index > index) - 1;
+
+            if (item.tabNumber === tabBreakIndexList.length) {
+                item.tabNumber = -1;
+            }
+
+            newList.push(item);
+        });
+
+        newList.sort((v1, v2) => v1.index - v2.index);
+
+        let firstTabIndex = newList.findIndex(item => item.tabNumber !== -1);
+
+        if (firstTabIndex !== -1) {
+            newList[firstTabIndex].isTabsBeginning = true;
+            this.hasTabs = true;
+            this.currentTab = newList[firstTabIndex].tabNumber;
+
             this.panelList
-                .filter(item => item.tabNumber === tab && item.name)
+                .filter(item => item.tabNumber !== -1 && item.tabNumber !== this.currentTab)
                 .forEach(item => {
-                    let view = this.getView(item.name);
-
-                    if (view) {
-                        view.trigger('tab-show');
-
-                        view.propagateEvent('panel-show-propagated');
-                    }
-
-                    item.tabHidden = false;
+                    item.tabHidden = true;
                 });
 
             this.panelList
-                .filter(item => item.tabNumber !== tab && item.name)
-                .forEach(item => {
-                    let view = this.getView(item.name);
-
-                    if (view) {
-                        view.trigger('tab-hide');
-                    }
-
-                    if (item.tabNumber > -1) {
-                        item.tabHidden = true;
+                .forEach((item, i) => {
+                    if (
+                        item.tabNumber !== -1 &&
+                        (i === 0 || this.panelList[i - 1].tabNumber !== item.tabNumber)
+                    ) {
+                        item.sticked = false;
                     }
                 });
+        }
 
-            this.storeTab();
-        },
+        this.panelList = newList;
 
-        /**
-         * @private
-         */
-        storeTab: function () {
-            let key = 'tab_' + this.name;
-            let keyRecord = 'tab_' + this.name + '_record';
+        if (this.recordViewObject && this.recordViewObject.dynamicLogic) {
+            let dynamicLogic = this.recordViewObject.dynamicLogic;
 
-            this.getSessionStorage().set(key, this.currentTab);
-            this.getSessionStorage().set(keyRecord, this.entityType + '_' + this.model.id);
-        },
+            this.panelList.forEach(item => {
+                if (item.dynamicLogicVisible) {
+                    dynamicLogic.addPanelVisibleCondition(item.name, item.dynamicLogicVisible);
 
-        /**
-         * @private
-         */
-        isStoredTabForThisRecord: function () {
-            let keyRecord = 'tab_' + this.name + '_record';
+                    if (this.recordHelper.getPanelStateParam(item.name, 'hidden')) {
+                        item.hidden = true;
+                    }
+                }
 
-            return this.getSessionStorage().get(keyRecord) === this.entityType + '_' + this.model.id;
-        },
+                if (item.style && item.style !== 'default' && item.dynamicLogicStyled) {
+                    dynamicLogic.addPanelStyledCondition(item.name, item.dynamicLogicStyled);
+                }
+            });
+        }
 
-        /**
-         * @private
-         */
-        selectStoredTab: function () {
-            let key = 'tab_' + this.name;
+        if (
+            this.hasTabs &&
+            this.options.isReturn &&
+            this.isStoredTabForThisRecord()
+        ) {
+            this.selectStoredTab();
+        }
+    },
 
-            let tab = this.getSessionStorage().get(key);
+    setupPanelsFinal: function () {
+        let afterDelimiter = false;
+        let rightAfterDelimiter = false;
 
-            if (tab > 0) {
-                this.selectTab(tab);
-            }
-        },
+        let index = -1;
 
-        /**
-         * @private
-         */
-        controlTabVisibilityShow: function (tab) {
-            if (!this.hasTabs) {
-                return;
-            }
-
-            if (this.isBeingRendered()) {
-                this.once('after:render', () => this.controlTabVisibilityShow(tab));
+        this.panelList.forEach((p, i) => {
+            if (p.name === '_delimiter_') {
+                afterDelimiter = true;
+                rightAfterDelimiter = true;
+                index = i;
 
                 return;
             }
 
-            this.$el.find(`.tabs > [data-tab="${tab.toString()}"]`).removeClass('hidden');
-        },
+            if (afterDelimiter) {
+                p.hidden = true;
+                p.hiddenAfterDelimiter = true;
 
-        /**
-         * @private
-         */
-        controlTabVisibilityHide: function (tab) {
-            if (!this.hasTabs) {
+                this.recordHelper.setPanelStateParam(p.name, 'hidden', true);
+                this.recordHelper.setPanelStateParam(p.name, 'hiddenDelimiterLocked', true);
+            }
+
+            if (rightAfterDelimiter) {
+                p.isRightAfterDelimiter = true;
+                rightAfterDelimiter = false;
+            }
+        });
+
+        if (~index) {
+            this.panelList.splice(index, 1);
+        }
+
+        this.panelList = this.panelList.filter((p) => {
+            return !this.recordHelper.getPanelStateParam(p.name, 'hiddenLocked');
+        });
+
+        this.panelsAreSet = true;
+
+        this.trigger('panels-set');
+    },
+
+    actionShowMorePanels: function () {
+        this.panelList.forEach(p => {
+            if (!p.hiddenAfterDelimiter) {
                 return;
             }
 
-            if (this.isBeingRendered()) {
-                this.once('after:render', () => this.controlTabVisibilityHide(tab));
+            delete p.isRightAfterDelimiter;
 
-                return;
+            this.showPanel(p.name, 'delimiter');
+        });
+
+        this.$el.find('.panels-show-more-delimiter').remove();
+    },
+
+    onPanelsReady: function (callback) {
+        Promise.race([
+            new Promise(resolve => {
+                if (this.panelsAreSet) {
+                    resolve();
+                }
+            }),
+            new Promise(resolve => {
+                this.once('panels-set', resolve);
+            })
+        ]).then(() => {
+            callback.call(this);
+        });
+    },
+
+    getTabDataList: function () {
+        return this.tabDataList.map((item, i) => {
+            let label = item.label;
+
+            if (!label) {
+                label = (i + 1).toString();
+            }
+            else if (label[0] === '$') {
+                label = this.translate(label.substring(1), 'tabs', this.scope);
             }
 
-            let panelList = this.panelList.filter(panel => panel.tabNumber === tab);
-
-            let allIsHidden = panelList
+            let hidden = this.panelList
+                .filter(panel => panel.tabNumber === i)
                 .findIndex(panel => !this.recordHelper.getPanelStateParam(panel.name, 'hidden')) === -1;
 
-            if (!allIsHidden) {
-                return;
-            }
+            return {
+                label: label,
+                isActive: i === this.currentTab,
+                hidden: hidden,
+            };
+        });
+    },
 
-            let $tab = this.$el.find(`.tabs > [data-tab="${tab.toString()}"]`);
+    selectTab: function (tab) {
+        this.currentTab = tab;
 
-            $tab.addClass('hidden');
+        if (this.isRendered()) {
+            $('body > .popover').remove();
 
-            if (this.currentTab === tab) {
-                let firstVisiblePanel = this.panelList
-                    .find(panel => panel.tabNumber > -1 && !panel.hidden);
+            this.$el.find('.tabs > button').removeClass('active');
+            this.$el.find(`.tabs > button[data-tab="${tab}"]`).addClass('active');
 
-                let firstVisibleTab = firstVisiblePanel ?
-                    firstVisiblePanel.tabNumber : 0;
+            this.$el.find('.panel[data-tab]:not([data-tab="-1"])').addClass('tab-hidden');
+            this.$el.find(`.panel[data-tab="${tab}"]`).removeClass('tab-hidden');
+        }
 
-                this.selectTab(firstVisibleTab);
-            }
-        },
-    });
+        this.adjustPanels();
+
+        this.panelList
+            .filter(item => item.tabNumber === tab && item.name)
+            .forEach(item => {
+                let view = this.getView(item.name);
+
+                if (view) {
+                    view.trigger('tab-show');
+
+                    view.propagateEvent('panel-show-propagated');
+                }
+
+                item.tabHidden = false;
+            });
+
+        this.panelList
+            .filter(item => item.tabNumber !== tab && item.name)
+            .forEach(item => {
+                let view = this.getView(item.name);
+
+                if (view) {
+                    view.trigger('tab-hide');
+                }
+
+                if (item.tabNumber > -1) {
+                    item.tabHidden = true;
+                }
+            });
+
+        this.storeTab();
+    },
+
+    /**
+     * @private
+     */
+    storeTab: function () {
+        let key = 'tab_' + this.name;
+        let keyRecord = 'tab_' + this.name + '_record';
+
+        this.getSessionStorage().set(key, this.currentTab);
+        this.getSessionStorage().set(keyRecord, this.entityType + '_' + this.model.id);
+    },
+
+    /**
+     * @private
+     */
+    isStoredTabForThisRecord: function () {
+        let keyRecord = 'tab_' + this.name + '_record';
+
+        return this.getSessionStorage().get(keyRecord) === this.entityType + '_' + this.model.id;
+    },
+
+    /**
+     * @private
+     */
+    selectStoredTab: function () {
+        let key = 'tab_' + this.name;
+
+        let tab = this.getSessionStorage().get(key);
+
+        if (tab > 0) {
+            this.selectTab(tab);
+        }
+    },
+
+    /**
+     * @private
+     */
+    controlTabVisibilityShow: function (tab) {
+        if (!this.hasTabs) {
+            return;
+        }
+
+        if (this.isBeingRendered()) {
+            this.once('after:render', () => this.controlTabVisibilityShow(tab));
+
+            return;
+        }
+
+        this.$el.find(`.tabs > [data-tab="${tab.toString()}"]`).removeClass('hidden');
+    },
+
+    /**
+     * @private
+     */
+    controlTabVisibilityHide: function (tab) {
+        if (!this.hasTabs) {
+            return;
+        }
+
+        if (this.isBeingRendered()) {
+            this.once('after:render', () => this.controlTabVisibilityHide(tab));
+
+            return;
+        }
+
+        let panelList = this.panelList.filter(panel => panel.tabNumber === tab);
+
+        let allIsHidden = panelList
+            .findIndex(panel => !this.recordHelper.getPanelStateParam(panel.name, 'hidden')) === -1;
+
+        if (!allIsHidden) {
+            return;
+        }
+
+        let $tab = this.$el.find(`.tabs > [data-tab="${tab.toString()}"]`);
+
+        $tab.addClass('hidden');
+
+        if (this.currentTab === tab) {
+            let firstVisiblePanel = this.panelList
+                .find(panel => panel.tabNumber > -1 && !panel.hidden);
+
+            let firstVisibleTab = firstVisiblePanel ?
+                firstVisiblePanel.tabNumber : 0;
+
+            this.selectTab(firstVisibleTab);
+        }
+    },
 });
diff --git a/client/src/views/record/panels/bottom.js b/client/src/views/record/panels/bottom.js
index abb77cb246..1125b9c7e1 100644
--- a/client/src/views/record/panels/bottom.js
+++ b/client/src/views/record/panels/bottom.js
@@ -26,346 +26,346 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/panels/bottom', ['view'], function (Dep) {
+/** @module views/record/panels/bottom */
+
+import Dep from 'view';
+
+/**
+ * A bottom panel.
+ *
+ * @class
+ * @name Class
+ * @extends module:view
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    template: 'record/panels/side',
 
     /**
-     * A bottom panel.
+     * A field list.
      *
-     * @class
-     * @name Class
-     * @extends module:view.Class
-     * @memberOf module:views/record/panels/bottom
+     * @protected
+     * @type {module:views/record/panels/side~field[]}
      */
-    return Dep.extend(/** module:views/record/panels/bottom.Class# */{
+    fieldList: null,
 
-        template: 'record/panels/side',
+    /**
+     * @protected
+     * @type {module:views/record/panels-container~action[]}
+     */
+    actionList: null,
 
-        /**
-         * A field list.
-         *
-         * @protected
-         * @type {module:views/record/panels/side~field[]}
-         */
-        fieldList: null,
+    /**
+     * @protected
+     * @type {module:views/record/panels-container~button[]}
+     */
+    buttonList: null,
 
-        /**
-         * @protected
-         * @type {module:views/record/panels-container~action[]}
-         */
-        actionList: null,
+    defs: null,
 
-        /**
-         * @protected
-         * @type {module:views/record/panels-container~button[]}
-         */
-        buttonList: null,
+    /**
+     * A mode.
+     *
+     * @protected
+     * @type {'list'|'detail'|'edit'}
+     */
+    mode: 'detail',
 
-        defs: null,
+    /**
+     * Disable.
+     *
+     * @protected
+     */
+    disabled: false,
 
-        /**
-         * A mode.
-         *
-         * @protected
-         * @type {'list'|'detail'|'edit'}
-         */
-        mode: 'detail',
+    events: {
+        'click .action': function (e) {
+            var $el = $(e.currentTarget);
+            var action = $el.data('action');
+            var method = 'action' + Espo.Utils.upperCaseFirst(action);
 
-        /**
-         * Disable.
-         *
-         * @protected
-         */
-        disabled: false,
+            if (typeof this[method] === 'function') {
+                var data = $el.data();
+                this[method](data, e);
 
-        events: {
-            'click .action': function (e) {
-                var $el = $(e.currentTarget);
-                var action = $el.data('action');
-                var method = 'action' + Espo.Utils.upperCaseFirst(action);
-
-                if (typeof this[method] === 'function') {
-                    var data = $el.data();
-                    this[method](data, e);
-
-                    e.preventDefault();
-                }
+                e.preventDefault();
             }
-        },
+        }
+    },
 
-        data: function () {
-            return {
-                scope: this.scope,
-                name: this.panelName,
-                hiddenFields: this.recordHelper.getHiddenFields(),
-                fieldList: this.getFieldList(),
-            };
-        },
+    data: function () {
+        return {
+            scope: this.scope,
+            name: this.panelName,
+            hiddenFields: this.recordHelper.getHiddenFields(),
+            fieldList: this.getFieldList(),
+        };
+    },
 
-        init: function () {
-            this.panelName = this.options.panelName;
-            this.defs = this.options.defs || {};
-            this.recordHelper = this.options.recordHelper;
+    init: function () {
+        this.panelName = this.options.panelName;
+        this.defs = this.options.defs || {};
+        this.recordHelper = this.options.recordHelper;
 
-            if ('disabled' in this.options) {
-                this.disabled = this.options.disabled;
+        if ('disabled' in this.options) {
+            this.disabled = this.options.disabled;
+        }
+
+        this.mode = this.options.mode || this.mode;
+
+        this.readOnlyLocked = this.options.readOnlyLocked || this.readOnly;
+        this.readOnly = this.readOnly || this.options.readOnly;
+        this.inlineEditDisabled = this.inlineEditDisabled || this.options.inlineEditDisabled;
+
+        this.buttonList = Espo.Utils.cloneDeep(this.defs.buttonList || this.buttonList || []);
+        this.actionList = Espo.Utils.cloneDeep(this.defs.actionList || this.actionList || []);
+
+        this.fieldList = this.options.fieldList || this.fieldList || [];
+
+        this.recordViewObject = this.options.recordViewObject;
+    },
+
+    setup: function () {
+        this.setupFields();
+
+        this.fieldList = this.fieldList.map((d) => {
+            var item = d;
+
+            if (typeof item !== 'object') {
+                item = {
+                    name: item,
+                    viewKey: item + 'Field',
+                };
             }
 
-            this.mode = this.options.mode || this.mode;
+            item = Espo.Utils.clone(item);
+            item.viewKey = item.name + 'Field';
+            item.label = item.label || item.name;
 
-            this.readOnlyLocked = this.options.readOnlyLocked || this.readOnly;
-            this.readOnly = this.readOnly || this.options.readOnly;
-            this.inlineEditDisabled = this.inlineEditDisabled || this.options.inlineEditDisabled;
-
-            this.buttonList = Espo.Utils.cloneDeep(this.defs.buttonList || this.buttonList || []);
-            this.actionList = Espo.Utils.cloneDeep(this.defs.actionList || this.actionList || []);
-
-            this.fieldList = this.options.fieldList || this.fieldList || [];
-
-            this.recordViewObject = this.options.recordViewObject;
-        },
-
-        setup: function () {
-            this.setupFields();
-
-            this.fieldList = this.fieldList.map((d) => {
-                var item = d;
-
-                if (typeof item !== 'object') {
-                    item = {
-                        name: item,
-                        viewKey: item + 'Field',
-                    };
-                }
-
-                item = Espo.Utils.clone(item);
-                item.viewKey = item.name + 'Field';
-                item.label = item.label || item.name;
-
-                if (this.recordHelper.getFieldStateParam(item.name, 'hidden') !== null) {
-                    item.hidden = this.recordHelper.getFieldStateParam(item.name, 'hidden');
-                }
-                else {
-                    this.recordHelper.setFieldStateParam(item.name, item.hidden || false);
-                }
-
-                return item;
-            });
-
-            this.fieldList = this.fieldList.filter((item) => {
-                if (!item.name) {
-                    return;
-                }
-
-                if (!(item.name in (((this.model.defs || {}).fields) || {}))) {
-                    return;
-                }
-
-                return true;
-            });
-
-            this.createFields();
-        },
-
-        /**
-         * Set up fields.
-         *
-         * @protected
-         */
-        setupFields: function () {},
-
-        /**
-         * @return {module:views/record/panels-container~button[]}
-         */
-        getButtonList: function () {
-            return this.buttonList || [];
-        },
-
-        /**
-         * @return {module:views/record/panels-container~action[]}
-         */
-        getActionList: function () {
-            return this.actionList || [];
-        },
-
-        /**
-         * Get field views.
-         *
-         * @return {Object.<string,module:views/fields/base.Class>}
-         */
-        getFieldViews: function () {
-            var fields = {};
-
-            this.getFieldList().forEach((item) => {
-                if (this.hasView(item.viewKey)) {
-                    fields[item.name] = this.getView(item.viewKey);
-                }
-            });
-
-            return fields;
-        },
-
-        /**
-         * @deprecated Use `getFieldViews`.
-         */
-        getFields: function () {
-            return this.getFieldViews();
-        },
-
-        /**
-         * Get a field list.
-         *
-         * @return {module:views/record/panels/side~field[]}
-         */
-        getFieldList: function () {
-            return this.fieldList.map(item => {
-                if (typeof item !== 'object') {
-                    return {
-                        name: item
-                    };
-                }
-
-                return item;
-            });
-        },
-
-        /**
-         * @private
-         */
-        createFields: function () {
-            this.getFieldList().forEach((item) => {
-                var view = null;
-                var field;
-                var readOnly = null;
-
-                if (typeof item === 'object') {
-                    field = item.name;
-                    view = item.view;
-                    if ('readOnly' in item) {
-                        readOnly = item.readOnly;
-                    }
-                }
-                else {
-                   field = item;
-                }
-
-                if (!(field in this.model.defs.fields)) {
-                    return;
-                }
-
-                this.createField(field, view, null, null, readOnly);
-            });
-        },
-
-        /**
-         * Create a field view.
-         *
-         * @protected
-         * @param {string} field A field name.
-         * @param {string|null} [viewName] A view name/path.
-         * @param {Object<string,*>} [params] Field params.
-         * @param {'detail'|'edit'|'list'|null} [mode='edit'] A mode.
-         * @param {boolean} [readOnly] Read-only.
-         * @param {Object<string,*>} [options] View options.
-         */
-        createField: function (field, viewName, params, mode, readOnly, options) {
-            var type = this.model.getFieldType(field) || 'base';
-
-            viewName = viewName ||
-                this.model.getFieldParam(field, 'view') ||
-                this.getFieldManager().getViewName(type);
-
-            var o = {
-                model: this.model,
-                el: this.options.el + ' .field[data-name="' + field + '"]',
-                defs: {
-                    name: field,
-                    params: params || {},
-                },
-                mode: mode || this.mode,
-            };
-
-            if (options) {
-                for (var param in options) {
-                    o[param] = options[param];
-                }
-            }
-
-            var readOnlyLocked = this.readOnlyLocked;
-
-            if (this.readOnly) {
-                o.readOnly = true;
+            if (this.recordHelper.getFieldStateParam(item.name, 'hidden') !== null) {
+                item.hidden = this.recordHelper.getFieldStateParam(item.name, 'hidden');
             }
             else {
-                if (readOnly !== null) {
-                    o.readOnly = readOnly;
+                this.recordHelper.setFieldStateParam(item.name, item.hidden || false);
+            }
+
+            return item;
+        });
+
+        this.fieldList = this.fieldList.filter((item) => {
+            if (!item.name) {
+                return;
+            }
+
+            if (!(item.name in (((this.model.defs || {}).fields) || {}))) {
+                return;
+            }
+
+            return true;
+        });
+
+        this.createFields();
+    },
+
+    /**
+     * Set up fields.
+     *
+     * @protected
+     */
+    setupFields: function () {},
+
+    /**
+     * @return {module:views/record/panels-container~button[]}
+     */
+    getButtonList: function () {
+        return this.buttonList || [];
+    },
+
+    /**
+     * @return {module:views/record/panels-container~action[]}
+     */
+    getActionList: function () {
+        return this.actionList || [];
+    },
+
+    /**
+     * Get field views.
+     *
+     * @return {Object.<string,module:views/fields/base>}
+     */
+    getFieldViews: function () {
+        var fields = {};
+
+        this.getFieldList().forEach((item) => {
+            if (this.hasView(item.viewKey)) {
+                fields[item.name] = this.getView(item.viewKey);
+            }
+        });
+
+        return fields;
+    },
+
+    /**
+     * @deprecated Use `getFieldViews`.
+     */
+    getFields: function () {
+        return this.getFieldViews();
+    },
+
+    /**
+     * Get a field list.
+     *
+     * @return {module:views/record/panels/side~field[]}
+     */
+    getFieldList: function () {
+        return this.fieldList.map(item => {
+            if (typeof item !== 'object') {
+                return {
+                    name: item
+                };
+            }
+
+            return item;
+        });
+    },
+
+    /**
+     * @private
+     */
+    createFields: function () {
+        this.getFieldList().forEach((item) => {
+            var view = null;
+            var field;
+            var readOnly = null;
+
+            if (typeof item === 'object') {
+                field = item.name;
+                view = item.view;
+                if ('readOnly' in item) {
+                    readOnly = item.readOnly;
                 }
             }
-
-            if (readOnly) {
-                readOnlyLocked = true;
+            else {
+               field = item;
             }
 
-            if (this.inlineEditDisabled) {
-                o.inlineEditDisabled = true;
+            if (!(field in this.model.defs.fields)) {
+                return;
             }
 
-            if (this.recordHelper.getFieldStateParam(field, 'hidden')) {
-                o.disabled = true;
+            this.createField(field, view, null, null, readOnly);
+        });
+    },
+
+    /**
+     * Create a field view.
+     *
+     * @protected
+     * @param {string} field A field name.
+     * @param {string|null} [viewName] A view name/path.
+     * @param {Object<string,*>} [params] Field params.
+     * @param {'detail'|'edit'|'list'|null} [mode='edit'] A mode.
+     * @param {boolean} [readOnly] Read-only.
+     * @param {Object<string,*>} [options] View options.
+     */
+    createField: function (field, viewName, params, mode, readOnly, options) {
+        var type = this.model.getFieldType(field) || 'base';
+
+        viewName = viewName ||
+            this.model.getFieldParam(field, 'view') ||
+            this.getFieldManager().getViewName(type);
+
+        var o = {
+            model: this.model,
+            el: this.options.el + ' .field[data-name="' + field + '"]',
+            defs: {
+                name: field,
+                params: params || {},
+            },
+            mode: mode || this.mode,
+        };
+
+        if (options) {
+            for (var param in options) {
+                o[param] = options[param];
             }
-            if (this.recordHelper.getFieldStateParam(field, 'hiddenLocked')) {
-                o.disabledLocked = true;
+        }
+
+        var readOnlyLocked = this.readOnlyLocked;
+
+        if (this.readOnly) {
+            o.readOnly = true;
+        }
+        else {
+            if (readOnly !== null) {
+                o.readOnly = readOnly;
             }
+        }
 
-            if (this.recordHelper.getFieldStateParam(field, 'readOnly')) {
-                o.readOnly = true;
-            }
+        if (readOnly) {
+            readOnlyLocked = true;
+        }
 
-            if (this.recordHelper.getFieldStateParam(field, 'required') !== null) {
-                o.defs.params.required = this.recordHelper.getFieldStateParam(field, 'required');
-            }
+        if (this.inlineEditDisabled) {
+            o.inlineEditDisabled = true;
+        }
 
-            if (!readOnlyLocked && this.recordHelper.getFieldStateParam(field, 'readOnlyLocked')) {
-                readOnlyLocked = true;
-            }
+        if (this.recordHelper.getFieldStateParam(field, 'hidden')) {
+            o.disabled = true;
+        }
+        if (this.recordHelper.getFieldStateParam(field, 'hiddenLocked')) {
+            o.disabledLocked = true;
+        }
 
-            if (readOnlyLocked) {
-                o.readOnlyLocked = readOnlyLocked;
-            }
+        if (this.recordHelper.getFieldStateParam(field, 'readOnly')) {
+            o.readOnly = true;
+        }
 
-            if (this.recordHelper.hasFieldOptionList(field)) {
-                o.customOptionList = this.recordHelper.getFieldOptionList(field);
-            }
+        if (this.recordHelper.getFieldStateParam(field, 'required') !== null) {
+            o.defs.params.required = this.recordHelper.getFieldStateParam(field, 'required');
+        }
 
-            if (this.recordViewObject) {
-                o.validateCallback = () => this.recordViewObject.validateField(field);
-            }
+        if (!readOnlyLocked && this.recordHelper.getFieldStateParam(field, 'readOnlyLocked')) {
+            readOnlyLocked = true;
+        }
 
-            var viewKey = field + 'Field';
+        if (readOnlyLocked) {
+            o.readOnlyLocked = readOnlyLocked;
+        }
 
-            this.createView(viewKey, viewName, o);
-        },
+        if (this.recordHelper.hasFieldOptionList(field)) {
+            o.customOptionList = this.recordHelper.getFieldOptionList(field);
+        }
 
-        /**
-         * Is tab-hidden.
-         *
-         * @return {boolean}
-         */
-        isTabHidden: function () {
-            if (this.defs.tabNumber === -1 || typeof this.defs.tabNumber === 'undefined') {
-                return false;
-            }
+        if (this.recordViewObject) {
+            o.validateCallback = () => this.recordViewObject.validateField(field);
+        }
 
-            let parentView = this.getParentView();
+        var viewKey = field + 'Field';
 
-            if (!parentView) {
-                return this.defs.tabNumber > 0;
-            }
-
-            if (parentView && parentView.hasTabs) {
-                return parentView.currentTab !== defs.tabNumber;
-            }
+        this.createView(viewKey, viewName, o);
+    },
 
+    /**
+     * Is tab-hidden.
+     *
+     * @return {boolean}
+     */
+    isTabHidden: function () {
+        if (this.defs.tabNumber === -1 || typeof this.defs.tabNumber === 'undefined') {
             return false;
-        },
-    });
+        }
+
+        let parentView = this.getParentView();
+
+        if (!parentView) {
+            return this.defs.tabNumber > 0;
+        }
+
+        if (parentView && parentView.hasTabs) {
+            return parentView.currentTab !== defs.tabNumber;
+        }
+
+        return false;
+    },
 });
diff --git a/client/src/views/record/panels/default-side.js b/client/src/views/record/panels/default-side.js
index 560d7f54bc..bc6ccc28b3 100644
--- a/client/src/views/record/panels/default-side.js
+++ b/client/src/views/record/panels/default-side.js
@@ -26,130 +26,128 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/panels/default-side', ['views/record/panels/side'], function (Dep) {
+import Dep from 'views/record/panels/side';
 
-    /**
-     * A default side panel.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/record/panels/side.Class
-     * @memberOf module:views/record/panels/default-side
-     */
-    return Dep.extend(/** @lends module:views/record/panels/default-side.Class */{
+/**
+ * A default side panel.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/record/panels/side
+ */
+export default Dep.extend(/** @lends Class */{
 
-        data: function () {
-            var data = Dep.prototype.data.call(this);
+    data: function () {
+        var data = Dep.prototype.data.call(this);
 
-            if (
-                this.complexCreatedDisabled &&
-                this.complexModifiedDisabled || (!this.hasComplexCreated && !this.hasComplexModified)
-            ) {
-                data.complexDateFieldsDisabled = true;
-            }
+        if (
+            this.complexCreatedDisabled &&
+            this.complexModifiedDisabled || (!this.hasComplexCreated && !this.hasComplexModified)
+        ) {
+            data.complexDateFieldsDisabled = true;
+        }
 
-            data.hasComplexCreated = this.hasComplexCreated;
-            data.hasComplexModified = this.hasComplexModified;
+        data.hasComplexCreated = this.hasComplexCreated;
+        data.hasComplexModified = this.hasComplexModified;
 
-            return data;
-        },
+        return data;
+    },
 
-        setup: function () {
-            this.fieldList = Espo.Utils.cloneDeep(this.fieldList);
+    setup: function () {
+        this.fieldList = Espo.Utils.cloneDeep(this.fieldList);
 
-            this.hasComplexCreated =
-                !!this.getMetadata().get(['entityDefs', this.model.name, 'fields', 'createdAt']) &&
-                !!this.getMetadata().get(['entityDefs', this.model.name, 'fields', 'createdBy']);
+        this.hasComplexCreated =
+            !!this.getMetadata().get(['entityDefs', this.model.name, 'fields', 'createdAt']) &&
+            !!this.getMetadata().get(['entityDefs', this.model.name, 'fields', 'createdBy']);
 
-            this.hasComplexModified =
-                !!this.getMetadata().get(['entityDefs', this.model.name, 'fields', 'modifiedAt']) &&
-                !!this.getMetadata().get(['entityDefs', this.model.name, 'fields', 'modifiedBy']);
+        this.hasComplexModified =
+            !!this.getMetadata().get(['entityDefs', this.model.name, 'fields', 'modifiedAt']) &&
+            !!this.getMetadata().get(['entityDefs', this.model.name, 'fields', 'modifiedBy']);
 
-            Dep.prototype.setup.call(this);
-        },
+        Dep.prototype.setup.call(this);
+    },
 
-        setupFields: function () {
-            Dep.prototype.setupFields.call(this);
+    setupFields: function () {
+        Dep.prototype.setupFields.call(this);
 
-            if (!this.complexCreatedDisabled) {
-                if (this.hasComplexCreated) {
-                    this.fieldList.push({
-                        name: 'complexCreated',
-                        labelText: this.translate('Created'),
-                        isAdditional: true,
-                        view: 'views/fields/complex-created',
-                        readOnly: true,
-                    });
-
-                    if (!this.model.get('createdById')) {
-                        this.recordViewObject.hideField('complexCreated');
-                    }
-                }
-            } else {
-                this.recordViewObject.hideField('complexCreated');
-            }
-
-            if (!this.complexModifiedDisabled) {
-                if (this.hasComplexModified) {
-                    this.fieldList.push({
-                        name: 'complexModified',
-                        labelText: this.translate('Modified'),
-                        isAdditional: true,
-                        view: 'views/fields/complex-created',
-                        readOnly: true,
-                        options: {
-                            baseName: 'modified',
-                        },
-                    });
-                }
-                if (!this.model.get('modifiedById')) {
-                    this.recordViewObject.hideField('complexModified');
-                }
-            } else {
-                this.recordViewObject.hideField('complexModified');
-            }
-
-            if (!this.complexCreatedDisabled && this.hasComplexCreated) {
-                this.listenTo(this.model, 'change:createdById', () => {
-                    if (!this.model.get('createdById')) {
-                        return;
-                    }
-
-                    this.recordViewObject.showField('complexCreated');
-                });
-            }
-
-            if (!this.complexModifiedDisabled && this.hasComplexModified) {
-                this.listenTo(this.model, 'change:modifiedById', () => {
-                    if (!this.model.get('modifiedById')) {
-                        return;
-                    }
-
-                    this.recordViewObject.showField('complexModified');
-                });
-            }
-
-            if (this.getMetadata().get(['scopes', this.model.name ,'stream']) && !this.getUser().isPortal()) {
+        if (!this.complexCreatedDisabled) {
+            if (this.hasComplexCreated) {
                 this.fieldList.push({
-                    name: 'followers',
-                    labelText: this.translate('Followers'),
+                    name: 'complexCreated',
+                    labelText: this.translate('Created'),
                     isAdditional: true,
-                    view: 'views/fields/followers',
+                    view: 'views/fields/complex-created',
                     readOnly: true,
                 });
 
-                this.controlFollowersField();
-
-                this.listenTo(this.model, 'change:followersIds', this.controlFollowersField, this);
+                if (!this.model.get('createdById')) {
+                    this.recordViewObject.hideField('complexCreated');
+                }
             }
-        },
+        } else {
+            this.recordViewObject.hideField('complexCreated');
+        }
 
-        controlFollowersField: function () {
-            if (this.model.get('followersIds') && this.model.get('followersIds').length) {
-                this.recordViewObject.showField('followers');
-            } else {
-                this.recordViewObject.hideField('followers');
+        if (!this.complexModifiedDisabled) {
+            if (this.hasComplexModified) {
+                this.fieldList.push({
+                    name: 'complexModified',
+                    labelText: this.translate('Modified'),
+                    isAdditional: true,
+                    view: 'views/fields/complex-created',
+                    readOnly: true,
+                    options: {
+                        baseName: 'modified',
+                    },
+                });
             }
-        },
-    });
+            if (!this.model.get('modifiedById')) {
+                this.recordViewObject.hideField('complexModified');
+            }
+        } else {
+            this.recordViewObject.hideField('complexModified');
+        }
+
+        if (!this.complexCreatedDisabled && this.hasComplexCreated) {
+            this.listenTo(this.model, 'change:createdById', () => {
+                if (!this.model.get('createdById')) {
+                    return;
+                }
+
+                this.recordViewObject.showField('complexCreated');
+            });
+        }
+
+        if (!this.complexModifiedDisabled && this.hasComplexModified) {
+            this.listenTo(this.model, 'change:modifiedById', () => {
+                if (!this.model.get('modifiedById')) {
+                    return;
+                }
+
+                this.recordViewObject.showField('complexModified');
+            });
+        }
+
+        if (this.getMetadata().get(['scopes', this.model.name ,'stream']) && !this.getUser().isPortal()) {
+            this.fieldList.push({
+                name: 'followers',
+                labelText: this.translate('Followers'),
+                isAdditional: true,
+                view: 'views/fields/followers',
+                readOnly: true,
+            });
+
+            this.controlFollowersField();
+
+            this.listenTo(this.model, 'change:followersIds', () => this.controlFollowersField());
+        }
+    },
+
+    controlFollowersField: function () {
+        if (this.model.get('followersIds') && this.model.get('followersIds').length) {
+            this.recordViewObject.showField('followers');
+        } else {
+            this.recordViewObject.hideField('followers');
+        }
+    },
 });
diff --git a/client/src/views/record/panels/relationship.js b/client/src/views/record/panels/relationship.js
index 92bea7755f..0f5bda6ed1 100644
--- a/client/src/views/record/panels/relationship.js
+++ b/client/src/views/record/panels/relationship.js
@@ -26,740 +26,740 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/panels/relationship',
-['views/record/panels/bottom', 'search-manager', 'helpers/record-modal'],
-function (Dep, SearchManager, RecordModal) {
+/** @module views/record/panels/relationship */
+
+import Dep from 'views/record/panels/bottom';
+import SearchManager from 'search-manager';
+import RecordModal from 'helpers/record-modal';
+
+/**
+ * A relationship panel.
+ *
+ * @class
+ * @name Class
+ * @extends module:views/record/panels/bottom
+ */
+export default Dep.extend(/** @lends Class# */{
 
     /**
-     * A relationship panel.
-     *
-     * @class
-     * @name Class
-     * @extends module:views/record/panels/bottom.Class
-     * @memberOf module:views/record/panels/relationship
+     * @inheritDoc
      */
-    return Dep.extend(/** @lends module:views/record/panels/relationship.Class# */{
+    template: 'record/panels/relationship',
 
-        /**
-         * @inheritDoc
-         */
-        template: 'record/panels/relationship',
+    /**
+     * A row-actions view.
+     *
+     * @protected
+     */
+    rowActionsView: 'views/record/row-actions/relationship',
 
-        /**
-         * A row-actions view.
-         *
-         * @protected
-         */
-        rowActionsView: 'views/record/row-actions/relationship',
+    /**
+     * An API URL.
+     *
+     * @protected
+     */
+    url: null,
 
-        /**
-         * An API URL.
-         *
-         * @protected
-         */
-        url: null,
+    /**
+     * A scope.
+     */
+    scope: null,
 
-        /**
-         * A scope.
-         */
-        scope: null,
+    /**
+     * Read-only.
+     */
+    readOnly: false,
 
-        /**
-         * Read-only.
-         */
-        readOnly: false,
+    /**
+     * Fetch a collection on a model 'after:relate' event.
+     *
+     * @protected
+     */
+    fetchOnModelAfterRelate: false,
 
-        /**
-         * Fetch a collection on a model 'after:relate' event.
-         *
-         * @protected
-         */
-        fetchOnModelAfterRelate: false,
+    /**
+     * @protected
+     */
+    noCreateScopeList: ['User', 'Team', 'Role', 'Portal'],
 
-        /**
-         * @protected
-         */
-        noCreateScopeList: ['User', 'Team', 'Role', 'Portal'],
+    /**
+     * @private
+     */
+    recordsPerPage: null,
 
-        /**
-         * @private
-         */
-        recordsPerPage: null,
+    /**
+     * @protected
+     */
+    viewModalView: null,
 
-        /**
-         * @protected
-         */
-        viewModalView: null,
+    init: function () {
+        Dep.prototype.init.call(this);
+    },
 
-        init: function () {
-            Dep.prototype.init.call(this);
-        },
+    setup: function () {
+        Dep.prototype.setup.call(this);
 
-        setup: function () {
-            Dep.prototype.setup.call(this);
+        this.link = this.link || this.defs.link || this.panelName;
 
-            this.link = this.link || this.defs.link || this.panelName;
+        if (!this.scope && !(this.link in this.model.defs.links)) {
+            throw new Error('Link \'' + this.link + '\' is not defined in model \'' + this.model.name + '\'');
+        }
 
-            if (!this.scope && !(this.link in this.model.defs.links)) {
-                throw new Error('Link \'' + this.link + '\' is not defined in model \'' + this.model.name + '\'');
-            }
+        this.scope = this.scope || this.model.defs.links[this.link].entity;
 
-            this.scope = this.scope || this.model.defs.links[this.link].entity;
+        let linkReadOnly = this.getMetadata()
+            .get(['entityDefs', this.model.entityType, 'links', this.link, 'readOnly']) || false;
 
-            let linkReadOnly = this.getMetadata()
-                .get(['entityDefs', this.model.entityType, 'links', this.link, 'readOnly']) || false;
+        let url = this.url = this.url || this.model.name + '/' + this.model.id + '/' + this.link;
 
-            let url = this.url = this.url || this.model.name + '/' + this.model.id + '/' + this.link;
+        if (!('create' in this.defs)) {
+            this.defs.create = true;
+        }
 
-            if (!('create' in this.defs)) {
-                this.defs.create = true;
-            }
+        if (!('select' in this.defs)) {
+            this.defs.select = true;
+        }
 
-            if (!('select' in this.defs)) {
-                this.defs.select = true;
-            }
+        if (!('view' in this.defs)) {
+            this.defs.view = true;
+        }
 
-            if (!('view' in this.defs)) {
-                this.defs.view = true;
-            }
+        if (linkReadOnly) {
+            this.defs.create = false;
+            this.defs.select = false;
+        }
 
-            if (linkReadOnly) {
-                this.defs.create = false;
-                this.defs.select = false;
-            }
+        this.filterList = this.defs.filterList || this.filterList || null;
 
-            this.filterList = this.defs.filterList || this.filterList || null;
+        if (this.filterList && this.filterList.length) {
+            this.filter = this.getStoredFilter();
+        }
 
-            if (this.filterList && this.filterList.length) {
-                this.filter = this.getStoredFilter();
-            }
+        this.setupTitle();
 
-            this.setupTitle();
+        if (this.defs.createDisabled) {
+            this.defs.create = false;
+        }
 
-            if (this.defs.createDisabled) {
-                this.defs.create = false;
-            }
+        if (this.defs.selectDisabled) {
+            this.defs.select = false;
+        }
 
-            if (this.defs.selectDisabled) {
-                this.defs.select = false;
-            }
+        if (this.defs.viewDisabled) {
+            this.defs.view = false;
+        }
 
-            if (this.defs.viewDisabled) {
-                this.defs.view = false;
-            }
+        let hasCreate = false;
 
-            let hasCreate = false;
-
-            if (this.defs.create) {
-                if (
-                    this.getAcl().check(this.scope, 'create') &&
-                    !~this.noCreateScopeList.indexOf(this.scope)
-                ) {
-                    this.buttonList.push({
-                        title: 'Create',
-                        action: this.defs.createAction || 'createRelated',
+        if (this.defs.create) {
+            if (
+                this.getAcl().check(this.scope, 'create') &&
+                !~this.noCreateScopeList.indexOf(this.scope)
+            ) {
+                this.buttonList.push({
+                    title: 'Create',
+                    action: this.defs.createAction || 'createRelated',
+                    link: this.link,
+                    html: '<span class="fas fa-plus"></span>',
+                    data: {
                         link: this.link,
-                        html: '<span class="fas fa-plus"></span>',
-                        data: {
-                            link: this.link,
-                        },
-                        acl: this.defs.createRequiredAccess || null,
-                    });
-
-                    hasCreate = true;
-                }
-            }
-
-            if (this.defs.select) {
-                let data = {link: this.link};
-
-                if (this.defs.selectPrimaryFilterName) {
-                    data.primaryFilterName = this.defs.selectPrimaryFilterName;
-                }
-
-                if (this.defs.selectBoolFilterList) {
-                    data.boolFilterList = this.defs.selectBoolFilterList;
-                }
-
-                data.massSelect = this.defs.massSelect;
-                data.createButton = hasCreate;
-
-                this.actionList.unshift({
-                    label: 'Select',
-                    action: this.defs.selectAction || 'selectRelated',
-                    data: data,
-                    acl: this.defs.selectRequiredAccess || 'edit',
-                });
-            }
-
-            if (this.defs.view) {
-                this.actionList.unshift({
-                    label: 'View List',
-                    action: this.defs.viewAction || 'viewRelatedList',
-                });
-            }
-
-            this.setupActions();
-
-            var layoutName = 'listSmall';
-            this.setupListLayout();
-
-            if (this.listLayoutName) {
-                layoutName = this.listLayoutName;
-            }
-
-            let listLayout = null;
-
-            let layout = this.defs.layout || null;
-
-            if (layout) {
-                if (typeof layout === 'string') {
-                     layoutName = layout;
-                } else {
-                     layoutName = 'listRelationshipCustom';
-                     listLayout = layout;
-                }
-            }
-
-            this.listLayout = listLayout;
-            this.layoutName = layoutName;
-
-            this.setupSorting();
-
-            this.wait(true);
-
-            this.getCollectionFactory().create(this.scope, collection => {
-                collection.maxSize = this.recordsPerPage || this.getConfig().get('recordsPerPageSmall') || 5;
-
-                if (this.defs.filters) {
-                    let searchManager = new SearchManager(collection, 'listRelationship', false, this.getDateTime());
-                    searchManager.setAdvanced(this.defs.filters);
-                    collection.where = searchManager.getWhere();
-                }
-
-                collection.url = collection.urlRoot = url;
-
-                if (this.defaultOrderBy) {
-                    collection.setOrder(this.defaultOrderBy, this.defaultOrder || false, true);
-                }
-
-                this.collection = collection;
-
-                collection.parentModel = this.model;
-
-                this.setFilter(this.filter);
-
-                if (this.fetchOnModelAfterRelate) {
-                    this.listenTo(this.model, 'after:relate', () => collection.fetch());
-                }
-
-                this.listenTo(this.model, 'update-all', () => collection.fetch());
-
-                let viewName =
-                    this.defs.recordListView ||
-                    this.getMetadata().get(['clientDefs', this.scope, 'recordViews', 'listRelated']) ||
-                    this.getMetadata().get(['clientDefs', this.scope, 'recordViews', 'list']) ||
-                    'views/record/list';
-
-                this.listViewName = viewName;
-                this.rowActionsView = this.defs.readOnly ? false : (this.defs.rowActionsView || this.rowActionsView);
-
-                this.once('after:render', () => {
-                    this.createView('list', viewName, {
-                        collection: collection,
-                        layoutName: layoutName,
-                        listLayout: listLayout,
-                        checkboxes: false,
-                        rowActionsView: this.rowActionsView,
-                        buttonsDisabled: true,
-                        el: this.options.el + ' .list-container',
-                        skipBuildRows: true,
-                        rowActionsOptions: {
-                            unlinkDisabled: this.defs.unlinkDisabled,
-                        },
-                        displayTotalCount: false,
-                    }, view => {
-                        view.getSelectAttributeList((selectAttributeList) => {
-                            if (selectAttributeList) {
-                                collection.data.select = selectAttributeList.join(',');
-                            }
-
-                            if (!this.defs.hidden) {
-                                collection.fetch();
-
-                                return;
-                            }
-
-                            this.once('show', () => collection.fetch());
-                        });
-                    });
+                    },
+                    acl: this.defs.createRequiredAccess || null,
                 });
 
-                this.wait(false);
+                hasCreate = true;
+            }
+        }
+
+        if (this.defs.select) {
+            let data = {link: this.link};
+
+            if (this.defs.selectPrimaryFilterName) {
+                data.primaryFilterName = this.defs.selectPrimaryFilterName;
+            }
+
+            if (this.defs.selectBoolFilterList) {
+                data.boolFilterList = this.defs.selectBoolFilterList;
+            }
+
+            data.massSelect = this.defs.massSelect;
+            data.createButton = hasCreate;
+
+            this.actionList.unshift({
+                label: 'Select',
+                action: this.defs.selectAction || 'selectRelated',
+                data: data,
+                acl: this.defs.selectRequiredAccess || 'edit',
             });
+        }
 
-            this.setupFilterActions();
-            this.setupLast();
-        },
+        if (this.defs.view) {
+            this.actionList.unshift({
+                label: 'View List',
+                action: this.defs.viewAction || 'viewRelatedList',
+            });
+        }
 
-        /**
-         * Set up lastly.
-         *
-         * @protected
-         */
-        setupLast: function () {},
+        this.setupActions();
 
-        /**
-         * Set up title.
-         *
-         * @protected
-         */
-        setupTitle: function () {
-            this.title = this.title || this.translate(this.link, 'links', this.model.name);
+        var layoutName = 'listSmall';
+        this.setupListLayout();
 
-            var iconHtml = '';
-            if (!this.getConfig().get('scopeColorsDisabled')) {
-                iconHtml = this.getHelper().getScopeColorIconHtml(this.scope);
-            }
+        if (this.listLayoutName) {
+            layoutName = this.listLayoutName;
+        }
 
-            this.titleHtml = this.title;
+        let listLayout = null;
 
-            if (this.defs.label) {
-                this.titleHtml = iconHtml + this.translate(this.defs.label, 'labels', this.scope);
+        let layout = this.defs.layout || null;
+
+        if (layout) {
+            if (typeof layout === 'string') {
+                 layoutName = layout;
             } else {
-                this.titleHtml = iconHtml + this.title;
+                 layoutName = 'listRelationshipCustom';
+                 listLayout = layout;
+            }
+        }
+
+        this.listLayout = listLayout;
+        this.layoutName = layoutName;
+
+        this.setupSorting();
+
+        this.wait(true);
+
+        this.getCollectionFactory().create(this.scope, collection => {
+            collection.maxSize = this.recordsPerPage || this.getConfig().get('recordsPerPageSmall') || 5;
+
+            if (this.defs.filters) {
+                let searchManager = new SearchManager(collection, 'listRelationship', false, this.getDateTime());
+                searchManager.setAdvanced(this.defs.filters);
+                collection.where = searchManager.getWhere();
             }
 
-            if (this.filter && this.filter !== 'all') {
-                this.titleHtml += ' &middot; ' + this.translateFilter(this.filter);
-            }
-        },
+            collection.url = collection.urlRoot = url;
 
-        /**
-         * Set up sorting.
-         *
-         * @protected
-         */
-        setupSorting: function () {
-            var orderBy = this.defs.orderBy || this.defs.sortBy || this.orderBy;
-            var order = this.defs.orderDirection || this.orderDirection || this.order;
-
-            if ('asc' in this.defs) { // TODO remove in 5.8
-                order = this.defs.asc ? 'asc' : 'desc';
+            if (this.defaultOrderBy) {
+                collection.setOrder(this.defaultOrderBy, this.defaultOrder || false, true);
             }
 
-            if (!orderBy) {
-                orderBy = this.getMetadata().get(['entityDefs', this.scope, 'collection', 'orderBy']);
-                order = this.getMetadata().get(['entityDefs', this.scope, 'collection', 'order'])
+            this.collection = collection;
+
+            collection.parentModel = this.model;
+
+            this.setFilter(this.filter);
+
+            if (this.fetchOnModelAfterRelate) {
+                this.listenTo(this.model, 'after:relate', () => collection.fetch());
             }
 
-            if (orderBy && !order) {
-                order = 'asc';
-            }
+            this.listenTo(this.model, 'update-all', () => collection.fetch());
 
-            this.defaultOrderBy = orderBy;
-            this.defaultOrder = order;
-        },
+            let viewName =
+                this.defs.recordListView ||
+                this.getMetadata().get(['clientDefs', this.scope, 'recordViews', 'listRelated']) ||
+                this.getMetadata().get(['clientDefs', this.scope, 'recordViews', 'list']) ||
+                'views/record/list';
 
-        /**
-         * Set up a list layout.
-         *
-         * @protected
-         */
-        setupListLayout: function () {},
+            this.listViewName = viewName;
+            this.rowActionsView = this.defs.readOnly ? false : (this.defs.rowActionsView || this.rowActionsView);
 
-        /**
-         * Set up actions.
-         *
-         * @protected
-         */
-        setupActions: function () {},
+            this.once('after:render', () => {
+                this.createView('list', viewName, {
+                    collection: collection,
+                    layoutName: layoutName,
+                    listLayout: listLayout,
+                    checkboxes: false,
+                    rowActionsView: this.rowActionsView,
+                    buttonsDisabled: true,
+                    el: this.options.el + ' .list-container',
+                    skipBuildRows: true,
+                    rowActionsOptions: {
+                        unlinkDisabled: this.defs.unlinkDisabled,
+                    },
+                    displayTotalCount: false,
+                }, view => {
+                    view.getSelectAttributeList((selectAttributeList) => {
+                        if (selectAttributeList) {
+                            collection.data.select = selectAttributeList.join(',');
+                        }
 
-        /**
-         * Set up filter actions.
-         *
-         * @protected
-         */
-        setupFilterActions: function () {
-            if (this.filterList && this.filterList.length) {
-                this.actionList.push(false);
+                        if (!this.defs.hidden) {
+                            collection.fetch();
 
-                this.filterList.slice(0).forEach((item) => {
-                    let selected;
+                            return;
+                        }
 
-                    if (item === 'all') {
-                        selected = !this.filter;
-                    }
-                    else {
-                        selected = item === this.filter;
-                    }
-
-                    let label = this.translateFilter(item);
-
-                    let $item =
-                        $('<div>')
-                            .append(
-                                $('<span>')
-                                    .addClass('check-icon fas fa-check pull-right')
-                                    .addClass(!selected ? 'hidden' : '')
-                            )
-                            .append(
-                                $('<div>').text(label)
-                            );
-
-                    this.actionList.push({
-                        action: 'selectFilter',
-                        html: $item.get(0).innerHTML,
-                        data: {
-                            name: item,
-                        },
+                        this.once('show', () => collection.fetch());
                     });
                 });
-            }
-        },
+            });
 
-        /**
-         * Translate a filter.
-         *
-         * @param {string} name A name.
-         * @return {string}
-         */
-        translateFilter: function (name) {
-            return this.translate(name, 'presetFilters', this.scope);
-        },
+            this.wait(false);
+        });
 
-        /**
-         * @private
-         */
-        getStoredFilter: function () {
-            var key = 'panelFilter' + this.model.name + '-' + (this.panelName || this.name);
+        this.setupFilterActions();
+        this.setupLast();
+    },
 
-            return this.getStorage().get('state', key) || null;
-        },
+    /**
+     * Set up lastly.
+     *
+     * @protected
+     */
+    setupLast: function () {},
 
-        /**
-         * @private
-         */
-        storeFilter: function (filter) {
-            var key = 'panelFilter' + this.model.name + '-' + (this.panelName || this.name);
+    /**
+     * Set up title.
+     *
+     * @protected
+     */
+    setupTitle: function () {
+        this.title = this.title || this.translate(this.link, 'links', this.model.name);
 
-            if (filter) {
-                this.getStorage().set('state', key, filter);
+        var iconHtml = '';
+
+        if (!this.getConfig().get('scopeColorsDisabled')) {
+            iconHtml = this.getHelper().getScopeColorIconHtml(this.scope);
+        }
+
+        this.titleHtml = this.title;
+
+        if (this.defs.label) {
+            this.titleHtml = iconHtml + this.translate(this.defs.label, 'labels', this.scope);
+        } else {
+            this.titleHtml = iconHtml + this.title;
+        }
+
+        if (this.filter && this.filter !== 'all') {
+            this.titleHtml += ' &middot; ' + this.translateFilter(this.filter);
+        }
+    },
+
+    /**
+     * Set up sorting.
+     *
+     * @protected
+     */
+    setupSorting: function () {
+        var orderBy = this.defs.orderBy || this.defs.sortBy || this.orderBy;
+        var order = this.defs.orderDirection || this.orderDirection || this.order;
+
+        if ('asc' in this.defs) { // TODO remove in 5.8
+            order = this.defs.asc ? 'asc' : 'desc';
+        }
+
+        if (!orderBy) {
+            orderBy = this.getMetadata().get(['entityDefs', this.scope, 'collection', 'orderBy']);
+            order = this.getMetadata().get(['entityDefs', this.scope, 'collection', 'order'])
+        }
+
+        if (orderBy && !order) {
+            order = 'asc';
+        }
+
+        this.defaultOrderBy = orderBy;
+        this.defaultOrder = order;
+    },
+
+    /**
+     * Set up a list layout.
+     *
+     * @protected
+     */
+    setupListLayout: function () {},
+
+    /**
+     * Set up actions.
+     *
+     * @protected
+     */
+    setupActions: function () {},
+
+    /**
+     * Set up filter actions.
+     *
+     * @protected
+     */
+    setupFilterActions: function () {
+        if (this.filterList && this.filterList.length) {
+            this.actionList.push(false);
+
+            this.filterList.slice(0).forEach((item) => {
+                let selected;
+
+                if (item === 'all') {
+                    selected = !this.filter;
+                }
+                else {
+                    selected = item === this.filter;
+                }
+
+                let label = this.translateFilter(item);
+
+                let $item =
+                    $('<div>')
+                        .append(
+                            $('<span>')
+                                .addClass('check-icon fas fa-check pull-right')
+                                .addClass(!selected ? 'hidden' : '')
+                        )
+                        .append(
+                            $('<div>').text(label)
+                        );
+
+                this.actionList.push({
+                    action: 'selectFilter',
+                    html: $item.get(0).innerHTML,
+                    data: {
+                        name: item,
+                    },
+                });
+            });
+        }
+    },
+
+    /**
+     * Translate a filter.
+     *
+     * @param {string} name A name.
+     * @return {string}
+     */
+    translateFilter: function (name) {
+        return this.translate(name, 'presetFilters', this.scope);
+    },
+
+    /**
+     * @private
+     */
+    getStoredFilter: function () {
+        var key = 'panelFilter' + this.model.name + '-' + (this.panelName || this.name);
+
+        return this.getStorage().get('state', key) || null;
+    },
+
+    /**
+     * @private
+     */
+    storeFilter: function (filter) {
+        var key = 'panelFilter' + this.model.name + '-' + (this.panelName || this.name);
+
+        if (filter) {
+            this.getStorage().set('state', key, filter);
+        } else {
+            this.getStorage().clear('state', key);
+        }
+    },
+
+    /**
+     * Set a filter.
+     *
+     * @param {string} filter A filter.
+     */
+    setFilter: function (filter) {
+        this.filter = filter;
+        this.collection.data.primaryFilter = null;
+
+        if (filter && filter !== 'all') {
+            this.collection.data.primaryFilter = filter;
+        }
+    },
+
+    /**
+     * A `select-filter` action.
+     *
+     * @protected
+     */
+    actionSelectFilter: function (data) {
+        var filter = data.name;
+        var filterInternal = filter;
+
+        if (filter === 'all') {
+            filterInternal = false;
+        }
+
+        this.storeFilter(filterInternal);
+        this.setFilter(filterInternal);
+
+        this.filterList.forEach(item => {
+            var $el = this.$el.closest('.panel').find('[data-name="'+item+'"] span');
+
+            if (item === filter) {
+                $el.removeClass('hidden');
             } else {
-                this.getStorage().clear('state', key);
+                $el.addClass('hidden');
             }
-        },
+        });
 
-        /**
-         * Set a filter.
-         *
-         * @param {string} filter A filter.
-         */
-        setFilter: function (filter) {
-            this.filter = filter;
-            this.collection.data.primaryFilter = null;
+        this.collection.reset();
 
-            if (filter && filter !== 'all') {
-                this.collection.data.primaryFilter = filter;
+        var listView = this.getView('list');
+
+        if (listView && listView.$el) {
+            var height = listView.$el.parent().get(0).clientHeight;
+
+            listView.$el.empty();
+
+            if (height) {
+                listView.$el.parent().css('height', height + 'px');
             }
-        },
+        }
 
-        /**
-         * A `select-filter` action.
-         *
-         * @protected
-         */
-        actionSelectFilter: function (data) {
-            var filter = data.name;
-            var filterInternal = filter;
+        this.collection.fetch().then(() => {
+            listView.$el.parent().css('height', '');
+        });
 
-            if (filter === 'all') {
-                filterInternal = false;
+        this.setupTitle();
+
+        if (this.isRendered()) {
+            this.$el.closest('.panel')
+                .find('> .panel-heading > .panel-title > span')
+                .html(this.titleHtml);
+        }
+    },
+
+    /**
+     * A `refresh` action.
+     *
+     * @protected
+     */
+    actionRefresh: function () {
+        this.collection.fetch();
+    },
+
+    /**
+     * A `view-related-list` action.
+     *
+     * @protected
+     */
+    actionViewRelatedList: function (data) {
+        var viewName =
+            this.getMetadata().get(
+                ['clientDefs', this.model.name, 'relationshipPanels', this.name, 'viewModalView']
+            ) ||
+            this.getMetadata().get(['clientDefs', this.scope, 'modalViews', 'relatedList']) ||
+            this.viewModalView ||
+            'views/modals/related-list';
+
+        var scope = data.scope || this.scope;
+
+        var filter = this.filter;
+
+        if (this.relatedListFiltersDisabled) {
+            filter = null;
+        }
+
+        var options = {
+            model: this.model,
+            panelName: this.panelName,
+            link: this.link,
+            scope: scope,
+            defs: this.defs,
+            title: data.title || this.title,
+            filterList: this.filterList,
+            filter: filter,
+            layoutName: this.layoutName,
+            defaultOrder: this.defaultOrder,
+            defaultOrderBy: this.defaultOrderBy,
+            url: data.url || this.url,
+            listViewName: this.listViewName,
+            createDisabled: !this.isCreateAvailable(scope),
+            selectDisabled: !this.isSelectAvailable(scope),
+            rowActionsView: this.rowActionsView,
+            panelCollection: this.collection,
+            filtersDisabled: this.relatedListFiltersDisabled,
+        };
+
+        if (data.viewOptions) {
+            for (var item in data.viewOptions) {
+                options[item] = data.viewOptions[item];
             }
+        }
 
-            this.storeFilter(filterInternal);
-            this.setFilter(filterInternal);
+        Espo.Ui.notify(' ... ');
 
-            this.filterList.forEach(item => {
-                var $el = this.$el.closest('.panel').find('[data-name="'+item+'"] span');
+        this.createView('modalRelatedList', viewName, options, (view) => {
+            Espo.Ui.notify(false);
 
-                if (item === filter) {
-                    $el.removeClass('hidden');
-                } else {
-                    $el.addClass('hidden');
+            view.render();
+
+            this.listenTo(view, 'action', (action, data, e) => {
+                var method = 'action' + Espo.Utils.upperCaseFirst(action);
+
+                if (typeof this[method] === 'function') {
+                    this[method](data, e);
+
+                    e.preventDefault();
                 }
             });
 
-            this.collection.reset();
-
-            var listView = this.getView('list');
-
-            if (listView && listView.$el) {
-                var height = listView.$el.parent().get(0).clientHeight;
-
-                listView.$el.empty();
-
-                if (height) {
-                    listView.$el.parent().css('height', height + 'px');
-                }
-            }
-
-            this.collection.fetch().then(() => {
-                listView.$el.parent().css('height', '');
+            this.listenToOnce(view, 'close', () => {
+                this.clearView('modalRelatedList');
             });
+        });
+    },
 
-            this.setupTitle();
+    /**
+     * Is create available.
+     *
+     * @protected
+     * @param {string} scope A scope (entity type).
+     * @return {boolean};
+     */
+    isCreateAvailable: function (scope) {
+        return !!this.defs.create;
+    },
 
-            if (this.isRendered()) {
-                this.$el.closest('.panel')
-                    .find('> .panel-heading > .panel-title > span')
-                    .html(this.titleHtml);
-            }
-        },
+    /**
+     * Is select available.
+     *
+     * @protected
+     * @param {string} scope A scope (entity type).
+     * @return {boolean};
+     */
+    isSelectAvailable: function (scope) {
+        return !!this.defs.select;
+    },
 
-        /**
-         * A `refresh` action.
-         *
-         * @protected
-         */
-        actionRefresh: function () {
-            this.collection.fetch();
-        },
+    /**
+     * A `view-related` action.
+     *
+     * @protected
+     */
+    actionViewRelated: function (data) {
+        let id = data.id;
+        let model = this.collection.get(id);
 
-        /**
-         * A `view-related-list` action.
-         *
-         * @protected
-         */
-        actionViewRelatedList: function (data) {
-            var viewName =
-                this.getMetadata().get(
-                    ['clientDefs', this.model.name, 'relationshipPanels', this.name, 'viewModalView']
-                ) ||
-                this.getMetadata().get(['clientDefs', this.scope, 'modalViews', 'relatedList']) ||
-                this.viewModalView ||
-                'views/modals/related-list';
+        if (!model) {
+            return;
+        }
 
-            var scope = data.scope || this.scope;
+        let scope = model.entityType;
 
-            var filter = this.filter;
+        let helper = new RecordModal(this.getMetadata(), this.getAcl());
 
-            if (this.relatedListFiltersDisabled) {
-                filter = null;
-            }
-
-            var options = {
-                model: this.model,
-                panelName: this.panelName,
-                link: this.link,
-                scope: scope,
-                defs: this.defs,
-                title: data.title || this.title,
-                filterList: this.filterList,
-                filter: filter,
-                layoutName: this.layoutName,
-                defaultOrder: this.defaultOrder,
-                defaultOrderBy: this.defaultOrderBy,
-                url: data.url || this.url,
-                listViewName: this.listViewName,
-                createDisabled: !this.isCreateAvailable(scope),
-                selectDisabled: !this.isSelectAvailable(scope),
-                rowActionsView: this.rowActionsView,
-                panelCollection: this.collection,
-                filtersDisabled: this.relatedListFiltersDisabled,
-            };
-
-            if (data.viewOptions) {
-                for (var item in data.viewOptions) {
-                    options[item] = data.viewOptions[item];
-                }
-            }
-
-            Espo.Ui.notify(' ... ');
-
-            this.createView('modalRelatedList', viewName, options, (view) => {
-                Espo.Ui.notify(false);
-
-                view.render();
-
-                this.listenTo(view, 'action', (action, data, e) => {
-                    var method = 'action' + Espo.Utils.upperCaseFirst(action);
-
-                    if (typeof this[method] === 'function') {
-                        this[method](data, e);
-
-                        e.preventDefault();
-                    }
-                });
-
-                this.listenToOnce(view, 'close', () => {
-                    this.clearView('modalRelatedList');
-                });
-            });
-        },
-
-        /**
-         * Is create available.
-         *
-         * @protected
-         * @param {string} scope A scope (entity type).
-         * @return {boolean};
-         */
-        isCreateAvailable: function (scope) {
-            return !!this.defs.create;
-        },
-
-        /**
-         * Is select available.
-         *
-         * @protected
-         * @param {string} scope A scope (entity type).
-         * @return {boolean};
-         */
-        isSelectAvailable: function (scope) {
-            return !!this.defs.select;
-        },
-
-        /**
-         * A `view-related` action.
-         *
-         * @protected
-         */
-        actionViewRelated: function (data) {
-            let id = data.id;
-            let model = this.collection.get(id);
-
-            if (!model) {
-                return;
-            }
-
-            let scope = model.entityType;
-
-            let helper = new RecordModal(this.getMetadata(), this.getAcl());
-
-            helper
-                .showDetail(this, {
-                    scope: scope,
-                    id: id,
-                    model: model,
-                })
-                .then(view => {
-                    this.listenTo(view, 'after:save', () => {
-                        this.collection.fetch();
-                    });
-                });
-        },
-
-        /**
-         * An `edit-related` action.
-         *
-         * @protected
-         */
-        actionEditRelated: function (data) {
-            var id = data.id;
-            var scope = this.collection.get(id).name;
-
-            var viewName = this.getMetadata().get('clientDefs.' + scope + '.modalViews.edit') ||
-                'views/modals/edit';
-
-            Espo.Ui.notify(' ... ');
-
-            this.createView('quickEdit', viewName, {
+        helper
+            .showDetail(this, {
                 scope: scope,
                 id: id,
-            }, (view) => {
-                view.once('after:render', () => {
-                    Espo.Ui.notify(false);
-                });
-
-                view.render();
-
-                view.once('after:save', () => {
+                model: model,
+            })
+            .then(view => {
+                this.listenTo(view, 'after:save', () => {
                     this.collection.fetch();
                 });
             });
-        },
+    },
 
-        /**
-         * An `unlink-related` action.
-         *
-         * @protected
-         */
-        actionUnlinkRelated: function (data) {
-            var id = data.id;
+    /**
+     * An `edit-related` action.
+     *
+     * @protected
+     */
+    actionEditRelated: function (data) {
+        var id = data.id;
+        var scope = this.collection.get(id).name;
 
-            this.confirm({
-                message: this.translate('unlinkRecordConfirmation', 'messages'),
-                confirmText: this.translate('Unlink'),
-            }, () => {
-                Espo.Ui.notify(' ... ');
+        var viewName = this.getMetadata().get('clientDefs.' + scope + '.modalViews.edit') ||
+            'views/modals/edit';
 
-                Espo.Ajax
-                    .deleteRequest(this.collection.url, {
-                        id: id,
-                    }).then(() => {
-                        this.notify('Unlinked', 'success');
+        Espo.Ui.notify(' ... ');
 
-                        this.collection.fetch();
-
-                        this.model.trigger('after:unrelate');
-                        this.model.trigger('after:unrelate:' + this.link);
-                    });
+        this.createView('quickEdit', viewName, {
+            scope: scope,
+            id: id,
+        }, (view) => {
+            view.once('after:render', () => {
+                Espo.Ui.notify(false);
             });
-        },
 
-        /**
-         * A `remove-related` action.
-         *
-         * @protected
-         */
-        actionRemoveRelated: function (data) {
-            var id = data.id;
+            view.render();
 
-            this.confirm({
-                message: this.translate('removeRecordConfirmation', 'messages'),
-                confirmText: this.translate('Remove'),
-            }, () => {
-                let model = this.collection.get(id);
-
-                Espo.Ui.notify(' ... ');
-
-                model
-                    .destroy()
-                    .then(() => {
-                        this.notify('Removed', 'success');
-
-                        this.collection.fetch();
-
-                        this.model.trigger('after:unrelate');
-                        this.model.trigger('after:unrelate:' + this.link);
-                    });
+            view.once('after:save', () => {
+                this.collection.fetch();
             });
-        },
+        });
+    },
 
-        /**
-         * An `unlink-all-related` action.
-         *
-         * @protected
-         */
-        actionUnlinkAllRelated: function (data) {
-            this.confirm(this.translate('unlinkAllConfirmation', 'messages'), () => {
-                Espo.Ui.notify(' ... ');
+    /**
+     * An `unlink-related` action.
+     *
+     * @protected
+     */
+    actionUnlinkRelated: function (data) {
+        var id = data.id;
 
-                Espo.Ajax
-                    .postRequest(this.model.name + '/action/unlinkAll', {
-                        link: data.link,
-                        id: this.model.id,
-                    })
-                    .then(() => {
-                        this.notify('Unlinked', 'success');
+        this.confirm({
+            message: this.translate('unlinkRecordConfirmation', 'messages'),
+            confirmText: this.translate('Unlink'),
+        }, () => {
+            Espo.Ui.notify(' ... ');
 
-                        this.collection.fetch();
+            Espo.Ajax
+                .deleteRequest(this.collection.url, {id: id})
+                .then(() => {
+                    Espo.Ui.success(this.translate('Unlinked'));
 
-                        this.model.trigger('after:unrelate');
-                        this.model.trigger('after:unrelate:' + this.link);
-                    });
-            });
-        },
-    });
+                    this.collection.fetch();
+
+                    this.model.trigger('after:unrelate');
+                    this.model.trigger('after:unrelate:' + this.link);
+                });
+        });
+    },
+
+    /**
+     * A `remove-related` action.
+     *
+     * @protected
+     */
+    actionRemoveRelated: function (data) {
+        var id = data.id;
+
+        this.confirm({
+            message: this.translate('removeRecordConfirmation', 'messages'),
+            confirmText: this.translate('Remove'),
+        }, () => {
+            let model = this.collection.get(id);
+
+            Espo.Ui.notify(' ... ');
+
+            model
+                .destroy()
+                .then(() => {
+                    Espo.Ui.success(this.translate('Removed'));
+
+                    this.collection.fetch();
+
+                    this.model.trigger('after:unrelate');
+                    this.model.trigger('after:unrelate:' + this.link);
+                });
+        });
+    },
+
+    /**
+     * An `unlink-all-related` action.
+     *
+     * @protected
+     */
+    actionUnlinkAllRelated: function (data) {
+        this.confirm(this.translate('unlinkAllConfirmation', 'messages'), () => {
+            Espo.Ui.notify(' ... ');
+
+            Espo.Ajax
+                .postRequest(this.model.name + '/action/unlinkAll', {
+                    link: data.link,
+                    id: this.model.id,
+                })
+                .then(() => {
+                    Espo.Ui.success(this.translate('Unlinked'));
+
+                    this.collection.fetch();
+
+                    this.model.trigger('after:unrelate');
+                    this.model.trigger('after:unrelate:' + this.link);
+                });
+        });
+    },
 });
diff --git a/client/src/views/record/panels/side.js b/client/src/views/record/panels/side.js
index 5a61440f1b..6aa5bf09b9 100644
--- a/client/src/views/record/panels/side.js
+++ b/client/src/views/record/panels/side.js
@@ -26,387 +26,387 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/panels/side', ['view'], function (Dep) {
+/** @module views/record/panels/side */
+
+import Dep from 'view';
+
+/**
+ * A side panel.
+ *
+ * @class
+ * @name Class
+ * @extends module:view
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    template: 'record/panels/side',
 
     /**
-     * A side panel.
+     * A field defs.
      *
-     * @class
-     * @name Class
-     * @extends module:view.Class
-     * @memberOf module:views/record/panels/side
+     * @typedef module:views/record/panels/side~field
+     *
+     * @property {string} name
+     * @property {string} [labelText] A translated label text.
+     * @property {string} [view] A view name.
+     * @property {boolean} [isAdditional]
+     * @property {boolean} [readOnly]
+     * @property {Object.<string,*>} [options] Options.
      */
-    return Dep.extend(/** module:views/record/panels/side.Class# */{
 
-        template: 'record/panels/side',
+    /**
+     * A field list.
+     *
+     * @protected
+     * @type {module:views/record/panels/side~field[]}
+     */
+    fieldList: null,
 
-        /**
-         * A field defs.
-         *
-         * @typedef module:views/record/panels/side~field
-         *
-         * @property {string} name
-         * @property {string} [labelText] A translated label text.
-         * @property {string} [view] A view name.
-         * @property {boolean} [isAdditional]
-         * @property {boolean} [readOnly]
-         * @property {Object.<string,*>} [options] Options.
-         */
+    /**
+     * A mode.
+     *
+     * @protected
+     * @type {'list'|'detail'|'edit'}
+     */
+    mode: 'detail',
 
-        /**
-         * A field list.
-         *
-         * @protected
-         * @type {module:views/record/panels/side~field[]}
-         */
-        fieldList: null,
+    /**
+     * @protected
+     * @type {module:views/record/panels-container~action[]}
+     */
+    actionList: null,
 
-        /**
-         * A mode.
-         *
-         * @protected
-         * @type {'list'|'detail'|'edit'}
-         */
-        mode: 'detail',
+    /**
+     * @protected
+     * @type {module:views/record/panels-container~button[]}
+     */
+    buttonList: null,
 
-        /**
-         * @protected
-         * @type {module:views/record/panels-container~action[]}
-         */
-        actionList: null,
+    /**
+     * Read-only.
+     *
+     * @protected
+     */
+    readOnly: false,
 
-        /**
-         * @protected
-         * @type {module:views/record/panels-container~button[]}
-         */
-        buttonList: null,
+    /**
+     * Disable inline edit.
+     *
+     * @protected
+     */
+    inlineEditDisabled: false,
 
-        /**
-         * Read-only.
-         *
-         * @protected
-         */
-        readOnly: false,
+    /**
+     * Disable.
+     *
+     * @protected
+     */
+    disabled: false,
 
-        /**
-         * Disable inline edit.
-         *
-         * @protected
-         */
-        inlineEditDisabled: false,
+    data: function () {
+        return {
+            fieldList: this.getFieldList(),
+            hiddenFields: this.recordHelper.getHiddenFields(),
+        };
+    },
 
-        /**
-         * Disable.
-         *
-         * @protected
-         */
-        disabled: false,
+    events: {
+        'click .action': function (e) {
+            var $el = $(e.currentTarget);
+            var action = $el.data('action');
+            var method = 'action' + Espo.Utils.upperCaseFirst(action);
 
-        data: function () {
-            return {
-                fieldList: this.getFieldList(),
-                hiddenFields: this.recordHelper.getHiddenFields(),
-            };
-        },
+            if (typeof this[method] === 'function') {
+                var data = $el.data();
+                this[method](data, e);
 
-        events: {
-            'click .action': function (e) {
-                var $el = $(e.currentTarget);
-                var action = $el.data('action');
-                var method = 'action' + Espo.Utils.upperCaseFirst(action);
-
-                if (typeof this[method] === 'function') {
-                    var data = $el.data();
-                    this[method](data, e);
-
-                    e.preventDefault();
-                }
+                e.preventDefault();
             }
-        },
+        }
+    },
 
-        init: function () {
-            this.panelName = this.options.panelName;
-            this.defs = this.options.defs || {};
-            this.recordHelper = this.options.recordHelper;
+    init: function () {
+        this.panelName = this.options.panelName;
+        this.defs = this.options.defs || {};
+        this.recordHelper = this.options.recordHelper;
 
-            if ('disabled' in this.options) {
-                this.disabled = this.options.disabled;
+        if ('disabled' in this.options) {
+            this.disabled = this.options.disabled;
+        }
+
+        this.buttonList = _.clone(this.defs.buttonList || this.buttonList || []);
+        this.actionList = _.clone(this.defs.actionList || this.actionList || []);
+
+        this.fieldList = this.options.fieldList || this.fieldList || this.defs.fieldList || [];
+
+        this.mode = this.options.mode || this.mode;
+
+        this.readOnlyLocked = this.options.readOnlyLocked || this.readOnly;
+        this.readOnly = this.readOnly || this.options.readOnly;
+        this.inlineEditDisabled = this.inlineEditDisabled || this.options.inlineEditDisabled;
+
+        this.recordViewObject = this.options.recordViewObject;
+    },
+
+    setup: function () {
+        this.setupFields();
+
+        this.fieldList = this.fieldList.map(d => {
+            var item = d;
+
+            if (typeof item !== 'object') {
+                item = {
+                    name: item,
+                    viewKey: item + 'Field'
+                };
             }
 
-            this.buttonList = _.clone(this.defs.buttonList || this.buttonList || []);
-            this.actionList = _.clone(this.defs.actionList || this.actionList || []);
+            item = Espo.Utils.clone(item);
+            item.viewKey = item.name + 'Field';
+            item.label = item.label || item.name;
 
-            this.fieldList = this.options.fieldList || this.fieldList || this.defs.fieldList || [];
-
-            this.mode = this.options.mode || this.mode;
-
-            this.readOnlyLocked = this.options.readOnlyLocked || this.readOnly;
-            this.readOnly = this.readOnly || this.options.readOnly;
-            this.inlineEditDisabled = this.inlineEditDisabled || this.options.inlineEditDisabled;
-
-            this.recordViewObject = this.options.recordViewObject;
-        },
-
-        setup: function () {
-            this.setupFields();
-
-            this.fieldList = this.fieldList.map(d => {
-                var item = d;
-
-                if (typeof item !== 'object') {
-                    item = {
-                        name: item,
-                        viewKey: item + 'Field'
-                    };
-                }
-
-                item = Espo.Utils.clone(item);
-                item.viewKey = item.name + 'Field';
-                item.label = item.label || item.name;
-
-                if (this.recordHelper.getFieldStateParam(item.name, 'hidden') !== null) {
-                    item.hidden = this.recordHelper.getFieldStateParam(item.name, 'hidden');
-                } else {
-                    this.recordHelper.setFieldStateParam(item.name, item.hidden || false);
-                }
-
-                return item;
-            });
-
-            this.fieldList = this.fieldList.filter((item) => {
-                if (!item.name) {
-                    return;
-                }
-
-                if (!item.isAdditional) {
-                    if (!(item.name in (((this.model.defs || {}).fields) || {}))) return;
-                }
-
-                return true;
-            });
-
-            this.createFields();
-        },
-
-        afterRender: function () {
-            if (this.$el.children().length === 0) {
-                this.$el.parent().addClass('hidden');
-            }
-        },
-
-        /**
-         * Set up fields.
-         *
-         * @protected
-         */
-        setupFields: function () {},
-
-        /**
-         * Create a field view.
-         *
-         * @protected
-         * @param {string} field A field name.
-         * @param {string|null} [viewName] A view name/path.
-         * @param {Object<string,*>} [params] Field params.
-         * @param {'detail'|'edit'|'list'|null} [mode='edit'] A mode.
-         * @param {boolean} [readOnly] Read-only.
-         * @param {Object<string,*>} [options] View options.
-         */
-        createField: function (field, viewName, params, mode, readOnly, options) {
-            var type = this.model.getFieldType(field) || 'base';
-
-            viewName = viewName ||
-                this.model.getFieldParam(field, 'view') ||
-                this.getFieldManager().getViewName(type);
-
-            var o = {
-                model: this.model,
-                el: this.options.el + ' .field[data-name="' + field + '"]',
-                defs: {
-                    name: field,
-                    params: params || {},
-                },
-                mode: mode || this.mode,
-            };
-
-            if (options) {
-                for (var param in options) {
-                    o[param] = options[param];
-                }
+            if (this.recordHelper.getFieldStateParam(item.name, 'hidden') !== null) {
+                item.hidden = this.recordHelper.getFieldStateParam(item.name, 'hidden');
+            } else {
+                this.recordHelper.setFieldStateParam(item.name, item.hidden || false);
             }
 
-            var readOnlyLocked = this.readOnlyLocked;
+            return item;
+        });
 
-            if (this.readOnly) {
-                o.readOnly = true;
+        this.fieldList = this.fieldList.filter((item) => {
+            if (!item.name) {
+                return;
+            }
+
+            if (!item.isAdditional) {
+                if (!(item.name in (((this.model.defs || {}).fields) || {}))) return;
+            }
+
+            return true;
+        });
+
+        this.createFields();
+    },
+
+    afterRender: function () {
+        if (this.$el.children().length === 0) {
+            this.$el.parent().addClass('hidden');
+        }
+    },
+
+    /**
+     * Set up fields.
+     *
+     * @protected
+     */
+    setupFields: function () {},
+
+    /**
+     * Create a field view.
+     *
+     * @protected
+     * @param {string} field A field name.
+     * @param {string|null} [viewName] A view name/path.
+     * @param {Object<string,*>} [params] Field params.
+     * @param {'detail'|'edit'|'list'|null} [mode='edit'] A mode.
+     * @param {boolean} [readOnly] Read-only.
+     * @param {Object<string,*>} [options] View options.
+     */
+    createField: function (field, viewName, params, mode, readOnly, options) {
+        var type = this.model.getFieldType(field) || 'base';
+
+        viewName = viewName ||
+            this.model.getFieldParam(field, 'view') ||
+            this.getFieldManager().getViewName(type);
+
+        var o = {
+            model: this.model,
+            el: this.options.el + ' .field[data-name="' + field + '"]',
+            defs: {
+                name: field,
+                params: params || {},
+            },
+            mode: mode || this.mode,
+        };
+
+        if (options) {
+            for (var param in options) {
+                o[param] = options[param];
+            }
+        }
+
+        var readOnlyLocked = this.readOnlyLocked;
+
+        if (this.readOnly) {
+            o.readOnly = true;
+        }
+        else {
+            if (readOnly !== null) {
+                o.readOnly = readOnly;
+            }
+        }
+
+        if (readOnly) {
+            readOnlyLocked = true;
+        }
+
+        if (this.inlineEditDisabled) {
+            o.inlineEditDisabled = true;
+        }
+
+        if (this.recordHelper.getFieldStateParam(field, 'hidden')) {
+            o.disabled = true;
+        }
+
+        if (this.recordHelper.getFieldStateParam(field, 'hiddenLocked')) {
+            o.disabledLocked = true;
+        }
+
+        if (this.recordHelper.getFieldStateParam(field, 'readOnly')) {
+            o.readOnly = true;
+        }
+
+        if (this.recordHelper.getFieldStateParam(field, 'required') !== null) {
+            o.defs.params.required = this.recordHelper.getFieldStateParam(field, 'required');
+        }
+
+        if (!readOnlyLocked && this.recordHelper.getFieldStateParam(field, 'readOnlyLocked')) {
+            readOnlyLocked = true;
+        }
+
+        if (readOnlyLocked) {
+            o.readOnlyLocked = readOnlyLocked;
+        }
+
+        if (this.recordHelper.hasFieldOptionList(field)) {
+            o.customOptionList = this.recordHelper.getFieldOptionList(field);
+        }
+
+        if (this.recordViewObject) {
+            o.validateCallback = () => this.recordViewObject.validateField(field);
+        }
+
+        o.recordHelper = this.recordHelper;
+
+        var viewKey = field + 'Field';
+
+        this.createView(viewKey, viewName, o);
+    },
+
+    /**
+     * @private
+     */
+    createFields: function () {
+        this.getFieldList().forEach(item => {
+            var view = null;
+            var field;
+            var readOnly = null;
+
+            if (typeof item === 'object') {
+                field = item.name;
+                view = item.view;
+
+                if ('readOnly' in item) {
+                    readOnly = item.readOnly;
+                }
             }
             else {
-                if (readOnly !== null) {
-                    o.readOnly = readOnly;
+               field = item;
+            }
+
+            if (!item.isAdditional) {
+                if (!(field in this.model.defs.fields)) {
+                    return;
                 }
             }
 
-            if (readOnly) {
-                readOnlyLocked = true;
+            this.createField(field, view, null, null, readOnly, item.options);
+        });
+    },
+
+    /**
+     * @deprecated Use `getFieldViews`.
+     */
+    getFields: function () {
+        return this.getFieldViews();
+    },
+
+    /**
+     * Get field views.
+     *
+     * @return {Object.<string, module:views/fields/base>}
+     */
+    getFieldViews: function () {
+        var fields = {};
+
+        this.getFieldList().forEach(item => {
+            if (this.hasView(item.viewKey)) {
+                fields[item.name] = this.getView(item.viewKey);
+            }
+        });
+
+        return fields;
+    },
+
+    /**
+     * Get a field list.
+     *
+     * @return {module:views/record/panels/side~field[]}
+     */
+    getFieldList: function () {
+        return this.fieldList.map(item => {
+            if (typeof item !== 'object') {
+                return {
+                    name: item,
+                };
             }
 
-            if (this.inlineEditDisabled) {
-                o.inlineEditDisabled = true;
-            }
+            return item;
+        });
+    },
 
-            if (this.recordHelper.getFieldStateParam(field, 'hidden')) {
-                o.disabled = true;
-            }
+    /**
+     * @return {module:views/record/panels-container~action[]}
+     */
+    getActionList: function () {
+        return this.actionList || [];
+    },
 
-            if (this.recordHelper.getFieldStateParam(field, 'hiddenLocked')) {
-                o.disabledLocked = true;
-            }
+    /**
+     * @return {module:views/record/panels-container~button[]}
+     */
+    getButtonList: function () {
+        return this.buttonList || [];
+    },
 
-            if (this.recordHelper.getFieldStateParam(field, 'readOnly')) {
-                o.readOnly = true;
-            }
-
-            if (this.recordHelper.getFieldStateParam(field, 'required') !== null) {
-                o.defs.params.required = this.recordHelper.getFieldStateParam(field, 'required');
-            }
-
-            if (!readOnlyLocked && this.recordHelper.getFieldStateParam(field, 'readOnlyLocked')) {
-                readOnlyLocked = true;
-            }
-
-            if (readOnlyLocked) {
-                o.readOnlyLocked = readOnlyLocked;
-            }
-
-            if (this.recordHelper.hasFieldOptionList(field)) {
-                o.customOptionList = this.recordHelper.getFieldOptionList(field);
-            }
-
-            if (this.recordViewObject) {
-                o.validateCallback = () => this.recordViewObject.validateField(field);
-            }
-
-            o.recordHelper = this.recordHelper;
-
-            var viewKey = field + 'Field';
-
-            this.createView(viewKey, viewName, o);
-        },
-
-        /**
-         * @private
-         */
-        createFields: function () {
-            this.getFieldList().forEach(item => {
-                var view = null;
-                var field;
-                var readOnly = null;
-
-                if (typeof item === 'object') {
-                    field = item.name;
-                    view = item.view;
-
-                    if ('readOnly' in item) {
-                        readOnly = item.readOnly;
-                    }
-                }
-                else {
-                   field = item;
-                }
-
-                if (!item.isAdditional) {
-                    if (!(field in this.model.defs.fields)) {
-                        return;
-                    }
-                }
-
-                this.createField(field, view, null, null, readOnly, item.options);
-            });
-        },
-
-        /**
-         * @deprecated Use `getFieldViews`.
-         */
-        getFields: function () {
-            return this.getFieldViews();
-        },
-
-        /**
-         * Get field views.
-         *
-         * @return {Object.<string,module:views/fields/base.Class>}
-         */
-        getFieldViews: function () {
-            var fields = {};
-
-            this.getFieldList().forEach(item => {
-                if (this.hasView(item.viewKey)) {
-                    fields[item.name] = this.getView(item.viewKey);
-                }
-            });
-
-            return fields;
-        },
-
-        /**
-         * Get a field list.
-         *
-         * @return {module:views/record/panels/side~field[]}
-         */
-        getFieldList: function () {
-            return this.fieldList.map(item => {
-                if (typeof item !== 'object') {
-                    return {
-                        name: item,
-                    };
-                }
-
-                return item;
-            });
-        },
-
-        /**
-         * @return {module:views/record/panels-container~action[]}
-         */
-        getActionList: function () {
-            return this.actionList || [];
-        },
-
-        /**
-         * @return {module:views/record/panels-container~button[]}
-         */
-        getButtonList: function () {
-            return this.buttonList || [];
-        },
-
-        /**
-         * A `refresh` action.
-         */
-        actionRefresh: function () {
-            this.model.fetch();
-        },
-
-        /**
-         * Is tab-hidden.
-         *
-         * @return {boolean}
-         */
-        isTabHidden: function () {
-            if (this.defs.tabNumber === -1 || typeof this.defs.tabNumber === 'undefined') {
-                return false;
-            }
-
-            let parentView = this.getParentView();
-
-            if (!parentView) {
-                return this.defs.tabNumber > 0;
-            }
-
-            if (parentView && parentView.hasTabs) {
-                return parentView.currentTab !== defs.tabNumber;
-            }
+    /**
+     * A `refresh` action.
+     */
+    actionRefresh: function () {
+        this.model.fetch();
+    },
 
+    /**
+     * Is tab-hidden.
+     *
+     * @return {boolean}
+     */
+    isTabHidden: function () {
+        if (this.defs.tabNumber === -1 || typeof this.defs.tabNumber === 'undefined') {
             return false;
-        },
-    });
+        }
+
+        let parentView = this.getParentView();
+
+        if (!parentView) {
+            return this.defs.tabNumber > 0;
+        }
+
+        if (parentView && parentView.hasTabs) {
+            return parentView.currentTab !== defs.tabNumber;
+        }
+
+        return false;
+    },
 });
diff --git a/client/src/views/record/row-actions/default.js b/client/src/views/record/row-actions/default.js
index 43dddf1ab4..c2f01cf51c 100644
--- a/client/src/views/record/row-actions/default.js
+++ b/client/src/views/record/row-actions/default.js
@@ -26,93 +26,91 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/row-actions/default', ['view'], function (Dep) {
+import Dep from 'view';
+
+/**
+ * A detail-side record view.
+ *
+ * @class
+ * @name Class
+ * @extends module:view
+ */
+export default Dep.extend(/** @lends Class# */{
+
+    template: 'record/row-actions/default',
+
+    setup: function () {
+        this.options.acl = this.options.acl || {};
+    },
+
+    afterRender: function () {
+        let $dd = this.$el.find('button[data-toggle="dropdown"]').parent();
+
+        let isChecked = false;
+
+        $dd.on('show.bs.dropdown', () => {
+            let $el = this.$el.closest('.list-row');
+
+            isChecked = false;
+
+            if ($el.hasClass('active')) {
+                isChecked = true;
+            }
+
+            $el.addClass('active');
+        });
+
+        $dd.on('hide.bs.dropdown', () => {
+            if (!isChecked) {
+                this.$el.closest('.list-row').removeClass('active');
+            }
+        });
+    },
 
     /**
-     * A detail-side record view.
+     * Get an action list.
      *
-     * @class
-     * @name Class
-     * @extends module:view.Class
-     * @memberOf views/record/row-actions/default
+     * @return {module:views/record/list~rowAction[]}
      */
-    return Dep.extend(/** @lends views/record/row-actions/default.Class# */{
+    getActionList: function () {
+        var list = [{
+            action: 'quickView',
+            label: 'View',
+            data: {
+                id: this.model.id
+            },
+            link: '#' + this.model.name + '/view/' + this.model.id,
+        }];
 
-        template: 'record/row-actions/default',
-
-        setup: function () {
-            this.options.acl = this.options.acl || {};
-        },
-
-        afterRender: function () {
-            let $dd = this.$el.find('button[data-toggle="dropdown"]').parent();
-
-            let isChecked = false;
-
-            $dd.on('show.bs.dropdown', () => {
-                let $el = this.$el.closest('.list-row');
-
-                isChecked = false;
-
-                if ($el.hasClass('active')) {
-                    isChecked = true;
-                }
-
-                $el.addClass('active');
-            });
-
-            $dd.on('hide.bs.dropdown', () => {
-                if (!isChecked) {
-                    this.$el.closest('.list-row').removeClass('active');
-                }
-            });
-        },
-
-        /**
-         * Get an action list.
-         *
-         * @return {module:views/record/list~rowAction[]}
-         */
-        getActionList: function () {
-            var list = [{
-                action: 'quickView',
-                label: 'View',
+        if (this.options.acl.edit) {
+            list.push({
+                action: 'quickEdit',
+                label: 'Edit',
                 data: {
                     id: this.model.id
                 },
-                link: '#' + this.model.name + '/view/' + this.model.id,
-            }];
+                link: '#' + this.model.name + '/edit/' + this.model.id,
+            });
+        }
 
-            if (this.options.acl.edit) {
-                list.push({
-                    action: 'quickEdit',
-                    label: 'Edit',
-                    data: {
-                        id: this.model.id
-                    },
-                    link: '#' + this.model.name + '/edit/' + this.model.id,
-                });
-            }
+        if (this.options.acl.delete) {
+            list.push({
+                action: 'quickRemove',
+                label: 'Remove',
+                data: {
+                    id: this.model.id,
+                }
+            });
+        }
 
-            if (this.options.acl.delete) {
-                list.push({
-                    action: 'quickRemove',
-                    label: 'Remove',
-                    data: {
-                        id: this.model.id,
-                    }
-                });
-            }
+        return list;
+    },
 
-            return list;
-        },
-
-        data: function () {
-            return {
-                acl: this.options.acl,
-                actionList: this.getActionList(),
-                scope: this.model.name,
-            };
-        },
-    });
+    data: function () {
+        return {
+            acl: this.options.acl,
+            actionList: this.getActionList(),
+            scope: this.model.name,
+        };
+    },
 });
diff --git a/client/src/views/record/search.js b/client/src/views/record/search.js
index 0cddb70bd6..a067b38877 100644
--- a/client/src/views/record/search.js
+++ b/client/src/views/record/search.js
@@ -26,164 +26,100 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/record/search', ['view', 'helpers/misc/stored-text-search'], function (Dep, StoredTextSearch) {
+/** @module views/record/search */
 
-    /**
-     * @class
-     * @name Class
-     * @extends module:view.Class
-     * @memberOf module:views/record/search
-     */
-    return Dep.extend(/** @lends module:views/record/search.Class# */{
+import Dep from 'view';
+import StoredTextSearch from 'helpers/misc/stored-text-search';
 
-        template: 'record/search',
+/**
+ * @class
+ * @name Class
+ * @extends module:view
+ */
+export default Dep.extend(/** @lends Class# */{
 
-        scope: null,
-        /** @type {module:search-manager.Class} */
-        searchManager: null,
-        fieldFilterList: null,
-        /** @type {Object.<string, string>|null}*/
-        fieldFilterTranslations: null,
+    template: 'record/search',
 
-        textFilter: '',
-        primary: null,
-        presetFilterList: null,
-        advanced: null,
-        bool: null,
+    scope: null,
+    /** @type {module:search-manager} */
+    searchManager: null,
+    fieldFilterList: null,
+    /** @type {Object.<string, string>|null}*/
+    fieldFilterTranslations: null,
 
-        disableSavePreset: false,
-        textFilterDisabled: false,
-        toShowApplyFiltersButton: false,
-        toShowResetFiltersText: false,
-        isSearchedWithAdvancedFilter: false,
+    textFilter: '',
+    primary: null,
+    presetFilterList: null,
+    advanced: null,
+    bool: null,
 
-        viewModeIconClassMap: {
-            list: 'fas fa-align-justify',
-            kanban: 'fas fa-align-left fa-rotate-90',
-        },
+    disableSavePreset: false,
+    textFilterDisabled: false,
+    toShowApplyFiltersButton: false,
+    toShowResetFiltersText: false,
+    isSearchedWithAdvancedFilter: false,
 
-        FIELD_QUICK_SEARCH_COUNT_THRESHOLD: 4,
+    viewModeIconClassMap: {
+        list: 'fas fa-align-justify',
+        kanban: 'fas fa-align-left fa-rotate-90',
+    },
 
-        autocompleteLimit: 7,
+    FIELD_QUICK_SEARCH_COUNT_THRESHOLD: 4,
 
-        data: function () {
-            return {
-                scope: this.scope,
-                entityType: this.entityType,
-                textFilter: this.textFilter,
-                bool: this.bool || {},
-                boolFilterList: this.boolFilterList,
-                hasFieldQuickSearch: this.fieldFilterList.length >= this.FIELD_QUICK_SEARCH_COUNT_THRESHOLD,
-                filterFieldDataList: this.getFilterFieldDataList(),
-                filterDataList: this.getFilterDataList(),
-                presetName: this.presetName,
-                presetFilterList: this.getPresetFilterList(),
-                leftDropdown: this.isLeftDropdown(),
-                textFilterDisabled: this.textFilterDisabled,
-                viewMode: this.viewMode,
-                viewModeDataList: this.viewModeDataList || [],
-                hasViewModeSwitcher: this.viewModeList && this.viewModeList.length > 1,
-                isWide: this.options.isWide,
-                toShowApplyFiltersButton: this.toShowApplyFiltersButton,
-                toShowResetFiltersText: this.toShowResetFiltersText,
-            };
-        },
+    autocompleteLimit: 7,
 
-        setup: function () {
-            this.entityType = this.collection.name;
-            this.scope = this.options.scope || this.entityType;
+    data: function () {
+        return {
+            scope: this.scope,
+            entityType: this.entityType,
+            textFilter: this.textFilter,
+            bool: this.bool || {},
+            boolFilterList: this.boolFilterList,
+            hasFieldQuickSearch: this.fieldFilterList.length >= this.FIELD_QUICK_SEARCH_COUNT_THRESHOLD,
+            filterFieldDataList: this.getFilterFieldDataList(),
+            filterDataList: this.getFilterDataList(),
+            presetName: this.presetName,
+            presetFilterList: this.getPresetFilterList(),
+            leftDropdown: this.isLeftDropdown(),
+            textFilterDisabled: this.textFilterDisabled,
+            viewMode: this.viewMode,
+            viewModeDataList: this.viewModeDataList || [],
+            hasViewModeSwitcher: this.viewModeList && this.viewModeList.length > 1,
+            isWide: this.options.isWide,
+            toShowApplyFiltersButton: this.toShowApplyFiltersButton,
+            toShowResetFiltersText: this.toShowResetFiltersText,
+        };
+    },
 
-            /** @type {module:search-manager.Class} */
-            this.searchManager = this.options.searchManager;
+    setup: function () {
+        this.entityType = this.collection.name;
+        this.scope = this.options.scope || this.entityType;
 
-            /**
-             * @type {module:helpers/misc/stored-text-search.Class}
-             * @private
-             */
-            this.storedTextSearchHelper = new StoredTextSearch(this.scope, this.getHelper().storage);
+        /** @type {module:search-manager} */
+        this.searchManager = this.options.searchManager;
 
-            this.textSearchStoringDisabled = this.getPreferences().get('textSearchStoringDisabled');
+        /** @private */
+        this.storedTextSearchHelper = new StoredTextSearch(this.scope, this.getHelper().storage);
 
-            this.textFilterDisabled = this.options.textFilterDisabled || this.textFilterDisabled ||
-                this.getMetadata().get(['clientDefs', this.scope, 'textFilterDisabled']);
+        this.textSearchStoringDisabled = this.getPreferences().get('textSearchStoringDisabled');
 
-            if ('disableSavePreset' in this.options) {
-                this.disableSavePreset = this.options.disableSavePreset;
-            }
+        this.textFilterDisabled = this.options.textFilterDisabled || this.textFilterDisabled ||
+            this.getMetadata().get(['clientDefs', this.scope, 'textFilterDisabled']);
 
-            this.viewMode = this.options.viewMode;
-            this.viewModeList = this.options.viewModeList;
+        if ('disableSavePreset' in this.options) {
+            this.disableSavePreset = this.options.disableSavePreset;
+        }
 
-            this.addReadyCondition(() => {
-                return this.fieldFilterList !== null;
-            });
+        this.viewMode = this.options.viewMode;
+        this.viewModeList = this.options.viewModeList;
 
-            this.boolFilterList = Espo.Utils
-                .clone(this.getMetadata().get(['clientDefs', this.scope, 'boolFilterList']) || [])
-                .filter(item => {
-                    if (typeof item === 'string') {
-                        return true;
-                    }
+        this.addReadyCondition(() => {
+            return this.fieldFilterList !== null;
+        });
 
-                    item = item || {};
-
-                    if (item.aux) {
-                        return false;
-                    }
-
-                    if (item.inPortalDisabled && this.getUser().isPortal()) {
-                        return false;
-                    }
-
-                    if (item.isPortalOnly && !this.getUser().isPortal()) {
-                        return false;
-                    }
-
-                    if (item.accessDataList) {
-                        if (!Espo.Utils.checkAccessDataList(item.accessDataList, this.getAcl(), this.getUser())) {
-                            return false;
-                        }
-                    }
-
-                    return true;
-                })
-                .map(item => {
-                    if (typeof item === 'string') {
-                        return item;
-                    }
-
-                    item = item || {};
-
-                    return item.name;
-                });
-
-            this.fieldFilterTranslations = {};
-
-            let forbiddenFieldList = this.getAcl().getScopeForbiddenFieldList(this.entityType) || [];
-
-            this.wait(
-                new Promise(resolve => {
-                    this.getHelper().layoutManager.get(this.entityType, 'filters', list => {
-                        this.fieldFilterList = [];
-
-                        (list || []).forEach(field => {
-                            if (~forbiddenFieldList.indexOf(field)) {
-                                return;
-                            }
-
-                            this.fieldFilterList.push(field);
-                            this.fieldFilterTranslations[field] = this.translate(field, 'fields', this.entityType);
-                        });
-
-                        resolve();
-                    });
-                })
-            );
-
-            let filterList = this.options.filterList ||
-                this.getMetadata().get(['clientDefs', this.scope, 'filterList']) || [];
-
-            this.presetFilterList = Espo.Utils.clone(filterList).filter((item) => {
+        this.boolFilterList = Espo.Utils
+            .clone(this.getMetadata().get(['clientDefs', this.scope, 'boolFilterList']) || [])
+            .filter(item => {
                 if (typeof item === 'string') {
                     return true;
                 }
@@ -209,1105 +145,1167 @@ define('views/record/search', ['view', 'helpers/misc/stored-text-search'], funct
                 }
 
                 return true;
+            })
+            .map(item => {
+                if (typeof item === 'string') {
+                    return item;
+                }
+
+                item = item || {};
+
+                return item.name;
             });
 
-            ((this.getPreferences().get('presetFilters') || {})[this.scope] || [])
-                .forEach(item => {
-                    this.presetFilterList.push(item);
-                });
+        this.fieldFilterTranslations = {};
 
-            if (this.getMetadata().get(['scopes', this.entityType, 'stream'])) {
-                this.boolFilterList.push('followed');
-            }
+        let forbiddenFieldList = this.getAcl().getScopeForbiddenFieldList(this.entityType) || [];
 
-            this.loadSearchData();
+        this.wait(
+            new Promise(resolve => {
+                this.getHelper().layoutManager.get(this.entityType, 'filters', list => {
+                    this.fieldFilterList = [];
 
-            if (this.hasAdvancedFilter()) {
-                this.isSearchedWithAdvancedFilter = true;
-            }
-
-            if (this.presetName) {
-                let hasPresetListed = false;
-
-                for (let i in this.presetFilterList) {
-                    let item = this.presetFilterList[i] || {};
-
-                    let name = (typeof item === 'string') ? item : item.name;
-
-                    if (name === this.presetName) {
-                        hasPresetListed = true;
-
-                        break;
-                    }
-                }
-
-                if (!hasPresetListed) {
-                    this.presetFilterList.push(this.presetName);
-                }
-            }
-
-            this.model = new this.collection.model();
-
-            this.model.clear();
-
-            this.createFilters();
-            this.setupViewModeDataList();
-
-            this.listenTo(this.collection, 'order-changed', () => {
-                this.controlResetButtonVisibility();
-            });
-
-            this.getHelper().processSetupHandlers(this, 'record/search');
-        },
-
-        setupViewModeDataList: function () {
-            if (!this.viewModeList) {
-                return [];
-            }
-
-            let list = [];
-
-            this.viewModeList.forEach(item => {
-                let o = {
-                    name: item,
-                    title: this.translate(item, 'listViewModes'),
-                    iconClass: this.viewModeIconClassMap[item]
-                };
-
-                list.push(o);
-            });
-
-            this.viewModeDataList = list;
-        },
-
-        setViewMode: function (mode, preventLoop, toTriggerEvent) {
-            this.viewMode = mode;
-
-            if (this.isRendered()) {
-                this.$el.find('[data-action="switchViewMode"]').removeClass('active');
-                this.$el.find('[data-action="switchViewMode"][data-name="'+mode+'"]').addClass('active');
-            }
-            else {
-                if (this.isBeingRendered() && !preventLoop) {
-                    this.once('after:render', () => {
-                        this.setViewMode(mode, true);
-                    });
-                }
-            }
-
-            if (toTriggerEvent) {
-                this.trigger('change-view-mode', mode);
-            }
-        },
-
-        isLeftDropdown: function () {
-            return this.presetFilterList.length ||
-                this.boolFilterList.length ||
-                Object.keys(this.advanced || {}).length;
-        },
-
-        handleLeftDropdownVisibility: function () {
-            if (this.isLeftDropdown()) {
-                this.$leftDropdown.removeClass('hidden');
-            }
-            else {
-                this.$leftDropdown.addClass('hidden');
-            }
-        },
-
-        createFilters: function (callback) {
-            let i = 0;
-            let count = Object.keys(this.advanced || {}).length;
-
-            if (count === 0) {
-                if (typeof callback === 'function') {
-                    callback();
-                }
-            }
-
-            for (let field in this.advanced) {
-                this.createFilter(field, this.advanced[field], () =>{
-                    i++;
-
-                    if (i === count) {
-                        if (typeof callback === 'function') {
-                            callback();
-                        }
-                    }
-                });
-            }
-        },
-
-        events: {
-            'keydown input[data-name="textFilter"]': function (e) {
-                let key = Espo.Utils.getKeyFromKeyEvent(e);
-
-                if (e.code === 'Enter' || key === 'Enter' || key === 'Control+Enter') {
-                    this.search();
-
-                    this.hideApplyFiltersButton();
-                }
-            },
-
-            'focus input[data-name="textFilter"]': function (e) {
-                e.currentTarget.select();
-            },
-
-            'click .advanced-filters-apply-container a[data-action="applyFilters"]': function (e) {
-                this.search();
-                this.hideApplyFiltersButton();
-
-                this.$el.find('button.search').focus();
-            },
-
-            'click button[data-action="search"]': function (e) {
-                this.search();
-                this.hideApplyFiltersButton();
-            },
-
-            'click a[data-action="addFilter"]': function (e) {
-                let $target = $(e.currentTarget);
-                let name = $target.data('name');
-
-                $target.closest('li').addClass('hidden');
-
-                this.addFilter(name);
-            },
-
-            'click .advanced-filters a.remove-filter': function (e) {
-                let $target = $(e.currentTarget);
-
-                let name = $target.data('name');
-
-                this.removeFilter(name);
-            },
-
-            'click button[data-action="reset"]': function (e) {
-                this.resetFilters();
-            },
-
-            'click button[data-action="refresh"]': function (e) {
-                this.refresh();
-            },
-
-            'click a[data-action="selectPreset"]': function (e) {
-                let $target = $(e.currentTarget);
-
-                let presetName = $target.data('name') || null;
-
-                this.selectPreset(presetName);
-            },
-
-            'click .dropdown-menu a[data-action="savePreset"]': function () {
-                this.createView('savePreset', 'views/modals/save-filters', {}, view => {
-                    view.render();
-
-                    this.listenToOnce(view, 'save', (name) => {
-                        this.savePreset(name);
-
-                        view.close();
-
-                        this.removeFilters();
-
-                        this.createFilters(() => {
-                            this.render();
-                        });
-                    });
-                });
-            },
-
-            'click .dropdown-menu a[data-action="removePreset"]': function () {
-                let id = this.presetName;
-
-                this.confirm(this.translate('confirmation', 'messages'), () => {
-                    this.removePreset(id);
-                });
-            },
-
-            'change .search-row ul.filter-menu input[data-role="boolFilterCheckbox"]': function (e) {
-                e.stopPropagation();
-
-                this.search();
-                this.manageLabels();
-            },
-
-            'click [data-action="switchViewMode"]': function (e) {
-                let mode = $(e.currentTarget).data('name');
-
-                if (mode === this.viewMode) {
-                    return;
-                }
-
-                this.setViewMode(mode, false, true);
-            },
-
-            'keyup input.field-filter-quick-search-input': function (e) {
-                this.processFieldFilterQuickSearch(e.currentTarget.value);
-            },
-
-            'keydown input.field-filter-quick-search-input': function (e) {
-                if (e.code === 'Enter') {
-                    this.addFirstFieldFilter();
-
-                    return;
-                }
-
-                if (e.code === 'Escape') {
-                    this.closeAddFieldDropdown();
-                }
-            },
-        },
-
-        removeFilter: function (name) {
-            this.$el.find('ul.filter-list li[data-name="' + name + '"]').removeClass('hidden');
-
-            let container = this.getView('filter-' + name).$el.closest('div.filter');
-
-            this.clearView('filter-' + name);
-
-            container.remove();
-
-            delete this.advanced[name];
-
-            this.presetName = this.primary;
-
-            this.updateAddFilterButton();
-            this.fetch();
-            this.updateSearch();
-            this.manageLabels();
-            this.handleLeftDropdownVisibility();
-            this.controlResetButtonVisibility();
-
-            if (this.isSearchedWithAdvancedFilter) {
-                this.hasAdvancedFilter() ?
-                    this.showApplyFiltersButton() :
-                    this.showResetFiltersButton();
-
-                this.$applyFilters.focus();
-
-                return;
-            }
-
-            if (!this.hasAdvancedFilter()) {
-                this.hideApplyFiltersButton();
-            }
-        },
-
-        addFilter: function (name) {
-            this.advanced[name] = {};
-
-            this.presetName = this.primary;
-
-            this.createFilter(name, {}, (view) => {
-                view.populateDefaults();
-
-                this.fetch();
-                this.updateSearch();
-
-                if (view.getView('field').initialSearchIsNotIdle) {
-                    this.showApplyFiltersButton();
-                }
-            });
-
-            this.updateAddFilterButton();
-            this.handleLeftDropdownVisibility();
-
-            this.manageLabels();
-            this.controlResetButtonVisibility();
-        },
-
-        refresh: function () {
-            Espo.Ui.notify(' ... ');
-
-            this.collection.abortLastFetch();
-            this.collection.reset();
-
-            this.collection.fetch().then(() => {
-                Espo.Ui.notify(false);
-            });
-        },
-
-        selectPreset: function (presetName, forceClearAdvancedFilters) {
-            let wasPreset = !(this.primary === this.presetName);
-
-            this.presetName = presetName;
-
-            let advanced = this.getPresetData();
-
-            this.primary = this.getPrimaryFilterName();
-
-            let isPreset = !(this.primary === this.presetName);
-
-            if (forceClearAdvancedFilters || wasPreset || isPreset || Object.keys(advanced).length) {
-                this.removeFilters();
-                this.advanced = advanced;
-            }
-
-            this.updateSearch();
-            this.manageLabels();
-
-            this.createFilters(() => {
-                this.reRender()
-                    .then(() => {
-                        this.$el.find('.filters-button')
-                            .get(0).focus({preventScroll: true});
-                    })
-            });
-
-            this.updateCollection();
-        },
-
-        removeFilters: function () {
-            this.$advancedFiltersPanel.empty();
-
-            for (let name in this.advanced) {
-                this.clearView('filter-' + name);
-            }
-        },
-
-        resetFilters: function () {
-            this.trigger('reset');
-
-            this.collection.resetOrderToDefault();
-
-            this.textFilter = '';
-
-            this.selectPreset(this.presetName, true);
-
-            this.hideApplyFiltersButton();
-
-            this.trigger('update-ui');
-        },
-
-        savePreset: function (name) {
-            let id = 'f' + (Math.floor(Math.random() * 1000001)).toString();
-
-            this.fetch();
-            this.updateSearch();
-
-            let presetFilters = this.getPreferences().get('presetFilters') || {};
-
-            if (!(this.scope in presetFilters)) {
-                presetFilters[this.scope] = [];
-            }
-
-            let data = {
-                id: id,
-                name: id,
-                label: name,
-                data: this.advanced,
-                primary: this.primary,
-            };
-
-            presetFilters[this.scope].push(data);
-
-            this.presetFilterList.push(data);
-
-            this.getPreferences().once('sync', () => {
-                this.getPreferences().trigger('update');
-                this.updateSearch()
-            });
-
-            this.getPreferences().save({'presetFilters': presetFilters}, {patch: true});
-
-            this.presetName = id;
-        },
-
-        removePreset: function (id) {
-            let presetFilters = this.getPreferences().get('presetFilters') || {};
-
-            if (!(this.scope in presetFilters)) {
-                presetFilters[this.scope] = [];
-            }
-
-            let list;
-
-            list = presetFilters[this.scope];
-
-            list.forEach((item, i) => {
-                if (item.id === id) {
-                    list.splice(i, 1);
-                }
-            });
-
-            list = this.presetFilterList;
-
-            list.forEach((item, i) => {
-                if (item.id === id) {
-                    list.splice(i, 1);
-                }
-            });
-
-            this.getPreferences().set('presetFilters', presetFilters);
-            this.getPreferences().save({patch: true});
-            this.getPreferences().trigger('update');
-
-            this.presetName = this.primary;
-            this.advanced = {};
-
-            this.removeFilters();
-
-            this.render();
-            this.updateSearch();
-            this.updateCollection();
-        },
-
-        updateAddFilterButton: function () {
-            let $ul = this.$el.find('ul.filter-list');
-
-            if (
-                $ul.children()
-                    .not('.hidden')
-                    .not('.dropdown-header')
-                    .not('.quick-search-list-item').length === 0
-            ) {
-                this.$addFilterButton.addClass('disabled');
-            }
-            else {
-                this.$addFilterButton.removeClass('disabled');
-            }
-
-            this.trigger('update-ui');
-        },
-
-        afterRender: function () {
-            this.$filtersLabel = this.$el.find('.search-row span.filters-label');
-            this.$filtersButton = this.$el.find('.search-row button.filters-button');
-            this.$leftDropdown = this.$el.find('div.search-row div.left-dropdown');
-            this.$resetButton = this.$el.find('[data-action="reset"]');
-            this.$applyFiltersContainer = this.$el.find('.advanced-filters-apply-container');
-            this.$applyFilters = this.$applyFiltersContainer.find('[data-action="applyFilters"]');
-            /** @type {JQuery} */
-            this.$filterList = this.$el.find('ul.filter-list');
-            /** @type {JQuery} */
-            this.$fieldQuickSearch = this.$filterList.find('input.field-filter-quick-search-input');
-            /** @type {JQuery} */
-            this.$addFilterButton = this.$el.find('button.add-filter-button');
-            /** @type {JQuery} */
-            this.$textFilter = this.$el.find('input.text-filter');
-
-            this.updateAddFilterButton();
-
-            this.$advancedFiltersPanel = this.$el.find('.advanced-filters');
-
-            this.manageLabels();
-            this.controlResetButtonVisibility();
-            this.initQuickSearchUi();
-            this.initTextSearchAutocomplete();
-        },
-
-        initTextSearchAutocomplete: function () {
-            if (this.textSearchStoringDisabled) {
-                return;
-            }
-
-            let preventCloseOnBlur = false;
-
-            let options = {
-                minChars: 0,
-                noCache: true,
-                triggerSelectOnValidInput: false,
-                beforeRender: ($container) => {
-                    $container.addClass('text-search-suggestions');
-
-                    $container.off('mousedown');
-                    $container.on('mousedown', e => {
-                        if (e.originalEvent.button !== 0) {
+                    (list || []).forEach(field => {
+                        if (~forbiddenFieldList.indexOf(field)) {
                             return;
                         }
 
-                        preventCloseOnBlur = true;
-                        setTimeout(() => preventCloseOnBlur = false, 201);
+                        this.fieldFilterList.push(field);
+                        this.fieldFilterTranslations[field] = this.translate(field, 'fields', this.entityType);
                     });
 
-                    $container.find('a[data-action="clearStoredTextSearch"]').on('click', e => {
-                        e.stopPropagation();
-                        e.preventDefault();
+                    resolve();
+                });
+            })
+        );
 
-                        let text = e.currentTarget.getAttribute('data-value');
+        let filterList = this.options.filterList ||
+            this.getMetadata().get(['clientDefs', this.scope, 'filterList']) || [];
 
-                        this.storedTextSearchHelper.remove(text);
+        this.presetFilterList = Espo.Utils.clone(filterList).filter((item) => {
+            if (typeof item === 'string') {
+                return true;
+            }
 
-                        setTimeout(() => this.$textFilter.focus(), 205);
-                    });
-                },
-                formatResult: item => {
-                    return $('<span>')
-                        .append(
-                            $('<a>')
-                                .attr('data-action', 'clearStoredTextSearch')
-                                .attr('role', 'button')
-                                .attr('data-value', item.value)
-                                .attr('title', this.translate('Remove'))
-                                .html('<span class="fas fa-times fa-sm"></span>')
-                                .addClass('pull-right text-soft'),
-                            $('<span>')
-                                .text(item.value)
-                        )
-                        .get(0).innerHTML;
-                },
-                lookup: (text, done) => {
-                    let suggestions = this.storedTextSearchHelper.match(text, this.autocompleteLimit)
-                        .map(item => {
-                            return {value: item};
-                        });
+            item = item || {};
 
-                    done({suggestions: suggestions});
-                },
-                onSelect: () => {
-                    this.$textFilter.focus();
-                    this.$textFilter.autocomplete('hide');
-                },
+            if (item.aux) {
+                return false;
+            }
+
+            if (item.inPortalDisabled && this.getUser().isPortal()) {
+                return false;
+            }
+
+            if (item.isPortalOnly && !this.getUser().isPortal()) {
+                return false;
+            }
+
+            if (item.accessDataList) {
+                if (!Espo.Utils.checkAccessDataList(item.accessDataList, this.getAcl(), this.getUser())) {
+                    return false;
+                }
+            }
+
+            return true;
+        });
+
+        ((this.getPreferences().get('presetFilters') || {})[this.scope] || [])
+            .forEach(item => {
+                this.presetFilterList.push(item);
+            });
+
+        if (this.getMetadata().get(['scopes', this.entityType, 'stream'])) {
+            this.boolFilterList.push('followed');
+        }
+
+        this.loadSearchData();
+
+        if (this.hasAdvancedFilter()) {
+            this.isSearchedWithAdvancedFilter = true;
+        }
+
+        if (this.presetName) {
+            let hasPresetListed = false;
+
+            for (let i in this.presetFilterList) {
+                let item = this.presetFilterList[i] || {};
+
+                let name = (typeof item === 'string') ? item : item.name;
+
+                if (name === this.presetName) {
+                    hasPresetListed = true;
+
+                    break;
+                }
+            }
+
+            if (!hasPresetListed) {
+                this.presetFilterList.push(this.presetName);
+            }
+        }
+
+        this.model = new this.collection.model();
+
+        this.model.clear();
+
+        this.createFilters();
+        this.setupViewModeDataList();
+
+        this.listenTo(this.collection, 'order-changed', () => {
+            this.controlResetButtonVisibility();
+        });
+
+        this.getHelper().processSetupHandlers(this, 'record/search');
+    },
+
+    setupViewModeDataList: function () {
+        if (!this.viewModeList) {
+            return [];
+        }
+
+        let list = [];
+
+        this.viewModeList.forEach(item => {
+            let o = {
+                name: item,
+                title: this.translate(item, 'listViewModes'),
+                iconClass: this.viewModeIconClassMap[item]
             };
 
-            this.$textFilter.autocomplete(options);
+            list.push(o);
+        });
 
-            this.$textFilter.on('blur', () => {
-                if (preventCloseOnBlur) {
-                    return;
-                }
+        this.viewModeDataList = list;
+    },
 
-                setTimeout(() => this.$textFilter.autocomplete('hide'), 1);
-            });
+    setViewMode: function (mode, preventLoop, toTriggerEvent) {
+        this.viewMode = mode;
 
-            this.$textFilter.on('focus', () => {
-                if (this.$textFilter.val()) {
-                    this.$textFilter.autocomplete('hide');
+        if (this.isRendered()) {
+            this.$el.find('[data-action="switchViewMode"]').removeClass('active');
+            this.$el.find('[data-action="switchViewMode"][data-name="'+mode+'"]').addClass('active');
+        }
+        else {
+            if (this.isBeingRendered() && !preventLoop) {
+                this.once('after:render', () => {
+                    this.setViewMode(mode, true);
+                });
+            }
+        }
+
+        if (toTriggerEvent) {
+            this.trigger('change-view-mode', mode);
+        }
+    },
+
+    isLeftDropdown: function () {
+        return this.presetFilterList.length ||
+            this.boolFilterList.length ||
+            Object.keys(this.advanced || {}).length;
+    },
+
+    handleLeftDropdownVisibility: function () {
+        if (this.isLeftDropdown()) {
+            this.$leftDropdown.removeClass('hidden');
+        }
+        else {
+            this.$leftDropdown.addClass('hidden');
+        }
+    },
+
+    createFilters: function (callback) {
+        let i = 0;
+        let count = Object.keys(this.advanced || {}).length;
+
+        if (count === 0) {
+            if (typeof callback === 'function') {
+                callback();
+            }
+        }
+
+        for (let field in this.advanced) {
+            this.createFilter(field, this.advanced[field], () =>{
+                i++;
+
+                if (i === count) {
+                    if (typeof callback === 'function') {
+                        callback();
+                    }
                 }
             });
+        }
+    },
 
-            this.once('render', () => this.$textFilter.autocomplete('dispose'));
-            this.once('remove', () => this.$textFilter.autocomplete('dispose'));
+    events: {
+        'keydown input[data-name="textFilter"]': function (e) {
+            let key = Espo.Utils.getKeyFromKeyEvent(e);
+
+            if (e.code === 'Enter' || key === 'Enter' || key === 'Control+Enter') {
+                this.search();
+
+                this.hideApplyFiltersButton();
+            }
         },
 
-        initQuickSearchUi: function () {
-            this.$addFilterButton.parent().on('show.bs.dropdown', () => {
-                setTimeout(() => {
-                    this.$fieldQuickSearch.focus();
+        'focus input[data-name="textFilter"]': function (e) {
+            e.currentTarget.select();
+        },
 
-                    let width = this.$fieldQuickSearch.outerWidth();
+        'click .advanced-filters-apply-container a[data-action="applyFilters"]': function (e) {
+            this.search();
+            this.hideApplyFiltersButton();
 
-                    this.$fieldQuickSearch.css('minWidth', width);
-                }, 1);
-            });
+            this.$el.find('button.search').focus();
+        },
 
-            this.$addFilterButton.parent().on('hide.bs.dropdown', () => {
-                this.resetFieldFilterQuickSearch();
+        'click button[data-action="search"]': function (e) {
+            this.search();
+            this.hideApplyFiltersButton();
+        },
 
-                this.$fieldQuickSearch.css('minWidth', '');
+        'click a[data-action="addFilter"]': function (e) {
+            let $target = $(e.currentTarget);
+            let name = $target.data('name');
+
+            $target.closest('li').addClass('hidden');
+
+            this.addFilter(name);
+        },
+
+        'click .advanced-filters a.remove-filter': function (e) {
+            let $target = $(e.currentTarget);
+
+            let name = $target.data('name');
+
+            this.removeFilter(name);
+        },
+
+        'click button[data-action="reset"]': function (e) {
+            this.resetFilters();
+        },
+
+        'click button[data-action="refresh"]': function (e) {
+            this.refresh();
+        },
+
+        'click a[data-action="selectPreset"]': function (e) {
+            let $target = $(e.currentTarget);
+
+            let presetName = $target.data('name') || null;
+
+            this.selectPreset(presetName);
+        },
+
+        'click .dropdown-menu a[data-action="savePreset"]': function () {
+            this.createView('savePreset', 'views/modals/save-filters', {}, view => {
+                view.render();
+
+                this.listenToOnce(view, 'save', (name) => {
+                    this.savePreset(name);
+
+                    view.close();
+
+                    this.removeFilters();
+
+                    this.createFilters(() => {
+                        this.render();
+                    });
+                });
             });
         },
 
-        manageLabels: function () {
-            this.$el.find('ul.dropdown-menu > li.preset-control').addClass('hidden');
+        'click .dropdown-menu a[data-action="removePreset"]': function () {
+            let id = this.presetName;
 
-            this.currentFilterLabelList = [];
-
-            this.managePresetFilters();
-            this.manageBoolFilters();
-
-            this.$filtersLabel.html(this.currentFilterLabelList.join(' &middot; '));
+            this.confirm(this.translate('confirmation', 'messages'), () => {
+                this.removePreset(id);
+            });
         },
 
-        /**
-         * @private
-         * @return {boolean}
-         */
-        toShowResetButton: function () {
-            if (this.textFilter) {
-                return true;
-            }
+        'change .search-row ul.filter-menu input[data-role="boolFilterCheckbox"]': function (e) {
+            e.stopPropagation();
 
-            let presetName = this.presetName || null;
-            let primary = this.primary;
-
-            if (!presetName || presetName === primary) {
-                if (Object.keys(this.advanced).length) {
-                    return true;
-                }
-            }
-
-            if (
-                this.collection.orderBy !== this.collection.defaultOrderBy ||
-                this.collection.order !== this.collection.defaultOrder
-            ) {
-                return true;
-            }
-
-            return false;
+            this.search();
+            this.manageLabels();
         },
 
-        controlResetButtonVisibility: function () {
-            if (this.toShowResetButton()) {
-                this.$resetButton.css('visibility', 'visible');
+        'click [data-action="switchViewMode"]': function (e) {
+            let mode = $(e.currentTarget).data('name');
+
+            if (mode === this.viewMode) {
+                return;
+            }
+
+            this.setViewMode(mode, false, true);
+        },
+
+        'keyup input.field-filter-quick-search-input': function (e) {
+            this.processFieldFilterQuickSearch(e.currentTarget.value);
+        },
+
+        'keydown input.field-filter-quick-search-input': function (e) {
+            if (e.code === 'Enter') {
+                this.addFirstFieldFilter();
 
                 return;
             }
 
-            this.$resetButton.css('visibility', 'hidden');
-        },
-
-        managePresetFilters: function () {
-            let presetName = this.presetName || null;
-            let primary = this.primary;
-
-            this.$el.find('ul.filter-menu a.preset span').remove();
-
-            let filterLabel = this.translate('all', 'presetFilters', this.entityType);
-            let filterStyle = 'default';
-
-            if (!presetName && primary) {
-                presetName = primary;
+            if (e.code === 'Escape') {
+                this.closeAddFieldDropdown();
             }
-
-            if (presetName && presetName !== primary) {
-                this.$advancedFiltersPanel.addClass('hidden');
-
-                let label = null;
-                let style = 'default';
-                let id = null;
-
-                this.presetFilterList.forEach(item => {
-                    if (item.name === presetName) {
-                        label = item.label || false;
-                        style = item.style || 'default';
-                        id = item.id;
-                    }
-                });
-
-                label = label || this.translate(this.presetName, 'presetFilters', this.entityType);
-
-                filterLabel = label;
-                filterStyle = style;
-
-                if (id) {
-	                this.$el.find('ul.dropdown-menu > li.divider.preset-control').removeClass('hidden');
-	                this.$el.find('ul.dropdown-menu > li.preset-control.remove-preset').removeClass('hidden');
-            	}
-            }
-            else {
-                this.$advancedFiltersPanel.removeClass('hidden');
-
-                if (Object.keys(this.advanced).length !== 0) {
-                    if (!this.disableSavePreset) {
-                        this.$el.find('ul.dropdown-menu > li.divider.preset-control').removeClass('hidden');
-                        this.$el.find('ul.dropdown-menu > li.preset-control.save-preset').removeClass('hidden');
-                        this.$el.find('ul.dropdown-menu > li.preset-control.remove-preset').addClass('hidden');
-                    }
-                }
-
-                if (primary) {
-                    let label = this.translate(primary, 'presetFilters', this.entityType);
-                    let style = this.getPrimaryFilterStyle();
-
-                    filterLabel = label;
-                    filterStyle = style;
-                }
-            }
-
-            this.currentFilterLabelList.push(filterLabel);
-
-            this.$filtersButton
-                .removeClass('btn-default')
-                .removeClass('btn-primary')
-                .removeClass('btn-danger')
-                .removeClass('btn-success')
-                .removeClass('btn-info');
-
-            this.$filtersButton.addClass('btn-' + filterStyle);
-
-            presetName = presetName || '';
-
-            this.$el
-                .find('ul.filter-menu a.preset[data-name="'+presetName+'"]')
-                .prepend('<span class="fas fa-check pull-right"></span>');
         },
+    },
 
-        manageBoolFilters: function () {
-            (this.boolFilterList || []).forEach((item) => {
-                if (this.bool[item]) {
-                    let label = this.translate(item, 'boolFilters', this.entityType);
+    removeFilter: function (name) {
+        this.$el.find('ul.filter-list li[data-name="' + name + '"]').removeClass('hidden');
 
-                    this.currentFilterLabelList.push(label);
-                }
-            });
-        },
+        let container = this.getView('filter-' + name).$el.closest('div.filter');
+
+        this.clearView('filter-' + name);
+
+        container.remove();
+
+        delete this.advanced[name];
+
+        this.presetName = this.primary;
+
+        this.updateAddFilterButton();
+        this.fetch();
+        this.updateSearch();
+        this.manageLabels();
+        this.handleLeftDropdownVisibility();
+        this.controlResetButtonVisibility();
+
+        if (this.isSearchedWithAdvancedFilter) {
+            this.hasAdvancedFilter() ?
+                this.showApplyFiltersButton() :
+                this.showResetFiltersButton();
+
+            this.$applyFilters.focus();
+
+            return;
+        }
+
+        if (!this.hasAdvancedFilter()) {
+            this.hideApplyFiltersButton();
+        }
+    },
+
+    addFilter: function (name) {
+        this.advanced[name] = {};
+
+        this.presetName = this.primary;
+
+        this.createFilter(name, {}, (view) => {
+            view.populateDefaults();
 
-        search: function () {
             this.fetch();
             this.updateSearch();
-            this.updateCollection();
-            this.controlResetButtonVisibility();
-            this.storeTextSearch();
 
-            this.isSearchedWithAdvancedFilter = this.hasAdvancedFilter();
-        },
-
-        hasAdvancedFilter: function () {
-            return Object.keys(this.advanced).length > 0;
-        },
-
-        getFilterDataList: function () {
-            let arr = [];
-
-            for (let field in this.advanced) {
-                arr.push({
-                    key: 'filter-' + field,
-                    name: field,
-                });
+            if (view.getView('field').initialSearchIsNotIdle) {
+                this.showApplyFiltersButton();
             }
+        });
 
-            return arr;
-        },
+        this.updateAddFilterButton();
+        this.handleLeftDropdownVisibility();
 
-        updateCollection: function () {
-            this.collection.abortLastFetch();
-            this.collection.reset();
-            this.collection.where = this.searchManager.getWhere();
-            this.collection.offset = 0;
+        this.manageLabels();
+        this.controlResetButtonVisibility();
+    },
 
-            Espo.Ui.notify(' ... ');
+    refresh: function () {
+        Espo.Ui.notify(' ... ');
 
-            this.collection.fetch().then(() => {
-                Espo.Ui.notify(false);
-            });
-        },
+        this.collection.abortLastFetch();
+        this.collection.reset();
 
-        getPresetFilterList: function () {
-            let arr = [];
+        this.collection.fetch().then(() => {
+            Espo.Ui.notify(false);
+        });
+    },
 
-            this.presetFilterList.forEach((item) => {
-            	if (typeof item == 'string') {
-            		item = {name: item};
-            	}
+    selectPreset: function (presetName, forceClearAdvancedFilters) {
+        let wasPreset = !(this.primary === this.presetName);
 
-            	arr.push(item);
-            });
+        this.presetName = presetName;
 
-            return arr;
-        },
+        let advanced = this.getPresetData();
 
-        getPresetData: function () {
-            let data = {};
+        this.primary = this.getPrimaryFilterName();
 
-            this.getPresetFilterList().forEach(item => {
-                if (item.name === this.presetName) {
-                    data = Espo.Utils.clone(item.data || {});
-                }
-            });
+        let isPreset = !(this.primary === this.presetName);
 
-            return data;
-        },
+        if (forceClearAdvancedFilters || wasPreset || isPreset || Object.keys(advanced).length) {
+            this.removeFilters();
+            this.advanced = advanced;
+        }
 
-        getPrimaryFilterName: function () {
-            let primaryFilterName = null;
+        this.updateSearch();
+        this.manageLabels();
 
-            this.getPresetFilterList().forEach(item => {
-                if (item.name === this.presetName) {
-                    if (!('data' in item)) {
-                        primaryFilterName = item.name;
-                    }
-                    else if (item.primary) {
-                        primaryFilterName = item.primary;
-                    }
-                }
-            });
+        this.createFilters(() => {
+            this.reRender()
+                .then(() => {
+                    this.$el.find('.filters-button')
+                        .get(0).focus({preventScroll: true});
+                })
+        });
 
-            return primaryFilterName;
-        },
+        this.updateCollection();
+    },
 
-        getPrimaryFilterStyle: function () {
-            let style = null;
+    removeFilters: function () {
+        this.$advancedFiltersPanel.empty();
 
-            this.getPresetFilterList().forEach(item => {
-                if (item.name === this.primary) {
-                    style = item.style || 'default';
-                }
-            });
+        for (let name in this.advanced) {
+            this.clearView('filter-' + name);
+        }
+    },
 
-            return style;
-        },
+    resetFilters: function () {
+        this.trigger('reset');
 
-        loadSearchData: function () {
-            let searchData = this.searchManager.get();
+        this.collection.resetOrderToDefault();
 
-            this.textFilter = searchData.textFilter;
+        this.textFilter = '';
 
-            if ('presetName' in searchData) {
-                this.presetName = searchData.presetName;
+        this.selectPreset(this.presetName, true);
+
+        this.hideApplyFiltersButton();
+
+        this.trigger('update-ui');
+    },
+
+    savePreset: function (name) {
+        let id = 'f' + (Math.floor(Math.random() * 1000001)).toString();
+
+        this.fetch();
+        this.updateSearch();
+
+        let presetFilters = this.getPreferences().get('presetFilters') || {};
+
+        if (!(this.scope in presetFilters)) {
+            presetFilters[this.scope] = [];
+        }
+
+        let data = {
+            id: id,
+            name: id,
+            label: name,
+            data: this.advanced,
+            primary: this.primary,
+        };
+
+        presetFilters[this.scope].push(data);
+
+        this.presetFilterList.push(data);
+
+        this.getPreferences().once('sync', () => {
+            this.getPreferences().trigger('update');
+            this.updateSearch()
+        });
+
+        this.getPreferences().save({'presetFilters': presetFilters}, {patch: true});
+
+        this.presetName = id;
+    },
+
+    removePreset: function (id) {
+        let presetFilters = this.getPreferences().get('presetFilters') || {};
+
+        if (!(this.scope in presetFilters)) {
+            presetFilters[this.scope] = [];
+        }
+
+        let list;
+
+        list = presetFilters[this.scope];
+
+        list.forEach((item, i) => {
+            if (item.id === id) {
+                list.splice(i, 1);
             }
+        });
 
-            let primaryIsSet = false;
+        list = this.presetFilterList;
 
-            if ('primary' in searchData) {
-                this.primary = searchData.primary;
-
-                if (!this.presetName) {
-                    this.presetName = this.primary;
-                }
-
-                primaryIsSet = true;
+        list.forEach((item, i) => {
+            if (item.id === id) {
+                list.splice(i, 1);
             }
+        });
 
-            if (this.presetName) {
-                this.advanced = _.extend(Espo.Utils.clone(this.getPresetData()), searchData.advanced);
+        this.getPreferences().set('presetFilters', presetFilters);
+        this.getPreferences().save({patch: true});
+        this.getPreferences().trigger('update');
 
-                if (!primaryIsSet) {
-                    this.primary = this.getPrimaryFilterName();
-                }
-            }
-            else {
-                this.advanced = Espo.Utils.clone(searchData.advanced);
-            }
+        this.presetName = this.primary;
+        this.advanced = {};
 
-            this.bool = searchData.bool;
-        },
+        this.removeFilters();
 
-        createFilter: function (name, params, callback, noRender) {
-            params = params || {};
+        this.render();
+        this.updateSearch();
+        this.updateCollection();
+    },
 
-            let rendered = false;
+    updateAddFilterButton: function () {
+        let $ul = this.$el.find('ul.filter-list');
 
-            if (this.isRendered()) {
-                rendered = true;
+        if (
+            $ul.children()
+                .not('.hidden')
+                .not('.dropdown-header')
+                .not('.quick-search-list-item').length === 0
+        ) {
+            this.$addFilterButton.addClass('disabled');
+        }
+        else {
+            this.$addFilterButton.removeClass('disabled');
+        }
 
-                this.$advancedFiltersPanel.append(
-                    '<div data-name="'+name+'" class="filter filter-' + name + '" />'
-                );
-            }
+        this.trigger('update-ui');
+    },
 
-            this.createView('filter-' + name, 'views/search/filter', {
-                name: name,
-                model: this.model,
-                params: params,
-                el: this.options.el + ' .filter[data-name="' + name + '"]',
-            }, (view) => {
-                if (typeof callback === 'function') {
-                    view.once('after:render', () => {
-                        callback(view);
-                    });
-                }
+    afterRender: function () {
+        this.$filtersLabel = this.$el.find('.search-row span.filters-label');
+        this.$filtersButton = this.$el.find('.search-row button.filters-button');
+        this.$leftDropdown = this.$el.find('div.search-row div.left-dropdown');
+        this.$resetButton = this.$el.find('[data-action="reset"]');
+        this.$applyFiltersContainer = this.$el.find('.advanced-filters-apply-container');
+        this.$applyFilters = this.$applyFiltersContainer.find('[data-action="applyFilters"]');
+        /** @type {JQuery} */
+        this.$filterList = this.$el.find('ul.filter-list');
+        /** @type {JQuery} */
+        this.$fieldQuickSearch = this.$filterList.find('input.field-filter-quick-search-input');
+        /** @type {JQuery} */
+        this.$addFilterButton = this.$el.find('button.add-filter-button');
+        /** @type {JQuery} */
+        this.$textFilter = this.$el.find('input.text-filter');
 
-                if (rendered && !noRender) {
-                    view.render();
-                }
+        this.updateAddFilterButton();
 
-                this.listenTo(view, 'change', () => {
-                    let toShowApply = this.isSearchedWithAdvancedFilter;
+        this.$advancedFiltersPanel = this.$el.find('.advanced-filters');
 
-                    if (!toShowApply) {
-                        let data = view.getView('field').fetchSearch();
+        this.manageLabels();
+        this.controlResetButtonVisibility();
+        this.initQuickSearchUi();
+        this.initTextSearchAutocomplete();
+    },
 
-                        if (data) {
-                            toShowApply = true;
-                        }
-                    }
+    initTextSearchAutocomplete: function () {
+        if (this.textSearchStoringDisabled) {
+            return;
+        }
 
-                    if (!toShowApply) {
+        let preventCloseOnBlur = false;
+
+        let options = {
+            minChars: 0,
+            noCache: true,
+            triggerSelectOnValidInput: false,
+            beforeRender: ($container) => {
+                $container.addClass('text-search-suggestions');
+
+                $container.off('mousedown');
+                $container.on('mousedown', e => {
+                    if (e.originalEvent.button !== 0) {
                         return;
                     }
 
-                    this.showApplyFiltersButton();
+                    preventCloseOnBlur = true;
+                    setTimeout(() => preventCloseOnBlur = false, 201);
                 });
 
-                this.listenTo(view, 'search', () => {
-                    this.search();
-                    this.hideApplyFiltersButton();
+                $container.find('a[data-action="clearStoredTextSearch"]').on('click', e => {
+                    e.stopPropagation();
+                    e.preventDefault();
+
+                    let text = e.currentTarget.getAttribute('data-value');
+
+                    this.storedTextSearchHelper.remove(text);
+
+                    setTimeout(() => this.$textFilter.focus(), 205);
                 });
-            });
-        },
+            },
+            formatResult: item => {
+                return $('<span>')
+                    .append(
+                        $('<a>')
+                            .attr('data-action', 'clearStoredTextSearch')
+                            .attr('role', 'button')
+                            .attr('data-value', item.value)
+                            .attr('title', this.translate('Remove'))
+                            .html('<span class="fas fa-times fa-sm"></span>')
+                            .addClass('pull-right text-soft'),
+                        $('<span>')
+                            .text(item.value)
+                    )
+                    .get(0).innerHTML;
+            },
+            lookup: (text, done) => {
+                let suggestions = this.storedTextSearchHelper.match(text, this.autocompleteLimit)
+                    .map(item => {
+                        return {value: item};
+                    });
 
-        fetch: function () {
-            this.textFilter = (this.$el.find('input[data-name="textFilter"]').val() || '').trim();
+                done({suggestions: suggestions});
+            },
+            onSelect: () => {
+                this.$textFilter.focus();
+                this.$textFilter.autocomplete('hide');
+            },
+        };
 
-            this.bool = {};
+        this.$textFilter.autocomplete(options);
 
-            this.boolFilterList.forEach(name => {
-                this.bool[name] = this.$el
-                    .find('input[data-name="' + name + '"][data-role="boolFilterCheckbox"]')
-                    .prop('checked');
-            });
-
-            for (let field in this.advanced) {
-                let view = this.getView('filter-' + field).getView('field');
-
-                this.advanced[field] = view.fetchSearch();
-
-                view.searchParams = this.advanced[field];
-            }
-        },
-
-        updateSearch: function () {
-            this.searchManager.set({
-                textFilter: this.textFilter,
-                advanced: this.advanced,
-                bool: this.bool,
-                presetName: this.presetName,
-                primary: this.primary,
-            });
-        },
-
-        getFilterFieldDataList: function () {
-            let defs = [];
-
-            for (let i in this.fieldFilterList) {
-                let field = this.fieldFilterList[i];
-
-                let o = {
-                    name: field,
-                    checked: (field in this.advanced),
-                    label: this.fieldFilterTranslations[field] || field,
-                };
-
-                defs.push(o);
-            }
-
-            return defs;
-        },
-
-        showResetFiltersButton: function () {
-            this.toShowApplyFiltersButton = true;
-            this.toShowResetFiltersText = true;
-
-            this.$applyFiltersContainer.removeClass('hidden');
-
-            this.$applyFiltersContainer.find('.text-apply').addClass('hidden');
-            this.$applyFiltersContainer.find('.text-reset').removeClass('hidden');
-        },
-
-        showApplyFiltersButton: function () {
-            this.toShowApplyFiltersButton = true;
-            this.toShowResetFiltersText = false;
-
-            this.$applyFiltersContainer.removeClass('hidden');
-
-            this.$applyFiltersContainer.find('.text-reset').addClass('hidden');
-            this.$applyFiltersContainer.find('.text-apply').removeClass('hidden');
-        },
-
-        hideApplyFiltersButton: function () {
-            this.toShowApplyFiltersButton = false;
-            this.toShowResetFiltersText = false;
-
-            this.$applyFiltersContainer.addClass('hidden');
-        },
-
-        selectPreviousPreset: function () {
-            let list = Espo.Utils.clone(this.getPresetFilterList());
-
-            list.unshift({name: null});
-
-            if (list.length === 1) {
+        this.$textFilter.on('blur', () => {
+            if (preventCloseOnBlur) {
                 return;
             }
 
-            let index = list.findIndex(item => item.name === this.presetName) - 1;
+            setTimeout(() => this.$textFilter.autocomplete('hide'), 1);
+        });
 
-            if (index < 0) {
-                return;
+        this.$textFilter.on('focus', () => {
+            if (this.$textFilter.val()) {
+                this.$textFilter.autocomplete('hide');
             }
+        });
 
-            let preset = list[index];
+        this.once('render', () => this.$textFilter.autocomplete('dispose'));
+        this.once('remove', () => this.$textFilter.autocomplete('dispose'));
+    },
 
-            this.selectPreset(preset.name);
-        },
+    initQuickSearchUi: function () {
+        this.$addFilterButton.parent().on('show.bs.dropdown', () => {
+            setTimeout(() => {
+                this.$fieldQuickSearch.focus();
 
-        selectNextPreset: function () {
-            let list = Espo.Utils.clone(this.getPresetFilterList());
+                let width = this.$fieldQuickSearch.outerWidth();
 
-            list.unshift({name: null});
+                this.$fieldQuickSearch.css('minWidth', width);
+            }, 1);
+        });
 
-            if (list.length === 1) {
-                return;
-            }
-
-            let index = list.findIndex(item => item.name === this.presetName) + 1;
-
-            if (index >= list.length) {
-                return;
-            }
-
-            let preset = list[index];
-
-            this.selectPreset(preset.name);
-        },
-
-        /**
-         * @private
-         * @param {string} text
-         */
-        processFieldFilterQuickSearch: function (text) {
-            text = text.trim();
-            text = text.toLowerCase();
-
-            /** @type {JQuery} */
-            let $li = this.$filterList.find('li.filter-item');
-
-            if (text === '') {
-                $li.removeClass('search-hidden');
-
-                return;
-            }
-
-            $li.addClass('search-hidden');
-
-            this.fieldFilterList.forEach(field => {
-                let label = this.fieldFilterTranslations[field] || field;
-                label = label.toLowerCase();
-
-                let wordList = label.split(' ');
-
-                let matched = label.indexOf(text) === 0;
-
-                if (!matched) {
-                    matched = wordList
-                        .filter(word => word.length > 3 && word.indexOf(text) === 0)
-                        .length > 0;
-                }
-
-                if (matched) {
-                    $li.filter(`[data-name="${field}"]`).removeClass('search-hidden');
-                }
-            });
-        },
-
-        resetFieldFilterQuickSearch: function () {
-            this.$fieldQuickSearch.val('');
-            this.$filterList.find('li.filter-item').removeClass('search-hidden');
-        },
-
-        addFirstFieldFilter: function () {
-            let $first = this.$filterList.find('li.filter-item:not(.hidden):not(.search-hidden)').first();
-
-            if (!$first.length) {
-                return;
-            }
-
-            let name = $first.attr('data-name');
-
-            $first.addClass('hidden');
-
-            this.closeAddFieldDropdown();
-            this.addFilter(name);
+        this.$addFilterButton.parent().on('hide.bs.dropdown', () => {
             this.resetFieldFilterQuickSearch();
-        },
 
-        closeAddFieldDropdown: function () {
-            this.$addFilterButton.parent()
-                .find('[data-toggle="dropdown"]')
-                .dropdown('toggle');
-        },
+            this.$fieldQuickSearch.css('minWidth', '');
+        });
+    },
 
-        storeTextSearch: function () {
-            if (!this.textFilter) {
-                return;
+    manageLabels: function () {
+        this.$el.find('ul.dropdown-menu > li.preset-control').addClass('hidden');
+
+        this.currentFilterLabelList = [];
+
+        this.managePresetFilters();
+        this.manageBoolFilters();
+
+        this.$filtersLabel.html(this.currentFilterLabelList.join(' &middot; '));
+    },
+
+    /**
+     * @private
+     * @return {boolean}
+     */
+    toShowResetButton: function () {
+        if (this.textFilter) {
+            return true;
+        }
+
+        let presetName = this.presetName || null;
+        let primary = this.primary;
+
+        if (!presetName || presetName === primary) {
+            if (Object.keys(this.advanced).length) {
+                return true;
+            }
+        }
+
+        if (
+            this.collection.orderBy !== this.collection.defaultOrderBy ||
+            this.collection.order !== this.collection.defaultOrder
+        ) {
+            return true;
+        }
+
+        return false;
+    },
+
+    controlResetButtonVisibility: function () {
+        if (this.toShowResetButton()) {
+            this.$resetButton.css('visibility', 'visible');
+
+            return;
+        }
+
+        this.$resetButton.css('visibility', 'hidden');
+    },
+
+    managePresetFilters: function () {
+        let presetName = this.presetName || null;
+        let primary = this.primary;
+
+        this.$el.find('ul.filter-menu a.preset span').remove();
+
+        let filterLabel = this.translate('all', 'presetFilters', this.entityType);
+        let filterStyle = 'default';
+
+        if (!presetName && primary) {
+            presetName = primary;
+        }
+
+        if (presetName && presetName !== primary) {
+            this.$advancedFiltersPanel.addClass('hidden');
+
+            let label = null;
+            let style = 'default';
+            let id = null;
+
+            this.presetFilterList.forEach(item => {
+                if (item.name === presetName) {
+                    label = item.label || false;
+                    style = item.style || 'default';
+                    id = item.id;
+                }
+            });
+
+            label = label || this.translate(this.presetName, 'presetFilters', this.entityType);
+
+            filterLabel = label;
+            filterStyle = style;
+
+            if (id) {
+                this.$el.find('ul.dropdown-menu > li.divider.preset-control').removeClass('hidden');
+                this.$el.find('ul.dropdown-menu > li.preset-control.remove-preset').removeClass('hidden');
+            }
+        }
+        else {
+            this.$advancedFiltersPanel.removeClass('hidden');
+
+            if (Object.keys(this.advanced).length !== 0) {
+                if (!this.disableSavePreset) {
+                    this.$el.find('ul.dropdown-menu > li.divider.preset-control').removeClass('hidden');
+                    this.$el.find('ul.dropdown-menu > li.preset-control.save-preset').removeClass('hidden');
+                    this.$el.find('ul.dropdown-menu > li.preset-control.remove-preset').addClass('hidden');
+                }
             }
 
-            if (this.textSearchStoringDisabled) {
-                return;
+            if (primary) {
+                let label = this.translate(primary, 'presetFilters', this.entityType);
+                let style = this.getPrimaryFilterStyle();
+
+                filterLabel = label;
+                filterStyle = style;
+            }
+        }
+
+        this.currentFilterLabelList.push(filterLabel);
+
+        this.$filtersButton
+            .removeClass('btn-default')
+            .removeClass('btn-primary')
+            .removeClass('btn-danger')
+            .removeClass('btn-success')
+            .removeClass('btn-info');
+
+        this.$filtersButton.addClass('btn-' + filterStyle);
+
+        presetName = presetName || '';
+
+        this.$el
+            .find('ul.filter-menu a.preset[data-name="'+presetName+'"]')
+            .prepend('<span class="fas fa-check pull-right"></span>');
+    },
+
+    manageBoolFilters: function () {
+        (this.boolFilterList || []).forEach((item) => {
+            if (this.bool[item]) {
+                let label = this.translate(item, 'boolFilters', this.entityType);
+
+                this.currentFilterLabelList.push(label);
+            }
+        });
+    },
+
+    search: function () {
+        this.fetch();
+        this.updateSearch();
+        this.updateCollection();
+        this.controlResetButtonVisibility();
+        this.storeTextSearch();
+
+        this.isSearchedWithAdvancedFilter = this.hasAdvancedFilter();
+    },
+
+    hasAdvancedFilter: function () {
+        return Object.keys(this.advanced).length > 0;
+    },
+
+    getFilterDataList: function () {
+        let arr = [];
+
+        for (let field in this.advanced) {
+            arr.push({
+                key: 'filter-' + field,
+                name: field,
+            });
+        }
+
+        return arr;
+    },
+
+    updateCollection: function () {
+        this.collection.abortLastFetch();
+        this.collection.reset();
+        this.collection.where = this.searchManager.getWhere();
+        this.collection.offset = 0;
+
+        Espo.Ui.notify(' ... ');
+
+        this.collection.fetch().then(() => {
+            Espo.Ui.notify(false);
+        });
+    },
+
+    getPresetFilterList: function () {
+        let arr = [];
+
+        this.presetFilterList.forEach((item) => {
+            if (typeof item == 'string') {
+                item = {name: item};
             }
 
-            this.storedTextSearchHelper.store(this.textFilter);
-        },
-    });
+            arr.push(item);
+        });
+
+        return arr;
+    },
+
+    getPresetData: function () {
+        let data = {};
+
+        this.getPresetFilterList().forEach(item => {
+            if (item.name === this.presetName) {
+                data = Espo.Utils.clone(item.data || {});
+            }
+        });
+
+        return data;
+    },
+
+    getPrimaryFilterName: function () {
+        let primaryFilterName = null;
+
+        this.getPresetFilterList().forEach(item => {
+            if (item.name === this.presetName) {
+                if (!('data' in item)) {
+                    primaryFilterName = item.name;
+                }
+                else if (item.primary) {
+                    primaryFilterName = item.primary;
+                }
+            }
+        });
+
+        return primaryFilterName;
+    },
+
+    getPrimaryFilterStyle: function () {
+        let style = null;
+
+        this.getPresetFilterList().forEach(item => {
+            if (item.name === this.primary) {
+                style = item.style || 'default';
+            }
+        });
+
+        return style;
+    },
+
+    loadSearchData: function () {
+        let searchData = this.searchManager.get();
+
+        this.textFilter = searchData.textFilter;
+
+        if ('presetName' in searchData) {
+            this.presetName = searchData.presetName;
+        }
+
+        let primaryIsSet = false;
+
+        if ('primary' in searchData) {
+            this.primary = searchData.primary;
+
+            if (!this.presetName) {
+                this.presetName = this.primary;
+            }
+
+            primaryIsSet = true;
+        }
+
+        if (this.presetName) {
+            this.advanced = _.extend(Espo.Utils.clone(this.getPresetData()), searchData.advanced);
+
+            if (!primaryIsSet) {
+                this.primary = this.getPrimaryFilterName();
+            }
+        }
+        else {
+            this.advanced = Espo.Utils.clone(searchData.advanced);
+        }
+
+        this.bool = searchData.bool;
+    },
+
+    createFilter: function (name, params, callback, noRender) {
+        params = params || {};
+
+        let rendered = false;
+
+        if (this.isRendered()) {
+            rendered = true;
+
+            this.$advancedFiltersPanel.append(
+                '<div data-name="'+name+'" class="filter filter-' + name + '" />'
+            );
+        }
+
+        this.createView('filter-' + name, 'views/search/filter', {
+            name: name,
+            model: this.model,
+            params: params,
+            el: this.options.el + ' .filter[data-name="' + name + '"]',
+        }, (view) => {
+            if (typeof callback === 'function') {
+                view.once('after:render', () => {
+                    callback(view);
+                });
+            }
+
+            if (rendered && !noRender) {
+                view.render();
+            }
+
+            this.listenTo(view, 'change', () => {
+                let toShowApply = this.isSearchedWithAdvancedFilter;
+
+                if (!toShowApply) {
+                    let data = view.getView('field').fetchSearch();
+
+                    if (data) {
+                        toShowApply = true;
+                    }
+                }
+
+                if (!toShowApply) {
+                    return;
+                }
+
+                this.showApplyFiltersButton();
+            });
+
+            this.listenTo(view, 'search', () => {
+                this.search();
+                this.hideApplyFiltersButton();
+            });
+        });
+    },
+
+    fetch: function () {
+        this.textFilter = (this.$el.find('input[data-name="textFilter"]').val() || '').trim();
+
+        this.bool = {};
+
+        this.boolFilterList.forEach(name => {
+            this.bool[name] = this.$el
+                .find('input[data-name="' + name + '"][data-role="boolFilterCheckbox"]')
+                .prop('checked');
+        });
+
+        for (let field in this.advanced) {
+            let view = this.getView('filter-' + field).getView('field');
+
+            this.advanced[field] = view.fetchSearch();
+
+            view.searchParams = this.advanced[field];
+        }
+    },
+
+    updateSearch: function () {
+        this.searchManager.set({
+            textFilter: this.textFilter,
+            advanced: this.advanced,
+            bool: this.bool,
+            presetName: this.presetName,
+            primary: this.primary,
+        });
+    },
+
+    getFilterFieldDataList: function () {
+        let defs = [];
+
+        for (let i in this.fieldFilterList) {
+            let field = this.fieldFilterList[i];
+
+            let o = {
+                name: field,
+                checked: (field in this.advanced),
+                label: this.fieldFilterTranslations[field] || field,
+            };
+
+            defs.push(o);
+        }
+
+        return defs;
+    },
+
+    showResetFiltersButton: function () {
+        this.toShowApplyFiltersButton = true;
+        this.toShowResetFiltersText = true;
+
+        this.$applyFiltersContainer.removeClass('hidden');
+
+        this.$applyFiltersContainer.find('.text-apply').addClass('hidden');
+        this.$applyFiltersContainer.find('.text-reset').removeClass('hidden');
+    },
+
+    showApplyFiltersButton: function () {
+        this.toShowApplyFiltersButton = true;
+        this.toShowResetFiltersText = false;
+
+        this.$applyFiltersContainer.removeClass('hidden');
+
+        this.$applyFiltersContainer.find('.text-reset').addClass('hidden');
+        this.$applyFiltersContainer.find('.text-apply').removeClass('hidden');
+    },
+
+    hideApplyFiltersButton: function () {
+        this.toShowApplyFiltersButton = false;
+        this.toShowResetFiltersText = false;
+
+        this.$applyFiltersContainer.addClass('hidden');
+    },
+
+    selectPreviousPreset: function () {
+        let list = Espo.Utils.clone(this.getPresetFilterList());
+
+        list.unshift({name: null});
+
+        if (list.length === 1) {
+            return;
+        }
+
+        let index = list.findIndex(item => item.name === this.presetName) - 1;
+
+        if (index < 0) {
+            return;
+        }
+
+        let preset = list[index];
+
+        this.selectPreset(preset.name);
+    },
+
+    selectNextPreset: function () {
+        let list = Espo.Utils.clone(this.getPresetFilterList());
+
+        list.unshift({name: null});
+
+        if (list.length === 1) {
+            return;
+        }
+
+        let index = list.findIndex(item => item.name === this.presetName) + 1;
+
+        if (index >= list.length) {
+            return;
+        }
+
+        let preset = list[index];
+
+        this.selectPreset(preset.name);
+    },
+
+    /**
+     * @private
+     * @param {string} text
+     */
+    processFieldFilterQuickSearch: function (text) {
+        text = text.trim();
+        text = text.toLowerCase();
+
+        /** @type {JQuery} */
+        let $li = this.$filterList.find('li.filter-item');
+
+        if (text === '') {
+            $li.removeClass('search-hidden');
+
+            return;
+        }
+
+        $li.addClass('search-hidden');
+
+        this.fieldFilterList.forEach(field => {
+            let label = this.fieldFilterTranslations[field] || field;
+            label = label.toLowerCase();
+
+            let wordList = label.split(' ');
+
+            let matched = label.indexOf(text) === 0;
+
+            if (!matched) {
+                matched = wordList
+                    .filter(word => word.length > 3 && word.indexOf(text) === 0)
+                    .length > 0;
+            }
+
+            if (matched) {
+                $li.filter(`[data-name="${field}"]`).removeClass('search-hidden');
+            }
+        });
+    },
+
+    resetFieldFilterQuickSearch: function () {
+        this.$fieldQuickSearch.val('');
+        this.$filterList.find('li.filter-item').removeClass('search-hidden');
+    },
+
+    addFirstFieldFilter: function () {
+        let $first = this.$filterList.find('li.filter-item:not(.hidden):not(.search-hidden)').first();
+
+        if (!$first.length) {
+            return;
+        }
+
+        let name = $first.attr('data-name');
+
+        $first.addClass('hidden');
+
+        this.closeAddFieldDropdown();
+        this.addFilter(name);
+        this.resetFieldFilterQuickSearch();
+    },
+
+    closeAddFieldDropdown: function () {
+        this.$addFilterButton.parent()
+            .find('[data-toggle="dropdown"]')
+            .dropdown('toggle');
+    },
+
+    storeTextSearch: function () {
+        if (!this.textFilter) {
+            return;
+        }
+
+        if (this.textSearchStoringDisabled) {
+            return;
+        }
+
+        this.storedTextSearchHelper.store(this.textFilter);
+    },
 });
diff --git a/client/src/views/search/filter.js b/client/src/views/search/filter.js
index fa2487d5b4..48eaf75c9d 100644
--- a/client/src/views/search/filter.js
+++ b/client/src/views/search/filter.js
@@ -31,7 +31,7 @@ define('views/search/filter', ['view'], function (Dep) {
     /**
      * @class
      * @name Class
-     * @extends module:view.Class
+     * @extends module:view
      * @memberOf module:views/search/filter
      */
     return Dep.extend(/** @lends module:views/search/filter.Class# */{
@@ -75,7 +75,7 @@ define('views/search/filter', ['view'], function (Dep) {
         },
 
         /**
-         * @return {module:views/fields/base.Class}
+         * @return {module:views/fields/base}
          */
         getFieldView: function () {
             return this.getView('field');
diff --git a/client/src/views/site/navbar.js b/client/src/views/site/navbar.js
index 6d5dbceca2..de880350d1 100644
--- a/client/src/views/site/navbar.js
+++ b/client/src/views/site/navbar.js
@@ -843,7 +843,7 @@ define('views/site/navbar', ['view'], function (Dep) {
             let handlerClassName = this.getThemeManager().getParam('navbarAdjustmentHandler');
 
             if (handlerClassName) {
-                require(handlerClassName, (Handler) => {
+                Espo.loader.require(handlerClassName, Handler => {
                     let handler = new Handler(this);
 
                     this.navbarAdjustmentHandler = handler;
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 a2c5ee9d9d..ddf7184a79 100644
--- a/client/src/views/working-time-calendar/fields/time-ranges.js
+++ b/client/src/views/working-time-calendar/fields/time-ranges.js
@@ -32,7 +32,7 @@ define('views/working-time-calendar/fields/time-ranges', ['views/fields/base'],
      * @class
      * @name Class
      * @memberOf module:views/working-time-calendar/fields/time-ranges
-     * @extends module:views/fields/base.Class
+     * @extends module:views/fields/base
      */
     return Dep.extend(/** @lends module:views/working-time-calendar/fields/time-ranges.Class# */{
 
diff --git a/client/src/views/working-time-calendar/fields/time-ranges/item-detail.js b/client/src/views/working-time-calendar/fields/time-ranges/item-detail.js
index ea25589786..d182c007b2 100644
--- a/client/src/views/working-time-calendar/fields/time-ranges/item-detail.js
+++ b/client/src/views/working-time-calendar/fields/time-ranges/item-detail.js
@@ -30,7 +30,7 @@ define('views/working-time-calendar/fields/time-ranges/item-detail', ['view', 'l
 (Dep, /** @param {moment} */moment) => {
 
     /**
-     * @extends module:view.Class
+     * @extends module:view
      */
     class Class extends Dep
     {
diff --git a/client/src/web-socket-manager.js b/client/src/web-socket-manager.js
index 7dcb1229dc..ab90e3b371 100644
--- a/client/src/web-socket-manager.js
+++ b/client/src/web-socket-manager.js
@@ -26,230 +26,228 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('web-socket-manager', [], function () {
+/** @module web-socket-manager */
+
+import Base64 from 'lib!base64';
+
+/**
+ * A web-socket manager.
+ *
+ * @class
+ * @param {module:models/settings} config A config.
+ */
+const WebSocketManager = function (config) {
+    /**
+     * @private
+     * @type {module:models/settings}
+     */
+    this.config = config;
 
     /**
-     * A web-socket manager.
-     *
-     * @class
-     * @name Class
-     * @memberOf module:web-socket-manager
-     *
-     * @param {module:models/settings.Class} config A config.
+     * @private
+     * @type {{category: string, callback: Function}[]}
      */
-    let WebSocketManager = function (config) {
-        /**
-         * @private
-         * @type {module:models/settings.Class}
-         */
-        this.config = config;
+    this.subscribeQueue = [];
 
-        /**
-         * @private
-         * @type {{category: string, callback: Function}[]}
-         */
-        this.subscribeQueue = [];
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.isConnected = false;
 
-        /**
-         * @private
-         * @type {boolean}
-         */
-        this.isConnected = false;
+    /**
+     * @private
+     */
+    this.connection = null;
 
-        /**
-         * @private
-         */
-        this.connection = null;
+    /**
+     * @private
+     * @type {string}
+     */
+    this.url = '';
 
-        /**
-         * @private
-         * @type {string}
-         */
-        this.url = '';
+    /**
+     * @private
+     * @type {string}
+     */
+    this.protocolPart = '';
 
-        /**
-         * @private
-         * @type {string}
-         */
-        this.protocolPart = '';
+    let url = this.config.get('webSocketUrl');
 
-        let url = this.config.get('webSocketUrl');
-
-        if (url) {
-            if (url.indexOf('wss://') === 0) {
-                this.url = url.substring(6);
-                this.protocolPart = 'wss://';
-            }
-            else {
-                this.url = url.substring(5);
-                this.protocolPart = 'ws://';
-            }
+    if (url) {
+        if (url.indexOf('wss://') === 0) {
+            this.url = url.substring(6);
+            this.protocolPart = 'wss://';
         }
         else {
-            let siteUrl = this.config.get('siteUrl') || '';
-
-            if (siteUrl.indexOf('https://') === 0) {
-                this.url = siteUrl.substring(8);
-                this.protocolPart = 'wss://';
-            }
-            else {
-                this.url = siteUrl.substring(7);
-                this.protocolPart = 'ws://';
-            }
-
-            if (~this.url.indexOf('/')) {
-                this.url = this.url.replace(/\/$/, '');
-            }
-
-            let port = this.protocolPart === 'wss://' ? 443 : 8080;
-
-            let si = this.url.indexOf('/');
-
-            if (~si) {
-                this.url = this.url.substring(0, si) + ':' + port;
-            }
-            else {
-                this.url += ':' + port;
-            }
-
-            if (this.protocolPart === 'wss://') {
-                this.url += '/wss';
-            }
+            this.url = url.substring(5);
+            this.protocolPart = 'ws://';
         }
-    };
+    }
+    else {
+        let siteUrl = this.config.get('siteUrl') || '';
 
-    _.extend(WebSocketManager.prototype, /** @lends module:web-socket-manager.Class# */{
+        if (siteUrl.indexOf('https://') === 0) {
+            this.url = siteUrl.substring(8);
+            this.protocolPart = 'wss://';
+        }
+        else {
+            this.url = siteUrl.substring(7);
+            this.protocolPart = 'ws://';
+        }
 
-        /**
-         * Connect.
-         *
-         * @param {string} auth An auth string.
-         * @param {string} userId A user ID.
-         */
-        connect: function (auth, userId) {
-            let authArray = Base64.decode(auth).split(':');
+        if (~this.url.indexOf('/')) {
+            this.url = this.url.replace(/\/$/, '');
+        }
 
-            let authToken = authArray[1];
+        let port = this.protocolPart === 'wss://' ? 443 : 8080;
 
-            let url = this.protocolPart + this.url;
+        let si = this.url.indexOf('/');
 
-            url += '?authToken=' + authToken + '&userId=' + userId;
+        if (~si) {
+            this.url = this.url.substring(0, si) + ':' + port;
+        }
+        else {
+            this.url += ':' + port;
+        }
 
-            try {
-                this.connection = new ab.Session(
-                    url,
-                    () => {
-                        this.isConnected = true;
+        if (this.protocolPart === 'wss://') {
+            this.url += '/wss';
+        }
+    }
+};
 
-                        this.subscribeQueue.forEach(item => {
-                            this.subscribe(item.category, item.callback);
-                        });
+_.extend(WebSocketManager.prototype, /** @lends WebSocketManager# */{
 
+    /**
+     * Connect.
+     *
+     * @param {string} auth An auth string.
+     * @param {string} userId A user ID.
+     */
+    connect: function (auth, userId) {
+        let authArray = Base64.decode(auth).split(':');
+
+        let authToken = authArray[1];
+
+        let url = this.protocolPart + this.url;
+
+        url += '?authToken=' + authToken + '&userId=' + userId;
+
+        try {
+            this.connection = new ab.Session(
+                url,
+                () => {
+                    this.isConnected = true;
+
+                    this.subscribeQueue.forEach(item => {
+                        this.subscribe(item.category, item.callback);
+                    });
+
+                    this.subscribeQueue = [];
+                },
+                e => {
+                    if (e === ab.CONNECTION_CLOSED) {
                         this.subscribeQueue = [];
-                    },
-                    e => {
-                        if (e === ab.CONNECTION_CLOSED) {
-                            this.subscribeQueue = [];
-                        }
+                    }
 
-                        if (e === ab.CONNECTION_LOST || e === ab.CONNECTION_UNREACHABLE) {
-                            setTimeout(
-                                () => {
-                                    this.connect(auth, userId);
-                                },
-                                3000
-                            );
-                        }
-                    },
-                    {skipSubprotocolCheck: true}
-                );
-            }
-            catch (e) {
-                console.error(e.message);
+                    if (e === ab.CONNECTION_LOST || e === ab.CONNECTION_UNREACHABLE) {
+                        setTimeout(
+                            () => {
+                                this.connect(auth, userId);
+                            },
+                            3000
+                        );
+                    }
+                },
+                {skipSubprotocolCheck: true}
+            );
+        }
+        catch (e) {
+            console.error(e.message);
 
-                this.connection = null;
-            }
-        },
+            this.connection = null;
+        }
+    },
 
-        /**
-         * Subscribe to a topic.
-         *
-         * @param {string} category A topic.
-         * @param {Function} callback A callback.
-         */
-        subscribe: function (category, callback) {
-            if (!this.connection) {
-                return;
-            }
+    /**
+     * Subscribe to a topic.
+     *
+     * @param {string} category A topic.
+     * @param {Function} callback A callback.
+     */
+    subscribe: function (category, callback) {
+        if (!this.connection) {
+            return;
+        }
 
-            if (!this.isConnected) {
-                this.subscribeQueue.push({
-                    category: category,
-                    callback: callback,
-                });
-
-                return;
-            }
-
-            try {
-                this.connection.subscribe(category, callback);
-            }
-            catch (e) {
-                if (e.message) {
-                    console.error(e.message);
-                }
-                else {
-                    console.error("WebSocket: Could not subscribe to "+category+".");
-                }
-            }
-        },
-
-        /**
-         * Unsubscribe.
-         *
-         * @param {string} category A topic.
-         * @param {Function} [callback] A callback.
-         */
-        unsubscribe: function (category, callback) {
-            if (!this.connection) {
-                return;
-            }
-
-            this.subscribeQueue = this.subscribeQueue.filter(item => {
-                return item.category !== category && item.callback !== callback;
+        if (!this.isConnected) {
+            this.subscribeQueue.push({
+                category: category,
+                callback: callback,
             });
 
-            try {
-                this.connection.unsubscribe(category, callback);
-            }
-            catch (e) {
-                if (e.message) {
-                    console.error(e.message);
-                }
-                else {
-                    console.error("WebSocket: Could not unsubscribe from "+category+".");
-                }
-            }
-        },
+            return;
+        }
 
-        /**
-         * Close a connection.
-         */
-        close: function () {
-            if (!this.connection) {
-                return;
-            }
-
-            try {
-                this.connection.close();
-            }
-            catch (e) {
+        try {
+            this.connection.subscribe(category, callback);
+        }
+        catch (e) {
+            if (e.message) {
                 console.error(e.message);
             }
+            else {
+                console.error("WebSocket: Could not subscribe to "+category+".");
+            }
+        }
+    },
 
-            this.isConnected = false;
-        },
-    });
+    /**
+     * Unsubscribe.
+     *
+     * @param {string} category A topic.
+     * @param {Function} [callback] A callback.
+     */
+    unsubscribe: function (category, callback) {
+        if (!this.connection) {
+            return;
+        }
 
-    return WebSocketManager;
+        this.subscribeQueue = this.subscribeQueue.filter(item => {
+            return item.category !== category && item.callback !== callback;
+        });
+
+        try {
+            this.connection.unsubscribe(category, callback);
+        }
+        catch (e) {
+            if (e.message) {
+                console.error(e.message);
+            }
+            else {
+                console.error("WebSocket: Could not unsubscribe from "+category+".");
+            }
+        }
+    },
+
+    /**
+     * Close a connection.
+     */
+    close: function () {
+        if (!this.connection) {
+            return;
+        }
+
+        try {
+            this.connection.close();
+        }
+        catch (e) {
+            console.error(e.message);
+        }
+
+        this.isConnected = false;
+    },
 });
+
+export default WebSocketManager;
diff --git a/frontend/bundle-config.json b/frontend/bundle-config.json
index 0e2ac00a29..105060fe06 100644
--- a/frontend/bundle-config.json
+++ b/frontend/bundle-config.json
@@ -3,88 +3,74 @@
         "main",
         "admin",
         "crm",
-        "wysiwyg",
         "chart",
         "calendar",
         "timeline",
         "extra"
     ],
+    "basePath": "client",
+    "transpiledPath": "client/lib/transpiled",
     "chunks": {
         "main": {
             "files": [
-                "client/src/namespace.js",
-                "client/src/loader.js",
-                "client/src/loader-init-libs.js",
-                "client/src/exceptions.js",
-                "client/src/utils.js"
+                "src/namespace.js",
+                "src/loader.js",
+                "src/loader-init-libs.js",
+                "src/exceptions.js",
+                "src/utils.js"
             ],
             "patterns": [
-                "client/src/!(pre-loader).js",
-                "client/src/ui/**/*.js",
-                "client/src/views/*.js",
-                "client/src/views/site/*.js",
-                "client/src/views/fields/*.js",
-                "client/src/views/record/**/*.js",
-                "client/src/views/search/**/*.js",
-                "client/src/views/modals/*.js",
-                "client/src/views/dashlets/**/*.js",
-                "client/src/views/global-search/*.js",
-                "client/src/views/stream/**/*.js",
-                "client/src/views/note/**/*.js",
-                "client/src/views/notification/*.js",
-                "client/src/controllers/!(admin|inbound-email|layout-set|api-user|role|portal-role).js",
-                "client/src/models/*.js",
-                "client/src/collections/*.js",
-                "client/src/acl/*.js"
+                "src/!(pre-loader).js",
+                "src/ui/**/*.js",
+                "src/views/*.js",
+                "src/views/site/*.js",
+                "src/views/fields/*.js",
+                "src/views/record/**/*.js",
+                "src/views/search/**/*.js",
+                "src/views/modals/*.js",
+                "src/views/dashlets/**/*.js",
+                "src/views/global-search/*.js",
+                "src/views/stream/**/*.js",
+                "src/views/note/**/*.js",
+                "src/views/notification/*.js",
+                "src/controllers/!(admin|inbound-email|layout-set|api-user|role|portal-role).js",
+                "src/models/*.js",
+                "src/collections/*.js",
+                "src/acl/*.js"
             ]
         },
         "admin": {
             "patterns": [
-                "client/src/views/admin/**/*.js",
-                "client/src/views/authentication-provider/**/*.js",
-                "client/src/views/inbound-email/**/*.js",
-                "client/src/views/templates/**/*.js",
-                "client/src/views/role/**/*.js",
-                "client/src/views/portal-role/**/*.js",
-                "client/src/views/scheduled-job/**/*.js",
-                "client/src/views/lead-capture/**/*.js",
-                "client/src/views/lead-capture-log-record/**/*.js",
-                "client/src/views/webhooks/**/*.js",
-                "client/src/views/layout-set/**/*.js",
-                "client/src/controllers/admin.js",
-                "client/src/controllers/inbound-email.js",
-                "client/src/controllers/layout-set.js",
-                "client/src/controllers/api-user.js",
-                "client/src/controllers/role.js",
-                "client/src/controllers/portal-role.js"
+                "src/views/admin/**/*.js",
+                "src/views/authentication-provider/**/*.js",
+                "src/views/inbound-email/**/*.js",
+                "src/views/templates/**/*.js",
+                "src/views/role/**/*.js",
+                "src/views/portal-role/**/*.js",
+                "src/views/scheduled-job/**/*.js",
+                "src/views/lead-capture/**/*.js",
+                "src/views/lead-capture-log-record/**/*.js",
+                "src/views/webhooks/**/*.js",
+                "src/views/layout-set/**/*.js",
+                "src/controllers/admin.js",
+                "src/controllers/inbound-email.js",
+                "src/controllers/layout-set.js",
+                "src/controllers/api-user.js",
+                "src/controllers/role.js",
+                "src/controllers/portal-role.js"
             ]
         },
         "crm": {
             "patterns": [
-                "client/modules/crm/src/**/*.js"
+                "modules/crm/src/**/*.js"
             ],
             "lookupPatterns": [
-                "client/modules/crm/src/**/*.js"
-            ]
-        },
-        "wysiwyg": {
-            "patterns": [
-                "client/src/**/*.js",
-                "client/modules/crm/src/**/*.js"
-            ],
-            "dependentOn": [
-                "lib!Summernote"
-            ],
-            "requires": [
-                "lib!Summernote"
-            ],
-            "lookupPatterns": [
-                "client/modules/crm/src/**/*.js"
+                "modules/crm/src/**/*.js"
             ]
         },
         "chart": {
             "patterns": [
-                "client/modules/crm/src/**/*.js"
+                "modules/crm/src/**/*.js"
             ],
             "dependentOn": [
                 "lib!Flotr",
@@ -95,12 +81,12 @@
                 "lib!espo-funnel-chart"
             ],
             "lookupPatterns": [
-                "client/modules/crm/src/**/*.js"
+                "modules/crm/src/**/*.js"
             ]
         },
         "calendar": {
             "patterns": [
-                "client/modules/crm/src/**/*.js"
+                "modules/crm/src/**/*.js"
             ],
             "dependentOn": [
                 "lib!full-calendar"
@@ -109,12 +95,12 @@
                 "lib!full-calendar"
             ],
             "lookupPatterns": [
-                "client/modules/crm/src/**/*.js"
+                "modules/crm/src/**/*.js"
             ]
         },
         "timeline": {
             "patterns": [
-                "client/modules/crm/src/**/*.js"
+                "modules/crm/src/**/*.js"
             ],
             "dependentOn": [
                 "lib!vis"
@@ -123,20 +109,20 @@
                 "lib!vis"
             ],
             "lookupPatterns": [
-                "client/modules/crm/src/**/*.js"
+                "modules/crm/src/**/*.js"
             ]
         },
         "extra": {
             "patterns": [
-                "client/src/**/*.js"
+                "src/**/*.js"
             ],
             "noDuplicates": true
         }
     },
     "modulePaths": {
-        "crm": "client/modules/crm"
+        "crm": "modules/crm"
     },
     "lookupPatterns": [
-        "client/src/**/*.js"
+        "src/**/*.js"
     ]
 }
diff --git a/frontend/test/spec/test.theme-manager.js b/frontend/test/spec/test.theme-manager.js
index 167b567b59..a7952b2549 100644
--- a/frontend/test/spec/test.theme-manager.js
+++ b/frontend/test/spec/test.theme-manager.js
@@ -27,13 +27,13 @@
  ************************************************************************/
 
 describe('theme-manager', () => {
-    /** @type {module:models/settings.Class} */
+    /** @type {module:models/settings} */
 	let config;
-    /** @type {module:models/preferences.Class} */
+    /** @type {module:models/preferences} */
     let preferences;
-    /** @type {module:metadata.Class} */
+    /** @type {module:metadata} */
     let metadata;
-    /** @type {module:theme-manager.Class} */
+    /** @type {module:theme-manager} */
     let themeManager;
 
 	beforeEach(done => {
diff --git a/js/bundler-general.js b/js/bundler/bundler-general.js
similarity index 96%
rename from js/bundler-general.js
rename to js/bundler/bundler-general.js
index 96f56ab7b4..8f58e3ec78 100644
--- a/js/bundler-general.js
+++ b/js/bundler/bundler-general.js
@@ -33,6 +33,8 @@ class BundlerGeneral {
 
     /**
      * @param {{
+     *   basePath?: string,
+     *   transpiledPath?: string,
      *   chunks: Object.<string, {
      *     files?: string[],
      *     patterns?: string[],
@@ -93,6 +95,7 @@ class BundlerGeneral {
                 return;
             }
 
+
             data.modules.forEach(item => mapping[item] = name);
 
             let bundleFile = this.filePattern.replace('{*}', name);
@@ -159,7 +162,11 @@ class BundlerGeneral {
         let notBundledModules = [];
 
         if (params.patterns) {
-            let bundler = (new Bundler(this.config.modulePaths));
+            let bundler = new Bundler(
+                this.config.modulePaths,
+                this.config.basePath,
+                this.config.transpiledPath
+            );
 
             // The main bundle is always loaded, duplicates are not needed.
             let ignoreFiles = [].concat(this.mainBundleFiles);
@@ -169,6 +176,7 @@ class BundlerGeneral {
             }
 
             let data = bundler.bundle({
+                name: name,
                 files: params.files,
                 patterns: patterns,
                 lookupPatterns: lookupPatterns,
diff --git a/js/bundler.js b/js/bundler/bundler.js
similarity index 78%
rename from js/bundler.js
rename to js/bundler/bundler.js
index 917c8f4370..169c034c8d 100644
--- a/js/bundler.js
+++ b/js/bundler/bundler.js
@@ -40,21 +40,22 @@ class Bundler {
 
     /**
      * @param {Object.<string, string>} modulePaths
+     * @param {string} [basePath]
+     * @param {string} [transpiledPath]
      */
-    constructor(modulePaths) {
+    constructor(modulePaths, basePath, transpiledPath) {
         this.modulePaths = modulePaths;
-    }
+        this.basePath = basePath ?? 'client';
+        this.transpiledPath = transpiledPath ?? 'client/lib/transpiled';
 
-    /**
-     * @private
-     * @type {string}
-     */
-    basePath = 'client/src'
+        this.srcPath = this.basePath + '/src';
+    }
 
     /**
      * Bundles Espo js files into chunks.
      *
      * @param {{
+     *   name: string,
      *   files?: string[],
      *   patterns: string[],
      *   lookupPatterns?: string[],
@@ -75,8 +76,9 @@ class Bundler {
      */
     bundle(params) {
         let files = []
-            .concat(params.files || [])
+            .concat(this.#normalizePaths(params.files || []))
             .concat(this.#obtainFiles(params.patterns, params.files))
+            // @todo Check if working.
             .filter(file => !params.ignoreFiles.includes(file));
 
         let allFiles = this.#obtainFiles(params.lookupPatterns || params.patterns);
@@ -89,6 +91,7 @@ class Bundler {
         let notBundledModules = [];
 
         let sortedFiles = this.#sortFiles(
+            params.name,
             files,
             allFiles,
             ignoreLibs,
@@ -99,7 +102,8 @@ class Bundler {
 
         let contents = '';
 
-        sortedFiles.forEach(file => contents += this.#normalizeSourceFile(file));
+        this.#mapToTraspiledFiles(sortedFiles)
+            .forEach(file => contents += this.#normalizeSourceFile(file) + '\n');
 
         let modules = sortedFiles.map(file => this.#obtainModuleName(file));
 
@@ -111,6 +115,16 @@ class Bundler {
         };
     }
 
+    /**
+     * @param {string[]} files
+     * @return {string[]}
+     */
+    #mapToTraspiledFiles(files) {
+        return files.map(file => {
+            return this.transpiledPath + '/' + file.slice(this.basePath.length + 1);
+        });
+    }
+
     /**
      * @param {string[]} patterns
      * @param {string[]} [ignoreFiles]
@@ -120,7 +134,7 @@ class Bundler {
         let files = [];
         ignoreFiles = ignoreFiles || [];
 
-        patterns.forEach(pattern => {
+        this.#normalizePaths(patterns).forEach(pattern => {
             let itemFiles = globSync(pattern, {})
                 .map(file => file.replaceAll('\\', '/'))
                 .filter(file => !ignoreFiles.includes(file));
@@ -132,6 +146,15 @@ class Bundler {
     }
 
     /**
+     * @param {string[]} patterns
+     * @return {string[]}
+     */
+    #normalizePaths(patterns) {
+        return patterns.map(item => this.basePath + '/' + item);
+    }
+
+    /**
+     * @param {string} name
      * @param {string[]} files
      * @param {string[]} allFiles
      * @param {string[]} ignoreLibs
@@ -141,6 +164,7 @@ class Bundler {
      * @return {string[]}
      */
     #sortFiles(
+        name,
         files,
         allFiles,
         ignoreLibs,
@@ -203,9 +227,9 @@ class Bundler {
         /** @var {string[]} */
         let pickedModules = [];
 
-        for (let name of modules) {
+        for (let module of modules) {
             this.#buildTreeItem(
-                name,
+                module,
                 map,
                 depthMap,
                 ignoreLibs,
@@ -266,7 +290,7 @@ class Bundler {
     }
 
     /**
-     * @param {string} name
+     * @param {string} module
      * @param {Object.<string, string[]>} map
      * @param {Object.<string, number>} depthMap
      * @param {string[]} ignoreLibs
@@ -277,7 +301,7 @@ class Bundler {
      * @param {string[]} [path]
      */
     #buildTreeItem(
-        name,
+        module,
         map,
         depthMap,
         ignoreLibs,
@@ -288,17 +312,17 @@ class Bundler {
         path
     ) {
         /** @var {string[]} */
-        let deps = map[name] || [];
+        let deps = map[module] || [];
         depth = depth || 0;
         path = [].concat(path || []);
 
-        path.push(name);
+        path.push(module);
 
-        if (!(name in depthMap)) {
-            depthMap[name] = depth;
+        if (!(module in depthMap)) {
+            depthMap[module] = depth;
         }
-        else if (depth > depthMap[name]) {
-            depthMap[name] = depth;
+        else if (depth > depthMap[module]) {
+            depthMap[module] = depth;
         }
 
         if (deps.length === 0) {
@@ -346,14 +370,14 @@ class Bundler {
      */
     #obtainModuleName(file) {
         for (let mod in this.modulePaths) {
-            let part = this.modulePaths[mod] + '/src/';
+            let part = this.basePath + '/' + this.modulePaths[mod] + '/src/';
 
             if (file.indexOf(part) === 0) {
                 return mod + ':' + file.substring(part.length, file.length - 3);
             }
         }
 
-        return file.slice(this.#getBathPath().length, -3);
+        return file.slice(this.#getSrcPath().length, -3);
     }
 
     /**
@@ -365,9 +389,13 @@ class Bundler {
             return null;
         }
 
+        let moduleName = this.#obtainModuleName(path);
+
+        const sourceCode = fs.readFileSync(path, 'utf-8');
+
         let tsSourceFile = typescript.createSourceFile(
             path,
-            fs.readFileSync(path, 'utf-8'),
+            sourceCode,
             typescript.ScriptTarget.Latest
         );
 
@@ -378,10 +406,22 @@ class Bundler {
             !rootStatement.expression.expression ||
             rootStatement.expression.expression.escapedText !== 'define'
         ) {
-            return null;
-        }
+            if (!sourceCode.includes('export ')) {
+                return null;
+            }
 
-        let moduleName = this.#obtainModuleName(path);
+            if (!sourceCode.includes('import ')) {
+                return {
+                    name: moduleName,
+                    deps: [],
+                };
+            }
+
+            return {
+                name: moduleName,
+                deps: this.#obtainModuleDeps(tsSourceFile),
+            };
+        }
 
         let deps = [];
 
@@ -405,6 +445,27 @@ class Bundler {
         };
     }
 
+    /**
+     * @param sourceFile
+     * @return {string[]}
+     */
+    #obtainModuleDeps(sourceFile) {
+        return sourceFile.statements
+            .filter(item => item.importClause)
+            .filter(item => item.importClause && item.moduleSpecifier)
+            .map(item => item.moduleSpecifier.text)
+            .map(item => {
+                if (!item.startsWith('modules/')) {
+                    return item;
+                }
+
+                let mod = item.split('/')[1];
+                let part = item.split('/').slice(2).join('/');
+
+                return mod + ':' + part;
+            });
+    }
+
     /**
      * @param {string} path
      * @return {boolean}
@@ -414,10 +475,10 @@ class Bundler {
             return false;
         }
 
-        let startParts = [this.#getBathPath()];
+        let startParts = [this.#getSrcPath()];
 
         for (let mod in this.modulePaths) {
-            let modPath = this.modulePaths[mod];
+            let modPath = this.basePath + '/' + this.modulePaths[mod] + '/src/';
 
             startParts.push(modPath);
         }
@@ -438,13 +499,19 @@ class Bundler {
      */
     #normalizeSourceFile(path) {
         let sourceCode = fs.readFileSync(path, 'utf-8');
-        let basePath = this.#getBathPath();
+        let srcPath = this.#getSrcPath();
+
+        sourceCode = this.#stripSourceMappingUrl(sourceCode);
 
         if (!this.#isClientJsFile(path)) {
             return sourceCode;
         }
 
-        let moduleName = path.slice(basePath.length, -3);
+        if (!sourceCode.includes('define')) {
+            return sourceCode;
+        }
+
+        let moduleName = path.slice(srcPath.length, -3);
 
         let tsSourceFile = typescript.createSourceFile(
             path,
@@ -482,11 +549,24 @@ class Bundler {
     }
 
     /**
-     * @private
+     * @param {string} contents
      * @return {string}
      */
-    #getBathPath() {
-        let path = this.basePath;
+    #stripSourceMappingUrl(contents) {
+        let re = /^\/\/# sourceMappingURL.*/gm;
+
+        if (!contents.match(re)) {
+            return contents;
+        }
+
+        return contents.replaceAll(re, '');
+    }
+
+    /**
+     * @return {string}
+     */
+    #getSrcPath() {
+        let path = this.srcPath;
 
         if (path.slice(-1) !== '/') {
             path += '/';
diff --git a/js/template-precompiler.js b/js/bundler/template-precompiler.js
similarity index 88%
rename from js/template-precompiler.js
rename to js/bundler/template-precompiler.js
index 61c70539f2..7081df3eb3 100644
--- a/js/template-precompiler.js
+++ b/js/bundler/template-precompiler.js
@@ -43,9 +43,11 @@ class TemplatePrecompiler {
      * @return {{contents: string, files: string[]}}
      */
     precompile(params) {
+        const baseBase = 'client';
+
         let files = [];
 
-        params.patterns.forEach(pattern => {
+        this.#normalizePaths(params.patterns).forEach(pattern => {
             let itemFiles = globSync(pattern)
                 .map(file => file.replaceAll('\\', '/'));
 
@@ -63,7 +65,7 @@ class TemplatePrecompiler {
             }
 
             for (let itemModule in params.modulePaths) {
-                let path = params.modulePaths[itemModule];
+                let path = baseBase + '/' + params.modulePaths[itemModule];
 
                 if (file.indexOf(path) === 0) {
                     module = itemModule;
@@ -73,7 +75,7 @@ class TemplatePrecompiler {
             }
 
             let path = module ?
-                params.modulePaths[module] :
+                baseBase + '/' + params.modulePaths[module] :
                 this.defaultPath;
 
             path += '/res/templates/';
@@ -108,6 +110,14 @@ class TemplatePrecompiler {
             contents: contents,
         };
     }
+
+    /**
+     * @param {string[]} patterns
+     * @return {string[]}
+     */
+    #normalizePaths(patterns) {
+        return patterns.map(item => this.defaultPath + '/' + item);
+    }
 }
 
 module.exports = TemplatePrecompiler;
diff --git a/js/scripts/prepare-lib-original.js b/js/scripts/prepare-lib-original.js
index 1929e69f59..fd0b5ac5c1 100644
--- a/js/scripts/prepare-lib-original.js
+++ b/js/scripts/prepare-lib-original.js
@@ -62,7 +62,7 @@ let stripSourceMappingUrl = path => {
     /** @var {string} */
     let originalContents = fs.readFileSync(path, {encoding: 'utf-8'});
 
-    let re = /\/\/# sourceMappingURL.*/g;
+    let re = /^\/\/# sourceMappingURL.*/gm;
 
     if (!originalContents.match(re)) {
         return;
diff --git a/client/src/models/email.js b/js/scripts/transpile.js
similarity index 89%
rename from client/src/models/email.js
rename to js/scripts/transpile.js
index addec64ba3..2aff8b0c03 100644
--- a/client/src/models/email.js
+++ b/js/scripts/transpile.js
@@ -26,7 +26,11 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('models/email', ['model'], function (Dep) {
+const Transpiler = require('../../js/transpiler');
 
-    return Dep.extend({});
-});
+(new Transpiler({})).process();
+
+(new Transpiler({
+    mod: 'crm',
+    path: 'client/modules/crm',
+})).process();
diff --git a/js/transpiler.js b/js/transpiler.js
new file mode 100644
index 0000000000..869d0de1fb
--- /dev/null
+++ b/js/transpiler.js
@@ -0,0 +1,169 @@
+/************************************************************************
+ * This file is part of EspoCRM.
+ *
+ * EspoCRM - Open Source CRM application.
+ * Copyright (C) 2014-2023 Yurii Kuznietsov, Taras Machyshyn, Oleksii Avramenko
+ * Website: https://www.espocrm.com
+ *
+ * EspoCRM is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * EspoCRM is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with EspoCRM. If not, see http://www.gnu.org/licenses/.
+ *
+ * The interactive user interfaces in modified source and object code versions
+ * of this program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU General Public License version 3.
+ *
+ * In accordance with Section 7(b) of the GNU General Public License version 3,
+ * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
+ ************************************************************************/
+
+const babelCore = require("@babel/core");
+const fs = require('fs');
+const {globSync} = require('glob');
+
+class Transpiler {
+
+    /**
+     * @param {{
+     *     path?: string,
+     *     destDir?: string,
+     *     mod?: string,
+     * }} config
+     */
+    constructor(config) {
+        this.path = (config.path ?? 'client') + '/src';
+        this.destDir = config.destDir || 'client/lib/transpiled';
+        this.mod = config.mod;
+
+        this.contentsCache = {};
+    }
+
+    process() {
+        let allFiles = globSync(this.path + '/**/*.js')
+            .map(file => file.replaceAll('\\', '/'));
+
+        let files = allFiles.filter(file => this.#isToBeTranspiled(file));
+        let otherFiles = allFiles.filter(file => !files.includes(file));
+
+        files.forEach(file => this.#processFile(file));
+        otherFiles.forEach(file => this.#copyFile(file));
+    }
+
+    /**
+     * @param {string} file
+     */
+    #processFile(file) {
+        const module = this.#obtainModuleName(file);
+
+        const result = babelCore.transformSync(this.#getContents(file), {
+            plugins: ['@babel/plugin-transform-modules-amd'],
+            moduleId: module,
+            sourceMaps: true,
+        });
+
+        let dir = this.#obtainTargetDir(module);
+
+        fs.mkdirSync(dir, {recursive: true});
+
+        let part = module;
+
+        if (part.includes(':')) {
+            part = part.split(':')[1];
+        }
+
+        let filePart = part.split('/').slice(-1)[0] + '.js';
+        let destFile = dir + filePart;
+
+        let resultContent = result.code + `\n//# sourceMappingURL=${filePart}.map ;`;
+
+        fs.writeFileSync(destFile, resultContent, 'utf-8');
+        fs.writeFileSync(destFile + '.map', result.map.toString(), 'utf-8');
+    }
+
+    /**
+     * @param {string} file
+     */
+    #copyFile(file) {
+        let module = this.#obtainModuleName(file);
+        let dir = this.#obtainTargetDir(module);
+
+        fs.mkdirSync(dir, {recursive: true});
+
+        let destFile = dir + file.split('/').slice(-1)[0];
+
+        fs.mkdirSync(dir, {recursive: true});
+        fs.copyFileSync(file, destFile);
+    }
+
+    /**
+     * @param {string} module
+     * @return {string}
+     */
+    #obtainTargetDir(module) {
+        let destDir = this.destDir;
+
+        let part = 'src';
+        let path = module;
+
+        if (module.includes(':')) {
+            let [mod, itemPath] = module.split(':');
+
+            part = 'modules/' + mod + '/' + part;
+
+            path = itemPath;
+        }
+
+        destDir += '/' + part + '/' + path.split('/').slice(0, -1).join('/');
+
+        if (destDir.slice(-1) !== '/') {
+            destDir += '/';
+        }
+
+        return destDir;
+    }
+
+    /**
+     * @param {string} file
+     * @return {boolean}
+     */
+    #isToBeTranspiled(file) {
+        let contents = this.#getContents(file);
+
+        return !contents.includes("\ndefine(") && contents.includes("\nexport ");
+    }
+
+    /**
+     * @param {string} file
+     * @return {string}
+     */
+    #getContents(file) {
+        if (!(file in this.contentsCache)) {
+            this.contentsCache[file] = fs.readFileSync(file, 'utf-8');
+        }
+
+        return this.contentsCache[file];
+    }
+
+    /**
+     * @param {string} file
+     * @return string
+     */
+    #obtainModuleName(file) {
+        if (this.mod) {
+            return this.mod + ':' + file.slice(this.path.length + 1, -3);
+        }
+
+        return file.slice(this.path.length + 1, -3);
+    }
+}
+
+module.exports = Transpiler;
diff --git a/jsconfig.json b/jsconfig.json
index 68bddc6985..704843d642 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -3,9 +3,10 @@
         "baseUrl": "client",
         "paths": {
             "*": ["src/*"],
+            "modules/crm/*": ["modules/crm/src/*"],
             "crm:*": ["modules/crm/src/*"]
         },
-        "module": "AMD",
+        "module": "ES6",
         "target": "ES2018"
     }
 }
diff --git a/package-lock.json b/package-lock.json
index ff13597fd8..2f3abb5d44 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "espocrm",
-      "version": "7.4.6",
+      "version": "7.5.0",
       "hasInstallScript": true,
       "license": "GPL-3.0",
       "dependencies": {
@@ -17,7 +17,7 @@
         "bootstrap": "^3.4.1",
         "bootstrap-colorpicker": "^2.5.2",
         "bootstrap-datepicker": "^1.9.0",
-        "bullbone": "github:yurikuzn/bull#1.1.1",
+        "bullbone": "github:yurikuzn/bull#1.1.2",
         "cronstrue": "^1.114.0",
         "cropper": "^0.7.9",
         "devbridge-autocomplete": "^1.4.11",
@@ -49,6 +49,10 @@
         "vis": "^4.19.1"
       },
       "devDependencies": {
+        "@babel/cli": "^7.21.5",
+        "@babel/core": "^7.22.1",
+        "@babel/plugin-transform-modules-amd": "^7.20.11",
+        "@babel/preset-env": "^7.22.4",
         "archiver": "^5.3.0",
         "fstream": ">=1.0.12",
         "glob": "^10.2.6",
@@ -74,54 +78,116 @@
       }
     },
     "node_modules/@ampproject/remapping": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.0.tgz",
-      "integrity": "sha512-d5RysTlJ7hmw5Tw4UxgxcY3lkMe92n8sXCcuLPAyIAHK6j8DefDwtGnVVDgOnv+RnEosulDJ9NPKQL27bDId0g==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
       "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.0"
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
       },
       "engines": {
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/code-frame": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
-      "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
+    "node_modules/@babel/cli": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.21.5.tgz",
+      "integrity": "sha512-TOKytQ9uQW9c4np8F+P7ZfPINy5Kv+pizDIUwSVH8X5zHgYHV4AA8HE5LA450xXeu4jEfmUckTYvv1I4S26M/g==",
+      "dev": true,
       "dependencies": {
-        "@babel/highlight": "^7.16.7"
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "commander": "^4.0.1",
+        "convert-source-map": "^1.1.0",
+        "fs-readdir-recursive": "^1.1.0",
+        "glob": "^7.2.0",
+        "make-dir": "^2.1.0",
+        "slash": "^2.0.0"
+      },
+      "bin": {
+        "babel": "bin/babel.js",
+        "babel-external-helpers": "bin/babel-external-helpers.js"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "optionalDependencies": {
+        "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3",
+        "chokidar": "^3.4.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/cli/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@babel/cli/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
+      "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+      "dependencies": {
+        "@babel/highlight": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.0.tgz",
-      "integrity": "sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==",
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.3.tgz",
+      "integrity": "sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.0.tgz",
-      "integrity": "sha512-x/5Ea+RO5MvF9ize5DeVICJoVrNv0Mi2RnIABrZEKYvPEpldXwauPkgvYA17cKa6WpU3LoYvYbuEMFtSNFsarA==",
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.1.tgz",
+      "integrity": "sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==",
       "dependencies": {
-        "@ampproject/remapping": "^2.0.0",
-        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.0",
-        "@babel/helper-compilation-targets": "^7.16.7",
-        "@babel/helper-module-transforms": "^7.16.7",
-        "@babel/helpers": "^7.17.0",
-        "@babel/parser": "^7.17.0",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.0",
-        "@babel/types": "^7.17.0",
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.21.4",
+        "@babel/generator": "^7.22.0",
+        "@babel/helper-compilation-targets": "^7.22.1",
+        "@babel/helper-module-transforms": "^7.22.1",
+        "@babel/helpers": "^7.22.0",
+        "@babel/parser": "^7.22.0",
+        "@babel/template": "^7.21.9",
+        "@babel/traverse": "^7.22.1",
+        "@babel/types": "^7.22.0",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
-        "json5": "^2.1.2",
+        "json5": "^2.2.2",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -162,45 +228,51 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.0.tgz",
-      "integrity": "sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw==",
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.3.tgz",
+      "integrity": "sha512-C17MW4wlk//ES/CJDL51kPNwl+qiBQyN7b9SKyVp11BLGFeSPoVaHrv+MNt8jwQFhQWowW88z1eeBx3pFz9v8A==",
       "dependencies": {
-        "@babel/types": "^7.17.0",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
+        "@babel/types": "^7.22.3",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jsesc": "^2.5.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/generator/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
+      "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
+      "dependencies": {
+        "@babel/types": "^7.18.6"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
-      "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
+    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.3.tgz",
+      "integrity": "sha512-ahEoxgqNoYXm0k22TvOke48i1PkavGu0qGCmcq9ugi6gnmvKNaMjKBSrZTnWUi1CFEeNAUiVba0Wtzm03aSkJg==",
+      "dev": true,
       "dependencies": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.22.3"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz",
-      "integrity": "sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==",
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.1.tgz",
+      "integrity": "sha512-Rqx13UM3yVB5q0D/KwQ8+SPfX/+Rnsy1Lw1k/UwOC4KC6qrzIQoY3lYnBu5EHKBlEHHcj0M0W8ltPSkD8rqfsQ==",
       "dependencies": {
-        "@babel/compat-data": "^7.16.4",
-        "@babel/helper-validator-option": "^7.16.7",
-        "browserslist": "^4.17.5",
+        "@babel/compat-data": "^7.22.0",
+        "@babel/helper-validator-option": "^7.21.0",
+        "browserslist": "^4.21.3",
+        "lru-cache": "^5.1.1",
         "semver": "^6.3.0"
       },
       "engines": {
@@ -210,6 +282,14 @@
         "@babel/core": "^7.0.0"
       }
     },
+    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
     "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -218,183 +298,334 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
-      "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
+    "node_modules/@babel/helper-compilation-targets/node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.1.tgz",
+      "integrity": "sha512-SowrZ9BWzYFgzUMwUmowbPSGu6CXL5MSuuCkG3bejahSpSymioPmuLdhPxNOc9MjuNGjy7M/HaXvJ8G82Lywlw==",
+      "dev": true,
       "dependencies": {
-        "@babel/types": "^7.16.7"
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-member-expression-to-functions": "^7.22.0",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.22.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "semver": "^6.3.0"
       },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.1.tgz",
+      "integrity": "sha512-WWjdnfR3LPIe+0EY8td7WmjhytxXtjKAEpnAxun/hkNiyOaPlvGK+NZaBFIdi9ndYV3Gav7BpFvtUwnaJlwi1w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "regexpu-core": "^5.3.1",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.0.tgz",
+      "integrity": "sha512-RnanLx5ETe6aybRi1cO/edaRH+bNYWaryCEmjDDYyNr4wnSzyOp8T0dWipmqVHKEY3AbVKUom50AKSlj1zmKbg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.17.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2",
+        "semver": "^6.1.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0-0"
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/@babel/helper-define-polyfill-provider/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-environment-visitor": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.1.tgz",
+      "integrity": "sha512-Z2tgopurB/kTbidvzeBrc2To3PUP/9i5MUe+fU6QJCQDyPwSH2oRapkLw3KGECDYSjhQZCNxEvNvZlLw8JjGwA==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-function-name": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz",
-      "integrity": "sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+      "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.16.7",
-        "@babel/template": "^7.16.7",
-        "@babel/types": "^7.16.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-get-function-arity": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz",
-      "integrity": "sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==",
-      "dependencies": {
-        "@babel/types": "^7.16.7"
+        "@babel/template": "^7.20.7",
+        "@babel/types": "^7.21.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-hoist-variables": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
-      "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
+      "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
       "dependencies": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.7.tgz",
-      "integrity": "sha512-VtJ/65tYiU/6AbMTDwyoXGPKHgTsfRarivm+YbB5uAzKUyuPjgZSgAFeG87FCigc7KNHu2Pegh1XIT3lXjvz3Q==",
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.3.tgz",
+      "integrity": "sha512-Gl7sK04b/2WOb6OPVeNy9eFKeD3L6++CzL3ykPOWqTn08xgYYK0wz4TUh2feIImDXxcVW3/9WQ1NMKY66/jfZA==",
       "dependencies": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.22.3"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
-      "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz",
+      "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==",
       "dependencies": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.21.4"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz",
-      "integrity": "sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==",
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.1.tgz",
+      "integrity": "sha512-dxAe9E7ySDGbQdCVOY/4+UcD8M9ZFqZcZhSPsPacvCG4M+9lwtDDQfI2EoaSvmf7W/8yCBkGU0m7Pvt1ru3UZw==",
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-simple-access": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/helper-validator-identifier": "^7.16.7",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-module-imports": "^7.21.4",
+        "@babel/helper-simple-access": "^7.21.5",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/helper-validator-identifier": "^7.19.1",
+        "@babel/template": "^7.21.9",
+        "@babel/traverse": "^7.22.1",
+        "@babel/types": "^7.22.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz",
-      "integrity": "sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz",
+      "integrity": "sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==",
       "dependencies": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz",
+      "integrity": "sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-replace-supers": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz",
-      "integrity": "sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==",
+    "node_modules/@babel/helper-remap-async-to-generator": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz",
+      "integrity": "sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==",
+      "dev": true,
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-member-expression-to-functions": "^7.16.7",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/traverse": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-wrap-function": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.1.tgz",
+      "integrity": "sha512-ut4qrkE4AuSfrwHSps51ekR1ZY/ygrP1tp0WFm8oVq6nzc/hvfV/22JylndIbsf2U2M9LOMwiSddr6y+78j+OQ==",
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-member-expression-to-functions": "^7.22.0",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/template": "^7.21.9",
+        "@babel/traverse": "^7.22.1",
+        "@babel/types": "^7.22.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-simple-access": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz",
-      "integrity": "sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==",
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz",
+      "integrity": "sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==",
       "dependencies": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
+      "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.20.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
-      "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
+      "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
       "dependencies": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz",
+      "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
-      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
-      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
+      "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz",
+      "integrity": "sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-function-name": "^7.19.0",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.20.5",
+        "@babel/types": "^7.20.5"
+      },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.0.tgz",
-      "integrity": "sha512-Xe/9NFxjPwELUvW2dsukcMZIp6XwPSbI4ojFBJuX5ramHuVE22SVcZIwqzdWo5uCgeTXW8qV97lMvSOjq+1+nQ==",
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.3.tgz",
+      "integrity": "sha512-jBJ7jWblbgr7r6wYZHMdIqKc73ycaTcCaWRq4/2LpuPHcx7xMlZvpGQkOYc9HeSjn6rcx15CPlgVcBtZ4WZJ2w==",
       "dependencies": {
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.0",
-        "@babel/types": "^7.17.0"
+        "@babel/template": "^7.21.9",
+        "@babel/traverse": "^7.22.1",
+        "@babel/types": "^7.22.3"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.16.10",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.10.tgz",
-      "integrity": "sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
+      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.16.7",
+        "@babel/helper-validator-identifier": "^7.18.6",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
       },
@@ -403,9 +634,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.0.tgz",
-      "integrity": "sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==",
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.4.tgz",
+      "integrity": "sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -413,18 +644,433 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz",
-      "integrity": "sha512-WY7og38SFAGYRe64BrjKf8OrE6ulEHtr5jEYaZMwox9KebgqPi67Zqz8K53EKk1fFEJgm96r32rkKZ3qA2nCWQ==",
+    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz",
+      "integrity": "sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==",
+      "dev": true,
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-replace-supers": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.3.tgz",
+      "integrity": "sha512-6r4yRwEnorYByILoDRnEqxtojYKuiIv9FojW2E8GUKo9eWBwbKcd9IiZOZpdyXc64RmyGGyPu3/uAcrz/dq2kQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/plugin-transform-optional-chaining": "^7.22.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.13.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.10.tgz",
+      "integrity": "sha512-3YybmT8FN4sZFXp0kTr9Gbu90wAIhC3feNung+qcRQ1wALGoSHgOz1c+fR3ZLGZ0LXqIpYmtE6Faua6tMDarUg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
+      "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-assertions": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz",
+      "integrity": "sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.19.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.3.tgz",
+      "integrity": "sha512-i35jZJv6aO7hxEbIWQ41adVfOzjm9dcYDNeWlBMd8p0ZQRtNUCBrmGwZt+H5lb+oOC9a3svp956KP0oWGA1YsA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.21.5.tgz",
+      "integrity": "sha512-wb1mhwGOCaXHDTcsRYMKF9e5bbMgqwxtqa2Y1ifH96dXJPwbuLX9qHy3clhrxVqgMz7nyNXs8VkxdH8UBcjKqA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-generator-functions": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.3.tgz",
+      "integrity": "sha512-36A4Aq48t66btydbZd5Fk0/xJqbpg/v4QWI4AH4cYHBXy9Mu42UOupZpebKFiCFNT9S9rJFcsld0gsv0ayLjtA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-remap-async-to-generator": "^7.18.9",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz",
+      "integrity": "sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-remap-async-to-generator": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz",
+      "integrity": "sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz",
+      "integrity": "sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.20.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-properties": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.3.tgz",
+      "integrity": "sha512-mASLsd6rhOrLZ5F3WbCxkzl67mmOnqik0zrg5W6D/X0QMW7HtvnoL1dRARLKIbMP3vXwkwziuLesPqWVGIl6Bw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-static-block": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.3.tgz",
+      "integrity": "sha512-5BirgNWNOx7cwbTJCOmKFJ1pZjwk5MUfMIwiBBvsirCJMZeQgs5pk6i1OlkVg+1Vef5LfBahFOrdCnAWvkVKMw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz",
+      "integrity": "sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-replace-supers": "^7.20.7",
+        "@babel/helper-split-export-declaration": "^7.18.6",
         "globals": "^11.1.0"
       },
       "engines": {
@@ -434,32 +1080,805 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/template": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
-      "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
+    "node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.21.5.tgz",
+      "integrity": "sha512-TR653Ki3pAwxBxUe8srfF3e4Pe3FTA46uaNHYyQwIoM4oWKSoOZiDNyHJ0oIoDIUPSRQbQG7jzgVBX3FPVne1Q==",
+      "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.16.7",
-        "@babel/parser": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/template": "^7.20.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.21.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz",
+      "integrity": "sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.20.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz",
+      "integrity": "sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz",
+      "integrity": "sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dynamic-import": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.1.tgz",
+      "integrity": "sha512-rlhWtONnVBPdmt+jeewS0qSnMz/3yLFrqAP8hHC6EDcrYRSyuz9f9yQhHvVn2Ad6+yO9fHXac5piudeYrInxwQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz",
+      "integrity": "sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-export-namespace-from": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.3.tgz",
+      "integrity": "sha512-5Ti1cHLTDnt3vX61P9KZ5IG09bFXp4cDVFJIAeCZuxu9OXXJJZp5iP0n/rzM2+iAutJY+KWEyyHcRaHlpQ/P5g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.5.tgz",
+      "integrity": "sha512-nYWpjKW/7j/I/mZkGVgHJXh4bA1sfdFnJoOXwJuj4m3Q2EraO/8ZyrkCau9P5tbHQk01RMSt6KYLCsW7730SXQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz",
+      "integrity": "sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-json-strings": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.3.tgz",
+      "integrity": "sha512-IuvOMdeOOY2X4hRNAT6kwbePtK21BUyrAEgLKviL8pL6AEEVUVcqtRdN/HJXBLGIbt9T3ETmXRnFedRRmQNTYw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-literals": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz",
+      "integrity": "sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.3.tgz",
+      "integrity": "sha512-CbayIfOw4av2v/HYZEsH+Klks3NC2/MFIR3QR8gnpGNNPEaq2fdlVCRYG/paKs7/5hvBLQ+H70pGWOHtlNEWNA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz",
+      "integrity": "sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-amd": {
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz",
+      "integrity": "sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.5.tgz",
+      "integrity": "sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.21.5",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-simple-access": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.3.tgz",
+      "integrity": "sha512-V21W3bKLxO3ZjcBJZ8biSvo5gQ85uIXW2vJfh7JSWf/4SLUSr1tOoHX3ruN4+Oqa2m+BKfsxTR1I+PsvkIWvNw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-module-transforms": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-validator-identifier": "^7.19.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz",
+      "integrity": "sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.3.tgz",
+      "integrity": "sha512-c6HrD/LpUdNNJsISQZpds3TXvfYIAbo+efE9aWmY/PmSRD0agrJ9cPMt4BmArwUQ7ZymEWTFjTyp+yReLJZh0Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.3.tgz",
+      "integrity": "sha512-5RuJdSo89wKdkRTqtM9RVVJzHum9c2s0te9rB7vZC1zKKxcioWIy+xcu4OoIAjyFZhb/bp5KkunuLin1q7Ct+w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.3.tgz",
+      "integrity": "sha512-CpaoNp16nX7ROtLONNuCyenYdY/l7ZsR6aoVa7rW7nMWisoNoQNIH5Iay/4LDyRjKMuElMqXiBoOQCDLTMGZiw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-numeric-separator": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.3.tgz",
+      "integrity": "sha512-+AF88fPDJrnseMh5vD9+SH6wq4ZMvpiTMHh58uLs+giMEyASFVhcT3NkoyO+NebFCNnpHJEq5AXO2txV4AGPDQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-rest-spread": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.3.tgz",
+      "integrity": "sha512-38bzTsqMMCI46/TQnJwPPpy33EjLCc1Gsm2hRTF6zTMWnKsN61vdrpuzIEGQyKEhDSYDKyZHrrd5FMj4gcUHhw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.22.3",
+        "@babel/helper-compilation-targets": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.22.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
+      "integrity": "sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.3.tgz",
+      "integrity": "sha512-bnDFWXFzWY0BsOyqaoSXvMQ2F35zutQipugog/rqotL2S4ciFOKlRYUu9djt4iq09oh2/34hqfRR2k1dIvuu4g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-chaining": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.3.tgz",
+      "integrity": "sha512-63v3/UFFxhPKT8j8u1jTTGVyITxl7/7AfOqK8C5gz1rHURPUGe3y5mvIf68eYKGoBNahtJnTxBKug4BQOnzeJg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.3.tgz",
+      "integrity": "sha512-x7QHQJHPuD9VmfpzboyGJ5aHEr9r7DsAsdxdhJiTB3J3j8dyl+NFZ+rX5Q2RWFDCs61c06qBfS4ys2QYn8UkMw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-methods": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.3.tgz",
+      "integrity": "sha512-fC7jtjBPFqhqpPAE+O4LKwnLq7gGkD3ZmC2E3i4qWH34mH3gOg2Xrq5YMHUq6DM30xhqM1DNftiRaSqVjEG+ug==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-property-in-object": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.3.tgz",
+      "integrity": "sha512-C7MMl4qWLpgVCbXfj3UW8rR1xeCnisQ0cU7YJHV//8oNBS0aCIVg1vFnZXxOckHhEpQyqNNkWmvSEWnMLlc+Vw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz",
+      "integrity": "sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regenerator": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.21.5.tgz",
+      "integrity": "sha512-ZoYBKDb6LyMi5yCsByQ5jmXsHAQDDYeexT1Szvlmui+lADvfSecr5Dxd/PkrTC3pAD182Fcju1VQkB4oCp9M+w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "regenerator-transform": "^0.15.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz",
+      "integrity": "sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz",
+      "integrity": "sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-spread": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz",
+      "integrity": "sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz",
+      "integrity": "sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz",
+      "integrity": "sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz",
+      "integrity": "sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.21.5.tgz",
+      "integrity": "sha512-LYm/gTOwZqsYohlvFUe/8Tujz75LqqVC2w+2qPHLR+WyWHGCZPN1KBpJCJn+4Bk4gOkQy/IXKIge6az5MqwlOg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.3.tgz",
+      "integrity": "sha512-5ScJ+OmdX+O6HRuMGW4kv7RL9vIKdtdAj9wuWUKy1wbHY3jaM/UlyIiC1G7J6UJiiyMukjjK0QwL3P0vBd0yYg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz",
+      "integrity": "sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.3.tgz",
+      "integrity": "sha512-hNufLdkF8vqywRp+P55j4FHXqAX2LRUccoZHH7AFn1pq5ZOO2ISKW9w13bFZVjBoTqeve2HOgoJCcaziJVhGNw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/preset-env": {
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.4.tgz",
+      "integrity": "sha512-c3lHOjbwBv0TkhYCr+XCR6wKcSZ1QbQTVdSkZUaVpLv8CVWotBMArWUi5UAJrcrQaEnleVkkvaV8F/pmc/STZQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.22.3",
+        "@babel/helper-compilation-targets": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-validator-option": "^7.21.0",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.22.3",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-import-assertions": "^7.20.0",
+        "@babel/plugin-syntax-import-attributes": "^7.22.3",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.21.5",
+        "@babel/plugin-transform-async-generator-functions": "^7.22.3",
+        "@babel/plugin-transform-async-to-generator": "^7.20.7",
+        "@babel/plugin-transform-block-scoped-functions": "^7.18.6",
+        "@babel/plugin-transform-block-scoping": "^7.21.0",
+        "@babel/plugin-transform-class-properties": "^7.22.3",
+        "@babel/plugin-transform-class-static-block": "^7.22.3",
+        "@babel/plugin-transform-classes": "^7.21.0",
+        "@babel/plugin-transform-computed-properties": "^7.21.5",
+        "@babel/plugin-transform-destructuring": "^7.21.3",
+        "@babel/plugin-transform-dotall-regex": "^7.18.6",
+        "@babel/plugin-transform-duplicate-keys": "^7.18.9",
+        "@babel/plugin-transform-dynamic-import": "^7.22.1",
+        "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
+        "@babel/plugin-transform-export-namespace-from": "^7.22.3",
+        "@babel/plugin-transform-for-of": "^7.21.5",
+        "@babel/plugin-transform-function-name": "^7.18.9",
+        "@babel/plugin-transform-json-strings": "^7.22.3",
+        "@babel/plugin-transform-literals": "^7.18.9",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.22.3",
+        "@babel/plugin-transform-member-expression-literals": "^7.18.6",
+        "@babel/plugin-transform-modules-amd": "^7.20.11",
+        "@babel/plugin-transform-modules-commonjs": "^7.21.5",
+        "@babel/plugin-transform-modules-systemjs": "^7.22.3",
+        "@babel/plugin-transform-modules-umd": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.3",
+        "@babel/plugin-transform-new-target": "^7.22.3",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.22.3",
+        "@babel/plugin-transform-numeric-separator": "^7.22.3",
+        "@babel/plugin-transform-object-rest-spread": "^7.22.3",
+        "@babel/plugin-transform-object-super": "^7.18.6",
+        "@babel/plugin-transform-optional-catch-binding": "^7.22.3",
+        "@babel/plugin-transform-optional-chaining": "^7.22.3",
+        "@babel/plugin-transform-parameters": "^7.22.3",
+        "@babel/plugin-transform-private-methods": "^7.22.3",
+        "@babel/plugin-transform-private-property-in-object": "^7.22.3",
+        "@babel/plugin-transform-property-literals": "^7.18.6",
+        "@babel/plugin-transform-regenerator": "^7.21.5",
+        "@babel/plugin-transform-reserved-words": "^7.18.6",
+        "@babel/plugin-transform-shorthand-properties": "^7.18.6",
+        "@babel/plugin-transform-spread": "^7.20.7",
+        "@babel/plugin-transform-sticky-regex": "^7.18.6",
+        "@babel/plugin-transform-template-literals": "^7.18.9",
+        "@babel/plugin-transform-typeof-symbol": "^7.18.9",
+        "@babel/plugin-transform-unicode-escapes": "^7.21.5",
+        "@babel/plugin-transform-unicode-property-regex": "^7.22.3",
+        "@babel/plugin-transform-unicode-regex": "^7.18.6",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.22.3",
+        "@babel/preset-modules": "^0.1.5",
+        "@babel/types": "^7.22.4",
+        "babel-plugin-polyfill-corejs2": "^0.4.3",
+        "babel-plugin-polyfill-corejs3": "^0.8.1",
+        "babel-plugin-polyfill-regenerator": "^0.5.0",
+        "core-js-compat": "^3.30.2",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-env/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/preset-modules": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
+      "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==",
+      "dev": true
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz",
+      "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==",
+      "dev": true,
+      "dependencies": {
+        "regenerator-runtime": "^0.13.11"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.21.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.21.9.tgz",
+      "integrity": "sha512-MK0X5k8NKOuWRamiEfc3KEJiHMTkGZNUjzMipqCGDDc6ijRl/B7RGSKVGncu4Ro/HdyzzY6cmoXuKI2Gffk7vQ==",
+      "dependencies": {
+        "@babel/code-frame": "^7.21.4",
+        "@babel/parser": "^7.21.9",
+        "@babel/types": "^7.21.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.0.tgz",
-      "integrity": "sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg==",
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.4.tgz",
+      "integrity": "sha512-Tn1pDsjIcI+JcLKq1AVlZEr4226gpuAQTsLMorsYg9tuS/kG7nuwwJ4AB8jfQuEgb/COBwR/DqJxmoiYFu5/rQ==",
       "dependencies": {
-        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.0",
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/helper-hoist-variables": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.17.0",
-        "@babel/types": "^7.17.0",
+        "@babel/code-frame": "^7.21.4",
+        "@babel/generator": "^7.22.3",
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/parser": "^7.22.4",
+        "@babel/types": "^7.22.4",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -489,11 +1908,12 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/@babel/types": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
-      "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.4.tgz",
+      "integrity": "sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.16.7",
+        "@babel/helper-string-parser": "^7.21.5",
+        "@babel/helper-validator-identifier": "^7.19.1",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -544,28 +1964,56 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.4.tgz",
-      "integrity": "sha512-cz8HFjOFfUBtvN+NXYSFMHYRdxZMaEl0XypVrhzxBgadKIXhIkRd8aMeHhmF56Sl7SuS8OnUpQ73/k9LE4VnLg==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
       "engines": {
         "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.10",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.10.tgz",
-      "integrity": "sha512-Ht8wIW5v165atIX1p+JvKR5ONzUyF4Ac8DZIQ5kZs9zrb6M8SJNXpx1zn04rn65VjBMygRoMXcyYwNK0fT7bEg=="
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.2.tgz",
-      "integrity": "sha512-9KzzH4kMjA2XmBRHfqG2/Vtl7s92l6uNDd0wW7frDE+EUvQFGqNXhWp0UGJjSkt3v2AYjzOZn1QO9XaTNJIt1Q==",
+      "version": "0.3.18",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
+      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "node_modules/@nicolo-ribaudo/chokidar-2": {
+      "version": "2.1.8-no-fsevents.3",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
+      "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -644,6 +2092,20 @@
       "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.3.2.tgz",
       "integrity": "sha512-QXu7BPrP29VllRxH8GwB7x5iX5qWKAAMLqKQGWTeLWVlNHNOpVMJ91dsxQAIWXpjuW5wqvxu3Jd/nRjrJ+0pqg=="
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/applause": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/applause/-/applause-2.0.4.tgz",
@@ -817,6 +2279,54 @@
       "integrity": "sha512-bYnD2oD9UMZBTxSWcvXH1MTcp0w+CUBfXe4HI1QJLGzJu+O27Ny5gqzRcFuDsZB9jrZ5SJjqAG0PieJsaUdTcg==",
       "hasInstallScript": true
     },
+    "node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.3.tgz",
+      "integrity": "sha512-bM3gHc337Dta490gg+/AseNB9L4YLHxq1nGKZZSHbhXv4aTYU2MD2cjza1Ru4S6975YLTaL1K8uJf6ukJhhmtw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.17.7",
+        "@babel/helper-define-polyfill-provider": "^0.4.0",
+        "semver": "^6.1.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.1.tgz",
+      "integrity": "sha512-ikFrZITKg1xH6pLND8zT14UPgjKHiGLqex7rGEZCH2EvhsneJaJPemmpQaIZV5AL03II+lXylw3UmddDK8RU5Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.4.0",
+        "core-js-compat": "^3.30.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.0.tgz",
+      "integrity": "sha512-hDJtKjMLVa7Z+LwnTCxoDLQj6wdc+B8dun7ayF2fYieI6OzfuvcLMB32ihJZ4UhCBwNYGl5bg/x/P9cMdnkc2g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.4.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/backbone": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/backbone/-/backbone-1.3.3.tgz",
@@ -850,6 +2360,16 @@
         }
       ]
     },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -959,25 +2479,34 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
-      "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
+      "version": "4.21.7",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.7.tgz",
+      "integrity": "sha512-BauCXrQ7I2ftSqd2mvKHGo85XR0u7Ru3C/Hxsy/0TkfCtjrmAbPdzLGasmoiBxplpDXlPvdjX9u7srIMfgasNA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001286",
-        "electron-to-chromium": "^1.4.17",
-        "escalade": "^3.1.1",
-        "node-releases": "^2.0.1",
-        "picocolors": "^1.0.0"
+        "caniuse-lite": "^1.0.30001489",
+        "electron-to-chromium": "^1.4.411",
+        "node-releases": "^2.0.12",
+        "update-browserslist-db": "^1.0.11"
       },
       "bin": {
         "browserslist": "cli.js"
       },
       "engines": {
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/browserslist"
       }
     },
     "node_modules/buffer": {
@@ -1014,8 +2543,8 @@
       }
     },
     "node_modules/bullbone": {
-      "version": "1.1.1",
-      "resolved": "git+ssh://git@github.com/yurikuzn/bull.git#f6a89d5c488953ab89ca7dff4c3ff1107eb71d62",
+      "version": "1.1.2",
+      "resolved": "git+ssh://git@github.com/yurikuzn/bull.git#f20d6c7c9960f73073f813829a9d72e1eed85f54",
       "license": "MIT"
     },
     "node_modules/bytes": {
@@ -1041,13 +2570,23 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001309",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001309.tgz",
-      "integrity": "sha512-Pl8vfigmBXXq+/yUz1jUwULeq9xhMJznzdc/xwl4WclDAuebcTHVefpz8lE/bMI+UN7TOkSSe7B7RnZd6+dzjA==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/browserslist"
-      }
+      "version": "1.0.30001494",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001494.tgz",
+      "integrity": "sha512-sY2B5Qyl46ZzfYDegrl8GBCzdawSLT4ThM9b9F+aDYUrAG2zCOyMbd2Tq34mS1g4ZKBfjRlzOohQMxx28x6wJg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
     },
     "node_modules/cardinal": {
       "version": "2.1.1",
@@ -1074,6 +2613,34 @@
         "node": ">=4"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "optional": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
     "node_modules/chownr": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -1130,6 +2697,15 @@
         "node": ">=0.1.90"
       }
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/compress-commons": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.1.tgz",
@@ -1240,6 +2816,19 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/core-js-compat": {
+      "version": "3.30.2",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.30.2.tgz",
+      "integrity": "sha512-nriW1nuJjUgvkEjIot1Spwakz52V9YkYHZAQG6A1eCgC8AA1p0zngrQEP9R0+V6hji5XilWKG1Bd0YRppmGimA==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.21.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -1442,9 +3031,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.66",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.66.tgz",
-      "integrity": "sha512-f1RXFMsvwufWLwYUxTiP7HmjprKXrqEWHiQkjAYa9DJeVIlZk5v8gBGcaV+FhtXLly6C1OTVzQY+2UQrACiLlg=="
+      "version": "1.4.419",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.419.tgz",
+      "integrity": "sha512-jdie3RiEgygvDTyS2sgjq71B36q2cDSBfPlwzUyuOrfYTNoYWyBxxjGJV/HAu3A2hB0Y+HesvCVkVAFoCKwCSw=="
     },
     "node_modules/emitter-component": {
       "version": "1.1.1",
@@ -1538,6 +3127,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -1886,11 +3484,31 @@
         "node": ">= 8"
       }
     },
+    "node_modules/fs-readdir-recursive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
+      "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==",
+      "dev": true
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/fstream": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
@@ -1972,6 +3590,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/glob/node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -3060,6 +4691,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-core-module": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.1.0.tgz",
@@ -3600,6 +5244,12 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true
+    },
     "node_modules/lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@@ -3644,7 +5294,6 @@
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
       "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
       "dev": true,
-      "optional": true,
       "dependencies": {
         "pify": "^4.0.1",
         "semver": "^5.6.0"
@@ -3982,9 +5631,9 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "node_modules/node-releases": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA=="
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz",
+      "integrity": "sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ=="
     },
     "node_modules/nopt": {
       "version": "3.0.6",
@@ -4417,6 +6066,19 @@
         "minimatch": "^3.0.4"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/redeyed": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/redeyed/-/redeyed-2.1.1.tgz",
@@ -4425,6 +6087,77 @@
         "esprima": "~4.0.0"
       }
     },
+    "node_modules/regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true
+    },
+    "node_modules/regenerate-unicode-properties": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
+      "dev": true,
+      "dependencies": {
+        "regenerate": "^1.4.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "dev": true
+    },
+    "node_modules/regenerator-transform": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz",
+      "integrity": "sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "node_modules/regexpu-core": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/regjsgen": "^0.8.0",
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsparser": "^0.9.1",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regjsparser": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+      "dev": true,
+      "dependencies": {
+        "jsesc": "~0.5.0"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/regjsparser/node_modules/jsesc": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+      "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      }
+    },
     "node_modules/require-at": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/require-at/-/require-at-1.0.6.tgz",
@@ -4557,7 +6290,6 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true,
-      "optional": true,
       "bin": {
         "semver": "bin/semver"
       }
@@ -4692,6 +6424,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/slash": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -5082,6 +6823,46 @@
         "node": "*"
       }
     },
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "dev": true,
+      "dependencies": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-value-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -5091,6 +6872,35 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
+      "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/uri-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/uri-path/-/uri-path-1.0.0.tgz",
@@ -5374,45 +7184,88 @@
   },
   "dependencies": {
     "@ampproject/remapping": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.0.tgz",
-      "integrity": "sha512-d5RysTlJ7hmw5Tw4UxgxcY3lkMe92n8sXCcuLPAyIAHK6j8DefDwtGnVVDgOnv+RnEosulDJ9NPKQL27bDId0g==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
       "requires": {
-        "@jridgewell/trace-mapping": "^0.3.0"
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "@babel/cli": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.21.5.tgz",
+      "integrity": "sha512-TOKytQ9uQW9c4np8F+P7ZfPINy5Kv+pizDIUwSVH8X5zHgYHV4AA8HE5LA450xXeu4jEfmUckTYvv1I4S26M/g==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3",
+        "chokidar": "^3.4.0",
+        "commander": "^4.0.1",
+        "convert-source-map": "^1.1.0",
+        "fs-readdir-recursive": "^1.1.0",
+        "glob": "^7.2.0",
+        "make-dir": "^2.1.0",
+        "slash": "^2.0.0"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.2.3",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.1.1",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+          "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.1.7"
+          }
+        }
       }
     },
     "@babel/code-frame": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
-      "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
+      "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
       "requires": {
-        "@babel/highlight": "^7.16.7"
+        "@babel/highlight": "^7.18.6"
       }
     },
     "@babel/compat-data": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.0.tgz",
-      "integrity": "sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng=="
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.3.tgz",
+      "integrity": "sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ=="
     },
     "@babel/core": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.0.tgz",
-      "integrity": "sha512-x/5Ea+RO5MvF9ize5DeVICJoVrNv0Mi2RnIABrZEKYvPEpldXwauPkgvYA17cKa6WpU3LoYvYbuEMFtSNFsarA==",
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.1.tgz",
+      "integrity": "sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==",
       "requires": {
-        "@ampproject/remapping": "^2.0.0",
-        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.0",
-        "@babel/helper-compilation-targets": "^7.16.7",
-        "@babel/helper-module-transforms": "^7.16.7",
-        "@babel/helpers": "^7.17.0",
-        "@babel/parser": "^7.17.0",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.0",
-        "@babel/types": "^7.17.0",
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.21.4",
+        "@babel/generator": "^7.22.0",
+        "@babel/helper-compilation-targets": "^7.22.1",
+        "@babel/helper-module-transforms": "^7.22.1",
+        "@babel/helpers": "^7.22.0",
+        "@babel/parser": "^7.22.0",
+        "@babel/template": "^7.21.9",
+        "@babel/traverse": "^7.22.1",
+        "@babel/types": "^7.22.0",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
-        "json5": "^2.1.2",
+        "json5": "^2.2.2",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -5437,227 +7290,1149 @@
       }
     },
     "@babel/generator": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.0.tgz",
-      "integrity": "sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw==",
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.3.tgz",
+      "integrity": "sha512-C17MW4wlk//ES/CJDL51kPNwl+qiBQyN7b9SKyVp11BLGFeSPoVaHrv+MNt8jwQFhQWowW88z1eeBx3pFz9v8A==",
       "requires": {
-        "@babel/types": "^7.17.0",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
-        }
+        "@babel/types": "^7.22.3",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jsesc": "^2.5.1"
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
-      "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
+      "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
       "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.18.6"
+      }
+    },
+    "@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.3.tgz",
+      "integrity": "sha512-ahEoxgqNoYXm0k22TvOke48i1PkavGu0qGCmcq9ugi6gnmvKNaMjKBSrZTnWUi1CFEeNAUiVba0Wtzm03aSkJg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.22.3"
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz",
-      "integrity": "sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==",
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.1.tgz",
+      "integrity": "sha512-Rqx13UM3yVB5q0D/KwQ8+SPfX/+Rnsy1Lw1k/UwOC4KC6qrzIQoY3lYnBu5EHKBlEHHcj0M0W8ltPSkD8rqfsQ==",
       "requires": {
-        "@babel/compat-data": "^7.16.4",
-        "@babel/helper-validator-option": "^7.16.7",
-        "browserslist": "^4.17.5",
+        "@babel/compat-data": "^7.22.0",
+        "@babel/helper-validator-option": "^7.21.0",
+        "browserslist": "^4.21.3",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "requires": {
+            "yallist": "^3.0.2"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+        }
+      }
+    },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.1.tgz",
+      "integrity": "sha512-SowrZ9BWzYFgzUMwUmowbPSGu6CXL5MSuuCkG3bejahSpSymioPmuLdhPxNOc9MjuNGjy7M/HaXvJ8G82Lywlw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-member-expression-to-functions": "^7.22.0",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.22.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/helper-split-export-declaration": "^7.18.6",
         "semver": "^6.3.0"
       },
       "dependencies": {
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/helper-create-regexp-features-plugin": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.1.tgz",
+      "integrity": "sha512-WWjdnfR3LPIe+0EY8td7WmjhytxXtjKAEpnAxun/hkNiyOaPlvGK+NZaBFIdi9ndYV3Gav7BpFvtUwnaJlwi1w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "regexpu-core": "^5.3.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/helper-define-polyfill-provider": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.0.tgz",
+      "integrity": "sha512-RnanLx5ETe6aybRi1cO/edaRH+bNYWaryCEmjDDYyNr4wnSzyOp8T0dWipmqVHKEY3AbVKUom50AKSlj1zmKbg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-compilation-targets": "^7.17.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2",
+        "semver": "^6.1.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+          "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
         }
       }
     },
     "@babel/helper-environment-visitor": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
-      "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
-      "requires": {
-        "@babel/types": "^7.16.7"
-      }
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.1.tgz",
+      "integrity": "sha512-Z2tgopurB/kTbidvzeBrc2To3PUP/9i5MUe+fU6QJCQDyPwSH2oRapkLw3KGECDYSjhQZCNxEvNvZlLw8JjGwA=="
     },
     "@babel/helper-function-name": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz",
-      "integrity": "sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+      "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
       "requires": {
-        "@babel/helper-get-function-arity": "^7.16.7",
-        "@babel/template": "^7.16.7",
-        "@babel/types": "^7.16.7"
-      }
-    },
-    "@babel/helper-get-function-arity": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz",
-      "integrity": "sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==",
-      "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/template": "^7.20.7",
+        "@babel/types": "^7.21.0"
       }
     },
     "@babel/helper-hoist-variables": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
-      "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
+      "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
       "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-member-expression-to-functions": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.7.tgz",
-      "integrity": "sha512-VtJ/65tYiU/6AbMTDwyoXGPKHgTsfRarivm+YbB5uAzKUyuPjgZSgAFeG87FCigc7KNHu2Pegh1XIT3lXjvz3Q==",
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.3.tgz",
+      "integrity": "sha512-Gl7sK04b/2WOb6OPVeNy9eFKeD3L6++CzL3ykPOWqTn08xgYYK0wz4TUh2feIImDXxcVW3/9WQ1NMKY66/jfZA==",
       "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.22.3"
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
-      "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz",
+      "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==",
       "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.21.4"
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz",
-      "integrity": "sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==",
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.1.tgz",
+      "integrity": "sha512-dxAe9E7ySDGbQdCVOY/4+UcD8M9ZFqZcZhSPsPacvCG4M+9lwtDDQfI2EoaSvmf7W/8yCBkGU0m7Pvt1ru3UZw==",
       "requires": {
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-module-imports": "^7.16.7",
-        "@babel/helper-simple-access": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/helper-validator-identifier": "^7.16.7",
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-module-imports": "^7.21.4",
+        "@babel/helper-simple-access": "^7.21.5",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/helper-validator-identifier": "^7.19.1",
+        "@babel/template": "^7.21.9",
+        "@babel/traverse": "^7.22.1",
+        "@babel/types": "^7.22.0"
       }
     },
     "@babel/helper-optimise-call-expression": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz",
-      "integrity": "sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz",
+      "integrity": "sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==",
       "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
-      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA=="
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz",
+      "integrity": "sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg=="
+    },
+    "@babel/helper-remap-async-to-generator": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz",
+      "integrity": "sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-wrap-function": "^7.18.9",
+        "@babel/types": "^7.18.9"
+      }
     },
     "@babel/helper-replace-supers": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz",
-      "integrity": "sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==",
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.1.tgz",
+      "integrity": "sha512-ut4qrkE4AuSfrwHSps51ekR1ZY/ygrP1tp0WFm8oVq6nzc/hvfV/22JylndIbsf2U2M9LOMwiSddr6y+78j+OQ==",
       "requires": {
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-member-expression-to-functions": "^7.16.7",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/traverse": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-member-expression-to-functions": "^7.22.0",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/template": "^7.21.9",
+        "@babel/traverse": "^7.22.1",
+        "@babel/types": "^7.22.0"
       }
     },
     "@babel/helper-simple-access": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz",
-      "integrity": "sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==",
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz",
+      "integrity": "sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==",
       "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.21.5"
+      }
+    },
+    "@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
+      "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.20.0"
       }
     },
     "@babel/helper-split-export-declaration": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
-      "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
+      "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
       "requires": {
-        "@babel/types": "^7.16.7"
+        "@babel/types": "^7.18.6"
       }
     },
+    "@babel/helper-string-parser": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz",
+      "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w=="
+    },
     "@babel/helper-validator-identifier": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
-      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw=="
+      "version": "7.19.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
+      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
     },
     "@babel/helper-validator-option": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
-      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ=="
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
+      "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ=="
+    },
+    "@babel/helper-wrap-function": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.20.5.tgz",
+      "integrity": "sha512-bYMxIWK5mh+TgXGVqAtnu5Yn1un+v8DDZtqyzKRLUzrh70Eal2O3aZ7aPYiMADO4uKlkzOiRiZ6GX5q3qxvW9Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "^7.19.0",
+        "@babel/template": "^7.18.10",
+        "@babel/traverse": "^7.20.5",
+        "@babel/types": "^7.20.5"
+      }
     },
     "@babel/helpers": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.0.tgz",
-      "integrity": "sha512-Xe/9NFxjPwELUvW2dsukcMZIp6XwPSbI4ojFBJuX5ramHuVE22SVcZIwqzdWo5uCgeTXW8qV97lMvSOjq+1+nQ==",
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.3.tgz",
+      "integrity": "sha512-jBJ7jWblbgr7r6wYZHMdIqKc73ycaTcCaWRq4/2LpuPHcx7xMlZvpGQkOYc9HeSjn6rcx15CPlgVcBtZ4WZJ2w==",
       "requires": {
-        "@babel/template": "^7.16.7",
-        "@babel/traverse": "^7.17.0",
-        "@babel/types": "^7.17.0"
+        "@babel/template": "^7.21.9",
+        "@babel/traverse": "^7.22.1",
+        "@babel/types": "^7.22.3"
       }
     },
     "@babel/highlight": {
-      "version": "7.16.10",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.10.tgz",
-      "integrity": "sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==",
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
+      "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.16.7",
+        "@babel/helper-validator-identifier": "^7.18.6",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
       }
     },
     "@babel/parser": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.0.tgz",
-      "integrity": "sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw=="
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.4.tgz",
+      "integrity": "sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA=="
+    },
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz",
+      "integrity": "sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.3.tgz",
+      "integrity": "sha512-6r4yRwEnorYByILoDRnEqxtojYKuiIv9FojW2E8GUKo9eWBwbKcd9IiZOZpdyXc64RmyGGyPu3/uAcrz/dq2kQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/plugin-transform-optional-chaining": "^7.22.3"
+      }
+    },
+    "@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.10.tgz",
+      "integrity": "sha512-3YybmT8FN4sZFXp0kTr9Gbu90wAIhC3feNung+qcRQ1wALGoSHgOz1c+fR3ZLGZ0LXqIpYmtE6Faua6tMDarUg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      }
+    },
+    "@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
+      "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      }
+    },
+    "@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      }
+    },
+    "@babel/plugin-syntax-import-assertions": {
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.20.0.tgz",
+      "integrity": "sha512-IUh1vakzNoWalR8ch/areW7qFopR2AEw03JlG7BbrDqmQ4X3q9uuipQwSGrUn7oGiemKjtSLDhNtQHzMHr1JdQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.19.0"
+      }
+    },
+    "@babel/plugin-syntax-import-attributes": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.3.tgz",
+      "integrity": "sha512-i35jZJv6aO7hxEbIWQ41adVfOzjm9dcYDNeWlBMd8p0ZQRtNUCBrmGwZt+H5lb+oOC9a3svp956KP0oWGA1YsA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      }
+    },
+    "@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
+    },
+    "@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      }
+    },
+    "@babel/plugin-syntax-unicode-sets-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-arrow-functions": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.21.5.tgz",
+      "integrity": "sha512-wb1mhwGOCaXHDTcsRYMKF9e5bbMgqwxtqa2Y1ifH96dXJPwbuLX9qHy3clhrxVqgMz7nyNXs8VkxdH8UBcjKqA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      }
+    },
+    "@babel/plugin-transform-async-generator-functions": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.3.tgz",
+      "integrity": "sha512-36A4Aq48t66btydbZd5Fk0/xJqbpg/v4QWI4AH4cYHBXy9Mu42UOupZpebKFiCFNT9S9rJFcsld0gsv0ayLjtA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-remap-async-to-generator": "^7.18.9",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      }
+    },
+    "@babel/plugin-transform-async-to-generator": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz",
+      "integrity": "sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-remap-async-to-generator": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz",
+      "integrity": "sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-block-scoping": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz",
+      "integrity": "sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.20.2"
+      }
+    },
+    "@babel/plugin-transform-class-properties": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.3.tgz",
+      "integrity": "sha512-mASLsd6rhOrLZ5F3WbCxkzl67mmOnqik0zrg5W6D/X0QMW7HtvnoL1dRARLKIbMP3vXwkwziuLesPqWVGIl6Bw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      }
+    },
+    "@babel/plugin-transform-class-static-block": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.3.tgz",
+      "integrity": "sha512-5BirgNWNOx7cwbTJCOmKFJ1pZjwk5MUfMIwiBBvsirCJMZeQgs5pk6i1OlkVg+1Vef5LfBahFOrdCnAWvkVKMw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      }
     },
     "@babel/plugin-transform-classes": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz",
-      "integrity": "sha512-WY7og38SFAGYRe64BrjKf8OrE6ulEHtr5jEYaZMwox9KebgqPi67Zqz8K53EKk1fFEJgm96r32rkKZ3qA2nCWQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz",
+      "integrity": "sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.16.7",
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/helper-optimise-call-expression": "^7.16.7",
-        "@babel/helper-plugin-utils": "^7.16.7",
-        "@babel/helper-replace-supers": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-environment-visitor": "^7.18.9",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-optimise-call-expression": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-replace-supers": "^7.20.7",
+        "@babel/helper-split-export-declaration": "^7.18.6",
         "globals": "^11.1.0"
       }
     },
-    "@babel/template": {
-      "version": "7.16.7",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
-      "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
+    "@babel/plugin-transform-computed-properties": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.21.5.tgz",
+      "integrity": "sha512-TR653Ki3pAwxBxUe8srfF3e4Pe3FTA46uaNHYyQwIoM4oWKSoOZiDNyHJ0oIoDIUPSRQbQG7jzgVBX3FPVne1Q==",
+      "dev": true,
       "requires": {
-        "@babel/code-frame": "^7.16.7",
-        "@babel/parser": "^7.16.7",
-        "@babel/types": "^7.16.7"
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/template": "^7.20.7"
+      }
+    },
+    "@babel/plugin-transform-destructuring": {
+      "version": "7.21.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz",
+      "integrity": "sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.20.2"
+      }
+    },
+    "@babel/plugin-transform-dotall-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz",
+      "integrity": "sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-duplicate-keys": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz",
+      "integrity": "sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-dynamic-import": {
+      "version": "7.22.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.1.tgz",
+      "integrity": "sha512-rlhWtONnVBPdmt+jeewS0qSnMz/3yLFrqAP8hHC6EDcrYRSyuz9f9yQhHvVn2Ad6+yO9fHXac5piudeYrInxwQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz",
+      "integrity": "sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-export-namespace-from": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.3.tgz",
+      "integrity": "sha512-5Ti1cHLTDnt3vX61P9KZ5IG09bFXp4cDVFJIAeCZuxu9OXXJJZp5iP0n/rzM2+iAutJY+KWEyyHcRaHlpQ/P5g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-for-of": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.5.tgz",
+      "integrity": "sha512-nYWpjKW/7j/I/mZkGVgHJXh4bA1sfdFnJoOXwJuj4m3Q2EraO/8ZyrkCau9P5tbHQk01RMSt6KYLCsW7730SXQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      }
+    },
+    "@babel/plugin-transform-function-name": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz",
+      "integrity": "sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-compilation-targets": "^7.18.9",
+        "@babel/helper-function-name": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-json-strings": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.3.tgz",
+      "integrity": "sha512-IuvOMdeOOY2X4hRNAT6kwbePtK21BUyrAEgLKviL8pL6AEEVUVcqtRdN/HJXBLGIbt9T3ETmXRnFedRRmQNTYw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-literals": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz",
+      "integrity": "sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.3.tgz",
+      "integrity": "sha512-CbayIfOw4av2v/HYZEsH+Klks3NC2/MFIR3QR8gnpGNNPEaq2fdlVCRYG/paKs7/5hvBLQ+H70pGWOHtlNEWNA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-member-expression-literals": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz",
+      "integrity": "sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-modules-amd": {
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz",
+      "integrity": "sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2"
+      }
+    },
+    "@babel/plugin-transform-modules-commonjs": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.5.tgz",
+      "integrity": "sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.21.5",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-simple-access": "^7.21.5"
+      }
+    },
+    "@babel/plugin-transform-modules-systemjs": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.3.tgz",
+      "integrity": "sha512-V21W3bKLxO3ZjcBJZ8biSvo5gQ85uIXW2vJfh7JSWf/4SLUSr1tOoHX3ruN4+Oqa2m+BKfsxTR1I+PsvkIWvNw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-module-transforms": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-validator-identifier": "^7.19.1"
+      }
+    },
+    "@babel/plugin-transform-modules-umd": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz",
+      "integrity": "sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.3.tgz",
+      "integrity": "sha512-c6HrD/LpUdNNJsISQZpds3TXvfYIAbo+efE9aWmY/PmSRD0agrJ9cPMt4BmArwUQ7ZymEWTFjTyp+yReLJZh0Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      }
+    },
+    "@babel/plugin-transform-new-target": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.3.tgz",
+      "integrity": "sha512-5RuJdSo89wKdkRTqtM9RVVJzHum9c2s0te9rB7vZC1zKKxcioWIy+xcu4OoIAjyFZhb/bp5KkunuLin1q7Ct+w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      }
+    },
+    "@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.3.tgz",
+      "integrity": "sha512-CpaoNp16nX7ROtLONNuCyenYdY/l7ZsR6aoVa7rW7nMWisoNoQNIH5Iay/4LDyRjKMuElMqXiBoOQCDLTMGZiw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-numeric-separator": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.3.tgz",
+      "integrity": "sha512-+AF88fPDJrnseMh5vD9+SH6wq4ZMvpiTMHh58uLs+giMEyASFVhcT3NkoyO+NebFCNnpHJEq5AXO2txV4AGPDQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      }
+    },
+    "@babel/plugin-transform-object-rest-spread": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.3.tgz",
+      "integrity": "sha512-38bzTsqMMCI46/TQnJwPPpy33EjLCc1Gsm2hRTF6zTMWnKsN61vdrpuzIEGQyKEhDSYDKyZHrrd5FMj4gcUHhw==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.22.3",
+        "@babel/helper-compilation-targets": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.22.3"
+      }
+    },
+    "@babel/plugin-transform-object-super": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz",
+      "integrity": "sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-replace-supers": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.3.tgz",
+      "integrity": "sha512-bnDFWXFzWY0BsOyqaoSXvMQ2F35zutQipugog/rqotL2S4ciFOKlRYUu9djt4iq09oh2/34hqfRR2k1dIvuu4g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-optional-chaining": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.3.tgz",
+      "integrity": "sha512-63v3/UFFxhPKT8j8u1jTTGVyITxl7/7AfOqK8C5gz1rHURPUGe3y5mvIf68eYKGoBNahtJnTxBKug4BQOnzeJg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      }
+    },
+    "@babel/plugin-transform-parameters": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.3.tgz",
+      "integrity": "sha512-x7QHQJHPuD9VmfpzboyGJ5aHEr9r7DsAsdxdhJiTB3J3j8dyl+NFZ+rX5Q2RWFDCs61c06qBfS4ys2QYn8UkMw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      }
+    },
+    "@babel/plugin-transform-private-methods": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.3.tgz",
+      "integrity": "sha512-fC7jtjBPFqhqpPAE+O4LKwnLq7gGkD3ZmC2E3i4qWH34mH3gOg2Xrq5YMHUq6DM30xhqM1DNftiRaSqVjEG+ug==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      }
+    },
+    "@babel/plugin-transform-private-property-in-object": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.3.tgz",
+      "integrity": "sha512-C7MMl4qWLpgVCbXfj3UW8rR1xeCnisQ0cU7YJHV//8oNBS0aCIVg1vFnZXxOckHhEpQyqNNkWmvSEWnMLlc+Vw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      }
+    },
+    "@babel/plugin-transform-property-literals": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz",
+      "integrity": "sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-regenerator": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.21.5.tgz",
+      "integrity": "sha512-ZoYBKDb6LyMi5yCsByQ5jmXsHAQDDYeexT1Szvlmui+lADvfSecr5Dxd/PkrTC3pAD182Fcju1VQkB4oCp9M+w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "regenerator-transform": "^0.15.1"
+      }
+    },
+    "@babel/plugin-transform-reserved-words": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz",
+      "integrity": "sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-shorthand-properties": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz",
+      "integrity": "sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-spread": {
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz",
+      "integrity": "sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0"
+      }
+    },
+    "@babel/plugin-transform-sticky-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz",
+      "integrity": "sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-template-literals": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz",
+      "integrity": "sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-typeof-symbol": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz",
+      "integrity": "sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.18.9"
+      }
+    },
+    "@babel/plugin-transform-unicode-escapes": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.21.5.tgz",
+      "integrity": "sha512-LYm/gTOwZqsYohlvFUe/8Tujz75LqqVC2w+2qPHLR+WyWHGCZPN1KBpJCJn+4Bk4gOkQy/IXKIge6az5MqwlOg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.21.5"
+      }
+    },
+    "@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.3.tgz",
+      "integrity": "sha512-5ScJ+OmdX+O6HRuMGW4kv7RL9vIKdtdAj9wuWUKy1wbHY3jaM/UlyIiC1G7J6UJiiyMukjjK0QwL3P0vBd0yYg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      }
+    },
+    "@babel/plugin-transform-unicode-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz",
+      "integrity": "sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      }
+    },
+    "@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.3.tgz",
+      "integrity": "sha512-hNufLdkF8vqywRp+P55j4FHXqAX2LRUccoZHH7AFn1pq5ZOO2ISKW9w13bFZVjBoTqeve2HOgoJCcaziJVhGNw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5"
+      }
+    },
+    "@babel/preset-env": {
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.4.tgz",
+      "integrity": "sha512-c3lHOjbwBv0TkhYCr+XCR6wKcSZ1QbQTVdSkZUaVpLv8CVWotBMArWUi5UAJrcrQaEnleVkkvaV8F/pmc/STZQ==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.22.3",
+        "@babel/helper-compilation-targets": "^7.22.1",
+        "@babel/helper-plugin-utils": "^7.21.5",
+        "@babel/helper-validator-option": "^7.21.0",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.22.3",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-import-assertions": "^7.20.0",
+        "@babel/plugin-syntax-import-attributes": "^7.22.3",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.21.5",
+        "@babel/plugin-transform-async-generator-functions": "^7.22.3",
+        "@babel/plugin-transform-async-to-generator": "^7.20.7",
+        "@babel/plugin-transform-block-scoped-functions": "^7.18.6",
+        "@babel/plugin-transform-block-scoping": "^7.21.0",
+        "@babel/plugin-transform-class-properties": "^7.22.3",
+        "@babel/plugin-transform-class-static-block": "^7.22.3",
+        "@babel/plugin-transform-classes": "^7.21.0",
+        "@babel/plugin-transform-computed-properties": "^7.21.5",
+        "@babel/plugin-transform-destructuring": "^7.21.3",
+        "@babel/plugin-transform-dotall-regex": "^7.18.6",
+        "@babel/plugin-transform-duplicate-keys": "^7.18.9",
+        "@babel/plugin-transform-dynamic-import": "^7.22.1",
+        "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
+        "@babel/plugin-transform-export-namespace-from": "^7.22.3",
+        "@babel/plugin-transform-for-of": "^7.21.5",
+        "@babel/plugin-transform-function-name": "^7.18.9",
+        "@babel/plugin-transform-json-strings": "^7.22.3",
+        "@babel/plugin-transform-literals": "^7.18.9",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.22.3",
+        "@babel/plugin-transform-member-expression-literals": "^7.18.6",
+        "@babel/plugin-transform-modules-amd": "^7.20.11",
+        "@babel/plugin-transform-modules-commonjs": "^7.21.5",
+        "@babel/plugin-transform-modules-systemjs": "^7.22.3",
+        "@babel/plugin-transform-modules-umd": "^7.18.6",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.3",
+        "@babel/plugin-transform-new-target": "^7.22.3",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.22.3",
+        "@babel/plugin-transform-numeric-separator": "^7.22.3",
+        "@babel/plugin-transform-object-rest-spread": "^7.22.3",
+        "@babel/plugin-transform-object-super": "^7.18.6",
+        "@babel/plugin-transform-optional-catch-binding": "^7.22.3",
+        "@babel/plugin-transform-optional-chaining": "^7.22.3",
+        "@babel/plugin-transform-parameters": "^7.22.3",
+        "@babel/plugin-transform-private-methods": "^7.22.3",
+        "@babel/plugin-transform-private-property-in-object": "^7.22.3",
+        "@babel/plugin-transform-property-literals": "^7.18.6",
+        "@babel/plugin-transform-regenerator": "^7.21.5",
+        "@babel/plugin-transform-reserved-words": "^7.18.6",
+        "@babel/plugin-transform-shorthand-properties": "^7.18.6",
+        "@babel/plugin-transform-spread": "^7.20.7",
+        "@babel/plugin-transform-sticky-regex": "^7.18.6",
+        "@babel/plugin-transform-template-literals": "^7.18.9",
+        "@babel/plugin-transform-typeof-symbol": "^7.18.9",
+        "@babel/plugin-transform-unicode-escapes": "^7.21.5",
+        "@babel/plugin-transform-unicode-property-regex": "^7.22.3",
+        "@babel/plugin-transform-unicode-regex": "^7.18.6",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.22.3",
+        "@babel/preset-modules": "^0.1.5",
+        "@babel/types": "^7.22.4",
+        "babel-plugin-polyfill-corejs2": "^0.4.3",
+        "babel-plugin-polyfill-corejs3": "^0.8.1",
+        "babel-plugin-polyfill-regenerator": "^0.5.0",
+        "core-js-compat": "^3.30.2",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/preset-modules": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
+      "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      }
+    },
+    "@babel/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==",
+      "dev": true
+    },
+    "@babel/runtime": {
+      "version": "7.22.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz",
+      "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==",
+      "dev": true,
+      "requires": {
+        "regenerator-runtime": "^0.13.11"
+      }
+    },
+    "@babel/template": {
+      "version": "7.21.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.21.9.tgz",
+      "integrity": "sha512-MK0X5k8NKOuWRamiEfc3KEJiHMTkGZNUjzMipqCGDDc6ijRl/B7RGSKVGncu4Ro/HdyzzY6cmoXuKI2Gffk7vQ==",
+      "requires": {
+        "@babel/code-frame": "^7.21.4",
+        "@babel/parser": "^7.21.9",
+        "@babel/types": "^7.21.5"
       }
     },
     "@babel/traverse": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.0.tgz",
-      "integrity": "sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg==",
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.4.tgz",
+      "integrity": "sha512-Tn1pDsjIcI+JcLKq1AVlZEr4226gpuAQTsLMorsYg9tuS/kG7nuwwJ4AB8jfQuEgb/COBwR/DqJxmoiYFu5/rQ==",
       "requires": {
-        "@babel/code-frame": "^7.16.7",
-        "@babel/generator": "^7.17.0",
-        "@babel/helper-environment-visitor": "^7.16.7",
-        "@babel/helper-function-name": "^7.16.7",
-        "@babel/helper-hoist-variables": "^7.16.7",
-        "@babel/helper-split-export-declaration": "^7.16.7",
-        "@babel/parser": "^7.17.0",
-        "@babel/types": "^7.17.0",
+        "@babel/code-frame": "^7.21.4",
+        "@babel/generator": "^7.22.3",
+        "@babel/helper-environment-visitor": "^7.22.1",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-hoist-variables": "^7.18.6",
+        "@babel/helper-split-export-declaration": "^7.18.6",
+        "@babel/parser": "^7.22.4",
+        "@babel/types": "^7.22.4",
         "debug": "^4.1.0",
         "globals": "^11.1.0"
       },
@@ -5678,11 +8453,12 @@
       }
     },
     "@babel/types": {
-      "version": "7.17.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz",
-      "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==",
+      "version": "7.22.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.4.tgz",
+      "integrity": "sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.16.7",
+        "@babel/helper-string-parser": "^7.21.5",
+        "@babel/helper-validator-identifier": "^7.19.1",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -5717,25 +8493,47 @@
         }
       }
     },
+    "@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "requires": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
     "@jridgewell/resolve-uri": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.4.tgz",
-      "integrity": "sha512-cz8HFjOFfUBtvN+NXYSFMHYRdxZMaEl0XypVrhzxBgadKIXhIkRd8aMeHhmF56Sl7SuS8OnUpQ73/k9LE4VnLg=="
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w=="
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw=="
     },
     "@jridgewell/sourcemap-codec": {
-      "version": "1.4.10",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.10.tgz",
-      "integrity": "sha512-Ht8wIW5v165atIX1p+JvKR5ONzUyF4Ac8DZIQ5kZs9zrb6M8SJNXpx1zn04rn65VjBMygRoMXcyYwNK0fT7bEg=="
+      "version": "1.4.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
     "@jridgewell/trace-mapping": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.2.tgz",
-      "integrity": "sha512-9KzzH4kMjA2XmBRHfqG2/Vtl7s92l6uNDd0wW7frDE+EUvQFGqNXhWp0UGJjSkt3v2AYjzOZn1QO9XaTNJIt1Q==",
+      "version": "0.3.18",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
+      "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
       "requires": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "3.1.0",
+        "@jridgewell/sourcemap-codec": "1.4.14"
       }
     },
+    "@nicolo-ribaudo/chokidar-2": {
+      "version": "2.1.8-no-fsevents.3",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
+      "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==",
+      "dev": true,
+      "optional": true
+    },
     "@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -5799,6 +8597,17 @@
       "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.3.2.tgz",
       "integrity": "sha512-QXu7BPrP29VllRxH8GwB7x5iX5qWKAAMLqKQGWTeLWVlNHNOpVMJ91dsxQAIWXpjuW5wqvxu3Jd/nRjrJ+0pqg=="
     },
+    "anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
     "applause": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/applause/-/applause-2.0.4.tgz",
@@ -5946,6 +8755,44 @@
       "resolved": "https://registry.npmjs.org/autonumeric/-/autonumeric-4.6.0.tgz",
       "integrity": "sha512-bYnD2oD9UMZBTxSWcvXH1MTcp0w+CUBfXe4HI1QJLGzJu+O27Ny5gqzRcFuDsZB9jrZ5SJjqAG0PieJsaUdTcg=="
     },
+    "babel-plugin-polyfill-corejs2": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.3.tgz",
+      "integrity": "sha512-bM3gHc337Dta490gg+/AseNB9L4YLHxq1nGKZZSHbhXv4aTYU2MD2cjza1Ru4S6975YLTaL1K8uJf6ukJhhmtw==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.17.7",
+        "@babel/helper-define-polyfill-provider": "^0.4.0",
+        "semver": "^6.1.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "babel-plugin-polyfill-corejs3": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.1.tgz",
+      "integrity": "sha512-ikFrZITKg1xH6pLND8zT14UPgjKHiGLqex7rGEZCH2EvhsneJaJPemmpQaIZV5AL03II+lXylw3UmddDK8RU5Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.4.0",
+        "core-js-compat": "^3.30.1"
+      }
+    },
+    "babel-plugin-polyfill-regenerator": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.0.tgz",
+      "integrity": "sha512-hDJtKjMLVa7Z+LwnTCxoDLQj6wdc+B8dun7ayF2fYieI6OzfuvcLMB32ihJZ4UhCBwNYGl5bg/x/P9cMdnkc2g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-define-polyfill-provider": "^0.4.0"
+      }
+    },
     "backbone": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/backbone/-/backbone-1.3.3.tgz",
@@ -5965,6 +8812,13 @@
       "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
       "dev": true
     },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "optional": true
+    },
     "bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -6065,15 +8919,14 @@
       }
     },
     "browserslist": {
-      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
-      "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
+      "version": "4.21.7",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.7.tgz",
+      "integrity": "sha512-BauCXrQ7I2ftSqd2mvKHGo85XR0u7Ru3C/Hxsy/0TkfCtjrmAbPdzLGasmoiBxplpDXlPvdjX9u7srIMfgasNA==",
       "requires": {
-        "caniuse-lite": "^1.0.30001286",
-        "electron-to-chromium": "^1.4.17",
-        "escalade": "^3.1.1",
-        "node-releases": "^2.0.1",
-        "picocolors": "^1.0.0"
+        "caniuse-lite": "^1.0.30001489",
+        "electron-to-chromium": "^1.4.411",
+        "node-releases": "^2.0.12",
+        "update-browserslist-db": "^1.0.11"
       }
     },
     "buffer": {
@@ -6093,8 +8946,8 @@
       "dev": true
     },
     "bullbone": {
-      "version": "git+ssh://git@github.com/yurikuzn/bull.git#f6a89d5c488953ab89ca7dff4c3ff1107eb71d62",
-      "from": "bullbone@github:yurikuzn/bull#1.1.1"
+      "version": "git+ssh://git@github.com/yurikuzn/bull.git#f20d6c7c9960f73073f813829a9d72e1eed85f54",
+      "from": "bullbone@github:yurikuzn/bull#1.1.2"
     },
     "bytes": {
       "version": "3.1.2",
@@ -6113,9 +8966,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001309",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001309.tgz",
-      "integrity": "sha512-Pl8vfigmBXXq+/yUz1jUwULeq9xhMJznzdc/xwl4WclDAuebcTHVefpz8lE/bMI+UN7TOkSSe7B7RnZd6+dzjA=="
+      "version": "1.0.30001494",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001494.tgz",
+      "integrity": "sha512-sY2B5Qyl46ZzfYDegrl8GBCzdawSLT4ThM9b9F+aDYUrAG2zCOyMbd2Tq34mS1g4ZKBfjRlzOohQMxx28x6wJg=="
     },
     "cardinal": {
       "version": "2.1.1",
@@ -6136,6 +8989,23 @@
         "supports-color": "^5.3.0"
       }
     },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      }
+    },
     "chownr": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -6176,6 +9046,12 @@
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
       "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM="
     },
+    "commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true
+    },
     "compress-commons": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.1.tgz",
@@ -6258,6 +9134,15 @@
         "is-what": "^3.14.1"
       }
     },
+    "core-js-compat": {
+      "version": "3.30.2",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.30.2.tgz",
+      "integrity": "sha512-nriW1nuJjUgvkEjIot1Spwakz52V9YkYHZAQG6A1eCgC8AA1p0zngrQEP9R0+V6hji5XilWKG1Bd0YRppmGimA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.21.5"
+      }
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -6421,9 +9306,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.66",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.66.tgz",
-      "integrity": "sha512-f1RXFMsvwufWLwYUxTiP7HmjprKXrqEWHiQkjAYa9DJeVIlZk5v8gBGcaV+FhtXLly6C1OTVzQY+2UQrACiLlg=="
+      "version": "1.4.419",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.419.tgz",
+      "integrity": "sha512-jdie3RiEgygvDTyS2sgjq71B36q2cDSBfPlwzUyuOrfYTNoYWyBxxjGJV/HAu3A2hB0Y+HesvCVkVAFoCKwCSw=="
     },
     "emitter-component": {
       "version": "1.1.1",
@@ -6497,6 +9382,12 @@
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true
+    },
     "etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -6777,11 +9668,24 @@
         "minipass": "^3.0.0"
       }
     },
+    "fs-readdir-recursive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
+      "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==",
+      "dev": true
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
     "fstream": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
@@ -6865,6 +9769,16 @@
         }
       }
     },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
     "global-modules": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
@@ -7627,6 +10541,16 @@
         "is-windows": "^1.0.1"
       }
     },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
     "is-core-module": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.1.0.tgz",
@@ -7996,6 +10920,12 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true
+    },
     "lodash.defaults": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@@ -8037,7 +10967,6 @@
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
       "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
       "dev": true,
-      "optional": true,
       "requires": {
         "pify": "^4.0.1",
         "semver": "^5.6.0"
@@ -8277,9 +11206,9 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
     },
     "node-releases": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
-      "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA=="
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz",
+      "integrity": "sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ=="
     },
     "nopt": {
       "version": "3.0.6",
@@ -8608,6 +11537,16 @@
         "minimatch": "^3.0.4"
       }
     },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
     "redeyed": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/redeyed/-/redeyed-2.1.1.tgz",
@@ -8616,6 +11555,67 @@
         "esprima": "~4.0.0"
       }
     },
+    "regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true
+    },
+    "regenerate-unicode-properties": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+      "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
+      "dev": true,
+      "requires": {
+        "regenerate": "^1.4.2"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "dev": true
+    },
+    "regenerator-transform": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz",
+      "integrity": "sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "regexpu-core": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+      "dev": true,
+      "requires": {
+        "@babel/regjsgen": "^0.8.0",
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsparser": "^0.9.1",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.1.0"
+      }
+    },
+    "regjsparser": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+      "dev": true,
+      "requires": {
+        "jsesc": "~0.5.0"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+          "dev": true
+        }
+      }
+    },
     "require-at": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/require-at/-/require-at-1.0.6.tgz",
@@ -8715,8 +11715,7 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "send": {
       "version": "0.18.0",
@@ -8823,6 +11822,12 @@
       "integrity": "sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==",
       "dev": true
     },
+    "slash": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+      "dev": true
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -9114,12 +12119,49 @@
         "util-deprecate": "^1.0.2"
       }
     },
+    "unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+      "dev": true
+    },
+    "unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "dev": true,
+      "requires": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      }
+    },
+    "unicode-match-property-value-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
+      "dev": true
+    },
+    "unicode-property-aliases-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+      "dev": true
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
       "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
       "dev": true
     },
+    "update-browserslist-db": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
+      "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
+      "requires": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      }
+    },
     "uri-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/uri-path/-/uri-path-1.0.0.tgz",
diff --git a/package.json b/package.json
index af16edc1b9..339c5324db 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,10 @@
   "author": "Yurii Kuznietsov, Taras Machyshyn, Oleksii Avramenko",
   "license": "GPL-3.0",
   "devDependencies": {
+    "@babel/cli": "^7.21.5",
+    "@babel/core": "^7.22.1",
+    "@babel/plugin-transform-modules-amd": "^7.20.11",
+    "@babel/preset-env": "^7.22.4",
     "archiver": "^5.3.0",
     "fstream": ">=1.0.12",
     "glob": "^10.2.6",
@@ -43,7 +47,7 @@
     "bootstrap": "^3.4.1",
     "bootstrap-colorpicker": "^2.5.2",
     "bootstrap-datepicker": "^1.9.0",
-    "bullbone": "github:yurikuzn/bull#1.1.1",
+    "bullbone": "github:yurikuzn/bull#1.1.2",
     "cronstrue": "^1.114.0",
     "cropper": "^0.7.9",
     "devbridge-autocomplete": "^1.4.11",