How to add new button in Users sections

[alicef]

Hi,

Can anyone show me example how to add addtional button to create new user ? I want to write module which will add new way of user creation. I looking for a way how to add another button besides existing one.

Thanks for help

[telecastg]

Check this function in script client/src/views/list.js where the "Create" button is defined

      
     setupCreateButton: function () {
            if (this.quickCreate) {
                this.menu.buttons.unshift({
                    action: 'quickCreate',
                    html: '<span class="fas fa-plus fa-sm"></span> ' + this.translate('Create ' +  this.scope, 'labels', this.scope),
                    style: 'default',
                    acl: 'create',
                    aclScope: this.entityType || this.scope
                });
            } else {
                this.menu.buttons.unshift({
                    link: '#' + this.scope + '/create',
                    action: 'create',
                    html: '<span class="fas fa-plus fa-sm"></span> ' + this.translate('Create ' +  this.scope,  'labels', this.scope),
                    style: 'default',
                    acl: 'create',
                    aclScope: this.entityType || this.scope
                });
            }
        },

In order to keep your customization "upgrade safe" I suggest that instead of modifying the script, you do the following:

1) create a new custom script: client/custom/src/views/{{my-user}}/list.js, inherited from client/src/views/user/list.js and make your modifications/implementation there.

2) go to metadata file custom/Espo/Custom/Resources/metadata/clientDefs/User.json and modify, or if the metadata file does not exist yet, then create one.

from

"views": {
  "detail": "views/user/detail",
  "list": "views/user/list"
},

to

"views": {
      "detail": "views/user/detail",
      "list": "custom:views/{{my-user}}/list"
},

3) Clear cache and rebuild

[teaguy]

What does {{my-user}} mean? Is it relevant to add something specific there?

[telecastg]

{{my-user}} is just a placeholder to put whatever name you want to have for your script. It could be for example "custom-user" and then the file name would be:
client/custom/src/views/custom-user/list.js and inside custom/Espo/Custom/Resources/metadata/clientDefs/User.json you would enter:

 "views": {      
    "detail": "views/user/detail",      
    "list": "custom:views/custom-user/list"
},

The actions above are telling Espo that instead of calling the standard view to render the User entity form when the button "Create" is clicked on the list view, it should call the script client/custom/src/views/custom-user/list.js

Not sure if you are familiar with Espo's metadata concept, but essentially these are "application settings" that can easily be modified by a developer and allow a great degree of minimum code writing customization.

The above instructions tell you how to implement a custom functionality triggered when you click the existing "Create" button.

---

CREATING A CUSTOM BUTTON DISPLAYED ON TOP OF A LIST DISPLAY

To implement a custom button (for example a "Custom Create" button) displayed next to the standard "Create" button on any entity, for example for Conatct, you would follow these steps:

1) Create file client/custom/src/views/list.js

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

    return Dep.extend({

        // createButton: false // Uncomment this line if you wish to hide the existing "Create" button

        customCreateButton: true,

        setup: function () {
            // execute the prototype "views/list" setup function
            Dep.prototype.setup.call(this);
            // build the additional Create Button if required
            if (this.customCreateButton) {
                this.setupCustomCreateButton();
            }            
        },

        setupCustomCreateButton: function () {
            this.menu.buttons.unshift({
                /*
                if you want the button to do something different than "create" a new record
                you will need to implement that function at the user front-end controller script:
                client/src/controllers/user.js
                */
                link: '#' + this.scope + '/create',
                action: 'customCreate',
                label: 'Custom Create ' +  this.scope,
                style: 'primary',
                acl: 'create',
                aclScope: this.entityType || this.scope
            });
        },

        actionCustomCreate: function () {
            // customize this function to suit your needs
            var router = this.getRouter();
            /*
            if you want the button to do something different than "create" a new record
            you will need to implement that function at the user front-end controller script:
            client/src/controllers/user.js
            */
            var url = '#' + this.scope + '/create';
            var attributes = this.getCreateAttributes() || {};

            var options = {
                attributes: attributes
            };
            if (this.keepCurrentRootUrl) {
                options.rootUrl = this.getRouter().getCurrentUrl();
            }

            var returnDispatchParams = {
                controller: this.scope,
                action: null,
                options: {
                    isReturn: true
                }
            };
            this.prepareCreateReturnDispatchParams(returnDispatchParams);
            _.extend(options, {
                returnUrl: this.getRouter().getCurrentUrl(),
                returnDispatchParams: returnDispatchParams
            });

            router.navigate(url, {trigger: false});
            router.dispatch(this.scope, 'create', options);
        }


    });

});

2) Go to metadata file custom/Espo/Custom/Resources/metadata/clientDefs/Contact.json and modify, or if the metadata file does not exist yet, then create one.

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

The program flow is: BUTTON CLICK -> VIEW -> FRONT-END CONTROLLER -> ACTION EXECUTION

[emillod]

I believe that you provide wrong path in "1) Create file client/custom/src/views/list.js", also "Espo.define('custom:views/src/list', 'views/list', function (Dep) {".
There should be a path to folder which you mentioned in clientDefs. Please correct if i'm wrong

[telecastg]

The post is actually addressing two different cases:

The first section where the clientDefs snipped is provided, tells how to implement a button in the User list view that will "hijack" the out of the box user create action so you can make it do some additional things.

The second part tells how to add a second "create" button to any entity, not just User. To implement this capability for any entity, for example Contact you would enter the following code in Contact clientDefs:

"views": {
"detail": "views/user/detail",
"list": "custom:views/list"
},

You are 100% correct with regards to the view definition in this case, the correct path should be

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

and the actual path for the above file is correct, it should be: client/custom/src/views/list.js

I am editing the original post with the correction, thanks for pointing it out.

[emillod]

Sure, i understand your approach, but for new users it can be confusing and of course if he don't enter correct paths, he don't be able to use custom files.

[teaguy]

Hay,

thank you for your explaination! But it still doesnt work for me.

[telecastg]

Hi, emillod pointed an error that I had made with respect to the paths provided, maybe this is the reason why it wasn't working for you. I corrected the post.