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 App.vue file of the email layout. eWizard Editor also adds the styles for the component to 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.

<!-- ./App.vue -->

<template>
    <div>
        <wiz-root align="center" style="background: #ffffff; width: 700px;">
            <wiz-coded-component 
                id="wiz-coded-component-0085"
                :is="'interactive-component'"
                image="common/components/interactiveComponents/email-interactive-component/media/images/ConsistentProtection.png"
            ></wiz-coded-component>
        </wiz-root>
    </div>
</template>

<script>
import interactiveComponent from './common/components/interactiveComponents/email-interactive-component';
export default {
  components: {
    interactiveComponent,
  },
  name: 'wiz-app',
};
</script>

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.