To have the CSS apply in the entire app you can create a replacing view for MainHeaderSchema and add the CSS there. 

Alternatively, you can use this marketplace addon which gives you the ability to add the CSS to a table and it will get applied in the entire app. 

Ryan

Hello Serhiy,

Could you please clarify which step exactly you have problems with? 

Was it possible for you to make the text bold without conditions?

If so then how exactly do you add the specific field value? 

Anhelina writes:

Hello Serhiy,

Could you please clarify which step exactly you have problems with? 

Was it possible for you to make the text bold without conditions?

If so then how exactly do you add the specific field value? 

Thank you for your interest. I have overridden 2 methods: 

initQueryColumns: function(esq) {
	this.callParent(arguments);
 
	esq.addColumn("ModifiedBy.Type.Id", "ModifierType");
 
},
 
prepareResponseCollection: function(collection) {
	this.callParent(arguments);
	// Аor each record returned in the query for the list 		
	// check the Amount field value and then apply style
	collection.each(function(item) {
		if (item.get("ModifierType") == "00783ef6-f36b-1410-a883-16d83cab0980") {
			item.customStyle = Ext.apply(item.customStyle || {}, {
				"background-color": "#FFFFCC",
				"font-weight": "bold"
	        });
		}
	}, this);
}

I understand that I need to change this part of the code:

item.customStyle = Ext.apply(item.customStyle || {}, {
	"background-color": "#FFFFCC",
	"font-weight": "bold"
}

It must be something like this:

.title {
	"background-color": "#FFFFCC",
	"font-weight": "bold"
}

But I have no idea how to apply the style to a specific entry element in the list.

Сергій Сермакшев,

Hello,

Try another approach:

define("CaseSection", [], function() {
	return {
		entitySchemaName: "Case",
		messages: {},
		attributes: {},
		diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/,
		methods: {
			onGridDataLoaded: function(response) {
				this.callParent(arguments);
				this.performStylesChange();
			},
 
			performStylesChange: function() {
				var recordTitles = document.getElementsByClassName("grid-primary-column");
				for (var i = 0; i < recordTitles.length; i++) {
					var element = recordTitles[i];
					element.style.fontWeight = 'bold';
				}
			}
		}
	};
});

The logic here is simple: once grid data is loaded we go through all elements on the page and change the style for the text to bold to all title columns (which is a case number). This is not the best solution, but it works properly when the list is loaded or sorting\filtering is changed in the list.

Oleg Drobina writes:

i <

Thank you. For some reason, it complained about "i &lt;" had to delete. Everything worked. 

But how to implement this part of the logic?

if (item.get("ModifierType") == "00783ef6-f36b-1410-a883-16d83cab0980")

It is necessary to highlight only those records where some field matches a specific record in the directory.

Сергій Сермакшев,

Hello. Here is an example. It uses jQuery, but you may easily adapt it to Oleg's example. Main idea is that items[i] is viewModel coresponding to recordTitles[i] DOM element from Oleg's example. 

applyCustomCss: function(){
	var gridData = this.getGridData();
	var items = gridData.getItems();
	var uiItems = $("div[column-name='ColorByProductType']");
 
 
	for (var i = 0; i < items.length; i++){
		var height = $(uiItems[0]).css("height");
		var bgColor;
		var category = items[i].get("Product.SxGoodsCategory").value;
		if (category === SxProductConstants.GoodsCategory.Wine){
			var wineColor = items[i].get("Product.SxColor").value;
			if (wineColor === SxProductConstants.WineColor.Red){
				bgColor = "#cc0a0a";
			}
			else if (wineColor === SxProductConstants.WineColor.White){
				bgColor = "gold";
			}
			else if (wineColor === SxProductConstants.WineColor.Pink){
				bgColor = "pink";
			}
		}
		else if (category === SxProductConstants.GoodsCategory.Champagne){
			bgColor = "bisque";
		}
		else if (category === SxProductConstants.GoodsCategory.StrongAlcoholDrink){
			bgColor = "saddlebrown";
		}
		else if (category === SxProductConstants.GoodsCategory.Water){
			bgColor = "blue";
		}
		$(uiItems[i]).css(
			{"background-color": bgColor, 
			"border-radius": "50%",
			"vertical-align:": "middle",
			"margin-top": "7px",
			"margin-right": "2px",
			"width": height});
	}
},

And instead of oveeriding initQueryColumns method it is better to override getGridDataColumns

                getGridDataColumns: function () {
                   var baseGridDataColumns = this.callParent(arguments);
                   var gridDataColumns = {
                       "ModifiedBy.Type.Id": {path: "ModifiedBy.Type.Id"}
                   };
                   return Ext.apply(baseGridDataColumns, gridDataColumns);
               },

Сергій Сермакшев,

&lt is the html code for < symbol, it's a "feature" of the code editor here in the Community:)

As for ModifierType

We have access to items that will be displayed in the grid and their position will be the same as in the response.collection.collection.items. You can pass response to the performStylesChange method and process it there as well and perform the check for the needed ModifierType and change styles only for those records.

Something like:

define("CaseSection", [], function() {
	return {
		entitySchemaName: "Case",
		messages: {},
		attributes: {},
		diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/,
		methods: {
			onGridDataLoaded: function(response) {
				this.callParent(arguments);
				this.performStylesChange(response);
			},
 
			performStylesChange: function(response) {
				var processedItemsIndexes = this.checkResponseCollection(response);
				var recordTitles = document.getElementsByClassName("grid-primary-column");
				for (var i = 0; i < recordTitles.length; i++) {
					for (var j = 0; j < processedItemsIndexes.length; j++) {
						if (processedItemsIndexes[j] == i) {
							var element = recordTitles[i];
							element.style.fontWeight = 'bold';
						}
					}
				}
			},
 
			checkResponseCollection: function(response) {
				var responseItems = response.collection.getItems();
				var processItemsIndexes = [];
				for (var i = 0; i < responseItems.length; i++) {
					if (responseItems[i].values.Status.displayValue == "New") {
						processItemsIndexes.push(i);
					}
				}
				return processItemsIndexes;
			}
		}
	};
});

Here I marked tickets in the New status in bold text:

So you can use the same approach in your task.

Oleg Drobina,

Thank you very much. With your help to solve this problem. It also gave me some insight into working with section entries via JavaScript.
Also, if you don't mind, tell me how to compare the "Contact Type" lookup value in the : "ModifiedBy" field. Something like  "ModifiedBy.Type.Id". Thank you again.

Сергій Сермакшев,

You are welcome!

As for ModifiedBy.Type - the easiest way is to display this column in the section list.

Alternatively you can add the initQueryColumns method override to the section methods in the following manner:

initQueryColumns: function(esq) {
				this.callParent(arguments);
				esq.addColumn("Owner.Type", "OwnerType");
			},

What I did here is add the Owner.Type column in the Cases section esq (Case has an Assignee (which is the Owner column that references the Contact entity) and I need to check the contact type specified in this column). As a result

we have access to this OwnerType in the context of the onGridDataLoaded and performStylesChange execution. We can also use it for style recalculation. In your case it should be similar but using another column. 

Oleg Drobina,

You are great. Everything worked out.

Hello Andrii,

Basic capabilities don't allow the column to multiline properly. Yes, the <br> tag can be added, but this will make the title overlap the top border of the detail that is between the records and column titles. The only possible way is to play with CSS, but unfortunately we don't have any specific example for it.

Hello Harvey,

The style HTML tag (inside the head tag) usually contains CSS rules, which are crucial for the init page rendering, or the most general CSS rules. These rules could be overridden in a common way:

1. Create a new module, choose LESS in the left panel, and add the CSS rules.
2. Add the name of this module to the dependencies in the Page client module, starting with the prefix “css!”

Here is an additional example - https://community.creatio.com/questions/how-can-i-hide-task-properties-pre-config-page .

Best regards,

Natalia

Hi Natalia,

Unfortunately this doesn't seem to be working for me for 2 reasons:

1. The style in the CSS is not taking precedent over the OOTB style that is included in the style element in the DOM. Does Creatio have any way of overriding the OOTB elements' styles without resorting to using !important everywhere?
2. The client module seems to be "compiling" my code and modifying it from what I wrote (first line after this) into what appears in the browser sources (second line after this point) and these are completely different - Creatio cannot take 40 pixels off 100% height and conclude that it's always going to be 60% height:
   1. height: calc(100% - 40px)
   2. height: calc(60%)

Do you know of any resolution to these issues?

Hi Harvey

 

You can use this addon to apply CSS styles globally: https://marketplace.creatio.com/app/experceo-global-jscss-editor-creatio

If you can identify the selector, you can easily override the CSS properties values using !important keyword.

I hope this helps!

Mohamed Ouederni,

Thanks Mohamed, generally we're trying to keep add-ons to a minimum unless strictly necessary to avoid too many dependencies and potential points of failure, but worth knowing.

Using Natalia's recommendation, I was able to apply the CSS - for any others having this issue, the resolution to my first issue was just to set the style as being important, though another resolution might be to make the selector more specific (CSS specificity) than the ones acting upon it. And the resolution to my second issue was that it's a LESS CSS issue rather than Creatio's issue, but it can be worked around using the following escaping of the calculation:

height: calc(~"100% - 40px")

Which I found from this Stack Overflow question: https://stackoverflow.com/questions/11972084/how-to-prevent-less-from-t…

Hello,

to add colors to the value, if you know which div it is exactly, you can use the class or id of that div in the selector instead of ".label-wrap .t-label" as in step 1 of the example. Or you can look up the class or id by using inspector tool (Ctrl+shift+C) in the developer tools (f12) on your page and then use them in the selector. 

If you require more assistance please provide screenshots of div you want to color, would provide more clarity how to change the selector accordingly.

.

is there any updates on this?

Hello Sarika!

With CSS you can change the color by choosing the right selector. Example, where 2a879ccc-536d-45a9-980a-9ac0a00aea91 - id of value:

li[data-value="2a879ccc-536d-45a9-980a-9ac0a00aea91"] 
{
background-color: brown;
}

I would recommend you to use the new FreedomUI pages on the site. You can change bg-color in the system settings on the FreedomUI page (on your screen shot I can see Classic UI). It will take 10 min maximum.

To change colors with FreedomUI :

1) Open System designer -> Advanced settings

2) Find the Custom Object CasePriority or create a replacement:

3) Add the new column -> Other -> Color:

4) Add Title to the new Color column on the same page

5) Click on the Name of this object and choose value (Title name from p.4) in Color field:

6) Publish this object

7) Open System Designer -> Lookups -> Case priorities -> View -> Select fields to display:

8)Add HEX color code to the new column:

9) FreedomUI page will looks like:

Hello,

Please check this Community post as it has just the same question and resolution.

Best regards,

Bogdan S.

Hi Ramnath.

You can change the font size by adding a custom css style to the schema you need and in such a way override the system font-size. Please refer to this article on our community: https://community.bpmonline.com/questions/how-add-custom-style-control-page-based-condition

I recommend you change a font-size first for any page in the system to check if it looks fine as we do not guarantee that all objects, labels, and containers will be displayed correctly. 



Thank you.

Bohdan Zdor,

I have tried this before but I could only make it work on the page of arecord. I need to edit the page where all the records are shown. I could not find the module which has the code for the list of records.

Ramnath

RAMNATH SHARMA,

Unfortunately, there is no option to change the section list font size in the current version of the system. I have registered your suggestion, though. It was passed to our R&D team to be considered for further releases.

Thank you. 

Hi Muhammad,



You would need to create a custom Grid controller for your section. First up, you can generate controller code just like it is described here, specifying pageType: Terrasoft.PageTypes.Grid and selecting your section name. Then you should add a dependency to your grid in the manifest. You can use InvoiceMobile package as an example: https://prnt.sc/rpypgw - grid, and manifest - https://prnt.sc/rpyq0a.



Then, in the Terrasoft.view.BaseGridPage.View there is an object that is responsible for filter panel. This object has a function to show and hide: https://prnt.sc/rpyqsr. So in your grid view you would be able to get the filterpanel and then use function to hide it:



let filterPanel = this.getFilterPanel();

filterPanel.hide();



Regards,

Dmytro

The article by the link below describes how to add custom css to a mobile application:

https://community.creatio.com/articles/adding-custom-css-mobile-application

Please find the correct selector for the element you want to apply the custom css to. For example, it's possible to change the background color for the records in the Case section using selector

$("div[class='ts-list-subtitle-column']").css("background-color", "yellow");