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:
     
    View Contact Display
     
  • When editing the contact, the user will see the following below:
     
    Edit Contact Display
     

To achieve this, use the following steps:

  1. Access the SharePoint Contact List. Then click “Customize Form” on the ribbon above
    Customize Form in Ribbon
     
  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”)
      New 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
        Sample New Form View
         
    4. Once your design is complete, click Quick Publish Quick Publish 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
          Click Display Form
    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”
      Edit Web Part
       
    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
      Edit Web Part
       
    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.
Advertisements

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