Issues with updating UI (ContextHub)

[test1234567]

Hello Community,

We have encountered an issue with ContextHub personalization. We have a dynamic component that includes some inline script as part of the component HTML. This component is similar to a carousel component. We need to personalize the content based on specific criteria, but we are facing a problem where the UI is not refreshed as expected when targeting is applied.

We have observed the following use cases where the issue occurs in authoring/preview mode:

1. Every time the content author navigates from Edit to Targeting mode (by selecting Targeting from the dropdown).
2. Switching the persona in ContextHub mode/preview (we have the option to switch to different profiles).
3. Switching between the options (Start Targeting) from DEFAULT to Audiences in order to author the content.
   
   I have already tried calling the function on EVENT_TEASER_LOADED, but it does not work in all use cases. Should I listen for any other events?
   
   window.ContextHub.eventing.on(window.ContextHub.Constants.EVENT_TEASER_LOADED, function () {
   // INITIALIZE HERE
   Calling the function to update the component UI
   })
   
   @Dipti_Chauhan 
   @Saravanan_Dharmaraj 
   @Imran__Khan 
   @h_kataria 

[Pallavi_Shukla_ · Accepted solution]

Hi @test1234567 

In addition to the EVENT_TEASER_LOADED, consider listening for events such as EVENT_TARGETING_MODE_CHANGED, EVENT_PERSONA_CHANGED, EVENT_AUDIENCE_CHANGED, and EVENT_CONTEXT_CHANGED to ensure that your component UI updates when switching between different targeting configurations, personas, or context changes. Furthermore, ensure that the UI refresh process includes your custom JavaScript logic (such as re-initializing the carousel).

Thanks,

Pallavi Shukla