Introduction to Components
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.
Some screens (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.
Even if you can't add/remove components on a screen, you can always edit them. To edit components; click on the component on the left, and configure the component's settings on the right.
Configuring Components
Some components are very simple, like the Button Component, while others are much more complex like the Kanban Collection.
Most components have one or more of the following areas in their settings.
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, like Collections (Pages) let you show multiple properties.
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 (Apps) the settings are very minimal.
Action
Many components have the option to add actions. Sometimes you can add only a single action (like the Button Component (Apps) component in Apps) and sometimes you can add many (like the Title Component (Pages)).
Options
Each component has two sections. The General tab and the Options tab. Most components have only Visibility settings here, but Lists & Collections have many other options.
Hands on with Components
Deleting
When you delete components, they don't affect the data in your sheet. 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 whilst building your app. Alternatively, you can click the Undo or Redo buttons in the bottom left of your screen.
Duplicating
To duplicate a component, just 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.
Copying & Pasting
We can Copy & Paste components, either 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 pages. For instance, we can now copy all components from one Details Layout and paste them into another.
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.
Last updated
