Thursday, March 14, 2013

SharePoint2013 Provider Hosted App and Chrome Control

Scenario: How to apply SharePoint look and feel for ProviderHosted App's remote web application

Solution: You have hosted a ProviderHosted app's remote web application on a remote machine. Now to apply SharePoint branding to it:-

1. Add below script tag in the "<head>" section
<script src="Scripts/sp.ui.controls.js" type="text/javascript"></script>

2.Open the landing page/start page of the remote app web application and add a "chrome" control to *.aspx page as below, in the "<head>" or "<body>" section.

<div id="chrome_ctrl_container" data-ms-control="SP.UI.Controls.Navigation" data-ms-options='{
"appTitle" : "BasicSelfHostedApp"}'> </div> 

Now SharePoint style sheet will be available to your web application through chrome control. Add below line in *.aspx page to see it in action.

<h2 class="ms-accentText">SharePoint Site:</h2>