Render an 'Edit Content' 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.

26-10-2015

Render an 'Edit Content' Button in the Channel Manager

Introduction

Goal

Enable CMS users to open a document for editing straight from within the channel manager by rendering an "Edit Content" button in the preview.

Background

When a channel is previewed in the CMS, an 'Edit content' button can be rendered next to each document. Clicking that button will directly open the document for editing.

Include the Button in a Template

The button can be included in a template using the tag 'hst:cmseditlink'. For example, to render a button for a Hippo document bean in a template variable 'document' you can use:

JSP

<hst:cmseditlink hippobean="${requestScope.document}"/>

Freemarker

<@hst.cmseditlink hippobean=document />

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

The tag can also be used to get link to a CMS document. This can be used to render some custom link to a document when a channel is viewed outside the CMS (e.g. when a user is 'logged in' to a channel). Example:

JSP

<hst:cmseditlink hippobean="${requestScope.document}" var="cmsLink"/>
<a href="${cmsLink}">Edit document</a>

Freemarker

<@hst.cmseditlink hippobean=document var="cmsLink"/>
<a href="${cmsLink}">Edit document</a>

Position the Button

The HTML for the button consists of an 'a' tag with the class 'hst-cmseditlink'. The button floats, and has absolute position with top=0 and right=0. This means that by default, it will be rendered in the top-right corner of the first enclosing element that has the CSS property 'position' set.

The easiest way to render the button in the correct place (e.g. right of the title of your document) is to add the CSS property 'position: relative' to the element around the  hst:cmseditlink tag. If necessary, override the 'top' and 'right' properties of the CSS class  hst-cmseditlink to tweak the position of the button.

Example JSP:

<div class="title">
  <hst:cmseditlink hippobean="${requestScope.document}"/>
  <c:out value="${requestScope.document.title}"/>
</div>

Example Freemarker:

<div class="title">
  <@hst.cmseditlink hippobean=document />
  ${document.title?html}
</div>

Example CSS:

.title {
  position: relative;
}
.title a.hst-cmseditlink {
  top: 10px;
  right: 10px;
}

This example will render the 'edit content' button 10 pixels away from the top-right corner of the div with the 'title' class.

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?