How to Design Different Display for View & Edit List Item

There are certain user scenarios that would require to display a SharePoint List Item differently in View mode vs. in Edit mode. Good news is if you have SharePoint Server 2010 Enterprise, this can be achieved within a few steps.

In this post, I will use a standard Contact List as an example and demonstrate how to design different form displays for the View and the Edit mode of the Contact List.

The screenshots below are the end goal:

• When viewing the contact, the user will see the following below:
   
  Image may be NSFW.
  Clik here to view.
   
• When editing the contact, the user will see the following below:
   
  Image may be NSFW.
  Clik here to view.
   

To achieve this, use the following steps:

1. Access the SharePoint Contact List. Then click “Customize Form” on the ribbon above
   Image may be NSFW.
   Clik here to view.
    
2. At this time, SharePoint will render the Contact List in InfoPath Designer
    
3. The next step is to create and design your View List Item display
   1. Start by creating a New View (Click “Page Design” > “New View”)
      Image may be NSFW.
      Clik here to view.
       
   2. Give the new view a name (e.g.: “View item”). Then click OK
   3. Design your form accordingly
      • I recommend exploring the various “Page Layouts Templates” under “Page Design”
      • Once you have the layouts, you can also use the pre-designed table under “Insert” tab
      • Below is a snippet of my design, where I grouped a few Contact fields and added a picture placeholder
        Image may be NSFW.
        Clik here to view.
         
   4. Once your design is complete, click Quick Publish Image may be NSFW.
      Clik here to view. in the top left hand corner of InfoPath
       
4. Assign the new InfoPath View in the SharePoint List
   1. Go back to SharePoint Contact List. Then click “Form Web Parts” on the ribbon above
      • You should see 6 options
      • To make your changes, access the last 3 options under “Content Type Forms”
      • The difference between the 3 options are as follow:
        • New Form = customizes the display when you create a new list item
        • Display Form = customizes the display when you view the list item
        • Edit Form = customizes the display when you edit the list item
          Image may be NSFW.
          Clik here to view.
   2. For this example, we only need to make a change in the View mode, so select “Display Form”
   3. You should now see a Web Part Page with an InfoPath Form Web Part
   4. Click the down arrow in the InfoPath Form Web Part. Then select “Edit Web Part”
      Image may be NSFW.
      Clik here to view.
       
   5. On the right hand side of the page, click the Views dropdown and change from “Edit item (default)” to “View item”. Then click Ok
      Image may be NSFW.
      Clik here to view.
       
   6. You should now see your new form design in InfoPath Form Web Part
   7. Click “Stop Editing” on the top left hand corner of the page
       
5. Review your changes. At this point, the View and Edit item displays should be different.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.