Filtering in Chart Container using FacetFilters in SAPUI5

Question

I am using SAPUI5 libraries and I wanna use FacetFilter with ChartContainer element. When I click the checkboxes in FacerFilter I want some charts will be affected in chart Container. Chart Container can be found at below link: https://sapui5.hana.ondemand.com/sdk/explored.html#/entity/sap.suite.ui.commons.ChartContainer/samples So my question is how can I bind my facetfilters items with container charts. my test.view.xml;

Edit1: I put the FacetFilters in dimensionselector.

 <ChartContainer
    id="idChartContainer"
    showFullScreen="true"
    showPersonalization="true"
    autoAdjustHeight="true"
    showLegend="true"
    personalizationPress="attachPersonalizationPress"
    contentChange="attachContentChange">

    <dimensionSelectors>
        <m:FacetFilter
            id="facetFilterChart2"
            type="Simple"
            showPersonalization="false"
            showReset="true"
            reset="onFacetFilterReset" showPopoverOKButton="true">

            <m:lists>

                <m:FacetFilterList 
                    title="{oModel>/Facet01/Title}"
                    key="{oModel>/Facet01/Key}"
                    multiselect="true"
                    listClose="onFacetClosed"
                    items="{oModel>/Facet01/Items}" >

                    <m:items>
                        <m:FacetFilterItem
                             key="{oModel>Key}"
                             text="{oModel>Text}" />
                    </m:items>
                </m:FacetFilterList>

            </m:lists>
        </m:FacetFilter>
    </dimensionSelectors>

    <content>
        <ChartContainerContent
            icon = "sap-icon://horizontal-bar-chart" 
            title = "vizFrame Bar Chart Sample"> 
            <content>
                <viz:VizFrame id="idoVizFrame"> </viz:VizFrame>
            </content>
        </ChartContainerContent>
                    ...

I want to use these facetfilters in my viz frame and filtering my data using facet filters checkboxes. And my test.controller.js;

oModel : {

      Toolbar : {

        Design : "Solid"
      },

      Facet01 : {
        Key : "Facet01",
        Title : "Departmanlar",
        Items : [
          { Key : "k1", Text : "İnsan Kaynakları" },
          { Key : "k2", Text : "Satış & Pazarlama" },
          { Key : "k3", Text : "Satınalma" },
          { Key : "k4", Text : "Finans" },
          { Key : "k5", Text : "SSH" }
        ]

      }
},

onInit : function(oEvent) {
      var oVizFrame = this.getView().byId("idoVizFrame");
      oVizFrame.setDataset(oDataset2);
      oVizFrame.setModel(amModel2);
      oVizFrame.addFeed(feedPrimaryValues2);
      oVizFrame.addFeed(feedAxisLabels2);
      oVizFrame.setVizType('bar');
      var oSelect1 = this.getView().byId("idoSelect1");

Sunil B N Sunil B N · Accepted Answer · 2015-05-07T06:31:32

your XML binding doesn't look correct. Correct way is:

<m:FacetFilter
            id="facetFilterChart2"
            type="Simple"
            showPersonalization="false"
            showReset="true"
            reset="onFacetFilterReset" 
            showPopoverOKButton="true"
            lists="{model>/Facet01}">
            <m:lists>
                <m:FacetFilterList 
                    title="{oModel>Title}"
                    key="{oModel>Key}"
                    multiselect="true"
                    listClose="onFacetClosed"
                    items="{oModel>/Items}" >
                    <m:items>
                        <m:FacetFilterItem
                             key="{oModel>Key}"
                             text="{oModel>Text}" />
                    </m:items>
                </m:FacetFilterList>
            </m:lists>
</m:FacetFilter>

In controller set the model

var oFacetFilterModel = new sap.ui.model.json.JSONModel(this.oModel);
this.getView().byId("facetFilterChart2").setModel(oFacetFilterModel,"oModel");

Filtering in Chart Container using FacetFilters in SAPUI5

1 Answers