Question
Aflac Northern Ireland
GB
Last activity: 4 Feb 2025 5:50 EST
Constellation DX component - Signature capture not available in display as
Pega version - 23 Have imported RAP file from https://github.com/pegasystems/constellation-ui-gallery/releases
Imported version - Constellation UI Gallery 1.0.9
Have locked the ruleset and referenced the ruleset in application definition. After these steps I have been trying to add a Paragraph field and Display as dropdown doesn't list newly imported components. But could see the Rule-UI-Component is created for the imported components.
Can someone please help with the above issue. Thanks in advance
Accepted Solution
Updated: 4 Feb 2025 5:50 EST
Pegasystems Inc.
IN
Starting from version SDK-A 23.1.10, the Custom Component Builder is integrated into the Angular SDK. If you are using Angular SDK 23.1.10 or later, you can easily run DXCB commands directly within the Angular SDK. For guidance on creating custom components, refer to this documentation. https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/using-dx-component-builder.html
For older versions of the Angular SDK, you can manually create a folder for the custom component and add an entry in the loca-component-map.ts file as shown below:
import SignatureCaptureComponent from '../components/signature-capture.component';
"Pega_Extensions_SignatureCapture": SignatureCaptureComponent
Pegasystems Inc.
IN
For "Signature Capture" control we need to set the field property as type "text".
You can find more details here - https://pegasystems.github.io/constellation-ui-gallery/?path=/docs/fields-signature-capture--docs
Aflac Northern Ireland
GB
Thank you. Its working now.
Can you please let me know if i need to copy the dx component code into my angular project for it to work.
Pegasystems Inc.
CA
Yes, I think you have to rebuild with Angular DX SDK if you have an Angular project.
Pega Gallery DX components are built with React SDK.
Aflac Northern Ireland
GB
@RameshSangili Wondering if PEGA would be able to provide angular version of the PEGA gallery DX components
Updated: 30 Jan 2025 11:13 EST
Aflac Northern Ireland
GB
@AlagappanR And having an issue when the field type is Text(Single line).
Could you please let me know if there's a way to rectify this other than setting the field type as Text paragraph as it doesn't list "display as" option as Signature Capture.
Pegasystems Inc.
IN
The error is coming due to the length of the property.
As per the guidelines - You need to make sure that the field property is of type text and is long enough to store a complete base64 image (set the length to 50000).
Please set the size while creating the property.
Updated: 30 Jan 2025 10:41 EST
Aflac Northern Ireland
GB
Have created a new folder for SIGNATURE CAPTURE. But application is not able to refer to the below mentioned folder and ends up saying DefaultForm wants component not yet available: Pega_Extensions_SignatureCapture
Can you please help me on the above.
The .HTML file is a dummy placeholder to check if the newly added content is being referred. .Ts file holds the reference from app.module.ts
Pegasystems Inc.
US
@AlagappanR you are misunderstanding what a Constellation DX component is
this is a way to extend the OOB Pega Constellation UI which is built on React - The SDKs serve a very different objectives and are about building a complete application using a different design system and different framework
the Angular SDKs comes with some OOB components - You can extend it by creating our own Angular components -
Updated: 30 Jan 2025 10:02 EST
Aflac Northern Ireland
GB
I had a try again by creating own component https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/initialize-project.html.
But have found that the commands from the above link are downloading component builder packages which includes React dependecies and I am trying to create a component associated to angular. Can you please confirm if the package can be downloaded for angular or do I have to create the folder structure manually for angular.
Also having doubts around npm run create command. As the command is creating a react component structure and what i expect is an angular component. Would be more helpful to know if there's a documentation listing out the steps for the above two ask.
Thanks
Pegasystems Inc.
US
@AlagappanR angular SDK comes with its own environment and tool to create a new component - you should NOT use the Constellation UI Gallery.https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/component-based-development.html
Updated: 30 Jan 2025 11:27 EST
Aflac Northern Ireland
GB
Yeah. I haven't been using the Constellation UI gallery now after understanding there is a separate environment using dx component builder. Now I am stuck trying to intialise a angular project as whenever i run npx @pega/custom-dx-components@23 init is initialising a project with react node modules. Can you please let me know if there is a way to initalise a component builder environment with angular modules. And please confirm if the angular folder inside src/components structure have to be manually created.
Thanks.
Accepted Solution
Updated: 4 Feb 2025 5:50 EST
Pegasystems Inc.
IN
Starting from version SDK-A 23.1.10, the Custom Component Builder is integrated into the Angular SDK. If you are using Angular SDK 23.1.10 or later, you can easily run DXCB commands directly within the Angular SDK. For guidance on creating custom components, refer to this documentation. https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/using-dx-component-builder.html
For older versions of the Angular SDK, you can manually create a folder for the custom component and add an entry in the loca-component-map.ts file as shown below:
import SignatureCaptureComponent from '../components/signature-capture.component';
"Pega_Extensions_SignatureCapture": SignatureCaptureComponent