We use cookies to improve our service. Learn more.

Guides / Core Concepts

Glide UI

A walkthrough of Glide's interface.

Introduction

When you log into Glide at https://go.glideapps.com you'll arrive at your Dashboard.

The Glide dashboard
The Glide dashboard

On the left-hand side, you'll see the different teams you belong to and allow you to create new ones. The main portion of the screen will display the apps for the selected team and suggestions for templates you can copy.

Click on an app to start editing it.

The Layout Editor
The Layout Editor

Glide's user interface can be broken into three areas:

  1. The Data Editor
  2. The Layout Editor
  3. Settings

You can navigate to these different sections using the top navigation bar, which remains consistent on all screens.

Navigation bar
Navigation bar

Data Editor

The Data Editor
The Data Editor

The Data Editor has four distinct areas.

  1. The tables area on the left shows each of your individual tables. If you have a Google Sheet as a source, you'll see each of its individual sheets here. If you're using Glide Tables, you'll see these as well.
  2. The sources area on the bottom left is where you see your Data Sources. You can click here to sync or visit your data source.
  3. The main area is the actual data grid itself. Here you can scroll, interact and edit the data you see.
  4. The Data Editor has its own top bar – which shows the Preview As dropdown, the name of the current table, the Find Column search box, and the Add Column button.

Layout

Different areas of the Layout Editor
Different areas of the Layout Editor

The Layout area of Glide can be broken into 5 core areas and is where you do the bulk of your design work.

  1. Tabs
  2. Screen
  3. Data
  4. Device preview
  5. Configuration panel

Layout Editor: Tabs

Tabs panel
Tabs panel

Tabs is where you manage the tabs in your app. You can add, edit, delete, and configure tabs, and you can also drag them into the App Menu.

Layout Editor: Screen

Screen panel
Screen panel

The Screen section is where you manage the Components on that screen. Click on a Component to edit it and click the plus (+) icon to add a new Component. You can also re-order and delete Components here.

When you see a dropdown arrow in Glide, very often, you can collapse that area to make the interface cleaner, or to give yourself more room. 👇

Collapsing the different panels of the Layout Editor
Collapsing the different panels of the Layout Editor

Layout Editor: Data

Within the layout area of Glide, next to the Screen tab, you have another tab called Data. This is different from the Data Editor. The Data Editor shows you all of your data. The Data Tab shows you the data for the current screen.

The Data Tab
The Data Tab

In the image above, you can see we're viewing a record (row). In the Data Tab, we see that row displayed vertically. This can be confusing at first, but compare it with the highlighted row in the sheet below and it will start to make sense.

A horizontal row from a Google Sheet
A horizontal row from a Google Sheet

The Data Tab is editable, so you can actually interact with your data without even visiting the Data Editor. You can also add new columns and change their type.

Editing the data using Data Tab
Editing the data using Data Tab

Layout Editor: Device preview

Builder preview
Builder preview

The device preview area contains a number of features that let you interact with your app – both as a user and as an app developer.

  1. The device itself
  2. The dropdown within the Layout icon allows you to change the device width & OS.
  3. The preview as dropdown
  4. Undo/Redo
  5. Play mode & select mode lets you toggle between interacting as a user and as an app developer – allowing you to select and configure Components with the mouse without triggering them like a normal user.
  6. If you right-click or ctrl-click anywhere on your device, you'll bring up a contextual menu.

Layout Editor: Configuration panel

The configuration panel
The configuration panel

The area on the right of the Layout Editor is all to do with configuration, and it changes depending on your editing context.

Knowing what context you are in is important. To help you understand this, there is a breadcrumb menu at the top. In the image below, see how the breadcrumb menu (top right) changes to show you where we currently are in our editing context.

Moving between contexts changes the breadcrumb menu
Moving between contexts changes the breadcrumb menu

Within the configuration panel, many different things will appear, depending on your context. You will usually see 2 or 3 different tabs within the panel. These typically follow the pattern of General, Options, and Form.

Different settings in the configuration panel
Different settings in the configuration panel
Updated 2 weeks ago
Was this helpful?