| Table of Contents |
|---|
| Status | ||||
|---|---|---|---|---|
|
Introduction
HDC can be integrated with 3rd party websites and provide both static and interactive view on the data.
A static images can be delivered through a dedicated API interface that takes object information and other configuration parameters. To find out more please refer to HOPAGetView4Object manual.
For interactive integrations please start with reviewing a sample integration page provided for each application
| Code Block |
|---|
https://myserver.bim.cloud/client/messageTester.html |
Embedding
HDC Application can be loaded in anonymous mode (see Anonymous User).
To load the application, design an iframe location on your webpage that can look like this:
| Code Block |
|---|
<div> <iframe width="800px" height="800px" class="hdcFrame"></iframe> </div> |
Application Parameters
To load the application in a proper state, several important URL parameters must be used.
If the parameters are not provided, the application will load in it's normal state.
Parameter | Recommended Value for Embedded scenario | Possible Values |
|---|---|---|
Viewport | EmbeddedViewer | EmbededViewer |
ViewerProperties | false |
|
Toolbar | true |
|
ToolbarStyle | simple |
|
ViewerSidePanel | false |
|
Sample URL with requried parameters:
| Code Block |
|---|
var hdcUrl = hdcHost + '/AnonClient/?viewport=EmbeddedViewer&viewerProperties=true&toolbar=true&toolbarStyle=simple&ViewerSidePanel=false'; |
Communication
Direct communication with an application running within an iframe is not allowed. To achieve a bi-directional communication HDC is using a Window.postMessage() mechanism (Link)
All functions exposed by Embedded Viewer API are available through this method as well.
Please check the source of a sample page messageTester.html for samples on how to call and receive notifications from HDC Embedded application.
Sending requests to Embedded application
Sample request to show specific object:
| Code Block | ||
|---|---|---|
| ||
function showObject() {
//get frame where the HDC application was loaded
var hdcFrame = document.querySelector('.hdcFrame');
var hdcWindow = hdcFrame.contentWindow;
var targetOrigin = hdcUrl;
/*Message looks similar for each method.
* operation - corresponds to function from Embedded API
* remaining parameters should be the same, as parameters for Embedded API function*/
//get values from text boxes. If the domain ID is given, an external ID values can be given.
var objectId = document.getElementById("Hdc_objectId").value;
var objectClass = document.getElementById("Hdc_objectClass").value;
var domain = document.getElementById("Hdc_domain").value;
//prepare a simple message object
var message = {
operation: 'showObject',
objectId: objectId,
classId: objectClass
};
if (domain !== "") {
message.domainId = domain;
}
//send the request to an iframe:
hdcWindow.postMessage(message, targetOrigin);
}; |
Receiving requests from an Embedded application
| Code Block | ||
|---|---|---|
| ||
//Subscribe to message events
window.onload = function () {
window.addEventListener("message", this.receiveMessage);
};
/*Sample code for receiving messages*/
function receiveMessage(event) {
/*
event.data - message data (JSON or text)
event.origin - The origin of the window that sent the message (url)
window.origin - our origin (url)
event.source - A reference to the window object that sent the message;
*/
if (event.origin !== hdcHost) {
console.warn("Unauthorised message!");
} else {
console.log('Authorized message received!');
this.processEvent(event.data);
}
};
|
Events
Events available through Message controller:
*.*.user.spot.select
*.*.user.spot.update
ui.system.ready
ui.docview.document.load
ui.system.messageapi.ready