How to Add Dynamic Data Binding to a JavaScript Reporting App
Tags: webdev, devops, javascript, tutorial
Published: 2023-11-11 00:00:48

---
canonical_url: https://developer.mescius.com/blogs/how-to-add-dynamic-data-binding-to-a-javascript-reporting-app
description: Learn how to add dynamic data binding to a JavaScript reporting app. See more from ActiveReportsJS today.
---
ActiveReportsJS is a pure client-side reporting solution with no server-side dependencies. However, there are many cases where the server-side of the application exposes the API that returns JSON data; this is used by ActiveReportsJS to visualize the data using its various reporting items.

The API could use one of many architectural styles - REST, OData, and GraphQL, to name a few - but ActiveReportsJS is designed to be backend-agnostic due to it simply sending an HTTP request to the API, receiving the JSON response and parsing the data.

However, the API requests are more often than not dynamic, not static. They may require credentials to be included or parameters provided. This article offers several solutions for implementing dynamic data queries with ActiveReportsJS, including:

1.  [<span>Authorization</span>](#authorization)
2.  [<span>Path Parameters</span>](#path)
3.  [<span>Query String Parameters</span>](#query)
4.  [<span>GraphQL Query Arguments</span>](#graphql)

## Prerequisites

The [<span>Data Binding</span>](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Databinding "https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Databinding") documentation provides a basic overview of the way that ActiveReportsJS offers to connect to the data. This article extensively uses concepts outlined in the documentation, so we recommend reading through the documentation before continuing with the article.

In addition, using [<span>Report Parameters</span>](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Parameters "https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Parameters") is crucial for dynamic data binding. It would be helpful to learn more about it before reading further.

## <a id="authorization"></a>Authorization

Let’s say that your application requires users to log in by providing their credentials. If the authentication is successful, the server returns an “access token” that should be included with each data request using [<span>Bearer Authentication</span>](https://datatracker.ietf.org/doc/html/rfc6750 "https://datatracker.ietf.org/doc/html/rfc6750") and the [Authorization HTTP Header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization"). The following steps describe the basic technique to pass the access token of a current application user along with the report’s data request.

No. 1 - Add a [<span>report parameter</span>](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Parameters#adding-a-parameter "https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Parameters#adding-a-parameter"). Set its _Data Type_ to **String**, the _Name_ to **AccessToken** (or any other name you choose), and turn on the _Hidden_ flag.

<span>![JavaScript Data Binding](//cdn.mescius.io/umb/media/poefzwl2/01-dynamic.png)</span>

No. 2 - Add a [<span>remote data source</span>](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Databinding#data-source "https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Databinding#data-source") into a report and set its _EndPoint to the root URL of the API._
No. 3 - In the DataSource dialog, add a new HTTP Header. Set its Name to **Authorization** and the Value to **Bearer {@AccessToken}**. This expression [refers](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Expressions/references#parameters "https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Expressions/references#parameters") to the parameter’s value by its name.

_<span>![JavaScript Data Binding](//cdn.mescius.io/umb/media/hmbgsj0h/02-dynamic.png)</span>_

No. 4 - Suppose your application uses the [Report Viewer component](https://developer.mescius.com/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Overview "https://developer.mescius.com/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Overview") to display the report output. In that case, you could use the [Setting Parameters Values](https://developer.mescius.com/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/LoadingReports/Parameters "https://developer.mescius.com/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/LoadingReports/Parameters") technique to pass the current user’s access token as the value of the AccessToken report’s parameter, for example:

```
    // this is a pseudo-code that retrieves the access token of a current logged in user
    // the specific way to do it depends on the architecture of your application.
    const accessToken = authService.getAccessToken(); 

    // pass the obtained accessToken as the report's parameter value
    viewer.open("roducts.rdlx-json", {
            ReportParams: [
                {
                    Name: "AccessToken",
                    Value: [accessToken],
                },
            ],
        }); 
```

No. 5 - If your application exports a report [via the API call](https://developer.mescius.com/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Export#export-reports-without-loading-them-in-the-viewer "https://developer.mescius.com/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Export#export-reports-without-loading-them-in-the-viewer"), then the code can pass the parameter’s value as shown below:

```
    async function exportReport(reportUrl) {
      // this is a pseudo-code that retrieves the access token of a current logged in user
      // the specific way to do it depends on the architecture of your application.
      const accessToken = authService.getAccessToken();

      var reportDef = await fetch(reportUrl).then((response) =>
        response.json()
      );
      const report = new GC.ActiveReports.Core.PageReport();
      await report.load(reportDef);
      report.parameters["AccessToken"].values = [accessToken];
      const doc = await report.run();
      const result = await GC.ActiveReports.PdfExport.exportDocument(doc, {});
      result.download("access-token.pdf");        
    }
```

## **<a id="path"></a>Path Parameters**

Path Parameters appear within the path of the API endpoint. For example, the end-point at **demodata.mescius.io/northwind/api/v1/Categories/{id}/Products** has the {id} path parameter that specifies for which category the product list should be retrieved. Let’s say that your application should allow users to choose this product's category using the [built-in parameters panel](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Viewer-Interface#parameters-panel "https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Viewer-Interface#parameters-panel") of the Report Viewer component. The following steps describe the basic technique to achieve that based on the [Northwind Restful API](https://demodata.grapecity.com/swagger/index.html?urls.primaryName=Restful%20NorthWind "https://demodata.grapecity.com/swagger/index.html?urls.primaryName=Restful%20NorthWind").

No. 1 - Add a data source into the report with the following configuration.

![JavaScript Data Binding](//cdn.mescius.io/umb/media/ufxdcknd/03-dynamic.png)

No. 2 - Add the “**Categories”** dataset that retrieves the list of all categories.

![JavaScript Data Binding](//cdn.mescius.io/umb/media/3v2jbavq/blob.png)

No. 3 - Add the “**CategoryID”** parameter with the following configuration.

![JavaScript Data Binding](//cdn.mescius.io/umb/media/m0cgmj2g/blob.png)

No. 4 - Add the “Products” dataset that uses the parameter added in **Step 3** for the path parameter. When you click the “Validate” button, the data set dialog will ask for the parameter’s value to obtain the field list. You can enter 1.

![JavaScript Data Binding](//cdn.mescius.io/umb/media/51saxvyt/blob.png)

No. 5 - Add a [data region](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions "https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions"), such as a [Table](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table "https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table"), to visualize the Product data set.
No. 6 - When the Report Viewer component opens the report, it will ask a user to select the category and display its products.

![Report Viewer](//cdn.mescius.io/umb/media/vmmga5rv/blob.png?rmode=max&width=757&height=407)

## **<a id="query"></a>Query String Parameters**

Query string parameters appear after the “?” symbol in the data request URL. For example, an OData API usually provides the ability to sort, filter, expand, slice and select certain fields using the [system query options](https://www.odata.org/getting-started/basic-tutorial/#queryData "https://www.odata.org/getting-started/basic-tutorial/#queryData"). Let’s say that your application uses the [Northwind OData API](https://demodata.grapecity.com/swagger/index.html?urls.primaryName=OData%20NorthWind "https://demodata.grapecity.com/swagger/index.html?urls.primaryName=OData%20NorthWind") to display the product list from a category that users should choose using the [built-in parameters panel](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Viewer-Interface#parameters-panel "https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Viewer-Interface#parameters-panel") of the Report Viewer component. Following is the basic tutorial on how to achieve that.

No. 1 - Add a data source into the report with the following configuration.

![JavaScript Data Binding](//cdn.mescius.io/umb/media/p2hkoyan/blob.png)

No. 2 - Add the “**Categories”** dataset that retrieves the list of all categories.

![JavaScript Data Binding](//cdn.mescius.io/umb/media/trjjt2nf/blob.png)

No. 3 - Add the “**CategoryID”** parameter with the following configuration.

![JavaScript Data Binding](//cdn.mescius.io/umb/media/bpejnzdz/blob.png)

No. 4 - Add the “Products” dataset that uses the parameter added in **Step 3** to set the value for the [$filter query parameter](https://www.odata.org/getting-started/basic-tutorial/#filter "https://www.odata.org/getting-started/basic-tutorial/#filter"). When you click the “Validate” button, the data set dialog will ask for the parameter’s value to obtain the field list. You can enter 1.

![JavaScript Data Binding](//cdn.mescius.io/umb/media/jmng2wzx/blob.png)

No. 5 - Add a [data region](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions "https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions"), such as a [Table](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table "https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table"), to visualize the Product data set.
No. 6 - When the Report Viewer component opens the report, it will ask a user to select the category and display its products.

![Report Viewer](//cdn.mescius.io/umb/media/vmmga5rv/blob.png?rmode=max&width=767&height=412)

## **<a id="graphql"></a>GraphQL Query Arguments**

With GraphQL API, the query arguments are usually passed within the POST request body. Let’s say that your application uses the [Northwind GraphQL API](https://demodata.grapecity.com/northwind/ui/graphql "https://demodata.grapecity.com/northwind/ui/graphql") to display the product list from a category that users should choose using the [built-in parameters panel](https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Viewer-Interface#parameters-panel "https://developer.mescius.com/activereportsjs/docs/ReportAuthorGuide/Report-Viewer-Interface#parameters-panel") of the Report Viewer component. Following is the basic tutorial on how to achieve that:

No. 1 - Add a data source into the report with the following configuration. Note that the Content-Type HTTP header is **application/json,** which is required for GraphQL queries.

![JavaScript Data Binding](//cdn.mescius.io/umb/media/v3uoeqdv/blob.png)

No. 2 - Add the “**Categories”** dataset that retrieves the list of all categories. Note that the method is “POST” and the request body uses the JSON format for the query.

![JavaScript Data Binding](//cdn.mescius.io/umb/media/o5abfb03/blob.png)

No. 3 - Add the “**CategoryID”** parameter with the following configuration.

![JavaScript Data Binding](//cdn.mescius.io/umb/media/qldcllo2/blob.png)

No. 4 - Add the “Products” dataset that uses the parameter added in **Step 3** to pass the “id” parameter into the query so that it returns the specific category only. When you click the “Validate” button, the data set dialog will ask for the parameter’s value to obtain the field list. You can enter 1.

![JavaScript Data Binding](//cdn.mescius.io/umb/media/tf2p1te0/blob.png)

No. 5 - Drag and drop the “Products” dataset into a report body.
No. 6 - When the Report Viewer component opens the report, it will ask a user to select the category and display its products.