List Component

Transcript Summary

Introduction

What's up, databasers! Sam here, and in this video, we're going to talk all about the list component. The list component is a way to display your data in a more visual format. It organizes data into separate cards for each record and can be separated into columns. It looks really beautiful, so let's dive into the Builder and show you how to create a list component.

Setting Up the List Component

Here we are in the Builder. In this example, we have a company running a real estate listing platform with agents logging different houses. Instead of just using a table, which we've seen before, we’ll use a more visual layout with the list component.

We’ll start by adding a new page with a table component to show the listings. Once we preview it, you’ll see the typical table display, but we want to take it further and display these listings in a more visually appealing way using the list component.

Creating the List Component

Instead of creating a table, we’ll create a list component. Here’s how:

1. Go to the Builder, click on "Add Page."
2. Select "List" and then choose the data you want to display.
3. We’ll use the listings data and do a quick add, which pulls all fields into cards.
4. By default, it sets up three columns.

In preview, it looks a bit messy, so we can clean this up by adjusting the columns.

Customizing the Layout

You can:

• Add more columns to the list component.
• Resize the columns and drag fields into different columns within each card to make the layout cleaner.

We’ll set this up with three columns and place fields like the listing ID, address, and bed count in different columns. After previewing, you’ll see the data is now organized neatly in columns.

Adding Visual Elements

To enhance the visual appeal, let’s add a picture for each listing. We can do this by:

• Adding an attachment field for images.
• Setting the layout to display a cover image using the attachment field.

After previewing the page, you’ll see the images displayed nicely as cover images above the listing information.

Further Customization Options

Some additional customization options include:

• Changing the number of columns in the layout.
• Hiding column titles or adjusting their appearance.
• Displaying images using different formats, such as an attachment or file field.

We can clean up the display further by removing unnecessary fields like file names and keeping only the images. You can also hide titles like "attachments" to keep the interface clean.

Advanced Options

Other unique settings you can use include:

• Adding borders around cards and adjusting their color and size.
• Adjusting how many columns are displayed, anywhere from 1 to 6 columns.
• Enabling features like inline editing, pagination, and search within the list component.

We can also add filter tabs to let users view data based on conditions, like sorting listings by agent, owner, or status.

Field-Specific Options

Each field in the list component can have unique settings. For example:

• Attachment fields can be used as cover images.
• Rating fields can be displayed as numbers or symbols.
• Slider fields can be displayed as bars or numbers.
• Connection fields are read-only in list components.
• Email and address fields can be clickable links (e.g., addresses linking to Google Maps).
• Date fields can be formatted as stopwatches, ages, or standard date formats.

Display Rules

You can set display rules based on conditions, like changing the text color if a price is above a certain amount. For example, if a price is over $100, you can set the address to display in blue.

Filtering Data

Similar to table components, the list component allows you to filter and sort data. For instance, you can filter out listings with a "sold" status so they won’t appear in the list. You can also sort listings based on different criteria.

Conclusion

That wraps up the list component overview! This feature allows you to present data in a more visually appealing and flexible way compared to traditional tables. With options to add images, customize columns, and apply filters, the list component gives you more control over how your app users experience data. I hope this video helped. Thank you for watching, and have a great day!