Loading the App ChromeControl with ShareCoffee

Loading the App ChromeControl with ShareCoffee

ShareCoffee (https://github.com/ThorstenHans/ShareCoffee) assists you as a SharePoint App Developer in various situations. Of course is the biggest benefit the unified REST layer across all different kinds of SharePoint Apps and query targets (AppWeb / HostWeb).

But there are some other nice features backed into ShareCoffee. Within this post I'll explain how to load SharePoint's ChromeControl and CSS within Cloud-Hosted-Apps. First it's important to mention that ShareCoffee does not require any other JavaScript library. It's no problem if you're using jQuery or similar libraries but you don't have to. Instead of following the MSDN and writing about 40 lines of JavaScript code to get the ChromeControl into your app, ShareCoffee exposes a single function which has to be called in order to achieve the goal. First you've to reference install ShareCoffee within your App. ShareCoffee can be consumed in various ways.

  • Install ShareCoffee by using NuGet
  • Install ShareCoffee by using bower.io
  • Install ShareCoffee by cloning the github repository

Let's assume that you're using Visual Studio in order to build your App. So the first step is to include ShareCoffee by using the NuGet Package Manager Console. Execute 

Install-Package ShareCoffee  

and all the required files will be included into your Web-Project Now you need to reference the script within your website by using a common script tag.

As you may have noticed there is a second script tag which points to my custom JS file where the chrome control will actually be loaded. Now you've to create a div container where ShareCoffee will load the ChromeControl to

Actually loading the ChromeControl will be done in ChromeSample.js

Here are only a few configurations required (IconUrl, App Title and some custom links which will appear in the ChromeControl) That's all you need to do in order to load both, SharePoint's ChromeControl and the SharePoint CSS into your SharePoint App.  


comments powered by Disqus