App Developers: Adding Automation to Web Pages

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=http://nrnb.org/data/2017_keserci_biorxiv.xgmml');" value="Load network in Cytoscape">
</div>
</code></pre>

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>
<script>
      window.onload = function() {
		 	 if(!window.navigator.userAgent.includes('CyBrowser')){
				var divs = document.getElementsByClassName("cybrowser")
				for (var i=0;i </script></p>
</code></pre>