Open a Freedom UI page from a custom handler

Level: intermediate

Example

Add an Open page button to the record page of the custom Handler Chain Service section. The button must open the StudioHomePage Freedom UI page.

1. Set up the page UI

1. Create a custom Handler Chain Service app based on the Records & business processes template. To do this, follow the guide in the user documentation: Create a custom app.

2. Open the Handler Chain Service form page page in the working area of the Handler Chain Service app page.

3. Add a button that opens the StudioHomePage page.

   1. Add a Button type component to the toolbar of the Freedom UI Designer.

   2. Click in the action panel of the Freedom UI Designer and set the Title button property in the setup area to "Open page."

      

4. Click in the action panel of the Freedom UI Designer. After you save the page settings, Creatio opens the source code of the Freedom UI page.

2. Set up the way the Freedom UI page opens

Configure the business logic in the Client Module Designer. For this example, set up the way the Freedom UI page opens.

1. 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("UsrAppHandlerChainSe_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
           ...
       };
   });

2. Change the clicked property value for the OpenPageButton element in the viewConfigDiff schema section to usr.OpenUsrTestPageRequest. The clicked property handles the action executed on button click.

   viewConfigDiff schema section

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

3. Implement the usr.OpenUsrTestPageRequest custom query handler in the handlers schema section.

   1. Retrieve the instance of the sdk.HandlerChainService singleton service that opens pages.
   2. Send the crt.OpenPageRequest system query that opens the StudioHomePage page.
   handlers schema section

   handlers: /**SCHEMA_HANDLERS*/[
       {
           request: "usr.OpenUsrTestPageRequest",
           /* Implement the custom query handler. */
           handler: async (request, next) => {
               /* Retrieve the instance of the singleton service that opens pages. */
               const handlerChain = sdk.HandlerChainService.instance;
               /* Send the crt.OpenPageRequest system query that opens the Freedom UI page. */
               await handlerChain.process({
                   type: 'crt.OpenPageRequest',
                   schemaName: 'StudioHomePage',
                   $context: request.$context
               });
               /* Call the next handler if it exists and return its result. */
               return next?.handle(request);
           }
       }
   ] /**SCHEMA_HANDLERS*/,

4. Click Save on the Client Module Designer's toolbar.

Outcome of the example

To view the outcome of the example:

1. Open the Handler Chain Service app page and click Run app.
2. Click New on the Handler Chain Service app toolbar.
3. Click Open Page on the record page of the custom Handler Chain Service section.

As a result, Creatio will open the StudioHomePage Freedom UI page.

Source codes

UsrAppHandlerChainSe_FormPage

/* Declare the AMD module. */
define("UsrAppHandlerChainSe_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            {
                "operation": "insert",
                "name": "OpenPageButton",
                "values": {
                    "layoutConfig": {},
                    "type": "crt.Button",
                    "caption": "#ResourceString(OpenPageButton_caption)#",
                    "color": "default",
                    "disabled": false,
                    "clicked": {
                        /* Bind the sending of the custom usr.OpenUsrTestPageRequest query to the clicked button event. */
                        "request": "usr.OpenUsrTestPageRequest"
                    }
                },
                "parentName": "ActionButtonsContainer",
                "propertyName": "items",
                "index": 3
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
            "attributes": {
                "Id": {
                    "modelConfigDiff": {
                        "path": "PDS.Id"
                    }
                }
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfigDiff: /**SCHEMA_MODEL_CONFIG*/{
            "dataSources": {
                "PDS": {
                    "type": "crt.EntityDataSource",
                    "config": {
                        "entitySchemaName": "UsrAppHandlerChainSe"
                    }
                }
            }
        }/**SCHEMA_MODEL_CONFIG*/,
        handlers: /**SCHEMA_HANDLERS*/[
            {
                request: "usr.OpenUsrTestPageRequest",
                /* Implement the custom query handler. */
                handler: async (request, next) => {
                    /* Retrieve the instance of the singleton service that opens pages. */
                    const handlerChain = sdk.HandlerChainService.instance;
                    /* Send the crt.OpenPageRequest system query that opens the Freedom UI page. */
                    await handlerChain.process({
                        type: 'crt.OpenPageRequest',
                        schemaName: 'StudioHomePage',
                        $context: request.$context
                    });
                    /* 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