Add and configure new components to enhance your app's functionality.
This video shows an outdated UI. To see what's new visit https://youtu.be/7UxJzBGc-DI
Components are ‘blocks’ that you can add on the details pages of your list items. You can add and edit components on the left panel of Glide, whenever you're viewing an individual list item in your app.
To add a component, navigate to the details page of a list item in your app and click the add component button in the top right of the left panel. Once you've chosen the component you want to add, it will appear at the bottom of your list of components. You can reorder your components by clicking & dragging them up and down in the right panel.
Adding a component
Components & Properties
Some components are very simple, like the Separator component which is just a line that separates components from each other.
However, most components have numerous properties that you need to bind to data in your Google Sheet for them to work.
In the example below, the Title component is creating the big header image at the top of our app. We can see that it contains three different properties which we have connected to columns in our sheet: TitleDetails and Image. We can also choose the appearance of the Image and add an action to the component.
Deleting & duplicating components
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 buttons Undo or Redo in the bottom right of your screen.
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.
Deleting and duplicating
Copy & Paste
We can Copy & Paste components, either by using commands or by right-clicking to view the dropdown menu with the different options. We can also Duplicate, Cut, Move Up or Down, etc
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.
Copy & Paste
If we want to paste components in a Detail Layout, we need at least one component. If you want to paste a group of components in an empty layout, first add a random component, then right-click (or Ctrl/Command + V) and paste. Now you can delete that extra component you added.
You can now rename components in Glide to help you manage 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 app.