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