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
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:
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
The block MaskCurrency is used to ensure a predefined format for a currency value.
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
Instructions - MaskPercentage
The block MaskPercentage is used to ensure a predefined format for a percentage value.
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
Instructions - MaskNumber
The block MaskNumber is used to ensure a predefined format for a number value.
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
Instructions - MaskDate
The block MaskDate is used to ensure a predefined format for a date value.
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)
To display the MonthYear or MonthDay only, repeat step 3, just change the DateFormat input to "mm/yyyy" or "mm/dd" respectively
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.
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:
In the end, you should have this is your screen:
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.
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.
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.
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.