---
description: >-
  Most of the controls are linked with storing and displaying information but
  row is purely structural element. It is used to group fields.
---

# Row

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 Gebra Suite, 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 Gebra Suite 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, Gebra Suite 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 Gebra Suite app, this id should be unique. For Example: "\_abcdef". Gebra Suite 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](unit). 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.
