How to implement the compare and select pattern in Constellation UI

@josenavas rebuild is likely not going to fix this issue - I would check for any difference is how the props and context is sent to your component after upgrading from 24.1 to 24.2 and what the component is sending as payload when calling the dx api on submit.

@josenavas A new API has been added in 24.2 that must be called if you want to page instructions to be updated - this is PCore.getContextTreeManager().addPageListNode - see constellation-ui-gallery/src/components/Pega_Extensions_Map/index.tsx at master · pegasystems/constellation-ui-gallery · GitHub - The UI Gallery has been updated to now support 24.2. Hope it helps.

@Srivarshani likely the currencyCode is not passed when rendering the component - in this code- you will need to pass the currencyCode to use constellation-ui-gallery/src/components/Pega_Extensions_CompareTableLayout/index.tsx at master · pegasystems/constellation-ui-gallery · GitHub

set isoCodeSelection to ‘constant’ and currencyISOCode to your code

@RichardMarsot

Can you please explain these

How can developers make sure their custom components keep working when Pega updates to new versions, like from 24.1 to 24.2?

What are the considerations to make if a developer want the component to handle more complicated selection tasks, like selecting items within groups or layers?

@josenavas best would be to create a new discussion - try first the example on 24.2 using the ComputerLand application RAP - the example is in the User Story case type in the Edit task view.

@RichardMarsot I am on the latest version available, 24.1

I see that in styles.ts you have style that suppose to hide this label:

& > div > div > div > h3 {
display: none;
}

but that style doesn’t get applied for some reason.

I changed the CSS to

& > div > div > div > div > h3 {
display: none;
}

and now I don’t see the label anymore. Perhaps an additional div was added in 24.1?

@Dima K the Constellation ui gallery is currently only tested and supported on 23.1 - yes - the DOM will change in 24.1 and need update to these components - see Release Constellation UI Gallery 1.0.9 · pegasystems/constellation-ui-gallery · GitHub - a new branch will be created to support 24.1 at some point

@josenavasnote sure what you mean by it stopped working -is the issue a styling issue or a runtime issue?

my recommendation is to rebuild the component using @pega/cosmos-xxx 7.x and check that storybook looks fine - then republish.

@RichardMarsot thanks. I will try to rebuild the component and see.

About your question, it should be a runtime or processing issue because as I mentioned in my previous reply, the property IsSelected is not updated in the Embedded data (.Plans) so it never gets appended to .PlansSelected

*Data transform used as pre-processing of the step that follows to the assignment where the custom DX component (compare checkbox) is.

@RichardMarsot

Hi Richard

for some reason this widget doesnt work anymore in my demo environment post upgrade to Pega V24.

Select computer layout is coming as blank always.

Kind Regards,

Vishal

@VishalB8which version did you upgrade? 24.1? If yes, there is a new build of the Constellation UI gallery for 24.1 - I tested recently on 24.2 and it was working fine - there is a temporary branch that is being worked on for 24.2 on github.

@Dima K are you on 23.1?

Hi @VishalB8

It works for me, however, I’m running it in stand-alone mode and not as part of the ComputerLand application. You might need to initialize your project with:

npx @pega/custom-dx-components@~24.1 init

and then copy-paste the component source code and rebuild/publish it to your environment.

Regards,

-J Navas

Hi @RichardMarsot,

now that you mention the temp branch for 24.2, after having some trouble finding a 24.1 sandbox, I could confirm there is an issue with the PCore/PConnect APIs:

Below you can see the payload in Pega Platform '24.1:

The payload gets properly carried over to the next screen: (as I mentioned this only works in Pega Platform '24.1)

I think something is wrong with the following Actions API expression: (you can see more context in my previous post where I added the full code snippet)

actionsApi?.updateFieldValue('.IsSelected', IsSelected);

Finally, this might be more of an issue with the Dynamic Hierarchical Form component which uses a similar code, but I’m adding it here since both components are somewhat related. Hopefully that gets addressed in the temporary branch, as you mentioned.

Thanks,

-J Navas

@RichardMarsot Hi Richard,

Thank you for the update, I will definitely take a look to the PCore.getContextTreeManager().addPageListNode to use the page instructions payload.

Out of curiosity, and if you take a look to my previous snippet for reference (in one of my previous replies):

const updateObjects = (index: number, IsSelected: boolean) => {
  const messageConfig = {
  meta: props,
    options: {
      context: getPConnect().getContextName(),
      pageReference: `caseInfo.content.${listProperty}[${index}]`,
      target: getPConnect().getTarget()
    }
  };
  const c11nEnv = (window as any).PCore.createPConnect(messageConfig);
  const actionsApi = c11nEnv.getPConnect().getActionsApi();
  actionsApi?.updateFieldValue('.IsSelected', IsSelected);
};

Can we control if the updated data gets added to the payload content or pageInstructions? in the POC that worked for me (see screenshot “Payload in Pega Platform '24.1”) it got added to the pageInstructions by default, but I’m not sure if we can have control on that.

I will try to find time to test my modified component in 24.2 and see if the payload passed follows what I saw in 24.1 or if it’s different.

Thanks,

-Jose

@josenavas any pagelist object must be added or updated through page instructions and not through content - see Pegasystems Documentation

@josenavas I am just using the component in my application only. It was working fine earlier, I got the environment updated to latest version post that its not working. :frowning:

Kr,

V

I am getting this error when I try to configure this. Any help would be appreciated.

this is a just a warning to indicate that you have a mismatch version of the cosmos library - this is not impacting the functionality - it is good practice to have your components in sync with the cosmos version