diff --git a/client/src/views/fields/link-multiple-with-columns.js b/client/src/views/fields/link-multiple-with-columns.js
index 1e0e833ceb..4ef2088daa 100644
--- a/client/src/views/fields/link-multiple-with-columns.js
+++ b/client/src/views/fields/link-multiple-with-columns.js
@@ -26,651 +26,615 @@
  * these Appropriate Legal Notices must retain the display of the "EspoCRM" word.
  ************************************************************************/
 
-define('views/fields/link-multiple-with-columns',
-['views/fields/link-multiple', 'helpers/reg-exp-pattern', 'ui/select'],
-function (Dep, RegExpPattern, /** module:ui/select*/Select) {
+/** @module views/fields/link-multiple-with-columns */
+
+import LinkMultipleFieldView from 'views/fields/link-multiple';
+import RegExpPattern from 'helpers/reg-exp-pattern';
+import Select from 'ui/select';
+
+/**
+ * A link-multiple field with relation column(s).
+ */
+class LinkMultipleWithColumnsFieldView extends LinkMultipleFieldView {
+
+    /** @const */
+    COLUMN_TYPE_VARCHAR = 'varchar'
+     /** @const */
+    COLUMN_TYPE_ENUM = 'enum'
+     /** @const */
+    COLUMN_TYPE_BOOL = 'bool'
+
+    /** @inheritDoc */
+    setup() {
+        super.setup();
+
+        let columnsDefsInitial = this.columnsDefs || {};
+
+        this.validations.push('columnPattern');
+
+        /**
+         * @type {Object.<string,*>}
+         */
+        this.columnsDefs = {};
+        this.columnsName = this.name + 'Columns';
+        this.columns = Espo.Utils.cloneDeep(this.model.get(this.columnsName) || {});
+
+        this.listenTo(this.model, 'change:' + this.columnsName, () => {
+            this.columns = Espo.Utils.cloneDeep(this.model.get(this.columnsName) || {});
+        });
+
+        let columns = this.getMetadata()
+            .get(['entityDefs', this.model.entityType, 'fields', this.name, 'columns']) || {};
+
+        /** @type {string[]} */
+        this.columnList = this.columnList || Object.keys(columns);
+
+        this.columnList.forEach(column => {
+            if (column in columnsDefsInitial) {
+                this.columnsDefs[column] = Espo.Utils.cloneDeep(columnsDefsInitial[column]);
+
+                return;
+            }
+
+            if (column in columns) {
+                let field = columns[column];
+
+                let o = {};
+
+                o.field = field;
+                o.scope = this.foreignScope;
+
+                if (
+                    !this.getMetadata().get(['entityDefs', this.foreignScope, 'fields', field, 'type']) &&
+                    this.getMetadata().get(['entityDefs', this.model.entityType, 'fields', field, 'type'])
+                ) {
+                    o.scope = this.model.entityType;
+                }
+
+                let fieldDefs = this.getMetadata().get(['entityDefs', o.scope, 'fields', field]) || {};
+
+                o.type = fieldDefs.type;
+
+                if (o.type === this.COLUMN_TYPE_ENUM || o.type === this.COLUMN_TYPE_VARCHAR) {
+                    o.options = fieldDefs.options;
+                }
+
+                if ('default' in fieldDefs) {
+                    o.default = fieldDefs.default;
+                }
+
+                if ('maxLength' in fieldDefs) {
+                    o.maxLength = fieldDefs.maxLength;
+                }
+
+                if ('pattern' in fieldDefs) {
+                    o.pattern = fieldDefs.pattern;
+                }
+
+                this.columnsDefs[column] = o;
+            }
+        });
+
+        if (this.isEditMode() || this.isDetailMode()) {
+            this.events['click a[data-action="toggleBoolColumn"]'] = (e) => {
+                let id = $(e.currentTarget).data('id');
+                let column = $(e.currentTarget).data('column');
+
+                this.toggleBoolColumn(id, column);
+            };
+        }
+
+        this.on('render', this.disposeColumnAutocompletes, this);
+        this.once('remove', this.disposeColumnAutocompletes, this);
+    }
+
+    toggleBoolColumn(id, column) {
+        this.columns[id][column] = !this.columns[id][column];
+
+        this.reRender();
+    }
+
+    /** @inheritDoc */
+    getAttributeList() {
+        return [
+            ...super.getAttributeList(),
+            this.name + 'Columns'
+        ];
+    }
 
     /**
-     * A link-multiple field with relation column(s).
+     * Get an item HTML for detail mode.
      *
-     * @class
-     * @name Class
-     * @extends module:views/fields/link-multiple.Class
-     * @memberOf module:views/fields/link-multiple-with-columns
+     * @param {string} id An ID.
+     * @param {string} [name] An name.
+     * @return {string}
      */
-    return Dep.extend(/** @lends module:views/fields/link-multiple-with-columns.Class# */{
+    getDetailLinkHtml(id, name) {
+        // Do not use the `html` method to avoid XSS.
 
-        /**
-         * @const
-         */
-        COLUMN_TYPE_VARCHAR: 'varchar',
+        name = name || this.nameHash[id] || id;
 
-        /**
-         * @const
-         */
-        COLUMN_TYPE_ENUM: 'enum',
+        let $el = $('<div>')
+            .append(
+                $('<a>')
+                    .attr('href', '#' + this.foreignScope + '/view/' + id)
+                    .attr('data-id', id)
+                    .text(name)
+            );
 
-        /**
-         * @const
-         */
-        COLUMN_TYPE_BOOL: 'bool',
+        if (this.isDetailMode()) {
+            let iconHtml = this.getIconHtml(id);
 
-        /**
-         * @inheritDoc
-         */
-        setup: function () {
-            Dep.prototype.setup.call(this);
+            if (iconHtml) {
+                $el.prepend(iconHtml);
+            }
+        }
 
-            let columnsDefsInitial = this.columnsDefs || {};
+        this.columnList.forEach(column => {
+            let value = (this.columns[id] || {})[column] || '';
+            let type = this.columnsDefs[column].type;
+            let field = this.columnsDefs[column].field;
+            let scope = this.columnsDefs[column].scope;
 
-            this.validations.push('columnPattern');
+            if (value === '' || !value) {
+                return;
+            }
 
-            /**
-             * @type {Object.<string,*>}
-             */
-            this.columnsDefs = {};
-            this.columnsName = this.name + 'Columns';
-            this.columns = Espo.Utils.cloneDeep(this.model.get(this.columnsName) || {});
+            if (type !== this.COLUMN_TYPE_ENUM && type !== this.COLUMN_TYPE_VARCHAR) {
+                return;
+            }
 
-            this.listenTo(this.model, 'change:' + this.columnsName, () => {
-                this.columns = Espo.Utils.cloneDeep(this.model.get(this.columnsName) || {});
+            let text = type === this.COLUMN_TYPE_ENUM ?
+                this.getLanguage().translateOption(value, field, scope) :
+                value;
+
+            $el.append(
+                $('<span>').text(' '),
+                $('<span>').addClass('text-muted chevron-right'),
+                $('<span>').text(' '),
+                $('<span>').text(text).addClass('text-muted small')
+            );
+        });
+
+        return $el.get(0).outerHTML;
+    }
+
+    /** @inheritDoc */
+    getValueForDisplay() {
+        if (this.isDetailMode() || this.isListMode()) {
+            let itemList = [];
+
+            this.ids.forEach(id => {
+                itemList.push(
+                    this.getDetailLinkHtml(id)
+                );
             });
 
-            let columns = this.getMetadata()
-                .get(['entityDefs', this.model.entityType, 'fields', this.name, 'columns']) || {};
+            return itemList.join('');
+        }
+    }
 
-            /** @type {string[]} */
-            this.columnList = this.columnList || Object.keys(columns);
+    /** @inheritDoc */
+    deleteLink(id) {
+        this.trigger('delete-link', id);
+        this.trigger('delete-link:' + id);
+
+        this.deleteLinkHtml(id);
+
+        let index = this.ids.indexOf(id);
+
+        if (index > -1) {
+            this.ids.splice(index, 1);
+        }
+
+        delete this.nameHash[id];
+        delete this.columns[id];
+
+        this.afterDeleteLink(id);
+
+        this.trigger('change');
+    }
+
+    /**
+     * Get a column values.
+     *
+     * @param {string} id An ID.
+     * @param {string} column A column.
+     * @return {*}
+     */
+    getColumnValue(id, column) {
+        return (this.columns[id] || {})[column];
+    }
+
+    addLink(id, name) {
+        if (!~this.ids.indexOf(id)) {
+            this.ids.push(id);
+            this.nameHash[id] = name;
+            this.columns[id] = {};
 
             this.columnList.forEach(column => {
-                if (column in columnsDefsInitial) {
-                    this.columnsDefs[column] = Espo.Utils.cloneDeep(columnsDefsInitial[column]);
+                this.columns[id][column] = null;
 
-                    return;
-                }
-
-                if (column in columns) {
-                    let field = columns[column];
-
-                    let o = {};
-
-                    o.field = field;
-                    o.scope = this.foreignScope;
-
-                    if (
-                        !this.getMetadata().get(['entityDefs', this.foreignScope, 'fields', field, 'type']) &&
-                        this.getMetadata().get(['entityDefs', this.model.entityType, 'fields', field, 'type'])
-                    ) {
-                        o.scope = this.model.entityType;
-                    }
-
-                    let fieldDefs = this.getMetadata().get(['entityDefs', o.scope, 'fields', field]) || {};
-
-                    o.type = fieldDefs.type;
-
-                    if (o.type === this.COLUMN_TYPE_ENUM || o.type === this.COLUMN_TYPE_VARCHAR) {
-                        o.options = fieldDefs.options;
-                    }
-
-                    if ('default' in fieldDefs) {
-                        o.default = fieldDefs.default;
-                    }
-
-                    if ('maxLength' in fieldDefs) {
-                        o.maxLength = fieldDefs.maxLength;
-                    }
-
-                    if ('pattern' in fieldDefs) {
-                        o.pattern = fieldDefs.pattern;
-                    }
-
-                    this.columnsDefs[column] = o;
+                if ('default' in this.columnsDefs[column]) {
+                    this.columns[id][column] = this.columnsDefs[column].default;
                 }
             });
 
-            if (this.isEditMode() || this.isDetailMode()) {
-                this.events['click a[data-action="toggleBoolColumn"]'] = (e) => {
-                    let id = $(e.currentTarget).data('id');
-                    let column = $(e.currentTarget).data('column');
+            this.addLinkHtml(id, name);
 
-                    this.toggleBoolColumn(id, column);
+            this.afterAddLink(id);
+
+            this.trigger('add-link', id);
+            this.trigger('add-link:' + id);
+        }
+
+        this.trigger('change');
+    }
+
+    /**
+     * @param {string} column
+     * @param {string} id
+     * @param {*} value
+     * @return {JQuery}
+     */
+    getJQSelect(column, id, value) {
+        // Do not use the `html` method to avoid XSS.
+
+        let field = this.columnsDefs[column].field;
+        let scope = this.columnsDefs[column].scope;
+        let options = this.columnsDefs[column].options || [];
+
+        let $select = $('<select>')
+            .addClass('role form-control input-sm')
+            .attr('data-id', id)
+            .attr('data-column', column);
+
+        options.forEach(itemValue => {
+            let text = this.getLanguage().translateOption(itemValue, field, scope);
+
+            let $option = $('<option>')
+                .val(itemValue)
+                .text(text);
+
+            if (itemValue === (value || '')) {
+                $option.attr('selected', 'selected');
+            }
+
+            $select.append($option);
+        })
+
+        return $select;
+    }
+
+    /**
+     * @param {string} column
+     * @param {string} id
+     * @param {*} value
+     * @return {JQuery}
+     */
+    getJQInput(column, id, value) {
+        // Do not use the `html` method to avoid XSS.
+
+        let field = this.columnsDefs[column].field;
+        let scope = this.columnsDefs[column].scope;
+        let maxLength = this.columnsDefs[column].maxLength;
+
+        let text = this.translate(field, 'fields', scope);
+
+        let $input = $('<input>')
+            .addClass('role form-control input-sm')
+            .attr('data-column', column)
+            .attr('placeholder', text)
+            .attr('data-id', id)
+            .attr('value', value || '');
+
+        if (maxLength) {
+            $input.attr('maxlength', maxLength);
+        }
+
+        return $input;
+    }
+
+    /**
+     * @param {string} column
+     * @param {string} id
+     * @param {*} value
+     * @return {JQuery}
+     */
+    getJQLi(column, id, value) {
+        // Do not use the `html` method to avoid XSS.
+
+        let field = this.columnsDefs[column].field;
+        let scope = this.columnsDefs[column].scope;
+
+        let text = this.translate(field, 'fields', scope);
+
+        return $('<li>')
+            .append(
+                $('<a>')
+                    .attr('role', 'button')
+                    .attr('tabindex', '0')
+                    .attr('data-action', 'toggleBoolColumn')
+                    .attr('data-column', column)
+                    .attr('data-id', id)
+                    .append(
+                        $('<span>')
+                            .addClass('check-icon fas fa-check pull-right')
+                            .addClass(!value ? 'hidden' : '')
+                    )
+                    .append(
+                        $('<div>').text(text)
+                    )
+            );
+    }
+
+    /** @inheritDoc */
+    addLinkHtml(id, name) {
+        if (this.isSearchMode()) {
+            return super.addLinkHtml(id, name);
+        }
+
+        // Do not use the `html` method to avoid XSS.
+
+        let $container = this.$el.find('.link-container');
+
+        let $el = $('<div>')
+            .addClass('form-inline clearfix')
+            .addClass('list-group-item link-with-role link-group-item-with-columns')
+            .addClass('link-' + id);
+
+        let $remove = $('<a>')
+            .attr('role', 'button')
+            .attr('tabindex', '0')
+            .attr('data-id', id)
+            .attr('data-action', 'clearLink')
+            .addClass('pull-right')
+            .append(
+                $('<span>').addClass('fas fa-times')
+            );
+
+        let $name = $('<div>')
+            .addClass('link-item-name')
+            .text(name)
+            .append('&nbsp;')
+
+        let $columnList = [];
+        let $liList = [];
+
+        this.columnList.forEach(column => {
+            let value = (this.columns[id] || {})[column];
+
+            let type = this.columnsDefs[column].type;
+
+            if (type === this.COLUMN_TYPE_ENUM) {
+                $columnList.push(
+                    this.getJQSelect(column, id, value)
+                );
+
+                return;
+            }
+
+            if (type === this.COLUMN_TYPE_VARCHAR) {
+                $columnList.push(
+                    this.getJQInput(column, id, value)
+                );
+
+                return;
+            }
+
+            if (type === this.COLUMN_TYPE_BOOL) {
+                $liList.push(
+                    this.getJQLi(column, id, value)
+                );
+            }
+        });
+
+        let $left = $('<div>');
+        let $right = $('<div>');
+
+        $columnList.forEach($item => $left.append(
+            $('<span>')
+                .addClass('link-item-column')
+                .addClass('link-item-column-' + $item.get(0).tagName.toLowerCase())
+                .append($item)
+        ));
+
+        if ($liList.length) {
+            let $ul = $('<ul>').addClass('dropdown-menu');
+
+            $liList.forEach($item => $ul.append($item));
+
+            $left.append(
+                $('<div>')
+                    .addClass('btn-group pull-right')
+                    .append(
+                        $('<button>')
+                            .attr('type', 'button')
+                            .attr('data-toggle', 'dropdown')
+                            .addClass('btn btn-link btn-sm dropdown-toggle')
+                            .append(
+                                $('<span>').addClass('caret')
+                            )
+                    )
+                    .append($ul)
+            );
+        }
+
+        $left.append($name);
+        $right.append($remove);
+
+        $el.append($left);
+        $el.append($right);
+
+        $container.append($el);
+
+        if (this.isEditMode()) {
+            $columnList.forEach($column => {
+
+                if ($column.get(0).tagName === 'SELECT') {
+                    Select.init($column);
+                }
+
+                let fetch = ($target) => {
+                    if (!$target || !$target.length) {
+                        return;
+                    }
+
+                    let column = $target.data('column');
+                    let value = $target.val().toString().trim();
+                    let id = $target.data('id');
+
+                    if (value === '') {
+                        value = null;
+                    }
+
+                    this.columns[id] = this.columns[id] || {};
+                    this.columns[id][column] = value;
                 };
-            }
 
-            this.on('render', this.disposeColumnAutocompletes, this);
-            this.once('remove', this.disposeColumnAutocompletes, this);
-        },
+                $column.on('change', e => {
+                    let $target = $(e.currentTarget);
 
-        toggleBoolColumn: function (id, column) {
-            this.columns[id][column] = !this.columns[id][column];
+                    fetch($target);
+                    this.trigger('change');
+                });
 
-            this.reRender();
-        },
-
-        /**
-         * @inheritDoc
-         */
-        getAttributeList: function () {
-            let list = Dep.prototype.getAttributeList.call(this);
-
-            list.push(this.name + 'Columns');
-
-            return list;
-        },
-
-        /**
-         * Get an item HTML for detail mode.
-         *
-         * @param {string} id An ID.
-         * @param {string} [name] An name.
-         * @return {string}
-         */
-        getDetailLinkHtml: function (id, name) {
-            // Do not use the `html` method to avoid XSS.
-
-            name = name || this.nameHash[id] || id;
-
-            let $el = $('<div>')
-                .append(
-                    $('<a>')
-                        .attr('href', '#' + this.foreignScope + '/view/' + id)
-                        .attr('data-id', id)
-                        .text(name)
-                );
-
-            if (this.isDetailMode()) {
-                let iconHtml = this.getIconHtml(id);
-
-                if (iconHtml) {
-                    $el.prepend(iconHtml);
-                }
-            }
-
-            this.columnList.forEach(column => {
-                let value = (this.columns[id] || {})[column] || '';
-                let type = this.columnsDefs[column].type;
-                let field = this.columnsDefs[column].field;
-                let scope = this.columnsDefs[column].scope;
-
-                if (value === '' || !value) {
-                    return;
-                }
-
-                if (type !== this.COLUMN_TYPE_ENUM && type !== this.COLUMN_TYPE_VARCHAR) {
-                    return;
-                }
-
-                let text = type === this.COLUMN_TYPE_ENUM ?
-                    this.getLanguage().translateOption(value, field, scope) :
-                    value;
-
-                $el.append(
-                    $('<span>').text(' '),
-                    $('<span>').addClass('text-muted chevron-right'),
-                    $('<span>').text(' '),
-                    $('<span>').text(text).addClass('text-muted small')
-                );
+                fetch($column);
             });
 
-            return $el.get(0).outerHTML;
-        },
+            this.initAutocomplete(id);
+        }
 
-        /**
-         * @inheritDoc
-         */
-        getValueForDisplay: function () {
-            if (this.isDetailMode() || this.isListMode()) {
-                let itemList = [];
+        return $el;
+    }
 
-                this.ids.forEach(id => {
-                    itemList.push(
-                        this.getDetailLinkHtml(id)
-                    );
-                });
+    initAutocomplete(id) {
+        if (!this._autocompleteElementList) {
+            this._autocompleteElementList = [];
+        }
 
-                return itemList.join('');
-            }
-        },
+        this.columnList.forEach(column => {
+            let type = this.columnsDefs[column].type;
 
-        /**
-         * @inheritDoc
-         */
-        deleteLink: function (id) {
-            this.trigger('delete-link', id);
-            this.trigger('delete-link:' + id);
+            if (type === this.COLUMN_TYPE_VARCHAR) {
+                let options = this.columnsDefs[column].options;
 
-            this.deleteLinkHtml(id);
+                if (options && options.length) {
+                    let $element = this.$el.find('[data-column="'+column+'"][data-id="'+id+'"]');
 
-            let index = this.ids.indexOf(id);
-
-            if (index > -1) {
-                this.ids.splice(index, 1);
-            }
-
-            delete this.nameHash[id];
-            delete this.columns[id];
-
-            this.afterDeleteLink(id);
-
-            this.trigger('change');
-        },
-
-        /**
-         * Get a column valus.
-         * @param {string} id An ID.
-         * @param {string} column A column.
-         * @return {*}
-         */
-        getColumnValue: function (id, column) {
-            return (this.columns[id] || {})[column];
-        },
-
-        addLink: function (id, name) {
-            if (!~this.ids.indexOf(id)) {
-                this.ids.push(id);
-                this.nameHash[id] = name;
-                this.columns[id] = {};
-
-                this.columnList.forEach(column => {
-                    this.columns[id][column] = null;
-
-                    if ('default' in this.columnsDefs[column]) {
-                        this.columns[id][column] = this.columnsDefs[column].default;
-                    }
-                });
-
-                this.addLinkHtml(id, name);
-
-                this.afterAddLink(id);
-
-                this.trigger('add-link', id);
-                this.trigger('add-link:' + id);
-            }
-
-            this.trigger('change');
-        },
-
-        /**
-         * @inheritDoc
-         */
-        afterRender: function () {
-            Dep.prototype.afterRender.call(this);
-        },
-
-        /**
-         * @inheritDoc
-         */
-        afterAddLink: function (id) {
-            Dep.prototype.afterAddLink.call(this, id);
-        },
-
-        /**
-         * @param {string} column
-         * @param {string} id
-         * @param {*} value
-         * @return {JQuery}
-         */
-        getJQSelect: function (column, id, value) {
-            // Do not use the `html` method to avoid XSS.
-
-            let field = this.columnsDefs[column].field;
-            let scope = this.columnsDefs[column].scope;
-            let options = this.columnsDefs[column].options || [];
-
-            let $select = $('<select>')
-                .addClass('role form-control input-sm')
-                .attr('data-id', id)
-                .attr('data-column', column);
-
-            options.forEach(itemValue => {
-                let text = this.getLanguage().translateOption(itemValue, field, scope);
-
-                let $option = $('<option>')
-                    .val(itemValue)
-                    .text(text);
-
-                if (itemValue === (value || '')) {
-                    $option.attr('selected', 'selected');
-                }
-
-                $select.append($option);
-            })
-
-            return $select;
-        },
-
-        /**
-         * @param {string} column
-         * @param {string} id
-         * @param {*} value
-         * @return {JQuery}
-         */
-        getJQInput: function (column, id, value) {
-            // Do not use the `html` method to avoid XSS.
-
-            let field = this.columnsDefs[column].field;
-            let scope = this.columnsDefs[column].scope;
-            let maxLength = this.columnsDefs[column].maxLength;
-
-            let text = this.translate(field, 'fields', scope);
-
-            let $input = $('<input>')
-                .addClass('role form-control input-sm')
-                .attr('data-column', column)
-                .attr('placeholder', text)
-                .attr('data-id', id)
-                .attr('value', value || '');
-
-            if (maxLength) {
-                $input.attr('maxlength', maxLength);
-            }
-
-            return $input;
-        },
-
-        /**
-         * @param {string} column
-         * @param {string} id
-         * @param {*} value
-         * @return {JQuery}
-         */
-        getJQLi: function (column, id, value) {
-            // Do not use the `html` method to avoid XSS.
-
-            let field = this.columnsDefs[column].field;
-            let scope = this.columnsDefs[column].scope;
-
-            let text = this.translate(field, 'fields', scope);
-
-            return $('<li>')
-                .append(
-                    $('<a>')
-                        .attr('role', 'button')
-                        .attr('tabindex', '0')
-                        .attr('data-action', 'toggleBoolColumn')
-                        .attr('data-column', column)
-                        .attr('data-id', id)
-                        .append(
-                            $('<span>')
-                                .addClass('check-icon fas fa-check pull-right')
-                                .addClass(!value ? 'hidden' : '')
-                        )
-                        .append(
-                            $('<div>').text(text)
-                        )
-                );
-        },
-
-        /**
-         * @inheritDoc
-         */
-        addLinkHtml: function (id, name) {
-            if (this.isSearchMode()) {
-                return Dep.prototype.addLinkHtml.call(this, id, name);
-            }
-
-            // Do not use the `html` method to avoid XSS.
-
-            let $container = this.$el.find('.link-container');
-
-            let $el = $('<div>')
-                .addClass('form-inline clearfix')
-                .addClass('list-group-item link-with-role link-group-item-with-columns')
-                .addClass('link-' + id);
-
-            let $remove = $('<a>')
-                .attr('role', 'button')
-                .attr('tabindex', '0')
-                .attr('data-id', id)
-                .attr('data-action', 'clearLink')
-                .addClass('pull-right')
-                .append(
-                    $('<span>').addClass('fas fa-times')
-                );
-
-            let $name = $('<div>')
-                .addClass('link-item-name')
-                .text(name)
-                .append('&nbsp;')
-
-            let $columnList = [];
-            let $liList = [];
-
-            this.columnList.forEach(column => {
-                let value = (this.columns[id] || {})[column];
-
-                let type = this.columnsDefs[column].type;
-
-                if (type === this.COLUMN_TYPE_ENUM) {
-                    $columnList.push(
-                        this.getJQSelect(column, id, value)
-                    );
-
-                    return;
-                }
-
-                if (type === this.COLUMN_TYPE_VARCHAR) {
-                    $columnList.push(
-                        this.getJQInput(column, id, value)
-                    );
-
-                    return;
-                }
-
-                if (type === this.COLUMN_TYPE_BOOL) {
-                    $liList.push(
-                        this.getJQLi(column, id, value)
-                    );
-                }
-            });
-
-            let $left = $('<div>');
-            let $right = $('<div>');
-
-            $columnList.forEach($item => $left.append(
-                $('<span>')
-                    .addClass('link-item-column')
-                    .addClass('link-item-column-' + $item.get(0).tagName.toLowerCase())
-                    .append($item)
-            ));
-
-            if ($liList.length) {
-                let $ul = $('<ul>').addClass('dropdown-menu');
-
-                $liList.forEach($item => $ul.append($item));
-
-                $left.append(
-                    $('<div>')
-                        .addClass('btn-group pull-right')
-                        .append(
-                            $('<button>')
-                                .attr('type', 'button')
-                                .attr('data-toggle', 'dropdown')
-                                .addClass('btn btn-link btn-sm dropdown-toggle')
-                                .append(
-                                    $('<span>').addClass('caret')
-                                )
-                        )
-                        .append($ul)
-                );
-            }
-
-            $left.append($name);
-            $right.append($remove);
-
-            $el.append($left);
-            $el.append($right);
-
-            $container.append($el);
-
-            if (this.isEditMode()) {
-                $columnList.forEach($column => {
-
-                    if ($column.get(0).tagName === 'SELECT') {
-                        Select.init($column);
+                    if (!$element.length) {
+                        return;
                     }
 
-                    let fetch = ($target) => {
-                        if (!$target || !$target.length) {
-                            return;
-                        }
-
-                        let column = $target.data('column');
-                        let value = $target.val().toString().trim();
-                        let id = $target.data('id');
-
-                        if (value === '') {
-                            value = null;
-                        }
-
-                        this.columns[id] = this.columns[id] || {};
-                        this.columns[id][column] = value;
-                    };
-
-                    $column.on('change', e => {
-                        let $target = $(e.currentTarget);
-
-                        fetch($target);
-                        this.trigger('change');
-                    });
-
-                    fetch($column);
-                });
-
-                this.initAutocomplete(id);
-            }
-
-            return $el;
-        },
-
-        initAutocomplete: function (id) {
-            if (!this._autocompleteElementList) {
-                this._autocompleteElementList = [];
-            }
-
-            this.columnList.forEach(column => {
-                let type = this.columnsDefs[column].type;
-
-                if (type === this.COLUMN_TYPE_VARCHAR) {
-                    let options = this.columnsDefs[column].options;
-
-                    if (options && options.length) {
-                        let $element = this.$el.find('[data-column="'+column+'"][data-id="'+id+'"]');
-
-                        if (!$element.length) {
-                            return;
-                        }
-
-                        $element.autocomplete({
-                            minChars: 0,
-                            lookup: options,
-                            maxHeight: 200,
-                            beforeRender: (c) => {
-                                c.addClass('small');
-                            },
-                            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;
+                    $element.autocomplete({
+                        minChars: 0,
+                        lookup: options,
+                        maxHeight: 200,
+                        beforeRender: (c) => {
+                            c.addClass('small');
+                        },
+                        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 false;
-                            },
-                            onSelect: () => {
-                                this.trigger('change');
-                                $element.trigger('change');
-                                $element.focus();
-                            },
-                        });
-
-                        $element.attr('autocomplete', 'espo-' + this.name + '-' + column + '-' + id);
-
-                        $element.on('focus', () => {
-                            if ($element.val()) {
-                                return;
+                                return true;
                             }
 
-                            $element.autocomplete('onValueChange');
-                        });
+                            return false;
+                        },
+                        onSelect: () => {
+                            this.trigger('change');
+                            $element.trigger('change');
+                            $element.focus();
+                        },
+                    });
 
-                        this._autocompleteElementList.push($element);
+                    $element.attr('autocomplete', 'espo-' + this.name + '-' + column + '-' + id);
 
-                        this.once('delete-link:' + id, () => {
-                            $element.autocomplete('dispose');
-                        });
-                    }
+                    $element.on('focus', () => {
+                        if ($element.val()) {
+                            return;
+                        }
+
+                        $element.autocomplete('onValueChange');
+                    });
+
+                    this._autocompleteElementList.push($element);
+
+                    this.once('delete-link:' + id, () => {
+                        $element.autocomplete('dispose');
+                    });
                 }
+            }
+        });
+    }
+
+    disposeColumnAutocompletes() {
+        if (this._autocompleteElementList && this._autocompleteElementList.length) {
+            this._autocompleteElementList.forEach($el =>{
+                $el.autocomplete('dispose');
             });
-        },
 
-        disposeColumnAutocompletes: function () {
-            if (this._autocompleteElementList && this._autocompleteElementList.length) {
-                this._autocompleteElementList.forEach($el =>{
-                    $el.autocomplete('dispose');
-                });
+            this._autocompleteElementList = [];
+        }
+    }
 
-                this._autocompleteElementList = [];
-            }
-        },
+    // noinspection JSUnusedGlobalSymbols
+    validateColumnPattern() {
+        let result = false;
 
-        validateColumnPattern: function () {
-            let result = false;
+        let columnList = this.columnList
+            .filter(column => this.columnsDefs[column].type === this.COLUMN_TYPE_VARCHAR)
+            .filter(column => this.columnsDefs[column].pattern);
 
-            let columnList = this.columnList
-                .filter(column => this.columnsDefs[column].type === this.COLUMN_TYPE_VARCHAR)
-                .filter(column => this.columnsDefs[column].pattern);
+        for (let column of columnList) {
+            for (let id of this.ids) {
+                let value = this.getColumnValue(id, column);
 
-            for (let column of columnList) {
-                for (let id of this.ids) {
-                    let value = this.getColumnValue(id, column);
+                if (!value) {
+                    continue;
+                }
 
-                    if (!value) {
-                        continue;
-                    }
-
-                    if (this.validateColumnPatternValue(id, column, value)) {
-                        result = true;
-                    }
+                if (this.validateColumnPatternValue(id, column, value)) {
+                    result = true;
                 }
             }
+        }
 
-            return result;
-        },
+        return result;
+    }
 
-        validateColumnPatternValue: function (id, column, value) {
-            let pattern = this.columnsDefs[column].pattern;
-            let field = this.columnsDefs[column].field;
-            let scope = this.columnsDefs[column].scope;
+    validateColumnPatternValue(id, column, value) {
+        let pattern = this.columnsDefs[column].pattern;
+        let field = this.columnsDefs[column].field;
+        let scope = this.columnsDefs[column].scope;
 
-            /** @type module:helpers/reg-exp-pattern.Class */
-            let helper = new RegExpPattern(this.getMetadata(), this.getLanguage());
+        let helper = new RegExpPattern(this.getMetadata(), this.getLanguage());
 
-            let result = helper.validate(pattern, value, field, scope);
+        let result = helper.validate(pattern, value, field, scope);
 
-            if (!result) {
-                return false;
-            }
+        if (!result) {
+            return false;
+        }
 
-            this.showValidationMessage(result.message, '[data-column="' + column + '"][data-id="' + id + '"]');
+        this.showValidationMessage(result.message, '[data-column="' + column + '"][data-id="' + id + '"]');
 
-            return true;
-        },
+        return true;
+    }
 
-        /**
-         * @inheritDoc
-         */
-        fetch: function () {
-            let data = Dep.prototype.fetch.call(this);
+    fetch() {
+        let data = super.fetch();
 
-            data[this.columnsName] = Espo.Utils.cloneDeep(this.columns);
+        data[this.columnsName] = Espo.Utils.cloneDeep(this.columns);
 
-            return data;
-        },
-    });
-});
+        // noinspection JSValidateTypes
+        return data;
+    }
+}
+
+export default LinkMultipleWithColumnsFieldView;
diff --git a/client/src/views/fields/link-multiple.js b/client/src/views/fields/link-multiple.js
index 94dcad783a..2f58919955 100644
--- a/client/src/views/fields/link-multiple.js
+++ b/client/src/views/fields/link-multiple.js
@@ -319,6 +319,7 @@ class LinkMultipleFieldView extends BaseFieldView {
 
                 this.deleteLink(id);
 
+                // noinspection JSUnresolvedReference
                 this.$element.get(0).focus({preventScroll: true});
             };
         }
@@ -426,20 +427,21 @@ class LinkMultipleFieldView extends BaseFieldView {
                 });
 
                 this.$element.autocomplete({
-                    serviceUrl: (q) => {
-                        return this.getAutocompleteUrl(q);
+                    serviceUrl: () => {
+                        return this.getAutocompleteUrl();
                     },
                     minChars: 1,
                     paramName: 'q',
                     noCache: true,
                     autoSelectFirst: true,
                     triggerSelectOnValidInput: false,
-                    beforeRender: ($c) => {
+                    beforeRender: $c => {
                         if (this.$element.hasClass('input-sm')) {
                             $c.addClass('small');
                         }
                     },
-                    formatResult: (suggestion) => {
+                    formatResult: suggestion => {
+                        // noinspection JSUnresolvedReference
                         return this.getHelper().escapeString(suggestion.name);
                     },
                     transformResult: response => {
@@ -461,6 +463,7 @@ class LinkMultipleFieldView extends BaseFieldView {
                         };
                     },
                     onSelect: s => {
+                        // noinspection JSUnresolvedReference
                         this.addLink(s.id, s.name);
 
                         this.$element.val('');
@@ -487,6 +490,7 @@ class LinkMultipleFieldView extends BaseFieldView {
 
             if (this.isEditMode()) {
                 if (this.sortable) {
+                    // noinspection JSUnresolvedReference
                     this.$el.find('.link-container').sortable({
                         stop: () => {
                             this.fetchFromDom();
@@ -625,9 +629,10 @@ class LinkMultipleFieldView extends BaseFieldView {
         return $el;
     }
 
+    // noinspection JSUnusedLocalSymbols
     /**
      * @param {string} id An ID.
-     * @return {string|null}
+     * @return {string}
      */
     getIconHtml(id) {
         return this.iconHtml;
@@ -637,12 +642,13 @@ class LinkMultipleFieldView extends BaseFieldView {
      * Get an item HTML for detail mode.
      *
      * @param {string} id An ID.
+     * @param {string} [name] A name.
      * @return {string}
      */
-    getDetailLinkHtml(id) {
+    getDetailLinkHtml(id, name) {
         // Do not use the `html` method to avoid XSS.
 
-        let name = this.nameHash[id] || id;
+        name = name || this.nameHash[id] || id;
 
         if (!name && id) {
             name = this.translate(this.foreignScope, 'scopeNames');
diff --git a/client/src/views/fields/link.js b/client/src/views/fields/link.js
index 4390326088..5e6932b60d 100644
--- a/client/src/views/fields/link.js
+++ b/client/src/views/fields/link.js
@@ -53,19 +53,19 @@ class LinkFieldView extends BaseFieldView {
      *
      * @type {string}
      */
-    nameName = null
+    nameName
 
     /**
      * An ID attribute name.
      *
      * @type {string}
      */
-    idName = null
+    idName
 
     /**
      * A foreign entity type.
      *
-     * @type {string}
+     * @type {string|null}
      */
     foreignScope = null
 
@@ -557,19 +557,21 @@ class LinkFieldView extends BaseFieldView {
                     let $elementOneOf = this.$el.find('input.element-one-of');
 
                     $elementOneOf.autocomplete({
-                        serviceUrl: q => {
-                            return this.getAutocompleteUrl(q);
+                        serviceUrl: () => {
+                            return this.getAutocompleteUrl();
                         },
                         minChars: 1,
                         paramName: 'q',
                         noCache: true,
                         formatResult: suggestion => {
+                            // noinspection JSUnresolvedReference
                             return this.getHelper().escapeString(suggestion.name);
                         },
                         transformResult: response => {
                             return this._transformAutocompleteResult(JSON.parse(response));
                         },
                         onSelect: s => {
+                            // noinspection JSUnresolvedReference
                             this.addLinkOneOf(s.id, s.name);
 
                             $elementOneOf.val('');
diff --git a/client/src/views/fields/varchar.js b/client/src/views/fields/varchar.js
index 1b933a9714..9663cab6f2 100644
--- a/client/src/views/fields/varchar.js
+++ b/client/src/views/fields/varchar.js
@@ -148,6 +148,7 @@ class VarcharFieldView extends BaseFieldView {
         });
     }
 
+    // noinspection JSUnusedLocalSymbols
     /**
      * Compose an autocomplete URL.
      *