Add and configure new components to enhance your app's functionality.
Components are ‘blocks’ that you can add on the details screens in Apps & Pages.
Many of the components outlined in this section of the Library are available in both Apps and Pages. However, you will find some small differences and some components that are not available in both.
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
We can also drag & drop components into the Layout. To do this, we have to open the components list, select our component and drag it to where we want to place it.
Drag & Drop components
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.