Monday, September 21, 2009

Customizing an EPiServer Community Module using Attributes

While developing an EPiServer Community or EPiServer Relate+ site, you will find the custom Community modules extremely useful. Sooner or later though, you will realize that you need to customize them in order to fit the customers need.

In this blog post, I’ll walk you through how to customize the ‘Add User’ module in the ‘System Settings’ section of the Community tab. I will not show you how to create a custom module as this has previously been explained by the brilliant Joel Abrahamsson.

So the goal in this blog post is to add a custom field, in this case a phone number, to the ‘Add User’ module:

The first thing you need to do is to create a class that inherits from and extends the EPiServer.Community.Web.Administration.EditUserPage class:

In this class I’ve added the textbox that we’ll include in the page later on, and three methods: OnInit, OnLoadComplete and a click event for the save button. Let’s take a look at the OnInit method first:

First we call the OnInit method in the base class, and then we invoke the buttonSave.Click event by supplying the method, buttonSave_Click. This means that the base class’ buttonSave_Click event will be called first and the buttonSave_Click event in our custom class will be called afterwards. The buttonSave_Click event looks like this:

Now, this is where the fun begins. In order for us to save the new users phone number, we are going to use attributes. For more information on attributes in EPiServer Community, click here. So assuming we have added a PhoneNumber attribute of type string for the type IUser, we will be able to save the phone number.

Before we can do this though, we need to retrieve the user who the phone number belongs to. As the buttonSave_Click event of the base class has already been fired, the user has been created and the only thing we need to do is to get the email address in order to retrieve the user. By snooping around in the base class, you’ll see that getting the email address is as easy as this: tabPageUserSettings.Email

So we now have the email address and are able to retrieve the user by calling the GetUserByUserName method (assuming an email address is used as the username). We then clone the user, set the attribute value, update the user and voilá! The phone number is saved.

So far this will not work as we haven’t changed the @Page directive of the EditUser.aspx or added the label and textbox. So first, change the @Page directive of the EPiServerCommunity\Security\EditUser.aspx so that the page inherits your custom class instead of the default implementation. Second, add a label and a textbox to the EditUser.aspx, make sure the textbox has the same id as in your custom class.

Now everything will work fine, except for one thing: Editing the user. If you try to edit the user you just created, you’ll see that the phone number textbox remains empty. In order to fix this, we need to override the OnLoadComplete method of the base class:

Again, we get the email and using that we retrieve the user. We can then get the PhoneNumber attribute value, and add that to the Text property of the textbox. And we’re done :)


  1. Hi there

    My name is Emad and I am from Pakistan and have just started working on EPI Server. I hava problem regarding a query that searches user. I wana search for Alias or Username but not getting it right could you please help?

  2. Sure, just send me an email with some details, and I'll help you along: karolikl(at)

  3. I have a problem regarding saving data to user object like (email). The email address is disappear on next initialization of application. Need Help!!