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

comments powered by Disqus


  • Data Prep for Machine Learning: Normalization

    Dr. James McCaffrey of Microsoft Research uses a full code sample and screenshots to show how to programmatically normalize numeric data for use in a machine learning system such as a deep neural network classifier or clustering algorithm.

  • Microsoft Intros Azure Well-Architected Framework Best Practices

    Taking a page from the Amazon Web Services (AWS) book on cloud computing platforms, Microsoft has introduced its own Azure Well-Architected Framework, providing a set of architecture best practices to help users build and deliver great solutions and improve the quality of cloud workloads.

  • Creating a Progressive Web App with Blazor WebAssembly

    Not surprisingly, it's dead easy to create an app in Blazor that runs outside of the browser window and (potentially) in an offline mode. Before you get carried away, though, there are some key design decisions to make.

  • GitLab Takes Over VS Code Extension, Plans Improvements

    DevOps specialist GitLab has officially taken over the control of a GitLab extension for Microsoft's open source, cross-platform Visual Studio Code editor.

  • VS Code Python Tool Now Does Native Notebooks

    The Python Extension for VS Code Insiders team is previewing the newest implementation of notebooks, used frequently in data science with offerings such as Jupyter Notebooks.

.NET Insight

Sign up for our newsletter.

Terms and Privacy Policy consent

I agree to this site's Privacy Policy.

Upcoming Events