Among the OOTB views offered in SharePoint, the boxed view is the one I find the most elegant. I like to use it on a home page, to display announcements for example.
However, there is one drawback with this view: it is not very flexible, and in particular, it forces the display of items in two columns.
jQuery to the rescue!
I have created a live demo to show how the boxed view can be tweaked with the help of some client side JavaScript. You can see the result on the home page of my demo site:
http://www.pathtosharepoint.com
In this example, I have chosen to display a list as scrolling news. If you press the “Next” button, or wait for 6 seconds, the list will move to the next announcement. Each announcement has the original ”boxed” look.
Once again, I am relying on jQuery here. This time I am using a carousel plugin called jCarousel lite. Note that the same plugin is also included in this page, where I display feeds from SharePoint blogs.
I still need to work on the script. In particular, there are several carousel plugins available for jQuery, and I haven’t yet figured out which one works best with SharePoint. Stay tuned!
20 comments
Comments feed for this article
February 11, 2009 at 10:32 am
Chris Howell
Sounds really good and relevant to some work I’m doing. Will be very interested to see the script when you are done.
Cheers,
Chris
February 11, 2009 at 10:40 am
Christophe
Thanks Chris! Feel free to send me more detailed feedback and/or specific use cases I could work on.
February 12, 2009 at 12:48 am
Charlie Epes
Christophe,
Another very cool add-on! Can you point me to some basic code (hopefully simple) to make a Boxed View into a single column with a flat list, not connected to a library of photos, etc.?
February 12, 2009 at 3:21 am
Boxed views: one column only « Path to SharePoint
[...] 12, 2009 in Uncategorized Yesterday I shared a live demo that shows how the usability of boxed views can be improved. Really cool effects, thanks again [...]
February 13, 2009 at 10:04 pm
Anonymous
Where is the demo? How can I implement this? Many thanks.
February 13, 2009 at 11:14 pm
Links for February 13, 2009 « Steve Mullen’s Blog
[...] Live demo: the boxed view, rearranged & Boxed views: one column only from Path to SharePoint by Christophe. Making the boxed view more flexible. [...]
February 14, 2009 at 12:18 am
Christophe
Demos: follow the links on the post. There is one on the home page of my SharePoint demo site.
To implement this, you need to proceed in two steps:
1/ Change the view into an unordered list (“li” tags)
2/ Apply one of the jQuery carousel plugins
I’ll publish my own script when I feel it is ready for prime time.
June 11, 2009 at 7:53 pm
Brad
For the life of me, I can’t get the view back as an unordered list. I tried to implement the GetListItems SOAP call, but lost all of my formatting for the Boxed One Column view…..any tips Christophe?
Many thanks for your site!! I’ve learned a lot (and implemented even more!!)
February 25, 2009 at 9:28 pm
Tom Resing
Sweet!
April 19, 2009 at 3:12 am
Anonymous
How do you get the announcement to look like you do on your demo site, with the “They said it couldn’t be done…” statement in it. It looks like it is pointing to an announcements list named About and you mention using the box style but I cannot get the exact look with the border and different background color.
The closest I can get is just the border with a white background.
April 19, 2009 at 3:19 pm
Christophe
Right, it is pointing to the About list. I used the “newsletter, no lines” style and border only for the chrome. I have selected the Granite theme on the site.
May 4, 2009 at 12:43 am
Cloudno9
HI Chris,
is it ready for prime time yet?
Also if you already have or know if it exist, silverlight player which can stream video from ms media server webpart?
it would be great if we can have this control showing thoumb nails at the bottom of the player and we can pick and choose the vdo by scrolling the thumb nails.
Hows this for a challeneg
?
TIA.
PS: i love all the work you have done so far and I will thank you for that.
May 4, 2009 at 1:59 am
Christophe
If you are looking for the code to make the boxed view a single column, I published it here:
http://pathtosharepoint.wordpress.com/2009/02/12/boxed-views-one-column-only/
As for the scrolling effect, no progress. There are new jQuery plugins for scrolling published every month, and I didn’t find the time to catch up with the recent ones.
I have done some work on videos, but not using Silverlight. One issue is that videos in wmv format display a black screen until you press the play button, and I don’t know how to address this. The flv format for example is more friendly.
May 20, 2009 at 7:13 pm
Jim
Hi, it works against “Boxed, no labels” style. How can you get it to work with “Boxed” (with labels)?
June 17, 2009 at 10:46 pm
Dawn
It looks like your home page has changed recently using the tabs rather than the scrolling feature you had in the past. Do you still have a demo of this in another location?
Thanks for all the useful information you provide on your site! I follow your blog regularly.
June 18, 2009 at 2:00 am
Christophe
I have put this on hold as I have yet to find a flexible scroller/carousel jQuery plugin. The plugin should accept the rich content usually found in announcements (hyperlinks and images for example). Recommendations are welcome!
June 24, 2009 at 12:54 pm
Brad
Love the new scrolling news ticker (using jScrollable?) — looking forward to your tips and tricks on implementation!!
Thanks for all you do for us, Christophe!!
September 14, 2009 at 9:20 pm
Jason
Great stuff – have you happened to figure out how to make the boxed view display more than two items side to side in a row?
January 11, 2010 at 6:06 pm
Norm
Really could use a solution that allows you to use the Boxed View with Labels to display 3, 4 or 5 items side by side? Any luck with that?
January 12, 2010 at 4:15 am
Christophe
I’ll look into it (and sorry Jason, I missed your comment). Displaying 4 items in a row (i.e. merging two rows from the default boxed view) should not be too difficult with a technique similar to the one I used in the following post:
http://pathtosharepoint.wordpress.com/2009/02/12/boxed-views-one-column-only/