Customizing SharePoint list form adds Page tab to ribbon

OK, so I’ll admit I skipped a month and didn’t add any new posts in July. Aside from a vacation I took in the mountains that month, the other reason I’ve been away for a while is I’ve been playing with Office 365 and SharePoint Online, and the possibilities are pretty exciting! If Office 365 is a topic of interest to you, stay tuned… I’ll be writing some posts on it soon.

Now back to the topic at hand. As I suspect you already know, SharePoint 2010 lets you customize the list forms used for viewing, editing, and creating list items. You can customize them in the browser, using SharePoint Designer 2010, or even using InfoPath (if you have the Enterprise edition of SharePoint Server 2010).

For this post I’ll focus on SharePoint Designer since that’s where I saw this behavior. In this article from Microsoft, two approaches are presented for creating a custom list form in SharePoint Designer 2010: Creating a new list form and editing an existing one (for example, editing the existing DispForm.aspx file).

If you go with their approach of creating a new list form, the page that’s created uses a DataFormWebPart to render the form on the page. That’s all well and good, but when you open the form in a browser, you’ll see a Page tab suddenly displayed on the ribbon as shown below:

Custom List Form with Page Tab in RibbonOn the other hand, if you follow the approach in the article for editing an existing list form, you won’t see the extra tab.

Why is that? Because the first approach doesn’t have a ListFormWebPart on the page, which is what the default list forms use to render their content. The second approach, however, hides the existing ListFormWebPart and leaves it on the page when the new DataFormWebPart is added. The ListFormWebPart contains logic that hides the Page tab in the ribbon, which is probably what you want on a custom list form (since the usual ‘Edit’ link and other page-related functions are on that tab, even if disabled).

So here’s the moral of the story: If you create a new custom list form and want the Page tab in the ribbon to be hidden, make sure your form has a ListFormWebPart hidden somewhere on the page (it doesn’t have to be the first web part – it can be anywhere).

Here are some steps you can follow in SharePoint Designer 2010 to do that:

  1. Click on the Lists and Libraries node in the Navigation pane.
  2. Click on the list for which you’re creating the custom form.
  3. In the Forms section, click the ‘New…’ button in the header.
  4. Fill out the fields and click OK.
  5. Right-click on the new form, and choose ‘Edit File in Advanced Mode.’
  6. Change the view to either ‘Split’ or ‘Design’ view (Code view doesn’t enable some of the buttons on the ribbon).
  7. Click above or below the DataFormWebPart that’s already on the page. I usually click the space just above it.
  8. On the Insert tab of the ribbon, look at the Controls group. Click the arrow beneath the SharePoint button, and choose “List Form…” at the bottom of the menu.
  9. Choose the list you’re customizing, pick the appropriate type of form, and click OK (the ‘Show standard toolbar’ check box can be checked or not – it doesn’t matter).
  10. Click the newly inserted ListFormWebPart to select it.
  11. Open the Web Part Tools contextual tab in the ribbon.
  12. Click the Properties button in the Web Part group on the left.
  13. Under the Layout section, choose Hidden and click OK.

That’s it. Now do whatever else you want to customize your form, and when it’s opened in the browser, the Page tab will not be visible in the ribbon.

EditModePanel Behavior Changes in SharePoint 2010

If you’ve ever developed page layouts for SharePoint 2007 or 2010, you’ve likely used the EditModePanel control (Microsoft.SharePoint.Publishing.WebControls namespace) at some point along the way to control content visibility. Using its PageDisplayMode property, you can make one set of content viewable when the page is in ‘Display’ mode and another set viewable when the page is in ‘Edit’ mode.

In SharePoint 2007, setting the PageDisplayMode to ‘Display’ meant the content in the control was visible to anyone who could see the page (as long as the page was in ‘Display’ mode and wasn’t being edited).

In SharePoint 2010 that behavior has changed. Now the EditModePanel control will only shows its contents to users who have permissions to edit the page, regardless of the page’s display mode. As to why that change was made, I can only speculate. Maybe Microsoft will enlighten us someday.

I did a quick Internet search about this and didn’t find much other than a blog post showing how to code your own custom EditModePanel and override the permission check.

However, if you want a no-code solution you can do from SharePoint Designer without writing your own controls, there’s an easier approach.

There is another control related to EditModePanel called the AuthoringContainer control. At first glance it seems pretty similar to EditModePanel except for one key difference: the DisplayAudience property, which can be set to ReadersOnly or AuthorsOnly.

So here’s the no-code solution to solve this problem using only these two controls:

<PublishingWebControls:AuthoringContainer DisplayAudience="ReadersOnly" runat="server">
    <!-- Content you want visible to uses without 'edit' permissions goes here. -->
</PublishingWebControls:AuthoringContainer>
<PublishingWebControls:AuthoringContainer DisplayAudience="AuthorsOnly" runat="server">
    <PublishingWebControls:EditModePanel runat="server" PageDisplayMode="Display">
        <!-- Content you want visible to users *with* 'edit' permissions and in display mode goes here -->
    </PublishingWebControls:EditModePanel>
    <PublishingWebControls:EditModePanel runat="server" PageDisplayMode="Edit">
        <!-- Content you want visible to users *with* 'edit' permissions and in edit mode goes here -->
    </PublishingWebControls:EditModePanel>
</PublishingWebControls:AuthoringContainer>

So although an extra control (AuthoringContainer) is now required to get the same behavior we got with EditModePanel alone back in SharePoint 2007, at least the bright side is we can still get there.

Insert Buttons Disabled in SharePoint Designer 2010 Code View

I’m tempted to call this a bug because it sure behaves that way, but I’ve noticed that several buttons on the ‘Insert’ tab of the ribbon in SharePoint Designer 2010 will sometimes become disabled when editing a page in Code view.

The result looks something like this:

SharePoint Designer 2010 Ribbon with Insert Buttons Disabled

SP Designer Ribbon with Insert Buttons Disabled

As you can see, several important buttons like the ones for custom forms, web part zones, etc. are disabled.

The Workaround:

The only workaround I’ve found is to switch to ‘Design’ or ‘Split’ view (using the buttons in the lower-left corner of the editing pane) and then back to ‘Code’ view. That seems to fix it where the buttons are enabled again.