FormGroup
A form group is another structural control in Brixxbox controls. It is a structural element to create apps with side by side columns.
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:
General Properties
Size
Style
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.
Last updated