Skip to main content

SDK Changes

SDK has been stabilized and is no longer in beta:​

  • SDK has new submodules added. These submodules are:
  • State getters, setters and getters have been changed: Because of the introduction of the state submodule to the getters, setters and events have been moved to the state submodule namespace.

State submodule changes​

In addition to moving into the state submodule namespace, the structure of getters, setters and events has been changed. Please refer to the migration guide below:


Only a "contract" example is given below, but you can apply it to any other module.

  • All module names have been "singularized" meaning, for example, "contracts" became "contract".
  • Getters, setters and events are now under the ".state" namespace.
  • All "contract", "basket" etc. getters, setters and events have been changed.
// ## getters
// before version 1.0
window.hapi.contracts.getters.getContracts
// after version 1.0
// contracts changed to singular contract
// getter is available under ".state" namespace
// getters.getSomething becomes just `something.value`
window.hapi.contract.state.contracts.value

// ## setters
// before version 1.0
window.hapi.contracts.setters.setProducts
// after version 1.0
// contracts changed to singular contract
// events.setSomething becomes just "something = VALUEHERE"
// setter is available under ".state" namespace
// just a regular variable assignment instead of a setter function
const value: any = []
window.hapi.contract.state.contracts = value

// ## events
// before version 1.0
const callbackFunction = (value: any) => {}
window.hapi.contracts.events.onContractsChanged(callbackFunction)
// after version 1.0
// contracts changed to singular contract
// event is available under ".state" namespace
// events.onContractsChanged becomes variable.onChange
const callbackFunction = (value: any) => {}
window.hapi.contract.state.contracts.onChange(callbackFunction)

Namespace changes​

In addition to "state" changes, new namespaces have been introduced to SDK. Please note that not all modules have "api", "service" and "validation" submodules. These available modules are documented under Namespaces and can also be checked in detail on Playground:

  • moduleName.state
  • moduleName.api
  • moduleName.service
  • moduleName.validation

The instanceName concept has been removed.​

You might ask what is the "instanceName" concept as it is no longer documented. Internally all widgets have (still have) a unique name and these names are used to relay information to each instance of the widget correctly. You might, for example, have the "he-jobposting-contracts-contract-id" widget being displayed in a loop. In this case, each widget instance name gets suffixed by the count they are included in a page (starting from 0). An example name becomes:

he-jobposting-contracts-contract-id (the very first one)
he-jobposting-contracts-contract-id-0 (second one)
he-jobposting-contracts-contract-id-1 (second one)
... etc

Previous to version 1.0, Each widget had its own state; thus, the "state getters, setters and events" required you to specify from which of these "widget instances" you want to get data, set data, and listen to changes on the data.


Previous to version 1.0, Each widget had its own state; thus, the "state getters, setters and events" required you to specify from which of these "widget instances" you want to get data, set data, and listen to changes on the data.


Previous to version 1.0, Each widget had its own state; thus, the "state getters, setters and events" required you to specify from which of these "widget instances" you want to get data, set data, and listen to changes on the data.


So the following have been removed (and also, module names have been singularized):

// ## getters
// before version 1.0
// "he-app" referring to the "instanceName" of the widget
window.hapi.contracts.getters.getContracts("he-app")
// after version 1.0
// no "instanceName" required and variable is accessed through ".value"
window.hapi.contract.state.contracts.value

// ## setters
// before version 1.0
const themeObject = {}
// "*" referring to "send this change to all available instanceNames"
window.hapi.theming.setters.setTheme(themeObject, "*")
// after version 1.0
// no "instanceName" is required; and it is just a variable assignment.
const themeObject = {}
window.hapi.theming.state.theme = themeObject

// ## events
// before version 1.0
const callbackFunction = (value: any) => {}
// "*" referring to "listen to this change from all available instanceNames"
window.hapi.contracts.events.onContractsChanged(callbackFunction, "*")
// or
// "he-app" referring to the "instanceName" of the widget
window.hapi.contracts.events.onContractsChanged(callbackFunction, "*")
// after version 1.0
// no "instanceName" is required and event listener is accessed through ".onChange"
const callbackFunction = (value: any) => {}
window.hapi.contract.state.contracts.onChange(callbackFunction)