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

  • Hands On: New VS Code Insiders Build Creates Web Page from Image in Seconds

    New Vision support with GitHub Copilot in the latest Visual Studio Code Insiders build takes a user-supplied mockup image and creates a web page from it in seconds, handling all the HTML and CSS.

  • Naive Bayes Regression Using C#

    Dr. James McCaffrey from Microsoft Research presents a complete end-to-end demonstration of the naive Bayes regression technique, where the goal is to predict a single numeric value. Compared to other machine learning regression techniques, naive Bayes regression is usually less accurate, but is simple, easy to implement and customize, works on both large and small datasets, is highly interpretable, and doesn't require tuning any hyperparameters.

  • VS Code Copilot Previews New GPT-4o AI Code Completion Model

    The 4o upgrade includes additional training on more than 275,000 high-quality public repositories in over 30 popular programming languages, said Microsoft-owned GitHub, which created the original "AI pair programmer" years ago.

  • Microsoft's Rust Embrace Continues with Azure SDK Beta

    "Rust's strong type system and ownership model help prevent common programming errors such as null pointer dereferencing and buffer overflows, leading to more secure and stable code."

  • Xcode IDE from Microsoft Archrival Apple Gets Copilot AI

    Just after expanding the reach of its Copilot AI coding assistant to the open-source Eclipse IDE, Microsoft showcased how it's going even further, providing details about a preview version for the Xcode IDE from archrival Apple.

Subscribe on YouTube

Upcoming Training Events