Pimp your Add-in with the SharePoint Online Icon font

For a developer I’m very sensitive to good design and branding of a Web Application, Site or Add-in. My SharePoint career started as a true MasterPage / CSS wizard Winking smile. I also agree strongly with Microsofts vision on keeping the UX of the Office 365 products in line with the default branding that MS ships. When it comes to building Add-ins, a developer is very free in handling the branding of the Add-in. A good tool to keep the branding of your Add-in in line with the default Office 365 branding is making use of the Office 365 Icon font!


The Font

I first came across this when searching for vector graphics of the MS logo’s. I found this very helpful post by Stefan Bauer: http://www.n8d.at/blog/office-365-icon-font-documentation/

He made a neat little tool that instantly shows how to use this. When checking out the font I learned that this tool is not showing all the icons in the Font. So I created my own little reference site to display all the icons available:


Update: It seems that some visitors got an error saying:”Font from origin ‘http://cdn.sharepointonline.com’ has been blocked from loading by Cross-Origin Resource Sharing policy” and the font doesn’t load. I haven’t seen this myself and have no explanation for it unfortunately! I will come back here when I’ve got some more info.

How does it work?

Now why is using a font to display icons such a good tool? Webfonts are basically a collection of vector graphics that can be called using an HTML character code. You can use the HTML numeric value in HTML code or use the Hex code in CSS. To convert these values, here’s a simple tool: https://www.evotech.net/articles/testjsentities.html

You can copy/paste a symbol from my site and check the values in HTML. The CSS value is already provided.

Since HTML 5 supports these vector graphics and SVG file types and we all need to be responsive, using fonts to do this is a very easy way to get crisp icons and logo’s. This is because the size and color are very easy to manipulate with CSS. And this way your icon will always render sharp even on a very high resolution or when zoomed in! Click on the captures below to see the difference when zoomed in.

Screen Shot 2015-07-14 at 12.04.45

Icon @ 200% (Sharp)

Screen Shot 2015-07-14 at 12.05.15

Icon @ 400% (Sharp)

Screen Shot 2015-07-14 at 12.03.48

PNG @ 300% (Blurry)

Build your own!

Now what if you got some nice icons or logo’s yourself!? You can build a webfont for free on https://icomoon.io/ This awesome tool allows you to upload your custom icons (in SVG files) and configure everything your font needs like the name, CSS classes and where the character encoding starts.

Happy branding!!

Inconvenient SharePoint Online links in private Yammer groups

We love Yammer! That being said, as a company we are quite small and we are not using it as we should but we are trying to. Having a discussion on a draft document that is stored in SharePoint for instance. This is where things got tricky I’ve noticed.

SharePoint permissions

As most companies do, we have an HR site collection in SharePoint Online that is accessible to Management and HR only. Most of the times HR documents can contain highly sensitive information. Not only the contents of the document but the filename as well.

Yammer private groups

Same as HR has a private site collection, we also created a private Yammer group (not listed in the directory) where discussion is possible regarding HR business. This private group is accessible to the same users that have permission to access our SharePoint HR site collection.

SharePoint link in Yammer group

When discussing a document we’re not uploading it to Yammer but we’re collaborating in SharePoint, making the link to the document available in the Yammer private group. This is where an employee contacted us that he was able to find a document on Yammer, he shouldn’t have access to. SAY WHAT!?

Indexing ‘from the web’ objects

After contacting Microsoft support this is what we have concluded. When a link from a trusted product (like SharePoint) is added to Yammer, a page for that link is created. This page contains the metadata of the link like the location (url) and the filename. Searching in Yammer for a term that matches the filename will show this page in the results. The discussion remains hidden for users that are not in the private group and also when the user clicks the link he will get an access denied. Still the filename of a document can be highly sensitive.

In this scenario is reproduced it.


Posted MyHiddenFile in Hidden Library.


Copied the link from SP into private yammer group.


Logged in with different user without permissions I can search for MyHiddenFile in Yammer.


I can view the object page in Yammer seeing metadata of the file.


When clicking the link it gives an access denied (sorry for the Dutch).


If you are using this type of collaboration you have to beware of this. It’s not likely that people are finding these documents using a search term that matches the filename but in case of HR sometimes a name of an employee is part of the filename. That makes it more a risk when the link is posted to Yammer.

Microsoft support has acknowledged: “we have identified that this issue is a product limitation at the moment”. This means that there is only a workaround for now and that is uploading the document into the private Yammer group instead of SharePoint.

I’ve made a suggestion in the Office 365 UserVoice for improving Yammer on this. You can give your vote here: https://office365.uservoice.com/forums/284493-yammer/suggestions/8625865-hide-metadata-from-sharepoint-links-in-private-gro

Microsoft Ignite key takeaways

Great Content, Great Vibe; Ignite is here to stay

The first thing I learned from Ignite is that it wasn’t a mistake to attend to this conference. What a vibe! It’s always good to be around people with same interests and passion when it comes to technology. At first I was a bit skeptic about the integration of different Microsoft events but it turned out to be a success. The high quality sessions, well organized location (WiFi still kinda sucked but let’s call that a tradition) and for the first time I felt the Expo hall was actually a great addition to the conference. Normally this is just a platform for vendors but this time Microsoft had the biggest stands which were really good. People from the product teams where walking around every day to give information and support on a level I hadn’t experienced before. Awesome! So what are the key takeaways for me as a SharePoint / Office developer?


Self-contained Applications Cross Platform using ASP.NET

During the conference it was made clear that to drive productivity to the next level, the experience Microsoft offers should not be bound to a particular brand of device or even Operating System. This is a very bold statement if you ask me. The verge wrote an excellent article comparing its vision to Apples vision on this matter: http://www.theverge.com/2015/5/5/8550321/apple-watch-microsoft-hololens-us-future-vision-compete

A big help in getting to that experience are Self-contained Applications. We know this principle from Java for quite some time now. Basically Self-contained Applications include their own runtime and are built in a way that they’re deployable to any kind of platform. For instance using NodeJS for server operations and using AngularJS to build a Single Page Application you can create a package that is deployable to every platform that runs NodeJS. On top of that the entire application model (server – client) is written in 1 common (cross platform) language: JavaScript. These are non-Microsoft technologies but are advertised by Microsoft to leverage the new API’s Microsoft is offering in Office 365. The Office Dev team even supported this by handing out Raspberry Pi’s to stimulate development for Office on different platforms.

Finally Microsoft adopts this principle with the new ASP.NET 5. The DNX (.NET Execution Runtime) is open source now that can be found on GitHub (https://github.com/aspnet/DNX) and can run on any kind of platform. Given this fact we don’t have to run an ASP.NET MVC Application on an IIS server but we can use a Linux based server with the ASP.NET 5 runtime! Making the runtime open source gives a lot of insight in the .NET platform and is a huge leap forward for Microsoft. See a great session from Glen Condron here: http://channel9.msdn.com/events/Ignite/2015/BRK4703


Office 365 as Data Hub (ePaas)

Is SharePoint going away? Expected is that the brand name “SharePoint” is fading but the SharePoint technology is very much alive. It is the very foundation of the Next Gen Portals in Office 365. These portals are offering a way better experience for End Users but also from a developers perspective this is a huge improvement. For a while now Microsoft is unifying its API for Office 365 into one endpoint. With this endpoint developers can get all the data out of Office 365 they want. There was an example in a developer session where Rob Howard rebuilt the Video Portal by just using the Unified API in his own app running on NodeJS. In this case Office 365 is used as a Data Hub and not as a platform where we try to customize the OOB experience. When a different experience is required, we can now built it ourselves by leveraging the API. Andrew Connell describes this as ePaaS (Enterprise Platform as a Service) in this excellent post:



SharePoint 2016

Remember the SharePoint Conference in 2012? In my opinion this was quite a confusing one. Microsoft just bought Yammer and was hinting towards the Cloud first approach for SharePoint Online thereby leaving the development on the On-premises version a little bit in the open. There was a lot of speculation on if SharePoint would made it to a next On-Premises version or not. In 2014 it became clear that SharePoint 2016 will be the successor of SharePoint 2013 On-premises.

Now at Ignite, Bill Baer announced what SP2016 is going to offer us On-premises and a little hint (again) on the future. “SharePoint 2013 will be the Foundation of every future SharePoint version.” he said in a session full of SharePoint 2016 intell! Wait, does that mean we can expect a SharePoint vNext On-premises after 2016? That wasn’t confirmed but wasn’t denied either. The vision on this I think is to bring SharePoint On-premises and SharePoint Online more and more together and fade the boundaries between the two. The Hybrid scenario for instance now is part of the SharePoint Products configuration wizard with the Scenario picker. This will make it way easier for admins to configure a hybrid scenario between SharePoint On-Premises and Office 365.

Microsoft has done some outstanding work under the hood to make SharePoint 2016 “Cloud-like”. For instance they’re introducing zero-downtime patching (just like Office 365), a new server role called minRole (minimal server role to scale up fast) and again a stretch of the limits and boundaries.

On a telemetry perspective, SharePoint 2016 will introduce a complete new experience to monitor real-time usage data of the entire SharePoint Farm. Think Google Analytics interface with lots of graphs for indication. Things that are monitored for instance are 404 responses, browser / device info and latency statistics between client, server and SQL.


We need windows 10!

This was already a big factor in the Keynote. Windows 10 will give us a whole new level of user experience. With Cortana integrated in and a lot of new compliance and security features all indicates this will be the biggest release of the Windows operating system to date. A couple of features can be found here: http://windows.microsoft.com/en-us/windows-10/feature-images

Cross Device experience will be elevated to the next level with Continuum! https://www.youtube.com/watch?v=-oi1B9fjVs4 This Experience will bring mobile devices and desktop / laptop devices even closer together. This can finally leverage the mobile devices to a “work machine” instead of a “reading machine” when connecting to an external display.

From a developer perspective the thing I liked most is that Microsoft is coming with a Windows 10 Nano version that can be run from a SD card for instance on a Raspberry Pi. This move clearly indicates Microsoft is betting on the IoT (Internet of Things) world to use Windows 10 as a platform for this. There is already a preview available as part of the Windows 10 Insider program: https://ms-iot.github.io/content/GetStarted.htm

More of the new key Windows 10 features: https://www.youtube.com/watch?v=84NI5fjTfpQ



It was great to (re)connect to all my SharePoint friends worldwide and see a lot of excellent content, sessions and labs. Ignite was a great event for me and I hope to return next year! Here a some links to other sessions I saw that I think were very good.

Deep Dive into Safe SharePoint Branding in Office 365 Using Repeatable Patterns and Practices

Building Business Apps Like They Do in the Valley with AngularJS, Node.js, and More

Transforming Your SharePoint Full Trust Code to the Office App Model

MVP Panel: Sample Apps and Intelligent Solutions Showcasing Office Graph and Delve Extensibility

Developing Web and Cross Platform Mobile Apps with Azure Active Directory

Dealing with Application Lifecycle Management in Microsoft Office 365 App Development

How to setup a dev environment with Officedev/PnP using Visual Studio Code in under 15 minutes

Ok so maybe 15 minutes is a little bit ambitious, but the point of this post is to show how easy you can setup a dev environment for anyone that is interested in contributing to PnP (or any other GitHub project for that matter).

Visual Studio Code

Recently Microsoft released a preview version of Code. https://code.visualstudio.com/ Basically Code is a very slim (and free) version of Visual Studio and can be used to “Build and debug modern web and cloud applications.”. Sounds good right!? At first sight Code is not much of an editor when compared to Visual Studio of course. But since it’s free and has GIT compatibility I wanted to gave it a shot with the OfficeDev PnP Git repository to show how easy it is to contribute to the community.


Let’s set this environment up!

Before I start writing this post I already had a Github account and forked the PnP to my Company Github. This is a very easy step which is described in the first chapter of this wiki: https://github.com/OfficeDev/PnP/wiki/Setting-up-your-environment

After you have this fork in place you can close down this wiki and continue here and Download Code from https://code.visualstudio.com/ and run setup. No further questions asked it just installs. Opening Code gives us the following interface.


Advanced GIT setup

In my search for good tutorials on how to setup GIT with PnP I came across the PnP Wiki which I mentioned before, but also this post from Patrik Björklund http://blog.cognit.se/hardcore-git/ I decided to follow this last one for a good GIT setup. The next steps are coming from this post.

Download CMDer (https://github.com/bliker/cmder/releases/tag/v1.1.4.1) and Pathman (https://code.google.com/p/pathman/) and unzip in a folder of choice for tooling. Pathman is a nice piece of software with a GUI to add Path variables. CMDer is a good looking commandline tool with GIT aboard. When both tools are unzipped start Pathman and add the path to bin folder where git.exe is stored “[CMDER folder]\vendor\msysgit\bin\”


Next up you can follow step 2 of Patriks Blog http://blog.cognit.se/hardcore-git/ to setup authentication with Github. This makes it easy to stay authenticated so you don’t have to put in your credentials constantly when developing. However if you don’t want to do this you can continue here.

Get your GIT together

Ok the following step is to get all Git repositories in sync so we can start developing! Fire up CMDER and start typing the following set of commands:

First set your CMDER path to a folder on your filesystem where you want your PnP repository to land. Then type:

git clone https://github.com/YOURUSERNAME/PnP (This is the url to the Fork you made in the very first step of this post)

The clone will land in the folder “PnP” so use cd PnP to go to your new clone. Next you need to create a remote to the original OfficeDev PnP repository to retrieve latest updates when you want to.

git remote add upstream https://github.com/OfficeDev/PnP

Now we create a dev branch for development by using:

git checkout -b dev origin/dev

Now make sure that the upstream remote is fetched so we can pull it to the dev branch

git fetch upstream

In order it looks like this


The final step now is to checkout the dev branch and pull the upstream to the dev branch

git pull upstream dev

This action will fill your console with a lot of info so I’ll spare you that screenshot :). When this is done you can setup Code with this fresh Git branch.

Code and GIT

Now we have a valid dev branch on our local dev machine we can configure Code to use this folder. This way we can commit changes to our branch from Code. The only thing you have to do is Open Folder and choose you PnP GIT repository on your filesystem and start Coding!





Custom MasterPages and SharePoint Hosted Apps

We all know that Microsoft is moving away from the concept of Custom Masterpages (at least on Office 365). Chris O’Brien explains some considerations in this great blogpost http://www.sharepointnutsandbolts.com/2015/01/custom-master-pages-and-web-templates-in-office-365–thoughts.html. But say you already have this On Premises SharePoint 2013 Intranet with a nice custom MasterPage in place on a Publishing Site. When you have subsites and especially Team Sites, there is this scenario, when setting the MasterPage, you want to force the MasterPage on all subsites.

Inheritance of the MasterPage

When you stick to Publishing Sites, a new subsite will always inherit the MasterPage from its RootWeb by default. However when mixing publishing sites with a Team Site for instance, things get tricky. Because the publishing Web Feature is not activated on a Team Site, no MasterPage is inherited.



I also deployed a SharePoint Hosted App to the Root Web. Just an Hello World App to illustrate this issue.


If you activate the Publishing Web feature on the Team Site, inheritance is immediately restored. Unfortunately there is another, more harmful, way to force the MasterPage. If you go to Site-settings > MasterPage on the Root Web you can check the box “Reset all subsites to inherit this site master page setting”.


By doing this you can force the MasterPage upon all the subsites in this sitecollection. Because our subsite is a Team Site we need to set the System MasterPage as well. When I select my custom MasterPage at first sight nothing happens and everything is OK. (I only changed the SharePoint brand in the top left Suitebar into a custom text).


Oops! My Apps broke down

After I reset the MasterPage to all subsites when I open up my SharePoint Hosted App, suddenly this error appears (CustomErrors are off).


This error instantly tells us what’s wrong. By resetting the MasterPage to ALL subsites, the App Webs are updated as well, therefore introducing a reference issue because the MasterPage is now linked to the Host Web’s MasterPage instead of app.master on it’s own App Web.

Powershell to the rescue

The easiest solution is to remove the App and add it again to the site but in most cases this don’t want to do this. Especially when there is data in the App Web. Using powershell to repair the MasterUrl is the obvious solution here. The code I provide here is based on an On Premises environment. When using Office 365 you will have to write some additional code to make the connection.

Famous last words

This error occurs only in this very specific scenario and if the reset is applied for the System Master Page. When you reset all sites to use the Custom Master Page all apps will keep working. In my experience this specific scenario occurs when mixing up Publishing Sites with Team Sites. Because Team Sites don’t inherit and you can’t set a Team Sites MasterPage from the Site Settings.