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.