Skip to main content

SILK UI Framework

 

OutSystems

Input Masks Mobile Component

Mask an input to a specific format using JavaScript.

  • CurrencyMask allows you to format an input as currency.
  • NumberMaks allows you to format an input as number using or not decimal and group separators.
  • CreditCardMask allows you to format an input as credit card: four groups of four numbers.

How to Use the Input Masks Mobile Component?

The Input Masks Mobile component has 3 blocks: CreditCardMask, CurrencyMask and NumberMask. Drag any of these blocks to your screen and then drag the input to be masked inside its “input” placeholder.CurrencyMask and NumberMask. Drag any of these blocks to your screen and then drag the input to be masked inside its “input” placeholder.

Mask a Currency Value

  1. Reference the CurrencyMask from the InputMasksMobile component.CurrencyMask from the InputMasksMobile component.
  2. Drag the CurrencyMask block and drop it in your work space where you want a currency input.CurrencyMask block and drop it in your work space where you want a currency input.
  3. Use an input inside its placeholder - we recommend you to use a number type input, but the mask works with text too.
  4. The component default values use: 2 decimal digits, “,” as decimal separator, “.” as group separator, “$” as currency symbl in prefix. You can change those values.
    a. You can change the DecimalDigits parameters to 0 if you don’t want decimal parts in your mask.
    b. You can change the CurrencySymbol parameter to “” (empty string) if you don’t want to show a currency symbol in your mask.
    c. You can change the GroupSeparator to “” (empty string) if you don’t want to show a group separator in your mask.

Mask a Number Value

  1. Reference the NumberMask from the InputMasksMobile component.
  2. Drag the NumberMask block and drop it in your work space where you want a number input.
  3. Use an input inside its placeholder - we recommend you to use a number type input parameter, but the mask works with text too.
  4. The component default values use: 0 decimal digits, “,” as decimal separator and “.” as group separator. You can change those values.
    a. You can change the GroupSeparator to “” (empty string) if you don’t want to show a group separator in your mask.
    b. To use decimal digits in your mask, change the DecimalDigits parameter’s value to the number of decimal digits you want.

Mask a Credit Card Value

  1. Reference the CreditCardMask from the InputMasksMobile component.
  2. Drag the CreditCardMask block and drop it in your work space where you want a credit card input.
  3. Use an input inside its placeholder - we recommend you to use a text input type.
  4. The component default value uses “ “ (space) as group separator.

 

Currency Mask Drill Down

 

Input (Placeholder) Drop the input you want to mask here.
DecimalDigits (Integer) Number of digits after a decimal separator.
DecimalSeparator (Text) Decimal separator for decimal numbers.
E.g. "," in "123,45".
GroupSeparator (Text) Group separator for number formats. E.g. "." in "1.234.567,89"
CurrencySymbol (Text) Adds a currency symbol at the beginning of the input's value. E.g. € 9.99
IsSuffix (Boolean) If true, the currency symbol is positioned at end of the value. E.g. 9.99 €

Number Mask Drill Down

Input (Placeholder) Drop the input you want to mask here.
DecimalDigits (Integer) Number of digits after a decimal separator.
DecimalSeparator (Text) Decimal separator for decimal numbers. E.g. "," in "123,45".
GroupSeparator (Text) Group separator for number formats. E.g. "." in "1.234.567,89"

Credit Card Mask Drill Down

Input (Placeholder) Drop the input you want to mask here.
GroupSeparator (Text) Applies a separator (for example, a space, or a dash) between a group of four numbers.
  • Was this article helpful?