XEML Environment Ontology (XEO)
OBO
Last submission date June 23, 2015
Add XEO Web Widgets to your site
Jump To

Type a class name from XEO and jump to it in AgroPortal

  • Download the quick_jump.js file and put it on your server.
  • Copy the code below and paste it to your HTML page
  • Note: If you would like to use Quick Jump across multiple ontologies
    • You can enter a comma-separated list of ontology ids
      var BP_ontology_id = "NCIt,SNOMEDCT";
    • You can set the variable to 'all' to search all ontologies in AgroPortal:
      var BP_ontology_id = "all";
  • To include definitions in the Jump To drop-down, add the following variable in Javascript:
    var BP_include_definitions = true;
  • 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)
    • 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:
      <div id="bp_quick_jump"></div>
                  <script type="text/javascript">
                      var BP_ontology_id = "XEO";</script>
                  <script src="quick_jump.js" type="text/javascript" charset="utf-8"></script>
      

For more help visit NCBO Widget Wiki


Autocomplete

Fill your form fields with classes from XEO

Example 1 (start typing the class name to get its full URI)

Example 2 (get the ID for a class)

Example 3 (get the preferred name for a class)

  • Download the form_complete.js file and put it on your server.
  • In the header for the page where you want the form field, include the form_complete.js In the header for the page where you want the form field, include the
  • On your form, for the fields where you want to use the class-selection widget, specify the field's class in the following format: bp_form_complete-{ontology_id_list}-{value}
    • For example, bp_form_complete-NCIT-uri will use NCI Thesaurus (ontology id is NCIT) and will put the class URI in the field after the user selects the class from the pull-down list.
      • Note: In addition to single ontology ids, you can use a list:
        bp_form_complete-NCIT,NCBITAXON-uri
      • OR use 'all' to search across all AgroPortal ontologies:
        bp_form_complete-all-uri
      • The autocomplete widget accesses ontology content from the latest version of the ontology.
    • You can use the following parameters to select which value will be placed into the user-visible input field:
      • uri Put the complete URI of the class (e.g., http://purl.obolibrary.org/obo/XEO_00114 )
      • shortid put the short id of the class, as used in AgroPortal (e.g., "Common_Neoplasm");
      • name put the preferred name of the class (e.g., "Common Neoplasm");
  • 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 class from the list. For example, if you create a field with this code:
      <input type="text" name="a" class="bp_form_complete-all-uri" size="100"/>
    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):
    • <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">
    • Additional parameters are documented on the NCBO Widget Wiki

    For more help visit NCBO Widget Wiki


    Visualization

    Display a visualization for a given class in XEO

    Copy the code below and paste it to your HTML page

    <iframe frameborder="0" src="/widgets/visualization?ontology=XEO&class=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FXEO_00114&apikey=YOUR_API_KEY"></iframe>
    

    For more help visit NCBO Widget Wiki


    Tree Widget

    Display a class tree with a search field for XEO

    Copy the code below and paste it to your HTML page

    <link rel="stylesheet" type="text/css" href="/widgets/jquery.ncbo.tree.css">
      <script src="/widgets/jquery.ncbo.tree-2.0.2.js"></script>
      <div id="widget_tree"></div>
      var widget_tree = $("#widget_tree").NCBOTree({
        apikey: "YOUR_API_KEY",
        ontology: "XEO"
      });
    
    

    You can also view a detailed demonstration

    For more help visit NCBO Widget Wiki