Skip to content

eWizard tokens

eWizard tokens are special markers that are replaced by the matching values, such as the Veeva Vault approval document number or country code, after publishing your e-Detailers and emails from eWizard to Veeva Vault as PDF, and interactive, or when exporting your item to PDF.

To use this feature, check package.json to ensure a Vuex dependency and that the eWizard.js version is 5.27.7 or higher. You can install Vuex when initializing an e-Detailer or an email.

To use tokens, create a Vuex store in your template. For this:

  1. Define the createStore function in the ./store/index.js file.

    js
    import Vuex from 'vuex';
    import actions from './actions';
    import mutations from './mutations';
    import getTokensModule from './tokens';
    
    export default ({ settings, navigator, createStoreModule }) => new Vuex.Store({
      state: {},
      actions,
      mutations,
      modules: {
        tokens: createStoreModule('tokens', getTokensModule()),
      },
    });
  2. Make a function where the state field returns the import state from './state.json' value in the tokens module. For example, the default function:

    js
    // ./store/tokens/index.js
    
    import state from './state.json';
    
    export default function () {
      return {
        state,
      };
    }
  3. Import the createStore function and export the default function to the ./extensions/store.js file.

    js
    // ./extensions/store.js
    
    import Vuex from 'vuex';
    import { createStore } from '../store';
    
    export default function (Vue, { settings, navigator, createStoreModule }) {
      Vue.use(Vuex);
      return {
        store: createStore({ settings, navigator, createStoreModule }),
      };
    }

The token data is stored in the state.json file.

json
// ./store/tokens/state.json

{
    "VeevaApprovalDocumentNumber": "AB-12345"
}

To display the token, add it to the index.vue file of an e-Detailer slide or the App.vue file of the email layout.

For example, the VeevaApprovalDocumentNumber token:

html
<!-- ./slides/default/index.vue -->

<i18n>
{
  "eng": {
    "token": "<div><span>{$$.VeevaApprovalDocumentNumber}</span></div>"
  }
}
</i18n>

<template>
  <wiz-slide>
    <wiz-text :text="$t('token', { $$ })"></wiz-text>
  </wiz-slide>
</template>
<script>
export default {};
</script>
<style scoped></style>

As a result, when you export a Veeva Vault build, the e-Detailer or email is displayed with the token value.

The token name can only include the following:

  • Lower and upper case letters of the English alphabet: a–z, A–Z.

  • The _ and $ symbols.

  • Numbers.

The token name mustn't begin with a number.