Styling List Rows Based on Conditions in the Data in Creatio (formerly bpm’online)

The more I work with Creatio the more impressed I am at the control and ease you have with customizing the application. Even though Creatio really pushes the “zero code” mantra (which is actually quite true, you really can do a lot in Creatio without writing any code) it is still a fantastic experience as a developer as well. Something I had the need to do recently turned out to be quite an easy task. That is, conditionally adding color to rows in a section list based on conditions in the data.

To accomplish this task we need two things:

1. Make sure the data we will use for this condition exists in the query for the list. We don’t want to have to go retrieve the data for each row in a separate query
2. Be able to respond to when the data is returned for the list and do something with each item

Both of these are implemented in Terrasoft.GridUtilities (GridUtilitiesV2), which is a mixin for BaseDataView (which is where all the list functionality is implemented), which is the parent for BaseSectionV2 (which is the parent for all section pages). The initQueryColumns is where we can make sure our columns exist in the list query, and prepareResponseCollection is where we can receive the results of the query to check the condition and apply our style. All we need to do is create a replacing module for the section we want to do this in, then override these two functions. Note: if you wanted to implement this across multiple sections, you could add this in a replacing module for BaseSectionV2, then check the entity type for the current section using this.entitySchemaName.

For this example, we’ll be adding a light green color to the rows in the opportunity section if the opportunity amount is greater than $3000. First, we’ll need a replacing module for OpportunitySectionV2. The easiest way to do this is to open the section wizard from the Opportunity section, then click save (no other changes are needed). Now, locate your OpportunitySectionV2 in your configuration package and open it. Add the following code:

define("OpportunitySectionV2", [], function() {
    return {
        entitySchemaName: "Opportunity",
        methods: {
            initQueryColumns: function(esq) {
                this.callParent(arguments);
                
                // if the Amount field does not exist in the list 
                // layout, it won't be part of the query for the list.
                // Since we will be using this field, we need to ensure
                // it is part of the query results
                if (!esq.columns.contains("Amount")) {
                    esq.addColumn("Amount");
                }
            },
            
            prepareResponseCollection: function(collection) {
                this.callParent(arguments);
                
                // for 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("Amount") && item.get("Amount") > 3000) {
                        // we'll merge our custom style with any potential
                        // existing style to play nice with other code that 
                        // might be adding style
                        item.customStyle = Ext.apply(item.customStyle || {}, {
                            "background-color": "#ebffeb"
                        });
                    }
                }, this);
            }
        }
    };
});

That’s it. Not much code at all. This will produce the following result:

The colors will be applied in both list & tile layouts. You can also implement this in detail lists as well by adding this same code to your detail schema, or to apply to all detail lists add to BaseGridDetailV2.

It is important to note that in initQueryColumns, you are passed an EntitySchemaQuery. So, applying anything you’d like to this, that is valid for ESQ works great here. Any forward or reverse column paths as well as aliases will work.