eWizard.js framework

# Coded component

Tags:
#Tutorials#e-Detailer#Email#Site#Modular approach

Use coded components to import assets from Veeva Vault.

This tutorial shows how to develop a dynamic arrow that expands and collapses when you click it.

You can import your coded component from Veeva Vault to e-Detailers and emails with wiz-coded-component.

# Development

To develop a coded component:

  1. Initialize a component with the wiz init component command.

    wiz init component

    As a result, you get a component with a predefined directory structure.

    .
└─
└─.ewizard/
├    └─ settings.json # The eWizard.js project settings and plugins configuration
├─ demo/ # The demo e-Detailer project
├─ dist/
├    └─ build.js # The component builder
├─ .eslintrc.js # The ESLint configuration file
├─ .gitignore # By default, /node_modules is ignored
├─ .npmignore # By default, /demo and /node_modules are ignored
├─ index.vue # Add your component code here
├─ package.json # npm manifest
└─ settings.json # The component configuration

  2. Remove the demo directory from the initialized component to use the component in an actual template.

  3. Install the necessary dependencies for the component with the wiz install command. You can install components, blocks, and other dependencies.

    • Install the component-types module.

      wiz install @ewizardjs/component-types

      The component-types module is required for eWizard.js to recognize the component types.

    • Install the wiz-image component.

      wiz install @edetailer/wiz-image

    After the installation, eWizard.js adds the dependencies to the package.json file of the component.

    // ./package.json

{
    "dependencies": {

        "@ewizardjs/component-types": "^3.1.0",
        "@edetailer/wiz-image": "^2.0.0",
    }
}

  4. Declare the component types in the ewizard.config.js file.

    // ./ewizard.config.js

import { PropType, FileType } from "component-types";

  5. Configure the component properties for eWizard Editor in the props object of the ewizard.config.js file. For example, the componentName, hideOnSlides, showSecondaryLogo, logoPrimary, and logoSecondary properties:

    // ./ewizard.config.js

export default {
props: {
    componentName: {
    label: {
        eng: "Arrow btn",
        deu: "Arrow btn",
        rus: "Arrow btn",
        ukr: "Arrow btn",
        esp: "Arrow btn",
        fra: "Arrow btn",
    },
    actualType: PropType.String,
    },
    hideOnSlides: {
    label: {
        eng: "Hide on slides",
        deu: "Hide on slides",
        rus: "Hide on slides",
        ukr: "Hide on slides",
        esp: "Hide on slides",
        fra: "Hide on slides",
    },
    actualType: PropType.Slides,
    },
    showSecondaryLogo: {
    label: {
        eng: "Show secondary logo",
        deu: "Show secondary logo",
        rus: "Show secondary logo",
        ukr: "Show secondary logo",
        esp: "Show secondary logo",
        fra: "Show secondary logo",
    },
    actualType: PropType.Slides,
    },
    logoPrimary: {
    label: {
        eng: "Arrow primary",
        deu: "Arrow primary",
        rus: "Arrow primary",
        ukr: "Arrow primary",
        esp: "Arrow primary",
        fra: "Arrow primary",
    },
    actualType: PropType.File,
    subtype: FileType.Image,
    sealed: true,
    },
    logoSecondary: {
    label: {
        eng: "Arrow secondary",
        deu: "Arrow secondary",
        rus: "Arrow secondary",
        ukr: "Arrow secondary",
        esp: "Arrow secondary",
        fra: "Arrow secondary",
    },
    actualType: PropType.File,
    subtype: FileType.Image,
    sealed: true,
    },
},
};

    The ewizard.config.js file shows the following properties:

    • The componentName property is the name of the component in eWizard Editor.

    • The hideOnSlides property hides the arrow logo in the collapsed state, and showSecondaryLogo shows the logo in an open state.

    • The logoPrimary and logoSecondary properties represent the expanded and collapsed state of the arrow. When properties are sealed, they're not displayed in eWizard Editor. For more information, see Hide properties.

    Each property has a defined type in the actualType field. For more information, see Property types.

  6. Import the assets in the <script> tag of the index.vue file of the component. You can import images, styles, and eWizard.js components. For example, wiz-image:

    <script>
import wizImage from 'wiz-image';
import logoPrimary from './media/images/openMenu.png';
import logoSecondary from './media/images/openMenuWhite.png';

export default {
  name: 'wiz-by-arrow-open-menu',
  components: {
    wizImage
  }
};

</script>

  7. Add the component markup in the <template> tag of the index.vue file. You can use HTML attributes and eWizard components. For example, an HTML table with a row and a column:

    <!-- ./index.vue -->

<template>
  <div v-show="isVisible" class="wiz-by-arrow-open-menu">
    <wiz-image v-if="showPrimaryLogo"
              class="arrow-image"
              :src="logoPrimary"></wiz-image>
    <wiz-image v-else
              class="arrow-image"
              :src="logoSecondary"></wiz-image>
  </div>
</template>

    The component uses the v-show, v-if, and v-else Vue directories (opens new window) to show the different arrow logos for the collapsed and expanded arrow state.

  8. Define the component properties, in the props object of the index.vue file.

    <!-- ./index.vue -->

<script>
export default {
  name: 'wiz-by-arrow-open-menu',
  props: {
    componentName: {
      type: String,
      default: "Arrow Btn"
    },
    hideOnSlides: {
      default: () => []
    },
    showSecondaryLogo: {
      default: () => []
    },
    logoPrimary: {
      type: String,
      default: logoPrimary
    },
    logoSecondary: {
      type: String,
      default: logoSecondary
    }
  }
};
</script>

  9. Add the function that shows different arrow logos when it's collapsed or expanded in the index.vue file.

    <script>
export default {
  name: 'wiz-by-arrow-open-menu'
  computed: {
    isVisible() {
      return !this.hideOnSlides.some(item => item.slide === this.currentSlide);
    },
    showPrimaryLogo() {
      return !this.showSecondaryLogo.some(item => item.slide === this.currentSlide);
    },
    currentSlide() {
      return this.$navigator.getCurrentSlide().slide;
    }
  }
};

</script>

    The function uses the getCurrentSlide method of the navigation API.

  10. Add some component styles in the <style> tag of the index.vue file.

    <!-- ./index.vue -->

<style scoped>
.wiz-by-arrow-open-menu .arrow-image{
  display: block;
  width: 26px;
  height: 17px;
}
</style>

# Adding to a template

To use your custom component in a template:

  1. Add the developed component directory to the ./common/components directory of your template.

  2. Add the component tag to the Vue file with the layout.

    For example, add the wiz-by-arrow-open-menu component to the App.vue file of an e-Detailer master template:

    <!-- App.vue -->

<template>
    <wiz-root :class="{'refs-styles': isDefaultSlides}">
        <wiz-viewer>
            <wiz-container id="arrowOpenContainer" @click.native="openMenu()" class="btn-wrapper not-menu pa">
                <wiz-by-arrow-open-menu :show-secondary-logo="[{'slide': 'blankSlide11'}]" id="arrowOpen" class="img-for-btn arrow"
                data-element-type="Headline"></wiz-by-arrow-open-menu>
            </wiz-container>
        </wiz-viewer>
    </wiz-root>
</template>

    The data-element-type attribute is used for the component classification when publishing your template to Veeva Vault. data-element-type is required for the component to work in the modular approach.

    By default, data-element-type has a specific set of values based on the component. Check the values in the ELEMENT TYPE field in eWizard Editor. To add or change values, please contact eWizard Support.

  3. Register the component locally in the Vue layout file. For example, the App.vue file:

    <!-- App.vue -->

<script>
import wizByArrowOpenMenu from './common/components/wiz-by-arrow-open-menu/index.vue';

export default {
  name: 'wiz-app',
    components: {
      wizByArrowOpenMenu,
  },
};
</script>

    You can't register custom components globally with preinstalled eWizard components in the same template. Register custom components locally to use them with preinstalled components.

# Uploading to Veeva Vault

Upload your component to Veeva Vault, so you can import it to eWizard Editor.

Before uploading the component, make sure to archive the component with the wiz-component-build command.

To use the component in Veeva Vault, upload it as a user, and connect it to a module as an admin.

To upload the component:

  1. Create a new document. There are two ways to create a new document:

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

    • Click ▼ → Upload.

  1. Upload an archive with your component.
  1. Choose the document type Component > Interactive when uploading the component archive.

  1. Fill in all the required fields and save changes.

  2. After uploading the component as a user, switch to the admin mode and create a new module (opens new window).

  3. In the content module menu, select the Content Module Document Assets and click + Create.

  1. Select Data in the Content Asset Module Type field.

  1. Fill in the required fields in the Create Data pop-up.

    • Asset is the name of the uploaded component in Veeva Vault.

    • Channel is the eWizard item type you plan to use the component for. Select e-Detailer or Email.

    • Image Element Type is the element type for image classification. For example, when you select the Icon element type for eWizard images, only assets of the matching element type can be uploaded from Veeva Vault.

Read more

Last updated: 2/22/2024, 3:46:44 PM

←