Query Widget - remove Options window and result popup

MegPeterson

Hi all -

I'm trying to create a simply per-configured query using the Query widget in the Web AppBuilder Dev. Edition 1.3.

I simply want the user to choose an activity from a drop down list:

And then immediately jump to the results list:

By passing the Options window:

Is this possible to do?

I'd also like the user to only zoom to the location they choose from the results list and not have the popup appear.

I see the popup in the config_query.json file in the application folder, but if I remove it the widget just hangs.

Thanks in advance! Meg

RobertScheitlin__GISP

Meg,

  Sure both are possible with code changes, if you are using WAB Developer version:

Changes are made to this file:

[install dir]\server\apps\[app#]\widgets\Query\Widget.js

Add lines 28 and 29:

_fromQueryListToQueryParams:function(){
        //reset UI of params page
        this._resetQueryParamsPage();
        var currentAttrs = this._getCurrentAttrs();
        var layerUrl = currentAttrs.config.url;
        // this.btnResultsBack.innerHTML = '< ' + this.nls.parameters;
        var partsObj = lang.clone(currentAttrs.config.filter);
        // this.paramsDijit.url = layerUrl;
        this.paramsDijit.build(layerUrl, currentAttrs.layerInfo, partsObj);

        //slide
        var showDom = this.queryParams;
        var hideDom = this.queryResults;

        html.setStyle(this.queryList, {
          left: 0,
          display: 'block'
        });

        html.setStyle(showDom, {
          left: '100%',
          display: 'block'
        });

        html.setStyle(hideDom, 'display', 'none');
        this._slide(this.queryList, 0, -100);
        this._slide(showDom, 100, 0);
//Automatically apply
        this._onBtnApplyClicked();
      },

Comment out Lines 88 thru 101

      _onResultsTableClicked: function(event){
        var target = event.target || event.srcElement;
        if(!html.isDescendant(target, this.resultsTable)){
          return;
        }
        var tr = jimuUtils.getAncestorDom(target, lang.hitch(this, function(dom){
          return html.hasClass(dom, 'query-result-item');
        }), 10);
        if(!tr){
          return;
        }

        this._selectResultTr(tr);

        //var spanTitle = query("span.result-item-title",tr)[0];
        //var featureAttrTable = query(".feature-attributes",tr)[0];
        //var attrTable = lang.clone(featureAttrTable);

        html.addClass(tr, 'jimu-state-active');
        var feature = tr.feature;
        var geometry = feature.geometry;
        if(geometry){
          var infoContent = tr.infoTemplateContent;
          var geoType = geometry.type;
          var centerPoint, extent;
          var def = null;

          if(geoType === 'point' || geoType === 'multipoint'){
            var singlePointFlow = lang.hitch(this, function(){
              def = new Deferred();
              var maxLevel = this.map.getNumLevels();
              var currentLevel = this.map.getLevel();
              var level2 = Math.floor(maxLevel * 2 / 3);
              var zoomLevel = Math.max(currentLevel, level2);
              if(this.map.getMaxZoom() >= 0){
                //use tiled layer as base map
                this.map.setLevel(zoomLevel).then(lang.hitch(this, function(){
                  this.map.centerAt(centerPoint).then(lang.hitch(this, function(){
                    def.resolve();
                  }));
                }));
              }else{
                //use dynamic layer
                this.map.centerAt(centerPoint).then(lang.hitch(this, function() {
                  def.resolve();
                }));
              }
            });

            if(geoType === 'point'){
              centerPoint = geometry;
              singlePointFlow();
            }
            else if(geoType === 'multipoint'){
              if(geometry.points.length === 1){
                centerPoint = geometry.getPoint(0);
                singlePointFlow();
              }
              else if(geometry.points.length > 1){
                extent = geometry.getExtent();
                if(extent){
                  extent = extent.expand(1.4);
                  centerPoint = geometry.getPoint(0);
                  def = this.map.setExtent(extent);
                }
              }
            }
          }
          else if(geoType === 'polyline'){
            extent = geometry.getExtent();
            extent = extent.expand(1.4);
            centerPoint = extent.getCenter();
            def = this.map.setExtent(extent);
          }
          else if(geoType === 'polygon'){
            extent = geometry.getExtent();
            extent = extent.expand(1.4);
            centerPoint = extent.getCenter();
            def = this.map.setExtent(extent);
          }
          else if(geoType === 'extent'){
            extent = geometry;
            extent = extent.expand(1.4);
            centerPoint = extent.getCenter();
            def = this.map.setExtent(extent);
          }

          /*if(def){
            def.then(lang.hitch(this, function(){
              if(typeof this.map.infoWindow.setFeatures === 'function'){
                this.map.infoWindow.setFeatures([feature]);
              }
              //if title is empty, popup header will disappear
              this.map.infoWindow.setTitle('<div class="query-popup-title"></div>');
              this.map.infoWindow.setContent(infoContent);
              if(typeof this.map.infoWindow.reposition === 'function'){
                this.map.infoWindow.reposition();
              }
              this.map.infoWindow.show(centerPoint);
            }));
          }*/
        }
      },