How to fix the AppManifest.xml Designer can not be launched in Visual Studio 2015?

I got a bunch of update with visual studio in my development machine, and I try to open AppManifest.xml in designer mode. But nothing happen.

I need to close the visual studio 2015 and go the appData of Visual Studio 2015, then clear the Cache of ComponentModelCache

C:\Users\(MyUserName)\AppData\Local\Microsoft\VisualStudio\14.0\ComponentModelCache

then reopen the project. the AppManifest.xml can be viewed in Designer Mode.

Happy Programming.

Deployed Sharepoint Add-On (former sharepoint App) to Production

when we move sharepoint Add-On to the production, we try to use the package in the QA and uploaded it to the app store in the production enviroment.

After create a page, and added the add-on via the web part on the host page. save the change, then reload the page, but web app is reference to the QA host.

we must repack the sharepoint with the live URL of the web app, so that we can have the sharepoint Add-On with corrected path to the Live Web Application.

How to fix the navigation issue in SharePoint MVC app.

when we select a MVC project template in the visual studio, it automatically generate the page navigation in the layout page. the following snipet of code will show you the systematically generated code

 <li>@Html.ActionLink("Home", "Index", "Home", null)</li>

in the Sharepoint MVC app implement, if we use the same code as above. when we click on the hyper link.
we will use this error message.



 when we exam the web url.

http://localhost/MySPMVCAppWeb/?Length=4. the SPHostUrl is missing in the url. which is root cause of the above issue.

we simply add SPHostUrl Parameter before the null parameter, will help us solve the above issue and allow user to navigate all pages with the app.

<li>@Html.ActionLink("Home", "Index", "Home", new { SPHostUrl = SharePointContext.GetSPHostUrl(HttpContext.Current.Request).AbsoluteUri }, null)</li>

How to fix the Sharepoint Provider Host App deployment Issue after create a new branch on TFS (Team Foundation Server)

After I deploy the Sharepoint Provider App to the Production Server, then I branch out a new project on the current project for continuing development.

Howerver, i deploy the app to the Sharepoint Development Server, I try to access the item in document library. I always encounter this error

clientContext.ExecuteQuery(); Access denied. You do not have permission to perform this action or access this resource.

The cause of this issue is that App still use the previous clientID, which is reference to the Previous App Web.


We should generate a new Client ID for the new branch

use the new GUID to replace the clientId in appManifest.xml of Sharepoint App Project.

 <AppPrincipal>
    <RemoteWebApplication ClientId="9bb877e4-1c73-4258-8224-924c2e75a8f0" />
  </AppPrincipal>

replace the previous clientId with new Guid ID in the web.config File in the App Web Project.

  <add key="ClientId" value="9bb877e4-1c73-4258-8224-924c2e75a8f0" />

link for SharePoint OAuth and Remote Apps in MSDN

I just found nice link that contain all kind of information for  SharePoint OAuth and Remote Apps

Tips and FAQ: OAuth and remote apps for SharePoint

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.