Question


NewFold Digital
IN
Last activity: 26 Jun 2024 12:06 EDT
Configure External source on a Button to fetch data in Constellation Views
Hi Pega community!
Our requirement is to select the values from the drop downs and on click of the button, call the external API to fetch the results (by passing the values selected from drop downs as parameters to the data page) and show it on the UI.
I have gone through below document to configure a button control. But we don't see any 'Design' button when we run a case type in App Studio.
https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-button.html
Request you to please help with below,
- Configure a button control in View
- Configure a REST API on button.
-
Reply
-
Share this page Facebook Twitter LinkedIn Email Copying... Copied!
Accepted Solution
Updated: 26 Jun 2024 12:03 EDT


Pegasystems Inc.
PL
Hi, what you described in your post sounds more like a solution rather than the business requirement. Could you describe in business terms what you would like to achieve? As Constellation offers a prescriptive way of developing UI, we need to shift our thinking. Having business requirements we need to match ootb blocks to construct the solution that fulfils the business use case.
Indeed, you won't be able to configure the button with an action set. Please take a look at the great post by Sam Alexander discussing this topic. https://pe.ga/3Q8tN7N
What you can achieve, is to configure UI to run data transform (that calls back end system) on a change of dropdown value. Once some data that is displayed on a screen is updated the View will be refreshed automatically.
Technically you need to use 'Form refresh settings' feature available on Flow Action.


Pegasystems Inc.
PL
@Kalashikamhere is some good reading: https://support.pega.com/discussion/pega-infinity-%E2%80%9923-and-constellation-ui-offers-faster-and-easier-ways-configure-dynamic


NewFold Digital
IN
Thank you @Kamil Janeczek
Updated: 14 Jun 2024 2:40 EDT


NewFold Digital
IN
Hi @Kamil Janeczek,
We have existing Data Type - ABC which was created in Traditional application and the corresponding Data Page D_ABCLookUp. Data page D_ABCLookUp source is a report definition.
This data type will hold the drop down values that we show it in UI.
We want to use this in constellation case UI (View).
I have created a Picklist Field, selected option as Data page and referred the data page D_ABCLookUp and also parameters are passed.
But in the run time, drop down is not showing the values.
Request you to please help me here.


Pegasystems Inc.
PL
@Kalashikam It might be due to multiple reasons, for example data page is not relevant record or configuration of data page can not by understood by Constellation. The easiest way is to recreate property from Data model tab, Pega will create data page for you.


NewFold Digital
IN
Hi @Kamil Janeczek,
Good day!
Hope you're doing good.
We need to map the customer data to a case based on customer ID. But the customer may have multiple records and user needs to select the unique record.
This information is fetched from a REST API.
In Traditional UI, we used to use a Data page to fetch and show the records
But in Constellation, if I want to create a Embedded page, it is asking for a Data Object. In this case, how can I map API data to the embedded page and show it in UI.


Pegasystems Inc.
PL
@KalashikamIf it comes to mapping data coming from external REST API to data objects. It is not different in Constellation you do mapping on Data Page with Data Transform. You map from INT data model into business data model. You then use these business entities as source for fields that you configure on Views.


NewFold Digital
IN
Hi @Kamil Janeczek,
Good day!
Hope you're doing good.
I have used the query property to show the REST API data. I select display as 'Table' for the query property and added the columns to the table.
When I searched for a customer ID, I got multiple records and now I need to select a record from those results and map the selected customer record to the case.
As there are no action sets, I am unable to select a record.
Request you to please help me on this.


Pegasystems Inc.
GB
@Kalashikam your follow-up question is unrelated to this thread.
Please can you post it as a New Question if the below info does not help.
To select a record from the table and map it to a case, you can use a row-level action on the table. This action can be configured to capture the selected row's data and map it to the case.
- In the table configuration, add a new column for the 'Select' action.
- In the cell properties of the new column, add a control (like a button or a link) and configure an action set on it.
- In the action set, use the 'Run Data Transform' action to map the selected row's data to the case.
- Save the changes and test the functionality.
Remember to ensure that the data transform is correctly set up to map the data from the selected row to the case.
⚠ This is a GenAI-powered tool. All generated answers require validation against the provided references.
Prioritizing information in tables
How to filter records from a data page list