Getting Up to Speed on DNN 6.x Design(DNN)

 

So like many developers I have been spending some time recently updating my client, commercial, and open-source modules to support the new DotNetNuke 6 Form Pattern from a design perspective, to make my modules better integrate into the system. Looking around when I was starting there is very little "true"documentation on this concept, and for me it was a bit cumbersome pulling everything together. I started with this Wiki Article and then ended up spending a lot of time digging/inspecting lots of other modules that had been upgraded. So in this post, I'm going to take a bit more of a 'code-centric"no-nonsense approach to what your form should really look like, I hope that this helps you.
To help make this post as helpful as I can, I'm going to start out with some key CSS Classes then I'll move into the actual form pattern. In a future post, I'll expand on this a bit more and start taking about some of the jQuery plugins that are available.

CSS Classes

The following is a listing of the new CSS classes that I've been using and found to be key to working with the new form pattern.
CSS Class
Purpose
dnnForm
Used on a "div"element to wrap the entire contents of a form.
dnnFormItem
Used on a "div"element to construct an individual item in a form
dnnClear
Used to ensure that floating content has been cleared
dnnFormRequired
Used to indicate with the red indicator bar that a form field is required. Typically used on TextBoxes
dnnFormError & dnnFormMessage
Combined when added to a RequiredFieldValidator or similar control will enusre that the display is shown using the consistent error display that is used on all DNN forms.
dnnActions
Used on a "ul"to hold a listing of buttons for actions within a form
dnnPrimaryAction
Used on a "button"to have it styled as the primary action.
dnnSecondaryAction
Used on a "button"to have it styled as the secondary action, typically just as a link
dnnFormSectionHead
Used on "h2"or similar element to style an item as a section heading
Now the above listing is just a subset of the CSS Classes that were added, but these are the basic ones that I needed to get my forms updated to the new standard. If you have more that you think should be added, share them in the comments below and I'll update the article as needed.

Coding the Form

So, it is all fine and dandy that I have these items defined, but what does it actually take to get the form coded? Actually it is very simple, and I'll break it down into a number of steps for you.

Form Overview

To ensure that we start out on the right foot, lets take a high level look at what a form should look like:

<div class="dnnForm dnnClear">

    <ul class="dnnActions dnnClear">
        <li><asp:LinkButton id="btnSubmit" runat="server"
                  CssClass="dnnPrimaryAction" text="Submit" />
        </li>
    </ul>
</div>

As you can see here it is pretty simple, a div to contain the entire form, then at the bottom an actions list to handle your operations.

Form Items

Once we have the overview of the form created, we can add our items. In the most basic structure items should look like the following.

<div class="dnnFormItem">
    <label>My Label</label>
    <asp:TextBox id="txtMyTextbox" runat="server" CssClass="dnnFormRequired" />
    <asp:RequiredFieldValidator id="myValidator" runat="server" 
        ControlToValidate="txtMyTextbox" Text="My Error"
        CssClass="dnnFormMessage dnnFormError" display="Dynamic" />
</div>

Now, notice here that we have an individual div for each item, within this we have a HTML label and then our control(s). If you are used to using the DotNetNuke Label control for providing localized labels and help information you can substitute that control for the label as used in the above example.
To continue building out your form, simply add additional Form Item Div's as needed within the dnnForm div created above and your will be set to go.
I hope that this basic overview of the general form structure has been helpful. In future posts I will show how to create expanding/collapsing sections using the jQuery helpers. Please share any comments below.