Flow Layout : Mobile Friendly

Organising data using flow layout will allow fields to automatically adjust on various devices without writing any special code

 

 

By default the data shown in list views is displayed in a Flow Layout that has 3 columns. Below, you can see this for the Student records.

With the flow layout, all the fields of a Tipo (including any embedded Tipos) whose Show in List View switch was turned on are shown in the list view.

If you select one of the records and view it in the detail view, by default its data is  shown in three columns.

We can change the number of columns displayed. To do this, head over to Manage Tiposand edit the Student Tipo. Open Advanced Editor Meta Data section, you will then be redirected to a page similar to the photo below.

Take note of these fields: Desktop Max Columns, Tablet Max Columns and Mobile Max Columns. These are used to set the maximum number of columns shown in a Flow Layout on desktop, tablet and mobile devices respectively.

The default for desktop and tablet is 3 columns while for mobile, it is 1 column. We do not recommend setting several columns for mobile as the data will then be difficult to read, but you are free to decide how you want your app’s data to be displayed.

We are going to change the number of columns for the Student Tipo in Flow Layout to be 5 on the desktop. Select 5 from the dropdown menu of the Desktop Max Columns field. Save the changes and go back to the home dashboard and take a look at the Student records.

You can see the 5 columns in the image above. If you had set the Form Width of a particular field previously, you might want to re-adjust the value you set for it to accommodate the increase in columns. In the above, we changed the Form Width of the First Name column to 3 so now it takes up 3 of the 5 columns.

Note

Remember that the X Max Columns value sets the maximum number of columns that can be shown for a particular screen size. It doesn’t set a strict number of columns that will be shown for a particular device. Just because you set 5 columns for desktop doesn’t mean all users using a computer to access the app will see the data in 5 columns. The TipoTapp UI is responsive and so the data will be adjusted according to the browser size. If a user is viewing the data on a smaller screen or browser window, then they will see a fewer number of columns.

Setting the X Max Columns of a Tipo affects the following: list views that are in Flow Layout, forms and detail views.