Tag Archives: Tony Phillips Hull

SUGUK Leeds – Branding SharePoint using Application Customizers

Note: this is an updated blog post to include reference material and demos from the SUGUK meeting in Leeds on 5th September 2017.

I’ve been a SharePoint designer now for over 10 years. By designer, I mean changing the look and feel of SharePoint. Not just adding simple themes, but making SharePoint, “not look like SharePoint”.

It’s a common request for companies and schools to have an intranet or communication portal which reflects their brand and identity. Although Microsoft have come along in leaps and bounds in this area with out-of-the-box options, it’s still a common requirement for some deeper unique branding.

The ways in which we apply design customisations have changed over the years. From MasterPages and themes to custom actions, the landscape has been ever-changing but moving slowly towards JavaScript and client-side customisation.

The most recent SharePoint UI (modern experience) gives designers the opportunity to deploy custom headers and footers to all new SharePoint pages. To make these customisations, we need to use the new SharePoint framework. Projects are built using web stack tools and libraries such as Node.js, Yeoman and Gulp. I’ve provided an overview of these on previous blog posts last year:

Getting started with the new SharePoint framework

Creating a picture library slideshow using jQuery cycle

Demos from SUGUK Leeds on 5th September 2017.

DEMO 2 – Adding HTML and CSS to the Top placeholder

Demo 2 on Github

DEMO 3 – Add Google Analytics, Get Announcements using REST, Show Date and Time, Import jQuery and jQuery Cycle 2

Demo 3 on Github

Note: This is a new video for the release candidate of SharePoint framework extensions.

In the video above, I show how design has changed over the years and I create a new Application Customizer SharePoint framework extension using TypeScript and SASS for design purposes.

It’s an exciting time to be a SharePoint designer and the quicker these extensions are released as general availability, the better! We can then start updating customisations and switching clients over to the new pages.

Microsoft Teams for education replacing Microsoft Classroom Preview

Over the last few months, we have received lots of positive feedback about the new Microsoft Classroom Preview product. Today Microsoft announced in the Office 365 message centre that this would be replaced at the end of July 2017 with Microsoft Teams for Education.

Microsoft Teams for Education

No need to panic, MS Classroom functionality will still exist but in the Microsoft Teams app (from what we can see from the screenshots). You can still set assignments, create class notebooks, discuss, share files and quizzes but it will all be accessed through the Microsoft Teams interface rather than through the MS Classroom App. There is no news on the Microsoft Classroom mobile app for iOS and Android but hopefully this will be replaced so that students can still get notifications for new assignments and grades.

More details can be found on Microsoft’s site here.

You may have seen the following message in the Office 365 message centre, notifying you of the change.

On July 31, 2017, we’ll discontinue support for the Microsoft Classroom Preview, as we work to unify our classroom experiences in Microsoft Teams in Office 365 for Education. Since the Microsoft Classroom Preview released, we’ve been very thankful for schools’ feedback from around the world; which has helped us improve benefits and features of the service. Ultimately, we learned to keep it simple and put classroom resources all in one place. We listened and we’re bringing the best of the classroom features (e.g., Assignments and OneNote Class Notebook) to Microsoft Teams in Office 365 for Education.

How does this affect me?

– Microsoft Classroom Preview will continue with current functionality until July 31, 2017. – Teachers will not be able to create new notebooks or assignments after the July 31, 2017. – Current classes and associated content will continue to be available as Office 365 Groups. Teachers can access assignment resources, files, calendars, and conversations, through tools such as Microsoft Outlook and SharePoint Online. If necessary, they can copy Class Notebook content to their personal workspace (e.g. OneDrive for Business). – When the new class experiences become available in Teams, School Data Sync will start creating the new classes for Microsoft Teams. SDS will continue to sync existing Microsoft Classroom Preview classes through July 31, 2017.

What do I need to do to prepare for this change?

We apologise for any inconvenience resulting from this transition. We encourage you to try out Microsoft Teams, and get yourself familiar with the Teams experience. Please click Additional Information to learn more.

Changing the default reply button in Outlook Web Access from “Reply all”

Your users may have noticed that the default reply button in Outlook Web Access is “Reply all”. This can result in emails accidentally being sent to the wrong person (as many users assume this is the reply button without reading it).

Reply all in OWA is default

Luckily you can change this default behaviour.

Change for an individual user

The user can change this setting themselves by going into the Mail settings.

Mail Settings

Under Mail, Automatic processing and Reply settings, the user can change the default response to “Reply”.

Reply settings

Change for all users

There is a PowerShell command which will set this for a mailbox.

Set-MailboxMessageConfiguration cloudacademy -IsReplyAllTheDefaultResponse $false

We can take this further and loop through all the mailboxes to apply this setting.

Get-Mailbox -ResultSize unlimited -Filter {(RecipientTypeDetails -eq 'UserMailbox')} | Set-MailboxMessageConfiguration -IsReplyAllTheDefaultResponse $false

Changed to reply

Hopefully you have happy users again after that change! Video guide below.

Integrating Google Calendar Data with SharePoint using Microsoft Flow

It can be time consuming to update multiple calendars. You can now setup custom flows using Microsoft Flow to copy and edit data between the two calendars.

Google Calendar to SharePoint

In the example below, I create a Microsoft Flow to detect when a new Google Calendar item is added and then create a new item in a SharePoint calendar.

First of all, open Microsoft Flow.

Microsoft Flow

Select “Create from blank” to open the flow editor

Search for the correct trigger by typing “Google” into the search box. You should see “Google Calendar – When an event is added to a calendar”. We will use this trigger to detect when a new item is added to the Google calendar.

Google Calendar trigger

When prompted, sign into your Google account and allow access to the calendar.

We are now going to add another step to the flow to add the items into our SharePoint calendar. Click “New Step” and then Add an action.

New flow step

Search for “SharePoint – Create item”, add the URL and list name. This should load up all the calendar new item fields.

Click in each field and select the output from the previous step (the google calendar data). You may wish to populate the Title, Start Time, End Time, Location and Description.

New SharePoint calendar item

Select “Create flow” when you are ready to publish the new task. It can take a few seconds for the task to run once the Google calendar item has been added. You can check the progress and status of the task from the Flow site.

There are other things to consider when setting this up such as all day events, recurrence, editing items and deleting items. However, you should be able to extend the logic in the flow to handle these data types. Below is a video guide going through the process.

Creating a simple Microsoft Flow for a SharePoint list

For anyone using the new style SharePoint lists, there is now a new action for Microsoft Flow integration. It’s a really cool product that integrates all the Office 365 products (and more) into your workflow.

SharePoint Designer workflows still have their place but the Microsoft Flow interface offers rich functionality and is easy to view and structure workflows.

One downside to using Microsoft Flow is the error messages. They come back as error messages from the REST API as headers which can be very confusing for non-technical users. SharePoint Designer errors were much clearer and easy to understand for general users.

In the video below, I go through quickly creating a Microsoft Flow from a new style SharePoint list in an Office 365 group site.

Creating a picture library slideshow using jQuery Cycle2 and the SharePoint framework

In this post, I wanted to show how you can modify the SharePoint framework Hello World web part and add other custom JavaScript libraries to create a simple slideshow.



I’m going to start my tutorial after following these steps:

Setup SharePoint Tenant
Setup your machine
HelloWorld WebPart
HelloWorld, Talking to SharePoint

Once that is all working fine, you should have something that looks like this:


Note: In the solution below, I have removed some of the HTML rendered in the SolutionNameWebPart.ts file (optional):

this.domElement.innerHTML = `
<div class="${styles.solutionName}">
  <div class="${styles.container}">
    <div id="spListContainer" />

Pull in images from SharePoint picture library

Create a picture library in your SharePoint site called “Slideshow”. Upload a couple of images into this library for testing purposes.

Inside your project, open up SolutionNameWebPart.ts (found inside your WebPart folder). Change the REST API call so that the picture library item URLs are fetched. Currently the REST query (found in the _getListData function) is pulling list and library names, change it to:

this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('slideshow')/Items?$select=EncodedAbsUrl"

This will return the picture library item URLs.

Add the EncodedAbsUrl as a string to the ISPList object:

export interface ISPList {
  Title: string;
  Id: string;
  EncodedAbsUrl: string;

In the “_renderList” function, change the item loop to this:

items.forEach((item: ISPList) => {
   html += `<img src="${item.EncodedAbsUrl}" alt="image" />`;

This will now use the EncodedAbsUrl as the image location. Running this using gulp serve should now show the images from the picture library. You may want to add in some mock data for local tests.


Making it responsive

The images are rendered at their actual size. Some CSS is required to make the images responsive. Add the class ${styles.cdbImage} to the image tag.

html += `<img src="${item.EncodedAbsUrl}" class="${styles.cdbImage}" alt="image" />`;

Open the SolutionName.module.scss file and add the following code inside the last brace.


Serve the files again and the images will now be responsive.


Adding jQuery and Cycle2

Download using Node Package Manager

When adding common JavaScript libraries to projects, Node Package Manager is an excellent tool to quickly bundle items. Run the following nodeJS package manager commands:

npm install jquery

npm install jquery-cycle-2

Two extra folders are now created under “node_modules”.

Install TypeScript definitions

In order to use these libraries in TypeScript, a definition file is required for IntelliSense and compilation. jQuery can be added via the TypeScript definition tool in the nodeJS command line:

tsd install jquery –save

jQuery Cycle2 is not available via this command line but can be downloaded from here:

Github jQuery TypeScript

Download it and add it to a new folder called jquerycycle under the “typings” folder. The typings folder contains all the TypeScript definition files. jQuery has automatically been added here. However we need to manually add the Cycle2 definition.

In the root of the typings folder, open the file named tsd.d.ts. This file controls all the definitions which are used in the project. jQuery has already been added, manually add a new line for jQuery Cycle2.

/// <reference path="jquery/jquery.d.ts" />
/// <reference path="jquerycycle/jquery.cycle.d.ts" />

Add libraries to project

Open the config.json file (under the config folder) in the project. This lists all the external references. jQuery and Cycle2 need to be added here so they can be used in the project. In the “externals” section, add:

 "jquery": "node_modules/jquery/dist/jquery.js",
 "jquery-cycle": "node_modules/jquery-cycle-2/src/jquery.cycle.all.js"

The libraries can now be included in the project. Go back to the solutionNameWebPart.ts file and add:

import * as myjQuery from 'jquery';

The object myjQuery should be a unique name for your project to avoid conflicts. jQuery cycle is added using require as it has a dependency on jQuery.

At the end of the _renderList function in the web part class, add the following code to initialise the slideshow:

myjQuery( document ).ready(function() {

Refreshing the page, should now give you a responsive slideshow.


Creating a new SharePoint framework project using NodeJS

It’s finally been released as a preview! Please note that backwards compatibility will not be supported so don’t start any production work yet, this is for testing and feedback only!

It can be downloaded from GitHub now, I go through the process below but the official instructions are here (and really straightforward): https://github.com/SharePoint/sp-dev-docs/wiki/Setup-your-machine

Getting familiar with the new environment

It takes some practice and learning to understand how the node package manager works along with Gulp and Yeoman. It can be a steep learning curve but there are some great Angular tutorials to help get familiar with the setup and technologies.

Error messages and path limitations

Even creating a new project can generate a large amount of errors. It’s important to get familiar with these errors and how to resolve them.

One important item to consider when creating a new project is the project path. The project folder structure can get very large and reach the limit allowed on windows machines. Try creating all the projects in a short path such as “C:\dev” to avoid hitting that limitation when generating projects.

Node Package Manager

Before starting, install NodeJS.

Install Yeoman and Gulp

All the other pre-requisites are installed via the NodeJS command line. It is very easy to add frameworks and components using this method.

Yeoman is a generator which will gather all the frameworks required and pull them down into the project. It is marketed as a scaffolding tool for modern WebApps. SharePoint has a Yeoman generator, this creates the project and downloads any dependencies.

Gulp is a JavaScript task runner. It provides a workflow to build, compile and optimise libraries and stylesheets. It also refreshes the browser as changes are made. Gulp will load the SharePoint workbench and refresh any changes made to the code live.

Yeoman and Gulp are installed from the NodeJS command line using the following line:

npm i -g yo gulp

Install the Yeoman SharePoint generator

The Yeoman generator for SharePoint is very similar to the old Visual Studio templates. Download the Microsoft SharePoint generator using the following line:

npm i -g @microsoft/generator-sharepoint

Creating a new project

Open up the NodeJS command line and navigate to your project folder (remember to keep the path short). Run the following line to create the new SharePoint web part project template:

yo @microsoft/sharepoint

Follow the instructions for entering the project details. Errors may appear on the screen which will need to be resolved at some point. This process takes around 20 to 30 minutes.

Running the SharePoint workbench

Test the new project template by running this command:

gulp serve

SharePoint workbench

The SharePoint workbench runs locally (so there isn’t a dependency to have a SharePoint farm or tenancy setup in the development environment).

Editing the code

Any text editor can be used to make changes to the code but it’s worth looking at Visual Studio Code. It is free!

These open source solutions are platform dependant so these projects don’t have to be created on a windows PC.

More resources

There are some detailed blog posts on all of the items skimmed above. Please read them and get up to speed with NodeJS before diving straight in with SharePoint.

Stefan Bauer’s blog posts on NodeJS and the SharePoint Framework
Chris O’Brien’s SharePoint Framework blog posts
Setup your environment
Official Microsoft starter tutorials

Gaining access to OneDrives within your organisation

Below I have created a quick guide to show you how to gain access to a user’s OneDrive within your organisation. This video is for SharePoint administrators and you will need to be at least a SharePoint admin in Office 365 to carry out these steps.

A OneDrive site is effectively a SharePoint site collection with a document library. When a OneDrive is created by the user in Office 365, it grants the user site collection admin rights. It doesn’t add any other administrators or groups to the permissions. You can do this manually using the steps shown in the video below or you could create a script to apply permissions to all of your OneDrive sites using the PowerShell Client Object Model.