Skip to content

iDetailAid Code Editor

In the iDetailAid Slide Editor there is an inline, slide level code editor. This allows content authors to write JavaScript code which can respond to iDetailAid Viewer Events and Content Area Events.

Accessing the code editor

In the Slide Editor:

  1. Click anywhere in the slide canvas
  2. In the properties side bar, click the Code Editor tab

Slide Code Editor

Screenshot

Tip

You can open the code editor as a separate, resizeable window by pressing the TinyInline button

Writing code

The inline code editor supports JavaScript code, and you automatically have access to jQuery via $.

Scope

To prevent property name clashes, each slide in iDetailAid has its own JavaScript scope. All functions and fields defined in the script editor are only visible to that slide - so when other slides are loaded into the Viewer cache, they do not all share the same global scope.

However, when exposing data to an HTML package embedded in the slide you will need to ensure that the data is "public" so it can be accessed from outside of the current scope. You simply assign the value as a property of the current scope with this.

Private Scope

All of these fields and functions cannot be accessed from outside the slide scope

    var myValue = 10;
    function add(a,b) {
        return a+b;
    }

    var result = add(myValue, 5);

Public Scope

In this example we expose the add function and the myValue property so it can be accessed by embedded HTML packages

    this.myValue = 10;
    this.add = (a,b) => {
        return a+b;
    }

    var result = this.add(this.myValue, 5);

Now the any HTML package in the slide can access these "public" properties and methods via the ida.slide.scope object.

    var slide = ida.slide.scope;
    var result = slide.add(slide.myValue, 5);

Don't

Don't assign anything globally to the window object as another slide in the cache can overwrite it. Both these examples are bad.

    window.myValue = 10;
    myOtherValue = 10;

See Interaction between the slide and the HTML package for more.

The $slide Object

A slide level object called $slide is available which is a jQuery reference to the current slide DOM Element.

$slide.on

Listening for events on the $slide object ensures they originated from the current slide

$slide.on('slideLoaded', (event) => {
    // Your slide code
});

$(document).on

It is recommended that you do not use $(document).on to listen for events in the slide editor. The Viewer pre-loads and caches slides before they are scrolled into view, so $(document).on('slideLoaded' could potentially fire 4 times,once for each slide that has been loaded.

$(document).on('slideLoaded', (event) => {
    // Fires for every slide loaded
});

The $slide.api

The slide object also contains some api methods for working with slides, see $slide API Method

Available Events

A full list of the available event can be found here

Content Area Events

You can listen out for events on specific content areas, including 'click' events.

In order to attach event listeners to content areas, the content area must be given a unique name.

To name a content area:

  1. Click the content area
  2. In the properties side bar, select the "General" tab
  3. Enter a name in the text field

Example

Screenshot

This will set the id attribute on the content area container <div> element in the DOM and allow you to reference it in your code.

Now you can reference this content area by its id in the code editor:

$slide.on('click', '#myContentArea'...

Select the content area by using the $slide jQuery reference. This ensures you target the current slide only and dont match any content areas with the same name in other cached slides.

$slide.on('click', '#myContentArea',  (event) => {
    // The content area was clicked
});

$('#myContentArea').on('click'...

Do not reference the content area directly with jQuery as it may incorrectly match an element with the same ID in another cached slide.

$('#myContentArea').on('click',  (event) => {
    // This could incorrectly match a content area in a different cached slide
});

Viewer API methods

There is a host of Viewer commands that can be triggered from JavaScript, either from the Slide Code editor, or from JavaScript in HTML packages, such as Viewer.api.openSlide() Viewer.api.goBack() etc. See iDetailAid Viewer API for details.

Tip

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

Viewer.help();

Ensure the slide is loaded

It is recommended that any code is executed once the slide is loaded. To do this, ensure your code is wrapped in an 'slideLoaded' event:

 $slide.on('slideLoaded', (event) => {
      // Your slide code
  });

Code snippets

Pressing Ctrl+Space will display a list of code snippets that can be used in your code. These include:

  • A list of $slide level events
  • A list of all available content area names
  • Code snippets for all named content areas, including click handlers
  • Code snippets for all available lifecycle events, including event handlers

Code validation

The code editor will automatically validate or "lint" code written in the editor. Please ensure all errors are resolved beofre saving the slide.

Veeva JavaScript Library

From within the code editor, you have access to the Veeva JavaScript library to allow you to develop content which interacts with the Veeva CRM database, for example:

com.veeva.clm.getDataForCurrentObject("Presentation", "Survey_vod__c", getSurveyQs);

Automatically creating click handlers

iDetailAid provides a useful feature for automatically creating click handlers for content areas.

  1. In the properties side bar for a selected content area, click the "General" tab
  2. Under the name of the content area, click the Code Editor button

This will jump you to the code editor window and prefill a click handler for the content area.

Note

If a click handler for the content area already exists, the code editor will jump to this location.