Data to App
Learn how Noloco transforms your data into a shareable app for your team and clients.
When you build an app or add a new data source to an existing app, Noloco will build a basic layout based on the data that it finds in your tables. As you build new screens, forms and actions, and discover new corners of your app, it can be a little unclear how your data maps to the app's layout.
In this guide, you'll learn how to structure your data well and understand how your data appears in Noloco.
Your data structure
There are many different spreadsheets, databases and APIs that you can use with Noloco. Some sources like Airtable are databases, and don't need to be re-structured to be used with Noloco and some, like Google Sheets, are more flexible and allow you to organize your cells however you want. However, for your data to work in Noloco, it must be a simple tabular format, i.e. in neat cells and rows.
Within each table that you import to Noloco, every column should have a unique name. Your column names describe the properties or attributes of your rows (or records). Some of our data sources like Airtable, Xano, SmartSuite, or Postgres/MySQL automatically have unique column names, but in spreadsheets, you'll need to make sure the first row is reserved for this, and only this.
Let's look at the above example, if you are making a list of students in a class, you might have a table for the Class Data. In the Class Data table, you would have columns for Student Name, Gender, Class Level, Home State, Major, and Extracurricular activity. Note that these names are in the first row, and are unique.
Understanding how Noloco displays your data
When you import your data source to Noloco, Noloco will use AI to generate the best possible page for each of your tables as a starting point. Noloco looks at your table name, column names and column types to determine what layout you should use, and what data to show, but you can always adjust this when you start to customize your app. When you land in your app for the first time, you will see that we created a page for the first 10 tables.
Let's break down how your data relates to the layout view in Noloco:
Tables become sidebar pages
Rows become Records
A single row becomes a Record View
Column values (a single cell in a row) are displayed in Sections & Collection Views
Tables → Pages
When you create an app from a data source, Noloco will try to make a tab for every table it finds. You can create new tabs whenever you like, but they must have a table as a source. You can create multiple Tabs from the same Data Source.
Each page comes with three main components:
Collection View This is the view that displays multiple records in a table, kanban board, calendar or more Filters can be applied to customize the records that are shown, and the columns (or fields) can be customized to your liking
Record Page This is the view of a single record (or row) from the collection view. Clicking on a record in the collection view will open the Record Page for that record, where you can customize which sections, tabs, action buttons and details are shown for that record (and related records)
New Record Form This is the view (or form) used to create new records that will get added to your table. The form can be customized to your liking, hiding and showing fields, setting default values, placeholder, help text and validation rules.
Rows → Collection View
If your data source has multiple rows, you'll see those items in a Collection View
When you open the Collection View Page, with build-mode enabled, you'll be able configure the collection layout, by choosing a different display option, adding a filter or changing the fields that are shown. Modifying your Collection View is one of the first ways you start customizing your app in Noloco.
Row → Record Page
When you click on one of the records (rows, cards or items) in a collection view, Noloco's default action is to take you to a record view that represents all the information available for that row. Noloco adds default sections for some of the columns (fields) that it finds in your table, and adds related collections for linked fields, but all of this can be adjusted. So if you added a table with project task info, your Record Page might look like this:
Noloco is very customizable, you don't have to show every single column/field on the record page. You can display the data you want and hide other columns using the build-mode editor panel in the left sidebar.
Columns → Fields
In Noloco, a column in your spreadsheet is known as a Field. A field has a type (like a Date Field) and a name. Depending on the type of the field, you can use it in different places in your app. On a Record Page, different sections require you to use one field (such as the video section) or other sections can let you show multiple fields at the same time (such as the details or highlights fields)
For a more comprehensive overview of Record Pages and the fields, you can read the Record Page Overview
pageOverviewLast updated
