BlogPost

Building a SharePoint Provider-Hosted App for Office365 - Part Three - Branding the Provide-Hosted App.

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.



Step One

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:


Step Two

  • 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.


Step Three

  • At the start of the <body> element, insert a new <div> element with the ID chrome-controlplaceholder.


Step Four

Render the Chrome Control

  • If not already created add a new JavaScript file to the scripts folder called App.js




  • Step Five

    • 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


    Step Six

    Run the App



      Click on Populate Data





    Completion