Extending ContextHub

Last update: April 17, 2024

CREATED FOR:

  • Developer

Define new types of ContextHub stores and modules when the ones provided do not meet your solution requirements.

Creating Custom Store Candidates

ContextHub stores are created from registered store candidates. To create a custom store, create and register a store candidate.

The JavaScript file that includes the code that creates and registers the store candidate must be included in a client library folder. The category of the folder must match the following pattern:

contexthub.store.[storeType]

The [storeType] part of the category is the storeType with which the store candidate is registered. (See Registering a ContextHub Store Candidate). For example, for the storeType of contexthub.mystore, the category of the client library folder must be contexthub.store.contexthub.mystore.

Creating a ContextHub Store Candidate

To create a store candidate, you use the ContextHub.Utils.inheritance.inherit function to extend one of the base stores:

Each base store extends the ContextHub.Store.Core store.

The following example creates the simplest extension of the ContextHub.Store.PersistedStore store candidate:

myStoreCandidate = function(){};
ContextHub.Utils.inheritance.inherit(myStoreCandidate,ContextHub.Store.PersistedStore);

Realistically, your custom store candidates define additional functions or override the store’s initial configuration. Several sample store candidates are installed in the repository below /libs/granite/contexthub/components/stores. To learn from these samples, use CRXDE Lite to open the JavaScript files.

Registering a ContextHub Store Candidate

Register a store candidate to integrate it with the ContextHub framework and enable stores to be created from it. To register a store candidate, use the registerStoreCandidate function of the ContextHub.Utils.storeCandidates class.

When you register a store candidate, you provide a name for the store type. When creating a store from the candidate, you use the store type to identify the candidate upon which it is based.

When you register a store candidate, you indicate its priority. When a store candidate is registered using the same store type as an already-registered store candidate, the candidate with the higher priority is used. Therefore, you can override existing store candidates with new implementations.

ContextHub.Utils.storeCandidates.registerStoreCandidate(myStoreCandidate,
                                'contexthub.mystorecandidate', 0);

Usually, only one candidate is necessary and the priority can be set to 0. But if you are interested, you can learn about more advanced registrations, which allows one of few store implementations to be chosen based on JavaScript condition (applies) and candidate priority.

Creating ContextHub UI Module Types

Create custom UI module types when the ones that are installed with ContextHub do not meet your requirements. To create a UI module type, create a UI module renderer by extending the ContextHub.UI.BaseModuleRenderer class and then registering it with ContextHub.UI.

To create a UI module renderer, create a Class object that contains the logic that renders the UI module. At a minimum, your class must perform the following actions:

  • Extend the ContextHub.UI.BaseModuleRenderer class. This class is the base implementation for all UI module renderers. The Class object defines a property named extend that you use to name this class as that which is being extended.

  • Provide a default configuration. Create a defaultConfig property. This property is an object that includes the properties that are defined for the contexthub.base UI module, and any other properties that you require.

The source for ContextHub.UI.BaseModuleRenderer is at /libs/granite/contexthub/code/ui/container/js/ContextHub.UI.BaseModuleRenderer.js. To register the renderer, use the registerRenderer method of the ContextHub.UI class. Provide a name for the module type. When administrators create a UI module based on this renderer, they specify this name.

Create and register the renderer class in a self-executing anonymous function. The following example is based on the source code for the contexthub.browserinfo UI module. This UI module is a simple extension of the ContextHub.UI.BaseModuleRenderer class.

;(function() {

    var SurferinfoRenderer = new Class({
        extend: ContextHub.UI.BaseModuleRenderer,

        defaultConfig: {
            icon: 'coral-Icon--globe',
            title: 'Browser/OS Information',

            storeMapping: {
                surferinfo: 'surferinfo'
            },

            template:
                '<p>{{surferinfo.browser.family}} {{surferinfo.browser.version}}</p>' +
                '<p>{{surferinfo.os.name}} {{surferinfo.os.version}}</p>'
        }
    });

    ContextHub.UI.registerRenderer('contexthub.browserinfo', new SurferinfoRenderer());

}());

The JavaScript file that includes the code that creates and registers the renderer must be included in a client library folder. The category of the folder must match the following pattern:

contexthub.module.[moduleType]

The [moduleType] part of the category is the moduleType with which the module renderer is registered. For example, for the moduleType of contexthub.browserinfo, the category of the client library folder must be contexthub.module.contexthub.browserinfo.

Experience Manager


Driving Marketing Agility and Scale: Transforming your Content Supply Chain with AI

Online | Strategy Keynote | General Audience

Marketers everywhere are feeling the pressure to deliver impactful campaigns faster and at greater scale. This Strategy Keynote explores...

Tue, Mar 18, 2:30 PM PDT (9:30 PM UTC)

Register

Put the Customer at the Center and Build Relationships That Last a Lifetime

Online | Strategy Keynote | General Audience

First impressions last a lifetime. Great first impressions feel personal, connected, and relevant right from the start. From the first...

Wed, Mar 19, 2:30 PM PDT (9:30 PM UTC)

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more

Register now