Skip to main content
Version: 8.2

Display the dialog window on a page

Level: intermediate

To implement the example:

  1. Set up the page UI. Read more >>>
  2. Set up how to display the dialog window. Read more >>>
Example

Add a Show contact ID button to the base contact page. The button opens the dialog window and returns the ID of the current contact.

1. Set up the page UI​

  1. Open form page in the Freedom UI Designer.

    For this example, open the Contacts form page in the Customer 360 app.

  2. Add a button.

    For this example, add the button that opens the dialog window and returns the ID of the current contact.

    To do this:

    1. Add a Button type component to the toolbar of the Freedom UI Designer.

    2. Click and fill out the button properties.

      Element

      Property

      Property value

      Button that opens the dialog window and returns the ID of the current contact.

      Title

      Show contact ID

      Style

      Focus

  3. Save the changes.

2. Set up how to display the dialog window​

  1. Open the source code of the Freedom UI page. To do this, click .

  2. Add the dependencies. To do this, add @creatio-devkit/common library as a dependency. The library includes the DialogService service that opens dialog windows.

    AMD module dependencies
    /* Declare the AMD module. */
    define("Contacts_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
        return {
            ...
        }
    });

  3. Add an attribute.

    1. Go to the viewModelConfigDiff schema section → values configuration object.
    2. Add a ContactID attribute that stores data of the contact ID.
    viewModelConfigDiff schema section
    viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
        {
            "operation": "merge",
            "path": [
                "attributes",
                ...,
            ],
            "values": {
                ...,
                /* The attribute that stores data of the contact ID. */
                "ContactID": {},
            }
        },
        ...
    ]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,

  4. Set up how to handle the action executed on button click.

    1. Go to the viewConfigDiff schema section → UsrShowContactIdButton element.
    2. Bind the sending of the base crt.ShowDialog request to the clicked button event.
    viewConfigDiff schema section
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        /* Button that opens the dialog window and returns the ID of the current contact. */
        {
            "operation": "insert",
            "name": "UsrShowContactIdButton",
            "values": {
                ...,
                "clicked": {
                    /* Bind the sending of the base request to the "clicked" button event. */
                    "request": "crt.ShowDialog"
                }
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

  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 the current contact ID and specify it in the ContactID attribute.
      3. Display the ContactID attribute value in the dialog window.
    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.ShowDialog",
            /* The custom implementation of the system request handler. */
            handler: async (request, next) => {
                /* Create an instance of the dialog service from "@creatio-devkit/common." */
                const dialogService = new sdk.DialogService();
                /* Retrieve the current contact ID and specify it in the "ContactID" attribute. */
                request.$context.ContactID = await request.$context['Id'];
                /* Display the "ContactID" attribute value in the dialog window. */
                const result = await dialogService.open({
                    message: request.$context.ContactID,
                    actions: [
                        {
                            key: 'Yes',
                            config: {
                                color: 'primary',
                                caption: 'Close',
                            }
                        },
                    ]
                });
                /* Call the next handler if it exists and return its result. */
                return next?.handle(request);
            },
        },
    ] /**SCHEMA_HANDLERS*/,

  6. Save the changes.

View the result​

  1. Open the Contacts section.
  2. Open a contact that has an arbitrary name. For example, "Alexander Wilson."
  3. Click Show contact ID.

As a result, Creatio will display the dialog window that includes the ID of the current contact. View the result >>>

Source code​

Contacts_FormPage
/* Declare the AMD module. */
define("Contacts_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            /* Button that opens the dialog window and returns the ID of the current contact. */
            {
                "operation": "insert",
                "name": "UsrShowContactIdButton",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(UsrShowContactIdButton_caption)#",
                    "color": "accent",
                    "disabled": false,
                    "size": "large",
                    "iconPosition": "only-text",
                    "visible": true,
                    "clicked": {
                        /* Bind the sending of the base request to the "clicked" button event. */
                        "request": "crt.ShowDialog"
                    }
                },
                "parentName": "ActionButtonsContainer",
                "propertyName": "items",
                "index": 0
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
            {
                "operation": "merge",
                "path": [
                    "attributes",
                    "modelConfig"
                ],
                "values": {
                    /* The attribute that stores data of the contact ID. */
                    "ContactID": {},
                }
            }
        ]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
        modelConfigDiff: /**SCHEMA_MODEL_CONFIG_DIFF*/[]/**SCHEMA_MODEL_CONFIG_DIFF*/,
        handlers: /**SCHEMA_HANDLERS*/[
           {
                request: "crt.ShowDialog",
                /* The custom implementation of the system request handler. */
                handler: async (request, next) => {
                    /* Create an instance of the dialog service from "@creatio-devkit/common." */
                    const dialogService = new sdk.DialogService();
                    /* Retrieve the current contact ID and specify it in the "ContactID" attribute. */
                    request.$context.ContactID = await request.$context['Id'];
                    /* Display the "ContactID" attribute value in the dialog window. */
                    const result = await dialogService.open({
                        message: request.$context.ContactID,
                        actions: [
                            {
                                key: 'Yes',
                                config: {
                                    color: 'primary',
                                    caption: 'Close',
                                }
                            },
                        ]
                    });
                    /* Call the next handler if it exists and return its result. */
                    return next?.handle(request);
                },
            },
        ] /**SCHEMA_HANDLERS*/,
        converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
        validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
    };
});

Resources​

Package with example implementation