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
Previous
Next Post »

5 comments

Click here for comments
Dibya
admin
11 January 2017 at 02:47 ×

Hi, Can you make a tutorial on Smart Tables as well?

Reply
avatar
Sanjo Thomas
admin
11 January 2017 at 04:01 ×

yes sure I will create one

Reply
avatar
Unknown
admin
28 March 2018 at 05:53 ×

hey can you create a table that has different color of cells?

Reply
avatar
Unknown
admin
8 August 2018 at 04:19 ×

Hi, I am using smart table with tabletype as responsive type using custom data I have one more column, everything is working, but my client requirement is based on the value I have to hide the last column what I am doing is using formatter I have made the column value visible false. But in mobile mode because of demandPopin property column name is displaying...How to hide the column name in those rows?

Reply
avatar
Sam
admin
25 August 2019 at 10:48 ×

Hi Sanjo,
Thanks for the videos really very good and appreciate you for all the good topics. Could you please share the code for the videos for practice Email ID: msk.sapabap@gmail.com

Reply
avatar