Hi,
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:
https://community.bpmonline.com/questions/how-add-custom-style-control-page-based-condition
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.
Thanks,
Mohamed.
Like
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:
https://marketplace.terrasoft.ua/app/fields-color-highlighting-bpmonline
Regards,
Anastasia
Hi all,
Can we do the same thing in freedom UI? I tried adding the similar code in my freedom UI client module, I had an issue in calling the function from "domAttributes". Please let me know how can I bind a function to domAttributes in Freedom UI.
Thanks in Advance
Merlin
Merlin Monalisa A,
In Freedom UI theoretically customizing CSS is possible, but lookup values can be highlighted with a color using another approach:
- 1) In the object that represents the dropdown add a new column of the "Color" data type
- 2) Select this newly created column as a value for the "Color" property in the object settings:
3) Publish the object
4) Open the lookup values setup in the "Lookups" section
5) Create the "Lookup" section record for the lookup we are interested in
6) Open the created record and show the "Color" column in the list
7) Check the result
As a result, Test 1, 2 and 3 dropdown values will be either highlighted in the list and in the form page:
if this should be conditional - Ryan Farley created a very good article on this topic here https://customerfx.com/article/dynamically-changing-a-control-style-on-…