How to Use an Angular Report Viewer to Display Blood Test Results

Blood tests are one of the most frequently performed procedures in modern healthcare. They offer vital insights into a patient’s overall well-being, providing details on organ health, blood sugar, cholesterol levels, and much more. Physicians rely on these tests not only to diagnose conditions but also to monitor treatment effectiveness and track patient progress over time.

In today’s digital-first healthcare landscape, having access to blood test results online is a major convenience for both patients and providers. It enables seamless information sharing with medical teams and encourages patients to take an active role in their health decisions by giving them timely access to their data.

With ActiveReportsJS, presenting blood test results online becomes simple and effective. The platform allows for fully customizable reports and offers a variety of data visualization tools, such as charts and graphs. These visual aids help make complex medical data more understandable for patients and clinicians alike. Plus, it’s easy to connect reports to your existing data sources, and built-in access controls support HIPAA compliance, ensuring patient data stays secure.

Because ActiveReportsJS is web-based, users can view their results virtually anywhere with an internet connection. That flexibility makes it a powerful solution for healthcare organizations looking to provide a better, more connected patient experience.

In this article, we’ll be going over how you can use ActiveReportsJS’s Report Designer to build a report to display blood test results, and we’ll show you how you can implement ActiveReportsJS’s React Report Viewer to allow your users to access their data via reports. We’ll be covering the following:

• ActiveReportsJS Standalone Designer Installation

• Adding Data Sources and Data Sets to Your Report

• Adding Headers and Footers

• Creating the Patient and Specimen Information Lists

• Creating the Tests Table List

• Displaying Doctor Notes for Patients

• Adding ActiveReportsJS to an Angular Application

• Loading the Report into the Angular Report Viewer

Want to Test It Out For Yourself? Download ActiveReportsJS Today!

ActiveReportsJS Standalone Designer Installation

To start building the report, we will use the ActiveReportsJS Angular Report Designer; more specifically, we will use the standalone designer. This is a desktop application that you can use to build your reports. ActiveReportsJS also offers a web-based designer, but we will use the standalone designer for this article's purpose.

Head to our Installation page and download the file corresponding to your operating system. Open the downloaded file, and inside the designer folder, run the ActiveReportsJS-Designer installer. Once complete, it will launch the ActiveReportsJS Standalone Designer.

Adding Data Sources and Data Sets to Your Report

Next, we will need to add some data to our report. ActiveReportsJS Designer allows you to set data sources (where your report looks to retrieve the data) and data sets (the data retrieved from your data source).

To add a new data source, click on the Data Panel button and then click the Add button under Data Source:

This will bring up the Data Source Window. We will use some local JSON files to populate this report. We’ve got two files: patientInfo.json and patientTestResults.json. This means we’ll need to create a data source and a set for each. When complete, your data sources should look like this:

Next, we’ll need to use these sources to create data sets. To create a data set from a data source, simply click the Plus button next to the data source to bring up the data set window. When complete, your data sets should look like this:

You’ll notice that a new field, called Nested DataSets, appears in the PTR_Set we’ve created; the nested dataset allows us to easily access any nested data within any of our already created data sets. We’ll use this nested data to retrieve data for our blood test report.

Now that we’ve established our data connections to the report, we can start building the report itself.

Adding Headers and Footers

Next, we will add a header and footer to the report. Click on the Section tab in the toolbar and click the Add Header and Add Footer buttons to add header and footer sections to your report page.

In the Page Header, drag and drop a textbox control and an image control from the control panel. Place the textbox on the left-hand side of the header and the image on the opposite side. For the textbox, we will set the text to “Blood Test Results”. We’re also going to set the following properties via the property window:

We will upload our logo and set the Image Sizing property to Fit for the image.

Finally, click on the header and set the background color to #e6e6e6. When complete, the page header should look something like this:

Now we’ll go ahead and implement the footer. For the footer, we’re going to display the current year and some contact numbers that can be used to reach out. Go ahead and drop three text boxes and two image controls in the footer. For the text boxes, place the following text inside of them:

• © {Year(Now())} MESCIUS USA, inc. All Rights Reserved.

• 1800.858.2739

• Pittsburgh, PA:412.681.4343

You may be asking, what does {Year(Now())} in the first text box do? ActiveReportsJS allows you to include expressions in the controls, which will evaluate a value. Year(Now()) is simply an expression that returns the current year, and we wrap that in braces so that ActiveReportsJS knows to evaluate the inner text as an expression.

Next, place the two image controls to the left of the text boxes containing phone numbers; we will embed a phone icon in these image controls. 

Clicking Preview in the toolbar at the top will show your report using the newly created header and footer:

Creating the Patient and Specimen Information Lists

Next, we will create two lists: one to contain information on the patient and another to contain information on the specimen collected from the patient.

To start, drag a List control from the control panel onto your report:

Then, in the properties panel, set the data set as the PI_Set:

This makes it simple to connect the properties of the data set to controls placed within the List control.

Next, place two textboxes at the top of the list, with “Patient Information” in the first and “Specimen Information” in the second.

Then, beneath each text box we’ve just placed, place five rows of text boxes with two text boxes in each row. Inside these text boxes, place the following:

Patient Information List:

Specimen Information List:

Then, we will apply a few style changes to the text boxes. When completed, it should look something like this:

When we preview the report, we’ll see the following:

Creating the Tests Table List

The following control will be added: a table that displays the test names and results. Drag and drop another List control onto the report and set its data to BloodReport_Result.

Then, inside of the List that we’ve just added, drag and drop a Table control. In the properties panel, set the Table’s data set to BloodReport_Result.

Next, we need to do a minor formatting of the table. Delete the footer row, and add another header row beneath the current header row. In the second header row, merge all the cells so that a single cell makes up the entire row. Now we can add values to the cells:

You’ll notice that for the third cell in the Detail Row, we’re putting an image control. You can simply drag and drop an image into this cell, and the table will populate it with an image control.

Now, click the cell to bring up the image properties in the properties panel. Expand the Image property, and you’ll see that there are several property values that we can set here. There are only two that we’ll need to modify: Source and Value. Change the Source property to Database, and set the Value property to the following:

{IconSet("GrayArrows", IIF(Convert.ToDouble(Result) >= Convert.ToDouble(ReferenceInterval.Substring(ReferenceInterval.IndexOf("-") + 2)) AND Convert.ToDouble(ReferenceInterval.Substring(ReferenceInterval.IndexOf("-") + 2)) <> 59, "True", "False"), false, false, false, IIF(Convert.ToDouble(Result) <= Convert.ToDouble(ReferenceInterval.Substring(0, ReferenceInterval.IndexOf(" - "))), "True", "False"))}

Setting the Source to Database will give us access to use some of the built-in icons of ActiveReportsJS; in this case, we’ll evaluate the Reference Interval against the Result, and based on that value, we’ll either display an icon of an arrow pointing up, an arrow pointing down, or no image at all.

When finished, your List and Table should look something like this:

And hitting Preview will show the following in the report:

Displaying Doctor Notes for Patients

The last thing we will add to this report is any notes that the patient’s doctor has made and a small error message at the bottom of the page.

Drag and drop a text box onto the report and place it beneath the Table List, and add the following value: {Lookup(PatientID, PatientID, Comments, "PI_Set")}. This will use the PatientID to review any comments on this patient’s file.

And beneath that, place another text box. It, along with its contents, should look like this:

When you preview the report, you should see the following:

And the entirety of the report in the preview should look as follows:

Adding ActiveReportsJS to an Angular Application

Now that we’ve created and saved our blood test report, it’s time to add the ActiveReportsJS Angular Report Viewer to our application to allow users to view our report.

Inside a new Angular project, run the following command:

npm install @mescius/activereportsjs-angular

This will install the latest version of the ActiveReportsJS Angular modules.

Next, we’ll need to include ActiveReportsJS’s CSS files. Open up the styles.css file and add the following imports:

@import "@mescius/activereportsjs/styles/ar-js-ui.css";
@import "@mescius/activereportsjs/styles/ar-js-viewer.css";

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

This will import ActiveReportsJS’s core CSS file and the Viewer’s CSS file.

Now, we’ll need to include imports for ActiveReportsJS’s Angular files. Inside of the app.component.ts file, add the following imports:

import {ActiveReportsModule} from '@mescius/activereportsjs-angular';
...
imports: [ActiveReportsModule]

This will load in the ActiveReportsJS Angular module, allowing us to reference the control in the component’s markup and TypeScript.

Before moving on, we also need to include imports for the Report Viewer component and our report export options. Add the following imports to the markup, and add the following providers:

import {
  ViewerComponent,
  AR_EXPORTS,
  HtmlExportService
  PdfExportService
  TabularDataExportService
} from '@mescius/activereportsjs-angular';
...
providers: [
  {
    provide: AR_EXPORTS,
    useClass: PdfExportService,
    multi: true
  },
  {
    provide: AR_EXPORTS,
    useClass: HtmlExportService,
    multi: true
  },
  {
    provide: AR_EXPORTS,
    useClass: TabularDataExportService,
    multi: true
  },
]

This imports the ActiveReportsJS Viewer and the PDFExport, HTMLExport, and TabularDataExport modules. These modules allow users to export the report in PDF, HTML, and CSV formats.

Loading the Report into the Angular Report Viewer

Now that the Angular application is set up, we need to add the Viewer to our application and have it load the report that we’ve created. Replace the code within the app.component.html file with the following code:

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

This will define the Report Viewer in markup, as well as bind a method called onViewerInit() to the component’s init event, which gets fired when the control initializes.

Back in the app.component.ts file, add the following inside of the component:

export class AppComponent {
  @ViewChild(ViewerComponent, {static: false}) reportViewer: ViewerComponent;
  onViewerInit() {
    this.reportViewer.open("BloodTestReport.rdlx-json")
  }
}

By default, the ActiveReportsJS Report Viewer will look inside of your application’s public folder, so take the report that we created previously and drop it in that folder.

With everything ready, you can run the following command to start the application:

ng serve --open

Your browser should open, and you should see the Blood Test Report load into the Report Viewer:

Conclusion

And that’s it! By combining the flexibility and responsiveness of Angular with the robust reporting capabilities of ActiveReportsJS, developers can create powerful, user-friendly applications that present medical data clearly and securely. This tutorial demonstrated how to build a comprehensive blood test report using the Standalone Report Designer and seamlessly integrate it into an Angular application with the Angular Report Viewer.

The result is a web-based reporting solution that enables patients and healthcare providers to access and review detailed test results from any device, promoting transparency, patient engagement, and better health outcomes. With customizable visuals, secure data access, and scalable deployment, this integration is an ideal foundation for modern, digital-first healthcare reporting systems.

Happy coding!

Want to Test It Out For Yourself? Download ActiveReportsJS Today!