Button

In Brixxbox buttons can be used to validate the business logic. For this purpose, you will most likely add a click event to specify the action.

Documentation

Brixxbox app configurations allows you to add different controls in your app. Check box is the easiest control. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

• Control Type

- For using button control, "Button" 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. For button, normally we do not want to store its value in database.

• Label

- It is the display value for control. For buttons, it makes sense to label them via action that will be performed on pressing them. For Example, on login page we see "login" or "sign up" buttons. If user is a new one then he has to sign himself up in the system by clicking on the "sign up" button and then following the default procedure. On the other hand if user is existing one, to log in he will click on "login" button.

• 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.

• Shortcut

- A user can assign a shortcut command to button. For example, [Ctrl]-[Alt]-D. When ever this command is executed, button will be pressed

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. It does not make sense in button scenario. Button label should be displayed inside the control. It is insignificant for button but plays an important roles for other controls like textbox etc. For other controls, if this option is not selected then 12 column's will be shared between label and control itself. For example, label can be 4/12 column's long and control can be 8/12 columns long.

The display layout is divided into four different categories depending upon the pixels. For each category, Brixxbox also allows you to customize the width of control.

• Phone (and up)

- This category includes devices which have screen pixels less than 768 pixels. For examples: 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 button's case, it will be clickable. On the other hand, if no is selected, 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 button will not be functional in edit mode but it will be functional in create mode of Brixxbox.

• 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.

• Button Style

- This option gives color to control's background This is important option for button. It gives a hint for what to expect when clicking the button. For example, a cancel button should be of red background. This gives a hint to user that in case of pressing you will lose some information.

• Squared

- This option will create a squared button. For example, if we have selected a button of 4/12 size and this option is also selected then a button of size 484 will be created.

• Icon

- Brixxbox is very dynamic and allows a lot of configurability. Many icons are present in Brixxbox and user can choose according to their needs. If user select this option then the Icon will be placed next to the button label.

• Tooltip

- Enter a text for a tool tip. This will be translated.

• Help Text

- Brixxbox with the property allows users to add some help text. This text will be displayed below the control (in this case button). 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 "Button". In this app, we have two textboxes "first name", "last name" and we want to add a "save" button. We want to validate the inputs and save them when button is pressed. First of all, select "Button" from list of controls. After that you need to give an id to your button. After this save your application. Your application should look like this:

We can see a button named "Save" with white back ground. This does not give look promising. Now we can add different background colors. For doing this, go to button edit control and select "styling" tab. Here choose "Success" from Button sytle property. Now save your app. It will now look like this

We want to save the employee first name and last name when the button "Save" is pressed. Firstly, we need to add "onClick" event to our button and then we need to add code to our button "onClick" event. When our button is pressed, firstly we need to validate the input and display error if not. Add "nonEmpty" control validator on both "First Name" and "Last Name". Secondly, add "app.saveCurrentRecord();" code to "onClick" of our save button. Now if you try to save the empty record. It will give error. The error is shown below:

Badge

A badge control is designed to be added as a child to button controls. It is used to show notifications over buttons. For example, total number of orders can be shown over an order button via badge.

Documentation

In Brixxbox, app configuration allows you to add different controls in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:

1. General Properties

2. Size

3. Style

4. Translation

General Properties

These are the main properties of any control. These properties define how control behaves in Brixxbox App.

• Control Type

- For using grid control, click on "Add Control" and select "Badge" control type 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.

• 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

- Normally this is the value which is assigned to a control when the app is opened or a new record is created, the brixxApi calls setFieldValue on this control and set the control's value with the default value. In badge, this can be the only value to get assigned to it. As it not interactable, we do not need to change its value.

Tutorial

In this tutorial, we will be using "customerOrderList" app. It is a simple app which consists of a grid and a button with a badge. The grid lists all available customer orders. The button "Number of Orders" has a badge over it which displays all the customer orders present in our system. Our app looks like this

Here we can see there are only three customer orders are available. These customer orders are uniquely identified by "internal Id". For very less number of customer orders, it is easy to count them but if we have a huge amount of orders and we want their count. This count can daily, monthly, yearly or all time based. This is one scenario where we can use badge over a button. It acts like a notification over button. To add a badge we need to select a badge from top down list of controls in our app.

Another important point to note here is that we have placed badge as a child of the button control. You can do this by dragging the badge control towards right under button control. Our control hierarchy is shown in above figure. We care still not able to see the badge. The reason is we still need to provide data source for our badge. Lets add a data source. Click on "edit data source" button. Select "Sql" as a data source type because we want to count the total number of orders. Now we need to add a sql query which will count the number of total orders present in our system. We will use this query "SELECT count(id) from customerOrder". We are counting on the basis of "internal ids" because they are unique. Data source selection window should look like this

We see now a badge showing over our button and it is showing the count of total customer orders. For now we have only three customer orders in our app.

Accordion

This is kind of a "Tab control", we can use it to host tab pages. For each "TabPage", it will create a separate expandable and collapsible region. User will be able to show and hide the controls of "Tab pages" by expanding and collapsing its region. You can use TabPages inside the "Accordion" like in a "Tabcontrol". The difference between "Accordian" and "Tab Control" is the later organizes "Tab Pages" label's on its first row. All Tab pages are accessable from this row while "Accordion" stacks each sibling Tab page one on another. Also these Tab pages are expandable and collapsible regions.

Documentation

Brixxbox app configurations allows you to add different controls in your app. "Accordion" is used as a container for multiple Tab pages. By default, all Tab pages will be collapsed. It behaves similar to "Tab control" which means from all sibling Tab pages only one will be in expandable form and other will be in collapsed form. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

• Control Type

- For using this control, "Accordion" control type should be selected from drop down list. Multiple Tab page's which are placed on same level of inheritance inside a "Accordion" are known as sibling Tab pages.

• 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 "Accordion", this property is not important.

• 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.

Styling

These properties defines how control looks like in Brixxbox.

• Enabled

- It allows two options: yes, no. If "yes" is selected, the control's input will be enabled. It has no effect in "Accordion" because "Accordion" itself is not expecting any kind of input.

• 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 "Accordion" case, it will have no effect because "Accordion" is not expecting any kind of input.

• Visibility

- It will specify the visibility options available in Brixxbox. There are four options available: visible, hidden, hidden in grids, and hidden in forms. For example, if hidden option is selected then all sibling tab pages inside it, will be hidden.

• Text Color

- Brixxbox allows user to specify, text colors of controls. There are seven different options available in Brixxbox.

• 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.

Tutorial

This tutorial assumes that a user has an existing app. In this app, we have two textboxes "first name", "last name". In this tutorial, we want to put them in a tab page and ultimately add this tab page in a "Accordion. Tab pages are the control containers which can be placed inside "Tab Control". If you want to know more about "Tab Page" have a look at its documentation. At start, our app looks like this:

Now first add a "Tab Page" control and label it with "Personal Details". In next step, add both textboxes "First Name", "Last Name" as child's to the tab page. Both text boxes are siblings now. In the last step, add new "Accordion" and make our tab page its child

We have successfully created a tab page and placed it inside the "Accordion". We can click on arrow (right side - top) to show and hide contents of tab page.

Special properties

• Checkbox 'Add to attachements' - This will automatically add the Picture to the attachements of the current record

brixxApi Functions

• ("controlId") - Triggers the camera

Events

• - Fires everytime a picture is taken/uploaded.

Example usage for onPictureTaken

Print picture

Add picture to image control

Add picture to attachements

CheckBox

A checkbox that can be checked (value: 1) or not (value: 0). For example, if you have an items application. You can use checkbox to show its availability.

Demo

Documentation

Brixxbox app configurations allows you to add different controls in your app. Check box is the easiest control. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

• Control Type

- For using Check box control, "Check Box" 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. Brixxbox saves checkbox value in one bit.

• Label

- It is the display value for control. For checkboxes, it makes sense to label them like "isAvailable" in the form of Yes/ No questions

• 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

- This value is set when an application is opened or a new record is created.

Tutorial

This tutorial assumes that a user has an existing app and they want to add a new control of type "Check Box". First of all, select "Check Box" from list of controls. After that you need to give an id to your check box and create column in database. We also added two buttons "Set" and "Reset". For this tutorial we will follow the structure of demo given above.

We need to add code to our button "onClick" events. "Set" button will set the value of checkbox and "Reset" button will unselect it. Brixxbox accepts input for setting/resetting checkboxes in following formats: as an integer (0,1), as a string "0 or 1", as a Boolean (true or false). The code snippet of Set button is given here

When set button is pressed, it sets the checkbox. Similar is the case when the reset button is clicked it will uncheck the checkbox. After clicking set button our app will look like this

In the last, there is one point you need to care about whenever you want to use true and false to set or reset the checkbox do it in these three ways 0, "0" or false. Do not use true or false as string values like "false" while setting the value of checkbox. It will result in unexpected behavior.

The control will trigger

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.

FormGroup

Normally Brixxbox takes the responsibility of placing control in an app. In order to group element in a row we can use row control. For a vertical alignment, you can place Controls inside the formgroup or you can also add a FormGroupRow in which you can add controls horizontally inside formgroup.

Documentation

In Brixxbox, app configuration allows you to add different controls in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:

1. General Properties

2. Size

3. Style

4. Translation

General Properties

These are the main properties of any control. These properties define how control behaves in Brixxbox App.

• Control Type

- For using grid control, click on "Add Control" and select "FormGroup" control type 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. It should be meaningful.

• 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.

Tutorial

In this tutorial, we will see how to use formgroup control to achieve vertical grouping of controls. This control is purely for structuring controls. For this tutorial, we will be using item app. Our app has 5 controls: item id(numbox), | item name(text box), sale price(numbox), quantity(numbox), and quantity unit type(combobox). Right now, the order of controls is selected by us but the placement is selected by Brixxbox. Our app looks like this:

Now we want to present item id and item name in a vertical fashion. For that, we need formgroup. Lets add a formgroup from the controls list and add both item id and item name as its children's. Now these two controls with be placed vertically and Brixxbox will try to place other controls in horizontal fashion, wherever it finds a place. Our app now looks like this:

As we can see in the above snapshot that item id and item name controls are placed vertically and other controls are placed row wise. The yellow area corresponds to the area assigned to formgroup. If there is enough space available after formgroup, brixxbox will start placing other controls there. Now we also want to add another formgroup for all other controls. Lets add a new control of formgroup type and place remaining controls as its children:

Now we have two vertical columns of controls because we are using two formgroups. Another thing to note here is the size of each formgroup is 4/12 of complete row. I want to add another formgroup and put quantity type control in it. Why I want to do that? because I want my app to be limited to two rows:

Now compare the final version of app with start, it is more organized.

DateTimeBox

In Brixxbox, you can add date time box control to input date with timestamp. Date time box control is similar to Date Time Box control in Brixxbox, it also allows users to add date's with an addition of time stamp. User can select date and time from calendar view.

Documentation

Brixxbox app configurations allows you to add different controls in your app. Date time box control allows user to add dates plus time. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

• Control Type

- For using Date Time Box control, "Date Time Box" 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. For Dates and time control, it makes sense to label them via action that is being performed plus 'time' For example, in an employee information application one date should be arrival time which store date plus time everyday.

• 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 Time Box Control, we can use "moment()" function. It will assign the current value of date to our control.

Date and Time Box Properties

• Precision

- This property allows users to select timestamp precision. It has two options: minutes and seconds. By default minutes is selected.

• Save UTC and show local time

- This is checkbox option. If this Checkbox is selected. The control will display date and time in local time zone of user but the orgnal value behind the control is utc timestamp. Brixxbox "setFieldValue" function will assume you set a utc time and will add the local timezone just for the display. Brixxbox "getFieldValue " function will give you the utc time as well. So users in different timezones will see different values, but in the database there is just the utc time stored.

Size

In Brixxbox, the screen is divided into 12 logical columns horizontally. For each control you can select explicitly how big 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 . Control's label will be present on the top line and Date time 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 Time Box case, user will be able to select a date and time. 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.

• 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.

• 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 Time 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 arrival datetime of employees in our app. To allow this behavior we need to add a "Date Time Box" control.

First of all, select "Date Time Box" from list of controls. After this, you need to give an id to your Date Time Box. Next assign "Arrival Time" label to your control and add "nonEmpty" validator. Now save your application. Your application should look like this:

Now if you always want current date as a value of "Arrival Time" control, we can use "moment()" function as a default value for our control, in general properties. It will assign the current date time to new records and on creating new records, our App will look like this

The value of Arrival Time is "08/31/2021 4:05 PM". It shows the current date and time at which I am writing this tutorial. Date Time Box allows you to add date time in calendar format. 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 and time as a control'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, day and time easily with mouse clicks without typing date and time.

HorizontalLine

Most of the controls are linked with storing and displaying information but horizontal line is purely styling control. It is used to group fields or to separate different controls. For example, separating two row controls. As the name suggests, it will be an horizontal line between controls.

Documentation

In Brixxbox, app configuration allows you to add different controls in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:

1. General Properties

2. Size

3. Style

4. Translation

General Properties

These are the main properties of any control. These properties define how control behaves in Brixxbox App. In case of horizontal line, these properties are of less importance.

• Control Type

- For using grid control, click on "Add Control" and select "Horizontal line" control type from drop down list. As this most commonly used control, Brixxbox has a designated button for adding a new row. User can find this button on app editor page and on the top right corner.

• 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. It should be meaningful.

• 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.

Tutorial

In this tutorial, we will see how to use horizontal line control. this control is purely for styling. For this tutorial, we will be using "unitDemo" app. We have used this app in "unit" control tutorial also. If you want to look into details of this app please go through the "unit" documentation. Here is the link: | Row Documentation. Our app looks like this:

We have already separated controls with rows but there is no visible barrier between them. Now this is where "horizontal line" comes to help. Now we want to visually separate item id, item name and sale price, sale price test then we should put a horizontal line between them. To add horizontal line, click on controls list, select "horizontal line" control. It will be placed at the end of app tree. Drad this control and place it between two rows. Now our app will look like this:

This looks nice. Now lets also separate Unit type control from second row. We need to add another horizontal line between them. After that our app looks like this:

In this way, we can separate different group of controls visibly.

GroupBox

Normally Brixxbox takes the responsibility of placing controls in an app. In order to group controls in a row we can use row control. For a vertical alignment, you can formgroup or groupBox. Groupbox is the advanced form of formgroup. It has all the functionalities of formgroup. Additionally, it also has a header and a border.

Documentation

In Brixxbox, app configuration allows you to add different controls in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:

1. General Properties

2. Size

3. Style

4. Translation

General Properties

These are the main properties of any control. These properties define how control behaves in Brixxbox App.

• Control Type

- For using grid control, click on "Add Control" and select "GroupBox" control type 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. It should be meaningful.

• 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.

Tutorial

Now we want to present item id and item name in a vertical fashion. For that, we need Groupbox. Lets add a Groupboxfrom the controls list, name it "item details" and add both item id and item name as its children's. Now these two controls with be placed vertically and Brixxbox will try to place other controls in horizontal fashion, wherever it finds a place. Our app now looks like this:

As we can see in the above snapshot that item id and item name controls are placed vertically and groupbox containing them has a clear boundary and a header while other controls are placed row wise. If there is enough space available after groupbox, brixxbox will start placing other controls there. Now we also want to add two more groupboxes for other controls. Lets add two new groupbox type controls and place quantity controls in one groupbox and price control in second one as their children respectively:

We can see the final version of app is more organized. Item details, quantity details, and price details are in separate groupboxes with meaningful header and visible boundary makes our app much more readalbe.

FormGroupRow

We can use this formgrouprow control to make a horizontal row of controls inside a fromgroup specifically. It serves the same purpose as of row, make horizontal row of controls.

Documentation

In Brixxbox, app configuration allows you to add different controls in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:

1. General Properties

2. Size

3. Style

4. Translation

General Properties

These are the main properties of any control. These properties define how control behaves in Brixxbox App.

• Control Type

- For using grid control, click on "Add Control" and select "FormGroupRow" control type 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. It should be meaningful.

• 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.

Tutorial

Now we want to place quantity and quantity unit type in a one line. For that, we can use formgrouprow. Lets add a form group row from the controls list and add it as a child to third formgroup. After that place both iquantity and quantity unit type as formgrouprow childern. Now these two controls with be placed horizontally and Brixxbox will place them in horizontal fashion. Our app looks like this:

Calendar

This Control provides an outlook like calendar.

Demo

Usage examples

Setting a date to a calendar control scrolls to that date.

   brixxApi.setFieldValue("myCalendarControl", "2019-01-31");

Sub Settings

The Calendar supports sub settings to set. You can add resource(s) to the calendar for example:

Resources

You can add resources to your calendar by using the setFieldValue comand. To see and use them, you have to enable to resource views in the control view properties.

   //Resources will delete all and set a new array of resources
   brixxApi.setFieldValue("myCalendarControl.resources", [ 
   {
       id: 1,
       title: "Room A",
   },
   {
       id: 2,
       title: "Room B",
   }]);

   //resource will add a single resource
   brixxApi.setFieldValue("myCalendarControl.resource", { 
       id: 1,
       title: "Room A",
       mySortCrit: 100
   });

Resources can be grouped. You need a grouping criteria in your resources and you must tell the calendar the name of this criteria. The order of both operations does not matter.

   
   //Set the grouping criteria
   brixxApi.setFieldValue("myCalendarControl.resourceGroupField", "building");

   //Add the resources
   brixxApi.setFieldValue("myCalendarControl.resources", [ 
      {
          id: 1,
          building "Main building",
          title: "Room A",
      },
      {
          id: 2,
          building "Main building",
          title: "Room B",
      },
      {
          id: 3,
          building "Side building",
          title: "Room C",
      },
      {
          id: 4,
          building "Side building",
          title: "Room D",
      }
   ]);

The width of the resource side panel can be set as well. Can be specified as a number of pixels, or a CSS string value, like "25%".

   brixxApi.setFieldValue("myCalendarControl.resourceAreaWidth", "30%")

You can sort the resourceList by a setFiedlValue command as well.

   brixxApi.setFieldValue("myCalendarControl.resourceOrder", "title"); 
   brixxApi.setFieldValue("myCalendarControl.resourceOrder", "-title"); //sort descending
   brixxApi.setFieldValue("myCalendarControl.resourceOrder", "mySortCrit,title"); //sort by your custom resource property mySortCrit, then by title

To assing events to resources, set the resourceId property in the DataTransform event like the start or end time.

   eventArgs.details.title = eventArgs.details.myTitle;
   eventArgs.details.start = eventArgs.details.myStart;
   eventArgs.details.end = eventArgs.details.myEnd;
   eventArgs.details.resourceId = eventArgs.details.myRoomId; //set resourceId to assing the event to a resource

Views

You can switch to a specific view mode by calling a set value. The following view modes are available, but might be restricted to your control settings.

• dayGridMonth

• timeGridWeek

• timeGridDay

• listWeek

• resourceTimeline

• resourceTimelineWeek

• resourceTimeGridDay

      brixxApi.setFieldValue("myCalendarControl.view", "resourceTimeline");

Demo

Take a loot at for examples

It can be used as headings or giving specific instructions about usage of different app controls or display value for other controls. This control has text but without any interaction. It means that label text is not clickable.

Documentation

In Brixxbox, app configuration allows you to add different controls in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:

1. General Properties

2. Size

3. Style

4. Translation

General Properties

These are the main properties of any control. These properties define how control behaves in Brixxbox App.

• Control Type

- For using grid control, click on "Add Control" and select "Label" control type 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.

• 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.

Tutorial

In this tutorial, we will be using "customerOrderList" app. It is a simple app which consists of a grid and a button. The grid lists all available customer orders. The button "Number of Orders" does not have any "onClick" event because we need it only for displaying badge over it.

Here we can see the list of customer orders but there is no label specifying to whom this list represents. A new user will have to put some effort and explore about the grid entries. Our job is to make user's life easier. For this purpose we can add a label, which will label the list grid as "Customer Order List". We can also apply different color settings also to this label. Lets now add a label, select a "label" control from the control's list. Assign control id and label. We can also set default value for this label control. In this case default value property takes precedence over label property of this "label" control.

Now we have a nice label text showing what does this grid is displaying. Let just assume our user is new and he don't know how to edit a specific customer order then we can a label explaining to click edit button on specific customer order to open that order and edit it. Lets add a label for this and put as a child to our customer order list grid.

Now it is showing the user that in order to open a specific click on edit button.

It does not provides any formatting features. In Brixxbox, if you need formatting then you should use WysiwygText (What you see is what you get).

Documentation

In Brixxbox, app configuration allows you to add different controls in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:

1. General Properties

2. Size

3. Style

4. Translation

There is an additional property type for multilinetextbox. They are related to maximum and minimum height a multilinetextbox can adapt to.

1. Multiple Line Text Input Properties

General Properties

These are the main properties of any control. These properties define how control behaves in Brixxbox App.

• Control Type

- For using grid control, click on "Add Control" and select "mulitLineTextBox" control type 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. It should be meaningful.

• 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

- This value is set when an application is opened or a new record is created.

Multiple Line Text Input Properties

• Minimum height

- It is a drop down list. It is selected in the form of lines. Its value ranges from 2 to 15 lines or no minimum height.

• Maximum height.

- It is a drop down list. It is selected in the form of lines. Its value ranges from 2 to 15 lines or no maximum height.

• Initially adjust height to content

- If its value is checked then whatever the height of initial data present will also become the height of Multi line text input.

Tutorial

In this tutorial, we will see how to use multilineTextBox control. For this tutorial, we will be using item app. Our app has 5 controls: item id(numbox), | item name(text box), sale price(numbox), quantity(numbox), and quantity unit type(combobox). These five controls are placed in three different groupbox controls: item details, Quantity Details, and Sales Details. If you want to dig deeper in this app. Please go through group box documentation. Our app at start looks like this:

Now we want to add item description in our app. This description can be very long so we do not want to use text box. For this purpose, we will use multilinetextinput. In the above snapshot, user can also notice that all other controls are in groupbox containers so lets also add a new groupbox control named "Item Description" and add a new multilinetextinput control and place it inside item description groupbox control.

Here you can see multi line text input control. Interesting thing is you can change size of this control both in editor mode and in app mode. If you check "Initially adjust height to content" property then whenever this app gets initialized and data is being loaded from a data source, it will take the height of the text present in it.

Use a longtext column to store the signature.

TabPage

In Brixxbox, a "tab page" is used as a content container. We can use it inside "Tabcontrol". A "TabControl" can contain multiple "TabPages". Each "TabControl" can have any number of controls. One important thing to note here is "TabPage" does not have size properties because in Brixxbox, we use "TabPages" within "TabControl" and they inherit their parent's size properties. The label of each "TabPage" is placed side by side on the top row of "Tabcontrol". By clicking on respective "Tab Control" label, user can access or navigate between different "Tab Pages".

Documentation

Brixxbox app configurations allows you to add different controls in your app. "Tab Page" is used as a container for multiple controls. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

• Control Type

- For using this control, "TabPage" control type should be selected from drop down list. It should be placed as a child to "TabControl". Multiple Tab page's which are placed on same level of inheritance inside a "Tab Control" are called sibling Tab pages.

• 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 "Tab Page", this property becomes very important. This property is used to recognize content of a tab page. It is recommended to use meaningful labels for a Tab page. For example, if we have an orders app, we can place orders contents in one tab page labeling it as order contents etc.

• 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.

Styling

These properties defines how control looks like in Brixxbox.

• Enabled

- It allows two options: yes, no. If "yes" is selected, the control's input will be enabled. It has no effect in "Tab Page" because "Tab Page" itself is not expecting any kind of input.

• 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 "Tab Page" case, it will have no effect because "Tab Page" is not expecting any kind of input.

• Visibility

- It will specify the visibility options available in Brixxbox. There are four options available: visible, hidden, hidden in grids, and hidden in forms. For example, if hidden option is selected then this specific tab page will be hidden.

• Text Color

- Brixxbox allows user to specify, text colors of controls. There are seven different options available in Brixxbox.

• 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.

Tutorial

This tutorial assumes that a user has an existing app. In this app, we have two textboxes "first name", "last name", Date Time Box control as "Arrival time", and a "save" button. We use this app to store some information like first name, last name, and arrival date time about our employee. "Save" button validates the inputs and save them, when button is clicked. Now we also want to split personal information (first and last name) and other details (Arrival time) and display them on different pages so that To allow this behavior we need to add two "Tab Pages" to store this information. Add both Tab pages one by one from the drop down list and label them "Personal Details" and "Other Details". Now put "First Name" and "Second Name" text box as a child in "Personal Details" Tab Page. We need to put "Arrival time" Date and Time Box and "Save" button in "Other details" Tab page. Now save the app and lets look at how our application looks now.

We can see from above figure that we have Tab pages with their respective controls, sound okay but wait a minute! on the right sight of the picture we see nothing. It is showing the our Tab pages are not being shown. The reason is that Tab pages can not be used stand alone. They have to be used inside a "Tab Control" or "Accordion". Lets now add them one by one and analyze changes. Firstly, add a "Tab Control" and makes our two tab pages siblings, inside it. Now save app. App structure will look like this now:

Now let see how our App looks like:

On the left side, we have selected "Personal Details" Tap page while on right side, we have "Other Details" tab page. We can only select one tab page at a time. We are almost done. As you see in above picture, there is a horizontal line passing through "First Name" control on left side and from "Arrival Time" on right side. It does not look beautiful. Now let get rid of it. To overcome this we have to use "Row" control. Lets add a row control and analyze App structure and App view.

On the left side, we can see that we added "Row" control as a child of Tab pages and this row acts as a parent of other controls. On the right side we see that there is no line our controls are present in a container. Beautiful!

Let's see, how our Tab pages will look like when placed inside "Accordion" instead of "Tab Control". Add an "Accordion" in place of "Tab Control" in our app and everything else remains the same:

From above figure, we can see our tab pages but only their names are visible. What happened here? Ahh, remember that "Accordion" control makes our tab pages expandable and compressible. By default they are in compressed form. Now lets expand "Personal Details"

Now we can see the contents of Personal Details Tab Page. If you want to know about "Tab Control" or "Accordion", please have a look at their documentation also.

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.

Documentation

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.

Tutorial

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.

Grid

A grid displays a list of records, specified by the sub data source of that control.

Documentation

In Brixxbox, app configuration allows you to add different controls in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:

1. General Properties

2. Size

3. Style

4. Translation

General Properties

These are the main properties of any control. These properties define how control behaves in Brixxbox App.

• Control Type

- For using grid control, click on "Add Control" and select "Grid" control type from drop down.

• 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.

• 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.

• Hide Select Checkbox Column

- By default, grid also display's a checkbox with each row. This checkbox is used to select a specific row. If it is enabled then user can select multiple rows at a time and perform different operations on them like deletion. If user does not want to display this checkbox then this property should be checked.

• Hide Edit Button Column

- This property is by default unchecked. It allows grid to display an edit button with each displayed row. If user does not want to display Edit button then this property should be checked.

• Cascade Delete

- This is a checkbox. If it is set and a delete operation is performed on a record, in an app containing this Grid control then all the lines of a record will get deleted. For example: User wants to delete an order with all of its item's lines.

• Cascade Copy

- If it is set and a copy operation is performed on a record, in an app containing this Grid control then all the lines of a record will get copied. For example: User wants to copy an order with all of its item's lines.

• Server Side Paging

- Use this property for big data tables. If checked, grid will only be able to data from server side only instead of getting all the data from data source.

• Smooth Scroll

- If checked, this property allows the users to scroll through list of items of grid instead of scrolling up and down via paging buttons.

• No automatic refresh

- Use this property when fetching expensive Grid data. If set, it will block unnecessary calls for data. Brixxbox allows an app to refresh data of all of its controls using "app.refresh()" function. Settings this property will exclude this grid from data refresh calls. However, you can refresh grid data by specifying the grids name in refresh function. For Example: app.refresh("myGrid").

Tutorial

Gird control can be used in two possible scenarios: displaying all data of sub data source. For example: listing all customer orders, and displaying some values. For example: listing order lines of a specific customer order only.

This tutorial assumes that a user has an existing customer order app which records customer's order data. They want to list all customer orders in a new app and update grid to display all order lines of a specific customer order in customer order app.

For first scenario, create a customer order list app, select "Grid" from list of controls. After that you need to give an id to your grid. As grid is usually used to display data from a sub data source, so there is no need to create column in database for Grid control.

Let start with the first case. Select a new app, name it "customerOrderList". Select a "Grid" control type from the list, assign a unique id and meaningful label:

As you can see from the above picture, we have added a grid control but nothing appears in app editor on right side. This is not an error but expected behavior because grid control is used to display a list of records but first we need to specify "sub data source" in grid properties. For this click on "edit sub data source" and select "config" as a data source type. Now select "CustomerOrder" app to display all customer orders and save app settings.

Now you can see that our grid list all customer orders. In its menu, grid allows multiple options like adding new data row, deleting data row, refresh grid, copy data, search filter and drop down list for specifying number of entries for display. Grid provides each data row with plus, select, and edit button. Depending on screen size grid displays only few data columns and plus button is used to see remaining columns as shown below:

Grid allows us to enable or disable select and edit buttons(see General Properties). We have successfully listed all customer orders, now we move towards second scenario. We have two relations between customer order and order lines which are: customer order can have multiple order lines, and one order line can only belong to one customer order. In this part, we want to cover second relation. Now we want to display order lines which belong to only one customer order in customer order app grid. Our customer order app looks like this:

There are a lot of details in this app which are not important here. Our concern is order lines gird which will display only those order lines which belong to one specific order. To allow this behavior, we need to edit "sub data source" settings of our order lines grid and set "target field binding" with the customer order line id.

Now we will see only those order lines in our grid which belong to same customer order. Lets add a new order for our customer John and add a new order line for this order.

Now order lines which belong to John's order are being displayed in our order lines grid. In our case we only added one order line.

Translation

If you want to translate parts of your table, like the column headers, you can use translate tags The part after the ':' in the curly brackets will be translated, like a label. This can be used in header, footer and body.

  <th>{Translate:Address}</th>
  <th>{Translate:First Name}</th>
  <th>Id</th>

Demo

Reads scanns from a wedge barcode scanner and will trigger the OnScan event.

The minimum length for a scan result (including prefix and suffix chars) is 5 characters. That means: A scanner with prefix and suffix chars of '#' can scan a barcode, that is at least 3 characters long. A scanner without a prefix and suffix char will scan a barcode that is 5 or more characters long. In case you need to scan a shorter barcode, you need to add prefix or suffix characters in your scanner settings

Group Name

• The Group Name binds different radio buttons controls. All radio buttons with the same group name will interact. E.G. switching one on will switch others of the same group off.

Unique Value

• Each radio button within a group must have a unique value.

Default setting for button group

• One button within a group can be marked as the default value. This will set the button initially to on.

Example

We could define radio buttons for colors. The group name could be "color" and we can set up different buttons with unique values like "red", "blue", "green", ...

TabControl

When an application has many controls or in other words, a lot of information to store. Adding more controls on one screen, in such manner that they become congested, is not sensible. Instead of doing so, it becomes appropriate to add different pages to your application. Brixxbox provides users with two types of pages: Tabs, and Accordions. In Brixxbox, if we want to add pages to our application we will need a control to manage these pages. This is done by "TabControl".

Documentation

Brixxbox app configurations allows you to add different controls in your app. "TabControl" acts as an host element for TabPages or Accordions. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

• Control Type

- For using this control, "TabControl" 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.

• 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.

Size

In Brixxbox, the screen is divided into 12 logical columns horizontally. For each control you can select explicitly how big 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. 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's input will be enabled. In "TabControl" case, it will have no effect because "TabControl" is not expecting any kind of input.

• 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 "tabControl" case, it will have no effect because "TabControl" is not expecting any kind of input.

• Visibility

- It will specify the visibility options available in Brixxbox. There are four options available: visible, hidden, hidden in grids, and hidden in forms. For example, if hidden option is selected then we will not be able to different tab pages in a tab control.

• Text Color

- Brixxbox allows user to specify, text colors of controls. There are seven different options available in Brixxbox.

• 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. In this app, we have two textboxes "first name", "last name". In this tutorial, we want to put them in a tab page and ultimately add this tab page in a "Tab Control". Tab pages are the control containers which can be placed inside "Tab Control". If you want to know more about "Tab Page" have a look at its documentation. Lets get started.

Our app looks like this at start:

Now first add a "Tab Page" control and label it with "Personal Details". In next step, add both textboxes "First Name", "Last Name" as child's to the tab page. Both text boxes have become siblings now. In the last step, add new "Tab Control" and make our tab page a child of "Tab Control"

We have successfully created a tab page and placed it inside the "Tab Control".

A Widget container is container that can host multiple just like tabcontrol hosts multiple tabs in Brixxbox controls. It is used as a parent to widgets. It is a structural control. User can use it to place and group widgets inside it also.

Documentation

In Brixxbox, app configuration allows you to add different controls in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:

1. General Properties

2. Size

3. Style

4. Translation

General Properties

These are the main properties of any control. These properties define how control behaves in Brixxbox App.

• Control Type

- For using grid control, click on "Add Control" and select "Widget Container" control type 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. It should be meaningful.

• 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.

Tutorial

Now we need to add to widgets. Add widget controls from controls list and add label "Item Ids", and "Item Details" to them. Our app looks like this now:

In above snapshot we can see that two widgets item ids and item details are placed side by side in a horizontal fashion and also the controls inside widgets themselves are in horizontally distributed. Widget container can help us organizing our controls in better way by adding extra hierarchy level to them.

This control triggers the onScan event when it scanned a barcode.

It is a structural control like groupbox. For a vertical alignment, you can use formgroup, groupbox. Widget is the advanced form of formgroup. User can use it inside a WidgetContainer also. Like groupBox, it also has a header and a border.

Documentation

In Brixxbox, app configuration allows you to add different controls in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:

1. General Properties

2. Size

3. Style

4. Translation

General Properties

These are the main properties of any control. These properties define how control behaves in Brixxbox App.

• Control Type

- For using grid control, click on "Add Control" and select "Widget" control type 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. It should be meaningful.

• 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.

Tutorial

In this tutorial, we will see what a widget is and how to use it to achieve vertical grouping of controls. This control is purely used for structuring controls. For this tutorial, we will be using item app. Our app has 2 controls: item id(numbox), | item name(text box). Our app looks like this:

Now lets see what an empty widget look like. Add a widget control from controls list and add label "Item details" to it:

It is exactly similar to groupbox. In empty condition it has a label and a visible boundary. Now we want to group item id and item name. For that, we need add both item id and item name inside widget. Now these two controls with be placed inside it and if there are other controls present, Brixxbox will try to place other controls in horizontal fashion, wherever it finds a place. Our app now looks like this:

As we can see in the above snapshot that item id and item name controls are placed inside widget and widget containing them has a clear boundary and a header.

Fields in same row will be then placed next to each other where ever it is possible. This grouping is in horizontal format as the name of the control suggests itself. If there is no space in the same row, next element will be placed in the next adjacent row. There is no visible boundary of row control.

Documentation

In Brixxbox, app configuration allows you to add different controls in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:

1. General Properties

2. Size

3. Style

4. Translation

General Properties

These are the main properties of any control. These properties define how control behaves in Brixxbox App.

• Control Type

- For using grid control, click on "Add Control" and select "Row" control type from drop down list. As this most commonly used control, Brixxbox has a designated button for adding a new row. User can find this button on app editor page and on the top right corner.

• 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. It should be meaningful.

• 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.

Tutorial

In this tutorial, we will see how to use row control. this control is purely structural. For this tutorial, we will be using "unitDemo" app. We have used this app in "unit" control tutorial also. If you want to look into details of this app please go through the "unit" documentation. Here is the link: | Unit Documentation. Our app looks like this:

Now we want to separate item id and item name from the other properties. This is where row comes in to place. We need to select row control from controls list and put both item id and item name as child's in this row:

Now you can see the controls in the app are rearranged. In first row, only item id and item name controls are present. All other controls are separated. Now lets say we also want to add sale price and sale price test control's to one row also. For this, select row control form "row button". It is present on top right corner, just click it and it will add row. Now put sale price controls in this row:

Now you can see the price controls are rearranged in the app.

ComboBox

Comboboxes are often used to refer to header records (an order line record will most likely have a combobox with its order record).

Demo

Documentation

In Brixxbox app configurations you can add different controls. One of them is ComboBox. Each control has four types of settings

1. General Properties

2. Size

3. Style

4. Translation

General Properties

These are main behavioral properties of any control. These are responsible for control's functionality.

• Control Type

- For using combobox control, combobox control type should be selected from drop down list.

• Control Id

- For each Brixxbox app, this id should be unique. By default Brixxbox assigns a random id which starts with underscore and followed by a string. For Example: "_abcdef". Brixxbox allows you to change its value only once. You can change this id to any value. Recommended way is to start with mandatory prefix(set in app). It can contain numbers, underscores, uppercase and lowercase letters. Each control is always accessed with its Control Id. For Example, you can get and set control value by using its ControlId. If you want to store value of this control in database, use the database button to create a column. You will be able to select column datatype, max length, can be null, options.

• Label

- It is the display value for control.

• Data

- This property specifies from where this control gets data. If no option is specified then by default "Not in Database" option is chosen. If you want to set it then you have to specify the controlId of data source.

• 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.

• Combobox Key Field

- This is the field value from the sub data source. It also becomes the value of our combo box. When we have to get the value of our combo box using "getfieldvalue" function. It will return the corresponding id of selected combobox entry.

• Combobox Value Field

- This option defines how each entry of your combobox will be displayed. It can be a single or multiple columns from sub data source. For single column just name the column. For Example, "adrName". If you want to choose multiple columns, then use curly brackets. You can choose any place holders between them. For example, {id} - {adrName}. "-" is a place holder while id, adrName are column names.

• Min Search Length

- This option specifies the minimum search length of string to trigger search function. If you do not want any search function then specify "-1". In case you want to specify after how many characters Brixxbox should trigger the search and get actual records from the sub data source, specify it here as positive integer. For Example, if value 3 is specified then Brixxbox will trigger actual search only after 3 characters are entered in search field.

• Multiselect

- When this option is specified, one can select multiple values as combobox entries.

• Select List Button

- By default this is hidden. It opens a list of all items of sub data source. It can be used to select an entry from combobox.

• Select Edit Button

- By default this is enabled. If a value is selected in combobox then by clicking edit button will open the complete record in corresponding application. If it is clicked without any value it will open the corresponding application with no record. It can be used to add a new record.

• Default Value

- This value is set when an application is opened or a new record is created.

Tutorial

This tutorial will follow the similar example used in the demo for combobox. You can find this demo at the top of this page.

This tutorial assumes that a user has an existing app and they want to add a new control of type "Combo Box". First of all, select "combo box" from list of controls.

After that you need to give a id to your combobox and create column in database if necessary. Here we named it "myCombo". Also, add a public label for combobox. We labelled it "Address".

Now save the control. It is time to assign a sub data source to our control. Click a sub data source button. Here you can assign different types of data sources. For this example, we will use config data source type. After that select the corresponding app config. We are selecting "address" config because we want to display all the addresses.

Up till now we have defined a combobox, assigned a unique control id and also added a sub data source to it. Now we want to assign two main properties to combobox: combobox key field, combobox value field. "Combobox key" property is a column from result set that will also be the value of our combobox when the entry of combobox is set. Mostly it is the id of result set. Here we also choose id. We can use this value for comparisons. For combobox value field, we want to display values of two columns: adrNumber, adrName from result set. We have to use curly brackets when using multiple columns.

Each entry of combobox will now represent the number of the address and the person's name. For example "10001 John". In this way we can define and use combobox but can we use the value of combobox to display or change some other data? the answer is yes!. For demonstration, we will add grid control (see grid documentation) "myGrid". We also assign address config as a sub data source for our grid control. Now "myGrid" control will display all the addresses present in the result set.

As you can see from above picture that nothing is selected in our combobox "Address". Now we want that whenever we select a record in combobox, the grid displays the same selected record only. For this purpose, we need to modify sub data source of mygrid and add a where clause. An important thing to note here is that all controls of an app are available as sql parameters. In where clause, we need to specify a condition which displays only a record which matches combobox value. We can specify this as "id=@myCombo". Remember that we selected "combobox key field" as id of sub data source "address". In order to pass this change to grid, we have to add a control event "onChange" to our combobox control. Whenever our combobox value change, we want "myGrid" to refresh.

Now save and set a combobox value and we will be able to see only selected record in "myGrid". As we can see from figure below.

Combobox also allows us to select multiple records at a same time. To achieve this functionality, select "multiselect" checkbox from combobox properties. You can see from figure below that multiple values are selected in combobox but there is no record shown in grid.

This is because we were using where clause for comparing one value of combobox but now our combobox has multiple values. Now if we call "getfieldvalue" function on our combobox. It will return an array with selected combobox key value's. Now we have to update our where clause logic in grid to display all selected records. We add this statement to where clause "id in (select value from OpenJson(@myCombo))". This statement says that if a value is present in result set then display it in grid.

You can store that typically in a longtext column.Wysiwyg stands for „What You See Is What You Get“.

Text Box

A text box just lets the user enter a text and saves it. You can use various validators to check the input. For example, "nonEmpty" validator will display error that this field should not be left empty.

Documentation

Brixxbox app configurations allows you to add different controls in your app. Text box is one of the simplest and commonly used control. Its general properties are described below

General Properties

These properties defines how control behaves in Brixxbox.

• Control Type

- For using Text Box control, "text 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.

• Include in global search

- If checked, this allows this control to be included in global search scope of this application.

• Select all on focus

- This property when checked allows to select all the text in the text box, whenever this text box comes in focus.

• Input Mask RegEx

- This property allows you to set regular expression for input of text box. For example, ^[0-9a-zA-Z]*$. This regex allows digits from 0 to 9, small and big alphabets to be part of the input.

• 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.

• 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.

Tutorial

This tutorial assumes that a user has an existing app and they want to add a new control of type "Text Input". First of all, select "Text Input" from list of controls. After that you need to give a id to your textbox and create column in database if you want to store the input in database. Here we named it "tbdText". Also, add a public label for Textbox. I labelled it "Street Name". You can any text in it. For example, add name of street. When you save this record. It will be saved in database. This is the first usage. We can also use text box to display the results from other controls. Lets use address combobox here. It is the same combobox we used in combobox tutorial.

Now when we select the value of combobox, we also want to set the value of "tbdText". The value of "tbdText" will correspond to name of street of the address selected in combobox. For this purpose, we need to add "onchange" event on combobox and add a custom code for it. In this code, first of all, we get the id of address chosen in combobox then we load the complete record using Brixxbox "loadConfigRecordById". In the end we will set the value of "tbdText" by using "setFieldValue" function. In this function, the first parameter takes the controlId of control whose value we want to set and second parameter takes actual value.

Now save the app config and test it by selecting any value of address combobox. It will also set the street name text box with corresponding street name.

Brixxbox allows you to have a unit property for each numeric box control. It is a character based property. User can set any character and it will be displayed as a unit with this numeric control. The is one way of assigning unit to a control. Brixxbox also provides it users with a unit control. The only purpose of this control is to load unit from a data source In this way, Brixxbox allow users to store numeric quantities with their units also. For example, this control can be placed as a child control to a numbox control.

Documentation

In Brixxbox, app configuration allows you to add different controls in your app. It also provides four types of properties which manages how control should behave or look in app. Those four property types are:

1. General Properties

2. Size

3. Style

4. Translation

General Properties

These are the main properties of any control. These properties define how control behaves in Brixxbox App.

• Control Type

- For using grid control, click on "Add Control" and select "Unit" control type 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.

• 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.

Tutorial

In this tutorial, we will be using "unitDemo" app. This is very simple app. It's purpose is to elaborate different ways to set unit of different controls. In this app, we have two controls and both of them are numeric. The first field is Item Id, it will be used to store id's of items and second field will be used to store the price of corresponding item. Our app looks like this

As you can see our "Sales Price" is numeric but we do not have any unit with it. Brixxbox provides us with unit property with some controls like "numbox". In this property we can assign any character to make it a unit of specific control. Now, we need to open "Sales Price" properties and update unit to "Euro" and then save the app. Now we can see in the app editor that on left side of "Sale Price" numbox Euro symbol is being displayed.

This is a nice way to assign unit to a specific control but this is control specific and we do not store in our database. Lets assume we want a unit app so that we list all the units available in our database. This can be done in two steps. First, we need to add an "unit" app which stores the names of all the units in it.

It simply stores the names of units we want in our app. Lets quickly add three units in it: Pc for piece, $ for Us Dollar, and € for Euro currency. In second step, we need to add a combobox named "Unit Type" and assign our unit app as its "sub data source" with id, and unit name as combo box key and field values.

Now we proceed to our third way of presenting unit with numeric control. Here "unit" control comes into play. Let suppose we want display the price of item in another control. This can be a different app also but for the sake of simplicity we will add new numeric control in same app. We also make new control, lets call it "sale price test", read only. We want a simple functionality that as soon as the value of "sale price" changes, it will reflect on "sale price test" control also. We can add onChange event on "sale price". This event on value change will get "sale price" value and set it as the value of "sale price test".

Now we also want a unit for this control. For this we need to a unit control in our app and make it a child control of our "sale price test" control. We also need to assign a data source to our unit control. Lets add our "unit app" as a data source. This data source will allow it to query and get a specific data from data source.Our app looks like this

Now we can see that our "Sale Price Test" has a box for unit but it is empty. The reason behind this is that we need to add query to get specific unit from data source. Lets assume we want same unit as selected in our unit type combobox. The query is

Now when we change the value of unit in our unit type combobox, this change also gets reflected in our sale price test unit.

If there are more than 1 templateGridElement und a templateGrid. The user can choose the displayed version.

Demo

You can add css to this control, that works with all the templateGridElements.

Demo