Skip to Content

Populating table after Combo Box Selection SAPUI5

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");
}
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Jan 23 at 05:57 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 23 at 08:41 AM

    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
    Add comment
    10|10000 characters needed characters exceeded