Custom UI Mode Using ContextHub

 

Custom UI Mode Using ContextHub

 

Step 1:

Go to, http://localhost:4502/libs/cq/personalization/touch-ui/content/audiences.html

Or

Personalization->Audiences (Segments)

Create 3 Audiences as follows:

 

 

Step 2:

Go to, http://localhost:4502/etc/cloudsettings/default/contexthub.html

Or

Tools->Sites->ContextHub->Default->DefaultHub Configuration

Click on Create -> ContextHub UI Mode

 

Provide Title and Icon            

Icons can be found at:

https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/coral-ui/coralui3/Coral.Icon.html#availableIcons

 

Step 3:

Click on Create -> ContextHub StoreConfiguration

Provide Title and Type

Step 4:

Go to, 

Or

Tools->Sites->ContextHub->Default->DefaultHub Configuration->Search Engine

Click on Create -> ContextHub UI Module(generic)

 

Provide Title and Module Type

 

 

You can see created UI mode in CRXDE at following locations:

/etc/cloudsettings/default/contexthub/searchengine

/etc/cloudsettings/default/contexthub/demo/03-renderer-with-popover

/etc/cloudsettings/default/contexthub/03-jsonp-store

 

/etc/segmentation/contexthub

Step 5:

Go to, /apps/customUIMode

As above create 2 folders :

1. modules 

2. stores

Under that create folders of type “cq:ClientLibraryFolder”

1. modules -> 03-renderer-with-popover

2. stores -> 03-jsonp-store

Add categories property for both the above folders as follows:

1. 03-renderer-with-popover (contexthub.module.demo.03-renderer-with-popover)

2. 03-jsonp-store (contexthub.store.demo.03-jsonp-store)

Create js files under both folders as follows:

1. 03-renderer-with-popover -> renderer.renderer-with-popover.js

2. 03-jsonp-store -> store.jsonp-store.js

Add js code to both the files:

1.      store.jsonp-store.js

2.      renderer.renderer-with-popover.js

 

You can see your custom UI Mode Under contextHub menu.