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.
If you're starting content for a new product, or you wish to streamline topic meta for your product, see Prepare Child Maps for Displaying Tiles, first. Otherwise, you can skip this article.
Using Resource IDs to link to various versions is slightly different than creating URLs for unversioned content. See Create Permanent URLs to Topics
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.
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.
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.
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.
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.
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.
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>Version Drop-Down Selector
This is the CSS responsible for the version drop-down selector.
.ezd-portal_content-page_toc-header {
display: flex;
}