Region Selector

The region selector control allows you to change the region that all other controls on the page will use when making their requests. It uses cookies to persist the configured region code between page reloads.

When the region selector is changed, an event is fired which will cause all other controls to reload. All API requests made by these controls will be configured to return only data for the selected region.

This article will guide you through integrating a region selector into your page.

Contents

• Getting Started
• Code Editor Example
• Control Configuration

Getting Started

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

                        
                        <div id="region-selector"></div>  
                           
                        <script src="//connect.arlocdn.net/jscontrols/1.0/init.js" charset="utf-8" defer="defer"></script>       
                 
                        <script>
                            document.addEventListener("arlojscontrolsloaded", function () {
                                var regions = [{
                                    name: "New Zealand",
                                    value: "NZ"
                                }, {
                                    name: "Australia",
                                    value: "AU"
                                }, {
                                    name: "America",
                                    value: "US"
                                }];
                                var regionSelector = {
                                    moduleType: "RegionSelector",
                                    targetElement: "#region-selector",
                                    regions: regions
                                };
                                new ArloWebControls().start({
                                   "platformID": "demo.arlo.co",
                                    "modules": [regionSelector]
                                });
                            });
                        </script>
                    

Explanation of the example configuration above:

• Define a container for the region selector control.
• Load the Arlo Web Controls application code onto the page
• Define an array containing region data objects
• Define a configuration for an region selector control (moduleType: "RegionSelector") that will display a select element, with an option for each region definition. This control will be displayed in the DOM element with id #region-selector and rendered using an internal template that uses the regions data.
• Start the application, specifying a platform ID of "demo", and the Region Selector 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.

Region Selector

Region selector control configuration

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

Other than moduleType, region selector controls have the following config options

Field	Type	Default	Description
targetElement	string		The id of the DOM element that the control will be displayed in. Example: targetElement: "#my-region-selector"
regions	array		Specify the regions data array will use when rendering its template. This array of region data objects is used when rendering the region selector. The Arlo public API does not currently provide region data, so you must configure it yourself. A region data object contains two properties; a name used for display purposes only, and a value used in the API requests. Example: { name: "New Zealand", value: "NZ" }
defaultRegion	string		Specify the default region the control will display. Example: defaultRegion: "AU"