Custom Button + Custom Modal Form

[mixerito]

I am trying to combine two of the tutorials from Docs.

1. https://docs.espocrm.com/development/custom-buttons/
2. https://docs.espocrm.com/development/modal/

In detail view there is custom button, that should cause Modal to popup.

Seems easy, but from the tutorials above, I am unable to achieve this result.

If entry view is "action-handler", the method CreateView is unknown.

If entry view is "view", the NestedViews is null and functions fail on this (eg. translate()).

Can somebody provide some example showing this use case ?

Thanks in advance.

[mixerito]

Ok, found the answer for this.

Important is, that "action-handler" is not View, therefore it cannot call method CreateView.

So instead of calling this.createView(), one should call this.view.createView()

The other needed steps are covered in tutorials above.

[bandtank]

Thank you for posting this. It is exactly what I needed to know. In Espo V9+, this information is still relevant.

How do you close the modal? Calling this.close() causes an error:

Uncaught TypeError: this.close is not a function

[bandtank]

Here is what I did to make it work.

From the parent, which is an action handler, I call the modal with the following code:

      this.view.createView('dialog', 'custom:views/modals/reject-note', {
        id: this.view.model.id,
      }, view => {
        view.render();

        this.view.listenToOnce(view, 'done', response => {
        })
      });

The modal is created using this code:

define('custom:views/modals/reject-note', ['views/modal', 'model'], (ModalView, Model) => {

    return class extends ModalView {

        className = 'dialog dialog-record'

        templateContent = `
            <div class="record no-side-margin">{{{record}}}</div>
        `
        backdrop = true

        setup() {
            this.buttonList = [
                {
                    name: 'rejectNote',
                    text: this.translate('Reject Note', 'labels', 'OptNote'),
                    style: 'danger',
                    onClick: () => this.actionRejectNote(),
                },
                {
                    name: 'cancel',
                    label: 'Cancel',
                },
            ];

            const title = "Reject Note";

            this.headerText = title;

            this.formModel = new Model();

            this.formModel.setDefs({
                fields: {
                    'comment': {
                        type: 'varchar',
                        view: 'views/fields/varchar',
                        required: true,
                    },
                }
            });

            this.createView('record', 'views/record/edit-for-modal', {
                model: this.formModel,
                selector: '.record',
                detailLayout: [
                    {
                        rows: [
                            [
                                {
                                    name: 'comment',
                                    labelText: this.translate('Comment', 'fields', 'OptNote'),
                                },
                            ],
                        ],
                    },
                ],
            });
        }

        async actionRejectNote() {
            const recordView = this.getView('record');

            const isValid = recordView.processFetch();
            if (!isValid) {
                return;
            }

            Espo.Ui.notify(' ... ');

            const response = await Espo.Ajax.getRequest('OptNote/action/ChangeStatus', {
                id: this.options.id,
                action: "Reject",
                comment: this.formModel.attributes.comment,
            });

            Espo.Ui.success(this.translate('Done'));

            this.trigger('done', response);
            this.close();
        }
    }
});​

There may be other ways to do it, but that is what works in my situation.