Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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:
    Click image for larger version

Name:	Capture.JPG
Views:	475
Size:	21.6 KB
ID:	74890
    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
    Code:
    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: 'view',
                    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: 'view',
                    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
    Code:
    {
        "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
    Code:
    {
        "labels": {
            "Do Something": "faire quelque chose",
            "Do Something Else": "faire autre chose"
        }
    }
    Step 4:
    Rebuild application and refresh the page

  • #2
    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

    Comment


    • #3
      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.

      Comment


      • rabii
        rabii commented
        Editing a comment
        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
    Working...
    X