eWizard.js documentation

Appearance

Tags
Buildere-DetailerExportVeeva Vault

Veeva Vault ​

You can export e-Detailers to prepare them for subsequent upload to Veeva Vault.

Build structure ​

The exported e-Detailer for Veeva Vault has the following build structure:

.
├─ctlfile/
|  └─slide1.ctl
├─slide1.zip/
|  ├─media/
|  ├─slide1.css
|  ├─slide1.js
|  ├─index.html
|  ├─poster.png
|  ├─settings.json
|  └─thumb.png
├─shared-resources-1.zip/
└─vault.csv
PathDescription
ctlfile/Contains the control file for each slide. For example, if the e-Detailer has two slides: slide1 and slide2, the directory includes two files: slide1.ctl and slide2.ctl.
slide1.zip/An archive with the files for each slide. For example, if the e-Detailer has two slides: slide1 and slide2, the directory includes two files: slide1.zip and slide2.zip.
slide1.zip/media/Contains the media resources used in the slide: fonts, images, PDF files, and videos. Each type of media resource is stored in its own directory.
slide1.zip/slide1.cssContains the CSS used in the resulting build.
slide1.zip/slide1.jsContains the JavaScript used in the resulting build.
slide1.zip/index.htmlThe file used to preview how the slide looks in the browser.
slide1.zip/poster.pngThe poster image for the slide.
slide1.zip/settings.jsonThe file with the e-Detailer settings.
slide1.zip/thumb.pngThe slide thumbnail.
shared-resources-1.zipContains the shared resources: common media, node modules, themes, and other assets that are used across multiple slides. To activate shared resources, enter the name of the archive in the sharedResourceName option of the e-Detailer settings.
vault.csvA CSV input file with the info about the e-Detailer slides included in the build. Used when uploading an e-Detailer with the Multichannel loader.

Limitations ​

Prior to exporting your e-Detailer to Veeva Vault, please consider the following Veeva export limitations:

  • Opening slide customization isn't supported. Slides in the exported build are sorted according to their structure set in eWizard Editor.

  • Subslides aren't supported and aren't included in the build.

Builds with interactive Unity modules ​

To incorporate To incorporate interactive Unity modules into your Veeva builds, specifically when using a .unityweb format (through the unityweb loader), you need to configure the build settings and use a specific code pattern for dynamic loading.

If your animation is implemented using a custom loader file (e.g., TTFieldsScene.loader) exported from Unity and is not required/imported by Vue SFC itself, you must specify the file pattern in settings.json. This ensures the builder processes the file instead of ignoring it.

Add the loader file to the clms.irep.extraFiles section:

json
{
    "clms": {
         "irep": { 
            "extraFiles": ["TTFieldsScene.loader"]
        }
    }
}

Currently, this configuration is supported only for Veeva CRM (irep) exports.

If you load the animation dynamically via a <script> tag (setting .unityweb.loader.js as the src), use the following code pattern to ensure the file path resolves correctly in the build:

javascript
const resolvedLoaderPath = process.env.CLM.name === 'dev'
     ? require.resolve('@/common/js/TTFieldsScene.loader.js')
     : require('@/common/js/TTFieldsScene.loader.js');

const script = document.createElement('script');
script.src = resolvedLoaderPath;

Upload to Veeva Vault ​

You can upload an exported e-Detailer to Veeva Vault as a multichannel presentation, and each slide is uploaded as a multichannel slide. You can upload an e-Detailer in the Multichannel Loader or create a binder.

Upload with Multichannel Loader ​

Make sure you have access to the admin tools to use the Multichannel Loader.

You can upload an e-Detailer by using a CSV file exported from eWizard. If the same e-Detailer is already exists in Veeva Vault, the e-Detailer version is updated.

To upload an e-Detailer from a CSV file:

  1. Click Admin Tools → Multichannel Loader.

  2. Upload the CSV file from the exported archive in the Load CSV section.

  3. Click Next after the CSV is validated.

    The CSV is validated if all the metadata fields in the CSV match the required metadata fields in Veeva Vault. If the fields don't match, Veeva Vault shows hints about the missing data.

  4. Upload the archives with the slides and shared resources in the Load Files section.

  5. Click Next after the archives are uploaded.

  6. Click Complete Load on the Confirmation section.

After loading the files, you can check the load start time in the Load Status section.

Upon uploading the multichannel presentation and slides, you get an email notification. Now, you can use your e-Detailer and slides in Veeva Vault.

Create a binder and upload ​

You can upload e-Detailers to Veeva Vault by creating a binder. For this:

  1. Create a binder in the following ways:

    • Click ▼ → Binder

    • Click + Create → Binder while on the Library tab.

  2. Choose the Multichannel Presentation binder type.

  3. Click Next.

  4. Fill in the required metadata and click Save.

    Select the Publish for Veeva CRM (CLM) option in the CLM properties section to ensure that you can publish the e-Detailer to Veeva CRM.

  5. Click Edit Binder in the opened binder.

  6. In the binder settings, click Add → Upload File.

  7. Upload archives with slides and shared resources. You can upload archives one by one or in bulk.

  8. Choose the Multichannel Slide type and click Next.

  9. Fill in the required fields and click Save.

    Add the following properties to ensure the correct e-Detailer display in Veeva Vault:

    • Disable Actions and iOS Resolution in the CLM Properties section.

    • CRM media type and Shared Resource in the Multichannel Properties section.

    When uploading slides in bulk, you can edit slide metadata for all slides simultaneously and for specific slides.

  10. Copy the document number of the shared resource.

  11. Go to Relationships → Related Shared Resource and click Add Related Shared Resource for each e-Detailer slide.

  12. Paste the document number to the search field, select the shared resource document and click Save.

  13. After adding the shared resource to each slide, remove it from the binder with the respective option.

  14. Click Done Editing.

As a result, you can use your e-Detailer and slides in Veeva Vault.

Slide optimization in exported e-Detailers ​

When you export an e-Detailer, eWizard.js builders optimize the slide content in the resulting index.html file of the build. The slide content is scaled to the target device resolution if the adaptationScale property is activated.

The resulting content is optimized, for example, in Veeva Vault:

html
<!DOCTYPE html><html><head><link rel="preload" href="./shared/common/media/fonts/MPLUS1p-Black.ttf" as="font"><link rel="preload" href="./shared/common/media/fonts/Mplus1p.woff" as="font"><link rel="preload" href="./shared/common/media/fonts/OpenSans-Bold.woff" as="font"><link rel="preload" href="./shared/common/media/fonts/Mplus1pbold.woff" as="font"><link rel="preload" href="./shared/common/media/fonts/OpenSans-SemiBold.woff" as="font">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=1024, height=768, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <script id="scaleCalculation">
      var APP_DIMENSIONS = {
        width: 1024,
        height: 768,
      };
      document.querySelector('meta[name="viewport"]')
        .setAttribute('content', 'width=1024, height=768, user-scalable=no');
      var WINDOW_DIMENSIONS = {
        width: window.innerWidth,
        height: window.innerHeight,
      };
      var scaleFactor = Math.min(
        WINDOW_DIMENSIONS.width / APP_DIMENSIONS.width,
        WINDOW_DIMENSIONS.height / APP_DIMENSIONS.height,
      );
      var marginTop = Math.floor((WINDOW_DIMENSIONS.height - APP_DIMENSIONS.height * scaleFactor) / 2) + 'px';
      var marginLeft = Math.floor((WINDOW_DIMENSIONS.width - APP_DIMENSIONS.width * scaleFactor) / 2) + 'px';
    </script><title>Document</title>
<style data-href="./forteris-edetailer_slide1.css">