Event Template Catalogue

The Event Template Catalogue javascript control (widget) allows you create a list of event templates which is filterable by both event and event template properties. For example, you can show a list of event templates filtered by running in a certain location, even though the location property only exists in the actual events that are created from the event templates. The control will find events running in that location, and return the event templates those events were created from.

This article will guide you through integrating a catalogue control into your webpage 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
• Filtering
• Custom Templates
• Template Helpers

Getting Started

The following code block contains an example of all the elements necessary to create an Event Template Catalogue control on your webpage.
There is is quite a lot going on here as this control is one of our more complicated control types.
Based on the general getting started guide.

                                        
                        <div id="event-filter"></div>                                                         
                        <div id="eventtemplate-filter"></div>     
                            
                        <div id="catalogue-control"></div>  
                           
                        <script src="//connect.arlocdn.net/jscontrols/1.0/init.js" charset="utf-8" defer="defer"></script>
                
                        <script id="catalogue-control-template" type="text/html">
                            <%= Name %> 
                            <div class="nextrunning-<%= TemplateID %>"></div>
                        </script>
                        <script type='text/template' id='eventfilter-template'>
                            <%= showFilter({filterCode: "traversablecategories", showCount: false}) %>
                            <br />
                            <%= showFilter({filterCode: "locname", showCount: false}) %>
                        </script>
                        <script type='text/template' id='eventtemplatefilter-template'>
                            <%= showFilter({filterCode: "advertisedpresenter", showCount: false}) %>
                        </script>
                        
                        <script>
                            document.addEventListener("arlojscontrolsloaded", function () {
                                var catalogue = {                        
                                    moduleType: "EventTemplateCatalogue",
                                    targetElement: "#catalogue-control",      
                                    template: "#catalogue-control-template",
                                    eventFilterControlId: "eventfilter",
                                    eventTemplateFilterControlId: "eventtemplatefilter"
                                };
                                var eventFilter = {
                                    moduleType: "Filters",
                                    facetType: "Event",
                                    targetElement: "#event-filter",
                                    template: "#eventfilter-template",
                                    filterControlId: "eventfilter"
                                };
                                var eventTemplateFilter = {
                                    moduleType: "Filters",
                                    facetType: "EventTemplate",
                                    targetElement: "#eventtemplate-filter",
                                    template: "#eventtemplatefilter-template",
                                    filterControlId: "eventtemplatefilter"
                                };
                                new ArloWebControls().start({
                                   "platformID": "demo.arlo.co",
                                    "modules": [catalogue, eventFilter, eventTemplateFilter]
                                });
                            });
                        </script>
                    

Explanation of example configuration above:

• Define a container for the event template catalogue control, and the two filter controls which will be assigned to it.
• Load the Arlo Web Controls application code onto the page
• Define a configuration for an event template catalogue control (moduleType: "EventTemplateCatalogue") that will display a list of event templates This control will be displayed in the DOM element with id #catalogue-control and rendered using the template in the script element with id #catalogue-control-template.
  Note that the configuration also contains (optional) eventFilterControlId and eventTemplateFilterControlId options, that allow the user to assign filter controls to the catalogue list.
• Define configurations for event (facetType: "Event") and event template (facetType: "EventTemplate") filter controls (moduleType: "Filters") that will be used to filter the list. These are separate controls and require their own templates and target elements. As stated above, both controls are optional.
• Start the application, specifying a platform ID of "demo", and the Event Template Catalogue and Filter Control configurations.

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 Catalogue

Event Template Catalogue control configuration

To create an event template catalogue control, you should use a moduleType value of "EventTemplateCatalogue".
Example: moduleType: "EventTemplateCatalogue"

The event template catalogue control has the following config options, as well as the shared configuration options.

Field	Type	Default	Description
eventFilterControlId	string		Specify the ID of the filter control to use when filtering the list of event templates. You should have a corresponding filter control configured with this value. Example: eventFilterControlId: "eventfilter"
eventTemplateFilterControlId	string		Specify the ID of the filter control to use when filtering the list of event templates. You should have a corresponding filter control configured with this value. Example: eventTemplateFilterControlId: "eventtemplatefilter"
maxNextRunningEvents	number	1	The maximum number of next running events to display for each event template result. Example: maxNextRunningEvents: 3
resultCountTarget	string		The control maintains a count of the total results for the current filter selection. You can provide a target element on your page to display this count. If you do not provide this configuration option, the count will not be displayed. The value for this option should be a CSS style id selector for the element to display the count in. Example: resultCountTarget: "#resultCount"
nextRunningEventTemplate	string/function		The template used to render the control. Can be a javascript function or the id of the script tag containing the template. See the overview for more information on custom templates. All fields available to the upcoming events list can be used in the template. The Count field can also be used in the template to display a count of the next running events.
nextRunningOnlineActivityTemplate	string/function		The template used to render the control. Can be a javascript function or the id of the script tag containing the template. See the overview for more information on custom templates. All fields available to the online activity list can be used in the template.
nextRunningUseRegisterLink	boolean		By default the next running dates will link through to the event template page, if this option is specified the next running dates will link directly to the register form.

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	Presenters - each presenter objects ViewUri

Displaying the next running events for the results

In order to display next running events for this controls' results, you must provide a container in the template where they will be rendered once loaded. This container should be an HTML element with a class of 'nextrunning,' followed by a dash, followed by the template's ID. The following example demonstrates this.

                <script id="catalogue-control-template" type="text/html">
                <%= Name %>
                <div class="nextrunning-<%= TemplateID %>"></div>
                </script>
                    

Catalogue - Full Configuration Example

                            var catalogueControl = {
                                moduleType: "EventTemplateCatalogue",
                                targetElement: "#catalogue-control",      
                                template: "#catalogue-control-template",  
                                eventFilterControlId: "eventfilter",
                                eventTemplateFilterControlId: "eventtemplatefilter",                     
                                maxNextRunningEvents: 2, 
                                resultCountTarget: "#result-count",
                                callbacks: {
                                    onBeforeRender: function(eventTemplateData, jQuery){//Do something with eventTemplateData},
                                    onShow: function(getTemplateListItemsFunction, jQuery){
                                        //Do something with event template list item(s) elements
                                    }
                                },
                                customUrls: {             
                                    eventtemplate: "http://example.com/eventtemplatepage.html",
                                    venue: "http://example.com/venue.html",
                                    presenter: "http://example.com/presenter.html"
                                }
                            };                 
                     
                            <script id="catalogue-control-template" type="text/html">
                                <%= Name %>
                            </script>
                    

Filtering

An important aspect of this control is that while it displays Event Templates items as its results, it can be filtered by both event and event template filter types.
When filtering by an event filter type, only event templates that have an event that matches the filters will show. For example, if you filter by location, an event filter, then only event templates with an event running in that location will show.

To use filters of both types, you need to:

• Configure the control with eventFilterControlId and eventTemplateFilterControlId values.
• Provide two filter controls, one for event filters and one for event template filters. These controls should be configured with filterControlId values corresponding to those in the previous step.

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
TemplateID	An integer value that uniquely identifies this resource within the platform.
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 advertised duration of 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

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 view 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. 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 an HTML unordered list Example: <%= formatCollection(Categories, "ul", true) %>