Introduction

This document describes the steps to load the custom dx component which will enable save of assignment on change of a field.

Steps:

1. Create custom dx component, samples here: choose type as any form/scalar field eq., TextInput https://github.com/pegasystems/constellation-ui-gallery

Custom dx component builder:

https://docs.pega.com/bundle/constellation-dx-components-88/page/constellation-dx-components/custom-components/custom-components-cosmos-react.html

2. It is a background processing component which going to connect to field change and saves the assignment.

3. Add component to current assignment form view.

Sample

Code:

Below example assumptions FirstName field change will save the assignment.

import { useEffect } from 'react';


export default function SaveAssignmentComponent(props) {
  const { getPConnect } = props;
  const pConn = getPConnect();

  const saveAssignment = () => {

    /* Get the current case etag */
    const etag = pConn.getValue("caseInfo.headers.etag");

    const assignmentID = pConn.getValue(
      PCore.getConstants().CASE_INFO.ASSIGNMENT_ID
    );
    const actionID = pConn.getValue(
      PCore.getConstants().CASE_INFO.ACTIVE_ACTION_ID
    )
      ? pConn.getValue(PCore.getConstants().CASE_INFO.ACTIVE_ACTION_ID)
      : pConn.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENTACTION_ID);

    /* Payload to resolve dx api */
    const payload = {
      queryPayload: {
        assignmentID,
        actionID,
      },
      body: {
        content: {
          /* Property or field name */
          FirstName: pConn.getValue(".FirstName"),
        },
      },
      headers: {
        /* etag as part of header */
        "if-match": etag,
      },
    };

    /* Triggers save dx api */
    PCore.getRestClient()
      .invokeRestApi("save", payload)
      .then((response) => {

        /* Upon successful, update the latest etag. */
        const updatedEtag = response.headers.etag;
        PCore.getContainerUtils().updateCaseContextEtag(
          pConn.getContextName(),
          updatedEtag
        );
      });
  };

  
  useEffect(()=> {
    const subId = Date.now();
    /* Register field change event. */
    PCore.getCascadeManager().registerFields(
      pConn.getContextName(),
      pConn.getPageReference(),
      [".FirstName"],
      saveAssignment,
      subId
    );

    /* Unregister fields */
    return () => {
      PCore.getCascadeManager().unRegisterFields(
        pConn.getContextName(),
        pConn.getPageReference(),
        [".FirstName"],
        saveAssignment,
        subId
      );
    }

  }, []);


  return null;
}