DateBox
A date input control
In Brixxbox, you can add date box control to input date. Date box control allows you to enter dates through different methods. User can enter a date manually in text form or user can choose date from a calendar.
Documentation
Brixxbox app configurations allows you to add different controls in your app. Date box control allows user to add dates in different formats. Its general properties are described below
General Properties
These properties defines how control behaves in Brixxbox.
Control Type
- For using Date Box control, "Date Box" control type should be selected from drop down list.
Control Version
- In Brixxbox, there are 2 Versions of the Date picker available:
1: Version 1(V1) will display a HTML5 Browser build in Date Picker. This Control might look different in some browsers. 2: Version 2(V2) is a default version since since 10.8.2021. Now it will display a date picker from a library which is the same on all browsers and provides a variety of different methods to enter date.
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. For Dates, it makes sense to label them via action that is being performed plus 'date' For example, in an order application one date should be delivery date. It will represent the action of delivering the order on a specific date to customer.
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.
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.
Default Value
- Brixxbox allows users to add a default value for a control. This value will be set as a control's value when an application containing this control is opened or a new record is created. In the background, the brixxApi function "setFieldValue" is called with this value. For Date Box Control, we can use "moment()" function. It will assign the current value of date to our control.
Size
In Brixxbox, the screen is divided into 12 logical columns horizontally. For each control you can select explicitly how large it should be according to your application needs. Size properties defines how control will be displayed in Brixxbox App.
Label on Top of Control
- If this option is selected then the label of a control and actual control will be in two different horizontal lines and control's label will be present on the top line and Date box control itself will be present on bottom line. If this option is not selected then 12 column's will be shared between label and control itself and both of them will be present on same line in side by side formation. For example, label can be 4/12 column's long and control can be 8/12 columns long over same horizontal line.
The display layout is divided into four different categories depending upon the pixels. For each category, Brixxbox allows you to customize the width of control.
Phone (and up)
- This category includes devices which have screen pixels less than 768 pixels. For example: Smart phones. This will be by default selected category in Brixxbox. In this category, each control will be assigned to 12/12 by default. It means that in extra small screens, each control takes up the whole horizontal line and next control will take up whole next horizontal line and soon.
Tablets (and up)
- This category includes devices which have screen pixels less than 992 pixels. For example: Tablets. By switching this settings on, they will come into play for particular app.
Medium Devices (Laptops)
- This category includes devices which have screen pixels less than 1200 pixels. For example: Laptops. In Medium devices, an input control will be set to 4/12 per control by default with option to customize the size of controls.
Large Devices (Big Monitors)
- This category includes devices which have screen pixels greater than 1200 pixels. For example: Big monitor displays.
Custom Label class
- This is only relevant if the control is in a From Group, and so the Label is left or right of the control instead of above it. It uses the same rules as the Width properties as above.
Styling
These properties defines how control looks like in Brixxbox.
Enabled
- It allows two options: yes, no. If "yes" is selected, the control will be enabled. In Date Box case, user will be able to select a date. On the other hand, if "no" is selected then it will be disabled.
Disabled in edit mode
- There are two modes available in Brixxbox for each app: edit mode, create mode. In edit mode: user is allowed to add new controls and functionality while in create mode, on the basis of app controls, user is allowed to add a new record, edit an existing record, or list all the records. In order to edit a record, user has to list all the records using app settings and then select a specific record to edit. "Disabled in edit mode" is a checkbox field. If this option is selected then the control will not be functional while editing a previously saved record but it will be functional while creating a new record. In "Date time box" case, user will not be able to edit the value of this control f previoudded record.
Visibility
- It will specify the visibility options available in Brixxbox. There are four options available: visible, hidden, hidden in grids, and hidden in forms.
Text Color
- Brixxbox allows user to specify, text colors of controls. There are seven different options available in Brixxbox.
Input Size
- With this option, Brixxbox enables users to set the input size of Date Box Control. There are four input sizes available for Date Box Control: Default, Extra Small, Small and Large.
Tooltip
- Enter a text for a tool tip. This will be translated.
Help Text
- Brixxbox with the property allow users to add some help text. This text will be displayed below the control. The purpose of this option is to encourage the right behavior of customer while using a specific control.
For further information please have a look at Bootstrap Grid System
Tutorial
This tutorial assumes that a user has an existing app and they want to add a new control of type "Date Box". In this app, we have two textboxes "first name", "last name" and a "save" button. "Save" button validates the inputs and save them, when button is pressed. Now we also want to store joining date of employees in our app. To allow this behavior we need to add a "Date Box" control.
First of all, select "Date Box" from list of controls. In second step, select the version of Date Box Control i.e. "V1" or "V2". Here we selected "V2". After this, you need to give an id to your Date Box. Next assign "Joining Date" label to your control and add "nonEmpty" validator. Now save your application. Your application should look like this:
Now I you always want current date as a value of "Joining Date" control, we can use "moment()" function as a default value for our control in general properties. It will assign the current date to new records and on creating new records, our App will look like this
The value of joining date is "08/30/2021". It shows the current date at which I am writing this tutorial. Date Box allows you to add date in text form. For example, if your employee joinied on 1st of August 2021 then you will add this in text form and in this format "mm/dd/yyyy". It will become 08/01/2021. Date Box allows you to add input in other format also. For this you need to click on calendar icon. IT will display the calendar as shown below
Button on the top left of calendar acts same as "moment()" function. By clicking it one can set current date as a date picker's value. Button on top middle of calendar is used to reset date picker's value. Cross button(X) is used to exit to calendar view. From calendar we can set year, month and day easily with mouse clicks without typing date.
Last updated