Inspiration

Couple of years back Pegasystems announced the launch of a revolutionary UI design theme, the Cosmos Despite the absolutely stunning look-n-feel of the design theme, very few organizations till date have succeeded in adopting this new design theme. We wanted to create a solution that will help any and every client who wants to upgrade their Pega application to adopt and embrace the new Cosmos design strategy.

Given the fact that, most of the Pega applications around the globe have upgraded or are on the verge of upgrading to Pega Infinity; and that, Pega Cosmos is a mandatory stepping stone in order to get to Pega Constellation (React-based UI), we think our FastTrack2Cosmos accelerator will play a very importantly role in catalyzing the embracing of latest Pega UX standard, all around the planet.

Within the upcoming 1 or 2 years, all Pega projects in every sector, whether in financial services, healthcare, or any other industry – will see an urgent need to migrate their application to Cosmos. Our solution can be utilized by every customer.

What it does

If a team wishes to upgrade their UIKit-driven Pega application to the Cosmos theme, there are a number of things that the developers need to do manually step by step. For example,

  1. Decide which design theme is more suitable for the application – Cosmos or Clarity?
  2. Create a new application version that is built on Theme-Cosmos or Theme-Clarity, according to the decision taken in previous step.
  3. Create a new version of the skin. Decide whether to retain the previous custom styles or start a fresh one. Make the skin inherit from CosmosSkin/ClaritySkin.
  4. Update all relevant access groups to point to the new application.
  5. Update all relevant access groups to make use of the Cosmos (UserPortal) / Clarity (B2CPortal).
  6. Preferably upgrade all or most sections to leverage design templates.
  7. Find out “rule conflicts” – a list of rules that were overridden previously from UIKit layer and the same rule are also present in Cosmos/Clarity layer. These rules will then be withdrawn or saved as from Cosmos/Clarity layer and manually retrofit necessary customizations (if any).

Our FastTrack2Cosmos accelerator performs all these tasks automatically, in a few seconds. And all it needs is to collect is some basic information from the developers. And it does so with a simple GUI-based wizard that takes less than a minute to navigate through.

Important to mention is that our FastTrack2Cosmos is built as a lightweight component that can be very easily plugged into any application without requiring any knowledge about the Cosmos design principle.

The Benefits of FastTrack2Cosmos

The salient features and advantages of the FastTrack2Cosmos wizard in a nutshell are:

  • High scalability
  • Decreases the likelihood of having technical debt
  • Ease of UI-upgrade via a plug-and-play component
  • The solution is relevant to every organization and therefore is expected to have an extremely high adoption throughout the world

How we built it

We chose to make the accelerator available as a wizard inside the Dev studio. To do this we created a child class of “Pega-Landing-UI-” and created a screen flow in that subclass. We then designed a efficient data model to hold the inputs from developer, that mostly reuses the out of the box Pega data model. We developed data pages to retrieve overridden rules and sections without a design template. In the screen flow, before the last step we put in a utility that kicks off a series of rule mining and processing, which eventually produces a new application version powered by the Cosmos/Clarity design theme.

alt text

During the development, our team worked in sprints and leveraged the Agile Workbench as a scrum board to keep track of all required stories and ensure all acceptance criteria are met.

alt text

All rules created by the FastTrack2Cosmos accelerator are saved in a branch. The branch name is also configurable through a dynamic system setting. The rules are saved in a branch so that developers can review them before merging and they can make adjustments where necessary.

Challenges we ran into

We realized there are two steps in the overall design theme upgrade process that may eventually require manual intervention. First, when a section has a complicated layout structure and cannot be converted to any OOTB design template. And second, when an OOTB rule (e.g. Perform harness) was previously overridden from the UIKit layer and for a functional reason the customization is also needed after upgrading to Cosmos. We decided to handle these two situations in the following way:

  • All rules created by the FastTrack2Cosmos wizard will be saved in the development branch.
  • The accelerator has the intelligence to ignore sections containing table (repeat grid) or repeat dynamic layout. Such sections will not be auto upgraded.
  • Sections that do not have any repeat layout, but still a complicated layout design, will be converted to the OOTB ‘One column’ design template. Developers can review the branch and decide to create a new design template to better suit such sections and then update the used template accordingly.
  • Rules that were previously overridden from the UIKit layer and that are also present in Cosmos/Clarity layer will be automatically withdrawn by FastTrack2Cosmos, in the branch. Developers can review the branch and if any rule needs to retain the previous customizations, then developers should manually retrofit them after saving as from the Cosmos/Clarity layer.

Another technical challenge we faced is while trying to do a ”lookup” from a data page on a rule belonging to a different (other than the currently logged in) application. Because the lookup uses rule resolution. To remedy this, we changed the data page to use a report definition that fetches the rule handle (pzInsKey) and then did a Obj-Open-by-Handle.

Accomplishments that we're proud of

We are extremely thrilled that we brainstormed a solution that can help every Pega customer on this planet, irrespective of the industry sector. We believe that in next couple of years, all Pega projects in every sector, whether in financial services, healthcare, public sector or any other industry – will see an urgent need to migrate their Pega applications to Cosmos design. Our FastTrack2Cosmos accelerator will help each one of them to adopt and embrace the latest and greatest Pega UX standards.

We are proud that we took up a challenge that was technically quite complicated and not easily achievable. We knew that the idea was far-fetched, but seeing the vast impact that it could have our team unanimously agreed to embark on the challenge.

We are also happy and proud that despite the tight schedule, we were still able to adhere to all best practices and worked in scrum sprints, leveraging the Pega Agile Workbench to keep track of all required functionalities.

What we learned

Our team was a great mixture of junior and senior developers. And our learnings also range from basic primitive PEGA features to highly complex PEGA-internal behavior. Our more junior teammates learned the following:

  • How to create a fresh new skin and make Cosmos/Clarity the parent skin
  • How to save the previous skin and change the skin inheritance to Cosmos/Clarity
  • How to appoint all sections defined in the selected ruleset(s) that do not currently use a design template.
  • How to create system validations
  • How to create an activity that will loop over a specific data page and convert the sections to use design template
  • How to create a data page that will find out all harness/section/flow actions that are present in both 'UI-Kit', 'Cosmos/Clarity' and was customized by developers in their own ruleset’
  • How to create a data transform in which a new application version has been created as per input from the previous steps

The idea we worked on required us to go beyond our comfort zone of the usual low-code approach. It demanded our team to get to the core of how Pega’s rule resolution works in order to build a scalable, flexible solution. We took on this complicated task to provide simplicity to the rest of the world. This required our LSA's also to push themselves to new limits. Few of such examples are summed up below:

  • A data page using “lookup” on a rule defined in a ruleset not belonging to the application does not find the relevant rule. But report definition can do so, if we switch off the “filter by application context” option.
  • To build our own wizard in Dev studio, it is needed to specialize the OOTB activity ‘StartWizard’ in the corresponding wizard class.
  • How to make a lightweight Pega component that can be easily plugged in/out of any Pega existing/new Pega application.
  • How to perform a “rule mining” process across multiple selected rulesets, irrespective of the currently logged in application.

What's next for FastTrack2Cosmos

Demonstrate FastTrack2Cosmos accelerator to all our customers worldwide, who are on Pega Infinity, and help them accelerate their journey towards UX modernization.

Getting Started

Please reach out to the point of contact mentioned in “Reach out” section below to get the artefacts (as zip file) of FastTrack2Cosmos component. Import the zip from Dev studio. Enable the “Cosmos migration utility” component in any application in dev environment. Launch the ‘Cosmos migration utility’ wizard from Dev studio and run through the steps of the wizard as shown in the video. On successful execution, the wizard will create a new application version that is powered by Cosmos/Clarity design theme. Review the branch ‘CosmosMigration’; review the upgraded sections and withdrawn rules, make any adjustment if needed, and then merge the branch. Release the new application version to production.

Reach out

If you are interested to try out this solution for your existing Pega application(s), or if you have any questions or suggestion regarding this accelerator, feel free to reach out to us at:pegacoe.bnl@capgemini.com

Final food for thought

alt text

As per Pega’s UI roadmap, by 2022 all Pega products will be migrated to Pega Constellation UI (react-native). It is evident that all clients would also have to upgrade their legacy applications to make it Constellation-ready. Taking all these under consideration, the FastTrack2Cosmos accelerator can be extended in future to transform applications and make it Constellation-ready.

Built With

+ 27 more
Share this project:

Updates