Number

You have to go through a three-step form wizard to enable this Control, i.e., Design, Validation & Advance. Let’s explain these steps below:

1st Step – Design

This is the first step of the “Number” control form wizard. Here you are required to fill in the following details:

1. Database Field Name (mandatory): Defines the name of the database field to which the component's data will be mapped and stored.
2. Label Name (mandatory): Specifies the display name or title for a field or control in the user interface.
3. Column Width: Specifies the display name or title for a field or control in the user interface.
4. Placeholder: Defines the hint text displayed inside a form field or input box when it is empty, providing guidance on the expected input.
5. Enable Tooltip?: This button is set as “Yes” if you need to enable Tooltip Text in this Control
   1. Tooltip Text: Defines the text to be displayed in the tooltip when the user hovers over the icon. [Note: "Tooltip Text" supports both plain text and HTML-formatted content.]
   2. Select Tooltip Position: Select tooltip position from the following Top, Right, Bottom or Left

2nd Step – Validation

1. Minimum: Minimum Value that can be accepted by user input
2. Maximum: Maximum Value that can be accepted by user input
3. Minimum Model: Here, we enter field name (attribute) from the form, which will define the minimum value that can be acquired by user input
4. Maximum Model: Here, we enter field name (attribute) from the form, which will determine the maximum value that can be accepted by user input
5. Default Value: As the name suggests, it defines a default value for a field. This default value can be changed by user input.
6. Is Mandatory?: This button is set as “Yes” if you need to apply this Control as mandatory
   1. Error Message: Here, you can define the error message that will be displayed if this control is left blank.

3rd Step – Advance

1. Design
1. Bootstrap Column Class: Specifies a predefined Bootstrap CSS class to style and format the component, enabling quick customization and responsive design.
2. Description: Enter extra suggestions for user experience on this field
3. Text Align (mandatory): Right or Left

2. Others
1. Format Type: Number or Currency
2. Use 1000 Separator (,): A property that enables the inclusion of a comma as a thousands separator in numeric values for better readability, e.g., displaying 1000000 as 1,000,000.
3. Decimal Places: A property that specifies the number of digits allowed after the decimal point in numeric values, ensuring precision and formatting consistency.
4. Negative Numbers: A property that determines how negative numbers are handled or displayed, such as with a minus sign (e.g., -123).

Click “Confirm” and “Number” control is configured.

How to use Number control

1. Begin by creating a blank transaction form.
2. Add Number control.
3. Configure all the attributes in design page based on the specified requirements of the form.

4. Minimum and Maximum define the range of values a user can enter. The input must be equal to or between these two limits.
5. Minimum Model and Maximum Model let you specify field names from the form that dynamically set the minimum and maximum values a user can enter.

6. Configure all the attributes in design tab of advance page based on the specified requirements of the form.

7. In others tab of advance page you have formatting options.
   1. Choose between Number or Currency. Number displays plain numeric values. Currency adds a currency symbol (like $) to the number.
   2. If you select Number format, enable 1000 Separator (,) to make large numbers easier to read by adding commas. (e.g., 10000 becomes 10,000).
   3. Decimal Places set how many digits appear after the decimal point for consistent precision.
   4. Negative Numbers decide how negative values should be displayed. Example: -123 or (123), depending on the formatting style you prefer.
   5. If you select Currency format, choose the Symbol you want to show (e.g., $, ₹, €).