Hello, Creatio Community,

I'm seeking a more efficient method for customizing Creatio's appearance. Is there a way to apply a global custom style to all sections of Creatio, eliminating the need for manual CSS adjustments on individual pages?

something like this css but for all pages 

body .crt-data-table-container   .crt-data-table   .crt-data-table-header-cell-container   .crt-header-cell   .crt-header-cell-caption-container   .crt-header-cell-caption {
     color: #000000 !important;
}

body crt-link .crt-link {
   color: #000000;
   border-bottom: none !important;
}

Like 1

Like

1 comments
Best reply

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

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

Show all comments

Hello. In a section page, I need to make the case number font bold, but according to a specific field value. I tried to do it based on several articles (https://community.creatio.com/questions/how-add-custom-style-control-pa… https://community.creatio.com/questions/bigger-font-name-list-record-di…). 

But I'm running out of ideas. I would be grateful for your help!

Something like this, but only for case number text.

Like 1

Like

9 comments
Best reply

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

 

&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 &lt; recordTitles.length; i++) {
					for (var j = 0; j &lt; 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 &lt; 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.

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 &lt; 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 &lt; 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 &lt; recordTitles.length; i++) {
					for (var j = 0; j &lt; 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 &lt; 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.

Show all comments

Hi, I tried to make a grid caption in two lines, first I added a
tag to the title of the header

 

 

but the second line was hidden somewhere behind the table elements.
Then I added my own CSS (a copy of InnerListedGridHtmlGeneratorCSS.css)

added padding-bottom: 60px to the fixed-captions-wrap class and it made it two-line, but
now it overlaps the first lines of the list.

 


Can you advise me on how to fix this or any other way to make the labels span two lines?

 

 

.fixed-captions-wrap-width(@scrollWidth) {
    .fixed-captions-wrap {
        width: calc(~"100% - @{scrollWidth}");
    }
}
.grid.grid-listed.inner {
    @fixed-header-height: 37px;
    padding-top: @fixed-header-height;
    .listed-grid-line:not(:last-child) {
        border-bottom: 1px solid #e5e5e5;
    }
    .fixed-captions-wrap .grid-captions {
        box-shadow: 0 1px 1.9px 0.1px rgba(0, 0, 0, 0.28);
    }
    .listed-grid-line {
        display: flex;
    }
    .grid-listed-row {
        margin: 0;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .fixed-captions-wrap {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        height: @fixed-header-height;
        overflow: visible;
        background-color: white;
        width: 100%;
        padding-bottom: 60px;
    }
    .grid-captions.fixed-header {
        position: absolute;
        padding-top: 9px;
        padding-bottom: 5px;
        font-size: 13px;
    }
    label {
        font-size: 1em;
    }
    .grid-scroll {
        overflow: auto;
    }
    .grid-bottom-spinner-space {
        position: relative;
    }
}
Like 1

Like

1 comments

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.

Show all comments

I've noticed there are a lot of HTML Style elements added to the Creatio pages' DOM, and I was wondering what generates and sends these to the browser so that some of them can be modified. This appears to be different from the normal CSS Linking that happens in Creatio, so I presume there must be some different method for overriding them. See below for an example of one of the style elements I want to modify:

Like 1

Like

4 comments

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…

Show all comments

Hi Team,

 

I'm looking for a solution where i can apply colors to the Field values (not labels) using CSS on a conditional basis. I followed the article https://community.creatio.com/questions/conditional-formatting-field-ed… but it applies color on the label of the field, not the value div.

 

Kindly help.

Best Regards,

Sarika

Like 0

Like

4 comments

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:

 

 

 

Show all comments

Hey community !

 

I'm using Creatio v7.17.3.1377.

 

I wanted to create a custom CSS for my contact page and I ran into an issue. On the french version on Creatio (fr-FR). So I went to advanced settings -> custom -> add -> module -> LESS and my LESS code isn't recognized :

 

Although on the English translation everything works fine :

 

Here are the steps to reproduce the bug :

1. Install the French translation in the system settings -> languages

2. Change your language to French in your profile (You will have to log out and log in for the language to be applied)

3. Click on "Paramètres avancés" (advanced settings) after clicking on the wheel under your profile.

4. Click on "Custom" -> "Ajouter" -> Module

 

5. Click on "MOINS" (French translation for LESS) and try typing some LESS code (the code shown here is just an example)

 

That's it !

 

Best regards,

 

Julien Gunther

1 comments

Hello,

 

This is out of the box bug that was fixed. Feel free to approach the support team via support@creatio.com for the details on how to resolve it.

 

Regards,

Dean 

Show all comments

Hi Team,

 

I need to add dollar symbol in a decimal field . Is there a way to do it ? I have some reference attached 

 

Regards,

Sethuraghav N

 

Like 0

Like

1 comments

Hello,

 

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

 

Best regards,

Bogdan S.

Show all comments

How can I get bigger font for name in custom section.

Here is the pic of Contact section (in-buily) with Name shown in big fonts in tile view.

Now I have built my custom Contact section but with few changes. It is not replaced or inherited with actual Contact section.

Now in the section after removing caption of the field the font size of name is still small.

 

How can I get bigger font like in in-built/out of the box contact Section.

I want to apply it to other sections also. So there is no point to use out of the box Contact section by replacing object which already has big fonts.

Like 0

Like

3 comments

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. 

Show all comments

Hi Community,

 

By default the search field showing like below, I need to hide it on first load and once I click on icon the search field should appear

 

 

Any help will be highly appreciable.

 

Regards

Like 0

Like

1 comments

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

Show all comments

Hi Community,

 

I able to change css dynamically for section list view on CRM (browser). This article I followed.

 

Question: How to change css dynamically for a section list view column on mobile interface? There is no documentation exist. I need to change background color of case status on mobile list view on the basis of its value

 

Any help will be highly appreciable.

 

Regards

Like 0

Like

1 comments

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");

 

 

 

 

 

Show all comments