How to Build a Member Logs Feature in Webflow

Memberscripts needed

#2 - Add Item Groups To Member JSON - Adding members to JSON

#6 - Create Item Groups From Member JSON - For showing/displaying groups

Tutorial

Attributes used

ms-code=”form2”

ms-code-json-list=”logs”

ms-code-json-name=”name”

ms-code-print-list=”logs”

ms-code-print-item=”logs”

ms-code-item-text=”name”

Why/when would need to use Member Logs? 

1. Fitness and help apps, so folks can track progress
2. Finance and budgeting, so folks can track spending, saving etc
3. Agencies and project dashboards, folks can track progress on what’s being worked on
4. E-learning, so folks can track learning progress

Logs could mean a lot of things - but in this article, we’re not talking about wood. We’re talking about a feature which you’re probably interested in adding to your site - member logs.

What are Member Logs?

“Member logs” refers to a feature in an application/website which allows logged in members to save something. This is a fairly abstract example, so here are a few examples;

• Water counter: Allow members to track how much water they have had each day
• Financial log: Allow members to track how much money they have spent
• Notes: Allow members to keep and save their notes

Now that you understand the concept of member logs, it’s time to dig into how they actually work.

How do Member Logs work?

Chances are, every site with member logs has some form of these 3 things;

• An input (Form, button, etc)
• Storage (Database, member JSON, etc)
• Printing (A place for logs to appear)

If that sounds simple, it’s because it is. All you need to make member logs work on your site is somewhere for the member to enter a log, somewhere to store the log, and somewhere to display the log. What’s not so simple, is making these things interact.

Adding Member Logs to your Webflow site

We love Webflow, and you probably do too - that being said, “Webflow” only covers the front end of things. When it comes to creating a web app, you will need to use some sort of tool to allow people to even become members. We’re going to use Memberstack to make this happen.

This article is not going to cover the basics of Memberstack - click here if you want to learn how to set up Memberstack on your Webflow site.

The storage

Not to skip to the middle, but the first thing you need to consider is storage - since we’re using Memberstack, we have access to a member-level data store known as “Member JSON”. Since we want the logs to be private to the logged in member, this is perfect for us. Member JSON can be manipulated through the Memberstack dashboard, or directly by the user through the DOM package.

The input

As I mentioned, the first thing needed is some sort of input. We’re building a member logs feature with text in it, so we’re going to use Memberscript #2 - Add Item Groups To Member JSON (Click the link to watch a tutorial and learn how it works). After following the tutorial and using the script, we should be able to see the Member JSON being populated with the info filled out using the form. If you can see this, you’re good to move on to displaying it! If not, check your console to see if there are any errors related to how you’ve implemented script #2. If you can’t figure it out, you can join our community Slack and ask the Memberstack community for tips!

Showing Member Logs

Now that your member logs are saving to the member JSON, it’s time to display them - thankfully, we have MemberScript #6 - Create Item Groups From Member JSON to help us out there (click the link to get the tutorial and code). This script will allow you to create a custom template in Webflow which will display the JSON data back to the member in a specific format.

Conclusion

Now that you’ve figured out adding member logs to your site, the possibilities are endless - you have completed a basic example of a web app which allows members to create, save, and access their data. This concept can be applied when creating tons of different features - and thanks to MemberScripts, you will be able to create a whole world of features without needing to write much, if any, code.

Take me to the Scripts

#2 - Add Item Groups To Member JSON - Adding members to JSON

#6 - Create Item Groups From Member JSON - For showing/displaying groups