How to Close a Single Tab in a Pega Application Using the UI-Kit

General
,
1

Introduction

When developing applications in Pega, managing the user workspace is a crucial aspect of creating a clean and intuitive user experience. A common requirement is to provide users with the ability to close a specific tab, rather than having to manually click the ‘x’ icon. This is particularly useful after a process is completed or when a user needs to dismiss a temporary screen.

In this article, we’ll walk through a simple and effective method to programmatically close a single tab using a button and a straightforward JavaScript function provided by the Pega platform. This solution leverages the modern UI-Kit framework and is easy to implement in any Pega application.

The Solution

The most direct way to close the current tab is by using the Run Script action on a control, such as a button or a link. This method calls a built-in Pega JavaScript function to perform the close action.

As illustrated in the image below, you can configure a button to trigger this functionality.

fa7178cf-d027-47d0-8c4a-fb6365f8526a
fa7178cf-d027-47d0-8c4a-fb6365f8526a633×617 18.5 KB

Steps:

  1. Add a Button: In your section rule, add a button control that will serve as the “close” trigger.

  2. Configure the Action: Open the Actions tab in the button’s properties panel.

  3. Create an Action Set: Add a Click event and a Run Script action.

  4. Specify the Function: In the “Function Name” field, enter “pega.u.d.doClose". This function is not part of Pega’s officially documented public API. It is an internal Pega JavaScript function that could, in theory, change between versions.

That’s it! When the user clicks this button, the pega.u.d.doClose function will be executed, and the tab containing the button will be closed.

Alternative Functions

While pega.u.d.doClose is the most common solution, there is other functions that can be used in different contexts:

  • pega.desktop.closeHarness(): This function is generally used to close the entire harness. It can be useful in scenarios where you want to close a harness that was launched as a modal dialog or a separate document.

    • Note: this function is referenced in community discussions but is not part of Pega’s officially documented API. Use with caution and test thoroughly across your target Pega versions.

For most standard use cases where you simply need to close the current tab, pega.u.d.doClose remains the simplest and most reliable choice.

Conclusion

Providing a one-click method to close a tab enhances usability and helps streamline workflows within your Pega application. By using the Run Script action and the built-in pega.u.d.doClose function, you can implement this feature in a matter of minutes without complex configurations. This approach is not only efficient but also ensures compatibility with Pega’s UI-Kit framework.

References