Adding ContextHub to Pages and Accessing Stores adding-contexthub-to-pages-and-accessing-stores

Add ContextHub to your pages to enable the ContextHub features and to link to the ContextHub JavaScript libraries.

The ContextHub JavaScript API provides access to the context data that ContextHub manages. This page briefly describes the main features of the API for accessing and manipulating context data. Follow links to the API reference documentation to see detailed information and code examples.

Adding ContextHub to a Page Component adding-contexthub-to-a-page-component

To enable the ContextHub features and to link to the ContextHub JavaScript libraries, include the contexthub component in the head section of your page. The HTL code for your page component should resemble the following example:

<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

You also need to configure whether the ContextHub toolbar appears in Preview mode. See Showing and Hiding the ContextHub UI.

About ContextHub Stores about-contexthub-stores

Use ContextHub stores to persist context data. ContextHub provides the following types of stores that form the basis of all store types:

All store types are extensions of the ContextHub.Store.Core class. For information about creating a store type, see Creating Custom Stores. For information about sample store types, see Sample ContextHub Store Candidates.

Persistence Modes persistence-modes

Context Hub stores use one of the following persistence modes:

By default, Context Hub uses the Local persistence mode. If the browser does not support or allow HTML5 localStorage, Session persistence is used. If the browser does not support or allow HTML5 sessionStorage, Window.name persistence is used.

Store Data store-data

Internally, store data forms a tree structure, enabling values to be added as primary types or complex objects. When you add complex objects to stores, the object properties form branches in the data tree. For example, the following complex object is added to an empty store named location:

Object {
   number: 321,
   data: {
      city: "Basel",
      country: "Switzerland",
      details: {
         population: 173330,
         elevation: 260
      }
   }
}

The tree structure of the store data can be conceptualized as follows:

/
|- number
|- data
      |- city
      |- country
      |- details
            |- population
            |- elevation

The tree structure defines data items in the store as key/value pairs. In the above example, the key /number corresponds with the value 321, and the key /data/country corresponds with the value Switzerland.

Manipulating Objects manipulating-objects

ContextHub provides the ContextHub.Utils.JSON.tree class for manipulating JavaScript objects. Use the functions of this class for manipulating JavaScript objects before you add them to a store, or after you obtain them from a store.

Also, the ContextHub.Utils.JSON class provides functions for serializing objects to stings, and deserializing strings to objects. Use this class for handling JSON data to support browsers that do not natively include the JSON.parse and JSON.stringify functions.

Interacting with ContextHub Stores interacting-with-contexthub-stores

Use the ContextHub JavaScript object to obtain a store as a JavaScript object. Once you obtain the store object you can manipulate the data that it contains. Use the getAllStores or the getStore function to obtain the store.

Accessing Store Data accessing-store-data

The ContexHub.Store.Core JavaScript class defines several functions for interacting with store data. The following functions store and retrieve multiple data items that are contained in objects:

Individual data items are stored as a set of key/value pairs. To store and retrieve values you specify the corresponding key:

Custom store candidates can define additional functions that provide access to store data.

ContextHub Eventing contexthub-eventing

ContextHub includes an event framework that enables you to automatically react to store events. Each store object contains a ContextHub.Utils.Eventing object that is available as the store’s eventing property. Use the on or once function to bind a JavaScript function to a store event.

Using Context Hub to Manipulate Cookies using-context-hub-to-manipulate-cookies

The Context Hub JavaScript API provides cross-browser support for handling browser cookies. The ContextHub.Utils.Cookie namespace defines several functions for creating, manipulating, and deleting cookies.

Determining Resolved ContextHub Segments determining-resolved-contexthub-segments

The ContextHub segment engine enables you to determine which of the registered segments are resolved in the current context. Use the getResolvedSegments function of the ContextHub.SegmentEngine.SegmentManager class to retrieve resolved segments. Then, use the getName or getPath function of the ContextHub.SegmentEngine.Segment class to test for a segment.

ContextHub Segments contexthub-segments

ContextHub segments are installed below the /conf/<site>/settings/wcm/segments node.

The following segments are installed with the WKND tutorial site.

The rules that are used to resolve these segments are summarized as follows:

Debugging ContextHub debugging-contexthub

There are several options for debugging ContextHub including generating logs. See Configuring ContextHub for more information.

See an Overview of the ContextHub Framework see-an-overview-of-the-contexthub-framework

ContextHub provides a diagnostics page where you can see an overview of the ContextHub framework.