WebApp display layer only if filtered?

[StefFrat]

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!!!

[RobertScheitlin__GISP · Accepted solution]

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]

Thanks Robert, that should work!!

[RobertScheitlin__GISP]

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

[AndrewL]

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