Tiles view with Client Side Rendering

In my previous post I wrote about Tiles view with CQWP. You can also achieve this using Client Side Rendering (CSR examples by Wesley).

I wanted my custom list to have Tiles view:

I created a Javascript Display Template file & uploaded to the masterpage gallery and set the JS Link in the Miscellaneous section.

Below is the sample CSR code (update the styles..):

	(function () {
	/*
	* Initialize the variable that store the overrides objects.
	*/
	var overrideCtx = {};
	overrideCtx.Templates = {};
	// Assign functions or plain html strings to the templateset objects:
	// header, footer and item.
	overrideCtx.Templates.Header = "<ul class='dfwp-column dfwp-list' style='width:100%;'>";
	overrideCtx.Templates.Footer = "</ul>";
	// This template is assigned to the CustomItem function.
	overrideCtx.Templates.Item = CustomItem;
	overrideCtx.BaseViewID = 1;
	//overrideCtx.ListTemplateType = 0;
	// Register the template overrides.
	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
	})();
	/*
	* This function builds the output for the item template.
	* Uses the Context object to access announcement data.
	*/
	function CustomItem(ctx) {
	// Build a listitem entry for every announcement in the list.
	var ret = "<li class='dfwp-item'>";
	ret += "<div id='Div2' style='width: 160px; height: 160px;' class='ms-tileview-tile-root'><div id='Div3' style='width: 150px; height: 150px;' aria-haspopup='true' class='ms-tileview-tile-content'>";
	ret += "<a href='"+ctx.CurrentItem.FileRef.substr(0, ctx.CurrentItem.FileRef.lastIndexOf('/'))+ "/dispform.aspx?ID=" + ctx.CurrentItem.ID +"'>";
	ret += "<img height='150' class=' ms-positionRelative' style='visibility: visible;' src='"+ctx.CurrentItem.AImage+"'>";
	ret += "<div id='Div4' offy='100' class='ms-tileview-tile-detailsBox'>";
	ret += " <ul class='ms-noList ms-tileview-tile-detailsListMedium'><li id='Li3' collapsed='ms-tileview-tile-titleMedium ms-tileview-tile-titleMediumCollapsed' expanded='ms-tileview-tile-titleMedium ms-tileview-tile-titleMediumExpanded' class='ms-tileview-tile-titleMedium ms-tileview-tile-titleMediumCollapsed'>";
	ret += "<div collapsed='ms-tileview-tile-titleTextMediumCollapsed' expanded='ms-tileview-tile-titleTextMediumExpanded' class='ms-tileview-tile-titleTextMediumCollapsed'>";
	ret += ctx.CurrentItem.Title;
	ret += "</div></li>";
	ret += "<li id='Li4' class='ms-tileview-tile-descriptionMedium'>";
	ret += ctx.CurrentItem.ADescription;
	ret += "</li></ul></div></a></div></li>";
	return ret;
	}

view raw tiles.js hosted with ❤ by GitHub

CSS:

	<style type="text/css">
	. ms-tileview-tile-detailsBox {
	width: 150px; height: 150px; top: 100px; left: 0px;
	-webkit-transition: 300ms 0ms;
	-webkit-transform-origin-x: -25px; }
	.ms-tileview-tile-content:hover .ms-tileview-tile-detailsBox {
	top:0px !important;
	-webkit-transition: 300ms 0ms;
	-webkit-transform-origin-x: -25px;
	}
	</style>

view raw tiles.css hosted with ❤ by GitHub

Note: I have the DisForm hard coded, I couldn't find a way to get the DisplayUrl property like in REST. I shall update this when I come across a better way.

Output: