DotNetNuke 6 – Creating DotNetNuke styled forms

by | Mar 18, 2012 | Blog, DotNetNuke, DotNetNuke 6.x | 2 comments

I must agree, the default form styling with DNN 6’s DarkNight theme looks very good. The controls appear very professional visually, and so in our most recent DNN 6 project, we decided to stick to DNN’s default styling for forms in our custom modules.

A colleague was tasked with finding all markup required for producing DNN style form controls. What he produced was pretty simple to understand and use. DNN uses a series of simple and intuitive CSS styles on traditional ASP.NET server controls combined with jQuery to produce most of its UI (apart from some places like grids where it uses custom Telerik-derived controls).

I am going to enumerate here the markup and css classes required for producing DNN-like UI for most common input controls (textboxes, checkboxes, buttons etc). You can simply copy-paste any control from the markup below and change labels (and possible IDs) to produce DNN-like UI in your module:

 

<div class="dnnForm dnnClear">
    <div class="dnnClear">
        <div class="dnnFormItem dnnFormHelp dnnClear">
            <p class="dnnFormRequired">
                <span>
                    <%=Localization.GetString("RequiredFields", Localization.SharedResourceFile)%>
                </span>
            </p>
        </div>
        
        <div class="dnnClear">
            <asp:ValidationSummary runat="server" CssClass="dnnFormMessage dnnFormValidationSummary"
                 EnableClientScript="true" DisplayMode="BulletList" />
                 
            <fieldset>
                <div class="dnnFormItem">
                    <dnn:Label runat="server" ID="lblProgramme" Text="Applied Programme" />
                    <asp:RadioButtonList runat="server" ID="radioCourse" RepeatDirection="Horizontal" CssClass="dnnFormRadioButtons">
                        <asp:ListItem Selected="True" Text="Foundation" Value="1" />
                        <asp:ListItem Text="Executive" Value="2" />
                    </asp:RadioButtonList>
                </div>

                <div class="dnnFormItem">
                    <dnn:Label runat="server" ID="lblTitle" Text="Title" />
                    <asp:DropDownList runat="server" ID="comboTitle">
                        <asp:ListItem Value="" Text="Select Any"/>
                        <asp:ListItem Value="1" Text="Mr."/>
                        <asp:ListItem Value="2" Text="Ms."/>
                        <asp:ListItem Value="3" Text="Mrs."/>
                        <asp:ListItem Value="4" Text="Dr."/>
                        <asp:ListItem Value="5" Text="Prof."/> 
                    </asp:DropDownList>
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="comboTitle" ErrorMessage="Please select title" Display="Dynamic" InitialValue="0"   
                        CssClass="dnnFormMessage dnnFormError" />
                </div>
            
                <div class="dnnFormItem">
                    <dnn:Label runat="server" ID="lblFirstName" Text="FirstName" />
                    <asp:TextBox runat="server" ID="txtFirstName" CssClass="dnnFormRequired" MaxLength="256" />
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="txtFirstName" ErrorMessage="First Name is required" Display="Dynamic" 
                        CssClass="dnnFormMessage dnnFormError" />
                </div>
                
                <div class="dnnFormItem">
                    <dnn:Label runat="server" ID="lblMiddleName" Text="MiddleName" />
                    <asp:TextBox runat="server" ID="txtMiddleName"  MaxLength="256" />
                </div>
                
                <div class="dnnFormItem">
                    <dnn:Label runat="server" ID="lblLastName" Text="Last Name" />
                    <asp:TextBox runat="server" ID="txtLastName" MaxLength="256" />
                </div>
                
                <div class="dnnFormItem">
                    <dnn:Label runat="server" ID="lblDateOfBirth" Text="Date Of Birth" />
                    <dnn:DnnDatePicker runat="server" ID="txtDateOfBirth" MaxLength="256" CssClass="dnnFormRequired" />
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="txtDateOfBirth" ErrorMessage="DOB is required" Display="Dynamic"
                         CssClass="dnnFormMessage dnnFormError" />
                    
                </div>

                <div class="dnnFormItem">
                    <dnn:Label runat="server" ID="lblEmailAddress" Text="E-mail Address" />
                    <asp:TextBox runat="server" ID="txtEmailAddress" MaxLength="256" CssClass="dnnFormRequired" />
                    <asp:RequiredFieldValidator runat="server" ControlToValidate="txtEmailAddress" ErrorMessage="Email Address is required" Display="Dynamic"
                         CssClass="dnnFormMessage dnnFormError" />
                    <asp:RegularExpressionValidator runat="server" ControlToValidate="txtEmailAddress" Display="Dynamic" ErrorMessage="You must enter a valid email address" 
                        ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"  CssClass="dnnFormMessage dnnFormError" />
                </div>

                <div class="dnnFormCheckbox">
					<asp:CheckBox runat="server" ID="chkSubscription" Text="CSJ Subscription (Additional Rs. 300/- will be charged)" style="padding-left: 25%;" />
                </div>
                
                <div class="dnnForm dnnClear">
                    <ul class="dnnActions dnnClear">
                        <li>
                            <asp:LinkButton runat="server" ID="lnkRegister" Text="Register" CssClass="dnnPrimaryAction" OnClick="lnkRegister_Click" />
                        </li>
						<li>
							 <asp:LinkButton runat="server" Text="Cancel" OnClick="cmdCancel_Click" CssClass="dnnSecondaryAction" CausesValidation="false" />
						</li>
						<li>
							<asp:LinkButton runat="server" ID="cmdReset" Text="Reset" OnClick="cmdReset_Click" CssClass="dnnSecondaryAction" CausesValidation="false" />
						</li>
                    </ul>
                </div>
            </fieldset>        
        </div>
    </div>
</div>

In fact, the markup-structure above reminded me of markup produced by ExtJs’ form layout (well ExtJs makes it much more easy to use, you don’t have to repeat the css classes on each individual control).

 

The following markup produces DNN-style tabs:

 

{syntaxhighlighter brush: xml;fontsize: 100; first-line: 1; }<script type=”text/javascript” language=”javascript”>
$(document).ready(function() {
$(‘#editStudent’).dnnTabs().dnnPanels();
$(‘#editStudent .dnnFormExpandContent a’).dnnExpandAll({ targetArea: ‘#editStudent’ });
</script>

<div class=”dnnForm editStudent dnnClear” id=”editStudent”>
<ul class=”dnnAdminTabNav dnnClear”>
<li>
<a href=”#pnlPersonalInformation “>
Personal Information
</a>
</li>
<li>
<a href=”#pnlContactDetails”>
Contact Details
</a>
</li>
<li>
<a href=”#pnlQualificationDetails”>
Qualification Details
</a>
</li>
</ul>

<div class=”dnnClear”>
<div class=”dnnFormItem dnnFormHelp dnnClear”>
<p class=”dnnFormRequired”>
<span>
<%=Localization.GetString(“RequiredFields”, Localization.SharedResourceFile)%>
</span>
</p>
</div>

<div class=”dnnClear” id=”pnlPersonalInformation”>
<asp:ValidationSummary runat=”server” CssClass=”dnnFormMessage dnnFormValidationSummary”
EnableClientScript=”true” DisplayMode=”BulletList” ValidationGroup=”PersonalInformation” />

<fieldset>
<div class=”dnnFormItem”>
<dnn:Label runat=”server” ID=”lblProgramme” Text=”Applied Programme” />
<asp:RadioButtonList runat=”server” ID=”radioCourse” RepeatDirection=”Horizontal” CssClass=”dnnFormRadioButtons”>
<asp:ListItem Selected=”True” Text=”Foundation” Value=”1″ />
<asp:ListItem Text=”Executive” Value=”2″ />
</asp:RadioButtonList>
</div>

<div id=”pnlFoundationPassedDetails”>
<div class=”dnnFormItem”>
<dnn:Label runat=”server” ID=”lblFoundationRegistrationNumber” Text=”If Foundation passed, Please enter Foundation Registration No.” />
<asp:TextBox runat=”server” ID=”txtFoundationRegistrationNumber” MaxLength=”256″ />
<asp:LinkButton runat=”server” ID=”lnkGetData” Text=”Get Data” CssClass=”dnnSecondaryAction” CausesValidation=”false” />
</div>
</div>

<div class=”dnnForm dnnClear”>
<ul class=”dnnActions dnnClear”>
<li>
<asp:LinkButton runat=”server” ID=”lnkUpdatePersonalInformation” Text=”Update” OnClick=”lnkUpdatePersonalInformation_Click” CssClass=”dnnPrimaryAction”
ValidationGroup=”PersonalInformation” />
</li>
<li>
<asp:linkbutton runat=”server” ID=”lnkCancelPersonalInformation” CssClass=”dnnSecondaryAction” Text=”Cancel” CausesValidation=”False” OnClick=”lnkCancel_Click” />
</li>
</ul>
</div>
</fieldset>
</div>

<div class=”dnnClear” id=”pnlContactDetails”>
<asp:ValidationSummary runat=”server” CssClass=”dnnFormMessage dnnFormValidationSummary”
EnableClientScript=”true” DisplayMode=”BulletList” ValidationGroup=”ContactDetails” />

<div class=”dnnFormleft”>
<fieldset>
<div class=”dnnClear”>
<div class=”dnnFormItem”>
<dnn:Label runat=”server” ID=”lblAddressLine1″ Text=”Address Line 1″ />
<asp:TextBox runat=”server” ID=”txtAddressLine1″ MaxLength=”256″ CssClass=”dnnFormRequired” />
<asp:RequiredFieldValidator runat=”server” ControlToValidate=”txtAddressLine1″ ErrorMessage=”Address1 is required” Display=”Dynamic”
CssClass=”dnnFormMessage dnnFormError” ValidationGroup=”ContactDetails” />
</div>

<div class=”dnnFormItem”>
<dnn:Label runat=”server” ID=”lblAddressLine2″ Text=”Address Line 2″ />
<asp:TextBox runat=”server” ID=”txtAddressLine2″ MaxLength=”256″ />
</div>
</div>

<div class=”dnnForm dnnClear”>
<ul class=”dnnActions dnnClear”>
<li>
<asp:LinkButton runat=”server” ID=”lnkUpdateContactDetails” Text=”Update” OnClick=”lnkUpdateContactDetails_Click” CssClass=”dnnPrimaryAction”
ValidationGroup=”ContactDetails” />
</li>
<li>
<asp:linkbutton runat=”server” ID=”lnkCancelContactDetails” CssClass=”dnnSecondaryAction” Text=”Cancel” CausesValidation=”False” OnClick=”lnkCancel_Click” />
</li>
</ul>
</div>
</fieldset>
</div>
</div>

<div class=”dnnClear” id=”pnlQualificationDetails”>
<asp:ValidationSummary runat=”server” CssClass=”dnnFormMessage dnnFormValidationSummary”
EnableClientScript=”true” DisplayMode=”BulletList” ValidationGroup=”QualificationDetails” />

<div class=”dnnFormItem”>
<dnn:Label runat=”server” ID=”lblQualification” Text=”Qualification” />
<asp:RadioButtonList runat=”server” ID=”radioQualification” RepeatDirection=”Horizontal” CssClass=”dnnFormRadioButtons”>
<asp:ListItem Text=”Foundation” Value=”1″ Selected=”True” />
<asp:ListItem Text=”Foundation Pass” Value=”2″ />
<asp:ListItem Text=”Commerce” Value=”3″ />
<asp:ListItem Text=”Non Commerce” Value=”4″ />
</asp:RadioButtonList>
</div>

<h4 class=”SubSubHead”>
<dnn:Label runat=”server” ID=”lblQualificationDetails1″ Text=”Qualification Details1″ />
</h4>
<div class=”dnnFormItem”>
<div class=”dnnFormItem”>
<dnn:Label runat=”server” ID=”lblQualification1″ Text=”Qualification” />
<asp:DropDownList runat=”server” ID=”comboQualification1″>
<asp:ListItem Value=”” Text=”Select Any” />
<asp:ListItem Value=”FCA” Text=”FCA” />
<asp:ListItem Value=”AICWAI” Text=”AICWAI” />
</asp:DropDownList>
</div>
<div class=”dnnFormItem”>
<dnn:Label runat=”server” ID=”lblQualificationMedium1″ Text=”Medium” />
<asp:DropDownList runat=”server” ID=”comboQualificationMedium1″>
<asp:ListItem Value=”” Text=”Select Any” />
<asp:ListItem value=”English” Text=”English” />
<asp:ListItem value=”Hindi” Text=”Hindi” />
<asp:ListItem value=”Both” Text=”Both” />
</asp:DropDownList>
<%–<asp:RequiredFieldValidator runat=”server” ControlToValidate=”comboQualificationMedium1″ ErrorMessage=”Please select Qualification Medium” Display=”Dynamic”
CssClass=”dnnFormMessage dnnFormError” ValidationGroup=”QualificationDetails” />–%>
</div>

<div class=”dnnFormItem”>
<dnn:Label runat=”server” ID=”lblQualificationYear1″ Text=”Year” />
<asp:TextBox runat=”server” ID=”txtQualificationYear1″ MaxLength=”256″ />
<asp:RegularExpressionValidator runat=”server” ControlToValidate=”txtQualificationYear1″ ErrorMessage=”Year must be numeric”
ValidationExpression=”[0-9-+]*” CssClass=”dnnFormMessage dnnFormError” ValidationGroup=”QualificationDetails” />
</div>
</div>

<h4 class=”SubSubHead”>
<dnn:Label runat=”server” ID=”lblQualificationDetails2″ Text=”Qualification Details2″ />
</h4>
<div class=”dnnFormItem”>
<div class=”dnnFormItem”>
<dnn:Label runat=”server” ID=”lblQualification2″ Text=”Qualification” />
<asp:DropDownList runat=”server” ID=”comboQualification2″>
<asp:ListItem Value=”” Text=”Select Any” />
<asp:ListItem Value=”BACHELOR OF BUSINESS ECONOMICS” Text=”BACHELOR OF BUSINESS ECONOMICS” />
</asp:DropDownList>
</div>
<div class=”dnnFormItem”>
<dnn:Label runat=”server” ID=”lblQualificationMedium2″ Text=”Medium” />
<asp:DropDownList runat=”server” ID=”comboQualificationMedium2″>
<asp:ListItem Value=”” Text=”Select Any” />
<asp:ListItem value=”English” Text=”English” />
<asp:ListItem value=”Hindi” Text=”Hindi” />
<asp:ListItem value=”Both” Text=”Both” />
</asp:DropDownList>
</div>

<div class=”dnnFormItem”>
<dnn:Label runat=”server” ID=”lblQualificationYear2″ Text=”Year” />
<asp:TextBox runat=”server” ID=”txtQualificationYear2″ MaxLength=”256″ />
<asp:RegularExpressionValidator runat=”server” ControlToValidate=”txtQualificationYear2″ ErrorMessage=”Year must be numeric”
ValidationExpression=”[0-9-+]*” CssClass=”dnnFormMessage dnnFormError” ValidationGroup=”QualificationDetails” />
</div>
</div>

<div class=”dnnForm dnnClear”>
<ul class=”dnnActions dnnClear”>
<li>
<asp:LinkButton runat=”server” ID=”lnkUpdateQualificationDetails” Text=”Update” OnClick=”lnkUpdateQualificationDetails_Click” CssClass=”dnnPrimaryAction”
ValidationGroup=”QualificationDetails” />
</li>
<li>
<asp:linkbutton runat=”server” ID=”lnkCancelQualificationDetails” CssClass=”dnnSecondaryAction” Text=”Cancel” CausesValidation=”False” OnClick=”lnkCancel_Click” />
</li>
</ul>
</div>
</div>
</div>
</div>{/syntaxhighlighter}

 

Finally here’s the sample markup to produce collapsible sections in dnn tabs (actually a stripped down version of DNN’s host page):

 

{syntaxhighlighter brush: xml;fontsize: 100; first-line: 1; }<script language=”javascript” type=”text/javascript”>
(function($, Sys) {
function setUpDnnHostSettings() {
$(‘#dnnHostSettings’).dnnTabs().dnnPanels();
$(‘#basicSettings .dnnFormExpandContent a’).dnnExpandAll({ expandText: ‘<%=Localization.GetString(“ExpandAll”, Localization.SharedResourceFile)%>’, collapseText: ‘<%=Localization.GetString(“CollapseAll”, Localization.SharedResourceFile)%>’, targetArea: ‘#basicSettings’ });
$(‘#advancedSettings .dnnFormExpandContent a’).dnnExpandAll({ expandText: ‘<%=Localization.GetString(“ExpandAll”, Localization.SharedResourceFile)%>’, collapseText: ‘<%=Localization.GetString(“CollapseAll”, Localization.SharedResourceFile)%>’, targetArea: ‘#advancedSettings’ });
}

$(document).ready(function() {
setUpDnnHostSettings();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
setUpDnnHostSettings();
});
});

function toggleSection(id, isToggled) {
$(“div[id$='” + id + “‘]”).toggle(isToggled);
}
} (jQuery, window.Sys));
</script>

<div class=”dnnForm dnnHostSettings dnnClear” id=”dnnHostSettings”>
<asp:ValidationSummary ID=”valSummary” runat=”server” CssClass=”dnnFormMessage dnnFormValidationSummary” EnableClientScript=”true” DisplayMode=”BulletList” />
<ul class=”dnnAdminTabNav dnnClear”>
<li><a href=”#basicSettings”>
<%=LocalizeString(“BasicSettings”)%></a></li>
<li><a href=”#advancedSettings”>
<%=LocalizeString(“AdvancedSettings”)%></a></li>
</ul>
<div id=”basicSettings” class=”ssBasicSettings dnnClear”>
<div class=”dnnFormExpandContent”>
<a href=””>
<%=Localization.GetString(“ExpandAll”, Localization.SharedResourceFile)%></a></div>
<div class=”ssasContent dnnClear”>
<h2 id=”Panel-Configuration” class=”dnnFormSectionHead”>
<a href=”” class=””>
<%=LocalizeString(“Configuration”)%></a></h2>
<fieldset>
<div class=”dnnFormItem”>
<dnn:Label ID=”plProduct” ControlName=”lblProduct” runat=”server” />
<asp:Label ID=”lblProduct” runat=”server” />
</div>
</fieldset>
<h2 id=”Panel-HostDetails” class=”dnnFormSectionHead”>
<a href=”” class=””>
<%=LocalizeString(“HostDetails”)%></a></h2>
<fieldset>
<div class=”dnnFormItem”>
<dnn:Label ID=”plHostPortal” ControlName=”cboHostPortal” runat=”server” />
<asp:DropDownList ID=”hostPortalsCombo” DataTextField=”PortalName” DataValueField=”PortalID” runat=”server” />
</div>
<div class=”dnnFormItem”>
<dnn:Label ID=”plHostTitle” ControlName=”txtHostTitle” runat=”server” />
<asp:TextBox ID=”txtHostTitle” runat=”server” MaxLength=”256″ />
</div>
</fieldset>
</div>
</div>
<div id=”advancedSettings” class=”ssAdvancedSettings dnnClear”>
<div class=”dnnFormExpandContent”>
<a href=””>
<%=Localization.GetString(“ExpandAll”, Localization.SharedResourceFile)%></a></div>
<div class=”ssasContent dnnClear”>
<h2 id=”Panel-FriendlyUrl” class=”dnnFormSectionHead”>
<a href=”#” class=””>
<%=LocalizeString(“FriendlyUrl”)%></a></h2>
<fieldset class=”asContentFriendlyUrls”>
<div class=”dnnFormItem”>
<dnn:Label ID=”plUseFriendlyUrls” ControlName=”chkUseFriendlyUrls” runat=”server” />
<asp:CheckBox ID=”chkUseFriendlyUrls” runat=”server” />
</div>
</fieldset>

<h2 id=”Another-Panel” class=”dnnFormSectionHead”>
<a href=”#” class=””>
Another Section Head</a></h2>
<fieldset class=”asContentFriendlyUrls”>
<div class=”dnnFormItem”>
Some content
</div>
</fieldset>
</div>
</div>
</div>{/syntaxhighlighter}

 

2 Comments

  2. Jaydeep Bhatt
    Jaydeep Bhatt on September 26, 2012 at 1:07 am
    1. For some unknown reason, the DnnDatePicker (telerik wrapper) does not work in my module, where as it works if I use some downloaded Modules. Any idea, where in my Module, could be problem?
    2. DNN says, they have completely changed the default.css file in DNN7. Do you think this markup would be still valid? for DNN7 onwards ?

    Thanks

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.