Made withOctober CMSClip

Making Websites With October CMS - Part 24 - Extending User Plugin - Frontend

W

Watch and Learn

Creator on the October CMS channel

Watch on YouTube ↗

11K viewsNov 26, 201610:54 runtime

Learn how to extend the October CMS user profile on the frontend to include custom fields. This tutorial demonstrates how to add new inputs, such as a biography and Facebook link, to the user account page. Follow a step-by-step process of overriding the RainLab User plugin's…

Chapters

#octobercms#clip#cmscrm

The Challenge: Frontend / Backend Mismatch

After extending the RainLab User Plugin to add new fields (like biography and facebook) to the user model in the backend, these fields are not available by default on the frontend user account page. This means users cannot view or edit their own custom profile information.

Solution: Extending the Frontend Profile

To make these new fields editable on the frontend, you need to override the default plugin views and extend the User model's behavior.

Step 1: Override the Plugin Partial

Locate the original file: The default form is in the RainLab User plugin at plugins/rainlab/user/components/account/update.htm.
Copy, Don't Edit: Copy the contents of update.htm.
Create a custom partial: In your theme's partials directory, create a new file (e.g., user-update.htm) and paste the copied code into it.
Update the page: On your account page (e.g., login.htm), change the partial tag from {% partial "account/update" %} to {% partial "user-update" %} to use your new custom partial.

Important
Never edit the core files of a plugin directly. When the plugin is updated, your changes will be overwritten. Always override partials by copying them into your active theme.

Step 2: Add Custom Fields to the Form

In your new user-update.htm partial, add the HTML for your custom fields. The name attribute of the input must match the database column name.

Facebook Field (input):

<div class="form-group">
    <label for="facebook">Facebook</label>
    <input name="facebook" type="text" class="form-control">
</div>

Biography Field (textarea):

<div class="form-group">
    <label for="bio">Biography</label>
    <textarea name="bio" class="form-control"></textarea>
</div>

Step 3: Populate Fields with User Data

To display the user's existing data in the form, use the form_value() Twig function.

For <input> elements, use the value attribute:

<input name="facebook" ... value="{{ form_value('facebook') }}">

For <textarea> elements, place the function between the opening and closing tags:
```
<textarea name="bio" ...>{{ form_value('bio') }}</textarea>
```

Step 4: Make Custom Fields Fillable

By default, a model will not allow mass assignment of fields for security reasons. To allow your custom fields to be saved from the frontend form, you must explicitly add them to the $fillable array on the User model.

Open your custom plugin's Plugin.php file.
In the boot() method, extend the RainLab\User\Models\User model.
Add your custom field names to the $addFillable property.

// In Plugin.php boot() method

use RainLab\User\Models\User as UserModel;

public function boot()
{
    UserModel::extend(function($model) {
        $model->addFillable([
            'facebook',
            'bio'
        ]);
    });
}

Tip
This addFillable method safely adds your fields to the model's existing fillable properties without overwriting them.

Key Takeaways & Best Practices

Improve UX: The default form requires a password confirmation for any change. For a better user experience, consider splitting the form. Create one form for general profile data (name, bio, etc.) and a separate form for changing the password.
Model Extension is Key: The most critical step for saving data is making the fields fillable by extending the User model in your plugin's boot() method.

Problem Statement: Missing Frontend Fields

In the last episode, we extended the users plugin with two new fields. So right now if you go to users and we click on John Doe, we can see this profile type right here, and we can change the data for the biography and Facebook link for our users. Okay, so this works, this is all good. But if we go to the front page or to the front end of our site and click on login, then we can log in as our user.

Now as you can see here, this is the profile page of the user. We have the full name, email, new password, and confirm new password. But what we don't have is actually the biography field and Facebook field. So our users cannot get to the back end of our site, so they can't change their information there. So that actually means that we have to put those two additional fields on the front end. And in this episode, I'm going to show you how to do that.

Overriding the Account Update Partial

So currently, I'm in my theme, so themes/Olympus, and then pages/login. So this is our login page. This is the page that you see right here. What we have here is we are checking if user is logged in. If it's not logged in, then we show him the sign in and register forms. But if the user is logged in, then we show him this partial account/update. So this is the update partial that shows these fields right here.

So how do we add two new fields right here? So first of all, we will have to go to a RainLab user, and then you go to components/account. As you can see, it says partial and then update. Then you go to account, and then we click on update.htm. And as you can see, this is the code that shows the form. So this is the update form for our user. Okay.

So what I'm actually going to do is I'm just going to take this copied. Of course, you don't want to change that in the actual plugin because when the plug-in updates, it's going to revert your changes. So I'm just going to copy this out and I'm going to go to login.htm. Actually, I'm going to go to some of my partials right here, so for example header so that I can create a new file, user-update.htm, and I'm going to paste that code into that new file. Okay, just save this. Of course what you could also do is you could just go to login.htm, remove this and copy this code right there. But I want to keep this clean. So instead of that, I created my own partial with the form and I'm just going to call it like this. So it's not going to be partial account/update, it's going to be partial user-update.

Okay, save this. Let's see if it works.

Adding Custom Fields to the Frontend Form

So we are still getting the form. If I change my name... save it. Okay, so the password confirmation doesn't match. Save this. And as you can see now our user is called John. Okay, save it again. And now we have our user. Okay, so all of this works.

So as you can probably imagine, adding two new fields right here will be very simple, and it will. So we are going to go to our user and I'm just going to copy this, paste it right here. We don't even need this label for. It's going to be called Facebook, and the input name is going to be Facebook. So this is the name of our field in our database. The type is text, class is form control, and we don't even need this ID. Okay.

So the next field is going to be a biography field, and it's actually going to be a text area and also have class of form control. Okay, save this. Let's see how that looks.

Okay. Why are we getting all of this? Oh, I know. So you have to close the text area tag. Okay, refresh it. And now we have this. So as you can see we have Facebook and we have this bio right here. But as you can see we don't have any information in those two fields.

Populating Fields with Existing Data

So I'm going to go right here and copy this line of code because we copied this from the password, and the password doesn't have a value. So for the Facebook, it's going to be value="{{ form_value('email') }}", but it's not going to be email, it's going to be Facebook. And the same thing goes for the text area. Okay, save it right now. Refresh the page. And we have this text right here.

And for the bio, we're not getting anything because I probably screwed up the name of the biography field. So let's check out our plugin. Okay. So the bio is actually bio. Why is nothing showing up? Oh yeah, because this is a textarea. I forgot that again. So you have to paste it right here instead of there. And I think that should be it. We are now getting the value of the bio field and Facebook field. Okay.

Extending the User Model to Allow Saving

So now let's try to save this. Save. Okay, so now we saved it, but we are still getting this. And we are getting this because we have to do something else in our plugin for this to work. So I'm going to go to the Plugin.php, so Profile plugin, and what we have to do is we have to extend the user model to allow for biography fields and for the Facebook field to be fillable. To do that, we first of all just define or use our model right here. So RainLab\User\Models\User as UserModel, so that we can use this name down here. And now just like we extended the user controller, we are going to extend the user model.

So what I said right here, extend the user model and add fillable fields, and then you open up an array right here and add your fillable fields. So in our case that would be the field Facebook and field bio. And that should actually be it. I save this, go to this page, refresh it to see if I screwed something up. And let's now try to save this. And as you can see, we have this 'My Facebook page' and 'hey' for the biography. So as you can see, this works on the front end also.

Conclusion and Best Practices

Also just one little note. So whenever I try to save this data, I had to confirm the passwords. Of course, you could do something to split this into two forms. And in this other form, you would just have a new password and confirm new password, and in this form, you would have this general data. And of course, you can visually separate it by putting it in tabs or one below the other or something like that, so that you don't have to save the password over and over again. Actually, I would do that if I was doing a real site, definitely.

Okay, so this is it for this episode. I remember everything we did here will be available for you on GitHub. The link will be in the description below. If you want to ask me questions, you can follow me on Facebook or on Twitter or ask them on YouTube or on my website. Also, if you like this video, you can give it a thumbs up. If you like the channel, maybe subscribe. And that's about it. Thank you guys for watching, and I will see you in the next one.