Implement the field value conversion on a page

Level: intermediate

Example

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

1. 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.

2. 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.

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

4. 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.

1. Implement a custom usr.ToUpperCase converter in the converters schema section.

   converters schema section

   converters: /**SCHEMA_CONVERTERS*/{
       /* The custom converter. Converts the value to uppercase. */
       "usr.ToUpperCase": function(value) {
           return value?.toUpperCase() ?? '';
       }
   }/**SCHEMA_CONVERTERS*/,

2. Bind the caption property of the Label element to the $UsrName model attribute in the viewConfigDiff schema section. $UsrName is the value of the Name field. Add the usr.ToUpperCase converter to the $UsrName attribute.

   viewConfigDiff schema section

   viewConfigDiff: /**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*/,

3. Click Save on the Client Module Designer's toolbar.

Outcome of the example

To view the outcome of the example:

1. Open the Converters app page and click Run app.
2. Click New on the Converters app toolbar.
3. 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

UsrAppConverters_FormPage

/* 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*/
    };
});

---

Resources

Package with example implementation