You can add blocks to e-Detailers. By default, e-Detailers have one pre-built block—the module placeholder. Use the module placeholder block in e-Detailers to upload modules from Veeva Vault.
Install dependencies and register components
If your e-Detailer project doesn't have the dependencies for the wiz-block and module-placeholder components installed:
1) Add the dependencies for the wiz-block and module-placeholder components to the package.json in the root of your e-Detailer project.
// ./package.json
{
"dependencies": {
"@blocks/module-placeholder": "git+https://git.qapint.com/ewizardjs/edetailer/blocks/module-placeholder.git#1.0.2",
"wiz-block": "git+https://git.qapint.com/ewizardjs/edetailer/components/wiz-block.git#1.0.1"
}
}2) Install the components for the added dependencies in the root of your e-Detailer project.
wiz install
3) Register the wiz-block and module-placeholder components globally in your e-Detailer by adding them to the ./extensions/globalComponent.js file.
// ./extensions/globalComponent.jsimport wizBlock from 'wiz-block';
import modulePlaceholder from '@blocks/module-placeholder';export default (Vue) => {
Vue.component('wiz-block', wizBlock);
Vue.component('module-placeholder', modulePlaceholder);
};NOTE: The globalComponent.js file may have other names. For example, common.js.
4) Make sure the path to the blocks directory is in the ./.ewizard/settings.json configuration file.
// ./.ewizard/settings.json{
"path": {
"blocks": "node_modules/@blocks",
"blocksFilename": "blocks.json",
"blocksManifest": "common/blocks-library/blocks.json"
}
}Add custom blocks
The module-placeholder block is the default block available in the e-Detailer scaffolding template. To add custom blocks and use them with the module-placeholder block, add your custom blocks to the node_modules/@blocks directory with the dependencies in the ./package.json file. Use the steps described for the wiz-block and module-placeholder components.
You can also add custom blocks locally to the common/blocks-library directory. With this approach, you don't use the dependencies in the package.json file for your custom block. Develop a custom block as a component in the common/blocks-library/custom-block/index.vue file. The custom block component may have dependencies to other eWizard components: for example, wiz-text or wiz-image. Set the dependencies of the custom block component to other eWizard components in the package.json file.
For more information on developing custom components, see Component development.
To add a custom block component to your e-Detailer:
1) Add the directory of your custom block component to the common/blocks-library directory. The custom block component directory must have at least two files:
— index.vue is the Vue file of the custom block component.
— icon.png is the custom block icon for eWizard Editor.
// ./common/blocks-library/custom-block/index.vue<i18n>
{
"eng": {
"header": "<span><b>Header Text H1</b></span></p>"
}
}
</i18n><template>
<wiz-block>
<wiz-text :text="$t('header')"></wiz-text>
</wiz-block>
</template><script>
export default {
components: {},
};
</script>2) Add the common/blocks-library path to the ./.ewizard/settings/json file.
// ./.ewizard/settings.json{
"path": {
"blocks": "common/blocks-library",
"blocksFilename": "blocks.json",
"blocksManifest": "common/blocks-library/blocks.json"
}
}WARNING: The default value for the blocks is node_modules/@blocks. When you change it for the custom blocks, you can't use the default module-placeholder block.
3) Add the configuration for your custom block to the common/blocks-library.blocks.json file to make your block visible in eWizard Editor.
// ./common/blocks-library.blocks.json{
"components": [
{
"id": "custom-block",
"name": "My custom block",
"icon": "common/blocks-library/custom-block/icon.png"
}
]
}— id is the block ID for eWizard.js. The id must be the same as the custom block directory name.
— name is the block name in eWizard Editor.
— icon is the path to the block icon.
As a result, your custom block becomes available for selection on the elements panel in eWizard Editor.
Module placeholder
Use the module placeholder as a predefined block. You can add this block to the slide layout and upload the approved module from Veeva Vault.
NOTE: The module placeholder block is available in e-Detailers by default. If your e-Detailer template doesn't have the module placeholder, see Install dependencies and register components.
You can find the module-placeholder block in the ./node_modules/@blocks/ directory.
The following settings are available for displaying the module placeholder on the elements panel in eWizard Editor:
// ./common/blocks-library/blocks.json{
"components": [
{
"id": "module-placeholder",
"name": "Module placeholder",
"model": {},
"icon": "node_modules/@blocks/module-placeholder/icon.png",
"metadata": []
}
]
}The elements panel in eWizard Editor includes the Blocks tab with the module placeholder block.
To upload Veeva Vault modules to the module placeholder in eWizard Editor:
1) Drag the module placeholder to the slide layout.
2) Select it on the layout.
3) Go to the Properties tab on the customization panel.
4) Click BROWSE.
5) In the Assets pop-up that appears, select Veeva Vault module for upload.
For more information, see Module placeholder type.