SINCE 3.4

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

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:

<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	false - object properties will not be shown when clicked or hoovered true - a simplified object properties view will be shown
Toolbar	true	true - a viewer toolbar will be shown false - a viewer toolbar will not be shown
ToolbarStyle	simple	simple - a simple zoom toolbar will be shown, most suitable for anonymous access full - a standard toolbar will be shown, that is most suitable for non-anonymous users and is dependent on actions performed (select, draw, redline, print)
ViewerSidePanel	false	true - a side panel used for filter legends will be included in the viewer. This panel contains listing of all filters in the system. Filter availability cannot be controlled on per user basis. false - a side panel will not be shown. Presentation can still be applied through client side API.

Sample URL with requried parameters:

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:

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

//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

Integration with 3rd party websites