Using Sitecore EditFrame in PageEdit

The sc:EditFrame is a Sitecore Page Editor (called Content Editing in Sitecore marketing terminology) feature that allows front end access to fields that are not directly accessible, either because they are not visible or they are of a type that are not directly front end editable.

Basically, Text, Rich Text, Image, Link  and fields like that are directly editable. But MultiList fields, checkbox fields and other types are not. This is where the EditFrame comes in.

This is a list of links placed on my website:

List of Links

List of Links

The list of links is a TreeList field:

TreeList Field

TreeList Field

I would like to give the user acces to edit this field from the Page Editor. But using the sc:FieldRenderer only allows the user to edit any field that the treelist points to. So to give access to the TreeList field itself, I need to do the following:

First, I need to create a new Edit Frame Button in the core database.

Go to /sitecore/content/Applications/WebEdit/Edit Frame Buttons and create a new Edit Frame Button Folder. In this folder, create a new Edit Frame Button. In the field “Fields” you type in te names of the fields that this button should give edit acces to:

EditFrame Buttons

EditFrame Buttons

Next step is to modify the user control that renders my list of links:

In the rendering that renders the list of links, I must add an EditFrame surrounding my list:

<sc:EditFrame id="editLinks" runat="server" Buttons="/sitecore/content/Applications/WebEdit/Edit Frame Buttons/DocumentLinks">

  // Inside this edit frame is the HTML that renders the list of links.
  <h2>
    Links
  </h2>
  <asp:ListView ID="lvLinks" runat="server" DataSource="<%# Links %>" EnableViewState="false">
    <LayoutTemplate>
      <ul class="LinkList">
        <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
      </ul>
      </LayoutTemplate>
        <ItemTemplate>
          <li><a href="<%# Sitecore.Links.LinkManager.GetItemUrl(Container.DataItem as Sitecore.Data.Items.Item) %>">
            <sc:FieldRenderer ID="frItemTitle" FieldName="NavigationTitle" runat="server" Item="<%# Container.DataItem as Sitecore.Data.Items.Item %>" />
          </a></li>
        </ItemTemplate>
      </asp:ListView>
  </asp:Panel>

</sc:EditFrame>

The EditFrame has an attribute called “Buttons” that points to the EditFrame Buttons Folder that I created earlier.

The code is now finished.

When the user hover above the Links in Page Edit mode, he will see the edit frame with the “Edit” button:

EditFrame

EditFrame

And clicking the button will open the TreeList field in a seperate window:
Open EditFrame For Editing

Open EditFrame For Editing

Please Note:

In Sitecore 6.5 (maybe also other versions of Sitecore) you need to save the page before the selected fields becomes visible. It is not enough to press the “OK” button in the dialog window.

Other usages

You can also use the EditFrame for fields that are only visible if they are not empty, and for fields that are not visible at all. You can use the Sitecore.Context.PageMode.IsPageEditor attribute to determine if the current page is in the Page Edit mode, and when so, display a text inside the edit frame:

<sc:EditFrame id="editLinks" runat="server" Buttons="/sitecore/content/Applications/WebEdit/Edit Frame Buttons/DocumentLinks">
  <asp:Panel ID="panNoLinksAndPageEditing" Visible="<%# Sitecore.Context.PageMode.IsPageEditor %>" runat="server">
    Edit Links
  </asp:Panel>
</sc:EditFrame>

The original code with the links list actually uses the same technique, as the list is hidden if there is no links selected. In this scenario, I add a panel that is only visible if the list is empty and the page is in editing mode:

<sc:EditFrame id="editLinks" runat="server" Buttons="/sitecore/content/Applications/WebEdit/Edit Frame Buttons/DocumentLinks">
  <asp:Panel ID="panNoLinksAndPageEditing" Visible="<%# !HasLinks && Sitecore.Context.PageMode.IsPageEditor  %>" runat="server" CssClass="Spot SpotLinks">
    <dictionary:literal runat="server" path="/Document/Links" defaulttext="Links" />
  </asp:Panel>
  <asp:Panel ID="panLinks" Visible="<%# HasLinks %>" runat="server" CssClass="Spot SpotLinks">
    <h2>
      <dictionary:literal runat="server" path="/Document/Links" defaulttext="Links" />
    </h2>
      <asp:ListView ID="lvLinks" runat="server" DataSource="<%# Links %>" EnableViewState="false">
        <LayoutTemplate>
          <ul class="LinkList">
            <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
          </ul>
        </LayoutTemplate>
        <ItemTemplate>
          <li><a href="<%# Sitecore.Links.LinkManager.GetItemUrl(Container.DataItem as Sitecore.Data.Items.Item) %>">
            <sc:FieldRenderer ID="frItemTitle" FieldName="NavigationTitle" runat="server" Item="<%# Container.DataItem as Sitecore.Data.Items.Item %>" />
          </a></li>
        </ItemTemplate>
      </asp:ListView>
  </asp:Panel>
</sc:EditFrame>

The EditFrame is also your shourtcut to upgrade websites that are not Page Editable from the beginning. Although I would recommend that you rewrite your website using the sc:FieldRenderer.

Advertisements

About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in .net, c#, General .NET, Sitecore 6 and tagged , , , , , . Bookmark the permalink.

9 Responses to Using Sitecore EditFrame in PageEdit

  1. Lieven says:

    Nice post.
    I was wondering about the tag . How did you implement this from an architectural point of view?

  2. Lieven says:

    [UPDATE] My tag was removed from the previous post. I was talking about the dictionary tag :)

  3. Excellent post! I have supplemented with some more use cases, showing the EditFrame used with another item than the current item, and showing rendering done from code behind.

    http://blog.jan.hebnes.dk/2011/12/using-sitecore-editframe-with.html

  4. Shogun says:

    Nice addition Jan!

  5. James Coleman says:

    Nice post, I think the Buttons Attribute doesn’t need the full path. I think you can just have Buttons=”DocumentLinks” in your example.

  6. Pingback: Edit hidden fields in Sitecore page editor « Brian Pedersen’s Sitecore and .NET Blog

  7. Pingback: Create components for Sitecore Page Editor | Brian Pedersen's Sitecore and .NET Blog

  8. Pingback: How to Properly use Sitecore Edit Frames - Sitecore Developer BlogSitecore Developer Blog

  9. Pingback: Custom Sitecore Control for storing Key/Value Data with Lookups | jammykam

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