sap.m.Table refresh items

[aabhas_wilmar]

Hi All,

I have created a simple app which has a view with a SearchField and Table. The search field also has liveChange feature and when the function is called, I call my query to backend system using oModel.read().

In the SearchField, the user can type either a material number or material description and as a result of liveChange, data is displayed in the table below the SearchField

When I delete the typed in text, the search results adjust accordingly, and when the searchfield is empty, no data is shown:

Problem: The problem begins when I start typing in the search field again, it appears that the table has lost its items cells structure.

The above view was created in XML.

I have created the same view in JS and it works fine.

Any suggestions? Please ask for more information and I will provide it as required.

Thanks.

[aabhas_wilmar · Accepted solution]

Resolved using the following code:

onInit: function() {
     var oTab = this.getView().byId("idTblMat");
     oTab.setModel(oJsonModelS);
     oTab.bindItems("/results", this.getView().byId("idColListItem") , null, null);
},

liveChange

onSearch : function (oControlEvent) {

     var sPlant = this.getView().byId("idSelPlant");
     var oTab = this.getView().byId("idTblMat");

     var sQuery = oControlEvent.getParameter("newValue");
     if (sQuery) {

          oModelS.read("/MaterialSet?$filter=Werks eq '"
          +sPlant.getSelectedKey()+
          "' and Maktg eq '"
          +sQuery+
          "' and Matnr eq '"
          +sQuery+
          "' ",
          null,null,false,function(oData,repsonse){
          oJsonModelS.setData(oData);
          oTab.bindItems("/results", sap.ui.getCore().byId("idColListItem") , null, null);
     });

     } else {
          oJsonModelS.setData();
     }
},

[saivellanki]

Hi Aabhas,

If possible, can you share the code for table filter?

Regards,

Sai Vellanki.

[aabhas_wilmar]

Sure.

onSearch function which is called when liveChange is triggered:

var sQuery = sap.ui.getCore().byId("idSearchPage--idSearchMat");

if (sQuery.getValue()) {

  oModelS.read("/MaterialSet?$filter=Werks eq '"

  +sPlant.getSelectedKey()+

  "' and Maktg eq '"

  +sQuery.getValue()+

  "' and Matnr eq '"

  +sQuery.getValue()+

  "' ",

  null,null,false,function(oData,repsonse){

  oJsonModelS.setData(oData);

  sap.ui.getCore().setModel(oJsonModelS);

  });

} else {

  oJsonModelS.setData();

  sap.ui.getCore().setModel(oJsonModelS);

}

Basically, when the search query is blank, I want to set the data to initial state.... And, when the search is triggered again, the table should show the data as it did before data was reset in the else statement above.

[saivellanki]

Are you using a JSON Model for your table?

Then, no need of sending back-end request. Since, JSON model is a client-side model, you can filter it on the model itself.

For more info, check this sample: OpenUI5 Explored

Please confirm, if above is not the case?

Regards,

Sai Vellanki.

[aabhas_wilmar]

HI Sai,

I am using oData model to query the backend system and using the response to populate the JSONmodel which is displayed in the table. This might not be the best way to do it but the same functionality works very well when the view is JS based.

Thanks,

Aabhas

[saivellanki]

If you're using a JSON model to your table, then you can do client-side filtering. Will this sample help? Plunker

Regards,

Sai Vellanki.

[aabhas_wilmar]

Hi Sai,

I guess I would have preferred client side filtering if the dataset was small. Here I have more than 80,000 materials and it will be just too heavy to bring all of them to the clientside. My query returns top 200 matching items and as the query gets more precise the top 200 change.

Moreover, the issue is not the retrieval of data. I have checked the data is available every time the query matches the materials in the database.

The problem is when the query returns 0 items, I want to display "No data". I am doing this by setting t empty dataset returned by the query. It is at this point the table loses its structure (items/cells). On searching again, the data is available again and is listed in the result as blank rows, which I suspect is because the table is not able to bind cells.

[saivellanki]

Plunk edited: Plunker

Used OData model, which does server-side filtering.

Regards,

Sai Vellanki.

[aabhas_wilmar]

Hi Sai,

I guess you are doing it the right way and I am using a different approch.

Here's what I am doing:

Controller:

onInit: function() {
     var oTab = this.getView().byId("idTblMat");
     oTab.bindItems("/results", this.getView().byId("idColListItem") , null, null);
  },

//liveChange

onSearch : function (oControlEvent) {


  var sPlant = this.getView().byId("idSelPlant");
  var oTab = this.getView().byId("idTblMat");

  var sQuery = oControlEvent.getParameter("newValue");
  if (sQuery) {
      oModelS.read("/MaterialSet?$filter=Werks eq '"
       +sPlant.getSelectedKey()+
       "' and Maktg eq '"
       +sQuery+
       "' and Matnr eq '"
       +sQuery+
       "' ",
       null,null,false,function(oData,repsonse){
                 oJsonModelS.setData(oData);
                 sap.ui.getCore().setModel(oJsonModelS);
            });

       } else {
            oJsonModelS.setData();
       }

  },

View:

...

<SearchField id="idSearchMat" showSearchButton="false"
  emphasized="true" enableSuggestions="true"
  placeholder="Please search for a material number or material description here..."
  search="onSearch" liveChange="onChange">
</SearchField>


<Table id="idTblMat" itemPress="onItemPress">
  <columns>
       <Column width="24em">
            <Text text="Material" />
       </Column>
       <Column width="48em">
            <Text text="Description" />
       </Column>
       <Column>
            <Text text="Storage Bin" />
       </Column>
       <Column hAlign="Right">
            <Text text="Available" />
       </Column>
  </columns>
  <items path="/results">
       <ColumnListItem type="Navigation" id="idColListItem">
            <cells>
                 <Label text="{Matnr}"></Label>
                 <Label text="{Maktx}" design="Bold"></Label>
                <Label text="{Lgpbe}"></Label>
                <ObjectNumber number="{Labst}" unit="{Meins}" />
            </cells>
       </ColumnListItem>
  </items>
</Table>

...