none
HTML Popup/Navigation to external website

    Question

  • Hi, I am trying to open a new window with a value from the original screen data for example, the table cotains

    image + userid=12345

    List of users is displayed in a grid, when I click on their image open a new browser window with http://www.sample.com/userid?=12345

    If it's possible to browse to a popup and remain within the site that would be great but I need the least technical solution, this is the first time I am trying to do this.

    If needed I can create the url data directly in the database to the url for example RedirectURL = http://www.sample.com/userid=12345

    I'm open to any simple way to do this :)

    Thanks

    Monday, October 21, 2013 9:28 AM

Answers

  • It appears you have to resize the iframe as well as increase max-width inline style on it's wrapper div.msls-popup-content.  Try this: 

    myapp.Main.Centered_postRender = function (element, contentItem) {
        // Write code here.
        element.innerHTML = "<iframe src='http://www.bing.com' width='50' height='35'></iframe>";
    };
    myapp.Main.ShowCenteredPopup_execute = function (screen) {
        // Note:If using JQuery Mobile 1.3 (or higher) use:
        // "popupcreate" rather than "popupbeforeposition"
        // An event handler to be fired before a popup is shown 
        // to override the popup positionTo option 
        // using "window" instead of "origin"
        $(window).one("popupbeforeposition", function (e) {
            $(e.target).popup({
                positionTo: "window"
            });
            var w = $(window).width() - 30;
            var popupContent = $(e.target).find("div.msls-popup-content");
            var iframe = popupContent.find("iframe");
            popupContent.attr("style", "min-width: " & w & "px; max-width: " & w & "px;");
            iframe.attr("width", w);
            iframe.attr("height", $(window).height() - 30);
                });
        // Show the Popup
        screen.showPopup("Centered");
    };

    There is a nice example of keeping the popup size to scale look under 'working with iframes in popups' here:

    http://api.jquerymobile.com/popup/

    HTH,

    Josh

    EDIT: max-width property of popup can be set in LS designer so you can set it to blank and remove the following line from this code:

    popupContent.attr("style", "min-width: " & w & "px; max-width: " & w & "px;");




    Friday, October 25, 2013 3:21 PM
  • If you're trying this in HTML client it's a lot simpler than Yann's method which is for SL client.

    You add a popup to your screen then in the postrender method simply render an iframe like so:

    element.innerHTML = "<iframe src='http://www.sample.com/userid=12345'></iframe>";

    If you need to pass some data from the main screen to build the url then you can do so with screen properties and beforeShown like this:

    http://msdn.microsoft.com/en-us/library/vstudio/jj733572.aspx#copyinfo

    Here is an example of adding a popup, rendering innerHTML and then centering the popup.

    http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/1207/HUY-Volume-III-ndash-Popups-Dirty-Visual-Collections-and-Using-Prototypes-To-Calculate-Child-Collections.aspx

    Sorry I cannot find a end to end example, but that should get you started.

    HTH,

    Josh


    Thursday, October 24, 2013 2:48 PM
  • Hi Josh

    Works perfectly, thanks so much for that!

    Is it possible to add a "X" or a close option somewhere on the popup ?

    Try this:

    myapp.Main.Centered_postRender = function (element, contentItem) {
        //create close button
        var closeButton = $('<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>');
        
        //append close button to popup div
        $(element.parentNode).append(closeButton);
        
        //now add iframe
        element.innerHTML = "<iframe src='http://www.bing.com' width='50' height='35'></iframe>";
    };

    HTH,

    Josh


    • Marked as answer by NicholasGreyJames Monday, October 28, 2013 1:36 PM
    • Edited by joshbooker Monday, October 28, 2013 1:55 PM add quote
    Monday, October 28, 2013 1:24 PM

All replies

  • Ok so I have been looking about a bit and it could be an option to not go to an external website at all, I am curious though if this can work in a postrender code with an HTML popup as it all appears to be javascript, all I will need to do is grab the userid from the existing screen data and re-use it.

    https://developers.arcgis.com/en/javascript/jstutorials/

    Any ideas ? Right direction ?

    Tuesday, October 22, 2013 8:38 AM
  • Hi,

    If you want to navigate to external website in lightswitch, In order to be able to display a web page in LightSwitch, we ususally have to resort to adding a button on a page somewhere, & launching a browser window in the button's Execute method.

    Yann's article can be good reference for you,

    # Add a Web Page URL to LightSwitch's Navigation Menu

    hope it helps,

    Regards


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, October 24, 2013 7:02 AM
    Moderator
  • Thank you Angie, I have downloaded his project and I will have a look at it shortly.
    Thursday, October 24, 2013 8:38 AM
  • If you're trying this in HTML client it's a lot simpler than Yann's method which is for SL client.

    You add a popup to your screen then in the postrender method simply render an iframe like so:

    element.innerHTML = "<iframe src='http://www.sample.com/userid=12345'></iframe>";

    If you need to pass some data from the main screen to build the url then you can do so with screen properties and beforeShown like this:

    http://msdn.microsoft.com/en-us/library/vstudio/jj733572.aspx#copyinfo

    Here is an example of adding a popup, rendering innerHTML and then centering the popup.

    http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/1207/HUY-Volume-III-ndash-Popups-Dirty-Visual-Collections-and-Using-Prototypes-To-Calculate-Child-Collections.aspx

    Sorry I cannot find a end to end example, but that should get you started.

    HTH,

    Josh


    Thursday, October 24, 2013 2:48 PM
  • Hi Josh

    I've been playing with this a bit but it seems as if element.innerHTML/iframe will only work with a fixed width and height, anything else breaks the center function and I don't have the ability resize the browser.

    The closest I have come to making it work fairly well is with the following:

    element.innerHTML = "<iframe src='http://wwwgoogle.com/' style='width:40em; height:40em'></iframe>";

    As em is the closest thing I can find to % but em appears to be size relational to screen size (an em of 60 will fill about 90% of the screen)(em is from what I can tell intended for font sizing) http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

    Is it not possible to provide parameters for the popup within the post render code of the popup itself, my only objective here is for the popup to fill 90% of the screen with center and (if possible) resize ?

    myapp.Main.ShowCenteredPopup_execute = function (screen) {
    
        // Note:If using JQuery Mobile 1.3 (or higher) use:
    
        // "popupcreate" rather than "popupbeforeposition"
    
    
    
        // An event handler to be fired before a popup is shown 
    
        // to override the popup positionTo option 
    
        // using "window" instead of "origin"
    
        $(window).one("popupbeforeposition", function (e) {
    
            $(e.target).popup({
    
                positionTo: "window"
    
            });
    
        });
    
    
    
        // Show the Popup
    
        screen.showPopup("Centered");
    
    };

    Friday, October 25, 2013 10:40 AM
  • It appears you have to resize the iframe as well as increase max-width inline style on it's wrapper div.msls-popup-content.  Try this: 

    myapp.Main.Centered_postRender = function (element, contentItem) {
        // Write code here.
        element.innerHTML = "<iframe src='http://www.bing.com' width='50' height='35'></iframe>";
    };
    myapp.Main.ShowCenteredPopup_execute = function (screen) {
        // Note:If using JQuery Mobile 1.3 (or higher) use:
        // "popupcreate" rather than "popupbeforeposition"
        // An event handler to be fired before a popup is shown 
        // to override the popup positionTo option 
        // using "window" instead of "origin"
        $(window).one("popupbeforeposition", function (e) {
            $(e.target).popup({
                positionTo: "window"
            });
            var w = $(window).width() - 30;
            var popupContent = $(e.target).find("div.msls-popup-content");
            var iframe = popupContent.find("iframe");
            popupContent.attr("style", "min-width: " & w & "px; max-width: " & w & "px;");
            iframe.attr("width", w);
            iframe.attr("height", $(window).height() - 30);
                });
        // Show the Popup
        screen.showPopup("Centered");
    };

    There is a nice example of keeping the popup size to scale look under 'working with iframes in popups' here:

    http://api.jquerymobile.com/popup/

    HTH,

    Josh

    EDIT: max-width property of popup can be set in LS designer so you can set it to blank and remove the following line from this code:

    popupContent.attr("style", "min-width: " & w & "px; max-width: " & w & "px;");




    Friday, October 25, 2013 3:21 PM
  • Hi Josh

    Works perfectly, thanks so much for that!

    Is it possible to add a "X" or a close option somewhere on the popup ?

    Monday, October 28, 2013 12:40 PM
  • Hi Josh

    Works perfectly, thanks so much for that!

    Is it possible to add a "X" or a close option somewhere on the popup ?

    Try this:

    myapp.Main.Centered_postRender = function (element, contentItem) {
        //create close button
        var closeButton = $('<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>');
        
        //append close button to popup div
        $(element.parentNode).append(closeButton);
        
        //now add iframe
        element.innerHTML = "<iframe src='http://www.bing.com' width='50' height='35'></iframe>";
    };

    HTH,

    Josh


    • Marked as answer by NicholasGreyJames Monday, October 28, 2013 1:36 PM
    • Edited by joshbooker Monday, October 28, 2013 1:55 PM add quote
    Monday, October 28, 2013 1:24 PM
  • Thanks once again, I am learning so much. I visited your link for the jquery api and saw the "$(element.parentNode).append(closeButton);" but I had no idea how to implement it.
    Monday, October 28, 2013 1:40 PM