How to add custom dx component to listview table in Constellation application

[baipc (Chandra Baipalli)]

This document explains how to add custom dx component to listview tables in Constellation application.

Note: Before taking this path, make sure to explore OOTB options.

Steps:

1. Create a custom dx component eq., CustomTableCell is a custom component name.

References:

Sample gallery: https://github.com/pegasystems/constellation-ui-gallery

Builder: https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/creating-custom-components.html

2. Make when rule “pxEnableC11nDev” to true.

3. Open the Rule-UI-View instances and open listview eq., TestDataList.

4. Mark view as Custom.

5. Define custom component metadata in a cell eq., CustomTableCell is a custom component name.

6. Define component name in pxDependencies eq., CustomTableCell is a custom component name.

7. Save the rule and launch listview.

Runtime

[VinitK17138924 (Vinit Kumar)]

@baipc How can we create a completely custom table instead of just the cell?

[priyanka_aavula]

@baipc

Can we add buttons and icons in the place of links?

1.We have created a custom component that gives link or icon or button as output by taking below inputs.

• for buttons - Local action, data page and button label are passed as inputs to custom component.

• for link - Local action, data page and link label are passed as inputs to custom component.

• for Icon - Local action, data page and Icon Name are passed as inputs to custom component.

2.This component is working as expected when we used it in views directly, but when we try using it as one of columns values in a table, its not working as expected. So, we have followed your article and was successfully in adding the custom component in the table but below are the issues.

-As suggested, we have modified the view from dev studio and tried accessing the same from app studio. Here, when we open view from app studio the new custom component configuration options are not seen in the view, it only shows the default configurations

-Pega is not showing the buttons and Icons in the table, irrespective of what ever code we add in custom component index.tsx file defaults as shown below, it always shows only links in the table.(we are trying to add buttons and icons too). Screenshot is attached.

3.We also could override the local actions by editing views from dev studio successfully.

Could you please let us know if we have missed anything?

[A2178 (Samuel Alexander)]

It’s easy to miss in the second screenshot b/c there’s not a red arrow, so be sure to set

"customComponent": true

in the metadata, otherwise the table will not render your component in the cell.

Sam