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ères actualité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?