Using InputMask from Constellation UI Gallery to format input fields on Pega Infinity

Discussion

faguh

Member since 2022

1 post

PEGA

Posted: 17 hours 4 minutes ago

Last activity: 16 hours 59 minutes ago

Posted: 16 May 2025 14:43 EDT
Last activity: 16 May 2025 14:48 EDT

Using InputMask from Constellation UI Gallery to format input fields on Pega Infinity

This article will teach how to download and use Contellation UI Gallery component to mask input fields in Pega Infinity

Requirements:

Pega Infinity

Case type created

Constellation UI Gallery downloaded:

https://github.com/pegasystems/constellation-ui-gallery/releases
P.S.: Attention to your Pega Infinity version. Each version uses a different UI Gallery release

Pega '23: Use version 1.x and the release/1.x.x branch.
Pega '24.1: Use version 2.x and the release/2.0 branch.
Pega '24.2: Use version 3.x and the master branch.

Instructions

After we download Constellation UI Gallery from Pega's GitHub, we need to go into Dev Studio. In Dev Studio, we can go to Configure -> Application -> Distribution -> Import

Pega Dev Studio screen showing cascading menus. Configure, Application, Distribution, Import

Select your file location. In our case, we are using a local file downloaded from GitHub. Keep Local File selection, then click "Choose File" and select the .zip file you downloaded from GitHub. Click "Next".

Pega Dev Studio Screen showing three radio buttons (Local File, From Repository, File on Server) and a button to upload a file

Here you can advance to the next step

Pega Dev Studio Screen showing information about the file you uploaded, along with a button to show content details and two checkboxes

In this step, it's possible to select with rules from Constellation UI Gallery you want to import to your environment. To mask fields, MaskedInput is used. If you wish to uncheck any rules, you can do it here. When you're done, click "Next". Wait for the import to finish and click "Done"

Pega Dev Studio screen showing a list of rules to be imported, with "Masked Input" highlighted with a red square

After the setup, we can go to App Studio. In App Studio, go to your case type, select the assignment you want to introduce a masked input field, and click "Configure View".

App Studio screen showing the case lifecycle page, with an assignment highlighted in red with the number "1", and the button "Configure View" highlighted with the number "2"

On the "Configure View" window, on the right side of the screen, click "+ Add -> Fields -> Create new field"

Configuration screen showing the link "Add" highlighted with the number "1", "Fields" highlighted with the number "2", and the link "Create new field" highlighted with the number "3"

Create a Text (single line) field. In this example, we are using CPF, which is a brazilian personal identification number formated as "000.000.000-00".

Field creation screen with a field name "CPF" and it's type selected as Text (single line)

Back to Configure View window, click the gear icon next to your newly created field

App Studio Configure View screen with the gear icon next to the CPF field highlighted with a red square

Click "Display as" dropdown menu and select MaskedInput.

App Studio configure view screen with a dropdown menu open and the option MaskedInput highlighted to be selected

Fill out the "Mask" field with the mask you wish to apply to your input field (In this case, CPF is formatted as 000.000.000-00)

P.S.: You can lookup to UI Gallery's documentation to learn about other types of masks

App Studio configure view screen with the Mask field filled with the CPF format 000.000.000-00

Now the input field is ready to receive the masked value. Dots and dashes are inserted automatically as the user types the value, and the field won't allow more digits than the limit established by the Mask.

Case type input field filled with the CPF value already with a mask applied