Passing Query string from SharePoint to the App Web

It has been almost two years since 2013, now I'm back... cheers..!

SharePoint 2013 uses set of tokens for use in apps for SharePoint. Like,

{StandardTokens}

which holds set of other tokens
             SPHostUrl={HostUrl}&
             SPAppWebUrl={AppWebUrl}&
             SPLanguage={Language}&
             SPClientTag={ClientTag}&
             SPProductNumber={ProductNumber}

But in case if you need any custom query string that should be used within your app from sharepoint. That is very difficult.

Here comes the approach called "Client Web Part"

When you develop any app in SharePoint, it will be in a separate domain or may in an external enviroment. SharePoint will redirect to the resective URL.

So if you want to display your app inside any page on the SharePoint,  here comes the approach called Client Web Part.

Client web Part used to hold your app in SharePoint pages inside an iFrame and it can be created only inside the Host Web of App.

When you are adding a Client web Part to the Host web inside the solution, you will be able to see an Element.xml file with some markup.

So if you want to define your custom property here, just use the the format in content tag,

<Content Type="html" Src="~appWebUrl/Pages/Default.aspx?{StandardTokens}&amp;CustomProp1=_CustomProp1_&amp;CustomProp2=_CustomProp2_" />

and expand the properties tag to specify each custom property,

<Properties>
<Property Name="CustomProp1" Type="string" RequiresDesignerPermission="true" DefaultValue="Propert1Value" 
                WebCategory="AppPart Properties"
                WebDisplayName="Custom Property 1">
</Property>
<Property Name="CustomProp2" Type="int" RequiresDesignerPermission="true" DefaultValue="1" 
                WebCategory="AppPart Properties"
                WebDisplayName="Custom Property 2">
</Property>
</Properties>      

So if you save and deploy the app, the URL and  all the query string will be the value for your iframe src 

We can able to add this client web part to any page in SharePoint by editing the page and adding the App Part that deployed in above step.

So here comes the question how we can add dynamic value to your query string and use it in your app code.

So add script editor web part to the SharePoint just below the Client web part and use the below js sample to replace the existing custom query string value with your dynamic value.

Here in this example, i'm replacing the custom property value "Propert1Value" with the current page url to the iframe src attribute

<script>
var iFramesElement = document.getElementsByTagName("iframe");
for(i = 0; i< iFramesElement .length; i++)
{
    var clientiFrame=iFramesElement [i];
    var propertyName="CustomProp1";
    if(clientiFrame.src.indexOf(propertyName) != -1)
    {             
        var propertyValue = getParameterByName(propertyName);
        if(propertyValue  != null)
        {
            clientiFrame.src=clientiFrame.src.replace(propertyValue,window.location.href);
        }
    }
}

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>

So this query string can be obtained inside the app i.e. in the app page load code.

In the same way you can pass any value to the app by using Client Web Part iFrame.

Happy SharePointing...!!!!!!!!