Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

There are a number of places within a glow Timetable widget where a template can be specified, which allows you to considerably customise the way the widget displays its data.

  • Item content
  • Track Header content
  • Track footer content
  • Scale segments
  • Scrollbar marks

All of these have the same specification as to how they work. The template can be specified in four different ways.

  • A string, intended to act as the "template" in a glow.lang.interpolate call.
  • A Nodelist, which will be used directly
  • A function which returns a string
  • A function which returns a Nodelist

In each case the final content will be derived from the template a data item which is specific to the context;

Item content
the glow.widgets.Timetable.Item whose content is being derived
Track Header content
Track footer content
the glow.widgets.Timetable.Track
Scale segments
Scrollbar marks
an object with start and end properties, holding the start and end points of the segment

In all cases the results of the template is placed in a DIV with no attributes and returned as a Nodelist of one item.

Nodelist templates

These are the simplest, since a Nodelist template is wrapped in the DIV and returned with no attempt to update it with the specific data.

String Templates

A string template is passed to glow.lang.interpolate, with the above data object as the data argument.

eg, for an Item, if the template is;

<h4>{title}</h4><p>{data.description}</p>

and the Item has a title of "Bambi" and an optional data aobject whose description property is "Very scary film.", the DIVs innerHTML will be;

<h4>Bambi</h4><p>Very scary film.</p>

Function Templates

A function template should be defined to expect a single argument and to return either a string or a Nodelist. The return value will them be treated as above, except that a string result will *not* be passed through glow.lang.interpolate (although you can obviously sue this in your function). The argument is the specific data object.

eg for a scale, if the scale is segmented into 15 minutes sections starting at midnight, and the template is;


function(seg) {
    function format(time) {
        var h = time.getHours(),
            m = time.getMinutes(),
            hh = ((h 

The first scale segment's content will be "00:00 - 00:15".

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.