Using React with Pega

Developers that prefer to use other UI frameworks such as React and Angular can leverage open APIs to dynamically use Pega design capabilities as a REST-enabled service to power their front-end UI framework of choice.

This video shows how you can stay in React to change styles, controls, and layouts. You’ll also see how UI elements changed using Pega’s no-code designer immediately become reflected in React without additional coding.

Transcript:

Pega's open architecture gives developers the flexibility to seamlessly combine popular UI frameworks, such as React and Angular. This demo shows an example application using React with Pega. To demonstrate the flexibility of this approach, we will change the layout type of this form from one column to two columns in App Studio all without additional coding.

The layout and fields within the React component are generated directly from Pega's reusable UI templates. Form generation for assignments, views, and pages are all based on a nested UI data structure returned from the API. Now when doing a post, to submit an assignment, or refresh fields, the state object is translated into a nested representation of the data matching clipboard structure, and sent to the server.

Once we refresh the React form after saving this change in Pega, the new two column layout is immediately reflected in the data returned from the API. And our React application automatically adapts to the change, all without additional coding.

Now let's say you want to make changes in the React App, for example to account for a new style or layout capability. We start with our case, with a basic two column layout rendered in React. And as a new layout, two column 70:30.

We can add that capability in the React App by updating the switch statement that handles layout types. This React switch statement is used to handle the layout group format property for my API, and currently supports inline grid double, stacked, and grid.

Since this is a new layout type, it will hit the default case, and in this instance, show the returned value in the API for layout group format. We can now add a new case for this new response value. When refreshing this case from React, we'll hit the sprig point since our newly chosen layout is unsupported. In the console, we have printed the new layout type, inline grid 70:30.

The next step is to add a new corresponding case statement to our React layout handler. Since basic two column and two column 70:30 are very similar, we can start by copying the code from the basic two column handler. Next, we add an array of our desired column widths. When using the met function to iterate over our layout groups, we can use the child index perimeter as the index for retrieving the correct width from our new array.

After saving our code changes, we refresh the page to see our new layout take effect. Not only are API date response changes easy, making changes to the style of your App is very easy as well. We'll demonstrate this by changing the style of our header bar. Our React bar uses the semantic UI component framework. The semantic UI documentation includes many out-of-the-box styling options and examples of their usage in React.

In our case, we're changing the header bar from blue to teal. Once the change is made in our React code, the development server reloads the components with the updated style.

Next, we'll change the styling of our casework tabs. Here, we refer to the semantic UI tab component documentation, and make note of the menu property, with a pointing value set to true. We can add the same property to our own use of the tab component, save the file, and see the change immediately reflected in the portal. You can learn more about our React starter pack, as well as our digital experience API, by visiting us at pega.com.