Pages

12/28/2010

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.

Go to the page with the list displayed as a web part and click Site Actions, Edit Page

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

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.

Mike - awesome script. I got it work on one list, but not on a similar one. an alert did confirm it found the dropdown, and the length of the text is definatley longer than CharactersToShow, though I could not get this alert to fire: alert(theNode.innerHTML.length);

When I debugged, I found out that tables[i].summary is keep outputting 'Undefined'. I can see by viewing source that there is a table with ID and summary="ListName" but for every table it says the summary is undefined.

This is the column that includes things like "edit properties", Delete, etc. When creating a view this column is called "Name (linked to document with edit menu)". This dropdown is also often called the ECB or Edit Control Block, but most just refer to it as the "item's dropdown menu".

This column is needed as we need something that includes the URL to the complete list item.

What did not work the first time? Your additional code refers to a variable that is not initialized. Are truncating two columns?

> The "List Tools" menu item at the top isn't visible anymore (no matter if one or more columns were limited).

It sounds like you added the CEWP to a View page instead of a web part page or the home page. This is a known bug in 2010. Adding any web part to a View page breaks the automatic display of the ribbon. You can click in a row of the web part to display the ribbon.

Hi, I have followed your directions which are very nicely done by the way, but I can't seem to get this to work. I'm working in SP 2010 and am trying to put together a newsletter. I will only be displaying 2 columns(Title and Body which is a rich text multi line). The purpose of this is exactly what I'm trying to do with it but I can't seem to get it to work. Below are the variable I have used, is there anything more I need to adjust.var SummaryName = "XXX XXXXXX XXXX ";var ColumnWithDropDown = 0; //first column is 0var ColumnWithLongText = 1;var CharactersToShow = 40;var isEnhancedRichText = true;

One thing I just came across was a problem with the column that I wanted to be abbreviated staying at the normal length (aka not shortening to the length I wanted). It was only after I changed some options in the webpart I was trying to control that it updated. Whatever webpart you are trying to control with this javascript, make sure you uncheck "Enable Data View Caching" under the Miscellaneous section of the Edit Web Part box. Hope this helps some people.

>All - has anyone got this to work with FF, Chrome, mobile Safari (iOS on iPad)?

Thankfully the code allows the page to render normally on other browsers, but it would be nice to be able to do the More display for all browsers like it does in IE. Chrome/FF more important to me than iOS.

Hi,Does this actually work with Sharepoint 2007 MOSS OOB???? I have been able to get javascript to work with a CEWP before, but this one just doesn't want to seem to work no matter how I tweak it. Thanks! -Karen

HiI am trying out your code but really having trouble with identifying the column "ColumnWithDropDown". I am on a default.aspx home page with a XsltListViewWwebpart based on an Annoucement list using columns as follows:0 Title1 Created by2 Created3 Body

I created a custom view of an announcement webpart to be displayed on the homepage of my SP 2010 site. In this view I only diplay the body text, which is multiple lines of rich text. In the variables, should I be referring to the columns in the homepage view or the columns in the original web part? Either way so far I can not get either to work.

I have not tested with 2013, but based on some other testing it should work with lists, but might not with libraries. I will be reviewing each of these as I work on the 2013 version of my book and I'll update this post when I have tested it.

Group By is a problem. The data is not downloaded until the group is expanded. We would have to find SharePoint's JavaScript that's called when you click the group heading and customize that to make our changes on each click. The only excepion is if the groups are all preexpended, but that tends to defeat the purpose of using groups.

Click the CEWP's dropdown menu at the top right of the web part and click Edit Web Part. Scroll to the far right of the page and you will find the properties box. Paste the URL to the code file into the Content Link box.

That's ColumnWithDropDown, not Column Width DropDown. Yes, its the column the user can click on to go to the item. The JavaScript needs to find the URL to the item and that's available from the dropdown column.

What's the URL generated for the More... link? Mouse over it, right-click, select Properties and copy the URL. (you may want to remove the server name and just post what follows after the first "/" in the ULR).

I am working with SP 2010 with AJAX feature, and I wanted to know is there a code that I can use to achieve these results. I can edit the homepage code in SP designer or insert an html code directly into the page editor, but I can't insert a webpart. The SP license is owned by the company I work for and it is limited, but I have down some simple html testing.

I tried with no luck in implementing a "collapse" logic for the list, once I have pressed on more. Should I write a separate JS for this or can a logic be implemented within the same? Would you be able to help? Thanks in advance.

Your script is great is works even for several WebParts. I just copied the script in the notepad and changed the name, columns are always the same for the WPs. Is there a more elegant to do this, so only open a new script once ? It doesnt work unfortunately in case there is (1) a space in the list's name, (2) the original name has been modified or (3) in case (as some more readers pointed out) items are grouped. Do you have any solutions for either (1-3) of these issues?

The code works great. However, I have a page with two different views of the same list in different webparts. Therefore, both summary tags are the same. When I put this code on the page, it only truncates the first few on the page and not the second.

I added the code twice to see if that would do anything, but no luck. Is there anyway to apply this modification in both views in this situation?

Hi, maybe it helps: i used this example for SP 2010, Blog-Site, Posts-List.The first column was Nr. 1, not 0.And the summary-name was without an additional space at the end. (SummaryName="Posts Use the Posts list for posts in this blog.")

So, if it doesn't work just try it out a little or debbug the script with alert messages. :)

Just can't get it to work. I know the summary is correct. I only have 2 columns, Name and description (long text). Tried 0 & 1, 1 & 2, others based on Grouping possibly adding to the numbers. Summary is correct (has space at end). Just can't figure it out

so i'm new at this and i'm trying to get the exact effect for three columns w/ enhanced text. I'm working with SP 2013 server. I am unable to find SummaryName in the background, as prescribed? Also i was informed that this works w/ script editor web part on SP 2013 vs CEWP? any truth in that? Please help. Thanks.

The following script works in SP 2013 and truncates the contents of columns (specified by their index in the colsToTruncate variable) down to the characters in the charactersToShow variable for list views of the specified list/library in the listName variable. It relies on jQuery and can be placed in a CEWP on any list/library view page.

Hi Mike, I'm using SP2010...in Column 3 is my title, in 4 my multiline-richtext.... I've tried everything but it does not work as it does on other task lists...Did anyone else had a Problem with a specific list?

I can't get it to work on a custom list with a multiple lines column. Only on an announcement list? Is this because of the type? Which types are allowed or is there a workaround to use it for a custom list?

Hey Mike,first of all, thanks for this script! Really helpfull.Unfortunately though klicking on "more" always opens the elements information in my case.It does not expand the column, I´m just forwarded to the informations of the item just like clicking on the Title itself.Can u help me here? Did I miss anything?

Just found this and it is brilliant - thanks Mike! Works like a charm in IE, though our Chrome users find that the items are not truncated on the first list view page, yet they are on the second. Any suggestions for getting this to work in Chrome? Would be a massive help, thank you!

Jo,Sounds like it is working as designed - the benefit is that it truncates the multi-line column data in the list view to save space, and gives you the "More" link.

However, in the Comments section Mike provided guidance to alter the "More" behavior - it allows you to mouse over the "More" link for a preview of the full text, AND when you click "More" it expands that column's data in the list view.

Look at his comment on May 15, 2013 (I can't paste the code here unfortunately). Good luck!

I love this script. It worked great, but I can't find a way to collapse the column after clicking off. I noticed someone else asked this question previously, but I don't see a response. How can the script be modified to collapse when the user clicks off, or any other logic you think would work better. Thanks in advance.

I loved this script with the add-on to expand the text instead of opening the display form. Like someone else posted earlier, I would like to be able to collapse the field back with some sort of logic (clicking off, or whatever you think makes the most sense).

I've read everything here. I KNOW THIS IS MY ANSWER! But alas I am stuck.1. I have a sharepoint with multiple pages2. Under lists I have Issue Tracker 3. I did not have a column width dropdown field (but added it to my view) and it would be column 04. I have two memo fields but working on the first field and it would be column 95. Copied code to wordpad 6. changed dropdown to 0 and withlongtext to 97. (I am sure this is where I am going wrong) I saved the text file to my desktop8. uploaded the file to one of the pages I have document library (because when I add it to my list view I lose the menu options at the top). WHERE AM I SUPPOSED TO UPLOAD THE WORDPAD FILE?9. Then I add a web part to the main page for my site and reference the path i got from properties when I uploaded the doc10. then I go to the view for my list and NO GO.

I KNOW it is probably simple PLEASE SAY IT IS ISMPLE I have been trying to do this for 4 hours!

I am trying to do this both ways. Via SPD 2010 and a Content Editor Web part. I have already gotten myself lost using SPD 2010 and am relying on the Content Editor Web Part now. I have created the web part and placed it at the bottom of the page. I have populated Notepad with the required Script and saved it as a .txt and a .html because I didn't know which to choose. I believe the code is correct I just have a few specific questions.-What does "var ColumnWithDropdown" and "var ColumnWithLongText" mean?-I have the default "ID" column as my first column in the list. My long text column is the 8th column in the list. Does this mean my long text should be column 7 via the code?-Would it be a problem if I had another Content Editor Web part at the bottom of the page running its own script? [via your article on moving the "Add new item" button to the top] Any assistance is very much appreciated! Thanks. -Derek S.

Thanks for the great script. The script is working fine in SharePoint 2013 for me. But the major challenge I am facing is that the Ribbon is getting hidden in all the views where this script is implemented. All the lists are custom lists.

Two most common issues:1) The web part must be below the list web part.2) The SummaryName must be correct.

I see you have the space after the summary name, so you have probably checked the name in the page's source. But just in case:

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=”

Hello Mike,I am trying to use this solution on a list that I have created in SharePoint 2013.I am having trouble getting the summary name. I have gone to the page and right clicked on it but all I come up with is a reference to summaryLength when I right click on the page and select View Source.Is there another way to get the summary name?

created a pageuploaded a js file with the contents of your scripteditted page inserted list and cewp below pointing to your script fileload page, view source .. search for summary= and the only one looks like: