How can I customize the filter widget?

5242
18
Jump to solution
09-11-2017 09:44 AM
MelissaTraverso
New Contributor III

I am using the filter widget in my web map but there are a few tweaks I would like to make.

One thing I noticed while using the filter widget is, if you uncheck the check mark in the top right corner of the widget after you filter, your map features that you filtered will go away but your inputs in the widget itself do not clear. This will potentially cause confusion with the end users because they will have to go and delete each input if they're interested in doing another filter search. Is there a way I can customize the filter widget so that when the check mark is unchecked it will not only clear the filtered map features but it will also clear the inputs?

Second, is there a way to customize the filter widget window to make it smaller? On a standard size desktop screen the widget covers a large portion of the map view and I would like it to be smaller to create more space to view the map itself. I know this can be done in dashboard theme but I am currently using foldable theme.  Can I customize the filter widget itself or do I have to use another theme?

Third, how can I add the same zoom feature that query widget has to the filter widget? I would like the map to zoom to the filtered features of the map layer.

Lastly, depending on how complicated, I would like it to automatically go to the map's initial extent  once the filtered features are cleared/unchecked.

Thanks!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Melissa,

   In the Filter Widget.js file make these changes to clear the inputs (add the require for registry line 17 and 23 bellow):

.....
define([
    'dojo/_base/declare',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/_base/lang',
    'dojo/query',
    'dojo/on',
    'dijit/_WidgetsInTemplateMixin',
    'jimu/utils',
    'jimu/BaseWidget',
    'jimu/filterUtils',
    'jimu/dijit/FilterParameters',
    'jimu/LayerInfos/LayerInfos',
    'jimu/FilterManager',
    'esri/request',
    'dijit/registry',
    'dojo/NodeList',
    'dojo/NodeList-dom'
  ],
  function(declare, array, html, lang, query, on, _WidgetsInTemplateMixin,
    jimuUtils, BaseWidget, FilterUtils, FilterParameters, LayerInfos, FilterManager,
    esriRequest, registry) {
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

(add lines 2 - 7 below to the _removeItemFilter function in the Widget.js)

      _removeItemFilter: function(layerId, idx) {
        //todo clear inputs
        var spDoms = query('.jimu-single-filter-parameter', this.tbody);
        array.forEach(spDoms, lang.hitch(this, function(spDom){
          var sp = registry.byNode(spDom);
          sp.valueProvider._dijit.set("value", null);
        }));
        delete this._store[layerId]['filter_item_' + idx];
        delete this._store[layerId].mapFilterControls['filter_item_' + idx];
      },‍‍‍‍‍‍‍‍‍‍

For the widgets size you need to edit the apps main config ( I added the property height below):

      {
        "position": {
          "left": 105,
          "top": 45,
          "height": 230,
          "relativeTo": "map"
        },
        "placeholderIndex": 1,
        "id": "_25",
        "name": "Filter",
        "version": "2.5",
        "closeable": true,
        "uri": "widgets/Filter/Widget",
        "config": "configs/Filter/config_Filter.json"
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

18 Replies
RobertScheitlin__GISP
MVP Emeritus

Melissa,

   In the Filter Widget.js file make these changes to clear the inputs (add the require for registry line 17 and 23 bellow):

.....
define([
    'dojo/_base/declare',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/_base/lang',
    'dojo/query',
    'dojo/on',
    'dijit/_WidgetsInTemplateMixin',
    'jimu/utils',
    'jimu/BaseWidget',
    'jimu/filterUtils',
    'jimu/dijit/FilterParameters',
    'jimu/LayerInfos/LayerInfos',
    'jimu/FilterManager',
    'esri/request',
    'dijit/registry',
    'dojo/NodeList',
    'dojo/NodeList-dom'
  ],
  function(declare, array, html, lang, query, on, _WidgetsInTemplateMixin,
    jimuUtils, BaseWidget, FilterUtils, FilterParameters, LayerInfos, FilterManager,
    esriRequest, registry) {
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

(add lines 2 - 7 below to the _removeItemFilter function in the Widget.js)

      _removeItemFilter: function(layerId, idx) {
        //todo clear inputs
        var spDoms = query('.jimu-single-filter-parameter', this.tbody);
        array.forEach(spDoms, lang.hitch(this, function(spDom){
          var sp = registry.byNode(spDom);
          sp.valueProvider._dijit.set("value", null);
        }));
        delete this._store[layerId]['filter_item_' + idx];
        delete this._store[layerId].mapFilterControls['filter_item_' + idx];
      },‍‍‍‍‍‍‍‍‍‍

For the widgets size you need to edit the apps main config ( I added the property height below):

      {
        "position": {
          "left": 105,
          "top": 45,
          "height": 230,
          "relativeTo": "map"
        },
        "placeholderIndex": 1,
        "id": "_25",
        "name": "Filter",
        "version": "2.5",
        "closeable": true,
        "uri": "widgets/Filter/Widget",
        "config": "configs/Filter/config_Filter.json"
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
MelissaTraverso
New Contributor III

Hi Robert,

Thanks!!! I will go ahead and try this. I recently edited my original post and added a few more features I am interested in adding to the filter widget.  Perhaps you may be able to assist! Thanks!

-How can I add the same zoom feature that query widget has to the filter widget? I would like the map to zoom to the filtered features of the map layer.

 

-Depending on how complicated, how can I get the web map to automatically go to the map's initial extent once the filtered features are cleared/unchecked.

Thanks,

Melissa

0 Kudos
MelissaTraverso
New Contributor III

Hi Robert,

I made the changes to Filter widget.js in your post above in order to clear the inputs. It doesn't appear to be working for me but I am wondering if I am doing something wrong on my end.

I cleared cookies in my web browser, logged out and back in to WAB developer ed  and added the filter widget to test it out. My inputs don't seem to be clearing either by unchecking the box in the top right or by closing out of the filter widget and opening it back up.

Any ideas on what could be going wrong?

Thanks!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Are there any errors in your browsers web console?

0 Kudos
MelissaTraverso
New Contributor III

Hi Robert,

There are not any errors in my browsers web console that I am aware of. I tried to run a test and create a new web app to test the updated filter widget. The only thing that changed was that I could no longer uncheck the check mark to clear the filtered features on the map and I still couldn't get my inputs cleared. 

Do you have any other suggestions once the javascript changes are made to get WAB to recognize the updates?

Thanks,

Melissa  

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Melissa,

   So that tells me that you made the changes in the stemApp widget folder and not your apps widgets folder and that the changes you made are causing an error in your new app. That is why you can not uncheck to clear the filter from the map any more. If you open your browsers developer tools and check your console. you will see that you have errors in your new app when you attempt to clear the filter by unchecking. After reading my instructions I see I assuming a certain level of JS programming knowledge. I will edit my instructions to make them more novice friendly.

MelissaTraverso
New Contributor III

Hi Robert, 

Thanks for the reply, I am new to javascript. I read through your updated instructions. It seems like I picked up on the changes I needed to make in "Widget.js" but it looks like my error is where I made these changes. I made the changes in my stemApp widget folder and not my apps widget folder. It sounds like I only want to make the changes in:

C:\arcgis_web_appbuilder_2.5\WebAppBuilderForArcGIS\server\apps

Any chance you could briefly explain why? 

Thanks,

Melissa 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

When you create a new app the builder copies the stemApp and selected widgets the stemApp folder into the new apps widgets folder. The app is a clone of the stemApp. And all customization now needs to be done in the app folder.

MelissaTraverso
New Contributor III

Hi Robert,

I have updated my stemapp filter widget to its original settings and have only made changes to the "widget.js" under

C:\arcgis_web_appbuilder_2.5\WebAppBuilderForArcGIS\server\apps\3\widgets\Filter

When I go into my map and add the filter widget to test, the same thing as before happens. My inputs don't clear and the only thing that changes is that I can no longer uncheck and clear the filtered data on the map.

Based on what we've discussed, I am having a hard time finding where I am going wrong to get this to work properly. It appears that there must be something wrong in addition to where the changes were made. Do you have any ideas as to where I could be going wrong?

Thanks,

Melissa

0 Kudos