Skip to main content
Version: 8.1

Change where the query handler is invoked on the page

Level: intermediate
Example

Display the number of the newest section record on the record page of the Requests custom section. Set the number to the custom system setting. Increment the number by 1 after saving the request page.

1. Set up page UI​

  1. Create a custom Requests app based on the Records & business processes template. To do this, follow the procedure in the user documentation: Create a custom app.

  2. Add a system setting that stores the request number.

    1. Click to open the System Designer. Click System settings in the System setup block.

    2. Click Add setting on the section toolbar.

    3. Fill out the system setting properties:

      • Set Name to "Request number."
      • Set Code to "UsrRequestLastNumber."
      • Select "Integer" in the Type property.
      • Set Default value to "1."

  3. Open the Requests form page page in the workspace of the Requests app page.

    The Requests form page page includes the Name field by default.

  4. Add a 2 columns component to the Freedom UI Designer workspace.

  5. Add a request number label.

    1. Add a component of the Label type to the first column of the 2 columns component of the Freedom UI Designer.

    2. Click the button on the Freedom UI Designer’s action panel and fill in the label’s properties in the setup area:

      • Set Title to "Create request."
      • Select "Caption" in the Style property.
      • Select the gray color in the Text color property.

  6. Add a title that contains the value of the system setting with the request number.

    1. Add a component of the Label type to the second column of the 2 columns component of the Freedom UI Designer.

    2. Click the button on the Freedom UI Designer’s action panel and fill in the title’s properties in the setup area:

      • Set Title to "Request number (value)."
      • Select "Body text" in the Style property.

  7. Click the button on the Freedom UI Designer’s action bar. The source code of the Freedom UI page opens after you save the page settings.

2. Change the origin of the query handler call​

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

  1. Enable the sdk. SysSettingsService system variable service. To do this, add the @creatio-devkit/common dependency to the AMD module.

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

  2. Add the UsrRequestLastNumber attribute to the viewModelConfigDiff schema section. The attribute stores the value of the UsrRequestLastNumber system setting.

    viewModelConfigDiff schema section
    viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
        "attributes": {
            ...,
            /* The attribute that stores the value of the UsrRequestLastNumber system setting. */
            "UsrRequestLastNumber": {}
        }
    }/**SCHEMA_VIEW_MODEL_CONFIG*/,

  3. Bind the caption property of the RequestNumberValue element to the $UsrRequestLastNumber model attribute in the viewConfigDiff schema section. The caption property is responsible for the text that the element contains.

    viewConfigDiff schema section
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
        ...,
        {
            "operation": "insert",
            "name": "RequestNumberValue",
            "values": {
                ...,
                /* The property responsible for the text that the element contains. Bound to the UsrRequestLastNumber attribute. */
                "caption": "$UsrRequestLastNumber",
                ...
            },
            ...
        }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

  4. Add a custom implementation of the crt.SaveRecordRequest system query handler to the handlers schema section. The handler is called by clicking the Save button on the request page toolbar.

    • Implement waiting for the execution of the next handler. In this example, it is the handler that saves the record.
    • Instantiate the system value service from @creatio-devkit/common after saving the record.
    • Get the value of the UsrRequestLastNumber system setting.
    • Send a query to update the value of the UsrRequestLastNumber system setting (increases it by 1).
    • Update the value of the UsrRequestLastNumber attribute.
    • Return the result of the saving.
    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.SaveRecordRequest",
            /* Implement the custom query handler. */
            handler: async (request, next) => {
                /* Wait for the next handler (in this case, the handler that saves the record) to execute. */
                const saveResult = await next.handle(request);
                /* Instantiate the system value service from @creatio-devkit/common after saving the record. */
                const sysSettingsService = new sdk.SysSettingsService();
                /* Retrieve the value of the UsrRequestLastNumber system setting. */
                const requestLastNumber = await sysSettingsService.getByCode('UsrRequestLastNumber');
                /* Send a query to update the value of the UsrRequestLastNumber system setting. */
                await sysSettingsService.update({
                    code: 'UsrRequestLastNumber',
                    /* The new value is larger than the previous one by 1. */
                    value: ++requestLastNumber.value
                });
                /* Update the value of the UsrRequestLastNumber attribute. */
                request.$context.UsrRequestLastNumber = requestLastNumber.value;
                /* Return the result of the saving. */
                return saveResult;
            }
        }
    ] /**SCHEMA_HANDLERS*/,

  5. Click Save on the Client Module Designer’s toolbar.

Outcome of the example​

To view the outcome of the example:

  1. Go to the Requests app page and click Run app.
  2. Click New on the Requests app toolbar.

As a result, when you click the Save button on the request page toolbar, Creatio will display the number of the last record created in the Requests section, increased by 1. The value is taken from the Request number (UsrRequestLastNumber code) system setting.

Source codes​

UsrAppRequests_FormPage
/* AMD module declaration. */
define("UsrAppRequests_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**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
            },
            {
                "operation": "insert",
                "name": "RequestNumber",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Label",
                    "caption": "#ResourceString(RequestNumber_caption)#",
                    "labelType": "caption",
                    "labelThickness": "normal",
                    "labelEllipsis": false,
                    "labelColor": "#757575",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start"
                },
                "parentName": "GridContainer_zaj7g34",
                "propertyName": "items",
                "index": 0
            },
            {
                "operation": "insert",
                "name": "RequestNumberValue",
                "values": {
                    "layoutConfig": {
                        "column": 2,
                        "row": 1,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Label",
                    /* The property responsible for the text that the element contains. Bound to the UsrRequestLastNumber attribute. */
                    "caption": "$UsrRequestLastNumber",
                    "labelType": "body-1",
                    "labelThickness": "normal",
                    "labelEllipsis": false,
                    "labelColor": "#181818",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start"
                },
                "parentName": "GridContainer_zaj7g34",
                "propertyName": "items",
                "index": 1
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
            "attributes": {
                "UsrName": {
                    "modelConfigDiff": {
                        "path": "PDS.UsrName"
                    }
                },
                "Id": {
                    "modelConfigDiff": {
                        "path": "PDS.Id"
                    }
                },
                /* The attribute that stores the value of the UsrRequestLastNumber system setting. */
                "UsrRequestLastNumber": {}
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfigDiff: /**SCHEMA_MODEL_CONFIG*/{
            "dataSources": {
                "PDS": {
                    "type": "crt.EntityDataSource",
                    "config": {
                        "entitySchemaName": "UsrAppRequests"
                    }
                }
            }
        }/**SCHEMA_MODEL_CONFIG*/,
        handlers: /**SCHEMA_HANDLERS*/[
            {
                request: "crt.SaveRecordRequest",
                /* Implement the custom query handler. */
                handler: async (request, next) => {
                    /* Wait for the next handler (in this case, the handler that saves the record) to execute. */
                    const saveResult = await next.handle(request);
                    /* Instantiate the system value service from @creatio-devkit/common after saving the record. */
                    const sysSettingsService = new sdk.SysSettingsService();
                    /* Retrieve the value of the UsrRequestLastNumber system setting. */
                    const requestLastNumber = await sysSettingsService.getByCode('UsrRequestLastNumber');
                    /* Send a query to update the value of the UsrRequestLastNumber system setting. */
                    await sysSettingsService.update({
                        code: 'UsrRequestLastNumber',
                        /* The new value is larger than the previous one by 1. */
                        value: ++requestLastNumber.value
                    });
                    /* Update the value of the UsrRequestLastNumber attribute. */
                    request.$context.UsrRequestLastNumber = requestLastNumber.value;
                    /* Return the result of the saving. */
                    return saveResult;
                }
            }
        ] /**SCHEMA_HANDLERS*/,
        converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
        validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
    };
});

Resources​

Package with example implementation