This article is part of series of articles named Constellation Flexible UI. Please check table of contents: https://support.pega.com/discussion/constellation-flexible-ui

In previous article we saw basic way pf interacting with Pega using one of the available API, namely Data API. All the APIs are for our disposal, but there is one very special API. Mashup API deserves some more description and our attention. The reason is that Mashup API gives a lot of benefits when used. In previous article we mentioned some of the APIs in ConstellationJS.

The allow for some specific task to be performed like:

• fetch data from data page
• operate on assignments
• manages containers
• interacts with Redux state

Mashup gives the ability to embed or "mashup" Pega Constellation applications or components within external web applications using the Constellation SDKs. This is high level abstractions that allows to render Pega UI in external portal.

Mashup API is a core API. One that is widely used, the same in our mini series. Following methods are available on MashupAPI class:

Mashup API is one of the reasons I believe using SDKs is so powerful and time saving.  After lecture of this and next article you will be in a position to judge yourself.

In current article we will follow with implementation of createCase method. In one of next chapters we will cover openPage method that allows us to specified open page, Pega Landing page and embed it into external portal. This is pretty powerful pattern, and with combination with Custom DX Components allows us create pretty much anything that we need and want! We explore the details and compare both available methods:

• get data and leave rendering to fronted - this is what we implemented on Products page
• open Pega page that lists some records - this approach we used to implement Featured Products widget on main page

Create Incident case

Before that let's go back to createCase method on MashupAPI class. As the name suggests this method creates a Pega case instance. But it is a lot more, it is not just a backend call to create resource and bring status of performed operation.

If you wish to just to perform create action it is possible in two ways:

•  raw DX API call

but we are not here to learn about ConstellationJS and SDKs to send raw REST API calls :)

• second option is to use raw HTTP request toward DX API endpoint. We will see later in this article how we can utilize this capability

In example that we will use on Support page we will use createCase function available on MashupAPI to render an Incident Case Type. Incident Case Type is main case type in Tell Us More. Please refer to document named Tell Us More (attached to this post) - application overview to get more details about application, case type and their design and implementation.

From six stages in Incident case type five are done by back office and only the first one is meant to be performed by the client on Sweet life home page. This is the part the we will cover with SDKs.

All work after first stage is back office part of the flow that will be performed by Sweet Life support team. Support team will use standard out of the box Constellation portal that is most suited for back office work. SDKs as of now do not support all of the back office functionalities eg. Insights. Anyhow SDKs are better positioned to create rich and complex UIs, exactly as in Web Self Service portals. This is in fact typical pattern:

• use SDKs for WSS portal for case ingestion
• process case in a back office with ootb Constellation portal

Having all the heavy lifting done in previous articles running mashup to create an Incident case is just couple of lines. In our example case creation happens on a button click.

Clicking on a Create Incident button triggers handleCreateCase function.

Please refer to github repo for more details: https://github.com/kamiljaneczek/Sweet-Life-Pega

We use PubSubUtils to know when assignment is finished or closed to hide Pega UI. We don want to display out out the box assignment widget inside external portal. Additionally, make sure that you got div with pega-root in your DOM. Pega will insert there mashup code.

The code in useEffect is similar as before.

One drawback of this solution is that new case is created each time user open the Contact page. We would need to implement a Job in Pega to clean abandoned Inquiry cases. Not a big issue but let's see how we can avoid it with second approach.

We already mentioned couple of times that mashups are great as otherwise we would need to to a lot of activities manually. One of the approach to manually interact with Pega and use directly DX API call. While this is possible it take a lot of manual work, and I believe this is viable solution when creating a case, but might be problematic to use  this solution for a complex case processing tull resolution. Keep this in mind but let's see how we can achieve it.

We can trigger DX API call on a button click.

Info: code below includes authentication with customBearer flow, I will describe it in one of next articles.

The advantage here is that we don't have cases created each time Contact page is opened. This solution is great choice when from a front end portal we want to create case from a single screen, without a cased being processed. Otherwise we would need to handle this cases processing on our own, which is complex. Mashup API discussed in this article hides this complexity.