Dynamically Changing a Control Style CSS on a Creatio Freedom UI Page

In a Creatio Freedom UI page you might want to apply custom CSS styles to controls based on conditions to draw the user’s attention to something. This article will outline how to do this for any control type on a Freedom UI page.

In this article, I’ll be using the scenario styling a checkbox as red when checked and normal when not checked. When the checkbox values changes, we’ll add a CSS class to the container the checkbox is in if the value is checked and remove it when unchecked. Note, we’ll be adding this to the container, not the checkbox itself – more on this in a bit. The end result will be as follows:

STEP 1 – Adding a container for the control

This part is important. Not all controls for Freedom UI pages expose a property for adding a CSS class or style attributes. However, the containers do expose this. For the example in the image above, I added an Area layout container and then put the checkbox inside that container. I removed all spacing, border radius, etc from the Area so you can’t even tell it’s there. Later, well be setting a CSS class on this Area that contains the checkbox. We hsver to do this since the Checkbox doesn’t have a property for adding the style (as of 8.0.9)

STEP 2 – Add an attribute for the CSS class

Add an attribute in the page viewModelConfigDiff to contain the CSS classes (we’ll bind this to the container from step #1) Note: If there is already a node for path attributes, you can just add your new attribute to the values of that existing node.

viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
	{
		"operation": "merge",
		"path": [
			"attributes"
		],
		"values": {
			"ServiceHoldClass": {
				value: []
			}
		}
	}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,

STEP 3 – Bind the attribute to the classes property of the container added in step #1

Locate the container in the page viewConfigDiff and add a “classes” property to it. Bind this property to the attribute as follows:

"classes": "$ServiceHoldClass"

STEP 4 – Wire up a change event handler for the checkbox

Now, you can wire up a change request handler. See article here. For this, I want the change to fire when the checkbox is checked and also when the page loads and the value it set (if the value is already checked). I am intentionally not including the !request.silent part so it fires when the control value is populated when the record loads. In this change event I will check the value to see if it’s checked or not and then set the CSS class attribute accordingly.

{
	request: "crt.HandleViewModelAttributeChangeRequest",
	handler: async (request, next) => {
		if (request.attributeName === "BooleanAttribute_povjg25") { // service hold
			if (request.value) {
				request.$context.ServiceHoldClass = ["cfx-service-hold"];
			}
			else {
				request.$context.ServiceHoldClass = [];
			}
		}
		return next?.handle(request);
	}
}

An important thing to note here is that the attribute name for a model value is not going to be the same as the column name for the object. Search for the actual column name and you’ll see the attribute name in the viewModelConfig, it will look like this:

"BooleanAttribute_povjg25": {
	"modelConfig": {
		"path": "PDS.UsrServiceHold"
	}
}

STEP 5 – Add CSS for your class and add to the page

This is the same for Freedom UI pages as classic pages. My style in the example above looks like this:

div#ServiceHoldContainer.cfx-service-hold .crt-checkbox-label {
    color: #fff;
    border: #ee3a1e 1px solid;
    background-color: #f83c18;
    border-radius: 4px;
}