Use Sharepoint querystring value as App-part property


Staff member
I am building a Sharepoint 2013 app part that is supposed to show information about a particular person. The person GUID will be supplied via a querystring in the Sharepoint page URL and somehow that querystring (key/value) needs to get passed into all the iFrame / app part.

At first I was hoping I could just send the querystring down to the iFrame using custom properties in App part's Element.xml file (I expected that Sharepoint was smart enough that it had a datatype=querystirng which grabbed the querystring from SP URL and pushed it into the app part). But the properties in Elements.xml seems static and can only be defined in "Edit web part" menu when editing SP page.

I tried to inject the querystrings into all iframes contained in Sharepoint page by using Javascript (following this guide, and modifying a bit: <a href="" rel="nofollow noreferrer"></a>). I.e. I looped through all iframes, and changed the iframe.src (also tried iframe.setAttribute(src, newSrc)) to include the querystrings which javascript grapped from This seems to work 80% of the times, the page with app part load successfully with querystrings passed to all app parts. However, the other 20% of the times the iframe.src is set correctly but not reloaded by browser (initial app part page without querystrings are shown). This seem to be a problem in my Chrome v.31 browser. In IE it works successfully every time.

Here is the code snippet of my Sharepoint hosted Javascript (included at the bottom of the Sharepoint master template):

var sharepointQueryKeyValuePairs = {};"&amp;").forEach(function (pair) {
    if (pair === "") return;
    var parts = pair.split("=");
    sharepointQueryKeyValuePairs[parts[0]] = parts[1];

var arrFrames = document.getElementsByTagName("iframe");
for (var i = 0; i &lt; arrFrames.length; i++) {
    var iFrame = arrFrames[i];
    var clientID = encodeURIComponent("displayMode=spRedirect");
    if (iFrame.src.indexOf(clientID) != -1) {
        var querystring = encodeURIComponent("displayMode=sp");
        var newIframeSrc = iFrame.src.replace(clientID, querystring);

        var sharepointQueryKeyValuePairsCopy = {};
        $.extend(sharepointQueryKeyValuePairsCopy, sharepointQueryKeyValuePairs);

        newIframeSrc.split(encodeURIComponent('?'))[1].split(encodeURIComponent("&amp;")).forEach(function (pair) {
            if (pair === "") return;
            var parts = pair.split(encodeURIComponent("="));

            if (sharepointQueryKeyValuePairs.hasOwnProperty(parts[0])) {
            newIframeSrc = newIframeSrc.replace(encodeURIComponent(parts[0] + "=" + parts[1]), encodeURIComponent(parts[0] + "=" + sharepointQueryKeyValuePairs[parts[0]]));
            delete sharepointQueryKeyValuePairsCopy[parts[0]];

     //todo: loop through sharepointQueryKeyValuePairsCopy and inject the rest of the querystring values

    iFrame.setAttribute('src', newIframeSrc);
    //also tried iFrame.src = newIframeSrc;

Does anyone have any ideas on how this could work? Preferably have a suggestion for a more neat solution. I don't like the javascript solution, there should be another more elegant way to pass in SP querystring to app parts!

Question in asked previously here (<a href=""></a>) without any answer so I try my luck.