This document captures the steps required to launch flow action or view in modal dialog in Constellation application, this is a custom dx component approach.
Note: Before using this approach, hope explored all possible ways to solve this usecase using OOTB configuration.
Editing data object
In order to do update on data objects, do follow the below article:
You can replace Operator class with any other data class, infrastructure remains the same.
Reading data object via flow action
Steps:
- Open app studio and create and configure a view eq., UpdateDetailsAction1
- Switch to Dev studio and create a flow action under data object class and configure above View eq., UpdateDetailsAction1.
- Create a single page type datapage, this is used to build context (step page) to execute flowaction/view.
- Write a custom component to launch modal.
References**:**
Sample gallery: https://github.com/pegasystems/constellation-ui-gallery
Sample code
import { Button, Modal, useModalManager, useModalContext } from '@pega/cosmos-react-core';
export default function ViewInModal(props) {
const { getPConnect } = props;
const pConnect = getPConnect();
const { create } = useModalManager();
const { dismiss } = useModalContext();
const onResponse = async (data) => {
const { fetchViewResources, updateViewResources } = PCore.getViewResources();
// Update metadata store
await updateViewResources(data);
// Update redux with data.
pConnect.updateState(data.data);
// Root view
const viewName = data.uiResources.root.config.name;
// Build config to create new pconnect object
const viewConfig = {
meta: fetchViewResources(viewName, getPConnect()),
options: {
context: getPConnect().getContextName(),
pageReference: 'dataInfo.content',
isFlowContainer: '',
parentPageReference: ''
}
};
const { getPConnect: newPConnect } = PCore.createPConnect(viewConfig);
// Create view component.
const viewElement = newPConnect().createComponent(viewConfig.meta);
// Model rendering
const modal = () => {
return (
<Modal heading='List of cases' autoWidth enter>
{viewElement}
</Modal>
);
};
create(modal, { closeInitialModal: dismiss }, { dismissible: true });
};
const itemClick = () => {
// Get row prop value
const id = getPConnect().getValue('.ID');
// Rest api to open flow action, define single datapage type under "data_view_ID" payload
// to load the record before processing, this will become context to view.
// action_ID is the flow action name.
// Pass parameters as part of body.
PCore.getRestClient()
.invokeRestApi('openDataObjectAction', {
queryPayload: {
data_view_ID: 'D_TestData',
action_ID: 'TestFA'
},
body: { dataViewParameters: { ID: id } }
}, getPConnect().getContextName())
.then((data) => {
onResponse(data.data);
});
};
return (
```
<Button variant='link' icon compact={false} onClick={itemClick}>
Modal
</Button>
```
);
}
Code explaination
- Add custom dx component to view.
Reference: https://github.com/pegasystems/constellation-ui-gallery
OR
In case custom component required to be part of ListView table then do follow below article:
