SharePoint 2010: Customize the Default Display List Form Using Only OOTB Web Parts

I have been working on a project that contains a list of FAQs. Basically we would like users to be able to quickly review the FAQs to find the answers they need. Pretty simple concept. The FAQ list is pretty basic and contains the following columns: Question, Answer, Rating, Associated Documents. Entering the FAQ is pretty easy and straightforward. Viewing the FAQ list item however leaves a few things to be desired. My initial thought was the simple “oh we can just use InfoPath to build a custom view”….well…sad to say but in this case we don’t have enterprise so that option was out the window. My next thought was to use SharePoint Designer to create a custom list view. I thought about it for a minute but decided that it was too much effort for just the simple changes I wanted….so back to the drawing board. I got thinking about how the Display form is just a web part page, so I decided to start playing around with the OOTB web parts to see if I could get close to what I wanted. I ended up getting exactly what I had in mind. I will start by showing you the before and after screenshots and then walk you through the process I used to get there. This is a very basic and simple solution but I think it is still a good one to share. Sometimes keeping it simple is the best option. Also, this would be a good solution when Enterprise isn’t installed or where SharePoint Designer has been disabled.

Before:


After:


Because of the way we have laid out the web parts on the display page we are able to provide a much cleaner view of the list content for a user when they access the list item. The ribbon and everything remain the same and if they need to edit the item they can easily do so from the Ribbon and will get the same view they expect from the creation of the item.

To get started, you will want to access the Form customization option from the Ribbon. In our case we will select to edit the Default Display Form:


The page will open in edit mode and you should see something similar to the screenshot below:


Since I don’t like to remove any of the standard pieces, the first thing I will do is hide this web part. This will allow it to remain on the page but not be displayed and it will also allow it to act as our filter for the new web parts we will be adding to the page.


Now, I will just add the web parts to the page that I want to use. In my scenario I will add three instances of the FAQ web part to the page. For each of the web parts I will configure the views that I would like to have displayed within that web part. For my example I am keeping the Question / Answer together in one view and having a separate view for the Ratings and the associated procedures.


Once the web part is added I will edit the current view and select the view properties that I need:


Once I have the view configured, I will need to add the connection so that only the items for the current item are displayed. I do this by adding a web part connection to the web part we previously hid.


My parameter for this connection is where the ID in the hidden webpart is equal to the list item ID.


Now I just repeat the steps for each web part that I want to add to the page and before long, my finished view looks like the one below.

Note: In case you are wondering I made use of the Newsletter style for the web part. It is one of my favorite views because it adds some formatting in a nice and easy format for reading. I also hid all of my toolbars and set each web part to display with a border. I formatted each web part the same to help bring consistency to the page. I encourage you to play around with the different settings until you find what you like the best.


Since you can add web parts to any of the display views you could also use this approach in combination with InfoPath forms services views. This would be a good way to add back some of the fields that InfoPath Forms services doesn’t support (managed metadata or rating columns). I should have a blog soon on my approach for using this in combination with forms services.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s