Skip to main content
Version: 8.1

Display the values of system variables on a page

Level: intermediate
Example

Display the following on the record page of the custom System variables section:

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

Retrieve the values from the corresponding system variables.

1. Set up the page UI

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

  2. Open the System variables form page page in the working area of the System variables app page.

  3. Delete the Name field the Requests form page page includes by default.

  4. Add the label of the current contact.

    1. Add a Label type component to the working area of the Freedom UI Designer.

    2. Click in the action panel of the Freedom UI Designer and fill out the label properties in the setup area.

      • Set Title to "Current user."
      • Select "Caption" in the Style property.
      • Select gray in the Text color property.
  5. Add the following labels in a similar way:

    • the value of the current contact name from the system variable
    • the time offset from UTC
    • the time offset value from UTC from the system variable

    View the properties of the labels to add in the table below.

    Label property values

    Element

    Property

    Property value

    The label that contains the value of the current contact name from the system variable

    Title

    "Current user (value)"

    Style

    Select "Body text"

    The label of the time offset from UTC

    Title

    "Contact time offset"

    Style

    Select "Caption"

    Text color

    Select the gray color

    The label that contains the time offset value from UTC from the system variable

    Title

    "Contact time offset (value)"

    Style

    Select "Body text"

  6. Click in the action panel of the Freedom UI Designer. After you save the page settings, Creatio opens the source code of the Freedom UI page.

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

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

    AMD module dependencies
    /* Declare the AMD module. */
    define("UsrAppSystemvariable_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
    return {
    ...
    };
    });
  2. Add the following attributes to the viewModelConfigDiff schema section:

    • CurrentUser. Stores the name of the current contact.
    • ContactTimezone. Stores the time offset in hours between the time zone of the current contact and UTC.
    viewModelConfigDiff schema section
    viewModelConfigDiff: /**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*/,
  3. Change the caption property value in the viewConfigDiff schema section:

    • $CurrentUser for the CurrentUserValue element
    • $ContactTimezone for the ContactTimeOffsetValue element

    The caption property handles the text contained in the element.

    viewConfigDiff schema section
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
    "operation": "insert",
    "name": "CurrentUserValue",
    "values": {
    ...,
    /* Bind the CurrentUser attribute to the caption property. */
    "caption": "$CurrentUser",
    ...
    },
    ...
    },
    ...,
    {
    "operation": "insert",
    "name": "ContactTimeOffsetValue",
    "values": {
    ...,
    /* Bind the ContactTimezone attribute to the caption property. */
    "caption": "$ContactTimezone",
    ...
    },
    ...
    }
    ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
  4. Add a custom implementation of the crt.HandlerViewModelInitRequest system query handler to the handlers schema section. Execute the handler when Creatio initializes the View model.

    1. Create an instance of the system value service from @creatio-devkit/common.
    2. Upload the system values.
    3. Specify the name of the current user contact in the CurrentUser attribute.
    4. Convert the time zone offset value from minutes to hours and specify the converted value in the ContactTimezone attribute.
    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
    {
    request: "crt.HandleViewModelInitRequest",
    /* The custom implementation of the system query 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 values. */
    const sysValues = await sysValuesService.loadSysValues();
    /* Specify the name of the current user contact in the CurrentUser attribute. */
    request.$context.CurrentUser = sysValues.userContact.displayValue;
    /* Convert the time zone offset value from minutes to hours and specify the converted value in the ContactTimezone attribute. */
    const offset = sysValues.userTimezoneOffset;
    const offsetDisplayValue = (offset > 0 ? '+' : '') + (offset / 60) + 'h';
    request.$context.ContactTimezone = offsetDisplayValue;
    /* Call the next handler if it exists and return its result. */
    return next?.handle(request);
    }
    }
    ] /**SCHEMA_HANDLERS*/,
  5. Click Save on the Client Module Designer's toolbar.

Outcome of the example

To view the outcome of the example:

  1. Open the System variables app page and click Run app.
  2. Click New on the System variables app toolbar.

As a result, Creatio will display the name of the current user and the time offset value in hours between the time zone of the current contact and UTC on the record page of the custom System variables section. The values will be retrieved from the corresponding system variables.

Source codes

UsrAppSystemvariable_FormPage
/* Declare the AMD module. */
define("UsrAppSystemvariable_FormPage", /**SCHEMA_DEPS*/["@creatio-devkit/common"] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
return {
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
{
"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
},
{
"operation": "insert",
"name": "CurrentUserValue",
"values": {
"layoutConfig": {
"column": 1,
"row": 3,
"colSpan": 1,
"rowSpan": 1
},
"type": "crt.Label",
"caption": "#ResourceString(CurrentUserValue_caption)#",
"labelType": "body-1",
"labelThickness": "normal",
"labelEllipsis": false,
"labelColor": "#181818",
"labelBackgroundColor": "transparent",
"labelTextAlign": "start"
},
"parentName": "LeftAreaProfileContainer",
"propertyName": "items",
"index": 2
},
{
"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
},
{
"operation": "insert",
"name": "ContactTimeOffsetValue",
"values": {
"layoutConfig": {
"column": 1,
"row": 5,
"colSpan": 1,
"rowSpan": 1
},
"type": "crt.Label",
/* Bind the ContactTimezone attribute to the caption property. */
"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*/,
viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
"attributes": {
"Id": {
"modelConfigDiff": {
"path": "PDS.Id"
}
},
/* 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*/,
modelConfigDiff: /**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 query 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 values. */
const sysValues = await sysValuesService.loadSysValues();
/* Specify the name of the current user contact in the CurrentUser attribute. */
request.$context.CurrentUser = sysValues.userContact.displayValue;
/* Convert the time zone offset value from minutes to hours and specify the converted value in the ContactTimezone attribute. */
const offset = sysValues.userTimezoneOffset;
const offsetDisplayValue = (offset > 0 ? '+' : '') + (offset / 60) + 'h';
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