How to enhance Constellation portal navigation utils with extra option

General
,
1

In Constellation, we going to explore “How we can add option in portal navigation utils”.

Overview.png
Overview.png2408×1632 245 KB

Steps:

  1. Create a custom dxcomponent references:

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

  1. Create a view with + Utils under the class data-portal eq., WebPortalUtils.

  2. Update view metadata to point custom dxcomponent.

View metadata.png
View metadata.png2666×2056 465 KB

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 = () => {
    // Logic comes here
  };

  // For tooltip
  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>
```

  );
}
2

For anyone trying this in 23.1.1 please note you need to private edit pxEnableC11nDev when rule and set it to true to enable the layout which shows “Mark as Custom” checkbox

3

@baipc I’m getting this error in the console while building the component:

npm run publish

Error… Can’t resolve ‘./edit-operator’ in ‘C:\Users\44790\Desktop\React-Pega\pegacompsecond\examplecomponent2\src\components<someName>_myTestLibrary_EditOperator’
TypeError: Cannot read properties of undefined (reading ‘message’)

It only works, when I remove tag from index.tsx

function CompanyMyTestLibraryEditOperator() {

return (

<StyledCompanyMyTestLibraryEditOperatorWrapper>

        <EditOperator />

       <span>Message</span>

      </StyledCompanyMyTestLibraryEditOperatorWrapper>

);

}