The component properties are available in e-Detailers and other item types. You can use the component properties or props to customize the appearance of components while editing your item in eWizard Editor. Read more about the standard components and their properties in the Editor Guide.
Declare component types
The component-types npm package includes the possible component actualType and subtype values defined in the PropType and FileType objects. To use component-types for the props declaration:
1) Add the component-types npm package into your component project.
npm i --save git+ssh://git@git.qapint.com:ewizardjs/core/component-types.git
2) Import the property types and file types from component-types to the ewizard.config.js file.
// ./ewizard.config.js
import {
PropType,
FileType
} from 'component-types';The component-types npm package contains the following values for the PropType and FileType objects.
:--- TABS:
TAB: PropType
// ./node_modules/component-types/src/prop-types/PropType.tsexport enum PropType {
Array = 'array',
Boolean = 'boolean',
Color = 'color',
Enum = 'enum',
File = 'file',
Number = 'number',
Object = 'object',
String = 'string',
Text = 'text',
Url = 'url',
Link = 'link',
LinkedText = 'linked-text',
Textarea = 'textarea',
VaultRemoteObjectList = 'vault-remote-object-list',
Date = 'date',
Time = 'time',
TimeRange = 'time-range',
IcsCalendar = 'ics-calendar',
TableView = 'table-view',
Slide = 'slide',
Slides = 'slides',
Chapter = 'chapter',
Chapters = 'chapters',
FixedText = 'fixed-text',
Border = 'border'
};TAB: FileType
// ./node_modules/component-types/src/prop-types/FileType.tsexport enum FileType {
Audio = 'audio',
Image = 'image',
Video = 'video',
Module = 'module',
Document = 'document',
};---:
Define component properties
Vue.js allows you to define the component props in several ways. As a standard, the eWizard.js framework uses the component props defined as an object.
You define the component properties in the component instance index.vue file. The props object must look like this:
// ./index.vue
props: {
stringType: {
type: String,
default: '"Open Sans", sans-serif', // actualType == type by default
},
textType: {
type: String,
label: 'Text',
actualType: PropType.Text,
default: 'Some Text',
},
booleanType: {
type: Boolean,
label: 'Boolean',
actualType: PropType.Boolean,
default: true,
},
numberType: {
type: Number,
label: 'Number',
actualType: PropType.Number,
default: 1,
},
urlType: {
type: String,
label: 'Url',
actualType: PropType.Url,
default: 'https://viseven.com',
},
colorType: {
type: String,
label: 'Color',
actualType: PropType.Color,
default: '#ffffff',
},
enumType: {
type: String,
label: 'Enum',
actualType: PropType.Enum,
options: [{
value: 'value 1',
label: 'Label 1'
},
{
value: 'value 2',
label: 'Label 2'
},
],
default: 'value 1',
},
fileType: {
type: String,
label: 'Audio',
actualType: PropType.File,
subtype: FileType.Audio,
default: './path/to/audio.mp3',
},
objectType: {
type: Object,
label: 'Object',
actualType: {
type: PropType.Object,
subtype: {
prop1: String,
prop2: {
type: String,
actualType: PropType.Text,
},
prop3: {
type: String,
label: 'Audio',
actualType: PropType.File,
subtype: FileType.Audio,
},
},
},
default: () => {
return {
prop1: 'String',
prop2: 'Text',
prop3: './path/to/audio.mp3',
}
},
},
arrayType: {
type: Array,
label: 'Array',
defaultLabel: 'Item label',
actualType: PropType.Array,
subtype: {
prop1: String,
prop2: {
type: String,
actualType: PropType.Text,
},
prop3: {
type: String,
label: 'Audio',
actualType: PropType.File,
subtype: FileType.Audio,
},
},
default: () => {
return [{
__label: 'Item label',
prop1: 'String',
prop2: 'Text',
prop3: './path/to/audio.mp3',
}, ]
},
},
}Aside from the Vue component prop type checks or valіdation, the eWizard.js framework uses the props declaration fields. You can use these fields to show and change the props values in eWizard Editor.
According to the preceding example, the component prop can have the following fields.
| Description |
| Specifies the label of the component on the Properties tab in eWizard Editor. For example, the |
| The prop data type according to the JavaScript-supported data types. |
| The component property type imported from the component-types npm package. See the full PropType list. |
| The component property subtype for the |
| A list of available options you can select as the prop value. Each option nested in the |
| The default prop value if the value isn't passed. |
| Specifies that this property is required. The possible values are |
| Specifies if the property is hidden on the Properties tab in eWizard Editor. The possible values are |
Configure component properties in eWizard Editor
To show the component properties labels and values on the Properties tab in eWizard Editor, create the ewizard.config.js file in the root of the component project directory. You can use ewizard.config.js to edit the properties that you define in the component index.vue file.
The ewizard.config.js file describes the component props in the format that's used by eWizard Editor to render them on the Properties tab. This is a mixin object with the component props.
The language code for labels must be a three-letter ISO 3 format (for example, eng, deu, ukr, etc.). The language in which the component property is displayed in eWizard Editor depends on the language settings in your eWizard account Profile menu.
For example, the ewizard.config.js file:
import {
PropType,
FileType
} from 'component-types';export default {
props: {
textType: {
label: {
eng: 'Text'
},
actualType: PropType.Text
},
booleanType: {
label: {
eng: 'Boolean'
}
},
numberType: {
label: {
eng: 'Number'
}
},
urlType: {
label: {
eng: 'Url',
},
actualType: PropType.Url,
},
colorType: {
label: {
eng: 'Color'
},
actualType: PropType.Color,
},
enumType: {
label: {
eng: 'Enum'
},
actualType: PropType.Enum,
options: [{
value: 'value 1',
label: {
eng: 'Label 1'
}
},
{
value: 'value 2',
label: {
eng: 'Label 2'
}
},
],
},
fileType: {
label: {
eng: 'Audio'
},
actualType: PropType.File,
subtype: FileType.Audio,
},
objectType: {
label: {
eng: 'Object'
},
actualType: {
type: PropType.Object,
subtype: {
prop2: {
actualType: PropType.Text,
},
prop3: {
label: {
eng: 'Audio',
},
actualType: PropType.File,
subtype: FileType.Audio,
}
}
}
},
arrayType: {
label: {
eng: 'Array'
},
defaultLabel: 'Item label',
actualType: PropType.Array,
minLength: 1, // 0 - by default
maxLength: 7, // Infinity - by default
subtype: {
prop2: {
actualType: PropType.Text,
},
prop3: {
label: {
eng: 'Audio',
},
actualType: PropType.File,
subtype: FileType.Audio,
}
}
}
}
}Override the component configuration
In e-Detailers, emails, and other items, you can override the default values for the props or define new props in the ewizard.config.js file stored in the component root directory. For this, create the ewizard.config.js file in the root directory of your e-Detailer or email project.
For example, add the ewizard.config.js file to the root of the demo e-Detailer of the component template project.
// ./demo/ewizard.config.jsimport {
PropType,
FileType
} from 'component-types';export default {
components: {
'test-component': {
props: {
componentName: {
label: {
eng: 'My component name',
},
actualType: PropType.String,
},
}
}
}
};The settings in this configuration file override the test-component prop settings in ./demo/node_modules/test-component/ewizard.config.js.
For example, change the label value for the componentName prop in ./demo/ewizard.config.js. This property value overrides the value in ./demo/node_modules/test-component/ewizard.config.js. Your component name label in eWizard Editor changes.
Property types
The PropType object in the component-types npm package contains the following property type values.
| Description |
Passes an array of values. For example, a collection of slides or a group of radio buttons. | |
The | |
The property that is used in the wiz-event-invitation component to generate a list of cities that belong to a specific timezone. | |
The component color property. For example, the font color or the filler color property. | |
The list of values for the component property. For example, the drop-down list of horizontal or vertical values for the component orientation. | |
The file asset that you can upload from your device or use the existing asset from eWizard Library or Veeva Vault. This property type must have the | |
The numeric value of the property. For example, the min or max value, the border thickness, etc. | |
The object with options for the property. For example, the scroll options. | |
The string of text for the component properties with text. For example, the component name or the button text. | |
The text property of the component. For example, the tab or header text. | |
The URL link property type. For example, the link in the email | |
This is a subtype for the | |
The text link property. For example, the email button text link. | |
The multiple strings of text. For example, the Description field. | |
This property type isn't supported in eWizard Ultimate Performance Editor. | |
This is a subtype for the | |
This is a subtype for the | |
This property type includes the | |
This property type includes the | |
This property type includes the | |
This property type isn't supported in eWizard Ultimate Performance Editor. | |
This property type provides a pop-up window for selecting a single slide. | |
This property type provides a pop-up window for selecting multiple slides. | |
Use this property type to add the Chapter drop-down menu to the Properties tab in eWizard Editor. | |
Use this property type to add the Chapters drop-down menu to the Properties tab in eWizard Editor. | |
Create the text property to edit the text in eWizard Editor without possibility to change the styles for this text. The text editing buttons in Editor are in read-only mode. | |
The standard CSS border property: the border line width, color, and style (solid, dotted, etc.). For example, the selected tab border in the |
See the detailed property type descriptions below.
array
An array of items where each item has a set of properties. The default value must be included in the default index.vue file.
The array property type supports nested objects if the actualType field in the arrayType matches the actualType field in the subtype. For example:
arrayType: {
label: 'Array',
actualType: PropType.Array,
subtype: {
arrayType: {
label: 'Data',
defaultLabel: 'Item',
actualType: PropType.Array,
subtype: {
value: {
…
},
},
},
}
} ewizard.config.js example:
import { PropType, FileType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},actualType: PropType.String,
},arrayType: {
label: "Array",
defaultLabel: "Item label",
minLength: 1, // 0 - by default
maxLength: 7, // Infinity - by default
actualType: PropType.Array,
subtype: {
prop1: {
label: {
eng: "Text label 1",
},
type: String,
actualType: PropType.String,
},
prop2: {
label: {
eng: "Text label 2",
},
type: String,
actualType: PropType.Text,
},
prop3: {
label: {
eng: "Color",
},
type: String,
actualType: PropType.Color,
},
prop4: {
label: {
eng: "Image",
},
type: String,
actualType: PropType.File,
subtype: FileType.Image,
},
arrayType: {
label: "Data",
defaultLabel: "Item",
actualType: PropType.Array,
subtype: {
value: {
label: "Value",
actualType: PropType.Number,
},
},
},
},
},
},
};TIP: The minLength field must be included in ewizard.config.js to add properties in eWizard Editor after removing all properties.
index.vue example:
<template>
<p class="array-prop-component">Array prop</p>
</template><script>
export default {
name: "array-prop-component",props: {
arrayType: {
type: Array,
default() {
return [
{
prop1: "String",
prop2: "Text",
prop3: "#000000",
prop4: "",
arrayType: [
{
value: 40,
},
{
value: 85,
},
{
value: 75,
},
],
},
];
},
},
},
data() {
return {};
},
};
</script><style scoped>
.array-prop-component {
width: 200px;
}
</style>For example, the speakers array in the wiz-agenda email component.
How the property is used in the email App.vue file:
<!-- App.vue --><wiz-agenda
:speakers="[
{
timeFrom: $t('wiz_agenda_speakers_timeFrom_d1c9'),
timeSeparator: '',
timeTill: $t('wiz_agenda_speakers_timeTill_5979'),
description: $t('wiz_agenda_speakers_description_d591'),
speaker: $t('wiz_agenda_speakers_speaker_cc4a'),
__label: 'Item 1',
__id: '25-speakers-0',
},
{
timeFrom: $t('wiz_agenda_speakers_timeFrom_4cdb'),
timeSeparator: '',
timeTill: $t('wiz_agenda_speakers_timeTill_e372'),
description: $t('wiz_agenda_speakers_description_e138'),
speaker: $t('wiz_agenda_speakers_speaker_4cc1'),
__label: 'Item 2',
__id: '25-speakers-1',
},
{
timeFrom: $t('speakers_timeFrom_c79d'),
timeSeparator:
'<div style=\'line-height: 20px;text-align: left;\'><span style=\'font-size:14px;color:#000000;font-family:arial,helvetica neue,helvetica,sans-serif;\'>-</span></div>',
timeTill: $t('speakers_timeTill_c6ae'),
description: $t('speakers_description_ef1d'),
speaker: $t('speakers_speaker_010f'),
label: null,
},
]"
id="wiz-agenda-d26a"
:is-time="true"
></wiz-agenda>How it looks like in eWizard Editor:
boolean
The true or false value. If the default value isn't defined in index.vue, the default value is false.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
booleanType: {
label: {
eng: "Show text",
},
actualType: PropType.Boolean,
},
},
};index.vue example:
<template>
<p class="boolean-prop" v-show="booleanType">Boolean prop</p>
</template><script>
export default {
name: "boolean-prop",props: {
booleanType: {
type: Boolean,
label: "Show text",
default: true, // false - default value
actualType: PropType.Boolean,
},
},
data() {
return {};
},
};
</script><style scoped>
.boolean-prop {
width: 200px;
}
</style>The actualType isn't defined in the booleanType, because the value of actualType matches the type.
For example, the fullWidth property of the wiz-button email component. In eWizard Editor, the selected checkbox corresponds to true and the cleared checkbox—to false.
How the property is used in the email App.vue file:
<wiz-button :full-width="true"></wiz-button>
How it looks like in eWizard Editor:
city-time
The property that is used in the wiz-event-invitation component to generate a list of cities that belong to a specific timezone.
color
The component CSS color.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
textColor: {
label: {
eng: "Text color",
},
actualType: PropType.Color,
},
},
};index.vue example:
<template>
<wiz-text
id="loremText"
class="lorem-text"
:text="`<p style=\'text-align: center;\'><span style=\'font-family: Avenir; font-size: 16px; color: ${textColor}\'>Lorem ipsum</span></p>`"
></wiz-text>
</template><script>
export default {
name: "color-prop",
props: {
componentName: {
type: String,
default: "Color property",
},
textColor: {
type: String,
default: "#000000",
},
},
};
</script><style scoped>
.wiz-text.lorem-text {
width: 200px;
}
</style> For example, the dividerColor property of the wiz-divider email component.
TIP: eWizard Editor supports hex and RGBA color values. For more information, see CSS colors
How the property is used in the email App.vue file:
<wiz-divider divider-color="#0196dd"></wiz-divider>
How it looks like in eWizard Editor:
enum
The list of values, displayed in a drop-down in eWizard Editor.
If the default value isn't defined in index.vue, the value isn't defined in the component properties.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
enumType: {
label: {
eng: "Enum",
},
actualType: PropType.Enum,
options: [
{
value: "value 1",
label: {
eng: "Label 1",
},
},
{
value: "value 2",
label: {
eng: "Label 2",
},
},
],
},
},
};index.vue example:
<template>
<div class="enum-prop">
<p>Enum Prop</p>
<p>#{{ enumType }}</p>
</div>
</template><script>
import { PropType } from "component-types";export default {
name: "enum-prop",
props: {
enumType: {
type: String,
label: "Enum",
actualType: PropType.Enum,
default: "value 1",
},
},
};
</script><style scoped>
.enum-prop {
display: flex;
justify-content: space-between;
align-items: center;
width: 200px;
}
</style>For example, the textAlign property of the wiz-button email component.
How the property is used in the email App.vue file:
<wiz-button :text-align="'center'"></wiz-button>
How it looks like in eWizard Editor:
file
The file asset you can upload from your device or use an existing one from eWizard Library or Veeva Vault. This property type must have the FileType subtype.
ewizard.config.js example:
import { PropType, FileType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
fileTypeAudio: {
label: {
eng: "Audio",
},
actualType: PropType.File,
subtype: FileType.Audio,
},
fileTypeImage: {
label: {
eng: "Image",
},
actualType: PropType.File,
subtype: FileType.Image,
},
fileTypeVideo: {
label: {
eng: "Video",
},
actualType: PropType.File,
subtype: FileType.Video,
},
fileTypeModule: {
label: {
eng: "Module",
},
actualType: PropType.File,
subtype: FileType.Module,
},
fileTypeDocument: {
label: {
eng: "Module",
},
actualType: PropType.File,
subtype: FileType.Document,
},
},
};index.vue example:
<template>
<p class="file-prop">File prop</p>
</template><script>
import { PropType, FileType } from "component-types";export default {
name: "file-prop",props: {
fileTypeAudio: {
type: String,
label: "Audio",
actualType: PropType.File,
subtype: FileType.Audio,
default: "./path/to/audio.mp3",
},
fileTypeImage: {
type: String,
label: "Image",
actualType: PropType.File,
subtype: FileType.Image,
default: "./path/to/image.png",
},
fileTypeVideo: {
type: String,
label: "Video",
actualType: PropType.File,
subtype: FileType.Video,
default: "./path/to/video.mp4",
},
fileTypeModule: {
type: String,
label: "Module",
actualType: PropType.File,
subtype: FileType.Module,
default: "./path/to/module.pdf",
},
},
data() {
return {};
},
};
</script><style scoped>
.file-prop {
width: 200px;
}
</style>For example, the src property of the wiz-image email component has the file property type and the image subtype.
How the property is used in the email App.vue file:
<wiz-image src="./common/media/images/37022210-5d7b-11ec-b91a-85800ef85ec4.png"></wiz-image>
How the property looks like in eWizard Editor:
number
The property with a numeric value. The value in eWizard Editor can't be less than 0. If the default value isn't defined in index.vue, the default value is an empty string.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
numberType: {
label: {
eng: "Number",
},
actualType: PropType.Number,
},
},
};index.vue example:
<template>
<p class="number-prop">Number prop: #{{ numberType }}</p>
</template><script>
export default {
name: "number-prop",
props: {
numberType: {
type: Number,
label: "Number",
default: 1, // '' - default value
actualType: PropType.Number,
},
},data() {
return {};
},
};
</script><style scoped>
.number-prop {
width: 200px;
}
</style>For example, the lineHeight property of the wiz-button email component.
How the property is used in the email App.vue file:
<wiz-button :line-height="22"></wiz-button>
How the property looks like in eWizard Editor:
object
The object with options for the property. For example, the scroll options. The property supports two or more nesting levels.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
objectType: {
label: {
eng: "Object",
},
objectType: {
type: PropType.Object,
subtype: {
parentProp1: {
actualType: PropType.String,
},
parentProp2: {
actualType: PropType.Text,
},
parentProp3: {
actualType: PropType.Object,
subtype: {
childProp1: {
actualType: PropType.String,
},
childProp2: {
actualType: PropType.Text,
},
childProp3: {
actualType: PropType.Object,
subtype: {
childProp1: {
actualType: PropType.String,
},
childProp2: {
actualType: PropType.Text,
},
},
},
},
},
},
},
},
},
};index.vue example:
<template>
<p class="object-prop">Object prop</p>
</template><script>
import { PropType } from "component-types";export default {
name: "object-prop",props: {
objectType: {
type: Object,
label: "Object",
actualType: {
type: PropType.Object,
subtype: {
parentProp1: String,
parentProp2: {
type: String,
actualType: PropType.Text,
},
parentProp3: {
type: PropType.Object,
subtype: {
childProp1: String,
childProp2: {
type: String,
actualType: PropType.Text,
},
childProp3: {
type: PropType.Object,
subtype: {
childProp1: String,
childProp2: {
type: String,
actualType: PropType.Text,
},
},
},
},
},
},
},default: () => {
return {
parentProp1: "Parent String 1",
parentProp2: "Parent String 2",
parentProp3: {
childProp1: "Child String 1",
childProp2: "Child String 2",
childProp3: {
childProp1: "Child String 1",
childProp2: "Child String 2",
},
},
};
},
},
},data() {
return {};
},
};
</script><style scoped>
.object-prop {
width: 200px;
}
</style>string
The string of text for the component properties with text. If the default value isn't defined in index.vue, the default value is an empty string.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
stringType: {
label: {
eng: "String",
},
actualType: PropType.String,
},
},
};index.vue example:
<template>
<p class="string-prop">String prop: #{{ stringType }}</p>
</template><script>
export default {
name: "string-prop",
props: {
stringType: {
type: String,
default: "Lorem ipsum", // '' - default value
},
},data() {
return {};
},
};
</script><style scoped>
.string-prop {
width: 200px;
}
</style>For example, the componentName of the wiz-text e-Detailer component.
How the property is used in the e-Detailer index.vue file:
<wiz-text component-name="Text"></wiz-text>
How the property looks like in eWizard Editor:
text
The text property of the component. If the default value isn't defined in index.vue, the default value is an empty string.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
textType: {
label: {
eng: "Show text",
},
actualType: PropType.Text,
},
},
};index.vue example:
<template>
<p class="text-prop">Text prop: #{{ textType }}</p>
</template><script>
export default {
name: "text-prop",
components: {},
props: {
textType: {
type: String,
default: "Lorem ipsum", // '' - default value
},
},data() {
return {};
},methods: {},
mounted() {},
};
</script><style scoped>
.text-prop {
width: 200px;
}
</style>For example, the text property of the wiz-text e-Detailer component.
You can use the <i18n></i18n> tag to add localization to the text. For more information, see Localization.
How the property is used in the e-Detailer slide index.vue file:
<wiz-text :text="$t('heading')"></wiz-text>How the property looks like in eWizard Editor:
url
A URL link. If the default value isn't defined in index.vue, the default value is an empty string.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
urlType: {
label: {
eng: "Url",
},
actualType: PropType.Url,
},
},
};index.vue example:
<template>
<p class="url-prop">Url prop: #{{ urlType }}</p>
</template><script>
export default {
name: "url-prop",
props: {
urlType: {
type: String,
default: "https://viseven.com", // '' - default value
},
},data() {
return {};
},
};
</script><style scoped>
.url-prop {
width: 200px;
}
</style>For example, the link property in the wiz-button email component.
How the property is used in the email App.vue file:
<wiz-button :link="'https://viseven.com/'"></wiz-button>
How the property looks like in eWizard Editor:
linked-text
The text that redirects to a link after you click it. If the default value isn't defined in index.vue, the default value is Click to add text.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
linkedTextType: {
label: {
eng: "Linked text",
},
actualType: PropType.LinkedText,
},
},
};index.vue example:
<template>
<p class="linked-text-prop">Linked text: #{{ linkedTextType }}</p>
</template><script>
export default {
name: "linked-text-prop",
props: {
linkedTextType: {
type: String,default: "Lorem ipsum", //'Click to add text' - default value
},
},data() {
return {};
},
};
</script><style scoped>
.linked-text-prop {
width: 200px;
}
</style>For example, the text property of the wiz-button email component.
How the property is used in the email App.vue file:
<wiz-button :text="$t('wiz_button_8f1e')"></wiz-button>How the property looks like in eWizard Editor:
text-area
Multiple strings of text. If the default value isn't defined in index.vue, the default value is an empty string.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
textareaType: {
label: {
eng: "Show text",
},
actualType: PropType.Textarea,
},
},
};index.vue example:
<template>
<p class="textarea-prop">Text area: #{{ textareaType }}</p>
</template><script>
export default {
name: "textarea-prop",
props: {
textareaType: {
type: String,
},
},
data() {
return {};
},
};
</script><style scoped>
.textarea-prop {
width: 200px;
}
</style>How the property looks like in eWizard Editor:
link
This property type isn't supported in eWizard Editor.
vault-remote-object-list
This property type isn't supported in eWizard Editor.
date
This is a subtype for the ics-calendar property type. For example, the Date field where you can enter a string of text or pick the date from the pop-up calendar.
The default value format is YYYY/MM/DD. If the default value isn't defined in index.vue, the default value is an empty string.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
dateType: {
label: {
eng: "Date",
},
actualType: PropType.Date,
},
},
};index.vue example:
<template>
<p class="date-prop">Date prop: #{{ dateType }}</p>
</template><script>
export default {
name: "date-prop",
components: {},
props: {
dateType: {
type: String,
default: "2022/06/10",
},
},
data() {
return {};
},
methods: {},
mounted() {},
};
</script><style scoped>
.date-prop {
width: 200px;
}
</style>How the property looks like in eWizard Editor:
time
This property type isn't supported in eWizard Editor.
time-range
This property type includes the from and to subtypes from the time property type. For example, the time range in the ics-calendar property type. If the default value isn't defined in index.vue, the default value is an empty string.
ewizard.config.js example:
import { ComponentConfig, PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
timeRange: ComponentConfig.TimeRange,
},
};index.vue example:
<template>
<p class="time-range-prop">
Time range: #{{ timeRange.from }} - #{{ timeRange.to }}
</p>
</template><script>
import { PropType } from "component-types";export default {
name: "time-range-prop",
props: {
timeRange: {
type: Object,
label: "Time range",
actualType: PropType.TimeRange,
subtype: {
from: String,
to: String,
},default: () => {
return {
from: "10:00", // AM format
to: "11: 00", // AM format
// from: '14:00', // PM format
// to: '15: 00', // PM format
};
},
},
},data() {
return {};
},
};
</script><style scoped>
.time-range-prop {
width: 200px;
}
</style>How the property looks like in eWizard Editor:
ics-calendar
This property type includes the name, date, time, timezone, location, description, and link subtypes. This is an iCalendar subscription (ICS) feed for Google Calendar, Microsoft Outlook/Office 365, macOS/iOS calendar. For example, click this link to add an event to the calendar.
The default value is required.
ewizard.config.js example:
import { ComponentConfig, PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
icsCalendar: ComponentConfig.IcsCalendar,
},
};index.vue example:
<template>
<p class="ics-calendar-prop">Ics calendar</p>
</template><script>
import { PropType } from "component-types";export default {
name: "ics-calendar-prop",
components: {},
props: {
icsCalendar: {
type: Object,
default() {
return {
name: "",
date: "",
time: {
from: "",
to: "",
},
timezone: "",
location: "",
description: "",
link: "",
};
},
subtype: {
name: {
type: String,
default: "",
},
date: {
type: String,
default: "",
},
time: {
type: Object,
default: {
from: "",
to: "",
},
},
timezone: {
type: String,
default: "",
},
location: {
type: String,
default: "",
},
description: {
type: String,
default: "",
},
link: {
type: String,
default: "",
},
},
},
},data() {
return {};
},methods: {},
mounted() {},
};
</script><style scoped>
.ics-calendar-prop {
width: 200px;
}
</style>How the property looks like in eWizard Editor:
ics-calendar-extended
This property type includes the name, location, description, and link subtypes. This is an iCalendar subscription (ICS) feed for Google Calendar, Microsoft Outlook/Office 365, macOS/iOS calendar. For example, to download an ICS file by clicking a button in the wiz-event-invitation component.
ewizard.config.js example:
import { PropType, ComponentConfig } from '@ewizardjs/component-types';export default {
props: {
icsCalendar: ComponentConfig.IcsCalendarExtended,
text: {
label: {
eng: 'Button text',
deu: 'Schaltflächentext',
esp: 'Texto del botón',
rus: 'Текст кнопки',
ukr: 'Текст кнопки',
fra: 'Texte du bouton'
},
actualType: PropType.LinkedText,
}
}
};table-view
This property type isn't supported in eWizard Ultimate Performance Editor.
slide
This property type provides a pop-up window for selecting a single slide. If the default value isn't defined in index.vue, the default value is null.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
slideType: {
label: {
eng: "Slide",
},
actualType: PropType.Slide,
},
},
};index.vue example:
<template>
<p class="slide-prop">Slide prop: #{{ slideType.slide }}</p>
</template><script>
export default {
name: "slide-prop",
props: {
slideType: {
type: Object,default: () => {
return {
slide: "default",chapter: "main",
};
},
},
},data() {
return {};
},
};
</script><style scoped>
.slide-prop {
width: 200px;
}
</style>How the property looks like in eWizard Editor:
slides
This property type provides a pop-up window for selecting multiple e-Detailer slides. If the default value isn't defined in index.vue, the default value is null.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
slidesType: {
label: {
eng: "Slides",
},
actualType: PropType.Slides,
},
},
};index.vue example:
<template>
<p class="slides-prop">
Slides:<span v-for="(slide, index) in slidesType" :key="index">
#{{ slide.slide }}
</span>
</p>
</template><script>
export default {
name: "slides-prop",
props: {
slidesType: {
type: Array,
default: () => {
return [
{
slide: "default",
chapter: "main",
},
];
},
},
},data() {
return {};
},
};
</script><style scoped>
.slides-prop {
width: 200px;
}
</style>How the property looks like in eWizard Editor:
chapter
Use this property type to add the Chapter drop-down menu to the Properties tab within the customization panel in eWizard Editor.
If the default value isn't defined in index.vue, the default value is the first chapter from the storyboard object. Enter the chapter ID from the chapters object as the default value.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
chapterType: {
label: {
eng: "Chapter",
},
actualType: PropType.Chapter,
},
},
};index.vue example:
<template>
<p class="chapter-prop">Chapter prop: #{{ chapterType }}</p>
</template><script>
export default {
name: "chapter-prop",
props: {
chapterType: {
type: String,
default: "chapter2", // chapter id
},
},data() {
return {};
},
};
</script><style scoped>
.chapter-prop {
width: 200px;
}
</style>How the property looks like in eWizard Editor:
chapters
Use this property type to add the Chapters drop-down menu to the Properties tab within the customization panel in eWizard Editor. If the default value isn't defined in index.vue, the default value is an empty array.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
chaptersType: {
label: {
eng: "Chapters",
},
actualType: PropType.Chapters,
},
},
};index.vue example:
<template>
<p class="chapters-prop">
Chapters prop:
<span v-for="(chapter, index) in chaptersType" :key="index">
#{{ chapter }}
</span>
</p>
</template><script>
export default {
name: "chapters-prop",
props: {
chaptersType: {
type: Array,
default: () => {
return ["main", "chapter2"];
},
},
},data() {
return {};
},
};
</script><style scoped>
.chapters-prop {
width: 200px;
}
</style>How the property looks like in eWizard Editor:
fixed-text
Create the text property to edit the text in eWizard Editor without the possibility of changing the styles for this text. The text editing buttons in Editor are read-only.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
textFixedType: {
label: {
eng: "Fixed text",
},
actualType: PropType.FixedText,
readonly: true,
},
},
};index.vue example:
<template>
<p class="text-fixed-prop">Fixed text: #{{ textFixedType }}</p>
</template><script>
export default {
name: "text-fixed-prop",
props: {
textFixedType: {
type: String,
default: "Some text",
},
},data() {
return {};
},
};
</script><style scoped>
.text-fixed-prop {
width: 200px;
}
</style>How the property looks like in eWizard Editor:
border
The standard CSS border properties are the line width, color, and style (solid, dotted, etc.). For example, the selected tab border in the wiz-tab-group component.
ewizard.config.js example:
import { PropType } from "component-types";export default {
props: {
componentName: {
label: {
eng: "Component name",
},
actualType: PropType.String,
},
borderType: {
label: {
eng: "Border",
},
actualType: PropType.Border,
},
},
};index.vue example:
<template>
<div class="border-prop">
<p :style="`border: ${borderType}`">Border prop</p>
</div>
</template><script>
export default {
name: "border-prop",
props: {
borderType: {
type: String,
default: "5px solid #000000",
},
},data() {
return {};
},
};
</script><style scoped>
.border-prop {
width: 200px;
}
</style>How the property looks like in eWizard Editor:
File types
The FileType object in the component-types npm package contains the following file type values. You can upload the file assets in eWizard Editor from your device or use the existing assets from eWizard Library or Veeva Vault.
| Description |
| The audio file types. The file type can't be modified in eWizard Editor. |
| The image file types. |
| The video file types. |
| Upload the module to the email block component from Veeva Vault. |
| The supported document files types are CSV, DOC, DOCX, HTML, PDF, TXT, XLS, and XLSX. |
TIP: See the full list of supported file types for eWizard Editor.
Add attributes to properties
You can add attributes to properties in the ewizard.config.js file to hide, restrict editing, add valіdation, and make properties required in eWizard Editor.
Hide properties
To hide specific properties in eWizard Editor, use the sealed attribute in the ewizard.config.js file. If you set this parameter to true, the property isn't displayed on the Properties tab within the customization panel in eWizard Editor.
For example, you can hide the alternative text property for the wiz-image component on the Properties tab within the customization panel in eWizard Editor. For this, add the sealed: true to the alt prop in the demo e-Detailer ewizard.config.js file.
// ./demo/node_modules/wiz-image/ewizard.config.jsexport default {
props: {
alt: {
sealed: true
label: {
eng: 'Alternative text',
},
actualType: PropType.String,
},
},
};Restrict editing width and height
To restrict editing the width and height of a component, add the sealed object with the true value.
export default {
sealed: {
width: true,
height: true,
},
props: {
…
},
};Restrict editing a property
To restrict editing the width and height of a component, add the readonly key with the true value.
stringType: {
label: {
eng: 'String'
},
actualType: PropType.String,
readonly: true,
}, Make a property required
To make a property required in eWizard Editor, set the required key to true.
stringType: {
label: {
eng: 'String'
},
actualType: PropType.String,
required: true,
}, Add valіdation to a property
To add valіdation a property, add the validator key to the index.vue file of a property.
numberType: {
type: Number,
validator: (value) => {
return value >= 0;
},
default: 3,
},