There are likely times that business rules might not work as you need for some scenarios for disabling controls. For example, some scenarios might include reading data from other records using a model query. Luckily, you can do this programmatically pretty easily using the steps below:
- Add an attribute
- Bind the attribute to the control’s readonly property
- Add code to set the attribute to true/false to make the control enabled or not
For a sample for this article, we’ll simply disable the Account Type if it’s value is “Customer”. Note, this particular scenario we could do with business rules, but keeping things simple just do demonstrate the points needed.
Add an attribute to the viewModelConfigDiff, the one below is named “IsTypeEnabled”:
viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
{
"operation": "merge",
"path": [
"attributes"
],
"values": {
"IsTypeEnabled": {
value: true
}
}
}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/
Now, I wire up my attribute to the Type control in the viewConfigDiff:
{
"operation": "merge",
"name": "Type",
"values": {
"readonly": "$IsTypeEnabled | crt.InvertBooleanValue"
}
}
Note, I am using a converter to invert the value since my attribute indicates it’s enabled, but the property expects the inverse. If I wanted, I could make my attribute the same as what the property expects and call it “IsTypeDisabled”. Then, I wouldn’t need the converter and could just bind it as below, without the converter:
{
"operation": "merge",
"name": "Type",
"values": {
"readonly": "$IsTypeDisabled"
}
}
Lastly, I’ll add a change request handler to listen for values in the Type attribute (which also triggers when the page is initially populated, which is when request.silent==true):
handlers: /**SCHEMA_HANDLERS*/[
{
request: "crt.HandleViewModelAttributeChangeRequest",
handler: async (request, next) => {
if (request.attributeName === "Type") {
request.$context.IsTypeEnabled = (!request.value || request.value.displayValue !== "Customer");
}
return next?.handle(request);
}
}
]/**SCHEMA_HANDLERS*/
With all this in place, if I open an Account with Type=Customer, or change the Type to Customer it is disabled/readonly.
One thing to note, many controls have both a readonly and a disabled property, not sure what the difference is, both seem to work for me, but the readonly seems to be the one that gives the control the visual lock icon. The disabled property also disables the control, but you don’t get the lock icon for the control.
