WebApp display layer only if filtered?

1251
4
Jump to solution
09-07-2018 05:23 PM
StefFrat
New Contributor II

Hi, hoping for some help!  Can I make a webapp with layers that can only be viewed when a filter is applied?  So instead of "No Filter" showing all the data, it would show no data.  I have a dataset where features have the same locations, and it only makes sense to view this data when a filter is applied. 

An example (this is not my application) is a point layer of different cars I might buy, and a webapp that lets me see what my driveway would look like with one new car occupying the only available spot in my driveway.  The layer would have points for a car, a truck, and a van, all with the same XY coords, symbolized differently, and the view of the webapp only makes sense when you are filtered to view one and only one of these cars, because if you don't filter, you see a jumbled mess of car symbols on top of the same X, and instead of that mess you'd rather see the empty spot until you pick one.  Hoping to stay near the simplicity of the WebApp builder, and want something as simple as the Filter widget.  Thanks!!!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Stef,

 

   This is possible if you are using WAB Developer edition and make some code changes to the Widget.js.

 

Add lines 4-9 to the startup function:

      startup: function() {
        this.inherited(arguments);
        this.resize();
        //Initialy turn all filter layers off
        var filters = this.config.filters;
        array.forEach(filters, lang.hitch(this, function(filterObj) {
          var lyrInfo = this.layerInfosObj.getLayerInfoById(filterObj.layerId);
          lyrInfo.hide();
        }));
      },‍‍‍‍‍‍‍‍‍‍

 

Add lines 27, 35 and 41 to the toggleFilter function:

      toggleFilter: function(node, filterObj, parse) {

        if (html.hasClass(node, 'config-parameters') &&
          !(node.filterParams && node.filterParams.getFilterExpr())) {
          return;
        }
        if (parse.isAskForValue && !(node.filterParams && node.filterParams.getFilterExpr())) {
          this.configFilter(node, filterObj);
          return;
        }
        // if(node.toggleButton.isDoing){
        //   return;
        // }

        var layerId = filterObj.layerId;
        var idx = html.getAttr(node, 'data-index');
        var layerFilterExpr = null;

        var applied = html.hasClass(node, 'applied');
        if (applied) {
          html.removeClass(node, 'applied');
          node.toggleButton.uncheck();
        } else {
          html.addClass(node, 'applied');
          node.toggleButton.check();
        }
        var lyrInfo = this.layerInfosObj.getLayerInfoById(filterObj.layerId);
        var enableMapFilter = null;
        if (!applied) {
          var expr = this._getFilterExpr(node, filterObj);
          this._setItemFilter(layerId, idx, expr, filterObj.enableMapFilter);
          layerFilterExpr = this._getExpr(layerId);
          enableMapFilter = this._getMapFilterControl(layerId);
          this.filterManager.applyWidgetFilter(layerId, this.id, layerFilterExpr, enableMapFilter);
          lyrInfo.show();
        } else {
          this._removeItemFilter(layerId, idx);
          layerFilterExpr = this._getExpr(layerId);
          enableMapFilter = this._getMapFilterControl(layerId);
          this.filterManager.applyWidgetFilter(layerId, this.id, layerFilterExpr, enableMapFilter);
          lyrInfo.hide();
        }

        this._afterFilterApplied(filterObj.layerId);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Emeritus

Stef,

 

   This is possible if you are using WAB Developer edition and make some code changes to the Widget.js.

 

Add lines 4-9 to the startup function:

      startup: function() {
        this.inherited(arguments);
        this.resize();
        //Initialy turn all filter layers off
        var filters = this.config.filters;
        array.forEach(filters, lang.hitch(this, function(filterObj) {
          var lyrInfo = this.layerInfosObj.getLayerInfoById(filterObj.layerId);
          lyrInfo.hide();
        }));
      },‍‍‍‍‍‍‍‍‍‍

 

Add lines 27, 35 and 41 to the toggleFilter function:

      toggleFilter: function(node, filterObj, parse) {

        if (html.hasClass(node, 'config-parameters') &&
          !(node.filterParams && node.filterParams.getFilterExpr())) {
          return;
        }
        if (parse.isAskForValue && !(node.filterParams && node.filterParams.getFilterExpr())) {
          this.configFilter(node, filterObj);
          return;
        }
        // if(node.toggleButton.isDoing){
        //   return;
        // }

        var layerId = filterObj.layerId;
        var idx = html.getAttr(node, 'data-index');
        var layerFilterExpr = null;

        var applied = html.hasClass(node, 'applied');
        if (applied) {
          html.removeClass(node, 'applied');
          node.toggleButton.uncheck();
        } else {
          html.addClass(node, 'applied');
          node.toggleButton.check();
        }
        var lyrInfo = this.layerInfosObj.getLayerInfoById(filterObj.layerId);
        var enableMapFilter = null;
        if (!applied) {
          var expr = this._getFilterExpr(node, filterObj);
          this._setItemFilter(layerId, idx, expr, filterObj.enableMapFilter);
          layerFilterExpr = this._getExpr(layerId);
          enableMapFilter = this._getMapFilterControl(layerId);
          this.filterManager.applyWidgetFilter(layerId, this.id, layerFilterExpr, enableMapFilter);
          lyrInfo.show();
        } else {
          this._removeItemFilter(layerId, idx);
          layerFilterExpr = this._getExpr(layerId);
          enableMapFilter = this._getMapFilterControl(layerId);
          this.filterManager.applyWidgetFilter(layerId, this.id, layerFilterExpr, enableMapFilter);
          lyrInfo.hide();
        }

        this._afterFilterApplied(filterObj.layerId);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

StefFrat
New Contributor II

Thanks Robert, that should work!!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

0 Kudos
AndrewL
Occasional Contributor II

Hello. Would this solution also work for the Group Filter widget? Thanks!