• 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 BioPortal:
    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 = "PGHD_CONNECT";</script>
    <script src="quick_jump.js" type="text/javascript" charset="utf-8"></script>

Step 2: Follow the Instructions

---

• 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 file.
• 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 BioPortal 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., https://github.com/RenVit318/pghd/tree/main/src/vocab/pghd_connect/patient )
    • shortid put the short id of the class, as used in BioPortal (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