Implement the field value conversion on a page
Add a converter that converts the Name field value to uppercase to the record page of the custom Converters section. The Name field value must remain the same. Display the converted value in the Label type component.
1. Set up the page UI
-
Create a custom
Converters
app based on the Records & business processes template. To do this, follow the guide in user documentation: Create a custom app. -
Open the Converters form page page in the working area of the
Converters
app page.The Converters form page page includes the Name field by default.
-
Add a Label type component to the working area of the Freedom UI Designer.
-
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 field value conversion
Configure the business logic in the Client Module Designer. For this example, set up the field value conversion. Convert the value of the Name field on the Validators form page page.
-
Implement a custom
usr.ToUpperCase
converter in theconverters
schema section.converters schema sectionconverters: /**SCHEMA_CONVERTERS*/{
/* The custom converter. Converts the value to uppercase. */
"usr.ToUpperCase": function(value) {
return value?.toUpperCase() ?? '';
}
}/**SCHEMA_CONVERTERS*/, -
Bind the
caption
property of theLabel
element to the$UsrName
model attribute in theviewConfigDiff
schema section.$UsrName
is the value of the Name field. Add theusr.ToUpperCase
converter to the$UsrName
attribute.viewConfigDiff schema sectionviewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
...,
{
"operation": "insert",
"name": "Label",
"values": {
...,
/* Bind the usr.ToUpperCase converter to the $UsrName attribute. */
"caption": "$UsrName | usr.ToUpperCase",
...
},
...
}
]/**SCHEMA_VIEW_CONFIG_DIFF*/, -
Click Save on the Client Module Designer's toolbar.
Outcome of the example
To view the outcome of the example:
- Open the
Converters
app page and click Run app. - Click New on the
Converters
app toolbar. - Enter "Converter's name" in the Name field.
As a result, when you fill out the Name field on the converter page, Creatio will convert the field value to uppercase and display it in the Label type component. The Name field value will remain the same.
Source codes
/* Declare the AMD module. */
define("UsrAppConverters_FormPage", /**SCHEMA_DEPS*/[]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**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": "Label",
"values": {
"layoutConfig": {
"column": 1,
"row": 2,
"colSpan": 1,
"rowSpan": 1
},
"type": "crt.Label",
/* Bind the usr.ToUpperCase converter to the $UsrName attribute. */
"caption": "$UsrName | usr.ToUpperCase",
"labelType": "headline",
"labelThickness": "normal",
"labelEllipsis": false,
"labelColor": "#181818",
"labelBackgroundColor": "transparent",
"labelTextAlign": "start"
},
"parentName": "LeftAreaProfileContainer",
"propertyName": "items",
"index": 1
}
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
"attributes": {
"UsrName": {
"modelConfigDiff": {
"path": "PDS.UsrName"
}
},
"Id": {
"modelConfigDiff": {
"path": "PDS.Id"
}
}
}
}/**SCHEMA_VIEW_MODEL_CONFIG*/,
modelConfigDiff: /**SCHEMA_MODEL_CONFIG*/{
"dataSources": {
"PDS": {
"type": "crt.EntityDataSource",
"config": {
"entitySchemaName": "UsrAppConverters"
}
}
}
}/**SCHEMA_MODEL_CONFIG*/,
handlers: /**SCHEMA_HANDLERS*/[]/**SCHEMA_HANDLERS*/,
converters: /**SCHEMA_CONVERTERS*/{
/* The custom converter. Converts the value to uppercase. */
"usr.ToUpperCase": function(value) {
return value?.toUpperCase() ?? '';
}
}/**SCHEMA_CONVERTERS*/,
validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
};
});