Open a Freedom 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 the Freedom UI page. Read more >>>

Example

Add an Open page button to the custom request page. The button must open the StudioHomePage Freedom UI page.

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 Requests form page.

3. Add a button that opens the Freedom UI page.

   For this example, add a button that opens the StudioHomePage 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 property.

      Property	Property value
      Title	Open page

4. Save the changes.

2. Set up how to open the Freedom UI page

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 → OpenPageButton element.
   2. Bind the sending of the custom usr.OpenCustomPageRequest request to the clicked button event.
   viewConfigDiff schema section

   viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
       /* Button that opens the page. */
       {
           "operation": "insert",
           "name": "OpenPageButton",
           "values": {
               ...,
               "clicked": {
                   /* Bind the sending of the custom request to the clicked button event. */
                   "request": "usr.OpenCustomPageRequest"
               }
           },
           ...
       }
   ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

4. Implement the custom request handler.

   For this example, implement the custom usr.OpenCustomPageRequest request handler.

   1. Go to the handlers schema section.
   2. Retrieve the instance of the sdk.HandlerChainService service.
   3. Send the crt.OpenPageRequest system request that opens the StudioHomePage page.
   handlers schema section

   handlers: /**SCHEMA_HANDLERS*/[
       {
           request: "usr.OpenCustomPageRequest",
           /* 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 that opens the Freedom UI page. */
               await handlerChain.process({
                   type: 'crt.OpenPageRequest',
                   schemaName: 'StudioHomePage',
                   $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

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

As a result, Creatio will open the StudioHomePage Freedom UI page. 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": "SaveButton",
                "values": {
                    "size": "large",
                    "iconPosition": "only-text"
                }
            },
            {
                "operation": "merge",
                "name": "Feed",
                "values": {
                    "dataSourceName": "PDS",
                    "entitySchemaName": "UsrRequests"
                }
            },
            {
                "operation": "merge",
                "name": "AttachmentList",
                "values": {
                    "columns": [
                        {
                            "id": "ca4160dd-09cb-4d51-bb86-e0e3450104aa",
                            "code": "AttachmentListDS_Name",
                            "caption": "#ResourceString(AttachmentListDS_Name)#",
                            "dataValueType": 28,
                            "width": 200
                        }
                    ]
                }
            },
            /* Button that opens the page. */
            {
                "operation": "insert",
                "name": "OpenPageButton",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(OpenPageButton_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.OpenCustomPageRequest"
                    }
                },
                "parentName": "ActionButtonsContainer",
                "propertyName": "items",
                "index": 0
            },
            {
                "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"
                },
                "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.OpenCustomPageRequest",
                /* 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 that opens the Freedom UI page. */
                    await handlerChain.process({
                        type: 'crt.OpenPageRequest',
                        schemaName: 'StudioHomePage',
                        $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