Settings API
Use the settings API to access the item settings in the raw and interpolated formats. The item settings are defined in the ./settings.json file. You can access the item settings with the API methods in any Vue file of your project.
The settings API exposes its methods through the following context:
this.$settings
Usage
You can use the settings API methods to get the item settings: the template name and ID, localization, navigation, and other information from the ./settings.json file.
Use the settings API methods with the this.$settings context in a Vue file. For example, a slide index.vue file or the App.vue file in emails, landing pages, or messenger ads.
getRaw
The getRaw method returns the non-interpolated values (placeholders) from the ./settings.json file: you see the values as they're in the repository. Add this code to your slide index.vue file or the App.vue file to view the result in the browser console.
:--- TABS:
TAB: e-Detailer
// ./slides/default/index.vueexport default {
beforeMount() {
const rawSettings = this.$settings.getRaw();
console.log(rawSettings);
}
}The returned result in the browser console:
TAB: Email
// ./App.vueexport default {
beforeMount() {
const rawSettings = this.$settings.getRaw();
console.log(rawSettings);
}
}The returned result in the browser console:
TAB: Landing page
// ./App.vueexport default {
beforeMount() {
const rawSettings = this.$settings.getRaw();
console.log(rawSettings);
}
}The returned result in the browser console:
TAB: Messenger ad
// ./App.vueexport default {
beforeMount() {
const rawSettings = this.$settings.getRaw();
console.log(rawSettings);
}
}The returned result in the browser console:
---:
get
The get method returns the interpolated settings (actual values instead of placeholders) from the ./settings.json file. Add this code to your slide index.vue file or the App.vue file to view the result in the browser console.
:--- TABS:
TAB: e-Detailer
// ./slides/default/index.vueexport default {
beforeMount() {
const settings = this.$settings.get();
console.log(settings);
}
}The returned result in the browser console:
You see the interpolated values from the ./settings.json file.
TAB: Email
// ./App.vueexport default {
beforeMount() {
const settings = this.$settings.get();
console.log(settings);
}
}The returned result in the browser console:
You see the interpolated values from the ./settings.json file.
TAB: Landing page
// ./App.vueexport default {
beforeMount() {
const settings = this.$settings.get();
console.log(settings);
}
}The returned result in the browser console:
You see the interpolated values from the ./settings.json file.
TAB: Messenger ad
// ./App.vueexport default {
beforeMount() {
const settings = this.$settings.get();
console.log(settings);
}
}The returned result in the browser console:
You see the interpolated values from the ./settings.json file.
---:
getClmSettings
NOTE: Use the getClmSettings method with e-Detailers and messenger ads as other item types don't have the clms field in the ./settings.json file.
The getClmSettings method returns the object with the e-Detailer or messenger ad settings for the specified target system: for example, iqvia or irep.
To get the settings for the target system, add the target system name as the parameter to the getClmSettings() method.
:--- TABS:
TAB: e-Detailer
// ./slides/default/index.vueexport default {
mounted() {
const iqviaSettings = this.$settings.getClmSettings('iqvia');
console.log(iqviaSettings);
}
};The returned result in the browser console:
You see the interpolated values for the iqvia target system from the ./settings.json file.
TAB: Messenger ad
// ./App.vueexport default {
mounted() {
const irepSettings = this.$settings.getClmSettings('irep');
console.log(irepSettings);
}
};The returned result in the browser console:
You see the interpolated values for the irep target system from the ./settings.json file.
---:
getByPath
The getByPath method returns the interpolated value for the specified setting in your item from the ./settings.json file.
Add the full path to this setting as the keypath parameter to the getByPath() method.
:--- TABS:
TAB: e-Detailer
For example, add the full path to the direction field value as the keypath parameter of the getByPath() method to show the slide swipe navigation direction.
// ./slides/default/index.vueexport default {
mounted() {
const swipeDirection = this.$settings.getByPath('navigation.swipe.slide.direction');
console.log(swipeDirection);
}
}The returned result in the browser console for the slide swipe direction:
TAB: Email
For example, add the full path to the target system code field value as the keypath parameter of the getByPath() method to show the code of the email target system.
// ./App.vueexport default {
mounted() {
const targetClm = this.$settings.getByPath('targetCLM.code');
console.log(targetClm);
}
}The returned result in the browser console for the email target system:
-->
TAB: Landing page
For example, add the full path to the localization language current field value as the keypath parameter of the getByPath() method to show the current localization language code.
// ./App.vueexport default {
mounted() {
const currentLanguage = this.$settings.getByPath('localization.current');
console.log(currentLanguage);
}
}The returned result in the browser console for the current localization language code:
-->
TAB: Messenger ad
For example, add the full path to the target messenger current field value as the keypath parameter of the getByPath() method to show your current target messenger.
// ./App.vueexport default {
mounted() {
const targetMessenger = this.$settings.getByPath('metadata.targetMessenger.current');
console.log(targetMessenger);
}
}The returned result in the browser console for the current target messenger:
-->
---:
TIP: You can use this method to check if a setting exists by the specified path. If this setting is missing and there is no default value, eWizard.js returns an undefined error or an empty object.
Parameters
The getByPath method has the following parameters:
Parameter | Type | Default | Description |
| String | N/A | Required parameter. Provide the full path to the key setting in the |
| Object |
| Optional parameter. Use it to redefine the slide and chapter to interpolate their values. The |
| Any | N/A | Optional parameter. If |
Usage of options
Use the options parameter with the getByPath method to redefine the slide or chapter ID. The name and id fields are available for interpolation.
For example, you can redefine the default slide ID for the assetFileNameTemplate field. Change the default slide ID to home.
// ./slides/default/index.vuebeforeMount() {
const assetFileNameTemplate = this.$settings.getByPath('clms.irep.assetFileNameTemplate', {
slide: {
id: 'home',
},
chapter: {
id: 'home',
}
});
console.log(assetFileNameTemplate);
},The returned result without options in the browser console (the default slide ID):
The returned result with options in the browser console (the changed slide ID):
Use the defaultValue parameter to define the value for the setting that doesn't exist in the settings.json file.
For example, the test.value setting doesn't exist in the settings.json file. If you try to call this setting with the getByPath method, an empty object is returned.
beforeMount() {
const assetFileNameTemplate = this.$settings.getByPath('test.value');
console.log(assetFileNameTemplate);
},The returned result in the browser console:
Add the options parameter and enter the defaultValue parameter that you want to return if that value doesn't exist in the settings.json file. For example, test value.
beforeMount() {
const options = {
slide: {
id: 'home',
},
}const assetFileNameTemplate = this.$settings.getByPath('test.value', options, 'test value');
console.log(assetFileNameTemplate);
},The returned result in the browser console:
getRawByPath
The getRawByPath method returns the non-interpolated values (placeholders) for the specified setting in your item from the ./settings.json file. This method has the same parameters as the getByPath method.
To get the non-interpolated value for any field from the ./settings.json file, add the path to this field as the parameter of the getRawByPath method.
:--- TABS:
TAB: e-Detailer
// ./slides/default/index.vueexport default {
beforeMount() {
const assetFileNameTemplateRaw = this.$settings.getRawByPath('clms.irep.assetFileNameTemplate');
console.log(assetFileNameTemplateRaw);
}
}The result in the browser console:
TAB: Email
// ./App.vueexport default {
mounted() {
const targetClm = this.$settings.getRawByPath('targetCLM.code');
console.log(targetClm);
}
}The returned result in the browser console for the email target system:
-->
TAB: Landing page
// ./App.vueexport default {
mounted() {
const currentLanguage = this.$settings.getRawByPath('localization.current');
console.log(currentLanguage);
}
}The returned result in the browser console for the current localization language code:
-->
TAB: Messenger ad
// ./App.vueexport default {
mounted() {
const targetMessenger = this.$settings.getByPath('metadata.targetMessenger.current');
console.log(targetMessenger);
}
}The returned result in the browser console for the current target messenger:
-->
---:
setSettings
Use the setSettings method to update the item settings values stored in the browser memory. The app uses the new values set by this method instead of the values in the project ./settings.json file during the current session in the browser.
Add the new setting as a key-value pair within the object. For example, set the project name field value and use the get() method to display the new values in the browser console.
:--- TABS:
TAB: e-Detailer
// ./slides/default/index.vueexport default {
beforeMount() {
this.$settings.setSettings({ name: "My project" });
console.log(this.$settings.get());
}
};The result in the browser console:
TAB: Email
// ./App.vueexport default {
beforeMount() {
this.$settings.setSettings({ name: "My project" });
console.log(this.$settings.get());
}
};The result in the browser console:
TAB: Landing page
// ./App.vueexport default {
beforeMount() {
this.$settings.setSettings({ name: "My project" });
console.log(this.$settings.get());
}
};The result in the browser console:
TAB: Messenger ad
// ./App.vueexport default {
beforeMount() {
this.$settings.setSettings({ name: "My project" });
console.log(this.$settings.get());
}
};The result in the browser console:
---:
Parameters
The setSettings method has the following parameter:
Parameter | Type | Default | Description |
| Object |
| Required parameter. Use it to redefine one or more values from the |
getCurrentTheme
The getCurrentTheme method returns the value for the current theme field in the ./settings.json file.
// ./settings.json{
"theme": {
"default": "viseven",
"current": "viseven-dark"
}
}Add this code to your slide .vue file or the App.vue file to view the result in the browser console.
:--- TABS:
TAB: e-Detailer
// ./slides/default/index.vueexport default {
beforeMount() {
const getCurrentTheme = this.$settings.getCurrentTheme();
console.log(getCurrentTheme);
}
};The result in the browser console:
-->-->-->
TAB: Email
// ./App.vueexport default {
beforeMount() {
const getCurrentTheme = this.$settings.getCurrentTheme();
console.log(getCurrentTheme);
}
};The result in the browser console:
-->-->-->
TAB: Landing page
// ./App.vueexport default {
beforeMount() {
const getCurrentTheme = this.$settings.getCurrentTheme();
console.log(getCurrentTheme);
}
};The result in the browser console:
-->-->-->
TAB: Messenger ad
// ./App.vueexport default {
beforeMount() {
const getCurrentTheme = this.$settings.getCurrentTheme();
console.log(getCurrentTheme);
}
};The result in the browser console:
-->-->-->
---:
getCurrentScheme
The getCurrentScheme method returns the value for the scheme field in the ./settings.json file. This is the color scheme for the current theme, for example scheme1 for the viseven-dark theme.
// ./settings.json{
"theme": {
"default": "viseven",
"current": "viseven-dark"
},
"scheme": "scheme1"
}Add this code to your slide .vue file or the App.vue file to view the result in the browser console.
:--- TABS:
TAB: e-Detailer
// ./slides/default/index.vueexport default {
beforeMount() {
const getCurrentScheme = this.$settings.getCurrentScheme();
console.log(getCurrentScheme);
}
};The result in the browser console:
-->-->-->
TAB: Email
// ./App.vueexport default {
beforeMount() {
const getCurrentScheme = this.$settings.getCurrentScheme();
console.log(getCurrentScheme);
}
};The result in the browser console:
-->-->-->
TAB: Landing page
// ./App.vueexport default {
beforeMount() {
const getCurrentScheme = this.$settings.getCurrentScheme();
console.log(getCurrentScheme);
}
};The result in the browser console:
-->-->-->
TAB: Messenger ad
// ./App.vueexport default {
beforeMount() {
const getCurrentScheme = this.$settings.getCurrentScheme();
console.log(getCurrentScheme);
}
};The result in the browser console:
-->-->-->
---: