Masking TextBox

In order to mask your TextBoxes, you can benefit from vanilla-masker, a pure javascript string masking tool. It can be easily added to your project as a node module.

The main idea is to get the whole text inside onTextChanged event and reassign with the masked text.

You do not have to use vanilla-masker for this purpose. Any masking library of self-made solutions are okay. Keep the size of the npm package in mind.


Go here and follow the instructions to install the library with NPM.

  • Open Terminal in the workspace and run the following command

(cd scripts && npm i -S vanilla-masker)
# If you also want to have types:
npm i -S @types/vanilla-masker


import Page1Design from 'generated/pages/page2';
import Color from 'sf-core/ui/color';
import TextBox from 'sf-core/ui/textbox';
import FlexLayout from 'sf-core/ui/flexlayout';
import VMasker from 'vanilla-masker';
import KeyboardType from 'sf-core/ui/keyboardtype';
import Application from 'sf-core/application';
export default class Page1 extends Page1Design {
constructor() {
this.onShow = onShow.bind(this, this.onShow.bind(this));
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
initTextBox() {
const maskedTextBox = new TextBox({
left: 0,
top: 0,
height: 75,
width: 200,
positionType: FlexLayout.PositionType.ABSOLUTE,
backgroundColor: Color.create("#9bc1ff"),
keyboardType: KeyboardType.NUMBER
maskedTextBox.onTextChanged = (e) => {
const maskedText = VMasker.toPattern(maskedTextBox.text, "(99) 9999-9999");
maskedTextBox.text = maskedText;
this.layout.addChild(maskedTextBox, "maskedTextBox");
function onShow(superOnShow: () => void) {
this.headerBar.visible = false;
Application.statusBar.visible = false;
function onLoad(superOnLoad: () => void) {