Introducing Layouts

Make complex apps simple with simple layouts, designing complex forms with several controls now becomes easy with the Studio > Layouts.

Why are layouts needed?

Studio has several controls, simple as well as advanced ones that are used to design the different apps. Moreover, these apps have several users across different devices. It can be a cumbersome task to design these complex apps that can run into several hierarchical levels. We realized from our interaction and from feedback from fellow app developers, that the layout was the need of the hour, and a feature to define layouts would make it easy to design such apps for the teams. This made us develop the Layouts feature for the Studio users.

Where are Layouts?

You can find the Layout section under the Controls menu. Here you can see a container called as Layout, and some more layout types from One Column up to Four Columns. These are the columnar layouts.

How do you use the Layouts?

It is important to understand the layout feature provided here. There are two major controls that you can see, Layout and Columnar layouts.

Layout: The Layout is a container to which you can add the other Columnar layouts like the One Column layout, the Two Column layout, and so on.

Columnar layouts: Studio provides the different columnar layout types like one column, two-column, two columns with Left Sidebar or Right sidebar, three columns, and even four columns. Depending upon the type of design for your app on different devices, you can choose from the different number of column types and achieve your complex hierarchical structure. The benefit of using the columnar layouts is that you can define separate settings for different devices like desktop, mobile, or tablet.

  1. So now to your page, add a Layout container and then depending upon your application choose from the different columnar layouts.

  2. Now add the necessary controls; input controls, advance controls, selection control; any of your controls to the columns of the columnar layout for a logical arrangement.

    It is recommended that columnar layouts are added to the Layout container. Further, if you need to arrange more controls within the columns you can again add the Layout container and add further columnar layouts as required.

  3. Now define the column properties for the different devices. To set the column types, go to the Columns tab under Properties where you can find the Column setting for each device type. Set the columns as you want for each device like multiple horizontal columns for a wider screen like a desktop or laptop and vertical columns for a landscape view of the mobile screen.

Layouts would surely make it simple to design your complex apps for use on different devices.

In case you have any thoughts, suggestions or feedback? We’d love to hear from you. Head to our forum to share in our Suggestions Section