Building Student Progress Reports in JavaScript

The ability to view student progress reports online offers numerous benefits for both parents and educators. Online access provides parents and students with real-time insights into the student’s academic performance, allowing them to stay informed and engaged in their education. They can easily track progress, monitor attendance, view grades, and identify areas where additional support may be needed.

For educators, online progress reports streamline the reporting process, making generating and sharing comprehensive assessments of student performance easier. It enables teachers to communicate more effectively with parents, fostering collaboration and enabling targeted interventions. Overall, online access to student progress reports enhances communication, promotes accountability, and supports a proactive approach to student success.

Thankfully, ActiveReportsJS makes it easy for educators to build and customize these progress reports and make it easy to view them in web applications. This article will show you how to use the ActiveReportsJS Report Designer to create a progress report and use the Report Viewer to display your report in a JavaScript application.

Content Overview

• Connecting Data to the Report

• Creating the Progress Report Header and Footer

• Displaying Student Information

• Building the GPA Summary and Academic Progress Table

• Creating the Behavioral and Attitude Progress Tablix

• Creating the Attendance Tablix

• Adding ActiveReportsJS to a JavaScript Application

  
  

If you want to follow along with the article, you can find the completed report and application here.

Connecting Data to the Report

For the purposes of this article, we’ll be using the standalone designer included in the ActiveReportsJS download. After installing and launching the designer, we’ll be able to see our empty report. Before we get started adding controls to the report, we’ll want to be sure to link up the data we’ll be using to the report.

In the top-right of the designer, select the Data panel. This will bring up the display for our Data Sources, Data Sets, and Parameters:

To get started, we’ll need a data source. Click the Add button in the Data Sources section to bring up the Data Sources window:

From here, we can tell the report where to look for the data. We have two options regarding where the data can come from: Remote JSON or Embedded JSON. Remote JSON requires that you provide the URL to an API endpoint, while Embedded JSON allows you to select a JSON file to use to load data directly into the report.

For this report, we will be using Embedded JSON to load several JSON files; we’ve got files for student information, marks, behavior, and attendance, so we will need to create a data source for each of these files.

When complete, it should look like this:

Now that we’ve set up our four data sources, it’s time to create a data set for each. To create a data set for a data source, simply click the Plus icon next to the data source that you want to use; this will bring up the Data Set window:

Since we’re using embedded JSON, all we need to provide is a JSON Path; this tells the report what data we want to retrieve from the JSON. In this case, we want to retrieve all of the JSON, so we use the path $.*. This tells the report to get all of the data available.

Once the JSON Path is in, hit the Validate button to confirm that your data set can retrieve the requested data.

If everything works correctly, the Database Fields field should now be populated with values from our data:

Once we set up a data set for each data source, our data panel should look like this:

And that’s it! Now we’ve got data connected to our report that we can reference in controls. In the next section, we’ll start building out the report's different sections, beginning with the header and footer.

Creating the Progress Report Header and Footer

We can start creating the report elements now that the data has been set up. To start, we will create a header and footer for the pages in our report. In the toolbar, select the Sections tab and click the Add Header and Add Footer buttons:

This will add header and footer sections to the report. We want to add two controls from the Control Toolbox in the header section. Click the hamburger button in the top-left of the designer to expand the toolbox, and then drag a TextBox and an Image control into the page header.

Inside the TextBox, we will set its value to “Student Progress Report”.

Then, we will embed an image into the report for the Image control. Select the Image control, and then expand the Image dropdown in the Appearance section of its properties. To embed an image, click the Embedded button and then click **Load…**to open up the file explorer and select the image that you want to load:

Now that our image is loaded and our text is set, we’re just going to do a bit of resizing and styling through the Properties panel. When complete, our header section looks like so:

Now it's time to create the footer. In our footer, we will want to include 3 TextBoxes: two with contact information and one to display the current year. Next to each box containing contact information, we also want to include an icon of a phone to signify that these are phone numbers.

Drag three TextBox controls and two Image controls into the footer area of the page. We will follow the same steps outlined above for setting the images.

For two of the TextBox controls, we’re just going to be putting in some phone numbers that can be used to contact the report owner, but for the third, we will use an expression so that it will always display the current year.

Inside of this third TextBox, place this value: © {Year(Now())} GrapeCity, Inc. All Rights Reserved. You can see inside the string that we’ve included braces, and inside the braces, the expression Year(Now()); this will return the current year, and the report knows to evaluate this as an expression because we’ve placed it within braces.

After doing a little bit of styling, the footer should look like this:

We can preview the report to see how the expression that we’ve created evaluates:

Now that we’ve created the header and footer, they’ll be displayed on each report page. In the next section, we’ll add some of the data we’ve loaded by displaying some basic information about the student.

Displaying Student Information

Now it’s time to start incorporating some of the data the report is loading. First, drag a TextBox and a Container control onto the report body. Expand both so that they extend most of the page’s width, and inside of the TextBox control, include the text “Student Information”:

We’ll be using this Container to hold all the information associated with the student.

Now, we will place TextBoxes inside the Container; these will be used for both labels and to hold information from the data sets.

Set the container up to match the following:

Now, inside each of the empty TextBoxes, we’ll want to include expressions that retrieve data from our student information data set.

Include the following text in the associated TextBoxes:

When complete, you should be able to preview the report and see the following:

Building the GPA Summary and Academic Progress Table

Next, we will display information relating to the student’s grades.

First, we will create the GPA Summary section; like in the previous section, drag a TextBox and Container control onto the report. Expand both so that they extend most of the page’s width, and inside of the TextBox control, include the text “GPA Summary”:

Inside of this Container, we want to display the overall GPA of the student, as well as their percentile.

Drag four TextBoxes into the container, setting them up as such:

Next, we’re going to need to set up some more expressions inside of the empty TextBoxes:

The Overall GPA expression will calculate the percentile they fall into and then, based on that, will provide an associated numeric GPA value. The Percentile expression simply calculates their grade based on a percentage.

When completed, you should be able to see the following when previewing the report:

Now that we’ve created the summary, it’s time to show a breakdown of the student’s progress by subject. Beneath the GPA Summary section, drag a TextBox and a Table control onto the report body. Inside the TextBox, include the text “Academic Progress”, while inside the table, include the following column headers:

• Subject
• Teacher
• Trimester 1
• Trimester 2
• Trimester 3

When completed, it should look something like this:

The next thing that we need to do is associate the correct data set with the table. Select the Table control, and then inside the Properties panel, set the Data Set Name dropdown to use the mark data set. Now we can reference data from this data set within the table.

Fill out the rest of the table as such:

After a little additional styling, the Table control now looks as such:

When we preview our report, the table should look like so:

Adding the Behavioral and Attitude Progress Tablix

Now that users can view their academic progress, it’s time for us to add a section showing the teacher’s marks on the behavioral and attitude progress of the student. Before we do this, we will add a new section to our report. At the bottom of the report designer, you will see an Add Section button; press this, and it will add a new Page/Continuous Section to your report:

Now, beneath the header of this new section, add a TextBox control, a Container control, and three TextBox controls inside of the Container control:

As you can see, we’ve filled out these TextBoxes with our own text. Before we add the Tablix controls, we want to make one more modification.

In these tables, we want to use icons to display where the student falls in terms of Excellent, Satisfactory, and Need Improvement. We’re going to use green, yellow, and red icons. To add these, add the following values to the Image property of the associated TextBox:

Now if we preview the report, we should see the following:

Now that the Tablix container is set up, it’s time to add the Tablix controls to display the behavioral and attitude progress data. Drag a Tablix control into this container; you’ll see the Tablix Wizard pop up in the designer window:

The Tablix Wizard is an extremely powerful tool for creating a Tablix (or pivot table as it is also known) control, which can display data in more dynamic ways than a standard table.

We’re going to be using data from the behavior data set that we created at the beginning of the article. Expand this data set, and then drag and drop the BehavioralMeasure value to the Row Groups section of the wizard, and drag and drop the T1, T2, and T3 values to the Values section of the wizard. Be sure to change the aggregate values for T1, T2, and T3 from Count to None.

Before finishing up, click on the Filters button in the wizard; we need to set up a filter for this table. Here, click the Add button to add a new filter. Set the first box to the Type field of the dataset, and set the filter to look for the string “Work Habit”:

When complete, you can hit the OK button and see what your Tablix looks like at this point:

Now, like with the Excellent Satisfactory and Need Improvement TextBoxes, we’re going to update the data cells for the T1, T2, and T3 columns to display the icons instead of text values. For each of these data cells, remove the text value and update the Image property of the associated TextBox:

This will make it so that the Tablix control will place the correct traffic light icon in the cell based on the cell value. After some style updates, our first Tablix should look like so:

When we preview the report, the Tablix should look as such:

Now, we need to create the second Tablix control to display attitude information. The good thing is that this Tablix is almost identical to the one we just created. Copy and paste the first Tablix that we created, and then place this in the container just beneath the other Tablix. Then, update the first header cell from “Work Habits” to “Adherence to Code of Conduct”.

Finally, select the second Tablix control and click the gear icon in the top-right of the control; this will re-open the Tablix wizard. Click the Filters button; we’re going to modify the filter that we’re currently using.

Update the filter text value from “Work Habits” to “Classroom Conduct”. Now, the Behavioral and Attitude Progress section should look like so:

When we preview the report, the Behavioral and Attitude Progress section should look as follows:

Adding the Attendance Tablix

The final section that we’re going to add to our report will show the student’s attendance. Drag a TextBox control and a Tablix control onto the report, and place them beneath the Behavioral and Attitude Progress section.

Inside the Tablix wizard, we’re going to be using the attendance data set; drag the Days value into the Row Groups section of the wizard, and drag the T1, T2, and T3 values into the Values section of the wizard.

Also, be sure to set the aggregate values for T1, T2, and T3 to Sum:

Now, the Attendance section should look as such:

And when we preview the report, it should look as follows:

Now, with the report complete, when we preview the report, the pages should look like so:

Adding ActiveReportsJS to a JavaScript Application

Now that we’ve got our student progress report created, it’s time to add the ActiveReportsJS Report Viewer to a JavaScript application so that we can view the report in the browser. Create a new file called index.html, and open this file in your IDE of choice.

We’re going to add the following code to the file:

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Student Progress Report</title>
    <meta name="description" content="ARJS Report viewer" />
    <meta name="author" content="GrapeCity" />
  </head>
  <body></body>
</html>

Now that the HTML file is set up, it’s time to add ActiveReportsJS to the file. For this, we’re going to use the CDN to load the required files.

Inside the <head> tag, add the following code:

<link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" />
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>

The first two lines of code load the required CSS files: the core CSS file and the viewer CSS file. Then, we’re loading in the core JavaScript file and the viewer JavaScript file. Finally, we’re loading a PDF, tabular data, and HTML JavaScript file; these files give users the ability to export the report in the respective file types.

If you do not want to allow users to export the report in a specific format, all you need to do is exclude the associated <script> tag, and users will be unable to export in that file type.

Next, we’re going to add some basic styles to the elements on the page. Inside the <head> tag, beneath the script tags we just added, add the following code:

<style>
    body {
        margin: 0;
    }
    #viewer-host {
      width: 100%;
      height: 100vh;
    }
</style>

This will remove the margins from the body element, and will also set the width and height of the element with the ID of viewer-host.

Now, inside of the <body> tag, add the following element:

<div id="viewer-host"></div>

We’ve given this div the ID of viewer-host; this will mean that it will receive the CSS styles that we set previously, but it also will allow us to tie the JavaScript Report Viewer to the div.

Finally, beneath the div, add the following code:

<script>
    var viewer = new ActiveReports.Viewer("#viewer-host");
    viewer.open("StudentProgressReport.rdlx-json");
</script>

This JavaScript will create a new ActiveReportsJS Viewer, associating it with the element with the ID viewer-host. Then, we call the open method of the viewer and pass in our report name.

The last thing that you need to be sure of is that you place the report in the same folder as your index.html file; if you don’t, be sure to point to the correct location of your report.

The only thing left is to run the application. You can use any static web-server to run the application; since we use Visual Studio Code, we use the Live Server extension to quickly spin up a static web-server. When you open the application in your browser, you should see the following:

Conclusion

And that’s all there is to it! As you can see, ActiveReportsJS makes it easy to build customized progress reports, allowing teachers and students alike to track the student’s progress throughout the school year.

If you’d like to download the report and application built in this article, you can find the repository here.

Happy coding!