Venues

The Venue javascript control (widget) can be used to display a list of the venues in your platform. It can also be configured to display a single venue, via a query string parameter value. An example use of this control is creating a widget to act as venue page. It is setup to be configured via query string, and then linked to from another page to show specific venue information. Another use would be to create a list of venues in your organisation, and each list item might link to the aforementioned venue page.

This article will guide you through integrating a JavaScript control that will call the API and render presenters according to your configuration options, template, and CSS.

Contents

• Getting Started
• Code Editor Example
• Control Configuration
• Custom Templates
• Template Helpers

Getting Started

The following code block contains a simple example of all the elements necessary to create a Venue control on your webpage.
Based on the general getting started guide.

                        
                        <div id="venue-control"></div>  
                           
                        <script src="//connect.arlocdn.net/jscontrols/1.0/init.js" charset="utf-8" defer="defer"></script>       
                 
                        <script id="venue-control-template" type="text/html">
                            <%= Name %>                        
                            <%= createMap() %>
                        </script>
                        <script>
                            document.addEventListener("arlojscontrolsloaded", function () {
                                var venueControl = {
                                    moduleType: "Venues",
                                    targetElement: "#venue-control",      
                                    template: "#venue-control-template"
                                };  
                                new ArloWebControls().start({
                                   "platformID": "demo.arlo.co",
                                    "modules": [venueControl]
                                });
                            });
                        </script>
                    

Explanation of example configuration above:

• Define a container for the venue control.
• Load the Arlo Web Controls application code onto the page
• Define a configuration for an venue control (moduleType: "Venues") that will display a list of all venues. This control will be displayed in the DOM element with id #venue-control and rendered using the template in the script element with id #venue-control-template.
• Start the application, specifying a platform ID of "demo", and the Venue 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.

Venue Page

Venue List

Venue control configuration

To create a venue control, you should use a moduleType value of "Venues".
Example: moduleType: "Venues"

The venue control has the following config options, as well as the shared configuration options.

Field	Type	Default	Description
venues	string		Allows you to specify an array of venue ids to filter the control by. Example: venues: [11]
queryStringConfig	string		Allows you to specify that the control should look for the 'venue' query string value in order to configure itself. Example: queryStringConfig: ["venue"]

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
venue	ViewUri

Venue - Full Configuration Example

                            var venueControl = {
                                moduleType: "Venues",
                                targetElement: "venue-control",
                                //Option 1 for showing a single venue (Or multiple! e.g.[11,12])      
                                venues: [11],     
                                //Option 2 for showing a single venue                  
                                queryStringConfig: ["venue"],  
                                template: "venue-control-template",       
                                callbacks: {
                                    onBeforeRender: function(venueData, jQuery){//Do something with venueData},
                                    onShow: function(getVenueListItemsFunction, jQuery){
                                        //Do something with venue item(s) elements
                                    }
                                },
                                customUrls: {                     
                                    venue: "http://myawesomewebsite.com/venuepage.html"
                                }
                            };                 
                     
                            <script id="venue-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
VenueID	An integer value that uniquely identifies this resource within the platform.
Name	A string representing the name of the name of the venue, up to 256 characters long.
GeoData	A structure containing geographical coordinates of the venue location, used with mapping APIs. This field is present only if map data for the venue is available. Structure fields PointLatitude: A float value with the latitude coordinate value. PointLongitude: A float value with the longitude coordinate value.
PhysicalAddress	A structure representing the physical address of the venue. This field is present only if address information for the venue is available. Structure fields StreetLine1: Line 1 of the street address. StreetLine2: Line 2 of the street Address. StreetLine3: Line 3 of the street Address. StreetLine4: Line 4 of the street Address. Suburb: The address suburb. City: The address city. State: The address state. PostCode: The address post code. Country: The address country.
FacilityInfo	A FacilityInfo structure containing parking and directions information for the venue. This field is only present if this facility information is available.
ViewUri	String representing a URI containing more information about the venue. This field is present only if a URL with additional information is available.

Generated fields

Field	Description
AllFacilityInfo	Creates an unordered list of all facility information available for the venue.
Directions	Contains the Directions data for the venue, or an empty string if the data doesn't exist.
Parking	Contains the Parking data for the venue, or an empty string if the data doesn't exist.

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
createMap(mapConfig)	Location, GeoData	object	Allows you to embed a google map (image) using the coordinate information of the event. This will construct a map of the specified type that calls the google maps api. The parameter is a simple javascript object that allows you to specify the type, width, height, and zoom settings for the map. Map Types: "embed" Creates a embeded google map with a marked location and info popup and can use the logged in users Google account to store the location "dynamic" Creates a dynamic javascript map with a marker on the location. "static" Creates a static map (an image) with a marker on the location Example: <%= createMap({width: 200, height: 200, zoom: 16, type:'embed'}) %>