Download the complete code sample - see the code samples section on EPiServer World

Introduction

Visual Studio interface. This guide will show how to add a page for administration settings as well as how to access and manipulate personalization settings for a user.

There will also be a small sample on how to read personal settings and making use of them on a page template.

Create a GUI Plugin

Right-click your solution node and select Add->New Item.... On the dialog that follows, select the EPiServer node in the Categories list. Click the GUI Plugin template in the templates section. Give it an appropriate name (we will call it UserSettings in this sample) and click OK.

On the "Create GUI Plugin" dialog that follows, select AdminMenu as Plugin Type, give it a name and a description and click OK.

The code-behind will have a class declaration similar to the following:

CopyC#
// A plugin class that is inserted in the Admin menu area. The Url attribute points to the aspx page
// used to display the controls of this plugin.
[GuiPlugIn(DisplayName = "UserSettings", 
    Description = "A description of this plugin", 
    Area = PlugInArea.AdminMenu, Url = "~/Additional Content/SampleProjects/AdminPage/UserSettings.aspx")]
public partial class UserSettings : System.Web.UI.Page
{

Markup of the Admin Page

For this sample, add:

  1. Three edit boxes
  2. A listbox
  3. Two buttons
  4. Two radiobuttons
  5. A MembershipUserDataSource

The editboxes will be used to show and to read edited settings on a selected user. We will use one button to tell EPiServer to read user information on the user currently selected in the listbox, and we will use the last button to save edited user information.
The radiobuttons will be used for a custom setting called ShowName, more on this later. The EPiServer.Web.WebControls.MembershipUserDataSource is for reading users from the membership system.

Remember to register the EPiServer controls as well as adding your markup to an asp:Content block.

At this point, the page will look similar to the following image (except that we won't have any values in the listbox just yet):

To structure the layout of the page you will notice that sections have been divided into groups by divs. Apart from this the only item of interest to note is the MembershipUserDataSource. This EPiServer control is used to read registered users as supplied by the current MembershipProvider. The listbox will use this Datasource to populate itself.

Copy 
<asp:Content ID="Content1" ContentPlaceHolderID="MainArea" runat="server">
    <div style="float:left; margin-right:5px;">
    <asp:ListBox ID="ListBox1" runat="server" DataSourceID="MembershipUserDataSource1"
        Height="265px" Width="196px" />
    </div>
    <div style="float:left; height: 265px; clear: right;">
        &nbsp;<asp:Label ID="Label1" runat="server" Text="First name" Width="75px"/>
    <asp:TextBox ID="tBoxFirstName" runat="server" /><br />
        &nbsp;<asp:Label ID="Label2" runat="server" Text="Last name" Width="75px" />
    <asp:TextBox ID="tBoxLastName" runat="server" /><br />
        &nbsp;<asp:Label ID="Label3" runat="server" Text="E-Mail" Width="75px" />
    <asp:TextBox ID="tBoxMail" runat="server" />
        <br />
        <br />
        <asp:Label ID="Label4" runat="server" Text="Show name when logged in" />
        <br />
        <asp:RadioButton ID="rbPrintNameON" runat="server" Text="Yes" AutoPostBack="true" OnCheckedChanged="rbPrintNameON_CheckedChanged" />
        <br />
        <asp:RadioButton ID="rbPrintNameOFF" runat="server" Text="No" AutoPostBack="true" OnCheckedChanged="rbPrintNameOFF_CheckedChanged" />
        <br />
        <br />
        <br />
        <br />
        <br />
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
    <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" Width="78px" />
    </div>
    <br />
    <br />
    <br />
    &nbsp;
    <EPiServer:MembershipUserDataSource ID="MembershipUserDataSource1" runat="server">
    </EPiServer:MembershipUserDataSource>
    &nbsp; &nbsp;&nbsp;&nbsp;
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <asp:Button ID="btnFetchUser" runat="server" OnClick="btnFetchUser_Click" Text="Fetch User" />
</asp:Content>

Adding Functionality

We will need to read users registered in the system to fill the listbox. After this we will write the code for the Fetch User Data button that will read the current user information and fill the edit boxes with this data.
Finally we will add some save functionality and a check on the radiobuttons.

CopyC#
protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);

    if (!Page.IsPostBack)
    {
        rbPrintNameOFF.Checked = false;
        rbPrintNameON.Checked = true;
    }
}
// When the save button is clicked, create an EPiServerProfile object using the selected
// user in the users listbox. Set the values of the profile object using the text entered
// in the edit boxes and the checked radiobutton. Finally save the profile object.
protected void btnSave_Click(object sender, EventArgs e)
{
    EPiServerProfile profile = EPiServerProfile.Get(ListBox1.SelectedValue);
    profile.FirstName = tBoxFirstName.Text;
    profile.LastName = tBoxLastName.Text;
    profile.Email = tBoxMail.Text;
    if (rbPrintNameOFF.Checked)
    {
        profile.SetPropertyValue("ShowName", false);
    }
    else
    {
        profile.SetPropertyValue("ShowName", true);
    }
    profile.Save();
}

// When the Save button is clicked, retreive an EPiServerProfile object from the selected
// user name in the user ListBox. Assign the text properties of the edit boxes with the 
// appropriate values and check the correct radiobutton depending on if ShowName has
// been set to true or false for this user.
protected void btnFetchUser_Click(object sender, EventArgs e)
{
    EPiServerProfile profile = EPiServerProfile.Get(ListBox1.SelectedValue);
    tBoxFirstName.Text = profile.FirstName;
    tBoxLastName.Text = profile.LastName;
    tBoxMail.Text = profile.Email;
    if ((bool)profile.GetPropertyValue("ShowName"))
    {
        rbPrintNameON.Checked = true;
        rbPrintNameOFF.Checked = false;
    }
    else
    {
        rbPrintNameON.Checked = false;
        rbPrintNameOFF.Checked = true;
    }
}
// make sure only one radiobutton is checked.
protected void rbPrintNameON_CheckedChanged(object sender, EventArgs e)
{
    rbPrintNameOFF.Checked = !(rbPrintNameON.Checked);
}

// make sure only one radiobutton is checked.
protected void rbPrintNameOFF_CheckedChanged(object sender, EventArgs e)
{
    rbPrintNameON.Checked = !(rbPrintNameOFF.Checked);
}

Adding a Custom Profile Setting to Web.config

The setting ShowName is not a default property on the EPiServerProfile object. To add this and enabling interaction with it, add it in web.config in the <profile><properties> section.

Using Personal Settings on a Page

As a small sample on how to read personal settings and affecting page behavior based on those settings we will have a label display the first name and last name of the user depending on if the corresponding radio button was checked on the admin page for this user.

Create a page and add an asp:label and give it the ID value "lblUserName". Add the following code to the Page_Load method in the code-behind:

CopyC#
if ((bool)EPiServerProfile.Current.GetPropertyValue("ShowName"))
    lblUserName.Text = EPiServerProfile.Current.FirstName + " " + EPiServerProfile.Current.LastName;

This code will display the user's name if the user is logged in, and if the ShowName property for this user has been set to true on the admin page.