Pipette Sketcher - Integration Guide

Last Updated: Apr 18, 2016 03:16PM PDT

Summary: This article explains how to integrate Pipette Sketcher with existing web applications.

Covered Topics

Clicking a link will scroll the page to the relevant section.

Embedding in Applications

If you are licensing the Pipette Sketcher API product, Pipette Sketcher can be used with your own web applications. You have the option to host Pipette Sketcher on your own Pipeline Pilot server or you can use the instance that is hosted on Amazon AWS (URL: https://sketch.sciencecloud-services.com/pipettesketcher/)

The Pipette Sketcher is normally embedded within existing web applications within an iframe. This isolates your application and libraries from the Sketcher and its libraries. The wrapping application is responsible for providing the Save and Cancel buttons, with Save doing something with the compound the user has drawn.

Before you can load an existing structure into Pipette Sketcher, the following events need to occur:

  • The iframe needs to be completely loaded.
  • Pipette Sketcher needs to have created the Pipette.App object. This usually happens < 10ms after the iframe is loaded.

Same Origin Policy Issues

If the Pipeline Pilot server is on a different subdomain than your application, (for example, sketcher.acme.com and yourapp.acme.com), you can bypass the same origin policy issue by providing the document.domain for the sketcher via a package global in the Pipeline Pilot Administration Portal.

If Pipette Sketcher is on an entirely different domain, (for example, sketcher.acme.com) and yourapp.mycompany.com, use the postMessage integration approaches.

Integration Options

  Molfile Exchange Same domain required for both application and Sketcher?
Loading Molfile
Option 1: JavaScript from Client Yes
Option 2: Data URI from Server No
Option 3: Messaging from Client No
Retrieving Molfile
Option 1: JavaScript to Cient Yes
Option 2: URI Post to Server Yes
Option 3: Messaging to Client No

Passing in a Starting Compound

Option 1: Pass in a mol File using JavaScript

To set a string containing the v2000 or v3000 mol file, call the method Pipette.App.setMolFile(molfile).

Option 2: Pass in a mol File from a Server Location

To pass in a starting compound from a server, add a datauri parameter to the URL used to launch the sketcher. For example:

http://myserver:9944/pipettesketch/?datauri= /jobs/rheath/72CB875B-SYNC-44D2-AC53-1582C667E7D7/initial.mol

where initial.mol contains a v2000 or v3000 mol file.

Option 3: Pass in a Message with the Starting Structure

Call .postMessage() on the iframe with the starting structure as a v2000 or v3000 mol file:

iframeRef.postMessage(molfileString, '*');

Note: Even if you do not want to pass in a starting structure, you must send an empty message so the sketcher knows to send back messages with structure changes.

iframeRef.postMessage('', '*');

Extracting a Compound when Finished

Use one of the following options to get the structure from the sketcher when the user has finished drawing it.

Option 1: Get mol file in JavaScript

To get a string containing the v3000 mol file, call the method Pipette.App.getMolFile(fn) on the iframe, where fn is a callback function that will be passed the mol file. The callback is called after any pending server side layout is complete.

Option 2: Post mol File to URL

To POST the v3000 mol file to server, call the method Pipette.App.saveStructureToUri(url, callbackFn).

The URL must be relative to the current server, for example /myapp/molfile/123456.

Once the URL has been called and a response is received from the server, the callback() function is called.

Option 3: Listen to Messages with the Structure Updates

If the sketcher was initialized using the postMethod approach, then each time the structure is modified, a message with the v3000 mol file will be sent back to the embedding application. This can be listened to as follows:

window.addEventListener("message", function(event) {
    if (event.origin === "http://sketcher.acme.com") {
        var molfile = event.data;
		//TODO – your application logic here
}, false);


Users can be required to enter a reaction by setting the URL Chemistry parameter. All outputs will be retrieved in RXN format.


Hiding Username

If you do not want the username to appear at the bottom of the embedded sketcher (clicking this allows the user to authenticate as a different user), set the URL parameter as follows:


Message when No Structure is Shown

You can control the message shown to the user when no compound is drawn, using the emptymessage URL parameter:



Pipette Sketcher Overview

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found