Skip to Content
Author's profile photo Krishna Kishor Kammaje

Binding based dynamic background colors for sap.m.Table rows

Many a times we have scenarios to highlight a Table’s row based on some content inside that. Here is a way to achieve it.

It has two steps involved.

  • Create a property in the DOM using binding. Read here for more details
  • Use Attribute-Value CSS selectors to select the above written DOM and apply color

Here is the End Result

Here is the complete code. Test it on JSBin

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SAPUI5 single file template | nabisoft</title>
        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-bindingSyntax="complex"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"></script>
            <!-- CSS colurs for country colors -->
         <style type="text/css">
tr[data-background="Mexico"] {
 background-color: #eaa6a6 !Important;
}
tr[data-background="Germany"] {
 background-color: #7dc0dc !Important;
}
           tr[data-background="UK"] {
 background-color: #dec588 !Important;
}
           tr[data-background="Sweden"] {
 background-color: #98d0a9 !Important;
}
tr[data-background="France"] {
 background-color: #d098c9 !Important;
}
           tr[data-background="Spain"] {
 background-color: #c2d098 !Important;
}
           tr[data-background="Canada"] {
 background-color: #d0d09a !Important;
}          

       </style>
        <!-- XMLView -->
        <script id="myXmlView" type="ui5/xmlview">
            <mvc:View
                controllerName="MyController"
                xmlns="sap.m"
                xmlns:core="sap.ui.core"
                xmlns:mvc="sap.ui.core.mvc">
       
                <Table
                    id="myTable"
                    growing="true"
                    growingThreshold="10"
                    growingScrollToLoad="true"
                    busyIndicatorDelay="0"
                    items="{/Customers}">
                    <headerToolbar>
                        <Toolbar>
                            <Title text="Customers"/>
                            <ToolbarSpacer/>
                        </Toolbar>
                    </headerToolbar>
                    <columns>
                        <Column>
                            <Text text="CustomerID"/>
                        </Column>
                        <Column>
                            <Text text="Company Name"/>
                        </Column>
                        <Column>
                            <Text text="Address"/>
                        </Column>
                        <Column>
                            <Text text="Country"/>
                        </Column>
                    </columns>
                    <items>
                  <ColumnListItem type="Active">
                  <!-- This is the most important part. This will result in writing country to DOM -->
                    <customData>
                      <core:CustomData key="background" value="{Country}" writeToDom="true" />
                    </customData>
                    <cells>
                        <ObjectIdentifier title="{CustomerID}"/>
                        <Text text="{CompanyName}"/> 
                        <Text text="{Address}"/> 
                        <Text text="{Country}"/> 
                    </cells>
                </ColumnListItem>
                    </items>
                </Table>
 
            </mvc:View>
        </script>

        <script>
            sap.ui.getCore().attachInit(function () {
                "use strict";

                //### Controller ###
                sap.ui.define([
                    "sap/ui/core/mvc/Controller",
                    "sap/ui/model/odata/v2/ODataModel"
                ], function (Controller, ODataModel) {
                    "use strict";
 
                    return Controller.extend("MyController", {
                        onInit : function () {
                            this.getView().setModel(
                                new ODataModel("https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/", {
                                    json : true,
                                    useBatch : false
                                })
                            );
 
                        }
                    });
                });
 
                //### THE APP: place the XMLView somewhere into DOM ###
                sap.ui.xmlview({
                    viewContent : jQuery("#myXmlView").html()
                }).placeAt("content");
 
            });
        </script>
 
    </head>
 
    <body class="sapUiBody">
        <div id="content"></div>
    </body>
</html>

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nabi Zamani
      Nabi Zamani

      Pretty cool - I've used this approach some time ago. It's a perfect example of how easy things can be instead of writing some lines of JavaScript code.

      Best, Nabi

      Author's profile photo Krishna Kishor Kammaje
      Krishna Kishor Kammaje
      Blog Post Author

      Thank you. Also thanks for the JSBin template. 🙂

      Author's profile photo Nabi Zamani
      Nabi Zamani

      It's my pleasure... 🙂