Skip to main content
Version: 8.0

Set up the requirement condition of a page field

Level: intermediate

To implement the example:

  1. Set up the page UI. Read more >>>
  2. Set up the condition that makes the field required. Read more >>>
Example

Make the Description field on the custom request page required. The field must be required for new requests, i. e., if the Status field is set to "New."

1. Set up the page UI​

  1. Create an app based on the Records & business processes template. Instructions: Create an app manually (user documentation).

    For this example, create a Requests app.

  2. Open the form page in the Freedom UI Designer.

    For this example, open the Requests form page.

  3. Add a field.

    For this example, add the following fields:

    • field that contains the request status
    • field that contains the request description

    To do this:

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

    2. Click and fill out the field properties.

      Element

      Element type

      Property

      Property value

      Field contains the request status

      Dropdown

      Title

      Status

      Code

      UsrStatus

      Lookup

      Click and fill out the lookup properties:

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

      Field that contains the request description

      Text

      Title

      Description

      Code

      UsrDescription

  4. Save the changes.

  5. Fill out the lookup.

    For this example, fill out the Request status lookup.

    1. Open the Lookups section. To do this, click in the top right → System setup → Lookups.

    2. Register the lookup for Creatio version 8.0.0. To do this, click New lookup and fill out the lookup properties.

      Property

      Property value

      Name

      Request status

      Object

      Request status

      The lookup is registered automatically in Creatio 8.0.1 and later.

    3. Open the Request status lookup.

    4. Add the lookup values. Instructions: Manage lookup values (user documentation).

      For this example, add the following lookup values:

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

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. Open the source code of the Freedom UI page. To do this, click .

  2. Bind a validator to the attribute.

    1. Go to the viewModelConfig schema section → attributes configuration object → UsrDescription element.
    2. Bind the crt.Required type validator that checks the attribute value to the required property.
    viewModelConfig schema section
    viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/[
        "attributes": {
            ...,
            "UsrDescription": {
                ...,
                /* The property that contains the list of attribute validators. */
                "validators": {
                    /* Flag the field as required. */
                    "required": {
                        "type": "crt.Required"
                    }
                }
            },
            ...,
        },
        ...,
    ]/**SCHEMA_VIEW_MODEL_CONFIG*/,

  3. Implement the base request handler.

    1. Go to the handlers schema section.

    2. Add a custom implementation of the crt.HandleViewModelAttributeChangeRequest base request handler.

      1. Run the handler when the value of any attribute changes, including changes made after loading the attribute values from the data source.
      2. Find the ID of the "New" value in the Request status lookup. For this example, the ID is "6ae829c4-64d7-497c-9011-4426cc8c4de6."
      3. Save the ID from the previous step to the newStatusId constant.
      4. Check the UsrStatus attribute value. If the attribute value refers to the "New" request status, apply the validator to the UsrDescription attribute, otherwise do not apply it.
    handlers schema section
    handlers: /**SCHEMA_HANDLERS*/[
        {
            request: "crt.HandleViewModelAttributeChangeRequest",
            /* The custom implementation of the system request handler. */
            handler: async (request, next) => {
                /* Check the request status. */
                if (request.attributeName === 'UsrStatus') {
                    const newStatusId = '6ae829c4-64d7-497c-9011-4426cc8c4de6';
                    const selectedStatus = await request.$context.UsrStatus;
                    const selectedStatusId = selectedStatus?.value;
                    const isNewRequest = selectedStatusId === newStatusId;
                    /* Check the request description. */
                    if (isNewRequest) {
                        /* If the request status is "New," apply the validator to the "UsrDescription" attribute. */
                        request.$context.enableAttributeValidator('UsrDescription', 'required');
                    } else {
                        /* If the request status differs from the "New," do not apply the validator to the "UsrDescription" attribute. */
                        request.$context.disableAttributeValidator('UsrDescription', 'required');
                    }
                }
                /* Call the next handler if it exists and return its result. */
                return next?.handle(request);
            }
        }
    ]/**SCHEMA_HANDLERS*/,

  4. Save the changes.

View the result​

  1. Open the Requests section.
  2. Create a request that has an arbitrary name. For example, "Vacation."
  3. Select "New" in the Status field.

As a result:

  • Creatio will make the Description field required for new requests. View the result >>>

  • Creatio will not make the Description field required for other request statuses, e. g., "Completed."

Source code​

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
            },
            /* Field that contains the request status. */
            {
                "operation": "insert",
                "name": "UsrStatus",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 2,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.ComboBox",
                    "loading": false,
                    "control": "$UsrStatus",
                    "label": "$Resources.Strings.UsrStatus",
                    "items": "$UsrStatus_List",
                    "attributeName": "UsrStatus",
                    "isAddAllowed": true,
                    "showValueAsLink": true,
                    "listActions": [],
                    "controlActions": []
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 1
            },
            {
                "operation": "insert",
                "name": "ListAction_tfelkhj",
                "values": {
                    "code": "addRecord",
                    "type": "crt.ComboboxSearchTextAction",
                    "icon": "combobox-add-new",
                    "caption": "ComboBox.AddNewRecord",
                    "clicked": {
                        "request": "crt.CreateRecordFromLookupRequest",
                        "params": {}
                    }
                },
                "parentName": "UsrStatus",
                "propertyName": "listActions",
                "index": 0
            },
            /* Field that contains the request description. */
            {
                "operation": "insert",
                "name": "UsrDescription",
                "values": {
                    "layoutConfig": {
                        "column": 1,
                        "row": 3,
                        "colSpan": 1,
                        "rowSpan": 1
                    },
                    "type": "crt.Input",
                    "control": "$UsrDescription",
                    "label": "$Resources.Strings.UsrDescription",
                    "multiline": false
                },
                "parentName": "LeftAreaProfileContainer",
                "propertyName": "items",
                "index": 2
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{
            "attributes": {
                "UsrName": {
                    "modelConfig": {
                        "path": "PDS.UsrName"
                    }
                },
                "Id": {
                    "modelConfig": {
                        "path": "PDS.Id"
                    }
                },
                "UsrDescription": {
                    "modelConfig": {
                        "path": "PDS.UsrDescription"
                    },
                    /* The property that contains the list of attribute validators. */
                    "validators": {
                        /* Flag the field as required. */
                        "required": {
                            "type": "crt.Required"
                        }
                    }
                },
                "UsrStatus": {
                    "modelConfig": {
                        "path": "PDS.UsrStatus"
                    }
                },
                "UsrStatus_List": {
                    "isCollection": true,
                    "viewModelConfig": {
                        "attributes": {
                            "value": {
                                "modelConfig": {
                                    "path": "UsrStatus_List_DS.Id"
                                }
                            },
                            "displayValue": {
                                "modelConfig": {
                                    "path": "UsrStatus_List_DS.Name"
                                }
                            }
                        }
                    },
                    "modelConfig": {
                        "path": "UsrStatus_List_DS",
                        "sortingConfig": {
                            "attributeName": "UsrStatus_List_Sorting",
                            "default": [
                                {
                                    "columnName": "Name",
                                    "direction": "asc"
                                }
                            ]
                        },
                        "pagingConfig": {
                            "rowCount": 50,
                            "rowsOffset": null
                        }
                    },
                    "embeddedModel": {
                        "config": {
                            "type": "crt.EntityDataSource",
                            "config": {
                                "entitySchemaName": "UsrRequestStatusLookup"
                            }
                        },
                        "name": "UsrStatus_List_DS"
                    }
                },
                "UsrStatus_List_Sorting": {
                    "isCollection": true,
                    "viewModelConfig": {
                        "attributes": {
                            "columnName": {},
                            "direction": {}
                        }
                    }
                }
            }
        }/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfig: /**SCHEMA_MODEL_CONFIG*/[
            {
                "operation": "merge",
                "path": [],
                "values": {
                    "dataSources": {
                        "PDS": {
                            "type": "crt.EntityDataSource",
                            "config": {
                                "entitySchemaName": "UsrAppRequests"
                            }
                        }
                    },
                    "primaryDataSourceName": "PDS"
                }
            }
        ]/**SCHEMA_MODEL_CONFIG*/,
        handlers: /**SCHEMA_HANDLERS*/[
            {
                request: "crt.HandleViewModelAttributeChangeRequest",
                /* The custom implementation of the system request handler. */
                handler: async (request, next) => {
                    /* Check the request status. */
                    if (request.attributeName === 'UsrStatus') {
                        const newStatusId = '6ae829c4-64d7-497c-9011-4426cc8c4de6';
                        const selectedStatus = await request.$context.UsrStatus;
                        const selectedStatusId = selectedStatus?.value;
                        const isNewRequest = selectedStatusId === newStatusId;
                        /* Check the request description. */
                        if (isNewRequest) {
                            /* If the request status is "New," apply the validator to the "UsrDescription" attribute. */
                            request.$context.enableAttributeValidator('UsrDescription', 'required');
                        } else {
                            /* If the request status differs from the "New," do not apply the validator to the "UsrDescription" attribute. */
                            request.$context.disableAttributeValidator('UsrDescription', 'required');
                        }
                    }
                    /* 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