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/.

comments powered by Disqus

Featured

  • What's New in Visual Studio 2019 v16.5 Preview 2

    The second preview of Visual Studio 2019 v16.5 has arrived with improvements across the flagship IDE, including the core experience and different development areas such as C++, Python, web, mobile and so on.

  • C# Shows Strong in Tech Skills Reports

    Microsoft's C# programming language continues to show strong in tech industry skills reports, with the most recent examples coming from a skills testing company and a training company.

  • Color Shards

    Sharing Data and Splitting Components in Blazor

    ASP.NET Core Version 3.1 has at least two major changes that you'll want to take advantage of. Well, Peter thinks you will. Depending on your background, your response to one of them may be a resounding “meh.”

  • Architecture Small Graphic

    Microsoft Ships Preview SDK, Guidance for New Dual-Screen Mobile Era

    Microsoft announced a new SDK and developer guidance for dealing with the new dual-screen mobile era, ushered in by the advent of ultra-portable devices such as the Surface Duo.

  • How to Create a Machine Learning Decision Tree Classifier Using C#

    After earlier explaining how to compute disorder and split data in his exploration of machine learning decision tree classifiers, resident data scientist Dr. James McCaffrey of Microsoft Research now shows how to use the splitting and disorder code to create a working decision tree classifier.

.NET Insight

Sign up for our newsletter.

Terms and Privacy Policy consent

I agree to this site's Privacy Policy.

Upcoming Events