topic Re: Filter widget: zoom to features in ArcGIS Web AppBuilder Questions

Filter widget: zoom to features

helenchu — Thu, 13 Oct 2016 15:36:57 GMT

Can I have the filter widget zoom to features ? Thanks.

Re: Filter widget: zoom to features

RobertScheitlin__GISP — Sun, 12 Dec 2021 01:21:38 GMT

Helen,

This has been MINIMALLY tested:

Widget.js

define([
    'dojo/_base/declare',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/_base/lang',
    'dojo/query',
    'dojo/on',
    'dijit/_WidgetsInTemplateMixin',
    'jimu/BaseWidget',
    'jimu/filterUtils',
    'jimu/dijit/FilterParameters',
    'jimu/LayerInfos/LayerInfos',
    'jimu/FilterManager',
    'esri/request',
//Add RJS
    'esri/tasks/QueryTask',
    'esri/tasks/query',
    'esri/graphicsUtils',
//end RJS
    'dojo/NodeList',
    'dojo/NodeList-dom'
  ],
  function(declare, array, html, lang, query, on,
    _WidgetsInTemplateMixin,
    BaseWidget, FilterUtils, FilterParameters, LayerInfos, FilterManager,
    esriRequest, QueryTask, Query, graphicsUtils) { //Added , QueryTask, Query, graphicsUtils

    return declare([BaseWidget, _WidgetsInTemplateMixin], {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

      applyFilterValues: function(node, filterObj, evt) {
        var expr = node.filterParams && (node.expr || node.filterParams.getFilterExpr());
        if (expr) {
          node.expr = expr;
          // getFilterExpr
          var layerId = filterObj.layerId;
          var idx = html.getAttr(node, 'data-index');
          var layerInfo = this.layerInfosObj.getLayerInfoById(layerId);
          if (layerInfo.isShowInMap() && layerInfo.isInScale()) {
            this._bindMapUpdateEvents(node, true);
          } else {
            html.addClass(node, 'applied');
          }
          this._setItemFilter(layerId, idx, node.expr);
          var layerFilterExpr = this._getExpr(layerId);
          this.filterManager.applyWidgetFilter(layerId, this.id, layerFilterExpr);
//Add RJS Now zoom to the results         
          var qt = QueryTask(layerInfo.getUrl());
          var q = Query();
          q.returnGeometry = true;
          q.where = layerFilterExpr;
          qt.execute(q, lang.hitch(this, function(fs){
            this.map.setExtent(graphicsUtils.graphicsExtent(fs.features), true);
          }));
//End RJS          
        }
        evt.stopPropagation();
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Filter widget: zoom to features

helenchu — Tue, 18 Oct 2016 15:41:08 GMT

It doesn't work on my end. No error, just not zoom to the desired extent. I tested on all different browsers, same results.

I debugged but I guess I don't know enough to see anything wrong with the codes. Attached is the screen shot. The number of features returned is correct. Thanks.

Re: Filter widget: zoom to features

RobertScheitlin__GISP — Tue, 18 Oct 2016 16:41:27 GMT

Helen,

I just tested the code again and it zoomed for me after the filter was applied. Maybe you should attach your filter widget with your changes for me to look at.

Re: Filter widget: zoom to features

helenchu — Tue, 18 Oct 2016 19:00:14 GMT

Strange! I created new clean app with filter widget, tested with different layers, did text compare: identical

Attached is my widget.js. Much appreciated!

Re: Filter widget: zoom to features

RobertScheitlin__GISP — Tue, 18 Oct 2016 19:55:29 GMT

Helen,

I took your code and overwrote mine with it and it worked for me using my data a filter expression. So it has to be something with your expression or data then. Can you provide your config_Filter.json file for me to look at?

Re: Filter widget: zoom to features

helenchu — Tue, 18 Oct 2016 20:31:52 GMT

Here it is. Thanks.

Re: Filter widget: zoom to features

RobertScheitlin__GISP — Wed, 19 Oct 2016 13:24:15 GMT

Helen,

What is the geometry type of this layer?

Re: Filter widget: zoom to features

helenchu — Wed, 19 Oct 2016 15:49:36 GMT

It's polygon feature layer. I tested with the point feature layer too.

Re: Filter widget: zoom to features

RobertScheitlin__GISP — Wed, 19 Oct 2016 16:00:16 GMT

Helen,

That is so strange as I tested with a polygon layer as well. Is there a filter expression you can try that returns less results (your earlier was returning 218 polygons).

Re: Filter widget: zoom to features

helenchu — Wed, 19 Oct 2016 17:42:29 GMT

Oh that 218 (points) was for the point feature polygon (my real app will have to use it) . The one I sent you returns only 1 polygon at a time.

Re: Filter widget: zoom to features

RobertScheitlin__GISP — Wed, 19 Oct 2016 17:48:36 GMT

OK,

But the url you proved was altered so I can not test using your data and as I mentioned with my polygon data it works fine.

Re: Filter widget: zoom to features

RobertScheitlin__GISP — Sun, 12 Dec 2021 01:21:40 GMT

Helen,

OK so I found the difference between your data and mine that I was testing. Mine was using wkid 102100 like the maps wkid.

So make this change (line 6):

//Add RJS Now zoom to the results
      var qt = QueryTask(layerInfo.getUrl());
      var q = Query();
      q.returnGeometry = true;
      q.where = layerFilterExpr;
      q.outSpatialReference = this.map.spatialReference;
      qt.execute(q, lang.hitch(this, function(fs){
          this.map.setExtent(graphicsUtils.graphicsExtent(fs.features), true);
      }));
//End RJS‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Filter widget: zoom to features

helenchu — Wed, 19 Oct 2016 18:15:01 GMT

My server is not accessible from outside. I use portal not Arcgis online. I notice there're some differences from the two. Thanks.

Re: Filter widget: zoom to features

RobertScheitlin__GISP — Wed, 19 Oct 2016 18:18:35 GMT

Helen,

My last reply should fix the issue.

Re: Filter widget: zoom to features

helenchu — Wed, 19 Oct 2016 18:28:59 GMT

That's what it is. Thank you so much!

Re: Filter widget: zoom to features

MelissaPrindiville — Wed, 04 Oct 2017 14:01:39 GMT

Hi Robert, I am trying to apply this same functionality using web app builder filter widget. I added your code above but I'm not getting any results.

Re: Filter widget: zoom to features

RobertScheitlin__GISP — Wed, 04 Oct 2017 14:30:42 GMT

Melissa,

You are going to have a REALLY hard time adding this code to a minified version of the widget.js like you are attempting to do.

Re: Filter widget: zoom to features

JeremyDunn1 — Fri, 27 Oct 2017 12:33:23 GMT

Good Morning Robert,

I have tried to update the Filter Widget to apply a zoom function with little success here is my Filter Widget.js file.

Which should be edited as you have shown, however it does not zoom to the location when the filter is applied. I too am running this in portal 10.5

Is this the only file that needs to be updated ?

If you remove the filter and then re-apply it the Filter widget folder is removed and the original re-written without the edit, why is this the case ?

Look forward to your reply,

Regards,

Jeremy.

Re: Filter widget: zoom to features

RobertScheitlin__GISP — Fri, 27 Oct 2017 12:46:06 GMT

Jeremy,

You missed the other additions at the start of the widget:

function(declare, array, html, lang, query, on, _WidgetsInTemplateMixin, BaseWidget, FilterUtils, FilterParameters, LayerInfos, FilterManager, esriRequest, QueryTask, Query, graphicsUtils) { //Added , QueryTask, Query, graphicsUtils

The reason the widget.js is replaced when you remove and re-add it is the whole concept of WAB is the stemApp is what is cloned to a new apps folders when a new add is made and when widgets are added the widget is cloned from the stemApps widget folder. So you are making changes in the apps widgets folder which is correct, but if you want those changes to be cloned into new apps then you have to also add your changes to the stemApp.