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 |
| The e-Detailer template name. |
| The unique ID of the created e-Detailer. |
| Information about the current localization and available languages of the e-Detailer template. |
| The e-Detailer settings for its export to formats compatible with specific target CLM systems. |
| Set this option to |
| The e-Detailer settings for its publishing to Veeva Vault. |
| The e-Detailer settings for its publishing to or exporting for Veeva CRM. |
| Settings for the IQVIA CLM build. |
| Settings for the CT Mobile build. |
| Set this option to |
| 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. |
| The navіgation actions for slides, subslides, and chapters. |
| 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. |
| The ID of the slide that has a screenshot of the common layout. |
| 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. |
| An array of CSS selectors. The screenshots of components are taken for the common layout on every slide. For example, References. |
| A field that defines if the PDFs attached are added to the exported PDF. The default value is |
| Set to |
| 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.
deviceis the device name as displayed in eWizard Editor.codeis the device ID for the eWizard platform system settings available as part of the administrator capabilities.resolutionis the device screen resolution in pixels.dpris the device pixel ratio.viewportthe 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.
|
|
|
|
|
|
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.
|
|
|
|
|
|
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.
|
|
|
|
|
|
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.
|
|
|
|
|
|
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:
And an image with proportional as true:
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.
Navіgation settings
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 |
| Object | Contains the settings for navіgation between slides. |
| Object | Contains the settings for navіgation between subslides. |
| Object | Contains the settings for navіgation between chapters. |
| String | Specifies the swipe direction ( |
| Number | Specifies how many fingers you use to touch the device screen for a swipe gesture. The default value is |
| Boolean | Defines if navіgation between slides / subslides / chapters is turned on/off. The default value is |
| Boolean | If this option is |
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:
horizontalis for the left/right arrow keys.verticalis 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.