Switching Between Spaces Published by Scroll Versions

Steffen Burzlaff
Last update: Jun 5, 2018

Scroll Viewport supports switching between different versions of a space if it is managed by Scroll Versions on the same Confluence instance. But there also might be a scenario where you have multiple spaces on a Confluence instance and want to switch between their viewports, e.g. if you're using Scroll Versions' Remote Publishing feature.

Private Master Space

If you use a private master space, the approach is simple: Just create one viewport per public space.

Advantages:

Very fine-grained control over what is exposed through Scroll Viewport

Disadvantages:

Overhead for managing multiple viewports.

Switching between different versions of the same page, means switching between viewports, which is not available out of the box.

Setting up

Note

This recipe only works when using Hierarchical URLs in the Viewports you want to switch between.

For the following example, let's assume you have 3 spaces which have been published by Scroll Versions to your remote system.

Your space setup may look like this:

#

Space Name

Space Key

Viewport Path Prefix

1

Viewport 1.0

VPRT10

/vprt10

2

Viewport 2.0

VPRT20

/vprt20

3

Viewport 3.0

VPRT30

/vprt30

The spaces are not managed by Scroll Versions, but you should have successfully installed and configured Scroll Viewport for these spaces. Then, you can use Scroll Viewport to switch between spaces by adding a few lines of code to your Viewport theme.

You have to manually insert the spaces and their path prefix to the select options, because only you know the paths that the Viewports are available under.

The next step is to retrieve the current path prefix. It's useful to preselect the HTML Select from above and to preserve the current visited page when changing the viewport. This one-liner should be included into a Velocity template file, because we're trying to access a Placeholder.. Preferably at the bottom of the page.vm.

$(document).ready(function() {
// Add this to your desired JavaScript file and call the method while initialising
function spaceSelectSetup() {
// In case of page not existing in that version, we assume an empty path prefix
var prefix = window.currentPathPrefix || ''
// Preselect the HTML Select
$('#spaceSelect').val(prefix);
// Add an change event handler which forwards the user to another viewport
$('#spaceSelect').change(function() {
// This is the Viewport path prefix written in <option value="pathPrefix">...</option>
var viewportPathPrefix = this.value;
// Preserve the current page where the user is. If he is on the home page, the string will be empty
var currentPagePath = location.pathname.substring(contextPath.length + prefix.length + 1);
// Change the path of the URL and forward the user
location.pathname = contextPath + '/' + viewportPathPrefix + currentPagePath;
});
}
spaceSelectSetup();
})

Missing Pages

This snippet can send a user from /vprt10/any-site-you-wish to /vprt20/any-site-you-wish. The site has to be available in both spaces, because otherwise Viewport forwards the user to an error page. If you want to forward the user to your space homepage instead, you have to remove all error*.vm templates (Viewport then fallbacks to page.vm) and set a reference of the $page object to the space home page. For example:

Set the current page to the home page

#if ($statusCode == "404")
#set ($page = $pages.home)
#end

Info

If the different viewports are available under different hosts, you have to consider this in your JavaScript code, e.g. by using location.href instead of location.pathname. You might also want to use other HTML elements to present a solution to switch the space.

Result

The result should look like this:

Displaying a latest version

Using the snippet below, you can loop through your versions and also depending on the latest version, display latest in brackets, next to the version.

Important: This is where you fill in your versions with the options, like you are used to, with the value and name. (<option value="ver10">Ver 10</option>) The if condition is here to find out what the currently selected version is.

If you want to keep the variant picker and language picker too, you can combine the HTML that already exists in the sidebar. The main difference here, is that we tell the select that it is of "data-type master-private-space" You can read that option in javascript to determine how to handle the link.

In your assets/js/theme.main.js file on ~ line 535, there is a function called toogleDropdown. Overwrite it with the following (the function closes with a } before the comment Init Footer)