Reference: Espo GUI - script map guide, where can I change something ?

[telecastg]

How to create and use a custom button at the top left of the list display, where the kanban button is displayed.

Following item suggestion to use this type of button, to switch between a normal list display and a list where the columns and rows are transposed, as explained in the previous post, these are the steps to create and implement a custom button in this area:





1) Create a custom view class to display the list of records with the columns and rows transposed.
client/custom/src/views/service-tech/record/list.js

define('custom:views/service-tech/record/list', 'views/record/list', function (Dep) {

    return Dep.extend({

        setup: function () {
            Dep.prototype.setup.call(this);
            this.listenTo(this,'after:render', function() {
                $('tr.list-row').css("display","block");
                $('tr.list-row').css("float","left");
                $('td.cell').css("display","block");
                $('th').css("display","none");
            });
        }
    });

});

2) Create a custom view class to render the header area above the list display
client/custom/src/views/service-tech/header/list.js

define('custom:views/service-tech/header/list', 'views/list', function (Dep) {

    return Dep.extend({

        // incorporate the search view that includes the additional icon
        searchView: 'custom:views/service-tech/record/search',

        // fetch the name of the view class to be used to render the collection
        getRecordViewName: function () {
            if (this.viewMode === 'list') {
                return this.getMetadata().get(['clientDefs', this.scope, 'recordViews', 'list']) || this.recordView;
            } else if(this.viewMode === 'transpose') {
                return this.getMetadata().get(['clientDefs', this.scope, 'recordViews', 'transpose']);
            }
            return this.getMetadata().get(['clientDefs', this.scope, 'recordViews', this.viewMode]);
        }

    });

});

3) Create custom view class to render the "search" area in the header section above the list display
client/custom/src/views/service-tech/record/search.js

define('custom:views/service-tech/record/search', 'views/record/search', function (Dep) {

    return Dep.extend({

        // adds the new transpose icon at the top right corner of the list display
        viewModeIconClassMap: {
            list: 'fas fa-align-justify',
            transpose: 'fas fa-align-justify fa-rotate-90'
        }

    });
});

4) Create a custom clientDefs file for the target entity ("ServiceTech" in this example) to invoke the custom view classes created above
custom/Espo/Custom/Resources/metadata/clientDefs/ServiceTech.json

{
    "views": {
        "list": "custom:views/service-tech/header/list"
    },
    "recordViews": {
        "transpose": "custom:views/service-tech/record/list"
    },
    "listViewModeList" : ["list","transpose"]
}

5) Clear cache and rebuild.