Repository navigation
ShareCoffee.UI
ShareCoffee.UI capsulates all functionality for SharePoint UI interactions
Call showNotification if you would like to create a notification within SharePoint. showNotification validates if required SharePoint script (core.js) is loaded. If core.js is not loaded, it treats an error.
var isSticky = true;
var notificationId = ShareCoffee.UI.showNotification("My notification message" isSticky);
// isSticky defaults to false
var notificationId = ShareCoffee.UI.showNotification("My non-sticky message"); With a given notification-id you can invoke removeNotification in order to make the notification disappear directly. Again the availability of required scripts (core.js) is validated. If you don't pass a notificationId or if the given value is null or undefined, call will be ignored
// remove an existing Notification from the UI
ShareCoffee.UI.removeNotification(notificationId);SharePoint offers an API to display status-messages, compared to Notifications, Status-Messages are displayed on top of the site spreading over the given page width. They can also be shown in different colors (yellow, red and blue). If you don't pass a color, ShareCoffee defaults to blue. By using the showOnTop parameter you can define if the status should appear as first status (if more than one status is present) if the parameter is not given ShareCoffee defaults to false.
var showOnTop = true;
var color = 'red';
var statusId = ShareCoffee.UI.showStatus('Status Title', '<b>Status Content</b> <i>as HTML</i>', showOnTop, color);
var anotherStatusId = ShareCoffee.UI.showStatus('2nd Status', 'Will not be on top and will be shown in blue');After you've created a status-message it's also possible to change it's color by calling setStatusColor and passing the status-id and the color you're looking for.
If you don't pass a status-id (or null/undefined) nothing will be forwarded to SharePoint's API. If you don't pass a color it will change the color to blue.
// change the color of a given status
ShareCoffee.UI.setStatusColor(statusId, 'yellow');
// change the color of the status to blue
ShareCoffee.UI.setStatusColor(statusId, 'blue');
// or
ShareCoffee.UI.setStatusColor(statusId);You can remove an existing status by calling ShareCoffee.UI.removeStatus and pass the statusId as single parameter. Again, if you don't pass a statusId or null/undefined no call will be forwa
red to SharePoint's API.
// remove a single status from the UI
ShareCoffee.UI.removeStatus(statusId);
ShareCoffee.UI.removeStatus(anotherStatusId);It's also possible to remove all status-messages from SharePoint by using the ShareCoffee.UI.removeAllStatus method. Again the method check's if core.js is loaded.
// remove all status-messages from the UI
ShareCoffee.UI.removeAllStatus()When building Cloud-Hosted Apps for SharePoint it's important to create an UI which looks similar to SharePoint or Office 365. Therefor SharePoint is offering the possibility to reuse SharePoint's CSS. ShareCoffee wraps the entire async loading stuff into the ShareCoffee.UI.loadAppChrome method.
You can configure the SharePoint Chrome depending on your requirements by creating and passing an instance of ShareCoffee.ChromeSettings to the loadAppChrome method. In addition to the ChromeSettings you've to pass the identifier for the targeting div.
The third and last parameter is an callback that will be invoked when the chrome is loaded.
var iconUrl = 'https://www.example.com/myappicon.png';
var appChromeSettings = new ShareCoffee.ChromeSettings(iconUrl, 'My App Title',
// Settings links are displayed within the AppChrome.
// 1. Parameter = 'TargetURL'
// 2. Parameter = 'Title'
// 3. Parameter = AppendCurrentQueryString (true|false)
new ShareCoffee.SettingsLink('foo.html', 'Foo', true),
new ShareCoffee.SettingsLink('bar.html', 'Bar', true));
var onSuccess = function(){
console.log('SharePoint App Chrome and CSS loaded');
};
ShareCoffee.UI.loadAppChrome('my-chrome-placeholder-div', appChromeSettings, onSuccess);