Manage the system setting values on a page
Display the following on the record page of the Requests custom section:
- User’s city.
- The number of the last created record in the Requests section, increased by 1. Increase the number when creating a new request or copying an existing one.
Use the values of custom system settings.
1. Set up page UI
-
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. -
Add a system setting that stores the request number.
-
Click Run app on the
Requests
app page. -
Click to open the System Designer. Click System settings in the System setup block.
-
Click Add setting on the section toolbar.
-
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 "0."
-
-
Add a system setting that stores the city name.
-
Click Add setting on the section toolbar.
-
Fill out the system setting properties:
- Set Name to "City."
- Set Code to "UsrDefaultCity."
- Select "Lookup" in the Type property.
- Select "City" in the Lookup property.
- Select "New York" in the Default value property.
-
-
Go to the
Requests
app page and open the Requests form page page in the workspace.The Requests form page page includes the Name field by default.
-
Add a request number label.
-
Add a Label component to the Freedom UI Designer’s workspace.
-
Click the button on the Freedom UI Designer’s action panel and fill out the title’s properties in the setup area:
- Set Text to "Request number."
- Select "Caption" in the Style property.
- Select the grey color in the Text color property.
-
-
Add the following labels the same way:
- The value of the system setting that stores the request number.
- Cities.
- The value of the city system setting.
View the label properties to add in the table below.
Label property values
Element
Property
Property value
A label that contains the value of the system setting that stores the request number.
Text
"Request number (value)"
Style
Select "Body text"
City label
Text
"City"
Style
Select "Caption"
Text color
Select the grey color
A label that contains the value of the city system setting.
Text
"City (value)"
Style
Select "Body text"
-
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. Manage system setting values
Configure the business logic in the Client Module Designer. In this example, configure how to manage system settings values.
-
Enable the
sdk.SysSettingsService
system setting 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 {
...
};
}); -
Add the following attributes to the
viewModelConfigDiff
schema section:UsrDefaultCity
. Stores data about the value of theUsrDefaultCity
system setting.UsrRequestLastNumber
. Stores data about the value of theUsrRequestLastNumber
system setting.
viewModelConfigDiff schema sectionviewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
"attributes": {
...,
/* The attribute that stores the value of the UsrDefaultCity system setting. */
"UsrDefaultCity": {},
/* The attribute that stores the value of the UsrRequestLastNumber system setting. */
"UsrRequestLastNumber": {}
}
}/**SCHEMA_VIEW_MODEL_CONFIG*/, -
Change the following property values in the
viewConfigDiff
schema section:caption
property for theRequestNumberValue
element. Bind the property to the value of the$UsrRequestLastNumber
attribute. Thecaption
property is responsible for the text that the element contains.caption
property for theCityValue
element. Bind the property to the value of the$UsrDefaultCity
attribute.
viewConfigDiff schema sectionviewConfigDiff: /**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",
...
},
...
},
...,
{
"operation": "insert",
"name": "CityValue",
"values": {
...,
/* The property responsible for the text that the element contains. Bound to the UsrDefaultCity attribute. */
"caption": "$UsrDefaultCity",
...
},
...
}
]/**SCHEMA_VIEW_CONFIG_DIFF*/, -
Add a custom implementation of the system query handler to the
handlers
schema section. Execute the handler when theView
model is initialized.- Instantiate the system value service from
@creatio-devkit/common
. - Retrieve the value of the
UsrDefaultCity
system setting and write it to theUsrDefaultCity
attribute. - Retrieve the page state.
- Retrieve the value of the
UsrRequestLastNumber
system setting. - When creating a new record or copying an existing record, send a query to update the value of the
UsrRequestLastNumber
system setting (increase it by 1). - Update the value of the
UsrRequestLastNumber
attribute.
Add a custom implementation of the
crt.HandleViewModelResumeRequest
system query handler to thehandlers
schema section.Freedom UI cannot destroy a
View
model and loads the last page state when you re-open a previously loaded module. Use thecrt.HandleViewModelResumeRequest
handler called every time you open a previously loaded page. Thecrt.HandleViewModelInitRequest
andcrt.HandleViewModelResumeRequest
handlers use the same data.handlers schema sectionhandlers: /**SCHEMA_HANDLERS*/[
{
request: "crt.HandleViewModelResumeRequest",
/* Custom implementation of a system query handler. */
handler: async (request, next) => {
/* Wait for the rest of the initialization handlers to finish. */
await next?.handle(request);
/* Instantiate a system value service from @creatio-devkit/common. */
const sysSettingsService = new sdk.SysSettingsService();
/* Retrieve the value of the UsrDefaultCity system setting and write it to the UsrDefaultCity attribute. */
const defaultCity = await sysSettingsService.getByCode('UsrDefaultCity');
request.$context.UsrDefaultCity = defaultCity.displayValue;
/* Retrieve the page state. */
const cardState = await request.$context.CardState;
/* When creating a new record or copying an existing record, increase the value of the UsrRequestLastNumber system setting. */
if (cardState === 'add' || cardState === 'copy') {
/* Retrieve the value of the UsrRequestLastNumber system setting and write it to the UsrRequestLastNumber attribute. */
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 higher than the previous one by 1. */
value: ++requestLastNumber.value
});
/* Update the value of the UsrRequestLastNumber attribute. */
request.$context.UsrRequestLastNumber = requestLastNumber.value;
}
},
}
]/**SCHEMA_HANDLERS*/, - Instantiate 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 when creating a new request:
- Go to the
Requests
app page and click Run app. - Click New on the
Requests
app toolbar.
As a result, the record page of the Requests custom section will display:
- User’s city. The default value of the City (
UsrDefaultCity
code) system setting is used. - The number of the last created record in the Requests section, increased by 1. The value of the Request number (
UsrRequestLastNumber
code) system setting is used. It is increased by 1 when a new request is created.
To view the outcome of the example when copying an existing request:
- Add a Request’s name request first.
- Click → Copy in the Request’s name request’s row in the record list.
As a result, the page of the copied record of the Requests custom section will display:
- User’s city. The default value of the City (
UsrDefaultCity
code) system setting is used. - The number of the last created record in the Requests section, increased by 1. The value of the Request number (
UsrRequestLastNumber
code) system setting is used. It is increased by 1 when an existing request is copied.
Source codes
/* 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",
"multiline": false,
"control": "$UsrName",
"label": "$Resources.Strings.UsrName",
"labelPosition": "auto"
},
"parentName": "LeftAreaProfileContainer",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "RequestNumber",
"values": {
"layoutConfig": {
"column": 1,
"row": 2,
"colSpan": 1,
"rowSpan": 1
},
"type": "crt.Label",
"caption": "#ResourceString(RequestNumber_caption)#",
"labelType": "caption",
"labelThickness": "normal",
"labelEllipsis": false,
"labelColor": "#757575",
"labelBackgroundColor": "transparent",
"labelTextAlign": "start"
},
"parentName": "LeftAreaProfileContainer",
"propertyName": "items",
"index": 0
},
{
"operation": "insert",
"name": "RequestNumberValue",
"values": {
"layoutConfig": {
"column": 1,
"row": 3,
"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": "LeftAreaProfileContainer",
"propertyName": "items",
"index": 1
},
{
"operation": "insert",
"name": "City",
"values": {
"layoutConfig": {
"column": 1,
"row": 4,
"colSpan": 1,
"rowSpan": 1
},
"type": "crt.Label",
"caption": "#ResourceString(City_caption)#",
"labelType": "caption",
"labelThickness": "normal",
"labelEllipsis": false,
"labelColor": "#757575",
"labelBackgroundColor": "transparent",
"labelTextAlign": "start"
},
"parentName": "LeftAreaProfileContainer",
"propertyName": "items",
"index": 2
},
{
"operation": "insert",
"name": "CityValue",
"values": {
"layoutConfig": {
"column": 1,
"row": 5,
"colSpan": 1,
"rowSpan": 1
},
"type": "crt.Label",
/* The property responsible for the text that the element contains. Bound to the UsrDefaultCity attribute. */
"caption": "$UsrDefaultCity",
"labelType": "body-1",
"labelThickness": "normal",
"labelEllipsis": false,
"labelColor": "#181818",
"labelBackgroundColor": "transparent",
"labelTextAlign": "start"
},
"parentName": "LeftAreaProfileContainer",
"propertyName": "items",
"index": 3
}
]**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 UsrDefaultCity system setting. */
"UsrDefaultCity": {},
/* 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"
},
"scope": "page"
}
},
"primaryDataSourceName": "PDS"
}/**SCHEMA_MODEL_CONFIG*/,
handlers: /**SCHEMA_HANDLERS*/[
{
request: "crt.HandleViewModelResumeRequest",
/* Custom implementation of a system query handler. */
handler: async (request, next) => {
/* Wait for the rest of the initialization handlers to finish. */
await next?.handle(request);
/* Instantiate a system value service from @creatio-devkit/common. */
const sysSettingsService = new sdk.SysSettingsService();
/* Retrieve the value of the UsrDefaultCity system setting and write it to the UsrDefaultCity attribute. */
const defaultCity = await sysSettingsService.getByCode('UsrDefaultCity');
request.$context.UsrDefaultCity = defaultCity.displayValue;
/* Retrieve the page state. */
const cardState = await request.$context.CardState;
/* When creating a new record or copying an existing one, increase the value of the UsrRequestLastNumber system setting. */
if (cardState === 'add' || cardState === 'copy') {
/* Retrieve the value of the UsrRequestLastNumber system setting and write it to the UsrRequestLastNumber attribute. */
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 higher than the previous one by 1. */
value: ++requestLastNumber.value
});
/* Update the value of the UsrRequestLastNumber attribute. */
request.$context.UsrRequestLastNumber = requestLastNumber.value;
}
},
}
]/**SCHEMA_HANDLERS*/,
converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
};
});