How to Add Custom Fields to a Users “My Page” in EPiServer Relate+.

The out-of -the-box functionality included with the Relate+ templates for user profiles is excellent.  Some companies may wish to extend this with additional information.  This is very easy to do.  I wanted to test this capability myself so I implemented it and thought it might be useful to post the steps I followed.  The sample below is pretty basic and simply provides a text field for entry of a string.  However, it should provide the necessary information to help get you started down the path of implementing different types of controls desired for your solution as the process is generally the same.

1. Login to CMS Edit mode.
2. Navigate to the "Community" tab.
3. Select "Attributes".

   

4. Select the "Create Attribute" button to create a new attribute. This will enable you to work with this attribute in code without having to actually add it in the code itself.
5. Add a new Attribute with an appropriate name and type. In this example I used the name "Education" and the type "System.String" for type "EPiServer.Common.Security.IUser".

   

6. Select the "Save Information" button.
7. As a result of adding this attribute you should now have a new attribute named "Education" to work with in your code and store for the user profile.

   

8. Open the Visual Studio project for the Relate+ site titled EPiServer.Templates.RelatePlus.csproj from the sites root directory (e.g. C:\EPiServer\Sites\<site name>\).
9. Update the language files used for your site.  This will require updating the section for “mypage” and for “editprofile” since these are the respective areas for displaying user profile data and editing it.  In my case I simply updated  \Sites\<mysitename>\lang\relatePlusEN.xml with the following areas highlighted in red:
   1. <mypage>
          <personalinfo>
              ...
              <education>Education:</education>
              ...
          </personalinfo>
      </mypage>
   2. <editprofile>
          ...
          <education>Education:</education>
          ...
      <editprofile>
10. In order for the user to be able to edit their education info add the following in an appropriate location in \Templates\RelatePlus\UserControls\MyPageUserControls\EditProfile.ascx.  In my case I put this in the “pnlEditProfile” panel right below the similar code for “Lives In” (search for “lblLivesin”).
    Code Snippet

    1. <li>
    2.     <asp:Label ID="lblEducation" runat="server" Text="<%$ Resources: EPiServer, mysettings.editprofile.education %>" AssociatedControlID="txtEducation" />
    3.     <asp:TextBox ID="txtEducation" runat="server" ValidationGroup="editProfileGroup" CssClass="text" />
    4. </li>

11. In order for the education info to be rendered for the profile update \Templates\RelatePlus\Pages\MyPage.aspx with some translation logic for globalization and a label field.  In my case I put this in the "personalInfo" div tag right below the similar code for “Lives In” (search for “lblLivesIn”).

    Code Snippet

    1. <li>
    2.     <%= Translate("/mypage/personalinfo/education") %>
    3.     <asp:Label ID="lblEducation" runat="server" />
    4. </li>
12. Enable save and retrieval of the attribute value by adding the following methods to \ Templates\RelatePlus\ExtensionMethods.cs:
    Code Snippet

    1. /// <summary>
    2. /// Gets the educ
    3. /// ation for the user
    4. /// </summary>
    5. /// <param name="user">The user to get education field for</param>
    6. /// <returns>The education attribute</returns>
    7. public static string GetEducation(this IUser user)
    8. {
    9.     return user.GetAttributeValue<string>("Education");
    10. }
    11.  
    12. /// <summary>
    13. /// Sets the education for the user
    14. /// </summary>
    15. /// <param name="user">The user to set education field for</param>
    16. /// <param name="education">The education information for the user</param>
    17. public static void SetEducation(this IUser user, string education)
    18. {
    19.     user.SetAttributeValue("Education", education);
    20. }
13. Update \Templates\RelatePlus\Pages\MyPage.aspx.cs to include the following in the OnLoad() method:
    Code Snippet

    1. lblEducation.Text = CurrentMyPage.User.GetEducation().FormatContentText();
14. Update \Templates\RelatePlus\UserControls\MyPageUserControls\EditProfile.ascx.cs to include the following in the DataBind() method:
    Code Snippet

    1. // Set the education value
    2. txtEducation.Text = DisplayUser.GetEducation();
15. In order to save this data when the user clicks the “Save” button update \Templates\RelatePlus\UserControls\MyPageUserControls\EditProfile.ascx.cs to include the following in the btnSave_Click() method:
    Code Snippet

    1. // Update the education
    2. displayUserClone.SetEducation(txtEducation.Text.Trim());
16. Build the project.
17. Navigate to your user profile (i.e. the “My Page” tab).
18. Select the "Edit Settings" link.
19. You should now be able to enter information in the "Education" text box.

    

20. Save the profile.
21. Navigate back to the view mode for your profile.  There you have it.  You should now be able to see the added information in your user profile.

    

    Again, this is a simple example for a basic edit field but it should help get you started down the path of bigger and better things.  Enjoy!