ORCID Researcher Lookup Widget
The ARDC ORCID Widget allows you to enhance your web form to include the ability to lookup and search for an ORCID ID.
This widget is powered by the ORCID JSONP API and requires jQuery to function.
How to use this widget
Before you start
While optional, ARDC recommends that you register for a free API key to be used with this widget. Registering will allow us to keep you informed of changes and planned outages to our services, as well monitor the system for quality purposes.
Note that if you have previously registered for an API key you do not need to register again. Your ARDC API key is reusable with any of our widgets and services.
Put the following code snippet into your HTML document between the <head>
tags.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="//researchdata.edu.au/apps/assets/orcid_widget/js/orcid_widget_v2.js"></script>
<link rel="stylesheet" type="text/css" href="//researchdata.edu.au/apps/assets/orcid_widget/css/orcid_widget_v2.css" />
And you’re done! Just 3 lines of code! Any input fields on your page which have the class orcid_widget
will be transformed into a fully-functional ORCID lookup tool.
Demo
Default Settings
This example shows how to embed a Researcher Lookup tool into your webpage.
- if you don’t know your ORCID, click Search to search for your ORCID profile
- if you already know your ORCID, put it into the text field and click Lookup instead
Custom Settings
Example 1
In this example, we initialise the widget using some custom settings:
- the labels on the page have been changed (see the
JS
tab) - automatically display the search box when the widget loads
- a default value for the ORCID has been set in the
HTML
tab (and this is displayed when the page loads)
Example 2
Another example where we initialise the widget using custom settings (see the JS
tab):
- Set styling of the search form div
- Set styling of the orcid information div
You will need to add the supplied classes to your style sheet to apply formatting.
Example 3
Another example where we initialise the widget using custom settings (see the JS
tab)
- Enable tooltip of full information on mouseover of the results list
Note: This feature requires the qtip jquery plugin to be installed to display correctly.
Configuration
You can initialise the plugin by simply adding a class of orcid_widget
to an input element:
<input type="text" class="orcid_widget">
You can also manually trigger the plugin with Javascript:
$('input').orcid_widget();
In this mode, you can pass the orcid_wiget()
function any of the following configuration parameters:
Property | Description | Default |
search_endpoint | JSONP search API for ORCID | https://researchdata.edu.au/api/v2.0/orcid.jsonp/search/ |
lookup_endpoint | JSONP API for ORCID Lookup service | https://researchdata.edu.au/api/v2.0/orcid.jsonp/lookup/ |
pre_lookup | Automatically Do a lookup on the current value of the input field | false |
api_key | api key for logging widget usage | public |
search | Display Search Button, enable searching functionality | true |
pre_open_search | Open Search Box by default | false |
search_text | Text to display on the open search box button | <i class="icon-search"></i> Search |
search_class | CSS class to apply on the open search box button | orcid_search btn btn-small |
lookup | Display the Lookup button, enable Lookup functionality | true |
lookup_text | Text for the lookup button | Look up |
lookup_class | Lookup button CSS class | orcid_lookup btn btn-small |
before_html: | Text to display before the input field | <span class="orcid_before_html">http://orcid.org/</span> |
wrap_html | The wrapping HTML to cover the input fields | <div class="orcid_wrapper"></div> |
result_success_class | CSS class for the div displaying successful lookup | orcid_success_div |
result_error_class | CSS class for the div displaying error lookup | orcid_error_div |
search_div_class | CSS class for the searching div | orcid_search_div |
nohits_msg | Message to display when no result or an error returns | <p>No matches found<br/> |
query_text | Text displaying before the search query | Search Query: |
search_text_btn | Text display for the search button | Search |
close_search_text_btn | Text display for the closing search div button | [x] |
search_loading_text | Text to display whilst widget is searching | Loading... |
lookup_error_handler | overwrite function for error lookupfunction(xhr, message) | false |
lookup_success_handler | overwrite function when a successful lookup returnsfunction(data, obj, settings) | false |
custom_select_handler | overwrite function when a successful selection of result returnsfunction(data, obj, settings) | false |
post_lookup_success_handler | a function hook after a successful lookup returnsfunction(data, obj, settings) | false |
auto_close_search | boolean, To automatically close the search box after a value is selected | false |
tooltip | boolean To enable tooltip on mouseover of result list to display details. NOTE: jquery qtip module is required to use this feature | false |
info_box_class | Text to set a class to style the individual results | info-box |
search_div_class | Text to set a class to style the search form div | orcid_search_div |