CINXE.COM

<!DOCTYPE html> <html class="client-nojs" lang="en" dir="ltr"> <head> <meta charset="UTF-8"/> <title>NCBO Widgets - NCBO Wiki</title> <script>document.documentElement.className="client-js";RLCONF={"wgBreakFrames":!1,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"ca3b9eaf9625e71a76a800ff","wgCSPNonce":!1,"wgCanonicalNamespace":"","wgCanonicalSpecialPageName":!1,"wgNamespaceNumber":0,"wgPageName":"NCBO_Widgets","wgTitle":"NCBO Widgets","wgCurRevisionId":12809,"wgRevisionId":12809,"wgArticleId":2592,"wgIsArticle":!0,"wgIsRedirect":!1,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":[],"wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"NCBO_Widgets","wgRelevantArticleId":2592,"wgIsProbablyEditable":!1,"wgRelevantPageIsProbablyEditable":!1,"wgRestrictionEdit":[],"wgRestrictionMove":[]};RLSTATE={"site.styles":"ready","noscript":"ready","user.styles":"ready","user": "ready","user.options":"loading","skins.vector.styles.legacy":"ready","mediawiki.toc.styles":"ready"};RLPAGEMODULES=["site","mediawiki.page.startup","mediawiki.page.ready","mediawiki.toc","skins.vector.legacy.js"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.implement("user.options@1hzgi",function($,jQuery,require,module){/*@nomin*/mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); });});</script> <link rel="stylesheet" href="/mediawiki/load.php?lang=en&modules=mediawiki.toc.styles%7Cskins.vector.styles.legacy&only=styles&skin=vector"/> <script async="" src="/mediawiki/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector"></script> <meta name="generator" content="MediaWiki 1.35.9"/> <link rel="shortcut icon" href="/favicon.ico"/> <link rel="search" type="application/opensearchdescription+xml" href="/mediawiki/opensearch_desc.php" title="NCBO Wiki (en)"/> <link rel="EditURI" type="application/rsd+xml" href="https://www.bioontology.org//mediawiki/api.php?action=rsd"/> <link rel="alternate" type="application/atom+xml" title="NCBO Wiki Atom feed" href="/mediawiki/index.php?title=Special:RecentChanges&feed=atom"/>  </head> <body class="mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-NCBO_Widgets rootpage-NCBO_Widgets skin-vector action-view skin-vector-legacy"> <div id="mw-page-base" class="noprint"></div> <div id="mw-head-base" class="noprint"></div> <div id="content" class="mw-body" role="main"> <a id="top"></a> <div id="siteNotice" class="mw-body-content"></div> <div class="mw-indicators mw-body-content"> </div> <h1 id="firstHeading" class="firstHeading" lang="en">NCBO Widgets</h1> <div id="bodyContent" class="mw-body-content"> <div id="siteSub" class="noprint">From NCBO Wiki</div> <div id="contentSub"></div> <div id="contentSub2"></div> <div id="jump-to-nav"></div> <a class="mw-jump-link" href="#mw-head">Jump to navigation</a> <a class="mw-jump-link" href="#searchInput">Jump to search</a> <div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr"><div class="mw-parser-output"><p>NCBO widgets are the HTML or Javascript code that you can put on your Web site or Web form to use BioPortal functionality there. Using NCBO Widgets is just one of <a href="/wiki/Using_NCBO_Technology_In_Your_Project" title="Using NCBO Technology In Your Project">the ways in which you can use the NCBO technology directly on your Web site or in your application</a>. </p> <div id="toc" class="toc" role="navigation" aria-labelledby="mw-toc-heading"><input type="checkbox" role="button" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none" /><div class="toctitle" lang="en" dir="ltr"><h2 id="mw-toc-heading">Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctogglecheckbox"></label></span></div> <ul> <li class="toclevel-1 tocsection-1"><a href="#Types_of_NCBO_Widgets_and_use_cases"><span class="tocnumber">1</span> <span class="toctext">Types of NCBO Widgets and use cases</span></a></li> <li class="toclevel-1 tocsection-2"><a href="#How_to_use_NCBO_Widgets"><span class="tocnumber">2</span> <span class="toctext">How to use NCBO Widgets</span></a> <ul> <li class="toclevel-2 tocsection-3"><a href="#Term-selection_field_on_a_form"><span class="tocnumber">2.1</span> <span class="toctext">Term-selection field on a form</span></a> <ul> <li class="toclevel-3 tocsection-4"><a href="#Hidden_form_elements_auto-generated"><span class="tocnumber">2.1.1</span> <span class="toctext">Hidden form elements auto-generated</span></a></li> <li class="toclevel-3 tocsection-5"><a href="#Optional_attributes"><span class="tocnumber">2.1.2</span> <span class="toctext">Optional attributes</span></a></li> </ul> </li> <li class="toclevel-2 tocsection-6"><a href="#Ontology_search_widget"><span class="tocnumber">2.2</span> <span class="toctext">Ontology search widget</span></a></li> <li class="toclevel-2 tocsection-7"><a href="#Ontology_visualization_widget"><span class="tocnumber">2.3</span> <span class="toctext">Ontology visualization widget</span></a></li> <li class="toclevel-2 tocsection-8"><a href="#NCBO_Ontology_Tree_Widget"><span class="tocnumber">2.4</span> <span class="toctext">NCBO Ontology Tree Widget</span></a> <ul> <li class="toclevel-3 tocsection-9"><a href="#Description"><span class="tocnumber">2.4.1</span> <span class="toctext">Description</span></a></li> <li class="toclevel-3 tocsection-10"><a href="#Location"><span class="tocnumber">2.4.2</span> <span class="toctext">Location</span></a></li> <li class="toclevel-3 tocsection-11"><a href="#Setup"><span class="tocnumber">2.4.3</span> <span class="toctext">Setup</span></a></li> <li class="toclevel-3 tocsection-12"><a href="#Callbacks_and_Event_Triggers"><span class="tocnumber">2.4.4</span> <span class="toctext">Callbacks and Event Triggers</span></a></li> <li class="toclevel-3 tocsection-13"><a href="#Public_Methods"><span class="tocnumber">2.4.5</span> <span class="toctext">Public Methods</span></a></li> </ul> </li> </ul> </li> </ul> </div> <h1><span class="mw-headline" id="Types_of_NCBO_Widgets_and_use_cases">Types of NCBO Widgets and use cases</span></h1> <ul><li><b><a href="#Term-selection_field_on_a_form">Term-selection field on a form</a></b>: You can add a text field to your Web form that will let users enter a term from a controlled vocabulary (e.g., terms from a single ontology) <ul><li><i>Example use case</i>: Suppose you are running a tissue microarray database and users upload sample descriptions to your database using a web form. There is usually a field for the user to enter the diagnosis for the tissue sample that she is entering. Usually, this field is a text-box or a drop down menu populated with a list of controlled terms. The free text-box is prone to errors, the drop-down gets too unwieldy with large terminologies. Using the NCBO term-selection widget to have users easily select a term from an ontology or controlled vocabulary (such as the NCI Thesaurus) to fill in the field. For example, when the user starts typing "cutaneous me", the term "cutaneous melanoma" pops up.</li> <li><i>What does the term-selection field get you</i>: <ul><li>Look-ahead so that you don't need to type the whole term</li> <li>Controlled vocabulary provides consistency of the way different users use the term (If you want to put "Malignant melanoma", it will always be the same term from NCIT, regardless of how a user started typing it</li> <li>When a new version of your controlled vocabulary becomes available in BioPortal, the widget will automatically use that new version.</li></ul></li></ul></li> <li><b><a href="#Ontology_search_widget">Ontology search widget</a></b>: You can add to your Web site a search box that searches a specific BioPortal ontology. When the user selects the term of interest (with the help of the look-ahead feature), he can jump to the BioPortal page for the corresponding concept in BioPortal.</li> <li><b><a href="#Ontology_visualization_widget">Ontology visualization widget</a></b>: You can put a widget on your Web site that visualizes your entire ontology of interest, or some part of it, as on the <a rel="nofollow" class="external text" href="http://bioportal.bioontology.org/visualize/39478#t_tab1:">"Visualize" tab in BioPortal</a>.</li> <li><b><a href="#NCBO_Ontology_Tree_Widget">NCBO Ontology Tree Widget</a></b>: You can put a widget on your Web site that displays the ontology tree, or some part of it, as on the <a rel="nofollow" class="external text" href="http://bioportal.bioontology.org/visualize/39478#t_tab1:">"Visualize" tab in BioPortal</a>.</li></ul> <h1><span class="mw-headline" id="How_to_use_NCBO_Widgets">How to use NCBO Widgets</span></h1> <p>The easiest way to add any NCBO widget to your HTML page or Web form is by following these steps: </p> <ul><li>Find your ontology of interest in the <a rel="nofollow" class="external text" href="http://bioportal.bioontology.org/ontologies">list of BioPortal ontologies</a> (e.g., NCI Thesaurus)</li> <li>Click on the ontology name to get to the page with <b>Details</b> for that ontology (e.g., the <a rel="nofollow" class="external text" href="http://bioportal.bioontology.org/ontologies/39478">Details for NCI Thesaurus</a>)</li> <li>On the Ontology Details page, go to <b>Ontology Widgets</b> tab</li> <li>Select the widget you want</li> <li>Click the button below the widgets to get instructions for the specific widget</li></ul> <h2><span class="mw-headline" id="Term-selection_field_on_a_form">Term-selection field on a form</span></h2> <p>To add a field to your form that lets the user fetch a term from your ontology of interest, do the following: </p> <ul> <li>Download the <a rel="nofollow" class="external text" href="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js"><b>form_complete.js file</b></a> and put it on your server </li> <li>In the header for the page where you want the form field, include the <b>form_complete.js</b> file </li> <li>On your form, for the fields where you want to use the term-selection widget, specify the field's class in the following format: <code>bp_form_complete-{ontology_acronym_list}-{value}</code> <ul> <li>For example, <code>bp_form_complete-NCIT-uri</code> will use NCI Thesaurus (ontology acronym is NCIT) and will put the term URI in the field after the user selects the term from the pull-down list. <ul> <li> <b>Note:</b> In addition to single ontology ids, you can use a list:<br /> <code>bp_form_complete-NCIT,BIRNLEX-uri</code> </li> <li> <b>OR</b> use 'all' to search across all BioPortal ontologies:<br /> <code>bp_form_complete-all-uri</code> </li> </ul> </li> <li>You can use the following parameters to select which value will be placed into the user-visible input field: <ul> <li> <code>uri</code> : put the complete URI of the term (e.g., "<a rel="nofollow" class="external free" href="http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#Common_Neoplasm">http://ncicb.nci.nih.gov/xml/owl/EVS/Thesaurus.owl#Common_Neoplasm</a>"); </li> <li> <code>shortid</code> : put the short id of the term, as used in BioPortal (e.g., "Common_Neoplasm"); </li> <li> <code>name</code> : put the preferred name of the term (e.g., "Common Neoplasm"); </li> </ul> </li> </ul> <h4><span class="mw-headline" id="Hidden_form_elements_auto-generated">Hidden form elements auto-generated</span></h4> <p>In addition to the input element you defined, there are four hidden form elements that are created and then set when a user selects a term from the list. For example, if you create a field with this code: </p> <pre><input type="text" name="a" class="bp_form_complete-all-uri" size="100"/> </pre> <p>The 'name' attribute is used to create the four following fields (note how the 'a' from the name attribute is appended to the id attribute): </p> <pre><input type="hidden" id="a_bioportal_preferred_name"> <input type="hidden" id="a_bioportal_concept_id"> <input type="hidden" id="a_bioportal_ontology_id"> <input type="hidden" id="a_bioportal_full_id"> </pre> <h4><span class="mw-headline" id="Optional_attributes">Optional attributes</span></h4> <ul> <li> <strong>Include term definitions.</strong> Use <code>data-bp_include_definitions="true"</code>. This will display definitions with the list of terms that are returned. For example, use this code to display search results for 'heart' terms, with definitions, in the NCI Thesaurus. <br /> <code><input type="text" name="m" data-bp_include_definitions="true" class="bp_form_complete-NCIT-name"/></code> </li> <li> <strong>Limit lookup to terms below a root term.</strong> Use <code>data-bp_search_branch="{class_id}"</code> (replace {class_id} with the class id for the term to use as the branch root). For example, use this code to limit the search for 'heart' to terms within the 'Anatomic_Structure_System_or_Substance' branch of the NCI Thesaurus. <br /> <code><input type="text" name="n" data-bp_search_branch="Anatomic_Structure_System_or_Substance" class="bp_form_complete-NCIT-name"/></code> </li> <li><strong>Object types</strong> <ul> <li> <strong>Search 'class' and 'property' objects.</strong> Use <code>data-bp_objecttypes="class,property".</code> For example, use this code to search for 'function' among both 'class' and 'property' objects from the "Adverse Event Reporting Ontology". <br /> <code><input type="text" name="o" data-bp_objecttypes="class,property" class="bp_form_complete-AERO-uri"/></code> </li> <li> <strong>Search only 'property' objects.</strong> Use <code>data-bp_objecttypes="property".</code> For example, use this code to search for 'function' among only 'property' objects from the "Adverse Event Reporting Ontology". <br /> <code><input type="text" name="p" data-bp_objecttypes="property" class="bp_form_complete-AERO-uri"/></code> </li> <li> <strong>Search 'class' and 'individual' objects.</strong> Use <code>data-bp_objecttypes="class,individual".</code> For example, use this code to search for 'seizure' among 'class' and 'individual' objects from the "Adverse Event Reporting Ontology". <br /> <code><input type="text" name="q" data-bp_objecttypes="class,individual" class="bp_form_complete-AERO-uri"/></code> </li> <li> <strong>Only search 'individual' objects.</strong> Use <code>data-bp_objecttypes="individual".</code> For example, use this code to this search for 'seizure' only among 'individual' objects from the "Adverse Event Reporting Ontology". <br /> <code><input type="text" name="r" data-bp_objecttypes="individual" class="bp_form_complete-AERO-uri"/></code> </li> </ul> </li></ul> </li></ul> <h2><span class="mw-headline" id="Ontology_search_widget">Ontology search widget</span></h2> <p>To add a search widget to your HTML page that searches a specific ontology, do the following: </p> <ul> <li>Download the <a rel="nofollow" class="external text" href="http://bioportal.bioontology.org/javascripts/widgets/quick_jump.js"><b>quick_jump.js file</b></a> and put it on your server </li> <li>Copy the code below and paste it to your HTML page. <pre><div id="bp_quick_jump"></div> <script type="text/javascript"> var BP_ontology_id = "FB-DV"; </script> <script src="quick_jump.js" type="text/javascript" charset="utf-8"> </script> </pre> </li> <li> <b>Note:</b> If you would like to use Quick Jump across multiple ontologies: <ul> <li>You can enter a comma-separated list of ontology ids:<br /> var BP_ontology_id = "NCIT,BIRNLEX"; </li> <li>You cans set the variable to 'all' to search all ontologies in BioPortal:<br /> var BP_ontology_id = "all"; </li> </ul> </li> <li>In the code that you just pasted, make sure to change the path to the quick_jump.js file to point to the location where you put the file (relative to your HTML file) <ul> <li>For example, if you put the quick_jump.js file in the same directory as your HTML file, this is the code you would use: <pre><script type="text/javascript"> var BP_ontology_id = "NCIT"; </script> <script src="quick_jump.js" type="text/javascript" charset="utf-8"></script> </pre> </li> </ul> </li> <li> To limit the term lookup to a particular branch of an ontology, include the following Javascript in your page (replace conceptid with the id for the term which you would like to use as the root of your branch): <pre>var BP_search_branch = "{class_id}";</pre> </li> <li> To display definitions with the list of terms that are returned, include the following Javascript in your page: <pre>var BP_include_definitions = true;</pre> </li> </ul> <h2><span class="mw-headline" id="Ontology_visualization_widget">Ontology visualization widget</span></h2> <p>To add a widget visualizing your ontology to your HTML page, simple copy the code from the Ontology Widget page for your ontology of interest. Here is a sample: </p> <pre><iframe src="http://bioportal.bioontology.org/widgets/visualization? ontology=NCIT &class=http%3A%2F%2Fncicb.nci.nih.gov%2Fxml%2Fowl%2FEVS%2FThesaurus.owl%23C38999 &apikey=YOUR_API_KEY" frameborder="0"> </iframe> </pre> <h2><span class="mw-headline" id="NCBO_Ontology_Tree_Widget">NCBO Ontology Tree Widget</span></h2> <h3><span class="mw-headline" id="Description">Description</span></h3> <p>The OntologyTree widget is an embeddable Flex application that allows a user to interact with a tree browser for ontologies. The widget can be configured to display a list of all the ontologies in BioPortal, allowing the user to select which one to view, or can be setup to view a particular ontology. Additionally, there are several Javascript helper functions for the widget, allowing it to be utilized as a fully functional component in other applications. </p> <h3><span class="mw-headline" id="Location">Location</span></h3> <p>Add the following files to use the widget: </p> <ul><li><a rel="nofollow" class="external free" href="http://bioportal.bioontology.org/widgets/jquery.ncbo.tree.css">http://bioportal.bioontology.org/widgets/jquery.ncbo.tree.css</a></li> <li><a rel="nofollow" class="external free" href="http://bioportal.bioontology.org/widgets/jquery.ncbo.tree-2.0.2.js">http://bioportal.bioontology.org/widgets/jquery.ncbo.tree-2.0.2.js</a></li></ul> <p>Or the minified versions: </p> <ul><li><a rel="nofollow" class="external free" href="http://bioportal.bioontology.org/widgets/minified/jquery.ncbo.tree.min.css">http://bioportal.bioontology.org/widgets/minified/jquery.ncbo.tree.min.css</a></li> <li><a rel="nofollow" class="external free" href="http://bioportal.bioontology.org/widgets/minified/jquery.ncbo.tree-2.0.2.min.js">http://bioportal.bioontology.org/widgets/minified/jquery.ncbo.tree-2.0.2.min.js</a></li></ul> <h3><span class="mw-headline" id="Setup">Setup</span></h3> <ul><li>You will need to use jQuery to utilize the Tree Widget. If you aren't using jQuery already, you can add it as follows: <pre><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></pre></li> <li>Create a div element to store the tree: <pre><div id="tree"></div></pre></li> <li>Initialize the tree:<pre>var tree = $("#tree").NCBOTree({
 apikey: "YOUR_API_KEY",
 ontology: "NCIT"
});
</pre></li> <li>The div you created should now contain a tree showing the roots of the NCIT ontology</li> <li>Additional setup options: <ul><li><b>autoclose</b>: Close other branches of the tree when expanding a new one</li> <li><b>treeClass</b>: Class to identify the tree with</li> <li><b>autocompleteClass</b>: Class to identify the autocomplete (search) input with</li> <li><b>width</b>: Set the width of the tree and autocomplete input</li> <li><b>startingClass</b>: Start with this class selected (and expanded to) in the tree</li> <li><b>startingRoot</b>: Start with this class as the only root displayed in the tree. This allows you to display a sub-tree or branch of your choosing.</li> <li><b>ncboAPIURL</b>: Use a different NCBO REST instance (not normally used)</li> <li><b>ncboUIURL</b>: Use a different NCBO UI instance (not normally used)</li></ul></li></ul> <h3><span class="mw-headline" id="Callbacks_and_Event_Triggers">Callbacks and Event Triggers</span></h3> <p>You can interact programmatically with the tree using JavaScript and jQuery. Callbacks can be passed when setting up the tree: </p> <pre>var tree = $("#tree").NCBOTree({ apikey: "YOUR_API_KEY", ontology: "NCIT", afterSelect: function(event, classId, prefLabel, selectedNode){ console.log(classId); } }); </pre> <p>The following are the available callbacks with their arguments: </p> <ul><li><b>beforeExpand</b>, <i>arg</i>: expandedNode</li> <li><b>afterExpand</b>, <i>arg</i>: expandedNode</li> <li><b>afterExpandError</b>, <i>arg</i>: expandedNode</li> <li><b>afterSelect</b>, <i>arg</i>: classId, prefLabel, selectedNode</li> <li><b>afterJumpToClass</b>, <i>arg</i>: classId</li></ul> <p>You can also listen to these as jQuery events: </p> <pre>tree.on("afterSelect", function(event, classId, prefLabel, selectedNode) { console.log(classId); } </pre> <p>Here are the events with their arguments: </p> <ul><li><b>beforeExpand</b>, <i>arg</i>: event, expandedNode</li> <li><b>afterExpand</b>, <i>arg</i>: event, expandedNode</li> <li><b>afterExpandError</b>, <i>arg</i>: event, expandedNode</li> <li><b>afterSelect</b>, <i>arg</i>: event, classId, prefLabel, selectedNode</li> <li><b>afterJumpToClass</b>, <i>arg</i>: event, classId</li></ul> <h3><span class="mw-headline" id="Public_Methods">Public Methods</span></h3> <p>There are a variety of methods you can call on the object returned when calling NCBOTree(). They can be used to get information about the state of the tree or to programmatically interact with it. </p> <pre>var tree = $("#tree").data("NCBOTree"); // OR var tree = $("#tree")[0].NCBOTree; // OR var tree = document.getElementById("tree").NCBOTree; </pre> <p>Once you have the tree instance, you can call the following methods: </p> <ul><li><b>tree.selectedClass()</b>: Returns an object that represents the currently-selected class. The object includes attributes for `id`, `prefLabel`, and `URL`. URL is the REST location of the class, and performing and HTTP GET on that URL will provide a JSON representation of the class.</li> <li><b>tree.selectClass(classId)</b>: Activates the class in the tree with the matching URI (classId). This will only work if the class is already visible.</li> <li><b>tree.jumpToClass(classId)</b>: Replaces the current tree with a version that is expanded with a path from the root to the given class. This method is triggered when selecting a class from the search field. The provided class will be selected in the tree when the tree returns.</li> <li><b>tree.changeOntology(ontologyAcronym)</b>: Replaces the current tree with the roots from the given ontology.</li></ul>    </div></div><div class="printfooter">Retrieved from "<a dir="ltr" href="https://www.bioontology.org//mediawiki/index.php?title=NCBO_Widgets&oldid=12809">https://www.bioontology.org//mediawiki/index.php?title=NCBO_Widgets&oldid=12809</a>"</div> <div id="catlinks" class="catlinks catlinks-allhidden" data-mw="interface"></div> </div> </div> <div id="mw-navigation"> <h2>Navigation menu</h2> <div id="mw-head">  <nav id="p-personal" class="vector-menu" aria-labelledby="p-personal-label" role="navigation" > <h3 id="p-personal-label"> <span>Personal tools</span> </h3>  <div class="body vector-menu-content">  <ul class="vector-menu-content-list"><li id="pt-login"><a href="/mediawiki/index.php?title=Special:UserLogin&returnto=NCBO+Widgets" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o">Log in</a></li></ul> </div> </nav> <div id="left-navigation">  <nav id="p-namespaces" class="vector-menu vector-menu-tabs vectorTabs" aria-labelledby="p-namespaces-label" role="navigation" > <h3 id="p-namespaces-label"> <span>Namespaces</span> </h3>  <div class="body vector-menu-content">  <ul class="vector-menu-content-list"><li id="ca-nstab-main" class="selected"><a href="/wiki/NCBO_Widgets" title="View the content page [c]" accesskey="c">Page</a></li><li id="ca-talk" class="new"><a href="/mediawiki/index.php?title=Talk:NCBO_Widgets&action=edit&redlink=1" rel="discussion" title="Discussion about the content page (page does not exist) [t]" accesskey="t">Discussion</a></li></ul> </div> </nav>  <nav id="p-variants" class="vector-menu-empty emptyPortlet vector-menu vector-menu-dropdown vectorMenu" aria-labelledby="p-variants-label" role="navigation" > <input type="checkbox" class="vector-menu-checkbox vectorMenuCheckbox" aria-labelledby="p-variants-label" /> <h3 id="p-variants-label"> <span>Variants</span> </h3>  <div class="body vector-menu-content">  <ul class="menu vector-menu-content-list"></ul> </div> </nav> </div> <div id="right-navigation">  <nav id="p-views" class="vector-menu vector-menu-tabs vectorTabs" aria-labelledby="p-views-label" role="navigation" > <h3 id="p-views-label"> <span>Views</span> </h3>  <div class="body vector-menu-content">  <ul class="vector-menu-content-list"><li id="ca-view" class="collapsible selected"><a href="/wiki/NCBO_Widgets">Read</a></li><li id="ca-viewsource" class="collapsible"><a href="/mediawiki/index.php?title=NCBO_Widgets&action=edit" title="This page is protected.
You can view its source [e]" accesskey="e">View source</a></li><li id="ca-history" class="collapsible"><a href="/mediawiki/index.php?title=NCBO_Widgets&action=history" title="Past revisions of this page [h]" accesskey="h">View history</a></li></ul> </div> </nav>  <nav id="p-cactions" class="vector-menu-empty emptyPortlet vector-menu vector-menu-dropdown vectorMenu" aria-labelledby="p-cactions-label" role="navigation" > <input type="checkbox" class="vector-menu-checkbox vectorMenuCheckbox" aria-labelledby="p-cactions-label" /> <h3 id="p-cactions-label"> <span>More</span> </h3>  <div class="body vector-menu-content">  <ul class="menu vector-menu-content-list"></ul> </div> </nav> <div id="p-search" role="search"> <h3 > <label for="searchInput">Search</label> </h3> <form action="/mediawiki/index.php" id="searchform"> <div id="simpleSearch"> <input type="search" name="search" placeholder="Search NCBO Wiki" title="Search NCBO Wiki [f]" accesskey="f" id="searchInput"/> <input type="hidden" name="title" value="Special:Search"> <input type="submit" name="fulltext" value="Search" title="Search the pages for this text" id="mw-searchButton" class="searchButton mw-fallbackSearchButton"/> <input type="submit" name="go" value="Go" title="Go to a page with this exact name if it exists" id="searchButton" class="searchButton"/> </div> </form> </div> </div> </div> <div id="mw-panel"> <div id="p-logo" role="banner"> <a title="Visit the main page" class="mw-wiki-logo" href="/wiki/Main_Page"></a> </div>  <nav id="p-navigation" class="vector-menu vector-menu-portal portal portal-first" aria-labelledby="p-navigation-label" role="navigation" > <h3 id="p-navigation-label"> <span>Navigation</span> </h3>  <div class="body vector-menu-content">  <ul class="vector-menu-content-list"><li id="n-mainpage"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z">Main Page</a></li><li id="n-Dissemination"><a href="/wiki/Dissemination_Wiki">Dissemination</a></li><li id="n-NCBO-FAQ"><a href="/wiki/NCBO_FAQ">NCBO FAQ</a></li><li id="n-Shared-Materials"><a href="/wiki/Shared_Materials">Shared Materials</a></li><li id="n-Glossary"><a href="/wiki/Glossary">Glossary</a></li><li id="n-recentchanges"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r">Recent changes</a></li><li id="n-help"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents" title="The place to find out">Help</a></li></ul> </div> </nav>  <nav id="p-tb" class="vector-menu vector-menu-portal portal" aria-labelledby="p-tb-label" role="navigation" > <h3 id="p-tb-label"> <span>Tools</span> </h3>  <div class="body vector-menu-content">  <ul class="vector-menu-content-list"><li id="t-whatlinkshere"><a href="/wiki/Special:WhatLinksHere/NCBO_Widgets" title="A list of all wiki pages that link here [j]" accesskey="j">What links here</a></li><li id="t-recentchangeslinked"><a href="/wiki/Special:RecentChangesLinked/NCBO_Widgets" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li><li id="t-specialpages"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q">Special pages</a></li><li id="t-print"><a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p">Printable version</a></li><li id="t-permalink"><a href="/mediawiki/index.php?title=NCBO_Widgets&oldid=12809" title="Permanent link to this revision of the page">Permanent link</a></li><li id="t-info"><a href="/mediawiki/index.php?title=NCBO_Widgets&action=info" title="More information about this page">Page information</a></li></ul> </div> </nav> </div> </div> <footer id="footer" class="mw-footer" role="contentinfo" > <ul id="footer-info" > <li id="footer-info-lastmod"> This page was last edited on 1 February 2016, at 16:17.</li> </ul> <ul id="footer-places" > <li id="footer-places-privacy"><a href="/wiki/NCBO_Wiki:Privacy_policy" title="NCBO Wiki:Privacy policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/NCBO_Wiki:About" title="NCBO Wiki:About">About NCBO Wiki</a></li> <li id="footer-places-disclaimer"><a href="/wiki/NCBO_Wiki:General_disclaimer" title="NCBO Wiki:General disclaimer">Disclaimers</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/"><img src="/mediawiki/resources/assets/poweredby_mediawiki_88x31.png" alt="Powered by MediaWiki" srcset="/mediawiki/resources/assets/poweredby_mediawiki_132x47.png 1.5x, /mediawiki/resources/assets/poweredby_mediawiki_176x62.png 2x" width="88" height="31" loading="lazy"/></a></li> </ul> <div style="clear: both;"></div> </footer> <script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgPageParseReport":{"limitreport":{"cputime":"0.020","walltime":"0.023","ppvisitednodes":{"value":108,"limit":1000000},"postexpandincludesize":{"value":0,"limit":2097152},"templateargumentsize":{"value":0,"limit":2097152},"expansiondepth":{"value":2,"limit":40},"expensivefunctioncount":{"value":0,"limit":100},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":1805,"limit":5000000},"timingprofile":["100.00% 0.000 1 -total"]},"cachereport":{"timestamp":"20241126010126","ttl":86400,"transientcontent":false}}});});</script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'G-VJ0M25NMS1', 'auto'); ga('set', 'anonymizeIp', true); ga('send', 'pageview'); </script> <script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgBackendResponseTime":67});});</script></body></html>