You can add footnotes with explanations for the wiz-text component to e-Detailers.

NOTE: As best practice, use eWizard Editor to add and edit footnotes.

eWizard.js stores the footnotes you add in eWizard Editor in the ./common/i18n/footnotes.json file. You can change the path to the file in the path.common.footnotes object of the e-Detailer system settings.

eWizard Editor assigns an ID to each footnote. For example, a footnotes.json file with the footnote_q7ct, footnote_52gz, footnote_s9d4, and footnote_hn17 objects for the English eng language.

Each footnote object has the following fields:

TIP: For all groups except custom and input, eWizard Editor applies the symbols regardless of the mark field when you apply the changes. For more information, see Footnotes in eWizard Editor.

The symbol.type field has the following symbol groups:

The footnote keys are added to the template in the <i18n> tag of the wiz-text e-Detailer component next to the footnote text.

In the slide index.vue file, each footnote key is wrapped in the <sup footnotes=\"\"></sup> CSS style.

For example, the footnote_1, footnote_2, footnote_3, and footnote_4 keys:

• footnote_1 and footnote_2 belong to the upper-alpha group.

• footnote_3 belongs to the custom group.

• footnote_4 belongs to the input group.

In the resulting HTML the footnotes look like this on the slide:

TIP: The input group footnotes aren't displayed on the slides in eWizard Editor.

After you click FOOTNOTES, you can see the pop-up with the footnote text from the footnotes.json file:

In eWizard Editor, you can add footnotes with predefined symbols or letters from the following groups:

• lower-alpha

• upper-alpha

• lower-roman

• symbols

You can also use your own symbol or abbreviation in the custom or input groups respectively.

For the lower-alpha, upper-alpha, lower-roman, and symbols groups, eWizard Editor applies symbols or letters to footnotes based on:

• The symbol or letter order in the group.

• The order you add the footnote on a slide.

TIP: Modifying the mark value in eWizard.js doesn't affect the lower-alpha, upper-alpha, lower-roman, and symbols groups in eWizard Editor.

For example, the first footnote from the lower-alpha group on the slide always has the first letter of the group—a, the first footnote from the symbols group always has the first * symbol.

eWizard Editor skips symbols from the lower-alpha, upper-alpha, lower-roman, and symbols groups that match any of the symbols from the custom group.

For example, if you add the letter a as a custom footnote symbol, the first footnote you add from the lower-alpha group is going to be—b.

When you add multiple footnotes of the same group, eWizard Editor applies the symbols or letters in the same order as they appear in the group.

For example, footnote_1—My text and footnote_2—My second text belong to the same upper-alpha group.

When you add My text first, eWizard Editor assigns it the first letter of the upper-alpha group—A. After you add My second text second, eWizard Editor assigns it the second letter of the upper-alpha group—B:

When you add My second text first and My text second, eWizard Editor assigns My second text—the A letter, and My text—B:

If the symbols used on a slide exceed the group limit, a repeated symbol is added. For example, if you added all six footnotes from the symbols group on a slide, when you add the seventh footnote, the first symbol—* of the first group is added twice, and on the fourteenth footnote—three times:

Use the footnotes module to work with the footnotes metadata.

To use the footnotes module, add the module methods in the <script> tag of the index.vue file of an e-Detailer slide:

The footnotes module checks footnotes for the current footnote localization. For more details, see Localization of footnotes.

Use the following methods of the footnotes module to add, update, or get the footnotes.json data:

• getAllFootnotes

• getFootnotesList

• setFootnotesList

• setSeparator

• createObserver

• turnOnObserver

• turnOffObserver

• footnoteExists

• isValidFootnoteType

• getCurrentFootnotes

• isAbbreviationFootnote

• isCustomFootnote

• isGroupFootnote

Use the getAllFootnotes method to get all footnotes from footnotes.json as an array.

For example, to get all footnotes from footnotes.json in the browser console:

After running a development build, you can view all footnote objects individually in the browser console.

Use the getFootnotesList method to view all footnotes as a list.

For example, to view all footnotes in the browser console:

After running a development build, you can view the list of all footnotes in Object of the browser console. The method returns each footnote as an object.

Use the setFootnotesList method to set a new list of footnotes used in the e-Detailer.

[OBJECT_NAME] is the name of the object you create the list in.

For example, to set a list of footnotes in the myFootnotes object:

Example of the myFootnotes object:

Use the setSeparator method to set a symbol that divides the footnotes on the slide.

[SYMBOL] is the symbol you use as a divider, such as a space: , a comma: ,, or a semicolon: ;.

For example, to use , as a divider, add:

As a result, multiple consecutive footnotes on a slide are divided by a symbol, for example, ,:

Use the createObserver method to create an observer that tracks footnote changes in the resulting HTML file, when you edit, add, or delete footnote attributes in eWizard Editor. By default, the observer is activated in eWizard Editor.

Use the turnOnObserver method to turn on the observer. By default, the observer is turned on.

Use the turnOffObserver method to turn off the observer.

Use the footnoteExists boolean method to check if the footnote ID exists in the footnotes.json file of your template.

FOOTNOTE_ID is the ID of the footnote in the footnotes.json file.

For example, the footnotes.json file has footnote1 and footnote2:

If you run the footnoteExists method with the footnote3 ID:

After running a development build, you can see if the footnote exists in the browser console:

Use the isValidFootnoteType boolean method to check if the footnote type is valid. The type is considered valid if the type field has one of the following values:

• lower-alpha

• upper-alpha

• lower-roman

• symbols

• custom

• input

FOOTNOTE_ID is the ID of the footnote in the footnotes.json file.

For example, the footnotes.json includes the footnote1 key:

Use the isValidFootnoteType to check the validity of footnote1.

After running a development build, you can see if the footnote has a valid footnote type. You get a false response, because footnote1 for eng isn't valid:

Use the getCurrentFootnotes method to view a list of all footnotes added to the slide.

For example, to show the footnotes in the browser console:

After running a development build, you can see the data about all footnotes used on the slide in the browser console.

Use the isAbbreviationFootnote boolean method to check if a footnote on the slide belongs to the input symbol group.

FOOTNOTE_ID is the ID of the footnote in the footnotes.json file.

For example, the footnotes.json has the following structure:

To check if the footnote1 belongs to the input group, add the following code:

After running a development build, you can see if a footnote on the slide belongs to the input group.

The resulting response in the browser console:

-->-->

Use the isCustomFootnote boolean method to check if a footnote on the slide belongs to the custom symbol group.

FOOTNOTE_ID is the ID of the footnote in the footnotes.json file.

For example, the footnotes.json has the following structure:

To check if the footnote1 belongs to the custom group, add the following code:

The resulting response in the browser console:

-->-->

Use the isGroupFootnote boolean method to check if a footnote on the slide belongs to one of the following symbol groups:

• lower-alpha

• upper-alpha

• lower-roman

• symbols

FOOTNOTE_ID is the ID of the footnote in the footnotes.json file.

For example, the footnotes.json has the following structure:

To check if the footnote1 belongs to one of the groups, add the following code:

After running a development build, check the browser console to see if a footnote belongs to one of the groups.

The resulting response in the browser console:

-->-->