Presenters

The Presenters javascript control widget can be used to display a list of the presenters in your platform, though it is often built to display a single presenter via a query string. A example use of this control is a widget, set up to act as presenter page. It can then be linked to from other pages, customising its contents to fit the presenter given in its query string. Another use would be to create a list of presenters in your organisation, and each list item might link to the aforementioned presenter 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.

Getting Started
Code Editor Example
Control Configuration
Custom Templates
Template Helpers
Sub Controls

Getting Started

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

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

Explanation of the example configuration above:

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

Presenter Page

See the Pen Presenter Page by Arlo Software Ltd. (arlosoftware) on CodePen.

Presenter List

See the Pen Presenter List by Arlo Software Ltd. (arlosoftware) on CodePen.

Presenter Control Configuration

To create a presenter control, you should use a moduleType value of "Presenters".
Example: moduleType: "Presenters"

Presenter controls have the following config options, as well as the shared configuration options.

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

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

Presenter - Full Configuration Example

                            var presenterControl = {
                                moduleType: "Presenters",
                                targetElement: "presenter-control",
                                //Option 1 for showing a single presenter (Or multiple! e.g.[11,12])      
                                presenters: [11],     
                                //Option 2 for showing a single presenter                  
                                queryStringConfig: ["presenter"],  
                                template: "presenter-control-template",       
                                callbacks: {
                                    onBeforeRender: function(eventTemplateData, jQuery){//Do something with eventTemplateData},
                                    onShow: function(getEventTemplateListItemsFunction, jQuery){
                                        //Do something with event template item(s) elements
                                    }
                                },
                                customUrls: {                     
                                    presenter: "http://example.com/presenterpage.html"
                                }
                            };                 
                     
                            <script id="presenter-control-template" type="text/html">
                                <%= FullName %>
                            </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
PresenterID	An integer value that uniquely identifies this resource within the platform.
FullName	A string representing the name of the full name of the presenter (first and last name), up to 128 characters long.
FirstName	A string representing the first name of the presenter, up to 64 characters long.
LastName	A string representing the last name of the presenter, up to 64 characters long.
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.
Profile	A Profile structure containing promotional information about the presenter such as a professional profile, qualifications and interest information. This field is only present if public profile information is available.
SocialNetworkInfo	A SocialNetworkInfo structure containing social network references for the presenter such as Twitter, Facebook, Google+ and LinkedIn details. This field is only present if public social network information is available.

Generated fields

Field	Description
AllProfileInfo	Creates an unordered list of all profile information available for the presenter.
ProfessionalProfile	Contains the ProfessionalProfile data for the presenter, or an empty string if the data doesn't exist.
Qualifications	Contains the Qualifications data for the presenter, or an empty string if the data doesn't exist.
Interests	Contains the Interests data for the presenter, or an empty string if the data doesn't exist.
AllSocialNetworkInfo	Creates an unordered list of all social network information available for the presenter.
TwitterID	Contains the twitter id for the presenter, or an empty string if the data doesn't exist.
FacebookID	Contains the facebook id for the presenter, or an empty string if the data doesn't exist.
LinkedInID	Contains the linked in id for the presenter, or an empty string if the data doesn't exist.
GooglePlusID	Contains the google plus id for the presenter, or an empty string if the data doesn't exist.

Template Helpers

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
Event Templates	showPresentersEventTemplates(config)	Allows you to display a list of events templates the presenter is associated with. Example: `<%= showPresentersEventTemplates({ template: "#eventtemplates-template" }) %>`
Events	showPresentersEvents(config)	Allows you to display a list of events the presenter is presenting. Example: `<%= showPresentersEvents({ template: "#events-template" }) %>`