Navigation API | eWizard.js framework

Tags:

#API reference #Navigation API #e-Detailer

# Overview

The navigator module ensures navigation in e-Detailers and surveys. Navigation means transition 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 navigation instance is bound to the instance of Vue as $navigator. You have access to the navigation API and its methods via this context on a slide.

this.$navigator

The navigation 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 navigation (true) or skipped (false). Defaults to true.
force (Boolean) is the optional parameter. Specifies if the navigation 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 navigation 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 navigation 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 navigation 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 navigation 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();
        },
    },
};

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

The following API methods are available for locking and unlocking navigation.

lockNext() locks the navigation to any next slide.
lockPrev() locks the navigation to any previous slide.
lock() locks the navigation to any next and previous slides.
unlockNext() unlocks the navigation to any next slide.
unlockPrev() unlocks the navigation to any previous slide.
unlock() unlocks the navigation to any next and previous slides.

Use the locking or unlocking API methods on your slide instance to lock or unlock the navigation 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();
        },
    },
};

The navigator module provides the navigation status API methods that:

Show if the navigation to the previous or next slide is locked.
Show IDs for the current/previous/next slide and chapter.

# getNavigationStatus

Use the getNavigationStatus API method to find out if the navigation 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.getNavigationStatus();

The getNavigationStatus method returns an object with the status values:

prevNavigationLocked (Boolean) indicates if the navigation to the previous slide is locked.
nextNavigationLocked (Boolean) indicates if the navigation to the next slide is locked.

Consider the following example.

// ./slides/open/index.vue
export default {
    mounted() {
        this.$navigator.lockNext();
        const getStatus = this.$navigator.getNavigationStatus();
        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);
    },
};

# 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);
        }
    }
};

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.

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 navigation events. With hooks, you can activate certain transition (opens new window) 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.

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 (opens new window) 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.

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

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

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(navigation => {
            console.log(navigation)
        }, {
            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(navigation => {
            console.log(navigation)
        }, {
            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.

← Settings API Site navigation API→

# Navigation API

# Overview

# goTo

# Parameters of goTo

# Usage of goTo

# goToNextSlide

# Parameters of goToNextSlide

# Usage of goToNextSlide

# goToPrevSlide

# Parameters of goToPrevSlide

# Usage of goToPrevSlide

# goToNextChapter

# Usage of goToNextChapter

# goToPrevChapter

# Usage of goToPrevChapter

# Locking the navigation

# Usage of locking the navigation

# Navigation status

# getNavigationStatus

# getCurrentSlide

# Flow API

# setFlow

# Parameters for setFlow

# Usage of setFlow

# resetFlow

# Usage of resetFlow

# reset

# Navigation hooks

# Parameters for the navigation hooks

# Usage of the navigation hooks

# openDocument

# Usage of openDocument