CODEWITHSUNDEEP
data-bindingsapui5
cookiedealer
cookiedealer

Reputation: 381

SAPUI5 binding filter in XML view

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!

Upvotes: 0

Views: 9041

Answers (1)

Rafael L&#243;pez Mart&#237;nez
Rafael L&#243;pez Mart&#237;nez

Reputation: 2265

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>

:

Upvotes: 1

Related Questions