Display the values of system variables on a page
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
-
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. -
Open the System variables form page page in the working area of the
System variables
app page. -
Delete the Name field the Requests form page page includes by default.
-
Add the label of the current contact.
-
Add a Label type component to the working area of the Freedom UI Designer.
-
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.
-
-
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"
-
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
-
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 {
...
};
}); -
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 sectionviewModelConfigDiff: /**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*/, -
Change the
caption
property value in theviewConfigDiff
schema section:$CurrentUser
for theCurrentUserValue
element$ContactTimezone
for theContactTimeOffsetValue
element
The
caption
property handles the text contained in the element.viewConfigDiff schema sectionviewConfigDiff: /**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*/, -
Add a custom implementation of the
crt.HandlerViewModelInitRequest
system query handler to thehandlers
schema section. Execute the handler when Creatio initializes theView
model.- Create an instance of the system value service from
@creatio-devkit/common
. - Upload the system values.
- Specify the name of the current user contact in the
CurrentUser
attribute. - Convert the time zone offset value from minutes to hours and specify the converted value in the
ContactTimezone
attribute.
handlers schema sectionhandlers: /**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*/, - Create an instance of the system value service from
-
Click Save on the Client Module Designer's toolbar.
Outcome of the example
To view the outcome of the example:
- Open the
System variables
app page and click Run app. - 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
/* 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*/
};
});