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.

https://support.pega.com/discussion/how-update-operator-profile-or-data-constellation-application-using-savable-datapage

Reading data object via flow action

Steps:

1. Open app studio and create and configure a view eq., UpdateDetailsAction1

2. Switch to Dev studio and create a flow action under data object class and configure above View eq., UpdateDetailsAction1.

3. Create a single page type datapage, this is used to build context (step page) to execute flowaction/view.

4. Write a custom component to launch modal.

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

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

5. 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:

https://support.pega.com/discussion/how-add-custom-dx-component-listview-table-constellation-application