+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Extending the registration widget - adding a country dropdown list

by Victor Velev
At some point you might encounter the need to display certain amount of data in a way the user can easily interact with, when being registered to your site. In the past, we had several requests by users which were related to the extension of the registration form control, to include functionality, allowing the newly registered user to choose from a list of items.

I am going to focus on the scenario, where you need to create a dropdown field, in the registration form to display a list of countries ( which will be flat taxonomies ) for the user to choose from.

For the purpose, I will create a new Registration control, which directly inherit from the default one. Then the logic in the InitializeControls method will be overridden to include the new code for our scenario.

As for the workflow:

1. We will create a new classification, called Countries ( Simple list ).
2. After that all the countries will be added to the new classification.
3. Then, a new custom field needs to be created in the profile type that is being used. It needs to be set "Classification" type.
4. We can then create our code. For the code behind, we can use:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Telerik.Sitefinity.Security.Web.UI;
using Telerik.Web.UI;
using Telerik.Sitefinity.Taxonomies;
using Telerik.Sitefinity.Taxonomies.Model;
using Telerik.Sitefinity.Security.Model;
using Telerik.Sitefinity.Model;
using Telerik.OpenAccess;
 
namespace SitefinityWebApp
{
    public class RegFormCustom : RegistrationForm
    {
        
        protected virtual RadComboBox CategoriesCombo
        {
            get
            {
                return this.Container.GetControl<RadComboBox>("categoriesCombo", true);
            }
        }
        protected override string LayoutTemplateName
        {
            get
            {
                return null;
            }
        }
 
        public RegFormCustom()
        {
            this.LayoutTemplatePath = this.layoutTemplatePath;
 
        }
 
 
        protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container)
        {
            this.LayoutTemplatePath = this.layoutTemplatePath;
            base.InitializeControls(container);
 
            TaxonomyManager taxonomyManager = TaxonomyManager.GetManager();
            var newsCategories = taxonomyManager.GetTaxonomies<FlatTaxonomy>().Where(t => t.Name == "Countries").SingleOrDefault().Taxa
                                    .Select(t => new
                                    {
                                        taxonId = t.Id,
                                        taxonTitle = t.Title.ToString()
                                    }).ToList();
            this.CategoriesCombo.DataTextField = "taxonTitle";
            this.CategoriesCombo.DataValueField = "taxonId";
            this.CategoriesCombo.DataSource = newsCategories;
            this.CategoriesCombo.DataBind();
            RadComboBoxItem emptyItem = new RadComboBoxItem("Choose a country");
            this.CategoriesCombo.Items.Insert(0, emptyItem);
 
            CategoriesCombo.SelectedIndexChanged += new RadComboBoxSelectedIndexChangedEventHandler(CategoriesCombo_SelectedIndexChanged);
 
        }
 
        void CategoriesCombo_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            //throw new NotImplementedException();
        }
 
        protected override void CreateUserProfiles(Telerik.Sitefinity.Security.Model.User user)
        {
            base.CreateUserProfiles(user);
            var userProfile = this.GetUserProfile(user, typeof(SitefinityProfile).FullName);
            var taxList = new TrackedList<Guid>();
            taxList.Add(new Guid(CategoriesCombo.SelectedValue));
            userProfile.SetValue("Country", taxList);
            this.UserProfileManager.SaveChanges();
 
        }
 
        public string layoutTemplatePath = "~/RegFormCustomTempl.ascx";
    }
}

In my case, the custom classification holding the countries is called Countries and the custom field is Country. The template, RegFormCustomTempl.ascx is as follows:

<%@ Control Language="C#"%>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
<%@ Register TagPrefix="sfvalidation" Namespace="Telerik.Sitefinity.Web.UI.Validation.Definitions" Assembly="Telerik.Sitefinity"%>
 
<fieldset class="sfregisterFormWrp">
    <asp:Panel ID="formContainer" runat="server" DefaultButton="registerButton">
        <ol class="sfregisterFieldsList">
            <sf:TextField ID="firstName" runat="server" DataFieldName="FirstName" DataItemType="Telerik.Sitefinity.Security.Model.SitefinityProfile" DisplayMode="Write" Title="<%$ Resources:Labels, FirstName %>" CssClass="sfregisterField sfregisterFirstName" WrapperTag="li" />
            <sf:TextField ID="lastName" runat="server" DataFieldName="LastName" DataItemType="Telerik.Sitefinity.Security.Model.SitefinityProfile" DisplayMode="Write" Title="<%$ Resources:Labels, LastName %>" CssClass="sfregisterField sfregisterLastName" WrapperTag="li" />
            <sf:TextField ID="email" runat="server" DataFieldName="Email" DisplayMode="Write" Title="<%$ Resources:Labels, Email %>" CssClass="sfregisterField sfregisterEmail" WrapperTag="li">
                <ValidatorDefinition MessageCssClass="sfError" Required="true" ExpectedFormat="EmailAddress"/>
            </sf:TextField>
             <telerik:RadComboBox runat="server" ID="categoriesCombo" Skin="Sitefinity"></telerik:RadComboBox>
            <sf:TextField ID="userName" runat="server" DataFieldName="UserName" DisplayMode="Write" Title="<%$ Resources:Labels, UserName %>" CssClass="sfregisterField sfregisterUserName" WrapperTag="li">
                <ValidatorDefinition MessageCssClass="sfError" Required="true"/>
            </sf:TextField>
            <sf:TextField ID="password" runat="server" DisplayMode="Write" Title="<%$ Resources:Labels, Password %>" IsPasswordMode="true" CssClass="sfregisterField sfregisterPassword" WrapperTag="li">
                <ValidatorDefinition MessageCssClass="sfError" Required="true"/>
            </sf:TextField>
            
            <sf:TextField ID="reTypePassword" runat="server" DisplayMode="Write" Title="<%$ Resources:UserProfilesResources, ReTypePassword %>" IsPasswordMode="true" CssClass="sfregisterField sfregisterConfirmPassword" WrapperTag="li">
                <ValidatorDefinition MessageCssClass="sfError">
                    <ComparingValidatorDefinitions>
                        <sfvalidation:ComparingValidatorDefinition ControlToCompare="password"
                            Operator="Equal" ValidationViolationMessage="<%$ Resources:ErrorMessages, CreateUserWizardDefaultConfirmPasswordCompareErrorMessage %>"/>
                    </ComparingValidatorDefinitions>
                </ValidatorDefinition>
            </sf:TextField>
        </ol>
        <asp:Panel ID="errorsPanel" runat="server" CssClass="sfErrorSummary" Visible="false"/>
        <div class="sfregisterLnkWrp">
            <asp:Button runat="server" ID="registerButton" Text="<%$ Resources:UserProfilesResources, Register %>" CssClass="sfregisterSaveLnk"/>
        </div>
    </asp:Panel>
    <sf:SitefinityLabel id="successMessageLabel" runat="server" WrapperTagName="div" CssClass="sfSuccess" />
    <asp:Panel ID="configurationErrorsPanel" runat="server" CssClass="sfErrorSummary" Visible="false" >
        <div runat="server" id="smtpSettingsErrorWrapper" Visible="false">
            <asp:Label runat="server" id="smtpConfigurationErrorTitle" Text="<%$ Resources:ErrorMessages, CannotSendEmails %>"/>
            <asp:Label runat="server" id="smtpConfigurationError"></asp:Label>
        </div>
    </asp:Panel>
 
</fieldset>

For your convenience I am attaching the above code in an archive.

The next step would be to register the control in the Toolbox section of the site, so that it can be used in "Page Edit" mode.

4 comments

Leave a comment
  1. Arno Jan 08, 2013

    Thanks Victor, this is exactly what I need. Can't get it to work though. I translated it to VB.NET. It does not pick up my custom template but keeps showing the default one. I can't do "this.LayoutTemplatePath = this.layoutTemplatePath;" as this.LayoutTemplatePath is readonly.

    Also, where is the template supposed to be located? In the root of the assembly? It's not an embedded resource, right?

  2. ak Mar 01, 2013
    can you explain how to register control in the Toolbox section
  3. ak Mar 01, 2013
    hello, i followed the steps but in the preview mode , i see the drop down but no list of countries is shown and i could not follow the register the tool box section. please provide steps. thanks,
  4. online psychology degree Jun 06, 2013
    Thanks Victor, this is exactly what I need. Can't get it to work though. I
    translated it to VB.NET. It does not pick up my custom template but
    keeps showing the default one. I can't do "this.LayoutTemplatePath
    = this.layoutTemplatePath;" as this.LayoutTemplatePath is readonly.

    Leave a comment