How to connect fields to a view profile page in Webflow

‍

Summary:

The video explains how to connect user profile pages in Webflow to backend data from Tangram. It covers setting up a corresponding backend page in Tangram for each frontend profile page, such as seller, instructor, or buyer profiles. The process involves:

1. Creating a provider profile page in Tangram, adding sections, and defining fields for user data.
2. Connecting data to Webflow using attributes like tg-section-id, tg-import-type, and tg-attribute to pull user data such as profile pictures, display names, and bios.
3. Setting profile redirects to ensure user profile pages correctly redirect by configuring the profile redirect URL in Tangram.
4. Handling loading states using the Tangram loader or setting tg-import-type = "user" to display: none to prevent placeholder flashing.
5. Using conditional hiding to hide empty fields with tg-hide-unless-field attributes.
6. Displaying listings and reviews by nesting attributes to show user-generated listings and reviews dynamically.

The video also provides best practices for setting up Webflow attributes and handling dynamic content.

Transcript:
" In this video, we'll be showing you how to connect fields from Tangram to a view user profile page. This could be a seller profile, instructor profile, buyer profile, whatever the user role profile that you're designing in Webflow or whatever frontend you're using. We'll show you how to create the corresponding back end in Tangram and to do so you'll essentially create a back end page under the pages tab in Tangram for each corresponding front end page.

What we're looking at here in Webflow is a view seller profile page. It's named seller profile here in our profile pages folder. So I want to create a provider profile page in the back end of Tangram like this. You'll use the plus new button, give it a title. If you don't want to add a description, just put a spacebar for now.

And there's two things that you'll need to do once creating the provider profile page within your Tangram admin account. The next thing is defining the sections on that page, and then the third is defining the fields that are getting pushed to that section. What that means is for a provider profile page, usually it's just one section that I do.

It's just best practice to do that. In most like 99 percent of cases you'll just need a single section and you can name it just the same thing as the page like provider profile with the new button here and it will create the section. And if you click manage into that section, it'll let you define what types of data you're pushing to that page or to that section of the page.

And because it's a profile page for sellers or the service provider role, I will connect that role using the plus new button here to connect that as a data source. We can take data from the provider's profile that we're viewing and render it on Webflow and Tangram. And we also, based on our design, want to pull in Our listings on the seller profile.

This isn't something that you'd need to connect probably for buyers if they don't have the ability to create listing types, so keep that in mind. Next on the push fields tab, you can connect all of the fields that you want to hook up to your design in Webflow. Some examples would be the profile pic or avatar pic, display name like just a bio field or any other custom fields that you create.

Could be a text field, date field, image field, hyperlink field, anything like that. And the way that you would connect it in Webflow, you'd follow the tg-section-id, tg-import-type, and then tg-attribute structure. On the outermost container, so wrapped around everything that you want that might pull in Tangram data.

You'll have a div and you'll copy the section ID for the provider profile section, which you can find on the section tab here. Click copy. You would paste that in the custom attribute section. That would be tg-section-id. And you'd paste in the value there. It's also best practice in Webflow just to use the section_ID or whatever the attribute value is as the class name.

You can see at a glance that there is a tangram attribute attached to this div from within the Webflow Navigator. You know that there may be some custom code or attributes affecting that element. Next up, directly inside of that section_ID, the tg-section-id attribute, you will have tg-import-type = "user" defined.

You can see there's an attribute here, tg-import-type = "user". I also went ahead and gave it a corresponding class name so I can see at a glance that we have that attribute attached. Now that we have that, those two containers and attributes defined, anything we put TG import type equals user, which again is inside of the TG section ID, We can access the fields that we pushed to that section from the backend of Tangram.

If I wanted to connect that avatar, aka like the profile picture, I could copy that field, click on the photo in Webflow, or directly in whatever frontend tool you're using. Tangram is headless, so it can work with any frontend. And you'd set the HTML attribute on that element to be tg-attribute, and the field ID, which is in this case just avatar.

If we wanted display name, we'd go back into our Tab on our admin account in tangram. We'd find the display name

It looks like it's not added So we'll click plus new search for name connect display name or whatever you have it named to copy that field Click display name and replace the value with the appropriate value from your backend in Tangram. We'll just keep linking up everything in our design. For bio, maybe there's an about field or bio field, sometimes they're named different things like that.

Looks like it's not connected. Looks like we actually don't have one there. Description, it's probably description. We'll connect the description field, copy that, and replace tg-attribute with that field_ID. Now keep in mind, if you publish this, and you want it such that when you view the user's profile, like from the user's table, if you want it to go to the new design that you just created, you'll need to set that redirect under the roles tab for the appropriate user, so in this case service providers, we would set the profile redirect URL, which is at the very bottom of the first tab, to whatever the slug is of the new page you created in Tangram.

In this case, if we go to pages, you can find that slug. If you click manage on provider profile, and it's the friendly route, so I can make it whatever I want. I could delete this and say like provider attack profile, hit save. And now if we go to our sub domain slash provider attack profile, it'll redirect us to that new page with the data from that user so we would want to make sure that under role settings for service providers that profile redirect is set to your subdomain slash provider tack profile question mark user underscore equals user underscore ID.

And usually it's best practice to put the full URL here usually it's like app. yourcompany. com if you've connected your subdomain, otherwise it might be still like your company. tanfram. co slash the slug of the custom profile page. And then you just append at the end user underscore id equals curly brace user underscore id Once you have that, if you're on the users table and you click view user under the three dots or any time you get redirected to view a user's profile it'll take you to the custom design one here.

Another thing to keep in mind, just best practices in Webflow, is if you were to publish this to that connected like front, the connected user profile page, if you just hit publish right now, it would be connected, but it might flash in this placeholder content just for a brief second if the page is loading slow for some reason.

The way that you can avoid that is using the tangram loader, which should go inside of the tg-section-id. And outside of the tg-import-type = "user" div. Usually we have a component in your project when you get handed it over. If we go to the search page here, let's see if we have it added already.

Looks like it's not right now, but generally in your project you'll have a component underneath this components block that you can just drag in between. Or inside of the section ID and outside of the import type to, for it to display a loader until the page is loaded, and then it will show the actual content.

It won't flash in any of the placeholder content. Otherwise, feel free to just set this tg-import-type = "user" to display = none. Before publishing, and that will also achieve the same effect, it just won't show the loader the tangram loader attribute. Another thing that you can do if you want to not show this placeholder text if there's no value added for the bio or description is using conditional hiding.

We have another tutorial for that if you search for hiding on our YouTube channel. And the way that generally works is I like to add a class like TGHide to indicate that there's some tangram hiding attributes that are going to be applied to this div, and I wrap that around whatever content I want to dynamically or conditionally hide.

And we have a couple different attributes you can do here, but generally you want it to be hidden unless there's a value added. The way you would do that is you'd have two attributes, you'd say tg-hide-unless-field, and you'd paste the field id in there, and then you'd say tg-hide-unless-value, and you define if the value is set to anything, star, which is the character for anything, then hide the bio, we don't want that placeholder text to show up.

I have a typo here, but for the value in tg-hide-unless-field, you just use the field_ID that you are trying to hide. Copy this value, go back to the outer div, TGHide, and paste in the proper, attribute there, the proper field_ID. And now if we publish, it won't show the description or the bio unless there's a bio saved to this user account.

Now if you want to render listings, I'll just briefly touch on that and also reviews since that's a common question. Listings. Because that's listing information, you'll need to have a tg-import-type = "listing" defined wrapped around the tile or card that you've designed to render the listing.

And that will allow you to, when you connect TG attributes, for it to know that it's tied to the listing. Around the, in the search grid, we have this grid, we have tg-import-type = "listing" defined, and when it's published to the site, it will just copy and paste for every listing that this user has, and replace the data accordingly, if we have that tg-import-type = "listing" attribute defined.

And then you would just link up all the other attributes like we did for the user with tg-attribute = "photo", if that's the id for the listing, photo for price. Oh, this is one good point. If we have a string here, but we only want to replace part of it with the data, we can, one fun thing you can do in Webflow and Neat Trick is you can just highlight the part that you want replaced.

Maybe just the dollar sign. And the number is what we want replaced because The default price field in Tangram when it replaces with the actual price comes with the dollar sign and the number, but we also want to keep the per person text there. I would like add italics or bold. to what we want to text replace, just to make it selectable.

See how we can now select that dollar sign and number? And now you can apply the Tangram text replacement attribute just to that price. And we can do like tg-attribute is price, or whatever the field ID is from the pushed fields in that section, but I don't have it open right now. And then you'll just need to like, make sure, if you don't want it italicized, just to change the style to not italicize.

And you can set the default value maybe, so just like a little dash there, so you know if no value is added more clearly.

And within a tg-import-type = "listing" tile, if again you want to render user info inside of that import type equals listing, you can do that again, and you can nest import types as many times as you want. You'll notice here we have maybe like the user's avatar picture again. Maybe this isn't applicable on the profile page, so you might not need that, but on other pages, you would need to define tgimporttype equals user again by attaching the attribute tgtacimporttactype equals user, and then it would know that when you attach the avatar field ID, it's pulling in the photo for that user on this page.

Lastly, for reviews, We usually set this up as part of the onboarding process automatically in Tangram, but just to speak to the attributes that are used here, you just define tg-import-type = "review", similar to the listing tile, it'll be wrapped around a div around the review tile, and the attributes for the content of the review, or the message, the review message is tg-review-value= "content".

The reviewer name is label, and that's tg-review-value. I think tg-attribute works too, but I'm not 100 percent sure as this was an older attribute we created. The date of the review is just date, and the rating is just rating.

"