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.
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">
<ul>
<li>
<div class="slide">
<img src="blah.png"
<div class="content">
<h2>Title</h2>
<p>Description</p>
</div>
</div>
<div class="slide">
<img src="blah.png"
<div class="content">
<h2>Title</h2>
<p>Description</p>
</div>
</div>
</li>
</ul>
</div>
</div>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">
<ul>
@foreach (DataRow row in ds.Tables["Data"].Rows)
{
<li>
<div class="slide">
@row["Image"]
<div class="content">
<h2>@row["Title"]</h2>
@row["Description"]
</div>
</div>
</li>
}
</ul>
</div>
</div> 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">
$(function(){
$("#slider")
.easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>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.