Embeding Web Content (iFrame)

BioT portals allow the developer to embed their own content inside specific sections.
This feature can be used to:

Show an external application/dashboard inside the BioT portal.
Have the ability to invoke predefined actions in the BioT application from within the embedded content.

The embedded component can be put in a new tab in the main screen, or be part of the “Expand View” of a specific entity.

Embedding main tab example:

Embedding expanded tab under the patient example:

Component Creation

The embedded web component is expected to be a "browsing context" wrapped by an iframe HTML tag.
You can host the context anywhere, and specify a direct link to it in the BioT portal builder.

Communication Between BioT and the Component

All messages sent between BioT and the component will follow this basic structure:

{
  name: UNIQUE_UPPERCASE_STRING;
  payload:{ An object with the required payload };
}

BioT ➡ Component Messages

BioT can send the following messages to the component.

Action (Message) name	Payload	Comments
BIOT_TOKEN	{ token: string }	This `token` is a refresh token of the currently logged-in user in BioT. Use it with the login with refresh token API, to log in and receive a valid access token from BioT.
ENTITY_DATA	{ entityType: string, entity: <entity_object> }	Only sent in expand view. The `entityType` is the expanded entity’s type (“patient”, “device”, etc.) Possible values: manufacturer-user organization organization-user caregiver patient device usage-session generic-entity command device-alert patient-alert The `entity` is the current-expended item data in the BioT portal

Component Messages ➡ BioT

Action (Message) name	Payload	Comments
ON_IFRAME_LOADED	null	The component uses this message to let the parent (BioT portal) know that it has finished loading. Once this is called, the BioT portal will send the token and the entity data back to the component
HANDLE_EXPAND_ITEM	{ action: { entityToExpand:<entity_object>, entityType: string, selectedTabKey?: string, selectedTabAdditionalProps?: any, } }	See detailed explanation below
ON_RELOAD_ENTITY	NULL	The component uses this message after an update to the entity data is made, in order to make sure the overview (container) is updated as well

Using the `HANDLE_EXPAND_ITEM` Message

The HANDLE_EXPAND_ITEM message pushes a new expand item to the expand stack, either making the expand view display that item, or changing the active tab.
The message structure is as follows:

entityType: is the expanded entity’s type (“patient”, “device”, ect.)
entityToExpand: is the actual JSON object entity data to display in the tab. This is usually obtained from the appropriate GET API call. For example, to display a patient's data, you will pass here the response from the GET patient API call.
selectedTabKey: is used to select the tab in the newly expanded item. At the moment, this is only used with entityType='patient' to expand directly into the overview or measurement sections. To select the overview tab, pass overview as the value. To select the observation tab, pass measurements as the value.

selectedTabAdditionalProps: are additional properties that the selected tab can accept. At the moment, this parameter only applies to the measurements tab.
The value of this property is a JS object with the following structure:

{
  measurementOption: 'LIVE' | 'HISTORY', //selects the live or history sub tab
  graphRange?:  {  								
  		startDate: "2022-11-21T14:39:12Z" | null; //ISO 8601 formatted date
  		view: '1s' | '5s' | '15s' | '30s' | '1m' | '5m' | '15m' | '30m' | '1h' | '2h' | '6h' | '12h' | '1d' | '7d' | '1M' | '3M' | '6M' |'1y' | '2y' | '5y' | null; //The time inteval for the graph
	};
}

Component Creation

Communication Between BioT and the Component

BioT ➡ Component Messages

Using the HANDLE_EXPAND_ITEM Message

Common message flow example

Using the `HANDLE_EXPAND_ITEM` Message