deman pop-in
minScreenWidth
responsive
responsive table
responsive table in sapui5
responsiveness
sapui5
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.
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
Next
« Prev Post
« Prev Post
Previous
Next Post »
Next Post »
Subscribe to:
Post Comments (Atom)
5 comments
Click here for commentsHi, Can you make a tutorial on Smart Tables as well?
Replyyes sure I will create one
Replyhey can you create a table that has different color of cells?
ReplyHi, 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?
ReplyHi Sanjo,
ReplyThanks 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
ConversionConversion EmoticonEmoticon