developer.mescius.com Open in urlscan Pro
20.122.209.197  Public Scan

Form analysis
1 forms found in the DOM

POST //developer.mescius.com/search/main_menu_search

<form class="search-all" action="//developer.mescius.com/search/main_menu_search" method="POST"><input type="text" placeholder="Search MESCIUS" name="term" id="nav-search"><input type="submit" value="Search"></form>

Text Content

Skip to main content Skip to footer
x

DEVcember is here! For a limited time, save up to 40% on selected products!

DEVcember is here! Save up to 40% on selected products!

DEVcember savings are here!

 * PRODUCTS
 * SUPPORT & LEARNING
 * BLOGS
 * PRICING
 * Search
 * Cart
 * Sign In

 * 
 * Search
 * Cart
 * My Account

 * Back

 * .NET UI

 * .NET controls for desktop, web, and native mobile

 * ComponentOne
 *  
 * WinForms
 * WPF
 * WinUI
 * UWP
 * Xamarin
 * MAUI
 * ASP.NET MVC
 * ASP.NET Core
 * Blazor
 * ActiveX
 * WebAPI
 * Service Components
 * ASP.NET Web Forms

 * JAVASCRIPT

 * HTML5/JavaScript controls with support for Angular, React, and Vue

 * Wijmo
 * SpreadJS
 * ActiveReportsJS
 * DataViewsJS

 * DOCUMENT SOLUTIONS

 * Take total control of your documents with high-speed, intuitive document APIs

 * Excel, .NET Edition
 * Excel, Java Edition
 * PDF
 * Word
 * Imaging
 * Document Viewers

 * Reporting

 * Full reporting solutions with extensive data visualization, viewers, and
   designers

 * ActiveReports.NET
 * ActiveReportsJS

 * SPREADSHEETS

 * Powerful spreadsheets for .NET, JavaScript, and COM

 * Spread.NET
 * SpreadJS
 * SpreadCOM
 * DataViewsJS

EMBEDDED BUSINESS INTELLIGENCE


 * 

 * Explore our embedded BI platform, Wyn Enterprise. Empower Teams with
   self-service BI, ad hoc reporting, and interactive dashboards.
   
   See Wyn in Action and
   Learn More!

 * Back

 * SUPPORT

 * Have a question or issue? Find out how we can help.

 * Forums
 * Licensing
 * Support Plans

 * CONTACT SUPPORT
 * 
 * Submit a Ticket
 * Contact Phone Support

 * LEARNING

 * Read, watch, and learn about our products, team, and the latest trends.

 * Samples
 * Blogs
 * Videos
 * Knowledge Base
 * Webinars
 * Demos
 * Documentation
 * White Papers
 * Case Studies

 * LATEST RELEASE INFO

 * Find out what's new in the latest versions of our products.

 * ActiveReports.NET
 * ActiveReportsJS
 * ComponentOne
 * DsExcel .NET
 * DsExcel Java
 * DsImaging
 * DsPdf
 * DsWord
 * Spread.NET
 * SpreadJS
 * Wijmo
 * Wyn Enterprise

 * OUR LATEST RELEASE

 * Check out the newest updates and features in ActiveReportsJS v4.2
   Learn More »


 * Mobile
 * Web
 * ActiveReportsJS
 * ActiveReports


HOW TO ADD RUNTIME DATA BINDING TO YOUR ANGULAR REPORTING APP

 * November 06 2023

 * 0 Comments

When building reports, there may be times when you don’t want your report
authors to assign the data in the report creation phase; instead, you want to be
able to bind the data to your report at runtime, either through user selection
or other criteria. Thankfully, ActiveReportsJS makes it easy to bind data sets
and assign data fields at runtime.



In this article, we’ll show you how to set up your report to allow data to be
bound at runtime. We’ll be covering the following topics:

 * Defining the Data Source and Data Set
 * Add Controls and Define Data Fields
 * Add ActiveReportsJS to Angular Application
 * Dynamically Bind Data at Runtime

If you’d like to follow along with the completed report and application, you can
find the repository here.

Ready to Start Building Reports? Download ActiveReportsJS Today! 


DEFINING THE DATA SOURCE AND DATA SET

First, we’ll need to set up our data source and data sets that we want to use in
our report. However, if you’ve used ActiveReportsJS before, we won’t be setting
them up in the traditional way.

Normally, when creating a data source, we provide a URL for ActiveReportsJS to
use to reach out to the API, and when we create a data set, we provide a Uri and
Json path; when setting up a report to be bound at runtime, we don’t provide any
of these.





As you can see, we’ve left everything blank; this is because we’re going to set
these using TypeScript at runtime.

The reason we set up the data source and data set like so is simple; adding
these in the Report Designer adds these properties to the JSON stored in the
rdlx-json file. This will allow us to access and set these properties at
runtime.


ADD CONTROLS AND DEFINE DATA FIELDS

Now that we’ve got our JSON properties set up in the rdlx-json through the Data
Source and Data Set, it’s time to add some controls to the report body. For our
report, we will add a Table; drag and drop a table control from the control
toolbox onto the report body.

Now, select the table, and in the Properties Panel of the Report Designer, set
the Data Set Name property to our TableSet data set:



Now, we’ve tied the table control to our data set (which currently has no data).
When we bind this data set during runtime, our table will also get bound to the
data we provide. However, we’re not done yet.

Now, we need to set up our table with properties that will be contained in our
data set. The data set that we’ll be using will contain information based on
customer orders, so we’re going to reference some of the properties that we know
will be in our data set:



Usually, we’d preview the report to see how it would look in the Angular Report
Viewer. However, if we try to preview our report, we’ll see an error message:



This is because we never properly defined the data source or set, meaning our
data set has none of the properties we’re referencing. That’s okay, though,
because those will be set at runtime!


ADD ACTIVEREPORTSJS TO AN ANGULAR APPLICATION

Now that we have our rdlx-json file, we can go ahead and get our application set
up to use the ActiveReportsJS Angular Report Viewer.

First, we need to install the ActiveReportsJS Angular library. We have several
ways you can install ActiveReportsJS (which you can see here), but for this
article, we will be using NPM. To install the ActiveReportsJS NPM packages, run
the following command inside your Angular application:

npm i @grapecity/activereports-angular

Copy

Once the packages finish installing, we need to import the required
ActiveReportsJS CSS files and modules.

For the CSS, add the following code to the top of your application’s styles.css
file:

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";

Copy

We have two files we’re importing: ar-js-ui.css and ar-js-viewer.css. The first
is the core CSS class, while the second has CSS specifications for the Angular
Report Viewer component.

For the module, add the following code to your application’s app.module.ts file:

import { ActiveReportsModule } from '@grapecity/activereports-angular';
...
imports:[
  BrowserModule,
  ActiveReportsModule
]

Copy

Now that the CSS and module files have been imported, we can now reference the
Angular Report Viewer inside of markup. Inside of the app.component.html file,
add the following code:

<div id="viewer-host">
  <gc-activereports-viewer (init)="onViewerInit()"></gc-activereports-viewer>
</div>

Copy

Here, we’re creating a div (which we’re also giving an id; more on that in a
moment) and referencing the Report Viewer in markup. We’re also tying a method
called onViewerInit(), to the Report Viewer’s init event; this event will get
called when the Report Viewer is initialized.

Now, inside of the app.component.css file, add the following code:

#viewer-host {
    width: 100%;
    height: 100vh;
}

Copy

We’re taking advantage of that div set up in the previous step to set the size
of the Angular Report Viewer to take up the entire screen.

The final thing we’ll do in this section is set up the imports in the
app.component.ts file, as well as include providers to allow users the ability
to export the report:

import { ViewerComponent, AR_EXPORTS, PdfExportService, HtmlExportService, TabularDataExportService } from "@grapecity/activereports-angular";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    {
      provide: AR_EXPORTS,
      useClass: PdfExportService,
      multi: true,
    },
    {
      provide: AR_EXPORTS,
      useClass: HtmlExportsService,
      multi: true,
    },
    {
      provide: AR_EXPORTS,
      useClass: TabularDataExportService,
      multi: true,
    }
  ]
})

Copy

Now that that’s all set up, we can move on to the final section and bind our
report to data at application runtime.


DYNAMICALLY BIND DATA AT RUNTIME

Now that the Angular Report Viewer component is set up, we can write the code
that will bind the data to the report when our application runs. The first thing
that we’re going to do is create a reference for the report viewer component and
define the fields of our data set:

@ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
dataSetFields = [
  {
    "Name": "orderId",
    "DataField": "orderId"
  },
  {
    "Name": "customerId",
    "DataField": "customerId"
  },
  {
    "Name": "employeeId",
    "DataField": "employeeId"
  },
  {
    "Name": "orderDate",
    "DataField": "orderDate"
  },
  {
    "Name": "requiredDate",
    "DataField": "requiredDate"
  },
  {
    "Name": "shippedDate",
    "DataField": "shippedDate"
  },
  {
    "Name": "shipVia",
    "DataField": "shipVia"
  },
  {
    "Name": "freight",
    "DataField": "freight"
  },
  {
    "Name": "shipName",
    "DataField": "shipName"
  },
  {
    "Name": "shipAddress",
    "DataField": "shipAddress"
  },
  {
    "Name": "shipCity",
    "DataField": "shipCity"
  },
  {
    "Name": "shipRegion",
    "DataField": "shipRegion"
  },
  {
    "Name": "shipPostalCode",
    "DataField": "shipPostalCode"
  },
  {
    "Name": "shipCountry",
    "DataField": "shipCountry"
  },
];

Copy

The reportViewer variable will allow us to call events, methods, and properties
of our report viewer component in the TypeScript. We’ve also defined all the
fields that will show up in our data so that these fields can be bound to our
controls in the report.

Next, we’re going to write the function to load our data. Beneath where we
define the data fields, add the following loadData() method:

async loadData() {
  const headers = new Headers();
  const dataRequest = new Request(
    "https://demodata.grapecity.com/northwind/api/v1/Orders",
    {
      headers: headers,
    }
  );
  const response = await fetch(dataRequest);
  const data = await response.json();
  return data;
}

Copy

As you can see, it’s very straightforward. We set up our headers and data
requests and use these to fetch our data, which we then return.

Now that we can retrieve our data, it’s time to set up a method to load the
report. Beneath the previous method, create a method named loadReport():

async loadReport() {
  const reportResponse = await fetch("/assets/DynamicDataBinding.rdlx-json");
  const report = await reportResponse.json();
  return report;
}

Copy

Finally, we need to bind our data to the report and load the report into the
Angular report viewer. If you remember earlier, when we created the viewer
component in markup, we tied a method to the control’s initialized event; it’s
time that we implement that method:

async onViewerInit() {
  const data = await this.loadData();
  const report = await this.loadReport();
  report.DataSources[0].ConnectionProperties.ConnectString = 'jsondata=' + JSON.stringify(data);
  report.DataSets[0].fields = this.dataSetFields;
  report.DataSets[0].Query.CommandText = 'jpath=$.*';
  this.reportViewer.open(report);
}

Copy

We’re doing a few things here. First, we’re using the data that we get returned
to set the Connection String that will be used by the report’s data source.

Then, we use the data fields array that we created earlier to tell the DataSet
the different fields it will have in the data set and tell the data set that we
want to get all of the data available from our endpoint.

Finally, we call the report viewer’s open() method, passing the report as an
argument.

When we run our application, we should see the following in the report viewer:




CONCLUSION

And with that, we’ve completed our application! In this article, we’ve gone over
how you can use the ActiveReportsJS Report Designer to build a report set up for
dynamic data binding and how to bind the data to the Angular Report Viewer
component at runtime.

If you would like to see the completed application and report, you can find it
here. Happy coding!

Ready to Start Building Reports? Download ActiveReportsJS Today! 


TAGS:

 * Javascript
 * Reporting

Related Blogs

 * How to License ActiveReportsJS
 * TypeScript Tips and Tricks
 * How to Choose Between ActiveReports.NET and ActiveReportsJS

Try Our JavaScript Reporting Tool



ActiveReportsJS Resources

Learn More About ActiveReportsJS
Product Pricing
Product Documentation

Joel Parks

Technical Engagement Engineer

Please enable JavaScript to view the comments powered by Disqus.

 * 

 * © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739
   
   All product and company names herein may be trademarks of their respective
   owners.

 * Company
 * About
 * Contact
 * Media Center
 * Privacy
 * Terms
 * EULA

 * Follow Us
 * 
 * 
 * 
 * 
 * 

 * Get the Latest News
 * Stay up to date with blogs, eBooks, events, and whitepapers.
 * Join Now

Share
Tweet
Email
Share

Back to top