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

Example

Add an Open Studio homepage button to the custom request page. The button must open the "Studio homepage" 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 the Requests form page.

3. Add a button.

   For this example, add a button that opens the "Studio homepage" 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.

      Element	Property	Property value
      Button that opens the "Studio homepage" page	Title	Open Studio homepage
      	Style	Focus

4. Save the changes.

2. Set up how to open the Freedom UI page

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

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

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

4. Implement the custom request handler.

   1. Go to the handlers schema section.
   2. Implement the usr.OpenStudioHomepageRequest custom request handler.
   3. Retrieve the instance of the HTTP client from @creatio-devkit/common.
   4. Send the crt.OpenPageRequest base request handler that opens the "Studio homepage" page.
   handlers schema section

   handlers: /**SCHEMA_HANDLERS*/[
       {
           request: "usr.OpenStudioHomepageRequest",
           /* 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 to open the 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 Studio homepage.

As a result, Creatio will open the "Studio homepage" page. 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": "Feed",
                "values": {
                    "dataSourceName": "PDS",
                    "entitySchemaName": "UsrRequests"
                }
            },
            {
                "operation": "merge",
                "name": "AttachmentList",
                "values": {
                    "columns": [
                        {
                            "id": "ce254d27-ea86-46db-b53e-b3baeb6b3757",
                            "code": "AttachmentListDS_Name",
                            "caption": "#ResourceString(AttachmentListDS_Name)#",
                            "dataValueType": 28,
                            "width": 200
                        }
                    ]
                }
            },
            /* Button that opens the "Studio homepage" page. */
            {
                "operation": "insert",
                "name": "OpenStudioButton",
                "values": {
                    "type": "crt.Button",
                    "caption": "#ResourceString(OpenStudioButton_caption)#",
                    "color": "accent",
                    "disabled": false,
                    "size": "large",
                    "iconPosition": "only-text",
                    "visible": true,
                    "clicked": {
                        /* Bind the sending of the custom request to the "clicked" button event. */
                        "request": "usr.OpenStudioHomepageRequest"
                    },
                    "clickMode": "default"
                },
                "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.OpenStudioHomepageRequest",
                /* 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 to open the 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