I recently worked on an EPiServer 6 solution which had a requirement for an in-page navigation element to provide the user with a shortcut to jump down into specific content sections within a single page. It seemed like a straightforward requirement, but after some research there was no clear function within this version of EPiServer to meet this requirement.
The closest fit was the bookmark capability within the TinyMCE editor (the default Rich Text Editor component), which allows an editor to add a bookmark location within the flow of text, then choose this bookmark from an anchor they create elsewhere in the text. The problem is that the RTE is only aware of bookmarks which have been created within the context of the current RTE instance:
In this case, the page was composed of multiple content modules, each containing their own combination of content elements. Any navigation element which needed to act as a ‘table of content’ to the rest of the page wouldn’t have the awareness of the other RTE’s containing the target bookmarks for the anchor elements. In addition to this, the RTE doesn’t really give the control of markup that you need for things like navigation elements (usually HTML <li> elements).
Step up Dynamic Content:
The solution was to use the Dynamic Content feature in EPiServer.
- The page template contained the outermost <ul> element with all required CSS attributes for controlled styling
- Within the <ul> was embedded a RTE placeholder to render the contents of the RTE, as added by the page editor
- We created a Dynamic Content element which consisted of properties for the text and bookmark values, and front-end HTML markup for each <ul> item to be added to the navigation list
- Page editors could drop in multiple instances of the dynamic content element within the RTE
- Bookmarks could be created anywhere else in the page where an RTE was used, and referenced from the Dynamic Content elements rendered in our navigation list
Treasure Your Exceptions 