topic Re: iFrame and in screen window in ArcGIS Web AppBuilder Questions

iFrame and in screen window

joerodmey — Wed, 29 Aug 2018 19:06:21 GMT

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

Re: iFrame and in screen window

RobertScheitlin__GISP — Wed, 29 Aug 2018 19:21:43 GMT

Joe,

In the current security context of modern browsers placing things in iframes has gotten much more difficult and I would advise against it.

3 Reasons You Should Never Use Iframes

X-Frame-Options - HTTP | MDN

Re: iFrame and in screen window

joerodmey — Wed, 29 Aug 2018 19:32:44 GMT

Can you suggest another option? Would you recommend the X Frame option?

Re: iFrame and in screen window

RobertScheitlin__GISP — Wed, 29 Aug 2018 19:36:21 GMT

Joe,

Keep it in a new tab. X-Frame options are security policies/rules for iframes.

Re: iFrame and in screen window

joerodmey — Wed, 29 Aug 2018 19:38:11 GMT

I wanted to remove the 2nd tab so users stay on the same tab. Are there any other options code wise?

Re: iFrame and in screen window

RobertScheitlin__GISP — Wed, 29 Aug 2018 19:40:34 GMT

Would replacing the contents of the current tab with the survey work for you. If not then no, nothing I can think of.

Re: iFrame and in screen window

joerodmey — Wed, 29 Aug 2018 19:57:15 GMT

Yes but I would need to test this first. How would I go about such a process?

Re: iFrame and in screen window

RobertScheitlin__GISP — Wed, 29 Aug 2018 19:58:43 GMT

Set the link you are using to open the new to to have a target property of "_self"

Re: iFrame and in screen window

joerodmey — Wed, 29 Aug 2018 20:03:31 GMT

map.infoWindow.setContent('<a href="https://survey123.arcgis.com/share/xyz123?center='+ evt.mapPoint.getLatitude().toString() + ','+ evt.mapPoint.getLongitude().toString() + '&field:Floor_Selection=' + this.SERVICE_ID.split(']')[1] + '" target="_self"><font size="4">Click here to submit a service request</font></a>');‍

didn't seem to work

Re: iFrame and in screen window

RobertScheitlin__GISP — Wed, 29 Aug 2018 20:06:28 GMT

Try "_parent"

Re: iFrame and in screen window

joerodmey — Wed, 29 Aug 2018 20:19:25 GMT

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

Re: iFrame and in screen window

RobertScheitlin__GISP — Wed, 29 Aug 2018 20:23:36 GMT

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

Re: iFrame and in screen window

joerodmey — Wed, 29 Aug 2018 20:30:15 GMT

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.

Re: iFrame and in screen window

joerodmey — Wed, 29 Aug 2018 20:40:03 GMT

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?

Re: iFrame and in screen window

RobertScheitlin__GISP — Wed, 29 Aug 2018 20:41:20 GMT

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

Re: iFrame and in screen window

joerodmey — Wed, 29 Aug 2018 20:44:40 GMT

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

Re: iFrame and in screen window

RobertScheitlin__GISP — Wed, 29 Aug 2018 20:46:26 GMT

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

Re: iFrame and in screen window

joerodmey — Wed, 29 Aug 2018 21:30:47 GMT

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

Re: iFrame and in screen window

RobertScheitlin__GISP — Thu, 30 Aug 2018 12:46:32 GMT

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).

Re: iFrame and in screen window

joerodmey — Sun, 12 Dec 2021 06:46:38 GMT

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