Event Template
The Event Template javascript control widget can be used to display a list of event templates in your platform, though is often built to display a single event template via a query string. A example use of this control is a widget, set up to act as the template page for multiple events. It can then be linked to from other pages, customising its contents to fit the event given in its query string. Another use would be to create a list of courses offered by your organisation, with each list item linking to the aforementioned event template page.
This article will guide you through integrating a JavaScript control that will call the API and render event templates according to your configuration options, template, and CSS.
Contents
- Getting Started
- Code Editor Example
- Control Configuration
- Custom Templates
- Template Helpers
- Sub Controls
Getting Started
Simple Event Template List
The following code block contains a simple example of all the elements necessary to create a simple Event Template list control on your webpage.
Based on the general getting started guide.
<div id="eventtemplate-control"></div>
<script src="//connect.arlocdn.net/jscontrols/1.0/init.js" charset="utf-8" defer="defer"></script>
<script id="eventtemplate-control-template" type="text/html">
<%= Name %>
</script>
<script>
document.addEventListener("arlojscontrolsloaded", function () {
var eventTemplatesControl = {
moduleType: "EventTemplate",
targetElement: "#eventtemplate-control",
template: "#eventtemplate-control-template"
};
new ArloWebControls().start({
"platformID": "demo.arlo.co",
"modules": [ eventTemplatesControl]
});
});
</script>
Explanation of the example configuration above:
- Define a container for an event template control.
- Load the Arlo JS Controls application code onto the page
-
Define a configuration for an event template control (
moduleType: "EventTemplate") that will display a list of all event templates. This control will be displayed in the DOM element with id#eventtemplate-controland rendered using the template in the script element with id#eventtemplate-control-template. - Start the application, specifying a platform ID of "
demo", and the Event Template Control configuration.
Advanced - Event Template Page
The following code block contains a more advanced example of all the elements necessary to create an Event Template Page control.
Based on the general getting started guide.
<div id="eventtemplate-control"></div>
<script src="./arlojscontrols-loader.js"></script>
<script id="eventtemplate-control-template" type="text/html">
<%= Name %>
<%= showEventTemplateFilters({
template: "#filtertemplate",
loadImmediately: true,
filterControlId: 1
}) %>
<%= showEventTemplateEventsList({
template: "#eventtemplatedemo-eventstemplate",
loadImmediately: true,
includeLoadMoreButton: true,
loadMoreButtonText: "Load More",
maxCount: 4,
filterControlId: 1,
queryStringConfig: ["event"],
customUrls:{
eventtemplate: "http://example.com/eventtemplatepage.html",
venue: "http://example.com/venue.html",
presenter: "http://example.com/presenter.html"
},
callbacks: {
onRender: "loadEvents"
}
}) %>
<%= showEventTemplateOnlineActivitiesList({
template: "#eventtemplatedemo-onlineactivitiestemplate",
loadImmediately: true,
maxCount: 1
}) %>
</script>
<script type='text/template' id='eventtemplatedemo-eventstemplate'>
<div class="arlo-item-header arlo-font-special arlo-text-color-darkest">
<%= formatDate(StartDateTime, "ddd DD MMM") %>
</div>
</script>
<script type='text/template' id='eventtemplatedemo-onlineactivitiestemplate'>
<%- ReferenceTerms.Singular %>
<%- DeliveryDescription %>
</script>
<script type='text/template' id='filtertemplate'>
<%= showFilter({filterCode: "locname"}) %>
<%= showFilter({filterCode: "onlineorvenue", displayStyle: "ul",
onlineOrVenueText: {online: "Live online", venue: "At a venue"},
callbacks: { onRender: "onFilterLoad" } }) %>
<%= showTimezoneSelector() %>
</script>
<script>
document.addEventListener("arlojscontrolsloaded", function () {
var eventTemplatePageControl = {
moduleType: "EventTemplate",
targetElement: "#eventtemplate-control",
template: "#eventtemplate-control-template",
queryStringConfig: ["eventtemplate"],
maxCount: 1,
includeLoadMoreButton: false
};
new ArloWebControls().start({
"platformID": "demo.arlo.co",
"modules": [eventTemplatePageControl]
});
});
</script>
Explanation of the example configuration above:
- Define a container for an event template control.
- Load the Arlo JS Controls application code onto the page
- Create a template for the event template, which uses sub control helpers to create an event list sub control, an event list filter sub control and an online acitivities sub control.
- Define templates for each of the sub controls.
-
Define a configuration for an event template control (
moduleType: "EventTemplate") that will display a list of all event templates. This control will be displayed in the DOM element with id#eventtemplate-controland rendered using the template in the script element with id#eventtemplate-control-template.
It will look for a querystring parameter calledeventtemplate. If it finds the parameter, it will use its value as the ID of the event template to filter the control by.
This means that the control will only show one result, and can act as an Event Template page.
The links to this page will be created by other controls by using thecustomUrlsconfiguration option. - Start the application, specifying a platform ID of "
demo", and the Event Template Control configuration.
Code Editor Example
For an explanation about the demo control code editors and how you can integrate these demos into your own page, click here.
Event Template Page Control
See the Pen BKeqwP by Arlo Software Ltd. (arlosoftware) on CodePen.
Event Template List Control
See the Pen b0bf812213a70cadda760d4007e38946 by Arlo Software Ltd. (arlosoftware) on CodePen.
Event Template Control Configuration
To create an event template control, you should use a moduleType value of "EventTemplate".
Example: moduleType: "EventTemplate"
Event template controls have the following configuration options, as well as the shared configuration options.
| Field | Type | Description |
|---|---|---|
| eventTemplates | array |
Allows you to specify an array of event template ids to filter the control by. Example: eventTemplates: [11]
|
| queryStringConfig | array |
Allows you to specify that the control should look for the 'eventtemplate' query string value in order to configure itself. Example: queryStringConfig: ["eventtemplate"]
|
| overwritePageTitle | boolean | Specifies whether the control should overwrite the page title with the name of the event template. |
| overwritePageDescription | boolean | Specifies whether the control should overwrite the description meta tag with the summary of the event template. |
Filters
The available filters for the event template control can be found here, in the API documentation.
For more information on how to use these filters to configure a control, click here.
Table of customisable URLS
The following URL data fields can be customised. See custom urls for further information. You must define all customUrls whether they are being used in the template or not. The system needs this to generate the correct URLs for rich snippets.
| Property Key | Affected event data field |
|---|---|
| eventtemplate | ViewUri |
| presenter | AdvertisedPresenters - each presenter objects ViewUri |
Event Template - Full Configuration Example
var eventTemplateControl = {
moduleType: "EventTemplate",
targetElement: "eventtemplate-control",
//Option 1 for showing a single event template (Or multiple! e.g.[11,12])
eventTemplates: [11],
//Option 2 for showing a single event template
queryStringConfig: ["eventtemplate"],
template: "eventtemplate-control-template",
callbacks: {
onBeforeRender: function(eventTemplateData, jQuery){//Do something with eventTemplateData},
onShow: function(getEventTemplateListItemsFunction, jQuery){
//Do something with event template item(s) elements
}
},
customUrls: {
eventtemplate: "http://example.com/eventtemplatepage.html",
venue: "http://example.com/venue.html",
presenter: "http://example.com/presenter.html"
}
};
<script id="eventtemplate-control-control-template" type="text/html">
<%= Name %>
</script>
Custom Templates
You can write a custom template for your control using HTML combined with the Underscore library templating system. See the general template guide for more information.
Available Template Properties
From API
| Field | Description |
|---|---|
| Code |
A string representing the short code used when referring to the template, up to 32 characters long. For example, MGMT101.
|
| Name | A string representing the name of this event, up to 128 characters long. |
| Categories |
An array of structures representing leaf categories associated with this template.
Structure fields
|
| AdvertisedDuration | A string representing the default advertised duration of events based on the template. |
| AdvertisedPresenters |
An array of structures representing presenters associated with this template. The order of the records in the array represents the preferred display order of presenters for the template (if there are several).
If the template has no presenters, this field will be omitted.
Structure fields
|
| BestAdvertisedOffers | An array of AdvertisedOffer structures representing the best generally available offers for the template and its events. |
| Tags | An array of strings representing tags associated with this template. If the template has no tags, this field will be omitted. |
| ViewUri | A string representing a URI where more information for this event can be found. This may be an Arlo page, or it may be a custom URI specified by the event organizer. |
| RegisterInterestUri | The URL of the page where interest can be registered by individuals to run a new event at a different location and/or time. Interest submissions are recorded as Leads in the platform. This field is included only if recording of interest is enabled for the template. |
| RegisterPrivateInterestUri | The URL of the page where interest can be registered by individuals to run an event at a private or onsite location (for internal staff training, for example). Interest submissions are recorded as Leads in the platform. This field is included only if recording of interest in running an event privately is enabled for the template. |
Generated Fields
| Field | Description |
|---|---|
| ContentFields | Creates an unordered list of all description content fields for this event template. |
Template Helpers
Beside the global template helpers, the following are available in your event template control templates.
Field Helpers
Field helpers will manipulate the resource data that comes from the API making it easier to display the information you want in the way you want, without writing any complicated code.
| Helper Function | Field(s) | Type | Description |
|---|---|---|---|
| contentField(fieldName) | FieldName | string |
Displays the content from the specified field.
Example: <%= contentField("Prerequisites") %>
|
| formatAdvertisedOffers(config) | BestAdvertisedOffers | string |
Advertised offers is a collection of structures representing the offers (or prices) for the event.
This field helpers provides you with a means of choosing how to display this information.
It has many configuration options to offer full flexibility of the information displayed, but each option has sensible defaults
so you do not have to specify them all.Settings
Example: <%= formatAdvertisedOffers({ showPriceWithTaxInclusive: true, showSingleOffer: false, showLabel: true, showCurrencyCode: true, showMessage: true, showTaxRate: true }) %>
|
| formatCollection(collection, format, showLinks) | AdvertisedPresenters, Categories, Tags | collections |
Allows you to format an event field which is a collection of items. You can choose to show the items in these collections as links,
provided they have the associated ViewUri property used for generating the link. You achieve this by passing true as the third paramter of this function (showLinks).Formats
Example: <%= formatCollection(Categories, "ul", true) %>
|
Sub Control Helpers
Additional information helpers allow you to embed information from other resources into your templates. See general sub controls documentation for more information
| Resource(s) | Helper Function | Description |
|---|---|---|
| Events | showEventTemplateEventsList(config) |
Allows you to display a list of events based on the event template. See the event list documentation for more details on how you can configure this sub control. An important configuration option here is the queryStringConfig, as this allows links from other pages to load an event template page and only show a single event.Example:
<%= showEventTemplateEventsList({
template: "#eventtemplatedemo-eventstemplate",
loadImmediately: true,
includeLoadMoreButton: true,
queryStringConfig: ["event"],
loadMoreButtonText: "Show More",
maxCount: 4,
filterControlId: 1
}) %>
|
| Filters | showEventTemplateFilters(config) |
Allows you to display a event filter control, to be paired with the event list created by the showEventTemplateEventsList sub control.
The facet results will be filtered by event template.Example:
<%= showEventTemplateFilters({
template: "#filtertemplate",
loadImmediately: true,
filterControlId: 1
}) %>
|
| Presenters | showPresenterProfiles(config) |
Allows you to display the profiles of the advertised presenters for the event template. Example: <%= showPresenterProfiles({message:"Click here to show the profiles for this events presenters", template:"#advertised-presenters-profiles-template"}) %>
|
| Online Activities | showEventTemplateOnlineActivitiesList(config) |
Allows you to display any online activities associated with the event template. Example: <%= showEventTemplateOnlineActivitiesList({template: "#eventtemplatedemo-onlineactivitiestemplate", loadImmediately: true}) %>
|