Dynamic block list

You can configure sets of blocks that would be available based on the selected theme in eWizard Editor. Once implemented and uploaded to eWizard, such a template appears in the eWizard Library's Add new popup. Users select the required theme for the content item they create based on your dynamic template and find your specified set of blocks on the Blocks tab.

Define theme-based blocks

To define blocks for your theme, do the following:

Add required blocks to your template. The default blocks location is ./common/blocks-library; however, your can set a custom path. Every block must be represented by a folder with the block's template VUE file.
Specify the required blocks for corresponding themes in ./common/blocks-library/blocks-themes.json. For example, the following blocks will be available for the aethercare and mediplus themes:

json

{
  "themes": {
    /* Your theme name */
    "aethercare": {
      "blocks": [
        {
          "id": "header-capitalized",
          "name": "Header capitalized",
          "icon": "/themes/aethercare/media/images/blocks-icons/header-capitalized.png"
        }
      ]
    },
    "mediplus": {
      "blocks": [
        {
          "id": "header-in-sentence-case",
          "name": "Header in sentence case"
        }
      ]
    }
  }
}

The name field value is block's label visible in eWizard Editor.
icon is optional. Place block icons under the required theme in ./themes/your-theme-name/media/

Add the DynamicBlocksLoader.vue component to your template's App.vue in the project root:

<template>
    <wiz-root class="m-full-width" align="center">
        <DynamicBlocksLoader 
            :blocks-themes="blockThemes" 
            :blocks-list="blocksList">
        </DynamicBlocksLoader>
    </wiz-root>
</template>

<script>
    import { DynamicBlocksLoader } from "ewizardjs";
    import blocksThemesJson from "./common/blocks-library/blocks-themes.json";
    import blocksJson from "./common/blocks-library/blocks.json";

    export default {
    name: "wiz-app",
    data: function () {
        return {
            blockThemes: blocksThemesJson.themes,
            blocksList: blocksJson.components,
        };
    },
    components: {
        DynamicBlocksLoader,
        },
    };
</script>

With this configuration, your template will display the blocks in eWizard Editor as follows:

The Header capitalized block (header-capitalized) if AetherCare is selected as the content item's theme in eWizard.
The Header in sentence case (header-in-sentence-case) if MediPlus is selected as the content item's theme in eWizard.

Default blocks

Default blocks are predefined by the content item theme—they're always present on your content item layout in eWizard Editor.

To add the default blocks to your template:

Specify the theme blocks under your-theme.blocks in ./common/blocks-library/blocks-themes.json.
Add the defaultBlocks array to your required theme.
Specify the required block IDs under defaultBlocks.$default as follows:

json

{
 "themes": {
   "aethercare": {
     "blocks": [
       {
         "id": "header-capitalized",
         "name": "Header capitalized",
         "icon": "/themes/aethercare/media/images/blocks-icons/header-capitalized.png"
       },
       {
         "id": "body",
         "name": "Body text"
       }
     ],
     "defaultBlocks": {
       "$default": [
         "header-capitalized",
         "body"
       ]
     }
   }
 }
}

Minimum eWizard.js version requirement

To implement theme default blocks, make sure you're using eWizard.js version 5.7.0 or later.

Target system-dependent blocks

You can also set block availability for target systems. For this, add the required target system codes under your theme's blocks as follows:

json

{
  "themes": {
    "aethercare": {
      "blocks": [
        {
          "id": "header-capitalized",
          "name": "Header capitalized",
          "icon": "/themes/aethercare/media/images/blocks-icons/header-capitalized.png"
          "clm": ["viseven", "veeva", "oce-sales"]
        }
      ]
    }
  }
}

The available target system code values are as follows:

Target system	Code
`Veeva Vault`	`veeva`
`Salesforce Marketing Cloud`	`sfmc`
`IQVIA`	`iqvia`
`OCE Personal`	`oce-sales`
`Mailchimp`	`mailchimp`
`Eloqua`	`eloqua`
`Adobe Campaign`	`adobe-campaign`

Localization-dependent blocks

Localization-dependent blocks appear under the Editor Blocks tab based on the country and language a user selects when adding a new content item.

To set up this dependency, provide the countries and languages properties with the required values in blocks-theme.json.

json

// ./common/blocks-library/blocks-themes.json
// `block-four-seasons` is visible only when  `Ukraine`, `Great Britain`, or `Sweden` countries are selected and the Ukrainian, English, and Swedish languages.

{
  "themes": {
    "Seasonality": {
      "defaultBlocks": [
        {
          "id": "header-capitalized",
          "countries": {
           "include": ["Ukraine", "Great Britain", "Sweden"]
          },
          "languages": ["ukr", "eng", "swe"]
        }
      ]
    }
  }
}

Purpose-dependent blocks (email)

purpose is an additional category for setting block dependency in emails. This category is aimed at reflecting your email purpose, for example, an invitation, follow-up, reminder, or other. You can configure the following purpose dependencies:

Default blocks to be available in the content item layout.
Blocks to be available in the eWizard Editor sidebar.

Setting up purpose-dependent blocks requires a dedicated purpose.json file in your email project.

To set up default block display in the email layout, create the ./common/metadata/purpose.json file. Then, do the following:

In purpose.json > Define your required purposes under the purpose object:

json

// ./common/metadata/purpose.json

{
  "purpose": [
    {
      "code": "invitation",
      "name": "Invitation"
    },
    {
      "code": "follow-up",
      "name": "Follow up"
    }
  ]
}

code: the purpose code used in other settings
name: the display name of the purpose

In ./.ewizard/settings.json: refer path.metadata to your purpose.json file:

json

// ./.ewizard/settings.json

{
  "path": {
    "metadata": {
      "purpose": "common/metadata/purpose.json"
    }
  }
}

In ./settings.json: define the default and current purposes metadata:

json

// ./settings.json

{
  "metadata": {
    "purpose": {
      "default": "invitation",
      "current": "follow-up"
    }
  }
}

default refers to the default email purpose shown first in the Purpose list.
current refers to the current purpose applied to the email template.

In blocks-themes.json: specify the block's purpose for your default block:
You can add multiple purposes to a block

json

// ./common/blocks-library/blocks-themes.json
// `my-block-with-purpose` appears in the email layout for the `follow-up` and `invitation` purposes.
{
  "defaultBlocks": [
    {
      "id": "header-capitalized",
      "purpose": [
        "follow-up",
        "invitation"
      ]
    }
  ]
}

The block visibility in your email layout depends on how you configure the purpose property within defaultBlocks. The following table summarizes how different configurations affect block visibility:

Configuration	Example	Block visibility
Block with specified purpose(s)	`{"id": "header-capitalized", "purpose": ["follow-up"]}`	Visible only for specified purposes
Block without purposes	`{"id": "header-capitalized", "purpose": []}`	Not visible in any context
No `defaultBlocks.purpose` array	`"header-capitalized"`	Visible for any purpose

Points to consider when using CLM, localization, and purpose filters

All these filters can be a field, an array, or an object with include and exclude arrays.
languages lists the languages the block is displayed for.
The language code must be in the three-letter ISO 3 format
country must contain an include array
You can define these filters in the following locations:
- blocks-themes.json > defaultBlocks
- blocks-themes.json > blocks
- blocks.json
In the case of different filters of the same type (for example, clm) defined in these locations, eWizard follows the location priority when displaying theme blocks in eWizard Editor sidebar and your content item layout.
The sidebar priority from the highest to lowest:
1. The blocks field of blocks-themes.json
2. blocks.json
The layout priority from the highest to lowest:
1. The defaultBlocks field of blocks-themes.json
2. The blocks field of blocks-themes.json
3. blocks.json

Include and exclude CLM systems, localization, and purposes

You can handle clm, purpose, language, and country filters with the include and exclude properties:

include lists the filters the block is shown for
exclude lists the filters the block isn't visible for
It takes priority over include

The block visibility in your content item layout depends on how you configure include and exclude. The following table summarizes how different configurations affect block visibility:

`include` value	`exclude` value	Block visibility
`true` or `[]` `global` for `countries`	`false`	Visible for all values
`true` or `[]` `global` for `countries`	Specific value	Visible for values except for those set in `exclude`
Any	`[]`	Visible for values set in `include`
Any	No `exclude` provided	Visible for values set in `include`
The same as `exclude`	The same as `include`	Not visible for the specified value
`false`	Any	Not visible for any value
Any	`true`	Not visible for any value

The example below visualizes the possible cases:

json

{
  "id": "contract-template-block",
  
  // Case 1: Visible for all CLM systems (using `true`)
  "clm": {
    "include": true,
    "exclude": false
  },
  
  // Case 2: Visible only for specified purposes
  "purpose": {
    "include": ["invitation", "follow-up"],
    "exclude": []
  },
  
  // Case 3: Visible for all countries except Sweden and France
  "countries": {
    "include": ["global"],
    "exclude": ["Sweden", "France"]
  },
  
  // Case 4: Not visible for English and French languages
  "languages": {
    "include": ["eng", "fra"],
    "exclude": ["eng", "fra"]
  }
}

Custom block paths

You can store blocks in various directories within your project and specify their paths in the blocks.json and blocks-themes.json files. The path specified in blocks-themes.json takes precedence over the path in blocks.json.

Path configuration

To configure a custom path for a block:

Add the block to your desired directory (e.g., ./blocks/header-capitalized)
Specify this path in the path field for that block in blocks-themes.json:

json

// ./common/blocks-library/blocks-themes.json
{
  "themes": {
    "Unbranded": {
      "blocks": [
        {
          "id": "header-capitalized",
          "name": "Header capitalized",
          "path": "blocks/header-capitalized"
        },
        {
          "id": "header-in-sentence-case",
          "name": "Header in sentence case"
        }
      ]
    }
  }
}

Path resolution priority

eWizard.js resolves block paths in the following order:

The path field in blocks-themes.json (highest priority)
The path field in blocks.json (medium priority)
The default path from .ewizard/settings.json (lowest priority)

json

// ./.ewizard/settings.json
{
  "path": {
    "blocks": "common/blocks-library",
    "blocksManifest": "common/blocks-library/blocks.json"
  }
}

Block filtering EMAILS

In your email projects, you can configure block filtering. It sets the dependency between the list of available blocks and the metadata selected by the user in the eWizard Library.

The filtering is supported for the following email template parameters:

Country
Target system
Language

In templates with configured block filtering, the list of blocks available in the eWizard Editor depends on the Country, Target system, and Language metadata specified.

To configure block filtering, specify the required metadata field values in the blocks.json file as include and exclude for your required metadata objects. For example, to set the header-capitalized block to be displayed for France and the French language, do the following:

json

{
  "id": "header-capitalized",
  "country": {
    "include": "France"
  },
  "language": {
    "include": "fra"
  }
}

Use exclude to restrict the display of blocks based on the selected metadata. For example, to set the header-capitalized block to never be displayed for:

Countries France and Ukraine and the languages French and Ukrainian,
configure the block's properties in blocks.json as follows:

json

{
  "id": "header-capitalized",
  "country": {
      "exclude": ["France", "Ukraine"]
  },
  "language": {
      "exclude": ["fra", "ukr"]
  }
}

Once done, archive your email template and upload it to eWizard. The header-capitalized block will be available for selection in eWizard Editor only if users pick the metadata set under the include property.

Blocks in eWizard.js projects

Dynamic block list ​

Define theme-based blocks ​

Default blocks ​

Target system-dependent blocks ​

Localization-dependent blocks ​

Purpose-dependent blocks (email) ​

Points to consider when using CLM, localization, and purpose filters ​

Include and exclude CLM systems, localization, and purposes ​

Custom block paths ​

Path configuration ​

Path resolution priority ​

Block filtering EMAILS ​

Read more ​

Dynamic block list

Define theme-based blocks

Default blocks

Target system-dependent blocks

Localization-dependent blocks

Purpose-dependent blocks (email)

Points to consider when using CLM, localization, and purpose filters

Include and exclude CLM systems, localization, and purposes

Custom block paths

Path configuration

Path resolution priority

Block filtering EMAILS

Read more