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.

Component Messages ➡ BioT

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:
  JavaScript

  {
    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
  	};
  }
  

Common message flow example