[March 17, 2010] An updated script is now available here.
Yesterday I shared a live demo that shows how the usability of boxed views can be improved. Really cool effects, thanks again jQuery!
But, as Charlie Epes commented, a script that changes the boxed view from two columns to one would already be really useful.
So here is a simple one – 4 lines!
<script type="text/javascript">
var boxedview = document.getElementById("WebPartWPQ1").innerHTML;
boxedview = boxedview.replace(/<td width="1.5%"> <\/td>/gi,"<\/tr><tr style='font-size:6px\;'><td> <\/td><\/tr><tr>");
boxedview = boxedview.replace(/<td width="1%"> <\/td>/gi,"<\/tr><tr style='font-size:6px\;'><td> <\/td><\/tr><tr>");
document.getElementById("WebPartWPQ1").innerHTML = boxedview;
</script>
Add the script to a CEWP, under the boxed view. You can see it at work on this page.
The above script is written for wss. It identifies the Web Part by its id “WebPartWPQ1″. If you use MOSS, or if the boxed view is on a page along with other Web Parts (typically on the site home page), you’ll need to change the id to “WebPartWPQ2″ or ”WebPartWPQn“. Or you can modify the code to scroll through all the Web Parts on the page and grab the boxed views.
33 comments
Comments feed for this article
February 12, 2009 at 11:56 am
Charlie Epes
Wow! My own personal developer! Thank you so much, Christophe.
Charlie Epes
Buffalo, NY
February 12, 2009 at 3:40 pm
Charlie Epes
Hi Christophe:
I’m not sure why my Boxed view is not stacking into one column like yours. My List is WebPartWPQ1 and the CEWP is WebPartWPQ2. I am using WSS3.0.
What am I missing?
Charlie Epes
February 14, 2009 at 12:36 pm
Christophe
I tested it again, and the above code works fine for me in wss 3.0. I used both IE7 and Firefox 3.
Did anybody else try this in wss 3.0?
February 14, 2009 at 12:54 pm
Charlie Epes
I don’t want to sidetrack this with my issues. I’ll try it again on another site.
Thanks… and by the way, have a great time abroad.
Charlie
February 20, 2009 at 1:01 am
Christophe
Charlie, did you get it to work? If not, contact me by e-mail.
May 20, 2009 at 7:04 pm
Jim
Hi, it works against “Boxed, no labels” style. How can you get it to work with “Boxed” (with labels)?
May 26, 2009 at 10:13 pm
Robert B Sandoval
I am using MOSS and my box view is showing labels.
Question 1:
I am using a Form Library in MOSS and the “Boxed View” style name for this type of list is called “Document Details,” not “Boxed.”
Question 2:
When trying to customize for MOSS, my web part ID is 3DF9CE5B-06DC-4678-BB33-AA4893E43A36
Would I append this number to your code and should it look like this?
var boxedview = document.getElementById(“WebPartWPQ3DF9CE5B-06DC-4678-BB33-AA4893E43A36″).innerHTML;
boxedview = boxedview.replace(/ /gi,” ”);
boxedview = boxedview.replace(/ /gi,” ”);
document.getElementById(“WebPartWPQ3DF9CE5B-06DC-4678-BB33-AA4893E43A36″).innerHTML = boxedview;
May 26, 2009 at 10:15 pm
Robert B Sandoval
Ooops. The code got messed up. Not sure how to share code.
//
var boxedview = document.getElementById(“WebPartWPQ3DF9CE5B-06DC-4678-BB33-AA4893E43A36″).innerHTML;
boxedview = boxedview.replace(/ /gi,” ”);
boxedview = boxedview.replace(/ /gi,” ”);
document.getElementById(“WebPartWPQ3DF9CE5B-06DC-4678-BB33-AA4893E43A36″).innerHTML = boxedview;
May 27, 2009 at 2:38 am
Christophe
In this script, we are not looking at the Web Part id, but at the id of the DIV that hosts the Web Part content.
On the list default page, this id is WebPartWPQ1 (for wss) or WebPartWPQ2 (for MOSS).
On other pages, you need to identify the correct number by looking at the source code. The id will be WebPartWPQn where n is an integer somewhere between 1 and 1+total number of WebParts on the page. Or you could add a loop to the script to scan all Web Parts on the page.
July 15, 2009 at 9:25 am
Narsinh
Hi
I didn`t under stand how to use this ?
Can pls help me
Narsinh
September 15, 2009 at 12:07 am
Jim Harrison
Did you ever figure out the right code for applying this fix to MOSS? I have not been able to get it to work trying n=1 to 20. It just continues to display with two columns.
October 20, 2009 at 8:20 pm
Kevin Komatz
Following up on Jim’s questions, was anyone able to get the code to work in MOSS?
October 23, 2009 at 4:30 pm
BRuiz
Christophe, As usual, just what I need — However (notice that there is always a “however” from your fans?)…
The Boxed View is very helpful, I am using it in combination Paul Grenier’s jQuery Print Any Web Part — but needed to remove the column-titles as they made the horizontal dimension unmanagable. To turn off the column-titles, I found the simple ” .ms-viewheadertr { display: none;} ” solution, and there in lies the rub.
When combined with your One-Column Boxed View script, the normal two columns display, when I remove the ” .ms-viewheadertr { display: none;} ,” your One-Column script works.
Is there a simple work-around?
As always, very grateful for your guidance!
R’grds – Ben.
October 30, 2009 at 6:07 pm
BRuiz
Christophe, I think I may have found my problem… I have successfully used with the “Boxed, No Labels” view, and realized that was where this script was failing me (and not from the style statement as suspected).
So, my finding is that this script works with the “Boxed, No Labels” view, and does not work with the simple “Boxed” view.
My purpose is to use this script to allow a neatly laid-out printed view of my list, but will need the column-labels to make it easy to read.
So, now my question is: “Is there a simple way to get this script to work with a simple “Boxed” view as well as the “Boxed, No Labels” view?”
Very grateful for your attention.
R’grds – Ben.
November 23, 2009 at 8:27 pm
larry
Hey Christophe,
it has been a while and I see you’re getting around. Miss the posts here. I recently saw an update to the boxed views and I remembered that when I implemented this script it did not work. When I looked closely at the page elements I realized I needed some additional code. So I added this to your code and it works great:
boxedview = boxedview.replace(/ /gi,” ”);
something with the cell tags not having a width caused this script to fail. once I added this no issues. feel free to use it if you like.
November 26, 2009 at 2:32 am
Christophe
Thanks Larry, I’ll check it out.
SharePoint has 2 boxed views in the list of styles, the issue might be that I wrote the script for one of them (boxed, no labels), and it doesn’t directly apply to the other one.
January 28, 2010 at 3:14 pm
larry
Hey C,
working with this script again and I ran into a wall. reading your last reply I understand why, just cant figure out a solution. I have setup a grouped boxed view. I found that there are 3 columns now. I have continually tried to customized the script to remove the outter columns, just will not work. I am using WSS, and the webpart ID is correct. The first column has this code:
So I modified what you had to this
am I missing something?
February 23, 2010 at 3:09 pm
larry
Finally was able to figure this out. With the addition of CSS I was able to remove the first and last column, getting the result I needed. You have some great work. I look forward to all your posts.
thanks
January 25, 2010 at 7:58 pm
David
Have any of you tried a script that goes from two columns to three in WSS 3.0? I’m not sure how to change from the single column view to the three.
February 23, 2010 at 11:18 am
Johan
Nice trick, and your blog is a good source for sharepoint inspiration in general!
I have a similiar question as David, any pointer towards changing the boxed view to show more than two columns?
February 23, 2010 at 3:02 pm
larry
@Johan,
What are you trying to do? I had a similar requirement and I was able to achieve that through the use of a calculated field and Christophe other script Text 2 HTML. Using the sceond script you can build tables graphs or what ever you want. I actually used one column and built my layout using calc fields. Here is an image showing the output I was able to achieve:
http://home.comcast.net/~cookieking/boxedViewWithCalc.jpg
let me know if this is what you are talking about.
February 27, 2010 at 3:52 am
Christophe
@Johan: I wanted to give it a try (4 columns), but it’s a little more complicated than I initially thought (have to take into account cases where there’s an odd number of rows).
March 3, 2010 at 2:01 pm
Johan
@Christophe Would be really great to have a script doing eg four columns… I can understand the potential complexity, and unfortunately my skills in this area too limited to give it a try myself – if you are able to solve this it would be great…
@larry – I had a look at your screenshot – I understand this as “one box per row, and the boxes are displayed like a table”
I’d like to have more than one box per row (compare with the “original” boxed view, which displays two boxes per row (ie two columns) – I’m looking for a solution where more than two boxes can be displayed on ach row.
April 22, 2010 at 6:38 am
Gemma
HI Johan,
I too am looking out for a similar type of solution. I would like to have 3 or 4 boxed view (3 -4 columns) in a row. As of now it displays only items in 2 column.
Do you have any solution for this
April 22, 2010 at 9:05 am
Johan
Hi Gemma,
sorry, I haven’t found any other solution for this (and it sounds like we are looking for the same possibility).
The good thing is that I noticed that this is on Christophe’s ToDo list (http://pathtosharepoint.com/Lists/ToDoList/AllItems.aspx – the “Script for n column display” entry) – I hope that this will go from 60% completed cutrrently to 100%..
I would be interested in any findings you do on this topic.
April 28, 2010 at 1:06 am
Christophe
Gemma and Johan: I have a draft script for this, built on jQuery. If you know how to use jQuery I can send you the beta version.
January 26, 2011 at 4:29 pm
Larry
Hey Christophe,
I believe you sent a beta version to me some time back. I am back testing it again and I am having trouble understanding how you write the cell and contents. At the bottom you have tr.append 3 times. I am guessing the middle one is the cell and its contents. I am trying to format that cell but I am failing. Also I noticed the original class “ms-stylebox” is missing when script is applied.
Have you done anymore work on this? Are you still testing it?
January 29, 2011 at 11:10 am
Christophe
Like for several other scripts, I stopped releasing updates because of SP 2010. Unfortunately I haven’t found the time to do anything new on this one.
March 12, 2010 at 3:01 am
vindog
I am struggling with this on MOSS; I have confirmed that I am correctly identifying the webpart id WebPartWPQ2 (on the default page) but nothing seems to work. Is there anything recently that takes care of the “single column” not working issue? Is there an updated script that should work?
thanks in advance..
March 16, 2010 at 10:26 am
Christophe
I am working on this and there should be an update this week (see my to-do list on http://www.pathtosharepoint.com).
Could you precise which of the boxed styles you’re using?
March 17, 2010 at 6:47 am
Update: boxed view with one column only « Path to SharePoint
[...] March 17, 2010 in SharePoint 2007, html/scripts Last year, I published a sample script that changes the layout of boxed views from two columns to a single column. [...]
April 30, 2010 at 11:25 am
Johan
Christophe,
I can at least give the jQuery script a try… My email is johan @ my blog domain.
Thanks!
December 22, 2011 at 12:06 pm
Kelvin
Hi, Christophe
I am interested in “Script for n column display” this topic.
I already use jquery to do one column to Boxed views, but i need
to do four columnsto boxed views in my sharepoint 2010.
Could you give me some tips for this ?
Thank you very much.
Kelvin.