Open a Freedom UI page from a custom handler
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
-
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. -
Open the Handler Chain Service form page page in the working area of the
Handler Chain Service
app page. -
Add a button that opens the
StudioHomePage
page.-
Add a Button type component to the toolbar of the Freedom UI Designer.
-
Click in the action panel of the Freedom UI Designer and set the Title button property in the setup area to "Open page."
-
-
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.
-
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*/ {
...
};
}); -
Change the
clicked
property value for theOpenPageButton
element in theviewConfigDiff
schema section tousr.OpenUsrTestPageRequest
. Theclicked
property handles the action executed on button click.viewConfigDiff schema sectionviewConfigDiff: /**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*/, -
Implement the
usr.OpenUsrTestPageRequest
custom query handler in thehandlers
schema section.- Retrieve the instance of the
sdk.HandlerChainService
singleton service that opens pages. - Send the
crt.OpenPageRequest
system query that opens theStudioHomePage
page.
handlers schema sectionhandlers: /**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*/, - Retrieve the instance of the
-
Click Save on the Client Module Designer's toolbar.
Outcome of the example
To view the outcome of the example:
- Open the
Handler Chain Service
app page and click Run app. - Click New on the
Handler Chain Service
app toolbar. - 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
/* 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*/
};
});