Version: 8.0

Display the values of system variables on a page

Level: intermediate

To implement the example:

Set up the page UI. Read more >>>
Set up the retrieval of system variable values. Read more >>>

Example

Display the following system variable values on the custom request page:

the current contact name
the time offset value in hours between the time zone of the current contact and universal time (UTC)

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 in the Freedom UI Designer.

For this example, open Requests form page.

Add a label.

For this example, add the following labels:

label of the current contact name
label that contains the value of the current contact name from the system variable
label of the time offset from UTC
label that contains the value of the time offset from UTC from the system variable

To do this:

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

Click and fill out the label properties.

Element	Property	Property value
Label of the current contact name	Text	Current user
	Style	Caption
	Text color	#757575
Label that contains the value of the current contact name from the system variable	Text	Current user (value)
	Style	Body
Label of the time offset from UTC	Text	Contact time offset
	Style	Caption
	Text color	#757575
Label that contains the value of the time offset from UTC from the system variable	Text	Contact time offset (value)
	Style	Body

Save the changes.

2. Set up the retrieval of system variable values

Configure the business logic in the Client Module Designer. For this example, set up the retrieval of system variable values.

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.SysValuesService service to manage system variables.

AMD module dependencies
/* Declare the AMD module. */
define("UsrRequests_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 CurrentUser attribute that stores data of the current contact name.
Add a ContactTimezone attribute that stores data of the time offset in hours between the time zone of the current contact and UTC.

viewModelConfig schema section
viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
    "attributes": {
        ...,
        /* The attribute that stores the name of the current contact. */
        "CurrentUser": {},
        /* The attribute that stores the time offset in hours between the time zone of the current contact and universal time (UTC). */
        "ContactTimezone": {}
    },
    ...
}/**SCHEMA_VIEW_MODEL_CONFIG*/,

Bind an attribute to the label.

Go to the viewConfigDiff schema section → CurrentUserValue element.
Bind the $CurrentUser attribute to the caption property.
Go to the ContactTimeOffsetValue element.
Bind the $ContactTimezone attribute to the caption property.

viewConfigDiff schema section
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    /* Label that contains the value of the current contact name from the system variable. */
    {
        "operation": "insert",
        "name": "CurrentUserValue",
        "values": {
            ...,
            /* The property that handles the text contained in the element. Bound to the "CurrentUser" attribute. */
            "caption": "$CurrentUser",
        },
        ...
    },
    ...,
    /* Label that contains the value of the time offset from UTC from the system variable. */
    {
        "operation": "insert",
        "name": "ContactTimeOffsetValue",
        "values": {
            ...,
            /* The property that handles the text contained in the element. Bound to the "ContactTimezone" attribute. */
            "caption": "$ContactTimezone",
        },
        ...
    },
    ...,
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

Implement the base request handler.

Go to the handlers schema section.
Add a custom implementation of the crt.HandlerViewModelInitRequest base request handler.
1. Create an instance of the system value service from @creatio-devkit/common.
2. Upload the system variable values.
3. Retrieve the name of the current contact and specify the name in the CurrentUser attribute.
4. Convert the time zone offset value from minutes to hours.
5. Specify the converted value of the time zone offset in the ContactTimezone attribute.

handlers schema section
handlers: /**SCHEMA_HANDLERS*/[
    {
        request: "crt.HandleViewModelInitRequest",
        /* The custom implementation of the system request handler. */
        handler: async (request, next) => {
            /* Create an instance of the system value service from "@creatio-devkit/common." */
            const sysValuesService = new sdk.SysValuesService();
            /* Upload the system variable values. */
            const sysValues = await sysValuesService.loadSysValues();
            /* Retrieve the name of the current contact and specify the name in the "CurrentUser" attribute. */
            request.$context.CurrentUser = sysValues.userContact.displayValue;
            const offset = sysValues.userTimezoneOffset;
            /* Convert the time zone offset value from minutes to hours. */
            const offsetDisplayValue = (offset > 0 ? '+' : '') + (offset / 60) + 'h';
            /* Specify the converted value of the time zone offset in the "ContactTimezone" attribute. */
            request.$context.ContactTimezone = offsetDisplayValue;
            /* 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 that has an arbitrary name. For example, "Vacation."

As a result, Creatio will display the current contact name and the time offset value in hours between the time zone of the current contact and universal time (UTC) on the request page. The values will be retrieved from the corresponding system variables. View the result >>>

Source code

UsrRequests_FormPage
/* Declare the AMD module. */
define("UsrRequests_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
            },
            /* Label of the current contact name. */
            {
                "operation": "insert",
                "name": "CurrentUser",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 2,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Label",
                    "caption": "#ResourceString(CurrentUser_caption)#",
                    "labelType": "caption",
                    "labelThickness": "normal",
                    "labelEllipsis": false,
                    "labelColor": "#757575",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start"
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 1
            },
            /* Label that contains the value of the current contact name from the system variable. */
            {
                "operation": "insert",
                "name": "CurrentUserValue",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 3,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Label",
                    /* The property that handles the text contained in the element. Bound to the "CurrentUser" attribute. */
                    "caption": "$CurrentUser",
                    "labelType": "body-1",
                    "labelThickness": "normal",
                    "labelEllipsis": false,
                    "labelColor": "#181818",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start"
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 2
            },
            /* Label of the time offset from UTC. */
            {
                "operation": "insert",
                "name": "ContactTimeOffset",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 4,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Label",
                    "caption": "#ResourceString(ContactTimeOffset_caption)#",
                    "labelType": "caption",
                    "labelThickness": "normal",
                    "labelEllipsis": false,
                    "labelColor": "#757575",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start"
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 3
            },
            /* Label that contains the value of the time offset from UTC from the system variable. */
            {
                "operation": "insert",
                "name": "ContactTimeOffsetValue",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 5,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Label",
                    /* The property that handles the text contained in the element. Bound to the "ContactTimezone" attribute. */
                    "caption": "$ContactTimezone",
                    "labelType": "body-1",
                    "labelThickness": "normal",
                    "labelEllipsis": false,
                    "labelColor": "#181818",
                    "labelBackgroundColor": "transparent",
                    "labelTextAlign": "start"
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 4
            }
        ]/**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 current contact name. */
                "CurrentUser": {},
                /* The attribute that stores data of the time offset in hours between the time zone of the current contact and UTC. */
                "ContactTimezone": {},
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfig: /**SCHEMA_MODEL_CONFIG*/{
            "dataSources": {
                "PDS": {
                    "type": "crt.EntityDataSource",
                    "config": {
                        "entitySchemaName": "UsrAppSystemvariable"
                    }
                }
            }
        }/**SCHEMA_MODEL_CONFIG*/,
        handlers: /**SCHEMA_HANDLERS*/[
            {
                request: "crt.HandleViewModelInitRequest",
                /* The custom implementation of the system request handler. */
                handler: async (request, next) => {
                    /* Create an instance of the system value service from "@creatio-devkit/common." */
                    const sysValuesService = new sdk.SysValuesService();
                    /* Upload the system variable values. */
                    const sysValues = await sysValuesService.loadSysValues();
                    /* Retrieve the name of the current contact and specify the name in the "CurrentUser" attribute. */
                    request.$context.CurrentUser = sysValues.userContact.displayValue;
                    const offset = sysValues.userTimezoneOffset;
                    /* Convert the time zone offset value from minutes to hours. */
                    const offsetDisplayValue = (offset > 0 ? '+' : '') + (offset / 60) + 'h';
                    /* Specify the converted value of the time zone offset in the "ContactTimezone" attribute. */
                    request.$context.ContactTimezone = offsetDisplayValue;
                    /* 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 the page UI​

2. Set up the retrieval of system variable values​

View the result​

Source code​

Resources​

1. Set up the page UI

2. Set up the retrieval of system variable values

View the result

Source code

Resources