Render a 'Manage Content' Button in the Experience Manager

Overview

This page describes how to render a Manage Content button in Bloomreach Content channel previews. The button allows CMS users to create, select, or edit documents directly within the Experience manager preview.

Functionality

When you render a Manage Content button in a component, CMS users can:

  • Create a new document for the component and open it in the visual editor.
  • Select an existing document from the repository to render in the component.
  • Edit a document already rendered by the component in the visual editor.

Featured products page with manage content editing buttons

Including the Button in a Template

To render the Manage Content button, use the hst:manageContent tag in your template. This tag outputs the required HTML for the button when the channel is previewed in the CMS. The tag produces no output outside of preview mode.

Tag Parameters

The hst:manageContent tag accepts the following parameters:

ParameterDescriptionDefault value
hippobeanContent bean for an existing document. Can be null.null
documentTemplateQueryTemplate query used to create new documents. If the query returns multiple document types, the user selects one from a dropdown.null
rootPathPath to the root folder for selectable document locations. Can be relative to the channel's root or an absolute repository path. The folder must exist; it is not created automatically. Users can only create documents in this folder or its descendants.Content root folder of the current channel
defaultPathInitial location for a new document, relative to rootPath. Users can change this location. Folders in defaultPath are created if they do not exist, using the template query in folderTemplateQuery or, if not specified, as standard hippostd:folder nodes. Requires documentTemplateQuery. If not set, a warning is logged.empty string
folderTemplateQuery (*)Template query used to create folders specified by defaultPath if they do not exist. Requires defaultPath. If not set, a warning is logged.empty string
parameterNameName of the component parameter where the document path is stored. Disabled if the container is locked by another user's changes.empty string

(*) Available since version 13.1.0

Button Behavior

  • If you set the hippobean parameter, the button displays an 'edit' icon.
  • If hippobean is not set, the button displays a 'new' icon.
  • Depending on the parameters, the button may display additional speed-dial buttons on hover.

The table below shows the possible combinations of hippobean, documentTemplateQuery, and parameterName, and the resulting UI for users with webmaster and author privileges.

UsagehippobeandocumentTemplateQueryparameterNameWebmaster: buttonWebmaster: hoverAuthor: buttonAuthor: hover
Edit existing content✓--Edit button--
Create new content-✓-Create button--
Create new content, edit existing content✓✓-Edit and create buttons-
Edit existing content, select content✓-✓Edit and select buttons-
Create new content, select content-✓✓Select buttonSelect and create buttons--
Edit existing content, create new content, select content✓✓✓Edit, select, and create buttons-
Select different content--✓---

Usage Examples

The following examples show how to use the hst:manageContent tag in Freemarker and JSP templates.

  • Render an 'edit' button for a content bean in the document variable:

    Freemarker:

    <@hst.manageContent hippobean=document />

    JSP:

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

  • Render a 'new' button to create a document using the new-content-document template query at the content root path:

    Freemarker:

    <@hst.manageContent documentTemplateQuery="new-content-document" 
                    rootPath="content"/>

    JSP:

    <hst:manageContent documentTemplateQuery="new-content-document"
                   rootPath="content"/>

  • Render a 'new' button to create a document using the new-news-document template query at the news root path, in subfolders for the current year and month. If necessary, create the subfolders using the new-news-folder template query:

    Freemarker:

    <@hst.manageContent documentTemplateQuery="new-news-document"
                    folderTemplateQuery="new-news-folder" 
                    rootPath="news" 
                    defaultPath="${currentYear}/${currentMonth}"/>

    JSP:

    <hst:manageContent documentTemplateQuery="new-news-document"
                   folderTemplateQuery="new-news-folder"
                   rootPath="news"
                   defaultPath="${currentYear}/${currentMonth}"/>

  • Render an 'edit' button for a content bean in the document variable. For webmasters, also render a 'select' speed-dial button. Open the document picker in the banners root path and store the selected document's path in the document component parameter:

    Freemarker:

    <@hst.manageContent hippobean=document 
                    parameterName="document"
                    rootPath="banners" />

    JSP:

    <hst:manageContent hippobean="${document}"
                   parameterName="document"
                   rootPath="banners"/>

  • Render an 'edit' button for a content bean in the document variable. For webmasters, also render 'select' and 'new' speed-dial buttons. Use the new-banner-document template query for new documents in the banners root path. Store the selected or created document's path in the document component parameter:

    Freemarker:

    <@hst.manageContent documentTemplateQuery="new-banner-document"
                    parameterName="document"
                    rootPath="banners"/>

    JSP:

    <hst:manageContent documentTemplateQuery="new-banner-document"
                   parameterName="document"
                   rootPath="banners"/>

Button Placement

Place each Manage Content button near the area where the managed content is rendered. You can adjust the button's position using CSS.

Comparison: Manage Content Button vs. @JcrPath Annotation

You can enable users to select content for a component using either the hst:manageContent tag or the @JcrPath annotation:

  • The hst:manageContent tag provides a button in the channel preview for direct content selection.
  • The @JcrPath annotation enables content selection through the component's configuration dialog.

If you use both methods, ensure that configuration values such as the root path remain consistent. Inconsistent configuration can confuse users and may cause unexpected behavior.

The hst:manageContent tag allows dynamic path values during rendering, offering more flexibility than the static configuration of @JcrPath.

If you use the Relevance Module to target different documents for component variants, prefer @JcrPath and the configuration dialog. Using the hst:manageContent tag in this scenario makes variant management more difficult for users.

Limitations and Considerations

Some New Documents Cannot Be Saved in the Experience Manager

The Experience manager's content editor does not support all field types. If a document type includes unsupported fields, users can start creating the document in the Experience manager, but may need to switch to the Content application to complete and save it—especially if unsupported fields are required or have unsupported validators. The editor provides an option to continue editing in the Content application.

Some Document Types Should Not Be Created in the Experience Manager

The Experience manager's content editor may not detect validators for unsupported custom fields in a document type. Do not implement the "create content" option for document types with unsupported fields.

For example, if a plugin class such as my.company.MyPlugin.class is used for a Wicket document field plugin, or if a mixin like the Related Documents plugin is present, the Experience manager cannot reliably detect all validators. In these cases, users should only create documents in the Content application. Editing is still possible in the Experience manager, but a warning about unsupported fields is displayed.

Check the Document Type Prototype Configuration

The Experience manager's content editor is stricter than the Content application editor. Before enabling document creation in the Experience manager, verify the document type configuration under /hippo:namespaces in the repository. If the prototype is misconfigured, document creation in the Experience manager will fail.

Ensure the following properties exist with the specified values in /hippo:namespaces/<mynamespace>/<mydocumenttype>/hipposysedit:prototypes/hipposysedit:prototype:

hippostd:holder: holder
hippostd:state: draft
hippostd:stateSummary: new

Prototype Child Node Definitions on Parent Types Are Not Processed

The Experience manager does not support creating new documents if the document type relies on child node definitions inherited from parent types, but the prototype does not explicitly configure these compound nodes.

If the document type uses fields stored as child nodes (such as rich text or compound fields) and the prototype does not include these nodes, users will encounter an "invalid" content error when saving. The server logs an error for this situation.

To resolve this, update the prototype node to include the required child nodes. This allows document creation in the Experience manager.

Related topics:

Share Feedback
Page: /frontend/standard-components/render-manage-content-button
Section: Frontend
Category *