Masking in Text Input Element

You can manage masking operations in the Text Input element in the applications you develop on the Kuika platform. Masking provides data entry in accordance with the specified formats. Below, sample masking types are given:

Masking Types

  • 99/99/9999: A date in international date format (day, numeric month, year). The “/” character is a logical date separator and appears to the user as the date separator appropriate to the current culture of the application. For example: “01/01/2023”.
  • (999)-999-9999: United States phone number format, area code is optional. If users do not want to enter optional characters, they can enter spaces or place the mouse pointer directly at the mask position represented by the first 0. For example: “(555) 555-1234”.
  • $999,999.00: A currency value between 0 and 999999. Currency, thousands and decimal characters are replaced with their culture-specific equivalents at runtime. For example: “$123,456.00”.

Implementation Steps

1. Drag and drop the “Text Input” element from the Elements panel.

2. Click on the “Text Input” element you added. Open the “Mask” section in the “Properties” panel on the right.

3. While the element is selected, make the relevant definition from the Mask section in the Properties panel.

You can enter data manually in the “Mask → Fixed Value” section or you can also pull data from the database.

Also, let's see how the number masks for different countries look like on Kuika:

  • Turkey Number 999 999 99 99
  • Germany Number: +49 99 999 99
  • France Number 9 99 99 99 99

If you add the distinctions to the “Fixed Value” field in this way, masking will be performed when the preview is taken.