Skip to content

App Developers: Adding Automation to Web Pages

Kristina Hanspers edited this page Aug 18, 2017 · 1 revision

It is possible to add Cytoscape automation functionality to any web page, to be viewed in CyBrowser. For example, you could create a web page listing a set of networks, with buttons for opening each network in Cytoscape. To keep the same web page functional outside of CyBrowser, automation (buttons and links) can be hidden in non-CyBrowser browsers using a combination of javascript and css. This is accomplished by enclosing the automation code in a div, which in turn is controlled by javascript that hides the div if the html is opened outside of CyBrowser.

To include a button or link, add it to a div of class "cybrowser". The example below adds a button that imports a specific network, using the "network load url" CyCommand:

<pre><code data-trim>
<div class="cybrowser">
<input type="button" class="btn btn-primary" onclick="cybrowser.executeCyCommand('network load url url=');" value="Load network in Cytoscape">

To hide the "cybrowser" div, and thus the button, outside of CyBrowser, the following javascript should be added to web page:

<pre><code data-trim>
      window.onload = function() {
				var divs = document.getElementsByClassName("cybrowser")
				for (var i=0;i </script></p>