We have a requirement to call an API after entering either of 2 input fields like Meter Order or Account Number. Also, in the same UI, there are input fields those need to prepopulate with the data from the API response. We are migrating from a legacy application to Pega. In the legacy application, user is given with button after both of these fields to call the API. I am currently thinking to call the API on the form refresh on the flow action whenever these 2 property changes. Possible challenges could be API getting invoked multiple times when user is editing that field and clicking outside instead when they actual enter the correct to call the API. There is no exact length for this value which I can use a check if the value is entered with exact length. We can have a checkbox where user confirm the values and post confirmation, based on the on change of the checkbox we can also invoke the API. Any suggestion or recommendations for Pega Constellation are welcome.
Hello @HaripriyaR17725451
You can achieve your requirement using Search and Select single pattern in accordance with Form-refresh settings on the flow action where you have your form.
- Create a property of type data reference of single record and setup the Search and Select pattern where you can choose filters to search and columns to be displayed of your choice. In my case, i used the pySearchPageName to get the entered filter criteria and filtered the 500 records i got from the free rest api. In your case, your external API should support taking an input and returning only the records matching with the search criteria.
- Below the search and select block, you can have all the fields which you want to display in a field group that contain the fields mapped from the response content of your search and select. On change of the selection from the list of records retrieved the content in the field group will change accordingly.
- In the Flow action, add an entry for Form-refresh settings of your single select data reference page unique property and setup a data transform to copy the data from your single embedded page to workpage.
Below is the working version of the above setup,
Some screenshots for your reference
Hope this helps and is close to what you are expecting. Let us know your thoughts.
Regards
JC
If your object you are calling from an API is singular (e.g. show details of a single customer). The above works, it is the Data Reference pattern, this also works with other interaction patterns beyond the Search and Select display mentioned above.
I would not recommend using Form Refresh settings and trying to replicate a UI Kit “action set” to retrieve data. Set the data model up correctly, sourcing your data from SOR it belongs. #CenterOut
Hi Marc, on your suggestion, we will only be able to display the API response in read only fields or will also allow user to edit or add details? All the examples give here are like selection kind off.
ok, i wasn’t aware you wanted to “Select and Update” a data reference, from the description I mistook that it was read only showing more data.
- Option 1: Form refresh settings. As outlined by @JayachandraSiddipeta above (thanks JC!)
- Option 2: Sepearate the screen into multiple assignments. Step 1 - data reference, Step 2 embedded data (pre-populated using preprocessing)
- Option 3: Saveable Data Page. Use a saveable datapage as the source of your field defined in your case datamodel. I’ve just realised we don’t have this outlined anywhere neatly in Docs, Academy or our Constellation 101 (@Kamil_Janeczek and I will work to get a new 101 out soon!).
There is a hint at this in the Case Reference field type, but I can’t find much on Data References. Updating data in a Case by using savable Data References
So the implementation looks something like this:
Select and update reference data
Data Reference field supports edition of existing objects – select and edit pattern. User can select record from referenced Data Object and edit it. In order to use this pattern, you need to:
When all conditions are met Pega renders form in editable mode allowing user to modify
Data Object. Data is saved on assignment submission
Warning: data gets copied to a case so is later not refreshed from so urce
We have a similar use case and used a checkbox to trigger the API call, since users were confused when events from text fields only fired after tabbing out.
Hi @MarcCheong ,
The experience we are looking for is based on the below existing screen:
User enters Meter# and Account # ,it is sent in API request, and the response holds address details which need to be prepopulated in the below Service and Billing address fields. These details should be available for user to edit as well.
For me, meter and account are part of a Data Reference to whatever object holds the Service. A search and select would allow you to find the right service using those as fields then its just a choice of how to prefill/capture the addresses.
I’d personally have it as the next step in a process, rather than one long form that required magically refreshing once I select a value (It’s a better UX, what if i select the wrong value? now i can’t change my mind) but you have options suggested (plus the saveable datapage option, I added to that list)
Have you tried @JayachandraSiddipeta’s solution mentioned above?
You could do the same with a checkbox like @RameshSangili suggests