Breadcrumbs

Fusion State Management

Fusion has simple state management built in. States are used in several standard components and can be seen in the Activator UI. This document will describe how it works and how it can be used in custom components.

How it is setup

Fusion States are setup with the Redux store built into a Fusion shared package. A state is binary, i.e. it is either on or off.

Stateful mixin

The functionality of states is setup in src/fusion/mixins/stateful.js. In order to make a custom stateful component, this mixin should be used.

import {
  applyMixins,
  Stateful,
} from '../../mixins';

The stateful mixin provides to prop that are possible to set on stateful elements:

  • track-visit - STRING

    • If Veeva monitoring event should be sent when activating state

    • Possible values are ‘on’ (default) and ‘off’

  • track-duration - STRING

    • If Veeva monitoring should track duration of how long state was active

    • Possible values ‘on’ (default) and ‘off’

    • Is used together with track-visit. If both are ‘on’, trackSlideEnter and trackSlideExit events are sent to Veeva

How it is used

When building a stateful component, the stateful mixin provides the necessary methods for handling entering and exiting state.

Defining State Label

The name of a state consist of two elements, the label and the id of the element. Example: adding a standard popup with the id ‘info’ to a document will result in a state ‘Popup-info’.

The default state label (the first part of the state) is ‘UI’, which is defined in the state mixin. When creating a custom stateful component you should define a state label for it. This is done in the constructor of the component by setting this.state. Here is an example take from popup component:

constructor() {
  super();
  this.state = 'Popup';
}

Adding Functionality when Entering and Exiting State

The stateful mixin will check if the component has defined ‘enter’ and ‘exit’ methods and call them when the state is activated and deactivated respectively. Here is an example from the state-container component:

JavaScript
enter() {
  this.addLevel();
}

exit() {
  const transitionDuration = getValueObject(this.duration).num;
  this.removeLevel(transitionDuration);
}

State events

State Event Subscriptions

Apart from the ‘enter’ and ‘exit’ methods described below, the stateful mixin also emits ‘enter’ and ‘exit’ events. This means that it’s possible to listen to those events on the element from other components or custom JavaScript code. Here is an example:

var referencePopup = document.getElementById('Popup-references');

referencePopup.addEventListener('enter', (event) => {
  console.log('Reference popup is open!', event.target);
});

General Event Subscriptions

Fusion triggers an event that can be subscribed to in order to add functionality in custom JavaScript code when any state changes.

The event name is app.currentState and the event object will have information about current state of the app including environment details. Here is a list of details provided in the object:

  • app

    • currentSlide (undefined if not in Veeva or Activator env)

    • currentState (array of currently activated states)

    • environment (e.g. local, Activator, Veeva)

    • registeredComponents (array of web components available)

    • registeredStates (array of states registered on the slide)

  • environmentData

    • binder (null if not in a binder)

    • slide (null if not in Activator or Veeva environment)

  • levels (array of levels opened where each popup would add a level, handles z-index)

  • referencesData (the references object defined in data folder in shared resource)

Example or using the event:

JavaScript
Fusion.subscribe('app.currentState', (data) => {
  console.log('Current state was updated to', data.app.currentState);
});