What went where in Hippo CMS 11's Channel Editor?

Hippo CMS 11 introduces a redesigned and improved Channel Editor (formerly known as Template Composer). If you were used to the old Channel Editor, this document explains what functionality is accessible where and how in the new Channel Editor.

Edit mode

When entering the Channel Editor for the first time, you are in View mode. In order to change properties of the current channel, you have to enter Edit mode. In Edit mode, the Channel Editor decorates the channel with an overlay to visualize the containers, components and editable menus displayed on the current page, while in View mode, links to edit documents displayed on the current page are shown. In the old Channel Editor, you entered Edit mode by clicking on the Edit button on the left side of the toolbar, and you returned to View mode by clicking the Save and Close button in the toolbar. In the new Channel Editor, the switching between View and Edit mode is done by clicking on the View or Edit side of the mode toggle on the right side of the Channel Editor's toolbar. Note that leaving Edit mode is not associated with any save persistence activity, which may have been misleading in the old Channel Editor.

Navigation

On top of the menu or link-based navigation offered by the channel itself, the Channel Editor allows you to directly navigate to pages which have a dedicated entry in the channel's sitemap configuration. Such pages are sometimes referred to as landing pages. In the old Channel Editor, the list of pages to navigate to directly was exposed in a dialog opened when clicking on the Pages button in the Channel Editor's toolbar. In the new Channel Editor, this list is located in the Sidenav, which is a panel sliding in and out on the left side of the Channel Editor. To open the Sidenav, click the leftmost icon in the new Channel Editor's toolbar. In Edit mode, the Sidenav may display multiple tabs, and you may need to select the SITEMAP tab to get to see the list of pages you can navigate to. Note that in the new Channel Editor, the list of pages remains accessible while navigating to various pages.

Managing Container Components

In Edit mode, you can add, edit, move and delete container components on the current page.

Adding a Container Component

In the old Channel Editor, to add a new container component, you had to click on the Components button in the Channel Editor's toolbar, which opened a panel to scroll to the type of Container Component you wanted to add to the page. Then, you could drag and drop it from there into the desired container on the current page. In the new Channel Editor, to achieve the same, open the Sidenav by clicking on the leftmost icon in the Channel Editor's toolbar, select the Components tab, scroll the desired Container Component and target container into view. Click on the component to select it, the click inside the container to add the component to it. Note that you can only add components to containers which are not locked by another user, and that the new component gets added past any other components already existing in the target container.

Removing a Container Component

In the old Channel Editor, to remove a container component, you had to click on the component (which opened the component properties dialog), potentially move that dialog out of sight to find and click a small delete-icon in the top right corner of the component's overlay box. In the new Channel Editor, also click on the component, and then click on the Delete button in the bottom left corner of the component properties dialog. Confirm the deletion and the component is removed.

Editing a Container Component

Depending on the type of your container component, you can edit certain component parameters. Both in the old and the new Channel Editor, you can edit these parameters by clicking on the component, adjusting the parameters in the component properties dialog, clicking Save and the clicking Close.

Moving a Container Component

Both in the old and the new Channel Editor, you can move container components inside the current container (reordering) or across container on the same page by dragging and dropping the component to the desired position on the page. Note that when you drag past the bottom of the window, the page scrolls down to bring potential additional target containers into view.

Managing Pages

In Edit mode, you can create, edit, move, copy and delete pages.

Creating a Page

In the old Channel Editor, you could create a page by clicking the Add new page button at the bottom of the Pages dialog, which opened when you clicked the Pages button in the Channel Editor's toolbar in Edit mode. In the new Channel Editor, make sure you're in Edit mode. Then, select Create Page from the Page drop-down menu of the Channel Editor's toolbar. Fill out the form and click Create to create the page and navigate to it in the Channel Editor.

Deleting a Page

In the old Channel Editor, you could delete a page by clicking the Delete page button at the bottom of the Page Settings dialog, which opened when you clicked the Page Settings button in the Channel Editor's toolbar in Edit mode. In the new Channel EditorChannel Editor, select Delete from the Page drop-down menu of the Channel Editor's toolbar. Confirm deletion and the current page is deleted. The Channel Editor automatically navigates to the channel's homepage when a page is deleted.

Editing a Page

In the old Channel Editor, you could edit a page by clicking the Page Settings button of the Channel Editor's toolbar, adjusting the settings and clicking Save. In the new Channel Editor, select Edit from the Page drop-down menu of the Channel Editor's toolbar. Adjust the settings and click Save. Note that not all pages can be edited. If a page cannot be edited, the Edit option is disabled.

Moving a Page

In the old Channel Editor, you could move a page by clicking the Page Settings button of the Channel Editor's toolbar, adjusting the URL fields and clicking Save. In the new Channel Editor, select Move from the Page drop-down menu of the Channel Editor's toolbar. Fill out the form and click Move.

Copying a Page

In the old Channel Editor, you could copy a page by clicking the Page Settings button of the Channel Editor's toolbar, filling out the Make a copy of this page section of the dialog and clicking Copy page. In the new Channel Editor, select Copy from the Page drop-down menu of the Channel Editor's toolbar. Fill out the form and click Copy to create a copy of the current page and navigate to it.

Managing Channel Settings

A project may define custom settings for each channel. These Channel Settings can be adjusted in the Channel Editor, when in Edit mode. In the old Channel Editor, you could adjust the Channel Settings by clicking on the Channel Settings button in the Channel Editor's toolbar, adjusting the settings and clicking Save Changes. In the new Channel Editor, click Settings in the Channel Editor's toolbar, adjust the Channel Settings and click Save.

Adjusting the Viewport Width

In the old Channel Editor, you could switch the viewport / device by selecting the desired option from a drop-down menu in the right corner of the Channel Editor's toolbar. The menu gave the impression that you're viewing the channel on a specific device such as an iPad or an iPhone. In the new Channel Editor, you can select from three fixed viewport widths (desktop, tablet or smartphone) by selecting from the drop-down menu in the middle of the Channel Editor's toolbar.

Managing Changes

Managing your own Changes

If you have made changes to the current channel, these changes can be published (so they are visible on the live version of the channel) or discarded. In the old Channel Editor, you had separate toolbar buttons to Publish or Discard your changes. The Publish button was only present in View mode. In the new Channel Editor, you manage your changes through the Changes menu. Once you have changes in your channel, that menu becomes visible just to the left of the View/Edit toggle. Click it and you can select whether you want to publish or discard (all) your changes to the current channel. Both options are available irrespective of the View/Edit mode.

Managing Changes of other users

If you have administrator privileges, you can also manage the changes by other users to the current channel. In the old Channel Editor, you could click on the Manage Changes button in the Channel Editor's toolbar, select a set of users and then either publish or discard the changes by all selected users. In the new Channel Editor, select Manage from the Changes drop-down, and publish or discard the changes by either a single user or all users at once. When done, click the Back icon in the left corner of the Channel Editor's toolbar to leave the Manage Changes screen.

View As

If your project has the Relevance feature configured, you can pretend to look at your channel as some configured Persona. In the old Channel Editor, you could select the desired Persona from the Show as dropdown on the right side of the Channel Editor's toolbar. In the new Channel Editor, you can achieve the same goal by selecting from the As viewed by drop-down in the center of the Channel Editor's toolbar.