topic Re: Query Widget - remove Options window and result popup in ArcGIS Web AppBuilder Questions

Query Widget - remove Options window and result popup

MegPeterson — Fri, 19 Feb 2016 21:13:02 GMT

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

Re: Query Widget - remove Options window and result popup

RobertScheitlin__GISP — Sat, 11 Dec 2021 21:55:46 GMT

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

Re: Query Widget - remove Options window and result popup

MegPeterson — Mon, 22 Feb 2016 14:39:02 GMT

Robert - you are invaluable. Thank you!

Re: Query Widget - remove Options window and result popup

MegPeterson — Mon, 22 Feb 2016 18:49:18 GMT

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.

Re: Query Widget - remove Options window and result popup

DouglasLecker — Tue, 23 Feb 2016 20:12:35 GMT

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

Re: Query Widget - remove Options window and result popup

MegPeterson — Tue, 23 Feb 2016 21:04:17 GMT

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!

Re: Query Widget - remove Options window and result popup

RobertScheitlin__GISP — Tue, 23 Feb 2016 21:14:43 GMT

Meg,

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

Re: Query Widget - remove Options window and result popup

RobertScheitlin__GISP — Tue, 23 Feb 2016 21:18:37 GMT

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.

Re: Query Widget - remove Options window and result popup

DouglasLecker — Tue, 23 Feb 2016 21:41:39 GMT

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

Re: Query Widget - remove Options window and result popup

MegPeterson — Thu, 25 Feb 2016 18:31:53 GMT

Thanks++.

Re: Query Widget - remove Options window and result popup

CarmelConnolly3 — Wed, 19 Oct 2016 16:01:26 GMT

Hi Robert,

Would you be able to provide an update to the code that needs to be commented out for version 2.0, in particular, the location of lines 88-101 in your example above. The code has changed a lot, is it potentially this?:

_getLayerInfoAndRelationshipLayerInfos: function(tr){

var def = new Deferred();

this.shelter.show();

var layerDef = this._getLayerInfo(tr);

layerDef.then(lang.hitch(this, function(layerInfo){

tr.layerInfo = layerInfo;

this._getRelationshipLayerInfos(tr).then(lang.hitch(this, function(relationshipLayerInfos){

if(!this.domNode){

return;

}

tr.relationshipLayerInfos = relationshipLayerInfos;

var relationshipPopupTemplates = {};

for(var layerId in relationshipLayerInfos){

var popupInfo = queryUtils.getDefaultPopupInfo(relationshipLayerInfos[layerId], false, true);

relationshipPopupTemplates[layerId] = new PopupTemplate(popupInfo);

}

this.shelter.hide();

def.resolve({

layerInfo: layerInfo,

relationshipLayerInfos: relationshipLayerInfos,

relationshipPopupTemplates: relationshipPopupTemplates

});

}), lang.hitch(this, function(err){

if(!this.domNode){

return;

}

this.shelter.hide();

def.reject(err);

}));

}), lang.hitch(this, function(err){

if(!this.domNode){

return;

}

this.shelter.hide();

def.reject(err);

}));

return def;

Thanks

Carmel

Re: Query Widget - remove Options window and result popup

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

Carmel,

No in WAB 2.0 it is 1320 - 1333

Re: Query Widget - remove Options window and result popup

CarmelConnolly3 — Mon, 24 Oct 2016 10:58:08 GMT

Hi Robert,

I'm in widget.js ([install dir]\server\apps\[app#]\widgets\Query\Widget.js) of the app we've created, but it only has 948 lines of code. From searching, there is no similar blocks of code to your lines 88-101.

With regards to commenting out (feature.setInfoTemplate(infoTemplate);), this does not appear in the widget.js file, but commenting out ResultLayer.setInfoTemplate(popupTemplate); gave the same result. There seems to be inconsistancies between my files and yours. I've checked a WAB 2.0 install on another machine and it's the same.

Carmel

Re: Query Widget - remove Options window and result popup

RobertScheitlin__GISP — Mon, 24 Oct 2016 12:51:50 GMT

Carmel,

Are you sure you are talking about WAB 2.0 Dev Edition then? You can not make these changes in a minfied version of the widgets code (meaning a version from AGOL).

Re: Query Widget - remove Options window and result popup

CarmelConnolly3 — Mon, 24 Oct 2016 12:59:15 GMT

Ah my mistake! We're using version 2.1 and it's definitely WAB Dev Edition.

Re: Query Widget - remove Options window and result popup

RobertScheitlin__GISP — Mon, 24 Oct 2016 13:18:06 GMT

Carmel,

OK that makes a Big difference.

You will find the _onResultsTableClicked function in the [install dir]\server\apps\[app#]\widgets\Query\SingleQueryResult.js then (lines 652 - 662 need to be commented out).

Re: Query Widget - remove Options window and result popup

CarmelConnolly3 — Mon, 24 Oct 2016 13:24:06 GMT

Excellent, all sorted! Cheers Robert