In Constellation, we can update data instance using savable datapage by using custom dxcomponent component.

In this sample, operator record/profile will be updated using savable datapage.

Steps:

1. Create a savable datapage under class "Data-Admin-Operator-ID".

2. Define datasource to open a record and Data save options as "database update", define datatransform and validation rule to ensure data formatting.

3. Define parameter and mark as "Is this page used for alternate key storage?" and associate classkeys with parameters.

4. Make when rule “pxEnableC11nDev” to true. 

5. Create pyEdit view under data class eq., "Data-Admin-Operator-ID" and mark as custom, define the form by hand.

6. Create a custom dxcomponent to open and edit the data instance, in code make sure to update metadata of datapages eq.,

More information on adding component to navigation utils:

https://support.pega.com/discussion/how-enhance-constellation-portal-navigation-utils-extra-option

PCore.getMetadataUtils().updateStores({
      dataTypes: {
        'Data-Admin-Operator-ID': {
          savableDataPage: 'D_SaveOperator',
          lookupDataPage: 'D_SaveOperator',
          classKeys: ['pyUserIdentifier']
        }
      },
      datapages: {
        D_SaveOperator: {
          parameters: [
            {
              name: 'userId',
              defaultValue: '',
              linkedField: 'pyUserIdentifier'
            }
          ],
          classID: 'Data-Admin-Operator-ID',
          mode: 'editable',
          isSearchable: false,
          isQueryable: false,
          isAlternateKeyStorage: true,
          structure: 'page'
        }
      }
    });
    getPConnect().getActionsApi().getDataObjectView('Data-Admin-Operator-ID', {
      pyUserIdentifier: PCore.getEnvironmentInfo().getOperatorIdentifier()
    });

dataTypes defines the savable and lookup datapages information which helps Constellation to operator on record to open and save the data.

datapages defines parameters information so that mapping can be done accordingly.

To operate on data use below PConnect API, getPConnect().getActionsApi().getDataObjectView().

Sample component code:

import styled, { css } from 'styled-components';

import { Button, Icon, Tooltip, useElement } from '@pega/cosmos-react-core';

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

  const WrapperDiv = styled.div(() => {
    return css`
      .main-container {
        color: rgba(255, 255, 255, 0.7);
        background-color: rgba(255, 255, 255, 0);
        padding: calc(0.625rem) 0;
        position: relative;
        display: flex;
        align-items: center;
        font-weight: 600;
        text-decoration: none;
        width: 100%;
      }

      .main-container:hover {
        background-color: rgba(255, 255, 255, 0.05);
      }

      .count-container {
        position: absolute;
        inset-inline-start: calc(2rem);
        top: calc(0.25rem);
        padding: 0 calc(0.25rem);
        display: inline-block;
        block-size: 1rem;
        border-radius: calc(4999.5rem);
        color: #ffffff;
        background-color: rgb(217, 28, 41);
        box-shadow: rgb(255 255 255 / 10%) 0px 0px 0px 0.0625rem inset;
        font-size: calc(0.75rem);
        font-weight: 700;
        line-height: normal;
        text-align: center;
        padding-inline: 0.5rem;
        margin: 0px;
      }

      .sub-container {
        flex-shrink: 0;
        margin: 0px calc(1.4375rem);
      }
    `;
  });

  const itemClick = () => {
    PCore.getMetadataUtils().updateStores({
      dataTypes: {
        'Data-Admin-Operator-ID': {
          savableDataPage: 'D_SaveOperator',
          lookupDataPage: 'D_SaveOperator',
          classKeys: ['pyUserIdentifier']
        }
      },
      datapages: {
        D_SaveOperator: {
          parameters: [
            {
              name: 'userId',
              defaultValue: '',
              linkedField: 'pyUserIdentifier'
            }
          ],
          classID: 'Data-Admin-Operator-ID',
          mode: 'editable',
          isSearchable: false,
          isQueryable: false,
          isAlternateKeyStorage: true,
          structure: 'page'
        }
      }
    });
    getPConnect().getActionsApi().getDataObjectView('Data-Admin-Operator-ID', {
      pyUserIdentifier: PCore.getEnvironmentInfo().getOperatorIdentifier()
    });
  };

  const [el, setEl] = useElement();

  return (
    <WrapperDiv>
      <Button variant='link' icon compact={false} onClick={itemClick} className='main-container' ref={setEl}>
        <span className='sub-container'>
          
          {el && (
            <Tooltip target={el} placement='right'>
              Edit profile
            </Tooltip>
          )}
          
          <Icon name='user-plus-solid' />
        </span>
        <span>Edit profile</span>
      </Button>
    </WrapperDiv>
  );
}

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

Sample components:

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

Runtime screen