Settings

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 plugin to access the e-Detailer settings in raw and interpolated formats.

json

{
  "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
    },
    "exeevo-omnipresence": {
      "customSwipe": true,
      "swipeSensitivity": 400
    },
  },
  "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"
      },
      "thumbForEachTheme": false,
    }
  },
  "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 to `true` for displaying the slide order from Veeva CRM. Set to `false` for displaying the e-Detailer slide order. The default value is `false`. Learn more about irepDisplayOrder.
`clms.irep.customSwipe`	If the value is `true`, it indicates that the standard Veeva CRM swipe is blocked and the eWizard custom swipe is used. The eWizard navigation plugin uses the custom swipe and allows to configure the swipe sensitivity. If the standard swipe is blocked, slides are ordered according to the structure defined in the e-Detailer `structure.json` file. The default value is `true`.
`clms.irep.swipeSensitivity`	Defines swiping sensitivity between slides in pixels. By default, set to 400 pixels. In case of using this property, it's required to activate `customSwipe`.
`clms.irep.sharedResourceName`	Defines the name of the shared resources directory. If the directory is defined, files that are reused in the e-Detailer are stored in that directory. Each shared resource is stored in the Veeva Vault settings.
`clms.vault`	Settings for the Veeva Vault build. Learn more about Veeva Vault settings.
`clms.crm`	Settings for the Veeva CRM build.
`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 order from the CLM instead of the `structure.json` option. The default value is `false`. Learn more about clmDisplayOrder.
`clms.exeevo-omnipresence.customSwipe`	If the value is `true`, it indicates that the standard Exeevo Omnipresence swipe is blocked, and the eWizard custom swipe is used. The eWizard navigation plugin uses the custom swipe and allows you to configure the swipe sensitivity. If the standard swipe is blocked, slides are ordered according to the structure defined in the e-Detailer `structure.json` file. The default value is `true`.
`clms.exeevo-omnipresence.swipeSensitivity`	Defines swiping sensitivity between slides in pixels. By default, set to 400 pixels. When using this property, it's required to activate `customSwipe`.
`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. Learn more about browserslist configuration syntax.
`navigation`	The navigation 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 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 PDF files attached to the exported PDF. The default value is `true`. If set to `false`, the reference PDF files aren't added.
`screenshoter.thumbForEachTheme`	If the value is set to `false`, the `wiz thumbs` command generates thumbnails only for the specific theme. If the value is set to `true`, the wiz thumbs command generates thumbnails for all themes except `current` to the directory specified in the `thumbnails` option in system settings. The `current` theme thumbnail is stored in the directory defined in the `thumbnail` option in system settings regardless of the `thumbForEachTheme` value. The default value is `false`.
`screenshoter.delay`	The delay with which the slide screenshot is generated in milliseconds. Learn more about setting delay for screenshot generating.
`screenshoter.icons.blocks.enabled`	A boolean property that defines if the automatic generation of block icons is on. The default value is `false`. Learn more about generating icons for blocks.
`screenshoter.icons.blocks.width`	Defines the width of the generated block icons in pixels. The property works if the `screenshoter.icons.blocks.enabled` is `true`. Learn more about setting generated icon width.
`screenshoter.icons.blocks.mode`	Defines if the block icons are generated as in the Editor PREVIEW or EDIT mode. The default value is `view`. The property works if the `screenshoter.icons.blocks.enabled` is `true`. Learn more about icons for the view/edit mode.
`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. Learn more about responsiveness settings for scaffolding templates.
`adaptationScale.proportional`	`true` by default. Set to `false` to scale the e-Detailer to fullscreen, regardless of whether the e-Detailer's aspect ratio matches the screen ratio. Learn more about responsiveness settings for scaffolding templates.
`adaptationScale.resetViewport`	`false` by default. Set to `true` for correct slide rendering in the Veeva Vault e-Detailer build. Learn more about changing the viewport settings.
`targetDevices`	Lists the groups of devices that support the aspect ratio you select when you initialize the e-Detailer. Learn more about target devices.

Learn more about other template types configuration.

Target devices

To get the best experience for displaying your e-Detailer on different mobile devices, 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 the group 1 that have the 4:3 aspect ratio.

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"
      }
    }
  ]
}

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.

Custom device settings

To define a custom target device settings, add your required device to the list of target devices in the eWizard platform settings using administration capabilities. Once done, your target device appears 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 a 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:

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

css

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

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

txt

<!DOCTYPE html>

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

Build your e-Detailer project after you change the width and height.
Open the index.html file to view the result.

Swiping slides in Veeva Vault builds
For correct slide swiping in Veeva Vault e-Detailer builds, you may need to reset the viewport.

Responsiveness settings for scaffolding templates

You can configure your e-Detailer scaling for different target devices in the adaptationScale field of settings.json.

Your e-Detailer is responsive by default, with adaptationScale set to true. The following options are available for this object:

Field	Type	Description
`proportional`	boolean	Defines the e-Detailer scaling in proportion to the screen aspect ratio
`resetViewport`	boolean	Set to `true`, ensures the proper e-Detailer slides behavior in the Veeva Vault builds.¹

json

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

¹Under the following conditions, unintended leftward swiping may occur on e-Detailer slides:

You're presenting your e-Detailer on iOS or iPadOS devices
The slide contains an <iframe> tag
The swipe gesture is initiated on the <iframe> element itself
The viewport.width meta tag value is numeric

To address this, set adaptationScale.resetViewport to true. Resetting the viewport substitutes the width and height values of the viewport with width=device-width, height=device-height. As a result, your e-Detailer slides behave as intended.

To avoid the e-Detailer pre-rendering 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, list the devices under targetDevices in the required order:

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. As a result, the index.html file of the exported archive has the new lines and your e-Detailer scales correctly.

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.

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"
}
}

Field	Description
`clms.vault.presentation`	Contains the fields that are added in the e-Detailer settings in the Veeva Vault environment.
`clms.vault.presentation.name__v`	The name of the e-Detailer (CLM Presentation Name).
`clms.vault.presentation.title__v`	The description of the e-Detailer.
`clms.vault.external_id__v`	The external ID of the presentation.
`clms.vault.keyMessage`	Includes formulas for generating and configuring `keyMessage` fields in Veeva Vault. The defined settings are applied to each generated `keyMessage`.
`clms.vault.keyMessage.name__v`	The name of the `keyMessage`.
`clms.vault.keyMessage.title__v`	The description of the `keyMessage`.
`clms.vault.keyMessage.ios_resolution__v`	The resolution of the `keyMessage` on iOS devices.
`clms.vault.keyMessage.external_id__v`	The external ID of the `keyMessage`.
`clms.vault.sharedResource.name__v`	The name of the shared resource.
`clms.vault.sharedResource.title__v`	The description of the shared resource.
`clms.vault.sharedResource.external_id__v`	The external ID of the shared resource.

{settings.id} and {settings.name} are the interpolated ID and name of your e-Detailer. They're used in the Veeva Vault formula and must be unique to avoid duplicating slides or shared resources when you update them.

Platforce CLM settings

Add the portfolioPresentationId field to the ./settings.json file for opening your e-Detailer from another e-Detailer in Platforce CLM.

json

{
  "name": "My e-Detailer",
  "id": "my-edetailer",
  "clms": {
    "viseven": {
      "portfolioPresentationId": "my-edetailer"
    }
  }
}

eWizard.js uses the e-Detailer id field for the goTo navigation method in the presentation option to call the specified e-Detailer from another e-Detailer in Platforce CLM.

Add the portfolioPresentationId field to the ./settings.json file in both e-Detailers if you want to open these e-Detailers in both directions: open the second e-Detailer from the slide in the first e-Detailer and vice versa.

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.

json

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

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

The following navigation settings are available for the swipe configuration.

json

{
  "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 navigation between slides.
`subslide`	Object	Contains the settings for navigation between subslides.
`chapter`	Object	Contains the settings for navigation 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 navigation 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.

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.

Learn more about navigation.

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.

Learn more about slide and chapter 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:

json


{
  "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.

irepDisplayOrder

The irepDisplayOrder option defines the structure.json file usage when you navigate between slides in an exported Veeva Vault build.

If the irepDisplayOrder is false, the structure.json file 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.

If the irepDisplayOrder is true, the order of the slides is defined in Veeva Vault in the Edit Binder menu. You can swipe to both hidden and visible slides.

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

json

{
  "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 irepDisplayOrder is false, you can swipe to the home and slide2 slides because slide1 is hidden.

Settings

Target devices

Group 1 (4:3)

Group 2 (8:5)

Group 3 (3:2)

Group 4 (5:3)

Change the viewport settings

Responsiveness settings for scaffolding templates

Veeva Vault settings

Platforce CLM settings

Monitoring settings

Navigation settings

Keyboard navigation

clmDisplayOrder

irepDisplayOrder

Settings ​

Target devices ​

Group 1 (4:3) ​

Group 2 (8:5) ​

Group 3 (3:2) ​

Group 4 (5:3) ​

Change the viewport settings ​

Responsiveness settings for scaffolding templates ​

Veeva Vault settings ​

Platforce CLM settings ​

Monitoring settings ​

Navigation settings ​

Keyboard navigation ​

clmDisplayOrder ​

irepDisplayOrder ​

Settings

Target devices

Group 1 (4:3)

Group 2 (8:5)

Group 3 (3:2)

Group 4 (5:3)

Change the viewport settings

Responsiveness settings for scaffolding templates

Veeva Vault settings

Platforce CLM settings

Monitoring settings

Navigation settings

Keyboard navigation

clmDisplayOrder

irepDisplayOrder