Created on 26 February 2020
icon_unfollowing
Login to follow
inputmask-react

Input Mask React

Stable version 1.0.10 (Compatible with OutSystems 11)
Uploaded on 03 February 2023 by 
inputmask-react

Input Mask React

Documentation
1.0.10

Instructions - MaskText


1. Create the dependencies that allow the usage of the component


The block MaskText is used to ensure a predefined format text value, such as IBAN, IP, Mac, Url, Phone, or even customize at your own will.

To enable it establishes a dependency in your application according to the picture below.

Manage dependencies

Manage dependencies


2. Setting the variables and inputs that allow the masking.


In the desired screen place an input widget, create a variable and set it to the Input. Rename this variable to IBAN, and set Data Type as Text, as seen in the picture below as a sample.

Input with variable IBAN


3. Implementing the MaskText on the screen.


Drag and drop the MaskText Block and set the Input Id and MaskPattern, as can be seen in the pictures below as a sample.

MaskText Block

 

MaskText detail


You can change the maskpattern input to obtain the different masks. There are some pre-defined text masks, such as: "ip", "mac", "url" or you can customize your own masks using the following formats:


  • 9: numeric
  • a: alphabetical
  • *: alphanumeric
  • Optional: [...]
  • Quantified:
  • {n} - n repeats
  • {n,m} - from n to m repeats
  • {+}
  • {*}
  • Alternator: |
  • Escape character: \


E.g:  "\(+\972\) 9{3,4}-9{3}-9{3}" should mask a number that starts with (972) and a space followed by 3 or 4 numbers and a dash, 3 extra numbers, and a dash plus the last 3 numbers.
Valid masked values: (972) 5252-525-252 or (972) 525-252-525  

With this mask, the user only types 5252525252 or 525-252525 to get the above result.

In the end, you should have this as your screen:

 

    In Screen


Instructions - MaskCurrency


1. Create the dependencies that allow the usage of the component


The block MaskCurrency is used to ensure a predefined format for a currency value.

To enable it establishes a dependency in your application according to the picture below.

Manage dependencies


2. Setting the variables and inputs that allow the masking.


In the desired screen place an input widget, create a variable and set it to the Input. Rename this variable to Currency, and set Data Type as Currency, as seen in the picture below as a sample.

Input with variable Currency


3. Implementing the MaskCurrency on the screen.


Drag and drop the MaskCurrency Block and set the Input Id, and other inputs as you will, as can be seen in the pictures below as a sample.

MaskCurrency Block

 

MaskCurrency detail


In the end, you should have this as your screen:

 

  In Screen


Instructions - MaskPercentage


1. Create the dependencies that allow the usage of the component


The block MaskPercentage is used to ensure a predefined format for a percentage value.

To enable it establishes a dependency in your application according to the picture below.

Manage dependencies


2. Setting the variables and inputs that allow the masking.


In the desired screen place an input widget, create a variable and set it to the Input. Rename this variable to Percentage, and set the Data Type as Decimal, as seen in the picture below as a sample.

Input with variable Percentage


3. Implementing the MaskPercentage on the screen.


Drag and drop the MaskPercentage Block and set the Input Id and other inputs as you will, as can be seen in the pictures below as a sample.

MaskPercentage Block

 

MaskPercentage detail


In the end, you should have this as your screen:

    In Screen


Instructions - MaskNumber


1. Create the dependencies that allow the usage of the component


The block MaskNumber is used to ensure a predefined format for a number value.

To enable it establishes a dependency in your application according to the picture below.

Manage dependencies


2. Setting the variables and inputs that allow the masking.


In the desired screen place an input widget, create a variable and set it to the Input. Rename this variable to NumberUS, and set the Data Type as Decimal, as seen in the picture below as a sample.

Input with variable NumberUS


3. Implementing the MaskNumber on the screen.


Drag and drop the MaskNumber Block and set the Input Id and others inputs as you will, as can be seen in the pictures below as a sample.

MaskNumber Block

 

MaskNumber detail

In the end, you should have this as your screen:

 

  In Screen


Instructions - MaskDate


1. Create the dependencies that allow the usage of the component


The block MaskDate is used to ensure a predefined format for a date value.


To enable it establishes a dependency in your application according to the picture below.

Manage dependencies


2. Setting the variables and inputs that allow the masking.


In the desired screen place an input widget, create a variable and set it to the Input. Rename this variable to Date, and set Data Type as Date, as seen in the picture below as a sample.

Input with variable Date


3. Implementing the MaskDate on the screen.


Drag and drop the MaskDate Block and set the Input Id, and Dateformat as you will, as can be seen in the pictures below as a sample.


MaskDate Block

 

MaskDate detail


You can choose different DateFormat inputs (check all in the demo)


In the end, you should have this as your screen:

    In Screen


To display the MonthYear or MonthDay only, repeat step 3, just change the DateFormat input to "mm/yyyy" or "mm/dd" respectively


1.0.8

Instructions - MaskText


1. Create the dependencies that allow the usage of the component


The block MaskText is used to ensure a predefined format text value, such as IBAN, IP, Mac, Url, Phone, or even customize at your own will.

To enable it establishes a dependency in your application according to the picture below.

Manage dependencies

Manage dependencies


2. Setting the variables and inputs that allows the masking.


In the desired screen place an input widget, create a variable and set it to the Input. Rename this variable to IBAN, set Data Type as Text , as can be seen in the picture below as a sample.

Input with variable IBAN


3. Implementing the MaskText on the screen.


Drag and drop the MaskText Block and set the Input Id and MaskPattern, as can be seen in the pictures below as a sample.

MaskText Block

 

MaskText detail


You can change the maskpattern input to obtain the different masks. There are some Pre-defined text masks, such as: "ip", "mac", "url" or you can customize your own masks using the following formats:


  • 9: numeric
  • a: alphabetical
  • *: alphanumeric
  • Optional: [...]
  • Quantified:
  • {n} - n repeats
  • {n,m} - from n to m repeats
  • {+}
  • {*}
  • Alternator: |
  • Escape character: \


E.g:  "\(+\972\) 9{3,4}-9{3}-9{3}"  should mask a number that starts with (972) and a space followed by 3 or 4 numbers and a dash, 3 extra numbers, and a dash plus the last 3 numbers.
Valid masked values: (972) 5252-525-252 or (972) 525-252-525  

With this mask, the user only types 5252525252 or 525-252525 to get the above result.

In the end, you should have this is your screen:

 

    In Screen


Instructions - MaskCurrency


1. Create the dependencies that allow the usage of the component


The block MaskCurrency is used to ensure a predefined format for a currency value.

To enable it establishes a dependency in your application according to the picture below.

Manage dependencies


2. Setting the variables and inputs that allows the masking.


In the desired screen place an input widget, create a variable, and set it to the Input. Rename this variable to Currency, set Data Type as Currency, as can be seen in the picture below as a sample.

Input with variable Currency


3. Implementing the MaskCurrency on the screen.


Drag and drop the MaskCurrency Block and set the Input Id, and other inputs as you will, as can be seen in the pictures below as a sample.

MaskCurrency Block

 

MaskCurrency detail


In the end, you should have this is your screen:

 

  In Screen


Instructions - MaskPercentage


1. Create the dependencies that allow the usage of the component


The block MaskPercentage is used to ensure a predefined format for a percentage value.

To enable it establishes a dependency in your application according to the picture below.

Manage dependencies


2. Setting the variables and inputs that allows the masking.


In the desired screen place an input widget, create a variable, and set it to the Input. Rename this variable to Percentage, set Data Type as Decimal, as can be seen in the picture below as a sample.

Input with variable Percentage


3. Implementing the MaskPercentage on the screen.


Drag and drop the MaskPercentage Block and set the Input Id and other inputs as you will, as can be seen in the pictures below as a sample.

MaskPercentage Block

 

MaskPercentage detail


In the end, you should have this is your screen:

    In Screen


Instructions - MaskNumber


1. Create the dependencies that allow the usage of the component


The block MaskNumber is used to ensure a predefined format for a number value.

To enable it establishes a dependency in your application according to the picture below.

Manage dependencies


2. Setting the variables and inputs that allows the masking.


In the desired screen place an input widget, create a variable, and set it to the Input. Rename this variable to NumberUS, set Data Type as Decimal, as can be seen in the picture below as a sample.

Input with variable NumberUS


3. Implementing the MaskNumber on the screen.


Drag and drop the MaskNumber Block and set the Input Id and others inputs as you will, as can be seen in the pictures below as a sample.

MaskNumber Block

 

MaskNumber detail

In the end, you should have this is your screen:

 

  In Screen


Instructions - MaskDate


1. Create the dependencies that allow the usage of the component


The block MaskDate is used to ensure a predefined format for a date value.


To enable it establishes a dependency in your application according to the picture below.

Manage dependencies


2. Setting the variables and inputs that allows the masking.


In the desired screen place an input widget, create a variable, and set it to the Input. Rename this variable to Date, set Data Type as Date, as can be seen in the picture below as a sample.

Input with variable Date


3. Implementing the MaskDate on the screen.


Drag and drop the MaskDate Block and set the Input Id, and Dateformat as you will, as can be seen in the pictures below as a sample.


MaskDate Block

 

MaskDate detail


You can choose different DateFormat inputs (check all in the demo)


In the end, you should have this is your screen:

    In Screen


To display the MonthYear or MonthDay only, repeat step 3, just change the DateFormat input to "mm/yyyy" or "mm/dd" respectively



Support options
This asset is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from  who created this asset.
Dependencies
Input Mask React has no dependencies.