1

I'm trying to make a JS Link script that will work with my site's Pages list. Basically I want to display a simple list of page titles. I'm using the Pages Web Part (Web Part > Apps > Pages).

var myViews = myViews || {};
myViews.itemHtml = function (ctx) { 
  var returnHtml = "<p>" + ctx.CurrentItem.Title + "</p>";
  return ""returnHtml"";
};

(function () {

  var myOverrides = {};
  myOverrides.Templates = {};

  myOverrides.Templates.Header = "<div id='MyCustomView'>";
  myOverrides.Templates.Item = myViews.itemHtml;
  myOverrides.Templates.Footer = "</div>";

  myOverrides.ListTemplateType = 100;
  myOverrides.BaseViewID = 0;

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(myOverrides);

})();
2

The list of corrections/fixes for your script:

1) Replace the line return ""returnHtml""; with return returnHtml;

2) Make sure the proper ListTemplateType and BaseViewID are specified, in fact those properties are not mandatory and they could be omitted at all. For example, for Pages Library you could specify:

myOverrides.ListTemplateType = 850;  //ootb Pages library
myOverrides.BaseViewID = 1;   //default view where Title column is included(!)

3) Make sure Title column is included in a List View

Result

After applying those changes, the customized list view could look like this:

enter image description here

1
  1. Save below code into a file and upload it into style library (ex: jslinks.js)

    (function () {
        var overrideCtx = {};
        overrideCtx.Templates = {};
        overrideCtx.Templates.Fields = {
            "Title": { "View": CustomItem } 
        };
        //  Assign functions or plain html strings to the template set objects:
        //  header, footer and item.
        overrideCtx.Templates.Header = "<div id='MyCustomView'>";
        overrideCtx.Templates.Footer = "</div>";
    
        //  This template is assigned to the CustomItem function.
        overrideCtx.Templates.Item = CustomItem;
    
        //  Register the template overrides.
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
    
    /*
     * This function builds the output for the item template.
     * Uses the Context object to access data.
     */
    function CustomItem(ctx) {
        // Build a listitem entry for every in the list.
        var ret = "<p>" + ctx.CurrentItem["FileLeafRef"] + "</p><br/>";
        return ret;
    }
    
  2. Edit Page -> Edit Webpart Properties -> Miscellaneous -> JS Link

    ~site/style library/jslinks.js

    //Change jslinks.js with your filename

  3. Stop editing and refresh the page

2
  • Thanks, how would I get the files's title or name? Did you find some good documentation on this? – matt Oct 24 '14 at 15:23
  • Oh you have to have the Title column enabled (check mark beside display) in the view. – matt Oct 24 '14 at 15:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.