I have a webflow form that updates a Live CMS item. I want this form to only be accessible to the member who is currently logged in.

Here's the UX I'm looking to accomplish:
I am a member and I have a profile page. On this profile page, I want to be able to create and manage several projects. Anyone can view my profile and project pages. But only I should be able to make edits.

I have member-specific pages enabled.
Hey Vitaliy Gnezdilov that sounds like a really interesting set up. One idea that comes to mind is to actually have two different Pages but they look identical or almost identical.ย 

The reason is because by design in MemberStack, the member-specific page is only viewable to the specific member logged-in. So that page really can't be seen unless they are logged into that person's account. So you'll set up a page that is the member-specific profile and the second page which would be the member-specific-public profile page.ย 

The public page is the one that would be viewable by anyone but there would not be any way to edit the content.ย 

Again, just an idea - hopefully that could give you a framework to make it happen.ย 
Hi John! I just came in to this thread actually to give an update and happy to have seen your message. I love that there may possibly be several solutions to one problem. That's how you know a tool is good!

My friend @Igor Voroshilov (on Memberstack Slack channel) had solved for this one with this code below, I hope he doesn't mind I share in case anyone is curious.

Place this code onto the projects template page. This will hide any item with ID of #item-to-show on the page from everyone except the person currently logged in. Good for "Edit" button to open up an edit popup that lets members make changes to their projects!

<script>
 MemberStack.onReady.then(function(member) {   
 if (member['id'] !== 'Insert Member ID from stored in your Webflow CMS Item') {
  $('#item-to-show').css({'display': 'none'});
  };
});
</script>
Awesome! Thanks for sharing that code snippet. I'm glad there is a way to accomplish that specific need. Really cool - I'll keep this in mind for myself in the future too. ;-)
Vitaliy Gnezdilov I do this often as well.ย 

That code snippet you shared is a good start, but I'd recommend taking it to the next level.

Take that and pair it with a concept I call "lookup tables".

Since that's only hidden...any logged in member can still edit other members data. To combat this, what I do is store the CMS item id and the member id in an Airtable base.

  1. On the edit form, add a hidden field containing the MS front end api's returned member id (like you show in that snippet).
  2. The edit form is submitted
  3. Integromat is triggered
  4. I snag the member id from the submitted form
  5. Search my "lookup table" for it (Airtable)
  6. Find it, grab the CMS item id
  7. Get the CMS item from Webflow
  8. Make sure that submitted member id is stored in it

What's awesome about this lookup table pattern is that you're not limited to your forms being solely on a Webflow CMS Collection Page (so frustrating!), with a bit more work you can use this pattern to lock down forms on any static Webflow page which opens up a whole new world of possibilities ๐Ÿ™‚
ChrisDrit is always upping our game! ๐Ÿ™Œ Thank you for everything you do for the nocode community!

I want to make sure I understand what's going on in your process.

Basically, you double-check that the person who makes the update is the owner of the CMS item via airtable by looking up to see that the CMS Item ID and Memberstack Member ID belong to the same record?

Could you please elaborate a little bit on the last paragraph? Doesn't it need to be on a Webflow CMS collection page if you want to pull the CMS item ID? Possible to explain an example of this?

As far as the lookup table concept, is this accomplished through a Find Record action in Airtable in Zapier, or similar? What would an error state look like for someone who submits a form but the record doesn't contain the matching member ID and CMS item ID? It would probably just not update the item, but on the front-end would look like the form was successfully submitted.

Thanks for any further explanation Chris!
Heyย  ChrisDrit ย 
Thanks for your solution!

I wanted to add that in my snipped, whichย  Vitaliy Gnezdilov shared, it is true that other users still can unhide edit button from chrome inspector, but they will not be able to edit someone else's profile.

The thing is that you need a Collection Item ID to update the profile and it is stored in profile owner's Memberstack data. So only profile owner will have a 'key' to actually update the item.

I add MS id as slug to profile CMS item and then store item id in Memberstack within 'Profile id' field. In that way both are interconnected and check each other.

I found that solution super simple without using Airtable causing less Zapier tasks spent and less number of tools involved.
Igor Voroshilov i see, yea...none of that was represented in the snippet above only hiding/showing the display (or if it is I just didn't pick up on it).

The thing is that you need a Collection Item ID to update the profile and it is stored in profile owner's Memberstack data.ย 
...
I add MS id as slug to profile CMS item and then store item id in Memberstack within 'Profile id' field.
I don't understand...How are you retrieving and then storing a Webflow CMS item id into an MS form field?
Vitaliy Gnezdilov gosh, thank you for the kind words ๐Ÿ™ now I have to live up to them! ๐Ÿคฃ

Basically, you double-check that the person who makes the update is the owner of the CMS item via airtable by looking up to see that the CMS Item ID and Memberstack Member ID belong to the same record?
Exactly.

I've found this lookup table pattern to be super useful in a ton of different situations including the one you've outlined. So now that I have the pattern down I can quickly apply to any situation that needs to do a lookup of any kind between different platforms.

As far as the lookup table concept, is this accomplished through a Find Record action in Airtable in Zapier, or similar?
What's wonderful about Airtable, that the Webflow CMS totally lacks, is the ability to query different records. With Webflow you can "get a live item" for an "item id" only. If you don't know the "item id" too bad.ย 

With Airtable, I can do a bunch of creative querying and do it against any field that I add to it. Both Zapier and Integromat give me access to this Airtable functionality.ย 

It's pure gold ๐Ÿ˜Ž

What would an error state look like for someone who submits a form but the record doesn't contain the matching member ID and CMS item ID? It would probably just not update the item, but on the front-end would look like the form was successfully submitted.
I send an error message back to the users browser and log the error in an Airtable base I name "logs" ๐Ÿ™‚

If you follow my screencast here in Part 7:ย 

https://nocodequest.com/simple-webflow-form-submits-with-integromat/#part-7-setup-last-integromat-module

I walk through how to use Integromat, after a native Webflow form submission, to return anything you want to the browser.ย 

In this specific example I return a "302" redirect status to the browser. I want the user to be redirected somewhere else, but...ย 

...in your example above I would return a "200" ok status along with some JSON that will get spit out to the page as an error message for the user ๐Ÿ˜Ž

Doesn't it need to be on a Webflow CMS collection page if you want to pull the CMS item ID? Possible to explain an example of this?
Nope ๐Ÿค“

If you go through this entire screencast:ย 

https://nocodequest.com/simple-webflow-form-submits-with-integromat/

You'll see I'm submitting a form from a non-CMS Template Page (just a static page) and then creating the live Webflow cms item from Integromat.ย 

The interesting bit is that if you create a live Webflow cms item (from Integromat or Zapier) Webflow returns the "item id" to you.

Your next step in Integromat or Zapier, after you've created the live Webflow cms item, and now have the item id, is to insert that item id, along with the passed in MemberStack member id into your Airtable lookup table ๐Ÿ’ช

ChrisDrit right, it is not in the snippet. I just directly pre populate a hidden field with Memberstack data attribute.

To have a CMS item ID you just run one more step in Zapier when create a CMS item for member profile and send that newly created item ID to dedicated custom field in Memberstack.

Now only that member will now the CMS item ID, so he is the only one to be able to edit the profile ๐Ÿ˜‰
Hey ๏ปฟ ChrisDrit ๏ปฟ! Trying to set up table lookup now in Zapier. My form submission contains the MS ID of the currently logged in user as well as the Item ID from the page to be edited in hidden fields.

In Zapier my trigger is a new form submission, and the next step is to find a Record in Airtable that contains both, the MS ID and the Item ID. If a row exists with both, proceed. If not, halt.

Problem I'm running into is that the Airtable step only allows me to search up a row by either MS ID or Item ID, but not both?

How do you go about searching your lookup table? Where does it exist? Is it the Search Formula option on the Airtable step in Zapier, or Table Lookup field in Airtable, or the Table Lookup utility in Zapier?

Thanks man!
๏ปฟ Vitaliy Gnezdilov ๏ปฟ yea this is a PITA for sure. I used the "Search Formula" field in Zapier. You'll see a little link in the helper text talking about these formulas. One things for sure, they are NOT intuitive. But I would search for 2 fields here (Webflow Item ID and MemberStack Member ID). The Airtable forum is a super helpful place for formulas too. I'd copy/paste mine here if I still had them in Zapier ๐Ÿ˜ž
๏ปฟ ChrisDrit ๏ปฟ Sweet, this is the path I'm on now. I'll post it when I figure it out. Thanks for the lead!
๏ปฟ ChrisDrit ๏ปฟ Here's the formula for lookup table in airtable. Searches for Memberstack ID as well as a string within a rollup of one of the items that the member "owns"

AND({COLUMN NAME}='ID', FIND('ITEM ID', {Rollup}))

I had to wrap my ITEM ID in double quotes on top of this formula because that's how IDs have to be stored in a rollup for a multireference field in webflow to work.

Also, you may read that you must also wrap your values in <Trigger Value> for zapier to accept a formula from Airtable, but turns out that's no longer the case as of a couple weeks ago. So omit that and you should be good to go ๐Ÿ‘
Sorry the answer it's more helpful ๐Ÿ˜• if it ends up being a road block with no solution, let me know, I'm sure I can figure out the formula i was using.
Got it! Take a look at the reply in the thread above.
Hello guys! I have followed this discussion but it seems you are discussing two different things:

๏ปฟ Vitaliy Gnezdilov ๏ปฟ you were aiming to display in a static page only items related to the current logged member by matching it with the current MS id using the MS Front end API (which would leave all the items n the DOM because using display none for the ones that do not match)

and ๏ปฟ ChrisDrit ๏ปฟ if I am not mistaking you are explaining how to submit an item to the webflow CMS.

Am I missing the point? I have a very similar need to the one ๏ปฟ Vitaliy Gnezdilov ๏ปฟ explained: I would like to display "products" belonging to a given logged member, OUTSIDE the member collection CMS template.

It's easy to do for member data because MS let us do so with the ms-data attribute. But how to do for any kind of user generated content (comment / product/ case study etc.) assuming the collection CMS template has been used for the public facing page?
My perspective added to this thread is to verify that the person who submitted the form, is the same person editing their own data and not someone else's. That would be done through what I term as a "lookup table" that maps a MemberStack member id to a Webflow CMS item it.ย 

Does that help?
Sure it helps!! Thank you Chris, What I need to frame is how to best use the webflow CMS template - if for public facing or edition. Too bad we cannot have several templates for the same collection.

Maybe using zapier to duplicate the collection could be a workaround?ย 

Post a comment

Log in