Skip to Content
0

SAPUI5 display table by using input field value

Oct 23, 2016 at 02:20 PM

632

avatar image

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. :)

error.jpg (71.6 kB)
10 |10000 characters needed characters left characters exceeded

use developer tool to check what are those

0

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.

0
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Best Answer
Scott Zheng Oct 29, 2016 at 02:24 PM
0

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
			});
		}
Share
10 |10000 characters needed characters left characters exceeded
Jun Wu Oct 26, 2016 at 04:45 AM
0

google web developer tool

in your browser press F12

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Dear Jun,

Thanks for your kindly feedback.

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

0
Jun Wu Oct 28, 2016 at 02:53 AM
0

tell me what u have done

don't know how to press F12?

don't know how to google?

Show 1 Share
10 |10000 characters needed characters left characters exceeded

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. :)

0