topic Re: How can I customize the filter widget? in Web AppBuilder Custom Widgets Questions

How can I customize the filter widget?

MelissaTraverso — Mon, 11 Sep 2017 16:44:03 GMT

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!

Re: How can I customize the filter widget?

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:27:38 GMT

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"
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How can I customize the filter widget?

MelissaTraverso — Mon, 11 Sep 2017 18:23:36 GMT

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

Re: How can I customize the filter widget?

MelissaTraverso — Mon, 11 Sep 2017 19:26:50 GMT

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!

Re: How can I customize the filter widget?

RobertScheitlin__GISP — Mon, 11 Sep 2017 19:35:46 GMT

Are there any errors in your browsers web console?

Re: How can I customize the filter widget?

MelissaTraverso — Tue, 12 Sep 2017 04:41:39 GMT

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

Re: How can I customize the filter widget?

RobertScheitlin__GISP — Tue, 12 Sep 2017 11:37:01 GMT

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.

Re: How can I customize the filter widget?

TomasL44 — Tue, 12 Sep 2017 22:54:39 GMT

Hello Robert,

I have a follow up question to this reply. We are trying to customize the Filter Widget so that the user can only select one filter scenario at a time. For example, if you have three expressions and select one, the other two scenarios will automatically deselect. We are trying to implement a poor-persons "floor switcher." We have a building with three floors and have an expression setup for each one (floor=1, floor=2, floor=3 respectively). When a user selects floor one and then wants to see floor two, when the floor two filter is selected we want the floor one filter to automatically turn off. Is this similar to what's being asked above by Mellisa?

Thank you in advance.

Tom

Re: How can I customize the filter widget?

MelissaTraverso — Tue, 12 Sep 2017 23:15:44 GMT

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

Re: How can I customize the filter widget?

RobertScheitlin__GISP — Tue, 12 Sep 2017 23:48:38 GMT

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.

Re: How can I customize the filter widget?

MelissaTraverso — Wed, 13 Sep 2017 21:48:40 GMT

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

Re: How can I customize the filter widget?

RobertScheitlin__GISP — Wed, 13 Sep 2017 22:14:41 GMT

Melissa, after making the changes to the widget for that app and in-checking the filter what does your browsers web console say the error is?

Re: How can I customize the filter widget?

MelissaTraverso — Wed, 13 Sep 2017 22:24:04 GMT

it read "sp.valueProvider._dijit" is undefined

Re: How can I customize the filter widget?

RobertScheitlin__GISP — Wed, 13 Sep 2017 22:26:28 GMT

What are your filter inputs? I tested a strings input.

Re: How can I customize the filter widget?

MelissaTraverso — Wed, 13 Sep 2017 22:32:29 GMT

Some of my filter inputs are congressional district numbers and some of them are strings (city, county, facility names)

Re: How can I customize the filter widget?

RobertScheitlin__GISP — Fri, 15 Sep 2017 20:50:05 GMT

Tomas,

No her question was about clearing the user input when the filter is cleared.

Re: How can I customize the filter widget?

MelissaTraverso — Fri, 15 Sep 2017 21:38:20 GMT

Hi Robert,

Can I implement these same changes to the query widget.js except anywhere the word "filter" appears in your customized code just change it to "query"?

Thanks,

Melissa

Re: How can I customize the filter widget?

RobertScheitlin__GISP — Fri, 15 Sep 2017 22:20:20 GMT

Nope that is a whole other animal.

Re: How can I customize the filter widget?

MatthewHamilton-Smith — Wed, 16 Oct 2019 14:54:51 GMT

Did you ever resolve this issue? I am encountering the same error.