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 system architect and principal in PH&V Information Services. PH&V provides full-stack consulting from UX design through object modeling to database design. Peter tweets about his VSM columns with the hashtag #vogelarticles. His blog posts on user experience design can be found at http://blog.learningtree.com/tag/ui/.