Layout and Columnar Layouts

When creating apps, the layouts enable you to arrange the form components in a logical order well suited to the different devices. It enables you to easily design complex apps in a manner that it becomes easily navigable to the users of any of the devices.

If you design a form with a single column it would be a great user experience for a user accessing it on mobile with standard screen size. However, the same might not be true for a user on a desktop or even a widescreen tablet. In such scenarios, two or even more columns can be a good option for ease of use.

Studio provides the Layouts feature in the Controls section. There are different layouts that allow you to design your forms in a multi-column format. Other controls can be added to the layouts to enable you to make even a complex application easy to use on any kind of device.

Under the Layouts, you can see a container called as Layout, and then there are some more layouts from One Column up to Four Columns. These are the 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. The Layout container is of type “layout”. When designing complex forms it is recommended that any of the columnar layouts mentioned below should be added to a layout and designed further. Further on you can also add the Layout container to any columnar layout which would be useful to further add the columnar layout and design complex and multilevel forms.

Columnar layouts: The Layout as we have seen earlier is a major container to which you can add different columns. Studio provides you with several columnar layouts from one column to four columns as follows:

  • One Column: The One column layout adds a single column to which you can add your controls which would get added as a single column with multiple rows. You can see only a single column in the Mobile portrait view even when you add multi-column layouts. The layout is of type “column”.

  • Two Column: The Two Column layout adds two equal-sized columns to which you can add your controls. You can see two columns when viewing it in the Desktop view, tablet view, and the Mobile landscape view. You can see only a single column in the Mobile portrait view. The layout is of type “column”.

  • Left Sidebar: In the two-column layout you have two equal-sized columns. However, in the left sidebar layout, the column on the left-hand side is smaller than the other column on the right-hand side. It is in the ratio 1 : 3 of your container on any type of device. The layout is of type “column”.

  • Right Sidebar: In the left sidebar layout you have the column on the left-hand side is smaller than the other column on the right-hand side. For the Right sidebar layout, it will be the other way round. The column on the right side is smaller than the one on the left-hand side. It is in the ratio 1 : 3 of your container on any type of device. The layout is of type “column”.

  • Three column: The Three Column layout adds three equal-sized columns to which you can add your controls. You can see three columns when viewing it in the Desktop view, tablet view, and the Mobile landscape view. You can see only a single column in the Mobile portrait view. The layout is of type “column”.

  • Four column: The Four Column layout adds four equal-sized columns to which you can add your controls. You can see four columns when viewing it in the Desktop view, tablet view, and the Mobile landscape view. You can see only a single column in the Mobile portrait view. The layout is of type “column”.

Properties

UI properties

  • Label : Label is the text that is displayed above the container box and helps the user to understand what the control represents in the micro-app.

  • Properties : These properties help you customize the Label by changing the text size, weight( Light, Normal, Bold, Extra Bold, X Extra Bold), alignment (Left, Center, Right, Justified), and color of the label.

  • Type : The Type field is automatically generated depending upon the type of control used as mentioned earlier.

  • Unique Name : A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name based on the Label name given to the control.

  • Tooltip: This allows you to add the Tooltip text that would provide a hint to the user for providing input. The Tooltip icon would be visible if you switch on the Show tooltip icon toggle property available below.

  • Description: Is the description that you can add for your controls. The Description would only be visible if you switch on the Show Description toggle property available below.

  • Show Tooltip Icon: This allows you to toggle switch ON or OFF to show or hide the tooltip icon where the tooltip text would appear.

  • Show Description: This allows you to toggle switch ON or OFF to show or hide the Description text.

  • Hidden : The hidden option helps you to hide the control from the user. This might help to perform some computation you don’t want the user to see or if you want to show certain fields only when a specific condition is met/not met.

  • Caching : When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the field even when the user accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and when getting the latest data from the sheets is not critical.

  • Hide Label : This option hides the label of the field from the view.

  • Trigger dependents: When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here .
    By default, Trigger dependents is enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.

Event

layout event properties

The Event properties are available for both Layouts and Columns. They define how the Events for the parent as well as the child (parent - layout, and Child as columns and respective controls within) are triggered.

  • Stop propagation: This is used to stop event propagation to the parent controls. If it is set to ON then it will not pass events to the parent control. When it is turned OFF it will pass the click event to the parent as well and if the parent control has a click event then it will invoke it if the parent control “Listen child click” property is ON.

  • Listen Child click: If this is set ON or enabled, it specifies that the click events of the child controls would be listened to. In other words, They trigger events when the parent events are triggered.

Example: Now say you have a column control and inside this column, there is heading control. Now you have some action bound on column click and if you want to listen to heading control’s click event and invoke column action then you will need to turn on “Listen child click” on the column. So now you can execute an action on the child as well as column control-click.

In another example say supposedly, there is a child control, a parent column, and another parent control to this earlier parent column control. Now if all these have action events bound to them; a click on child control will trigger action events on itself, parent column & the parent (or grandparent) column if the Stop propagation is set to Off for the parent column and the Listen child click is enabled at both parent & grandparent column.

If Stop propagation is set to On at parent column and Listen child click is enabled at parent column, then actions event will be triggered at child + parent column only.

Columns

columns

The Column properties are very useful in setting the layout for the different device types; Desktop, Tablet, Phone landscape, and Phone.

For example, for Desktop, you can set it as two columns or three or four columns and left and right sidebar. Similarly, for Tablet, you can set it to the horizontal or vertical arrangement.

For the Desktop, you also have the option to add custom columns.
custom columns

Other properties

Alignments: This specifies the horizontal and vertical alignment of the controls added within the columns.

Padding and margin: This specifies the padding and the margin around the controls.

Size: This option allows you to set the height, max-width, and height as well as minimum height and width and the text overflow.

Background: This allows you to set the background color.

Border: Under borders, you can set the borders as all borders or left, right, top, bottom. Then you can set the Width, style, color, Radius, Box shadow.

How to use Layout Control?

On the Layout control section, you can see that there is a Layout control and then there are multiple columnar layout types.

  • When you are designing a form you should add a Layout control first and then add any of the columnar layout types. Then to these columns, you can add the controls to arrange them in the manner you want.
  • You cannot add the controls like Text controls etc. to a Layout control directly but you can add the control to any columnar layout added to the main layout control.
  • However, you can add the Layout control to the columnar layout. Then to this Layout add further columnar formats to which you would then add the other controls like text control, numeric control and so on. This is typically used where you are designing extremely complex and nested applications.

Now an important property of the different columnar layouts is that you can define separate settings for different devices like desktop, mobile, or tablet. To set the column types, go to the Columns tab under Properties where you can find the Columns 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.

Now whenever you run this form you would get different settings for the respective type of device that you use.

Preview

In the example below, we have first added a Layout container to the page. To this, we have then added a three columnar layout and a two columnar layout.

The Three columnar layout contains the three text controls.

In the two columnar layout we have added the Radio button control to the first column. Then to the second two columnar layout we have added another Layout container. To this Layout we added a four columnar layout to which we added the four different graph controls. Note that we have defined different column styles for arranging the controls in the second column. Also, we have added a dropdown to the second row of this layout.

Next, we have added another Layout container after the first Layout container. Only the Submit button is added to the second layout.

Mobile landscape view

Mobile Portrait view

Tablet view

Desktop view