Skip to main content

Starts at 0:04, after the intro.

Lesson 5 of 5 · 9:14 · Advanced · Webflow

Build a searchable member directory

List members from a Data Table with live search and a profile page for each one.

Where this fits

Your Data Tables have held each member's own records. Now you'll use one to show members to each other, in a directory anyone can search.

By the end of this lesson you can

  • Set up a members Data Table with a field for each part of a profile
  • Build a searchable member list and a profile page with data attributes
  • Show a list of skills from a comma separated field
  • Keep the table in sync with Make when members join and update their profile

Heads up: You'll need a Make account for the two automations. The script page has a Make blueprint you can import.

Lesson notes

How it works

How the member directory works

Each member gets one record in a Data Table called members, holding the profile you want to show: name, email, image, bio, country, skills and so on. MemberScript #220 reads that table and builds two things from it: a list of every member with a search box, and a profile page that shows one member.

On the list page, the script loads all records from the table, 100 at a time, and clones your template once per record. Search runs in the browser: it filters the loaded members by name and email as the visitor types, with no extra requests. Clicking a member opens your profile page with the record ID in the URL, like /member-profile?id=.... The profile page reads that ID from the URL and loads that one record.

Build the list and the profile page

Create the members table first, with the fields from the video, and set its read rule so the people who should see the directory can read every record. Then paste MemberScript #220 into the page or site body code.

  1. Add a search input with data-member-search.
  2. On the list wrapper add data-ms-code="list-container", ms-code-table="members" and ms-code-detail-page set to your profile page path (default /member-profile).
  3. Inside it, give one member card data-ms-code="list-template". Make the card a link block, since the script sets its link to the profile page. Inside the card, bind text with data-ms-field set to a field key, like data-ms-field="name". For the photo add ms-field="image" as well.
  4. Add optional states: data-ms-code="list-loading", "list-empty" (also shown when a search finds nobody) and "list-error".
  5. On the profile page, wrap everything in data-ms-code="detail-container" with ms-code-table="members" and ms-code-id-param="id", put the profile inside data-ms-code="detail-content", and add "detail-loading" and "detail-error" states.
  6. Bind each profile element with data-ms-field and the field key. Empty fields are hidden automatically.

Show skills and keep the table in sync

For a skills list, put data-ms-field="skills" and ms-field="array" on a wrapper and data-ms-code="array-template" on one badge inside. The script splits the comma separated value and clones the badge for each skill.

The table only fills itself if something writes to it. The video uses two Make automations. When a member signs up, one creates their record with their member ID, email and a status of active. Their plan sends them to an onboarding page with a profile form, and when they save it, the second automation finds their record and updates the name, bio, image, skills and other fields. Add a mapping for every extra field key you use.

Before you move on

0 of 5

Tick these off on your own site. Done with all of them? You’re ready for the next lesson.

Up next: That's member data done. The next journey is about keeping members, starting with a tour that welcomes them the first time they log in.

Chapters

Common questions

How do I build a searchable member directory in Webflow?

Store member profiles in a Memberstack Data Table and use MemberScript #220. It lists every record with a template you design, filters it with a search input and links each member to a profile page.

Does the directory search hit the API on every keystroke?

No. The script loads the records once, then filters them by name and email in the browser as the visitor types.

How does the profile page know which member to show?

The directory link adds the record ID to the URL as ?id=. The profile page reads it and loads that record from the table.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    Hey, Mahn at Memberstack here and welcome to members script 220. In this video, I’m going to show you how to build a searchable member directory with profile pages as well. Users will be able to click on a certain member, search for a certain member, as well as click on their profile page to view more information about this member. All right, you’re going to need a few things in order to set this up. Firstly, you are going to need a Memberstack data tables called members. And you’re going to set up the following rules. Once you’ve set up this table with the

  2. 0:31

    following rules, you are now going to add the following fields in order to make this work. The fields you’re going to add is an ID field, which is going to be tied to the member that created a new profile on your platform. Then you’re going to have optional fields such as a bio, country, skills, profile link, status, name, email, which is required, as well as a profile image field when a user uploads a profile image. Okay, you’re also now going to need to set up Webflow in order to display all of your members. Firstly, inside of Webflow,

  3. 1:04

    you are going to add members script 220. And it should look like this. If you’re watching this on YouTube, the link to that code should be in the description below. And if you’re watching this on the Memberstack site, then you should have already seen the code. You can either add this sitewide on a specific page depending on your specific use case. Okay, so we are going to set up the member searchable directory first and then we’re going to set up the member profile page. So for the member directory, you are going to need attributes on the page in order to make

  4. 1:35

    this work. On the page, you are going to have a search input field and that is going to have the attribute of data member search. And now we’re going to build the actual list where your members will appear. Okay. So starting off at the very top, you are going to have a div which is going to be titled member list or whatever class you want to give it. But you are going to make sure that this has the following attributes. So you’re going to need data MS code list container MS code table which is going to be the table that we’ve we created

  5. 2:05

    inside of Memberstack. So in this case it’s called members and then where we’re going to redirect a user once they’ve clicked on a certain member. In my case it’s going to be redirected to the member profile page. But if you’re redirecting members to another page that has another name then you’re going to edit that over here. So that attribute is MS code detail page. Okay. So now for the template that gets cloned every time a new member joins your platform. For each item you are going to give that the attribute of data MS code list template

  6. 2:38

    and then within this list template you are going to add the following attributes in order to dynamically populate the data. So the user’s profile image is going to have the attribute of data ms profile image. The name is going to have the attribute of data ms field name. email will be data MS field email and then the status which is completely optional will have data MS field status. On this page you’re also going to have a few loading states and these are optional but are good for a user’s

  7. 3:11

    experience. Your loading state is going to have the attribute of datams code list loading when there are no members found. So your empty state is going to have the attribute of data MS code list empty. And then your error state is going to have the attribute of data mscode list error. Okay. And that is it for the member directory. So the searchable side of the member directory. And now for the profile page over here. On the profile page we also have a few attributes in order to make this work.

  8. 3:42

    Okay. At the very top we have this div called member list and it has the following attributes. So we have data MS code detail container MS code table which is members and then MS code id parameter is id. This field is the field that holds a members ID inside of your Memberstack data tables. Okay. And then we have the next div under membered list which will have the attribute of data mscode detail content. And then for our profile header over here we will have our profile image um field. So our

  9. 4:15

    profile image will have the following attributes. Data MS field profile image and then MS field image. For all of the other um elements on the page would work the same. So for profile name we have the attribute of data MS field name. This will be your member email which will have the attribute of datams email. This field will be your bio. Again datams field bio. And then the little fields over here will hold a user’s country, um, profile link, as well as

  10. 4:47

    the date that they created their profile. All of these fields are optional. And depending on what field you add inside of Memberstack data tables, you would use the attribute of data in this field and then the field key as an identifier in order to populate that element on the page with information. Okay. So, say you’re rendering a list of skills for a member. You will have the following um attributes in order to make this work. Firstly, the div will have the attribute

  11. 5:19

    of data msfield skills and then the field of msfield array because all of these um skills that are comma separated when a user creates an account will now be added as an array on their profile. Okay. So the next attribute will be data MS code array container and then the little badge over here will have the attribute of MS code array template and that is it. Okay. So you also have loading states over here for a

  12. 5:49

    members profile page. Your loading state here has the attribute of data MS code detail loading. And then your non not member found or empty state will have the attribute of MS code detail error. And that is it on setting up the components inside of workflow. You are now going to have to set up an automation in order to make this work. So when a user first creates an account, they are added to a certain plan. say new members is the account that they’ll

  13. 6:20

    be added to or the plan that they’ll be added to. And then inside of Memberstack uh new member. Okay. So inside of Memberstack for that plan what we do is redirect a member to the onboarding page in order to have them populate all of the information that we want them to add inside of the database. So that is the onboarding page over here. Once they’ve filled out all of this information, that member will be updated inside of yes Memberstack but also inside of the data table. We have two automations that make

  14. 6:51

    this work. Firstly, we have a create a new record automation that watches out for new members and then creates a record inside of that table. The record that is created inside of the table is set up like this. So the table that we are creating the record in is the member table and then we’re creating the following um or we’re adding the following information to those fields. So the member ID, the email as well as the status. So in this case the status is going to be active. Okay. So the next

  15. 7:24

    automation that we’re going to need is when a user completes the onboarding, we also need to update that information inside of the Memberstack data table. So when a user has been updated, we make a request to Memberstack to look for that member. So what we look for is the ID of the user that updated the profile and as well as the ID inside of the table itself. And then what we do now is update that record according to the ID that updated the profile. So, what we’re updating now is the name of that record

  16. 7:58

    inside of Member Stick data tables, the bio, the image field, the skills, profile link, and so on. If you’re updating any other fields, cuz I imagine you will have different fields from the ones I have, what you’ll do is change the key over here to the key that you have inside of Memberstack and then bind it to um the information that was updated. So if you are for example updating postal address, this key will be postal address and then the custom field data will obviously pull in the um

  17. 8:30

    postal address information. Once you’ve set that all up, then you click save. So two automations will run. one when they create a new record and then one when they update their information so that your table inside of Memberstack is in sync when a user updates their information as well and then what you end up with is a searchable directory and then a profile image page for each member. Okay, and that is it. If you have any questions on this, feel free to

  18. 9:02

    reach out in the Slack 2.0 channel and I’ll be able to assist you. All right, bye.

This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.