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
- More examples
- Selection criteria
- Display settings
- CSS styling
- Oxpoints URI finder
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 formatYYYY-MM-DDT00:00:00
. If set tonow
, only future courses will be shown. Set this attribute as empty to show all dates. - Default
now
, ifdata-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 formatYYYY-MM-DDT00:00:00
. If set tonow
, 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
orquantitative
- Example
data-researchMethod="quantitative"
- data-eligibility
-
- Filters on
- who is eligible to book
- Value
- A space separated list of the following:
ST
: staffOX
: members of the UniversityPU
: 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 thestart
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: