Building A Social Network in Wix | Editing Profile Page Data | Part 20

What's going on Wix Nation MPS here. I hope you had a very happy and healthy Thanksgiving. I know I just did about 12 hours of homework. So with that said, I'd like to skip that completely and show you how to edit your profile in your Building A Social Network with Wix series.

If you guys are brand new here, make sure you click that subscribe button and turn those bell notifications on an instantly joined other 29,000 plus other like-minded entrepreneurs in our Wix nation community. In addition to that, if you didn't watch my previous Building A Social Network in Wix video, it's about editing your profile picture. I would encourage you do that. I'll throw it up in a card bell above. So that way you can easier to follow along with this video. And then lastly guys, make sure you go ahead and head over to wixmywebsite.com and get no strings attached. Just literally an email and password free access to our Wix Training Academy portal, where you get a ton of free Wix training content. And then comment down below this video. Please comment down below this video. What type of social network are you building and why? I'm a curious to hear about it. And I know you're excited to share, so make sure you do that below in the comments.

Editing Profile Page Data

So let's jump in here, guys. So in our last video, I showed you how to add our edit button to the profile picture. Today, I'm going to show you just on our full name, but it applies to each of these pieces of text. So that way you'll see how you're able to edit the profile as a whole, including your name, handle, stuff like that.

So what we need to do first and foremost is obviously make sure our Corvid tools are turned on. After they are this edit profile button if you remember correctly, we already used it. The on click to make our profile picture upload button appear here. So the enclave is already there. And if we open our code panel down here, you can see it already says our picture upload show.

Now what we're going to do is we have to create a way for our full name to be changed, our handle to be changed. And what that means is we need a text upload system, right? Just like the picture upload. We need a text upload, which means we need to go ahead and grab a user input field. We got to go to add user input, and then I'm just going to grab again, I'm not going for design here. I'm going for functionality to show you guys. So I'm going to grab just one of the text input fields, and then I'm going to come over here and I'm going to drag it over full name.

Then what I'm going to do Is I'm going to edit the settings in this. I'm going to change the placeholder text to Edit Full Name, and we're not going to make it required because they don't have to do it when they click edit. But if they want to do it, they can. So we're going to do that. It's going to be a text type. Then what we're going to do is we're going to go over here and we're going to change it to hidden on load just like over here, you can see it's great out with the profile picture because we don't want this to show when the page loads we want their actual public facing profile to show their full name, not this just random blob text input, right? So we want this hidden on load and uncheck enabled by default.

We're going to change the ID to edit profile name. I'm actually, excuse me, edit full name and remember lowercase and then capital first capital first. And now we've got our ID in the hidden on load. So essentially what this means is when we click this and I'll show you how that relates to that in a second. But when we click this edit profile button what's going to happen is this edit profile picture is going to appear and show is this edit full name, text input. They're both going to appear.

Now what we have to do is we have to make sure we connect our input to the database. So that way, when they do edit it and they submit it, it is then submitted to the database. So what we're going to do is we're going to connect to data and then we have to choose a dataset. We're going to choose user profile edits, and then the value connects to full name.

If you remember correctly, this saved profile edits is going to be our submit button. If we go over here to connect the data, you can already see that when this button is clicked, it's going to take the edits from this page and submit it to the database. And it's going to redirect back to this user profile page, just like that.

Now there's one last component we're missing here. And that is we have to make sure that this edit full name user input shows when this edit profile buttons clicked. So I'm going to show you a real quick, easy hack to do this. We already use this same line of code for the edit profile picture. All we're going to do is we're going to copy this line of code from above. We're going to hit enter, and we're going to copy it below. And then we're going to change what this hashtag is. This is the ID that's written in the code. In this case, the ID for this is edit full name and you have to write it exactly as it shows. And then Wix's nice little AI tool is going to show it. You'll click it, edit full name ".show", which means when this edit profile button is clicked, both the edit profile picture and this edit full name will be clicked.

What I want to make clear is that you will follow this same process for each of these. So if you have a handle, you'll do the same thing for handle for bio. The only difference is you'll probably use a paragraph user input, text, text input, rather than just the regular standard short text input. Same with location and website. Now location, depending if you want it to be a geographical click location will depend on if you use that same method, but for right now, that's the method you would use. Same thing with the website, and you'll obviously want it to be the URL. So that's how it'll work for each of these, but I'm just showing you one to show you the functionality, how it works.

So with that said, if we go to preview, what should happen is, so right now we see our standard public facing profile image and our standards, a public facing profile name. If we click this edit profile it goes to change file, and it goes to edit full name, just like I showed you in the last one. The database permission says the site member author, and I'm not signed in with that account. Must be the one to add or edit data from their profile. So you can see I can't right now access this edit full name one or change file.

So what I'm going to do is what would happen is you would come in here, you would either change the file of your profile pictures. You would edit your name and then you would click save profile edits, and then it would submit it to the database. You can see it can't be located because we were in preview mode. And yeah, we were just not on our correct profile page because I wasn't the actual sign in member of that page. But that is exactly how that works. And then the information is then sent back to the database edited, and then the profile is then changed.

So that is how that works. There is a little bit more backend sophistication that I have to go through in each of these videos, but I want to show you the base and how to start it. So that way you can see how this editing process works. Because I know a lot of you are wondering how do I edit the profile pages and that's how you do it.

Conclusion

So if this video helped you guys out, make sure you drop a like down below, also yesterday was Thanksgiving so let's just drop a like, cause we're thankful for this awesome community. Comment, any questions, and also what type of social network you're building and why. And lastly, guys make sure to click that subscribe button and turn those bell notifications on. We're going for a goal of 50,000 subscribers on our Wix Training Academy channel in Wix Nation by March 1st. And I need your help to make that happen. So click that subscribe button, if this video helped, if you like our content and if you don't want to miss any awesome content, make sure you check out our new interview on Wix Nation brand new series we started first interview was up earlier this week. I think you're going to love it if you haven't already seen it.

Other than that, head over to wixtrainingacademy.com and no strings attached access of free Wix Training Academy, if you haven't already. Other than that, guys, I really appreciate it. Hope you had a very happy Thanksgiving and I'll catch you on our next video.