The Layout control is considered the "mother layout" of any page or form. It is the most powerful under the Layout as it can stack other form controls including the Layout control in a horizontal and vertical stack. It also allows form designers to configure design-related aspects such the spacing between child controls, background-color, transparency, and orientation of forms. 


In this article, you will learn how you can use the Layout control in your forms.


Step 1 - Open Page Designer 

After creating a page, form, or sub form, hover over its name. Once the 'Open Page Designer' buttonappears, click on it.



Step 2 - Add the Layout Control to Your Form  

From the Layout tab, drag and drop the Layout control onto your design canvas.



Step 3 - Configure the Layout Control 

Upon adding the Layout control, its properties will appear on the right side of the screen.  



You can customize the following properties accordingly: 


Identifier

This field is for the name used to identify this specific Layout control. Add a meaningful one so you can use it in expressions.

Background Color
Pick a color from the palette to use as the background color of the Layout.
Height
Define the height of the Layout.
Width
Set a width for your Layout,
Spacing

Set a value for the spacing between child controls.

Orientation

You can specify the orientation of your form by selecting from these two options: 

  • Vertical - If you wish to display one control on top of another, choose vertical.
  • Horizontal - If you wish to display controls next to one another, select horizontal orientation.
Horizontal Options

Choose an appropriate horizontal option for the control to appear on the app screen.

  • Fill - Pick this to let the control fill the horizontal space.
  • Fill and Expand - This option makes the control fill the horizontal space, and stretch itself to fill space.
  • Start - With this option, the control will be placed at the left-hand side.
  • Start and Expand - Choose this option to place the control on the left-hand side and allow it to stretch itself to fill space.
  • Center - This option places the control in the center.
  • Center and Expand - This selection places the control in the center and stretches it to fill space.
  • End - With this option, the control will be placed on the right-hand side.
  • End and Expand - Select this option to put the control on the right-hand side and enable it to stretch itself to fill space.
Vertical Options

Choose an appropriate vertical option for the control to appear on the app screen.

  • Fill - This option lets the control fill the vertical space.
  • Fill and Expand - This option lets the control fill the vertical space and stretch itself to fill space.
  • Start - Choose this option to place the control at the top.
  • Start and Expand - This selection places the control on the top and stretches it to fill space.
  • Center - This option places the control in the center.
  • Center and Expand - This selection places the control in the center and stretches it to fill space.
  • End - With this option, the control will be placed at the bottom.
  • End and Expand - Select this option to place the control on the bottom and stretch it to fill space.


Add more controls to your form and then save or publish it.


Watch How It Works

Watch this video tutorial to better understand how to arrange elements using the Layout Control in transform Studio's Page Designer. 





Need more help? Contact us at support@makeen.io