Reporting: New Web End User Designer (Coming soon in v14.1)

You might have heard we are (finally) releasing an end user designer for the web. I’ve been wanting this gem for years! Imagine being able to manage reports (create, edit, view) all from the web! We promised more details so I’m here to spill the beans.

Technology

Under the hood it is a pure html5/js application that we’ve wrapped in an ASP.NET control. We relied heavily on Knockout for the actual binding mechanism on the control. In fact, the developers were pretty excited when they were showing me how the bindings did almost all of the heavy lifting in the component. We decided to wrap the initial version in an ASP.NET control simply because it is what our customers use. Will we release a pure html5/js version? Maybe: we’re not to that point yet. Which brings me to the next bit of information.

Community Technology Preview

This is a Community Technology Preview (or beta) of this new reporting technology. This means that it might still have some hiccups. This means that some of your reports might not work. This means we really want your input and feedback. It also means that you can get your hands on it a lot earlier too!

What’s In?

So here’s what we do support:

• Design Surface: rulers, controls selection (using mouse or keyboard, including multiselect and select with ctrl-key), drag-drop, resize, margins resizing, band selection, resizing, and collapsing, snap during control dragging (to other controls/margins)
  
• Toolbar: copy/paste, undo/redo, zooming
  
• Toolbox: XRLabel, XRRichText, XRCrossBandLine, XRCrossBandBox, XRPanel, XRTable, XRPictureBox, XRPageBreak, XRPageInfo, XRLine, XRShape, XRCheckBox, XRSparkline 
  
• Property Grid: grouped editors for currently selected object, which supports not at all, but most of used properties - font, color, styles, margins/paddings, bindings, data sources, sort/group fields
  
• Field List: data source structure, with possibility to drag field on the design surface with automatic binding
  
• Parameters Panel: add/edit/remove parameters
  

What’s Out?

There are a one thing that we deliberately left out and a couple of things we still want to implement.

• Report Explorer Panel: We felt this would be fairly redundant given our new approach to band visualization.
   
• Missing Controls: XRChart, XRSparkline, XRPivotGrid - these controls cannot be currently edited so they are simply represented as a box with a title on the design surface.

We will continue to work on these complex report controls and hope to have news about their implementation soon (that is a “marketing” soon if you know what I mean).

Working With the WEUD

Setup is extremely easy. I simply created an empty Web Project using our handy DevExpress Template Gallery and added a run-of-the-mill report (ProductReport). Next I added a new WebForm and dropped the WEUD control on the design surface.

Next you need to add this ridiculously long code snippet (joking):

Done! The designer should render as shown above (at the beginning of the article).

Saving Reports

This would be a horrible component if it did not provide a way to save the report. The WEUD provides a save button at the top left hand side of the designer itself.

A corresponding event is fired wherein you can get a hold of the report layout and do pretty much whatever you like:

Final Thoughts

Like I said before, we are extemely excited about the new possibilities this will bring to your already powerful applications. Please (please, please) send me your feedback. We feel this is a monumental tool we are introducing and want to get it absolutely right.

As always, if there are any comments and/or questions, feel free to get a hold of me!

Seth Juarez
Email: sethj@devexpress.com
Twitter: @SethJuarez

Free DevExpress Products - Get Your Copy Today