How to Set Up a Social Media List

Everything you need to know about the social media list component.

Let's set up a social media list!

This component is not available in legacy mobile or web apps.

First, drag the social media list component out from the "Lists" section of the components tab.

Drag the component onto one of your screens. Now let's select a collection for this list to pull from.

Now select any filtering or sorting you might need.

I'm using a collection called "Posts". For reference, here's how I have the collection set up.

Next let's customize some of the styling. We can adjust the background color, border, and overall padding of the list items in the "Background" tab.

Now let's start getting to the post content. The "Header" tab allows us to customize the header of each post. We can add a profile picture for the creator of each post by pulling data from our collection.

We can add 3 lines of text next to the profile picture. First let's put the username of the person who created the post next to their profile picture.

Now we have 2 more lines of text we can add underneath. We can add more information about the user, or other info, such as the post's creation date.

None of these lines of text are required. Some or all of them can be left blank.

We can also add 2 optional icons to the right side of the header. Each icon has a toggle to enable or disable it, and menus to select the icon design and color. We can also attach a click action to the icon.

Now let's move on to the main content. We have a text field and an image field for each post. Let's pull data from our collection to populate these.

We also have some text fields below each post that we can use to show things like comments and reactions.

The way I have likes set up in my database is as a relationship to users. That's why in this screenshot, the count of likes appears as "User count".

Below the text, we have some buttons we can customize. Each of the icon buttons in this section can either be set up as simple icons, or toggles that change color and design based on a condition. Let's set the first icon button as a toggle, and decide its state based on whether or not the Logged In User has liked the Current Post.

We can change the color and design of the icon based on the condition we just set. If the condition is true, it's considered "active". If the condition is false, it's considered "inactive". The way this one is set up, the button will show a filled-in, red heart if the Logged In User has liked the Current Post, or a hollow, gray heart if the Logged In User has not liked the Current Post.

Clicking this toggle will change the condition we set at the top. In this example, if a user who has not liked the post clicks this button, the post will then be added to their "Liked Posts" relationship. If they click the button again, it will be removed from their liked posts.

We also have the option to run additional actions when an end user clicks on this button.

FInally, we have the option to add text next to this icon. Let's add the word "Like".

Now let's set up the second icon button to have the "Icon" type. This is much simpler. We have options to select the design, color, text, and actions for this icon. Additionally, we can enable or disable this icon via the "Enable Left Icon 2" toggle.

The right icon has all the same settings as well.

Lastly, we can enable a bottom button for additional actions. This is turned off by default. Toggling "Enable Bottom Button" turns this on.

This button is a bit simpler than the icon buttons. We can change the background color, add text, and set up actions.

Now our list is fully set up. Happy posting! 🎉