Version: 8.0

Change where the request handler is invoked on the page

Level: intermediate

To implement the example:

Set up the page UI. Read more >>>
Change the origin call of the request handler. Read more >>>

Example

Display the number of the newest request on the custom request page. Set the number to the custom system setting. Increase the request number by 1 after saving the page.

1. Set up 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.
Add a system setting.

For this example, add the system setting that stores the request number. To do this:
1. Open the System settings section. To do this, click in the top right → System setup → System settings.
2. Click Add setting and fill out the system setting properties.
  
  Element
  Property
  Property value
  System setting that stores the request number
  Name
  Request number
  Code
  UsrLastRequestNumber
  Type
  Integer
  Default value
  0
Open the form page in the Freedom UI Designer.

For this example, open Requests form page.

Element	Property	Property value
System setting that stores the request number	Name	Request number
Code	UsrLastRequestNumber
Type	Integer
Default value	0

Add labels.

For this example, add the following labels:

label of the request number
label that contains the value of the request number from the system setting

To do this:

Add a label to the working area of the Freedom UI Designer.

Click and fill out the label properties.

Element	Property	Property value
Label of the request number	Text	Request number
	Style	Caption
	Text color	#757575
Label that contains the value of the request number from the system setting	Text	Request number (value)
	Style	Body

Save the changes.

2. Change the origin call of the request handler

Configure the business logic in the Client Module Designer. For this example, change the origin call of the request handler.

Open the source code of the Freedom UI page. To do this, click .

Add the dependencies. To do this, add @creatio-devkit/common library as a dependency. The library includes the sdk.SysSettingsService service to manage system settings.

AMD module dependencies
/* Declare the AMD module. */
define("UsrAppRequests_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
    return {
        ...
    };
});

Add an attribute.

Go to the viewModelConfig schema section → attributes configuration object.
Add a LastRequestNumber attribute that stores data of the "Request number" ("UsrLastRequestNumber" code) system setting.

viewModelConfig schema section
viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
    "attributes": {
        ...,
        /* The attribute that stores data of the "Request number" ("UsrLastRequestNumber" code) system setting. */
        "LastRequestNumber": {},
    }
}/**SCHEMA_VIEW_MODEL_CONFIG*/,

Bind an attribute to the label.

Go to the viewConfigDiff schema section → UsrRequestNumberValue element.
Bind the $LastRequestNumber attribute to the caption property.

viewConfigDiff schema section
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    /* Label that contains the value of the request number from the system setting. */
    {
        "operation": "insert",
        "name": "UsrRequestNumberValue",
        "values": {
            ...,
            /* The property that handles the text contained in the element. Bound to the "LastRequestNumber" attribute. */
            "caption": "$LastRequestNumber",
        },
        ...
    },
    ...,
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

Implement the base request handler.

Go to the handlers schema section.
Add a custom implementation of the crt.SaveRecordRequest base request handler.
1. Create an instance of the system setting service from @creatio-devkit/common.
2. Retrieve the value of the "Request number" ("UsrLastRequestNumber" code) system setting.
3. Increase the value of the system setting, specify the new value in the LastRequestNumber attribute.

handlers schema section
handlers: /**SCHEMA_HANDLERS*/[
    {
        request: "crt.SaveRecordRequest",
        /* The custom implementation of the system request handler. */
        handler: async (request, next) => {
            /* Wait for the next handler to finish. For this example, the handler that saves the record. */
            await next?.handle(request);
            /* Create an instance of the system setting service from "@creatio-devkit/common." */
            const sysSettingsService = new sdk.SysSettingsService();
            /* Retrieve the value of the "Request number" ("UsrLastRequestNumber" code) system setting. */
            const lastNumber = await sysSettingsService.getByCode('UsrLastRequestNumber');
            /* Send a request to update the value of the "Request number" ("UsrLastRequestNumber" code) system setting. */
            await sysSettingsService.update({
                code: 'UsrLastRequestNumber',
                /* The new value is higher than the previous one by 1. */
                value: ++lastNumber.value
            });
            /* Specify the new value of the "Request number" ("UsrLastRequestNumber" code) system setting in the "LastRequestNumber" attribute. */
            request.$context.LastRequestNumber = lastNumber.value;
            /* Call the next handler if it exists and return its result. */
            return next?.handle(request);
        },
    },
] /**SCHEMA_HANDLERS*/,

Save the changes.

View the result

Open the Requests section.
Create a request.
Save the changes.

As a result, when you click the Save button on the request page toolbar, Creatio will display the number of the last created request, increased by 1. The values will be retrieved from the corresponding system setting. View the result >>>

Source codes

UsrAppRequests_FormPage
/* Declare the AMD module. */
define("UsrAppRequests_FormPage", /**SCHEMA_DEPS*/["@creatio/sdk" ]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
    return {
        viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
            {
                "operation": "insert",
                "name": "UsrName",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Input",
                    "label": "$Resources.Strings.UsrName",
                    "control": "$UsrName"
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 0
            },
            {
                "operation": "insert",
                "name": "GridContainer_zaj7g34",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 2,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.GridContainer",
                    "columns": [
                        "minmax(32px, 1fr)",
                        "minmax(32px, 1fr)"
                    ],
                    "rows": "minmax(max-content, 32px)",
                    "gap": {
                        "columnGap": "large"
                    },
                    "items": []
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 1
            },
            /* Label of the request number. */
            {
                "operation": "insert",
                "name": "UsrRequestNumber",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Label",
                    "caption": "#ResourceString(UsrRequestNumber_caption)#",
                    "labelType": "caption",
                    "labelThickness": "normal",
                    "labelEllipsis": false,
                    "labelColor": "#757575",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start"
                },
                "parentName": "GridContainer_zaj7g34",
                "propertyName": "items",
                "index": 0
            },
            /* Label that contains the value of the request number from the system setting. */
            {
                "operation": "insert",
                "name": "UsrRequestNumberValue",
                "values": {
                    "layoutConfig": {
                        "column": 2,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Label",
                    /* The property that handles the text contained in the element. Bound to the "LastRequestNumber" attribute. */
                    "caption": "$LastRequestNumber",
                    "labelType": "body",
                    "labelThickness": "normal",
                    "labelEllipsis": false,
                    "labelColor": "#181818",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start"
                },
                "parentName": "GridContainer_zaj7g34",
                "propertyName": "items",
                "index": 1
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
            "attributes": {
                "UsrName": {
                    "modelConfig": {
                        "path": "PDS.UsrName"
                    }
                },
                "Id": {
                    "modelConfig": {
                        "path": "PDS.Id"
                    }
                },
                /* The attribute that stores data of the "Request number" ("UsrLastRequestNumber" code) system setting. */
                "LastRequestNumber": {},
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfig: /**SCHEMA_MODEL_CONFIG*/{
            "dataSources": {
                "PDS": {
                    "type": "crt.EntityDataSource",
                    "config": {
                        "entitySchemaName": "UsrAppRequests"
                    }
                }
            }
        }/**SCHEMA_MODEL_CONFIG*/,
        handlers: /**SCHEMA_HANDLERS*/[
            {
                request: "crt.SaveRecordRequest",
                /* The custom implementation of the system request handler. */
                handler: async (request, next) => {
                    /* Wait for the next handler to finish. For this example, the handler that saves the record. */
                    await next?.handle(request);
                    /* Create an instance of the system setting service from "@creatio-devkit/common." */
                    const sysSettingsService = new sdk.SysSettingsService();
                    /* Retrieve the value of the "Request number" ("UsrLastRequestNumber" code) system setting. */
                    const lastNumber = await sysSettingsService.getByCode('UsrLastRequestNumber');
                    /* Send a request to update the value of the "Request number" ("UsrLastRequestNumber" code) system setting. */
                    await sysSettingsService.update({
                        code: 'UsrLastRequestNumber',
                        /* The new value is higher than the previous one by 1. */
                        value: ++lastNumber.value
                    });
                    /* Specify the new value of the "Request number" ("UsrLastRequestNumber" code) system setting in the "LastRequestNumber" attribute. */
                    request.$context.LastRequestNumber = lastNumber.value;
                    /* 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

1. Set up page UI​

2. Change the origin call of the request handler​

View the result​

Source codes​

Resources​

1. Set up page UI

2. Change the origin call of the request handler

View the result

Source codes

Resources