Question
Lventur
IN
Last activity: 15 May 2024 11:37 EDT
How to format the input field in Pega constellation Infinity 23
Hi, Our application was built in Pega constellation Infinity 23.
I have a requirement to format the Zip code input field as #####(-####).
How to achieve this?
Accepted Solution
Updated: 15 May 2024 11:37 EDT
Pegasystems Inc.
GB
Check out the Masked Input in the Constellation DX Components UI Gallery as I think this might be just what you are looking for. To quote...
The masked input component should be used to enter a text field that follows a specific format like Social a Security Number or a ZIP code. The input mask allows to constrain the information being entered into that format, without impairing the user’s ability to copy/paste or correct mistyping.
Here is a direct link to the demonstration of this component, and a screen shot of an example with the mask you mentioned.
Fields / Masked Input - Docs ⋅ Storybook (pegasystems.github.io)
If this looks like something you would like to try out you can find the source code for these components here:
github.com/pegasystems/constellation-ui-gallery
Check out the Masked Input in the Constellation DX Components UI Gallery as I think this might be just what you are looking for. To quote...
The masked input component should be used to enter a text field that follows a specific format like Social a Security Number or a ZIP code. The input mask allows to constrain the information being entered into that format, without impairing the user’s ability to copy/paste or correct mistyping.
Here is a direct link to the demonstration of this component, and a screen shot of an example with the mask you mentioned.
Fields / Masked Input - Docs ⋅ Storybook (pegasystems.github.io)
If this looks like something you would like to try out you can find the source code for these components here:
github.com/pegasystems/constellation-ui-gallery
Pre-built versions of these components are also available as a RAP file that you can import into your Pega application if you don't want to get into the technical side of things - see github.com/pegasystems/constellation-ui-gallery/releases
Pegasystems Inc.
IN
@PriyadharshiniG5431 - In flow action rule we have form refresh settings. There on Zip property changes we can call Data transform and in that data transform we can change the value to format as per the requirement.
Accepted Solution
Updated: 15 May 2024 11:37 EDT
Pegasystems Inc.
GB
Check out the Masked Input in the Constellation DX Components UI Gallery as I think this might be just what you are looking for. To quote...
The masked input component should be used to enter a text field that follows a specific format like Social a Security Number or a ZIP code. The input mask allows to constrain the information being entered into that format, without impairing the user’s ability to copy/paste or correct mistyping.
Here is a direct link to the demonstration of this component, and a screen shot of an example with the mask you mentioned.
Fields / Masked Input - Docs ⋅ Storybook (pegasystems.github.io)
If this looks like something you would like to try out you can find the source code for these components here:
github.com/pegasystems/constellation-ui-gallery
Check out the Masked Input in the Constellation DX Components UI Gallery as I think this might be just what you are looking for. To quote...
The masked input component should be used to enter a text field that follows a specific format like Social a Security Number or a ZIP code. The input mask allows to constrain the information being entered into that format, without impairing the user’s ability to copy/paste or correct mistyping.
Here is a direct link to the demonstration of this component, and a screen shot of an example with the mask you mentioned.
Fields / Masked Input - Docs ⋅ Storybook (pegasystems.github.io)
If this looks like something you would like to try out you can find the source code for these components here:
github.com/pegasystems/constellation-ui-gallery
Pre-built versions of these components are also available as a RAP file that you can import into your Pega application if you don't want to get into the technical side of things - see github.com/pegasystems/constellation-ui-gallery/releases