How to Use a React Report Viewer to Display Blood Test Results

Blood tests are one of the most common medical procedures performed in healthcare settings. They provide doctors with crucial information about a patient’s overall health, including information about organ function, blood sugar levels, cholesterol levels, and more. Blood tests are also used to diagnose diseases, monitor ongoing treatments, and track a patient’s progress.

In today’s healthcare environment, viewing blood test results online is a convenient and efficient way for patients and doctors to access the medical information they need. It makes it easy for patients to share their results with their healthcare providers as needed. It also allows patients to stay engaged in their healthcare and make informed decisions about their health.

Thankfully, ActiveReportsJS makes it easy to display the results of a blood test online through the use of customizable reports. ActiveReportsJS offers a wide range of data visualization options, including charts and graphs, which can help doctors and patients better understand the information being present, and it makes it easy to connect the reports to your data sources while allowing you to control authorization and security, keeping you HIPAA compliant.

Since ActiveReportsJS is a web-based platform, it also makes it easy for your users to access their data from anywhere with an internet connection, making it an incredibly convenient and versatile tool for healthcare professionals and patients alike.

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 Patient
• Adding ActiveReportsJS to a React Application
• Loading the Report into the React Report Viewer

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

Want to Try It Out? Download ActiveReportsJS Today!

ActiveReportsJS Standalone Designer Installation

To start building the report, we will use the ActiveReportsJS React 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 that is 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. For this report, we will use some local JSON files to populate the report. We’ve got two files: patientInfo.json and patientTestResults.json. This means we’ll need to create a data source and set for each. When complete, your data sources should look like so:

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 so:

You’ll notice that a new field, called Nested DataSets, appears in the PTR_Set that 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 Page 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; this will 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 itself 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, as well as 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())} GrapeCity, 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. When complete, your footer should look something like this:

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 properties of the data set to controls that we place 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 of the text boxes we’ve just placed, place five rows of text boxes with two textboxes 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 that we will add is a table that will display the test names and the results of the tests. Drag and drop another List control onto the report and set its data set 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 little formatting for the table. Delete the footer row, and add another header row beneath the current header row. In the second header row, merge all of 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 3rd 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 on 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 be evaluating 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 Patient

The last thing we will add to this report is any notes that the patient’s doctor has made, as well as 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 look up any comments on this patient’s file.

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

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 a React Application

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

Inside a new React project, run the following command:

npm install @grapecity/activereports-react

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

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

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

This will import ActiveReportsJS’s core CSS file, as well as the Viewer’s CSS file.

Now, we’ll need to include imports for ActiveReportsJS’s React files. At the top of the App.js file, add the following:

import { Viewer } from "@grapecity/activereports-react";
import "@grapecity/activereports/pdfexport";
import "@grapecity/activereports/htmlexport";
import "@grapecity/activereports/tabulardataexport";

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 React Viewer

Now that the React 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.js return statement with the following code:

<div id="viewer-host">
  <Viewer report={{ Uri: 'BloodTestReport.rdlx-json' }} />
</div>

By default, ActiveReportsJS will look inside the public folder of your React application; place the report, named BloodTestReport.rdlx-json, inside the public folder.

The last thing we need to do is add some custom CSS to style the container div. Inside the App.css file, add the following:

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

With everything in place, go ahead and run the following command to start the React application:

npm start

Your browser should open, and you should see the blood test report load into the Viewer:

Conclusion

And that’s it! As you can see, using the ActiveReportsJS Standalone Report Designer and React Report Viewer makes it not only easy to build a complex report, but also to display that report in a React application. If you’d like to see this project in its entirety, you can find the repository here.

Happy coding!

Want to Try It Out? Download ActiveReportsJS Today!