1

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?

0

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 "";  
}
  • 1
    Thanks for the answer @Vadim Gremyachev, I've search in the ctx if there was a Publishing Contact, and there was one, with a title, that is why i don't understand this error. But i've tried your solution and it works well! So thanks a lot, even if i don't understand why... But you avoided me a headache. I'll keep on searching, but for now you saved me! – Gaelle Jan 13 '15 at 14:06

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.