Custom Masks
Stable Version 3.0.6
Published on 14 Nov by 
Created on 22 October 2014
Details
Customize EditableTables/Forms with input masks
Read More
Add a reference to the following web blocks in your module: MaskText, MaskNumber, MaskDate and MaskCurrency. All web blocks have one mandatory input parameter (InputID), which is the Id of the input widget you want to apply the input mask to.


Format price input using MaskCurrency:

  • How many decimal digits are allowed;
  • Prefix or suffix symbol (e.g. '$ ');
  • Decimal separator ("." or ",");
  • Group separator (".", "," or "\'").

Format date input using MaskDate:
  • This date format is defined by setting the order of the day (dd), month (mm) and year (yyyy), and also by setting the separator between them. For example, dd-mm-yyyy and yyyy/mm/dd are valid date formats.
  • Note that you cannot use the RichWidget Input_Calendar and the MaskDate on the same date input, or you will get wrong and unexpected values.

Format number input using MaskNumber:
  • How many decimal digits are allowed;
  • Decimal separator ("." or ",");
  • Group separator (".", "," or "\'").

Format text input using MaskText:
  • MaskDefinition (e.g. NIB - "9999-9999-9999-9999-9999 9")

Default:
  • 9: numeric
  • a: alphabetical
  • *: alphanumeric

Pre-defined masks:

  • ip
  • email
  • url

Dynamic Masks:

  • Optional: [...]
  • Quantified:

    • {n} => n repeats
    • {n,m} => from n to m repeats
    • {+}
    • {*}
  • Alternator: |


There’s also an optional input parameter in the MaskText and MaskCurrency blocks that allow you to toggle between keeping the mask or not when the input data is send to the server. By default this parameter is set to true in MaskText, and false in MaskCurrency block.

The input parameter AdvancedOptions is available in all web blocks, and here you can specify other options like clearMaskOnLostFocus, which allow you to show the mask even when the input element doesn’t have focus. In particular for the MaskText the boolean option autoUnmask can be useful too, in order to avoid sending the empty mask value to the server. You will find more information about this in the component documentation.


Using input masks you’ll get better and more consistent data, and it will be a lot easier for your users to read and enter that data


What’s new (3.0.6)
  • Replaced Inputmask 3.3.11 by the 4.0.0 stable released in May
  • Made screen expressions injection-proof (using the built-in EncodeJavascript function)
  • Replaced RichWidgets icons by images so they don't get affected by styling (e.g. change color, font size, ...)
  • Solved all eSpace warnings
Reviews (0)
Category
Components, UI & Widgets
Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Sara Gonçalves who created this component.
Dependencies
Custom Masks has no dependencies.
Requirements
Platform
10.0.0.402
Database
All
Stack
All
Component Consumers
Custom Masks has no consumers.
Weekly Downloads 
Related Components
Google Drive Connector
OutSystems R&D
Google Drive Connector allows your OutSystems Applications to use the Google Drive REST API to interact with your files.
1004
OutSystems UI Mobile
OutSystems R&D
Create amazing native mobile applications using this fully integrated UI framework for OutSystems, with dozens of UI patterns ready to use.
7353
Google Maps
Labs
Google Maps is a Google Maps Javascript V3 API component, providing Web Blocks and Actions to add interactive maps, markers and directions, along with event driven functionality.
10684
More from Sara Gonçalves
Measures
Sara Gonçalves
Allows you to measure your application runtime performance by collecting several metrics like time to load, latency, number of requests, etc.