Components
Page Components
Main Templates, Sub Templates, CSSs, JavaScripts and Definitions are generally linked as components to lists from the Admin area. By linking them to lists, their use is automatically implied to all objects in the list and inherited down to their children.
These component objects play a particular role in the construction of the page.
- Main Templates form the main structure of the site. They dictate things such as the position of the Site Header, Footer, Menu & Login link. They are also almost always the same for an entire site. A Site must have a Main Template and only one can be in use at a time.
Note: The Main Template shouldn't be confused with the Site Template. The site template is responsible for the HTML header area and positioning all of the components within it. - Sub Templates are different depending on the object that is being displayed and they can be stacked. Sub templates are setup for things like Articles or Companies where lots of items the same are to be displayed in a set format. Simple pages do not have to have a Sub Template.
For security reasons, Data elements must now have a sub template. This ensures that the display of the data element has been considered by the site developer. - CSSs and JavaScripts can either be an object containing the actual CSS/JS or can be a URL pointing to a Local or RemoteCSS/JS file.
Either way, they will be added to an internal list and included on the page in the {PAGE_CSS} or {PAGE_JS} areas of the Site Template when the page is rendered.
If the content requiring the CSS and JavaScript is loaded using an AJAX call then the details will be returned with the data response and loaded dynamically into the DOM. - Definitions are chunks of code that are inserted immediately below the <body> tag and before the Main Template starts. This code is not intended to produce any output but simply defines things such as functions and variables.
Other objects can also be linked as components but they will not be used directly, just added to the cached array of objects for use later on.
By linking other objects as components, it ensures they are bought in along with the main components, saving time later on.
Components added to a list will only be included if they are marked as belonging to the current domain or not linked to any domain. Any object can be linked to multiple domains.
Template Components
CSSs, JavaScripts, Sub Templates, Definitions, and now any other objects, can also be linked to Main or Sub Templates using the {COMPONENT()} command.
{COMPONENT()}
This can take a list of object IDs that are to be cached in to the current page as well as adding CSS and JS to the Page Header.
This differs from components linked to a list in that it can be placed within an {IF()} statement for example indicating that it may or may not be used. It is also not dependant on the current domain.
Objects included using the COMPONENT command will be included in the same way as a List Component with the following exceptions:
- All Templates will be added as Objects
- Definitions will be included at the position of the COMPONENT command and not at the top of the page.
- ONVALID-INLINE JavaScript can only be included using the component command.
It will generally be quicker to bring in any other objects that may be needed during the course of the pages display during a single COMPONENT call rather than making multiple calls depending on various conditions.
e.g. {OBJ_DATA(1:0,3)} {IF({A}>{B})} {OBJ_DATA(2:0,3)} {ELSE} {OBJ_DATA(3:0,3)}{END_IF} would be faster with the command {COMPONENT(1,2,3)} at the beginning.
JavaScript Components
JavaScript included content can be loaded into particular locations depending on additional Special Text contained within the title of the component.
- ONLOAD(default) - will indicate that the JavaScript is to be placed after all the other included scripts but before the UDB System JavaScript.
- ONLOAD-INLINE - will indicate that the JavaScript is to be placed inline on the page after the normal ONLOAD references.
- ONLOAD_B - will indicate that the JavaScript is to be placed after the UDB System JavaScript but before the Document Ready Script
- ONLOAD_B-INLINE - will indicate that the JavaScript is to be placed inline on the page after the ONLOAD_B references.
- ONREADY-INLINE - will indicate that the JavaScript will be placed inline within a $(document).ready(function(){...}) after the UDB System Document Ready JavaScript.
This will only apply to JavaScript held within a UDB object and not JavaScript Document References. - ENDOFBODY - will indicate that the the JavaScript references are to be placed immediately before the closing body tag.
- ENDOFBODY-INLINE - will indicate that the the JavaScript is to be placed inline on the page after the ENDOFBODY references.
So the CSS and JavaScript will appear in the following order:
- System CSS References []
- Component CSS References []
- Inline CSS
- System On Load JavaScript references []
- ONLOAD JavaScript references []
- ONLOAD-INLINE Inline JavaScript
- System On Load Inline JavaScript
- ONLOAD_B JavaScript references []
- ONLOAD_B-INLINE Inline JavaScript
- System Inline JavaScript within Document Ready Function
- ONREADY-INLINE Inline JavaScript within Document Ready Function
- System End of Body JavaScript references (including bootstrap.min.js) []
- ENDOFBODY JavaScript references []
- ENDOFBODY-INLINE Inline JavaScript
If multiple items are found within any category then they will be ordered according to the Component Relationship Level.
As well as CSS and JavaScript included using Component Links and the COMPONENT command, Inline CSS and JavaScript can be added using the following commands:
- {CSS}...{END_CSS} - this will add content to type 3 above
- {JAVASCRIPT()} {END_JAVASCRIPT} - this will add inline content to the different types (6, 9, 11, 14) above depending on the optional parameter (ONLOAD, ONLOAD_B, ONREADY, ENDOFBODY)