Arlo

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

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(
                                        "plaformID": "demo",
                                        "controls": [ 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-control and 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(
                                        "plaformID": "demo",
                                        "controls": [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-control and rendered using the template in the script element with id #eventtemplate-control-template.
    It will look for a querystring parameter called eventtemplate. 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 the customUrls configuration 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"]

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
  • CategoryID: An integer value identifing the category.
  • Name: String value with the display name of the category.
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
  • PresenterID: An integer value identifing the presenter.
  • Name: String value with the full display name of the presenter.
  • ViewUri: String representing a URI containing information about the presenter such as their profile. This field is present only if a URL with additional information is available.
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
  • showSingleOffer: Depending on the display room available on your page, you may want to only show the best offer. If set to true, only the best offer will be displayed. Defaults to false.
  • showPriceWithTaxInclusive: Display prices including tax. Defaults to true.
  • showLabel: Show the label associated with the price. Defaults to true.
  • showMessage: Show the additional message associated with the price. Defaults to false.
  • showCurrencyCode: Show the currency code (e.g. AUD) the price is in. Defaults to false.
  • showTaxRate: Show the tax rate applied to the price (e.g. incl/excl. GST). Defaults to true.
  • freeText: Change the default text for a free event. Default to "Free"

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
  • "csv" will display the collection as a simple list of comma separated values.
  • "ul" will display the collection as a HTML unordered list.

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}) %>