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

The list of links is a 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

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

And clicking the button will open the TreeList field in a seperate window:

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.

About these ads