Oxford Courses Widget

The Course Listings Widget allows you to embed a table containing a selection of course details in your web page. The selection can be made according to various criteria e.g. date, course provider, and eligibility.

The widget is hosted and developed by the University of Oxford and was created as part of the JISC funded OxCAP project. The source code can be obtained from the project GitHub page.

Please let us know if you have any problems, questions or proposed enhancements through the issues page.

Update - 10 Jan 2014 A new version of the widget has been released, for information about the changes please see the release notes.

Contents

Code required in your page

To embed a Course Listings Widget in your page, you will need to include the following JavaScript and CSS files in your page's <head>:

<script src="//static.data.ox.ac.uk/courses-js-widget/courses-require.js" type="text/javascript"></script>
<script src="//static.data.ox.ac.uk/courses-js-widget/lib/require/require.js" type="text/javascript" data-main="courses"></script>

Then, at the point in the page's <body> where you want the courses table to appear, include the following (for example):

<div class="courses-widget-container" 
     data-title="Courses from Careers Services" 
     data-displayColumns="start title description" 
     data-startingAfter=""
     data-providedBy="http://oxpoints.oucs.ox.ac.uk/id/23233545">
</div>

The above example generates the following widget:

See below for details of all the configurable options.

More examples

More example usages can be found on the examples page.

Selection criteria

The course listings widget displays courses that match criteria set by the webpage designer.

To set criteria you can define the following attributes on the <div> tag.

data-providedBy
Filters on
Unit (divisions or departments) offering a course. Specify multiple units to show courses provided by any of the units.
Value
The Oxpoints URI of the unit, or a space separated list of URIs. To find this for your unit, you can use the Oxpoints URI finder below.
Default
http://oxpoints.oucs.ox.ac.uk/id/00000000 (University of Oxford)

Please note if no unit is specified, the widget will display all courses offered by the University. This is a very large list that will take a long time to fetch.
Example
data-providedBy="http://oxpoints.oucs.ox.ac.uk/id/23232673 http://oxpoints.oucs.ox.ac.uk/id/23232546"
data-startingAfter
Filters on
Courses which start after a specified date.
Value
The word now or a date in the format YYYY-MM-DDT00:00:00. If set to now, only future courses will be shown. Set this attribute as empty to show all dates.
Default
now, if data-startingBefore has not been specified.
Example
data-startingAfter="2013-01-01T00:00:00"
data-startingBefore
Filters on
Courses which start before a specified date.
Value
The word now or a date in the format YYYY-MM-DDT00:00:00. If set to now, only future courses will be shown.
Example
data-startingBefore="2013-01-01T00:00:00"
data-skill
Filters on
Courses in a particular skill area.
Value
An ox-rdf code. A complete list of values can be seen in data.ox:
Example
data-skill="GT" for Graduate Training
data-researchMethod
Filters on
Courses with a particular research method.
Value
qualitative or quantitative
Example
data-researchMethod="quantitative"
data-eligibility
Filters on
who is eligible to book
Value
A space separated list of the following:
  • ST: staff
  • OX: members of the University
  • PU: public
Default
"OX PU"
Example
data-eligibility="OX PU"

Display settings

data-displayColumns
Controls
which columns to display in the table (and their order).
Value
Format: a space-separated list of columns. The order in which they are given in the attribute is the order in which they will appear. Columns available are:

  • start
  • title
  • subject
  • provider
  • description
  • venue
  • eligibility

The table will be sorted initially on the first column so it is advised to use the start column first.
Example
data-displayColumns="start title venue" (this will display only the start date, course title and venue)
data-title
Controls
The <h2> title of the widget table.
Value
Any text to appear in the heading. If no title is given, it will default to 'Courses'.
Example
data-title="Courses from the Department of Studies"
data-showWithoutDatesLink
Controls
Whether a link is shown which switches from viewing courses with dates to courses without dates and vice versa.
Value
"true" or "false", defaults to "false"
Example
data-showWithoutDatesLink="true"
data-defaultDatesView
Controls
whether courses with dates or courses without dates are loaded when the widget first opens.
Value
"withDates" or "withoutDates", defaults to "withDates"
Example
data-defaultDatesView="withoutDates"

CSS styling

The container <div> for the courses widget must have the class courses-widget-container in order for the Javascript to be triggered; however, it can of course have other classes as well to aid styling.

The table containing the course information is generated using the DataTables jQuery plug-in. For further information on styling the elements of a DataTables table (table, cells, pager, searchbox, etc), see the DataTables website: DataTables: Styling information

Oxpoints URI finder

Start typing the name of a unit to get its oxpoints URI: