JSLink
whats that? I heard about JSLink few days back and finally I came across a
requirement wherein can try to implement the same. Let’s first get some brief
idea about JSLink. So is JSLink a replacement of SharePoint rest api call? No
it is not replacement to it.
What is JSLink?
JSLink is
a new approach combining JavaScript, HTML and CSS elements to customize the
look of a SharePoint list views, list forms, and can control the rendering of
fields. JSLink was
introduced with SharePoint 2013.
Where to use JSLink?
According
to me JSLink is best fit for each and every situation wherein you would think
of using SharePoint’s list view(You can have some super awesome UI of the view
is cherry on the cake).
Why JSLink?
We already have a rich set of
features like filters, sorting, grouping etc. that are available OOTB when you
create a SharePoint list view. So if your requirement is easily achievable with
customization of SharePoint list views then why to use any server/client side
code in order to fetch data from SharePoint list?
How to use?
Let’s create a simple example where
in you would like to get latest 5 News from SharePoint list. So let’s start.
- Create a custom list and add 6 different New to list.
- Now create a SharePoint page, add the newly created news list view on the page.
- Copy below and create a new .js file with below code.
(function () {
var itemCtx = {};
//Get the current
context
itemCtx.Templates =
{};
// Used to set the
UI portion of view.
itemCtx.Templates.Header
= "<div><h1>I am header
portion</h1></div>";
//It acts as loop
and is executed for number of items that are displayed in SharePoint views.
This is actually where we place pur HTML design
itemCtx.Templates.Item
= ItemOverrideFun;
//Seen after the
view items
itemCtx.Templates.Footer
= "<div><h1>I am footer
portion</h1></div>";
itemCtx.BaseViewID
= 1;
//TemplateId of
list. I am using custom list so 100
itemCtx.ListTemplateType
= 100;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
})();
function
ItemOverrideFun(ctx) {
//Below condition
is usefull when same page has multiple lists of same TemplateID
if(ctx.ListTitle == 'TempListJSLink')
{
var ancorTag = "<div
class='col-sm-3'><div class='tile-stats tile-blue'><div
class='icon'><i
class='entypo-rss'></i></div><h3>"+ctx.CurrentItem.Title+"</h3></div></div>";
return ancorTag;
}
}
|
Now let’s have some UI stuff to
beautify the List item’s view. So copy below css and place it in some text/html
file.
<style>
@media (min-width:
768px)
.col-sm-3 {
width: 25%;
}
@media (min-width:
768px)
.col-sm-1,
.col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8,
.col-sm-9, .col-sm-10, .col-sm-11 {
float: left;
}
.col-xs-1, .col-sm-1,
.col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3,
.col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6,
.col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8,
.col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10,
.col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11,
.col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
* {
border-collapse: collapse;
}
a:visited {
color: #fff;
text-decoration: none;
}
a {
color: #fff;
text-decoration: none;
}
a {
background: transparent;
}
.ms-rtestate-field
h4, h4.ms-rteElement-H4 {
line-height: 0.6 !important;
color: #fff;
}
}
.tile-stats {
position: relative;
display: block;
background: #303641;
padding: 20px;
margin-bottom: 10px;
overflow: hidden;
-webkit-border-radius: 5px;
-webkit-background-clip: padding-box;
-moz-border-radius: 5px;
-moz-background-clip: padding;
border-radius: 5px;
background-clip: padding-box;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms
ease-in-out;
transition: all 300ms ease-in-out;
}
.tile-stats.tile-blue
.num, .tile-stats.tile-blue h3, .tile-stats.tile-blue p {
color: #ffffff;
}
.tile-stats p {
font-size: 11px;
margin-top: 5px;
}
.tile-stats .num,
.tile-stats h3, .tile-stats p {
position: relative;
color: #ffffff;
z-index: 5;
margin: 0;
padding: 0;
}
.tile-stats .num,
.tile-stats h3, .tile-stats p {
position: relative;
color: #ffffff;
z-index: 5;
margin: 0;
padding: 0;
}
.tile-stats.tile-blue
{
background: #00acd6;
height:135px !important;
}
.tile-stats {
position: relative;
display: block;
background: #303641;
padding: 20px;
margin-bottom: 10px;
overflow: hidden;
-webkit-border-radius: 5px;
-webkit-background-clip: padding-box;
-moz-border-radius: 5px;
-moz-background-clip: padding;
border-radius: 5px;
background-clip: padding-box;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms
ease-in-out;
transition: all 300ms ease-in-out;
}
}
</style>
|
- OK now it’s time to upload both the files to Site Assets/Style Library. Once you are done with it just copy the URL of the js file. We need to make the URL relative so we need to remove the portion of URL that is of site collection and prepend the URL with “~SiteCollection/”.
Make it as: ~SiteCollection/SiteAssets/MyJSLink.js
- Now visit the page where you have placed the newly created list’s view. Click on the Settings gear on the top right corner> Edit Page> click on down arrow on top right corner of the List’s view > Select “Edit Webpart” > under it expand “Miscellaneous” tree node, the last option will be JSLink paste your URL over there and click OK.
- Now let’s add a content editor webpart to the same page, Click on the empty space on the page and select Insert menu from the ribbon > Media and Content > Content Editor webpart > Click Add.
- Click on down arrow on the top right corner > Edit Webpart > Paste the link of the text/html file that we uploaded some time before
- Now just save the page and you would see below like UI id SharePoint List.
Regards,
Keyur Pandya
Comments
Post a Comment