X
dnn.blog.
Back

DNN 6 Form Pattern - Html Conventions

I am now in the situation to convert the DNN FAQs module to DNN 6. The first thing to do is to implement the new form pattern from DNN 6. I looked around in the internet to find some resources which help with that and found a video from Ian Robertson in the DNN Wiki and some blog posts but no document where everything is documented together . So I decided to put that information together in a blog post

Module wrapper

The content of your module has to be wrapped by the “dnnForm” CSS class. All the styles for dnnForm are defined in default.css

<div class="dnnForm">
   <!-- form content goes inside -->
</div>

for overwriting some of the styles in module.css define a module specific class

<div class="dnnForm dnnMyModule">
   <!-- form content goes inside -->
</div>

Admin Tab Navigation

The Navigation Tabs (used mostly in the settings area) are written as a simple ordered list:

<ul class="dnnAdminTabNav">
   <li><a href="#ssBasicSettings">Basic Settings</a>
   <li><a href="#ssAdvancedSettings">Advanced Settings</a></li>
</ul>

<div id="ssBasicSettings">
   <!-- Content goes here-->
</div>
<div id="ssAdvancedSettings">
<!-- Content goes here-->
</div>

Collapsible Panels

 Collapsible panels

If there are 3 or more groups of content, first panel should be expanded and the rest should be collapsed.

<h2 class="dnnFormSectionHead">
   <a class="dnnSectionExpanded">Site Details</a>
</h2>
<fieldset>
   <!--Content goes here-->
</fieldset>

Form Items

Form Item

A typical form item is build of two or more components: Label, Input, Validation

<div class="dnnFormItem">
   <dnn:label />
   <asp:textbox class="dnnFormRequired" />
   <asp:requiredfieldvalidator cssclass="dnnFormMessage dnnFormError" />
</div>

Messages

Messages follow a simple scheme:

Info

formpattern-infomessage

<div class="dnnFormMessage dnnFormInfo">
   Your message
</div>

Success

formpattern-successmessage

<div class="dnnFormMessage dnnFormSuccess">
   Your message
</div>

Warning

formpattern-warningmessage

<div class="dnnFormMessage dnnFormWarning">
   Your message
</div>

Error

formpattern-errormessage

<div class="dnnFormMessage dnnFormError">
   Your message
</div>

Buttons

formpattern-action

Define your actions as Hyperlinks or LinkButtons in an ul-list of class “dnnActions”.

<ul class="dnnActions">
   <li><asp:linkbutton id="cmdUpdate" cssclass="dnnPrimaryAction" runat="server"></asp:linkbutton></li> 
   <li><asp:linkbutton id="cmdCancel" cssclass="dnnSecondaryAction" runat="server"></asp:linkbutton></li>
</ul>

Update:

There is a very good new DNN UX Guide online. See this link: http://uxguide.dnngallery.com


Back
Total: 8 Comment(s)
Ries Spruit
Hey there, very usefull info! I am pulling my hair out, trying to create a nice validating wizard form in DNN6.

Have you perhaps figured out how to use validationGroups with dnnTabs?

I am using jquery validation now, but I can't get this to work right in IE. I suppose asp.net validation would be the better point, but I am afraid all the postbacks will drive me crazy too.. Although I suppose the form paradigm should take care of that.

Best regards,
Ries
Thursday, February 16, 2012 · reply ·
Vincent Smith
App Cloner is an application that will allow you to make exact copies of any app on your smartphone or tablet.
Saturday, August 4, 2018 · reply ·
Vincent Smith
App Cloner is an application that will allow you to make exact copies of any app on your smartphone or tablet. https://appcloner.xyz/
Saturday, August 4, 2018 · reply ·
rajan
This is the best solution of Bluetooth connection check it https://fixconnectionsbluetoothaudiodeviceswirelessdisplayswindows10.net/
Monday, August 20, 2018 · reply ·
Martin M. Lopez
Amazing Place! What a pleasure to visited that place. In this place we feel better, rationally alleviation and discharge every one of the strain. I proposed the general population to visit https://www.essaysontime.com.au in this place for seeing the shade of nature. Much appreciated
Monday, September 17, 2018 · reply ·
https://hosting-reviews.co.uk/
Such a nice post and thanks to share it with us
Tuesday, April 9, 2019 · reply ·
Nice post
Tuesday, April 9, 2019 · reply ·
monica
programming is not essay you can not take it lite. not every one can able to learn this most of the people are software engineer but they are not getting the programming. i face this issue when i develop a www.6dollarsessay.com serious it's so many issue that i faced during this development.
Wednesday, September 4, 2019 · reply ·

about.me.

Torsten WeggenMy name is Torsten Weggen and I am CEO of indisoftware GmbH in Hanover, Germany. I'm into DNN since 2008. Before this, I did a lot of desktop stuff mainly coded with Visual Foxpro (see http://www.auktionsbuddy.de). 

I'm programmer, husband, father + born in 1965.

Please feel free to contact me if you have questions.

Latest Posts

DNN module development with Angular 2+ (Part 7)
6/10/2018 1:43 PM | Torsten Weggen
DNN module development with AngularJS (Part 6)
12/16/2016 7:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 5)
12/16/2016 6:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 4)
12/16/2016 5:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 3)
12/16/2016 4:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 2)
12/16/2016 3:00 AM | Torsten Weggen
DNN module development with AngularJS (Part 1)
12/15/2016 7:19 AM | Torsten Weggen
Blogging in DNN with Markdown Monster by Rick Strahl
11/27/2016 1:14 PM | Torsten Weggen
Creating a global token engine
11/18/2016 10:25 AM | Torsten Weggen
DnnImagehandler - Hot or not ?
2/21/2015 11:52 PM | Torsten Weggen

My Twitter

Torsten Weggen 3/17/2019

You can make a real difference in Abir ’s life. Join me on @Kiva https://t.co/NlCTgIAZAN

Torsten Weggen 2/2/2019

As a freelance developer I often get invites from headhunters. This one should be very interesting... https://t.co/CNrEXBTBuJ

Torsten Weggen 10/11/2018

Evernote or OneDrive user and love #markdown #markdownmonster ? Take a look at Joplin! https://t.co/4bzkiD6CHn