Standard Activator Components
Components are the tools the Activator uses to create content on slides. They can be used with any JavaScript library or framework that works with HTML and will work across modern browsers.
The most basic components users will employ in their projects are -
* Text components
* Image components and
* Group containers.
The components described below are the standard components that are included in all shared resources delivered by Anthill.
Table of Contents
How to use components
Every Component has a main menu that, when selected, slides out from the right-hand side and contains the Component ID name, various settings for the component and a delete button.
Components may hide behind other components. Move it in front using the “Depth” buttons (up and down) in the main menu.
Be mindful of the grey components list on the top left-hand side of the screen. Here it will display breadcrumbs for the currently selected component highlighted by a green box.
It is always a good idea to give your components recognizable names as you are creating them.
Components can create states which basically are different moments in a slide and a slide can have several states depending on actions taken by the user.
For developers
You can read more about the shared resource in our Activator - For Content Developers section.
All the source code is available in the shared resource. Here you can see how a component works, you can make your own popup which works differently, or you can copy one or extend from it. It's all web components, where we import content from Lit-Element: https://lit-element.polymer-project.org/
The Activator, which is a content design tool, does not itself track any data or insert tracking functionality in the HTML that is created. However, you can insert tracking code using the default components we offer and in custom-built components by using Call ClickStream via Vault’s Javascript API. We refer you to use Veeva’s own documentation on how to implement this in your eDetailers
Custom components should be placed in the src/components/slide path in the shared resource
Do NOT make any changes to the files in the ‘fusion’ folder. This will make the auto upgrade of sh fail!
In the shared resources you can control which components are available by editing the file “fusion.json” which is the main config file for the build. Documentation can be found under “shared-->README.md”
There are three labels available for components: “standard” / “custom” / “brand”, and this is can be specified in the component’s index.js file under “componentScope”. When creating new custom components or brand components, we advise to labels them correctly to make it easier for the end users to distinguish them from the standard components and to filter according to type.
As of the newest updates to our own components, a lot of the options are inherited from the parent component:
E.g. Content Area extends Group and the Group specifies the scope. If needed the scope can be specified also in the child component otherwise it will be the same as in the parent component.
Overlay components
What it is:
An example of an overlay could be an info tab which slides out when a selected piece of text or picture is clicked. They are triggered by programming an interaction using the “add interaction” option.
Overlays add a state to the slide and as such will also create a new page when a PDF report is generated.
All the overlays, except “InfoTab” contain 3 elements: The popup itself, it’s “Backdrop”, which can be customized or deleted, and the popups “Custom Overlay” where you will place text and pictures.
OBS: For popups, we recommend to always place them in the root document and not inside a state container. Also be aware of popups inside of popups (nesting). Custom popups can be built to manipulate states in case the parent is closed.
The same procedure described in the example below are applicable to all the Overlay Components, but not limiting the function to only that example.
Arrow popup
What it does:
Creates a popup with selectable placement of pointing arrow
Prerequisites:
This component is disabled by default and can be enabled in the fusion.js file in the shared resource
This component is activated by programming an action by using the “Add interaction” function.
EXAMPLE: How to add a button and trigger an Arrow Popup overlay to a slide
Step 1: Select button from the Components list:
Step 2: Write a text for the button:
Step 3: Give the button an ID name that is recognizable:
Step 4: Add a Popup Arrow from the Components list:
OBS: Creating a popup will initiate a new state in the Slide.
Step 5: Highlight the popup and position it in the desired place and give it an ID name.
Step 6: Select the “Popup Arrow” and add a text field to it or picture. The popup will act as a group container and text and picture will move with the arrow if repositioned. Both text and picture can have a unique ID name if you wish.
Create an interaction between the button and the Popup Arrow.
Step 7: Select the button and click “Add Interaction” in the menu and select “Create Action”
Step 8: Give the interaction an ID name
Step 9: Dictate the interaction. In this case if you click on the ClickMeButton the action (do) will toggle the state to display the ArrowPopup
Save your selection and go to “Preview Mode”. Test the interaction by clicking the “Click Me First” button and the popup should appear on the screen.
To delete a popup, select it or the state and delete it using the menu on the right-hand side.
You can program these actions on most items in the slide, not only limiting them to a “Button”.
Infotab
What it does: Creates a sliding container intended for placement at any edge of the content
Prerequisites:
This component is disabled by default and can be enabled in the fusion.js file in the shared resource
Example: Creating a sliding Infotab container
Step 1: Select the “Infotab” component from the components list
This component has a sliding animation. In order to trigger it when clicking on the tab, make sure to place it near the edge of the screen, so it is hidden off-screen when not in use:
The edge of the screen is to the right in the example above. This is activated state of the infotab.
The untriggered state of the tab will look like this:
Popup
What it does:
Creates a pop-up on the screen when an action is triggered
Prerequisites:
This component is activated by programming an action by using the “Add interaction” function.
Example: Creating a basic Popup
Step 1: Select the “Popup” component from the components list.
Step 2: Fill the Popup container with text or picture and add an interaction to it. See “Arrow Popup” for more details on how to create an interaction.
Reference popup
What it does:
Creates a popup component for showing references
Prerequisites:
To display content in the reference popup, the file “reference.json” must be populated. There currently is no user interface for this function.
This component is activated by programming an action by using the “Add interaction” function.
Example: Creating a reference Popup
Step 1: Select the “Reference popup” from the components list. This popup will display the text from the reference.json file in the shared resource.
See “Arrow Popup” for details on how to create an interaction.
Media components
What is it:
Media components are used to insert video, sound, images and external document resources in the slide.
Audio Player
What it does:
Adds a container for audio files handling playback and state
Prerequisites:
This component is disabled by default and can be enabled in the fusion.js file in the shared resource
Sound file must be available in Local Assets, Shared Assets, in Vault or can be added by the user.
Audio (e.i. mp3): 2Mb
Example: How to insert a sound file in a slide
Step 1: Select the “Audio Player” component from the components list.
Step 2: With the component highlighted on the slide, chose “Change Audio” from the main menu.
Step 3: Select an audio file from the available assets. You can also upload your own file (drag & drop).
Go to preview mode, click the play button and the sample file will play.
Image
What it does:
Adds a container for showing images
Prerequisites:
Images must be available in Local Assets, Shared Assets or in Vault.
File size and type recommendation: Image (e.i. png, jpeg, jpg, svg, webP): 2Mb
Example: How to insert an image in a slide
Step 1: Select the “Image” component from the Component list
Step 2: With the component highlighted on the slide, chose “Change Image” from the main menu.
Step 3: Select an image from your available assets. You can also upload your own image (drag & drop).
Video Player
What it does: Adds a container for video files handling playback and states
Prerequisites:
Video files must be available in the Local Assets, Shared Assets or in Vault.
File size and type recommendation: Video (e.i. avi, mp4, mpeg, mov): 200Mb
Example: How to insert a video:
Step 1: Select the “Video” component from the Component list
Step 2: With the component highlighted on the slide, chose “Change Video” from the main menu.
Step 3: Select a video from your available assets. You can also upload your own video by dragging and dropping it. Hereafter decide if it should be added as a local asset, a shared asset or a Vault asset.
iFrame Viewer
What it does:
Inserts a dynamic iFrame component into the slide which enables the creator to show documents and external URL/webpages in the slide.
Prerequisites:
Note: Not all external websites allow this type of linking
The iRep end-user must be online on their device to view the external link
Example: How to insert an external webpage to a slide
Step 1: Select the “iFrame Viewer” from the components list
Step 2: Type the URL of the website you wish to display in the link section. In this example “https://demo.activator.cloud” was used.
Interaction components
What it is:
Interaction components are used whenever the user interacts with the presentation and will trigger an event when activated.
Button
What it does:
Inserts a simple button for adding interactions on the slide.
Prerequisites:
An action will have to be programmed in order to trigger an event.
Example: How to add a button which takes the user to the previous slide
Step 1: Select the “Button” component from the components list
Step 2: Select the Button on the slide, click “Add Interaction” in the main menu and select “Create Action”
Step 3: Create the following action: (If) the user clicks (on) button then go (do) to the previous slide in the storyboard.
Paint
What it does:
Adds a four-color paint palette with four line weights and a reset button to the slide.
Prerequisites:
This component is disabled by default and can be enabled in the fusion.js file in the shared resource.
Example: How to add a color palette to a slide
Step 1: Select the “Paint” component from the components list.
A paint palette will now appear on the slide.
Step 2: Go to preview mode, select a color and weight to draw in freehand. The eraser icon will reset the drawing.
Side Menu
What it does:
Adds a side navigation menu component with 3 default buttons on the side of the slide. Each button is an individual component.
Prerequisites:
An action will have to be programmed for each individual button order to trigger an event.
Example: Create a side menu and have one of the buttons trigger a pop-up
Step 1: Select the “Side Menu Button” from the components list.
Step 2: Select the “Popup” component from the components list. Style it as desired.
Step 3: Click on the active state to unselect it.
Step 4: Go back to the side menu and select a side menu button you want to use to activate the popup state
Step 5: With the button selected, click on “Add interaction from the toolbox on the right-hand side and program the action.
Step 6: Input the commands to trigger the popup when the button is clicked:
Continue by adding interactions for the rest of the buttons in the menu.
Slider
What it does: Inserts a slider on page
Prerequisites:
Requires a programmer to trigger events with data using ClickStream.
Example: How to add a slider
Step 1: Select the “Slider” component from the components list.
This will insert a slider on the page
FOR DEVELOPERS
This component needs to be setup in the code to trigger events with data.
Steps for test:
1 - add fusion-slider component
2 - add fusion-text component
3 - in Chrome console execute:
const slider = document.querySelector('fusion-slider');
const outputtext = document.querySelector('fusion-text');
function updateValue(e) { outputtext.textContent = e.detail };
slider.addEventListener('slider-change', e => updateValue(e));
4 - Start drag slider and you will see that the text changes according to what the slider indicates
State Container
What it does: The State Container is a basic container for adding custom UI states (active/inactive) which can be used to trigger different events
Prerequisites:
An action will have to be programmed in order to trigger an event.
Example: How to display an image in a state container by clicking a button.
Step 1: Select the “State Container” component from the components list.
Step 2: With the state container active, select the “Image” component from the components list to place an image inside the state container.
Step 3: Unselect the state container and select the “Button” component from the components list to place a button outside the state container on the slide.
Step 4: With the button selected, click on “Add interaction from the toolbox on the right-hand side and program the action.
Step 5: Input the commands to trigger the state container when the button is clicked:
Top Menu
What it does:
Component to enable navigation. Creates a slide navigation menu based on the available slides in the binder
Prerequisites:
This component is disabled by default and can be enabled in the fusion.js file in the shared resource.
Example: TBA
Bottom Menu
What it does:
Creates a slide navigation menu.
Prerequisites:
This menu is configured from the shared resource menu
OBS: Consider using fragments instead of the bottom menu component as fragments are more flexible
To use this component slides must be inside binders created in the Activator. Binders created in Vault will not have the correct shared resource connection if you are localizing binders/slides/shared resources by taking copies of content.
Example: How to configure navigation for binders and slides
Select the “Bottom Menu” component from the component list.
This will place a menu on your slide. Unlike other menu components, this menu must be configured from the “Shared Resources” menu.
Enter preview mode on the slide, scroll down and click on the “Shared Resource” link
On the Shared Resource page, scroll down a bit until the menu configuration section appears.
The first option, horizontally, is the button, second drop-down option is the binder and third drop-down option is the slide within that binder. You can rename the button and add more by clicking “+Add new item”
Click “Save Updates” and “Publish” before going back to the slide to see the changes.
OBS: if you are localizing a presentation and want to use the bottom menu component, it is important that the binder you place your slides in is created in the Anthill Activator in order to establish the correct relationship to the shared resource.
In the Activator, go to the Home tab and click "New Binder"
Fill in the meta data for the binder. Once everything is selected, you will get a selection of matching shared resources.
Click "Create" and start adding slides/documents to your binder:
The bottom menu will now list the binders in the drop down menu which are connected to the shared resource.
Data components
What it is:
These components are used to collect or display data. Data collection and other advanced features are not included by default and must be custom coded for each specific purpose.
Chart
What it does:
Activator Charts are fully configurable and accept any number of data series. Once placed on the slide, data can be filled in using Chart Data from the Components list.
There is a range of types to choose between, such as bar charts, donut charts and scatter charts, just to mention a few.
Charts is a heavy component and is deactivated in the shared resource as default.
Prerequisites:
This component is disabled by default and can be enabled in the fusion.js file in the shared resource
EXAMPLE: How to add a bar chart and fill it with two data sets
Step 1: Select the “Chart” component from Component list
This will insert the chart on the page
Step 2: With the chart highlighted, select “Add Component” and select “Chart Data” from the components list.
Step 3: This is the first data set. Insert the comma separated values in the “values” box and select a chart color.
Step 4: With the chart highlighted, click “Add Component” again from the side menu and select “Chart Data” for the second data set which will appear in the same chart.
Submit Email
OBS: DEPRECATED COMPONENT. To be out-phased
What it does:
Form for submitting an email address to collected data. A form in the Activator, used as a container and can contain a “submit email” form, “text entry” form, a “button” and can be used for interactions.
Prerequisites:
This component is disabled by default and can be enabled in the fusion.js file in the shared resource.
Should be programmed in order to work. We recommend creating a new component as this version will be deprecated at some point.
Example: How to add an email form to a slide
Select the “Submit Email” component from the components list.
Select the type of submit form. The options are “text”, “password”, “number” and “email”.
Table
What it does:
Tables are used to display information in tabular form, with rows and/or columns named. Tables consists of the table and table cells
Prerequisites:
None
Example: How to add a table to a slide
Select the “Table” component from the components list.
This will place a table with 1 top row, 2 rows and 3 columns on the slide. You can add or subtract the number of rows and columns in the main menu.
Click on one of the cells in the table and you will now see you are in a cell inside of the table – note the slight yellow outline indicating highlighting the individual cell:
You can now style the table and define the data inside the cell’s text fields as needed.
Form
What it does:
This is a container for form elements. Available items to place: Submit email, text input and button.
Prerequisites:
This component is disabled by default and can be enabled in the fusion.js file in the shared resource
We recommend using Group Container instead as this container is limited to submit email, text input and button
Example:
Step 1: Select the “Form” component from the component list
Step 2: In this form (container) you can place the components “Submit email”, “Text Input” and “button”
Text Input- TBA
What it does:
Prerequisites:
Example:
UI components
What it is: TBA
Content Area - TBA
What it does:
Prerequisites:
Example:
Group Container
What it does: Groups components and other elements. Can be used to move, copy and paste elements. This is the Activators main group component which also can have actions associated to it.
Most slides are composed of several group containers in which text, picture or any other components are placed. They are convenient to move around and easy to copy if the content needs to be replicated on other slides.
Prerequisites: None
Example: How to insert a group container to a slide.
Step1: Select the “Group Container” from the components list. Alternatively, select the “Add Group” button from the right tool bar.
This will create a container on the slide. You can put any other component inside this group container and assign actions to it. It is also possible to nest other group containers inside a group container.
Inline Slideshow
What it does: Creates a container for a slideshow.
Prerequisites: None
Example: How to create a slideshow with page indicators.
Step 1: Select the “Inline Slideshow” component from the components list.
This will automatically create a State Container inside the inline slideshow.
Step 2: Highlight the State Container and add a picture, for example:
Step 3: Select the Inline Slideshow again and add” State Container” and “Indicators” from the Components list. This will create the second state and a visual guide to what slide you are on.
Step 4: Add another picture to the second State Container or any other Component.
You can add as many State Containers to the Slideshow as you wish. To test, go to preview mode, click and drag your mouse to the left to start the slideshow.
Line
What it does: Inserts a straight line in the slide
Prerequisites: None
Example: How to insert a line
Step 1: Select the “Line” component from the Component list
Step 2: Place it in the desired position in the slide. Drag the ends to resize as needed.
Use the main menu to alter the appearance of the line
List and List Item
What it does: Inserts a component for showing lists
Prerequisites: None
Example: How to make a list
Step 1: Select the “List” component from the Component list
Step 2: Double click on the already present word “text” to start adding your own text. Pressing “enter” will create a new line.
Use the main menu to alter the line height or letter spacing and use the text editor bubble above the text for text formatting options.
Presentation
What it does: Inserts a slide within the slide as a state and presents them sequentially. You can add multiple slides in the Presentation container
Prerequisites: None
Example: How to insert slides into the presentation container
Step 1: Select the “Presentation” component from the components list.
Step 2: With the Presentation container selected, choose “Add Component” again. This time the only component available is “Slide”.
You can add as many slides as needed. Each slide within the Presentation component gets a separate state which can be navigated to using “Add interaction”.
Placeholder - TBA
What it does:
Prerequisites:
Example:
Shape
What it does: Inserts a component for showing shapes.
Prerequisites: None.
Example: How to insert a shape container into a slide.
Step1: Select the “Shape” component from the Component list.
Step 2: Select the “Change Shape” option from the main menu.
Select the desired shape from the list.
Slide Fragment
What it does: Component for inserting fragments.
A fragment is a piece of content, such as a header, footer or menu, which can be used on several slides and is centrally edited in the Fragment Editor in the Activator. When you change the look and design of the fragment, it will change across all the slides it is being used on.
Prerequisites:
There must be one or more fragments included in the shared resource in order to use this component.
A developer can add new fragments in the fragments folder under shared-->fragments. There currently is no UI option for this.
If you wish to edit a slide fragment, go to the shared resource and double click on the fragment. This will open the fragment editor in the Activator.
Example: How to insert a placeholder for a slide fragment
Step 1: Select the “Slide Fragment” component from the Component list.
Step 2: With the placeholder selected, go to “Change Fragment” in the main menu.
Step 3: Select the available fragment(s) from the list to insert it on your slide.
Sortable List
What it does: Text component which enables the user to drag and rearrange/sort the order of the list
Prerequisites:
This component is disabled by default and can be enabled in the fusion.js file in the shared resource.
Example: How to insert a sortable list and rearrange the items according to importance
Step 1: Select the “Sortable list” component from the components list
Step 2: This will create a sortable list container and a sortable list item in which you can place your text which then can be dragged and rearranged according to importance, as an example.
Tab Group
What it does: Inserts a tab group in which you can add multiple tab group containers. Each container creates a new state.
Prerequisites: None.
Example: How to insert a tab group with 2 tabs
Step 1: Select the “Tab Group” component from the components list.
Step 2: This will add one tab as default. Add another tab by using the Tab Group main menu.
Step 3: Now that you have two tabs, these act as new states. Choose the states by selecting them from the breadcrumb menu above the slide. Add any other components to these states. The example below has text added.
To test, go to preview mode and click on the tab to see the content added to them.
Text
What it does: Inserts a component for showing text data
Prerequisites: None
Example: How to insert text in a slide
Chose the “Text Input” component from the Component list. Alternatively, select the “Add Text” button in the right tool bar.
A text window will appear on the slide. Double click it to add your own text.
A styling bubble menu will appear, and you can further customize the text by using the main menu.