This blog post will show you how to make the description text shorter without cutting words in half and display the whole description text as a tooltip.
Before:
After:
Even with a tooltip:
Just take the Javascript below, save it and link it to your list. How to do that? Check my other blog post here!
// List View - Slice Long String Sample Without Cutting Words
// Patrick , afraIT.com
(function () {
// Create object that have the context information about the field that we want to change it's output render
var bodyFiledContext = {};
bodyFiledContext.Templates = {};
bodyFiledContext.Templates.Fields = {
// Apply the new rendering for "Beschreibung" field on list view
"Beschreibung": { "View": bodyFiledTemplate }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(bodyFiledContext);
})();
// This function provides the rendering logic
function bodyFiledTemplate(ctx) {
var bodyValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
// This variable is the maximum chars for the field
var llength = 25;
// This regex expression is use to delete html tags from the field
var regex = /(<([^>]+)>)/ig;
bodyValue = bodyValue.replace(regex, "");
var newBodyValue = bodyValue;
if (bodyValue && bodyValue.length >= llength)
{
// Slice the field, from 0 to llength (25)
newBodyValue = bodyValue.slice(0, llength);
// Don't cut the words in between
newBodyValue = newBodyValue.slice(0, newBodyValue.lastIndexOf(" "));
}
else {
return "<span title='" + bodyValue + "'>" + newBodyValue + "</span>";
}
return "<span title='" + bodyValue + "'>" + newBodyValue + " ..." + "</span>";
}
If you have questions, don’t be afraIT to ask or comment!
Easy, fast and powerful, that’s an afraIT shorty. More from this category here.