Edit - Code Updated

Now I can show the title and body of the of list item using:

return ctx.CurrentItem["Title"];

But I can't get the "Message Type" property

Original -

I'm not sure if this is a javascript or SharePoint question but have added it on this site as I think it's the Sharepoint syntax that is causing me problems.

I'm trying to follow a tutorial, linked below, that allows me to change the appearance of the Announcements list on the home page. My trouble is that the values returned in the function are all undefined.

I have tried many options including ensuring the fields are readable in the list view and trying to debug the code but to no avail.

Here is a screen shot of my announcement list setting view.

Here is the code in my homepage_message_override.js that I am testing with; (Edited)

// The file has been created, saved into "/Style Library/"
// and attached to the XLV via JSLink property.
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {
function getBaseHtml(ctx) {
return       SPClientTemplates["_defaultTemplates"].Fields.default.all.all[ctx.CurrentFieldSchema.FieldType][ctx.BaseViewID](ctx);


function init() {


  // OnPreRender: function(ctx) { },

  Templates: {

  //     View: function(ctx) { return ""; },
         Header: function(ctx) { return "<div class='center'>"; },
  //     Body: function(ctx) { return ""; },
  //     Group: function(ctx) { return ""; },
         Item: function(ctx) { return announcementSorter(ctx) },
  //     Fields: {
  //         "<field internal name>": {
  //             View: function(ctx) { return ""; },
  //             EditForm: function(ctx) { return ""; },
  //             DisplayForm: function(ctx) { return ""; },
  //             NewForm: function(ctx) { return ""; }
  //         }
  //     },
         Footer: function(ctx) { return "</div>"; }


  // OnPostRender: function(ctx) { },

  ListTemplateType: 104


function announcementSorter(ctx) {
    return ctx.CurrentItem["Message Type"];

     RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/test.js"), init);


This all outputs the following;


Tutorial Link for reference: https://www.c5insight.com/Resources/Blog/tabid/88/entryid/653/how-you-make-sharepoint-announcements-grab-attention-easily-using-csr.aspx


2 Answers 2


The tutorial you linked to instructs you to add a column to your announcements list called "Message Type".

What you have to be aware of is that in the CSR code, you need to be referencing the internal name of the column, and you also need to be aware of some of the idiosyncrasies of how SharePoint names columns when you add them from the UI.

If you notice in the tutorial, their code references:


Notice how there is no space in the field name - no space between the word "Message" and the word "Type".

This shows that they added the column to the announcements list using a best practice technique of using no spaces when initially naming columns.

What happens in SharePoint is that there is a display name for a column, and an internal name. The internal names cannot have spaces. So, when you go to add a new column, if you name it "Message Type" (with a space), SharePoint will fill in that space with an encoding when it sets the internal name of the column, and the resulting internal name will be Message_x0020_Type.

This is why it's a best practice to create columns initially with no spaces in the name - the resulting internal name will not have the extra characters from the encoded space.

So in this case, the people who wrote the tutorial probably added the column to the list, and when they initially created it, they named it "MessageType" (no space). Then after creating it, they went back and edited the name of the column to be "Message Type" (with a space). This results in the column having a nice display name with a space, but with an internal name of MessageType.

So, in your case, if you did not know about that and created the column initially with a space in the name, you have to acount for that encoding, and in your CSR code you have to use this:


If you ever need to check what the internal name of a column is, you can do that by going into the list settings (or site settings) and clicking on a column name to edit it. When you are on the page where you edit the settings of the column, look at the URL in the address bar of your browser. There will be a query parameter Field= and then the internal name of the column.

  • I just changed his tiny screenshot of the View settings and realized the same. Always do console.log(ctx.CurrentItem) to see what you can work with Mar 22, 2017 at 14:14

If you do not want to waste 80% of your development time on simple issues

Then install the WYSIWYG editor:

"Cisar" Chome Extension for developing CSR/JSLink

Source code & Documentation: https://github.com/andrei-markeev/cisar

Chrome Extension Store: https://chrome.google.com/webstore/detail/cisar/nifbdojdggkboiifaklkamfpjcmgafpo

Answering your questions

  • MessageType is undefined

    The CSR CurrentItem only includes Fields displayed in the View,
    So if Message Type is not in your View, then you can not access it.
    Workaround is to include a CalculatedColumn in your View and Built all the Item Fields you need (but Formulas can not reference Lookups and other Complex fields) as one big Data-string you then can use in CSR code

    I took a closer look at your View.
    You need to use the Internal Name for 'Message Type'
    Do a console.log(ctx.CurrentItem) to see what's available by what name

  • Thanks for showing this extension, it's helped a lot! I have updated my code above as there is still an error I can't solve.
    – ChrisBull
    Mar 22, 2017 at 13:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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