HTML5 Viewer SDK API Documentation 


Class Index

Classes in


The SearchManager is a non-visual component which implements parsing of the search text input, communication with the search server and processing of search results returned by the search server.

First, the current MediaSetDesc must be set on SearchManager instance by calling its setMediaSet() method, information about the media set is needed in order to compose a request to the search service. Then, the search is initiated by calling search() method with a search text as a single argument. When the response from the search server is loaded and processed, SearchEvent.SEARCH_COMPLETED event is dispatched with a SearchResultsDesc instance as an argument. Such SearchResultsDesc instance can later be used for passing search results to other search feature components like SearchPanel and SearchEffect. If search processing fails, SearchEvent.SEARCH_FAILED event is sent.

Customizing Behavior Using Modifiers

Modifiers change SearchManager default behavior. They are passed to the component by the ParameterManager instance specified in the constructor.

The following modifiers are supported:

serverurlisRootPathImage Serving root path. If no domain is specified, the domain from which the viewer is served is used./is/image/
searchserverurlsearchRootPathSearch service root path. If no domain is specified, the domain from which the viewer is served is used./s7search/

Class Summary
Constructor Attributes Constructor Name and Description, settings, compId)
Method Summary
Method Attributes Method Name and Description
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the SearchManager component.
Disposes the component.
Returns the current media set.
Executes a search for specified search text.
Sets the current media set.
Sets 1-N # of modifiers for the component.
Class Detail, settings, compId)
Example Code

This example demonstrates how to use the "search"-components in a simple viewer. In this example Container, PageView, SearchManager, SearchButton, SearchPanel, SearchEffect objects are created. Clicking the SearchButton button a search dialog will appear and it allow user to input "search text" for searching. The code below does the following:

  1. The Scene7 HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
  2. CSS Styles are defined in the document head to control the appearance of the PageView, SearchPanel and SearchButton components.
  3. The s7sdk.Util.init() method is called to initialize the SDK.
  4. A ParameterManager object is created to handle component modifiers for the viewer.
  5. An initViewer() function is defined. This function initializes a couple of modifiers (hard coded for example purposes), then creates the component objects required for this simple example. The initViewer() function also adds event listeners that designate functions to handle relevant component events (which might be dispatched by the components as a result of user interactions, changes in a component's state, etc.).
  6. A handler function is defined to respond to the component event listener added in the initViewer() function.
  7. An event listener is added to the ParameterManager object that designates the initViewer() function as the handler to call when the Scene7 SDK is loaded and ready.
  8. Finally, the init() method is called on the ParameterManager object to start the viewer.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Search Example</title> <!-- To run this example locally you need to replace this with an absolute SDK path. For more information check the HTML5 Viewers SDK User Guide or the examples included in the package. --> <script language="javascript" type="text/javascript" src="../js/s7sdk/utils/Utils.js"></script> <script language="javascript" type="text/javascript"> s7sdk.Util.lib.include('s7sdk.common.Button'); s7sdk.Util.lib.include('s7sdk.common.ControlBar'); s7sdk.Util.lib.include('s7sdk.common.Container'); s7sdk.Util.lib.include('s7sdk.set.MediaSet'); s7sdk.Util.lib.include('s7sdk.set.PageView'); s7sdk.Util.lib.include(''); s7sdk.Util.lib.include(''); s7sdk.Util.lib.include(''); </script> <style type="text/css" media="screen"> .s7container { width:600px; height:400px; } .s7pageview { height: 400px; width: 600px; top: 40px; left: 20px; position: relative; border: solid 1px #cccccc; } .s7controlbar{ position: relative; background-color: #9e9e9e; top: 5px; left: 20px; width: 600px; position: absolute; z-index: 1; } .s7searchbutton { position: absolute; top: 2px; left: 10px; } .s7searchpanel { position: absolute; top: 40px; left: 20px; } </style> </head> <body> <script type="text/javascript" language="JavaScript"> var params, container, pageView, controls, mediaSet, searchButton,searchManager,searchPanel,searchEffect; // Initialize the SDK s7sdk.Util.init(); // Create ParameterManager instance to handles modifiers params = new s7sdk.ParameterManager(null,null,{ "asset" : "MediaSet.asset" }); // Define the function that initializes the viewer function initViewer(){ // Set hardcoded modifiers (not required when values are specified on the url) params.push("serverurl", ""); params.push("searchserverurl", ""); params.push("MediaSet.asset", "Viewers/eCat-Sample"); mediaSet = new s7sdk.set.MediaSet(null, params); mediaSet.addEventListener(s7sdk.event.AssetEvent.NOTF_SET_PARSED, onSetParsed); // Create the Container component object container = new s7sdk.common.Container(null, params, "s7container"); // Create the PageView component object pageView = new s7sdk.set.PageView(container, params, "pageview"); // Create the ControlBar component object controls = new s7sdk.common.ControlBar(container, params, "controls"); // Attach the PageView objects to the ControlBar controls.attachView(pageView, false); //Create SearchButton component object searchButton = new s7sdk.common.SearchButton(controls, params, "searchButton"); function onSearchButton() { if (searchButton.isSelected()){ searchPanel.setCSS(".s7searchpanel", "visibility", "inherit"); controls.allowAutoHide(false); } else { searchPanel.selectSwatch(-1); searchPanel.setCSS(".s7searchpanel", "visibility", "hidden"); controls.allowAutoHide(true); } } searchButton.addEventListener("click",onSearchButton, false); //Create SearchManager component object searchManager = new, params, "searchManager"); searchManager.addEventListener(s7sdk.event.SearchEvent.SEARCH_COMPLETED, function(e) { searchPanel.setSearchResults(e.s7event.searchResults); searchEffect.setSearchResults(e.s7event.searchResults); }, false); //Create SearchPanel component object searchPanel = new, params, "searchPanel"); searchPanel.setCSS(".s7searchpanel", "visibility", "hidden"); // Attach the SearchPanel object to the ControlBar controls.attach(self.searchPanel); // Define an event handler function to search submitted searchPanel.addEventListener(s7sdk.event.SearchEvent.SEARCH_SUBMITTED, function(e) {; }, false); // Define an event handler function to switch pages for SearchPanel.swatches selections searchPanel.addEventListener(s7sdk.AssetEvent.ITEM_SELECTED_EVENT, function(e) { searchEffect.setOverlaysVisible(true); searchEffect.setCurrentIndex(e.s7event.frame); if (e.s7event.frame != pageView.getCurrentFrameIndex()){ selectFromSearchPanel = true; } searchPanel.selectSwatch(-1); searchPanel.setCSS(".s7searchpanel", "visibility", "hidden"); searchButton.setSelected(false); controls.allowAutoHide(true); pageView.setCurrentFrameIndex(e.s7event.frame); }, false); //Create SearchEffect component object searchEffect = new"pageview", params, "searchEffect"); // Attach the SearchEffect object to the ControlBar controls.attachView(searchEffect, false); // Add an event listener for PageView selection events pageView.addEventListener(s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT, onPageViewSelected, false); } // Define an event handler function to switch pages for PageView item selections function onPageViewSelected(event){ switchToPage(event); } // Define a function to update all components to display the currently selected page function switchToPage(event){ pageView.setCurrentFrameIndex(event.s7event.frame); } // Define an event handler function to update the PageView, SearchManager and SearchPanel when the mediaset is parsed function onSetParsed(e) { pageView.setMediaSet(e.s7event.asset); searchManager.setMediaSet(e.s7event.asset); searchPanel.setMediaSet(e.s7event.asset); } // The ParameterManager will dispatch SDK_READY when all modifiers have been processed // and it is safe to initialize the viewer params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false); // Now it is safe to process the modifiers, the callbacks have been defined // this will trigger the SDK_READY event params.init(); </script> </body> </html>
{String} containerId
Not used for SearchManager.
{s7sdk.ParameterManager} settings
A parameter manager instance that represents the desired configuration.
{String} compId
Not used for SearchManager.
Method Detail
addEventListener(type, handler, useCapture)
Adds an event listener to the instance of the SearchManager component. The handler function receives a DOM event object of type Event. The object contains a property s7event, which references the associated custom event object, for example s7sdk.event.SearchEvent.

The event supported by the component is:

  • s7sdk.event.SearchEvent.SEARCH_COMPLETED - This event is dispatched by the a component to notify that the new search data is available after calling the search(). s7sdk.event.SearchEvent
  • s7sdk.event.SearchEvent.SEARCH_FAILED - This event is dispatched by the a component to notify that an error happened during search results processing. s7sdk.event.SearchEvent
  • Parameters:
    {String} type
    Event name, for example s7sdk.event.SearchEvent.SEARCH_COMPLETED.
    {Function} handler
    Function to be called when the event gets dispatched.
    {Boolean} useCapture
    Register capture phase.

    Disposes the component. All server calls which could be potentially running are stopped.

    {s7sdk.MediaSetDesc} getMediaSet()
    Returns the current media set.
    {s7sdk.MediaSetDesc} current media set.

    Executes a search for specified search text. Search results are communicated back to the application using SearchEvent.SEARCH_COMPLETED event. The search text may contain individual keywords or phrases surrounded by quotes.
    {String} searchText
    search string.

    Sets the current media set. Existing and cached search results are discarded.
    {s7sdk.MediaSetDesc} mediaSet
    current media set.

    Sets 1-N # of modifiers for the component.
    {Object} modObj
    A simple JSON object with name:value pairs of valid modifiers for a particular component

    Documentation generated by JsDoc Toolkit 2.4.0 on Thu Jan 30 2020 16:40:37 GMT+0200 (EET)