Building a SharePoint Provider-Hosted App for Office365 - Part Three - Branding the Provide-Hosted App.
If we build provider hosted apps the way we have, it can be more difficult to create a look and feel that extends the host web. To sort this problem out, we can use the Chrome Control.
Set Up the Chrome Control Scripts.
- Add the following file sp.ui.controls.js from
C:\Program Files\Common Files\microsoft shared\web server (Note this must be from a instance where SharePoint has been installed) to the Scripts folder in your solution explorer:
- In the Default.aspx page, insert a <script> element that links to the sp.ui.control.js file you just added to the project. Ensure the new <script> element is before the link to App.js and after the link to jQuery.
- At the start of the <body> element, insert a new <div> element with the ID chrome-controlplaceholder.
Render the Chrome Control
- In the App.js script, Add the following Code
- Depending on your project type, you might need to add an Images folder and either copy or create your AppIcon file
- The App icon dimensions should be 96 x 96 and a .png file
- You have now added the chrome control to your provider-hosted app to give your remote cloud app the SharePoint look and feel.
Run the App