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 panel. This will bring up the display for our , , and : Data Data Sources Data Sets Parameters To get started, we’ll need a data source. Click the button in the Data Sources section to bring up the Data Sources window: Add From here, we can tell the report where to look for the data. We have two options regarding where the data can come from: or . 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. Remote JSON Embedded JSON For this report, we will be using Embedded JSON to load several 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. JSON 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 icon next to the data source that you want to use; this will bring up the Data Set window: Plus 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. $.* If you’re using Remote JSON, you’ll also need to provide a Uri/path value; this value gets passed from the report to the API to tell the API what data to return. Note: Once the JSON Path is in, hit the button to confirm that your data set can retrieve the requested data. Validate If everything works correctly, the field should now be populated with values from our data: Database Fields 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 tab and click the and buttons: Sections Add Header Add Footer 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 and an control into the page header. TextBox Image 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 button and then click **Load…**to open up the file explorer and select the image that you want to load: Embedded 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: You can see inside the string that we’ve included braces, and inside the braces, the expression ; this will return the current year, and the report knows to evaluate this as an expression because we’ve placed it within braces. © {Year(Now())} GrapeCity, Inc. All Rights Reserved. Year(Now()) 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 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”: Container 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 data set. Now we can reference data from this data set within the table. mark 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 button; press this, and it will add a new Page/Continuous Section to your report: Add Section 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 , , and . We’re going to use green, yellow, and red icons. To add these, add the following values to the property of the associated TextBox: Excellent Satisfactory Need Improvement Image 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 data set that we created at the beginning of the article. Expand this data set, and then drag and drop the value to the section of the wizard, and drag and drop the , , and values to the section of the wizard. Be sure to change the aggregate values for T1, T2, and T3 from to . behavior BehavioralMeasure Row Groups T1 T2 T3 Values Count None Before finishing up, click on the button in the wizard; we need to set up a filter for this table. Here, click the button to add a new filter. Set the first box to the field of the dataset, and set the filter to look for the string “Work Habit”: Filters Add Type When complete, you can hit the button and see what your Tablix looks like at this point: OK Now, like with the and 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 property of the associated TextBox: Excellent Satisfactory Need Improvement Image 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 button; we’re going to modify the filter that we’re currently using. Filters 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 data set; drag the value into the section of the wizard, and drag the , , and values into the section of the wizard. attendance Days Row Groups T1 T2 T3 Values Also, be sure to set the aggregate values for , , and to : T1 T2 T3 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 , and open this file in your of choice. index.html IDE 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 tag, add the following code: <head> <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 JavaScript file; these files give users the ability to export the report in the respective file types. HTML 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 tag, and users will be unable to export in that file type. <script> Next, we’re going to add some basic styles to the elements on the page. Inside the tag, beneath the script tags we just added, add the following code: <head> <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 tag, add the following element: <body> <div id="viewer-host"></div> We’ve given this div the ID of ; 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. viewer-host 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 . Then, we call the open method of the viewer and pass in our report name. viewer-host 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 to run the application; since we use Visual Studio Code, we use the extension to quickly spin up a static web-server. When you open the application in your browser, you should see the following: static web-server Live Server 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! Also published here.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Utilizing Custom Fonts in JavaScript Reports

Finding the Best Reporting Tools and Report Designers for .NET C# Applications

Learn More About MESCIUS' Line of Products!

Too Long; Didn't Read

Make resilience your competitive advantage

Building Student Progress Reports in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Ways to Add Security to Excel & PDF with .NET Document APIs

Utilizing Custom Fonts in JavaScript Reports

106 Stories To Learn About Education Technology

11 Absolute Most Shocking Things From College Cheating Scandal And How Blockchain Could Fix them…

126 Stories To Learn About Online Education

5 Ways to Add Security to Excel & PDF with .NET Document APIs

Utilizing Custom Fonts in JavaScript Reports

106 Stories To Learn About Education Technology

11 Absolute Most Shocking Things From College Cheating Scandal And How Blockchain Could Fix them…

126 Stories To Learn About Online Education

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps