Portfolio e-Detailer plugin

The @ewizardjs/portfolio-navigator module, accessible through window.PortfolioNavigator, offers methods for navigation, monitoring, data and structure retrieval for efficient portfolio management.

Portfolios support common navigation and monitoring methods, along with specialized methods designed to handle their composite structure.

The following commonly used methods are supported:

Method	Context	Description	Type
goToNextSlide()	window.PortfolioNavigator	Navigates to the next slide within the current e-Detailer	Navigation
goToPrevSlide()	window.PortfolioNavigator	Navigates to the previous slide within the current e-Detailer	Navigation

Portfolio navigation

Portfolio navigation methods allow you to manage navigation between the component e-Detailers in the portfolio and their individual slides.

goTo

Set up navigation within your portfolio.

this.$portfolio.goTo({ edetailer: string, edetailerId: string, slide: string })

Parameter	Description	Location
edetailer	A component e-Detailer ID	Portfolio structure.json
edetailerId	A component e-Detailer ID	e-Detailer settings.json
slide	A slide ID found in	e-Detailer structure.json

Specify at least one parameter.

• When edetailer and edetailerId are skipped, the method navigates within the current e-Detailer
• When slide is skipped, the method navigates to the first slide of the specified (or current) e-Detailer

Points to consider

• The edetailerID priority is higher than edetailer—with both provided, the edetailer value is disregarded.
• Ensure the required e-Detailer is included in the portfolio structure when using this method.

goToNextEdetailer

Navigate to the next e-Detailer listed in the structure.json file of your portfolio.

window.PortfolioNavigator.goToNextEdetailer()

goToPrevEdetailer

Navigate to the previous e-Detailer listed in the structure.json file of your portfolio.

window.PortfolioNavigator.goToPrevEdetailer()

goToNextSubslide

Navigate to the next subslide of the current e-Detailer.

window.PortfolioNavigator.goToNextSubslide()

goToPrevSubslide

Navigate to the previous subslide of the current e-Detailer.

window.PortfolioNavigator.goToPrevSubslide()

onenter

Register a function to execute when the current e-Detailer is entered.

window.PortfolioNavigator.onenter(handler: (data?: any) => void, options: HookOptions)

When switching to another e-Detailer, ensure the required methods are passed anew.

onbeforeleave

Register a function to execute before leaving the current e-Detailer.

window.PortfolioNavigator.onbeforeleave(handler: (data?: any) => void, options: HookOptions)

When switching to another e-Detailer, ensure the required methods are passed anew.

Portfolio monitoring

getKPI

Retrieve KPI data for all e-Detailers within the portfolio.

window.PortfolioNavigator.getKPI()

This method returns a JSON string containing both standard and custom monitoring data, such as time spent on slides, selected values, and e-Detailer IDs.

clearKPI

Clear SessionStorage data for all e-Detailers in the portfolio.

window.PortfolioNavigator.clearKPI()

Portfolio data retrieval

You can access portfolio data using the following retrieval methods.

getCurrentSlide()

Retrieve the current slide ID along with its parent e-Detailer ID.

window.PortfolioNavigator.getCurrentSlide()

getEdetailers()

Retrieve a list of e-Detailers included in your portfolio.

window.PortfolioNavigator.getEdetailers()

getTargetDevices()

Retrieve a list of target devices configured for the current e-Detailer.

window.PortfolioNavigator.getTargetDevices()

Portfolio extensions

With these methods, you can retrieve details about a portfolio structure, the current e-Detailer, and structures of component e-Detailers. These methods support advanced navigation and data management.

To use these methods, specify the this.$portfolio context.

getStructure()

Retrieve the entire structure of your portfolio.

this.$portfolio.getStructure()

The data returned is always the same within the portfolio, regardless of which component e-Detailer is currently active.

getCurrentEdetailer()

Retrieve the current e-Detailer.

this.$portfolio.getCurrentEdetailer()

This method returns a JSON object with metadata about the current e-Detailer.

getEdetailersStructures()

Retrieve the structures of all component e-Detailers.

this.$portfolio.getEdetailersStructures()