Custom buttons

[Mihai]

I'm trying to add a custom button to the details view of an entity using the flow described here: https://docs.espocrm.com/development/custom-buttons/.
The button does appear in the right corner, but the event handler is not being triggered when I click it.

Is there anything I need to do beside rebuilding from the administration page. How is the js page supposed to be loaded in the browser (would espo just load all js files automatically or do I need to reference it somewhere)?

Thanks ,
Mihai,

[telecastg]

the line:

"handler": "custom:my-action-handler"

at custom/Espo/Custom/Resources/metadata/clientDefs/Lead.json is telling Espo to invoke the script located at client/custom/src/my-action-handler.js which performs whatever code you specify there.

After clearing cache and rebuilding there should be nothing else that you need to do.

I suggest that you check your code to verify that the path and file names are correct.

[Mihai]

Hi,

I've been staring for 30 minutes at the attached files - not seeing anything wrong.
I'm using Espo version 5.0.5 if that makes any difference.

Thanks,

[PhotoMommie]

I am also attempting to create a custom button that changes the task status to "Started" rather than having the user select "Edit" > "Status" > "Started".
Please, can I get a more comprehensive guide to do this?

Here is my-action-handler.js:

[PhotoMommie]

Maximus - I know this is right up your alley, you've always been the best resource!

[telecastg]

Hi,

Here's a working example that we are using in our in-house application:

Use case:


- We have a "RentalProspect" custom entity that has a "status" field with the following enum option values: "Received", "In Process", "Accepted", "Discarded".

- When displaying a RentalProspect entity in detail view, there is a button in the top right corner labeled "Discard", which when pressed will change the value of the field "status" to "Discarded" at the currently displayed RentalProspect record

- We want to display the "Discard" button ONLY when the current "status" value" is different that "Accepted" or "Discarded"

Steps:

1) Insert the following code into custom/Espo/Custom/Resources/metadata/clientDefs/RentalProspect.json (File automatically created by Espo when we defined the custom entity "RentalProspect")

    "menu": {
        "detail": {
            "buttons": [
                "__APPEND__",
                {
                    "label": "Discard",
                    "name": "discardButton",
                    "action": "discardProspect",
                    "style": "default",
                    "acl": "edit",
                    "aclScope": "RentalProspect",
                    "data": {
                        "handler": "custom:rental-prospect-action-handler"
                    },
                    "initFunction": "initManageRentalProspectAction"
                }
            ]
        }
    }

2) Create file client/custom/src/rental-prospect-action-handler.js

define('custom:rental-prospect-action-handler', ['action-handler'], function (Dep) {

    return Dep.extend({

        actionDiscardProspect: function (data, e) {
            // when the button is clicked, change the value of 'status' to 'Discarded'
            this.view.model.set('status', 'Discarded');
            this.view.model.save();
        },

        initManageRentalProspectAction: function () {
            // execute function controlButtonVisibility upon initially rendering the single record (model)
            this.controlButtonVisibility();
            // execute function controlButtonVisibility each time that the value of 'status' changes in the model
            this.view.listenTo(
                this.view.model, 'change:status', this.controlButtonVisibility.bind(this)
            );
        },

        controlButtonVisibility: function () {
            // display the button only if the current 'status' attribute is different than 'Accepted' or 'Discarded'
            if (~['Accepted', 'Discarded'].indexOf(this.view.model.get('status'))) {
                this.view.hideHeaderActionItem('discardButton');
            } else {
                this.view.showHeaderActionItem('discardButton');
            }
        }
    });
});

3) Clear cache and rebuild

Program Flow Notes:

When we added the above code in Step 1 to RentalProperty client defs metadata file, we told Espo to append a button to the top right corner of the record detail display with label "Discard" and that when such button is clicked to execute the function actionDiscardProspect () defined in the script client/custom/src/rental-prospect-action-handler.js

We also told Espo that in order to be able to see the button, a user must have "edit" rights for the RentalProspect entity and that the initial function to be executed by the action handler without any need for user input is initManageRentalProspectAction ().

We defined in the action handler class () what actions to execute when the functions are invoked (See the example code comments for further explanation)

Hopefully this example will help you figure out how to achieve your own goals.

[PhotoMommie]

telecastg What if I need 1 button to Change the status from "NOT STARTED" to "STARTED" and then to "COMPLETE"??

[telecastg]

We don't have a need for that functionality in our application, so I can't provide any code samples, but you can adapt the clientDefs metadata script to create two buttons ("Started" and "Complete") and then define the button actions and display properties in the action-handler class.

[PhotoMommie]

telecastg
Code:

define('custom:my-action-handler', ['action-handler'], function (Dep) {
return Dep.extend({
actionTest: function (data, e) {
// when the button is clicked, change the value of 'status' to 'STARTED'
this.view.model.set('status', 'STARTED');

// How do I get the button to change to set status to COMPLETE???

this.view.model.save();
},

initTest: function () {
// execute function controlButtonVisibility upon initially rendering the single record (model)
this.controlButtonVisibility();
// execute function controlButtonVisibility each time that the value of 'status' changes in the model
this.view.listenTo(
this.view.model, 'change:status', this.controlButtonVisibility.bind(this)
);
},
controlButtonVisibility: function () {
// display the button only if the current 'status' attribute is different than 'NOT STARTED'
if (~[''NOT STARTED'].indexOf(this.view.model.get('status'))) {
this.view.hideActionItem('startButton');
} else {
this.view.showActionItem('completeButton');
}
}
});
});

I see a small change in the ActionItem, yours shows HeaderActionItem is that different from just ActionItem??
Please see my note abve on the 2nd function of this button.
1 click to change status from NOT STARTED to STARTED, then again from STARTED to COMPLETE

HElp me Please :-) As, always, you are appreciated!

[PhotoMommie]

We don't have a need for that functionality in our application, so I can't provide any code samples, but you can adapt the clientDefs metadata script to create two buttons ("Started" and "Complete") and then define the button actions and display properties in the action-handler class.

AAAHHH I see, so the clientDefs code might look like this??

"menu": { 
"detail": {
"buttons": [
"__APPEND__", {

//button START
"label": "START",
"name": "startButton",
"action": "startJob",
"style": "default",
"acl": "edit",
"aclScope": "Task",

//button COMPLETE
"label": "COMPLETE",
"name": "completeButton",
"action": "completeJob",
"style": "default",
"acl": "edit",
"aclScope": "Task",

"data": {
"handler": "custom:my-action-handler"
},
"initFunction": "initTestAction"
}
]
}
}

[PhotoMommie]

telecastg
OK, I got the buttons loaded and sort-of working. I keep getting a Syntax error though.
Here is my code for clientDefs:

"menu": {
"detail": {
"buttons": [
"__APPEND__",
{
"label": "< START >",
"name": "startButton",
"action": "startJob",
"style": "default",
"data": {
"handler": "custom:my-action-handler"
},
"initFunction": "initStartAction"
}
]
}
},

And for the my-action-handler.js:

define('custom:my-action-handler', ['action-handler'], function (Dep) {
return Dep.extend({
actionStartJob: function (data, e) {
//when the button is clicked, change the value of 'status' to 'STARTED'
this.view.model.set('status', 'STARTED');
this.view.model.save();
},
//actionComplete: function (data, e) {
// when the button is clicked, change the value of 'status' to 'STARTED'
// this.view.model.set('status', 'Completed');
// this.view.model.save();
//},
initStartAction: function () {
this.controlButtonVisibility();
this.view.listenTo(
this.view.model, 'change:status', this.controlButtonVisibility.bind(this)
);
},
controlButtonVisibility: function () {
if (~['STARTED', 'Completed', 'Cancelled'].indexOf(this.view.model.get('status'))) {
this.view.hideHeaderActionItem('startButton');
} else {
this.view.showHeaderActionItem('startButton');
}
},
});
});

Can you help me get this working better?

[telecastg]

Sorry but I can't help with code debugging.

[PhotoMommie]

Maximus , can you give me your advice on this???

[item]

Hello,
is see : "I'm using Espo version 5.0.5 if that makes any difference."

sorry but espoCRM is always ehanced by Yuri and Teams..
you must upgrade your instance..

we can't give info with a old instance.. it's impossible !

And .. i think, what you will do .. and look on documentation... is not valid for 5.0.5 !

[PhotoMommie]

item I am using version 5.8.5...

[Mark]

Hi,
Is it possible to make a button that would move the user to a view for creating an associated record in another entity? If yes maybe there is a template for that or some kind of an example?