Adding NCBO Widgets for ICF-d9. COMMUNITY, SOCIAL AND CIVIC LIFE to Your Site

• 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 = "1032,1089";
  • 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:

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 term-selection widget, specify the field's class in the following format: bp_form_complete-{ontology_id_list}-{value}
  • For example, bp_form_complete-1032-uri will use NCI Thesaurus (ontology id is 1032) and will put the term URI in the field after the user selects the term from the pull-down list.
    • Note: In addition to single ontology ids, you can use a list:
      bp_form_complete-1032,1089-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 term (e.g., http://bioportal.bioontology.org/visualize/39478/Common_Neoplasm);
    • shortid put the short id of the term, as used in BioPortal (e.g., "Common_Neoplasm");
    • name put the preferred name of the term (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 term 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