I am working on an online sharepoint custom list. and we are rendering our list inside the classic UI. now inside the custom list's list view we have 3 fields of type multiple line of text. And if the users enter long text inside these list fields, the list view will become hard to track. as a single item inside the list view can consume the whole screen. so i find this JSLINK to truncate the data :- https://code.msdn.microsoft.com/office/Client-side-rendering-code-93e7077d , now i tested it inside our list and it was able to truncate the multiple line of text, here is the script:-

(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 
        "CustomerFeedback": { "View": bodyFiledTemplate } 
// 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>"; }

But i have these 2 issues:-

  1. If the multiple line of text field contain for example bullets points or new line, then the truncated text + the tool-tip will ignore them. i think the truncate will just render plain text rather than a real HTML. so can i fix this issue inside the above script? now i tried to remove this bodyValue = bodyValue.replace(regex, "");, but this will result in showing the actual html source with its tags inside the tool-tip.

  2. Second point, if i want to apply the truncate to 3 fields of type multiple-line of text, then can i do so inside the above script? or i have to load 3 multiple jslinks?


Do you need to use JsLink? I succeeded on this in the past with CSS -->

thought I had to share, hope it helps you as a workaround

(this will truncate (but maybe not character wise) and then expand when you hover over it ;)

/*.ms-itmhover is the TR row*/
.ms-vb2  .ms-rtestate-field{
.ms-vb2  .ms-rtestate-field:hover{

  • yes i have to use JSLINK to customize the list view!! but what is the realtion between ur answer and my question... – John John Mar 13 '19 at 16:00
  • You can still use jslink to customize the list view, The relationship to your questions is that if you use the CSS as a workaround you won't have to deal with the issues.... – Jaime Arroyo Garcia Mar 13 '19 at 16:05
  • this will fix part of the issue.. and what abotu showing the full text as tool-tip? – John John Mar 13 '19 at 16:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.