AnsweredAssumed Answered

eSearch minimize/fold widget in mobile on 'zoom-to-result'

Question asked by franklin.alexander on Jun 29, 2018
Latest reply on Jul 2, 2018 by rscheitlin

I saw an earlier post from 2015 about this same request, but wanted to re-kindle the issue because, although the widget only hides 1/2 the screen in mobile, it still hides the selected point when zoomed in to the result (see screenshot). 


I thought of two ways to address the issue. In a previous app, for the 'near me' widget, I just put the following code in the _createBuffer() function:


var extent;
        geometryService.buffer(params, lang.hitch(this, function (
          geometries) {
          if (window.appInfo.isRunInMobile) {
              console.log("geometries ", geometries[0].getExtent());
              extent = geometries[0].getExtent();
              extent.ymin = extent.ymin - (extent.ymax-extent.ymin);
              console.log("new geometries ", extent);
          } else {
              extent = geometries[0].getExtent();


This moved the center of the map above the widget, solving the problem. Unfortunately, I have been unable to repeat this for the current application, because the eSearch widget is a little more complex and I cannot seem to find to best location/function for the code. 


I also thought about the solution previously mentioned in the 2015 post, about folding the widget on 'zoom-to-result'. I really like this idea because it allows the user to see to entire screen. The challenge I am having for this solution, is that I cannot seem to access the 'foldableNode' from the Widget.js file (I think I am placing the code in the correct location. See lines 44-55, approx 3923-3933 in Widget.js):


_selectResultItem: function (index, item) {
        var FeatLyr = new FeatureLayer(this.resultLayers[this.currentLayerIndex]._origLayerURL);
        var point = item.centerpoint;
        //console.log("item center point ", point);
        var layerConfig = this.config.layers[this.currentLayerIndex];
        var lyrHasPopupDisabled = (layerConfig.hasOwnProperty("disablePopups") && layerConfig.disablePopups)?true:false;
        var zoomScale = layerConfig.zoomScale || 10000;
        //add the selection symbol
        if(this.list.items.length > 1){
, 500);
          var selGra = new Graphic(item.graphic.toJson());//item.graphic.clone();
          if (item.graphic.geometry.type === "point"){
            var size = this._getPointSymbolSize(item.graphic.symbol);
            selGra.symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, size,
              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255, 1]), 2),
              new Color([255, 255, 255, 0]));
              selGra.symbol.outline.setColor(new Color([0, 255, 255, 1]));
              selGra.symbol.setColor(new Color([0, 255, 255, 1]));
        if (item.graphic.geometry.type === "point") {
          console.log("point ", point);

          if (( > zoomScale || layerConfig.forceZoomScale) && !lyrHasPopupDisabled) {
  ,, function () {
              if ( && this.config.enablePopupsOnResultClick) {

                if ( {
                if (window.appInfo.isRunInMobile) {
                    var swPanel = document.getElementById('_24_panel');
                                                          //returns widget panel div
                    console.log("search panel ", swPanel);
                    var fold = dojoQuery('foldable-btn', this.foldableNode);
                                                          //returns empty array
                    //var fold = swPanel.titleNode; //returns undefined
                    console.log('search panel ', fold);
                    //html.removeClass(this.foldableNode, 'fold-up');
                    //html.addClass(this.foldableNode, 'fold-down');


I am game for either solution and I think I am close to solving both methods, but as usual I am missing something!