Open a Classic UI page from a custom handler
To implement the example:
- Set up the page UI. Read more >>>
- Set up how to open Classic UI pages. Read more >>>
Add the following buttons to the custom request page:
-
Edit event. Must open the event page that has the specified ID.
-
Create FAQ. Must open the new knowledge base page that has
New FAQ
name andFAQ
type.
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 page.
For this example, add the following buttons:
- button that opens the “Networking Day” event page using the specified ID
- button that opens the new knowledge base page
To do this:
-
Add a Button type component to the toolbar of the Freedom UI Designer.
-
Click and fill out the button properties.
Element
Property
Property value
Button that opens the “Networking Day” event page using the specified ID
Title
Edit event
Button that opens the new knowledge base page
Title
Create FAQ
Style
Primary
-
Save the changes.
2. Set up how to open Classic UI pages
-
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 →EditEventButton
element. - Bind the sending of the custom
usr.EditEventRequest
request to theclicked
button event. - Go to the
CreateFaqButton
element. - Bind the sending of the custom
usr.CreateFaqRequest
request to theclicked
button event.
viewConfigDiff schema sectionviewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
/* Button that opens the event page using the specified ID. */
{
"operation": "insert",
"name": "EditEventButton",
"values": {
...,
"clicked": {
/* Bind the sending of the custom request to the clicked button event. */
"request": "usr.EditEventRequest"
}
},
...
},
/* Button that opens the new knowledge base page. */
{
"operation": "insert",
"name": "CreateFaqButton",
"values": {
...,
"clicked": {
/* Bind the sending of the custom request to the clicked button event. */
"request": "usr.CreateFaqRequest"
}
},
...
}
]/**SCHEMA_VIEW_CONFIG_DIFF*/, - Go to the
-
Implement the custom request handler.
For this example, implement the custom
usr.EditEventRequest
andusr.CreateFaqRequest
request handlers.-
Go to the
handlers
schema section. -
Implement the
usr.EditEventRequest
request handler.-
Retrieve the instance of the
sdk.HandlerChainService
service. -
Send the
crt.UpdateRecordRequest
system request that opens the “Networking Day” event page using the specified ID.View the relevant ID in the browser address bar. For this example, open the “Networking Day” event page whose ID is “60cb269d-7447-4347-b657-63030cbd810e.”
-
-
Implement the
usr.CreateFaqRequest
request handler.- Retrieve the instance of the
sdk.HandlerChainService
service. - Send the
crt.CreateRecordRequest
system request that opens the new knowledge base page. Both Freedom UI and Classic UI open record pages in a similar way. When Creatio adds a record, you can pass the needed column values. Populate the Name and Type fields with theNew FAQ
andFAQ
, respectively. View the ID of the FAQ type in the Knowledge base article types lookup. For this example, the ID of the FAQ type is “80bb327e-f36b-1410-a29d-001d60e938c6.”
- Retrieve the instance of the
handlers schema sectionhandlers: /**SCHEMA_HANDLERS*/[
{
request: "usr.EditEventRequest",
/* 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 to open the event page that has the specified ID. */
await handlerChain.process({
type: 'crt.UpdateRecordRequest',
entityName: 'Event',
recordId: '60cb269d-7447-4347-b657-63030cbd810e',
$context: request.$context,
scopes: [...request.scopes]
});
/* Call the next handler if it exists and return its result. */
return next?.handle(request);
}
},
{
request: "usr.CreateFaqRequest",
/* 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 to open the new knowledge base page. Populate the Name and Type fields with the specified values. */
await handlerChain.process({
type: 'crt.CreateRecordRequest',
entityName: 'KnowledgeBase',
defaultValues: [
{
attributeName: 'Name',
value: 'New FAQ'
},
{
attributeName: 'Type',
value: '80bb327e-f36b-1410-a29d-001d60e938c6'
}
],
$context: request.$context,
scopes: [...request.scopes]
});
/* Call the next handler if it exists and return its result. */
return next?.handle(request);
}
}
]/**SCHEMA_HANDLERS*/, -
-
Save the changes.
View the result
To view the outcome of the example that opens the event page:
- Open the Requests section.
- Create a request.
- Click Edit event.
As a result, Creatio will open the “Networking Day” event page whose ID is “60cb269d-7447-4347-b657-63030cbd810e.” View the result >>>
To view the outcome of the example that opens the new knowledge base page and populates fields:
- Open the Requests section.
- Create a request named
New request
. - Click Create FAQ.
As a result, Creatio will open the new knowledge base page and populate the Name and Type fields with New FAQ
and FAQ
, respectively. 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": "Feed",
"values": {
"dataSourceName": "PDS",
"entitySchemaName": "UsrRequests"
}
},
{
"operation": "merge",
"name": "AttachmentList",
"values": {
"columns": [
{
"id": "9de1e677-a3a9-433a-b40c-955bb81b095e",
"code": "AttachmentListDS_Name",
"caption": "#ResourceString(AttachmentListDS_Name)#",
"dataValueType": 28,
"width": 200
}
]
}
},
/* Button that opens the event page using the specified ID. */
{
"operation": "insert",
"name": "EditEventButton",
"values": {
"type": "crt.Button",
"caption": "#ResourceString(EditEventButton_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.EditEventRequest",
},
"clickMode": "default"
},
"parentName": "CardToolsContainer",
"propertyName": "items",
"index": 0
},
/* Button that opens the new knowledge base page. */
{
"operation": "insert",
"name": "CreateFaqButton",
"values": {
"type": "crt.Button",
"caption": "#ResourceString(CreateFaqButton_caption)#",
"color": "primary",
"disabled": false,
"size": "large",
"iconPosition": "only-text",
"visible": true,
"clicked": {
/* Bind the sending of the custom request to the clicked button event. */
"request": "usr.CreateFaqRequest",
},
},
"parentName": "CardToolsContainer",
"propertyName": "items",
"index": 1
},
{
"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",
"multiline": false
},
"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.EditEventRequest",
/* 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 to open the event page that has the specified ID. */
await handlerChain.process({
type: 'crt.UpdateRecordRequest',
entityName: 'Event',
recordId: '60cb269d-7447-4347-b657-63030cbd810e',
$context: request.$context,
scopes: [...request.scopes]
});
/* Call the next handler if it exists and return its result. */
return next?.handle(request);
}
},
{
request: "usr.CreateFaqRequest",
/* 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 to open the new knowledge base page. Populate the Name and Type fields with the specified values. */
await handlerChain.process({
type: 'crt.CreateRecordRequest',
entityName: 'KnowledgeBase',
defaultValues: [
{
attributeName: 'Name',
value: 'New FAQ'
},
{
attributeName: 'Type',
value: '80bb327e-f36b-1410-a29d-001d60e938c6'
}
],
$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*/
};
});