Try our conversational search powered by Generative AI!

Jeff Wallace
Dec 10, 2009
  7897
(3 votes)

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".

    clip_image001

  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".

    clip_image002

  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.

    clip_image003

  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.

    clip_image004

  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.

    clip_image005

    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!

Dec 10, 2009

Comments

Sep 21, 2010 10:32 AM

Jeff -this is really cool stuff to kick off with the customization in Relate+. Keep sharing such nice posts.
/ Nitin

Sep 21, 2010 10:32 AM

Thanks Nitin!

Sandeep Sahoo
Sandeep Sahoo Sep 21, 2010 10:32 AM

Excellent Post - Covered each single piece of change. Keep sharing such nice posts. Regards.

Sep 21, 2010 10:32 AM

Thanks Sandeep! Glad to hear that it helped. :)

Cheers.

sandeep@r1group.co.uk
sandeep@r1group.co.uk Jan 13, 2011 02:09 PM

HI Jeff
Could you please let me know how to remove an attribute added.

Regards
Sandeep

sandeep@r1group.co.uk
sandeep@r1group.co.uk Jan 13, 2011 02:10 PM

HI Jeff
Could you please let me know how to remove an attribute added.

Regards
Sandeep

Please login to comment.
Latest blogs
Microsoft announces Natural language to SQL

Finally, Microsoft launches "Natural language to SQL," after it has been available for several months in Optimizely CMS!

Tomas Hensrud Gulla | May 23, 2024 | Syndicated blog

Five easy ways to start personalizing your content right now

If you clicked on this article, you already know that getting the right message to the right person at the right time helps drive conversions and...

Kara Andersen | May 23, 2024

ExtendedCms.TinyMceEnhancements – serwer side webp support

Today I will introduce another small feature of TinyMceEnhancements plugin. The functionality is used to automatically detect whether a browser...

Grzegorz Wiecheć | May 22, 2024 | Syndicated blog

Azure AI Language– Detect Healthcare Content in Optimizely CMS

In this blog post, I showcase how the Azure AI Language service's Text Analytics for health feature can be used to detect healthcare content within...

Anil Patel | May 22, 2024 | Syndicated blog

Stott Security Version 2 So Far

In December 2023, I unveiled the initial version of Stott Security version 2. Although I typically announce each version I release on LinkedIn and...

Mark Stott | May 22, 2024

Optimizely Data Platform (ODP) Page Scroll Tracking

As with my last post, this isn’t a “getting started with ODP” — to get started with ODP, check out the developer docs,   “Implement the ODP...

Daniel Isaacs | May 22, 2024