Realtime data reload in Constellation

Hello,

we are moving our customer from Cosmos design to Constellation (infinity 24), mortgage application. Cosmos design has been heavily customised so we need to rebuild it to fit Constellation principles.

Currently, on the product selection page, the user can add multiple loans (define parameters for each), select which one they want to include in the comparison table which is displayed dinamically on the same screen as loans. They also have the button to restart the calculations when parameters in any of the loans have been changed.

As far as I know, we cannot add any additional buttons on UI (apart from the basic ones) and we cannot refresh data on UI (in this example in the table) without moving to the next screen which will trigger the calculations?

How can I address the current requirements in Constellation?

@bebem an excellent question, and it gets to the heart of how we build reactive user interfaces in Pega Constellation.

In traditional UI-Kit, we would often configure a “Refresh Section” action to see updates. In Constellation, we follow a more modern, declarative pattern: when the data changes, the UI automatically updates. There is no need for manual refresh configurations.

There are multiple ways to achieve this, it will come down to the varying outcomes required. I don’t quite get the nuances of your use case, so will cover a few you might want to explore:

  • Calculations - these will update real time, Constellation UI knows these fields need updating and will listen and post updates as needed
  • Form refresh settings - this is a little more than above, you are telling the system what fields to listen to
  • Pre/Post processing on embedded data - another '25 only feature, this allows you inbetween the action of adding an item to a list (in modal), to manipulate data
  • Flows or Optional Actions - Without some of the new features, or even with them, you can always use things like a flow for adding and comparing items,
    • Flow/Process would give you the opportunity to manipulate data in between each step of a flow.
      • I don’t have a nice reference document to refer to here but basic Pega processes, with decision shapes to choose which step to go to, allowing more items to be added and compared.
    • The same can be send for a optional action on a case, which could be promoted to make it more prominent.
  • Saveable Datapage - This would need to leverage a step or optional action, but when the “Save data page” step is executed, the Constellation client-side framework is automatically notified that the data page has been modified. Any UI component that is bound to the data page will instantly and automatically re-render to display the latest data—including the new item you just added. I haven’t personally implemented approach before, as I would go with one of the above.

A couple of Constellation 101 that might also help, they are not your exact scenario but can be used as inspiration…

  1. https://support.pega.com/discussion/complex-data-visualization-constellation
  2. How to implement the compare and select pattern in Constellation UI | Support Center