SAP UI5 - Table Row shift / Expand

[former_member254395]

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 .

[shais]

Thanks for sharing.

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

[former_member254395]

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.

[former_member9607]

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

 

 

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

[former_member614082]

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

[trmt]

Hi KK,

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

Thanks

[former_member9607]

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.

[Abhi9]

Hi ,

 

Did you tried using UI table ?

 

Thanks,

Abhi

[Ayush]

Hi 

is this possible if we  use SAP UI table?

i tried to use sap ui table but couldn't achieved it.(first level table sap ui table)

pls let me know if is possible with ui table