Archive for category: Customization

Bootstrap and SharePoint Online – how to avoid css ricochet

04 Mar 2016
March 4, 2016

In my current project I had the challenge to improve the user experience for some pages without messing too much with the MasterPage (because you shouldn’t, right?). The client explicitly requested components like accordions, responsive tables and more control of the page alignments. So what would be easier to use a mobile first, responsive made by the @twitter guys? Apparently SharePoint Online does not like bootstrap too much – one you add the css files, you will see notable changes.

In this post I show you how to fix that.

Bootstrap and SharePoint OnlineBootstrap


Bootstrap (currently 3.3.6 and shortly 4.0) brings a lot of nice components that can be embedded within a standard SharePoint Page. Its not end-user friendly, an editor needs a least basic html skills to use it – but if you can use it, its fairly easy to improve the user experience. And because the twitter guys are really smart (and their css skills are way better than mine) it even works decently on mobile devices.

You can simply (that was my first attempt) add the css tag to a page:

On the basic team site landing page I found at least 5 changes:

twitter bootstrap overrides the SharePoint css

twitter bootstrap overrides the SharePoint css

  1. the heading has an increased font size and the position has changed
  2. the title of a webpart has an increased font size
  3. the paginator icon is displaced
  4. the search icon of a doclib is displaced.
  5. the full screen icon is gone

How to restrain/scope bootstrap?

At first I thought its rather easy, just change a couple of lines within bootstrap and you should be good to go. Right, that took actually longer than the good solution – I stopped and googled. I found a solution on stackoverflow from 2012 – and guess what – it still works. In order to to that you need to do the following:

  1. Install nodejs
  2. Download the twitter bootstrap source code and unzip it
  3. Open the nodejs command prompt
  4. Install grunt-cli with the following command

  5. Switch to the twitter bootstrap directory
  6. Open the bootstrap.less file in the less folder and wrap every @import with:



      Wrap everything – dont forget the closing } down below.

  7. Now switch back to the node command prompt. Change to the bootstrap directory.
  8. Run npm install to install missing packages

    1. Install missing packages with npm-install

      Install missing packages with npm-install

  9. Run grunt dist to compile your new css

    1. grunt-dist to compile your new scoped css

      grunt-dist to compile your new scoped css


  10. Et voila – then you have your perfectly scoped css in the folder dist/css:
    1. Scoped bootstrap

      Scoped bootstrap


Now you only have to upload this file to SharePoint Online (e.g. a style library) and either reference it within a Script Editor Webpart (your add it to your MasterPage if you are brave enough!). If you want to use it, you have to add the class “bootstrap” before:

add the bootstrap class in the first element or just wrap everything with a div

add the bootstrap class in the first element or just wrap everything with a div

And the you can use twitter bootstrap without jeopardizing your SharePoint Online look and feel:

twitter bootstrap without impact

twitter bootstrap without impact


The SASS way

If you want to do the same thing with the current version of bootstrap (and bootstrap 4 once its out), then you can simple download the SASS version:

Then open the _bootstrap.scss file with your favorite editor and wrap the imports with a class:

Compile the sass and check the css:

The sass approach took me like 5 minutes with VS Code – awesome.

If you have read it so far…

If you want my pre-compiled version, please take it from here (version 3.3.6, use on your own risk!).

And then leave a comment 🙂

Improving SharePoint Search Experience – #SPSBE07

18 Apr 2015
April 18, 2015

I think its my first time that I attended a search session for business users/decision makers – interesting times here at SharePoint Saturday in Belgium. Here follows a summary for “Improve SharePoint Search Experience” in my words.

Speaker was Elio Struyf (@eliostruyf) – he has some nice blog posts about search, go read them!

Elio on stage

Improve for everybody, don’t forget the novice users

There are different types of users in every enterprise, some of them are more mature with SharePoint, some do a search query with just one keyword – well, one of Elio’s key messages was that you should optimize the experience not only for the “educated” users.

Key tips

During his presentation Elio showed some nice tricks to improve the experience. Starting by enabling suggestions, optimize verticals, add and change refiners or improve the keyword search are really important parts of an optimized Search Center – default  means not optimized for your requirements, right?


neat keyword search solution

Expert users

For expert users there are plenty of options to drive adoption and create results that are important for the users – and help them tackle the information overload.

One good optimization is to enable search as you type (note: your IT admin will love you for that!) or to enrich the results with meaningful, additional metadata. For enriching you have multiple options, Elio explained Entity Extraction and Content Enrichment – both are very powerful concepts to provide better results.

Lastly Elio introduced Delve/Office Graph – the audience indicated that they know about it, but most of them don’t/can’t use them. As closing demo he showed that you can integrate Office Graph results into SharePoint results – good one, I need to keep that one in mind!


Solid session by Elio – good value for me. Its important to not forget the novice users, they can be important for your SharePoint adoption and are the “tomorrows” users of your platform. Thanks!

A to Z: Create a Display Template for SharePoint 2013 Search to visualize a property of an item/document

31 Dec 2014
December 31, 2014


Display Templates can be used in Web Parts to individualize search results (see also Introduction to Display Templates on MSDN).

In this article I will show you how a Display Template for SharePoint 2013 Search is structured, why you need them and how to customize/extend them.

Why YOU need Display Templates?

Not every search hit is equal – even a small icon helps the user to identify content more quickly than if only a monotonous mass of blue links is represented. And now that more and more content is stored in SharePoint, this is even more relevant. And integration solutions that can display many content of external system can be realized, too.

The rapid acquisition of information also plays a major role in user acceptance – if it additionally looks good and the system helps me to recognize information faster – well, search can rock – I use it daily in our own Intranet! In addition, the important content should be categorized and tagged in SharePoint – such additional work should also be visible in search results, so that the effort is also worth even more.

How is a Display Template structured?

Each display template consists of two files: a HTML version of the Display Template that you can edit in a HTML editor, and a JS file that SharePoint uses (dont touch that one!). The HTML file is structured always with the same pattern, in it is defined what property/metadata of the search hit will be shown. The HTML file can also contain JavaScript to dynamically display content or even implement business logic.

The following screenshot shows a typical SharePoint 2013 Search Center, with the 3 components that can be easily adapted: Item Display Template, Item Hover display template and the action bar.

Search Result for PowerPoint hit

Search Result for PowerPoint hit

(1) Item Display Template for a PowerPoint hit
(2) The corresponding Hover Template for PowerPoint
(3) Search Actions that can be directly started from within the search result

How can you change a Display Template?

In the following 5 steps I will show you how to customize the Display Template for PowerPoint so that an additional document property is displayed.

Step 1: Prepare List or Library

To view an additional document property, it must be available on at least one document / list item. For this simple example, I created a text column “technologie” and filled it with values:

Create a column and add at least one value!

Create a column and add at least one value!


Creation of the column is not enough, it must also be filled with at least one value

Step 2: Creating a Managed Property and full crawl

How can this additional value be used in SharePoint Search now? Automatically? Nope, unless its a site colum that you added to the list (see here). Otherwise a so-called Managed Property  must be created now. To do this, go to Site Collection Administration – in SharePoint 2010 you had to go to Central Admin and had to be a farm administrator so this is a big step forward – and there then click on Search Schema. In the tab Managed Properties create a new property:

Create a Managed Property

Create a Managed Property

In the dialog create a property with a name, here its “Technologie”. Select retrievable and add at the very end of the page a mapping. The crawled property is called ows_technologie, just add it to the mapping:

Search for the new column name


The name of the crawled property for SharePoint content is always prefixed with “ows_”

If no value is displayed, the SharePoint search has not found the new column during a crawl. If you want to speed things up (its not like you have lots of choices here), go to Central Administration and start the crawl there. Once the crawled property is displayed, add it, and save the Managed Property with OK. After this the summary page for technology should look like this:

Summary page for the new managed property


The Managed Property will be filled during the next full crawl – if you do not wanna wait, run a full crawl (again) in Central Administration.

Step 3: Customized the Display Template

Now to the actual customization of the Display Templates – the technology property is not automatically displayed. To modify a Display Template, download the display template from Master Page Gallery. For this change to the Site Collection Settings, open Master Page Gallery and then change to the folder “Display Templates” and then “Search”. This folder contains all display templates that can be used for the SharePoint search – as already described, an HTML file for editing and a JavaScript file that SharePoint generates every time the html file changes. For this example we will download the PowerPoint design template (item_PowerPoint.html) and open it with a text editor (eg. Notepad++). The content is a mixture of normal HTML format and Javascript – plus a placeholder language that can be used to display values from the search index.

In our case, just a few modifications are necessary. First adjust the title in the title tag so that we will find the display template later: SPAdvent PowerPoint item.
Then add to the html tag mso:ManagedPropertyMapping: ,’Technologie’:’Technologie’ – the coma at the beginning should not be missed. With this we tell SharePoint search that we need for this template display the value of technology and this is to be loaded with the search results.

As last step create a new line after line 38 and insert the following text:

Technologie: _#=ctx.CurrentItem.Technologie=#_

The file should look like this now:

Modifications of the Display Template

Modifications of the Display Template

With this new HTML tag, a new row is displayed in the display template – the ctx.CurrentItem.Technologie will be replaced with the value from the search index, in this example our technology value.

Now save the file under a new name (don’t modify the existing ones!) and upload it back to the design templates library – in the same folder from which we have downloaded it. Simply close the dialog with OK after uploading.

Step 4: Creating the Result Type

In order to tell SharePoint search that it should use our new Display Template for PowerPoint now, we need a new search result type. Go to the site settings and there to search result types. There we add a new one with the name SPAdvent PPT. The only condition we add is that we restrict it to type Microsoft PowerPoint. Finally, we choose the action – the result shall be represented by the SPAdvent PowerPoint display template:

New Result Type for PowerPoint hits

New Result Type for PowerPoint hits

Save it and then the search results type should look like this:

The summary page for the new result type

The summary page for the new result type

Step 5: Look at the result

So that’s it – the new Display Template is ready and will be used on the search page:

Final result with the new technologie value

Final result with the new technologie value

Although there are relatively many steps, still no “real” development or any special development languages are needed. Changes can be made quickly and easily implemented.

This simple example shows how powerful display templates can be and how quickly they can bring added value to the end user.

Further readings:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.