iFrame and in screen window

[joerodmey]

Have a custom WAB app with a popup that provides a link for user to click on. This link brings them to a Survey123 form. Instead of opening up a new browser tab, I'm considering using the iFrame option to display the form in window.

Something like this:

map.infoWindow.setContent('<iframe  width="100%" height="1000"></iframe>');‍

Ideas welcomes.

Thanks,

Joe

[joerodmey]

Now I get the screen (below) even after reverting back to _blank. This occurs when I fire up WAB

[RobertScheitlin__GISP]

hmm... Have you tried clearing your browser cache?

[joerodmey]

Just tried that. Went to setup the portal page. Here I went thru the login process then it goes back to the error page as above.

[joerodmey]

Got it to work in Chrome.

Added the _parent and it opens in the same tab. Would there be a way to allow the user to get back to WAB from the Survey123 form?

[RobertScheitlin__GISP]

only if you have the ability to add a link in your survey.

[joerodmey]

Ok

A note too my previous question. If I said that my WAB app is run on my own server but hosted on AGOL for the services and requires login. Does that change your viewpoint on iFrames? The users will be internal

[RobertScheitlin__GISP]

Those are still two different domains no no that does not change the security issue.

[joerodmey]

What are your thoughts on something like this: xTF: Center a new popup window even on dualscreen with javascript 

[RobertScheitlin__GISP]

Joe,

   That is still opening a new window and just making it centered in the parent screens (but it is still a new window/tab).

[joerodmey]

Robert,

Just experimenting right now. Trying to implement the in screen popup (not iFrame) in MapManager.js but with little success.

Here is my code

function PopupCenter(url, title, w, h) {  
    // Fixes dual-screen position                         Most browsers      Firefox  
    var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;  
    var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;  
              
    width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;  
    height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;  
              
    var left = ((width / 2) - (w / 2)) + dualScreenLeft;  
    var top = ((height / 2) - (h / 2)) + dualScreenTop;  
    var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);  
  
    // Puts focus on the newWindow  
    if (window.focus) {  
        newWindow.focus();  
    }  
}  
       
       
       
       
  
  _publishMapEvent: function(map) {
       
              
        topic.subscribe('toggleChanged', lang.hitch(this, function(visible, layer){
          if(visible){
           
          }
        }));
          
          
          
          // create node for the tooltip
          var tip = "Click on problem location";
          var tooltip = dojo.create("div", { "class": "tooltip", "innerHTML": tip }, map.container);
          dojo.style(tooltip, "position", "fixed");

          // update the tooltip as the mouse moves over the map
          dojo.connect(map, "onMouseMove", function(evt) {
            var px, py;        
            if (evt.clientX || evt.pageY) {
              px = evt.clientX;
              py = evt.clientY;
            } else {
              px = evt.clientX + dojo.body().scrollLeft - dojo.body().clientLeft;
              py = evt.clientY + dojo.body().scrollTop - dojo.body().clientTop;
            }
                           
            // dojo.style(tooltip, "display", "none");
            tooltip.style.display = "none";
            dojo.style(tooltip, { left: (px + 15) + "px", top: (py) + "px" });
            // dojo.style(tooltip, "display", "");
            tooltip.style.display = "";
            // console.log("updated tooltip pos.");
          });

          // hide the tooltip the cursor isn't over the map
          dojo.connect(map, "onMouseOut", function(evt){
            tooltip.style.display = "none";
          });
            
            

        //add this property for debug purpose
        window._viewerMap = map;

        MapUrlParamsHandler.postProcessUrlParams(this.urlParams, map);

        console.timeEnd('Load Map');
        if (this.map) {
          this.map = map;
          this.resetInfoWindow(true);
          console.log('map changed.');
          topic.publish('mapChanged', this.map, this.layerInfosObj);
        } else {
          this.map = map;
          this.resetInfoWindow(true);
          topic.publish('mapLoaded', this.map, this.layerInfosObj);
        }

        require([
          'esri/graphic',
          'esri/symbols/SimpleMarkerSymbol',
          'esri/symbols/SimpleLineSymbol',
          'esri/Color'
        ], lang.hitch(this, function(Graphic, SimpleMarkerSymbol, SimpleLineSymbol, Color){
          var symbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_X, 18,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_X,
            new Color([207, 16, 45, 0.9]),
            1
          ),
          new Color([207, 16, 45, 0.9])
        );
          map.on("click", lang.hitch(this, function(evt){
            var gra = new Graphic(evt.mapPoint, symbol);
            setTimeout(lang.hitch(this, function(){
              var selFeats = map.infoWindow.features;
              if(!selFeats){
                map.graphics.clear();
                map.graphics.add(gra);
                    
          PopupCenter('http://www.xtf.dk','xtf','900','500');       
                    
                map.infoWindow.setContent('<a href="https://survey123.arcgis.com/share/xzy123?center='+ evt.mapPoint.getLatitude().toString() + ','+ evt.mapPoint.getLongitude().toString() + '" target="_blank"><font size="4">Click here to submit a service request</font></a>');
                    
                    
                map.infoWindow.show(evt.mapPoint);
              }
            }), 1000);
          }));
        }));
      },
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks