Adding Custom Button In Invoice Module

[dodom2]

Hi all,
I need to add a custom button to the invoice entity.
I found the documentation for this: https://docs.espocrm.com/development/custom-buttons/
This suppose that I will need to edit metadata/clientDefs/Invoice.json
My problem is that I want to keep my changes even if I upgrade EspoCRM.

So my question is how can I add a custom button into a default entity while keeping my changes upgrade safe?
Thank you in advance for your replies.

[eymen-elkum]

Hi,

Create a file custom/Espo/Custom/Resources/metadata/clientDefs/Invice.json:

Espocrm will merge the module file with the custom file,

Note: the custom folder will never touched by any upgrade, so any work within custom folder will be totally safe upgrade

[dodom2]

Awesome! Thank you.

[eymen-elkum]

You are welcome

[espcrm]

I been reading on custom button and dig through a quite thread about them, still haven't gotten any luck to actually using the button, appreciate if you can report back with some live working example.

I manage to see the button, able to click on it, but it either result in a "Nothing happen" or "error 404"

[emillod]

espcrm i've done many buttons, can you let me know how i can help you? I think there are two methods of doing that, first is from client folder, second is through custom.

[espcrm]

espcrm i've done many buttons, can you let me know how i can help you? I think there are two methods of doing that, first is from client folder, second is through custom.

Hi emilod,

The only "idea" at the moment currently I have is, I'm trying to create an Button in Contact that can convert it to another entity (similar to to how Leads can be convert to Contact). So I read a couple of thread, and copy down the step, in particular with these two:

https://forum.espocrm.com/forum/developer-help/32007-navbar-add-custom-links

https://forum.espocrm.com/forum/developer-help/5625-creating-custom-buttons-with-custom-actions

https://docs.espocrm.com/development/custom-buttons/

Also read and explore through the Lead convert function but there isn't much of a "hand-holding guide" available.

I can get those button to appear but the crucial step I believe to making it work is the "controller" part? Without some sort of controller the button is useless.

It could be that I'm using the wrong controller or I create the file or code wrong, but I was hoping something (or anything) happen when I click the button. At this point, none of those 3 pages give me any success.

So currently, just need a button that does "something", at least that way I can maybe find out how to do more basic stuff then (hopefully) more advance function.

[emillod]

espcrm hmmm, i've done something similar.
I have button which is showing after click small form of creating specific record in other entity with pre-filled fields based on record from where you click button.

For example i have button in task entity. Button called "Create case" and based on that EspoCRM after click showing form of creating cases with filled fields like parentCase(which is the same like task parent), parentObject(which is task from which case was created) and other things. I've created that based on mechanism in Email module. You can check this, just open Email and click dropdown in right top corner

[espcrm]

espcrm
For example i have button in task entity. Button called "Create case" and based on that EspoCRM after click showing form of creating cases with filled fields like parentCase(which is the same like task parent), parentObject(which is task from which case was created) and other things. I've created that based on mechanism in Email module. You can check this, just open Email and click dropdown in right top corner

Oh that look good, can you provide clue or (if possible) guide how I can emulate that button feature?

[emillod]

espcrm - sure. I'll be more than happy to do so.
Are you fimiliar with Custom views for modules?

[espcrm]

espcrm - sure. I'll be more than happy to do so.
Are you fimiliar with Custom views for modules?

I'm quite ignorant in that aspect emillod, as far as I went with any custom code, it is current a "copy and paste" for me until I get more knowledgeable.
But I have a tenancy to keep trying if it seem like it possible for me to do, but once if it too advance I probably just write a long report of my failure.

[emillod]

espcrm can you tell me what you want to achieve? I mean what you want to button do for you. Open new website? Copy something?

[espcrm]

espcrm can you tell me what you want to achieve? I mean what you want to button do for you. Open new website? Copy something?

As a learning, just a button let in (for example): Contacts > click ... > Create Account. Then field the is automatic copy from Contact to Account (such as Name, address, phone, etc), similar to how "Create Task" in Email would copy the Name, prefix the word "Email:", copy Email Content into Description.


In the future, I hoping to be able to do this after I learn how to do the above, the more advance and compliment button I would like to be able to do is in the Email system as well. Where click the "down arrow" in the From email would give these option, "Create Contact, Create Lead, Add to Contact, Add to Lead". These "Add to" button is quite good to copy data over.

[espcrm]

Hi guys, I manage to make some success with the drop down button. It is not fully functional but it is a start. Couldn't think of ways to get the account name to link up here is how I add an "Add Account" button to Email list.

Edit this file:
/client/src/views/email/detail.js

I firstly add this menu: (please note Lead and Contact is original code, the account part is code we trying to create

if (status == 'Archived') {
if (!this.model.get('parentId')) {
this.addMenuItem('dropdown', {
label: 'Create Lead',
action: 'createLead',
acl: 'create',
aclScope: 'Lead'
});

this.addMenuItem('dropdown', {
label: 'Create Contact',
action: 'createContact',
acl: 'create',
aclScope: 'Contact'
});
this.addMenuItem('dropdown', {
label: 'Create Account',
action: 'createAccount',
acl: 'create',
aclScope: 'Account'
});
}
}

There is a couple of this section, I believe we add these code so that after we create it, we can't "Create a new one", the Menu get remove.

this.removeMenuItem('createContact');
this.removeMenuItem('createLead');
this.removeMenuItem('createAccount');

This code here is important for the button to work, basically all I did was Copy/Paste the actionCreateContact and change anything that say "contact to Account";

So it become something like this after a copy/paste, I paste it after the actionCreateContact finish and before the actionSend start.

actionCreateContact: function () {
var attributes = {};

var emailHelper = new EmailHelper(this.getLanguage(), this.getUser(), this.getDateTime(), this.getAcl());

var fromString = this.model.get('fromString') || this.model.get('fromName');
if (fromString) {
var fromName = emailHelper.parseNameFromStringAddress(fromString) ;
if (fromName) {
var firstName = fromName.split(' ').slice(0, -1).join(' ');
var lastName = fromName.split(' ').slice(-1).join(' ');
attributes.firstName = firstName;
attributes.lastName = lastName;
}
}

if (this.model.get('replyToString')) {
var str = this.model.get('replyToString');
var p = (str.split(';'))[0];
attributes.emailAddress = emailHelper.parseAddressFromStringAddress(p);
var fromName = emailHelper.parseNameFromStringAddress(p);
if (fromName) {
var firstName = fromName.split(' ').slice(0, -1).join(' ');
var lastName = fromName.split(' ').slice(-1).join(' ');
attributes.firstName = firstName;
attributes.lastName = lastName;
}
}

if (!attributes.emailAddress) {
attributes.emailAddress = this.model.get('from');
}
attributes.emailId = this.model.id;

var viewName = this.getMetadata().get('clientDefs.Contact.modalVi ews.edit') || 'views/modals/edit';

this.notify('Loading...');
this.createView('quickCreate', viewName, {
scope: 'Contact',
attributes: attributes,
}, function (view) {
view.render();
view.notify(false);
this.listenToOnce(view, 'after:save', function () {
this.model.fetch();
this.removeMenuItem('createContact');
this.removeMenuItem('createLead');
this.removeMenuItem('createAccount');
view.close();
}.bind(this));
this.listenTo(view, 'before:save', function () {
this.getView('record').blockUpdateWebSocket(true);
}, this);
}.bind(this));

},
actionCreateAccount: function () {
var attributes = {};

var emailHelper = new EmailHelper(this.getLanguage(), this.getUser(), this.getDateTime(), this.getAcl());

var fromString = this.model.get('fromString') || this.model.get('fromName');
if (fromString) {
var fromName = emailHelper.parseNameFromStringAddress(fromString) ;
if (fromName) {
var firstName = fromName.split(' ').slice(0, -1).join(' ');
var lastName = fromName.split(' ').slice(-1).join(' ');
attributes.firstName = firstName;
attributes.lastName = lastName;
}
}

if (this.model.get('replyToString')) {
var str = this.model.get('replyToString');
var p = (str.split(';'))[0];
attributes.emailAddress = emailHelper.parseAddressFromStringAddress(p);
var fromName = emailHelper.parseNameFromStringAddress(p);
if (fromName) {
var firstName = fromName.split(' ').slice(0, -1).join(' ');
var lastName = fromName.split(' ').slice(-1).join(' ');
attributes.firstName = firstName;
attributes.lastName = lastName;
}
}

if (!attributes.emailAddress) {
attributes.emailAddress = this.model.get('from');
}
attributes.emailId = this.model.id;

var viewName = this.getMetadata().get('clientDefs.Account.modalVi ews.edit') || 'views/modals/edit';

this.notify('Loading...');
this.createView('quickCreate', viewName, {
scope: 'Account',
attributes: attributes,
}, function (view) {
view.render();
view.notify(false);
this.listenToOnce(view, 'after:save', function () {
this.model.fetch();
this.removeMenuItem('createContact');
this.removeMenuItem('createLead');
this.removeMenuItem('createAccount');
view.close();
}.bind(this));
this.listenTo(view, 'before:save', function () {
this.getView('record').blockUpdateWebSocket(true);
}, this);
}.bind(this));

},

The issue now is, "FirstName" and "LastName" bit, which work for Contact but not for Account. I still need to find out how to change it, looking at Create Task and Create Case didn't help me. Anyway this is a start! Hopefully can figure out how to add more button.

My CRM did get a bad server response loop after Rebuild and Refresh webpage; if you do run into it. One way to fix is delete the folder:

/data/cache/