Add filtering to template picker

[Haider_Ali]

I want to add search box that  will filter template picker on basis of its label, i have looked into  templatePicker.grid.store._arrayOfAllItems  it contains the items displayed in template picker with some extra items (extra items appears after every 3 item i think its because i have configured 3 columns in template picker settings )

my question is how can i filter this using it?

[Haider_Ali]

editor has a method filter tempEditor.templatePicker.grid.filter({label:"A*"}) but i cant figure out how to use it?

[KellyHutchins · Accepted solution]

Take a look at the FilterEditor.js file in this github repo. This is part of a Web App Builder widget but you could use the same logic in a custom app:

https://github.com/Esri/solutions-webappbuilder-widgets/blob/master/FilterEditor/FilterEditor.js​

Here's a jsbin showing this in a test app:

JS Bin - Collaborative JavaScript Debugging

[Haider_Ali]

Thanks to Kelly's Answer i also added  a  Layer select control ,below is the code (see the Kelly's Answer for more detail)

function _createTemplateFilter()
{
          widget._origGetItemsFromLayerFunc = widget._getItemsFromLayer;
          widget._getItemsFromLayer = lang.hitch(this, function () {
            var items;
            items = widget._origGetItemsFromLayerFunc.apply(templatePicker, arguments);
       
            items = arrayUtils.filter(items,(item) =>  (item.layer.layerId == select.value));
         
            return items;
          });
  }