Responsive sapui5 table

In this particular post, I will discuss about responsive web design in sapui5 and why responsiveness is important and how to implement responsiveness in sapui5 applications.

So, responsive web design is something that makes you web site look good on any devices, be it desktop, tablets or mobile phones. Mobile phones generally are constrained by display size and space, hence to display the content on mobile phones is a challenge while keeping the responsiveness factor in mind.

Responsive design allows sapui5 applications to run on desktop, smartphones, tablets and hybrid devices. As one switches across the devices, the sapui5 application automatically adjusts the resolution, image size.

SAPUI5 offers a wide range of UI controls that automatically adjusts to different form factors, thus making the application responsive. Even though sap.m library offers controls that are responsive by default unlike sap.ui.commons library. But still there are controls like sap.m.Table which has to be made responsive by the user himself according to his requirement.

So, in this post, I will show how to make a sap.m.Table control responsive.

Often, it happens that the data to be stored in table is quite a lot, including many columns and rows. In that condition, the responsiveness of the table matters. Tables with lot of data often don’t fit to the small screen, and for this SAPUI5 offers column hiding solution and popin(less imp data is skipped to next line) solution to solve this issue.

Now suppose, this is our table data having too many columns. 

When displayed on the phone, then it looks something like this:

Notice, the field Opening Balance and Balance (important fields) are on the top and are not hidden

 And rest less important fields have been shifted down, we are showing them in pop-in.

So, basically we can control the responsiveness of the table using 2 properties of sap.m.Column which is defined in the Table. And they are:

          1) minScreenWidth:  This value defines the break point of the column visibility like Tablet (600px) and Desktop (1024px). These two values are predefined sap.m.ScreenSize.

2)  demandPopin: Depending on the minScreenWidth, the column can be hidden in different screen sizes. Set the value to be true, if the particular column is to popin, instead of hiding the column itself.

So, let me just share the code for the above table, so that the concept is clear.

<Table id="Randomid">

<columns>

<Column minScreenWidth="Tablet" demandPopin="true"

hAlign="Left">

<Text text="Date}" />

</Column>

<Column minScreenWidth="Tablet" demandPopin="true"

hAlign="Right">

<Text text="Document Type}" />

</Column>

<Column width="10em">               //Here I haven’t mentioned demand popin, therefore the default value is false. That means this column is not hidden and not popin.

<Text text="Document Description/>

</Column>

<Column minScreenWidth="Tablet" demandPopin="true"

hAlign="Right">

<Text text="Document No. />

</Column>

<Column minScreenWidth="Tablet" demandPopin="true"

hAlign="Right">

<Text text="Debit Amount" />

</Column>

<Column minScreenWidth="Tablet" demandPopin="true"

hAlign="Right">

<Text text="Credit Amount" />

</Column>

<Column hAlign="Right">

<Text text="Balance">

</Column>

<Column minScreenWidth="Tablet" demandPopin="true"

hAlign="Right">

<Text text="Text" />

</Column>

</columns>

</Table>

So, that was it regarding the responsiveness of the table in Sapui5. Hope you understood the concept , if you have any doubts regarding this, mail to me at sapui5tutors@gmail.com or just comment down your queries below.

Watch and subscribe my youtube channel on sapui5 tutorials here:

https://www.youtube.com/channel/UC7bVTUqIAMKyQcYJ2c3XMhQ

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post