Passing values INTO a SharePoint AppWeb (IFRAME)

The new application architecture for SharePoint 2013 is a big change, with the contents of an ‘app’ being contained within an IFRAME (old school for the new school !)

There are some challenges – most notably with ‘cross domain’ calls.

Much of the details on the web discuss HOW you can include JavaScript (CSOM) within the APP Web (inside the iframe) for calling to some parts of SharePoint – within the HOST Web.

Have a look at the great articles from Chris O’Brien – very good detail :

http://www.sharepointnutsandbolts.com/2012/11/access-end-user-data-in-host-web-from.html

BUT – what if you want to do the opposite ?    And pass values INTO the IFrame ?

Problem Statement

In the example below, there are some URL’s at play – for the main ‘outer browser page’ – and the SharePoint “AppPart” IFRAME SRC attribute – which will be detailed below.

image

The problem I have, is to pass the “CompanyId” and “Service” into the APP WEB.

Investigation

From looking at the ‘source’ of the page (with the AppPart), there is an IFRAME :

image

Looking at the source (SRC) for the IFRAME, there is a massive URL :

https://TENANT.sharepoint.com/_layouts/15/appredirect.aspx?redirect_uri=https%3A%2F%2Fa57e0d4b%2Db308%2D4d37%2D933f%2Df6ac34cc3caf%2Eo365apps%2Enet%2FPages%2FContactUs%2Easpx%3FSPHostUrl%3Dhttps%253A%252F%252Fsdfsdfsdf%252Dpublic%252Esharepoint%252Ecom%26SPHostTitle%3DWebsite%26SPAppWebUrl%3Dhttps%253A%252F%252Fsdfsdfsdf%252D0b8387559abd0a%252Esharepoint%252Ecom%252FExchangeBookings%26SPLanguage%3Den%252DUS%26SPClientTag%3D24%26SPProductNumber%3D16%252E0%252E2510%252E1213%26SenderId%3D43AA3E140%26%26CTYPE%3De%26EID=282&client_id=i%3A0i%2Et%7Cms%2Esp%2Eext%7Ca57e0d4b%2Db308%2D4d37%2D933f%2Df6ac34cc3caf%40691f8b90%2Df291%2D48a2%2Db6a4%2D173a73073f2c

In reality – it’s not THAT scary, when you break it down :

And so – what if we’re able to UPDATE the ‘redirect_uri’ to include the custom properties as mentioned above ??     Oooooh !   That might just work.

Proof Of Concept

The next bits cover the code I tried – using some JavaScript/jQuery – on the main page that I’m hosting the AppPart.

  • Add a “Script Block” and include the following :

<script type=”text/javascript” src=”/Style%20Library/jquery-1.10.2.min.js” ></script>

<script type=”text/javascript” src=”/Style%20Library/IFrameHelper.js” ></script>

  • Obviously – need to download jQuery.js, into Style Library
  • Then, within the code for the “IFrameHelper.js” do the following :
    • Use jQuery to run ‘on document load’
    • Get the current page URL (entire browser)
    • Get the QueryString part from main window (CompanyId / Service)
    • ADD this to the ‘redirect_uri’ piece
    • Put it back together
    • Update the SRC for the IFRAME
  • Params will now be passed INTO the IFRAME – and you can grab in C# code

The main change is to define a new URL :

And – this is updated as the SRC of the IFRAME.     The good bit is, that this will send ALL + ANY QueryString bits to the child IFRAME.

Here’s the full code of the “JS” file – PLEASE let me know if this helps you – or you managed to do this a nicer way (??)

image

Here’s the code in all it’s ugly wonder – not the best to read online (that’s why I put it as a screen shot above).

$(document).ready(function () {
    // get the current url – and the query string bit
    var currentPageUrl = window.location.href;

    // if there *IS* a query string – then need to grab – and pass on to the iFRAME
    if (currentPageUrl.indexOf(‘?’) != -1) {
        // —————————————————————
        // get the query string bit for current page
        // —————————————————————
        var currentPageQueryString = currentPageUrl.substring(currentPageUrl.indexOf(‘?’));

        //need to fix some bits with the querystring
        currentPageQueryString = currentPageQueryString.replace(“?”, “%26”);
        currentPageQueryString = currentPageQueryString.replace(“&”, “%26”);
        currentPageQueryString = currentPageQueryString.replace(“=”, “%3D”);

        // —————————————————————  
        // now update the iframe src
        // —————————————————————

        //get the url from iframe on page
        var src = $(‘iframe’).attr(‘src’);

        if (src != null) {
            //need to get the query string parts – esp.find the ‘redirect_uri’ – and APPEND some bits to it
            var iframeUrl = src.substring(0, src.indexOf(‘?’));

            var vars = getUrlVars(src);
            var redirectUrl = vars[“redirect_uri”];
            var clientID = vars[“client_id”];

            //add on the extra bit (for this page querystring)
            redirectUrl = redirectUrl + “%26” + currentPageQueryString;

            //piece back together – and update the iframe
            var newUrl = iframeUrl + “?redirect_uri=” + redirectUrl + “&client_id=” + clientID;

            //update the SRC in the IFRAME
            $(‘iframe’).attr(‘src’, newUrl);

        }
    }

});

function getUrlVars(url) {
    //split up the pieces of the URL
    var vars = [], hash;

    var hashes = url.slice(url.indexOf(‘?’) + 1).split(‘&’);

    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split(‘=’);
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }

    return vars;
}

NB.   I’m using this within Office 365 – but – it should be OK for an on-premises environment of SharePoint 2013.

Advertisements

One thought on “Passing values INTO a SharePoint AppWeb (IFRAME)

  1. Hi Chris,

    Thanks a lot for your post, it did work in my env, but do not confirm if you noticed, when we invoked, “$(‘iframe’).attr(‘src’, newUrl);”
    seems like the app part RELOADED, that means, the app part was loaded two times.
    Initially when we load the host web, the app part was loaded that did NOT INCLUDE “custom query string”, then when we invoked “$(‘iframe’).attr(‘src’, newUrl);” the app part was reloaded that did INCLUDE “customer query string”.
    Do you have any other suggestions that avoid this situation?
    Thanks again.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s