Open a Freedom UI page from a custom handler
To implement the example:
- Set up the page UI. Read more >>>
- Set up how to open the Freedom UI page. Read more >>>
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
-
Create an app based on the Records & business processes template. Instructions: Create an app manually (user documentation).
For this example, create a Requests app.
-
Open the form page.
For this example, open Requests form page.
-
Add a button that opens the Freedom UI page.
For this example, add a button that opens the
StudioHomePage
page. To do this:-
Add a Button type component to the toolbar of the Freedom UI Designer.
-
Click and fill out the button property.
Property
Property value
Title
Open page
-
-
Save the changes.
2. Set up how to open the Freedom UI page
-
Open the source code of the Freedom UI page. To do this, click .
-
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*/ {
...
};
); -
Set up how to handle the action executed on button click.
- Go to the
viewConfigDiff
schema section →OpenPageButton
element. - Bind the sending of the custom
usr.OpenCustomPageRequest
request to theclicked
button event.
viewConfigDiff schema sectionviewConfigDiff: /**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*/, - Go to the
-
Implement the custom request handler.
For this example, implement the custom
usr.OpenCustomPageRequest
request handler.- Go to the
handlers
schema section. - Retrieve the instance of the
sdk.HandlerChainService
service. - Send the
crt.OpenPageRequest
system request that opens theStudioHomePage
page.
handlers schema sectionhandlers: /**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*/, - Go to the
-
Save the changes.
View the result
- Open the Requests section.
- Create a request.
- Click Open page.
As a result, Creatio will open the StudioHomePage
Freedom UI page. View the result >>>
Source codes
/* 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*/
};
});