Adding the Constellation Knowledge widget to UI Kit applications

While logged in to Dev studio:

1. In the header of Dev Studio, click Configure > Channels and interfaces.
2. Click Web Embed.
3. Use the following information to fill out the options:
   1. Channel name: Enter a name for the new Channel.
   2. Action: Select Display a page.
   3. Page: Select Knowledge widget.
4. Save the channel.
5. Click Generate web embed code, then copy the code.

You will use this code to configure the UI Kit application.

1. In the header of Dev Studio, click Configure >System > Release > Toggles.
2. Locate the EnableKMComponentWebEmbed toggle, and then enable it.
3. Add the KMEmbedBundle in the portal level harness.
   Nota: 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.

4. 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.
5. 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:
   1. pega.desktop.support.getDesktopWindow().KMPubSub.subscribe(<case id>, "SHARE ARTICLE EMBED", <function call>);
   2. pega.desktop.support.getDesktopWindow().KMPubSub.subscribe(<case id>, "SHARE BUDDY RESPONSE EMBED", <function call>);
6. 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:

1. Add the KMEmbedBundle in the portal level harness.
2. 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.
3. To prevent memory leaks and clean up subscriptions and specific Knowledge session storage entries in your application, call the cleanUpKMSessionEntriesAndPubSubEvents function.
4. 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.
5. 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:
   1. pega.desktop.support.getDesktopWindow().KMPubSub.subscribe(<case id>, "SHARE ARTICLE EMBED", <function call>);
   2. pega.desktop.support.getDesktopWindow().KMPubSub.subscribe(<case id>, "SHARE BUDDY RESPONSE EMBED", <function call>);
6. 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:

Log out of the application, then log back in to verify that the Knowledge component displays correctly.