Coding Tutorial: How to create a custom action button in list display

[telecastg]

Complementary to the fantastic video tutorial on how to create a simple button in list view by emillod https://forum.espocrm.com/forum/deve...4465#post74465, here's a guide to create a button on the top of the list display, that will perform custom actions defined through coding and will look like this:

Step 1:
Create a custom view class that will replace the core view class specified for the Contact entity to render the header section of a list display.
client/custom/src/views/contact/list.js

define('custom:views/contact/list', 'views/list', function (Dep) {

    return Dep.extend({

        setup: function() {
            Dep.prototype.setup.call(this);
            this.setupCustomButtons();
        },

        setupCustomButtons: function () {
            this.menu.buttons.unshift({
                action: 'myAction1',
                html: '<span class="fas fa-chess-knight fa-sm"></span> ' + this.translate('Do Something', 'labels', this.scope),
                style: 'default',
                acl: 'read',
                aclScope: this.entityType || this.scope
            });
            this.menu.buttons.push({
                action: 'myAction2',
                html: '<span class="fas fa-chess-rook fa-sm"></span> ' + this.translate('Do Something Else', 'labels', this.scope),
                style: 'default',
                acl: 'read',
                aclScope: this.entityType || this.scope
            });
        },

        actionMyAction1: function() {
            alert("Thank you for your click in button #1");
        },

        actionMyAction2: function() {
            alert("Thank you for your click in button #2");
        }

    });

});

Step 2:
Create a custom clientDefs metadata definition for the Contact entity that will let Espo know that a custom view class is to be invoked for displaying the header in Contact list display.
custom/Espo/Custom/Resources/metadata/clientDefs/Contact.json

{
    "views": {
        "list": "custom:views/contact/list"
    }
}

Step 3:
Create a custom language file to translate the buttons labels to your preferred language.
custom/Espo/Custom/Resources/i18n/fr_FR/Contact.json

{
    "labels": {
        "Do Something": "faire quelque chose",
        "Do Something Else": "faire autre chose"
    }
}

Step 4:
Rebuild application and refresh the page

[rabii]

Hi telecastg

How about adding a button next to the kanban button (icon), i have custom entity with a status field that has ( 11 values) when displaying as a kanban the values don't show properly and i want had to change the client/src/views/record/kanban.js => minColumnWidthPx: 125, to 200, but that adds a horizontal scroll to the whole page. I want to add a horizontal scroll only to the kanban container (which is also the list container) but doesn't work so i want to create a custom template for this entity's kanban view but i don't know where to start. any help

[telecastg]

Hi,

Check this post the tells you how the kanban view is generated. https://forum.espocrm.com/forum/deve...1406#post61406

That post was made before Espo 7 but I don't think that the process has changed very much. In any event, at least it will give you an idea of where to start researching.

When you find your solution, please don't forget to post your results here to enrich the forum.

[rabii]

Hi

Thanks for your reply, after digging into core system and how existing entities work, i figured out a way to create a custom kanban view for my custom entity and added some basic functionalities. Next step to allow user to select which Kanban field to use (move logic from entity setting into the entity view).

Cheers

[jugama]

Hi,

I follow this code and works perfectly ... BUT .. the buttons ONLY appears if I'm logged as administrator, with any other user the the buttons WILL NOT appears.

Any comments ?

[telecastg]

Hi, make sure that the user is authorized to perform the action on the entity that you specify.

[jugama]

Hi,

the user have .. FULL ACCESS to that new ENTITY created thru the system (espocrm-admin-Entity .. create new Entity... then use the code published) .. everything works IF you are logged as admin .. otherwise .. the buttons DOES NOT appears.

[yuri]

Change from

acl: 'view'

to

acl: 'read'

As there's no 'view' action in Espo.

I recommend to check the documentation first, there are official methods documented. https://docs.espocrm.com/development/custom-buttons/