Styling Section List Rows Based on Conditions in the Data in bpm’online

The more I work with bpm’online the more impressed I am at the control and ease you have with customizing the application. Even though bpm’online really pushes the “zero code” mantra (which is actually quite true, you really can do a lot in bpm’online 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.

ABOUT THE AUTHOR

Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of slxdeveloper.com. He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Join our mailing list to receive the latest Infor CRM (Saleslogix) news and product updates!

You have Successfully Subscribed!