Flow Layout Expansion: Fixed Height Settings

Guide for applying Fixed Height settings to your layout

 

 

TipoTapp provides users with the ability to customize layout with Grid Layout and Flow Layout. 

With Grid Layout, as the name implies, the interface is arranged in a grid where each set of records takes up a row like a table. While Flow Layout ensures that fields adjust to the set number of columns for each device type.

Grid Layout and Flow Layout are powerful layouting tools. And TipoTapp provides the users with even more flexibility in organizing the contents of your applications, expanding the Flow Layout tool and adding Fixed Height Settings.

Flexibility With Height

Setting the Fixed Height settings of the Flow Layout, enables users to specify the number of rows to be occupied in the interface in addition to the set Flow Layout settings.

With this, users can have more flexibility in positioning the various contents of their application. Users can even have objects of different sizes be presented together in the application.

For example, a Student profile in the Student Management App usually would look like this,

But with the Fixed Height settings, they can be configured to look similar to the one below

Note: The Fixed Height settings feature can only be used with Field Groups.

To demonstrate how to use this Flow Layout expansion, we will configure the Student Profile to the example shown above.

Step 1: Set Flow Layout Settings

Because we are expanding on the Flow Layout settings, we will have to, first, review the current Flow Layout configurations.

To do this, go and edit the Student Tipo.

In the Basic tab, proceed to the expanded view of the Basic section.

Under the Flow Layout Settings section, set the Desktop Max Columns to 4.

Here, we are indicating that our interface will have a maximum of 4 columns.

Step 2: Create New Field Group

For the custom height and columns to work, the fields in the student profile, or the fields that we want to be grouped together, needs to be added to a Field Group.

Proceed to the Field Groups tab. 

Then add a new Field Group labelled "student_profile".

Note: Field group labels are required to be one word, without spaces in between.

Proceed to the expanded view of the new Field Group.

We want to display basic Student Profile information in the student profile, so we add the following fields:

• Profile Picture (type: File)
• First Name (type: Text)
• Middle Name (type: Text)
• Last Name (type: Text)
• Suffix (type: Text)
• Date of Birth (type: Date)
• Age (type: Number)
• Gender (type: Text) (Dropdown Values: Female, Male)

After adding the fields, save your changes.

Step 3: Add To Basic View

After creating the new Field Group "student_profile", go to Basic Tab. Here, add a new field labelled, "Student Profile", of type "student_profile".

Then proceed to the expanded view of the new field.

Go to the Display tab, and set Disable Expansion to "Yes". 

This is to ensure that the contents of "Student Profile" will be readily visible in the Detail View of the student tipo.

Step 4: Field Group Settings

Following this, go to the Group Settings tab. 

Under the Group Settings section, set Desktop Fixed Height to "Yes". 

A new section entitled Fixed Height Settings will appear below. 

Note: The Fixed Height Settings section will appear if the field that we are configuring accepts only single data, and will not be available otherwise.

In the new section, For Desktop, Tablet, and Mobile views, there will be the following configurations:

• Row Height - height of each data row (in pixels). Default height is 61 pixels.

       Default value (Desktop): 61 pixels
       Default value (Tablet): 61 pixels
       Default value (Mobile): 61 pixels

• Padding - Distance between one data to another.

       Default value (Desktop): 10 pixels
       Default value (Tablet): 5 pixels
       Default value (Mobile): 2 pixels

For our example, we will set the Desktop Row Height setting to 45px.

Step 5: Configure Your Fields

After reviewing the settings, go back to the Field Group tab.

Proceed to the expanded view of the "student_profile" field.

Go to the expanded view of the Profile Picture field.

In the File tab, set Image Only to "Yes".

This ensures that the field only accepts and displays images.

Then proceed to the Position tab. 

Here you will see the Width and Fixed Width configurations for Desktop, Tablet, and Mobile View of the field.

The Width section is where we define the relative width of our field. Here, values shown are the number of columns that our field will occupy.

For this example, we want our profile picture to occupy 2 columns. To apply this, set the Desktop Field Width to 2.

For our example, since we are applying Fixed Height settings in our field group, we will enable the Fixed Height for our field.

Here, when Fixed Height is enabled, the section Fixed Height Setting will appear.

We will be setting the Fixed Desktop Height to 4. This is so that our Profile Picture will have a width of 2 columns and a height of 4 rows in the Detail View of the Student.

Review all our configurations, then save all the changes.

Step 6: Review Changes

After saving all the changes  that you have made, go to Home. 

Refresh the entire page, then go to the Student tipo. Here, select a student in the list to view the student profile.

In the Detail View, you will observe the arrangement in the photo below.

Groupings In A Layout 

TipoTapp also enables users to have multiple groups of fields in the layout of your application.

Note: Having multiple grouped fields using Fixed Height settings require understanding of the measurements applied to the layout.

To illustrate, we will use the same Student Profile, and add a second data, with both the current address and permanent address sitting side by side.

Following the previous steps, edit the Student tipo. Then add a new Field Group named "address_details". 

Go to the expanded view and add the following fields:

• Current Address (type: Address)
• Permanent Address (type: Address)

Return to the Basic View, then add a new field labelled "Address Details" and of type "address_details".

Proceed to the expanded view of "Address Details".

Enable Desktop Fixed Height, and set the height value to 45px.

In the Field Groups tab, edit the "address_details" field group.

Then set the following Position configurations for "Current Address" and "Permanent Address":

• Desktop Field Width: 2
• Enable Fixed Height: Yes
• Fixed Desktop Height: 4

Save all your changes, then refresh the entire page. 

Proceed to the app Home, then the Student page.

Here, select a data row from the list.

In the Detail View, you will see the changes in the layout that we have made.