Episerver 6 - Creating Custom Profile Properties Via the Admin

I had a requirement to add a profile image to the EPiServer 6 blog plug-in to enable content editors to have their profile image displayed against any post they submit via the plug-in. I had two options, my first idea was to create a user pagetype and then create a mandatory link property on the BlogItemPageType page type.  This idea would work but it would also just be restricted to the blog plug-in. Instead, I went with the approach of extending the profile provider, adding in an extra image field and creating an admin plug-in to set the properties.  I think either way would work just as well.  One of my main requirements was that admins should be the only people to update the profile, so I decided to go with the admin plug-in route. Step One Create a custom property in the web.config to store the image.

    <profile enabled="true" defaultProvider="SqlProfile" automaticSaveEnabled="true">
        <add name="Address" type="System.String" />
        <add name="ZipCode" type="System.String" />
        <add name="Locality" type="System.String" />
        <add name="Email" type="System.String" />
        <add name="FirstName" type="System.String" />
        <add name="LastName" type="System.String" />
        <add name="Language" type="System.String" />
        <add name="Country" type="System.String" />
        <add name="Company" type="System.String" />
        <add name="Title" type="System.String" />
        <add name="ProfileImage"  type="System.String" />
Step Two For this project, I only need to set profile images for a very small subset of content editor.  The first part of the plug-in will return a list of all the users so an administrator can pick whose profile they want to update.  In our situation, only certain content editors will need a profile image, so I restrict my profile list to WebEditors only
        public IEnumerable<MembershipUser> GetUserList()
            var members = new List<MembershipUser>();

            var usersInRole = Roles.GetUsersInRole("WebEditors");

            return members;
Step Three After we have a list of users, we need to add in the image picker. A few months ago I detailed how to do this with sample code here, so I won't go over it again :) Step Four After we have an image and the profile we want to update, we need to store the update in EPiServer.  In order to do this we will use the EPiServerProfile class. After an editor selects which profile they want to update, the username will be passed into an update method.  In order for EPiServer to store the profile information we must use the SetPropertyValue() and then, critically, the Save method needs to be called.  If you do not call save, the information will not persist.  Code example shown below:
     selectedProfile.SetPropertyValue("ProfileImage", imageUrl);
After we save the profile information we will also need to be able to get it back out again, this is done using:
     var userProfile = EPiServerProfile.Get(userName);
     var imageUrl = userProfile.GetPropertyValue("ProfileImage").ToString();
After that the rest is just customizing the page as required.  It's pretty easy to extend the plug-in to add in any other custom profile attributes if needed.  As always you can download the plug-in from my GitHub here.      

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top