Technical Articles

Rabin Dhas

April 2, 2019 1 minute read

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 .

7 Comments

You must be Logged on to comment or reply to a post.

Shai Sinai

April 3, 2019 at 3:52 pm

Thanks for sharing.

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

Rabin Dhas

Blog Post Author

April 4, 2019 at 7:11 am

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.

Krishnakant Joshi

April 14, 2019 at 6:34 am

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,

Adrian Pop

September 8, 2022 at 3:33 pm

Hi KK,

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

Thanks

Krishnakant Joshi

September 8, 2022 at 4:42 pm

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.

Moorthy S

June 29, 2020 at 6:32 am

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);

Arjun Malli

July 9, 2020 at 10:09 am

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

Technical Articles

SAP UI5 – Table Row shift / Expand

Assigned Tags