Set up the requirement condition of a field on a page
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
-
Create a custom
Requestsapp based on the Records & business processes template. To do this, follow the guide in the user documentation: Create a custom app. -
Open the Requests form page page in the working area of the
Requestsapp page.The Requests form page page includes the Name field by default.
-
Add a request status field.
-
Add a Dropdown type field to the working area of the Freedom UI Designer.
-
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.
-
-
Click Save on the Freedom UI Designer's toolbar.
-
-
Fill out the Request status lookup.
-
Open the
Requestsapp page and click Run app. -
Click
to open the System Designer. Go to the System setup block → Lookups. -
If you use Creatio 8.0.0, register the lookup. The lookup is registered automatically.
-
Open the Request status toolbar.
-
Click New on the lookup setup page's toolbar and add the following lookup values:
- "New"
- "Under evaluation"
- "In progress"
- "Canceled"
- "Completed"
-
-
Add a request description field.
-
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.
-
Bind the
crt.Requiredtype validator to theUsrDescriptionmodel attribute in theviewModelConfigDiffschema section. The validator checks the attribute value.viewModelConfigDiff schema sectionviewModelConfigDiff: /**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*/, -
Add a custom implementation of the
crt.HandleViewModelAttributeChangeRequestsystem query handler to thehandlersschema 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 theUsrStatusattribute 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 thenewStatusIdconstant 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 sectionhandlers: /**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*/, -
Click Save on the Client Module Designer's toolbar.
Outcome of the example
To view the outcome of the example:
- Open the
Requestsapp page and click Run app. - Click New on the
Requestsapp toolbar. - Enter "Request's name" in the Name field.
- 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."
Source codes
/* 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": "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
},
"parentName": "LeftAreaProfileContainer",
"propertyName": "items",
"index": 1
},
{
"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*/,
viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
"attributes": {
"UsrName": {
"modelConfigDiff": {
"path": "PDS.UsrName"
}
},
"Id": {
"modelConfigDiff": {
"path": "PDS.Id"
}
},
"UsrDescription": {
"modelConfigDiff": {
"path": "PDS.UsrDescription"
},
/* The property that enables validators in the attribute. */
"validators": {
/* Flag the field as required. */
"required": {
"type": "crt.Required"
}
}
},
"UsrStatus": {
"modelConfigDiff": {
"path": "PDS.UsrStatus"
}
},
"UsrStatus_List": {
"isCollection": true,
"viewModelConfigDiff": {
"attributes": {
"value": {
"modelConfigDiff": {
"path": "UsrStatus_List_DS.Id"
}
},
"displayValue": {
"modelConfigDiff": {
"path": "UsrStatus_List_DS.Name"
}
}
}
},
"modelConfigDiff": {
"path": "UsrStatus_List_DS",
"sortingConfig": {
"attributeName": "UsrStatus_List_Sorting",
"default": [
{
"columnName": "Name",
"direction": "asc"
}
]
},
"pagingConfig": {
"rowCount": 50,
"rowsOffset": null
}
},
"embeddedModel": {
"name": "UsrStatus_List_DS",
"config": {
"type": "crt.EntityDataSource",
"config": {
"entitySchemaName": "UsrRequestStatusLookup"
}
}
}
},
"UsrStatus_List_Sorting": {
"isCollection": true,
"viewModelConfigDiff": {
"attributes": {
"columnName": {},
"direction": {}
}
}
}
}
}/**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 (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*/,
converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
};
});