I’m customizing a detail/list view in Creatio where each row includes fields like A1, A2, A3. One of the fields is a single text field, and I want to style individual words within this field — for example, giving each word a different background color.
This is similar to how the multi-select lookup component shows selected values with separate styling (like colored tags). I’m trying to recreate that effect for a regular text field in the list view.
To clarify:
I already know how to inject custom CSS using modules and global CSS variables
What I’m looking for is a way to apply styling dynamically at runtime, depending on the text content
CSS alone doesn't work that way. You can't style single word within the same text using CSS. You'd need to manipulate the text so that each word would be wrapped in it's own span/div to be able to style them that way.
< 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:
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:
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.
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";}elseif(wineColor === SxProductConstants.WineColor.White){
bgColor ="gold";}elseif(wineColor === SxProductConstants.WineColor.Pink){
bgColor ="pink";}}elseif(category === SxProductConstants.GoodsCategory.Champagne){
bgColor ="bisque";}elseif(category === SxProductConstants.GoodsCategory.StrongAlcoholDrink){
bgColor ="saddlebrown";}elseif(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);},
< 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:
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.
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.
I want to color rows in a list page whose date has passed (Freedom UI).
I tried to add a css file to my list page. I followed this article, but I still have a problem. When I look at the page's inspect, I see that a line has been added with a link to the file I added (
I would appreciate help.
Can you give more specifics? Is the CSS not being applied to the page?
As long as the steps in the article are followed it does load the CSS on the page. The CSS itself would determine whether or not it actually applies to any elements. Ryan
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.
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:
Hi Bogdan, thank you for the solution links. But the screenshots in the reply are no longer visible. I followed the two steps in the reply, but had no luck. I put my screenshots below, can you correct them for me?
Step1, I created a module in our package Dynasafe1, kept JS empty
Step2, I put the CSS in the LESS
Step3, I created a replacing view model under Dynasafe1 package
Then I chose "Base schema - Detail with list" as the parent object.
And finally saved this replacing view model with JS kept empty. Did I miss something here?
what was done is adding the image to NuiLogin.aspx page css (add body elemnt there):
<style>
.font-preload {
position: absolute;
opacity:0;}
.font-preload-open-sans {
font-family:"Bpmonline Open Sans";}
.font-preload-open-sans-light {
font-family:"Bpmonline Open Sans Light";}
.font-preload-open-sans-bold {
font-family:"Bpmonline Open Sans Bold";}
body {
background-image: url("783px-Test-Logo.svg.png");}</style>
and put this image to the root directory of app binary files. Only css should be modified in case you don't need to repeat this image and to set the size for it.
what was done is adding the image to NuiLogin.aspx page css (add body elemnt there):
<style>
.font-preload {
position: absolute;
opacity:0;}
.font-preload-open-sans {
font-family:"Bpmonline Open Sans";}
.font-preload-open-sans-light {
font-family:"Bpmonline Open Sans Light";}
.font-preload-open-sans-bold {
font-family:"Bpmonline Open Sans Bold";}
body {
background-image: url("783px-Test-Logo.svg.png");}</style>
and put this image to the root directory of app binary files. Only css should be modified in case you don't need to repeat this image and to set the size for it.
Strange, this approach worked in my local app perfectly. Maybe there is an error message in the console when trying to reach the Login page and it will provide more details? Or maybe the image is empty? Also try restarting the application in IIS.
How can we add background color to a specific field in Record list. Please refer to the Screenshot i have attached. I want that status should change color as the value is also changes . ex. Status = Passed , then color should be green. if status = Failed then color should be Red. Please advise .
We have a boolean column in accounts section. If the value is checked, we would like to add an image on the header space as highlighted in yellow in image below. Is there a sample code/ recommendation for this?
You'll just need to play with the styles to get it to not wrap. Basically, you'll need to adjust the min-width of the div container of the label element (the div with class "label-wrap"), something like this:
I want to remove an element from a page (the LeftModuleContainer on the order page), I see the ID of the Div on the html using the 'F12' but I don't know where to find the html code. (the client module has the JS only...)
I think I'm missing a lot of information of how the code is stored in Creatio, can anyone explain me shortly how it works or if too difficult just explain how to get to the html and modify it?
