Accordion

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.