Web Reporting - TypeScript Definitions (v19.1)

Last year, we introduced the DevExpress Angular Reporting Components. With these components, you can add our powerful reporting tools into your Angular-based application. However, we missed an important feature for Angular devs, TypeScript.

TypeScript has become the de facto, i.e. standard, language for Angular development. In fact, the Angular framework itself is developed with TypeScript.

The biggest selling point of TypeScript is tooling. It provides advanced autocompletion, navigation, and refactoring. Having such tools is almost a requirement for large projects. -vsavkin.com

Good news, we're now providing TypeScript Definitions for the following packages:

• devexpress-reporting
• @devexpress/analytics-core
• devexpress-reporting-angular

These new definitions are available with the latest v19.1 release.

Sample - Code Completion

I've prepared a small sample to show you how to use our new TypeScript definitions. As mentioned above, code completion is a major feature of TypeScript. So the sample shows you how to setup your project and get code completion working in Visual Studio.

Say you wanted to customize the Web Report Designer toolbar. For example, you want to hide the "Cut" item on the left side of the toolbar:

To do this, we'll need to import the DevExpressAnalytics namespace:

import { DevExpressAnalytics } from '@devexpress/analytics-core/dx-analytics-core';

Now we can use the client-side CustomizeMenuActions event to customize toolbar commands:

export class ReportDesignerComponent {
    getDesignerModelAction= "api/ReportDesigner/GetReportDesignerModel";
    reportUrl = "Report";
    CustomizeMenuActions(event){
      ...
    }
}

Finally, we'll create a variable to store the "Cut" toolbar item. In the sample below, we create the variable called cutAction.

Now, we can see the benefit of TypeScript Definitions and code completion. Call the GetById method and you'll see this handy drop-down with the available toolbar items:

These definitions save you time and help you customize our reporting tools in your Angular based web apps.

Major Refactoring

To support the TypeScript definitions, our devs refactored large portions of code in the package internals. This mainly involved changing names of classes and namespaces. These changes make it easier for you to navigate and find items when using TypeScript with our reporting tools.

Typically, when I hear refactoring, I get concerned about bugs. However, I'm happy to report these are non-breaking changes and our Reporting components will continue to work.

Of course, you may see some warnings about deprecated properties or methods. Rest assured, these warnings will also recommend the replacement property or method:

Your Feedback Counts

As always, we'd like to hear your feedback. Cast your vote by answering this short survey question:

Test it today

Test-drive the new Reporting TypeScript Definitions on your local machine. If you're a current DXperience customer then download the v19.1 release from the Client Center.

Then let us know your experience, we love to hear your feedback.

Join the Webinar

Click the link below and register for our upcoming Dashboards and Reporting webinar. You'll see all the new features of the v19.1 release demonstrated and you can ask questions too:

Register for the Dashboards and Reporting Webinar

Free DevExpress Products – Get Your Copy Today