How to show the first N characters of my Description field inside the list views?

Question

I am working on a Team site inside SharePoint server 2013. And on the list views I am showing the Description field, which is of type enhanced rich text. Currently we are facing these problems:-

1. If users add long text inside the Description field the whole list view will became not very user friendly.

2. On small sized screens the Description field will expand vertically instead of horizontally , also causing the whole list view to be out of layout.

So can anyone advice, on how to find a solution. I was thinking if this is possible or not:-

1. To force the Description field to show only the first n characters (let say the first 200 characters) and without any images when it is being displayed inside the lists’ views. And if the user click on the list item or edit the item then the full Description will be shown? I am using an on-primise deployment so I have full control over the farm

Answer 1

You can use CSR to show first N characters.

(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 Body field on list view 
        "Body": { "View": bodyFiledTemplate } 
    }; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(bodyFiledContext); 

})(); 

// This function provides the rendering logic 
function bodyFiledTemplate(ctx) { 

    var bodyValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 

    //This regex expression use to delete html tags from the Body field 
    var regex = /(<([^>]+)>)/ig; 

    bodyValue = bodyValue.replace(regex, ""); 

    var newBodyValue = bodyValue; 

    if (bodyValue && bodyValue.length >= 200) 
    { 
        newBodyValue = bodyValue.substring(0, 200) + " ..."; 
    } 

    return "<span title='" + bodyValue + "'>" + newBodyValue + "</span>"; 

} 

Have a look here.

Update

There is similar question with answer