How to Build a Custom Table/List Aggregation Logic in SAPUI5

SAP SE is doing a lot to make SAPUI5/OPENUI5 framework the best one among others for the business operations flow visualization in new HTML5 user interface. But sometimes requirements are telling us that it is not possible to be 100% percent standard and customization could lift an application to the maximum users satisfaction level.

Development Case

Let’s consider the case when it is required to extend basic SAPUI5 table with some custom data like images, indicators, checkboxes, buttons or just highlight rows with some custom CSS, and the common approach with aggregation binding can’t do it for us. The best solution here is to use factory functions, which can help to build more complex controls from existing model data.

The Factory Function for List Aggregation

SAPUI5 documentation gives the following explanation of the factory function: “The factory function is called for each list entry to create the controls necessary to represent the current entry. The developer can decide, whether it is the same control with different properties or even a completely different control for each entry”.

“The factory function is called for each list entry to create the controls necessary to represent the current entry. The developer can decide, whether it is the same control with different properties or even a completely different control for each entry”.

Factory function gets two parameters: sId (an identifier of the created control), oContext (a data item from model list). In return parameter there is an instance of sap.ui.core.Element.

Let’s take a look how it works:

    rmTable.bindAggregation("items", "/rm", function(sId, oContext) {
    var statusIndicatorImg = "/static/img/green.png";

    if(oContext.getProperty("level") == "red"){
                    statusIndicatorImg = "/static/img/red.png";
    } else if(oContext.getProperty("level") == "orange"){
                        statusIndicatorImg = "/static/img/orange.png";
    } else if(oContext.getProperty("level") == "yellow"){
                        statusIndicatorImg = "/static/img/yellow.png";
                    }

                    return new sap.m.ColumnListItem({
                        cells: [
                            new sap.m.Label({ text: oContext.getProperty("wo") }),
                                new sap.m.Label({ text: oContext.getProperty("operation") }),
                                new sap.m.Label({ text: oContext.getProperty("description") }),
                                new sap.m.Label({ text: oContext.getProperty("duration") }),
                            new sap.m.Label({ text: oContext.getProperty("work") }),
                                new sap.m.Label({ text: todaysDate }),
                                new sap.m.Image({ src: statusIndicatorImg })
                        ]
                    })
    });

Code Sample #1

Result of List Aggregation Extension

In this example we’ve created a custom table aggregation function which adds an indicator icon depending on data which is stored in model. This function might be extended to handle more complex data aggregation logic.

ztablesapui5_001 — Fig. 1. List Aggregation Extension with Semaphore Highlighting (CLICK FOR THE DEMO)

Conclusion

SAPUI5 (SAP OpenUI5) factory function could be easily used in list aggregation development tasks to emphasize data based on the predefined selection switch.