Skip to content

Instantly share code, notes, and snippets.

@estruyf

estruyf/Item_List_Item.html

Created December 3, 2014 08:15
Show Gist options
  • Save estruyf/bee868550eeb46710b42 to your computer and use it in GitHub Desktop.
Save estruyf/bee868550eeb46710b42 to your computer and use it in GitHub Desktop.
Download ZIP
SPSUK Demo Sorting (Item template)
Raw
Item_List_Item.html
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>List Table Item</title>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:ManagedPropertyMapping msdt:dt="string">ListID','ListItemID','ContentTypeId','Link URL':'Path','Property 1':'Title','Property 2':'','Property 3':'','Property 4:'','Property 5':'','Property 6':'','Property 7':'','Property 8':'','Property 9':'','Property 10':'','FileExtension','SecondaryFileExtension'</mso:ManagedPropertyMapping>
<mso:MasterPageDescription msdt:dt="string">This is the item row template, use this template in combination with the List Table Control template.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">http://intranet/sites/SPSUK/_catalogs/masterpage/SPSUK/TableLayout/Item_List_Item.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<div id="TwoLines">
<!--#_
// Give up your names for the properties in the following array
var propertyNames = {"Property 1":"Title","Property 2":"Author","Property 3":"Created","Property 4":"Modified","Property 5":"Size"};
var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_tableitems_");
var linkURL = $getItemValue(ctx, "Link URL");
linkURL.overrideValueRenderer($urlHtmlEncode);
var iconURL = Srch.ContentBySearch.getIconSourceFromItem(ctx.CurrentItem);
var listID = $getItemValue(ctx, 'ListID');
var listItemID = $getItemValue(ctx, 'ListItemID');
var ContentTypeId = $getItemValue(ctx, 'ContentTypeId');
var rowId = encodedId + "row";
var editCellId = rowId + "_cell";
var currentItemIdx = ctx.CurrentItemIdx + 1;
var alternating = currentItemIdx % 2 === 0 ? "ms-alternating" : "";
if (currentItemIdx === 1) {
_#-->
<thead>
<tr>
<!--#_
// Show the file icon
_#-->
<th class="ms-vh-icon ms-minWidthHeader">
<img width="16" height="16" border="0" src="/_layouts/15/images/icgen.gif">
</th>
<!--#_
// Show the properties that aren't empty
for(var i = 1; i <= 10; i++) {
var property = $getItemValue(ctx, String.format("Property {0}", i));
if(property.managedPropertyName !== String.format("Property {0}", i)) {
var propertyName = typeof propertyNames[property.propertyLookupName] === "undefined" ? property.managedPropertyName : propertyNames[property.propertyLookupName];
_#-->
<th class="ms-vh2">
_#= propertyName =#_
<span id="_#= property.managedPropertyName.replace(/ /g, '-') =#_">
<span style="" class="sortarrow ms-sortarrowup-iconouter" ></span>
<a id="_#= property.managedPropertyName =#_ASC" href="#" title="Ascending" onclick="$getClientControl(this).sortOrRank('_#= property.managedPropertyName =#_ASC');return false;">
<img alt="Ascending" src="/_layouts/15/images/sortaz.gif">
</a>
<a id="_#= property.managedPropertyName =#_DES" href="#" title="Descending" onclick="$getClientControl(this).sortOrRank('_#= property.managedPropertyName =#_DES');return false;">
<img alt="Descending" src="/_layouts/15/images/sortza.gif">
</a>
</span>
</th>
<!--#_
}
}
_#-->
</tr>
</thead>
<tbody>
<!--#_
}
_#-->
<tr id="_#= rowId =#_" class="_#= alternating =#_ ms-itmHoverEnabled ms-itmhover">
<td class="ms-cellstyle ms-vb-icon">
<!--#_ if(!iconURL.isEmpty) { _#-->
<img src="_#= iconURL =#_" />
<span id="_#= editCellId =#_"></span>
<!--#_
} else {
_#-->
<img width="16" height="16" border="0" src="/_layouts/15/images/icgen.gif">
<!--#_
}
_#-->
</td>
<!--#_
// Show the properties that aren't empty
for(var i = 1; i <= 10; i++) {
var property = $getItemValue(ctx, String.format("Property {0}", i));
_#-->
<td class="ms-cellstyle ms-vb2">
<!--#_
if(!property.isEmpty)
{
var value = i === 1 ? String.format("<a href='{0}' class='ms-listlink'>{1}</a>", linkURL, property) : property;
_#-->
_#= value =#_
<!--#_
}
_#-->
</td>
<!--#_
}
_#-->
</tr>
<!--#_
if (currentItemIdx === ctx.CurrentGroup.RowCount) {
_#-->
</tbody>
<!--#_
}
_#-->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment