SAPUI5 binding filter in XML view

Question

I would like to filter the entries of a sap.m.Table by using a filter in the XML view binding as follows:

<Table id="__tableDetails" headerText="" mode="None" class="sapUiMediumMarginBottom" 
items="{ path: 'mymodel>/data', filters : [{ path : 'status', operator : 'EQ', value1 : 'ACTIVE' }]}">
<columns>
    <Column>
        <Label text="ID"/>
    </Column>
    <Column>
        <Label text="Description"/>
    </Column>
    <Column>
        <Label text="Language"/>
    </Column>
</columns>
<items>
    <ColumnListItem vAlign="Middle">
        <cells>
            <Text text="{mymodel>id}" wrapping="true"/>
            <Text text="{mymodel>desc}" wrapping="true"/>
            <Text text="{mymodel>lang}" wrapping="true"/>
        </cells>
    </ColumnListItem>
</items>
</Table>

When I remove the filter the binding works, but with the filter no data is displayed in the table although the model does contain entries which have the value "ACTIVE" for the property "status". Changing the operator to 'Contains' instead of 'EQ' did not solve the problem.

Can someone spot a mistake here? Thanks a lot for any suggestions!

Thanks for the suggestion! It still does not work unfortunately (with 'Contains' or 'EQ' as operator). Without the filter it shows all entries. — cookiedealer

Rafael López Martínez Rafael López Martínez · Accepted Answer · 2018-01-17T10:55:56

Check your model properties, because your code is good.

here the example running good

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta charset="utf-8">

		<title>MVC with XmlView</title>

		<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
		<script id='sap-ui-bootstrap'
			src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
			data-sap-ui-theme='sap_belize_plus'
			data-sap-ui-libs='sap.m'
			data-sap-ui-xx-bindingSyntax='complex'></script>


		<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->

		<!-- define a new (simple) View type as an XmlView
		 - using data binding for the Button text
		 - binding a controller method to the Button's "press" event
		 - also mixing in some plain HTML
		 note: typically this would be a standalone file -->

		<script id="view1" type="sapui5/xmlview">
  		<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
          <Table id="__tableDetails" headerText="Filtered" mode="None" class="sapUiMediumMarginBottom" 
          items="{ path: 'mymodel>/data', filters : [{ path : 'status', operator : 'EQ', value1 : 'ACTIVE' }]}">
          <columns>
              <Column>
                  <Label text="ID"/>
              </Column>
              <Column>
                  <Label text="Description"/>
              </Column>
              <Column>
                  <Label text="Language"/>
              </Column>
          </columns>
          <items>
              <ColumnListItem vAlign="Middle">
                  <cells>
                      <Text text="{mymodel>id}" wrapping="true"/>
                      <Text text="{mymodel>desc}" wrapping="true"/>
                      <Text text="{mymodel>lang}" wrapping="true"/>
                  </cells>
              </ColumnListItem>
          </items>
          </Table>
          <Table id="__tableDetailsWithoutFilter" headerText="Without Filter" mode="None" class="sapUiMediumMarginBottom" 
          items="{ path: 'mymodel>/data' }">
          <columns>
              <Column>
                  <Label text="ID"/>
              </Column>
              <Column>
                  <Label text="Description"/>
              </Column>
              <Column>
                  <Label text="Language"/>
              </Column>
          </columns>
          <items>
              <ColumnListItem vAlign="Middle">
                  <cells>
                      <Text text="{mymodel>id}" wrapping="true"/>
                      <Text text="{mymodel>desc}" wrapping="true"/>
                      <Text text="{mymodel>lang}" wrapping="true"/>
                  </cells>
              </ColumnListItem>
          </items>
          </Table>
  		</mvc:View> 
    </script>


    <script>
      // define a new (simple) Controller type
      sap.ui.controller("my.own.controller", {
        onInit: function(){
          var oModelData = {
            data: [
              {id: 001, desc: "Active obj 1", lang: "en", status: "ACTIVE"},
              {id: 002, desc: "This is inactive", lang: "en", status: "INACTIVE"},
              {id: 003, desc: "Active obj 2", lang: "en", status: "ACTIVE"}
            ]
          };
          var oModel = new sap.ui.model.json.JSONModel(oModelData)
          this.getView().setModel(oModel, "mymodel")
        },
      });

      // instantiate the View
      var myView = sap.ui.xmlview({viewContent:jQuery('#view1').html()}); // accessing the HTML inside the script tag above

      // put the View onto the screen
      myView.placeAt('content');
    </script>

  </head>
  <body id='content' class='sapUiBody'>
  </body>
</html>

:

SAPUI5 binding filter in XML view

1 Answers