Murad's search blog

Using jQuery and jqplot in your display template to show a piechart refiner

Murad Sæter — Fri, 01 Mar 2013 09:11:00 GMT

With the display templates in SharePoint 2013 being built in html and javascript you can easily re-use exisiting javascript frameworks like jQuery.

The jquery plugin called jqplot is one of many charting plugins available. It is more or less randomly chosen and the technique shown in this post can be re-used with many other plugins available.

Using the piechart available in jqplot can make your refiner look like below:

The display templates used for refiners are located in the master page gallery, in folder “Filters” in the “Display Templates” folder. For more information about display templates, have a look a Steve Peschka’s article Using Query Rules, Result Types and Display Templates for a Custom Search Sales Report in SharePoint 2013.

On your enterprise search site, go to Site Settings –> Master pages and page layouts. Go to the “Display Templates” folder, then “Filters”. The easiest way to edit files is to click on the “Library” tab, then “Open with Explorer”

To create a new display template make a copy of “Filter_Default.html”, and renamed it to “Filter_PieChart.html”.

Prior to editing the file, you can uploaded a couple of dependencies. I’ve put jquery-1.7.2.js as well a my own script “Filter_PieChart_script.js” (attached) into the folder. You also need copy the entire jqplot folder (as a sub folder) into the Filters folder. Download jquery and jqplot from http://www.jquery.com and http://www.jqplot.com.

Now, on to editing the file.

First thing to change is the title tag. The title tag is used in the refiner configuration when chosing the refiner display template you want to use.

<title>Refinement Item PieChart</title>

I’m leaving all the other properties of the file. Now, on to the interesting part – how to include other scripts in a display template.

There is a number of techniques:

Use the $includeScript function in a <script>-tag
Use SharePoint Script On Demand (SP.SOD) in a <script>-tag
Add the scripts to the master page

I’m using a combination of the two first options. The difference between the two functions is that $includeScript loads the script asynchronously as fast a possible, but there is no guarrantee that the script is loaded. It’s suitable for small scripts like my Filter_PieChart_Script.js which is only used to set up jqplot.

For larger scripts like jquery and jqplot the SharePoint Script On Demand functions are more suitable. With SP.SOD it is possible ensure that a script is loaded before you try to start using it. It is also possible register dependencies between the scripts to make sure scripts are loaded in the correct order.

The code snippet below is from the modified Filter_PieChart.html where a <script>-tag has been added.

<body>

    <script>
 
         $includeScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Filters/Filter_PieChart_Script.js");
         SP.SOD.registerSod('jquery-1.7.2.js', this.L_Menu_BaseUrl + "/_catalogs/masterpage/Display Templates/Search/jquery-1.7.2.js"); 
         SP.SOD.registerSod('jquery.jqplot.js', this.L_Menu_BaseUrl + "/_catalogs/masterpage/Display Templates/Filters/jqplot/jquery.jqplot.js"); 
         SP.SOD.registerSod('jqplot.pierenderer.js', this.L_Menu_BaseUrl + "/_catalogs/masterpage/Display Templates/Filters/jqplot/plugins/jqplot.pieRenderer.js"); 
         SP.SOD.registerSodDep('jquery.jqplot.js', 'jquery-1.7.2.js');
         SP.SOD.registerSodDep('jqplot.pieRenderer.js','jquery.jqplot.js');
         $includeCSS(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Filters/jqplot/jquery.jqplot.css");
</script>

The custom script Filter_PieChart_Script.js is loaded with $includeScript, in addition to jquery, jqplot and the pierenderer which are loaded in the correct order with SP.SOD.

The last function used in $includeCSS which can be used to load additional CSS.

Now, go far down in the file and find

<div id='Container'>

This is the actual part that displays the normal refiner action links. There is lots of other code in this template. Mostly of it is used to do result site merging of common file types. PPT, PPX, PPS etc are combined into the PowerPoint type. The same for other file types. This part is nice to, so just jump down to the Container-div tag.

Delete everything inside this tag. I’ve modified it look like this:

 var pieChartId = ctx.RefinementControl.containerId + "_pieChart";

 var pieHeight = 240 + ((listData.length-1)*20);

_#-->

        <div id='Container'>

            _#= Srch.U.collapsibleRefinerTitle(ctx.RefinementControl.propertyName, ctx.ClientControl.get_id(), refinerCatTitle, iconClass) =#_

            <div id="_#= pieChartId =#_" style="height: _#= pieHeight =#_px; width: 180px;"></div>

        </div>

        <!--#_

 $addRenderContextCallback(ctx, "OnPostRender", function(){

 SP.SOD.executeFunc("jqplot.pierenderer.js", null, function() {

 SetupPieChartFilter(pieChartId, listData) 

 });

 }); 

 }

 }

_#-->

I’ve added a couple of variables, pieChartId and pieHeight. The pieChartId will later be used to create a div tag, and also handed to jqplot to tell it where to draw the pieChart. The pieHeight is calculated dynamicly since the legend is under the pie chart the size will vary depending on the number if items in the refiner.

The only html added is the div-tag with the pieChartId. After the html comes the intresting part. The function $addRenderContextCallback is run after the filter is rendered. We’ll run our code inside here, since we then now that everything is rendered. The code uses the SP.SOD.executeFunc to make sure jqplot is loaded. The it calls my custom function SetupPieChartFilter which uses jqplot functions to draw a pie chart based on the listData in the refiner (script attached).

Once the html is saved SP2013 will generate a Filter_PieChart.js which will be used by the browser. Now the only thing you need to do is to configure the refiner web part to use the new display template:

Edit the page
Edit the Refinement webpart
In the Refinement settings, click “Choose Refiners…”
Select the FileType chose your new Display Template “Refinement Item PieChart”¨

Click OK, Apply etc, and you should be all set!

Download the display template (you still need to download jquery/jqplot)

Download the full Visual Studio solution which will deploy a SharePoint feature with the display template (jquery and jqplot are downloaded from cdn.jsdelivr.net)

WSP file

Using jQuery UI autocomplete with the REST API to get search results in the search box

Murad Sæter — Wed, 20 Feb 2013 08:50:18 GMT

SharePoint 2013 comes with a beautiful REST API that supports both search and suggestions. In this post I’ll show how to easily integrate search results into the search box to quickly show the users the results they want.

The example shows normal search results, but it could easily be changed to show e.g. products from a product search demo like Contoso Electronics.

The REST API in SharePoint 2013 can easily be integrated using javascript, as the returns can be returned as JSON.

I start with a very simple html page, which includes jQuery and jQueryUI from the jquery CDN.

        1: <html>

       2: <head>

       3: <title>REST demo</title>

       4: <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />

       5: <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery.ui.autocomplete.css" />

       6: <script src="http://code.jquery.com/jquery-1.8.3.js"></script>   1:     2: <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js">   1: </script>   2: <script type="text/javascript" src="restSearch.js"></script>

       7: </head>

       8: <body>

       9: <table>

      10:    <tbody>

      11:       <tr>

      12:          <td>REST Search:</td>

      13:          <td>

      14:             <div id="menu-container" style="width:600px">

      15:                 <input type="text" id="restSearch" size="50"/>

      16:             </div>

      17:          </td>

      18:      </tr>

      19:    </tbody>

      20: </table>

      21: </body>

      22: </html>

The input-box with ID restSearch will be referenced later in my script restSearch.js, as well as the div tag with ID menu-container.

The script restSearch.js uses ajax to do a search against the REST API:

       1: // Parse an item and create an title/value dictionary with all the properties available

       2: function getFields(results) {

       3:     r = {};

       4:     for(var i = 0; i<results.length; i++) {

       5:         if(results[i] != undefined && results[i].Key != undefined) {

       6:             r[results[i].Key] = results[i].Value;

       7:         }

       8:     }

       9:     return r;

}

  

$(document).ready(function() {

    

    var autocomplete = $( "#restSearch" ).autocomplete({

        minLength: 3,

        source: function( request, response ) {

            $.ajax({

                beforeSend: function (request)

                {

                    request.setRequestHeader("Accept", "application/json;odata=verbose;charset=utf-8");

                },

                url: "/_api/search/query?querytext='" + request.term + "*'",

                dataType: "json",

                success: function( data ) {

                    response( $.map( data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results, function( item ) {

                        return {

                            fields: getFields(item.Cells.results)

                        }

                    }));

                },

                error: function( data ) {

                    alert('search error');

                }

            });

        },

        // Run this when the item is in focused (not selected)

        focus: function( event, ui ) {

            //$( "#restSearch" ).val(ui.item.value );

            return false;

        },

        // Run this when the item is selected

        select: function( event, ui ) {

            location.href = ui.item.fields.Path;

        },

        appendTo: $('#menu-container')

    }).data( "uiAutocomplete" )._renderItem = function( ul, item ) {

        // format the documents using the OOTB SharePoint icons

        img = "ic" + item.fields.FileType + ".png";

        if(item.fields.FileType == "html") {

            img = "html16.png";

        }

        return $("<li>").append('<a><img style="margin-right:3px;top:3px;" src="/_layouts/15/images/'+ img +'">' + item.fields.Title + '</a>' )

            .appendTo( ul );

    };

});

This is more or less out of the box jQueryUI-autocomplete magic. The first function getFields parses the JSON result item in to a key/value dictionary which makes all the managed properties easily available. The $.ajax function executes the query against the REST API and gets a result set in JSON back.There is a select function that will redirect the user direct to the result when selecting a hit. At the end there is some custom formatting of the autocomplete entries to show the document format icon in the list.

It ends up looking like this:

I’veattached the script file, just put them somewhere on your SharePoint and it will work fine.

Building PDF search preview in SharePoint 2013

Murad Sæter — Fri, 02 Nov 2012 13:30:00 GMT

The new Office Web Apps 2013 integrates very nicely with SharePoint 2013, both when viewing/editing office content as well as with the search preview of the documents. One very common format that is not supported is PDF, and in this article I will build my own WOPI App that supports PDFs by using a simple C# Wrapper for Ghostscript written by Matthew Ephraim.

I read Wictor Wilén’s blog series about Building your own WOPI Client and I got really inspired. It is highly recommended that you read Wictor’s blog series prior to continuing with the PDF previewer, since I will re-use most of the code from Wictor’s blog.

The discovery.xml, which describes the WOPI App (client) should hosted on /hosting/discovery in your APP, looks like this:

 1: <?xml version="1.0" encoding="utf-8"?> 2: <wopi-discovery> 3:   <net-zone name="internal-http"> 4:     <app name="GhostscriptPDF" 5:          favIconUrl="http://spmurads:8888/images/pdf.ico" 6:          checkLicense="false"> 7:       <action name="view" 8:               ext="pdf" 9:               default="true" 10:               urlsrc="http://spmurads:8888/viewer.aspx?&lt;theme=THEME_ID&amp;&gt;" /> 11:       <action name="interactivepreview" 12:         ext="pdf" 13:         default="false" 14:         urlsrc="http://spmurads:8888/viewer.aspx?&lt;ui=UI_LLCC&amp;&gt;&lt;rs=DC_LLCC&amp;&gt;&amp;previewmode=true" /> 15:     </app> 16:   </net-zone> 17:   <proof-key oldvalue="" value="BgIAAA…." />18: </wopi-discovery>

Note that the proof-key has been removed, so you need to generate your own. See Wictor’s article for the details there. My web app is hosted on my server called http://spmurads:8888 (yes it works on other ports than 80), which I just created on my SharePoint server.

Once http://spmurads:8888/hosting/discovery return the discovery.xml above, the add WOPI App can be added to my SharePoint server using powershell:

New-SPWOPIBinding -ServerName spmurads:8888 –AllowHTTP

To host discovery.xml on /hosting/discovery you need to add discovery.xml as a defaultDocument in your web.config:

<configuration>

    <system.web>

      <compilation debug="true" targetFramework="4.5" />

      <httpRuntime targetFramework="4.5" />

      <customErrors mode="Off"/>

    </system.web>

    <system.webServer>

    <defaultDocument enabled="true">

      <files>

        <add value="discovery.xml"/>

      </files>

    </defaultDocument>

  </system.webServer>

  <location path="hosting/discovery">

    <system.web>

      <authorization>

        <allow users ="*" />

      </authorization>

    </system.web>

  </location>

  <location path="hosting/discovery/discovery.xml">

    <system.web>

      <authorization>

        <allow users ="*" />

      </authorization>

    </system.web>

  </location>

</configuration>

I’ve also made sure the document is available for anonymous users.

Now to the viewer code. There is lots of magic around getting the file from the WOPI Server (SharePoint). This is explained very well in Wictor’s blog series, so it will not be repeated here. However I found that an additional step (in part 2) needs to be done to get it to work with the RTM version of SharePoint.

$config = (Get-SPSecurityTokenServiceConfig)

$config.AllowOAuthOverHttp = $true

$config.Update()

I have modified Wictor’s viewer.aspx.cs to run GhostScript and create jpg previews and show the images to the user. It does some simple caching of the generated files, as well giving read access to the current user. The image files are written to the local \inetpub directory (my server on port 8888) which then easily can be shown to the user.

namespace Microsoft.GhostWOPI

{

    public partial class viewer : System.Web.UI.Page

    {

        protected string images = "";

        protected string metadata = "";

        protected string origdoc = "";

        protected bool previewMode = false;

  

        protected void Page_Load(object sender, EventArgs e)

        {

            string src = Request.QueryString["WOPISrc"];

  

            // Used in preview mode (search result)

            string preview = Request.QueryString["previewmode"];

            

            previewMode = !String.IsNullOrEmpty(preview);

  

            if (!String.IsNullOrEmpty(src))

            {

                string access_token = Request.Form["access_token"];

                string access_token_ttl = Request.Form["access_token_ttl"];

               // Get the metadata

                string url = String.Format("{0}", src);

  

                string meta = "";

                using (WOPIWebClient client =

                     new WOPIWebClient(url, access_token, access_token_ttl))

                {

                    meta = client.DownloadString(url);

                }

                JsonTextReader jr = new JsonTextReader(new StringReader(meta));

  

                // Parse meta data

                string version = "";

                string propertyName = "";

                string userId = "";

                while (jr.Read())

                {

                    if (jr.TokenType.ToString().Equals("PropertyName"))

                        propertyName = (string)jr.Value;

  

                    if (jr.TokenType.ToString().Equals("String"))

                    {

                        if (propertyName.Equals("Version"))

                        {

                            version = HttpUtility.UrlDecode(jr.Value.ToString());

                        }

                        else if (propertyName.Equals("UserId"))

                        {

                            userId = jr.Value.ToString();

                        }

                        else if (propertyName.Equals("ClientUrl"))

                        {

                            origdoc = jr.Value.ToString();

                        }

                    }

                }

                // Get the DOMAIN\user

                userId = userId.Split('|')[1];

                // Get the content

                url = String.Format("{0}/contents", src);

  

                // create a unique filename 

                string fileName = version;

  

                // create filenames based with only legal characters

                string dirName = src.Replace("http://", "");

                fileName = fileName.Replace("\\", "_").Replace("/", "_").Replace(":", "_").Replace(".", "_").Replace("&", "_").Replace("{", "_").Replace("}", "_").Replace("\"", "_").Replace(",", "_");

                dirName = dirName.Replace("\\", "_").Replace("/", "_").Replace(":", "_").Replace(".", "_").Replace("&", "_").Replace("{", "_").Replace("}", "_").Replace("\"", "_").Replace(",", "_");

                string cacheDir = "C:\\inetpub\\ghostwopi\\cache\\" + dirName + "\\";

  

                // create directory

                if (!System.IO.Directory.Exists(cacheDir))

                {

                    System.IO.Directory.CreateDirectory(cacheDir);

                }

                // make sure the user has read access

                AddFileSecurity(cacheDir, userId, FileSystemRights.Read, AccessControlType.Allow);

  

                string pdfName = cacheDir + fileName + ".pdf";

  

                // Download the PDF from SharePoint and cache it locally

                if(!File.Exists(pdfName)) {

                    using (WOPIWebClient client =

                        new WOPIWebClient(url, access_token, access_token_ttl))

                    {

                        byte[] data = client.DownloadData(url);

                        File.WriteAllBytes(pdfName, data);

                    }

                }

  

                // Call GhostScript to generate jpg previews

                if(!File.Exists(cacheDir + fileName + ".001.jpg")) {

                    GhostscriptWrapper.GeneratePageThumbs(pdfName, cacheDir + fileName + ".%03d.jpg", 1, 300, 100, 100);

                }

  

                FileInfo[] files = (new DirectoryInfo(cacheDir)).GetFiles("*.jpg");

  

                // Create simple HTML

                for(int i=0;i<files.Length; i++) {

                    // make sure the user has read access

                    AddFileSecurity(files[i].FullName, userId, FileSystemRights.Read, AccessControlType.Allow);

  

                    if (!previewMode)

                    {

                        images += "<img border=\"1\" src=\"http://spmurads:8888/cache/" + dirName + "/" + files[i].Name + "\"><hr>\n";

                    }

                    else

                    {

                        images += "<img border=\"1\" width=\"510\" src=\"http://spmurads:8888/cache/" + dirName + "/" + files[i].Name + "\"><hr>\n";

                    }

                }

            }

        }

There are references to WOPIWebClient which you can get from Wictor’s blog, Ghostscript wrapper and Json.Net (get it from NuGet). Note that I modified the Ghostscript wrapper to use the gsdll64.dll instead of the gs32dll.dll to make it work more easily with my IIS.

The actual viewer.aspx are modifed to show the images:

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <%
 if(!previewMode) { 
%>

        <div style="position:fixed; top:0; background:#cccccc; width:100%; color:white;margin:3px; font-family:'Segoe UI', Calibri;">&nbsp;PDF Preview <a href="<%=origdoc%>">Open PDF</a></div>

        <%
 } 
%>

        <%
=metadata 
%>

       <%
=images 
%>

    </div>

    </form>

</body>

</html>

When done, go into your Search center and create a new result type for PDFs that uses the Word Item display template.

It will give a search result like this:

If you click on a PDF in a document library it will open in a full screen PDF previewer like this:

That’s it. Clicking the search result doesn’t work (since I’ve just used the Word Item templates and my WOPI App doesn’t support edit). I’ve left modifying the display template to fit properly as an exercise for the reader

If you read the original blog series you should get this working. If you didn’t go do it now (to make more sense of this )

If you have any questions don’t hesitate to contact me.

Utilizing Web Apps 2010 to get PowerPoint search document previews of SharePoint 2010 content in SharePoint 2013 search

Murad Sæter — Thu, 11 Oct 2012 09:03:00 GMT

With the new SharePoint 2013 (preview) and Office Web Apps (OWA) there are beautiful previews of PowerPoint (and Word) documents. The requirement is that the documents are stored in SharePoint 2013 as well. There are rumors that you should get previews of content stored in SharePoint 2010, but until now I haven’t seen this happen. The reason has to do with oauth and the fact that SharePoint 2010 doesn’t support that. Someone will probably solve it at some point, but until then I’ll show you how to use the SP2010 OWA to show previews for SP2010 powerpoints.

To do this you need to familiar with the Display Templates in SP2013. Steve Peschka has written some good articles about this in his blog.

I’ll start by explaining how SP2010 implements previews:

During crawling, the crawler detects if a document has a preview available, and populates the managed property ServerRedirectedURL. Fortunately, it does exactly the same in SP2013.
If the ServerRedirectedURL managed property is available during result rendering, a JSONP call against a the wacproxy.ashx will be performed. The wacproxy.ash returns a list of thumbnails which can be showed to the user.

So, now we can simply do the same with SP2013. I’ll do this in the existing PowerPoint display templates.

Item thumbnail

The Item_PowerPoint.html (you find all the Display Templates under Site Settings –> Master pages and page layouts) is used by all ppt’s, regardless of where they are stored. As it turns out, SP2013 content has a couple of more managed properties called ServerRedirectedPreviewURL and ServerRedirectedEmbedURL which means we can differentiate the content types without creating another Result type for SP2010 content.

In the file I add the following to detect SP2010 ppts:

if(!$isNull(ctx.CurrentItem.ServerRedirectedPreviewURL)) 

{ 

    // SP2013 

    ctx.CurrentItem.csr_PreviewImage = ctx.CurrentItem.ServerRedirectedPreviewURL; 

    ctx.CurrentItem.csr_PathLength = Srch.U.pathTruncationLengthWithPreview; 

} else if(!Srch.U.n(ctx.CurrentItem.ServerRedirectedURL) && Srch.U.n(ctx.CurrentItem.ServerRedirectedEmbedURL)) { 

    // SP2010

For the item view in the main result set we only show a small thumbnail. To make sure the rest of the page has finished rendered prior to we start our work, we utilize a function to add a callback that is run post rendering of the page. The method called “AddPostRenderCallback”. The post render function is run after all results has been rendered, so we don’t have access to the current result unless we store it:

 1: var currentItem = ctx.CurrentItem;

Then we add the post render function:

AddPostRenderCallback(ctx, function() { 

    // wac proxy url 

    var MobilePresentation = currentItem.SiteName + '/_vti_bin/wacproxy.ashx?redirect=' + encodeURIComponent(currentItem.ServerRedirectedURL) + '&spsite=' + encodeURIComponent(currentItem.SiteName) + '&docType=pptx&callbackFunctionName=?'; 

    var func = "parent.window.ThumbnailCallbackFn_" + id + "= function(images) { processImageThumbnail('"+id+"', images); }"; 

    eval(func); 

    

    jq.ajax({ 

          dataType: 'jsonp', 

          url: MobilePresentation, 

          jsonpCallback: 'ThumbnailCallbackFn_' + id, 

          success: function (data) { 

          }, 

        error: function(data) { 

        }  

    }); 

 });

In the code we create the wacproxy URL based on ServerRedirectedURL. We create a delegate function will be called by the JSONP callback. The delegate function call the processImageThumbnail which does actual rendering of the thumbnail into the page:

function processImageThumbnail(id, images) { 

¨    // the default width is 320px, we want' 100px 

    var tmp=images.replace(/width\=320/g,'width=100'); 

    tmp=tmp.replace(/height\=240/g,"height=56"); 

    var a = eval('('+tmp+')')['images']; 

    var thumbnail=a[0]; 

    

    var previewHtml = String.format('<div id="{0}_item_itemPreview" class="custom-srch-item-previewContainer"><a href="{1}" class="ms-srch-item-previewLink" target="_blank"><img class="ms-srch-item-preview" src="{2}" alt="{3}"/></a></div>', 

                    id, currentItem.ServerRedirectedURL, thumbnail, "Open in New Window");

  

    // Current description needs to be narrow 

    jq('#'+id+'_item_itemBody').addClass("ms-srch-item-summaryPreview"); 

    // Add thumbnail 

    jq('#'+id+'_item_itemBody').after(previewHtml); 

}

The html is very similar to how it looks when a SP2013 thumbnail is shown, by reusing most of the CSS classes.

Hover Panel

When it comes to the hover panel is very similar. We change the Item_PowerPoint_HoverPanel.html by adding a section that handles SP2010.

First some code to display the black loading box:

<div class="ms-srch-hover-viewerContainer" style="height:400px;" id="sp2010viewer__#= id =#_"> 

    <div class="sp2010" style="height:400px;background-color:black;color:white;font-family: Segoe UI Light, Segoe UI,Segoe,Tahoma,Helvetica,Arial,sans-serif;font-size:2.5em;"><br/>PowerPoint Web App 2010<br/><br/>Working on it!<br/><br/></div> 

</div> 

It looks like this:

The rest of the code is very similar to the normal item, expect for the HTML generated.

I’m not explaining it here, this is an exercise for the reader. Or download the attached code.

The full result looks like this:

Installing the sample code

The zip file contains

Code fragments which should be inserted into Item_PowerPoint.html and Item_PowerPoint_HoverPanel.html
screen.css (modifed from the ootb easyslider css)

The zip does NOT contain the follow required files.

Jquery
EasySlider1.7.js
prt.png from Office Web Apps 2013

Install it:

Edit Item_PowerPoint.html, and insert the contents of Item_PowerPoint_code.txt at line 36 (delete the })
Edit Item_PowerPoint_HovelPanel.html, and insert the contents of Item_PowerPoint_HoverPanel_code.txt at line 49 (delete the })
Upload screen.css to Pages folder of your search site (same folder as results.aspx)
Download easyslider1.7.js and place in the same folder.
Download jquery.1.7.2.js and place in the same folder (or use a CDN)
Get prt.png from your Office Web Apps 2013 server and place in the same folder. On your OWA you can get file from /p/PptResources/1033/prt.png">http://<server>/p/PptResources/1033/prt.png
Make sure all files are commited and published.
Add a Script Editor webpart on your search page, and add the following code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
  
<script type="text/javascript">
var jq = jQuery.noConflict();
</script>
  
<script type="text/javascript" src="easySlider1.7.js">
</script>

<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />

This will load jquery and the easyslider javascript. Jquery cannot be used with the dollar ($), since this already is used internally in the display templates. In this sample jquery is therefore defined as jq.

Download the ZIP file

That should be it. Enjoy!

Details of the automatic spelling suggestions in FAST Search for SharePoint 2010

Murad Sæter — Fri, 24 Aug 2012 10:39:00 GMT

It’s been a well known fact that you cannot change the automatic spelling suggestions you get with FAST Search for SharePoint 2010. Either you go with the out of the box dictionaries, or you get it automatically aligned with your crawled content. As it turns out, this is possible after all!

After I found the article from support (How to utilize the spelltuner to add or boost terms for spellchecking), I wanted to understand all the details of the spelltuning. So here it goes.

Normal process:

The document processor TermExtractor extracts the terms and writes them to a file in $FASTSEARCH\data\termextractor. The file name will be %PORT%_%HOSTNAME%.out.gz. The files contain one line per term, on the format <lang> <term> <frequency>
Every 10^th batch (configurable for debugging purposes in $FASTSEARCH\etc\processors\TermExtractor.xml) the document processor will upload the terms to the resource store. (stored in $FASTSEARCH\components\resourcestore\dictionaries\spelltuner)
The spelltuner runs as a continuous process in the node controller. Every 60 minutes it downloads the files the document processor has uploaded to the resource store.
Every 24 hours the spelltuner will generate a new dictionary (one per language) and uploaded to the resource store. (stored in $FASTSEARCH\components\resourcestore\dictionaries\spellcheck)
If there were any changes to one or more dictionaries the spelltuner will notify the qrserver, and it will reload the dictionary.

Custom tuning:

To inject your own words into a dictionary, create your own gzipped file on the format <lang> <term> <frequency> and store it in $FASTSEARCH\components\resourcestore\dictionaries\spelltuner.

Spelltuner parameters:

The spelltuner runs with some preconfigured parameters which might need to be changed. The most interesting one for small indexes is the --wordcount-threshold which by default is 100000. This means that a minimum of 100000 words is required for a language in order to trigger spell tuning. For a small index this parameter might need to be set as low as 1000. The parameter can be changed in NodeConf.xml. However, since changing this file is not supported (and might be overwritten in an update), an alternative would be to stop the spelltuner (nctrl stop spelltuner) and run it manually or in a scheduled task.

DISCLAIMER: This information was extracted by myself after digging into an FS4SP installation and the existing documentation. It is not official documentation of any sort.

No Code secure search with FAST Search for SharePoint 2010

Murad Sæter — Thu, 03 May 2012 13:17:00 GMT

Introduction

Implementing secure database search on the item level with FastSearch for SharePoint 2010 (FS4SP) has been a somewhat confusing journey for me.

At the start I had some questions:

Can I use BCS?
Must I write .NET assembly connector?
Can I use FAST’s jdbcconnector?

The short answer is yes, no and yes. The long answer will follow below.

Secure search

To support secure search at the item level each document will have to be associated with an ACL, describing who has access to the document. At query time the user's group memberships will be looked up against Active Directory and added to the query to match against the ACLs stored in the index. This way only documents the user has access to will be shown in the search result. Out the box, FS4SP will only support Active Directory as the user directory.

Enabling secure search on database content is therefore only a matter of adding a security descriptor to each row, describing who should be able to read this row. This sounds easy enough, but the question is still; what should this ACL look like, and how do I put it on the correct place in my index.

Using BCS

As an example I've used the AdventureWorksDW database and the table DimProduct. The table has been altered to include a column named SecurityDescriptor of type varbinary(MAX). I started with SharePoint Designer (SPD) and created my simple model with ReadList and ReadItem methods. This model was exported from SPD to a BDCM (XML) file. The model doesn’t include any information about where to fetch the security descriptor, it is however described on various places on the internet how to enable security on the item level in the model. MSDN has one example. Note that you only need to update the SpecificFinder method, no BinarySecurityDescriptorAccessor is needed.

I'll recap the steps below, but please check MSDN for the correct placement in your bdcm (or see the attached example):

1. Add a new TypeDescriptor in the SpecificFinder, this will read a bytearray from the column named SecurityDescriptor:

<TypeDescriptor TypeName="System.Byte[], mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" IsCollection="true" Name="SecurityDescriptor">
 <TypeDescriptors>
 <TypeDescriptor TypeName="System.Byte" Name="SecurityDescriptorElement" />
 </TypeDescriptors>
</TypeDescriptor>

2. Add a reference to the the SecurityDescriptor in the property WindowsSecurityDescriptorField (still on SpecificFinder)

<MethodInstance Type="SpecificFinder" ReturnParameterName="DimProductRead Item" ReturnTypeDescriptorPath="DimProductRead Item[0]" Default="true" Name="DimProductRead Item" DefaultDisplayName="Read Item AdventureWorksDW">
  <Properties>
 <Property Name="WindowsSecurityDescriptorField" Type="System.String">SecurityDescriptor</Property>
 </Properties>

3. Make sure to remove the UseClientCachingForSearch

<Property Name="UseClientCachingForSearch" Type="System.String"></Property>

4. Also make sure you have "ShowInSearchUI" (should already be there)

Now, import your model using Central Admin, and once you have your SecurityDescriptors in place you should be ready to crawl.

Creating the ACL

Finding the correct format of the Security Descriptor (ACL) and how to store it in SQL server was the most difficult part digging out. The Security Descriptor should be stored in binary format in the column referenced in the BDC model. On MSDN there is a C# code snippet that retrieves a sample windows Security Descriptor for a specific user/group in binary as a byte array. I've extended the snippet to update my SecurityDescriptor column (I’m using the same ACL for all rows):

static void Main(string[] args)
{
    Program sdl = new Program();
    byte[] b = sdl.GetSecurityDescriptor("Contoso", "SearchUsers");

    SqlConnection cn = new SqlConnection();
    cn.ConnectionString = "Data Source=demo2010a;Integrated Security=True";
    cn.Open();

    SqlCommand cmd = new SqlCommand("UPDATE [AdventureWorksDW].[dbo].[DimProduct] SET [SecurityDescriptor] = @SecurityDescriptor", cn);
    cmd.Parameters.Add("@SecurityDescriptor", System.Data.SqlDbType.VarBinary);
    cmd.Parameters["@SecurityDescriptor"].Value = b;

    cmd.ExecuteNonQuery();

    cn.Close();

    Console.WriteLine(b.ToString());
}

private Byte[] GetSecurityDescriptor(string domain, string username)
{
    NTAccount acc = new NTAccount(domain, username);
    SecurityIdentifier sid = (SecurityIdentifier)acc.Translate(typeof(SecurityIdentifier));
    CommonSecurityDescriptor sd = new CommonSecurityDescriptor(false, false, ControlFlags.None, sid, null, null, null);
    sd.SetDiscretionaryAclProtection(true, false);    //Deny access to all users.   
    SecurityIdentifier everyone = new SecurityIdentifier(WellKnownSidType.WorldSid, null);
    sd.DiscretionaryAcl.RemoveAccess(AccessControlType.Allow, everyone, unchecked((int)0xffffffffL), InheritanceFlags.None, PropagationFlags.None);
    //Grant full access to a specified user.   
    sd.DiscretionaryAcl.AddAccess(AccessControlType.Allow, sid, unchecked((int)0xffffffffL), InheritanceFlags.None, PropagationFlags.None);

    Console.WriteLine(sd.GetSddlForm(AccessControlSections.All));

    byte[] secDes = new Byte[sd.BinaryLength];
    sd.GetBinaryForm(secDes, 0); 
    return secDes;
}

Once you've run the code snippet above you should be ready crawl, and any users in the SearchUsers groups should be able to see the secured rows in the search results.

JDBC format

The BCS crawler will submit the SecurityDescriptor in string format (SDDL) into the docaclms property. During content processing the docaclms property will be converted to an internal format which consists of the SID's of each user/group which allowed or denied access to the document. Each SID is base32 encoded and put into the property docacl. The docacl property is the one which is actually filtered against at query time. When using the jdbc connector one has the possibility to write directly to the docacl property. To create a correct string use the Get-FASTSearchSecurityEncodedSid:

PS C:\FASTSearch\bin> Get-FASTSearchSecurityEncodedSid -User Contoso\danj
S-1-5-21-331390976-2650875657-2422772959-1705
aecqaaaaaaaakfiaaaaabigacmesoam525kgrefjayaaa
PS C:\FASTSearch\bin> Get-FASTSearchSecurityEncodedSid -User Contoso\SearchUsers

S-1-5-21-331390976-2650875657-2422772959-2004
aecqaaaaaaaakfiaaaaabigacmesoam525kgregua3aaa

The cmdlet will output both the SID and the encoded SID. To create a proper acl prefix each SID with "win" (allow) or "9win" (deny). To allow CONTOSO\danj and CONTOSO\SearchUsers, the docacl would be

winaecqaaaaaaaakfiaaaaabigacmesoam525kgrefjayaaa; winaecqaaaaaaaakfiaaaaabigacmesoam525kgregua3aaa

The ACL above could either be put into the SQL table as showed below, or it can it can be hardcoded in the SQL query of the jdbc connector configuration:

SELECT [ProductKey], 'winaecqaaaaaaaakfiaaaaabigacmesoam525kgrefjayaaa; winaecqaaaaaaaakfiaaaaabigacmesoam525kgregua3aaa' as docacl

See the attached jdbc connector configuration for a complete example.

Database sample

The screenshot below shows a couple of sample rows. docaclwin contains the base32 encoded SID values, and SecurityDescriptor contains the binary Security Descriptor.

Using FASTSearch for SharePoint 2010 to index Exchange public folders

Murad Sæter — Tue, 04 Oct 2011 10:29:00 GMT

Indexing of Exchange public folders is one of the less used options in FASTSearch for SharePoint. At least so it seems; I can't find any examples of people setting it up.

In this example I'm using the SharePoint 2010 demo VHDs available here: 2010 Information Worker Demonstration and Evaluation Virtual Machine (SP1). Please note that there are no public folders available on the Exchange Server available in this package, so you have to enable the public folder database and create some public folders by yourself.

First, create the content source:

1. Go into your FAST Content SSA (FASTContent) and create a new content source.

2. Give your content source a name, and choose "Exchange Public Folders".

3. Type the start address; this is the tricky part. To find it, go to your OWA, in my case https://demo2010b/exchange. Click on Public Folders in the left bottom corner. In the new view right click on Public Folders and choose "Open in New Window". The URL you get is your start URL. It is ugly, mine is: https://demo2010b/owa/?ae=Folder&t=IPF.Note&id=PSF.LgAAAAAaRHOQqmYRzZvIAKoAL8RaAwAryKKxImnhRaK28blMCPQ0AAAAAAABAAAB&pspid=_1317728045392_959158536

Second, create a crawl rule to make sure the crawler authenticates correctly.

1. Go into Crawl Rules in your Content SSA.

2. Click "New Crawl Rule"

3. Input the PATH of your OWA, in by case https://demo2010b/*

4. Choose "Include all items in this path"

5. Specify authentication; in my case I used the default content access account.

Then start crawling, enjoy!