SharePoint: How to truncate a Multiline column and add a “More” link to the DispForm.aspx page to display the full text

 

The following is a quick solution to a little problem. It works for the lists I’ve tested with. Your results may vary… ;-) 

Before you read further:

• It does not work with the Links List
• This might not work with 2010 with the AJAX “Enable Asynchronous Load” checked (but it has worked with my limited testing)

 

The Goal:

• Truncate a Multiline column to “xx” characters
• Add a “More” link to send the user to the DispForm.aspx page to display the full text

A picture is worth a thousand words, so here’s two thousand worth…

The list before any edits:

  

 

The goal:

  

 

We want to take the text from a long multiline text column and truncate it to say 50 characters and then add a “More” link to take the user to the DispForm.aspx page so they can read all of the text. The JavaScript below is similar to many of the JavaScript “hacks” that I have posted before. It first searches for an HTML table with an attribute named “summary” that contains the name of the list. It then looks inside of this table for TR tags to find the rows. We then filter to only rows containing more than 2 TD tags. We then extract the HREF (URL) to the DispForm.aspx page that’s in the default link for the list item. Next we extract the long text from the text column (TD), shorten it to “xx” characters, append the “More” link using the HREF found earlier and then write this back into the DIV in the TD.

 

Steps:

Note: These steps show adding a Content Editor Web Part to hold the JavaScript. You can also edit the page in SharePoint Designer and add the code below just before then end tag of the PlaceHolderMain block.

1. Go to the page with the list displayed as a web part and click Site Actions, Edit Page
    
2. Add a Content Editor Web Part and move it below the list’s web part
    
3. For SharePoint 2007:
     - Edit the web part, click the Source Editor button and paste the JavaScript code from below
     - Edit the five variables (see notes below) 
   
   For SharePoint 2007 or 2010:
     - Copy the JavaScript code from below and paste into Windows Notepad
     - Edit the five variables (see notes below) 
     - Save or upload the file to a SharePoint library
     - Copy the URL for the file in the library (right-click the file and click Properties)
     - Return to your web part page, edit the Content Editor Web Part and paste the URL into the Content Link box
    
4. Test

 

The code:

 

You must change the following variables:

• var SummaryName – Make sure this is correct! The best way to get the correct text is to right-click on the page with the list web part and select View Source. Do a search for “summary=” and copy the name. SharePoint 2010 may add a space at the end of the summary name. Don’t delete this! Both versions will include the web part name and the list description as part of the “summary=”
• var ColumnWithDropDown and var ColumnWithLongText – Remember, the first column is #0 and the second is #1…
• var CharactersToShow – Just what it’s name implies… If the column as fewer than this many characters, then there is no change, but if more, then the column is truncated and a “More” link is added.
• var isEnhancedRichText – If the column is Enhanced Rich Text then the HTML is a bit different.

<script>
// CEWP trick from techtrainingnotes.blogspot.com!
// techtrainingnotes.blogspot.com/2010/12/sharepoint-how-to-truncate-multiline.html 

// Update the next five variables to match your list
var SummaryName = "Tasks Use the Tasks list to keep track of work that you or your team needs to complete." ;
var ColumnWithDropDown = 2;  //first column is 0
var ColumnWithLongText = 8;
var CharactersToShow   = 100;
var isEnhancedRichText = false;



var tables = document.getElementsByTagName("TABLE");
for (var i=0;i<tables.length;i++)
{
  if ( tables[i].summary == SummaryName )
  {
    var rows = tables[i].getElementsByTagName("TR");
    for (var j=1;j<rows.length;j++)
    {
      if (rows[j].childNodes.length > 2)
      {
        if ( rows[j].childNodes[ColumnWithDropDown ] == "[object Text]") 
          continue; // fix for FireFox

        var href = rows[j].childNodes[ColumnWithDropDown ].getElementsByTagName("A")[0].href
        if (href.toLowerCase().indexOf("dispform.aspx") == -1 && href.toLowerCase().indexOf("listid=") == -1  )
        {

          var docID = rows[j].childNodes[ColumnWithDropDown].childNodes[0].id

          // if not "dispform.aspx" then must be a library or links list
          // if "listid=" then must be a task list in 2010
          var parts = href.split("/");
          parts[parts.length-1] = "forms/DispForm.aspx?ID=" + docID;
          href = parts.join("/");
        }


        var theNode;
        if (isEnhancedRichText)
        {
          theNode = rows[j].childNodes[ColumnWithLongText].childNodes[0].childNodes[0];
        }
        else
        {
          theNode = rows[j].childNodes[ColumnWithLongText].childNodes[0];
        }
        if (theNode.innerHTML.length>CharactersToShow)
        {
          if (document.all)  // IE
            theNode.innerHTML = theNode.innerText.substring(0,CharactersToShow) 
            + "... <a href='" + href + "'><i>More</i></a>"
          else // FireFox
            try {
            theNode.innerHTML = theNode.textContent.substring(0,CharactersToShow) 
            + "... <a href='" + href + "'><i>More</i></a>"
            } catch (e) {}
        }
      }
    }
    
    break; // no need to check the other tables
  }
}

</script>

Code Notes:

• theNode.innerHTML = theNode.innerText… – This strips out all of the HTML formatting from the text and loads back the clear text and the MORE link
• if ( rows[j].childNodes[ColumnWithDropDown ] == "[object Text]")
  FireFox and ID handle white space differently.
• theNode.innerText vs. theNode.textContent – IE and FireFox don’t work the same (so what’s new…)

 

 

 

This has been tested on a handful of list types in SharePoint 2007 and 2010. If you had to adjust the code for one of your lists, then please post a few notes for other readers. 

 

.