Add custom modal before:save of detail view

[sltctom]

Hi, I'd like to display a custom modal when I click on the "save" button after entering the edit mod.

This could be a simple modal window like "Are you sure you want to save?
Yes -> save the recording
No -> stop the process and leave the edit mod

How do I handle this in the contacts/detail.js file?

[rabii]

why would you do that, that would be very bad design and user experience. if you wish you could apply that logic to only sensitive data entry e.g changing email address / mobile which are personal data. these actions are usually done when deleting records (which exist in espocrm by default).

[Firyo]

why would you do that, that would be very bad design and user experience. if you wish you could apply that logic to only sensitive data entry e.g changing email address / mobile which are personal data. these actions are usually done when deleting records (which exist in espocrm by default).

The modal we wanna trigger will only be triggered in a specific case, the "Contact" entity here is only used as an example.
The fact is we want to trigger and handle if the save is confirmed or not using our own modal here (after the user saved the entity, either inline or general edit).

I hope it helps.

[item]

Hi,

i think you need to capture actionSave or other (i have no good knowledge, inline edit) in editView or detailView so you can open your modal.
i think, in some case, this is very usefull.. sample :
invoice status = send.
so you can't "change" data in the invoice.
you have forget something, you can change it with the modal "are you sure? invoice status is send!".
because, you can't change invoiceNumber for legality, if you delete the invoice, you loose one numberInvoice, not good for accounting.

[Firyo]

Hi,

i think you need to capture actionSave or other (i have no good knowledge, inline edit) in editView or detailView so you can open your modal.
i think, in some case, this is very usefull.. sample :
invoice status = send.
so you can't "change" data in the invoice.
you have forget something, you can change it with the modal "are you sure? invoice status is send!".
because, you can't change invoiceNumber for legality, if you delete the invoice, you loose one numberInvoice, not good for accounting.

Hi,

Thank for you answer.

What do you mean by "capture" actionSave.
Do you mean extending it ?

[item]

Hello,
sorry i have no sample, i know in the past, i have write something so in edit view i have forget :

actionSave: function (data) {
console.log('action save');
},

and no more Save if i remember.
Maybe with last espoCrm, this can't be now.

[sltctom]

I managed to trigger the modal when I save once I switched to edit mode.
I override the actionSave function in contact/record/detail, so I trigger my modal, "are you sure you want to save?
-> yes: Dep.prototype.actionSave.call(this)
-> no: do nothing

I also wanted to trigger my modal when I save from the inline edit.

So I created a view for the field I wanted to trigger, which I specified in entityDef/contact, for example:

"name": {
"type": "text",
"view": "espocrm:views/contacts/fields/name"
}

This view is inherited from 'views/fields/text' and I've overridden the inlineEditSave function where I trigger my modal, "are you sure you want to save"
-> yes: Dep.prototype.inelineEditSave.call(this)
-> no: do nothing

[rabii]

i see you already solved it

cool

[rabii]

Hi, I'd like to display a custom modal when I click on the "save" button after entering the edit mod.

This could be a simple modal window like "Are you sure you want to save?
Yes -> save the recording
No -> stop the process and leave the edit mod

How do I handle this in the contacts/detail.js file?

you can do it by creating a custom view for contact detail and use code below:

add a custom detail view in your contact clientDefs

{
   "recordViews": {
        "detail": "custom:views/contact/record/detail"
    },​
} 

Below is the code for both full edit and inline edit field.

define('custom:views/contact/record/detail', ['views/record/detail'], function (Dep) {

    return Dep.extend({
        
        actionSave: function () {
            this.confirm({
                message: this.translate('Are you sure you want to save contact?'),
                backdrop: 'static',
                confirmText: this.translate('Confirm'),
            }).then(() => {
                Dep.prototype.actionSave.call(this);
            });  
        },
        
        _initInlineEditSave: function () {
            this.listenTo(this.recordHelper, 'inline-edit-save', (field, o) => {
                this.confirm({
                    message: this.translate('Are you sure you want to save contact?'),
                    backdrop: 'static',
                    confirmText: this.translate('Confirm'),
                }).then(() => {
                    this.inlineEditSave(field, o);
                });
            });
        },

    });
});​​ 

Cheers