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:

Slice Description without cutting words (de en)_1

After:

Slice Description without cutting words (de en)_2

Even with a tooltip:

Slice Description without cutting words (de en)_3

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here