How to Add Dynamic Data Binding to a JavaScript Reporting App

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. Authorization
2. Path Parameters
3. Query String Parameters
4. GraphQL Query Arguments

Prerequisites

The Data Binding 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 Report Parameters is crucial for dynamic data binding. It would be helpful to learn more about it before reading further.

Ready to Try It Out? Download ActiveReportsJS Today!

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 Bearer Authentication and the Authorization HTTP Header. The following steps describe the basic technique to pass the access token of a current application user along with the report’s data request.

1. Add a report parameter. Set its Data Type to String, the Name to AccessToken (or any other name you choose), and turn on the Hidden flag.

2. Add a remote data source into a report and set its EndPoint to the root URL of the API.
3. In the DataSource dialog, add a new HTTP Header. Set its Name to Authorization and the Value to Bearer {@AccessToken}. This expression refers to the parameter’s value by its name.

4. Suppose your application uses the Report Viewer component to display the report output. In that case, you could use the Setting Parameters Values 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],
            },
        ],
    }); 

5. If your application exports a report via the API call, 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");        
}

Path Parameters

Path Parameters appear within the path of the API endpoint. For example, the end-point at https://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 of the Report Viewer component. The following steps describe the basic technique to achieve that based on the Northwind Restful API.

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

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

3. Add the “CategoryID” parameter with the following configuration.

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.

5. Add a data region, such as a Table, to visualize the Product data set.
6. When the Report Viewer component opens the report, it will ask a user to select the category and display its products.

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. Let’s say that your application uses the Northwind OData API to display the product list from a category that users should choose using the built-in parameters panel of the Report Viewer component. Following is the basic tutorial on how to achieve that.

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

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

3. Add the “CategoryID” parameter with the following configuration.

4. Add the “Products” dataset that uses the parameter added in Step 3 to set the value for the $filter query 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.

5. Add a data region, such as a Table, to visualize the Product data set.
6. When the Report Viewer component opens the report, it will ask a user to select the category and display its products.

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 to display the product list from a category that users should choose using the built-in parameters panel of the Report Viewer component. Following is the basic tutorial on how to achieve that:

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.

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.

3. Add the “CategoryID” parameter with the following configuration.

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.

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

Ready to Try It Out? Download ActiveReportsJS Today!