Filter Bar aggregation binding not working

[Former Member]

Hi,

I am using sap.ui.comp.filterbar.FilterBar control . I am trying bind aggragtions "filterItems" as below.

<fb:FilterBar reset="onReset" search="onSearch" showRestoreButton="true" showClearButton="true" filterBarExpanded="false"

  filterItems="{/Filters}">

     <fb:filterItems>

            <fb:FilterItem name="{Name}" label="{Label}">

                 <fb:control>

                      <Input valueHelpRequest="handleValueHelp" showValueHelp="true" valueHelpOnly="true"/>

                 </fb:control>

            </fb:FilterItem>

     </fb:filterItems>

</fb:FilterBar>

and my data looks like:

{

"Filters":[

        {"Name":"A", "Label":"LabelA"},

        {"Name":"B", "Label":"LabelA"},

        {"Name":"C", "Label":"LabelA"},

        {"Name":"D", "Label":"LabelA"}

       ]

   }

It throws an error in library "filterBar.js",

FilterBar.js:6 Uncaught (in promise) Error: sap.ui.comp.filterbar.FilterBar.prototype.addFilterItem() Expected argument 'oFilterItem.name' may not be null nor empty(…)

I have checked the binding context of filter item in addFilterItem method in filterBar.js, I can see teh proper binding context there.

I tried to bind in script, but no luck.

Is there an issue with aggregation binding of Filter Bar?

Thanks in advance.

[LeonardoGomez · Accepted solution]

Hello Anjani,

What are you trying to accomplish? I guess you want to define your filters dynamically. I'd advice you to try to define them statically, if it works then you can always enhance it at runtime with code.

What I'm saying is, remove the filterItems attribute from your FilterBar tag. Inside the filterItems aggregation define as many filterItems as you want, with a fixed name and a fixed label.

<fb:FilterBar reset="onReset" search="onSearch" showRestoreButton="true" showClearButton="true" filterBarExpanded="false"

name="MyFilter">

     <fb:filterItems>

            <fb:FilterItem name="Filter1" label="Label 1">

                 <fb:control>

                      <Input valueHelpRequest="handleValueHelp" showValueHelp="true" valueHelpOnly="true"/>

                 </fb:control>

            </fb:FilterItem>

     </fb:filterItems>

</fb:FilterBar>

In your controller you can alter your controls with something like this:

var oFilterBar = this.byId("MyFilter").

for ( var i = 0; i < Filters; i++ ) {

     oFilterBar.addFilterItem(

          new sap.ui.comp.FilterItem({

               name: Filters[i].Name,

               label: Filters[i].Label

          });

     )

}

Regards,

Leonardo.

[Former Member · Accepted solution]

Hi Leonardo,

Thanks for your reply.

This is how I achieved my requirement by adding filter items in script dynamically..But was curious to know why is it not working by direct aggregation binding in view..

Regards

Anjani Parameswari