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.


TagDescription
FunctionIndicate the function associated with the html element.  See Data Functions below.
ModeThe 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.
GroupA special data tag for grouping a set of HTML elements.
See Groups.
FiltersA 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.


TagDescription
IdThe Id of the object to be used with a Function.  The use of Id is dependant on the data function. See Data Functions below.
ContextThe 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.
OutputThe 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.
ParameterTypeThe 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.
ParameterValueThe 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.


E.g. Function data tag is entered as data-function="Navigate"

E.g. 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.


FunctionDescription
HeaderDisplay the common header used on all pages in the online programme. See Static Content Data Function.
FooterDisplay the common footer used on all pages in the online programme.  See Static Content Data Function.
MenuDisplay the main programme menu that is used on all pages in the online programme.  See Static Content Data Function.
ChangeModeChange the Mode of the current page.  See Page Modes.
NavigateNavigate to a different page in the online programme. See Navigate Data Function.
OpenOpen a page in slide out panel without navigating away from the current page. See Open Data Function.
BookmarkToggle the bookmarking of the current page. See Bookmark Data Function.
BookmarkListDisplay a list of bookmarked items. See Bookmark List Data Function.
ListItemsDisplay a list of html snippets, representing objects, built using a ListPageItem page template.  See List Items Data Function.


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


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


Related Articles

Page Template