Archive

Posts Tagged ‘custom js function’

SharePoint 2013: Creating and calling custom JavaScript function in search display template

October 23, 2017 Leave a comment

Hi Friends,

Recently I came across a requirement where I need to create a custom JavaScript function which will change the date formatting on the provided string date parameter.

I tried creating normal JavaScript function in display template and tried calling it from other part of template but the function was undefined and not found inside the display template, I got little bit confused as I have created the JavaScript function in same display template but still not able to find it in same display template while calling. We can have couple of ways to resolve the issue.

Solution 1:

After some googling I found the cause of the issue and the solution as well, as follows.

The possible reason is scoping of the display template not allowing to consider external JavaScript function as a part of the scope to call inside display template.

The solution is to create new function on window scope and the call it in the desired place inside display template.

window.MyTestFunction = function(myParam)
{
// your own logic to work on the param 'myParam'
}

Calling the function:

<a style="cursor:pointer" onclick='window.MyTestFunction(3)'>Call My custom JS function</a>

Solution 2:

  1. Create a JavaScript file (MySampleJS.js) in the Display Templates/Search folder.
  2. Add the custom JS function in to the MySampleJS.js file.
  3. Add the following code into thetag below to include the JS file in display template
<script>
$includeScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Search/ MySampleJS.js");
</script>

Happy learning.

Advertisements