Noloco
Ask the CommunityHire an ExpertLoginSign up
  • Noloco Overview
  • 🚀Quickstart
    • Start with your data
    • Start with AI
    • Start with a template
  • Data to App
    • Database Consolidation
  • App Settings
  • Components
    • Containers
    • Video
  • Templates
  • 🔗Data Sources
    • Data Overview
      • Setting a Collection's Primary Field
      • Syncing
    • Noloco Tables
      • Field Types
      • Relationships
      • Automatic Links
      • Rollup Fields
      • Lookup Fields
      • Formulas
      • Noloco AI
      • Import a file
    • Airtable
    • Google Sheets
    • SmartSuite
    • MySQL
    • PostgreSQL
    • REST APIs
    • HubSpot
    • Xano
  • 📄Pages
    • Collection views
      • Show collection record count
      • Empty State
    • Blank pages
    • iFrame embeds
    • External links
    • The Home Page
    • User Profile Page
    • Parent pages & folders
    • Page visibility rules
    • Cloning pages
    • Renaming pages
    • Hiding pages
    • Sidebar dividers
    • Tabs
  • 📂Collections
    • Adding collection views
    • Display
      • Rows
      • Cards & columns
      • Tables
      • Kanban boards
      • Calendar
      • Timeline
      • Gantt
      • Split-view
      • Charts
      • Maps
      • Pivot Table
      • Single record view
      • Grouping records
      • Record Colors
    • Filters
      • Logged in user
      • Relative Filters
      • Record values
    • Filter fields
    • Sort & limit
    • Row Action
    • Column Summaries
  • 📝Forms
    • Forms
      • Customizing Form Fields
      • Passing Linked Record Values to a Form
      • Dynamic Form Field Filters
      • E-Signature Fields
    • Public Forms
  • 📃Record Pages
    • Overview
    • Visibility Settings
    • Hidden Field Values
    • Record Comments
  • ✏️Field Formatting
    • Field visibility conditions
    • In-line editing
    • Conditional Highlight Colors
    • Dates & Time Zones
  • 📊Charts
    • Overview
  • 📂Data Management
    • Export Data
    • Import Data
  • 👥Users & Permissions
    • User Table
    • User Management
    • User Roles & Permissions
      • Record-level permissions
      • Field-level permissions
    • Open Sign Up
    • Offboarding Users
    • Testing as other users
  • ⏩Actions
    • Action buttons
      • Create records
      • Update records
      • Bulk actions
      • Barcode Scanner
      • Add a Comment Action
  • ⚡Workflows
    • Workflows
      • On-demand workflows
      • Comment Added Trigger
      • Watched Fields
      • Trigger webhooks
      • Send automated emails
      • For each item in a list...do...
      • Only continue if
      • Create a Record Action
      • Update a Record Action
      • Delete a Record Action
      • Deactivate a User Action
      • Reactivate a User Action
      • Send an Invitation Email Action
      • Add a comment to a record
      • Send a Push Notification
      • Ask Chat GPT Action
      • Summarize Text Action
      • Correct Grammar Action
      • Extract Keywords Action
      • Analyze Sentiment
      • Finish Text Action
      • Send a message to a Slack Channel
      • Send a message to a Slack User
      • Generate a PDF with DocsAutomator
  • 🔔Notifications
    • Notifications
    • Notification Preferences
  • 📑API Documentation
    • API Overview
      • Fetching Records
      • Fetching a Record
      • Creating a Record
      • Update a Record
      • Deleting a record
  • ⚙️Settings
    • General Settings
      • Live Mode
      • Custom Logos
    • Theme & Design
    • Progressive web apps
    • Navigation Settings
    • Spaces
    • Email Settings
    • Custom Code
    • Custom Domain
    • Login & Signup
      • Sign in Options
      • Single Sign On
      • 2FA - Two Factor Authentication
      • Client Portal User Add-On
    • Login Screen
    • User Lists
    • Integrations & API Keys
    • Billing & Usage
    • Support
    • Publishing
      • App Version History
  • 🔄Integrations
    • Zapier
    • Make (Integromat)
    • Sign in With Google
    • Intercom
    • SMTP Emails
    • Documint
  • ⚙️Account
    • Workspaces
    • Pricing
      • Client Portal Add-on (Legacy)
    • Transferring an App
    • Onboarding Call Preparation
Powered by GitBook
On this page
  • Your data structure
  • Understanding how Noloco displays your data

Data to App

Learn how Noloco transforms your data into a shareable app for your team and clients.

PreviousStart with a templateNextDatabase Consolidation

Last updated 10 months ago

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 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.

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:

  1. Tables become sidebar pages

  2. Rows become Records

  3. A single row becomes a Record View

  4. 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:

Rows → 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

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 , , SmartSuite, or / automatically have unique column names, but in spreadsheets, you'll need to make sure the first row is reserved for this, and only this.

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

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)

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.

If your data source has multiple rows, you'll see those items in a

Airtable
Xano
Postgres
MySQL
Collection View
Record Page
New Record Form
Collection View
Record Pages
spreadsheets, databases and APIs
A spreadsheet with neat columns and rows