Set up the condition that locks the field on a page
This example is implemented in the front-end. Learn more about the back-end implementation in the user documentation guide: Access management.
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
-
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 an applicant field.
-
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.
The lookup is registered automatically.
- Open the
-
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.
-
Add an
IsApplicantReadonlyattribute that stores data about the contact's permission to edit the Applicant field to theviewModelConfigDiffschema section.viewModelConfigDiff schema sectionviewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
"attributes": {
...,
/* The attribute that locks the [Applicant] field. */
"IsApplicantReadonly": {}
}
}/**SCHEMA_VIEW_MODEL_CONFIG*/, -
Bind the
readonlyproperty of theUsrApplicantelement to theIsApplicantReadonlymodel attribute in theviewConfigDiffschema section. Lock the Applicant field if the request is completed. Keep the field editable for other request statuses.viewConfigDiff schema sectionviewConfigDiff: /**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*/, -
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 "Completed" value of the Request status lookup, set theIsApplicantReadonlyattribute value totrue, otherwise set it tofalse. The unique status ID of the completed request set as thecompletedStatusIdconstant 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 sectionhandlers: /**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*/, -
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 "Bruce Clayton" in the Applicant field.
- 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."
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": "UsrApplicant",
"values": {
"layoutConfig": {
"column": 1,
"row": 2,
"colSpan": 1,
"rowSpan": 1
},
"type": "crt.ComboBox",
"loading": false,
"control": "$UsrApplicant",
"label": "$Resources.Strings.UsrApplicant",
"items": "$UsrApplicant_List",
"attributeName": "UsrApplicant",
"isAddAllowed": true,
"showValueAsLink": true,
/* The property that locks the field from editing. Bound to the IsApplicantReadonly attribute. */
"readonly": "$IsApplicantReadonly"
},
"parentName": "LeftAreaProfileContainer",
"propertyName": "items",
"index": 1
},
{
"operation": "insert",
"name": "UsrStatus",
"values": {
"layoutConfig": {
"column": 1,
"row": 3,
"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": 2
}
]/**SCHEMA_VIEW_CONFIG_DIFF*/,
viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG*/{
"attributes": {
"UsrName": {
"modelConfigDiff": {
"path": "PDS.UsrName"
}
},
"Id": {
"modelConfigDiff": {
"path": "PDS.Id"
}
},
"UsrApplicant": {
"modelConfigDiff": {
"path": "PDS.UsrApplicant"
}
},
"UsrApplicant_List": {
"isCollection": true,
"viewModelConfigDiff": {
"attributes": {
"value": {
"modelConfigDiff": {
"path": "UsrApplicant_List_DS.Id"
}
},
"displayValue": {
"modelConfigDiff": {
"path": "UsrApplicant_List_DS.Name"
}
}
}
},
"modelConfigDiff": {
"path": "UsrApplicant_List_DS",
"sortingConfig": {
"attributeName": "UsrApplicant_List_Sorting",
"default": [
{
"columnName": "Name",
"direction": "asc"
}
]
},
"pagingConfig": {
"rowCount": 50,
"rowsOffset": null
}
},
"embeddedModel": {
"name": "UsrApplicant_List_DS",
"config": {
"type": "crt.EntityDataSource",
"config": {
"entitySchemaName": "Contact"
}
}
}
},
"UsrApplicant_List_Sorting": {
"isCollection": true,
"viewModelConfigDiff": {
"attributes": {
"columnName": {},
"direction": {}
}
}
},
"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": {}
}
}
},
/* The attribute that locks the [Applicant] field from editing. */
"IsApplicantReadonly": {}
}
}/**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) => {
/* 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*/,
converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
};
});