Query Widget - remove Options window and result popup

4245
16
Jump to solution
02-19-2016 01:13 PM
MegPeterson
New Contributor III

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

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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);
            }));
          }*/
        }
      },

View solution in original post

16 Replies
RobertScheitlin__GISP
MVP Emeritus

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 = '&lt; ' + 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);
            }));
          }*/
        }
      },
MegPeterson
New Contributor III

Robert - you are invaluable. Thank you!

0 Kudos
MegPeterson
New Contributor III

FYI -

In the widget.html, I also removed the click  to return to the Options window from the Results window by commenting out these to lines:

<!--<div class="back-icon jimu-float-leading"></div>

            <div class="back-tip jimu-float-leading">${nls.parameters}</div>-->

In case that helps anyone else. Thanks again, Robert.

0 Kudos
DouglasLecker
New Contributor II

Hello Robert,

     I am trying to implement the second part of the question listed above, not having the infowindow popup when a selection is chosen from the results window. I am probably missing a step in there somewhere, because it is still showing up even after I comment out the lines 88-100 (in your example) in my Query widget.js file.

      Ideally, what I would really like have is when you click a result feature in the results panel, have it activate the Popup Panel even if it is closed. We really like the functionality of the Popup Panel and want to use that the majority of the time.

     Your help is greatly appreciated.

Thanks,

    Doug

0 Kudos
MegPeterson
New Contributor III

Hi Douglas and Robert - this did work for me in terms of removing the automatic popup that appears when a result is selected from the list.

However if I click on the map the popup appears, in addition to the one I preconfigured in the mapmanager.js. I need to remove the popup entirely from the query widget.

I'm intrigued by the panel option so hope that is possible!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Meg,

Line 1216 in the Widget.js needs to be commented out then (feature.setInfoTemplate(infoTemplate);).

MegPeterson
New Contributor III

Thanks++.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Douglas,

  Are you having this change in the stemApp widgets folder or in your apps widgets folder? You need to make the change in your specific apps widgets folder if you want this to apply to the app you are working on.

If you are talking about my popup panel widget then the next version will support the opening of the popup panel widget even if it is closed. But in that case you will not want to do this disabling of the popups.

0 Kudos
DouglasLecker
New Contributor II

Hi Robert,

    I made the changes in my apps widgets folder, specifically app #7 and I made sure I loaded the correct one in my browser. It appears that my code was not refreshing correctly to the browser. I restarted my WAB startup.bat, and the code worked. I apologize for the doubt.

     I have to say how much my company and I love your work on this widget, and I know I am just starting out in WAB development, but I am really excited by the possibilities you can do with this technology. Thank you for all the work you have done on these widgets and your patience answering questions.

Sincerely,

    Douglas