Archive

Posts Tagged ‘list view’

SharePoint 2013: Getting lookup column values in JSLink

Hi Friends,

While working on of the development requirement related to JSLink I came across a scenario where a lookup value needed to be shown in a list view web part.

I wanted to demonstrate with following code how we can achieve to show the lookup values form single valued or multi valued lookup.

Before that I would like to show the relationship between the lists I used to show the demonstration.

I have created following two custom lists for demonstration.

First list with following column –

TestList2

 

The content in First list will like something –

TestList2Content

Second list having lookup column from first list –

TestList1

 

The content in second list like following –

TestList1Content

Following code will show how to get the single or multi valued lookup values and show.


(function () {

var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Item = CustomPortalPageItem;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
function CustomPortalPageItem(ctx) {
var html = "";
html += '<div title="' + ctx.CurrentItem.Title + '"></div><div>'+GetLookupValues(ctx.CurrentItem.Test11,"lookupValue")+'</div>';
return html;
}

function GetLookupValues(inputArry,originalColumnName)
{
var retHtml="";
if(inputArry!=null)
{
for(var loopcnt=0;loopcnt<inputArry.length;loopcnt++)
{
if (typeof(inputArry[loopcnt][originalColumnName]) != 'undefined' && inputArry[loopcnt][originalColumnName] != null)
{
retHtml+=inputArry[loopcnt][originalColumnName];
}
}
}
return retHtml;
}

After this it will look like following,you can then apply beautiful HTML to it.
JSLInkOP

Advertisements

SharePoint 2013: Item template not called in JSLink with group rendering

July 10, 2014 3 comments

Hi Friends,

I have explained the Group rendering with JSLink in one my previous blog. I will explain a common problem and a solution for that while group rendering with JSLink.

Scenario:

While rendering grouping in view with JSLink, We normally face an issue that item rendering handler ‘overrideCtx.Templates.Item’ is not getting called. Group rendering was working fine in my case but not item level rendering.

Solution:

Initially I thought something wrong with JSLink file but after analysing and debugging I found the problem is with the grouping configured in data view.

To fix this issue edit your data view and go to grouping section of the view. Change ‘By default, show groupings’ setting to ‘Expanded’ and save the view and bingo it will start working.

Following image shows the setting in data view –

JSLink Group

JSLink Group

If you are provisioning data view declaratively then you need to add Collapse=”FALSE” to your <GroupBy node.

JSLink_Group1

Possible reason for this problem is, while the groups shown in collapsed state item in that group are not loaded initially and once you click to expand the group it will be loaded on demand hence item template not gets called initially as items not loaded.

Hope this will help some of the developer looking for same kind of answer.

Happy coding!!!

SharePoint 2013: jQuery table pagination sorter integration with JSLink

January 24, 2014 5 comments

Hi Friends,

While working one of the requirements I came across a scenario where I need to call a jQuery function after loading all the rows from data view. I implemented it using OnPostRender which I shown in my previous post.

After that I am thinking of integrating JSLink with some of the very useful jQuery plugin. In this post I am showing how to integrate a jQuery table sorter plugin with SharePoint 2013 JSLink.I have used tablesorter plugin by Christian Bach for demo purpose. http://mottie.github.io/tablesorter/docs/index.html

Download the package from above maintained table sorter site and upload the required css and js under SiteAssets folder on root site.

I have created a custom list with following columns. Added these columns in default view. You can create separate view also.

listsettings1

Added some test contents to show the functionality working.

listscontent

Created one JSLink(Student_Filter_Script.js) file which will alter the UI of the view. JS Link file is as following.

(function () {
var overrideCtx = {};
 overrideCtx.Templates = {};
 overrideCtx.Templates.Header = "<div class='pager'>Page: <select class='gotoPage'></select><img src='/sites/Demo/SiteAssets/addons/pager/icons/first.png' class='first' alt='First' title='First page' /><img src='/sites/Demo/SiteAssets/addons/pager/icons/prev.png' class='prev' alt='Prev' title='Previous page' /><span class='pagedisplay'></span> <!-- this can be any element, including an input --><img src='/sites/Demo/SiteAssets/addons/pager/icons/next.png' class='next' alt='Next' title='Next page' /><img src='/sites/Demo/SiteAssets/addons/pager/icons/last.png' class='last' alt='Last' title= 'Last page' /><select class='pagesize'><option selected='selected' value='10'>10</option><option value='20'>20</option><option value='30'>30</option><option value='40'>40</option></select></div><table id='myTable' class='tablesorter'><thead><tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Hindi</th><th>Calculus</th><th>Geometry</th></tr></thead><tfoot><tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Hindi</th><th>Calculus</th><th>Geometry</th></tr></tfoot><tbody>";
 overrideCtx.Templates.Footer = "</tbody></table><div class='pager'>Page: <select class='gotoPage'></select><img src='/sites/Demo/SiteAssets/addons/pager/icons/first.png' class='first' alt='First' title='First page' /><img src='/sites/Demo/SiteAssets/addons/pager/icons/prev.png' class='prev' alt='Prev' title='Previous page' /><span class='pagedisplay'></span> <!-- this can be any element, including an input --><img src='/sites/Demo/SiteAssets/addons/pager/icons/next.png' class='next' alt='Next' title='Next page' /><img src='/sites/Demo/SiteAssets/addons/pager/icons/last.png' class='last' alt='Last' title= 'Last page' /><select class='pagesize'><option selected='selected' value='10'>10</option><option value='20'>20</option><option value='30'>30</option><option value='40'>40</option></select></div>";
 overrideCtx.Templates.Item = CustomDemoItem;
 overrideCtx.OnPostRender = [];
 overrideCtx.OnPostRender.push(function(){ /* invoke your plugin code here to ensure the plugin has the content to work against */
 $(function(){

// define pager options
 var pagerOptions = {
 // target the pager markup - see the HTML block below
 container: $(".pager"),
 // output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
 output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
 // if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
 // table row set to a height to compensate; default is false
 fixedHeight: true,
 // remove rows from the table to speed up the sort of large tables.
 // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
 removeRows: false,
 // go to page selector - select dropdown that sets the current page
 cssGoto: '.gotoPage'
 };

// Initialize tablesorter
 // ***********************
 $("table")
 .tablesorter({
 theme: 'blue',
 headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
 widthFixed: true,
 widgets: ['zebra', 'filter']
 })

// initialize the pager plugin
 // ****************************
 .tablesorterPager(pagerOptions);

});
 });
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function CustomDemoItem(ctx)
{
 var html = "";
 html = "<tr>";
 html += "<td>" + ctx.CurrentItem.Title + "</td>";
 html += "<td>" + ctx.CurrentItem.Name + "</td>";
 html += "<td>" + ctx.CurrentItem.Sex + "</td>";
 html += "<td>" + ctx.CurrentItem.English + "</td>";
 html += "<td>" + ctx.CurrentItem.Hindi + "</td>";
 html += "<td>" + ctx.CurrentItem.Calculus + "</td>";
 html += "<td>" + ctx.CurrentItem.Geometry + "</td>";
 html += "</tr>";
 return html;
}

Uploaded this JS link file in master page gallery with properties as shown in bellow image.

JsLink_MasterPageGallery

I have added references for following css and JavaScript files in page layout, I have added in page layout but you can add in master page according to your requirement.

<!-- jQuery file -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!-- css stylesheet refrences -->
<link href="/sites/Demo/SiteAssets/css/theme.blue.css" rel="stylesheet" type="text/css" />
<link href="/sites/Demo/SiteAssets/addons/pager/jquery.tablesorter.pager.css" rel="stylesheet" type="text/css" />
<!-- Tablesorter js -->
<script type="text/javascript" src="/sites/Demo/SiteAssets/js/jquery.tablesorter.js"></script>&nbsp;
<script type="text/javascript" src="/sites/Demo/SiteAssets/addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="/sites/Demo/SiteAssets/js/jquery.tablesorter.widgets.js"></script>

Edit the page to add list view web part on page and edit the XSLTListView web part to set newly created JS link file.

XSLT_JSLink_ref

Set the value as following.

~sitecollection/_catalogs/masterpage/JS_Link/Student_Filter_Script.js

Save the web part and you will see the beautiful effect of smooth client side sorting pagination, filtering and sorting using a JSLink file.

JSLinkView

Note: complete contribution, development and license rights are with the team who have developed tablesorter plugin. This post is just to show integration of SharePoint 2013 JSLink with jQuery plugin.

SharePoint 2013: Calling jQuery function on rendering complete event in JSLink

December 2, 2013 7 comments

Hello Friends,

Once again a new finding I wanted to share with you related to JSLink in SharePoint 2013.

Scenario:  I am displaying some data from list using a XSLTListView web part in SharePoint 2013 page. I have selected JSLink option to give a matching UI to that data.Data is getting rendered properly with new UI using my custom JSLink file but I wanted to call a jQuery function after loading of all the rows gets completed so that my jQuery call will not fail and will get the rendered rows properly.

Solution:

We need to provide a handler on OnPostRender event or we can call the function directly as shown in following code, though no huge difference between those two –

Option 1 –

(function () {
 var overrideCtx = {};
 overrideCtx.Templates = {};
 overrideCtx.Templates.Header = "";
 overrideCtx.Templates.Footer = "";
 overrideCtx.Templates.Item = CustomDemoItem;
 overrideCtx.OnPostRender = [];
 overrideCtx.OnPostRender.push(function()
 {
 //call your ready function here
 });
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

Option 2 –

(function () {
 var overrideCtx = {};
 overrideCtx.Templates = {};
 overrideCtx.Templates.Header = "";
 overrideCtx.Templates.Footer = "";
 overrideCtx.Templates.Item = CustomDemoItem;
 overrideCtx.OnPostRender = [];
 overrideCtx.OnPostRender.push(function(){OnPostRenderFunc(); });
 SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function OnPostRenderFunc(renderCtx) {
 //call your ready function here
}

Hope this will help some of the developer looking for same kind of answer.

Happy coding….

SharePoint 2013: How to change the group rendering in JSLink

November 1, 2013 13 comments

Hi Friends,

It was very painful to change the list view web parts UI using XSLT changes in MOSS and SP2010. A new exciting client side rendering (CSR) feature provided in SharePoint 2013. We have seen it is pretty good and easy to implement in Content Search web part with display templates. Another addition is for list view rendering and it is called as JS link. Using JS link we can change the list view rendering with a JavaScript file easily. It will also help to debug the list view rendering from client side and easy to develop JavaScript than XSLT.

Scenario:  If we added a grouping condition in list view and we want to change the default rendering of grouping.A requirement to change the rendering of the group in JSLink.I tried multiple options and not able to found any help related to group rendering. After debugging in developer tool I found a way.

Override group template using following line of JS code-

overrideCtx.Templates.Group = CustomGroup;

Add following function which will change the group rendering-

function CustomGroup(ctx, group, groupId, listItem, listSchema, level, expand) {

var html = '<div style="font-weight:bold">' + listItem[group] + ' :: </div>';

return html;

}

Hope this will help some of the developer looking for same kind of answer.

Happy coding….