Update: boxed view with one column only
Last year, I published a sample script that changes the layout of boxed views from two columns to a single column.
Several readers reported that it didn’t work for them. Larry Pfaff investigated the issue, and came up with the following update:
<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>");
boxedview = boxedview.replace(/<td> <\/td>/gi,"<\/tr><tr style='font-size:6px\;'><td> <\/td><\/tr><tr>");
document.getElementById("WebPartWPQ1").innerHTML = boxedview;
</script>
To include the script in your page, use a CEWP placed below the boxed view.
The above script is written for wss v3. 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.
Larry’s update works for all boxed styles, while my initial code only worked against the “Boxed, no labels” style.
Remember that the purpose of this sample script is simplicity (5 lines!). It relies on the innerHTML property.
I am going to publish a more complete (and of course heavier) solution that will allow you to choose the number of columns.
About Larry:
“Larry Pfaff, Sr, Systems Analyst working for Convergys Corp, a global company, based out of Jacksonville Florida delivering training and outsourcing for major corporations. I have been working with SharePoint for almost 7 years and manage many internal projects using SharePoint as the collaboration tool. I enjoy new challenges and automating existing process. I seek out cookie cutter solution and mold them to fit for “Non-Developers” working with SharePoint by developing and providing training for end user and sharing my knowledge with as many as I can.”
Larry is a long time reader of my blog and other power user blogs, like EndUserSharePoint.com and SharePoint JavaScripts. While we were collaborating on a case study, in the past few weeks, Larry decided to take the plunge and start his own blog, SharePoint Hacker.
Thanks Christophe and thanks Larry.
I was one of those for whom it did not work. I’m happy now-
Charlie Epes
This is a great site for SharePoint developers. I’ve shared your site with others, and have used some of the suggestions myself. I have learned so much from you and look forward to attending one of your workshops. Thanks.
This works great now. Thank you.
Is anyone aware of a way to have a single CEWP script apply to multiple web parts, or must there be a CEWP for each web part (for single column boxed display)?
Kevin, you can group all the scripts in a single CEWP, or even create a loop that scans all the Web Parts in the page (WebPartWPQi). Just remember that the script must be placed below all the Web Parts you want to modify.
Can you work out a solution for SharePoint 2010? It does not seem to work with SP2010….
In order to make my single column really look like a form, I was wondering what script could I use to number the columns?
A simple…
1.
2.
3.
I would think this would be easy, but I’m finding nothing.
You talked of how you can write something that will scroll through all the web parts on the page, id the boxed ones, and apply this code. I’m not a script writer. Would someone add that to the script given above so I can copy and paste it into the CEWP on my page? Thanks.
Also, I’d like to add bold and color to some of the text fields in displayed in it such as the title. How is that done via the CEWP?
I am having a awful time making this work with a Web Part Page. Any suggestions?
Great solution – just too slow for my homepage I’m afraid.
Also, this doesn’t work with being able to edit in datasheet view – when I try this it throws the ActiveX error. I took out the javascript and then the datasheet view works fine. Any thoughts on a workaround?