SP2013 Custom View via JSLink TypeError issue

Question

I'm currently customizing a Library View, by using CSR and JSLink. The view is rendering items by "Modified" date DESC. The custom view has to display the 5 last modified pages, and the more recent one in top, with its publishing Image. The 4 others has to appear in a table.

I made my JSLink, it is read by the client, but all i get is "TypeError : Unable to get the property "title" from a null reference or undefined" (i don't know if this is the real english message, i'm translating it from french)

And nothing is displayed : nor my header nor my items, neither my footer.

Here is the JSLink i've made :

(function () {

    var itemCtx = {};
    itemCtx.Templates = {};


    itemCtx.Templates.Header = "<style>#Items{border:1px solid crimson;} #image{float:left;margin-right:15px;} #Titre{font-size:14px; color:crimson;} #dateModified,.sdateModified{font-size:10px} .secondaires{font-size:12px;}</style> <div><b>Derni&egrave;res actualit&eacute;s</b></div><table id='Items'>";

    itemCtx.Templates.Item = ItemOverrideFun;

    itemCtx.Templates.Footer = FooterOverride;

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

    function ItemOverrideFun(ctx) {

        var itemTpl = '';
        var index = ctx.CurrentItemIdx;

        if (index  == 0)
        {
            //opérations sur l'image : réécrire l'url afin de prendre la vignette, donner les bonnes dimensions. SINON, on pourra toujours utiliser le Rendition ID quand on en aura fait un.
            if (ctx.CurrentItem.PublishingPageImage != "<div dir=\"\" class=\"ms-rtestate-field\"></div>")
            {//if the user DID add an image to his page
                var image = ctx.CurrentItem.PublishingPageImage;
                var urlReplaced = remplacer(image);
                urlReplaced = remplacerAttribut('width','150',urlReplaced);
                var finalImage = remplacerAttribut('height','150',urlReplaced );        

                itemTpl = "<tr><td colspan='2'><div id='image'>" + finalImage + "</div><div id='maincontent'><div id='Titre'><b>" + ctx.CurrentItem.Title + " par <i>"+ctx.CurrentItem.PublishingContact[0].title+"</i></b></div><div id='dateModified'> le " + ctx.CurrentItem.Modified + "</div><div id='soustitre' >" + ctx.CurrentItem.Soustitre + "</div><div id='contenu'>" + ctx.CurrentItem.PublishingPageContent + "</div></div></td></tr><tr>";
            }
            else{
                itemTpl = "<tr><td colspan='2'><div id='maincontent'><div id='Titre'><b>" + ctx.CurrentItem.Title + " par <i>"+ctx.CurrentItem.PublishingContact[0].title+"</i></b></div><div id='dateModified'> le " + ctx.CurrentItem.Modified + "</div><div id='soustitre' >" + ctx.CurrentItem.Soustitre + "</div><div id='contenu'>" + ctx.CurrentItem.PublishingPageContent + "</div></div></td></tr><tr>";

            }

        }
        else
        {
            //on se farci les index pairs/impairs
            if (index%2==1){
                itemTpl += "<tr>";
                itemTpl += "<td class='secondaires'><div class='sTitre'><b>" + ctx.CurrentItem.Title + "</b> par <i>"+ctx.CurrentItem.PublishingContact[0].title+"</i></div><div class='sdateModified'> le " + ctx.CurrentItem.Modified + "</div><div class='sSoustitre'>" + ctx.CurrentItem.Soustitre + "</div></td>";
            } else {
                itemTpl += "<td class='secondaires'><div class='sTitre'><b>" + ctx.CurrentItem.Title + "</b> par <i>"+ctx.CurrentItem.PublishingContact[0].title+"</i></div><div class='sdateModified'> le " + ctx.CurrentItem.Modified + "</div><div class='sSoustitre'>" + ctx.CurrentItem.Soustitre + "</div></td>";
                itemTpl += "</tr>";
            }

            //Le dernier ferme la div
            if (index == 5){
                if (index%2==1){
                    itemTpl += "<td></td></tr>";
                }
            }   
        }
        return itemTpl;
    }

    function FooterOverride(ctx){
        footerHtml = "</table>";
        footerHtml += RenderFooterTemplate(ctx);
        return footerHtml;
    }

    function remplacer(chaine){
        //Récupération de l'url
        var reg = /src="(.*?)"/g;
        match =reg.exec(chaine);
        var url = match[1];

        //Traitemtement sur l'url, rajout du /_t/
        var tab_path = url.split('/');
        tab_path[tab_path.length -1] = "_t/"+tab_path[tab_path.length -1];
        var new_url = tab_path.join('/');

        //Traitement sur l'extention
        var reg = /^(.*)\.([a-zA-Z0-9]*)$/g;
        match =reg.exec(new_url);
        var url_start = match[1];
        var url_extention = match[2];
        var url_final = url_start+'_'+url_extention+'.'+url_extention;

        //Remplacement dans la chaine de l'url source par la desti
        chaine = chaine.replace(url, url_final);
        return chaine;

    }
    function remplacerAttribut(attribut, valeur, chaine){
        var reg = new RegExp('^(.*?'+attribut+'=")(.*?)(".*$)',"img");
        chaine = chaine.replace(reg, '$1'+valeur+'$3');
        return chaine;
    }

I've checked my ctx.CurrentItem and all my informations are here. Do you have any idea on how i could debu this TypeError, please?

Answer 1

Most probably this error occurs at the line where you are getting Publishing Contact title: ctx.CurrentItem.PublishingContact[0].title. If Publishing Contact field value is not specified then the specified error will occur.

Solution

Replace every occurrence of ctx.CurrentItem.PublishingContact[0].title with

getContactTitle(ctx.CurrentItem.PublishingContact)

and add the function:

function getContactTitle(contact)
{
   if(contact.length > 0)
     contact[0].title;
   return "";  
}