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:

   image

 

The goal:

   image

 

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. 

 

.

119 comments:

Anonymous said...

can this work if there is more than one column that has long text?

Mike Smith said...

> more than one column

Yes, but the JavaScript will need to be updated a bit. I'll see if I can update it in the next few days.

Mike

Anonymous said...

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);

HabsFan said...

I have followed your steps but no luck.

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.

I will keep digging :)

Thanks

Mike Smith said...

HabsFan,

If you are working in 2010 then there may be an extra space after the name: summary="ListName "

Mike

Unknown said...

Mike:

I am following your steps but no luck either usin MOSS 2007. When you add the WebPart is this on a new page or the DispFom.aspx? The Column order comes from the webpart or the actual List?

Mike Smith said...

Manny,

> When you add the WebPart is this on a new page or the DispFom.aspx

You add the CEWP and the JavaScript to any page that displays the list as a web part. DispForm.aspx displays a single list item and we generally don't want to truncate text there.

> The Column order comes from the webpart or the actual List?

The columns mentioned here are from the view used in the list web part. If the text is in the second column, then enter "1".

Make sure the CEWP is placed below the list web part.

Mike

Anonymous said...

Hi,
Which column is the var ColumnWithDropDown refering to?

Thanks,
Dhruv

Mike Smith said...

> Which column is the var ColumnWithDropDown refering to?

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.

Patrick said...

what's the purpose of this example. What's append if the SharePoint user change the order of SharePoint list, or if he hide one column.

Mike Smith said...

Patrick,

> what's the purpose of this example.

To create a more compact display of a list.


> What's append if the SharePoint user change the order of SharePoint list, or if he hide one column.

The user in that case is the site owner. I.e. the person who customized the list or added the JavaScript. A change in one requires a change in the other.

Mike

Anonymous said...

I am able to get this to work; but, how would I truncate more than one column? Please help!

Mike Smith said...

Anonymous,

> how would I truncate more than one column?

The following has not been tested, but should work. Basically duplicate a few lines (new lines in bold).

var ColumnWithLongText = 8;
var ColumnWithLongText2 = 9;
var CharactersToShow = 100;
var isEnhancedRichText = false;
var isEnhancedRichText2 = false;

...
...

if (isEnhancedRichText)
{
theNode = rows[j].childNodes[ColumnWithLongText].childNodes[0].childNodes[0];
theNode = rows[j].childNodes[ColumnWithLongText2].childNodes[0].childNodes[0];
}
else
{
theNode = rows[j].childNodes[ColumnWithLongText].childNodes[0];
theNode = rows[j].childNodes[ColumnWithLongText2].childNodes[0];
}


Mike

Anonymous said...

Hi Mike,
How would you do this on a web part (e.g. annoucement list) on the main/home page?

Thanks
David C.

Mike Smith said...

David,

Just create a new view on the Announcements list and use it in the web part. Then just follow the steps above.

Mike

Colin Watson said...

Hi Mike,

I am updating to add a 2nd line as per your above reply, I updated the 3 parts you suggested, however now my 2nd column works ok, but the 1st one defaults back to normal.

Can you assist?

Colin Watson said...

Also Mike,

We have our list set up by Grouping. When I put in this script it doesn't allow it to work, is there anyway around this?

Katrin said...

For limiting two columns:

The code from Mike Smith doesn't work. I've added the following lines after line 64 (Mike's changes in bold already done). Now it works.

if (theNode2.innerHTML.length>CharactersToShow)
{
if (document.all) // IE
theNode2.innerHTML = theNode2.innerText.substring(0,CharactersToShow)
+ "... More"
else // FireFox
try {
theNode2.innerHTML = theNode2.textContent.substring(0,CharactersToShow)
+ "... More"
} catch (e) {}
}

Also add "var theNode2;" after "var theNode;".

I can't believe I did this on my own!

Katrin said...

I'm facing an enormous problem after I've done these changes: The "List Tools" menu item at the top isn't visible anymore (no matter if one or more columns were limited).
What can I do?

Mike Smith said...

Katrin,

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.

See here for more: http://techtrainingnotes.blogspot.com/2010/08/sharepoint-2010-missing-view-dropdown.html

Mike

Katrin said...

Yes, I'm trying to limit two columns. As I used your code for two columns only one of them was limited (the second one).

> Your additional code refers to a variable that is not initialized.

You mean "theNode2"? I've added it after "var theNode;". Isn't that initializing?

My "version" worked, except from the "List Tools" issue.

Yes, I've added the CEWP to a View page. Didn't know that was wrong. Thanks for your hints. I'll try that.

Mike Smith said...

Katrin,

> You mean "theNode2"

Yes, you probably have a line in your updated code something like:
theNode2 = something

> Yes, I've added the CEWP to a View page. Didn't know that was wrong. Thanks for your hints. I'll try that.

Not wrong, and worked real well in SP 2007. Just a "bug" (undocumented feature) in SP 2010.

Shameless book plug... you will find a lot of this kind of info in my book... :-)

Mike

Katrin said...

Hi Mike!

I've just added your book to my favourites. It already helped a lot. I'm sure I will be able to fix this smaller issue. If not - I'll come back to you here. ;-)

It's quite hard to find reliable assistance for SP 2010 problems. I'm glad you're publishing simple solutions here. And many thanks for your quick resonse as well. =)

Katrin

Anonymous said...

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 0
var ColumnWithLongText = 1;
var CharactersToShow = 40;
var isEnhancedRichText = true;

Mike Smith said...

Anonymous,

> var SummaryName = "XXX XXXXXX XXXX ";

The most common problem with web part "tricks" is getting the Summary name right. Make sure you copy all of it, including the period at the end, if there is one.

Copy it instead of typing it as there is sometimes two spaces between the title and description parts. Also the capitalization must be correct.

Mike

Jatin said...

Another important thing to note.. If you have a 'checkbox' and/or attachment visible in your view, that will be counted as a column too!

Great article..Thanks Mike.

Justin Williams said...

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.

Mike Smith said...

Justin,

Good catch! And... one more thing to add to by to do list.

Caching and AJAX loads of lists depend on JavaScript that is run after the page (and my code above) has loaded.

Mike

Lee Gaupp said...

>Mike - cool tweak to SP, working great for me.

>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.

Anonymous said...

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

Mike Smith said...

Karen,

There are three common errors with these kinds of projects:

1) the CEWP must be placed below the web part it's changing

2) the Summary variable must be correct. Use the View Source option of your browser to search for "summary=" and copy the text including any dashes and spaces.

3) make sure your column numbers are correct. The first column is column 0. You have to count every column including the checkbox column, the paperclip / attachments column, etc.

Mike

Louis said...

Hi
I 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 Title
1 Created by
2 Created
3 Body

I don't suppose you could help me out? Thanx in advance :-)

Mike Smith said...

Louis,

The dropdown column is most likely the Title column in your list. To check this, edit the view in the web part and confirm that you have "Title (linked to item with edit menu)" selected.

Mike

Louis said...

Hi Mike;
No the column is only "Title", should I change it to the one with the edit menu?
Thanx :-)

Mike Smith said...

Louis,

Yes, that's how the code gets the URL to use with the "more" link.

Mike

Anonymous said...

Hi Mike,

Thanks for this!

I built an Infopath form with multiple fields, then used a SPD workflow to concat some of the fields. I had three of these I wanted to truncate in the "All items" view.

Worked as planned for column 1. When I added column 2, per your post of June 28, 2011 10:02 PM, only column 2 truncated, but column 1 didn't. Same thing I added column 3.

Tried several work arounds. Finally simply added three instances of the script, each set to truncate a different column. Was pleasantly surprised that it worked!

John

Anonymous said...

Mike,
Is there a way for this code to work in a list when grouping is being used? Colin asked the question a while back but I didn't see a response to it.
Thanks,
Mike D.

Mike Smith said...

> Is there a way for this code to work in a list when grouping is being used?

Not this exact code, but something similar would be able to do it. I'll take a look, but it will be a while...

Mike

Anonymous said...

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.

My variables:
var SummaryName = "CEO Notes " ;
var ColumnWithDropDown = 3;
var ColumnWithLongText = 4;
var CharactersToShow = 35;
var isEnhancedRichText = true;

Thank you in advance for any/all assistance you or fellow readers can offer.

TFox

Anonymous said...

This script works perfectly fine on the default "all items" view list.

However, i have a customised view and its not working for me.

please advice how i can get the scipt to look at a customised view.

Much appreciated

Mike Smith said...

Anonymous,

What was the customization?

Mike

Unknown said...

Does it work with sharepoint 2013?

Unknown said...

Does it work with sharepoint 2013?

Unknown said...

Does it work with sharepoint 2013?

Mike Smith said...

Rodrigo,

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.

Mike

Anonymous said...

The customization is an additional view i created which displayes all items without folders in that list.

Alen said...

Hi Mike

The customization is a customized view that has a count and displays all items outside folders.

Ive exausted all means to get it to work...

Any suggestions?

Regards
Alen

Unknown said...

Dear Mike,

I have the same problem as some others. This script works perfectly fine on the default "all items" view list.
However, i have a customised view and its not working for me.

The customization mean nothing else, than: "Create a view", and show some fileds, from the all fields. For example, "Title" and the Longtext....

Could help me what is the different between Allitems and the other view? (I have seen the source and Summary is the same.)

Thank you in advance !
László

Unknown said...

Dear Mike,

I have the same problem as some others. This script works perfectly fine on the default "all items" view list.
However, i have a customised view and its not working for me.

The customization mean nothing else, than: "Create a view", and show some fileds, from the all fields. For example, "Title" and the Longtext....

Could help me what is the different between Allitems and the other view? (I have seen the source and Summary is the same.)

Thank you in advance !
László

Unknown said...

Dear Mike,

I have the same problem as some others. This script works perfectly fine on the default "all items" view list.
However, i have a customised view and its not working for me.

The customization mean nothing else, than: "Create a view", and show some fileds, from the all fields. For example, "Title" and the Longtext....

Could help me what is the different between Allitems and the other view? (I have seen the source and Summary is the same.)

Thank you in advance !
László

Mike Smith said...

László,

Make sure when setting these vars that you count all columns.

var ColumnWithDropDown
var ColumnWithLongText

Columns include the Attachements column, the checkbox column, etc.

Also, the ColumnWithDropDown must be a column with a dropdown or link such as "Name (linked to document with edit menu)".

Also remember that JavaScript counts from zero, to the third column is column 2.

Mike

Anonymous said...

Mike

I have also customized the view by adding a count feature and I think because of this its not working...

please help..

thanks

Shakil

Mike Smith said...

Adding counts and grouping or changing the Style will make major changes to the HTML generated for the web part. I would need to exactly what you have changed.

In the case of the Count, just after this line:

if ( rows[j].childNodes[ColumnWithDropDown ] == "[object Text]")
continue; // fix for FireFox

Add this line:

if ( rows[j].childNodes[ColumnWithDropDown ].getElementsByTagName("A").length == 0 )
continue; // ignore count row

Mike

Anonymous said...

Mike

Thanks a bunch, works perfectly fine now!!!

Much appreciated

Shakil

Unknown said...

Dear Mike,

Yes, I take care count columns.
My customized view uses "Group by", that means the rows grouped by a field. Maybe this could be the problem, could you help me on that?

Regards, László

Mike Smith said...

László,

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.

Doing this with Groups is possible, but I don't have a quick answer.

Mike

Anonymous said...

HI Mike, I really hope I can get this to work. I am more of a SP newbie. I'm not sure where in the CEWP tool to place the link. Could you add a picture?

Mike Smith said...

Anonymous,

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.

Mike

Anonymous said...

I am very Green with sharepoint & I am hung up on the ColumnwidthDropDown and do not understand what this refers to. My ColumwidthLongText = 25 which refers to the column I need to truncate.

Is the ColumnwidthDropDown refering to a column which may contain a dropdown?

TIA
Jim

Mike Smith said...

Jim,

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.

In the example above the dropdown column is the "Title" column.

Mike

Unknown said...

Hi Mike,


I used your code successfully.

But when clicking on "more..." I would like to open the item in "View" mode instead of "Edit".



I am also looking for either hide the "ColumnWithDropDown" column.



In my case, I have two columns: "description" the one that need to be truncated and a URL link column.


In SP Designer I set the "linktoitem" on the description column but it does not work (I update the code accordingly)

the two columns in the view are the following:



Shakil said...

Hi Mike

This is regarding another topic however i couldnt locate it.

How can you hide or remove the toolbar on a SP2010 List display form.

I dont want the users to see the 'Approve/Reject' and 'Workflows' option on the disp.aspx, new or edit.

Please guide me.

Much appreciated

Shakil

Amy said...

I've gotten my to work, but only on one column. I followed all the instructions listed in the comments to get another column to truncate and it won't work. Suggestions?

Amy said...

Finally got this to work like I want it to, but the "More" takes you to an error page, not the item. Help?

Mike Smith said...

Amy,

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).

Mike

da-admin asst said...

Hi Mike,

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.

Thanks

Vibushan L Narayan said...

Works amazing! Thanks Mike.. although.. WOuld I be able to make it expand inline instead of opening a separate page?

Mike Smith said...

Vibushan,

> expand inline instead of opening a separate page

Yes, great idea! Just replace this:


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) {}


with this:

if (document.all) // IE
{
theNode.title = theNode.innerText;
theNode.innerHTML = theNode.innerText.substring(0,CharactersToShow)
+ "... <a onclick='this.parentNode.innerText=this.parentNode.title' href=''><i>More</i></a>"
}
else // FireFox
try {
theNode.title = theNode.textContent;
theNode.innerHTML = theNode.textContent.substring(0,CharactersToShow)
+ "... <a onclick='this.parentNode.innerText=this.parentNode.title' href=''><i>More</i></a>"
} catch (e) {}


This does two things:

- Displays the full text on mouse-over of the shortened version
- Expands the text inline when clicking "More..."


Mike

Vibushan L Narayan said...

Works beautifully! I'll try and see if I can implement a "Less" logic to collapse the column again :) Thanks a million Mike! (Bookmarked your page for continuous reference!)

Anonymous said...

Hi Mike

How do I get this working for a single line of text?

I've tried targetting that column but no luck.

Jack

Mike Smith said...

Jack,

> How do I get this working for a single line of text?

Set the variable isEnhancedRichText to false then change this line:

theNode = rows[j].childNodes[ColumnWithLongText].childNodes[0];

to:

theNode = rows[j].childNodes[ColumnWithLongText];


Mike

Vibushan L Narayan said...

Hi Mike,

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.

Jack said...

Hi Mike

Thank you, works great!

Jack

Suolon said...

Hi Mike,

I'm trying this on SharePoint Online 2013 (Office 365), but it doesn't seem to do anything at all :(

Should this be working for SharePoint Online 2013 as well?

Suolon said...

Hi Mike,

Thank you for this post. I'm trying to do this on SharePoint Online 2013, but it doesn't seem to do anything at all, it's like it's not even doing any changes at all.

Should this work on SharePoint Online 2013 (Office 365)?

Unknown said...

Hi Mike,

Have you gotten a solution yet to the issue where it won't work on Sharepoint 2010 when there is a column that is Grouped?

Thanks for your help. Great post.

Jay

Mike Smith said...

Jay,

Sorry, but I have not. Part of the challenge is that groupped sections are loaded asyncronously and will require more complex JavaScript.

It's on my "to-do" list, but that's a long list right now.

Mike

Anonymous said...

Dear Mike,

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?

Joe said...

Mike,

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?

Anonymous said...

Works in Office 365.

Could really use the Group By solution, though. Is that on the horizon any time soon?

Vu Compra said...

Dear all,

The script does not take over enhanced rich text unfortunately. Even not if the variable is changed from false to true. Did somebody found a workaround?

BR,

Vu Compra

PS. Using truncate on multiple list is possible by adding a table to the script:

// Update the next five variables to match your list
var SummaryNameArray = ["Project Status ", "Agreement ", "Actions ", "Issues ", "IssuesAssigned ", "Risks & Dependencies "];
var ColumnWithDropDownArray = [4, 2, 3, 3, 3, 3];
var ColumnWithLongTextArray = [2, 5, 4, 4, 4, 4];
var CharactersToShowArray = [280, 280, 280, 280, 280, 280];
var isEnhancedRichTextArray = [false, false, false, false, false, false];

for (var idx = 0; idx < SummaryNameArray.length; idx++) {

var SummaryName = SummaryNameArray[idx] ;
var ColumnWithDropDown = ColumnWithDropDownArray[idx];
var ColumnWithLongText = ColumnWithLongTextArray[idx];
var CharactersToShow = CharactersToShowArray[idx];
var isEnhancedRichText = isEnhancedRichTextArray[idx];

patric said...

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. :)

thanks to Mike and best regards from switzerland

Andrew Freese said...

Thanks for this. Unfortunately it's not working on my instance (SP2010 / Custom List / AllItems.aspx view / default styling)

After some debugging, it seems to die on references to the rows childNodes elements.

For example, this fails:
rows[j].childNodes[ColumnWithDropDown]

while this works:
rows[j].childNodes.length

I just wanted to post this here in case others are hitting the same wall.

Unknown said...

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

Anonymous said...

in Dreamweaver, I get a message that there is an error on line 13:
for (var i=0; i < tables.length;i++)

It looks ok to me - - what might this be?

Mike Smith said...

> line 13:
> for (var i=0; i < tables.length;i++)

That would imply that the tables object was null or not a collection. Check the line above that one for a typo.

var tables = document.getElementsByTagName("TABLE");

Mike

Unknown said...

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.

David Ocampo said...

I am working with SharePoint online (2013 version) and I am trying to put this code on a SharePoint page with other existing web parts.

I added it underneath the list in question as embedded code but I cannot get it to work. Any ideas?

Anamika said...

Hi Mike
It doenst work if the list view is grouped on any parameter. Do I have change anything to make it work in grouped view too? Any insight is appreciated.

JCurl said...

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.

$(document).ready(function () {
var listName = "Team Members";
var colsToTruncate = [2,3,4];
var charactersToShow = 75;
var
$("table[summary='" + listName + "'] tbody:nth-child(3) TR").each(function(){
var currentRow = $(this);
colsToTruncate.forEach(function(r){
var x1 = currentRow.find("td[class=ms-vb2]:nth-child(" + r + ") > div:first > div");
if(x1[0].innerHTML.length > charactersToShow){
x1[0].innerHTML = x1[0].innerHTML.slice(0,charactersToShow) + " ...";
}
});
});
});

Anonymous said...

Thanks for this script, it works really fine!

But I have a problem... on customized lists it works good, but when I try using it on a Task List it does not work! Nothing happens when I include the script...
what do I have to change in the script?

Mike Smith said...

> But I have a problem...

Anonymous,

Which version of SharePoint? This is an older article and the above was tested with SP 2007 and 2010?

Mike

Anonymous said...

did anyone ever get a resolution for working with a different view other than the allitems view?

Anonymous said...

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?

Mike Smith said...

> in Column 3 is my title, in 4 my multiline-richtext

Did you set the isEnhancedRichText variable? Also make sure your column numbers are correct.

Mike

Anonymous said...

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?

Mike Smith said...

Anonymous,

> I can't get it to work on a custom list with a multiple lines column

Nothing unique to the Anouncements list. Are you trying this in SP 2007 or 2010?

Mike

Anonymous said...

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?

Thanks
Jo

Tres L said...

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!

Tres L said...

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!

CCantara said...

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.

CCantara said...

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).

Anonymous said...

Can anyone confirm that this does not work on a document library? I have it working find on multiple lists. Thanks.

Brandi Warren said...

I've read everything here. I KNOW THIS IS MY ANSWER! But alas I am stuck.
1. I have a sharepoint with multiple pages
2. 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 0
4. I have two memo fields but working on the first field and it would be column 9
5. Copied code to wordpad
6. changed dropdown to 0 and withlongtext to 9
7. (I am sure this is where I am going wrong) I saved the text file to my desktop
8. 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 doc
10. 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!

Mike Smith said...

Brandi,

First, never use WordPad for code. Use Notepad or other plain text editor.

You can upload the file to any library, but the best choices are Site Assets or Site Pages, or Pages in a Publishing site.

The most likely problem is WordPad.

Mike

Anonymous said...

Mike,

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.

Jot said...

Hey,
Anyone knows how to get this working on sharepoint 2013? I tried the steps listed but they do not seem to work on 2013.

Anonymous said...

Mike,

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.

Thanks.

Anonymous said...

Hi Mike,

the script is working great. But when the list is filtered, the truncation is lost and the fields are displayed as is default.

Please help me.

Anonymous said...

Hi Jot,

I got this working in SharePoint 2013.

I just counted the columns for ColumnWithDropDown with first column as 1 instead of 0 as has been mentioned above.

Mike Smith said...

> Ribbon is getting hidden in all the views where this script is implemented

In 2013, when a page sees more than one web part it no longer considers it a "view page". The ribbon will still appear when you click in the list/library web part.

As an alternative, you can edit the page in SharePoint and add the code below just before then end tag of the PlaceHolderMain block. The ribbon should then always be displayed.

Mike

Anonymous said...

> Ribbon is getting hidden in all the views where this script is implemented

Thanks Mike. This tip worked like a charm.

any fix for filtered list ?

Ratna

Unknown said...

Guys i need help

I have test document library with notes field(multi line) which is added AllItems.aspx form
under that i have added Content Editor web part and added script with below changes but donesnt work

i must be doing something wrong Please help

var SummaryName = "Test Document Library ";
var ColumnWithDropDown = 4;
var ColumnWithLongText = 8;
var CharactersToShow = 100;
var isEnhancedRichText = false;

if (href.toLowerCase().indexOf("AllItems.aspx") == -1 && href.toLowerCase().indexOf("listid=") == -1 )
{

parts[parts.length-1] = "forms/AllItems.aspx?ID=" + docID;

Mike Smith said...

Harsh,

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

Mike

Simon said...

Hi Mike,

Big thanks for this. Do you have an adaptation that would work with 'Newsletter' style?

My Blog said...

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?

Anonymous said...

Hi

I have the same problem, cannot find the summary on SP 2013

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

...OnTableMouseDown(event);' summary=\"");a.push(STSHtmlEnc ..

assistance would be much appreciated

Malware 5000 said...

Hello,


I am trying to use this code on a webpart that is filtered by another webpart- I am assuming just like grouping messes with code so does the fact that all the webparts on the page are filtered.

also, I have little experience using CEWP to modify webparts but this file with the code do we save it as an html doc? or JS i know its a noob question.

Much appreicated

Mike Smith said...

Mallory,

> but this file with the code do we save it as an html doc? or JS

The file is a text file, and could use any extension. Best choice is probably .html so you can easily open it in SharePoint Designer or other HTML code editor.

The filter web parts should not impact this JavaScript example. Which version of SharePoint are you using?

Mike

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.