Skip to main content

eWizard.js: e-Detailer settings

Manage the target device, screenshot configuration, and other settings of your e-Detailer

eWizard Team avatar
Written by eWizard Team
Updated over 2 years ago

The settings.json file in the project root directory stores the e-Detailer template settings. When you initialize the e-Detailer scaffolding template, this is the default configuration of the settings.json file.

You can use the Settings API to access the e-Detailer settings in raw and interpolated formats.

 {
   "name": "test-edetailer",
   "id": "25cc3689-4ff9-4f99-870f-d05a76fc2193",
   "localization": {
      "current": "eng",
      "original": "",
      "langs": [
         "eng"
      ]
   },
   "clms": {
      "irep": {
         "assetFileNameTemplate": "test-edetailer_{structure.slide.id}",
         "customSwipe": true,
         "swipeSensitivity": 400,
         "irepDisplayOrder": false,
         "sharedResourceName": "shared-resources_25cc3689-4ff9-4f99-870f-d05a76fc2193",
         "vault": {
            "presentation": {
               "name__v": "{settings.name}",
               "title__v": "{settings.name}"
            },
            "keyMessage": {
               "name__v": "{structure.slide.name}",
               "title__v": "{structure.slide.name}",
               "ios_resolution__v": "Default For Device"
            },
            "sharedResource": {
               "name__v": "{settings.name} shared resource",
               "title__v": "{settings.name} shared resource",
               "external_id__v": "{settings.id}_shared_resource"
            }
         },
         "crm": {
            "presentation": {},
            "keyMessage": {
               "Name": "{structure.slide.name}",
               "Product_vod__c": "",
               "Description_vod__c": "{structure.slide.name}"
            },
            "sharedResource": {
               "Name": "{settings.name} shared resource",
               "Description_vod__c": "{settings.name} shared resource"
            }
         }
      },
      "iqvia": {
         "assetFileNameTemplate": "test-edetailer_{structure.slide.id}"
      },
      "ctmobile": {
         "clmDisplayOrder": true
      }
   },
   "browserslist": [
      "last 2 ios version",
      "last 2 android version"
   ],
   "navigation": {
      "swipe": {
         "slide": {
            "direction": "horizontal",
            "touchesCount": 1,
            "enabled": true
         },
         "chapter": {
            "direction": "horizontal",
            "touchesCount": 1,
            "enabled": false
         }
      }
   },
   "screenshoter": {
      "slideWithCommonLayout": "",
      "componentsOnEveryChapter": [],
      "componentsOnEverySlide": [],
      "includeDocuments": true,
      "delay": 1000,
      "icons": {
         "blocks": {
            "width": 150,
            "enabled": true,
            "mode": "view"
         }
      }
   },
   "adaptationScale": true,
   "targetDevices": [
      {
         "device": "iPad",
         "code": "ipad",
         "resolution": "1024x768",
         "dpr": 1,
         "viewport": {
            "width": "1024",
            "height": "768"
         }
      },
      {
         "device": "iPad Air",
         "code": "ipad-air",
         "resolution": "2048x1536",
         "dpr": 2,
         "viewport": {
            "width": "1024",
            "height": "768"
         }
      },
      {
         "device": "iPad Pro",
         "code": "ipad-pro",
         "resolution": "2732x2048",
         "dpr": 2,
         "viewport": {
            "width": "1366",
            "height": "1024"
         }
      },
      {
         "device": "Samsung SM-P555",
         "code": "samsung-sm-p555",
         "resolution": "1024x768",
         "dpr": 1,
         "viewport": {
            "width": "1024",
            "height": "768"
         }
      }
   ]
}

Field

Description

name

The e-Detailer template name.

id

The unique ID of the created e-Detailer.

localization

Information about the current localization and available languages of the e-Detailer template.

clms

The e-Detailer settings for its export to formats compatible with specific target CLM systems.

clms.irep.irepDisplayOrder

Set this option totrue to display the slide order from iRep. Set to false to display the e-Detailer slide order. The default value is false.

clms.vault

The e-Detailer settings for its publishing to Veeva Vault.

clms.crm

The e-Detailer settings for its publishing to or exporting for Veeva CRM.

clms.iqvia

Settings for the IQVIA CLM build.

clms.ctmobile

Settings for the CT Mobile build.

clms.ctmobile.clmDisplayOrder

Set this option to true to display the order from the CLM instead of the structure.json option. The default value is false. For more information, see clmDisplayOrder.

browserslist

Define the supported browsers for demonstrating your e-Detailer. This configuration is applicable in prefixing the CSS rules and polyfilling JS. The exporting engine applies these settings only when building the e-Detailer for the target CLM app. For more information, see the Browserslist configuration syntax.

navіgation

The navіgation actions for slides, subslides, and chapters.

screenshoter

The settings for taking the slide screenshots when you export the e-Detailer to the PDF format. By default, the screenshoter service takes the screenshot of the e-Detailer common layout and components on the first slide. The screenshots of other slides in the e-Detailer have only the slides' content without components.

screenshoter.slideWithCommonLayout

The ID of the slide that has a screenshot of the common layout.

screenshoter.componentsOnEveryChapter

An array of CSS selectors. The screenshots of components are taken for the common layout on the first slide of every chapter. For example, a drop-down menu with the list of slides.

screenshoter.componentsOnEverySlide

An array of CSS selectors. The screenshots of components are taken for the common layout on every slide. For example, References.

screenshoter.includeDocuments

A field that defines if the PDFs attached are added to the exported PDF. The default value is true. If set to false, the reference PDFs aren't added.

adaptationScale

Set to true to scale the e-Detailer to the actual screen size. If set to false, the e-Detailer is displayed with the original resolution. The default value for proportional is true. For more information, see Responsiveness settings for scaffolding templates.

targetDevices

Lists the groups of devices that support the aspect ratio you select when you initialize the e-Detailer. For more information, see Target devices.

For more information about settings in other template types, see the Configuration

section.

Target devices

To get the best experience for displaying your e-Detailer on different mobile devices (tablets or phones), you can configure the screen resolution, DPR, and viewport settings in the ./settings.json file. Their screen size settings depend on the group of target devices you select when you initialize the e-Detailer scaffolding template. For example, these are the settings for the target devices in group 1 that have the 4:3 aspect ratio.

// ./settings.json

{
   "targetDevices": [
      {
         "device": "iPad",
         "code": "ipad",
         "resolution": "1024x768",
         "dpr": 1,
         "viewport": {
            "width": "1024",
            "height": "768"
         }
      },
      {
         "device": "iPad Air",
         "code": "ipad-air",
         "resolution": "2048x1536",
         "dpr": 2,
         "viewport": {
            "width": "1024",
            "height": "768"
         }
      },
      {
         "device": "iPad Pro",
         "code": "ipad-pro",
         "resolution": "2732x2048",
         "dpr": 2,
         "viewport": {
            "width": "1366",
            "height": "1024"
         }
      },
      {
         "device": "Samsung SM-P555",
         "code": "samsung-sm-p555",
         "resolution": "1024x768",
         "dpr": 1,
         "viewport": {
            "width": "1024",
            "height": "768"
         }
      }
   ]
}

You can configure the following settings for the target devices.

  • device is the device name as displayed in eWizard Editor.

  • code is the device ID for the eWizard platform system settings available as part of the administrator capabilities.

  • resolution is the device screen resolution in pixels.

  • dpr is the device pixel ratio.

  • viewport the width and height of the screen in the browser window.

To add a custom target device settings, you need to add this device to the list of target devices in the eWizard platform settings using administration capabilities. As a result, this device displays in eWizard Viewer.

When you initialize an e-Detailer project, you select one of the following groups of target devices with their screen settings. The devices are grouped based on their aspect ratio.

Group 1 (4:3)

The Group 1 devices have a 4:3 aspect ratio.

device

code

dpr

resolution

viewport width

viewport height

iPad

ipad

1

1024x768

1024

768

iPad Air

ipad-air

2

2048x1536

1024

768

iPad Pro

ipad-pro

2

2732x2048

1366

1024

Samsung SM-P555

samsung-sm-p555

1

1024x768

1024

768

Group 2 (8:5)

The Group 2 devices have an 8:5 aspect ratio.

device

code

dpr

resolution

viewport width

viewport height

Samsung 8.0

samsung-8-0

1

1280x800

1280

800

Samsung 10.1

samsung-10-1

2

1920x1200

960

600

Samsung SM-T385

samsung-sm-t385

1

1280x800

1280

800

Samsung SM-T561

samsung-sm-t561

1

1280x800

1280

800

Samsung S5

samsung-s5

2

2560x1600

1280

800

Samsung S7

samsung-s7

2

2560x1600

1280

800

Samsung S7+

samsung-s7+

2

2800x1752

1400

876

Lenovo Yoga Tablet

lenovo-yoga-tablet

1

1280x800

1280

800

Lenovo P11 Pro

lenovo-p11-pro

2

2560x1600

1280

800

Group 3 (3:2)

The Group 3 devices have a 3:2 aspect ratio.

device

code

dpr

resolution

viewport width

viewport height

Microsoft Surface Pro 3

microsoft-surface-pro-3

1.5

2160x1440

1440

960

HP Elite x2 1012 G2

hp-elite-x2-1012-g2

2

2736x1824

1368

912

Group 4 (5:3)

The group 4 devices have a 5:3 aspect ratio.

device

code

dpr

resolution

viewport width

viewport height

Samsung S6 Lite

samsung-s6-lite

2

2000x1200

1000

600

Change the viewport settings

You can change your e-Detailer display on different target device screens with the viewport width and height. To set a specific width and height of your e-Detailer:

1. Change the width and height values in the main.css file.

/* ./common/styles/main.css */

body > .root {
width: 1024x !important;
height: 768px !important;
margin: 0 auto;
transform: translateZ(0);
transform-origin: top;
will-change: transform;
}

2. Change the width and height values in the viewport meta tag of the ./index.html file.

<!-- ./index.html -->

<!DOCTYPE html>
<html>

<head>
   <meta name="viewport" content="height=768, width=1024 user-scalable=no">
</head>
</html>

3. Build your e-Detailer project after you change the width and height.

4. Open the index.html file to view the result.

Responsiveness settings for scaffolding templates

You can set up your e-Detailer to scale for different target devices in the adaptationScale field.

To set responsiveness settings, change the value of adaptationScale to true in the settings.json file of your e-Detailer project.

// ./settings.json

{
   "adaptationScale": true,
   "targetDevices": [
      {
         "device": "iPad",
         "code": "ipad",
         "resolution": "1024x768",
         "dpr": 1,
         "viewport": {
            "width": "1024",
            "height": "768"
         }
      }
   ]
}

To avoid the e-Detailer prerendering issues, it's recommended to list the required target device first in the targetDevices field. For example, if you plan to demonstrate your e-Detailer on an iPad and then on iPad Air, state the devices in the targetDevices field as follows:

// ./settings.json

{
   "targetDevices": [
      {
         "device": "iPad",
         "code": "ipad",
         "resolution": "1024x768",
         "dpr": 1,
         "viewport": {
            "width": "1024",
            "height": "768"
         }
      },
      {
         "device": "iPad Air",
         "code": "ipad-air",
         "resolution": "2048x1536",
         "dpr": 2,
         "viewport": {
            "width": "1024",
            "height": "768"
         }
      }
   ]
}

To see the changes applied to your build, export it for a CLM. The index.html file of the exported archive has the following lines:

<!-- ./index.html -->

<script>
  const APP_DIMENSIONS = {
    width: 1024,
    height: 768,
  };
  document
    .querySelector('meta[name="viewport"]')
    .setAttribute(
      "content",
      "width=device-width, height=device-height, user-scalable=no"
    );
  const WINDOW_DIMENSIONS = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  const scaleFactor = Math.min(
    WINDOW_DIMENSIONS.width / APP_DIMENSIONS.width,
    WINDOW_DIMENSIONS.height / APP_DIMENSIONS.height
  );
  const marginTop =
    Math.floor(
      (WINDOW_DIMENSIONS.height - APP_DIMENSIONS.height * scaleFactor) / 2
    ) + "px";
  const marginLeft =
    Math.floor(
      (WINDOW_DIMENSIONS.width - APP_DIMENSIONS.width * scaleFactor) / 2
    ) + "px";
</script>

As a result, the scaling works without rendering issues.

You can also use the proportional option to scale the components inside the e-Detailer. For this, set the proportional value to true.

// ./settings.json
{
   "adaptationScale": {
      "proportional": true
   },
   "targetDevices": [
      {
         "device": "iPad",
         "code": "ipad",
         "resolution": "1024x768",
         "dpr": 1,
         "viewport": {
            "width": "1024",
            "height": "768"
         }
      }
   ]
}

As a result, all the content in the slide is scaled proportionally.

For example, an image with proportional as false:

An image with propotional as false

And an image with proportional as true:

An image with propotional as false

Veeva Vault settings

When you initialize the e-Detailer template, it must have the unique external ID for the presentation, keyMessage, and sharedResource fields with the following postfixes: _presentation, _keyMessage, and sharedResource in the vault object. The {settings.id} value is the interpolated value from the id field in the ./settings.json file of your e-Detailer.

// ./settings.json

"vault": {
"presentation": {
   "name__v": "{settings.name}",
   "title__v": "{settings.name}",
   "external_id__v": "{settings.id}_presentation",
   },
"keyMessage": {
   "name__v": "{structure.slide.name}",
   "title__v": "{structure.slide.name}",
   "ios_resolution__v": "Default For Device",
   "external_id__v": "{structure.slide.id}_{settings.id}_slide",
   },
"sharedResource": {
   "name__v": "{settings.name} shared resource",
   "title__v": "{settings.name} shared resource",
   "external_id__v": "{settings.id}_shared_resource"
   }
}

{settings.id} is an interpolated id of your e-Detailer. It's used in the Veeva Vault formula and must be unique to avoid duplicating slides or shared resources when you update them.

Monitoring settings

With the monitoring feature, you can track the time spent on a slide. By default, the time tracker starts after two seconds spent on the slide. You can change the startTime value in the settings.json file.

  "kpi": {
    "storageKey": "{settings.id}_KPI",
    "startTime": 2
  }

For more information, see Monitoring.

Use the settings.json file to define the navіgation settings for the swipe gestures between slides, subslides, and chapters.

The following navіgation settings are available for the swipe configuration.

{
...
   "navigation": {
      "swipe": {
         "slide": {
            "direction": "horizontal",
            "touchesCount": 1,
            "enabled": true
         },
         "chapter": {
            "direction": "horizontal",
            "touchesCount": 1,
            "enabled": false,
            "getPrevChapterFirstSlide": false
         },
         "subslide": {
              "direction": "vertical",
              "touchesCount": 1,
              "enabled": true
          }
      }
   },
}

Name

Type

Description

slide

Object

Contains the settings for navіgation between slides.

subslide

Object

Contains the settings for navіgation between subslides.

chapter

Object

Contains the settings for navіgation between chapters.

direction

String

Specifies the swipe direction (horizontal or vertical). The default value is horizontal.

touchesCount

Number

Specifies how many fingers you use to touch the device screen for a swipe gesture. The default value is 1. You can enter the values from 1 to 10. You can use this option for all CLM apps that support custom swipe.

enabled

Boolean

Defines if navіgation between slides / subslides / chapters is turned on/off. The default value is true.

getPrevChapterFirstSlide

Boolean

If this option is true, the first slide of the previous chapter opens when you leave the last slide of the current chapter. This option is useful when you need tо return to the previous chapter in your e-Detailer.

Undefined options are taken from the default settings.

Keyboard navіgation

You can use the keyboard to navigate between slides, chapters, and subslides. The direction settings are:

  • horizontal is for the left/right arrow keys.

  • vertical is for the up/down arrow keys.

For more information, see Navіgation.

clmDisplayOrder

The clmDisplayOrder option defines if the structure.json file is used when you navigate between slides in an exported CT Mobile build.

If the clmDisplayOrder is false, the structure.json defines the order of the slides in the e-Detailer. You can swipe only to visible slides based on their order in the chapters object. Hidden files can't be swiped to. For more information, see Slides and chapters structure.

If the clmDisplayOrder is true, the slides.json file of the CT Mobile build defines the order of the slides in the e-Detailer. You can swipe to both hidden and visible slides based on their order in the slides.json file.

Hidden slides from structure.json version 1 are considered archived and don't appear in the build.

For example, a structure.json file with the following structure:

{
  "structureFileVersion": 2,
  "slides": {
    "home": {
      "name": "Home",
      "template": "slides/home/index.vue"
    },
    "slide1": {
      "name": "Slide 1",
      "template": "slides/slide1/index.vue"
    },
    "slide2": {
      "name": "Slide 2",
      "template": "slides/slide2/index.vue"
    }
  },
  "chapters": {
    "home": {
      "name": "Home",
      "content":[
         "home"
      ]
    },
    "chapter1": {
      "name": "Chapter 1",
      "content": [
        {
          "slide": "slide1",
          "hidden": true
        }
      ]
    },
    "chapter2": {
      "name": "Chapter 2",
      "content": [
         "slide2"
      ]
    }
  },
  "storyboard": [
   "home",
   "chapter1",
   "chapter2"
  ],
  "archivedSlides": [],
  "start": {
    "chapter": "home",
    "slide": "home"
  }
}

When the clmDisplayOrder is false, you can swipe to the home and slide2 slides because slide1 is hidden.

When the clmDisplayOrder is true, you can swipe to the home, slide2, and slide1 slides. slide1 is the last because hidden slides are added to the end of the build.

Did this answer your question?