Part 2 - Control values of a multiple link depending on another multiple link

[telecastg]

This is a continuation of the tutorial Control values of a multiple link field based on the values of another multiple link field posted here: https://forum.espocrm.com/forum/deve...-multiple-link

Step 4
Create script client/custom/src/views/modals/select-records-filtered.js using the code below:

define('custom:views/modals/select-records-filtered', ['views/modals/select-records', 'search-manager'], function (Dep, SearchManager) {

    return Dep.extend({

        setup: function () {
            this.filters = this.options.filters || {};
            this.boolFilterList = this.options.boolFilterList || [];
            this.primaryFilterName = this.options.primaryFilterName || 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 (this.multiple) {
                this.buttonList.unshift({
                    name: 'select',
                    style: 'danger',
                    label: 'Select',
                    disabled: true,
                    onClick: function (dialog) {
                        var listView = this.getView('list');
                        if (listView.allResultIsChecked) {
                            var where = this.collection.where;
                            this.trigger('select', {
                                massRelate: true,
                                where: where
                            });
                        } else {
                            var list = listView.getSelected();
                            if (list.length) {
                                this.trigger('select', list);
                            }
                        }    
                        dialog.close();
                    }.bind(this),
                });
            }
            this.scope = this.entityType = this.options.scope || this.scope;
            if (this.noCreateScopeList.indexOf(this.scope) !== -1) {
                this.createButton = false;
            }
            if (this.createButton) {
                if (!this.getAcl().check(this.scope, 'create') || this.getMetadata().get(['clientDefs', this.scope, 'createDisabled'])) {
                    this.createButton = false;
                }
            }
            this.headerHtml = '';
            var iconHtml = this.getHelper().getScopeColorIconHtml(this.scope) ;
            this.headerHtml += this.translate('Select') + ': ';
            this.headerHtml += this.getLanguage().translate(this.scope, 'scopeNamesPlural');
            this.headerHtml = iconHtml + this.headerHtml;
            this.waitForView('list');
            if (this.searchPanel) {
                this.waitForView('search');
            }
            // get the link filter values from the scope clientDefs
            const modelTable = this.getMetadata().get(['clientDefs', this.scope, 'linkFilter','modelTable']);
            const modelCriteriaTable = this.getMetadata().get(['clientDefs', this.scope, 'linkFilter','modelCriteriaTable']);
            const criteriaTable = this.getMetadata().get(['clientDefs', this.scope, 'linkFilter','criteriaTable']);
            const criteriaTargetTable = this.getMetadata().get(['clientDefs', this.scope, 'linkFilter','criteriaTargetTable']);
            const targetTable = this.getMetadata().get(['clientDefs', this.scope, 'linkFilter','targetTable']);
            const modelKey = this.getMetadata().get(['clientDefs', this.scope, 'linkFilter','modelKey']);
            const modelReferenceKey = this.getMetadata().get(['clientDefs', this.scope, 'linkFilter','modelReferenceKey']);
            const criteriaKey = this.getMetadata().get(['clientDefs', this.scope, 'linkFilter','criteriaKey']);
            const criteriaReferenceKey = this.getMetadata().get(['clientDefs', this.scope, 'linkFilter','criteriaReferenceKey']);
            const targetKey = this.getMetadata().get(['clientDefs', this.scope, 'linkFilter','targetKey']);
            const targetReferenceKey = this.getMetadata().get(['clientDefs', this.scope, 'linkFilter','targetReferenceKey']);
            // use plain ajax to invoke an entry point that will call a Service to return a list to use as a filter for the records available for selection
            var url = '?entryPoint=conditionalLinkMultiple';
            var params = {
                action: 'getOptionListFilter',
                modelKeyValue: this.options.parentId,
                modelTable: modelTable,
                modelCriteriaTable: modelCriteriaTable,
                criteriaTable: criteriaTable,
                criteriaTargetTable: criteriaTargetTable,
                targetTable: targetTable,
                modelKey: modelKey,
                modelReferenceKey: modelReferenceKey,
                criteriaKey: criteriaKey,
                criteriaReferenceKey: criteriaReferenceKey,
                targetKey: targetKey,
                targetReferenceKey: targetReferenceKey
            };
            // console.log("select-records-filteres.js params = ",params);
            var self = this;
            var payload = JSON.stringify(params);
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST", url);
            xmlhttp.setRequestHeader("Content-type", "application/json");
            xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState === XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
                if (xmlhttp.status === 200) {
                        var filterList = JSON.parse(xmlhttp.responseText);
                        self.getCollectionFactory().create(self.scope, function (collection) {
                            collection.maxSize = self.getConfig().get('recordsPerPageSmall') || 5;
                            collection.whereAdditional = [
                                {
                                   field: 'id',
                                    type: 'in',
                                    value: filterList
                                 }
                            ];
                            self.collection = collection;
                            if (self.defaultOrderBy) {
                                self.collection.setOrder(self.defaultOrderBy, self.defaultOrder || false, true);
                            }
                            self.loadSearch();
                            self.wait(true);
                            self.loadList();
                        }, self);
                    } else if (xmlhttp.status === 400) {
                        alert('There was an error 400 at select-records-filtered.js');
                    } else {
                        alert('something else other than 200 was returned at select-records-filtered.js');
                    }
                }
            };
            xmlhttp.send(payload);
        }

    });
});

Please note the line // console.log("select-records-filteres.js params = ",params); in the code above. This line can be un-commented for trouble shooting to display a message to the browser's console log indicating that the values provided in the script described in Step 2 were properly received.

Because of the limit of number of characters for a single post, this tutorial will continue in part 3 here https://forum.espocrm.com/forum/deve...p/60642-part-3