We use cookies to improve our service. Learn more.

Guides / Core Concepts

Introduction to Components

Learn what components can do and how you can work with them.

Everything is a Component

When you're designing in Glide, everything is a Screen, and every Screen has Components on it. Components display and let your users interact with your data in powerful ways.

Some Components like Lists & Collections show multiple rows of data. Some Components like Action Text display only a single value, and others like the Container help you arrange your Components into groups.

You can always see what Components are on a screen in the Screen Panel on the left.

The **Screen Panel** shows the different components on the current screen
The **Screen Panel** shows the different components on the current screen

Some creens (like list screens in Apps shown above) may limit you from adding new components. But most screens, especially in Pages, let you add Components wherever you like.

Dragging a new component into the **Screen Panel** will add it to your screen
Dragging a new component into the **Screen Panel** will add it to your screen

Even if you can't add/remove Components on a screen, you can always edit them. To edit Components; click one on the left, and configure the component's settings on the right.

Clicking on a component in the **Screen Panel** will open its configuration settings on the right
Clicking on a component in the **Screen Panel** will open its configuration settings on the right

Apps and Pages share many Components, but sometimes you will find one that isn’t available in the other. For example, the Kanban Layout is only available in Pages, and Floating Button is only available in Apps.

Configuring Components

Some Components are very simple, while others are much more complex. However, most Components have one or more of the following areas in their settings.

  1. Data
  2. Design
  3. Action
  4. Options

Data

Data (sometimes called 'Content' or 'Items Data') is where you configure what the Component is displaying. Some Components can only display a single value from your data, and others let you show multiple properties.

The configuration for the Collection Component (on the left) can show four columns from your table (right)
The configuration for the Collection Component (on the left) can show four columns from your table (right)

Design

Design lets you tweak a Component to style it how you like. With Lists and Collections, the settings here can be quite extensive. But with simple Components like the Text Component, the settings are very minimal.

Configuring the design options in the Container Component
Configuring the design options in the Container Component

Action

Many Components have the option to add Actions. Sometimes you can add only a single action (like the Button Component in Apps), and sometimes you can add many (like the Title Component in Pages).

The Action settings in the Button Component’s configuration panel
The Action settings in the Button Component’s configuration panel

Options

Most Components have only two sections. The General tab and the Options tab. Most Components have only Visibility settings here, but Lists & Collections have many other options.

The Options tab within a component’s configuration
The Options tab within a component’s configuration

Hands-on with Components

Deleting

When you delete Components, they don't affect the data in your table. If you accidentally delete a Component, you can hit Command Z (Mac) or Control Z (PC) to bring it back. This also works for many of the other Actions you take while building your app. Alternatively, you can click the Undo or Redo buttons in the bottom left of your screen.

Deleting a Rich Text component
Deleting a Rich Text component

Duplicating

To duplicate a Component, click the duplicate icon. Bear in mind this will result in multiple Components being connected to the same column - which in some circumstances could cause issues for your data.

Duplicating a Title component
Duplicating a Title component

Copying & Pasting

You can copy & paste Components within the same project by using commands or by right-clicking to view the dropdown menu with the different options. This allows us to save time when it comes to recreating screens.

Right-clicking a component brings up a contextual menu where you can copy/paste
Right-clicking a component brings up a contextual menu where you can copy/paste

Renaming

You can rename Components in Glide to help you organize and see them better. Just double-click on the Component and rename it. This only affects how you see that Component in Glide and does not affect your project.

Renaming a component
Renaming a component
Updated 5 days ago
Was this helpful?