Slice Description without cutting words (de)


Slice Description without cutting words de en Title
, , ,

Dieser Beitrag zeigt, wie du die Beschreibung verkürzt ohne dass Wörter auseinander geschnitten werden. Ausserdem wird die komplette Beschreibung in einem Pop-Up angezeigt.

Vorher:

Slice Description without cutting words (de en)_1

Nachher:

Slice Description without cutting words (de en)_2

Sogar mit Tooltip:

Slice Description without cutting words (de en)_3

 

Nimm einfach das unten stehende Javascript und verbinde es mit deiner Liste. Wie machst du das? Schau hier nach!

Wenn du Fragen hast, trau dich zu fragen oder kommentiere einfach den Beitrag.

// 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>";

}

Einfach, schnell und wirksam, das war ein afraIT Shorty. Mehr aus der Kategorie gibt es hier.

Leave a Reply

Your email address will not be published. Required fields are marked *