SAPUI5 display table by using input field value

[Former Member]

Hello Experts,

I'd like to display table data by using input value.

I created a data range by using two input fields. After click push button, get value from input field and then bind OData to table by using the selected value.

However, the result is pretty weird, there are several empty line displayed above the table text, and only first entry displayed.

I checked Backend system, the data were provided with no problem. However it cannot be displayed well in UI5.

I am new in SAP UI5, could you please teach me how to make this happen? Sample code would be highly appreciated.

As below is my trial code in SAPUI5.

View:

	<Panel headerText="Selection Condition" class="sapUiResponsiveMargin" width="auto">
		<content>
			<Label text="Emp ID" class="sapUiSmallMargin"/>
			<Input id = 'EmpId1' width="200px"/>
			<Label text="To" class="sapUiSmallMargin"/>
			<Input id = 'EmpId2' width="200px"/>
			<Button text="Search" press="Search" />
		</content>
	</Panel>
	
	<Table  
			id="Employees" inset="false" 
		    >
		<headerToolbar>
			<Toolbar>
				<Title text="Employee Info" level="H2"/>
			</Toolbar>
		</headerToolbar>
		<columns>
			<Column width="1em">
				<Text text="Emp Id"/>
			</Column>
			<Column width="1em">
				<Text text="Name"/>
			</Column>
			<Column width="1em">
				<Text text="Address"/>
			</Column>
			<Column width="1em">
				<Text text="Salary"/>
			</Column>
			<Column width="1em">
				<Text text="Street1"/>
			</Column>
			<Column width="1em">
				<Text text="Street2"/>
			</Column>
			<Column width="1em">
				<Text text="City"/>
			</Column>
			<Column width="1em">
				<Text text="Country"/>
			</Column>
		</columns>
		<items>
			<ColumnListItem>
				<cells>
					<Text text="{EmpId}"/>
					<Text text="{Name}"/>
					<Text text="{Address}"/>
					<Text text="{Salary}"/>
					<Text text="{Details/Street1}"/>
					<Text text="{Details/Street2}"/>
					<Text text="{Details/City}"/>	
					<Text text="{Details/Country}"/>
				</cells>
			</ColumnListItem>
		</items>
	</Table>

View Controller - Search function

		Search: function(){
			var oView = this.getView();	
			var oInput1 = oView.byId("EmpId1").getValue();
			var oInput2 = oView.byId("EmpId2").getValue();
			var oTable = oView.byId("Employees");
			
			var aFilter =[];
			aFilter.push(new sap.ui.model.Filter("EmpId", sap.ui.model.FilterOperator.BT, oInput1, oInput2));
			oTable.bindItems({
				path: "/EmpDetailsSet",
				mode : "SingleSelectMaster",
				templateShareable: true,
				filters: aFilter,
				template: new sap.m.ObjectListItem({
				})
			});
		}

Thanks in advance. 🙂

[junwu]

use developer tool to check what are those

[Former Member]

Dear Jun,

Thanks for your hint at first.

Since I am new in SAP UI5, I don't know what developer tool could be used and how to use.

Could you please provide more detail or some online documentations? That would be helpful.

Thanks and looking forward to your reply.

[Former Member · Accepted solution]

In the control of table, it should have parameter items="{}" for dummy binding.

As below is the code for view.

	<Table  
			id="Employees" 
			inset="false"
			items="{}"
		    >
		<headerToolbar>
			<Toolbar>
				<Title text="Employee Info" level="H2"/>
			</Toolbar>
		</headerToolbar>
		<columns>
			<Column width="1em">
				<Text text="Emp Id"/>
			</Column>
			<Column width="1em">
				<Text text="Name"/>
			</Column>
			<Column width="1em">
				<Text text="Address"/>
			</Column>
			<Column width="1em">
				<Text text="Salary"/>
			</Column>
			<Column width="1em">
				<Text text="Street1"/>
			</Column>
			<Column width="1em">
				<Text text="Street2"/>
			</Column>
			<Column width="1em">
				<Text text="City"/>
			</Column>
			<Column width="1em">
				<Text text="Country"/>
			</Column>
		</columns>
		<items>
			<ColumnListItem>
				<cells>
					<Text text="{EmpId}"/>
					<Text text="{Name}"/>
					<Text text="{Address}"/>
					<Text text="{Salary}"/>
					<Text text="{Details/Street1}"/>
					<Text text="{Details/Street2}"/>
					<Text text="{Details/City}"/>	
					<Text text="{Details/Country}"/>
				</cells>
			</ColumnListItem>
		</items>
	</Table>

In view controller, I need to get view and its binding information in the onInit function at first.

And then in Search function, get table and use function bindItems to set filter and template to bind the expected data back to the table.

Then data could be displayed as I want.

		onInit: function(){
			// Get OData Model and set it to view
			var oModel = this.getOwnerComponent().getModel();
			var oView = this.getView();	
			oView.setModel(oModel);
			
			var oTable = this.getView().byId("Employees");
			this.oBindingTable = oTable.getBindingInfo("items");
			
			// oTable.unbindAggregation("items");
		},
		
		Search: function(){
			var oView = this.getView();	
			var oInput1 = oView.byId("EmpId1").getValue();
			var oInput2 = oView.byId("EmpId2").getValue();
			
			var oTable = this.getView().byId("Employees");
			var aFilters = [];
			aFilters.push(new sap.ui.model.Filter("EmpId", sap.ui.model.FilterOperator.BT, oInput1, oInput2));
			
			oTable.bindItems({
				 path: "/EmpDetailsSet",
				 template: 	this.oBindingTable.template,
				 templateShareable: true,
				 filters: aFilters
			});
		}

[junwu]

tell me what u have done

don't know how to press F12?

don't know how to google?

[Former Member]

Dear Jun,

Thanks for your feedback.

I already get the solution from my colleague. The reason is that there is some problem in my coding. Even though I don't quite understand, but it can work now.

In the control of table, it should have parameter items="{}" for dummy binding.

As below is the code for view.

	<Table  
			id="Employees" 
			inset="false"
			items="{}"
		    >
		<headerToolbar>
			<Toolbar>
				<Title text="Employee Info" level="H2"/>
			</Toolbar>
		</headerToolbar>
		<columns>
			<Column width="1em">
				<Text text="Emp Id"/>
			</Column>
			<Column width="1em">
				<Text text="Name"/>
			</Column>
			<Column width="1em">
				<Text text="Address"/>
			</Column>
			<Column width="1em">
				<Text text="Salary"/>
			</Column>
			<Column width="1em">
				<Text text="Street1"/>
			</Column>
			<Column width="1em">
				<Text text="Street2"/>
			</Column>
			<Column width="1em">
				<Text text="City"/>
			</Column>
			<Column width="1em">
				<Text text="Country"/>
			</Column>
		</columns>
		<items>
			<ColumnListItem>
				<cells>
					<Text text="{EmpId}"/>
					<Text text="{Name}"/>
					<Text text="{Address}"/>
					<Text text="{Salary}"/>
					<Text text="{Details/Street1}"/>
					<Text text="{Details/Street2}"/>
					<Text text="{Details/City}"/>	
					<Text text="{Details/Country}"/>
				</cells>
			</ColumnListItem>
		</items>
	</Table>

In view controller, I need to get view and its binding information in the onInit function at first.

And then in Search function, get table and use function bindItems to set filter and template to bind the expected data back to the table.

Then data could be displayed as I want.

		onInit: function(){
			// Get OData Model and set it to view
			var oModel = this.getOwnerComponent().getModel();
			var oView = this.getView();	
			oView.setModel(oModel);
			
			var oTable = this.getView().byId("Employees");
			this.oBindingTable = oTable.getBindingInfo("items");
			
			// oTable.unbindAggregation("items");
		},
		
		Search: function(){
			var oView = this.getView();	
			var oInput1 = oView.byId("EmpId1").getValue();
			var oInput2 = oView.byId("EmpId2").getValue();
			
			var oTable = this.getView().byId("Employees");
			var aFilters = [];
			aFilters.push(new sap.ui.model.Filter("EmpId", sap.ui.model.FilterOperator.BT, oInput1, oInput2));
			
			oTable.bindItems({
				 path: "/EmpDetailsSet",
				 template: 	this.oBindingTable.template,
				 templateShareable: true,
				 filters: aFilters
			});
		}

Anyway, thank you so much for you kindly help and effort for my question.

Cheers. 🙂

[junwu]

google web developer tool

in your browser press F12

[Former Member]

Dear Jun,

Thanks for your kindly feedback.

But I still don't know how to do that, sorry for that.