JavaScript add-ons/widgets

List of events

This control has been deprecated. Please use Arlo Web Controls instead.

The Arlo API can be used to produce a list of event [templates] for display on your own website. For example, you might want to promote a list with the names of your popular events, events in a particular category, or events presented by a particular individual.

Note this is a list of event template names, without dates. If you want to show a calendar list with upcoming dates, see the article covering Adding a list of upcoming events (calendar) to your website.

This article will guide you through integrating a JavaScript control that will call the API and render a list of events that match some criteria.

Live demo

Getting started

To quickly get started, download the ZIP (ls-api-demo-eventtemplates.zip) and open the index.htm file in your browser. This file contains all of the code referenced below.

Dependencies

The demo code in this article requires:

• JQuery 1.9 (it is compatible with JQuery 1.6 or higher if your own site uses an older version of JQuery)
• Knockout 2.2
• Arlo JavaScript API client (included in the ZIP)

Steps to integrate an event templates list into your own page

1. Add container markup (placeholder)

   Add some container markup to your page where you need the events list to appear. The element must contain a data-bind attribute referencing a template element for Knockout to use (see step 4).

                       <div class="ls-events">
                           <h3>Events</h3>
                           <div id="ls-events-content" data-bind="template: 'ls-events-tpl'"></div>
                       </div>
                   

2. Add script references

   At the bottom of your page, include references to the two key script files that contain the JavaScript API client, and the main code for producing the event templates list.

                   <script src="ls-apiclient-1.0.2.min.js" defer="defer"></script>
                   <script src="eventtemplateslist.js" defer="defer"></script>
                   

3. Add control init script

   Below the two script references above, add the code below to initialize the control.

                   <script defer="defer">
                   jQuery(document).ready(function () {
                       new LS.EventTemplatesListControl({
                           apiClient: new LS.Api.ApiClient({
                               apiBaseUrl: "http://api.arlo.co/",
                               platformID: "demo.arlo.co" //TODO: change platformID to point at your own instance
                           }),
                           filter: {
                               tag: "top 10"
                           },
                           maxCount: 10,
                           showErrorDetail: true,
                           renderTo: "#ls-events-content"
                       }).init();
                   });
                   </script>
                   

   The script example above configures the control to:

   • Point at a platform with ID demo. You should change this to be the ID of your own platform.
   • Show only (filter) event templates tagged with top 10 tags.
   • Show a maximum of 10 results
   • Render itself into a page element with ID ls-events-content.
4. Add Knockout template

   The Knockout template is a script element (with a known ID referenced in step 1) that contains HTML markup with Knockout binding directives to control how the list markup is generated. This template allows you to completely customise how the list is rendered, including the message that is displayed if there are no available events or if there is an error.

   The code below is just an example, and you are free to completely reformat this template according to your own site's needs. We do recommend it as a good starting point since it contains templates for handling empty lists and error display from the API.

   See knockoutjs.com for more information on the binding syntax used in this markup.

   <script id="ls-events-tpl" type="text/html">
   	 <!-- ko if: Success -->
   		    <!-- ko if: Count > 0 -->
   				 <ul data-bind="foreach: Items">
   					 <li><a data-bind="attr: { href: ViewUri }"><span class="ls-name" data-bind="text: Name"></span></a></li>
   				 </ul>
   		    <!-- /ko -->
   		    <!-- ko if: Count === 0 -->
   				 <div class="ls-empty"><p>Check back soon for information about our events!</p></div>
   		    <!-- /ko -->
   	 <!-- /ko -->
   	 <!-- ko if: !Success -->
   		<div class="ls-error">
   				 <p>Event information is not currently available.</p>
   				 <p>Please <a href="#" class="ls-refresh" data-bind="click: Refresh">try again</a> in a few moments.</p>
   				 <div data-bind="if: ShowErrorDetail">
   					 <p class="ls-error-detail"><span data-bind="text: ErrorCode"></span> - <span data-bind="text: ErrorMessage"></span></p>
   				 </div>
   		</div>
   	 <!-- /ko -->
   </script>

The attached ZIP contains a complete example of the steps outlined above. Download this file and open the index.htm file in your browser.