Customize dialog windows

Level: intermediate

@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:

1. Add a button to open a dialog window if needed. Instructions: Set up Button components (user documentation).

2. 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.

3. Add an attribute. Instructions: Set up the field display condition (step 2).

4. Set up how to handle the action executed on button click. Instructions: Optimize the execution of a custom business logic (step 4).

5. Implement the base request handler.

   1. Go to the handlers schema section.

   2. 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

Set up Button components (user documentation)

Display the value of a system variable

Customize fields (Freedom UI)

Optimize the execution of a custom business logic