Tag Archives: Branding / UX

Branding and User Experience

Microsoft has added Communication sites to SharePoint Online.

These allow users to create aesthetically pleasing micro sites within a SharePoint Online tenancy.  See below;

Communication sites are a useful addition to the capabilities of SharePoint Online and make it easy for users to create a nice responsive site.

Customisation capabilities, however, are not as rich as you had with classic SharePoint publishing sites so we will be working with those for a few years yet.

The standard supplied modern web parts are ok and with effort you can write your own using the SharePoint framework.

Further reading;

https://techcommunity.microsoft.com/t5/SharePoint-Blog/Reach-your-audience-via-SharePoint-communication-sites-in-Office/ba-p/70079

https://blogs.office.com/en-us/2017/06/27/sharepoint-communication-sites-begin-rollout-to-office-365-customers/

https://support.office.com/en-us/article/Create-a-communication-site-in-SharePoint-Online-7FB44B20-A72F-4D2C-9173-FC8F59BA50EB

https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview

Share

A Few Tips for Working with SPFX Web Parts

Ok so a quick re-cap.

Microsoft are have made to the page and web part model in SharePoint – the new SharePoint Framework.

If you create a modern team site in SharePoint you will be able to create a welcome page that uses this new framework.

Creating a modern page

createpage

Adding News

Add the new headlines web part to add a news rollup.  You can add news which will automatically rollup to the news tab on the SharePoint mobile app for following sites.

addnews

Adding a Useful Rollup

This can be done using the highlighted content web part.

To make this more intuitive in this example we have created a new content type.  Intranet Subject Page.  This inherits from site page and has been added to site pages library.

Now we can add our web part and configure it to only rollup up our “Subject” pages and ignore news and landing pages.

highlightedcontent

So this web page will now (ok, when matching content has been added and search crawl has run) show all pages from the entire site collection where the content type is Intranet Subject Site Page.

Making the Modern Page Your Home Page

setwelcomepage

In Summary

We’ve just scratched the surface of what you can do with modern team sites and SPFX web parts.  The take away from this is very much;

  • Try and get some experience with the new web part model, it will become more widely used as Microsoft release the accompanying publishing page model.
  • The new model works very well in tandem with the accompanying apps – such as the SharePoint App for Mobile.
  • Check out http://www.ensentia.co.uk/free-client-side-web-parts-sharepoint-spfx/
  • This information is correct as of Q1 2017 (i.e. Microsoft is going to be improving this part of SharePoint this year).

 

Share

Example Client Side Web Parts for SharePoint (SPFX)

Ok so a quick re-cap.

Microsoft are making changes to the page and web part model in SharePoint – the new SharePoint Framework.

To take advantage you are going to have to write or obtain web parts created in this way.  Luckily the great and the good of the SharePoint Community have been quick to rise to the challenge.

You’ll find some links below.  If you wish to build these projects you will need a development environment (See this article) and some background on working with SPFX web parts (See this article).

If you want us to build any project for you then you’ll need to drop an email with the url for your resources / CDN (maybe “https://company.sharepoint.com/sites/intranet/SiteAssets/spfx40/” for a test).

SPFX 40 Fantastic Web Parts

spfx

Available from here.

https://github.com/OlivierCC/spfx-40-fantastics

 

 

Share

This article covers how to import publishing pages to SharePoint.

This can help you if you need to bulk create pages in SharePoint and you have the data stored in a database or spreadsheet or if you need to migrate pages from another content management system such as WordPress.

yourpages

Scenario

We are going to assume that you have your page data in a database.  For this example we are going to use MySQL and the WordPress schema.  As you will see in the coming steps this could just as easily be any OleDB or ODBC data source and any schema.

Import Tool

We will use the free Import for SharePoint toolset to import the pages.

You download it from here.

When you download and install the import tool you will have full documentation and additional example import configuration files which will help further.

The Source

Column

The source data must contain a column with the HTML mark-up in it.

In our example content this is called ‘PageContent’.  Inside it looks a bit like this.

Select Statement

Now from the database source we need to ‘Select’ the data that will create our pages.  Since we are working with WordPress in this example the data is in wp_posts as we see below.

This select statement is also, cleverly, giving us the destination page name and setting up the page to be automatically published.

Import Configuration File

This is the file that tells Import for SharePoint how to create the pages in SharePoint.

The schema is fully explained in the documentation but the important bits for this exercise are explained here;

DestinationItemType

So we want to create publishing pages (We could alternatively create wiki pages, modern SharePoint pages, site pages or blog posts) but lets stick to the most common (publishing pages) for now.

<DestinationItemType>PublishingPage</DestinationItemType>

PageLayoutASPXName

So if your source select statement does not have a column of this name then “ArticleLeft.aspx” will be used.  If you want to use another page layout then ensure you select statement returns a column of this name containing the name of your desired page layout.

<PageLayoutASPXName>PageLayoutASPXName</PageLayoutASPXName>

ImportMapping

This bit maps your HTML data (in the column PageContent) to the SharePoint page content (field Page Content).

<ImportMapping xsi:type=”ImportMapping_String”>
<DestinationField>Page Content</DestinationField>
<SourceColumn>PageContent</SourceColumn>
</ImportMapping>

Execution

Ok so rather than re-invent the wheel we’ll let you read the documentation installed with Import for SharePoint on this one.

Result

Ok so originally in WordPress the page looked like this.

source

And now in out of the box SharePoint it looks like this.

result

Great, but seems a bit simplistic

Ok so we have shown how to import publishing pages into SharePoint.

Realistically a project is always going to be more complicated than that.

So lets talk about real life….

Targeting Branded SharePoint

Page Layout

So the destination is likely to be branded?  That’s no problem we’ve already talked about PageLayoutASPXName and custom branded SharePoint really just means using a different page layout.

Content Type Fields

But the destination page has extra fields, like managed meta data “Tags”, a Byline, an Article Date?  Again no problem you just need more of these ImportMappings to map data from your source into those additional SharePoint fields.

<ImportMapping xsi:type=”ImportMapping_String”>
<DestinationField>Title</DestinationField>
<SourceColumn>post_title</SourceColumn>
</ImportMapping>

Data Manipulation

So what if the source data is not in the exact format that SharePoint needs?

No problem this manipulation can be done in SQL as shown below.

WordPress was never going to contain a column giving us a file name like “MyPage.Aspx” so we create one on the fly using concat here.

If (when?) your manipulations get too complex for inclusion in the SQL statement (on the fly) you can directly manipulate the source table, just make sure you take precautions if the source data is used by anything else (like working from a copy).

So what does this get used for?

We have seen this approach used for the following;

  • Legacy Content Management System (CMS) migration.
  • Bulk creation of pages from Excel
  • Scan to Mark-Up / Republishing – Loading data that has been scanned and OCR’d into pages.
  • WordPress to SharePoint Migration
  • Drupal to SharePoint Migration
  • Joomla to SharePoint Migration
  • Custom Intranet to SharePoint Migration

Great, Makes more sense now but I’m still an bit unsure

No problem just get in touch.

Share

Many organisations are using SharePoint Online.

SharePoint will very often become the intranet in such organisations.

This then raises the common compliant that the corporate brand / identity is not implemented in SharePoint.

In fact many user’s we find are confronted with the raw, out of the box, look.

ootblook

SharePoint “Branding” as a project, however, tends to raise a few eyebrows since it has a slightly unfair reputation for high cost and complexity.

Let us look at a simple way to change the look of SharePoint online.  This approach also works for SharePoint 2013 and 2016.

Firstly we will take a design cue.

Skeleton Leaves Composition on white background

 

Let us assume that this image is representative of our organisations’ brand / identity.

Now we will download and install the design tool.

https://www.microsoft.com/en-us/download/details.aspx?id=38182

In the design tool we will.

  • Change the background image.
  • Change the colour (Next to “recolor”) to the corporate deep purple.
  • Click “Recolor” to change SharePoint to tune into our new identity (We are cheating here to avoid having craft each individual colour used which is what those color slots control).
  • File > Save > MyLook.SpColor

design

Now we will go the theme gallery of SharePoint and upload the spcolor file.

You will find this located at;

/sites/sitename/_catalogs/theme/15

or

/_catalogs/theme/15

Now we can go to the site assets library and upload our leaf.

/sites/sitename/SiteAssets/Forms/AllItems.aspx

or

/SiteAssets/Forms/AllItems.aspx

Now we will manually assemble a composed look.

You will find the list under Site Settings > Web Designer Galleries > Composed looks.

newitem

Now in the composed look we will ensure that;

  • The Master Page URL points to the existing seattle.master or olso.master
  • The Theme URL is set to your new spcolor file.
  • The Image URL is set to your background image.

composedlook

Save this new composed look.

Now when change the look of the site we can select the new composed look.

changethelook

Once applied to the site it will be rendered with something like the corporate brand / identity you were looking for.

newlook

Ok great.

But what is that I hear you say?  Full branded intranet, something like the below is what you had in mind?

ContosoDemoSite

Well this all starts with that same “Composed Look”.  Why these sort of “intranets” look more “branded” is because the content and layout of the pages has been made more engaging through the use of web parts, page layouts and the such.

We normally work with our customers creative team to ensure that they best understand how to do this.

Share

Having been announced earlier this year the finer details of the SharePoint Framework are now being released.

For the uninitiated the SharePoint Framework is the latest in a line of development approaches available for creating custom experiences inside of SharePoint.  This has been problematic since the advent of SharePoint Online because Microsoft, quite understandably, do not want any custom code running on their servers.

Previous approaches to solving this issue have been compromised to an extent.  Code would either run on another server but be presented inside of an iFrame (so it appeared to be running within SharePoint) or it would run in the browser on the current SharePoint page (possibly using a script editor web part) but with a compromised means of deployment and limited access to events affecting the page.

What this equated to in terms of the user’s experience was usually slow response times and a lack of the responsiveness and interaction that modern web experiences are expected to provide.

Enter the SharePoint framework.

Microsoft have now provided and will continue to refine a framework to deploy customisation that can run as part of a SharePoint page.  Your custom scripts are called in response to page events such as render, can use Rest, JSOM to communicate with SharePoint and leverage JQuery, Office UI Fabric, React, Angular and the so on to build engaging experiences.

This opens the door for the development of interactive and responsive single page applications and custom experiences from inside SharePoint as part of your overall collaboration, intranet, document management, etc solution(s).

For further details see here.  The overview in this article provides a nice summary of how the framework is constructed and those organisations with SharePoint developers there is a good guide to setting up development environments and getting started.  If you want to deploy client side web parts you will also need to enable scripting.

This represents a significant step forward for SharePoint development.  We are actively working with our clients and partners to ensure that this approach is considered and used where appropriate to improve and future proof SharePoint based solutions.

Share

Modern document libraries are now rolling out to all Office 365 commercial customers worldwide. You can learn more about how to use modern libraries in this article, “What is a document library?” or watch the video at, https://blogs.office.com/2016/06/07/modern-document-libraries-in-sharepoint/.

The new interface is attractive and easy to use.  For the majority of SharePoint users it will be a very positive thing.  It is not, however, without it’s limitations.  These are of particular consideration for user’s heavily orientated towards document and records management.

So lets focus on the potential potholes for such customers.

Once multiple documents are selected you have limited capability to do anything nice like bulk check-in, you can only move, copy, delete.

The new quick edit function does not work well with multiple content types (it allows you to enter a data for a field which the document’s content type does not carry).

Linking through to editing a view is more complicated than before.

The way that the library interacts with the ribbon, masterpage and composed look is different so custom brands might be affected.

Sending a document to a record centre is not available because it is on the ribbon which is absent.

When you edit the properties of a document you CAN change the content type.  When you edit the properties of a folder you CANNOT change the content type.  Setting content types on folders is important in many records management / retention scenarios.

If you were using functionality change the view being used by virtue of the content type of the folder in which you were located then this is not fully observed by the new interface.

Now you can work around any of these limitations by clicking the “Return to classic SharePoint” in the bottom left hand corner but this does muddle the user experience.

You also have a certain level of control in regards to use of modern lists – See https://support.office.com/en-us/article/Differences-between-classic-and-new-experiences-for-lists-and-document-libraries-30e1aab0-a5cc-4363-b7f2-09e2ae07d4dc

In it’s current form (Summer 2016) the experience looks great for basic scenarios but for existing customers using SharePoint for document and records management should look before they leap.

Share

Working with partners and clients one thing that is often asked for is a demo of an Office 365 intranet.

Showing one for a live client can be problematic as they often contain confidential data.

Well so long as you are enrolled as a Microsoft Partner you can spin up a Contoso demo at https://demos.microsoft.com

This is available even to Network partners so enrolment requirements are not onerous.

The site gives a good idea of what SharePoint looks like with publishing enabled, is responsive and has some nice demos of display templates.

Alternatively your can request access credentials to our online, self drive SharePoint demo.

Share

If you want to rollup data in the current site collection you can use the good old content query web part and this will security trim.

If you want to rollup data from another site collection you can use the search results web part and XSLT (SharePoint 2010) or Content By Search and Display Templates (SharePoint 2013) and this will security trim.

If you want a little more precision than search provides and don’t want to or do not have the permissions to create managed properties then we can fall back on REST queries, the results of which are normally rendered using something like knockout.

You can refer to the excellent CodePlex project (https://kosp.codeplex.com/) for details of how to do this.

So what’s the problem?

If user loads you page and does not have permission to the list in the other site collection then the REST query will return a http 403 and the browser will request authentication.

Not ideal, what you probably wanted to happen is for the rollup just not to render.

So how can we work around this?

Well we can fall back to spservices.  These use the old web services of SharePoint which still work (Even in SharePoint Online and 2016) and which don’t throw a 403 if the user does not have access.

You can refer to another excellent CodePlex project (https://spservices.codeplex.com)

So how could this come together?

So how is this helping us?

  • Using SPServices means we loose a 403 if the person rendering the page does not have permission on “MyList” in “MyOtherSite”.
  • The Data Bind on Visible dependant on length greater than one will hide the rollup if the list is empty OR the user does not have permission.

Anything else?

  • For the code to work you will need the supporting libraries and JQuery – see the above referenced CodePlex projects.
  • You could add this in a content editor webpart, custom webpart or page layout.  For the latter you could wrap the function call in a <PublishingWebControls:EditModePanel runat=server id=”DisplayModeScriptPanel” PageDisplayMode=”Display”> to stop the script running in edit mode.

 

Share

In 2013 Microsoft introduced the Media Web Part / MediaFieldControl which allows most video formats to be played from within SharePoint.  It works both in SharePoint on-premises and Office 365 SharePoint / SharePoint Online and will meet the needs of many organisations who wish to provide video content within their SharePoint sites.

This article looks at how you can use what Microsoft have provided to present your video content in SharePoint.  Specifically covered are;

  • Site Structure
  • Presenting a Video on a Page
  • Making the Video and the Page Responsive
  • Video Formats
  • Older Browsers
  • Gotchas
  • Bringing it all Together

The more impatient among us can skip to the bottom of the article and download a solution package which contains a responsive page layout for video and which can be deployed to SharePoint on-premises or Office 365 / SharePoint online.

Site Structure

Hosting a few Gb of videos within a SharePoint site collection is not too much of a problem.

For those wishing to create their own YouTube! it is worth looking at site structure (i.e. separate site collections or even web applications for video) or alternative variations such as Office 365 video.

Presenting a Video on a Page

Ok so you can add the Media Web Part directly to a page in SharePoint.

But what site visitors really want is for the video to be presented to them with nice formatting and surrounding text before they even play it.  In the example below the introductory text is to the left, the video to the right and then the full article text is underneath.

VideoPage-Med

A good approach to achieve this kind of presentation is a page layout for which the body markup includes a MediaFieldControl.  Example markup is shown below.

The inclusion of a media field control means that the content author will not have to manually add a web part.  The user simply has to link in the video.  Furthermore configuration of the mediafieldcontrol can be controlled via the page layout mark-up.  Developers can adjust this mark-up and the change will reflect in all pages using the page layout.  If the content author adds web parts manually then you have to change each web part.

Assuming that you are creating your site columns via features the markup for the media control field itself is.

This field needs to be added to the “associated content type” of the page layout(s) that contain the media field control.

Making the Video and the Page Responsive

To get the video to be responsive we need to ensure that it always fits to 100% of the available area.

CSS to do this is applied and JavaScript is run to force inline styling on the video tag itself should this be required (SharePoint seems to do this when the user specifies a size).

The CSS styles the video web part.

The JavaScript is run in an edit panel. This panel only renders when the page is in display mode.  This stops the editing experience being compromised.  The script is scheduled to run when at least the SharePoint sp.js has loaded.  This scheduling ensures that the video tag is available on the page BEFORE the script runs.

The JavaScript finds and amends the video tag.  JQuery would have been a better solution to find and update the video tag but it seemed rather excessive to include the library to support just this one page layout.  If there is another reason to include JQuery this could be updated.

The page is then made responsive with a media query.

So now our video shrinks and grows and the page will respond to a narrow screen.  Below we show the page at a width considered narrow enough to stack the caption on top of the video.

VideoPage-Responsive

Video Format

From experience MP4 is the best format for cross browser and cross player compatibility (old browsers will fallback to silverlight).

The web.config for the SharePoint web application has configuration settings that control this to a certain extent.

Older Browsers

Older browsers will use Silverlight and won’t respond to the media query.  Other than this the video should play fine.  The Silverlight player doesn’t scale well to variable widths (you tend to get black borders around the video) so if you are looking at a lot of, for example, IE8 users then a fixed width approach can give more consistent results.

Silverlight will not play all the audio codecs that MP4 supports.  Test your videos with Silverlight in IE8 to be sure if that is a requirement.  If they won’t play convert them (perhaps using FFMpeg if you don’t have your own video editing software).

Gotchas

Why Chrome is Trying to Play my Video Using Silverlight?

This happens when there is no “Thumbnail” or at least SharePoint thinks there is not.  See the answer below on thumbnails.

Video Image / Thumbnail

SharePoint lets to you change the video image / thumbnail when you configure the media field control / media web part.

ChangeImage

From experience this does not work reliable in SharePoint 2013 and beyond (In SharePoint 2010 it worked well).

What the player wants to show is the thumbnail that you configured for your video when you uploaded it (or change properties on it).  See below.

ChangeThumbnail

The thumbnail you upload should be the exact same size as the video that it accompanies ie. a FHD (1920×1080) video should get a 1920×1080 thumbnail.

Deployment

To enable the page layout to be deployed to both on-premises SharePoint and Office 365 a Sandbox solution is the way to go.

UploadSolution

Once the solution is activated the page layout will be available for use in sites with publishing enabled along with the support fields and content types.

Bringing it All Together

Once you have downloaded and activated the solution you have the supporting page layout and content types.

Go to the site where you will host your video.

Upload an MP4 video.

Upload or create a thumbnail for the video.

Create a new page.

Change the page layout to Lite Brand Video 01

Marvel at your creation which should look something like the below.

VideoPage-Med

Downloads

Complete the form below to receive download links to files with support this and our other articles.

Please enter your email address

Newsletter Opt Out

 

 

Share