Science Keyword Aggregator

Widget

Example Widget

Here is an example search widget embedded in a demonstration form. The form's 'title' and 'author' fields do nothing and neither does submitting the form - they are just for demonstration.

Demonstration Form Containing Widget

:
:
Keywords:

Using the Widget

Once the widget is embedded in your own web page's form, a text box and a 'remove' and 'add another term' hyperlink will appear as per the example above. When 3 or more letters are entered in the text box, a search using the web service will be performed and results from the search displayed in a hyperlinked list below the text box.

Terms from the search results can be selected by just clicking on a term result hyperlink.

Additional text boxes for additional terms can be selected by clicking the 'add another term' hyperlink'.

When a form is submitted, the selected term values will appear in the form as per normal HTML forms. Additionally, the values selected, the ownerId, instanceId and a session id for the form will be reported back to the KWA instance for statistics.

If users don't find a term they like, they can choose to add their own term for what they searched for to the 'user-defined' vocabulary if that feature has been enabled for the widget instance they are using.

Deploy a Widget

Here are some basic instructions on how to deploy a widget for others to use:

  1. Build widget code using the tool below
  2. Embed the widget code in your own web form
  3. Use!

You probably want a full explanation of the widget code so here goes (using the code for the example widget above):

    <script id="kw_config">
        var widgetConfig = {
            "ownerId": "KWAG",
            "instanceId": "test",
            "webServiceEndpoint": "http://scikey.org/api",
            "includedVocabs": [
                "UD", "MKW", "TR-SCIE"
            ],
            "allowContributions": true,
            "storeResults": true
        }
    </script>
                
This is the JavaScript code that configures your widget instance. All the values can be set either manually or by using the form below.
    <script type="text/javascript" src="http://scikey.org/kw_widget.js"></script>
                
This is the JavaScript file that powers the widget by calling the web service when events on the widget trigger. Feel free to emulate the behaviour you see in this file in your own code!
    <div id="kw_widget"></div>
                
This is the HTML div to inside which the widget is placed by the kw_widget.js JavaScript file.

Build a Widget

You can use this section to build a widget for your own web app. Fill in the fields below and the code you need to embed in your web page will appear below.

Field Entry Notes
You need to create an 'owner' ID that you will recognise for you. It will be important if you want to see usage statistics. Any string of characters you like will do.
You need to create an 'instance' ID that is particular to the system you want to install the widget on. This allows a single 'owner' (i.e., you) to have several 'instances' that appear separately in usage statistics. Any string of characters you like will do.
This is the web service instance you wish to use. The default value is filled in below. You will know if you need to change this. If you don't know, leave it as it is!
Yes
No
Do you want to allow users to contribute new terms to a 'user-defined' vocabulary?
Yes
No
Do you want the KWA to store usage results for you? They will be presented per instance ID, per form submission.

6. Included Vocabularies

Here is a list of all the vocabularies currently stored by the KWA. Any widget instance may search all the vocabularies or only a subset of them - you decide.

Select each vocab (or 'Select All') and click the 'Generate widget configuration code' to build the required CSS, HTML and JSON code to power a widget using just those vocabularies which you can then embed in your own web page application.

Select All, Remove All

gcmd-v6
Title: GCMD Science Keywords V6
Subject: science
Select gcmd-v6
wikipediacompsci
Title: Wikipedia Computer Science Terms
Subject: computer science
Select wikipediacompsci
modsim-1113
Title: MODSIM 2011 & 2013 keywords
Subject: varied
Select modsim-1113