Category Archives: GruntJS

Creating a choice field in SPFx

When using the SharePoint Framework (SPFx), we can use spHttpClient to manage our REST calls. Creating new fields (columns) in lists is like using jQuery ajax methods, first we feed in the body of our call in JSON format.

const spOpts: ISPHttpClientOptions = {
      body: "{'Title': 'Group', 'FieldTypeKind':2,'Required':false, 'EnforceUniqueValues': 'false','StaticName': 'Group'}"
    };

Then we create the REST call and receive the response.

this.context.spHttpClient.post(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/GetByTitle('List Name')/Fields`, SPHttpClient.configurations.v1, spOpts)
      .then((response: SPHttpClientResponse) => {
        console.log(`Status code: ${response.status}`);
        console.log(`Status text: ${response.statusText}`);
        response.json().then((responseJSON: JSON) => {
          console.log(responseJSON);
        });
      });

However, we get an error when trying to create a choice column using the following body:


      body: "'Title': 'Behaviour', 'FieldTypeKind':6,'Required':true, 'EnforceUniqueValues': 'false', 'StaticName': 'Behaviour', Choices: ['Choice1', 'Choice2', 'Choice3'] }"

Error: “The property ‘Choices’ does not exist on type ‘SP.Field’. Make sure to only use property names that are defined by the type.”

To resolve this issue, we need to add the data type to the request, we structure the JSON in a different way (compared to jQuery ajax calls). This is the JSON required to create a choice column:

body: {'@odata.type': 'SP.FieldChoice','Title': 'Behaviour', 'FieldTypeKind':6,'Required':true, 'EnforceUniqueValues': 'false', 'StaticName': 'Behaviour', Choices: ['Choice1', 'Choice2', 'Choice3'] }

Hope someone finds this useful and saves you a lot of time!

Promoted Links Web Part for Modern Pages

Promoted Links Web Part for Modern SharePoint Pages

This web part replicates the classic Promoted Links Web Part but with added features such as web part properties to change the background colour, size of background image and to select which promoted link list to use. You can download it here.

For more information on the full Cloud Design Box learning platform for modern SharePoint or custom workflows and design, Contact us via the website.

If you are interested in developing web parts using the new SharePoint Framework, this web part is a good example of:

  • loading jQuery from CDN
  • adding third party modules
  • making REST calls
  • configuring web part properties

You can find the complete source code in my GitHub repository at https://github.com/CloudDesignBox/cdb-promoted-links.

As soon as I get chance, I will create some additional blog posts on how this web part was created, breaking down the different task lists.

While I work on that, please feel free to download the code and have a play yourselves!

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.

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

Issues with the new SharePoint interface for document and picture libraries

Let’s start with the positive aspects of this new interface. It’s responsive and integrates really well into the OneDrive app for mobile devices. However there are currently a number of setbacks for users when switching to the new look interface. Users should consider it carefully before turning the new interface on at tenancy level or on a per user basis.

New Document and Picture Library

No JS Link property

Microsoft have mentioned that there is still some functionality to roll out, however they have not been specific about what that will include. A large number of businesses use JS Link to highlight data in a list or library and to add some custom actions at the item level. This is done using the Microsoft best practices of using client side JavaScript, however we are still awaiting this functionality in the new interface. New features are being added to the new interface such as content types and custom columns so we can only hope that this will also be added before the full implementation of the new interface in 2017.

No JS actions to brand the interface

A while ago I blogged about using JS instead of custom master pages to brand the look and feel. Again this is client side code and was Microsoft best practice, however this doesn’t seem to apply to the new view. The new look interface despite being modern and minimalist is bland and unbranded. Most companies/schools want branded intranets, they are always keen to get away from the “SharePoint” look. Although the new interface is modern and responsive, all of the pages look the same and it is possible that we will fall into the trap of looking like SharePoint again. Theming engines do not offer the bespoke customisation that most users require. The future of SharePoint event and videos did mention a chrome as part of the SharePoint framework so we can only hope that this is exposed to JS developers.

No image link in picture libraries

On occasions users require a link to a document or image inside a library. This used to be easy for users to do, open it up and copy the URL. This is no longer possible for an image library as each image opens up in a lightbox view. There are no options to get a link to the exact image, in fact there is an option called “get a link” but this shares the image and changes the permissions rather than giving a URL link (for users to use on a site or email).

These are the initial issues I have found with the new look interface. It seems to be have been rushed out to tenancies without investigation into how customers use library views within SharePoint. Although there is a benefit having a similar interface to OneDrive and having it work as a single page application, the fact that it is part of a SharePoint site and has that extra SharePoint functionality makes it usable to end users. The new views will run side by side until 2017, hopefully by then Microsoft will have resolved the issues and released the new SharePoint framework for Microsoft partners (due to go live in autumn 2016) to get developing branding and custom JS solutions.

UPDATE: 08/07/2016

Microsoft have released this update confirming that there is still functionality to be added to the new user experience. Looks very positive for JS links and other missing functionality: http://dev.office.com/blogs/update-on-modern-document-libraries-and-extensiblity

The future of SharePoint

The future of SharePoint event took place last night live from San Francisco. It was a live online event open to all which was watched by thousands of SharePoint fans across the globe. Microsoft renewed its commitment to SharePoint and the SharePoint brand by announcing the renaming of the sites tile in Office 365 to SharePoint and the release of a new SharePoint mobile app.

SP2016mobileteamsite

It was a very exciting glimpse into the future of SharePoint (both on-premises and online). A completely new revamped UI for team and publishing sites and a slick editing experience. One of the flaws with the current SharePoint experience is the inheritance of older SharePoint site templates and libraries which has only incrementally improved over time. Frustratingly this has left users with a poor mobile experience and a clunky, more complex editing process. Even the current SharePoint 2013 mobile site looks more like an ancient WAP site designed for a Nokia 7110. Below is a sneak peak as to what the new team site may look like. Above is a preview of the new SharePoint app.

SP2016teamsite

New document library experience

This has already rolled out to some tenancies. It gives a fresh look to document libraries which puts them in-line with the OneDrive experience and the SharePoint mobile view. The classic view will still be supported if you are using JS client side rendering, workflows or specific custom views. One downside to the new experience is the loss of any branding, however you could add document libraries to pages if you wanted to keep this. Users can pin files to the top of the page and get really nice previews of documents. Administrators can override end users to choose either the classic or new view of document libraries (see details here).

Design and development

The new improvements in the interface mean not only a fully responsive design but also a mobile app experience on iOS, Android and Windows. SharePoint is also moving away from the iframe app part model allowing more fluid and responsive web parts. For designers and developers there is now a new SharePoint framework (to be released later this year) which doesn’t depend on Visual Studio or any server-side development. Using JavaScript open source libraries we will soon be able to create design experiences which apply to both the browser and mobile apps.

There was several indications that design was moving this way over the last few years. Check out my earlier posts on moving from custom master pages to JS actions and client side rendering. Using these client side technologies was the first step in preparing ourselves for the new client side rendering experience for the next generation of SharePoint portals. I’m very excited to get stuck into the new SharePoint framework technologies (please release it soon Microsoft!). If you can’t wait to get started, you can start by learning the new technologies which will be used to develop against the SharePoint framework such as nodejs, Yeoman, Gruntjs and all the open source JavaScript frameworks which interest you. There is a good post on how to get hold of all these applications and packages on this blog post by Stefan Bauer. You can also view the full development lifecycle processes that Microsoft recommend in their latest video previewing the new framework below.



Microsoft Flow

Microsoft Flow is a new tool in the SharePoint toolbox. It’s a new way to get data into SharePoint and perform workflows using custom logic. It doesn’t replace InfoPath or SharePoint Designer but I can see many uses for it in a business process environment and sales. It extends workflow functionality out of SharePoint using templates or custom written apps. For examples you can have a flow which picks up tweets from Twitter and puts them into a SharePoint list. Very interesting to see how this product develops with SharePoint. You can find out more on the flow website.

Microsoft PowerApps

Create your own mobile apps in a few simple steps from lists and libraries in SharePoint without having to write any code. This could be a mobile app or just a web app. In fact you can do this from the browser from any list in a few simple steps. This could be a SharePoint list view or a web part. The PowerApps will be available from within the SharePoint app. I’m assuming you will be able to pin these apps to your start screen like you can with OneNote notebooks and pages. You can find out more about Power Apps on the website.

More updates to come…