Tag Archives: Client Object Model

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

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…

Adding SharePoint Online navigation from XML using PowerShell CSOM

The following PowerShell scripts were created to enable me to deploy a custom navigation across multiple site collections. You can use managed metadata navigation as mentioned in my previous post. Unfortunately this method doesn’t allow the user to reuse managed metadata navigation across multiple site collections (no idea why, I thought that was one of the advantages of managed metadata navigation!).

So a new and clean way of doing this is to use the CSOM for PowerShell. The code below deletes every navigation node using the first function and then adds each item added to an XML file. A strength of using this method is it can be manipulated to add additional logic for adding links to particular site collections depending on the variables in the XML file. Hope you find this useful.

For SharePoint design, workflows, automation, training and support please visit my SharePoint consultancy site www.clouddesignbox.co.uk. We offer education and business SharePoint solutions and services.

Looping through all subsites in SharePoint Online

SharePoint Online requires use of the Client Object model when modifying the site via PowerShell due to there being no backend server exposed in Office 365. Users with previous experience of using JavaScript Client Object model will find this a familiar method.

In the example below, the Powershell iterates through all subsites (and subsites of subsites) in a site collection or root site. This could be used for disabling a web scoped feature or automating site modification.

First of all, the variables are initiated including the path to the relevant DLLs.

#connection variables and reference DLL
$username = "user@onmicrosoft.com"
$password = "Password123"
$SiteCollectionUrl = "https://tonyishere.sharepoint.com"
Add-Type -Path "c:\Microsoft.SharePoint.Client.dll"

A new object for the client context requires creating, this can be done in a reusable function as shown below.

# Generate ClientContext function so we can reuse
function GetClientContext($SiteCollectionUrl, $username, $password) {
     $securePassword = ConvertTo-SecureString $password -AsPlainText -Force
     $context = New-Object Microsoft.SharePoint.Client.ClientContext($SiteCollectionUrl) 
     $credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($username, $securePassword) 
     $context.Credentials = $credentials
     return $context
}

The following function has a nested call to call itself, this enables it to iterate through subsites of subsites. Without the nested function call, it would only cover a single subsite depth. The function writes the url of the site to the screen but this could be replaced with more complex functionality such as enabling a feature or creating a list item.

# function to loop through subsites
function catchsubsites ($subsiteurl){
	$clientContext = GetClientContext $subsiteurl $username $password
	$rootWeb = $clientContext.Web
	$childWebs = $rootWeb.Webs
	$clientContext.Load($rootWeb)
	$clientContext.Load($childWebs)
	$clientContext.ExecuteQuery()
	#do something on top level site
	write-host $rootWeb.url -ForegroundColor Yellow
	foreach ($childWeb in $childWebs)
	{
		#do something for each subsite
		write-host $childWeb.url -ForegroundColor Yellow
		#see if there are any subsites beneath this and loop all of them too
		catchsubsites $childWeb.url
	}
}

Finally the function is called to kick off the whole process of looping through the site.

#Finally run the function to get it all started!
catchsubsites $SiteCollectionUrl

This example could be refined so that it doesn’t authenticate at every request but it does show how simple it can be to create the complex PowerShell scripts that we are all used to using on SharePoint on-premises in the cloud version of Microsoft’s Office 365 SharePoint Online.

Update: Code updated 01/10/2016, fixed variable in loop and added section to run code for parent site

List subsites using the JavaScript client object model in SharePoint 2013

SharePoint Office 365 Site Creation JavaScript

To do this, use the script editor web part or the page viewer web part (and put the HTML file in a document library).

To start off, setup the HTML to include jQuery and sp.js (see below).

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
 //alert('loaded');
});

JQuery functions are used to populate HTML containers on the page.

&lt;div id=&quot;tonycontent&quot;&gt;
	&lt;!-- Dashboard --&gt;
	&lt;div id=&quot;tonydashboard&quot; class=&quot;tonycontenttable&quot;&gt;
	&lt;/div&gt;
&lt;/div&gt;

The first function loads the current site. The get_current function returns the current context of the user from which the subsites can be retrieved (see below).

function getSubWebs(){
	clientContext = new SP.ClientContext.get_current();
	web = clientContext.get_web();
    	webCollection = web.getSubwebsForCurrentUser(null);
    	clientContext.load(webCollection);
    	clientContext.executeQueryAsync(onGetSubwebsSuccess, onGetSubwebsFail);
}

If the query is successful it will load the onGetSubwebsSuccess function, otherwise it will run onGetSubwebsFail function.

In the success function, the webCollection variable is looped through to retrieve the URL and the title of each subsite. JQuery functions are then used to append the HTML containers.

function onGetSubwebsSuccess(sender, args){
	jQuery(&quot;#tonydashboard&quot;).empty();
	var html4 =&quot;&lt;div class='tonycontenttablerow'&gt;&lt;div class='tonycontenttabletitle'&gt;Site Name&lt;/div&gt;&lt;div class='tonycontenttabletitle'&gt;Site URL&lt;/div&gt;&lt;/div&gt;&quot;;
	jQuery(&quot;#tonydashboard&quot;).append(html4);
    var webEnumerator = webCollection.getEnumerator();	
    while (webEnumerator.moveNext()){
        var web = webEnumerator.get_current();
		var webtitle = web.get_title();
		var weburl = web.get_serverRelativeUrl();
        var html3=&quot;&lt;div class='tonycontenttablerow'&gt;&lt;div class='tonycontenttablecolumn'&gt;&quot; + webtitle + &quot;&lt;/div&gt;&lt;div class='tonycontenttablecolumn'&gt;&quot; + weburl + &quot;&lt;/div&gt;&lt;/div&gt;&quot;;
		jQuery(&quot;#tonydashboard&quot;).append(html3);
    }
}

Download the full code here

The client object model can also be used to create subsites from templates, permission sites, create lists and much more! This method works on both 365 SharePoint Online and SharePoint 2010 and SharePoint 2013 on-premises.

SharePoint 2013 JavaScript Client Object Model

JavaScript Client Object Model in SharePoint 2013

SharePoint 2013 has a new and more complete JavaScript Client Object Model API. Some of the additional functionality is using social networking.

Using the JS COM, followers can be pulled from SharePoint for the current user or a specific user. This might be used for creating a new social networking interface

My Followers

First load JQuery and the SharePoint 2013 JavaScript functions. The JavaScript functions are loaded on the page so it is just a case of waiting for specific functions to be loaded before the script will work correctly (see below):

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
	SP.SOD.executeFunc('userprofile', 'SP.UserProfiles', function () {
		tonyishereGetUserProfileProperties();
	});
});

Once the functions are loaded, the People manager object can be created. The example below was taken from the Micrsoft site and modified, this is a great resource if you are starting out with the client object model.

http://msdn.microsoft.com/en-us/library/office/jj679673.aspx

function tonyishereGetUserProfileProperties() {
    // Get the current client context.
    var clientContext = SP.ClientContext.get_current();
    // Get the PeopleManager instance.
    var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);
    // Get the people who are following the current user.
    Followers = peopleManager.getMyFollowers();
    clientContext.load(Followers);
    // Send the request to the server.
    clientContext.executeQueryAsync(displayFollowers, requestFailed)
}

Once the object has been loaded successfully, functions can be run to pull out the required data. In the example below, the data is stored in a string which is then displayed as HTML in a div using JQuery.

function displayFollowers() {
    var results = Followers.getEnumerator();
	var myFollowers = "Followers<br />";
    while (results.moveNext()) {
    var person = results.get_current();
		myFollowers = myFollowers + "<br />" + person.get_displayName();
    }
	jQuery("#MyFollowers").html(myFollowers);
}

The script was added to the page without the use of Visual Studio or SharePoint Designer 2013. The script was inserted using the Script Editor web part. This web part runs client side code such as HTML and JavaScript.

Script Editor

The same methods can be used to pull out a whole host of data from the social aspects of SharePoint 2013 including the profile picture, display name, hash tags and trending topics.

Profile web part

Using XSLT, AJAX and jQuery to improve OOTB SharePoint Lists

Using XSL can completely change the way that any standard list view is displayed. There is a great video from Laura Rogers demonstrating what can be done with the XSLT List View in SharePoint Designer here.

XSLT
You can also build your own XSL sheets and use them in the style library by linking them in the web part properties.

Here is a standard web part view of a custom list:

Here is a standard web part view with custom XSL applied:

COM, jQuery and AJAX
Calling the SharePoint Client Object model with JavaScript, we can add items to the list without refreshing the page.
Inside the web part’s AJAX settings we can set the auto refresh so the list displays the new item (again without refreshing the page).
In this example, jQuery sets a fade-in animated gif to show the item being added to the list once send has been pressed. The fade-out effect is applied to the gif once success has been returned to the JavaScript function.
Building solutions like this can create complete customisable solutions using only custom lists in a modern integrated (no refresh) style.