Skip to main content
Version: 8.1

Change where the request handler is invoked on the page

Level: intermediate

To implement the example:

  1. Set up the page UI. Read more >>>
  2. 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​

  1. Create an app based on the Records & business processes template. Instructions: Create an app manually (user documentation).

    For this example, create a Requests app.

  2. 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

  3. Open the form page in the Freedom UI Designer.

    For this example, open Requests form page.

  4. 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:

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

    2. 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

  5. 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.

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

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

  3. Add an attribute.

    1. Go to the viewModelConfigDiff schema section → values configuration object.
    2. Add a LastRequestNumber attribute that stores data of the "Request number" ("UsrLastRequestNumber" code) system setting.
    viewModelConfigDiff schema section
    viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
        {
            "operation": "merge",
            "path": [
                "attributes"
            ],
            "values": {
                ...,
                /* The attribute that stores data of the "Request number" ("UsrLastRequestNumber" code) system setting. */
                "LastRequestNumber": {},
            }
        },
        ...
    ]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,

  4. Bind an attribute to the label.

    1. Go to the viewConfigDiff schema section → UsrRequestNumberValue element.
    2. 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*/,

  5. Implement the base request handler.

    1. Go to the handlers schema section.

    2. 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*/,

  6. Save the changes.

View the result​

  1. Open the Requests section.
  2. Create a request that has an arbitrary name. For example, "Vacation."
  3. 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​

UsrRequests_FormPage
/* 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": "f4e2b09a-b70a-4af3-8ed4-71059b289b55",
                            "code": "AttachmentListDS_Name",
                            "caption": "#ResourceString(AttachmentListDS_Name)#",
                            "dataValueType": 28,
                            "width": 200
                        }
                    ]
                }
            },
            {
                "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
            },
            {
                "operation": "insert",
                "name": "GridContainer_4simnvr",
                "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",
                        "rowGap": "none"
                    },
                    "items": [],
                    "fitContent": true,
                    "visible": true,
                    "color": "transparent",
                    "borderRadius": "none",
                    "padding": {
                        "top": "none",
                        "right": "none",
                        "bottom": "none",
                        "left": "none"
                    },
                    "alignItems": "stretch"
                },
                "parentName": "SideAreaProfileContainer",
                "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": "#MacrosTemplateString(#ResourceString(UsrRequestNumber_caption)#)#",
                    "labelType": "caption",
                    "labelThickness": "default",
                    "labelEllipsis": false,
                    "labelColor": "#757575",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start",
                    "visible": true
                },
                "parentName": "GridContainer_4simnvr",
                "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": "default",
                    "labelEllipsis": false,
                    "labelColor": "auto",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start"
                },
                "parentName": "GridContainer_4simnvr",
                "propertyName": "items",
                "index": 1
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
            {
                "operation": "merge",
                "path": [
                    "attributes"
                ],
                "values": {
                    "UsrName": {
                        "modelConfig": {
                            "path": "PDS.UsrName"
                        }
                    },
                    /* The attribute that stores data of the "Request number" ("UsrLastRequestNumber" code) system setting. */
                    "LastRequestNumber": {},
                }
            },
            {
                "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: "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