wiz-references component in e-Detailers

The wiz-references compound component includes two others: wiz-references-button and wiz-references-popup. The references component is a button on the slide that triggers the pop-up with references. The references pop-up is an HTML table with the list of references—citations of the sources used in your e-Detailer. Each reference has its ID. Use eWizard Editor to add references to the e-Detailer template. For more information about using references in eWizard Editor, see References.

For more information about working with references locally in your project, see References.

Installation

To install the wiz-references component:

1) Run the following command in the root directory of your e-Detailer project:

wiz install @edetailer/wiz-references

2) Register the wiz-references component and two others required for its work: wiz-references-button and wiz-references-popup.

// ./extensions/globalComponents.jsimport wizReferences from '@edetailer/wiz-references';
import wizReferencesPopup from '@edetailer/wiz-references/components/wiz-references-popup/index.vue';
import wizReferencesButton from '@edetailer/wiz-references/components/wiz-references-button/index.vue';export default (Vue) => {
Vue.component('wiz-references', wizReferences);
Vue.component('wiz-references-popup', wizReferencesPopup);
Vue.component('wiz-references-button', wizReferencesButton);
};

You can register the components on a specific slide. For more information, see Install components.

Usage

TIP: As best practice, use eWizard Editor to add and edit the components.

To use the wiz-references component on your e-Detailer template:

1) Add the <wiz-references></wiz-references> tag to your e-Detailer template in the slide index.vue file, for example, slides/default/index.vue.

<!--./slides/default/index.vue --><template>
<wiz-slide class="editable-block">
<wiz-references></wiz-references>
</wiz-slide>
</template>

If you want to show the references button and pop-up on all slides, add the wiz-references component to the template in the ./App.vue file of your e-Detailer. In this case, you don't need to add the wiz-references component to the template in the Vue file for each slide.

TIP: Use the Master template mode in eWizard Editor to view the references, button, and pop-up components on the Tree tab. You can edit the properties of these three components on the Properties tab.

2) Add the <wiz-references-button></wiz-references-button> and <wiz-references-popup></wiz-references-popup> tags inside the <wiz-references></wiz-references> tag.

<!--./slides/default/index.vue --><wiz-references>
<wiz-references-button v-open.popup="'refPopup'"></wiz-references-button>
<wiz-references-popup id="refPopup"></wiz-references-popup>
</wiz-references>

The wiz-references-button component has the v-open directive that triggers the Open pop-up action.

3) Add the attributes to the respective components tags.

<!--./slides/default/index.vue --><template>
<wiz-slide class="editable-block">
<wiz-references
component-name="My references"
type="edetailer-notes"
separator="brackets"
range-delimiter="—"
:merge-numbers="false"
number-format="asterisk"
visibility="allSlides">
<wiz-references-button
v-open.popup="'refPopup'"
:text="$t('wiz_references_button_ba51')"
data-asset-id="svbkpuikvj"
image-src="./media/images/e95272c0-0bba-11ec-8a48-06c02543afe7.png"
></wiz-references-button>
<wiz-references-popup
id="refPopup"
component-name="My references pop-up"
:name="$t('wiz_references_popup_662f')"
:open-by-tap-refs="true"
data-asset-id="ed5pu8wpg0"
close-button-icon="./media/images/37022210-5d7b-11ec-b91a-85800ef85ec4.png"
close-button-position="rightBottom"
:show-overlay="true"
:close-on-outside-tap="true"
:show-close-button="true"
></wiz-references-popup>
</wiz-references>
</wiz-slide>
</template>

The data-asset-id attribute is required for the Veeva Vault modules in the assets.json file. For more information, see Veeva Vault publish settings.

4) Change the references button and pop-up text in the <i18n></i18n> localization tag.

// ./slides/default/index.vue<i18n>
{
"eng": {
"wiz_references_button_ba51": "<p>My references</p>",
"wiz_references_popup_662f": "<p><span style=\"color:#1115e7ff;\"><b>My references</b></span></p>"
}
}
</i18n>

For more information, see Localization.

Attributes

To change the wiz-references component appearance and behavior, you need to change the attributes for the wiz-references-button and wiz-references-popup components that are inside the wiz-references component.

wiz-references

The wiz-references component has the following attributes:

• component-name

Change the component name that appears on the eWizard Editor Properties tab.

<wiz-references component-name="My references"></wiz-references>

• type

Change the reference numbering order:

— Use the slide-notes type to show the reference number relative to the references on a slide.

— Use the edetailer-notes type to show the reference number relative to the list of all references in the e-Detailer.

<wiz-references type="edetailer-notes"></wiz-references>

• separator

Change the separator between the reference numbers: comma or brackets. For example: 1,2,3 or [1][2][3].

<wiz-references separator="brackets"></wiz-references>

• range-delimiter

Change the range separation symbol between the reference numbers: hyphen ‐, en-dash –, or em-dash —. For example, 1—3 for the en-dash delimiter.

<wiz-references range-delimiter="—"></wiz-references>

• merge-numbers

Select true to add a range delimiter for consecutive numbers, for example 1–3. Select false to separate all numbers with commas, for example: 1,2,3. In case of brackets, no commas are used: [1][2][3].

<wiz-references :merge-numbers="false"></wiz-references>

• number-format

Select the reference symbol format:

— decimal for numbers: 1,2,3.

— upper-alpha for uppercase letters: A,B,C.

— lower-alpha for lowercase letters: a,b,c.

— asterisk for *,**,***.

<wiz-references number-format="asterisk"></wiz-references>

• visibility

Select the allSlides to show the references button on all slides. Select slideReferences to show the references button only on the slides with the references.

<wiz-references visibility="allSlides"></wiz-references>

wiz-references-button

The wiz-references-button component has the v-open directive that triggers the Open pop-up action.

<!--./slides/default/index.vue --><wiz-references>
<wiz-references-button v-open.popup="'refPopup'"></wiz-references-button>
</wiz-references>

TIP: The wiz-references-popup component uses the 'refPopup' string value from the wiz-references-button component as an ID to open the pop-up.

The wiz-references-button component has the following attributes:

• text

Change the references button text.

<wiz-references>
<wiz-references-button :text="$t('wiz_references_button_ba51')"></wiz-references-button>
</wiz-references>

• font-color

Change the references button color. Use the :Hexcolorcode:Hex: or :RGBA:RGBA: color code.

<wiz-references>
<wiz-references-button font-color="#eaf1f180"></wiz-references-button>
</wiz-references>

• image-src

Change the references button background image. Add the path to the image file. By default, eWizard Editor stores the image in the slide media/images directory.

<wiz-references>
<wiz-references-button image-src="./media/images/e95272c0-0bba-11ec-8a48-06c02543afe7.png"></wiz-references-button>
</wiz-references>

wiz-references-popup

The wiz-references-popup component provides the id attribute with the 'refPopup' value for the v-open directive in the wiz-references-button component.

The wiz-references-popup component has the following attributes:

• component-name

Change the component name on the eWizard Editor Properties tab.

<wiz-references>
<wiz-references-popup component-name="My references pop-up"></wiz-references-popup>
</wiz-references>

• name

Change the references pop-up header that appears above the list of references.

<wiz-references>
<wiz-references-popup :name="$t('wiz_references_popup_662f')"></wiz-references-popup>
</wiz-references>

• open-by-tap-refs

Select true to open the references pop-up with a click or tap on the reference number on the slide.

<wiz-references>
<wiz-references-popup :open-by-tap-refs="true"></wiz-references-popup>
</wiz-references>

• close-button-icon

Add the path to the button icon image for closing the references pop-up.

<wiz-references>
<wiz-references-popup close-button-icon="./media/images/37022210-5d7b-11ec-b91a-85800ef85ec4.png"></wiz-references-popup>
</wiz-references>

• close-button-position

Select the position of the button icon for closing the references pop-up: rightBottom, center, etc.

<wiz-references>
<wiz-references-popup close-button-position="rightBottom"></wiz-references-popup>
</wiz-references>

• show-overlay

Select true to show the gray background for the slide area outside of the references pop-up.

<wiz-references>
<wiz-references-popup :show-overlay="false"></wiz-references-popup>
</wiz-references>

• close-on-outside-tap

Select true to close the references pop-up when you click or tap the slide area outside of the references pop-up.

<wiz-references>
<wiz-references-popup :close-on-outside-tap="false"></wiz-references-popup>
</wiz-references>

• show-close-button

Select true or false to show or hide the close button icon on the references pop-up.

<wiz-references>
<wiz-references-popup :show-close-button="true"></wiz-references-popup>
</wiz-references>

Properties

wiz-references

The wiz-references component has the following properties:

Property	Type	Default	Description
`componentName`	String	`References`	The component name that appears on the Properties tab in eWizard Editor.
`type`	String	`slide-notes`	The reference numbering order. Shows the reference number relative to the references on a slide. Use `edetailer-notes` to show the reference number relative to the list of all references in the e-Detailer.
`separator`	String	`comma`	The separator between the reference numbers: `comma` or `brackets`. For example: `1,2,3` or `[1][2][3]`.
`rangeDelimiter`	String	`–`	The range separation symbol between the reference numbers: hyphen `‐`, en-dash `–`, or em-dash `—`. For example: `1—3` for the en-dash delimiter.
`mergeNumbers`	Boolean	`true`	A range delimiter for consecutive numbers, for example `1–3`. Select `false` to separate all numbers with commas, for example: `1,2,3`. In case of brackets, no commas are used: `[1][2][3]`.
`numberFormat`	String	`decimal`	The reference symbol format: `decimal`, `upper-alpha`, `lower-alpha`, or `asterisk`.
`visibility`	String	`slideReferences`	Select the `allSlides` to show the references button on all slides. Select `slideReferences` to show the references button only on the slides with the references.

wiz-references-button

The wiz-references-button component has the following properties:

Property	Type	Default	Description
`text`	String	`REFERENCES`	The references button text.
`fontColor`	String	`#ffffff`	The references button color. Use the :Hexcolorcode:Hex: or :RGBA:RGBA: color code.
`imageSrc`	String	N/A	The references button background image. Add the path to the image file. By default, eWizard Editor stores the image in the slide `media/images` directory.

wiz-references-popup

The wiz-references-popup component has the following properties:

Property	Type	Default	Description
`componentName`	String	`References popup`	The component name that appears on the Properties tab in eWizard Editor.
`name`	String	`References`	The references pop-up header that appears above the list of references.
`openByTapRefs`	Boolean	`false`	Select `true` to open the references pop-up with a click or tap on the reference number on the slide.
`header`	String	`References`	The references pop-up header that appears above the list of references.
`displayRefsIdList`	Array	`[]`	Displays the list of references by their IDs.
`scrollerScrollPanelOpts`	Object	`{scrollingX: false, scrollingY: true}`	Scrolls the references list horizontally (X) and vertically (Y).
`scrollerRailOpts`	Object	`{background: "rgba(99, 99, 99, 0.13)"}`	The background color for the scroll rail.
`scrollerBarOpts`	Object	`{background: "rgba(99, 189, 234, 1)"}`	The background color for the scroll bar.

For more information, see Component properties.