Online Programme Data Tags

Page elements can be given special data attributes to control the behaviour of the page.

They can be added to any html element but are generally used on divs.

Tag Description
Function Indicate the function associated with the html element.  See Data Functions below.
Mode The mode of a page.  Each page can have one or more modes that can be turned on and off in order to change the look of a page.
E.g. List mode, Table mode. See Page Modes.
Group A special data tag for grouping a set of HTML elements.See Groups.
Filters A special tag to control the display of the html element depending on the filters selected by the user.See Filters.

Some of the Data Tags are used to identify the template or object to be used with a filter of function.  These generally don't need to be used directly in page templates because they will be supplied automatically with in the JSON supplied to the page templates.

Tag Description
Id The Id of the object to be used with a Function.  The use of Id is dependant on the data function. See Data Functions below.
Context The context of the page template to be used with a Function. The use of Context is dependant on the data function. See Data Functions below.
Output The output of the page template to be used with a Function.  The use of Output is dependant on the data Function. See Data Functions below.
ParameterType The type of parameter in the page template to be used with a Function. The use of ParameterType is dependant on the data Function. See Data Functions below.
ParameterValue The value of parameter in the page template to be used with a Function. The use of ParameterValue is dependant on the data Function. See Data Functions below.

Data tags are always entered in lower case followed by a dash and the name of the data tag in lower case.

Examples

Function data tag is entered as data-function="Navigate"
Mode data tag is entered as data-mode="List"

Data Functions

There are a number of data function tags to carry out specific functionality within the page.  Data functions will either load additional content into the page or provide interactive functionality for the user.

Function Description
Header Display the common header used on all pages in the online programme. See Static Content Data Function.
Footer Display the common footer used on all pages in the online programme.  See Static Content Data Function.
Menu Display the main programme menu that is used on all pages in the online programme.  See Static Content Data Function.
ChangeMode Change the Mode of the current page.  See Page Modes.
Navigate Navigate to a different page in the online programme. See Navigate Data Function.
Open Open a page in slide out panel without navigating away from the current page. See Open Data Function.
Bookmark Toggle the bookmarking of the current page. See Bookmark Data Function.
BookmarkList Display a list of bookmarked items. See Bookmark List Data Function.
ListItems Display a list of html snippets, representing objects, built using a ListPageItempage template.  See List Items Data Function.

Different functions require different supporting data tags in order to make them work correctly.

Example

the Navigate function requires a Context and Output data tag in order to work correctly.

Page Template

Comments