What is the recommended approach to creating a custom editable table using the Pega React SDK? Pega seems to require the pagelist to be in the metadata for the save which would require adding it and all its columns manually under the pagelist section. But, the main problem with this approach is getting the context to work correctly so that the page instructions work. With this approach the page instructions never seem to come through in the payload for save even when we can see the changes in the redux. Any recommendation on the suggested setup where we have a custom editable table that is used in constellation and correctly saves back the edited data?
Please check this article for Editable Table component in Pega UI gallery.
Hi, looking at the Editable Table component in the Pega UI gallery and the applicable code it is saying to do .PageList.PropertyName but that is not something that you can do through the view configuration. Even if you do this through the JSON we still can’t correctly add it to the metadata which is needed for the “value” field to come through correctly in this component which it doesn’t allow you to do. Could you provide some guidance on how we should be following this structure?
Please check the source code for Editable Table component for your reference.
You should be able to add an Embedded List onto your assignment view, and when you click to configure the field, instead of clicking into the field, you can configure a view from that Embedded class. That view would hold the Editable Table Layout.
However, I can describe some approaches I’ve taken.
If you use the datapage format within the config.json, you can pass any data page into a DX Component, and call your data page using PCore.getDataAPIUtils()…, this would return your response, and you would map your response result-set to the table inside the component.
If you do not want to rely on a data page - you can use a pre-processing data transform for the view. The data transform calls a data page and maps the json response to a paragraph field. Within your config.json allow for the property format to select that paragraph field. I can turn the json into an object and map it a table.
If the table is editable, I track the changes in a separate JSON paragraph field using PConn.getActionsAPI().updateFieldValue / PConn.getActionsAPI().triggerFieldChange against the redux store, thus when the end user submits the assignment, in the post-processing data transform, I can manage the table updates appropriately through an API or the local clipboard.
Therefore, I usually call for the data, manage the data, and save the changes to a paragraph field in the redux store, to manage in the post-processing data transform.
For using the SDK, you may want to use the element’s attributes to pass similar data, or rely on Pega as a Service to make REST calls from your component.