Example usages

This page contains some example usages of the Course Listings Widget. For documentation and more information see the Home Page.

Filtering by date

By default the courses widget will display only courses which start in the future. This can be surpressed by setting data-startingAfter="" or by setting data-startingBefore.

The data-startingAfter and data-startingBefore paramaters can be used to restrict dates to an interval which can be open ended.

<div class="courses-widget-container"
     data-title="Future Oxford University courses"
     data-displayColumns="start title provider"
     data-startingAfter="now"
     data-providedBy="http://oxpoints.oucs.ox.ac.uk/id/00000000" /><div>;

Showing only specific columns

If no columns are specified then all will be displayed:

<div class="courses-widget-container"
     data-title="Careers Services courses with no columns specified"
     data-startingAfter="2013-01-01"
     data-providedBy="http://oxpoints.oucs.ox.ac.uk/id/23233545" /><div>;

You can control which columns are displayed by using the data-displayColumns attribute.

<div class="courses-widget-container"
     data-title="Oxford University Courses with just start and title columns"
     data-displayColumns="start title"
     data-startingAfter="2013-01-01"
     data-providedBy="http://oxpoints.oucs.ox.ac.uk/id/00000000" /><div>;

Filtering results by department

By default all University courses will be loaded, which will take some time. To filter results to a relevant department set the data-providedBy attribute to the associated Oxpoints uri. The Oxpoints uri can be found using the search tool on the home page.

Multiple URIs can be specified separated by spaces for courses taught by any of the departments.

<div class="courses-widget-container"
     data-title="Courses taught by the Department of Physics or Department of Chemistry"
     data-displayColumns="start title provider"
     data-startingAfter="2012-01-01"
     data-providedBy="http://oxpoints.oucs.ox.ac.uk/id/23232673 http://oxpoints.oucs.ox.ac.uk/id/23232546" /><div>;

Specifying a skill area

Results can be filtered by a particular skill area or research method using the data-skill or data-researchMethod attributes respectively.

<div class="courses-widget-container"
     data-title="Qualitative field work courses"
     data-skill="FW"
     data-researchMethod="qualitative"
     data-startingAfter=""
     data-displayColumns="start title provider"
     data-providedBy="http://oxpoints.oucs.ox.ac.uk/id/00000000" /><div>;

Specifying eligibility

Results can be filtered by the who is eligible to book using the data-eligibility attribute.

<div class="courses-widget-container"
     data-title="Courses that are open to the public"
     data-eligibility="PU"
     data-startingAfter=""
     data-displayColumns="start title eligibility provider"
     data-providedBy="http://oxpoints.oucs.ox.ac.uk/id/00000000" /><div>;

<div class="courses-widget-container"
     data-title="Widget with a link to show courses without dates"
     data-displayColumns="start title provider"
     data-startingAfter="2014-01-01"
     data-providedBy="http://oxpoints.oucs.ox.ac.uk/id/23232639" /><div>;

Showing courses without dates

Some courses do not have start dates associated with them.

You can provide a link to toggle between courses with start dates and courses without.

<div class="courses-widget-container"
     data-title="Widget with a link to show courses without dates"
     data-displayColumns="start title provider"
     data-startingAfter="2014-01-01"
     data-showWithoutDatesLink="true"
     data-providedBy="http://oxpoints.oucs.ox.ac.uk/id/23232639" /><div>;

You can also specify whether the first load shows courses with dates or courses without dates.

<div class="courses-widget-container"
     data-title="Only shows courses without dates"
     data-displayColumns="title provider"
     data-defaultDatesView="withoutDates"
     data-providedBy="http://oxpoints.oucs.ox.ac.uk/id/23232639" /><div>;