Category Archives: SharePoint Framework

Branding SharePoint using Application Customizers

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



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.

SharePoint Virtual Summit 2017

The 2017 SharePoint virtual summit took place last week. The previous year had seen a brave new bold redesign of SharePoint into a modern experience. This year we had exciting new announcements building on last year’s vision.

New OneDrive and SharePoint Sync Client

The new version of OneDrive sync client will map out the entire contents of SharePoint and OneDrive libraries without syncing them across. Documents will only be synced when requested on-demand or when a document is opened and edited.

OneDrive Files On Demand

This is great news and solves two problems faced by OneDrive users:

  • Large OneDrive/SharePoint libraries consumed large amounts of local storage syncing across
  • Possibility of errors when large numbers of files synced at once

A new unified sharing interface will be rolled out across OneDrive and SharePoint for a simpler experience. This feature will also be available in windows explorer.

SharePoint Virtual Summit

Communication portals

SharePoint released a new experience team site last year. It has now matured with developers creating third party web parts using the SharePoint Framework. Microsoft have now released a new type of site called a communication portal. This site replaces the older publishing sites used for company intranets. Although the new site is responsive out-of-the-box, we can now apply custom branding and functionality extending this into a true intranet experience.

SharePoint Communication Portal

Integration with Flow and PowerApps

These two new Office 365 apps are gaining momentum as modern replacements for SharePoint Designer Workflows and InfoPath Forms Designer.

Microsoft Flow creates workflows that can integrate with almost any product including Google Calendar, Twitter, Slack and a whole host of other services. Flow will have tighter integration with SharePoint and Flows can be created directly from list views.

PowerApps empowers users to create useful mobile friendly apps with no code for SharePoint and OneDrive. This has now been extended to integrate directly into a SharePoint page. PowerApps can now act as the custom form for SharePoint list data. This was a task previously done using InfoPath Designer or custom code.

SharePoint with PowerApps and Microsoft Flow

There was also news of a more powerful personalised search and much more. You can read the Microsoft review from Jeff Teper here.

So, it’s another exciting year ahead for the SharePoint and Office community!

New SharePoint apps for education and business

We are releasing several apps for SharePoint (on-premises and Office 365) I’ve included some information below, please feel free to drop me an email or give me a call if you want an online demonstration of the Apps. More information on the apps can be found here

Parents evening booking system

Parent evening booking SharePoint App

This app allows parents to view available days/times and book online. This app was designed to reduce the administrative time taken to book slots on behalf of parents based on their preferences.

Parent evening booking SharePoint App

Some of the features include:

  • Parents view available slots
  • Parents book online
  • Parents can make changes to the booking
  • Teachers can see who has booked to see them
  • Admins can upload session data via spreadsheet
  • Supports multiple children at the school
  • Updated several times a year as part of the subscription

Internal helpdesk

The Cloud Design Box internal helpdesk app manages all your support tickets in an easy-to-use list. Users can view and update their own tickets while the helpdesk team have access to manage all the support tickets.

Parent evening booking SharePoint App

Leave requests

Leave and holiday requests tend to create a burden on admin, managers and human resources. Streamlining requests to just a few clicks and automating the processes by sending notification emails saves everyone time.

Parent evening booking SharePoint App

Using the Cloud Design Box dashboard, employees can view all approved holidays for their team, allowing them to make an informed decision on when to request leave. Employees fill in a simple form on the site which is them emailed to their manager for approval. In just a few clicks the manager can approve or reject with some feedback.

Employee onboarding dashboard

Over the years Cloud Design Box developed several workflows and processes for new employees. When making this web part, we took the core requirements made added them to an easy-to-use interface.

Parent evening booking SharePoint App

A clean dashboard shows instantly the onboarding status and progress of each employee. Each task list assigned to individual departments can be viewed in more detail.

Parent evening booking SharePoint App

The HR department have full control over the lists so they can check the current status and chase up any outstanding tasks. Departments are alerted by email when a new employee joins and have access to update their own task list. The app is mobile friendly and can be used on any device.

KPI and appraisal tracker

This dashboard was designed to make it easier and clearer for managers to track the progress of their team. Setting a KPI is easy and the employee can view their own goals and see a graphical representation of the progress made towards meeting their targets.

Parent evening booking SharePoint App

Appraisal documentation can also be attached to the employee making appraisal meetings easy to track.
It’s been really exciting developing these new apps and dashboards. Our enthusiastic customers have helped define the core functions and we look forward to developing these further as time goes on.

Other Apps

Our other apps include:

  • PO Tracker
  • Timesheets

And can be found on the Cloud Design Box website

For more information or to arrange a demonstration please drop me an email or give me a call.

Thanks,
Tony

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.

spfx

Prerequisites

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:

spfx-slideshow01

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" />
  </div>
</div>`;

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.

spfx-slideshow02

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.

.cdbImage{width:100%;height:auto;}

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

spfx-slideshow03

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';
require('jquery-cycle');
 

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() {
    myjQuery('#spListContainer').cycle();
});
 

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

spfx

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