Skip to Content
Technical Articles

SAP UI5 – Table Row shift / Expand

Overview:

I have seen quite few of posts and queries around shift the sap.m.table. I also came across few requirements similar to this.

So just tried few options with sap.m.table and sharing my experience of table show shift here.

Business Requirement:

I am developing a custom Fiori application for Manage Contract. As customer wanted to have mass approve /rejection of contracts, wherein he should able to select/deselect contacts and line items from single screen.

Basically it will provide option to view contact and its items along with critical details to take actions.

Note/caution:

I am using this application only on desktop, while you trying to use same case on productive purpose make sure the responsiveness and different form factors were tested and taken care at your application level to in line with sap design guidelines as well.

Sample Application:

I have a parent table to display the list of contacts, were user call click on icon to view the item details as below.

Row shift:

Implementation:

I maintained and column with max screen size greater than desktop (ex minScreenWidth=”1370px”) and made the column invisible and made visible while user clicks on the icon … very simple J …

 

Also in controller,

Also find the full example on github as well.

 

Summary:

This will provide few options and allow fellow developers to generate more ideas and solve few of them critical development use cases as well.

Please make sure the responsiveness and UI adoption based on devices at your own risk J .

5 Comments
You must be Logged on to comment or reply to a post.
    • Hi Shai,

       

      There is an special reason.

      However the flexible column layout is not available with our clients ui5 version.

      Also users were more interested on having all details in single page with less clicks.

  • Hi Rabin,

    Thanks for sharing such a nice solution.

    I downloaded the sample code you have shared and ran it in webide.

    Somehow, I am getting different output.

     

    Is anything missing in sample source code? May be a css or any event.

     

    Regards,

    KK

     

     

    /
  • Very helpful blog. Is it possible to apply search field to the item table? I tried, but it’s not working. Have any idea?

     

    new Filter("headerList/itemsList/Component", FilterOperator.Contains, sQuery);