API reference: e-Detailer navigator API

Overview

The navigator module ensures transition in e-Detailers and surveys. You can navigate between slides, subslides, and chapters when you swipe the slides. Use the settings.json file to define the navigation settings.

The navigator module includes the transition hooks that activate certain transition effects, animation, CSS, and other actions when you enter or leave a slide.

The navigator module uses the standard slide demonstration flow defined in the structure.json file. You can create a new demonstration flow dynamically while viewing an e-Detailer.

The navigator instance is bound to the instance of Vue as $navigator. You have access to the navigator API and its methods via this context on a slide.

this.$navigator

The navigator API has the following methods for navigating to the specific slides in your e-Detailer.

goTo

The goTo method opens the slide that you define in the options parameter for this method. You can call this API method on any slide of your e-Detailer using this context.

this.$navigator.goTo(options, force);

The options parameter is required. The force parameter is optional.

Parameters of goTo

The goTo method has the following parameters.

• options (Object) is the required parameter that includes the following fields: — slide (String) specifies the ID of the slide to navigate. — chapter (String) specifies the ID of the chapter to which the slide belongs. — presentation (String) specifies the e-Detailer ID to navigate; available only in the iRep and Viseven CLM builds. For Viseven CLM, specify the e-Detailer id as the presentation field value. For example, presentation: "my-edetailer". See e-Detailer settings for Viseven CLM. — animation (Boolean) defines if the slide's transition animation is played during the navіgation (true) or skipped (false). Defaults to true.

• force (Boolean) is the optional parameter. Specifies if the navіgation lock is ignored. Defaults to false.

Usage of goTo

Use the goTo method on your slide instance to navigate to the slide that you define in the options parameter.

// ./slides/goTo/index.vue
export default {
methods: {
goToLastSlide() {
const options = {
slide: "outsideClick",
chapter: "actions",
animation: true
};
this.$navigator.goTo(options);
},
},
};

goToNextSlide

The goToNextSlide method opens the next slide of your e-Detailer. If the subslide option is set to true, the next subslide opens. You can call this API method on any slide of your e-Detailer using this context.

this.$navigator.goToNextSlide(force, { subslide: true })

The force and subslide parameters are optional.

Parameters of goToNextSlide

The goToNextSlide method has the following parameters.

• force (Boolean) is the optional parameter. Specifies if the navіgation lock is ignored. Defaults to false.

• subslide (Object) is the optional parameter. If the subslide option is set to true, the next subslide opens. Defaults to true.

Usage of goToNextSlide

Use the goToNextSlide method on your slide instance to navigate to the next slide of your e-Detailer.

// ./slides/goTo/index.vue
export default {
methods: {
goToNextSlide() {
this.$navigator.goToNextSlide();
},
},
};

goToPrevSlide

The goToPrevSlide method opens the previous slide of your e-Detailer. If the subslide option is set to true, the previous subslide opens. You can call this API method on any slide of your e-Detailer using this context.

this.$navigator.goToPrevSlide(force, { subslide: true })

The force and subslide parameters are optional.

Parameters of goToPrevSlide

The goToPrevSlide method has the following parameters.

• force (Boolean) is the optional parameter. Specifies if the navіgation lock is ignored. Defaults to false.

• subslide (Object) is the optional parameter. If the subslide option is set to true, the previous subslide opens. Defaults to true.

Usage of goToPrevSlide

Use the goToPrevSlide method on your slide instance to navigate to the previous slide of your e-Detailer.

// ./slides/open/index.vue
export default {
methods: {
goToPreviousSlide() {
this.$navigator.goToPrevSlide();
},
},
};

goToNextChapter

The goToNextChapter method opens the next chapter of your e-Detailer. You can call this API method on any slide of your e-Detailer using this context.

this.$navigator.goToNextChapter(force)

The force (Boolean) is the optional parameter. It specifies if the navіgation lock is ignored. Defaults to false.

Usage of goToNextChapter

Use the goToNextChapter method on your slide instance to navigate to the next chapter of your e-Detailer.

// ./slides/goTo/index.vue
export default {
methods: {
goToNextChapter() {
this.$navigator.goToNextChapter();
},
},
};

goToPrevChapter

The goToPrevChapter method opens the previous chapter of your e-Detailer. You can call this API method on any slide of your e-Detailer using this context.

this.$navigator.goToPrevChapter(force)

The force (Boolean) is the optional parameter. It specifies if the navіgation lock is ignored. Defaults to false.

Usage of goToPrevChapter

Use the goToPrevChapter method on your slide instance to navigate to the previous chapter of your e-Detailer.

// ./slides/goTo/index.vue
export default {
methods: {
goToPreviousChapter() {
this.$navigator.goToPrevChapter();
},
},
};

Locking the navіgation

The navigator module provides the API methods to restrict the navіgation from the current slide. When you lock the navіgation, you can't use the swipe gestures, the keyboard, or the navіgation API methods for navigating to any next or previous slide in your e-Detailer. To override the locked navіgation, use the force parameter or the unlocking API methods.

The following API methods are available for locking and unlocking navіgation.

• lockNext() locks the transition to any next slide.

• lockPrev() locks the transition to any previous slide.

• lock() locks the transition to any next and previous slides.

• unlockNext() unlocks the transition to any next slide.

• unlockPrev() unlocks the transition to any previous slide.

• unlock() unlocks the transition to any next and previous slides.

Usage of locking the navіgation

Use the locking or unlocking API methods on your slide instance to lock or unlock the navіgation to any next or previous slide in your e-Detailer.

// ./slides/open/index.vue
export default {
methods: {
lockNextSlide() {
this.$navigator.lockNext();
},
lockPreviousSlide() {
this.$navigator.lockPrev();
},
lockAnySlide() {
this.$navigator.lock();
},
unlockNextSlide() {
this.$navigator.unlockNext();
},
unlockPreviousSlide() {
this.$navigator.unlockPrev();
},
unlockAnySlide() {
this.$navigator.unlock();
},
},
};

Navіgation status

The navigator module provides the navіgation status API methods that:

• Show if the navіgation to the previous or next slide is locked.

• Show IDs for the current/previous/next slide and chapter.

getNavіgationStatus

Use the getNavіgationStatus API method to find out if the navіgation to the previous or next slide is locked. You can call this API method on any slide of your e-Detailer using this context.

this.$navigator.getNavіgationStatus();

The getNavіgationStatus method returns an object with the status values:

• prevNavіgationLocked (Boolean) indicates if the navіgation to the previous slide is locked.

• nextNavіgationLocked (Boolean) indicates if the navіgation to the next slide is locked.

Consider the following example.

// ./slides/open/index.vue export default { mounted() { this.$navigator.lockNext(); const getStatus = this.$navigator.getNavіgationStatus(); console.log(getStatus); }, };

getCurrentSlide

Use the getCurrentSlide API method to show the IDs for the current slide and chapter. You can call this API method on any slide of your e-Detailer using this context.

this.$navigator.getCurrentSlide();

The getCurrentSlide method returns an object with the IDs for the current slide and chapter:

• chapter (String) shows the current chapter ID.

• slide (String) shows the current slide ID.

Consider the following example.

// ./slides/open/index.vue
export default {
mounted() {
const getCurrentSlide = this.$navigator.getCurrentSlide();
console.log(getCurrentSlide);
},
};

getNextSlide

Use the getNextSlide API method to show the IDs for the next slide and chapter. You can call this API method on any slide of your e-Detailer using this context.

this.$navigator.getNextSlide();

The getNextSlide method returns an object with the IDs for the next slide and chapter:

• chapter (String) shows the next chapter ID.

• slide (String) shows the next slide ID.

Consider the following example.

// ./slides/open/index.vue
export default {
mounted() {
const getNextSlide = this.$navigator.getNextSlide();
console.log(getNextSlide);
},
};

getPreviousSlide

Use the getPreviousSlide API method to show the IDs for the previous slide and chapter. You can call this API method on any slide of your e-Detailer using this context.

this.$navigator.getPreviousSlide();

The getPreviousSlide method returns an object with the IDs for the previous slide and chapter:

• chapter (String) shows the previous chapter ID.

• slide (String) shows the previous slide ID.

Consider the following example.

// ./slides/open/index.vue
export default {
mounted() {
const getPreviousSlide = this.$navigator.getPreviousSlide();
console.log(getPreviousSlide);
},
};

Flow API

A flow means the order in which slides, subslides, and chapters are displayed in your e-Detailer. You can set the flow in the structure.json file. You can't change the e-Detailer structure when users view the e-Detailer.

To change the slides order in the e-Detailer you can use custom flows. You can create a new demonstration flow dynamically by reusing the existing slides or subslides. This means that during the e-Detailer demonstration, only the slides from the new flow are displayed.

The navigator module provides the following API methods to work with flows.

setFlow

The setFlow method sets the new flow for displaying the slides in your e-Detailer. You can call this API method on any slide using this context.

this.$navigator.setFlow(structureFlow, goToOptions);

The structureFlow and goToOptions are the required parameters for the setFlow method.

Parameters for setFlow

• structureFlow (Array) is the collection of slides to form the new e-Detailer flow. Each slide in the array is an object with the following fields:

— slide (String) is the slide ID

— chapter (String) is the chapter ID

• goToOptions (Object) defines the slide you're redirected to after creating the new flow; the object itself has the same fields as the goTo method options.

Usage of setFlow

Use the setFlow method on your slide instance to set the new flow for displaying the slides in your e-Detailer.

// ./slides/goTo/index.vue
export default {
methods: {
createFlow() {
const structureFlow = [{
slide: "open",
chapter: "actions"
},
{
slide: "toggle",
chapter: "actions"
},
{
slide: "switch",
chapter: "actions"
}
];
const goToOptions = {
slide: "open",
chapter: "actions"
};
this.$navigator.setFlow(structureFlow, goToOptions);
},
},
};

The first slide in the new flow is the open slide that you define in the goToOptions parameter.

resetFlow

The resetFlow method resets the current flow and defines the previous flow as current. If the previous flow doesn't exist, the structure.json file is used instead. You can call this API method on any slide using this context.

this.$navigator.resetFlow();

The goToOptions is the optional parameter for the resetFlow method. Use this parameter if you want to open the specific slide when you reset the flow.

Usage of resetFlow

Use the resetFlow method on your slide instance to resets the flow of slides to the previous flow or to the flow defined in the structure.json file. Your flow starts with the open slide because you define it in the goToOptions parameter.

// ./slides/switch/index.vue
export default {
methods: {
resetFlow() {
const goToOptions = {
slide: "open",
chapter: "actions"
};
this.$navigator.resetFlow(goToOptions);
}
}
};

TIP: You can create the flow within the already created one and fill it with other slides. In this case, you can return to the previous flow by using the resetFlow method.

reset

The reset method resets the current flow to the flow defined in the structure.json file. You can call this API method on any slide using this context.

this.$navigator.reset();

The goToOptions is the optional parameter for the resetFlow method. Use this parameter if you want to open the specific slide when you reset the flow. Use the reset method in the same way you use the resetFlow method.

Navіgation hooks

The navigator module provides the API methods in the form of hooks. All hooks are called with their this.$navigator context pointing to the Vue instance invoking it. Use the hooks to subscribe a function to the slide navіgation events. With hooks, you can activate certain transition effects, animation, CSS, and other actions when you enter or leave a slide. You can add the hooks on any slide or component in e-Detailers.

The following hooks are available.

• onbeforeenter(handler, options) registers the subscriber function executed each time when you open a slide, before the slide's transition animation starts.

• onenter(handler, options) registers the subscriber function executed each time when you open the slide, after the transition animation ends.

• onbeforeleave(handler, options) registers the subscriber function executed each time when you leave the current slide, before the slide transition animation starts.

• onleave(handler, options) registers the subscriber function executed each time when you leave the current slide, after the slide transition animation ends.

Parameters for the navіgation hooks

Each hook method has the following parameters.

• handler (Function) is the function that executes after the event publication. The handler function returns the object with the IDs for the current chapter, slide, subslide, and the HTMLElement for the current slide.

• options (Object) — global (Boolean) – if true, specifies that the handler function is registered as global. This means that the handler is invoked on each slide.

Usage of the navіgation hooks

To use the navіgation hooks, add the hook and its parameters to the slide instance. For example, add the onenter hook that accepts the navіgation function as its parameter.

// ./slides/slider1/index.vue export default { created() { this.$navigator.onenter(navіgation => { console.log(navіgation) }, ); }, };

This hooks executes on the slide where you define it. To use this hook globally on every slide in your e-Detailer, add the global parameter with the true value.

// ./slides/slider1/index.vue export default { created() { this.$navigator.onenter(navіgation => { console.log(navіgation) }, { global: true }); }, };

To use the onleave hook on every slide in your e-Detailer, add this code to your slide instance.

// ./slides/slider1/index.vue export default { created() { this.$navigator.onleave(navіgation => { console.log(navіgation) }, { global: true }); }, };

openDocument

The openDocument method opens the file defined in the path parameter. You can call this API method on any slide using this context.

this.$navigator.openDocument(path);

The path parameter is required. Its type is String.

Usage of openDocument

To use the openDocument method, add this code to your slide instance.

// ./slides/slider2/index.vue
export default {
created() {
this.$navigator.openDocument('./e-Detailer.pdf');
},
};

The openDocument method opens the file located as defined in the path parameter. A PDF file opens in a new browser tab as a PowerPoint presentation compatible with CLMs.

The openDocument method opens the files that have the formats supported by your browser. If your browser doesn't support viewing the file format, the download dialog opens. You can download the file to your computer and open it with the dedicated app.

You can use hyperlinks as the path parameter. The link opens in a new browser tab.

// ./slides/slider2/index.vue
export default {
created() {
this.$navigator.openDocument('https://viseven.com/');
},
};

The openDocument method executes when you navigate to the slide where this method is defined.