Recently Updated macro with Scroll Versions change pages

This page will show you how to fix the display titles of updated Scroll Versions change pages (also known as dot pages). The instructions are focussing on adding it to the Web Help theme, but the general approach should work with any theme.

Change pages

Change pages are functional Confluence pages used by Scroll Versions to store the different versions' content. Their Confluence page titles have the following structure:

.<pagetitle> v<versionname>, e.g. .Glossary v3.0

Learn more about change pages.

This naming pattern appears in the Recently Updated macro and can seem confusing. This recipe will add some front-end code to remove the leading dot and display the version name in a lozenge.

Create recently-updated-dotpages.js

In your copy of the Web Help theme, navigate to the /assets/js directory and create a new Javascript file. We'll name it recently-updated-dotpages.js, but you can choose any name you like.

Within that file, paste the following code:

JS

if ($("[data-macro-name='recently-updated']").length > 0){
  var updatedPageLinks = $("div.update-item-content > a");
  updatedPageLinks.each(function(){
    if ($(this).text()[0] == "." && $(this).text().indexOf(" v")!== -1){
      var newLinkText = $(this).text().substring(1);
      var versionName = newLinkText.substring(newLinkText.lastIndexOf(" v")).substring(2);
      newLinkText = newLinkText.substring(0, newLinkText.lastIndexOf(" v"));
      $(this).text(newLinkText);
      $(this).append("<span style='margin-left: 3px;' class='aui-lozenge'> "+versionName+"</span>");
    }
  });
}

Link the newly created file

As the macro only appears within page content, let's link it in the include-content.vm. To do that, paste the following code at the very bottom of the include-content.vm:

XML

<script type="text/javascript" src="${theme.baseUrl}/assets/js/recently-updated-dotpages.js"></script>

This concludes this recipe, your Recently Updated macro should now look something like this: