Adding the Constellation Knowledge widget to UI Kit applications
You can integrate the Pega Knowledge Constellation component to a UI KIT application to use Knowledge Buddy features, such as semantic search and multi-category filtering.
Note: The ability to add the Constellation Knowledge component in UI Kit applications was introduced in the 24.2.1 patch release. To use this feature, ensure that you first install patch 24.2.1.
Before you perform the steps presented in this topic, you must enable the Knowledge component in your application, and then verify that the authentication profiles and dynamic system settings (DSS) have the correct configurations. Ensure that you configured the ConstellationPegaStaticURL and KnowledgeSVCURL DSS and the KM_OAuth_EndUSer authentication profile. For more information, see the implementation guide Adding the Constellation component to UI Kit applications and the topic Integrating a Buddy into a Pega application.
Once you correctly configure the application, authentication profiles and dynamic system settings, you generate a web embed code and then add the component to the UI Kit application. You can generate the code with the Knowledge Buddy application or any other Constellation application.
Generate the web embed code
While logged in to Dev studio:
- In the header of Dev Studio, click Configure > Channels and interfaces.
- Click Web Embed.
- Use the following information to fill out the options:
- Channel name: Enter a name for the new Channel.
- Action: Select Display a page.
- Page: Select Knowledge widget.
- Save the channel.
- Click Generate web embed code, then copy the code.
You will use this code to configure the UI Kit application.
Add the Knowledge component in Customer Service applications
- In the header of Dev Studio, click Configure >System > Release > Toggles.
- Locate the EnableKMComponentWebEmbed toggle, and then enable it.
- Add the KMEmbedBundle in the portal level harness.
Note: This bundle includes the following JavaScript files KM_PubSub_Module and KMEmbedManager. Optional: You can add the JavaScript files directly to the existing bundle that is referenced in the portal harness.
- Optional: If the InteractionPortalRightPaneWrapper and the CSHomeRightPane rules are overidden in the implementation layer of the UI Kit application, to integrate the Knowledge component into your existing user interface (UI), add the KMWebEmbedGadget section rule as an embedded section in the UI. Pass the ContextID parameter which can be a static value or work object ID. Note that this step is necessary only if these rules are overridden.
- Optional: To subscribe to the Constellation Knowledge component events, for example, Share an article, override the KMEmbedSubscriberEventsExt section. Use this extension to customize the following events that are published from the Constellation Knowledge component:
- pega.desktop.support.getDesktopWindow().KMPubSub.subscribe(<case id>, "SHARE ARTICLE EMBED", <function call>);
- pega.desktop.support.getDesktopWindow().KMPubSub.subscribe(<case id>, "SHARE BUDDY RESPONSE EMBED", <function call>);
- Update the web embed snippet in the SetKMWebEmbedChannelConfigs Data transform.
You map the values from the web embed nsippet that you generated previously to the corresponding property in the SetKMWebEmbedChannelConfigs Data transform as shown in the following table:
| Update this property in the data transform | Using this value from the web embed snippet |
|---|---|
|
KMPegaServerUrl |
<pegaServerUrl> |
|
KMAppAlias |
<appAlias> |
|
KMAuthService |
<authService> |
|
KMClientID |
<clientId> |
Note: After you Update the data transform, log out of the application and then log in again to verify if the Knowledge component displays successfully. There will be a few seconds of delay on the initial load of the component.
Add the Knowledge component in Non-Customer Service applications
- Add the KMEmbedBundle in the portal level harness.
- To integrate the Knowledge component into your existing user interface (UI), add the KMWebEmbedGadget section rule as an embedded section in the UI. Pass the ContextID parameter which can be either a static value or work object id.
- To prevent memory leaks and clean up subscriptions and specific Knowledge session storage entries in your application, call the cleanUpKMSessionEntriesAndPubSubEvents function.
- Determine the appropriate timing for the cleanup. For example, if you want the cleanup to occur when closing a case where the component is added, you should call this function and pass the Case Id parameter at the point in the implementation application where you click Close to close the case. Note that where you call this function will vary depending on your use case.
- Optional: To subscribe to the Constellation Knowledge component events, for example, Share an article, override the KMEmbedSubscriberEventsExt section. Use this extension to customize the following events that are published from the Constellation Knowledge component:
- pega.desktop.support.getDesktopWindow().KMPubSub.subscribe(<case id>, "SHARE ARTICLE EMBED", <function call>);
- pega.desktop.support.getDesktopWindow().KMPubSub.subscribe(<case id>, "SHARE BUDDY RESPONSE EMBED", <function call>);
- Update the web embed snippet in the SetKMWebEmbedChannelConfigs Data transform.
You map the values from the web embed nsippet that you generated previously to the corresponding property in the SetKMWebEmbedChannelConfigs Data transform as shown in the following table:
| Update this property in the data transform | Using this value from the web embed snippet |
|---|---|
|
KMPegaServerUrl |
<pegaServerUrl> |
|
KMAppAlias |
<appAlias> |
|
KMAuthService |
<authService> |
|
KMClientID |
<clientId> |
Log out of the application, then log back in to verify that the Knowledge component displays correctly.
This Topic is available in the following Module:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?