How to setup manual swipes

This document will describe how swipes can be set up in documents to navigate within the document, or to another document. The example will be set up in the script.js of the document but it could also be set up in the Design System for reuse in multiple documents.

Requirements

The example will use touchy-swipe.js, a JavaScript library available in the Design System. It is enabled by default when using the standard Design System provided by Anthill.

The Fusion library also provides a navigation API that is included by default.

Event Listeners

The touchy library emits the following custom events that can be listened to using a standard JS event listener:

swipeleft
swiperight
swipeup
swipedown

Example:

CODE

document.addEventlistener('swipeleft', (e) => {
  console.log('You swiped left');
}, false);

Navigation API

Most often swipes are captured in order to navigate to other documents. Fusion library has a navigation API built in to support opening documents in Activator preview, Veeva CLM or OCE CLM:

Fusion.goTo(slide, presentation, direction, isDocId)

Parameters:

slide [string|number] - Name or id of the document
presentation [string|number] - Id of presentation, or presentationId
direction [string] - Options are ‘next’, ‘previous’, and ‘target’
isDocId [boolean] - If API should use V2 of Veeva goTo API

The parameters can be a bit confusing since they need to support three different platforms. But in general, the API would be called like this:

Fusion.goTo('A demo document')

This will navigate to this specific document in the current binder.

To navigate to another binder (not OCE compatible), either the Vault field ‘presentationId’ or the document id (goToSlideV2 API) of the binder needs to be included.

Fusion.goTo('A demo document', 11023)

It’s also possible to navigate to the next and previous documents in a binder using the direction parameter:

Fusion.goTo('','','next')

This will use Veeva’s nextSlide and OCE’s goNextSequence APIs, and of course, it would also work for ‘previous’.

Full Example

Here is a full example of how to set up swipes on a certain element in a document in order to navigate to a different slide.

The slide has been set up with a popup that has the id ‘demoPopup’.

./script.js

CODE

// Get the element where we want to listen to swipes
const popup = document.getElementById('demoPopup');

if (popup && touchy && Fusion) {
  popup.addEventListener('swipeleft', (e) => {
    e.preventDefault();
    Fusion.goTo('', '', 'next');
  });
  popup.addEventListener('swiperight', (e) => {
    e.preventDefault();
    Fusion.goTo('', '', 'previous');
  });
}