Use components to customize your e-Detailers, emails, and other eWizard items.
You can install components from the eWizard.js repository or install multiple components from the package.json dependencies.
The set of repository components depends on the item type:
As a result, the latest versions of the components are installed to your project. Subdirectories with the components appear in the node_modules/@[ITEM_TYPE] directory.
For example, the ./node_modules/@edetailer/wiz-card subdirectory comprises the wiz-card component for e-Detailers.
Install a single component from the repository
You can install a component with the wiz install command from the following sources:
• A CodeArtifact global repository.
• An instance-specific repository you are logged in to.
• A GitLab public repository.
Upon successful installation, eWizard creates the component dependency in the package.json file of your project.
To switch between instances, run the wiz config command.
wiz config -w https://[INSTANCE_NAME].ewizard.io
[INSTANCE_NAME] is the name of the instance you're installing components from.
For example, to access Viseven components, switch to the Viseven instance:
wiz config -w https://viseven.ewizard.io
Install a component from the global CodeArtifact repository
The global CodeArtifact repository contains basic components that you can install from any instance.
TIP: Access to the global repository is configured on the Admin panel.
You can install a component from the global repository with the hidden --repository global or -r global option of the wiz install command.
To install a component from the global repository:
1) Remove the package-lock.json file of the project.
2) Add the ./.wizrc configuration file to the project where the codeartifact_repository is defined as global.
{
"codeartifact_repository": "global"
}TIP: When you add the ./.wizrc file, the default repository you install components from becomes global instead of instance-specific. Remove the file to change the default repository back to private.
3) Run the wiz install command.
wiz install @[SCOPE]/[COMPONENT_NAME]
— [SCOPE] is the CodeArtifact scope of your project. For example, the Viseven CodeArtifact repository uses the item types as the scope: edetailer, email, site.
— [COMPONENT_NAME] is the name of the component in the eWizard.js repository, such as wiz-text.
As a result, the following dependency is created in the package.json file of the project:
// package.json{
"dependencies": {
"@edetailer/wiz-text": "^3.0.0",
}
}To make sure that the dependency is installed from the global repository, check the package-lock.json file. For example, the @edetailer/wiz-text dependency:
// package-lock.json"@edetailer/wiz-text": {
"version": "3.0.0",
"resolved": "https://ewizard-444976376633.d.codeartifact.eu-central-1.amazonaws.com:443/npm/global/@edetailer/wiz-text/-/wiz-text-3.0.0.tgz",
"integrity": "sha512-4Zb+PDbkocxBNU0zfs4q5QYNeApOeG99ZxnWxne1CR3kZQPruWKIAkp6TJhFy4LsxWS6Pv/jMnsQYk8HP5XkTQ==",
"requires": {
"@ewizardjs/component-types": "^3.1.0"
}
}NOTE: The .wizrc file can't be archived with wiz archive.
Install a component from a private repository
By default, after you log in to an instance, you can install components from the private instance-specific CodeArtifact repository, such as the Viseven repository.
To install a component from CodeArtifact, go to the root directory of your project. Then run the following command:
wiz install @[SCOPE]/[COMPONENT_NAME]
• [SCOPE] is the CodeArtifact scope of your project. For example, the Viseven CodeArtifact repository uses the item types as the scope: edetailer, email, site.
• [COMPONENT_NAME] is the name of the component in the eWizard.js repository, such as wiz-accordion.
For example, to install the e-Detailer wiz-accordion component, run:
wiz install @edetailer/wiz-accordion
As a result, the following dependency is created in the package.json file of the project:
// package.json{
"dependencies": {
"@edetailer/wiz-accordion": "^3.0.0",
}
}Install a component from a GitLab repository
To install a component from GitLab, run:
wiz install git+[COMPONENT_LINK]
COMPONENT_LINK is the cloned HTTPS link to the component repository on GitLab.
For example, to install the email wiz-button component, run:
wiz install git+https://git.qapint.com/ewizardjs/email/components/wiz-button.git
As a result, the following dependency is created in the package.json file of the project:
// package.json{
"dependencies": {
"@email/wiz-button": "git+https://git.qapint.com/ewizardjs/email/components/wiz-button.git",
}
}eWizard CLI checks the item type and installs the component from the repository based on the instance you are logged in to. For example, if you are on the https://viseven.ewizard.io instance and run wiz install @site/wiz-text in a site template, eWizard CLI checks the global CodeArtifact repository and the Viseven repository.
After the installation, the component subdirectory is created in the ./node_modules/@[ITEM_TYPE] subdirectory. For example, the wiz-card component for e-Detailers is installed in the ./node_modules/@edetailer subdirectory.
To use your component in eWizard Editor:
1) Make the component visible in eWizard Editor.
2) Register the component globally in the project or locally.
Install multiple components from the package.json dependencies
You can install multiple CodeArtifact and GitLab components at the same time with the wiz install command. To use this method, you need to manually add dependencies in package.json.
To install multiple components with wiz install:
1) Add the component dependencies to the ./package.json file.
For example, add the CodeArtifact or GitLab dependencies of the wiz-accordion wiz-card-carousel and wiz-checkbox components for an e-Detailer:
// ./package.json
{
"dependencies": {
"@edetailer/wiz-accordion": "^3.0.0",
"@edetailer/wiz-card-carousel": "^2.0.0",
"@edetailer/wiz-checkbox": "git+https://git.qapint.com/ewizardjs/edetailer/components/wiz-checkbox.git"
}
}2) Run the following command in the root directory of your project:
wiz install
Add a custom component locally
You can initialize your own component with eWizard CLI and add it to your project.
To add a local component to your project:
1) Initialize a component project. For example, wiz-test-component directory.
2) Develop your component.
3) Copy the developed component directory to the common/components directory of your project. For example, ./common/components/wiz-test-component.
NOTE: Copy the developed component without the demo directory, the demo directory is for component development purposes.
To use your component in eWizard Editor:
1) Make the component visible in eWizard Editor.
2) Register the component globally in the project or locally.
Make a component visible in eWizard Editor
To display your component on the elements panel in eWizard Editor, add it to the ./common/components/components.json file.
For example, wiz-accordion, wiz-carousel, and wiz-checkbox components:
// ./common/components/components.json{
"components": [
{
"id": "wiz-accordion",
"name": {
"eng": "Accordion"
},
"icon": "node_modules/@edetailer/wiz-accordion/icon.png"
},
{
"id": "wiz-carousel",
"name": {
"eng": "Carousel"
},
"icon": "node_modules/@edetailer/wiz-carousel/icon.png"
},
{
"id": "wiz-checkbox",
"name": {
"eng": "Checkbox"
},
"icon": "node_modules/@edetailer/wiz-checkbox/icon.png"
}
]
}• name is the component name displayed in eWizard Editor.
• id is the component ID in eWizard.js.
• icon: the icon displayed in the Components sidebar of eWizard Editor. Add the component icon.png file to the component root directory to display the component icon in the eWizard Editor sidebar.
The components listed in the components.json file are displayed on the Components tab of the elements panel in eWizard Editor:
Register the component globally in the project
To use the components globally in your project, add them to a JS file in the ./extensions directory, such as globalComponents.js or common.js. For example, for e-Detailers, you can use the component on all slides without importing it on specific slides.
For more information, see Extensions.
To register a component globally in your project:
1) Open the JS file in the ./extensions directory.
— globalComponents.js for e-Detailers
— common.js for other items
2) Import the components to use them in your Vue file (index.vue or App.vue) throughout the project. For example, import the e-Detailer wiz-accordion, wiz-carousel, and wiz-checkbox components:
/*
./extensions/globalComponents.js
OR
./extensions/common.js
*/import wizAccordion from '@edetailer/wiz-accordion';
import wizCarousel from '@edetailer/wiz-carousel';
import wizCheckbox from '@edetailer/wiz-checkbox';export default (Vue) => {
Vue.component('wiz-accordion', wizAccordion);
Vue.component('wiz-carousel', wizCarousel);
Vue.component('wiz-checkbox', wizCheckbox);
};Register the component locally
You can use a component on a specific e-Detailer slide, site page, or email layout without affecting the whole project. For this, register a component locally:
1) Open the Vue file:
— For an e-Detailer slide: ./slides/default/index.vue. Here, default is the slide ID.
— For an email and a landing page: ./App.vue
— For a page in a multiple page site: ./pages/default/index.vue. Here, default is page ID.
2) Import the components within the <script> tag. For example, the e-Detailer wiz-text component:
/* ./slides/default/index.vue
OR
./App.vue
OR
./pages/default/index.vue
*/<script>
import wizText from '@edetailer/wiz-text';export default {
components: {
wizText,
},
};
</script>For more information about the components available for different items, see: