Customize page fields

Guide
PDF
Beginner

Creatio 8 Atlas provides the following page customization actions:

  • Set up a field display condition.
  • Set up a condition that locks the field.
  • Set up a field population condition.
  • Set up a field requirement condition.
  • Implement field value validation.
  • Implement field value conversion.

Customize the field display condition 

  1. Add a page field to set the display condition at step 1 of the Freedom UI page customization procedure if needed.

  2. Set up the display condition of the field on the page at step 2 of the Freedom UI page customization procedure.

    1. Add an attribute that stores data to the viewModelConfig schema section.

      Example that adds the SomeAttributeName attribute to the client module schema of the Freedom UI page.

      viewModelConfig schema section

    2. Bind the visible property to the corresponding model attribute in the viewConfigDiff schema section. The value of this attribute controls whether the page displays or hides the field. Describe the business logic that changes an attribute value in the handlers schema section. The visible property is responsible for the visibility of the field.

      View an example that binds the visible property to the $SomeAttributeName attribute below.

      viewConfigDiff schema section

    3. Add a custom implementation of the crt.HandleViewModelAttributeChangeRequest system query handler to the handlers schema section. The handler runs when the value of any attribute changes, including when loading attribute values ​​from a data source. Depending on the attribute value (true or false), the handler executes different business logic.

      View an example of a crt.HandleViewModelAttributeChangeRequest query handler, whose logic depends on the SomeAttributeName attribute, below.

      handlers schema section

View a detailed example that sets up the field display condition in a separate article: Set up the display condition of a field on a page.

Set up a condition that locks the field 

This section covers the procedure for setting up a condition that locks the page field in the app’s front-end. To set up a condition that locks the field in the back-end, follow the procedure in the user documentation: Access management.

To set up a condition that locks the field in the front-end:

  1. Add a page field to set up a condition that locks it at step 1 of the Freedom UI page customization procedure if needed.

  2. Set up the condition that locks the field on the page at step 2 of the Freedom UI page customization procedure.

    1. Add an attribute that stores data to the viewModelConfig schema section. Add the attribute the same way as in the setup procedure for the field display condition.
    2. Bind the readonly property to the appropriate model attribute in the viewConfigDiff schema section. Property binding is similar to that described in the setup procedure for the field display condition. Instead of the visible property, use the readonly property that locks the field from editing.
    3. Add a custom implementation of the crt.HandleViewModelAttributeChangeRequest system query handler to the handlers schema section. The implementation of the handler is similar to that described in the setup procedure for the field display condition.

View a detailed example that sets up a condition that locks the field in a separate article: Set up the condition that locks the field on a page.

Set up a field population condition 

  1. Add a page field to configure the population condition at step 1 of the Freedom UI page customization procedure if needed.
  2. Set up the field population condition at step 2 of the Freedom UI page customization procedure. To do this, add a custom implementation of the crt.HandleViewModelAttributeChangeRequest system query handler to the handlers schema section. The implementation of the handler is similar to that described in the setup procedure for the field display condition.

View a detailed example that sets up a field population condition in a separate article: Set up the condition that populates a field on a page.

Set up a field requirement condition 

  1. Add a page field to set the requirement condition at step 1 of the Freedom UI page customization procedure if needed.

  2. Set up the field requirement condition on the page at step 2 of the Freedom UI page customization procedure.

    1. Bind the crt.Required type validator to the model attribute in the viewModelConfig schema section. The validator checks that the attribute value is populated.

      View an example that binds a crt.Required type validator to a model attribute below.

      viewModelConfig schema section

    2. Add a custom implementation of the crt.HandleViewModelAttributeChangeRequest system query handler to the handlers schema section. The handler runs when the value of any attribute changes, including when loading attribute values ​​from a data source. Depending on the value of the attribute (true or false), the handler executes different business logic.

      View an example of a crt.HandleViewModelAttributeChangeRequest query handler, whose logic depends on the SomeAttributeName attribute, below.

      handlers schema section

View a detailed example that sets up a field requirement condition on a page in a separate article: Set up a field requirement condition on a page.

Implement field value validation 

Validators are functions that check whether the value of the ViewModel attribute is correct. For example, they can check the value of a record field for compliance with specified conditions. To implement a validator, use the validators section of the Freedom UI page schema. Learn more about creating a Freedom UI page in a separate article: Client module.

Creatio applies validators to the ViewModel attributes rather than visual elements, but validators can get the validity status data by using CrtControl. Validator examples: MaxLengthValidator, MinLengthValidator, RequiredValidator.

To implement field value validation on the page:

  1. Add a page field whose value to validate at step 1 of the Freedom UI page customization procedure if needed.

  2. Implement field value validation on the page at step 2 of the Freedom UI page customization procedure.

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

      The validators schema section lets you declare:

      • validator
      • validator function (function (config))
      • validator parameters ("params")
      • whether the validator is asynchronous (async flag)

      View an example that declares a custom usr.SomeValidatorName validator below.

      validators schema section

      message is a property that lets you set a custom error message.

    2. Bind the validator to an attribute or multiple model attributes by setting different parameters for each of the attributes in the viewModelConfig schema section. To do this, specify the validators key with the validator’s name and its parameters in the corresponding attribute of the viewModelConfig schema section.

      View an example that binds the usr.SomeValidatorName validator to the SomeAttributeName1 and SomeAttributeName2 attributes of the model below.

      viewModelConfig schema section

      The priority of the message parameter of the attribute configuration object is higher than the priority of the corresponding validator parameter. I. e., for attributes with a message parameter set, Creatio generates the error message from the parameter, not from the validator body.

      If an error is caught, the value of the SomeAttributeName1String localized string specified in the SomeAttributeName1 attribute is displayed for the attribute, and the Some message. value specified in the validator body is displayed for the SomeAttributeName2 attribute.

To disable a validator, set the disabled property of the corresponding validator to true (disabled: true).

View a detailed example that uses a validator in a separate article: Implement the field value validation on a page.

Implement field value conversion 

A converter is a function that converts the value of the ViewModel attribute bound to the property of the visual component to another value. Converters provided by Creatio 8 Atlas work similarly to Angular filters. Read more in the official Angular documentation. To implement converters, use the converters section of the Freedom UI page schema. Learn more about creating a Freedom UI page in a separate article: Client module. Converter examples: crt.invertBooleanValue, crt.toBoolean.

Converters have the following special features:

  • applicable only in the RunTime mode
  • not applicable to constants
  • only work in one direction, cannot be used with CrtControl

To implement field value conversion on the page:

  1. Add a page field whose value to convert at step 1 of the Freedom UI page customization procedure if needed.

  2. Implement field value conversion on the page at step 2 of the Freedom UI page customization procedure.

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

      View an example that declares the usr.SomeConverterName converter below.

      converters schema section

    2. Append the pipe character and the converter type to the name of the attribute to apply the converter in the viewConfigDiff schema section.

      View an example that applies the usr.SomeConverterName converter to the $SomeAttributeName attribute below.

      viewConfigDiff schema section

      Besides simple converters, Creatio 8 Atlas provides chains of converters. A converter chain comprises multiple converters that are applied to an attribute in a single property.

      View an example that applies a chain of converters (crt.ToBoolean and crt.InvertBooleanValue) to the $SomeAttributeName attribute below.

      viewConfigDiff schema section

      Creatio lets you set converter parameters. You can use the same converter several times by setting different parameter values. To set the converter parameters, specify the parameter value with the : prefix after the converter type. Place the colon character in front of each converter parameter value.

      Available values ​​of converter parameters:

      • String. Enclose a string value in single quotes.
      • Number.
      • true or false.
      • A binding to another attribute.

      View an example that applies the exmpl.Concat converter with a SomeParameter string parameter to the SomeAttributeName attribute below. Note that exmpl.Concat is an example converter and is not available for solving actual business problems.

      viewConfigDiff schema section

Converters are not available for the following binding types:

  • binding to resource attribute
  • function binding
  • binding an event to a model method

View a detailed example that uses a converter in a separate article: Implement field value conversion on a page.

Update form page fields automatically 

Since version 8.0.7 Atlas, Creatio updates fields on an open form page automatically without the need to refresh the page. This functionality is available for the following field types:

  • Fields of directly linked records. The functionality is enabled by default.

    For example, you open the contact page that has the Account and No. of employees fields. If you fill out the Account field, Creatio populates the No. of employees field automatically.

  • Record fields. To enable the functionality, follow the instructions in a separate article: Update record fields automatically.

    For example, you have Assign to me button on a request page. The button runs a business process that sets the current user as the request owner. If you click the Assign to me button, Creatio populates the Owner field on the page with your contact, and the result is visible immediately.

See also
Freedom UI page customization basics
Client module
Object
Resources
Access management Creatio documentation
Official Angular documentation (pipe concept)
Set up the display condition of a field on a page
Medium

Example. Set up the display condition for the Sick leave, days left field on the record page of the custom Requests section. Display the field for requests that originate from employees, i. e., requests whose Originator type field is set to "Employee."

1. Set up the page UI 

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

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

  3. Add a field that contains the request originator type.

    1. Add a Dropdown type field to the working area of the Freedom UI Designer.

    2. Click in the action panel of the Freedom UI Designer and fill out the field properties in the setup area.

      • Set Title to "Originator type."
      • Set Code to "UsrOriginatorType."
      • Select "Contact type" in the Lookup property.

  4. Add a field that contains the number of sick days left.

    1. Add a Number type field to the working area of the Freedom UI Designer.

    2. Click in the action panel of the Freedom UI Designer and fill out the field properties in the setup area.

      • Set Title to "Sick leave, days left."
      • Set Code to "UsrSickDaysLeft."
  5. 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 display condition 

Configure the business logic in the Client Module Designer. For this example, set up the field display condition.

  1. Add an IsRequestFromEmployee attribute that stores data about the contact type from which the request originates to the viewModelConfig schema section.

    viewModelConfig schema section
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
    "attributes": {
        ...,
        /* The attribute that stores the request originator type. */
        "IsRequestFromEmployee": {}
    }
}/**SCHEMA_VIEW_MODEL_CONFIG*/,

  2. Bind the visible property of the UsrSickDaysLeft element to the IsRequestFromEmployee model attribute in the viewConfigDiff schema section. If the request originates from an Employee type contact, display the Sick leave, days left field. Hide the field for other contact types.

    viewConfigDiff schema section
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "UsrSickDaysLeft",
        "values": {
            ...,
            /* The property that flags the field as visible. Bound to the IsRequestFromEmployee attribute. */
            "visible": "$IsRequestFromEmployee"
        },
        ...
    }
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

  3. Add a custom implementation of the crt.HandleViewModelAttributeChangeRequest system query handler to the handlers schema section. Run the handler when the value of any attribute changes, including changes made after loading the attribute values from the data source. The handler checks the UsrOriginatorType attribute value. If the new attribute value refers to the "Employee" value of the Contact type lookup, set the IsRequestFromEmployee attribute value to true, otherwise set it to false. The unique ID of the Employee type contact set as the employeeOriginatorTypeId constant is stored in the corresponding string of the Contact type lookup record. In this example, the ID of the Employee type contact is "60733efc-f36b-1410-a883-16d83cab0980."

    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
    {
        request: "crt.HandleViewModelAttributeChangeRequest",
        /* The custom implementation of the system query handler. */
        handler: async (request, next) => {
            /* Check the request originator type. */
            if (request.attributeName === 'UsrOriginatorType') {
                const employeeOriginatorTypeId = '60733efc-f36b-1410-a883-16d83cab0980';
                const selectedOriginatorType = await request.$context.UsrOriginatorType;
                const selectedOriginatorTypeId = selectedOriginatorType?.value;
                /* If the request originates from an employee, set the IsRequestFromEmployee to true. */
                request.$context.IsRequestFromEmployee = selectedOriginatorTypeId === employeeOriginatorTypeId;
            }
            /* Call the next handler (if it exists) and return its result. */
            return next?.handle(request);
        }
    }
]/**SCHEMA_HANDLERS*/,
    Complete source code of the page schema
  4. Click Save on the Client Module Designer's toolbar.

Outcome of the example 

To view the outcome of the example:

  1. Open the Requests app page and click Run app.
  2. Click New on the Requests app toolbar.
  3. Enter "Sick leave" in the Name field.
  4. Select "Employee" in the Originator type field.

As a result, Creatio will display the Sick leave, days left field on the page of the request that originates from an Employee type contact.

Creatio will not display the Sick leave, days left field for requests that originate from other contact types, e. g., Customer.

Resources
Package with example implementation
Set up the condition that locks the field on a page
Medium

This example is implemented in the front-end. Learn more about the back-end implementation in the user documentation guide: Access management.

Example. Set up the condition that locks the Applicant field on the record page of the custom Requests section. Lock the field if the request is completed, i. e., the Status field is set to "Completed."

1. Set up the page UI 

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

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

  3. Add an applicant field.

    1. Add a Dropdown type field to the working area of the Freedom UI Designer.

    2. Click in the action panel of the Freedom UI Designer and fill out the field properties in the setup area.

      • Set Title to "Applicant."
      • Set Code to "UsrApplicant."
      • Select "Contact " in the Lookup property.

  4. Add a request status field.

    1. Add a Dropdown type field to the working area of the Freedom UI Designer.

    2. Click in the action panel of the Freedom UI Designer and fill out the field properties in the setup area.

      • Set Title "Status."
      • Set Code to "UsrStatus."

      • Click the button next to the Lookup property and fill out the lookup properties:

        • Set Title to "Request status."
        • Set Code to "UsrRequestStatusLookup."

        Click Save to add the lookup.

    3. Click Save on the Freedom UI Designer's toolbar.

  5. Fill out the Request status lookup.

    1. Open the Requests app page and click Run app.
    2. Click to open the System Designer. Go to the System setup block → Lookups.

    3. If you use Creatio 8.0.0, register the lookup. The lookup is registered automatically in Creatio 8.0.1 and later.

      1. Click New lookup on the Lookups section toolbar and fill out the lookup properties:

        • Set Name to "Request status."
        • Select "Request status " in the Object property.
      2. Click Save on the lookup setup page's toolbar.
    4. Open the Request status toolbar.

    5. Click New on the lookup setup page's toolbar and add the following lookup values:

      • "New"
      • "Under evaluation"
      • "In progress"
      • "Canceled"
      • "Completed"
  6. Open the Requests form page page and click the button on the Freedom UI Designer's toolbar. After you save the page settings, Creatio opens the source code of the Freedom UI page.

2. Set up the condition that locks the field 

Configure the business logic in the Client Module Designer. For this example, set up the condition that locks the field.

  1. Add an IsApplicantReadonly attribute that stores data about the contact's permission to edit the Applicant field to the viewModelConfig schema section.

    viewModelConfig schema section
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
    "attributes": {
        ...,
        /* The attribute that locks the [Applicant] field. */
        "IsApplicantReadonly": {}
    }
}/**SCHEMA_VIEW_MODEL_CONFIG*/,

  2. Bind the readonly property of the UsrApplicant element to the IsApplicantReadonly model attribute in the viewConfigDiff schema section. Lock the Applicant field if the request is completed. Keep the field editable for other request statuses.

    viewConfigDiff schema section
    viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
    ...,
    {
        "operation": "insert",
        "name": "UsrApplicant",
        "values": {
            ...,
            /* The property that locks the field from editing. Bound to the IsApplicantReadonly attribute. */
            "readonly": "$IsApplicantReadonly"
        },
        ...
    },
    ...
]/**SCHEMA_VIEW_CONFIG_DIFF*/,

  3. Add a custom implementation of the crt.HandleViewModelAttributeChangeRequest system query handler to the handlers schema section. Run the handler when the value of any attribute changes, including changes made after loading the attribute values from the data source. The handler checks the UsrStatus attribute value. If the new attribute value refers to the "Completed" value of the Request status lookup, set the IsApplicantReadonly attribute value to true, otherwise set it to false. The unique status ID of the completed request set as the completedStatusId constant is stored in the corresponding column of the Request status lookup's record string. To display the Id column in the Request status lookup list, follow the guide in the user documentation: Work with record lists. In this example, the status ID of the completed request is "6d76b4e0-6507-4c34-902b-90e18df84153."

    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
    {
        request: "crt.HandleViewModelAttributeChangeRequest",
        /* The custom implementation of the system query handler. */
        handler: async (request, next) => {
            /* Check the request status. */
            if (request.attributeName === 'UsrStatus') {
                const completedStatusId = '6d76b4e0-6507-4c34-902b-90e18df84153';
                const selectedStatus = await request.$context.UsrStatus;
                const selectedStatusId = selectedStatus?.value;
                const isRequestCompleted = selectedStatusId === completedStatusId;
                /* If the request status is [Completed], set the IsApplicantReadonly attribute to true and lock the [Applicant] field from editing. */
                request.$context.IsApplicantReadonly = isRequestCompleted;
            }
            /* Call the next handler (if it exists) and return its results. */
            return next?.handle(request);
        }
    }
]/**SCHEMA_HANDLERS*/,
    Complete source code of the page schema
  4. Click Save on the Client Module Designer's toolbar.

Outcome of the example 

To view the outcome of the example:

  1. Open the Requests app page and click Run app.
  2. Click New on the Requests app toolbar.
  3. Enter "Request's name" in the Name field.
  4. Select "Bruce Clayton" in the Applicant field.
  5. Select "Completed" in the Status field.

As a result, Creatio will lock the Applicant field for completed requests.

The Applicant field will be editable for requests that have a different status. For example, "New."

Resources
Package with example implementation
Set up the condition that populates a field on a page
Medium

Example. Set up the condition that populates the Description field on the record page of the custom Requests section. If the Name and Description field values match, populate the Description field with the new Name field value. Otherwise, leave the Description field value as is.

1. Set up the page UI 

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

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

  3. Add a request description field.

    1. Add a Text type field to the working area of the Freedom UI Designer.

    2. Click in the action panel of the Freedom UI Designer and fill out the field properties in the setup area.

      • Set Title to "Description."
      • Set Code to "UsrDescription."
  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 condition that populates the field 

Configure the business logic in the Client Module Designer. For this example, set up the condition that populates the field.

  1. Add a custom implementation of the crt.HandleViewModelAttributeChangeRequest system query handler to the handlers schema section. Run the handler when the value of any attribute changes, including changes made after loading the attribute values from the data source. The handler checks the UsrName attribute value. If the old attribute value matches the UsrDescription attribute value, set the UsrDescription attribute to the same value as the new UsrName attribute value.

    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
    {
        request: "crt.HandleViewModelAttributeChangeRequest",
        /* The custom implementation of the system query handler. */
        handler: async (request, next) => {
            /* If the UsrName field changes, take the following steps. */
            if (request.attributeName === 'UsrName') {
                /* Check whether the old UsrName field value matches the UsrDescription field value. */
                const isFieldsShouldBeSynchronized = request.oldValue ===   await request.$context.UsrDescription;
                if (isFieldsShouldBeSynchronized) {
                    /* Assign the new UsrName field value to the UsrDescription field. */
                    request.$context.UsrDescription = await request.$context.UsrName;
                }
            }
            /* Call the next handler if it exists and return its result. */
            return next?.handle(request);
        }
    }
]/**SCHEMA_HANDLERS*/,
    Complete source code of the page schema
  2. Click Save on the Client Module Designer's toolbar.

Outcome of the example 

To view the outcome of the example for the same Name and Description field values:

  1. Open the Requests app page and click Run app.
  2. Click New on the Requests app toolbar.
  3. Enter "Request's name" in the Name field.
  4. Enter "Request's name" in the Description field.
  5. Change the Name field value to "Test."

As a result, Creatio will set the Description field to the "Test," same as the Name field.

To view the outcome of the example for different Name and Description field values:

  1. Change the Description field value to "Request's description."
  2. Enter "Test" in the Name field.

As a result, Creatio will leave the Description field value as is.

Resources
Package with example implementation
Set up the requirement condition of a field on a page
Medium

Example. Make the Description field on the record page of the custom Requests section required. The field must be required if the request is new, i. e., the Status field is set to "New."

1. Set up the page UI 

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

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

  3. Add a request status field.

    1. Add a Dropdown type field to the working area of the Freedom UI Designer.

    2. Click in the action panel of the Freedom UI Designer and fill out the field properties in the setup area.

      • Set Title "Status."
      • Set Code to "UsrStatus."

      • Click the button next to the Lookup property and fill out the lookup properties:

        • Set Title to "Request status."
        • Set Code to "UsrRequestStatusLookup."

        Click Save to add the lookup.

    3. Click Save on the Freedom UI Designer's toolbar.

  4. Fill out the Request status lookup.

    1. Open the Requests app page and click Run app.
    2. Click to open the System Designer. Go to the System setup block → Lookups.

    3. If you use Creatio 8.0.0, register the lookup. The lookup is registered automatically in Creatio 8.0.1 and later.

      1. Click New lookup on the Lookups section toolbar and fill out the lookup properties:

        • Set Name to "Request status."
        • Set Object to "Request status."
      2. Click Save on the lookup setup page's toolbar.
    4. Open the Request status toolbar.

    5. Click New on the lookup setup page's toolbar and add the following lookup values:

      • "New"
      • "Under evaluation"
      • "In progress"
      • "Canceled"
      • "Completed"

  5. Add a request description field.

    1. Open the Requests form page page and add a Text type field to the working area of the Freedom UI Designer.

    2. Click in the action panel of the Freedom UI Designer and fill out the field properties in the setup area.

      • Set Title to "Description."
      • Set Code to "UsrDescription."
  6. 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 condition that makes the field required 

Configure the business logic in the Client Module Designer. For this example, set up the condition that makes the field required.

  1. Bind the crt.Required type validator to the UsrDescription model attribute in the viewModelConfig schema section. The validator checks the attribute value.

    viewModelConfig schema section
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
    "attributes": {
        ...
        "UsrDescription": {
            ...,
            /* The property that enables validators in the attribute. */
            "validators": {
                /* Flag the field as required. */
                "required": {
                    "type": "crt.Required"
                }
            }
        },
        ...
    }
}/**SCHEMA_VIEW_MODEL_CONFIG*/,

  2. Add a custom implementation of the crt.HandleViewModelAttributeChangeRequest system query handler to the handlers schema section. Run the handler when the value of any attribute changes, including changes made after loading the attribute values from the data source. The handler checks the UsrStatus attribute value. If the new attribute value refers to the "New" value of the Request status lookup, apply the validator, otherwise do not apply it. The unique status ID of the new request set as the newStatusId constant is stored in the corresponding column of the Request status lookup's record string. To display the Id column in the Request status lookup list, follow the guide in the user documentation: Work with record lists. In this example, the status ID of the new request is "3be636fa-12b4-40eb-a050-91b1d774a75f."

    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
    {
        request: "crt.HandleViewModelAttributeChangeRequest",
        /* The custom implementation of the system query handler. */
        handler: async (request, next) => {
            if (request.attributeName === 'UsrStatus') {
                const newStatusId = '3be636fa-12b4-40eb-a050-91b1d774a75f';
                const selectedStatus = await request.$context.UsrStatus;
                const selectedStatusId = selectedStatus?.value;
                const isNewRequest = selectedStatusId === newStatusId;
                /* Check the request status. */
                if (isNewRequest) {
                    /* If the request is new, apply the required validator to the UsrDescription attribute. */
                    request.$context.enableAttributeValidator('UsrDescription', 'required');
                } else {
                    /* Do not apply the required validator to the UsrDescription attribute for non-new requests. */
                    request.$context.disableAttributeValidator('UsrDescription', 'required');
                }
            }
            /* Call the next handler if it exists and return its result. */
            return next?.handle(request);
        }
    }
]/**SCHEMA_HANDLERS*/,
    Complete source code of the page schema
  3. Click Save on the Client Module Designer's toolbar.

Outcome of the example 

To view the outcome of the example:

  1. Open the Requests app page and click Run app.
  2. Click New on the Requests app toolbar.
  3. Enter "Request's name" in the Name field.
  4. Select "New" in the Status field.

As a result, Creatio will make the Description field required for new requests.

The Description field will not be required for requests that have other statuses. For example, "Completed."

Resources
Package with example implementation
Implement the field value validation on a page
Medium

Example. Add a validator that ensures the Name field does not contain the test value to the record page of the custom Validators section.

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

Resources
Package with example implementation
Implement the field value conversion on a page
Medium

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*/,
    Complete source code of the page schema
  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.

Resources
Package with example implementation