Building A Social Network in Wix | Part 9 | Editing Profile Pages Wix Code

What is up YouTube? Michael Patrick Strauch here from Wix Training Academy and today I'm bringing you part 9 of building a social network in Wix. Guys, one thing right off the bat, I am running a quick feedback survey from you to better the Wix training Academy in 19. So I'm getting ready to plan out. When I head home this Wednesday for winter break for a whole month, I'm getting ready to plan out 2019 and what the Wix Training Academy is going to look like, how I'm going to alter it, how I'm going to improve it, to provide you the best Wix Training experience possible.

So if you have five minutes of your time, head of the wixtrainingacademy.com, this will pop up within 2, 3, 4, 5 seconds on your website. And it just says, “Provide Your Feedback”, click it. It takes you to a quick little survey. It'd be much appreciated if you could fill this out and let me know how I did in 2018, as far as content and the Wix Training Academy goes.

So in today's video, what I'm going to actually do is show you how to give the user the ability to edit their profile and how we're going to do that and how we're going to utilize the Wix apps themselves to incorporate a cool little feature here, and to actually build out a profile. It's going to be pretty nice. And there's going to be a little bit to it, but just follow along. I'm going to make it as simple as possible. So that way you guys can have a quick and easy learning experience. So you could go back and implement it quickly into your websites.

Editing Profile Pages in Wix Code

So first things first, what we're going to do is we're going to go to the “Add” button right here, and before we hop into things, don't forget to subscribe right down below with Wix Training Academy so you don't miss an upload of the Building a Social Network in Wix Non-Coding Founder's Guide series, turn that notification bell on.

I've had a few people that don’t know that the uploads came through, some people were still back on part 3 and we're on part 9 already. So make sure you subscribe and turn that notification bell on, so you don't miss the notifications when a new one is uploaded.

Adding Members Area

So now that we're in the “Add” here, what we're going to do is we're going to scroll down to “Members”, then once you get down to Members, you're going to click “Add to Site”. So this is going to add a members area to your website. It's going to go ahead and work, it's a little magic here. And then what happens is, right after it loads, right after it adds and we're going to click “Get Started”.

So what happens is, is Wix actually adds a nice little member of widget here. It's kind of cool what they've done. If you haven't seen this feature yet, it's awesome. I'd highly recommend checking it out. But what happens is this account information is all associated with the backend in Wix. So this actual information is in the Wix CRM for the website, you're building any information edited in here by the user.

Go back to the Wix CRM question is, how do we utilize this same feature to go ahead and get the proper information on the user profile page? So how does the user actually edit their profile? So on here, you could see they have some of the basic features here, which is first name, last name, contact, email phone. But what we're going to do is we're going to have to edit our own little module and add just a button right here that has the same layout as this page, but we're going to have all the same information from the profile page.

So when they edit it in here, when they go to edit profile, they will then be able to add their details and it will pop up on the user profile page. I know that might sound a bit complex and a bit confusing to start, but once I hop into it here, you're going to understand what I mean by that.

To better understand it, let's go back to the user profile page that we've been building out. So we go here, “UserProfileData (Title)”, that's our page here. So this is our sample user profile page. In the last video I showed you how to add this statuses box. Now, what I want to show you is how to add; one, the edit profile button, which is very simple to do. Two, how to actually give the user the ability to change their background image and their profile image.

By the way you guys, I did make this profile image circular. Wix was in the process of updating their light image system., when we made this first profile page video and I kind of looked a little funny because I couldn't even figure out how to make the image a circle that's because Wix was going through an adjustment period, changing the design module and editing module, further images.

So to do it, you simply double click it. And then it's going to pop up an image tool and you could right here choose a cropping and you could choose what type of shape you want to crop your image as, and obviously I chose circle, and then you could choose the proper like sizing right here using the cropping tools right there. But I already did that. We're going to click that right there and we're good.

Editing Profile Page

So we're going to give the user the ability to change your background, image, their profile, picture their full name, their handle, so their @name, their bio, their location and their website. So it's actually fairly simple to do what we're going to do first is we're going to go to “Add” and then we're going to go to “Button” and we're just going to grab, I'm going to use this button right here. And again guys, we're going for a layout kind of, sort of similar to Twitter. So that's where I'm drawing some of this inspiration from. Again, this is our own little version. It's not Twitter, but that’s what I'm modelling kind of after.

So what we're going to do is I'm going to first go in here and change the design really quick. Go to customize, we're in Regular, I want the fill to stay that way, except I want the border color to change to this blue right here. And then we will keep the texts, so it's prominent. And then on Hover, I want the fill color to be this blue. And then I want the text to be white and the on Disabled, we can keep it gray like that, so that's very quick and easy right there. And then we'll change the text to “Edit Profile”.

So it's very clear, so if we go to “Preview” here, you could see everything disappears. And the “Edit Profile” button is fairly clear. So if someone comes on here, this is what they're going to see to start with. They're going to notice that there's literally nothing on here. Like it's just a whole bunch of random images says full name, @Handle, bio, location, website, and people are just like, I don't have anything on here. And they're instantaneously going to be thinking, how do I edit my profile?

How do I change this to my stuff? Well, you'd have to click “Edit Profile”.

So now what we did is we added a button, we have to link it back to the members area. But before we can link it back to the members area, we have to actually go ahead and add a little page in there for the profile completion. So people could actually add their details.

So now if we go back to “My Account” page and I'm going to take this little member up here off the top for right now, it's easy to add back. I'll tell you why towards the end of the video. So we've got the, “My Account” here. So what I'm going to do here, guys, and I'm going to go to “Manage Pages”. I'm going to click “My Account”. And then you could see this right here. This is the, “My Account” page.

What I'm going to do is I'm going to control paste. I'm going to copy that and paste it because we want that same button layout. And then I'm going to copy this and then I'm not going to paste it yet. I'm just going to copy that. And then what I'm going to do is I'm going to go back to “Manage Pages” here and add “New Page”, I'm going to change the page name into “Update Profile”.

We could see what happens here is, it is then added in this menu here. So that page is then added in the menu. And then I copied over, I have to go back here. I can’t copy that, the, my account info. Sorry, I apologize. So you can see that the “Update Profile” is added in here.

Now what we have to do is add the fields that correlate to the profile page. So what I'm going to put up here at the top, I'm going to add a little box number 1, I'm going to go to box and then I'm just going to add this and I'm just going to be just the border of box. Just like the, the previous, my account page. I'm going to change the design, going to drop the opacity to zero. I'm going to add the border, which is that I'm going to drop the color of the border. Pretty much nothing, just so you could see it. Let's make sure you can make it a little bit darker, go back to the border. So now you can see that again. I'm going to drop that down a little bit, drop the page there.

Now I'm going to grab some text, going to go to text. I'll describe a random piece of text here, going to stand this, and then I'm going to just change the font. I'm just going through my normal scheme here, guys. This is pretty straightforward stuff. You guys have all done this or seen this, how to add text, all that good stuff. I'm just going to change the text right there. I'm going to change it to “Update Profile”. I'm going to shrink it down a little bit, right there. I'm actually going to make it “Lato Black”. And then I'm going to copy the text, drop it down below. And then just explain. So we're going to explain what this does so that when people come here, they're not confused.

Again, this is just a part of user experience, user navigation. You want to make it very clear on your users, what they're doing on this page, why they're here. “Fill in the fields below to edit your profile page.” Okay. So we tell them to fill in the fields, right?

Adding Dataset

What we have to do, just like we would, if someone was using a user input form, because that's exactly what this is. We have to add the field options and we have to add our dataset. So first let's go to “Database” go to “Dataset”, come in here. We're going to click on that. And then we're going to double click it. We're going to choose where it goes. So it goes to “UserProfileData”, because that's our profile page. And we want the mode to be “Write-only”, we chose that to be write-only.

Then what we're going to do is we're going to add our fields. So “User Input”right here, and now you guys can choose whatever fields you want and design the fields to be whatever you'd like. But I'm going to just use this as an example. So we're going to use these fields right here. So we have the full name. So we're going to need one for the user's full name. We're going to need one for the user’s @name.

Then what I'm going to do is I'm going to come back to “Add” and I'm going to want a text box for the user’s bio. So user bio and then we have location. So I'm going to come back, I'm me go back up here. And I’m going to select this one again. Actually make it easy, I'll just copy this. So we got one for user’s location, and then we also need another one for user’s website. And then we need to come back in here one more time and we need to go to the “Upload Button” and we need one of these for profile picture.

And we need one of these for background picture or header picture, whatever you'd like to call that to make sure they're lined up. And then finally, we need to add a submit button. So we'll go to “Button” and I'll use our one from the edit button. You'll come in here. We'll add it down here. And it'll just say, “SUBMIT”.

So now what we need to do is we're going to change the field so that way we could set it up correctly. So we don't want this to be a phone number, we want it to be text. Then we want the placeholder text to be full name on the next one, we're going to edit it. Again, we want this to be text. We want the placeholder text to be “@Name”. Then we want this one to be a “Describe yourself in 50 words or less.” We'll just keep it down right now, that's fine. That's going to be the bio. This is going to be right here.

This is going to be the user location. Again, we want to change this to text “Your location (City, State, et.)”. Doesn't really matter wherever they want to put for the location. And then let's put a “Website URL”. And I would recommend making it a URL. What has to happen though is it's got to have the (http://www.___), whatever.com in order for it to actually register correctly in the fields here as an item or an actual URL. So just an alert, so if you want to put like a little alert message next to it that says that, I would recommend doing that.

I'm not going to make these all required. What I am going to make required is the full name and the @name, because those will come into play a little later down the road. And then we need to do is edit these puppies. We'll say “Profile Picture”, and then we want this to be a “Required field”. And then we'll change this one to “Header Image”. We also want this to be a “Required field”.

Connecting to Database

So now that we have all of these filled out, what we have to do is we have to connect them to our database. So that way it goes into the user input database. So I'm going to go ahead, click this little button right here, “Connect to data”. It's going to pull up. It already recognizes our UserProfileData dataset”. “Value connects to” “Full Name (Text)”. @Name here so “Value connects to” “@Handle (Text)”

Then we got Bio connects to “Profile Bio (Text)” Then we've got our location connects to “Profile Location (Text)”, and you could see if it's properly connected the data button, right there will turn green. So that way, you know, it's properly connected. A website URL, so connects to “Profile website (URL)” connected.

Then we want to upload a profile picture, we want this to connect to “Profile picture (Image”) and it's properly connected. Then Header image and we want this to connect to “Profile Background Image” in here that works profile background, and then it's connected. And then last but not least, we want the submit button to connect to data and then link connects to “Submit”.

Then you could choose what happens after this is submitted. So you could have it “Stay on this page” so that way they can update it again. You could “+Add a success message”, which I would add that. And I would add it right under the submit button. So I'm going to pull that up a little bit. I'm going to drop that down a little bit. So we have a little bit more room, then I'm going to pull our submit button back down here, your message right here. It could say like “Your content has been submitted”, we'll keep it that.

So that way it will stay on this page in case they want to update it again. So that way it doesn't drive them right back to the profile page. It gives them time to be like, “Oh, wait, I want to update this. Or I want to update that.” They simply press submit right there. And then they're updated just like that. So this is where they update it. So now that, that is built out now that that's done, and we have that here, what we need to do is one click “Save”.

Now what we have to do is we have to go back to our profile page, go to “UserProfileData (Title)”. We have to go to “Edit Profile” because we have to link this button to that page that we just created. We will come in here, we're going to click “Link” and then we're going to link it to a page. We're going to link it to “Update Profile (Member)”, press “Done”. That's linked there and now if all is well made sure these are all connected. So if all is well in all works, we should be able to go ahead and connect everything and see if it works.

Now, what I'm going to do to guys is I'm going to go back here and I'm going to go back down to “Members” and I'm going to add the little log-in bar at the top. Again, I'm not adding this now. And I'll explain why right now is because the dropdown features on it. If I press “Preview”, it takes you to “My Account”, but that's not this page. My account page is this page right here, which is fine, but I'm going to have to show you how to fix that. So that way, when it comes time, if people click that up at the top of testing their profile page, rather than this my account page.

I'm going to add it up there right now. So it gives us pretty quick access to go back to an in between pages. And then just to make navigation a little easier. I haven't added an actual physical navigation bar or anything yet because I'm just showing you the bare bones of this. I'm going to go ahead and just add a “Home” button up here at the top. It’s going to link the text to home, keep it just like that. I know it's very raw, very unedited, but that's okay.

That's what we need to do for right now. I am then going to go ahead and make sure on the home page.Yep! So I'm going to press “Publish”. I don't know what in the hell that is. I'm going to press “Publish” and then we're going to give it a shot. See if it works. If not, we're going to debug it and figure out what went wrong.

So first things first, I'm going to log in. So I'm logged in. So now what we're going to do is to test it. I'm going to go up here to “My account”, and then I'm going to go to “Update Profile”. I'm going to enter the proper information. Almost couldn't spell my own name, holy crap! I'm going to add my name. So I'll just add it as “MichaelStrauch”. “I like to think I am a fairly cool guy! Not sure, what do you think?” What do you think guys?

If you think I am go ahead and drop a like down below in this video! Location, I'm going to put “Phoenix, AZ” because I'm excited to get back there in four days and visit family. Website URL, I'm going to come straight here to the Wix Training Academy. Guys, don't forget to fill out your feedback form. I'm going to copy that. I'm going to add it in here.

I'm going to add a profile picture myself. What do we want to add today? Let's see. I know what I want to add. I want to add my my sweater picture. I liked that one a lot. I'm going to add that one. Now for my background image, what one can I grab? Let's just go to the Wix Training Academy and try to find my background, YouTube channel, here it is! Grab that and then submit, “Your content has been submitted”. Okay, cool!

Linking the Pages

So now what we have to check is, I haven't linked the pages yet, so it just submits there. So we actually have to verify that we have a properly submitted profile page now. So if I go back to “UserProfileData (Title)” and what I'm going to do is I'm actually going to our website's dashboard. I know this is a bit confusing. So I'm going to show you all the linking processes between the two. After we get these last little elements set up for the profile pages. So that way I can show you how to go back to a profile page after someone's uploaded their data.

So we're going to “Database” here in our dashboard. This is in our Wix dashboard on our site, and I'm going to go to “UserProfileData”. Okay, good. So this means there's been one uploaded. So now I have to show you how that works. I have to see, because I honestly don't even remember the settings I have for this page for as far as SEO settings go, “Settings” here. All right, I'm going to change this to go to add field “Full Name”. So now if we “Publish” that, I should be able to go to the website and let's see here and then pull up my profile strictly by searching right now.

So strictly by searching the exact URL, so it was /User, what was a user profile? Sorry, I apologize. I forget what I named it. What is the name of that database user profile data? Is that how I have it in here? I believe it is. Let's just check the settings here, SEO what's the page? Yep. Okay. Page info, UserProfileData/FullName. So it should come up UserProfileData/Michael-Strauch will come up like that. Yeah, here we go. Guys, look at that. You can see how it works! There we go!

So I know that was a long process to try to get to this page, but that's because I haven't linked it yet. I haven't properly set it up and link it, but you can now see that our update profile, edit profile button here works correctly. And now what I'm going to show you to quickly do, so I can make your life a little easier before this video ends is to link it back to the user profile data page.

I'm going to go back into the editor. So we're going to go back to “My Account” page. And what we're going to do is we're simply going to go once again, back to the pages here, and we're going to click “Add a New Page”, and we're going to title this page “Back To Profile”. And then just for the time being, this is a little placeholder, I'm going to show you a true, proper way to do it. I'm just going to add a button.

So when someone clicks on it, what will happen is we'll just right here back to profile. And then we're going to link that to our user profile data pit a yet, whoops, that's a dynamic page and it's going to be full name.

So I'm not going to get into that in this video. I was going to make it a quick and easy little way. I have to show you how to properly link it back using code. So I'm not going to show you that in here, you can see it work though. You can see the “Edit Profile” button is now active. If you could go back to edit profile, and then you could edit your details again. So that's pretty awesome. You can see how that updates in how it works.

Conclusion

I hope you enjoyed the video. I'm very excited for this, now you know how to do this. If you did, drop a like down below. Comment if you have any questions at all, I know this was a lot for a video and there's a lot of moving parts, a lot to follow, but hopefully I did a fairly good job of explaining. And don't forget to subscribe here at the Wix Training Academy, click that bell notification on. So you don't miss an upload of building a social network in Wix.

Finally, don't forget to head over to wixtrainingacademy.com. Again, within 3 seconds, a pop up will appear. They'll ask you to provide feedback from 2018 on how I did with both this and the YouTube channel. Please, just 5 minutes of your time. Fill out that quick little survey to help me out. So that way I can better prepare for 2019 and give you the ultimate, Wix Training experience.

Guys, I really appreciate your time and I hope you enjoyed the video! This was part 9 in building a social network in Wix. I will have the next part up before Christmas. I'm going to aim to have almost 2 or 3 extra ones done for you before Christmas happens, which is in about two weeks. So that's my goal for you. And that's what I'm aiming for. I appreciate your time, I appreciate your patients! You guys are amazing and stay awesome! Have a fantastic rest of your day! Michael struck out.