How to hide / show elements based on who is viewing a page in Webflow with Tangram

‍

Summary:

This video explains how to implement conditional rendering on profiles in Tangram using custom attributes in Webflow. Four common use cases are covered:

1. Logged-in Users: Use tg-role-content="*" to show content only to logged-in users. Apply this attribute to the parent of the content you want to toggle.
2. Logged-out Users: Use tg-role-content="guest" to show content to logged-out users. This works similarly to the logged-in attribute but for users not signed in.
3. Specific Roles: Use tg-role-content="{role_id}" to display content only to users with a specific role. Retrieve the role ID from the admin panel's role URL and apply it in Webflow.
4. Current User: Use tg-attribute="current-user-content" to display content only if the current user is viewing their own page. This matches the user ID in the URL with the logged-in user's ID.

These attributes are most commonly used on custom profiles, listings, or directories to tailor visibility. For further assistance, you can contact Tangram support.

‍

Video Transcript:

" Hi, today I'm going to show you how to do conditional rendering on profiles in Tangram.  I have this test platform set up and under the vendor role, I have a custom profile page set up. And that profile page was built in Webflow. And on this profile page, I have these lines that do different things.

I'm going to go through each of these lines and show you the different types of conditional rendering that you can do most easily with Tangram. You can do other stuff too, but this is just stuff we've. The most common stuff we see, we have like easy ways to implement it. And you'll see what I mean by that in a second.

The first one is logged in users.  The context in which you would want to use this is if you want to show an element, if any, if, if any user is logged in at all and use the page and the attribute for that is tg-role-content = *  What you wanna do is add this attribute to the parent of all of the content you wanna hide or show.

And you can't have multiple of these per page. It will just apply to all of them. The attribute for logged out users is tg-role-content = "guest". And that will do the opposite.  If someone's viewing the page and they're logged out in this case, it will show you, it will show them the logged out.

If I go to an incognito tab, for example. which I have one open here. This tab only shows the text for the logged out users because I'm not logged in on this tab. But if I go to the logged in tab again, you'll see it says show for logged in users and this other one, which I'll get to in a second.  That third one we just saw was tg-role-content = {role_id}, and it shows only for users with a specific role.

And what that means in this case is. This particular element is only going to show for users that have the role with this idea attached to them.  The way that I got that idea is in the Tangra map while logged in as an admin. I'm going to move my video recorder. You click the roles tab and In this dropdown here, there are all of the role options in your platform.

In this URL here at the very end, it says role equals, and then the role ID. And if I switch roles that slug changes, the easiest way to get this is to just copy it from here.  In this case, I took the admin role ID from my platform. This, I copied it and I pasted it into this element and Webflow.

What that does is now. Whenever I'm logged in as someone with that role, if I go to view this page, it will show that element. If I log in as another user, I'll actually pause the video and I'll log in as another user just to show you. Okay.  I've got the user credentials from this page and I logged in and this incognito tab.

And as you can see now, it's no longer showing that role content, but it is showing this show only if current user ID matches the user ID, which is the last attribute. And the reason it's showing that is because I logged in as Avery Thompson.  Let me go back to Webflow and just show that one as well.

Cause I don't, I haven't showed that one yet. But the fourth element here, as I just alluded to is showing content only if you have the current user viewing their own page.  The way that you achieve that is you put tg-attribute = current-user-content. And what that does is, if I go view this page as an admin now, again, I don't see that, that line.

But if I go to my incognito tab where I'm logged in as Avery Thompson, I do see that line.  It's only showing this because I am logged in as the user whose ID matches the user ID in the URL.  These attributes can be used on any custom profile, listing, or directory page. Most commonly we see them used on custom listing and user pages because those are the places where you want to show things like custom actions that some users may do with profiles listings or you know, whatever is derivative of those.

But you can use them in other places as well. And if you need help with that, please feel free to let our team know. If you have any questions about this, you can email us you can email me personally, aaron@tangram.co otherwise have a great rest of your day and I will catch you later."

‍