Render an 'Edit Menu' Button in the Experience Manager

Introduction

Goal

Enable webmasters to edit a site menu in the Channel Editor by rendering an Edit menu button.

Background

When a channel is edited in the CMS, an Edit menu button can be rendered next to a menu. Clicking that button will open the menu editor.

An edited menu is locked when it is changed. Other users can still view a locked menu, but they cannot edit it until the owner publishes or discards her changes. Opening a locked menu will show a message in the top-right corner saying "Menu locked by <user name>".

Enable a Menu to be Editable 

Only menus that are stored in the  hst:workspace can be editable. Menus stored outside the hst:workspace won't be editable in the Channel Editor. Trying to include the Edit menu button for these menus as described below won't show the button. See HST workspace configuration for more information.

Include the Edit Menu Button in a Template

The Edit menu button can be included in a template using the tag 'hst:cmseditmenu'. Its mandatory variable 'menu' accepts a bean of type org.hippoecm.hst.core.sitemenu.HstSiteMenu. For example, to render a button for an HstSiteMenu bean in a variable 'mainMenu', you can use:

JSP

<hst:cmseditmenu menu="${requestScope.mainMenu}"/>

Freemarker

<@hst.cmseditmenu menu=mainMenu />

The code above will output all the necessary HTML to render the Edit menu button when the channel is previewed inside the CMS. In other cases, the tag outputs nothing.

Position the Button

The best place for the Edit menu button depends very much on the layout of your channel. The position of the button can be tweaked with CSS.

Render Additional Markup around the Button

Sometimes the CSS of a channel requires that the Edit menu button is rendered inside some additional markup that is only needed to position the button correctly. A typical example is a menu whose items consist of <li> tags, and the CSS requires that the Edit menu is also rendered inside an <li> tag. This can be accomplished with the following JSP or Freemarker snippet:

JSP

<hst:defineObjects/>
<c:if test="${requestScope.hstRequestContext.preview}">
  <li>
    <hst:cmseditmenu menu="${requestScope.mainMenu}"/>
  </li>
</c:if>

Freemarker

<@hst.defineObjects/>
<#if hstRequestContext.preview>
  <li>
    <@hst.cmseditmenu menu=mainMenu />
  </li>
<#if> 

The additional <li> will only be rendered when the channel is rendered inside the Channel Editor.

Note that while the Edit menu button is only visible while Show components is enabled, the additional markup will always be rendered, so verify that it doesn't unintendedly alter the look of any pages in preview mode.