Skip to main content

State Submodule

The state submodule stores HAPI Elements' application state and you have first-level access to the application state. The state is then sent to the widgets, and any state mutation happening inside a widget, is then sent back to the state submodule, so the state is always in-sync in a central place.


State module provides ability to:

  • Read data
  • Write data
  • Listen to changes on the data

Reading the data​

You can read the data by doing: window.MODULENAME.state.VARIABLENAME.value. Please note the .value part as the VARIABLENAME is an object with .value property to access it's value.

Loading...

Setting the data​

To set the data, you simply assign the value as such: window.MODULENAME.state.VARIABLENAME = YOURVALUE. Please note that the setter does not need .value as the getter does; you can set the value as if you are assigning to a Javascript variable.


note

Please note that some of the state variables are "computed" getters, meaning that they don't have a setter. In the case you try to set them, an error will be thrown.

info

Please note that, you cannot assign to properties of an object, you need to overwrite the entire object.

This will not work:

window.hapi.orderJourney.state.utmCodesStepData.settings.utmCampaign = "someCampaign"

This will work:

window.hapi.orderJourney.state.utmCodesStepData = {
    ...window.hapi.orderJourney.state.utmCodesStepData.value, //note the .value accessor
    settings: {
        ...window.hapi.orderJourney.state.utmCodesStepData.value.settings, //note the .value accessor
        utmCampaign: "someCampaign"
    }
}

Alternatively, you can use the window.hapiUtils.mergeDeepOverwriteArrays utils for a simpler deep merge:

window.hapi.orderJourney.state.utmCodesStepData = 
    window.hapiUtils.mergeDeepOverwriteArrays(window.hapi.orderJourney.state.utmCodesStepData.value, {
        settings: {
            utmCampaign: "someCampaign"
        }
    })

Loading...

Listening to changes​

Loading...

Using TypeScript types package for State Submodule​

We recommend setting up a global object to use window.hapi first by following instructions here.


To use the types for a variable of a state submodule, you would need to use HapiStateValueWithListener generic type with the type argument of the variable. Here is an example on how that can be accomplished:

  1. Open Playground State Submodule of a module here
  2. On the very first few lines (most of the time second line), there is an import to the state.types.ts, jump to that file by CTRL (or CMD on Mac) + Click
  3. Search by CTRL (or CMD on Mac) + F and type the name of the variable stepsEnabled and you will find it in the respective type of the state submodule, in this case, OrderJourneyState and the type is OrderJourneyStepKey[]
  4. Pass the type to the generic type as follows:
import {HapiStateValueWithListener, OrderJourneyStepKey} from "@vonq/hapi-elements-types"

const stepsEnabledValueAndListeners = window.hapi.orderJourney.state.stepsEnabled as HapiStateValueWithListener<OrderJourneyStepKey[]>
const stepsEnabledValue = stepsEnabledValueAndListeners.value
const stepsEnabledOnChangeListener = stepsEnabledValueAndListeners.onChange

// to quickly grab the value, you can do
const stepsEnabled = (window.hapi.orderJourney.state.stepsEnabled as HapiStateValueWithListener<OrderJourneyStepKey[]>).value //note the .value

For list of available states, check modules in the Playground.