Skip to Content
Technical Articles
Author's profile photo Rabin Dhas

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 .

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Shai Sinai
      Shai Sinai

      Thanks for sharing.

      Is there any special reason you don't use the Flexible Column Layout?

      Author's profile photo Rabin Dhas
      Rabin Dhas
      Blog Post Author

      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.

      Author's profile photo Krishnakant Joshi
      Krishnakant Joshi

      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

       

       

      Author's profile photo Adrian Pop
      Adrian Pop

      Hi KK,

      I have the same issue, did you solve this issue somehow?

      Thanks

      Author's profile photo Krishnakant Joshi
      Krishnakant Joshi

      Adding width to sub table worked for me.

      Luckily, I still have that code with me. This is something I wrote.

      		onRowShiftAction: function (oEvent) {
      			var oSource = oEvent.getSource(),
      			oRow = oSource.getParent().getParent(),
      			oTable = this.getView().byId("idTable"),
      			aItems = oTable.getItems(),
      			index = 0,
      			that = this;
      //Loop to get the current item index
      			for (var i in aItems) {
      				if (aItems[i].getBindingContextPath() === oRow.getBindingContextPath()) {
      					index = i;
      				}
      			}
      //Check to count child tables created for different rows to generate unique ID
      			if (!this.childCount) {
      				this.childCount = 1;
      			} else {
      				this.childCount++;
      			}
      
      			if (oSource.getSrc() === "sap-icon://navigation-right-arrow") {
      				oSource.setSrc("sap-icon://navigation-down-arrow");
      				var oItemTemplate = new sap.m.ColumnListItem({
      					cells: [
      						new sap.m.Text({
      							text: "{model>Col1}"
      						}),
      						new sap.m.Text({
      							text: "{model>Col2}"
      						}),
      						new sap.m.Text({
      							text: "{model>Col3}"
      						})
      					]
      				});
      				// if (!this.oNewTable) {
      				var width = window.innerWidth - 100;
      				var oNewTable = new sap.m.Table({
      					id: "idChildTable" + this.childCount,
      					width: window.innerWidth - 100 + "px",
      					columns: [
      						new sap.m.Column({
      							header: new sap.m.Text({
      								text: "Col1"
      							}),
      							width: "4rem"
      						}),
      						new sap.m.Column({
      							minScreenWidth: "Tablet",
      							demandPopin: true,
      							popinDisplay: sap.m.PopinDisplay.Inline,
      							header: new sap.m.Text({
      								text: "Col2"
      							}),
      							width: "6rem"
      						}), new sap.m.Column({
      							minScreenWidth: "Desktop",
      							demandPopin: true,
      							popinDisplay: sap.m.PopinDisplay.Inline,
      							header: new sap.m.Text({
      								text: "Col3"
      							}),
      							width: "15rem"
      						})
      					]
      				});
      				oNewTable.bindItems({
      					path: "model>/EntitySet",
      					template: oItemTemplate
      				});
      				oTable.insertItem(new sap.m.ColumnListItem({
      					cells: [
      						oNewTable
      					]
      				}), parseInt(index) + 1);
      			} else {
      				oTable.removeItem(aItems[parseInt(index) + 1]); //On collapse removing table
      				oSource.setSrc("sap-icon://navigation-right-arrow");
      			}
      		}

      I hope it will work for you. Worked for me then. 🙂

      Author's profile photo Abhinay Dogiparthi
      Abhinay Dogiparthi

      Hi ,

       

      Did you tried using UI table ?

       

      Thanks,

      Abhi

      Author's profile photo Moorthy S
      Moorthy S

      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);
      Author's profile photo Arjun Malli
      Arjun Malli

      Even i can not see anything in the output with your full code whatever you updated in GItHub, can you please verify.