Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

DotNetNuke Tips and Tricks #25: Module Magic with Form and List

DotNetNuke has always shipped with a lot of functionality in the form of modules.  Some of the modules that ship with DotNetNuke are fairly shallow, while others have very rich functionality.  One of the modules which is often overlooked on many sites is the Form and List module.  This module has a lot of rich functionality for defining tabular data structures as well as a complete templating system for displaying or collecting the data defined by the structure.

Recently, I saw some examples from Armand Datema at 2DNN which showed that Form and List can be leveraged for building sophisticated website functionality.  I decided to use this same technique in my CMSExpo talk on DotNetNuke Core Modules.  For my demo, I wanted to use the Form and List module to create a banner rotator.

The first step in building out the rotator is to understand what the Form and List provides out of the box.  Form and List can be broken down into four separate components that work together.  There is the underlying data layer that is used for storing data definitions as well as user data.  There is a user interface for managing the table definition and configuring the module options. Finally, there are options for defining how data is rendered for editing the data and for viewing the data.


The raw capabilities of form and list are great, but there are many situations where you need to be able to work with data in multiple ways.  For example, displaying my data as a rotator is great for the end user viewing the data, but really doesn’t provide a great experience when I want to select a record for editing.  What I really want is one view for managing data and one or more additional views for displaying the data to end users.  I might present the user with a summary view of data and a detailed view of a specific data element.  I also might want to display different data views on several pages on the website.


These advanced display scenarios are not currently supported directly by the Form and List module, but if I use the Reports module, the RazorHost module or even a custom module, I can quickly create my desired data views.  So lets go ahead and dive into the Rotator example and see how this works in action.

First, lets define the display that we are trying to build.  Our banner rotator will display an image, a title and a description as shown below.

Rotator - Elements

For my rotator, I’ll use an unordered list to hold each slide in the rotator.  My jQuery and CSS will then render this data into the rotator.

<div id="slideShow">
  <div id="slider">
        <div class="slide">
          <img src="blah.png"
          <div class="content">
        <div class="slide">
          <img src="blah.png"
          <div class="content">

Now that we know what data elements we need, we can configure a Form and List module to allow us to enter our rotator data.


I placed this module on a separate page that has restricted access.  Since I am going to create a custom view for end users, I can keep the data management UI restricted.  This also means that I can create a UI for data management that is tuned for quickly reviewing and editing  records.  Since this is pretty standard Form and List functionality I’ll leave it as an exercise for the reader to create a data management UI that makes sense to you.

This is where the interesting part begins.  In order to render a separate view for anonymous users, I need to use a different module that will allow me to retrieve the data from the Form and List module and render it in the desired format.  There are a couple of methods I could use, but for this example I decided to use the RazorHost module.  After adding the RazorHost module to the page where my rotator will be displayed, I create a new .cshtml script.

This script can be broken down into 3 sections.  In the first section, I setup a couple of using statements so that I don’t have to use full namespace references in my code.  Then I setup a couple of variables to hold the ModuleID and TabID of the Form and List module, and finally I use the UserDefinedTableController to get the data.

@using System.Data
@using DotNetNuke.Entities.Users    
@using DotNetNuke.Modules.UserDefinedTable

int moduleId = 387;
int tabId = 62;
var ds = (new UserDefinedTableController(moduleId, tabId, new UserInfo())).GetDataSet(true); 

Once I have the dataset, it is pretty straightforward to iterate over every row and output the appropriate HTML.  This really shows the simplicity of the Razor syntax.  I can easily mix code and markup in a very concise and easy to read format.

<div id="slideShow">
  <div id="slider">
    @foreach (DataRow row in ds.Tables["Data"].Rows)
        <div class="slide">
          <div class="content">

The final section just outputs some JavaScript which I’ll use to run the rotator.  Add in a few lines of CSS and we now have a working example of how we can create multiple views of our Form and List data.

<script src="/portals/0/js/jquery.easySlider1.7.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript"> 
            auto: true, 
            continuous: true, 
            numeric: true 

This example shows that by thinking outside the box and using multiple modules in conjunction, you can often overcome any perceived limitation.   This example is just a small taste of what you can do with the Form and List module.  Armand Datema will be showing much more complex examples during his Advanced Module Templating with Core Modules at WebConnections.


Comment Form

Only registered users may post comments.


2sic Daniel Mettler (124)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (21)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (268)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?