Version: 8.3

Display the dialog window on a page

Level: intermediate

To implement the example:

Set up the page UI. Read more >>>
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

Open form page in the Freedom UI Designer.

For this example, open the Contacts form page in the Customer 360 app.
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
Save the changes.

Element	Property	Property value
Button that opens the dialog window and returns the ID of the current contact.	Title	Show contact ID
Style	Focus

2. Set up how to display the dialog window

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

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 {
        ...
    }
});

Add an attribute.

Go to the viewModelConfigDiff schema section → values configuration object.
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*/,

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

Go to the viewConfigDiff schema section → UsrShowContactIdButton element.
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*/,

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 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 base 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*/,

Save the changes.

View the result

Open the Contacts section.
Open a contact that has an arbitrary name. For example, "Alexander Wilson."
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 base 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

1. Set up the page UI​

2. Set up how to display the dialog window​

View the result​

Source code​

Resources​

1. Set up the page UI

2. Set up how to display the dialog window

View the result

Source code

Resources