How to add a custom style to a control on a page based on condition?
How to make the Category field on the opportunity page red if the type is PartnerSale?
Like
1. Create a new module. Name it and write your CSS in the less tab of the module. Leave the source code of the module empty.
.label-wrap .t-label[iscategoryred="true"] {
color: red;
}2. Create a replacing client module for the opportunity page (just modify the page with the section wizard and it will create the replacing client module automatically)
3. Use the following code to implement your CSS to the field based on condition.
define("OpportunityPageV2", ["ConfigurationConstants", "css!UsrOpportunityCss"], function(ConfigurationConstants) {
return {
entitySchemaName: "Opportunity",
details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
attributes: {},
methods: {
isCategoryRed: function() {
var result = {
isCategoryRed: false
};
var typeId = this.get("Type") ? this.get("Type").value:null;
if (typeId === ConfigurationConstants.Opportunity.Type.PartnerSale) {
result.isCategoryRed = true;
}
return result;
}
},
rules: {},
diff: /**SCHEMA_DIFF*/[
{
"operation": "merge",
"parentName": "OpportunityPageGeneralBlock",
"propertyName": "items",
"name": "Category",
"values": {
"domAttributes": {
"bindTo": "isCategoryRed"
}
}
}
]/**SCHEMA_DIFF*/
};
});
4. Enjoy
Hello Team, there is a way to apply this with 3 diferent logic? I need to change color depende of the value of one field.
Hello Federico,
Yes, it's possible to do that too. Please follow the steps below:
1. Add another colors in CSS :
2. Use the following code to implement the logic
define("CasePage", ["ConfigurationConstants", "css!UsrCasePageCSS"], function(ConfigurationConstants) {
return {
entitySchemaName: "Case",
attributes: {},
methods: {
ServiceItemColor: function() {
var result = {
isCategoryRed: false,
isCategoryYellow: false
};
var categoryId = this.get("Category") ? this.get("Category").value:null;
if (categoryId === "1b0bc159-150a-e111-a31b-00155d04c01d") {
result.isCategoryRed = true;
} else {
result.isCategoryYellow = true;
}
return result;
}
},
diff: /**SCHEMA_DIFF*/[
{
"operation": "merge",
"propertyName": "items",
"name": "CaseAccount",
"values": {
"domAttributes": {
"bindTo": "ServiceItemColor"
}
}
}
]/**SCHEMA_DIFF*/
};
});
With 3 different logic you will need to add one more condition in "else if" block and to add third color to CSS.
Here we can see that color of Account changed to red if Case Category has "Incident" value:
And color of Account would be yellow if Case Category has "Service request" value:
Best Regards,
Tetiana Bakai
keith schmitt,
Yes. I should have a full article written up this next week outlining all the steps to do this on a Freedom UI page. The steps are basically the following:
1) In order for this to work, you have to place the control inside a container - such as 1 Column container (and remove all the spacing, border, etc so you can't tell it's in a container). You'll be adding the style to the container, not the control itself (hopefully this changes in future versions, the controls don't seem to expose a settable property for the classes or style, only the containers do)
2) Add an attribute to contain the CSS classes (we'll bind this to the container from #1)
viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{ "attributes": { "MyStyleClasses": { value: [] } } }/**SCHEMA_VIEW_MODEL_CONFIG*/,
3) Bind the attribute to a "classes" property of the container you added in #1 by adding the following to the container:
"classes": "$MyStyleClasses"
4) Now, you can wire up a change request handler. See article here
5) In the change event, check whatever conditions you have and add or remove the CSS classes to the attribute:
if (someCondition) { request.$context.MyStyleClasses.push("my-css-class"); } else { request.$context.MyStyleClasses = []; }
6) Lastly, add some CSS to the page to set the style for my-css-class. When the condition is met, the CSS class will be added to the container, and removed when it doesn't meet the conditions.
Ryan
Hi Ryan Farley,
Could you please let me know if this can be done in freedom UI client module too? I tried to add this similar code in the page but there seems to be an issue with "domAttributes" setup in Freedom UI. So, how to bind a function in domAttributes in client modules.
Thanks in advance
Merlin Monalisa