How to Retrieve Host Url Query String from sharepoint App?

I encounter a challenge issue today. My manager want to have a new feature in the current testing sharepoint app. he want the current app can show the record detail. It means that the app will expect a dynamic detail record ID.

Since the app had been inserted into the host page, display the content within the host page iframe section.

here is the url that the use will use to access the record detail

https://<<SharepointWebSite>>/Forms/Pages/MyHostPage.aspx?QueryID1=Value1&QueryID2=Value2&Value3=24833

After I google the web, the MSDN article provide a great help on solving this challenge task.

https://msdn.microsoft.com/en-us/library/office/fp179921.aspx


Step 1. Add New custom properties to the Properties Section in the Elements.xml file for the ClientWebPart.

<Properties>
      <Property Name="QueryID1" Type="string" DefaultValue="QueryID1Value" WebBrowsable="true" WebDisplayName="DealerID" WebDescription="" WebCategory="Basic app part category" RequiresDesignerPermission="true">
       
      </Property>
      <Property Name="QueryID2" Type="string" DefaultValue="QueryID2Value" WebBrowsable="true" WebDisplayName="DealerID" WebDescription="" WebCategory="Basic app part category" RequiresDesignerPermission="true">

      </Property>
      <Property Name="QueryID2" Type="string" DefaultValue="QueryID3Value" WebBrowsable="true" WebDisplayName="DealerID" WebDescription="" WebCategory="Basic app part category" RequiresDesignerPermission="true">
      </Property>
    </Properties>


Step 2. change the Content Type Src attribute by appending the new query string to the end in the Elements.xml file for the ClientWebPart.

 <Content Type="html" Src="~remoteAppUrl/Pages/Default.aspx?{StandardTokens}&amp;QueryID1=_QueryID1_&ampQueryID2=_QueryID2_&amp;QueryID3=_QueryID3_" />

Step 3. Create a JavaScript file to grab the host url query string value and use them to replace those property default value in the  path source of content type.

after the deployment, the embedded app will contains the following QueryString with default value replaced _QueryStringName_  in its url

&QueryID1=QueryID1Value&QueryID2=QueryID2Value&QueryID3=QueryID3Value&SenderId=MyID002

<script>
var arrFrames = document.getElementsByTagName("iframe");
for(i = 0; i< arrFrames.length; i++)
{
    var iFrame=arrFrames[i];
    var QueryID1="QueryID1Value";
    if(iFrame.src.indexOf(QueryID1) != -1)
    {
        var QueryID1Value=getQuerystring("QueryID1");
        if (QueryID1Value != null)
        {
            iFrame.src=iFrame.src.replace(QueryID1,QueryID1Value);
        }
    }
    var QueryID2="QueryID2Value";
    if(iFrame.src.indexOf(QueryID2) != -1)
    {
        var QueryID2Value=getQuerystring("QueryID2");
        if (QueryID2Value != null)
        {
            iFrame.src=iFrame.src.replace(QueryID2,QueryID2Value);
        }
    }
    var QueryID3="QueryID3Value";
    if(iFrame.src.indexOf(QueryID3) != -1)
    {
        var QueryID3Value=getQuerystring("QueryID3");
        if (QueryID3Value != null)
        {
            iFrame.src=iFrame.src.replace(QueryID3,QueryID3Value);
        }
    }
}

function getQuerystring(key)

{
    key = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
    var regex = new RegExp("[\\?&]"+key+"=([^&#]*)");
    var qs = regex.exec(window.location.href);
    if(qs == null)
        return null;
    else
        return qs[1];
}

</script>


Step 4. Deployment the modified Sharepoint App with new Version Number, so the update process can overwrite the existing app.


Step 5. Add javascript code and SharePoint app to the host page. 

 first, we must add the Script Editor Web Parts from Media and Content Categories to the host page, so that the embedded script will render to replace those default query value after the app part had been rendered




 then click on the Edit Snippet Button to open the Embed Script Editor, then copy and paste the above script to the editor, click Insert to complete the process.



 
second, we will added the app part to the host page, which stays on the top of the Script Editor Web Part.

Now the SharePoint app will able to grab the host web page query string and render them within itself.