Implement the field value validation on a page

1. Set up the page UI 

1. Create a custom Validators 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 Validators form page page in the working area of the Validators app page.

   The Validators form page page includes the Name field by default.

3. 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 validation 

Configure the business logic in the Client Module Designer. For this example, set up the field validation. Add a validator to the Name field of the Validators form page page.

1. Implement a custom usr.MyValidator validator in the validators schema section.

   validators schema section

   validators: /**SCHEMA_VALIDATORS*/{
       /* The validator type must contain a vendor prefix.
       Format the validator type in PascalCase. */
       "usr.MyValidator": {
           "validator": function (config) {
               return function (control) {
                   return control.value !== config.invalidName ? null: {
                       "usr.MyValidator": { message: config.message }
                   };
               };
           },
           "params": [
               {
                   "name": "invalidName"
               },
               {
                   "name": "message"
               }
           ],
           "async": false
       }
   }/**SCHEMA_VALIDATORS*/
   

2. Bind the MyValidator validator to the UsrName model attribute in the viewModelConfig schema section. Specify the "test" value in the invalidName property. If you enter this value, the app will display an error message specified in the message property.

   viewModelConfig schema section

   viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
       "attributes": {
           "UsrName": {
               ...,
               "validators": {
                   /* Bind the custom validator to the attribute. */
                   "MyValidator": {
                       "type": "usr.MyValidator",
                       "params": {
                           "invalidName": "test",
                           "message": "Invalid name"
                       }
                   }
               }
           },
           ...
       }
   }/**SCHEMA_VIEW_MODEL_CONFIG*/,
   

   Complete source code of the page schema

   UsrAppValidators_FormPage

   /* Declare the AMD module. */
   define("UsrAppValidators_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"
               }
           ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
           viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
               "attributes": {
                   "UsrName": {
                       "modelConfig": {
                           "path": "PDS.UsrName"
                       },
                       "validators": {
                           /* Bind the custom validator to the attribute. */
                           "MyValidator": {
                               "type": "usr.MyValidator",
                               "params": {
                                   "invalidName": "test",
                                   "message": "Invalid name"
                               }
                           }
                       }
                   },
                   "Id": {
                       "modelConfig": {
                           "path": "PDS.Id"
                       }
                   }
               }
           }/**SCHEMA_VIEW_MODEL_CONFIG*/,
           modelConfig: /**SCHEMA_MODEL_CONFIG*/{
               "dataSources": {
                   "PDS": {
                       "type": "crt.EntityDataSource",
                       "config": {
                           "entitySchemaName": "UsrAppValidators"
                       }
                   }
               }
           }/**SCHEMA_MODEL_CONFIG*/,
           handlers: /**SCHEMA_HANDLERS*/[]/**SCHEMA_HANDLERS*/,
           converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
           validators: /**SCHEMA_VALIDATORS*/{
               /* The validator type must contain a vendor prefix.
               Format the validator type in PascalCase. */
               "usr.MyValidator": {
                   "validator": function (config) {
                       return function (control) {
                           return control.value !== config.invalidName ? null: {
                               "usr.MyValidator": { message: config.message }
                           };
                       };
                   },
                   "params": [
                       {
                           "name": "invalidName"
                       },
                       {
                           "name": "message"
                       }
                   ],
                   "async": false
               }
           }/**SCHEMA_VALIDATORS*/
       };
   });
   

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

Outcome of the example 

To view the outcome of the example:

1. Open the Validators app page and click Run app.
2. Click New on the Validators app toolbar.
3. Enter "test" in the Name field.
4. Click Save on the validator page toolbar.

As a result, the app will not save the test record and display an error notification in a pop-up box.

The app will save a record that has a different name, such as Validator's name, correctly. The record will be displayed in the Validators section list.