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

Let's start with summarizing ways in which we can interact with Constellation from front end portal:

• we can use exposed JS APIs - we did it on a product page
• we can use Mashup API - we did it for Featured Products widget and on Support page
• other way is to use raw fetch calls to DX API endpoint

The last solution, issuing raw fetch calls towards DX APIs is not always the best choice. Solution described below requires signification amount of code so make sure you investigate all previously mentioned solutions. Although there are some use cases when issuing raw fetch call make sense.

Contact form

On a contact page we would like to render a simple contact form. We can do it with Mashup API but one significant drawback is that a Inquiry case gets created on every page load. We would need to implement purging mechanism to get rid of abandoned cases.

Alternative approach is to build contact form in front end portal and trigger case creation only on a button click. User action triggers fetch call towards appropriate DX API endpoint. It happens that contact form is viable use case for this solution because of following reasons:

• process to be handled on custom front end is just one step - this is important as if the process would be multistep with logic in between we would need to handle that on on fronted which could be problematic
• form to be submitted is simple, just couple of  fields - this is important as if the form would consist of multiple fields we would need to modify it multiple times when business requirements have changed. We would end up with some logics on fronted and some on a backed

Please refer to code of Contact page: https://github.com/kamiljaneczek/Sweet-Life-Pega/blob/main/src/app/contact.tsx. Main highlights from code:

• first we need to authenticate - we will cover authentication in one of next articles
• later we contact DX API with ask to create case

One thing to note is that we need to configure so called Starting Fields, so fields that we will pass when creating a case. This is a security configuration that we perform in Data Transform as shown on image below.

We store Case ID from response in state. Later we use this state to conditionally display contact form or acknowledge message:

That is in this short post. Happy coding!