Changing background color for lookup


I am trying to get specific background colors for a lookup field based on the lookup values.

Below is the post I followed to achieve this:

Attaching the screenshots for your reference.

Below is the code in less tab of the new module created.

    .control-wrap .base-edit[isvaluered="true"] {
        background-color: red;

Below is the code in edit page:

methods: {
            isCategoryRed: function() {
                var result = {
                    isvaluered: false,
                var typeId = this.get("GlbBrand") ? this.get("GlbBrand").value:null;
                if (typeId === "0392ddab-df82-4887-8adb-995c4f5530d1") {
                    result.isvaluered = true;
                return result;
        dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
        diff: /**SCHEMA_DIFF*/[
                "operation": "merge",
                "name": "GlbBrand0f0764d7-14b9-4391-82a9-faef9e397993",
                "values": {
                    "domAttributes": {
                        "bindTo": "isCategoryRed"
                    "enabled": true,
                    "contentType": 3


I am not able to get the background color as red, where as if I use text color, the change is reflecting. Could someone please shed some light on this please.




Like 0



Dear Mohamed,

In order to add logic to change the color of the field depending on the value, you can use the properties of afterrender and afterrerender, they execute after element is loaded on the page.

In the method itself, we implement the color change logic:

We receive a component, and depending on the displayed value we change color.
I want to note that in the example is implementing only to value change approach, if you need, you can also add logic when the page is initialized.

Also, you can download an application for this purpose:



Show all comments