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