What would you like to know more about?

Show Page Sections

Versioned Sitesection

We can provide multiple versions of product content via a drop-down switcher with a tiled display. This article describes the code used to set up versioning in a sitesection.

This article has been updated as of February 12, 2025, to demonstrate best practices for versioning based on CSS & JS changes made in 2023.

Tip: By default, the CSS contains the letter "v" for version. This has been removed from our CSS as of 4th Quarter 2024 because our current use case for versions has been Early Adopter vs Legacy, or New vs Classic View. The "v" can be restored should our use case change.

Prepare Child Maps for Displaying Tiles

There are two ways to set up a product's topic metadata for the purpses of creating subsections. Learn the preferred or most streamlined method.

Plan your layout and consider which sections of the product content should have a tile on the product dash. For example, many of our newer product dashboards have the following sections: Guides, How To, Video Library, What's New, and Privacy & Security. The parent map for each of these sections should contain the topic head and topic meta for the tile described in the steps below.

When first starting with our portal, instructions were provided to our team recommending that we place each subsection's metadata directly in the sitemap. The cons to this method is that any time there's a change to the sections topic meta, such as the tile's icon, you have to merge the sitemap. For this reason, this is the least preferred method.

Figure 1. Least Preferred - Parent Map (Tile) Topic Meta Added to Sitemap

The preferred method is to add your subsections topic meta to the parent map for each section, allowing writers to make changes to subsections more efficiently and without the need to merge the sitemap. In this case, if you were to update the icon, you only need to merge or replace the parent map.

Figure 2. Preferred - (Tile) Topic Meta Added to Each Parent Map
  1. In each product map that represents a tile on the dash, you must insert <topichead/> and <topicmeta/> elements. The <topichead> element follows the title. Topic meta includes the title on the tile, short descriptions (if any) and a data element referencing the icon for the tile.
    <map id="ditamap-5250">
    <title>MissionInsite Guides</title>
        <topichead>
            <topicmeta>
                <navtitle>Guides</navtitle>
                <shortdesc>Learn how MissionInsite helps you better understand your donors, members, and community.</shortdesc>
                <data href="../../_newPortalsitemap/missioninsite_icons/Guides.png" name="thumbnail" scope="local" value=""/>
            </topicmeta>
            <topicref href="../Getting_Started/c_getting_started_with_missioninsite_firstPage.dita"/>
            <mapref format="ditamap" href="../Registration_Guide/_m_registration_guide.ditamap"/>
          </topichead>
    </map>
  2. Close the <topichead/> element just above the map, or <reltable/> element.
    Tip: If your map contains any filter references (<ditavalref/>) or variable <keydefs/>, or reuse maps, make sure your closing topichead element </topichead> follows these files. Heretto will warn you if your code is not correct.

Add Versioned Parent Maps to Sitemap

Adding version-ready parent maps to the sitemap will give users the option to see multiple versions of content using a drop-down selector.

Your child maps must be prepared for versioning before adding to the sitemap.

Before revising content for a new version, consider whether or not you'll need to edit the version or if a non-editable version will suit. A version contained in a new branch can be edited. This is slightly different than creating a "release". Releases are a snapshot in time and are non-editable. For more information about releases or creating branches, visit Heretto's User Guide for the CCMS.

CAUTION: At this time, a sitesection with versions does not support topic groups for News, Support and Video Gallery on the dashboard.
This only applies to products with multiple supported versions. As of this writing, our use cases for this feature have been Early Adopter vs Legacy (when EA versions contain numerous changes throughout the content and will be available to customers for an extend length of time, or displaying a New vs Classic view for several months.
  1. Open the main sitemap.
  2. Under the Product subsection, click Append Element > version. Repeat for each version you want to display using the example provided.
    Figure 3. Sitesection with Versions
  3. For each version, place your cursor on Version, click Append > topic meta.
  4. For each Navigation Title, click the gear icon and edit the Navtitle to display a short version name.
    Tip: By default, the CSS contains the letter "v" for version. This has been removed from our CSS as of 4th Quarter 2024 because our current use case for versions has been Early Adopter vs Legacy, or New vs Classic View. The "v" can be restored should our use case change.
  5. Comment out any topicgroups for News, Support Articles or Video Gallery. These are not supported with Versioned Products.
    Figure 4. Code for Versioned Product Section
Once synchronized, you'll see a version selector in the staging portal. Note, you will not see this on the main dashboard.
Figure 5.

Resource ID URLs for Versioned Content

We frequently provide permanent URLs to outside groups utilizing resource ids. URLs with resource id's work a bit differently when there's versioned content.

See Create Permanent URLs to Topics .

Sample Versioning Code

This code demonstrates how long-time early adopter vs legacy content can be set up. See also Versioned Sitesection.

Sample Legacy vs Early Adopter Code

<sitesection outputclass="view-tiles grouped-tile-4" search="yes">
    <topicmeta>
        <navtitle>MissionInsite</navtitle>
        <shortdesc>Guides, training, and knowledge to help you make informed decisions based on community insights.</shortdesc>
        <data href="../../../acst-global-reuse/documents/_Portal_icons/Product_Dashboard_Icons/missioninsite-active.png" name="thumbnail"/>
    </topicmeta>
    <version>
        <topicmeta>
            <navtitle>New</navtitle>
        </topicmeta>
        <mapref format="ditamap" href="../MissionInsite/top_level_main_maps/_m_MI_guides.ditamap"/>
        <mapref format="ditamap" href="../MissionInsite/top_level_main_maps/_m_MI_help_topics.ditamap"/>
        <mapref format="ditamap" href="../MissionInsite/top_level_main_maps/_m_mi_product_videos.ditamap"/>
        <mapref format="ditamap" href="../MissionInsite/top_level_main_maps/_m_MI_whats_new.ditamap"/>
        <mapref format="ditamap" href="../MissionInsite/top_level_main_maps/_m_MI_security_and_privacy.ditamap"/>
        <data href="../../../acst-global-reuse/documents/_Ditaval_Files/_f_portal_product_MissionInsite.ditaval" name="" scope="local" value=""/>
        <mapref format="ditamap" href="../MissionInsite/_MissionInsite_Reuse/_m_missioninsite_master_reuse.ditamap" processing-role="resource-only"/>
    </version>
    <version>
        <topicmeta>
            <navtitle>Classic</navtitle>
        </topicmeta>
        <mapref format="ditamap" href="../../../../missioninsite-legacy/documentation/documents/MissionInsite/top_level_main_maps/_m_Legacy_MI_guides.ditamap"/>
        <mapref format="ditamap" href="../../../../missioninsite-legacy/documentation/documents/MissionInsite/top_level_main_maps/_m_Legacy_MI_help_topics.ditamap"/>
        <mapref format="ditamap" href="../../../../missioninsite-legacy/documentation/documents/MissionInsite/_media/_m_video_collection.ditamap"/>
        <mapref format="ditamap" href="../../../../mi_classic/documentation/documents/MissionInsite/top_level_main_maps/_m_MI_whats_new.ditamap"/>
        <mapref format="ditamap" href="../../../../mi_classic/documentation/documents/MissionInsite/top_level_main_maps/_m_MI_security_and_privacy.ditamap"/>
        <data href="../../../acst-global-reuse/documents/_Ditaval_Files/_f_portal_product_MissionInsite.ditaval" name="" scope="local" value=""/>
        <mapref format="ditamap" href="../../../../mi_classic/documentation/documents/MissionInsite/_MissionInsite_Reuse/_m_missioninsite_master_reuse.ditamap" processing-role="resource-only"/>
    </version>
    <!--<topicgroup id="whatsNew" toc="no">
        <mapref format="ditamap" href="../MissionInsite/_subsection_level_dashboard_maps/_m_missioninsite_news.ditamap"/>
    </topicgroup>
    <topicgroup id="featured" toc="no">
        <mapref format="ditamap" href="../MissionInsite/_subsection_level_dashboard_maps/_m_missioninsite_supportresources.ditamap"/>
    </topicgroup>
    <topicgroup id="videos" search="no" toc="no">
        <mapref format="ditamap" href="../MissionInsite/_subsection_level_dashboard_maps/_m_missioninsite_video_carousel.ditamap"/>
    </topicgroup>-->
</sitesection>
Figure 6. Code for Versioned Product Section

Version Drop-Down Selector

This is the CSS responsible for the version drop-down selector.

If the following CSS is not available, version drop-down selectors do not appear on tiled pages. The Content Lead will need to contact the portal support team for paid assistance.
.ezd-portal_content-page_toc-header { 
    display: flex; 
}