Page tree
Contents

The ANDS 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, ANDS 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 ANDS 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.ands.org.au/apps/assets/orcid_widget/js/orcid_widget_v2.js"></script>
<link rel="stylesheet" type="text/css" href="//researchdata.ands.org.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

JSFiddle


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)

JSFiddle



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.


JSFiddle


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.

JSFiddle


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:

 

PropertyDescriptionDefault
search_endpointJSONP search API for ORCIDhttps://researchdata.ands.org.au/api/v2.0/orcid.jsonp/search/
lookup_endpointJSONP API for ORCID Lookup servicehttps://researchdata.ands.org.au/api/v2.0/orcid.jsonp/lookup/
pre_lookupAutomatically Do a lookup on the current value of the input field false
api_keyapi key for logging widget usagepublic
searchDisplay Search Button, enable searching functionalitytrue
pre_open_searchOpen Search Box by defaultfalse
search_textText to display on the open search box button<i class="icon-search"></i> Search
search_classCSS class to apply on the open search box buttonorcid_search btn btn-small
lookupDisplay the Lookup button, enable Lookup functionalitytrue
lookup_textText for the lookup buttonLook up
lookup_classLookup button CSS classorcid_lookup btn btn-small
before_html:Text to display before the input field<span class="orcid_before_html">http://orcid.org/</span>
wrap_htmlThe wrapping HTML to cover the input fields<div class="orcid_wrapper"></div>
result_success_classCSS class for the div displaying successful lookuporcid_success_div
result_error_classCSS class for the div displaying error lookuporcid_error_div
search_div_classCSS class for the searching divorcid_search_div
nohits_msgMessage to display when no result or an error returns<p>No matches found<br/>
If you wish to register for an
orcid please click
<a href="https://orcid.org/register" target="_blank">here</a></p>
query_textText displaying before the search querySearch Query:
search_text_btnText display for the search buttonSearch
close_search_text_btnText display for the closing search div button[x]
search_loading_textText to display whilst widget is searchingLoading...
lookup_error_handleroverwrite function for error lookupfunction(xhr, message)false
lookup_success_handleroverwrite function when a successful lookup returnsfunction(data, obj, settings)false
custom_select_handleroverwrite function when a successful selection of result returnsfunction(data, obj, settings)false
post_lookup_success_handlera function hook after a successful lookup returnsfunction(data, obj, settings)false
auto_close_searchboolean, To automatically close the search box after a value is selectedfalse
tooltipboolean To enable tooltip on mouseover of result list to display details. NOTE: jquery qtip module is required to use this featurefalse
info_box_classText to set a class to style the individual resultsinfo-box
search_div_classText to set a class to style the search form divorcid_search_div
   

 

 

 

  • No labels