Rockstar Dynamic Data Customizations

Learn to create wildly different layouts and easily add third-party controls to your Dynamic Data websites.

Introduction

Welcome to the Dynamic Data Scorecard series which shows you how to customize a Dynamic Data (DD) website beyond the traditional scaffolding demos. You will learn to use the DynamicControl inside a ListView to leverage the template-based flexibility of DD. Along the way you’ll see how easy it is to integrate third-party controls into the scaffolding system to make working with your data a simple process.

Nerd Status Confirmed

Guitar Hero? Yeah I know what you are thinking. Look - I am a total nerd and I like to play Guitar Hero. When I went to make this sample app I thought it might be fun to create a system that would allow me to keep track of GH scores.

What You Get

This 5-part screen cast series will take you through the various steps in creating our application:

• Part 1 - Demo of the finished application: Start here to get an idea of where we are headed
  
  
• Part 2 – Configuration: Restore the database, build a data context and get the project ready for development
  
  
• Part 3 – Customize the Scaffolding with Spell Check and Date Chooser: See how to add an optional spell check to your MultilineText field templates as well as work with DateTime values easily with a date chooser control
  
  
• Part 4 – Customize the Scaffolding with Numeric field template and Gauge controls: Learn to give your numeric fields some smarts with a specialized control and provide alternate renderings for numeric data
  
  
• Part 5 – Build the Page with a custom layout: Learn to use the DynamicControl and ListView controls to make a page pages that go far beyond the List/Edit paradigm
  
  

Please be aware, however, that the code herein does come with an official code smell alert. When implementing the gauge I do some funky things with reading data out of a data bound control. If you have any suggestions that will improve on my implementation, please comment below.

What You’ll Need

If you want to follow along and run the sample yourself you will need the following:

• Visual Studio 2008
• SQL Server 2005 Express (or higher)
• Dynamic Data Preview
• NetAdvantage for ASP.NET
• Database and Website code

Overview

The following are some screen shots and explanations of what you will find in the screen cast.

Building Custom Layouts

When we think of DD often the first thought that comes to mind is the traditional scaffolding demo. While the admin/scaffolding is a core set of DD, where the technology really shines is the template-based composition. The collection of field templates, page templates and custom pages is the key to the value of DD.

A custom layout as shown here is entirely possible with DD controls.

Now this page is really nothing special. We’ve been able to make much more usable and better looking pages for seemingly eons on the web. The real point here is that the underlying code that renders this page has no knowledge of any specific database data types and knows nothing of how to render the gauge controls.

Integrating Custom and 3rd Party Controls

With all this railing against the scaffolding you might think we would have cause to dislike the generated pages – on the contrary. The scaffolding pages will save you mountains of time. While you should probably not deploy the generated pages to a production environment certainly you can create some very useful custom pages that will help aid administration of your websites.

Pleese Checkk Yuor Speling

One of the customizations that really kicks these pages into high-gear is when you add in some third-party controls. One of the first things I wanted to do was to provide a spell checker anywhere someone might be entering in a lot of text. Editing the MultilineText to conditionally support spell check makes this a snap.

In the meta data the UIHint attribute is structured like this:

When the control runs it checks to see if the spell checker is enabled. If it is the user can run a spell check:

Type-specific Controls

Each data type has its own set of rules. Sometimes working with data that need to follow these rules can be problematic. (Dates must be in a specific format and don’t even try to cast user input into a numeric type before sanitizing it first.) Wouldn’t it be nice if we could control how these data types are rendered to users across the board to remedy these problems? With custom Dynamic Data field templates achieving this goal is simple.

This editor features a date picker control and a numeric-only text box.

Choose the Right View

Sometimes you may find that it’s better to choose different views for your data for different purposes. Rather than rendering the score as a simple number, displaying the value in a graphical nature seemed a little more pleasing to the eye.

The gauge field template will now so the value in a gauge as well as have the underlying value rendered to the user.

Field Templates not Covered in the Screen Cast

You will see some controls that aren’t discussed in the screen cast in this application. I have included the AuditField, URL and Email field templates as a part of this website. For more information on how those field templates are implemented please check out: Introduction to Dynamic Data.