wiz-coded-component

Use wiz-coded-component to import assets from Veeva Vault.

You can create your own components in eWizard, upload them to Veeva Vault, and reuse them with wiz-coded-component. For more information, see Coded component.

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Usage

To use wiz-coded-component, upload the template to eWizard Editor, and upload the Veeva Vault assets. For more information, see Coded.

After you download the template with the imported assets, you can see the <wiz-coded-component> tag added to the slide index.vue file, or the App.vue file of the master template. eWizard Editor also adds the styles for the component in the <style> tag.

The added Veeva Vault asset is stored in the ./common/components/interactiveComponents/ directory and imported with the interactiveComponents Vue component in the slide index.vue file, or the App.vue file.

To prevent issues when uploading templates to eWizard Editor, edit only the wiz-coded-component attributes.

<!--   
./slides/[SLIDE_ID]/index.vue 
OR 
./App.vue
-->

<template>
<wiz-slide class="editable-block">
    <wiz-coded-component
        id="wiz-coded-component-8133"
        class="default"
        :is="'interactive-component'"
        patient1="common/components/interactiveComponents/coded-edetailer-test/media/images/patient-1.png"
        patient2="common/components/interactiveComponents/coded-edetailer-test/media/images/patient-2.png"
        patient3="common/components/interactiveComponents/coded-edetailer-test/media/images/patient-3.png"
        number15="common/components/interactiveComponents/coded-edetailer-test/media/images/number-15.png"
        number20="common/components/interactiveComponents/coded-edetailer-test/media/images/number-20.png"
        data-asset-id="ahm2x1r11f"
    ></wiz-coded-component>
</wiz-slide>
</template>

<script>
import interactiveComponent from '../../common/components/interactiveComponents/coded-edetailer-test';
export default {
  components: {
    interactiveComponent,
  },
};
</script>
<style scoped></style>

<style scoped editor>
#wiz-coded-component-8133 {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  -webkit-transform: matrix(1, 0, 0, 1, 0, 18);
  -ms-transform: matrix(1, 0, 0, 1, 0, 18);
  transform: matrix(1, 0, 0, 1, 0, 18);
  width: 1024px;
  height: 643.469px;
}
</style>

The id and class attributes are required for the correct display of the component styles in eWizard Editor.

The data-asset-id attribute is the ID of the added Veeva Vault asset.

Attributes

You can change the wiz-coded-component component appearance and behavior using the following attributes within the <wiz-coded-component> tag:

• component-name

  Change the component name displayed on the Properties tab in eWizard Editor.

  <wiz-coded-component component-name="Coded"></wiz-coded-component>

Properties

The following properties are available:

Property	Type	Default value	Description
componentName	string	Coded	The text label displayed in eWizard Editor.