Version: 8.1

Customize dialog windows

Level: intermediate

note

This functionality is available for Creatio 8.1.4 and later.

@creatio-devkit/common includes the DialogService service that opens dialog windows.

Detailed example: Display the dialog window on a page.

To display a dialog window on a page:

Add a button to open a dialog window if needed. Instructions: Set up Button components (user documentation).
Add the dependencies. Instructions: Display the value of a system variable (similarly to step 2). Instead of the SysValuesService service, use the DialogService service that opens dialog windows.
Add an attribute. Instructions: Set up the field display condition (step 2).
Set up how to handle the action executed on button click. Instructions: Optimize the execution of a custom business logic (step 4).

Implement the base request handler.

Go to the handlers schema section.
Add a custom implementation of the crt.ShowDialog base request handler.
1. Create an instance of the dialog service from @creatio-devkit/common.
2. Retrieve data based on your business goals and specify data in the corresponding attribute.
3. Display the attribute value in the dialog window.

View an example of a crt.ShowDialog request handler that opens the dialog window and includes the SomeAttribute attribute value, below.

handlers schema section
handlers: /**SCHEMA_HANDLERS*/[
    {
        request: "crt.ShowDialog",
        /* Custom implementation of a system request handler. */
        handler: async (request, next) => {
            /* Create an instance of the dialog service from "@creatio-devkit/common." */
            const dialogService = new sdk.DialogService();
            /* Retrieve data based on your business logic. */
            ...;
            /* Specify data in the "SomeAttribute" attribute. */
            request.$context.SomeAttribute = someValue;
            /* Display the "SomeAttribute" attribute value in the dialog window. */
            const result = await dialogService.open({
                message: request.$context.SomeAttribute,
                actions: [
                    {
                        key: 'Yes',
                        config: {
                            color: 'primary',
                            caption: 'Caption of custom button',
                        }
                    },
                    {
                        key: 'No',
                        config: {
                            color: 'default',
                            caption: 'Caption of custom button',
                        }
                    },
                ]
            });
            /* Call the next handler if it exists and return its result. */
            return next?.handle(request);
        },
    },
] /**SCHEMA_HANDLERS*/,

See also​

See also