Arlo

Online Activities

The Online Acitivities javascript control can be used to produce a list of online activites for display on your website. Using the attributes associated with an activity, you can configure the control to display these attributes any way you like. A common use of this list is as a widget on the homepage of your website to promote your available online activities showing the activity name and summary.

The list can be a general one of all your online activities, or it can be configured to show activities associated with a templateID.

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

Contents

Getting Started

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

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

Explanation of the example configuration above:

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

Online Activities List

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

Online Activities Control Configuration

To create an online activities control, you should use a moduleType value of "OnlineActivities".
Example: moduleType: "OnlineActivities"

Please see the general control configuration guide for details about how to configure an online activities control.

Filters

The available filters for the online activities control can be found here, in the API documentation.
For more information on how to use these filters to configure a control, click here.

Online Activities - Full Configuration Example

                                var onlineAcitvitiesControl = {
                                    moduleType: "OnlineActivities",
                                    targetElement: "online-activities-control",                    
                                    top: 5,
                                    template: "online-activities-control-template",                        
                                    eventFullMessage: "Registration Limit Reached",
                                    callbacks: {
                                        onBeforeRender: function(eventData, jQuery){//Do something with onlineActivitiesData},
                                        onShow: function(getOAListItemsFunction, jQuery){//Do something with list item elements}
                                    },
                                    customUrls: {
                                        eventtemplate: "http://example.com/eventtemplatepage.html",                        
                                        presenter: "http://example.com/presenterpage.html",                        
                                        venue: "http://example.com/venuepage.html"
                                    }
                                };                 
                     
                                <script id="online-activities-control-template" type="text/html">
                                    <%= Name %>
                                 </script>

Code editor example

This editor allows you to view and modify the template/css and javascript used to create the complex control seen earlier. You can modify the code to fine tune the control to your needs. You can then take this code and add it to your own page to use this control with your own platform. Here's how:

  • The HTML
    • Copy the 3 lines at the top of the HTML section to where you would like the control to appear on your page. Make sure to include the wrapping container (with class='arlo') so that the scoped css rules will be applied.
    • Copy the remaining template scripts and the javascript controls script link to the bottom of your HTML page, before the </body> closing tag.
  • The CSS
    • Copy the code in the CSS section into a <style></style> tag on your page. Or save it to a file in your webserver and link to that file.
  • The Javascript
    • Copy the code in the javascript section into a <script></script> tag at the bottom of you HTML page, before the </body> closing tag.

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
OnlineActivityID An integer value that uniquely identifies this resource within the platform.
Name A string representing the name of the activity, up to 128 characters long.
Code A string representing the short code used when referring to this resource, up to 32 characters long. By default this value is based off the EventTemplate Code with a unique integer ID appended. For example, MGMT101-001 for the first Event instance based off a template with code MGMT101.
Summary A string representing a short plaintext one-line or one-paragraph summary of this activity, suitable for display in lists and search results. If the summary is blank, this field will be omitted. Field from the EventTemplate.
Description A structure containing marked-up text representing the description for this activity's template used in situations that require the template's full HTML content. This field is not suitable for display in lists and can contain arbitrary HTML including tables, lists and images. Field from the EventTemplate.
Structure fields
  • ContentType: String representing the content type of the description, usually application/xhtml.
  • Text: Text content of the description.
TemplateID An integer value that identifies the template associated with this activity.
TemplateCode The root EventTemplate Template Code used to generate the Code of this resource, up to 32 characters long.
DeliveryDescription A string describing the delivery of the activity, suitable as promotional text. For example Watch a recorded session and learn at your own pace!
ViewUri A string representing a URI where more details of the activity can be found.
Tags An array of strings representing tags associated with this activity. If the activity has no tags, this field will be omitted.
TemplateTags An array of strings representing tags associated with this activity's template. If the template has no tags, this field will be omitted.
ReferenceTerms A structure describing the vocabulary terms to use when referring to the activity.
Structure fields
  • Singular: The singular term for the activity. For example Video, Module, Course.
  • Plural: The plural term for the activity. For example Videos, Modules, Courses.
Credits A structure describing any credits associated with the activity, such as professional development hours or points. The structure supports multiple definitions (such as points and hours). Exact field names depend on those configured for the platform.
RegistrationInfo A structure containing information about registration for this activity.
Structure fields
  • RegisterMessage: String value with text to be shown in any register link or button -- see notes below.
  • RegisterUri: String representing a URI where registrations for this activity may be placed. If registrations are not being accepted for this activity, this field will be omitted.
Important notes
  • If the RegisterUri field has a value, it should be used in conjuction with the RegisterMessage field to produce a labelled link or button.
  • If the RegisterUri field is null or missing, the RegisterMessage must still be displayed as text (not a link). In these situations, this field usually contains a custom text message to be displayed for the activity such as Call us for more information. Ensure your display logic can handle displaying registration information as plain text, or as link/button.
  • It is important any code uses the RegisterMessage property for links/labels and does not assume it will always have the value "Register". The message field can contain other values such as "Join waiting list" when an activity is full but the waiting list feature is enabled for it.
AdvertisedOffers An array of AdvertisedOffer structures representing all promoted offers (pricing) for the activity, including base offers and discounts (if any).
Generated Fields
Field Description
Credits An unordered list of credits created from the credits object in the API results.

Template Helpers

Beside the global template helpers, the following template helpers are also available in your online activities 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
formatRegistrationInfo(format) RegistrationInfo string Allows you to specify how the registration info/link should be displayed. You have three options for the format.
Formats
  • "button" will show the registration info as a button.
  • "link" will show the registration info as a normal link.
  • "message" will show the registration info as plain text.
If the RegistrationInfo field from the API does not contain the ViewUri property used for generating the link/button, it will default to plain text.

Example: <%= formatRegistrationInfo("link") %>
formatAdvertisedOffers(config) AdvertisedOffers string Advertised offers is a collection of structures representing the offers (or prices) for the event. This field helper 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 }) %>

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 Template showEventTemplateInformation(config) Allows you to display the information from the events template.

Example: <%= showEventTemplateInformation({message:"Click here to show this events templates information", template:"#eventtemplate-template"}) %>