Mixing Custom WebPart Properties, REST Search and jQuery DataTables

NB! Before reading this you should probably read Custom Web Part properties using jQuery. Just warning ya!

So you’ve installed the Custom WebPart Properties solution from GitHub? If not, you’ll find it here.

It’s time to take it to the next level. In this blogpost we’ll use:

 

Introduction to the components

REST Search

We’ll use the GET version of the Search REST API in this blog post. A Search GET query is built up like this:

server/_api/search/query?query_parameter=value&query_parameter=value

We will use the parameters querytext, selectproperties and rowlimit.

querytext is the query we’ll send to the search engine.
selectproperties will include the managed properties we want to retrieve from the items.
rowlimit tells the engine how many items we want retrieved.

A query could look like this…

server/_api/search/query?querytext=’ContentType:Task’&selectproperties=’Title,Path’&rowlimit=10

.. if we want to search for Tasks.

 

In this blogpost we’ll search for Cars. Fast cars!

Mixing Custom WebPart Properties, REST Search and jQuery DataTables 6

jQuery DataTables

jQuery DataTables actually makes tables quite useful by adding “as-you-type”-search, paging and sorting.

You intialize it by just doing this:

$(document).ready(function(){
    $(‘#myTable’).DataTable();
});

BUT make sure you’re HTML table is properly built with tbody and thead.

<table>
<thead>
<tr>
<th>Brand</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mercedes</td>
<td>SLK</td>
</tr>
</tbody>
</table>

 

Custom Web Part Properties

Custom Web Part properties using jQuery

 

Creating the webpart

Psssst! You can find the .webpart file in the source.

First of all, add a Script Editor Web Part to your page.

Mixing Custom WebPart Properties, REST Search and jQuery DataTables 1

Edit snippet of the webpart, and add the following HTML:

<div class=”custom-webpart” data-webpart-properties='[{ “Query”: “”, “RowLimit”: “”, “Properties”: “”, “OnlyListItems”: “false”, “OnlyDocuments”: “false” }]’ data-webpart-renderfunction=”CustomWebPart.Test.SearchTable”></div>

Mixing Custom WebPart Properties, REST Search and jQuery DataTables 2

NB! Make sure data-webpart-renderfunction reflects the function you’ll use for the rendering. You probably won’t use the same namespacing as me.

 

Click Insert, and save the page.

 

Creating the render function

Pssst! You’ll find the full function here (at line 7).

Finally time to do some JavaScript. We’ll now make the render function for our awesome search web part.

 

First of all, your function should take ONE parameter which is the WebPart object. This will object will have everything you need which is mainly the instance and the properties.

Mixing Custom WebPart Properties, REST Search and jQuery DataTables 3

When the “skeleton” of your function is complete, we’ll start of by retrieving the properties from the webpart object (see line 8). On line 9 we’ll get the search query, and then everything is pretty straight forward until line 25. Here we’ll append the DataTable CSS (we’ll use the CDN).

Oh! I forgot line 22. We’ll use nometadata which is supported in SharePoint Online! This will make the query a tad more effective.

 

Let’s continue to line 26 we’re we’ll set our results variable. When using JSON Light we’ll find our results in d.PrimaryQueryResult.RelevantResults.Table.Rows.

 

From line 29 to line 38 we’re doing some grep magic to retrieve the item values from the nasty Cells object which the Search API gives us.

From line 39 to line 52 we’ll make the HTML for our webpart (I like using arrays and join() when concating strings as you can see).

Finally at line 53 we’ll get the jQuery DataTables script from the CDN, and apply it to our HTML table!

 

The WebPart in action

Edit mode

We need some properties for our webpart. Let’s start off by editing the webpart, and add some!

Mixing Custom WebPart Properties, REST Search and jQuery DataTables 4

Query: ListId:{ID of my Cars list}
RowLimit: 15
Properties: ListItemID,Title,Path
OnlyListItems: true

Click OK, and save the page.

View mode

Mixing Custom WebPart Properties, REST Search and jQuery DataTables 5

And we’re done! Don’t forget – the full source is here!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s