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: 5 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 ·

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 10/11/2018

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

Torsten Weggen 9/14/2018

@booler @kristofclaes @RickStrahl until a phone is not able to be a complete replacement for my laptop (with a dock) thats ridiculous

Torsten Weggen 9/12/2018

Just finished the course "Angular RxJs Reactive Programming & FREE Ebook" https://t.co/2H0Rk3NuRB via @udemy