When you first create a project or add a new tab to an existing project, Glide will build a basic layout based on the data that it finds. As you navigate and build new screens and forms, it can sometimes be a little unclear how your data maps to the interface.
In this guide, you'll learn how to structure your data well and understand how your data appears in Glide.
Structuring your data
There are many different data sources that you can use with Glide. Some are databases and some are more flexible, like spreadsheets. Spreadsheets allow you to organize your cells however you want, but for your data to work in Glide, it needs to be tabular (with neat rows and columns).
Rows and columns in Google Sheets
Within each table, every column should have a name. These column names describe the properties or attributes of your items. Some Data Sources like Airtable automatically have column names, but in spreadsheets, you'll need to make sure the first row is reserved for this.
For example, if you are making a Team Directory, you might have two tables; one for Staff and another for Locations. In the Staff table, you would have columns for Name, Email, Photo, Phone Number, Role, Manager, and Location. In the Location table, you would have columns for Name, Address, and Image.
Structured data in a Google Sheet
If your data is not in the right format for Glide but needs to stay in that format for other reasons, you might want to read our guides on Changing Horizontal Data to Vertical, IMPORTRANGE, and ARRAYFORMULA.
Understanding how Glide displays your data
When you first import your Data Source, Glide will create a basic app as a starting point. If you've structured your data correctly, you'll see some tabs with lists of items. If you click on one of these items, you'll see more data about that item.
At first, it might be a little confusing to understand how your data and the UI relates. So let's break it down.
- Tables become tabs
- Rows become List Items
- A single row becomes a Details Screen
- Column values (a single cell in a row) are displayed in Components
Tables → Tabs
When you create an app from a Data Source, Glide will try to make a tab for every table it finds. You can create new tabs whenever you like, but they have to have a table as a source. You can create multiple tabs with the same Data Source.
Tables become tabs in Glide Apps
Rows → List Items
If your Data Source has multiple rows, you'll see those items in a Collection.
When you click on the Collection in the Components panel, you'll be able to configure its settings on the right and show different columns from that table. Modifying your Collection Layouts is one of the first ways you start designing your project in Glide.
Configuration panel of a list layout
Row → Details Screen
When you click on one of the items in a List, you get taken to a Details Screen. This details screen then represents the whole of that row. Glide adds Components for each column it finds in your table. So if you added a table with team member info, your Details Screens might look like this.
The components panel on a Details Screen
But you don't have to show every single column in a Component. You can display what you want and leave some columns hidden.
Showing few column values only using the Title component and the Button Bar component
Leaving components out of your screens is not a security feature as the data can still be downloaded to your device. Learn more in our Security Guide.
Column Values → Components
Some Components can display only one column from your row, and some can display more, like the Title Component.
The Title Component can show three columns from your table
If you want to learn more about screen types, read the article below.