Getting error in filtering a data in table while consuming data from odata services.

[Former Member]

Hi,

I am Getting error in filtering a data in table while consuming data from odata services and the table lies in value help control.I am able to get data in table through odata service but when i enter the company code value in search field and press go button data in table is not updated.Kindly look into the problem.

find the attachment of the output screen.

Controller

onInit: function() {

var oDataModel = new sap.ui.model.odata.ODataModel("service url",  true, "username",  "password");

sap.ui.getCore().setModel(oDataModel,"oDataModel1");

this.theTokenInput= this.getView().byId("multiInput1");

  this.aKeys= ["CompanyCode","CompanyCodeName"];

var token1= new sap.m.Token({key: "001", text: "Construction"});

  this.aTokens= [token1];

  this.theTokenInput.setTokens(this.aTokens);

},

onValueHelpRequest: function() {

  var that= this;

  var oValueHelpDialog = new sap.ui.comp.valuehelpdialog.ValueHelpDialog({

  basicSearchText: this.theTokenInput.getValue(),

  title: "Company",

  supportMultiselect: true,

  supportRangesOnly: false,

  key: this.aKeys[0],

  descriptionKey: this.aKeys[1],

  ok: function(oControlEvent) {

  that.aTokens = oControlEvent.getParameter("tokens");

  that.theTokenInput.setTokens(that.aTokens);

  oValueHelpDialog.close();

  },

  cancel: function() {

  sap.m.MessageToast.show("Cancel pressed!");

  oValueHelpDialog.close();

  },

  afterClose: function() {

  oValueHelpDialog.destroy();

  }

  });

  var oColModel = new sap.ui.model.json.JSONModel();

  oColModel.setData({

  cols: [

        {label: "Company Code", template: "CompanyCode"},

        {label: "CompanyCodeName", template: "CompanyCodeName"}

        ]

  });

  oValueHelpDialog.getTable().setModel(oColModel, "columns");

  oValueHelpDialog.getTable().setModel(sap.ui.getCore().getModel("oDataModel1"));

  oValueHelpDialog.getTable().bindRows("/CompanyCodeValuehelp");

  oValueHelpDialog.setRangeKeyFields([{label: "Company Code", key: "Company Code"}, {label : "CompanyCodeName", key:"CompanyCodeName"}]);

  oValueHelpDialog.setTokens(this.aTokens);

  var oFilterBar = new sap.ui.comp.filterbar.FilterBar({

  advancedMode:  true,

  filterBarExpanded: true,

  searchEnabled:true,

  filterGroupItems: [new sap.ui.comp.filterbar.FilterGroupItem({ groupTitle: "foo", groupName: "gn1", name: "n1", label: "Company Code", control: new sap.m.Input()}),

                    new sap.ui.comp.filterbar.FilterGroupItem({ groupTitle: "foo", groupName: "gn1", name: "n2", label: "CompanyCodeName", control: new sap.m.Input()})],

                    search: function(oEvt) {

        var aFilters = [];

        var sQuery = oEvt.getSource().getValue();

        if (sQuery && sQuery.length > 0) {

        var filter = new sap.ui.model.Filter("CompanyCode", sap.ui.model.FilterOperator.Contains, sQuery);

        aFilters.push(filter);

        }

        var oColModel = new sap.ui.model.json.JSONModel();

        oColModel.setData({

        cols: [

              {label: "Company Code", template: "CompanyCode"},

           {label: "CompanyCodeName", template: "CompanyCodeName"}

              ]

        });

        oValueHelpDialog.getTable().setModel(oColModel, "columns");

        oValueHelpDialog.getTable().setModel(sap.ui.getCore().getModel("oDataModel1"));

        oValueHelpDialog.getTable().bindRows("/CompanyCodeValuehelp");

        oValueHelpDialog.getTable().filter(aFilters,"Application");

                    }

  });

Error

I am getting error in console

Uncaught TypeError: oEvt.getSource(...).getValue is not a function

Regards,

Monika

[saivellanki]

Hi Monika,

One more thing, scrap the old logic used for search.

There are two types of search in filter bar control. One normal search that is search box. For this you have to create sap.m.SearchField control and you should say new sap.ui.comp.filterbar.FilterBar.setBasicSearch(new sap.m.Search());

In search you can provide either CompanyCode/Currency Code /Company Name value and you should press keyboard enter button (or) the search icon. (NOT the GO button)

There is advanced search as well, here you can provide only Company code in company code input and other fields with respect to their values etc.. and you should press 'GO' button to filter the table. (NOT the keyboard ENTER button)

Check this Sample, you will understand: Plunker

Screenshot: Image

Regards,

Sai Vellanki.

[former_member317275]

Better solution to this problem is convert odata model to json format and

set the data to a json model defined within

valueHelpPress function.

1. var oRowsModel = new sap.ui.model.json.JSONModel();
2. oRowsModel.setData(this.aItems);
3. oValueHelpDialog.getTable().setModel(oRowsModel);

Check the bind row's path it differ's when calling odata service and binding json data.

[saivellanki]

Hi Monika,

I guess you have to define conditions for search. However check this sample where I written logic for search box, now it filters with company code. Provide any company code in search box and click on GO button, value help dialog table will be filtered.

Sample: Plunker

Also, can you elaborate your requirement -

1. Which value should be provided on search field?

2. Do you want advanced search also available?

Regards,

Sai Vellanki.

[Former Member]

Hi Sai ,

The code which you sent me in that you are filtering data saved localy in json  format  but i am trying to filter the data of odata services but its not possible so for that first i need to load the odata services data in  json model then the filtering will work .

Now i am trying to load data from odata services in json model but not getting data in table

oninit()

{

var model = new sap.ui.model.json.JSONModel(); 

        newurl = "/SAP/ZTEST_MATERIAL_SRV?$format=json"; 

       model.loadData(newurl,null, false, "GET",false, false, null); 

        sap.ui.getCore().setModel(model, "model1");

}

in valuehelprequest function i set the model but not getting data in table

oValueHelpDialog.getTable().setModel(sap.ui.getCore().getModel("model1"));

        oValueHelpDialog.getTable().bindRows("/CompanyCodeValuehelp");

Earlier i was getting data in table when i had implemented the below code.

oninit()

{

var oDataModel = new sap.ui.model.odata.ODataModel("/SAP/ZTEST_MATERIAL_SRV/", 

  true, 

  "username", 

  "password");

       sap.ui.getCore().setModel(oDataModel,"oDataModel1");

}

in valuehelprequest function i set the model but not getting data in table

oValueHelpDialog.getTable().setModel(sap.ui.getCore().getModel("oDataModel1"));

        oValueHelpDialog.getTable().bindRows("/CompanyCodeValuehelp");

Regards,

Monika

[saivellanki]

Hi Monika,

Sometimes the model cannot be set instantly, you have to listen attachRequestCompleted function where request has been completed (includes receiving a response) inside this function set the model

model.attachRequestCompleted({function(){
          sap.ui.getCore().setModel(model,"model1");
}});

API: JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.model.odata.ODataModel

After when you do all the above, check in debugger, were you able to get the data in model like this:

var oModel = sap.ui.getCore().getModel("model1").getData();
console.log(JSON.stringify(oModel));

Regards,

Sai Vellanki.

[former_member185414]

Hello Monika,

If the data volume is huge then you should always use Odata Model for binding because it is server side model which brings only limited records(conceptually called as lazy loading) and does not cause much load on the network. 

In your case you can pass filters to the OData call as below -

oFilterProcessType = new sap.ui.model.Filter("<FILTER_FIELD_NAME>",sap.ui.model.FilterOperator.EQ,"<FILTER_FIELD_VALUE>");

              aSorters.push(new sap.ui.model.Sorter("<SORT_FIELD_NAME>", true));

              oModel.read("/<NAME_OF_COLLECTION>",{filters: [oFilterProcessType],

                     sorters: aSorters, success: function (OData,oResponse){

                           if (OData.results.length > 0)

                           {

// OData call was successful and data was also returned

                           }

                           else

                           {

// OData call was successful but no data was returned.

                           }

                     },

                     error : function(){

                           alert("Read failed");}

BR.

[saivellanki]

Hi Monika,

In your search event, instead of oEvt.getSource().getValue(); try like this -

var sQuery = oEvt.getParameter("query");

And also have a break point in your search event and check in console the value of oEvt. See if you have something in that event.

Regards,

Sai Vellanki.

[Former Member]

Hii Sai,

Thanks for your reply I used var sQuery = oEvt.getParameter("query") ; in my code

search: function(oEvt) {

  console.log("oEvt"+oEvt);

        var aFilters = [];

        var sQuery = oEvt.getParameter("query"); 

        if (sQuery && sQuery.length > 0) {

        var filter = new sap.ui.model.Filter("CompanyCode", sap.ui.model.FilterOperator.Contains, sQuery);

        aFilters.push(filter);

        }

        var oColModel = new sap.ui.model.json.JSONModel();

        oColModel.setData({

        cols: [

              {label: "Company Code", template: "CompanyCode"},

           {label: "CompanyCodeName", template: "CompanyCodeName"}

              ]

        });

        oValueHelpDialog.getTable().setModel(oColModel, "columns");

        oValueHelpDialog.getTable().setModel(sap.ui.getCore().getModel("oDataModel1"));

        oValueHelpDialog.getTable().bindRows("/CompanyCodeValuehelp");

        oValueHelpDialog.getTable().filter(aFilters,"Application");

                    }

In console i am getting   oEvt[object Object]

Regards,

Monika

[saivellanki]

Monika,

So, are you getting the value / not?

Check these also -

console.log(oEvt.getParameters());
console.log(oEvt.getParameter("query"));

Regards,

Sai Vellanki

[Former Member]

Sai,

I am getting this in console after putting

1. console.log(oEvt.getParameters()); 
2. console.log(oEvt.getParameter("query")); 

Object {selectionSet: Array[2], id: "__bar2"}

id: "__bar2"

selectionSet: Array[2]

__proto__: Object

undefined

I am getting data in table but table is not getting updated when i am filtering data through serach field .

See screen shot of output .

Regards,

Monika

[Former Member]

Hi Sai,

Can you please tell me

In this code what is  "query "  that you passed in getParameter() ??

var sQuery = oEvt.getParameter("query"); 

[saivellanki]

Hi Monika,

Are you sure that your using search event of sap.m.SearchField (or) you're using liveChange event?

query will hold the value that you enter in search field, check API: JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.SearchField

oControlEvent.getParameters.query is similar as oControlEvent.getParameter("query");

Regards,

Sai Vellanki.

[Former Member]

Hi Sai,

As you can see the output screen in that i want when i entered any company code in search field and press go button .Table should be updated according to the user input in search field .

As I am writing that functionality in search function it will trigger when i press go button.I had not written anything in sap.m.SearchField.

Controller

  onValueHelpRequest: function() {

  var that= this;

  var oValueHelpDialog = new sap.ui.comp.valuehelpdialog.ValueHelpDialog({

  basicSearchText: this.theTokenInput.getValue(),

  title: "Company",

  supportMultiselect: true,

  supportRangesOnly: false,

  key: this.aKeys[0],

  descriptionKey: this.aKeys[1],

  ok: function(oControlEvent) {

  that.aTokens = oControlEvent.getParameter("tokens");

  that.theTokenInput.setTokens(that.aTokens);

  oValueHelpDialog.close();

  },

  cancel: function() {

  sap.m.MessageToast.show("Cancel pressed!");

  oValueHelpDialog.close();

  },

  afterClose: function() {

  oValueHelpDialog.destroy();

  }

  });

  var oColModel = new sap.ui.model.json.JSONModel();

  oColModel.setData({

  cols: [

        {label: "Company Code", template: "CompanyCode"},

        {label: "CompanyCodeName", template: "CompanyCodeName"}

        ]

  });

  oValueHelpDialog.getTable().setModel(oColModel, "columns");

  oValueHelpDialog.getTable().bindRows("/CompanyCodeValuehelp");

  oValueHelpDialog.getTable().setModel(sap.ui.getCore().getModel("oDataModel1"));

  oValueHelpDialog.setRangeKeyFields([{label: "CompanyCode", key: "CompanyCode"}, {label : "CompanyCodeName", key:"CompanyCodeName"}]);

  oValueHelpDialog.setTokens(this.aTokens);

  var oFilterBar = new sap.ui.comp.filterbar.FilterBar({

  advancedMode:  true,

  filterBarExpanded: true,

  searchEnabled:true,

  filterGroupItems: [new sap.ui.comp.filterbar.FilterGroupItem({ groupTitle: "foo", groupName: "gn1", name: "n1", label: "Company Code", control: new sap.m.Input()}),

                    new sap.ui.comp.filterbar.FilterGroupItem({ groupTitle: "foo", groupName: "gn1", name: "n2", label: "CompanyCodeName", control: new sap.m.Input()})],

search: function(oEvt) {

        var aFilters = [];

        var sQuery = oEvt.getParameter("query");

        console.log(oEvt.getParameters());

                    console.log(oEvt.getParameter("query"));

        if (sQuery && sQuery.length > 0) {

        var filter = new sap.ui.model.Filter("CompanyCode", sap.ui.model.FilterOperator.Contains, sQuery);

        aFilters.push(filter);

        }

        var oColModel = new sap.ui.model.json.JSONModel();

        oColModel.setData({

        cols: [

              {label: "Company Code", template: "CompanyCode"},

           {label: "CompanyCodeName", template: "CompanyCodeName"}

              ]

        });

        oValueHelpDialog.getTable().setModel(oColModel, "columns");

        oValueHelpDialog.getTable().bindRows("/CompanyCodeValuehelp").filter([aFilters]);;

        oValueHelpDialog.getTable().setModel(sap.ui.getCore().getModel("oDataModel1"));

                    }

  });

  if (oFilterBar.setBasicSearch) {

oFilterBar.setBasicSearch(new sap.m.SearchField({showSearchButton:true, placeholder:"Search"

  }));

  }

  oValueHelpDialog.setFilterBar(oFilterBar);

  if (this.theTokenInput.$().closest(".sapUiSizeCompact").length > 0) { // check if the Token field runs in Compact mode

  oValueHelpDialog.addStyleClass("sapUiSizeCompact");

  } else {

  oValueHelpDialog.addStyleClass("sapUiSizeCozy");

  }

  oValueHelpDialog.open();

  oValueHelpDialog.update();

  }

});

Regards,

Monika

[saivellanki]

Hi Monika,

If everything is fine, this statement should work oEvt.getParameter("query"). Check a sample here: JS Bin - Collaborative JavaScript Debugging

You can use search box for searching weight.

If possible, can you post your view code and model response.

Regards,

Sai Vellanki.

[Former Member]

Hi Sai ,

I am doing this filtering in table in value help control.

View

<HBox>

  <VBox>

  <Label text="WBS Element"/>

  <MultiInput id="multiInput1"    valueHelpRequest="onValueHelpRequest"/>

  </VBox>

Controller

sap.ui.controller("assetpro.Trial", {

  onInit: function() {

  var oDataModel = new sap.ui.model.odata.ODataModel("service url",

  true,

  "username",

  "password");

       sap.ui.getCore().setModel(oDataModel,"oDataModel1");

  this.theTokenInput= this.getView().byId("multiInput1");

  this.aKeys= ["CompanyCode","CompanyCodeName"];

  var token1= new sap.m.Token({key: "001", text: "Construction"});

  this.aTokens= [token1];

  this.theTokenInput.setTokens(this.aTokens);

  },

  onValueHelpRequest: function() {

  var that= this;

  var oValueHelpDialog = new sap.ui.comp.valuehelpdialog.ValueHelpDialog({

  basicSearchText: this.theTokenInput.getValue(),

  title: "Company",

  supportMultiselect: true,

  supportRangesOnly: false,

  key: this.aKeys[0],

  descriptionKey: this.aKeys[1],

  ok: function(oControlEvent) {

  that.aTokens = oControlEvent.getParameter("tokens");

  that.theTokenInput.setTokens(that.aTokens);

  oValueHelpDialog.close();

  },

  cancel: function() {

  sap.m.MessageToast.show("Cancel pressed!");

  oValueHelpDialog.close();

  },

  afterClose: function() {

  oValueHelpDialog.destroy();

  }

  });

  var oColModel = new sap.ui.model.json.JSONModel();

  oColModel.setData({

  cols: [

        {label: "Company Code", template: "CompanyCode"},

        {label: "CompanyCodeName", template: "CompanyCodeName"}

        ]

  });

  oValueHelpDialog.getTable().setModel(oColModel, "columns");

  oValueHelpDialog.getTable().bindRows("/CompanyCodeValuehelp");

  oValueHelpDialog.getTable().setModel(sap.ui.getCore().getModel("oDataModel1"));

  oValueHelpDialog.setRangeKeyFields([{label: "CompanyCode", key: "CompanyCode"}, {label : "CompanyCodeName", key:"CompanyCodeName"}]);

  oValueHelpDialog.setTokens(this.aTokens);

  var oFilterBar = new sap.ui.comp.filterbar.FilterBar({

  advancedMode:  true,

  filterBarExpanded: true,

  searchEnabled:true,

  filterGroupItems: [new sap.ui.comp.filterbar.FilterGroupItem({ groupTitle: "foo", groupName: "gn1", name: "n1", label: "Company Code", control: new sap.m.Input()}),

                    new sap.ui.comp.filterbar.FilterGroupItem({ groupTitle: "foo", groupName: "gn1", name: "n2", label: "CompanyCodeName", control: new sap.m.Input()})],

                    search: function(oEvt) {

        var aFilters = [];

        var sQuery = oEvt.getParameter("query");

        console.log(oEvt.getParameters());

                    console.log(oEvt.getParameter("query"));

        if (sQuery && sQuery.length > 0) {

        var filter = new sap.ui.model.Filter("CompanyCode", sap.ui.model.FilterOperator.Contains, sQuery);

        aFilters.push(filter);

        }

        var oColModel = new sap.ui.model.json.JSONModel();

        oColModel.setData({

        cols: [

              {label: "Company Code", template: "CompanyCode"},

           {label: "CompanyCodeName", template: "CompanyCodeName"}

              ]

        });

        oValueHelpDialog.getTable().setModel(oColModel, "columns");

            oValueHelpDialog.getTable().setModel(sap.ui.getCore().getModel("oDataModel1"));

        oValueHelpDialog.getTable().bindRows("/CompanyCodeValuehelp").filter([aFilters]);;

                    }

  });

  if (oFilterBar.setBasicSearch) {

  oFilterBar.setBasicSearch(new sap.m.SearchField({showSearchButton:true, placeholder:"Search"

}));

  }

  oValueHelpDialog.setFilterBar(oFilterBar);

  if (this.theTokenInput.$().closest(".sapUiSizeCompact").length > 0) { // check if the Token field runs in Compact mode

  oValueHelpDialog.addStyleClass("sapUiSizeCompact");

  } else {

  oValueHelpDialog.addStyleClass("sapUiSizeCozy");

  }

  oValueHelpDialog.open();

  oValueHelpDialog.update();

  }

});

Regards,

Monika

[Former Member]

In multiinput i used valueHelpRequest and Value help view is in controller itsellf .I already posted  controller part .check my above post  

Regards,

Monika