How to create a Print Button in the Detail View?

[Triggerz]

Hi,

I am trying to create a Print button in the detail view by following the instructions on the documentation link Buttons & Actions.

I was able to create the Definition and Handler Class and was able to show the button in the detail view on the top right corner. But I need help on how I can print the record if I click the button. Hoping that you could also help me on this.


This is the Definition that I appended in my CCashar.json file

"menu": {
        "detail": {
            "buttons": [
                "__APPEND__",
                {
                    "label": "My Action",
                    "name": "myAction",
                    "action": "myAction",
                    "style": "default",
                    "acl": "edit",
                    "aclScope": "Lead",
                    "handler": "custom:my-print-car",
                    "initFunction": "initMyAction",
                    "actionFunction": "myAction",
                    "checkVisibilityFunction": "isMyActionVisible"
                }
            ]
        }
    }

This is the Handler that I created : my-print-car.js

define('custom:my-print-car', ['action-handler'], (Dep) => {

    return class extends Dep {

        initMyAction() {}

        myAction(data, e) {
            this.view.disableMenuItem('myAction');

            Espo.Ajax.getRequest('Lead/' + this.view.model.id)
                .then(response => {
                    console.log(response);

                    this.view.enableMenuItem('myAction');
                })
                .catch(() => this.view.enableMenuItem('myAction'));
        }      

        isMyActionVisible() {
            return !['Converted', 'Dead', 'Recycled'].includes(this.view.model.get('status'));
        }
    }
});​

Thanks

[Triggerz]

Hi everyone, not sure why my post has a redirect tag on it. Just wanted to check if there is something wrong on it. Thanks...

[lazovic]

Your question is not about something general from UI (formula script, default functionality question, etc.). It is about coding nuances; that's why this topic was placed in the appropriate thread. Here, the community with coding skills can help you find the problem and explain how to solve it correctly.

[shalmaxb]

Hi, you could do it much easier, when you add a link button. This you may achieve by an editor field with the formatted HTML/Bootsrap-Code or with this extension: https://forum.espocrm.com/forum/exte...on-link-button

[Triggerz]

Hi lazovic, thanks for the explanation why it was moved to the Developer Help section.

Hi shalmaxb, thanks for your response. I looked at the extension and looks okay, however I prefer to place the button at the top right corner of the screen.
Is there a guide on how I can call a PDF Template and be able to open this in a new window?

Thanks...

[Triggerz]

I tried updating my CCashar.json with the following code :

    "menu": {
        "detail": {
            "buttons": [
                "__APPEND__",
                {
                    "label": "Print",
                    "name": "printCAR",
                    "action": "myAction",
                    "style": "primary",
                    "acl": "edit",
                    "aclScope": "CCashar",
                    "handler": "custom:my-print-car",
                    "initFunction": "initMyAction",
                    "actionFunction": "myAction",
                    "checkVisibilityFunction": "isMyActionVisible"
                }
            ]
        }
    }

And updated the my-print-car.js with the following code:

define('custom:my-print-car', ['print-car'], (Dep) => {
    return class extends Dep {
        initMyAction() {}
        myAction(data, e) {
            //this.view.disableMenuItem('myAction');
            var url_param = 'https://google.com';
            window.open(url_param);
            Espo.Ajax.getRequest('CCashar/' + this.view.model.id)
                .then(response => {
                    console.log(response);
                    this.view.enableMenuItem('myAction');
                })
                .catch(() => this.view.enableMenuItem('myAction'));
        }      
        isMyActionVisible() {
            return !['Converted', 'Dead', 'Recycled'].includes(this.view.model.get('status'));
        }
    }
});​

But everytime I click the Print button in the UI, I am getting an Error 404 : Not Found. Please see attached screenshot.

Not sure what I am missing, hope you can help me with it.

Thanks

[Kharg]

Are you trying to open a specific template with the button?

Should it open the pdf template of the record?

[Triggerz]

Hi Kharg, yes, I wanted to open a pdf template of the record. Is this also possible with the link button extension?

Thanks

[Kharg]

Yes, that’s also possible with link button.

You just have to use the open new tab mode and add the template url using a formula to append the id of the record

[Triggerz]

Thanks Kharg. Can you also help me with the Error 404: Not Found? I also need it for another use case where I need to add a link in the menu so that users can download a Cash Voucher form document. Thanks...

[Kharg]

Could you provide more details?

[Triggerz]

Hi Kharg, I just need a button that will open a link in a new tab. However, even after defining the url_param below, I am still getting an Error 404:Not Found.

var url_param = 'https://google.com';
window.open(url_param);

Thanks

[Kharg]

Please, share your extension and I will take a look