How to change the cell color of the grid in a detail

Hello Fulgen,

The idea is to connect your custom css styles to the desired detail. 

Here is the article which is describing it: https://academy.bpmonline.com/documents/technic-sdk/7-13/advanced-setti….



I recommend to test your styles in devtools before adding css to the schema. It is the most effective way to make cells look like you want .



Best regards,

Alex

Thank you alex,

What I need also is to put logic on every record to identify which color it will be. The same as overriding the prepareResponseCollectionItem method in section, It will be like the code below, but I need to apply it on detail records. How can I do that with detail? repareResponseCollectionItem: function(item) {

                // Calling the base method.
                this.callParent(arguments);
                item.customStyle = null;
                // Determining the order status.
                var running = item.get("Status");
                //If the status of the order is "In progress", the record style changes.
                if (running.value === OrderConfigurationConstants.Order.OrderStatus.Running) {
                    item.customStyle = {
                        // The text color is white.
                        "color": "white",
                        // The background color is green.
                        "background": "8ecb60"
                    };
                }
            }

Fulgen Ninofranco,

Actually, the grid details are using same method, so you should override it in detail schema. For example, I added this method to my detail  

http://prntscr.com/mpw1qy

and now items where quantity = 1 have red text color http://prntscr.com/mpw48t

Best regards,

Alex

Thank you Alex, overriding this method also works for detail grid.

Do you have any idea how to do this, one of our client requirements is to change only the color of status column, not all the columns in a row?

Fulgen Ninofranco,

It can be done via adding css styles to the html element.

Please check the links:

https://community.bpmonline.com/questions/how-add-custom-style-control-…

https://community.bpmonline.com/questions/detail-styles-css

https://community.bpmonline.com/questions/create-css-stylesheet-override

Hello!



We  have tried to apply this in editable detail. But colors are not changed when record is changed and saved.

Colors are applied only when the page is reopened or refreshed

What can we do with that?



Thank you!

Vladimir Sokolov,

The only way I could get that to work was a bit hacky. Add a saveDataRow method to override the existing one and do something like this (using Ext to reapply the styles). The code I used looked something like this (this is a shortened version)

saveDataRow: function(row, callback, scope) {
	// this returns something like { "background-color": "#080808" } etc
	var style = this.getRowStyle(row); 
 
	setTimeout(function() {
		Ext.select("div[id$=item-" + row.get(row.primaryColumnName) + "].grid-row-selected").applyStyles(style);
	}, 1000);
 
	this.mixins.ConfigurationGridUtilities.saveDataRow.apply(this, arguments);
},

The problem is that depending on how long for the row to get actually saved could make this not work. I plan on revisiting this to apply the styles once the update is complete (instead of when the save starts) boy replacing the callback arg passed, but sharing this now so maybe it gets you in the right direction.

Ryan