Search

The Search javascript control can be used to produce a search box and a list of event template search results for display on your website. Using the attributes associated with a search result, you can configure the control to display these attributes any way you like. Using the configuration settings associated with a search box, you can configure it's appearance and functionality.

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

Contents

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

Getting Started

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

                        
                                    <div id="arlo-search-box"></div>
                                    <div id="arlo-filters"></div>

                                    <div id="arlo-search-results"></div>

                                        <script src="//connect.arlocdn.net/jscontrols/1.0/init.js" charset="utf-8" defer="defer"></script>

                                        <script type="text/template" id="search-results-template">
                                            <h1 class="arlo-title"><a href="<%= ViewUri %>"><%= TitleHtml %></a></h1>
                                            <%= formatEventTemplateCategoryBreadcrumbs(CategoryPaths) %>

                                            <p><%= SummaryHtml %></p>

                                            <div class="arlo-nextrunning">
                                            <div class="nextrunning-<%= EventTemplateID %> arlo-next-running-wrapper" data-customuri="<%if(typeof   ViewUri!=='undefined'){%><%=ViewUri   %><%}%>"></div>
                                            </div>
                                        </script>

                                        <script type="text/template" id="filter-template">
                                            <%= showFilter({filterCode: "locname"}) %>
                                            <%= showFilter({filterCode: "templatecategory"}) %>
                                        </script>

                                        <script>
                                            document.addEventListener("arlojscontrolsloaded", function () {
                                                var platformID = "demo.arlo.co";

                                                var searchResults = {
                                                    moduleType: "Search",
                                                    searchControlID: 2,
                                                    searchBoxTarget: '#arlo-search-box',
                                                    searchResultsTarget: "#arlo-search-results",
                                                    maxCount: 5,
                                                    searchResultsTemplate: "#search-results-template",
                                                    targetSearchControlID: 2,
                                                    filterControlId: 1
                                                };

                                                var filter = {
                                                    moduleType: "Filters",
                                                    targetElement: "#arlo-filters",
                                                    template: "#filter-template",
                                                    filterControlId: 1
                                                };

                                                new window.ArloWebControls().start({
                                                    "platformID": platformID,
                                                    "showDevErrors": true,
                                                    "modules": [searchResults,filter]
                                                });

                                            });
                                        </script>

                    

Explanation of the example configuration above:

• Define a container for an upcoming events control.
• Load the Arlo JS Controls application code onto the page
• Define a configuration for an upcoming events control (moduleType: "UpcomingEvents") that will display 5 events (maxCount: 5). This control will be displayed in the DOM element with id #upcoming-events-control and rendered using the template in the script element with id #upcoming-events-control-template.
• Start the application, specifying a platform ID of "demo", and the Upcoming Event Control configuration.

• Define a container for the search box part of the control
• Load the Arlo Web Controls application code onto the page
• Define a configuration for a search control (moduleType: "Search") that will display a search box and a list of search results once a search has been entered. The search box part of the control will be displayed in the DOM element with id #arlo-search-box and the search results will be displayed in the DOM element with id #arlo-search-results The search results will be rendered using the template #search-results-template. Note that the configuration also contains (optional) filterControlId that allows the user to assign filter controls to the search results. The targetSearchControlID option is being used to associate the specify that the target control for the search results is this control.
• Define configurations options for the filters (moduleType: "Filters") that will be used to filter the search results. These are separate controls and require their own templates and target elements. As stated above, the filters control is optional.
• Start the application, specifying a platform ID of "demo.arlo.co", and the Search and Filter control configurations.

Search control configuration

To create a search control, you should use a moduleType value "Search". Example: moduleType: "Search"

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

Field	Type	Default	Description
includeSearchButton	boolean	true	Specifies whether to include a search button with the search box or not.
submitButtonHtml	string		Specify the HTML content for the search button.
queryStringConfig	array		Allows you to specify that the control should look for the 'search' query string value in order to configure itself.
searchControlID	number	1	The ID of this search control. For use with the targetSearchControlID option.
targetSearchControlID	number	1	Specify the ID of the search control to use to display the search results. If the same search control will be displaying the search box and results, this can be set to the same value as searchControlID.
autoUpdateResults	boolean	false	The search control can be set to display a dropdown of instant results as the user types into the search box. Use this option to specify whether the search control will display a dropdown of instant results or a separate list of search result.
searchBoxTarget	string		The id of the DOM element that the search box will be displayed in. Example: targetElement: "#search-box"
searchResultsTarget	string		The id of the DOM element that the search results will be displayed in. Example: targetElement: "#search-results"
nextRunningEventTemplate	string		The template used to render the control. Can be a javascript function or the id of the script tag containing the template. See the overview for >more information on custom templates. All fields available to the upcoming events list can be used in the template. The Count field can also be used in the template to display a count of the next running events.
maxNextRunningEvents	number		The maximum number of next running events to display.
searchResultsTemplate	string/function		The template used to render the search results. Can be a javascript function or the id of the script tag containing the template. See 'Provide a template' for more information. Example: template: "#my-control-template".
filterControlId	number	1	Specify the ID of the filter control to use when filtering the search results. You should have a corresponding filter control configured with this value. Example: filterControlId: "eventfilter"

Displaying the next running events for the results

In order to display next running events for this controls' results, you must provide a container in the template where they will be rendered once loaded. This container should be an HTML element with a class of 'nextrunning,' followed by a dash, followed by the template's ID. The following example demonstrates this.

                <script id="search-result-template" type="text/html">
                <%= Name %>
                <div class="nextrunning-<%= EventTemplateID %>"
                     data-registeruri="<%= RegisterInterestUri %>"
                     data-customuri="<%if(typeof ViewUri!=='undefined'){%><%=ViewUri %><%}%>">
                </div>
                </script>
                    

Filters

Filter controls used with the search module can be used to filter the search results list. The search results will be updated to display only the event templates and next running dates that match the applied filter. You can use the filterControlId configuration option to connect a search control with a filter control.

The available filter types for the search control are: locationName, categoryIDs.

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
Titlehtml	A string representing the title HTML of the template.
Summaryhtml	A string representing the summary HTML of the template.
viewuri	A string representing a URI where more information for this event can be found. This may be an Arlo page, or it may be a custom URI specified by the event organizer.
AdvertisedDuration	A string representing the advertised duration of the template.
Categorypaths	An array of the category paths of the event template. Can be used to generate a list of breadcrumbs. Structure fields Path: Array of the categories that make up the category path. CategoryID: Number values of the category ID. Name: String value of the name of the category. ViewUri: String value with the view URI of the category.
Eventtemplateid	An integer value that uniquely identifies this resource within the platform.
Nextscheduleddatetimes	An array containing the next scheduled date time instances of the event template.

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
formatEventTemplateCategoryBreadcrumbs (categoryPaths)	CategoryPaths		Formats the Category Paths as an HTML list.
formatAdvertisedOffers(config)	AdvertisedOffers	string	Advertised offers is a collection of structures representing the offers (or prices) for the event. This view helpers 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. 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 }) %>