The EditModePanel approach; Displaying controls in “edit mode”

I think the title tells the whole story about EditModePanel. It basically provides a container that shows or hides its child controls based on the mode of the page.

This class is really useful in certain occasions where we want to advise or perform some operations for the Sharepoint Administrator, in few words, it is a mechanism of deploying extra functionality in edit mode bringing a new bridge to the person that is editing that page/web part.

We can do the life easier for the person that is editing the page/web part by adding some business logic behind EditModePanel so with few clicks the page will be filled.

This will be a classic example you can copy paste in your page or webpart, it only says “Hi administrator, please be sure you enter the amount in £”:

<PublishingWebControls:EditModePanel SuppressTag="false" GroupingText="Title help" 
     PageDisplayMode="Edit" runat="server" id="EditModePanel1">
     Hi administrator, please be sure you enter the amount in £
</PublishingWebControls:EditModePanel>

More sophistication; in this example, the EditModePanel control is used to display and edit two fields which drive some of the business logic of the site.

<PublishingWebControls:EditModePanel runat="server" id="BusinessLogicArea" style="margin:5px; border:solid 1px black; background-color:#7ba2d6"> 
<table>
  <tr>
   <td colspan="2" style="color:white; font-size:18px; font-weight:bold;">Product Properties</td>
     </tr>
     <tr>
   <td style="vertical-align:top; padding-right: 20px;">
     <SharePointWebControls:LookupField runat="server" id-="RelatedProduct" FieldName="Product Supplier" />   
   </td>   
   <td style="vertical-align:top;"> 
     <SharePointWebControls:DropDownChoiceField runat="server" FieldName="Model Year" />   
   </td>     
  </tr> 
</table>   
</PublishingWebControls:EditModePanel>     

In this example, the EditModePanel control is used to determine whether the CSS file included is for display or editing.

<PublishingWebControls:EditModePanel runat="server" id="GetDisplayCss" PageDisplayMode="Display" SuppressTag="true"> 
    <link rel="stylesheet" type="text/css" href="/MyStyles/Display.css" >
    </PublishingWebControls:EditModePanel>   
    <PublishingWebControls:EditModePanel runat="server" id="GetEditCss" PageDisplayMode="Edit" SuppressTag="true"> 
    <link rel="stylesheet" type="text/css" href="/MyStyles/Edit.css" >
    </PublishingWebControls:EditModePanel>

Conclusion: EditModePanel is a really powerful tool to improve your pages/web parts.