Tag Archives: Design

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

Collab365 Global Conference

Have you heard about the virtual Collab365 Global Conference 2017 that’s streaming online November 1st – 2nd?

Join me and 120 other speakers from around the world who will be bringing you the very latest content around SharePoint, Office 365, Flow, PowerApps, Azure, OneDrive for Business and of course the increasingly popular Microsoft Teams. The event is produced by the Collab365 Community and is entirely free to attend.

Places are limited to 5000 so be quick and register now.

During the conference I’d love you to watch my session which is called : ‘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. In this session, I will go through the SharePoint design technique changes over the years and finish with an example of the most recent SharePoint UI (modern experience). Using the new SharePoint framework, we will build a simple Application Customizer to apply a custom header and footer. This project will be built using web stack tools and libraries such as Node.js, Yeoman and Gulp.

If you join me, you will learn:

  • How to create a new application customizer
  • Using the application customizer to apply branding to modern sites
  • History of SharePoint design
  • Introduction to SASS and TypeScript

Topic(s):

  • Office365
  • SharePoint

Audience :

  • Developer

Time (in UTC) :

  • Thursday, November 2 2017 12:00 Noon

How to attend :

  1. Register here.
  2. At the time listed above go here to watch my session. (you can also add me to your own personal planner from the agenda.
  3. Be ready to take notes!

How to show SharePoint list data in a pivot table

List data inside SharePoint can be pulled into Excel as a data source which can in turn be embedded on a SharePoint page as a graphical representation of the SharePoint list data. Great way to spice up your SharePoint page with graphical content and the functionality is built into SharePoint online. It’s also available in SharePoint on-premises 2010, 2013 and 2016 if you have Office Web Apps configured or excel services enabled.

Excel graph on SharePoint page

First open excel and go to “Data” in the ribbon and “From other sources”, select “From OData Data Feed”.

import sharepoint list data to excel

Copy and paste the URL of the site adding “_vti_bin/listdata.svc” at the end.

connecting to sharepoint

Select your list when prompted and a pivot table will appear. Select a few columns to populate it with data.

Pivot chart in excel

Save the excel file and upload it into a SharePoint document library on your site.

Edit the page and add the “Excel Web Access” web part under the business data category.

adding excel web access web part to sharepoint page

In the web part properties select the excel document and optionally enter a named item such as a pivot chart or table. Your chart is now on the SharePoint page and can be configured to refresh at intervals. It’s a great way to visualise SharePoint list data easily without any third party products.

web part on page

Watch the video guide below for a more detailed explanation and guide.



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.

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 embed a Twitter widget on a SharePoint page

Many schools and businesses are using twitter as a social communication platform to send out news and information to users. How to embed twitter feeds on SharePoint intranets and public sites has been a popular question recently so thought I would share with you how it is done. I’ve also created a video guide on YouTube to talk through the process.

First login to your twitter account in a browser on a desktop computer (it doesn’t have to be the same account as the one that you want to display in your widget).

Click on your profile picture in the top right of the screen and select “Settings” from the drop down menu.

Twitter

Select “Widgets” from the left side menu.

Twitter

Create a new widget.

Twitter

Choose your design and configuration. More options are available via the customisation documentation link on the page. Click “Create Widget” to generate the code.

Twitter

Copy and paste the code into a Script Editor web part. The Script Editor web part can be found under the “Media and Content” category.

Twitter

I go through the process in more detail in the video below. Hope you find it useful. For SharePoint support and consultancy please contact me at Cloud Design Box.



Class site templates in SharePoint

As part of my work for Cloud Design Box, I have been working on class templates for student and teacher collaboration in SharePoint. My templates are using lots of display templates and are provisioned automatically from MIS data using the Salamander provisioning tools. Each template combines, out-of-the-box lists and libraries with custom content types, search web parts and JavaScript display templates. It’s available in both SharePoint on-premises and SharePoint Online. The video below goes through some of the features available for the class sites. Each class template is customised on a per school basis with a responsive design so that it will work on all devices.

For more information or an online demo, contact me by clicking here.



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

Styling SharePoint 2010 Lists using XSL

XSL (EXtensible Stylesheet Language) styles the XML output of SharePoint 2010 lists. It allows easy customisation without any server side code.

For example, this is a standard Tasks Web Part.

SharePoint 2010 Task List

After having an XSL stylesheet applied, it transforms the way the list is rendered (see below).

XSL Task List

In the example below, the template is called for each item depending what the “Status” field contains.

<xsl:for-each select="dsQueryResponse/Rows/Row[contains(@Status, 'In Progress') or contains(@Status, 'Not Started') or contains(@Status, 'Waiting on someone else')]" >
        <xsl:sort select="@Created" order="descending"/>
        <xsl:call-template name="row"/>
      </xsl:for-each>

If the status is “In Progress”, “Not Started” or “Waiting on someone else”, the template named “row” is called. Each item is sorted by the Creation date.

In the row template, the image src attribute (location of traffic light colour image) is selected using an if statement on the status field. For each status a different image is displayed.

<img>
				<xsl:attribute name="src">	
					<xsl:if test="@Status = 'Completed'">
						/Style%20Library/XSLT/green.png
					</xsl:if>
					<xsl:if test="@Status = 'In Progress'">
						Style%20Library/XSLT/amber.png
					</xsl:if>
					<xsl:if test="@Status = 'Not Started'">
						/Style%20Library/XSLT/red.png
					</xsl:if>
					<xsl:if test="@Status = 'Deferred'">
						/Style%20Library/XSLT/grey.png
					</xsl:if>
					<xsl:if test="@Status = 'Waiting on someone else'">
						/Style%20Library/XSLT/grey.png
					</xsl:if>
				</xsl:attribute>
			</img>

The complete code below with some CSS applied generates the customised Tasks list view.


<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" >
  <xsl:output method="xml" indent="yes"/>
  <xsl:template match="/">
    <div style="padding: 5px 8px 5px 5px; display:block;">
      <span class="tasksGroups">My Current Tasks:</span>
      <xsl:for-each select="dsQueryResponse/Rows/Row[contains(@Status, 'In Progress') or contains(@Status, 'Not Started') or contains(@Status, 'Waiting on someone else')]" >
        <xsl:sort select="@Created" order="descending"/>
        <xsl:call-template name="row"/>
      </xsl:for-each>
    </div>
    <div style="padding: 0px 8px 0px 0px; display:block;">
     <span class="tasksGroups"> My Completed Tasks:</span>
      <xsl:for-each select="dsQueryResponse/Rows/Row[contains(@Status, 'Deferred') or contains(@Status, 'Completed')]" >
        <xsl:sort select="@Created" order="descending"/>
        <xsl:call-template name="row"/>
      </xsl:for-each>
    </div>


  </xsl:template>
  <xsl:template name="row" match="dsQueryResponse/Rows/Row">
	<div class="TaskBox">
		<div id="infoleft">
			<img>
				<xsl:attribute name="src">	
					<xsl:if test="@Status = 'Completed'">
						/Style%20Library/XSLT/green.png
					</xsl:if>
					<xsl:if test="@Status = 'In Progress'">
						Style%20Library/XSLT/amber.png
					</xsl:if>
					<xsl:if test="@Status = 'Not Started'">
						/Style%20Library/XSLT/red.png
					</xsl:if>
					<xsl:if test="@Status = 'Deferred'">
						/Style%20Library/XSLT/grey.png
					</xsl:if>
					<xsl:if test="@Status = 'Waiting on someone else'">
						/Style%20Library/XSLT/grey.png
					</xsl:if>
				</xsl:attribute>
			</img>
			<xsl:value-of select="@Status" />
		</div>
		<div id="infomiddle">
			<span id="core-tasks-title"><xsl:value-of select="@Title" /></span><br />
			<span id="core-tasks-body"><xsl:value-of select="@Body" disable-output-escaping="yes"/></span><br />
		</div>
		<div id="inforight"><xsl:value-of select="@PercentComplete" />
		</div>
		<br style="clear:both" />
	</div>
  </xsl:template>
</xsl:stylesheet>

Using XSL and CSS provides a large opportunity to customise SharePoint frontend design of lists without any custom solutions or server side code. This technology will become more important as users move to hosted SharePoint solutions like Office 365 with limited access to server side customisation. It also allows for easier upgrades to future versions of SharePoint.