Extend Service Center navigation

Use the Service Center Extensibility Framework to extend your Service Center user experience.

As an administrator, you can use the cxSvcNavigation event, to listen to navigation events across the Service Center application, and use actions to enable navigation to the Service Console tab.

Here are the actions:

• Open Service Console Tab and Close Service Console Tab actions are used for custom page navigation.
• Open Page Inline and Close Page Inline actions enable custom secondary tab navigation.
• Set Service Console Tab Properties action can be used to update tab labels, icons, and other attributes.

Here's an example of how you implement them:

1. In Visual Builder Studio, go to Service within the Customer Experience (CX) group.
2. Open the service application and click the Event Listener tab.
3. Create a new cxSvcNavigation listener and click the Create Action chain.
4. Add an if condition and test it using one of the following payload attributes:
   • application: string
   • navigationType: string
     • DRILLDOWN
     • SCREENPOP
   • flow: string
   • page: string
   • pageParams: object
   • engagementData: object
   • extraAttributes: object
   • sourcePageInfo: object
5. From the Action Palette, find "CX Service: Open Service Console Tab" and add it to the Action Chain.
6. Define the properties to navigate directly to the details page:
   • Application: service
   • Flow: sr
   • Page: edit
   • Page Input Parameter: { srNumber: event.pageParams.srNumber, view: 'detail' }
   • Tab Label: {{ event.pageParams.Title }}
   • JET CSS Icon Class: oj-ux-ico-accessor-more
   Note: Set the stopPropagation property to True when you want to prevent the standard behavior.

Make sure you have a targeted condition so the action will not fire in all pages, unless that's your intention. In the previous example, if you want the custom navigation to happen only on the Service Center home page, you'd create this statement:

if (event.sourcePageInfo.page === "service-home" && event.application === "service" && event.page === "edit")