Mask Input

MASK INPUT ELEMENT

Allows to custom format user’s input to fit any type of data. Use it for APPUser/Object to easer understand that what he is typing. For example, it is much easier to read phone numbers separated with spaces and braces. Same goes for money and dates.

You can set how many letter/numbers can be put in, or where is a decimal point, or how to show area code. Mask has some preset types for which you can chose and then edit (phone number, calendar input, clock, money and IP address)

IMPORTANT! We highly recommend using this field when you need to receive uniform inputs from users. It saves users from making mistakes, especially in large numbers. Also whatever you in Default value of Mask element will be formatted according to Mask, so you can use element to show data to users. For example, if you store data in Objects as 123450, then showing this number in Money mask will produce 1.234,50. If you only want to show and not to save anything in this element, then just make sure that Save to Object field is set to “None” and Backend name is deleted.

MASK INPUT ELEMENT PROPERTIES

  • Backend Name: is used to reference this Element from the other parts of the App. Using Backend Name the value stored in the Element could be printed or it can be called for the logical conditions.
  • Placeholder: This is what user sees until typing into this field. It’s best used to show a hint to a user, for example, “Please type in you name” or “Select one” or “Chose your city”, etc. Can contain any _hashtag_ reference.
  • Required: if checked makes this field required to be filled and would allow to move to the next page only when the field is filled.
  • Font Family: select the font family from the list of defined fonts.
  • Font Size: the size of text characters, measured in units called points (pts); a point is equal to 1/72 inch.
  • Line Height: the amount of space above and below the text.
  • Letter Spacing: is the adjustment of the horizontal white space between the letters in a block of text.
  • Text Color: is sometimes used to convey meaning beyond the basic text. You may use the specific color to emphasize an important statement.
  • Background Color: sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin). Tip: Use a background color and a text color that makes the text easy to read.
  • Border: setting the border to 0 would make it invisible. You can customize the each of the 4 borders separately or all of them together.
  • Corner Radius: how rounded the corners you want to be.
  • Margin: the space around Element, outside of the defined border.
  • Padding: the space around an Element's content, inside of the defined border.
  • Default Value: the default integer or string that the field would keep. would be stored in the backend of the system only and would not be displayed to the AppUser unless specified in the Placeholder.
  • Hide Data From Object: the AppUser would not be able to see the data in the field in the History System Screen.
  • Mask: choose from the predefined masks like Phone, Date, Time, Currency, etc., or create custom one.
  • Reserve: sets how numbers are typed on the screen. Reverse checked means typing is started with decimals or from right to left.
  • Visibility: the default state of the Element, is shown by default, but can be hidden.
  • Conditional Visibility: the condition on which the element would become (un)hidden.
  • Repeat Element: repeat the Element based on the Smart Filter.

MASK INPUT ELEMENT ACTIONS

  • Save to Object Column: select the Objects Column you want the data from this field to be stored in.
  • Toggle Element Visibility: check to make this element conditionally hidden based on the _Button Element_ pressed.
  • Toggle Element Name: enter the name of the Element that needs to be hidden/shown when the link is clicked.


How did we do?