Blocks for modular approach

Blocks play an important role in the modular approach since they're used to load modules and assets from Veeva Vault. You can use pre-made blocks, such as module-placeholder, or add blocks locally.

For more information about the module-placeholder block, see Module placeholder.

Requirements

To use blocks for uploading Veeva Vault modules:

• Add blocks locally to the ./common/blocks directory.

• Each block must have a root <wiz-block> tag and a unique ID or class. They're used for the block styling. For example:

  <!-- ./common/blocks/[BLOCK_ID]/index.vue -->
  
  <template>
  <wiz-block
      id="block1"
      class="block1 block"
  >
  </wiz-block>
  </template>

  Apply the styles to the appropriate classes or ID in the <style> tag.

  <!-- ./common/blocks/[BLOCK_ID]/index.vue -->
  
  <style lang="scss">
  .block1 {
  width: 100%;
  margin: 0 auto;
  min-height: 685px;
  display: flex;
  
  b span {
      font-weight: 700 !important;
  }
  
  .block-image img {
      object-fit: contain;
      object-position: center;
  }
  .wiz-text.header {
      position: absolute;
      padding: 0 55px;
      transform: matrix(1, 0, 0, 1, 0, 80);
  }
  
  .wiz-container.wrapper {
      width: 940px;
      height: 440px;
      transform: matrix(1, 0, 0, 1, 55, 190);
      .copy {
      padding: 0 24px 0 0;
      margin: 6px 0;
      }
      }
  
  #button1 {
      z-index: 2;
      margin: 0 auto;
      transform: matrix(1, 0, 0, 1, 55, 630);
      padding: 6px 18px 8px;
  }
  }
  </style>

• Use only the wiz-text, wiz-title, wiz-button, and wiz-image components in the block.

  <!-- ./common/blocks/[BLOCK_ID]/index.vue -->
  
  <template>
  <wiz-block
      id="block1"
      class="block1 block"
  >
      <wiz-text
      id="header"
      :text="$t('headline')"
      class="header"
      component-name="Headline"
      data-element-type="Headline"
      ></wiz-text>
      <wiz-container
      id="wrapper"
      class="pa wrapper"
      component-name="Wrapper"
      >
      <wiz-image
          id="image"
          :src="image1"
          class="block-image"
          style="width: 914px; height: 320px;"
          component-name="Image"
          data-element-type="Main Image"
      ></wiz-image>
      <wiz-text
          id="copy"
          :text="$t('copy')"
          class="copy"
          component-name="Copy"
          data-element-type="Copy"
      ></wiz-text>
      </wiz-container>
      <wiz-button
      id="button1"
      :text="$t('btn1')"
      class="buttons default btn1 pa"
      component-name="Button 1"
      data-element-type="Call to Action"
      ></wiz-button>
  </wiz-block>
  </template>

• Make all blocks of the same width and height. For example, block1:

  <!-- ./common/blocks/[BLOCK_ID]/index.vue -->
  
  <style lang="scss">
  .block1 {
  width: 100%;
  margin: 0 auto;
  min-height: 685px;
  display: flex;
  
  b span {
      font-weight: 700 !important;
  }
  
  .block-image img {
      object-fit: contain;
      object-position: center;
  }
  .wiz-text.header {
      position: absolute;
      padding: 0 55px;
      transform: matrix(1, 0, 0, 1, 0, 80);
  }
  
  .wiz-container.wrapper {
      width: 940px;
      height: 440px;
      transform: matrix(1, 0, 0, 1, 55, 190);
      .copy {
      padding: 0 24px 0 0;
      margin: 6px 0;
      }
      }
  
  #button1 {
      z-index: 2;
      margin: 0 auto;
      transform: matrix(1, 0, 0, 1, 55, 630);
      padding: 6px 18px 8px;
  }
  }
  </style>

  And block2:

  <!-- ./common/blocks/[BLOCK_ID]/index.vue -->
  
  <style lang="scss">
  .block2 {
  width: 100%;
  margin: 0 auto;
  min-height: 685px;
  display: flex;
  
  b span {
      font-weight: 700 !important;
  }
  
  .block-image img {
      object-fit: contain;
      object-position: center;
  }
  .wiz-text.header {
      position: absolute;
      padding: 0 55px;
      transform: matrix(1, 0, 0, 1, 0, 80);
  }
  
  .wiz-container.wrapper {
      width: 940px;
      height: 470px;
      transform: matrix(1, 0, 0, 1, 55, 190);
      .wiz-container.text-wrapper{
      transform: matrix(1, 0, 0, 1, 490, -4);
      width: 450px;
      height: 100%;
      .copy {
          padding: 0 24px 0 0;
          margin: 0 0 18px 0;
      }
      }
      #button1 {
      z-index: 2;
      padding: 6px 18px 8px;
      }
  }
  }
  </style>

• Add styles for localized texts in the <span> tag.

<i18n>
{
  "eng":
      {
        "headline": "<p style='text-align: left; line-height: 36px;'><span style='font-size: 31px; font-weight: 700; font-family: Arial;'><b>My text</b></span></p>",
      }
  }
</i18n>

As best practice, make more blocks than modules, because it's impossible to know in advance how much text you receive from Veeva Vault modules.

• Use the data-element-type attribute to replace text in eWizard Editor with text from the Veeva Vault assets. For example, a wiz-text component with the Headline data-element-type:

  <!-- ./common/blocks/[BLOCK_ID]/index.vue -->
  
  <template>
  <wiz-block
      id="block13"
      class="block13 block"
  >
      <wiz-text
      id="header"
      :text="$t('headline')"
      class="header"
      component-name="Headline"
      data-element-type="Headline"
      ></wiz-text>
  </wiz-block>
  </template>

  After you upload the item to eWizard Editor, and add the Veeva Vault assets to the block, the text in eWizard Editor is replaced by the text with the Headline element type from Veeva Vault.

• Use the object-fit and object-contain CSS properties to prevent stretching the images.

  <style lang="scss">
  .block1 {
      .block-image img {
          object-fit: contain;
          object-position: center;
      }
  }
  </style>

• Make responsive blocks to make sure the text added from Veeva Vault is displayed correctly. For example, you can use display: flex:

  <!-- App.vue -->
  
  <style scoped>
      @import 'common/styles/imports.css';
      body {
          padding: 0;
          margin: 0;
      }
      .root footer {
          position: absolute;
          top: auto;
          bottom: 0;
          width: 100%;
          height: 82px;
          display: flex;
          justify-content: space-between;
      }
      .root .btn-wrapper {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 55px;
          height: 45px;
          border-right: 1px solid white;
          box-sizing: border-box;
          flex-shrink: 0;
          top: 0;
          left: 0;
      }
  </style>

• Apply styles to blocks, text, images, and other content in eWizard instead of Veeva Vault due to its limited editing capabilities.

• An e-Detailer master template App.vue file should include a wiz-references component so that eWizard can load references from Veeva Vault modules.

• Set styles for the <ul> and <li> tags to load HTML lists from Veeva Vault modules. For example:

  <i18n>
  {
  "eng":
      {
          "list1": "<ul><li style=\"text-align: left; line-height: 22px;\"><span style=\"font-size: 18px; font-weight: 400;\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br> quis nostrud exercitation ullamco laboris nisi ut<br> aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span></li></ul>",
      }
  }
  </i18n>