Web component Documentation

Installation

To install the package, use the following command:

npm i @dystematicdev/embed-app

Alternatively, you can import the UMD/ESM bundle directly as a script tag.

Usage

To use the package, add the following code to your HTML file:

<dystematic-embed-app src="https://supplychain.dystematic.com"></dystematic-embed-app>

Attributes

The following attributes are available:

src

This attribute specifies the URL of the Dystematic platform to load.

token

This attribute specifies a valid authentication token to use when loading the Dystematic platform. If not provided, the platform will attempt to authenticate the user using a stored token or prompt the user to log in.

options

This attribute specifies a json configuration to use when loading the Dystematic platform.

indexable

This attribute can be set to "true". This way, the internal navigation of the Dystematic platform will be persisted in a query parameter called dyst. This makes the current URL shareable for others and indexable by web crawlers.

Events

The following events are available:

state-change

This event is triggered when the Dystematic platform changes state. The event's detail property contains the platform's event type and the associated data.

Examples

Angular Integration

To see the attributes and events in action, please refer to the Angular web app demo available in the examples/angular-demo folder.