To ensure the delivery of prompt responses from CSRs when interacting with customers through numerous synchronous and asynchronous text channels and multiple concurrent interactions, an improved UI architecture is required. To improve performance, starting in Pega Customer Service 8.1, a new user interface (UI) architecture is available.

Application performance improvement expectations include faster data loads, faster switching between the interaction tabs, and maintaining contextual data in the interaction channel when users rapidly open, update, and close the interactions. This updated architecture introduces AJAX containers, associated requestor changes, and synchronization with third-party applications that can be used for text interactions in combination with the Pega desktop.

After reviewing the complete UI architecture, Pega architects are able to:

• Understand UI architectural patterns in the Interaction Portal
• Prepare for upgrades to existing Pega implementations
• Utilize the Javascript APIs to synchronize third-party applications with Pega and follow the outlined best practices

UI architecture of Pega Customer Service 7.4 and earlier

The following figure illustrates the architectural model in Pega Customer Service 7.4 and earlier:

In the old UI architecture, every case that was launched from the Add Task menu would create a new iframe (shown in the image as yellow blocks), which resulted in the creation of many iframes in an HTML document. For each launched case, the driver and composite (customer 360) would get refreshed and loaded, which in turn refreshed a large amount of content in the browser.

In addition, the interaction header and the text channel conversation window, such as Email, Chat, or Social, were outside the context of a case or pink block, which made the case and customer-related data dependent on the requestor level data pages. Whenever an update was made inside the case, the requestor level data pages were synchronized to maintain the context in the header and the conversation layers. This design lead to a slower response time and slower page loads.

UI Architecture of Pega Customer Service 8.1

The adoption of a new UI architecture introduces an AJAX container that is used to load the case flow actions/assignments when a case is launched from the Add Task menu. The following figure shows that the Interaction header, driver, AJAX container, composite, and text channel conversation area are now part of a single iframe (shown in the following image as a purple block). This is the new structure of all the harnesses that ship with the Pega Customer service 8.1.

The following figure illustrates the architectural model in Pega Customer Service 8.1:

In the new UI architecture, whenever a new case launches, a new AJAX container is created and displays in the iframe. When there are multiple cases or intent tasks queued in the driver area, only the appropriate AJAX container document refreshes and is brought to focus. This design improves performance by reducing the HTML content on the page and by reducing the number of refreshes of section results, which results in faster page loads.

The presence of conversation windows and the Interaction header in the same iframe document makes it easy to refer to the interaction, service case, and customer data. Referring to the requestor level data page is not required, which reduces data page synchronization and results in a significant reduction in the use of custom code for that purpose. For more information about the constraints that the application experienced in prior releases and the advantages of adopting the new UI architecture, see the Pega Customer Service Release Notes on the Pega Customer Service product page.

For more information about the finalized rules, see Rules that have been updated in Pega Customer Service.