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?

File attachments
public:20 KB



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"

4. Enjoy


Log in or register to comment