A numeric Text box lets the user to enter a number. It can be used for saving numerical input and also for displaying numerical data. You can use various control validators to check validity of input like "nonEmpty", "digits", "lessThan", and "zipCode" etc. For example, if you want to store a zip code for addresses, you can use a num box for input and then use a control validator "zipCode" on it. "zipCode" validator allows users to set two properties: custom message, country code. User can set any message according to application needs and specify the country name. Brixxbox will display error if zip code entered by user is not valid with respect to country code provided in settings.
Brixxbox app configurations allows you to add different controls in your app. Num box is the simplest control. Its general properties are described below
General Properties
These properties defines how control behaves in Brixxbox.
Control Type
- For using num box control, "Numeric input" control type should be selected from drop down list.
Control Id
- For each Brixxbox app, this id should be unique. For Example: "_abcdef". Brixxbox allows you to change its value only once. You can change this id to any value but it should be meaningful. Recommended way is to start with mandatory prefix(set in app). It can contain numbers, underscores, uppercase and lowercase letters.
Label
- It is the display value for control.
Data
- This property specifies from where this control gets data. To set it, specify the controlId of data source. By default "Not in Database" option is selected.
Select all on focus
- This property when checked allows to select all the data in the num box, whenever this num box comes in focus.
Refers to Config
- You need to set this option if this is a field, that other fields refer to, to get data from another config.
Decimal Digits
- This option allows you to set whole numbers or real numbers up to 10 decimal precision as a valid input for your num box.
No Up/Down arrows
- If you check this option then no up/down arrows will be provided next to number. The default functionality of up/down arrows is to provide increment by 1 or decrement by 1 when upper arrow or down arrow is clicked respectively.
Unit
- The property allows you to specify a unit character here. For example we can specify $ for US Dollar, € for Euro etc.
Load record on load
- If this checkbox is selected then Brixxbox will load the record using value of this text box as a key.
Default value
- This value is set when an application is opened or a new record is created.
This tutorial assumes that a user has an existing app and they want to add a new control of type "Numeric Input". First of all, select "Numeric Input" from list of controls. After that you need to give an id to your num box and create column in database if you want to store the input in database.
Here we will consider two possible scenarios: getting a value from user for our num box and saving it, and on the basis of other control displaying some value in our num box.
Let start with the first case. For our Tutorial, select a "Numeric input" control type. Assign a meaningful controlId to it. We name it "nbZipCode". Here we add "ZipCode" name with mandatory prefix of the app "nb". Add it to database because we want to store zip codes. We have also assigned "Zip Code" label to it. Now save it.
With above settings, any numeric values can be accepted as a valid input but we want to change this behavior of num box. We want to save zip codes of Germany in our num box. The question arises, How can we alter the settings of num box so that it only accepts valid zip code? A valid German zip code consists of only 5 positive digits. To achieve it, we add a control validator "zipCode" to our num box. In its settings, for country code we choose "DE" for Germany and save it.
Now our num box only allow 5 digits positive numbers. Otherwise it will give an error.
Now we will take a look into second case. Let take the address comboBox which we used in the combo box tutorial. Now when we set an address in our combobox, we want to display its corresponding zipcode in our num box. We have to write a custom code on "onChange" event of combobox. This event will be triggered when combo box value change. The code looks like this
In first line of code we are getting the "key field value" of our selected combobox value. To get full record from data we are using "loadConfigRecordById" function in line 2. In line 3 we are setting the value of zip code num box with the value of zip code of loaded record. We also do not want our users to change this value. We need to set "Enabled" styling property of our num box to "No". Now when we select an address from combobox, it sets the num box value with the zip code of record set in combo box.
