The Number field field control is designed to hold numbers. The number type is a general-purpose field type for most numerical values, like the number of chairs of a particular type your furniture business has in stock, or the distance in kilometers from one city to another city.
Overview
Number fields should be used in cases where the values are referenced for computation or visualization, such as in formulas performing arithmetic or for plotting in the Chart app. Number fields are not recommended for storing arbitrarily long strings that happen to be numeric, such as account numbers, because larger numbers (above 15 digits) will be rounded. Instead, consider using a text field in these cases.
Additionally, there are other numeric field controls that might be a better fit for your values depending on the types of numeric values you're trying to store. For example:
If you're looking to store a time duration measured in hours, minutes, seconds, or milliseconds, try the Date Picker or Time Picker, which will format your values in a duration format like h:mm:ss.
If you're looking to store an amount of money, try the currency field control, which will prefix the numbers in your field with the currency symbol of your choice, e.g. ₩1000.
If you're looking to store a number as a percent, try the percent field control, which will express your number as a fraction of 100 denoted with the percent sign, e.g. 45%.
Add Number to the form
Firstly, find the Number control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Number
Open the Content > Basic block and set the Title's text of this Multiple Metadata control. For more information about Title for field control, please refer:
Set the Associated variable for this Number control. When you add a new Number control, a default variable will be generated automatically. You can click the Edit Button to change the ID and name, or click the Reset button to bind this Number control to other existing variables. For more information, please refer:
Appearance of the Number
Open the Content > Appearance block to set the appearance and layout of this Currency control.
Placeholder: Set the text of the placeholder for this Currency control.
Thousands Separator: Choose the character used as the thousands separator. In the United States, this character is a comma (,). In Germany, it is a period (.). Thus one thousand and twenty-five is displayed as 1,025 in the United States and 1.025 in Germany. In Sweden, the thousands separator is a space.
Rounded to: The option of selecting the precision, up to 10 decimal places.
Display Title: Choose display or hide the label of this control. For more information, please refer: Understand the title of field controls
Allow comment: Turn on this option will allow users to add comments on this control.
Dynamic Display Rules: When you set a dynamic display rules, It behaves differently based on specific conditions and rules. Learn how to create dynamic display rules for a control.
Validation of the Number
Open the Content > Validation block to set the properties of this Number control.
Readonly: Turn this ON will make this field control as view only status.
Required: Make this field as required. Users cannot leave the content as empty.
Minimum Value: The minimum number that are accepted.
Maximum Value: The maximum number that are accepted.
Step Value: The step of increase or decrease value by clicking the up/down button on the right input box. minimum number that are accepted.
Default Value: Set a default value of this Number control.
Custom Validation: Set the custom validation rules. An error message that will display under your field when specified conditions become true. It will allow you to add any number of rules for validating your field. Learn more about the Custom Validation
.
Action call of the Number
Open the Content > Action block to call a pre-defined action from the dropdown list. This action will be triggered once the value of this Number field is changed.
Style the Number
Field - Editable
Open the Style > Field - Editable block to set the styles of the field control for it's editable status.
Typography: Set the typography options for the value in the Number control.
Normal / Focus: Set different styles for normal state and focus state of the Number control. Styles below are supported to be set separately for Normal and Focus state.
Color: Choose the color of the field's value.
Background Color: Set background color of the field. By default, the background color is set as transparent.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Adjust box shadow options
Placeholder Color: Choose the color of the placeholder text.
Align: Set the alignment of text inside the field control. Can be Left, Center or Right.
Padding: Set the Padding of the field control.
Field Width: Set the width of the field control in PX or %.
Field Alignment: Set the alignment of the field control. This will only be effected when the field width is less than the outside container.
Error Message: Set the styles of the error message,
Typography: Set the typography options for the error message.
Color: Choose the color of the error message's text.
Field - Read Only
Open the Style > Field - Read Only block to set the styles of the field control for it's view only status.
Typography: Set the typography options for the text in the text box.
Color: Choose the color of the field's text.
Background Color: Set background color of the field. By default, the background color is set as transparent.
Align: Set the alignment of text inside the field control. Can be Left, Center or Right.
Padding: Set the Padding of the field control.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Style of title
Set the Title of field controls that are applicable to this control.
Advanced Settings
Set the Advanced options that are applicable to this control.