Skip to main content
Version: 8.1

Open a Classic UI page from a custom handler

Level: intermediate

To implement the example:

  1. Set up the page UI. Read more >>>
  2. Set up how to open Classic UI pages. Read more >>>
Example

Add the following buttons to the custom request page:

  • Edit event. Must open the event page that has the specified ID.

  • Create FAQ. Must open the new knowledge base page that has New FAQ name and FAQ type.

1. Set up the page UI​

  1. Create an app based on the Records & business processes template. Instructions: Create an app manually (user documentation).

For this example, create a Requests app.

  1. Open the form page.

    For this example, open Requests form page.

  2. Add a button that opens the page.

    For this example, add the following buttons:

    • button that opens the “Networking Day” event page using the specified ID
    • button that opens the new knowledge base page

    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 “Networking Day” event page using the specified ID

      Title

      Edit event

      Button that opens the new knowledge base page

      Title

      Create FAQ

      Style

      Primary

  3. Save the changes.

2. Set up how to open Classic UI pages​

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

  2. Enable the sdk.HandlerChainService service that opens pages. To do this, add @creatio-devkit/common to the AMD module as a dependency.

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

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

    1. Go to the viewConfigDiff schema section → EditEventButton element.
    2. Bind the sending of the custom usr.EditEventRequest request to the clicked button event.
    3. Go to the CreateFaqButton element.
    4. Bind the sending of the custom usr.CreateFaqRequest request to the clicked button event.
    viewConfigDiff schema section
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        /* Button that opens the event page using the specified ID. */
        {
            "operation": "insert",
            "name": "EditEventButton",
            "values": {
                ...,
                "clicked": {
                    /* Bind the sending of the custom request to the clicked button event. */
                    "request": "usr.EditEventRequest"
                }
            },
            ...
        },
        /* Button that opens the new knowledge base page. */
        {
            "operation": "insert",
            "name": "CreateFaqButton",
            "values": {
                ...,
                "clicked": {
                    /* Bind the sending of the custom request to the clicked button event. */
                    "request": "usr.CreateFaqRequest"
                }
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

  4. Implement the custom request handler.

    For this example, implement the custom usr.EditEventRequest and usr.CreateFaqRequest request handlers.

    1. Go to the handlers schema section.

    2. Implement the usr.EditEventRequest request handler.

      1. Retrieve the instance of the sdk.HandlerChainService service.

      2. Send the crt.UpdateRecordRequest system request that opens the “Networking Day” event page using the specified ID.

        View the relevant ID in the browser address bar. For this example, open the “Networking Day” event page whose ID is “60cb269d-7447-4347-b657-63030cbd810e.”

    3. Implement the usr.CreateFaqRequest request handler.

      1. Retrieve the instance of the sdk.HandlerChainService service.
      2. Send the crt.CreateRecordRequest system request that opens the new knowledge base page. Both Freedom UI and Classic UI open record pages in a similar way. When Creatio adds a record, you can pass the needed column values. Populate the Name and Type fields with the New FAQ and FAQ, respectively. View the ID of the FAQ type in the Knowledge base article types lookup. For this example, the ID of the FAQ type is “80bb327e-f36b-1410-a29d-001d60e938c6.”
    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "usr.EditEventRequest",
            /* Implement the custom request handler. */
            handler: async (request, next) => {
                /* Retrieve the instance of the singleton service that opens pages. */
                const handlerChain = sdk.HandlerChainService.instance;
                /* Send the system request to open the event page that has the specified ID. */
                await handlerChain.process({
                    type: 'crt.UpdateRecordRequest',
                    entityName: 'Event',
                    recordId: '60cb269d-7447-4347-b657-63030cbd810e',
                    $context: request.$context,
                    scopes: [...request.scopes]
                });
                /* Call the next handler if it exists and return its result. */
                return next?.handle(request);
            }
        },
        {
            request: "usr.CreateFaqRequest",
            /* Implement the custom request handler. */
            handler: async (request, next) => {
                /* Retrieve the instance of the singleton service that opens pages. */
                const handlerChain = sdk.HandlerChainService.instance;
                /* Send the system request to open the new knowledge base page. Populate the Name and Type fields with the specified values. */
                await handlerChain.process({
                    type: 'crt.CreateRecordRequest',
                    entityName: 'KnowledgeBase',
                    defaultValues: [
                        {
                            attributeName: 'Name',
                            value: 'New FAQ'
                        },
                        {
                            attributeName: 'Type',
                            value: '80bb327e-f36b-1410-a29d-001d60e938c6'
                        }
                    ],
                    $context: request.$context,
                    scopes: [...request.scopes]
                });
                /* Call the next handler if it exists and return its result. */
                return next?.handle(request);
            }
        }
    ]/**SCHEMA_HANDLERS*/,

  5. Save the changes.

View the result​

To view the outcome of the example that opens the event page:

  1. Open the Requests section.
  2. Create a request.
  3. Click Edit event.

As a result, Creatio will open the “Networking Day” event page whose ID is “60cb269d-7447-4347-b657-63030cbd810e.” View the result >>>

To view the outcome of the example that opens the new knowledge base page and populates fields:

  1. Open the Requests section.
  2. Create a request named New request.
  3. Click Create FAQ.

As a result, Creatio will open the new knowledge base page and populate the Name and Type fields with New FAQ and FAQ, respectively. View the result >>>

Source codes​

UsrRequests_FormPage
/* Declare the AMD module. */
define("UsrRequests_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            {
                "operation": "merge",
                "name": "Feed",
                "values": {
                    "dataSourceName": "PDS",
                    "entitySchemaName": "UsrRequests"
                }
            },
            {
                "operation": "merge",
                "name": "AttachmentList",
                "values": {
                    "columns": [
                        {
                            "id": "9de1e677-a3a9-433a-b40c-955bb81b095e",
                            "code": "AttachmentListDS_Name",
                            "caption": "#ResourceString(AttachmentListDS_Name)#",
                            "dataValueType": 28,
                            "width": 200
                        }
                    ]
                }
            },
            /* Button that opens the event page using the specified ID. */
            {
                "operation": "insert",
                "name": "EditEventButton",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(EditEventButton_caption)#",
                    "color": "default",
                    "disabled": false,
                    "size": "large",
                    "iconPosition": "only-text",
                    "layoutConfig": {},
                    "visible": true,
                    "clicked": {
                        /* Bind the sending of the custom request to the clicked button event. */
                        "request": "usr.EditEventRequest",
                    },
                    "clickMode": "default"
                },
                "parentName": "CardToolsContainer",
                "propertyName": "items",
                "index": 0
            },
            /* Button that opens the new knowledge base page. */
            {
                "operation": "insert",
                "name": "CreateFaqButton",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(CreateFaqButton_caption)#",
                    "color": "primary",
                    "disabled": false,
                    "size": "large",
                    "iconPosition": "only-text",
                    "visible": true,
                    "clicked": {
                        /* Bind the sending of the custom request to the clicked button event. */
                        "request": "usr.CreateFaqRequest",
                    },
                },
                "parentName": "CardToolsContainer",
                "propertyName": "items",
                "index": 1
            },
            {
                "operation": "insert",
                "name": "UsrName",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Input",
                    "label": "$Resources.Strings.UsrName",
                    "control": "$UsrName",
                    "labelPosition": "auto",
                    "multiline": false
                },
                "parentName": "SideAreaProfileContainer",
                "propertyName": "items",
                "index": 0
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
            {
                "operation": "merge",
                "path": [
                    "attributes"
                ],
                "values": {
                    "UsrName": {
                        "modelConfig": {
                            "path": "PDS.UsrName"
                        }
                    }
                }
            },
            {
                "operation": "merge",
                "path": [
                    "attributes",
                    "Id",
                    "modelConfig"
                ],
                "values": {
                    "path": "PDS.Id"
                }
            }
        ]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
        modelConfigDiff: /**SCHEMA_MODEL_CONFIG_DIFF*/[
            {
                "operation": "merge",
                "path": [],
                "values": {
                    "primaryDataSourceName": "PDS"
                }
            },
            {
                "operation": "merge",
                "path": [
                    "dataSources"
                ],
                "values": {
                    "PDS": {
                        "type": "crt.EntityDataSource",
                        "config": {
                            "entitySchemaName": "UsrRequests"
                        },
                        "scope": "page"
                    }
                }
            }
        ]/**SCHEMA_MODEL_CONFIG_DIFF*/,
        handlers: /**SCHEMA_HANDLERS*/[
                {
                request: "usr.EditEventRequest",
                /* Implement the custom request handler. */
                handler: async (request, next) => {
                    /* Retrieve the instance of the singleton service that opens pages. */
                    const handlerChain = sdk.HandlerChainService.instance;
                    /* Send the system request to open the event page that has the specified ID. */
                    await handlerChain.process({
                        type: 'crt.UpdateRecordRequest',
                        entityName: 'Event',
                        recordId: '60cb269d-7447-4347-b657-63030cbd810e',
                        $context: request.$context,
                        scopes: [...request.scopes]
                    });
                    /* Call the next handler if it exists and return its result. */
                    return next?.handle(request);
                }
            },
            {
                request: "usr.CreateFaqRequest",
                /* Implement the custom request handler. */
                handler: async (request, next) => {
                    /* Retrieve the instance of the singleton service that opens pages. */
                    const handlerChain = sdk.HandlerChainService.instance;
                    /* Send the system request to open the new knowledge base page. Populate the Name and Type fields with the specified values. */
                    await handlerChain.process({
                        type: 'crt.CreateRecordRequest',
                        entityName: 'KnowledgeBase',
                        defaultValues: [
                            {
                                attributeName: 'Name',
                                value: 'New FAQ'
                            },
                            {
                                attributeName: 'Type',
                                value: '80bb327e-f36b-1410-a29d-001d60e938c6'
                            }
                        ],
                        $context: request.$context,
                        scopes: [...request.scopes]
                    });
                    /* 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