How to Use Multiple JSLink Files on a Page

jslink_title_img

JSLINK OVERVIEW

I developed my company’s intranet using multiple different ways to consume the data stored within lists and document libraries. One of the methods I chose to employ was placing JSLink files into the List Web Part within SharePoint. This allowed us to use the out-of-the box web part, but also incorporate our own styling. I also chose this route because the set up would be much easier for non-developers. Instead of needing to change parameters within a REST API query, users could change the displayed data by updating the filters on the list view.

THE JSLINK PROBLEM

The problem I ran into was that there were multiple JSLink files applying styling to multiple web parts, but the styling was throwing errors. I did some research and found this article that was a big help. However, it took some trial and error for me to completely fix the issue. I would like to pass this on so that others can easily implement this as well!

THE CAUSE

The cause took some investigating. After many cups of coffee (and finally some help from the article above)too-many-baseviewIDs I was able to crack the code. SharePoint assigns the same BaseViewID to all of the list webparts. This then renders all of your list web parts with the same JSLink file, even though there may be multiple JSLink files on the page. To overcome this, we need to use some JavaScript trickery.

THE SOLUTION

As stated above, we need to involve some lines of code in our JSLink file to overcome this. One of the JSLink files will need to contain the main block of code, then you also have to place some extra code in each of the other JSLink files that you want to include into the page. You will want to add in code that is similar to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ExecuteOrDelayUntilScriptLoaded(function(){

//Make a copy of the original list view
var oldRenderListView = RenderListView;

//Override each of your List webpart's BaseViewID
RenderListView = function(ctx,webPartID)
{
//Check the context of the currently rendering List view
if (ctx.ListTitle == "Test1")
{
ctx.BaseViewID = 99;
}
if (ctx.ListTitle == "Test2")
{
ctx.BaseViewID = 98;
}

//now call the original RenderListView
oldRenderListView(ctx,webPartID);
}

},"ClientTemplates.js");

As we can see with this code, we are delaying it until the ClientTemplates.js file is loaded. We then call each lists’ BaseViewID parameter and change it to an ID high enough that SharePoint more than likely will not reach. Once that is done, we call the old render list view. This is what I like to refer to as the ‘main’ JSLink file. In the same file, scroll down to the body of the JSLink file. We want to look into the top function call. Here is an example:

1
2
3
4
5
6
7
8
9
10
11
12
(function (){
var test1Items = {};
test1Items.Templates = {};
test1Items.Templates.Item = test1Template;
test1Items.Templates.Header = test1Header;
test1Items.Templates.Footer = test1Footer;

test1Items.BaseViewID = 99;
test1Items.ListTemplateType = 100;

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



As you can see with this, we had to override the specific template’s BaseViewID to ensure that it matches what we passed through in the function we called above. As you can see, we added a line in the function that assigns the BaseViewID an ID equal to 99. This matches what was in the script above. Here is the file in its entirety for clarity:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
ExecuteOrDelayUntilScriptLoaded(function(){

//Make a copy of the original list view
var oldRenderListView = RenderListView;

//Override each of your List webpart's BaseViewID
RenderListView = function(ctx,webPartID)
{
//Check the context of the currently rendering List view
if (ctx.ListTitle == "Test1")
{
ctx.BaseViewID = 99;
}
if (ctx.ListTitle == "Test2")
{
ctx.BaseViewID = 98;
}

//now call the original RenderListView
oldRenderListView(ctx,webPartID);
}

},"ClientTemplates.js");

(function (){
var test1Items = {};
test1Items.Templates = {};
test1Items.Templates.Item = test1Template;
test1Items.Templates.Header = test1Header;
test2Items.Templates.Footer = test1Footer;

test1Items.BaseViewID = 99;
test1Items.ListTemplateType = 100;

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

function test1Template(ctx){
//Your code goes here
}

function test1Header(){
return "your custom code goes here";
}

function test1Footer(){
return '';
}

In all of your subsequent JSLink files, all you need to do is assign that list the specific BaseViewID that was assigned in the main file. For example, this would be in the top function of the second JSLink file:

1
2
3
4
5
6
7
8
(function (){
var test2Ctx = {};
test2Ctx.Templates = {};
test2Ctx.Templates.Item = overrideBDTemplate;
test2Ctx.BaseViewID = 98;

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

The only extra code that was placed was test2Ctx.BaseViewID = 98. The rest of the code is the same as what you would find in a JSLink file. For clarity here is the Test2 file in entirety:

1
2
3
4
5
6
7
8
9
10
11
12
(function (){
var test2Ctx = {};
test2Ctx.Templates = {};
test2Ctx.Templates.Item = overrideTest2Template;
test2Ctx.BaseViewID = 98;

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

function overrideTest2Template(ctx){
//Add your code here
}

CONCLUSION

Clear as mud? It’s not as hard or as difficult as it may seem. I know that it took some troubleshooting to find the proper way to these files to play nicely. Once it’s working, your site will live perfect harmony, until something else breaks :).

Need help with SharePoint? Feel free to contact me.

Have a bigger project? Check out my company, UDig, LLC.