Coding Glow #1: Reminder to Follow

Office 365 out of the box is neither intuitive or built for learning, but with some set up and direction it could be a very effective environment for online, blended and flipped models of learning. This post is number one of a series of posts I’ll me making on how to make Office 365 in Glow a little bit more friendly and usable.  I’ve gone on record as saying that “our teachers should not be Sharepoint Developers” and this series is intended for those supporting our teachers to build learning spaces in Glow.

For me a key part of Office 365 Sharepoint is the ability to Follow sites and receive updates in your Newsfeed – but you have to know to follow sites to do this.  It would be great if Sharepoint reminded you to do this but it doesn’t.

Office 365 Sharepoint has a Javascript API that allows you to write your own programs to access lots of rich data about users to customise their experience. As a “quick” project I’ve developed some code to display a one time overlay popup on a site which reminds users to follow the site. Here is a video of it working.

To add this to your own site in Glow do the following.

1. Download this zip file  with three files (in two folders) to add to your site.  
2. Unzip the folder and create two folders in you site’s Site Assets folder. These two folders should be called “script” and “image”.
3. Upload the two .js files to the script folder and the .png file to the image folder.
4. Go to you main site page and click Edit to change the page
5. From the Insert Tab, choose Web Part
6. Scroll down in Categories and click Media and Content
7. Under Parts click on Script Editor and click Add.
8. On the newly added web part, click the little black arrow on right corner to show web part menu
9. Click Edit Web Part
10. Click EDIT SNIPPET
11. Add the following code

<!– One Time Follow Site Overlay –>
<!– Charlie Love  –>
<!– load jQuerty libraries and sharepoint services –>
<Script  type=”text/javascript” src=”/SiteAssets/script/jquery-1.8.3.min.js”></Script>
<Script type=”text/javascript” src=”/SiteAssets/script/jquery.SPServices-2013.01.min.js”></Script>

<!– add div with overlay popup content –>
<div id=”FollowMessage”>
<img src=”/SiteAssets/image/curved-arrow-hi-sml2.png” style=”float:right” />Click the <strong>Follow</strong> button above to receive news and updates from this site straight to your <a href=”https://glowscotland-my.sharepoint.com/default.aspx”>Glow Newsfeed</a>.<br />
<br />Click anywhere outside this window to close it.
</div>

<Script>

//set up query for the site GUID
var context = null;
var web = null;
var isFollowedSite = null;

function getSite() {
context = new SP.ClientContext.get_current();
web = context.get_web();
context.load(web);
//use call backs on success / failure to read guid
context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod), Function.createDelegate(this, this.onFailureMethod));
}

//if the query to read the site details worked then read the object to get the site GUID
function onSuccessMethod(sender, args) {
//read the site GUID and store as unique cookie name
var sitetitle = web.get_id();
//read the value in the cookie of that name (if it exisits)
var displayFollowModal = getCookie(sitetitle);

if (displayFollowModal != ‘seen’) {
//open and display the popup window
var result = openFollowModal();
//if that worked set the cookie so that it doesn’t show again.
if (result) {
setCookie(sitetitle, ‘seen’, 28);
}
}
}

function onFaiureMethodl(sender, args) {
//if we didn’t read the GUID then don’t do anything
return false;
}

//function to read a cookie
function getCookie(cname) {
var name = cname + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length,c.length);
}
return “”;
}

//function to set the a cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = “expires=”+d.toGMTString();
document.cookie = cname + “=” + cvalue + “; ” + expires;
}

//function to display overlay
function openFollowModal() {
//get the position on the page of the follow button
var glowleft = $(‘#site_follow_button’).offset().left;
var glowtop = $(‘#site_follow_button’).offset().top;

//set up the options array with the settings to display the overlay
var options = SP.UI.$create_DialogOptions();
options.title = “Follow This Site”;
options.width = 250;
options.height = 140;
options.x = glowleft – 250; //updated to render on the right
options.y = glowtop + 50;
options.showClose = true;
options.autoSize = false;
options.html = document.getElementById(‘FollowMessage’);

//display the overlay
SP.UI.ModalDialog.showModalDialog(options);

// Find ms-dlgOverlay background so that a click outside closes overlay
var overlay = null;
var $v_1 = document.getElementsByTagName(‘div’);
for (var $v_2 = 0; $v_2 < $v_1.length; $v_2++) {
var $v_3 = $v_1[$v_2];
if ($v_3.className.indexOf(‘ms-dlgOverlay’) !== -1){
overlay = $v_3;
break;
}
}
// Set click to close when background overlay clicked
if (overlay) {
overlay.setAttribute(‘onclick’,’SP.UI.ModalDialog.commonModalDialogClose(0);’);
}

return true;
}

//wait for page to load completely then fire the modal popup from the event
$(window).load(function() {
//get the name of the site, and GUID and display the overlay
getSite();
});

9. Click Ok to keep the changes and then Save your page.

The popup will appear only on the first visit to the page (unless you clear your cookies).  The code can be added to many sites as it uses a unique cookie (based on the sites unique GUID) to record your visit.

So, that’s it – post number one. Happy hacking around in Glow Office 365!