2

I'm a 10yr+ web developer with plenty of experience in C# / ASP .NET, but still very new to SharePoint.

I've been trying to create a custom view for the Announcements web part in SharePoint Online (2013) using Clientside Rendering (CSR). So far I've been able to create an additional view and set the JS Link property correctly. I have selected the columns I wish to display in my view, which include:

Title, Title (linked to item with edit menu), Title (linked to item), Created, Created By, Body.

My JS file looks like this:

(function () {
    /*
     * Initialize the variable that store the overrides objects.
     */
    var overrideCtx = {};
    overrideCtx.Templates = {};

    //  Assign functions or plain html strings to the templateset objects:
    //  header, footer and item.
    //  overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B><hr><ul>";
    //  overrideCtx.Templates.Footer = "</ul>";

    //  This template is assigned to the CustomItem function.
    overrideCtx.Templates.Item = CustomItem;
    //  overrideCtx.BaseViewID = 1;
    overrideCtx.ListTemplateType = 104;

    //   Register the template overrides.

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

/*
 * This function builds the output for the item template.
 * Uses the Context object to access announcement data.
 */
function CustomItem(ctx) {
    // Build a listitem entry for every announcement in the list.
    var ret = "<li>" + ctx.CurrentItem.Title + "</li>";
    return ret;
}

When I set a breakpoint and inspect the ctx.CurrentItem property, a lot of the columns values are missing. See image below -

debugger

I was hoping to display the Title (linked to item) value in my template, but as you can see from the image it doesn't appear. Am I right to assume that only certain columns are available in the ctx object that is passed down to the client? And if so, how would I for example display a title and hyperlink it to full announcement?

1

Lots of columns are not missing. ctx.CurrentItem will give the columns those are available in current view. There is no column like Title (linked to item) in the list. It is constructed by SharePoint. So if you need it, then you have to construct it again. Following can be a workaround for constructing Title (linked to item).

 function CustomItem(ctx) {
    var defaultFormName = "Your Default Form Name";
    var linkedTitle = String.format("<a href='/Lists/{0}/{1}.aspx?ID={2}'>{3}</a>", ctx.ListTitle, defaultFormName , ctx.CurrentItem.ID, ctx.CurrentItem.Title);
    var ret = "<li>" + linkedTitle + "</li>";
    return ret;
}

The value of defaultFormName can be edit/display form name.

  • defaultFormName = "DefaultDisplayForm" will take you to the item display view
  • defaultFormName = "DefaultEditForm" will take you to the item edit view

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.