Tag Archives: HTML

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

How to stop using custom master pages when branding SharePoint



With the rise of Office 365 and SharePoint online, the ancient practice of using a custom master page to brand a SharePoint site is coming to an end. SharePoint online has many incremental changes, bug fixes and improvements to the Seattle master page meaning that if you have taken a copy of this Master Page to apply your branding, you could be missing out on the constant evolution of SharePoint online.

Custom Master Pages can still be used but Microsoft recommend against this now. The good news is that we can make exactly the same branding changes without having to use a custom master page.

I will briefly mention that you can create themes for SharePoint very quickly using Microsoft’s free tool which can be downloaded from here. Great for quick colour palettes and background images but not great if you want a responsive or more custom design.

Custom master pages (for branding purposes) tended to have a small number of adjustments such as:

  • Custom HTML (maybe for a menu container)
  • Links to CSS files (for responsive styling and branding)
  • Links to JavaScript files (for use of jQuery and additional libraries)

Link to custom CSS file

A link to a custom CSS file is recommended for advanced branding changes. This won’t affect any improvements to the default Seattle master page however you may need to update the CSS from time to time to reflect any interface changes. The alternative CSS link can be set via the GUI on a publishing site or by CSOM on any site.

As a designer, you will be aware that you can’t do everything in CSS such as placeholders for menus or other interactive content or run JavaScript.

Inject JavaScript

JavaScript and HTML plays a big role in most branding exercises. It could be DOM manipulation, a responsive menu, sliding effects or responsive background slideshows and JavaScript tends to be a requirement on most projects. Luckily there is some more good news, JavaScript can be added to a site without editing the Master Page by adding custom actions.

You should already be storing JavaScript in external files (in the Style Library) rather than embedding on the master page. So the only change is to inject these JavaScript files rather than reference them on the MasterPage. This can be done via CSOM (I use the PowerShell method).

#Run all of your lines to load the context of the site collection
$context.Load($site)

#add custom js injection action
$customJSAction = $site.UsercustomJSActions.Add();
$customJSAction.Location = “ScriptLink”;
#reference to JS file
$customJSAction.ScriptSrc = “~SiteCollection/Style Library/JS Display Templates/test.js”;
#load it last
$customJSAction.Sequence = 1000;
#make the changes
$customJSAction.Update();
$context.ExecuteQuery();

You can use the same objects to remove all the custom actions and list them. You can find out more information and the C# examples here.

Conclusion

Although this is a different way of thinking about branding, in the long run, it’s cleaner and more reusable than custom master pages. Your customers will have a better experience in Office 365 but even CSS and DOM manipulation may need updating as SharePoint evolves.

Some really useful examples and more detailed explanations can be found on Vesa Juvonen’s Ignite talk. In Vesa’s example he uses Visual Studio and Apps to deploy the CSS and JS.

In the video at the top of the post, I quickly go through the process of setting alternative CSS and JavaScript custom actions.

How to render display template on a list view

This blog post is a bit more technical than my previous entries. Just recently, I was required to show two different views of a list on the same page (both styled with JS Display Templates). It’s relatively straight forward when you know how to quickly get the view GUID from the web part.

JS Display template only applying to one web part

You may have seen in other posts that you can get the GUID of a view by going to the edit view page and grabbing it from the URL encoded string. However this doesn’t always work for web parts added to the page as they tend to get thier own unique “current view”.

There is a really easy and quick way of finding this GUID using an alert in your JavaScript Display Template. When you are working with the current list object, in my example below “ctx”, you can get the view GUID from this object by calling “ctx.view”. Wrap that up in an alert and the alerts will render from top to bottom on the page and display each web part view GUID.

alert(ctx.view);

Once you have the GUID, use another if statement in your code to set the base view id. Now your JavaScript only applies to that one view for the list.

if (ctx.view === "{07BC665B-0274-42D2-97BF-8EBEA8B72436}") {
	//Override the BaseViewID if it's the one we want.
	ctx.BaseViewID = 722;                
}


Client-side RSS feed viewer using JavaScript

There are plenty of server-side RSS feed viewers out there but very little in the case of client-side JavaScript based viewers. Below I will go through the steps of creating a simple JavaScript based RSS feed viewer. Please note that this will only work with RSS feeds on the same domain. JavaScript does not allow cross domain scripting. You may find ways round this by using some of the Google API.

RSS Viewer
Create HTML Container

First begin by creating a HTML div container with a unique ID.

<div id="myDiv"></div>

Make a XML HTTP Request

The following function returns the data from an RSS (XML) page. As far as I am aware there is no way to use this cross domain, so you will have to look for a server-side script to work cross domains.

function httpGet(theUrl) {
			var xmlHttp = null;
			xmlHttp = new XMLHttpRequest();
			xmlHttp.open("GET", theUrl, false);
			xmlHttp.send();
			return xmlHttp.responseXML;
		}
var rssFeedData = httpGet('http://www.tonyishere.co.uk/RSSExample/rss.xml');

Loop through the data and retrieve tags by name

Once this data has been stored in the variable as an object, we can use the “getElementsByTagName” function to pull out a particular tag (title in this case). Looping through all the tags called “title” will go through all of the XML from top to bottom. While looping through the tags, we can store the title and description in arrays to use later.

			var i=0;
			var allTitles = [];
		var allDescriptions = [];
			// loop through all of the items and put them in arrays
			while (rssFeedData.getElementsByTagName("title")[i])
			{
					allTitles[i] = rssFeedData.getElementsByTagName("title")[i];
					allDescriptions[i] = rssFeedData.getElementsByTagName("description")[i];
					flag=i;
					i=i+1;
			}

Loop through the arrays and render the data

Looking at the structure of the XML, you should be able to pick out the child nodes. In this case, each item is the first node (numbering starts from 0).

This can then be rendered as HTML and inserted into the div created earlier. In the example below I have decided to store the description and call an onclick function to show the description.

for (i=0;i<flag;i++){
				titles[i]=allTitles[i].childNodes[0].nodeValue;
				descriptions[i]=allDescriptions[i].childNodes[0].nodeValue;
				document.getElementById('myDiv').innerHTML = newHTML;
				newHTML = document.getElementById('myDiv').innerHTML;
				newHTML = newHTML + "<div class=\"titlearea\" id=\"title" + i + "\" onclick=\"showdesc('" + i + "');\">" + titles[i] +"</div><div id=\"desc" + i + "\"></div>";
				document.getElementById('myDiv').innerHTML = newHTML;
			}

Show the description

When the onclick function to display the description is run, the function below inserts the description stored in the array into the desc div. The array position was called as an argument to the function. This enables us to display the correct description in the div.

function showdesc(idc){
			var idcdesc = "desc" + idc;
			document.getElementById(idcdesc).innerHTML = descriptions[(idc-1)];
		}

Starting point for RSS feed viewer

Click on the link below to see the full code working. This is a very simple example of what can be done with RSS feeds using client-side scripting only. Hope this is of interest, please contact me on twitter for feedback and questions.

RSS Viewer Example

Design Manager in SharePoint 2013

There are a number of options available for visual designers and information architects. One of the great new features in SharePoint 2013 is the Design Manager. You can locate this by going to the settings menu and selecting “Design Manager”

Screen 1

Design Manager is a series of pages and links to take you to the design libraries similar to those found in SharePoint 2010. From welcome page you can import wsp packaged designs or pick from a pre-installed master page.

Screen 3

“Manage Device Channels” is a new feature which allows you to change the look and feel of a site based on the client’s device or browser. This is great for optimising the rendering of the page in mobile devices.

Screen 4

The “Upload Design Files” is a link to the _catalogs folder which was also used in SharePoint 2010 and MOSS to store the Master Pages. It recommends that this is mapped as a network drive.

Screen 5

“Editing Master Pages” is a link to the _catalogs folder which was also used in SharePoint 2010 and MOSS to store the Master Pages.

screen 6

“Edit Design Templates” is another new feature in SharePoint 2013. It allows customisation of the way content is displayed. This might be used to customise search results by defining fields but also presentation. More information can be found here http://msdn.microsoft.com/en-us/library/jj163942%28v=office.15%29.aspx

screen 7

“Edit Page Layouts” is another shortcut to a library which was also used in SharePoint 2010 and MOSS. It displays the page layout content types from the master page gallery.

screen 8

The page shown below reminds the designer to publish all of the files before applying the design to the site. A handy link to apply the Master Page is provided.

Create design package allows the design to be exported and used on other sites. This is really useful for taking a design from a development environment to the live site. To create this package previously would have required creating a solution or feature in Visual Studio and deploying it to the server or site collection. This is a handy tool to do this for you.

All of the features below are described in more detail on Microsoft’s site.
http://msdn.microsoft.com/en-us/library/jj163942%28v=office.15%29.aspx

While the design manager is more of a guide than somewhere an experienced designer will actually upload there designs to (SharePoint Designer will be the main tool), it does make the design process clearer and provides some neat tools for the new functionality about to be released in Microsoft SharePoint 2013.

SharePoint 2013 Design Manager

SharePoint Master Page for iPhone HTML 5 Web App

iPhone Web AppIn my last post, I showed how to create an iPhone web app using HTML5. Recently I have been working on constructing a HTML5 SharePoint Master Page that also works as an iPhone web app.
I managed to do this by downloading Randy Drisgill’s Starter Master Pages Download Here
I then removed as many tags as possible without breaking the publishing Master Page. Changed the doc type, added the meta and link tags (see previous post). This allowed me to create a HTML5 compliant SharePoint Master page which also worked as an iPhone web app. Further customisation is needed to convert the TMG/ISA login form to a mobile friendly smart phone page if you are using an authenticated SharePoint 2010 site.

Creating a HTML5 iPhone Web App!

iPhone App Icon

First create two images which will be vital in creating the iPhone web application. The first image is for the app’s icon. This is the icon you will see when you add it to your home screen. Make sure your image is 57px by 57px and save it as a JPEG or PNG file.

iPhone icon

Startup Screen

The second image is for the app’s loading screen. When the icon is selected, the app will start in full screen mode and display a loading screen while it loads the HTML page in the background. This image should be 320px wide and 460px high.
Startup Screen

HTML 5 page

HTML5 does not yet work in any desktop browser fully yet but more mobile web broswers are supporting it.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset=utf-8>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<title>tony is here iPhone web app</title>
		<link rel="stylesheet" href="html5css.css">
		<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
		<link rel="apple-touch-startup-image" href="images/tonystartup.png" />
		<!-- Prompt user to install on iphone if accessed through mobile safari -->
		<script type="text/javascript">
			if (window.navigator.standalone) {
				// fullscreen mode
			} else{
				alert('Install on iPhone by pressing Add to Home Screen')
			}
	</script>
	</head>
	<body>
		<section id="wrapper">
			<header>
				<h1>Tony Phillips SharePoint and Web Design Blog</h1>
			</header>

			<article>
				<section>
					<button type="button" name="Blog" class="css3button" onclick="parent.location='blog.html'">Blog</button>
					<button type="button" name="Linked In" class="css3button" onclick="parent.location='linkedin.html'">Linked In</button>
					<button type="button" name="Facebook" class="css3button" onclick="parent.location='facebook.html'">Facebook</button>
					<button type="button" name="Twitter" class="css3button" onclick="parent.location='twitter.html'">Twitter</button>
					<button type="button" name="Email" class="css3button" onclick="parent.location='email.html'">Email</button>
				</section>
			</article>
		</section>
	</body>
</html>

You may notice a few differences in the example above from a standard HTML page. There are two link tags to provide the iPhone with the icon and loading screen location. These are the two graphics created in the first section of this post.

<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
<link rel="apple-touch-startup-image" href="images/tonystartup.png" />

The two meta tags below scale the site to the mobile device’s screen and enable adding as a web app on the iPhone.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes">

The only new tags in this example are the section, header, article and button tags which all make it much easier to create websites in HTML5. HTML5 is worth a google!

JavaScript

You can also detect if the site is being accessed through the web browser or if it has been loaded from the home screen. If it has been opened in the browser, we can notify the user that they can add this site as a web app. All you need to do is add the following JavaScript in the HEAD section of the HTML.

// Prompt user to install on iphone if accessed through mobile safari
if (window.navigator.standalone) {
// fullscreen mode
} else{
alert('Install on iPhone by pressing Add to Home Screen')
}

Make sure you take full advantage of CSS3 when styling your site. Rounded corners and shadows look great on buttons without the need for background images or jQuery!

To see this example working go to the following URL on your iPhone and add it to your home screen. In my next post I will explain how this could also be a SharePoint MasterPage!

http://www.tonyishere.co.uk/mobile