Advanced SAPUI5 Part-30: the Grid Table Advanced Features

We gained knowledge of row actions as well as the freezing of columns and rows. I’ll go over the grid table’s characteristics below in this blog article.

  • row highlighter
  • swap out the row colors

Highlighter for Rows

A row highlighter is a vertical color band that is used to indicate a row’s start with a certain color, such as red for an error, yellow for a warning, green for a success, etc. In a technical sense, the grid table’s row Settings Template aggregate has to be implemented. The row Settings Template is where.


XML View coding

We have the Row Settings property named highlight set to the O Data service‘s Fax attribute. Please see the grid table topic for information on starting from scratch when building a UI control for a grid table. The aforementioned code is based on that post’s code. The value of the Fax attribute is not kept for some of the records in the OData service’s output. As a result, the formatter function used in the code above will return SUCCESS for entries for which fax is retained and ERROR for records of this type.


Controller coding: formatter function logic

The formatter function has been defined in the controller to return the correct value for the RowSettings highlight property. This is the code.

setHighLight:function(sProperty)
		{
			var highLightVal = '';
			if((sProperty === null) || (sProperty === ''))
			{
				highLightVal = sap.ui.core.MessageType.Error;
			}
			else
			{
				highLightVal = sap.ui.core.MessageType.Success;
			}
			return highLightVal;
		},

View the Row Highlighter in operation.

When you run the application, you will notice that rows will be highlighted in red and green depending on whether the Model’s Fax property is available.

Different Row Coloring

Up until now, every row has had the same background color—white. A characteristic of a grid table allows the rows to be alternately colored on a light grey background. To do this, set

The magic is accomplished by setting this property to true. Save the view code now, then launch the application once more. You’ll notice that the colors have been applied to alternate rows.

Please do the actions outlined in this blog article. In the comments box, please leave any questions, comments, or criticism. I will gladly reply as soon as possible.


you may be intereseted in this blog:-

Create and Configure Automation

Unleash the Power of Your Salesforce Inspector Extension

MASTER YOUR PRODUCT JOURNEY WITH SAP PLM (2024 GUIDE)

Elevating Data Interoperability: Exploring OData Implementations and Libraries

  • Related Posts

    How Can UI5 Apps Be Deployed Without LPD_CUST?

    Applications using SAPUI5 have the option to include reusable UI blocks known as Components. These are SAPUI5 applications that are completely working. Put differently, SAPUI5 apps can leverage the notion…

    SAPUI5: Fundamental Factory Functions for Freshmen

    Do you count among those who are just now becoming aware of Factory functions? Do not experience exclusion. Few people are familiar with this word. Everyone is growing and learning…

    Leave a Reply

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

    You Missed

    How Can UI5 Apps Be Deployed Without LPD_CUST?

    • By Varad
    • February 20, 2025
    • 28 views
    How Can UI5 Apps Be Deployed Without LPD_CUST?

    SAPUI5: Fundamental Factory Functions for Freshmen

    • By Varad
    • February 19, 2025
    • 35 views
    SAPUI5: Fundamental Factory Functions for Freshmen

    Utilizing the Formatter Function in SAPUI5

    • By Varad
    • February 18, 2025
    • 34 views
    Utilizing the Formatter Function in SAPUI5

    SAPUI5, the newly introduced Resource Model

    • By Varad
    • February 17, 2025
    • 53 views
    SAPUI5, the newly introduced Resource Model

    How can I send an email in the SAPUI5 Hybrid App? Advance SAPUI5 – 3.

    • By Varad
    • February 16, 2025
    • 50 views
    How can I send an email in the SAPUI5 Hybrid App? Advance SAPUI5 – 3.

    Advanced Speech Recognition with SAPUI5–7

    • By Varad
    • February 15, 2025
    • 43 views
    Advanced Speech Recognition with SAPUI5–7