TIP: Tenth edition of the free DIWUG SharePoint eMagazine

DIWUG SharePoint e-Magazine #10

Download the 10th edition of the DIWUG SharePoint eMagazine now! This one has more great articles from renowned SharePoint specialists, speakers, trainers, former SharePoint product group employees and MCMs!
In this edition:

• Custom Forms in SharePoint 2013 Workflows with Visual Studio 2012 - Andrew Connell
• Pimp your SharePoint search results - Stefan Strube
• SharePoint, Yammer and the social landscape - Chris Johnson
• Protecting SharePoint 2013 with DPM 2012 - Sam Hassani
• Strategic Thinking and SharePoint - Jaap Zwart
• Custom Display Templates for the Content Search Web Part - Martin Hatch
• Optimizing SQL Server 2012 for SharePoint 2013 - Brian Alderman
• Enterprise Social Case Management, where Workflow and User Engagement meet - Marc Vanderheyden

The DIWUG SharePoint eMagazine is a free downloadable magazine with articles written by MCMs, MVPs and other authors from the SharePoint community. The target audiences are IT-pros, developers and end (power) users.

SP Javascript function getIconUrlByFileExtension

In XSL the function ‘ddwrt:MapToIcon’ would return the icon file name for the given extension, based on the mapping in the DOCICON.XML file. In SharePoint 2013 there is a similar function available in JavaScript:
Srch.U.getIconUrlByFileExtension(arg1, arg2)

This function needs an object as an input parameter. In JavaScript it is very easy to create a fake object. In the context of a display template for refiners, we just add a property called FileExtension to the object and give it the Refinement Name value of the File Extension refiner.

fakeObject = new Object();
fakeObject.FileExtension = filter.RefinementName;

For some reason not all of the standard File Extensions are recognized by this function and return the standard icon file html16.png. Therefore we are going to use the second -optional- input parameter of the JavaScript function to define what it should be in case of "if no mapping is found". We can construct the path of the standard icon files in the images folder of the server file system, or use a library in the search center site collection itself to store the custom icon files. In this case we will use the images folder.

var urlIcon = Srch.U.getIconUrlByFileExtension(fakeObject, "/_layouts/15/images/ic" + filter.RefinementName + ".gif");

To show the icon inline with the refiner value we just add an image element to the Html part of the display template.

<img class="ms-srch-item-icon ms-positionRelative" src="_#= $urlHtmlEncode(urlIcon) =#_" onError="this.src='_#= SP.Utilities.VersionUtility.getImageUrl('generaldocument.png') =#_';" />

We are able to use the ‘onError’ event of the IMG element as a safety net in case the path of an icon file doesn’t exists. We will use another JavaScript function from SharePoint to retrieve the url of the image file for a general document:
SP.Utilities.VersionUtility.getImageUrl('generaldocument.png')

In this way we are able to use the function getIconUrlByFileExtension and have two alternatives in case it would not return the proper icon file.

Select multiple FileType refiners by drag & drop in SharePoint 2013 Search Center

With the help of HTML5, CSS and Javascript I customized the search UI to make it possible to select multiple FileType refiners by drag & drop the icon I've placed in front of the Result types into a special refiner box.

Here's a sneak preview of the concept:

TIP: Ninth edition of the free DIWUG SharePoint Magazine

DIWUG SharePoint e-Magazine #9

In this edition:

• eDiscovery in SharePoint 2013 - Sander van den Hoven
• Cross-site content publishing with SharePoint 2013 - Waldek Mastykarz
• An introduction to Remote Blob Storage and SharePoint - Albert Hoitingh
• Application Lifecycle Management: an introduction for SharePoint people - Yuri Burger
• Implementing SharePoint with Change Models and Leadership Styles - Jaap Zwart
• Responsive Web Design - Servé Hermans
• What’s New in Visual Studio 2012 for SharePoint 2010 - Paul Schaeflein

The DIWUG SharePoint eMagazine is a free downloadable magazine with articles written by MCMs, MVPs and other authors from the SharePoint community. The target audiences are IT-pros, developers and end (power) users.

Passed the exam 70-480.

Today I passed the Microsoft exam 70-480 Programming in HTML5 with JavaScript and CSS3.