How to Update pageInstructions for List-Type Data References from a Custom DX Component (Constellation)

User Experience
1

Introduction

I am building a custom DX component in Pega Constellation that includes the following list-based UI elements:

  • Multi-select search box
  • Multi-select table

Rendering the UI is straightforward, but I am facing challenges persisting selections for list-type reference properties.

For Scalar properties, updates work fine with triggerFieldChange.
For Page List properties, I need to ensure that pageInstructions are correctly generated, so that selected/unselected rows are reflected on the case at submit.

While tracing the OOTB behavior in developer tools, I observed that Constellation triggers a refresh API call with updated pageInstructions, which handles add/delete operations on the list.

As i keep saying every time, that building custom components should be your last resort, but know-hows of working with custom components is always nice to have.

What I Need Help With

From a custom DX component, what is the recommended OOTB approach to:

  • Add/remove entries in a Page List using pageInstructions
  • Handle multi-select selection and un-selection correctly
  • Stay aligned with Constellation’s standard persistence lifecycle

What I’ve Tried

  • ListActions (pConn / PCore APIs) – experimented with CRUD operations, but not sure if they’re being used correctly
  • save / loadView APIs – partially working, but failing in some edge cases; would prefer not to rely on this approach

Ask

Which pConn / PCore APIs should be used to update pageInstructions for list-type data references from a custom DX component?
Is ListActions the right pattern for multi-select add/remove scenarios?

Any guidance or best practices would be appreciated.

Regards

JC

2

@JayachandraSiddipeta I built a custom DX Component while ago for one of the customer with very similar CRUD operations requirement using case embedded data to update, delete, save, read operations using MUI table. The version of DXCB I was using back then was 24.2 I think if I remember correctly, from memory there was an issue with Page context missing and it had to be set correctly for any pageInstructions to be generated correctly.

Refer to this Github source code constellation-ui-gallery/src/components/Pega_Extensions_EditableTableLayout/index.tsx at master · pegasystems/constellation-ui-gallery · GitHub on line 123 to 129. Refer to the overall implementation of this Editable Table Layout source too.

Page context settings.png
Page context settings.png407×470 68.6 KB

The PConnect API that I used to update the selected row data is

Update field value code.png
Update field value code.png452×157 46.8 KB

This API call would automatically generated pageInstructions on submit or save/save for later case action buttons

You can try along the similar approach and should be able to find a solution.

I’m not sure if later DXCB releases has a fix for this in the library.

3

@Siva.V I have tried this approach and called the setSelectedRows api method. But i am facing error while i select the entries in the table. It seems the config data structure seems to be not in expected manner. Still looking for resolution of how it should be properly implemented. I am also trying to verify the Selectable Cards component in Constellation SDK to see how the OOTB behaviour looks like. Hopefully i will get some clarity from there.

Regards

JC