Render an 'Edit Menu' Button in the Channel Manager - BloomReach Experience - Open Source CMS

This article covers a Hippo CMS version 10. There's an updated version available that covers our most recent release.

27-10-2015

Render an 'Edit Menu' Button in the Channel Manager

Introduction

Goal

Enable webmasters to edit a site menu in the channel manager 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 cannot edit such a locked menu until the owner publishes or discards her changes. A locked menu will render a 'menu locked' indicator instead of the 'Edit menu' button. 

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 manager. 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 outer HTML element of the button consists is an 'a' tag with the class 'hst-cmseditmenu'. Use CSS to position it where you want.

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 now only be rendered when the channel is rendered inside the Channel Manager.

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?