Making webdrawer's results sortable and searchable

The out-of-the-box design of webdrawer does not include common data table functionality.  For instance, the column headers & labels can't be clicked.  They also don't indicate if that column is being sorted. 

The ubiquitous dataTable library could be imported into webdrawer and then applied to the results list.  If done, the results list will appear as shown below.

With this users can now:

• Change how many items are in the view
• Search all rows and columns for a given value
• Click any column header and sort the items by that column

Even cooler, if the user types into the search box then all non-matching rows will be hidden.

Although Webdrawer's out-of-the-box footer works perfectly well, I feel the dataTable library includes a better pagination.  Also, by increasing the page size and enabling pagination here, more advanced features can be added (such as column formulas, signature lines, save as excel workbook).  Once enabled the footer would appear like shown below.

It's super easy to incorporate this into your own implementation.  Definitely test and tune your environment, as I'm just showing the broad brushstrokes.  Contact me for more details about implementation or more advanced features.  Otherwise here are the instructions.

---

First I opened the "Views/Shared" resultsList class file in Visual Studio.  I located the table element which will contain all of the records.  I then added an id attribute with "records" as the value.

Now that my table is named, I went into my initialize method (previously used to setup the map on the page) and added a invocation of the jquery dataTable plugin.  I provided it the name and a configuration object that enabled pagination.  

I then imported the dataTable jquery plugin via a public CDN, like so:

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />

That's it.  Three lines of code.  Crazy, isn't it?  :)

Adding an image carousel to Webdrawer results

In an earlier post I showed how we could add a map to the search results page of webdrawer.  It's also possible to add an image carousel.  With a carousel the user can cycle through the images included in the search results. 

Notice the carousel in the top right corner of the search results

Adding in this feature was super easy.  I've included the steps below.

---

To start, I opened the results list webdrawer template file (/Views/Shares/resultsList.cshtml) in Visual Studio.  I then found where I had placed my map and then adjust it so that I had a carousel above it.  The carousel is already defined within the bootstrap framework, something heavily used throughout the webdrawer product.  

<td id="infoColumn">
	<table height=100%>
		<tr height=50%>
			<td>
				<h2>Images</h2>
				<div id="imageCarousel" class="carousel slide">
					<!-- Carousel items -->
					<div class="carousel-inner">
					</div>
					<!-- Carousel nav -->
					<a class="carousel-control left" href="#imageCarousel" data-slide="prev">&lsaquo;</a>
					<a class="carousel-control right" href="#imageCarousel" data-slide="next">&rsaquo;</a>
				</div>
			</td>
		</tr>
		<tr height=10><td>&nbsp;</td></tr>
		<tr height=50%>
			<td><h2>Geolocations</h2><br><div id="mapDiv"></div></td>
		</tr>
	</table>
</td>

Below this I already had a bit of logic looping through the results so that markers can be added to the map, so I just needed to update that logic.  I need to add in a conditional output of an "addCarousel" function call for each supported extension.  This ends up just being 4 new lines of code, but I've included the lot below.

if (Model.Results.Count > 0)
{
	<script type="text/javascript">
 
	@foreach (TrimObject record in Model.Results)
	{
		var gpsloc = record.GetPropertyOrFieldString("RecordGpsLocation");
		if ( !String.IsNullOrWhiteSpace(gpsloc) )
		{
			@Html.Raw("addMarker('" + record.GetPropertyOrFieldString("RecordNumber") + "','" + gpsloc + "');");
		}
		
		var extension = record.GetPropertyOrFieldString("RecordExtension").ToLower();
		if ( !String.IsNullOrWhiteSpace(extension) && (extension.Equals("png")||extension.Equals("jpg")||extension.Equals("bmp")) ) {
			@Html.Raw("addCarousel('" + record.GetPropertyOrFieldString("Uri") + "','" + record.GetPropertyOrFieldString("RecordExtension") + "','" + gpsloc + "');");
		}
	}
	</script>
}

Lastly, I went back towards the top of my file and defined a new function named "addCarousel".  This function should result in a new image being pushed into the carousel.  I also need to create a variable to track how many items are in the carousel (this will be required to use indicators).  

var carouselItems = 0;
function addCarousel(uri, ltlg) {
	if ( carouselItems == 0 ) {
		$('<div class="item active"><img class="d-block img-fluid" src="/o1/Record/'+uri+'/File/Document"></div>').appendTo('.carousel-inner');
	} else {
		$('<div class="item"><img class="d-block img-fluid" src="/o1/Record/'+uri+'/File/Document"></div>').appendTo('.carousel-inner');
	}
	carouselItems++;
}

You may want to import jquery v3.  Webdrawer is using v1.what.ever.it.is.  I did this right above the definition of the above script by using the tag below.

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

So with like 30 lines of code we were able to add a cool image carousel to webdrawer.  Nifty.

Playing games with other people's records

So I saw a video over at hprm.info which highlighted how the City of Portland has a map view of some of their historical records.  With all the map fun I've been having the past few posts, I wondered what I could cobble together by turning my sights to their website.  I came up with a rather simple game...

If you click start, the page will load some image meta-data into memory from the City's electronic archives.  One will be selected at random and displayed on the screen.  Three maps appear.  You must select the one map corresponding with the image.   The other two maps come from other records in the archive.  After you select the map your answer is tracked and a new image is shown (and three new maps).  When the game is over your accuracy is reported.

I didn't do so well.  Maybe having it open in street view would be better.

Now that's a bit more interesting!  

[EDIT] Unfortunately I had to remove the link as I can't figure out how to get squarespace to host the single html file.