Skip to Content
0
Jul 18, 2019 at 05:16 AM

How to update ListControl with SelectionRow of table

61 Views

Hello!

I'm struggeling quite a time already with following issue.

I got 2 tables on one screen, separated via IconTabBar:

			<IconTabBar id="idTopLevelIconTabBar" selectedKey="db" class="sapUiNoContentPadding">
				<items>
					<IconTabFilter icon="sap-icon://activity-items" iconColor="Negative" text="Offen" key="all">
						<!--		<Bar class="sapContrastPlus" id="bar0_1554886910319">
						<contentLeft>
							<ToggleButton id="btnHall1" type="Ghost" text="{i18n>btnOffen}" pressed="true"/>
							<ToggleButton id="btnGescannt" text="{i18n>btnGescannt}"/>
						</contentLeft>
						<contentMiddle/>
					</Bar>-->
						<Bar id="bar0" class="ZSapBar">
							<contentLeft>
								<Label text="{i18n>delivery}" width="100%" id="lblDelivery" design="Bold" class="ZSapUIDeliveryLabel"/>
								<TextArea id="txtDelivery" rows="1" liveChange="onScan" placeholder="{i18n>scanLief}" class="ZSapUIDeliveryInput">
									<layoutData>
										<l:GridData span="XL12 L12 M12 S12"/>
									</layoutData>
								</TextArea>
							</contentLeft>
							<contentMiddle>
								<Label id="lblHall" design="Bold" class="ZSapUIHallLabel"/>
								<Button text="Scan-Simul" id="button2" press="onScan" activeIcon="sap-icon://process" type="Emphasized" visible="false"/>
							</contentMiddle>
						</Bar>
						<Table id="table" width="auto" noDataText="{worklistView>/tableNoDataText}" mode="MultiSelect" busyIndicatorDelay="{worklistView>/tableBusyDelay}" growing="true" growingScrollToLoad="true" includeItemInSelection="true" updateFinished="onUpdateFinished" itemPress="handleItemPress" selectionChange="onSelectionChange">
							<headerToolbar>
								<Toolbar>
									<Title id="tableHeader" text="{i18n>lagerEinhOffen}"/>
									<ToolbarSpacer/>
								</Toolbar>
							</headerToolbar>
							<columns>
								<Column id="nameColumn"/>
							</columns>
							<items id="item" itemPress="handleItemPress">
								<ColumnListItem id="citem" type="Active" visible="false">
									<cells/>
								</ColumnListItem>
							</items>
						</Table>
					</IconTabFilter>
					<IconTabFilter icon="sap-icon://bar-code" iconColor="Positive" text="Gescannt" key="scanned">
						<List id="table2" items="{Scanmodel>/Bundles}">
							<items>
								<StandardListItem title="{Scanmodel>Bundle}"/>
							</items>
						</List>
						<List id="table3" items="{Scanmodel2>/Bundles}" visible="false">
							<items>
								<StandardListItem title="{Scanmodel2>Bundle}"/>
							</items>
						</List>
					</IconTabFilter>
					
				</items>
			</IconTabBar>

On the first table I load data from the Backend into a JSON model which is called "Scanmodel". The rows of the table are multiple selectable. Hence when I'm clicking on a row it will be delivered to the second table. This is already working in the first place.

BUT if I'm refreshing the App via onAbort function - the transfer of the data to the second table isn't working anymore.

OnSelection Method:

onSelectionChange: function (oEvent) {


			var oSelected = oEvent.getParameter("selected");


			var oItem = oEvent.getSource();
			var oItems = this.oTable.getSelectedItems();


			var oScanModel = this.getView().getModel("Scanmodel");
			oScanModel.refresh();
			var oScanModel2 = new sap.ui.model.json.JSONModel("Scanmodel2");


			var bundleA = new Array();
			this.pushed = false;
			/*	jQuery.sap.delayedCall(3000, this, function () {
				oItems[0].addStyleClass("greenBackground");
				//	this.wait(4000);
			}.bind(this));
*/
			if (oSelected)
				for (var i = 0; i < oItems.length; i++) {
					bundleA.push({
						"Bundle": oItems[i].getCells()[0].getText()
					});


					//setTimeout(function (oItems) {
					//oItems[i].addStyleClass("greenBackground");
					/*	oItems[i].setVisible(false);
						
					}, 5000);
					
				*/
					//	this.wait(oItems, 4000, i);
					//wait a little bit until the row disappears
					//jQuery.sap.delayedCall(3000,this, function () {


					//this.item.setVisible(false);


					//	}.bind(this));
					//oScanModel.setProperty("/Bundles", bundleA);


					var aData = oScanModel.getProperty("/Bundles");


					if (!this.pushed) {


						aData.push.apply(aData, bundleA);


						//Remove empty elements in Bundle Array:
						if (aData[0].Bundle == "") {
							aData.splice(0, 1);
						}


						if (this._fAbort) {
							oScanModel2.setProperty("/Bundles", aData);


							this.oSTable.setModel(oScanModel2);
							this.getView().byId("table3").setVisible(true);
							this.getView().byId("table2").setVisible(false);
						} else {


							oScanModel.setProperty("/Bundles", aData);


							this.oSTable.setModel(oScanModel);
						}
						this.pushed = true;
						aData = [];
					}


					this.oTable.removeAggregation("items", oItems[i]);
					//this._fAbort = false;
				}
			else {
				this.item.removeStyleClass("greenBackground");
				if (oItem !== undefined) {
					oItem.getSelectedItem().removeStyleClass("greenBackground");
				}
			}


		},

onAbort Method:

		onAbort: function (oEvent) {
			//Refresh the delivery input
			this.getView().byId("txtDelivery").setValue();
			this.getView().byId("txtDelivery").setEditable(true);


			//Clear the tables & Delivery Input
			var oJSONModel = new sap.ui.model.json.JSONModel();
			var oJSONModel2 = new sap.ui.model.json.JSONModel();


			this.oSTable.removeAllItems();


			oJSONModel.setData({});
			this.oTable.setModel(oJSONModel);
			oJSONModel2.setData({});
			this.oSTable.setModel(oJSONModel2);


			this._fAbort = true;


			this.getView().unbindElement();
		},

The values to the second Table "oSTable" will be set here after the abort:

this.oSTable.setModel(oScanModel2);
							this.getView().byId("table3").setVisible(true);
							this.getView().byId("table2").setVisible(false);

But the data is simply not shown anymore.

table2.png

Attachments

table1.png (24.6 kB)
table2.png (12.3 kB)