Skip to Content
0

Populating table after Combo Box Selection SAPUI5

Jan 22 at 10:24 PM

112

avatar image

I have a table that is populated by oData but I want it to not populate when first loading the page.

How can I have it be empty until the user selects a choice in the combo box first? Is there suppose to be a change in the view controller or manifest? I used the master detail template so I'm not sure where to modify.

view:

<ComboBox id="officeComboBox" width="100%" placeholder="Office" selectionChange="officeComboChange">
<items>
<core:Item key="{OFFICE_CODE}" text="{OFFICE_CODE}" textDirection="RTL"/>
</items>
</ComboBox>
</HBox>
</contentLeft>
</Bar>

<Table xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" noDataText="Initializing Data" id="statTable" growing="true" includeItemInSelection="true" headerText="EST" items="{path:'/ESTSet'}"> 

controller:

officeCodeChange function is working fine in showing only the selected items from the combo box

onInit: function() {

var oViewModel, iOriginalBusyDelay, oTable = this.byId("officeCombo");

this._oTableSearchState = [];
},


officeCodeChange: function(event) {
	var aFilters = [];
	var officeCode = event.getParameter("selectedItem").getText();
	var filter = new Filter("EST_ID", sap.ui.model.FilterOperator.Contains, officeCode);
	aFilters.push(filter);
			
	var list = this.getView().byId("statTable");
	var binding = list.getBinding("items");
	binding.filter(aFilters, "Application");
}
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

avatar image
Former Member Jan 23 at 05:57 AM
0

Hi

Try binding the table upon change of the combobox.

Have a look into this URL

https://stackoverflow.com/questions/37859625/how-to-bind-dynamic-data-to-a-table-in-sapui5

Share
10 |10000 characters needed characters left characters exceeded
Irfan Gokak Jan 23 at 08:41 AM
0

Hi,

Do the binding from the controller not at the view level. Do the changes as below.

-------------- In View ---------------------
--------------- change property value for items -----------------
<Table xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" noDataText="Initializing Data" id="statTable" growing="true" includeItemInSelection="true" headerText="EST" items="{path:'MdlName>/ESTSet'}">

----- items="{path:'MdlName>/ESTSet'}" => this will not make odata call at initial load ------------

-------- Controller -----------------------------
officeCodeChange: function(event) {
	var aFilters = [];
	var officeCode = event.getParameter("selectedItem").getText();
	var filter = new Filter("EST_ID", sap.ui.model.FilterOperator.Contains, officeCode);
        var list = this.getView().byId("statTable");
	oModel.read("/ESTSet", {
				filters: filter, 
				success : function(oData, oResponse){
					//execute in case of call success
					var oJson = new sap.ui.model.json.JSONModel({
						"ESTSet": oData.results
					});
					list.setModel(oJson, "MdlName");
				},
				error : function(oData, oResponse){
					//execute in case of call fail
					var obj = JSON.parse(oData.response.body);
					var msg = obj.error.message.value;
					sap.m.MessageBox.show(msg, {
						icon: sap.m.MessageBox.Icon.ERROR,
						title: "Error",
						actions: [sap.m.MessageBox.Action.OK]
					});
				}
			});

}

----------It'll work
Show 2 Share
10 |10000 characters needed characters left characters exceeded

Hi Irfan,

I get an error with the oModel, saying it is not it is not defined. is the oModel suppose to be instantiated as a JSON?

0

oModel is your odata model. add below line to initiate odata model.

var oModel = this.getView().getModel();
0