eWizard.js framework v4.19.0

December 10, 2020

Editor new features

Custom color configuration for e-Detailers and emails

Now you can add several color schemes for changing custom colors in the Editor color picker. You can use this feature for the templates of e-Detailers and emails.

Add color schemes in the themes/[theme name]/theme.js file.

module.exports.schemes = {
  scheme1: {
    color1: '#000000',
    color2: '#ffffff',
    }
};

module.exports.colors = (scheme) => {
  return {
    brandColors: {
      color1: scheme.color1,
      color2: scheme.color2,
      },
  };
};

The schemes object includes the scheme name, the names and values for colors.

The colors function accepts the scheme and returns the object with the reserved names and values for the scheme color.

The colors can have the following reserved names.

Reserved color name	Description
blockBackgroundColors	Configuration for the block background colors
brandColors	Default colors configuration
componentBackgroundColors	Configuration for the component background colors
containerBackgroundColors	Configuration for the container background colors
generalBackgroundColors	Configuration for the content background colors
propColors	Configuration for the property colors
textColors	Configuration for the text colors

To style the individual components, add the reserved attribute to the template with any data from the color object.

For example:

<div :style="{ 'background-color': $theme.blockBackgroundColors.color1 }"></div>

Or:

<div :propName="$theme.blockBackgroundColors.color1"></div>

Edit the colors in the template this.$theme to use colors as any other variables.

With this improvement, you can configure the colors available in the Editor color picker:

• Separately for each wiz-text component.

• For properties of individual components: wiz-button, wiz-image, wiz-container, and others.

The reserved attributes:

Reserved attribute	Description
data-background-colors	Configuration for the component background colors
data-prop-colors	Configuration for the properties colors
data-text-colors	Configuration for the text colors

Example for the wiz-text component color:

<wiz-text text="Text colors" data-text-colors="customTextColors"></wiz-text>

Find the values for the data-text-colors attribute and for other properties in the root directory > themes > theme.js file.

The attribute names must always be the same for each property, while their values may vary. For example, the text attribute name must always be data-text-colors.

Example for the component background:

<wiz-text text="Some text" data-background-colors="customBackgroundColors"></wiz-text>

Example for the props:

<wiz-social-follow-icons data-prop-colors="customPropColors"></wiz-social-follow-icons>

Wiz-popup

We've updated properties for the wiz-popup component. Use the wiz-popup component in e-Detailers built with eWizard.js. The component has properties that control how the pop-up is displayed in the slides.

Property	Type	Options	Default value	Description
componentName	boolean	Not defined	Popup	Component name
opened	boolean	Not defined	false	Is the pop-up visible?
showOnEnter	boolean	Not defined	false	Is the pop-up visible on the slide opening event?
closeOnOutsideTap	boolean	Not defined	true	Close the pop-up when tapping outside of the pop-up.
showOverlay	boolean	Not defined	true	Is the pop-up overlay visible?
showCloseButton	boolean	Not defined	true	Is the Close button visible?
closeButtonIcon	string	Not defined	Not defined	Path to the Close button icon.
closeButtonPosition	string	[rightTop, rightCenter, rightBottom, centerTop, centerCenter, centerBottom, leftTop, leftCenter, leftBottom]	rightTop	The Close button icon position.

The example of the pop-up usage on the slide:

export default {
  data() {
    return {
      isPopupOpened: false
    };
  }
};

The isPopupOpened variable is shown as an example. You can use any variable. You need to bind this data with the popup opened property.

To bind your data with the pop-up opened prop, use .sync

<wiz-popup :opened.sync="isPopupOpened"></wiz-popup>

The following pop-up events are applicable:

• open is emitted once the pop-up is opened.

• close is emitted once the pop-up is closed.

<wiz-popup @open="handleOpenPopupEvent" @close="handleClosePopupEvent"></wiz-popup>

Custom fonts configuration

You can set the custom fonts to be available in eWizard Editor. For this, add the alternative and external font lists in the settings.json file within the fonts field. The listed fonts will be then displayed in the Text Editor drop-down list.

eWizard.js doesn't add the font files to the content when you build the template. The users of the target system should have these fonts (or their alternatives) installed in their operating system.

"fonts": {
    "alternative": "Helvetica, sans-serif",
    "external": [
      "Arial",
      {
        "name": "Custom Font",
        "fontFamily": "Noto Sans",
        "alternative": ""
      }
    ]
  }

• alternative contains substitutive fonts when the custom font is missing. The first available system font is used.

• external contains custom fonts. The list can accept strings and objects.

The object values contain the following fields:

• name: The font name displayed in the Text Editor drop-down.

• fontFamily: The font family. It's applied to the text styles.

• alternative: The list of alternatives for each individual font. This field is optional.

This feature is available for emails and e-Detailers.

Slide and chapter names for translation

You can now use the optional nameOriginal field in the e-Detailer structure.json file both for slides and chapters.

"slides": {
   "vanillaCookie": {
       "name": "Vanilla Cookies",
       "nameOriginal": "",
       "template": "slides/vanillaCookie/index.vue",
       "subslides": [
           "cookiePhoto",
           "cookieRecipe"
       ]
   },
}

"chapters": {
   "favorite": {
      "name": "Favorite Cookies",
      "nameOriginal": "",
      "content": [
         "vanillaCookie",
         "chocolateCookie"
      ]
   },
}

Use the nameOriginal field to set the name for e-Detailer slides and chapters in the original language to display them in the Editor TRANSLATE mode.

Export improvements

Hide or show slides in top navigation of AEM for exporting e-Detailers to iSelling

Now you can hide/show the e-Detailer slides on the AEM top navigation bar when you export e-Detailers to AEM for iSelling.

Just add the following two fields to the slide object in structure.json.

• alwaysHiddenInTopNavigation: false by default

• visibleInTopNavigation: true by default

{
  "slides": {
    "home": {
      "name": "Home",
      "template": "slides/home/index.vue",
      "alwaysHiddenInTopNavigation": false,
      "visibleInTopNavigation": true
    },
  }
}

New documents.json structure support for exporting e-Detailers to iSelling

The documents.json file now supports the array in its structure.

[
    {
        "name": "References",
        "buttonTitle": "R",
        "subName": "Reference slide"
    },
    {
        "name": "Deprelax characteristics",
        "buttonTitle": "DC",
        "document": {
           "title": "DC",
           "description": "",
           "document": "common/media/pdfs/Ref-Nov-2020.pdf"
        }
    },
    {
       "name": "CIP",
       "buttonTitle": "CIP",
       "document": {
           "title": "CIP",
           "description": "",
           "document": "common/media/pdfs/investigation-plan.pdf"
       }
    }
]

The old documentsList format is still supported.

{
    "documentsList": [
        {
            "name": "References",
            "buttonTitle": "R"
        },
        {
            "name": "Deprelax characteristics",
            "buttonTitle": "DC",
            "documents": [{
                "title": "Deprelax-Nov-2020.pdf",
                "description": "",
                "document": "./common/media/pdfs/Deprelax-Nov-2020.pdf"
            }]
        },
        {
            "name": "Prescription",
            "buttonTitle": "PRSC",
            "documents": [{
                "title": "Deprelax-PRSC-Nov-2020.pdf",
                "description": "",
                "document": "./common/media/pdfs/Deprelax-PRSC-Nov-2020.pdf"
            }]
        }
    ]
}

We use the documents.json file for e-Detailers published to the target systems. With the new file structure, each object is converted to the documentList component in AEM without any id/key in its settings.

Replace content with image for e-Detailer export for Veeva CRM

Now you can use the as-image attribute for any static content of a slide or a template.

How it works:

1. e-Detailer to Veeva CRM Builder makes a screenshot of the content marked with the as-image attribute.

2. Then it inserts the screenshot instead of the actual layout.

Use this feature to optimize the build performance or to fix layout issues on target devices.

  <wiz-container as-image id="container">
      <wiz-image id="icon" :src="icon"></wiz-image>
      <wiz-text id="text" :text="$t('test')"></wiz-text>
    </wiz-container>

When replacing the slide elements with images, consider the following:

• The required element must have the id.

• The required element must have the set size.

• You can replace only the elements that are placed in the initial state of a slide or a template.

• The feature is available only for export with shared resources.

• The element screenshots are generated based on the dev build.

By default, the element is replaced with an image using the slide background CSS value. If you want the element to have a transparent background, add the png value for the as-image attribute.

<wiz-container as-image="png" id="container">
      <wiz-image id="icon" :src="icon"></wiz-image>
      <wiz-text id="text" :text="$t('test')"></wiz-text>
    </wiz-container>

Track URL clicks for the emails exported to OCE Sales

Now you can add the clicks tracking to the components in the email template.

To configure the URL clicks tracking in the emails exported to OCE Sales, use the data-msys-linkname object assigned to URLs. This object is stored in settings.json.

Add the tracked component name as the object key: wiz-button, wiz-image. This component must have the URL in the template. The object value is the component property name assigned to this component.

{
  "name": "email-template",
  "id": "81ta-KDyV-v811-HT3t4",
  "app": "./App.vue",
  "templateType": "Broadcast",
  "templateSubType": "IOEngage",
  "theme": "Viseven",
  "localization": {
    "current": "eng",
    "original": "",
    "langs": [
      "eng"
    ]
  },
  "browserslist": [
    "last 2 versions"
  ],
  "targetCLM": {
    "name": "Viseven"
  },
  "data-msys-linkname": {
    "wiz-button": "text"
  }
}

By default, monitoring is named according to the linked URL.