nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Encontre mais publicações marcadas com

Accepted answers

khutchins

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

All comments

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;
          });
  }

khutchins

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

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

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.