Skip to content

iDetailAid Viewer API

The iDetailAid Viewer (which wraps all content) exposes a number of useful API methods that can be called from JavaScript written either directly into the slide using the iDetailAid Code Editor or inside HTML Packages

The Viewer exposes a public API via Viewer.api, for example Viewer.api.goBack()

Namespaces

The main viewer exposes its API under the following namespace: uk.co.idetailaid.Viewer.

For convenience, the following aliases are also created if available: ida.Viewer and Viewer.

The rest of this documentation refers to the Viewer alias.

HTML Packages

HTML packages are run inside an <iFrame/> within the Presentation Viewer. The API commands are automatically injected for you under the same namespaces as in the Viewer:

If your HTML package code already defines the aliases ida or Viewer, then you must use the full namespace to access the API.

uk.co.idetailaid.Viewer.api.goBack();

See HTML Packages for more.

Tip

You can get interactive help in the Viewer itself. Preview a slide, open the Inspector and run one of the following commands in the Console

Viewer.help();
Viewer.api.help();
Viewer.api.help('goToSlide');

API Methods

Method name description
writeMockAPI Creates a mock API for the Viewer API to enable development of HTML packages outside of iDetailAid.
writeMockManifest Creates mock presentation data that the mock API can use.
goToSlide Navigate to another slide either in the current presentation, or another presentation.
goTo Navigate to a slide by its grid position in the current presentation.
goBack Navigate back to the previous slide.
goUp Navigate to the slide above in the current column.
goDown Navigate to the slide below in the current column.
goLeft Navigate to the first slide in the column to the left.
goRight Navigate to the first slide in the column to the right.
openReference Open an iDetailAid reference document.
openAsset Open a iDetailAid asset.
openUrl Open a url.
showVirtualSlide Start tracking a pseudo SLIDE VIEW event which will continuously be sent to the Veeva Call Clickstream.
hideVirtualSlide This will stop logging a pseudo SLIDE VIEW event to the Veeva Call Clickstream.
setSwipe Enable / disable swiping for the whole presentation, or a specific slide. See $slide API to disable it for the current slide only.
setArrows Enable / disable arrows for the whole presentation, or a specific slide. See $slide API to disable it for the current slide only.
getCurrentSlideDetails Get information about the current slide.
getCurrentPresentation Get the current presentation.
getCurrentPresentationSlides Get the current presentation slides.
getCurrentPresentationCoreFlowSlides Get the current presentation core flow slides only.
getCurrentPresentationManifest Get the current presentation manifest.
getCurrentSlideDetails Get the current slide details..

writeMockAPI

Viewer.api.writeMockAPI()

Creates a mock API for the Viewer API to enable development of HTML packages outside of iDetailAid.

Argument Type Description
print Boolean Optional. If true the mock API is not saved to file, but printed to the console.

Tip

Include this, along with the mock manifest file into your HTML package as follows to get testing data outslde of iDetailAid

<script src="iDetailAid_mock_viewer_manifest.js"></script>
<script src="iDetailAid_mock_viewer_api.js"></script>

writeMockManifest

Viewer.api.writeMockManifest()

Creates a mock API for the Viewer API to enable development of HTML packages outside of iDetailAid.

Argument Type Description
print Boolean Optional. If true the mock API is not saved to file, but printed to the console.

Tip

Include this, along with the mock api file into your HTML package as follows to get testing data outslde of iDetailAid

<script src="iDetailAid_mock_viewer_manifest.js"></script>
<script src="iDetailAid_mock_viewer_api.js"></script>

You can then edit the mock manifest to structure the data how you want for testing.

goToSlide

Viewer.api.goToSlide ( slideId, [presentationId] )

Navigate to another slide either in the current presentation, or another presentation.

Argument Type Description
slideId int The iDetailAid slide ID to navigate to
[presentationId] int The ID of the iDetailAid presentation if slideId is in another presentation

goTo

Viewer.api.goTo ( column, row )

Navigate to a slide by its grid position in the current presentation

Argument Type Description
column int The column index of the slide
row int The row index of the slide

goBack

Viewer.api.goBack()

Navigate back to the previous slide.

goUp

Viewer.api.goUp()

Navigate to the slide above in the column.

goDown

Viewer.api.goDown()

Navigate to the slide below in the current column.

goLeft

Viewer.api.goLeft()

Navigate to the first slide in the column to the left.

goRight

Viewer.api.goRight()

Navigate to the first slide in the column to the right.

openReference

Viewer.api.openReference( referenceId )

Open an iDetailAid reference document

Argument Type Description
referenceId int The iDetailAid Id of the reference.

openAsset

Viewer.api.openAsset( assetId )

Open a iDetailAid asset

Argument Type Description
assetId int The iDetailAid Id of the assetId.

openUrl

Viewer.api.openUrl( url )

Open a url

Argument Type Description
url string A url to open in a browser

showVirtualSlide

Viewer.api.showVirtualSlide( id, description )

Start tracking a pseudo SLIDE VIEW event which will continuously be sent to the Veeva Call Clickstream. For Veeva integration only. The clickstream object will be continuously updated with the duration of the view until either the main slide closes, hideVirtualSlide or showVirtualSlide is called again. This can be useful when showing sub content in an HTML package which you want track as though it was a slide. See hideVirtualSlide

Argument Type Description
id string An id that you want to be mapped against the Call Clickstream object description (String) : A description that you want to be mapped against the Call Clickstream object

hideVirtualSlide

Viewer.api.hideVirtualSlide( id, description )

This will stop logging a pseudo SLIDE VIEW event to the Veeva Call Clickstream.For Veeva integration only. showVirtualSlide must have been called first to start the timer. hideVirtualSlide will then stop logging to the Call Clickstream. See showVirtualSlide

Argument Type Description
id string An id that you want to be mapped against the Call Clickstream object
description string A description that you want to be mapped against the Call Clickstream object

setSwipe

$slide.api.setSwipe( state )

Enable or disable swipes on the current slide only. See Viewer API to disable it for the whole presentation, or another slide.

It accepts one argument; state: An object containing one or more of the following keys: 'left', 'right', 'up', 'down'. Each is a boolean: true to enable the arrow, false to disable it. The update is a patch, so setting only on direction will modify only that direction.

To disable just the left and right:
$slide.api.setSwipe( {left:false, right:false} )

To disable all:
$slide.api.setSwipe( {left:false, right:false, up:false, down:false} )

To enable just one:
$slide.api.setSwipe( {left:true} )

Argument Type Description
state object An object containing one or more of the following keys: 'left', 'right', 'up', 'down'. Each is a boolean: true to enable the arrow, false to disable it.

setArrows

Viewer.api.setArrows( state )

Viewer.api.setArrows( state, x, y )

Enable or disable arrows on the on the whole presentation, or a specific slide found at position x and y in the presentation. See Slide API to disable it for the current slide only.

It accepts one argument; state: An object containing one or more of the following keys: 'left', 'right', 'up', 'down'. Each is a boolean: true to enable, false to disable. The update is a patch, so setting only on direction will modify only that direction.

To disable just the left and right:
Viewer.api.setArrows( {left:false, right:false} )

To disable all:
Viewer.api.setArrows( {left:false, right:false, up:false, down:false} )

To enable just one:
Viewer.api.setArrows( {left:true} )

To enable affect a specific slide:
Viewer.api.setArrows( {left:true}, 10, 4 )

Argument Type Description
state object An object containing one or more of the following keys: 'left', 'right', 'up', 'down'. Each is a boolean: true to enable, false to disable.
x integer Optional. The x position in the presentation of the slide to affect.
y integer Optional. The y position in the presentation of the slide to affect.

setSwipe

Viewer.api.setSwipe( state )

Viewer.api.setSwipe( state, x, y )

Enable or disable arrows on the on the whole presentation, or a specific slide found at position x and y in the presentation. See Slide API to disable it for the current slide only.

It accepts one argument; state: An object containing one or more of the following keys: 'left', 'right', 'up', 'down'. Each is a boolean: true to enable, false to disable. The update is a patch, so setting only on direction will modify only that direction.

To disable just the left and right:
Viewer.api.setSwipe( {left:false, right:false} )

To disable all:
Viewer.api.setSwipe( {left:false, right:false, up:false, down:false} )

To enable just one:
Viewer.api.setSwipe( {left:true} )

To enable affect a specific slide:
Viewer.api.setSwipe( {left:true}, 10, 4 )

Argument Type Description
state object An object containing one or more of the following keys: 'left', 'right', 'up', 'down'. Each is a boolean: true to enable, false to disable.
x integer Optional. The x position in the presentation of the slide to affect.
y integer Optional. The y position in the presentation of the slide to affect.

getCurrentSlideDetails

Viewer.api.getCurrentSlideDetails( callback ) Viewer.api.getCurrentSlideDetails().then( success )

Get information about the current slide.

Argument Type Description
callback Function A callback function invoked with one argument: (slideDetails). These details are also provided in the $(document).on('slideLoaded', event => console.log(e) ) handler.

returns : Promise

getCurrentPresentation

Viewer.api.getCurrentPresentation( callback ) Viewer.api.getCurrentPresentation().then( success )

Get information about the current presentation.

Argument Type Description
callback Function A callback function invoked with one argument: (presentation). This is the presentation object

returns : Promise

getCurrentPresentationSlides

Viewer.api.getCurrentPresentationSlides( asGrid, callback ) Viewer.api.getCurrentPresentationSlides( asGrid ).then( success )

Get an array of the current presentation slides.

Argument Type Description
asGrid boolean An optional argument. Default is false. If true a 2 dimensional array is returned, representing the presentation structure. If false a flat array is returned
callback Function A callback function invoked with one argument: (slides). The array of slide.

returns : Promise

getCurrentPresentationCoreFlowSlides

Viewer.api.getCurrentPresentationCoreFlowSlides( callback ) Viewer.api.getCurrentPresentationCoreFlowSlides().then( success )

Get an array of the current presentation's core flow slides, the top row in the grid.

Argument Type Description
callback Function A callback function invoked with one argument: (slides). The array of slide.

returns : Promise

getCurrentPresentationManifest

Viewer.api.getCurrentPresentationManifest( callback ) Viewer.api.getCurrentPresentationManifest( ).then( success )

Get an array of the current presentation's core flow slides, the top row in the grid.

Argument Type Description
callback Function A callback function invoked with one argument: (slides). The array of slide.

returns : Promise

getCurrentSlideDetails

Viewer.api.getCurrentSlideDetails( callback ) Viewer.api.getCurrentSlideDetails( ).then( success )

Get the current slide details.

Argument Type Description
callback Function A callback function invoked with one argument: (slideDetails).

returns : Promise

Deprecated Commands

The following ways of interacting with the Viewer have been deprecated. They are currently still supported, but you should change your code to use the new Viewer.api methods as these will be removed in a future release.

Viewer.trigger( commandName, arg1, arg2 )

Viewer.Commands.trigger( commandName, arg1, arg2 )

Tip

To upgrade to the new api simply replace the above format with

Viewer.api.commandName(arg1, arg2)

If conditional logic needs to be wrapped around navigation commands (this is not possible using the built in Open Slide action for content areas in iDetailAid) you can use the goToSlide api.

Warning

Hard coded slide and presentation id's will no longer work when content is copied into an affiliate region. The id's will change when being copied, but hard coded id's can not be updated as part of that process.

If you must use the goToSlide api call, then ensure your affiliate agencies change the slide ids once the content has been copied over to their region.

If you are building an HTML5 package, use custom events to wire up the navigation.

Please note: Before following this process, you must have created the presentation in the presentation tab of iDetailAid, and added to it the slide you want the user to navigate to.

First, make a note of the presentation and slide id

  1. Click the "Presentations" tab
  2. Select the presentation which includes the slide you want to navigate to
  3. Make a note of the presentation ID, which can be found in the address bar:

Presentation ID

Screenshot

  1. In the slide sorter at the bottom of the page, click on the slide that you want to navigate to
  2. Make a note of the slide ID, which can be found in the address bar

Slide ID

Screenshot

Then, the command can be constructed

Viewer.api.gotoSlide({slideId},[{presentationId}])

Note

presentationId is optional if you are navigating to a slide within the same presentation