Category List

The Category List javascript control (widget) can be used to produce a list of event categories. A common use of this control is to display the range of courses/events your business offers.

This list can be configured with a depth configuration option. You can choose to show just the top level categories, or display a nested version showing sub-categories to the configured depth.

This article will guide you through integrating a JavaScript control that will call the API and render a list of categories according to your configuration.

Contents

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

Getting Started

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

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

Explanation of the example configuration above:

• Define a container for the category list control.
• Load the Arlo Web Controls application code onto the page
• Define a configuration for an category list control/module (moduleType: "CategoryList") with a category tree depth of 1 (categoryTreeDepth: 1). This control will be displayed in the DOM element with id #category-list-control and rendered using the template in the script element with id #category-list-control-template.
• Start the application, specifying a platform ID of "demo", and the Category List 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

Category List Control Configuration

To create a category list control, you should use a moduleType value of "CategoryList".
Example: moduleType: "CategoryList"

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

Note: The 'category' customUrls setting for the category list requires two other configuration options, targetModuleType and targetFilterID.

Control Config Options Table

Field	Type	Default	Description
categoryTreeDepth	number	1	The level of sub-categories to display.
targetModuleType	string		To be used with the 'category' customUrls setting. Specifies the type of control the category list will link to. Possible values: "UpcomingEvents": The upcoming events list. "UpcomingEventsTraversable": The upcoming events list with the category filter style 'traversable'. "Catalogue": The category catalogue. "CatalogueTraversable": The category catalogue with the category filter style 'traversable'. "Index": The event template catalogue. "IndexTraversable": The event template catalogue with the category filter style 'traversable'.
targetFilterID	string		To be used with the 'category' customUrls setting. The filterControlId of the category filter on the control that the category list will link to.

Category List - Full Configuration Example

                            var categoryListControl = {
                                moduleType: "CategoryList",
                                targetElement: "category-list-control",                          
                                categoryTreeDepth: 1,                  
                                top: 5,
                                template: "category-list-control-template",
                                filter: {
                                    templateCode: "MGMT101"
                                },
                                customUrls: {
                                    category: "http://example.com/categorypage.html"
                                },
                                targetModuleType: "Catalogue",
                                targetFilterID: "1"
                            };                 
                     
                            <script id="category-list-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.

Available Template Properties

Field	Description
Name	A string representing the name of the category, up to 128 characters long.
Description	A structure containing marked-up text representing the description for this category. This field is often not suitable for display in lists and can contain arbitrary HTML including tables, lists and images. Structure fields ContentType: A string representing the content type of the description, usually application/xhtml. Text: The text content of the description.
ViewUri	A string representing a URI where more information for this category can be found. This may be an Arlo page, or it may be a custom URI.