Set up the condition that populates a field on a page

Level: intermediate

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

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.

Source codes

UsrAppRequests_FormPage

/* Declare the AMD module. */
define("UsrAppRequests_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": "UsrDescription",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 2,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Input",
                    "control": "$UsrDescription",
                    "label": "$Resources.Strings.UsrDescription",
                    "multiline": false
                },
                "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"
                    }
                },
                "UsrDescription": {
                    "modelConfigDiff": {
                        "path": "PDS.UsrDescription"
                    }
                }
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfigDiff: /**SCHEMA_MODEL_CONFIG*/{
            "dataSources": {
                "PDS": {
                    "type": "crt.EntityDataSource",
                    "config": {
                        "entitySchemaName": "UsrAppRequests"
                    }
                }
            }
        }/**SCHEMA_MODEL_CONFIG*/,
        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*/,
        converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
        validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
    };
});

---

Resources

Package with example implementation