Practical ASP.NET

Create a Reporting Dashboard with WebPartZones (But Without WebParts)

All you need to let your users customize their Web pages is the ability to create UserControls.

When building a user interface, the best that you can do is create a UI that none of your users actually hates. You can't (can't!) create a UI that all -- or even most -- of your users will actually like. And your users don't dislike your UI for arbitrary reasons: It's impossible to create a user interface that will meet the real needs of a diverse group of users.

But if you let your users customize the UI to get what they want...well, then, your users will suddenly like your UI a lot better. (To quote Robert Heinlein: "The cook always likes the stew better after he pees in the pot himself.")

Unfortunately, developers don't use WebParts because they assume it will be "too hard" or "too different." But if you can create a WebUserControl, then you can create a customizable page.

For instance, imagine that you want to create a reporting dashboard for your users. To create a UI that your users will actually like, you need to give your users the ability to pick the reports they want from a list of available reports and the ability to put those reports where they want on a page.

Configuring a Report Page
The first step in delivering this solution is to create the reports your users want as a series of WebUserControls. The next step is to create the Reporting Dashboard page. This page is a standard WebForm with these controls: a WebPartManager, a CatalogZone and (inside the CatalogZone) a DeclarativeCatalog control. Once the DeclarativeCatalog is on the page, you can start dragging your WebUserControls into the catalog (the details of this process will differ between Visual Studio 2005 and 2008 so I'll skip over them in silence; e-mail me at if you need help).

Regardless of whether you're using Visual 2005 or 2008, all of the controls will end up being displayed in the catalog with the unhelpful caption "Untitled." You can provide more useful titles by switching into Source view and adding a title attribute to the WebUserControl tags. For instance, if you've added two user controls called UserReport and DateReport to the catalog, you can give them more meaningful display captions by adding title attributes like this.

The final step in configuring your report dashboard page is to drag some WebPartZones onto the page. You should add enough WebPartZones to hold the maximum number of reports that users will want to display at one time.

Coding the Page
There's not much left to do. You need to add a Button to the page that will let the user see the reports available in the DeclarativeCatalog control and add them to the page. The code in that button's Click event is a single line, like this.

Once the user clicks the Button to put the page in CatalogDisplayMode, the user will be able to pick reports from the catalog and add them to any of the WebPartZones on the page (and, by the way, this will work in any browser).

After users finish picking reports, they'll need to return to display mode. That means you need to a second Button with this code in its Click event, as shown here.

As new requests for reports come in, you just need to create a new WebUserControl and add it to the DeclarativeCatalog control.

Your users can now pick the WebUserControl reports they want from the catalog and put them in the WebPartZone that makes sense to them (they can even put multiple reports in a single WebPartZone). Users can also remove reports from the page or move them to a different WebPartZone if they change their minds.

You'll find that given the opportunity to create the page they want, users will get a stew that tastes just how they like.

About the Author

Peter Vogel is a principal in PH&V Information Services, specializing in Web development with expertise in SOA, client-side development, and user interface design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His most recent book ("rtfm*") is on writing effective user manuals, and his blog on language and technical writing can be found at rtfmphvis.blogspot.com.

comments powered by Disqus

Reader Comments:

Thu, May 10, 2012 Rob Jr.

This article, it teaches nothing.

Fri, Oct 2, 2009 Zed

I'm thinking it would be even better if it spoke of something new and not just wasting time both writing and reading. As grateful as I am of those willing to share knowledge, I find it rather anti-ubiquitous to put the blinders on a topic so broad just to get another supportive content page up for search engines to serve their ads.

Wed, Jul 15, 2009

this Article is in Greek and latin

Thu, Jun 18, 2009 Steve

I second that. This article really, really, really needs images. This is like going to a museum and finding a sign describing the Mona Lisa in place of the actual painting.

Thu, Mar 12, 2009 rob

This is all well and good, but screenshots would be much better than code snippets.

Add Your Comments Now:

Your Name:(optional)
Your Email:(optional)
Your Location:(optional)
Comment:
Please type the letters/numbers you see above

.NET Insight

Sign up for our newsletter.

I agree to this site's Privacy Policy.