Skip to main content
Version: 8.2

Open a Classic UI page from a custom request 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 "Networking Day" event page.

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

  2. Open the form page.

    For this example, open the Requests form page.

  3. Add a button.

    For this example, add the following buttons:

    • button that opens the "Networking Day" event page
    • 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

      Title

      Edit event

      Button that opens the new knowledge base page

      Title

      Create FAQ

      Style

      Primary

  4. Save the changes.

2. Set up how to open Classic UI pages​

Configure the business logic in the Client Module Designer. For this example, set up how to open Classic UI pages.

  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 HandlerChainService service that opens pages.

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

  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 "Networking Day" event page. */
        {
            "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 handlers.

    1. Go to the handlers schema section.

    2. Implement the usr.EditEventRequest custom request handler.

      1. Retrieve the instance of the HTTP client from @creatio-devkit/common.
      2. Send the crt.UpdateRecordRequest base request handler that opens the "Networking Day" event page using the specified ID. View the ID of the "Networking Day" event page in the browser address bar. For this example, the ID is "60cb269d-7447-4347-b657-63030cbd810e."

    3. Implement the usr.CreateFaqRequest request handler.

      1. Retrieve the instance of the HTTP client from @creatio-devkit/common.
      2. Send the crt.CreateRecordRequest base request handler 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. Fill out the Name and Type fields using 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 is "80bb327e-f36b-1410-a29d-001d60e938c6."
    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "usr.EditEventRequest",
            /* The implementation of the custom request handler. */
            handler: async (request, next) => {
                /* Retrieve the instance of the HTTP client from "@creatio-devkit/common." */
                const handlerChain = sdk.HandlerChainService.instance;
                /* Send the base request handler 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",
            /* The implementation of the custom request handler. */
            handler: async (request, next) => {
                /* Retrieve the instance of the HTTP client from "@creatio-devkit/common." */
                const handlerChain = sdk.HandlerChainService.instance;
                /* Send the base request handler to open the new knowledge base page. Fill out the "Name" and "Type" fields using 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 "Networking Day" 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 that has an arbitrary name. For example, "Vacation."
  3. Click Create FAQ.

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

Source code​

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": "SaveButton",
                "values": {
                    "size": "large",
                    "iconPosition": "only-text"
                }
            },
            {
                "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 "Networking Day" event page. */
            {
                "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",
                /* The implementation of the custom request handler. */
                handler: async (request, next) => {
                    /* Retrieve the instance of the HTTP client from "@creatio-devkit/common." */
                    const handlerChain = sdk.HandlerChainService.instance;
                    /* Send the base request handler 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",
                /* The implementation of the custom request handler. */
                handler: async (request, next) => {
                    /* Retrieve the instance of the HTTP client from "@creatio-devkit/common." */
                    const handlerChain = sdk.HandlerChainService.instance;
                    /* Send the base request handler to open the new knowledge base page. Fill out the "Name" and "Type" fields using 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