When running a business these days, it’s important to have access to your order, inventory, and financial data, regardless of location. That’s why it’s essential to have on-screen reports that are both flexible and interactive, as well as adaptable to a variety of screen resolutions. Doing so lets you stay on top of your business’s performance and make informed decisions whenever and wherever you need to. ActiveReportsJS allows you to build responsive web applications with highly interactive reporting capabilities that work in any browser and support desktop and mobile devices. In this article, we’ll show you how to build a responsive Node.js inventory management system, allowing users to track order reports using ActiveReportsJS. We’ll be covering the following topics: Designing the Report Title Defining Data Access in Node.js Using Calculated Fields Adding a Chart Control Adding a Table Control Defining Sub-Tables Adding Drill-Down Functionality Adding Sorting Columns to Tables Creating the Node.js Invoice Application If you’d like to follow along with the completed report and application, you can find the repository . here Building a Web-Based Sales Report For our scenario, we have a client named ACME Inc. who has contracted us to build them a sales report. The request comes with a mockup of the report, which looks like this: To create enterprise-level reports like the one above, GrapeCity offers the ActiveReportsJS Designer. This intuitive tool helps you configure your report to fetch data and render it using visual elements like tables, bar charts, pie charts, and more. The ActiveReportsJS Designer stores report definitions in a special JSON format and saves them in files with the extension. .rdlx-json Designing the Report Title To create a new report, in the Designer, open the menu n the Designer toolbar and select the report option: File Continuous Page Layout Now that we have a new report, clicking the hamburger button on the left will expand the control panel. From here, you can drag and drop controls onto your report canvas to include them in the report: For our report, we will have a container at the top that holds the logo image and a label. Drag and drop a container control from the control panel onto the report canvas; then drag and drop an image and textbox control into the container control on the report canvas. To link an image to the image control, you can either pull the image from an external source, such as a URL or database or embed the image from a local file. Our image will be the ACME Inc. logo. For the textbox, you can customize the font, size, and color as you see fit. For the title text, we’ll set this to . Monthly Orders When complete, your title should look something like this: Defining Data Access in Node.js The ActiveReportsJS Designer manages data connections through two types of entities: data sources and data sets. A data source works as a connection to external data storage, such as a URI or JSON file or a JSON document that can be embedded in the report. A data set is an intermediate element that fetches data from the data source and binds it to fields in the report data model. You can also define calculated fields, which transform the source data using expressions. The data set fields can then be used by the report controls. Our inventory invoice software will access data through an external API located at an HTTP service, returning results in JSON format. The report will show a variety of order information based on “live” data from that service. To define access to customer data in your report, start by selecting the tab, and click the button in the “Data Sources” section: Data Sources Add This will bring up the window: New Data Source This window names the data source, sets the data provider, and adds any additional HTTP header or parameters required. When adding your data provider, you can choose between remote JSON or embedding your JSON into the report via a local file. We’ll load our data for this inventory invoice application from a remote source. When everything is added, click the button to save your data source. Save A data source is a simple connection configuration; no request has been made yet. Note: Now that we have created a data source, we need to create a data set that uses that source to retrieve the data. To create a data set, click on the button that appears next to our data source: Plus This will bring up the window: New Data Set We usually need to set two properties here: the and the . The Uri/path tells ActiveReportsJS where to look for the JSON file once reaching the API endpoint, and the Json Path is used to tell our Node.js invoice application what part of the JSON we want to grab. Uri/path JSON Path For the Uri/path, we’ll use to return data on our customers. In our case, we’ll want to grab all entries, so we’ll pass as the JSON path. /Customers $.* Finally, we need to validate the data source so that ActiveReportsJS can confirm that it can retrieve the data. You’ll know that your data source was validated if you see that the array is populated with values: Database Fields We will need another data source for our application, which we’ll use to retrieve data on orders placed through the node.js invoice app. Your second data source should look like so: We’ll need two more data sets: one based on the NWAPI data source, using as the Uri/path, and the other based on the NWOData source, using as the Uri/path. For the data set, also set the Json path to . /Products /Orders Orders $.value[*] When set up, the data panel should look like so: Using Calculated Fields Occasionally, you’ll need to transform one or more source fields into a new calculated field to be used in the report. ActiveReportsJS offers an expression language with rich built-in functions to meet this need. In this example, let’s transform the OrderDate field into a “month/year” format. You must add a custom field to the list of automatically bound database fields to achieve this. Edit the data set, and expand the section; this is where we can add our new calculated field. Name the field and set the value as : Orders Calculated Fields MonthYear, {DateTime.Parse(OrderDate).ToString("MM/yyyy")} Create a new data set named based on the NWOData source; set the Uri/path to and the Json path to . OrderDetails /OrderDetails $.value[*] Note that the OrderDetails data set does not include a field for a total value per item. This value is likely to be required more than once in your report. Therefore, you’ll have to calculate this value every time it’s needed or create a new calculated field. The latter option is way more efficient. Expand the section of the OrderDetails data set, name the field and set the value as . CalculatedFields Subtotal, {Round(100 * (UnitPrice - UnitPrice * Discount) * Quantity) / 100} Adding a Chart Control Now that we’ve set up several data sources, it's time to incorporate them into the report; to do so, we will add a chart. Dragging and dropping a chart control from the control panel onto the report will bring up the chart wizard: Ensure the data set is set to use our set, and click the button. OrderDetails Next Now we can set our data and category fields. For “Data Values”, add a new field. Set the name to and the aggregate to . Then, for “Data Categories”, set the field to . It should look like so: {Subtotal} Sum {Lookup(OrderId, OrderId, MonthYear, “Orders”)} Click and then click . The last thing to do, before we view the chart, is to make some final changes to properties across various elements of the chart. Next, Finish To modify elements of the chart, you only need to make sure you’re viewing the properties window instead of the data window, and then click on an element of the chart. The properties window will update to show all of the properties of the currently-selected element. Define the chart properties as follows: When complete, your report should look like so: Clicking will show us the report with data being loaded: Preview Adding a Table Control In addition to the chart, we want to allow users to view more data in our Node.js invoice app. Let’s create a tabular view of the month-by-month order volume. Drag and drop a table control from the control panel to the report beneath the chart: By default, an ActiveReportsJS table is created with three columns and three rows. The top row serves as the header row, the middle row is our details row and holds our data, and the bottom row is the footer row. Report authors can resize the table, add or remove rows and columns, define multiple headers and footers, and so on. Now, select the table, navigate to the properties panel, and define the properties as follows: Then remove the header and footer rows of the table, as these aren’t needed. This is done by right-clicking a cell in the row that you want to delete, selecting the option, and clicking : Row Delete Row Now, merge the cells for the detail row. This is done by selecting the cells that you want to merge, right-clicking one of the selected cells, selecting the option from the menu, and clicking : Cells Merge Cells Now select the newly merged cell, set its text box name to , and set its value to : txtMonth {MonthName(Month(OrderDate))}/{Year(OrderDate)} Finally, you have to define the table grouping. This can be done by selecting the cell and selecting from the popup menu. <Details Group> Set the first level of the group with the formula and the second level as : {Year(OrderDate)} {Month(OrderDate)} The new table displays the first level of data in the tabular section: Now, we’ll start adding more levels of data. Create a new row beneath our current row, remove the header and footer rows, merge the detail row, and then drag and drop another table control into the new large cell. Define the new table’s properties as follows: Now select the newly merged cell, set its text box name to , and set its value to the . Once this is set up, preview the report to see the results: txtOrderId Order ID: {OrderId} Notice that the table is at the second level in your report; it details the orders placed within a particular month. tableOrders Defining Sub-Tables Now that we’re displaying orders by month, it’s time to add an order details section for each of the orders that come through our inventory invoice application. Add a new detail row beneath the detail row, merge the cells, and put another table within that detail row. This time, instead of removing the header and footer rows, remove the detail and footer row, leaving the header row. OrderId Next, instead of merging all three cells into one, merge the center and right cells into one and leave the left cell as its own cell. Define the left cell formula as For the merged cell, use the properties panel to set the to and its property to , and set the merged cell formula as : Total: Cell Alignment Left format Currency {SUM(Subtotal)} Select the table in the Explorer, and expand the property. Click and add a new filter criterion with the following fields: tableOrderTotal Filters Add Item, As you can see, the new tableOrderTotals table is based on the OrderDetails data set. The total value is obtained by filtering the order details by the OrderId of the tableOrder row, and by summing up the Subtotal field values. Clicking will display the updated table: Preview Finally, we’ll create a table representing order items for our invoices. Create a new detail row in the tableOrders table, then create a new table inside the new detail row called . Configure the table as follows: tableOrderDetails When complete, the table should look like so: Clicking will show the new table: Preview Before we move on, we will do a little styling to improve the table's look. Here’s what the finished version looks like: Adding Drill-Down Functionality Now, let’s add drill-down functionality to the report, allowing us to keep the and tables collapsed until the user expands them. tableOrders tableOrderDetails Select the tableOrders table, and change the and properties as follows: Hidden Toggle Item Select the tableOrderDetails table, and make it collapsible too: Now, we can expand and collapse the detail levels by clicking the +/- symbols: Next, let’s add some more details to the reports of our Node.js invoice application. Add four new rows above the existing header row in the table. The top and bottom of these four rows will serve as a buffer, and the middle two rows will hold the data we want to display. tableOrderDetails In the second and third rows that were added, leave the far-left cell of each row by themselves, and merge the rest of the cells for each row. Then, fill out the rows as follows: Click and you can see the customer’s name and order date added to the invoice: Preview, Adding Sorting Columns to Table The last thing we’ll add to the report is the ability to sort the order details' columns. Select each header cell, and fill out the Sort Expression field under the User Sort section with the following formulas: Click and you can now see the sort icons next to the column headers; sort the order items by Quantity: Preview, Sort the order by Total Price: Creating the Node.JS Invoice Application Now with the report defined, we can create our inventory invoice application. This application will need a responsive web display that looks good on both desktop and mobile devices. ActiveReportsJS offers this capability by default. The sample application will use Node.js, a JavaScript runtime environment, to execute the web app on the server side. To get started, create a new folder called and open it in your preferred IDE. Then, in the command line, run: InventoryInvoice, npm init This will run you through setting up your file, which will be used to build your application. Once your file has been generated, run the following two commands: package.json npm install express
npm install @grapecity/activereports This will install Express, a framework for Node.js, and ActiveReports, which we’ll use to display the invoices. Now that we have Express installed, we need to put it to use. Create a new file in the folder named . This file will use Express to serve our Node.js inventory invoice application. InventoryInvoice index.js Inside the index.js file, add the following code: const express = require('express'); //import Express.js module
const app = express();
const path = require('path'); 
app.use(express.static(path.join(__dirname)));

app.listen(3000, () => {
    console.log(`Example app listening on port 3000`)
}) Now, its time for a quick explanation of what we’re doing here: The first two lines of code include Express in our server and give us a variable to use to reference Express methods and properties. The third line creates a variable that leads to the relative path of the folder, and the fourth line tells Express that we want to use this path as the static path of our application. Lines six through eight use Express to start the application; here, we’re telling it to run on port 3000, and when it starts running, we log a message to the terminal. And that’s Express at a very basic level! Now that we have a server that we can start to launch the inventory invoice software, it's time to create a page to serve the user. Create a new file in the folder, and name it . Once created, insert the following code: InventoryInvoice index.html <html>
   <head>
    <meta charset="utf-8" />
    <title>ActiveReportsJS Viewer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-ui.css" />
    <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" />
    <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
    <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>
    <style>
        #arjs-viewer {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body onload="load()">
    <div id="arjs-viewer"></div>
    <script>
        function load() {
            const viewer = new ActiveReports.Viewer('#arjs-viewer');
            viewer.open('MonthlyOrders.rdlx-json');
        }
    </script>
</body>
</html> There are a few things to go over here. First, we’re including four files in our HTML file; , , , and . The CSS files are the core CSS file for ActiveReportsJS and the CSS file used to style the viewer. ar-js-ui.css ar-js-viewer.css ar-js-core.js ar-js-viewer.js The JS files are the same; a core JS file and a JS file for the viewer. Second, for the HTML, we’re only using a single line to create the ActiveReportsJS Viewer. All we need is a single div with an ID that we can use to associate the viewer with the div. Third, in JavaScript, once the page loads, we’re creating a new ActiveReports.Viewer control, associating it with our div, and then telling it to open our report. Finally, we’re including a small amount of CSS so that the viewer takes up the entirety of the screen. Once this is done, all you need to do is move your report into the folder, and run the following command to start your Node.js inventory invoice app: InventoryInvoice node index.js Navigate to localhost:3000, and you should see and be able to interact with the report that you’ve created: The ActiveReportsJS Viewer component is also responsive; it is rendered appropriately on various devices in a wide range of screen sizes. You can use the developer tools available in your web browser to quickly emulate the various mobile devices, screen sizes, and page orientations: Final Notes And with that, we’re done! This article provided a hands-on approach to creating a monthly inventory invoice report using GrapeCity’s ActiveReportsJS Designer. We went over how to aggregate information to create a sales chart grouped by months, as well as an interactive, tabular report with drill-down functionality that consolidates sales by month and order ID. If you would like to see the completed application and report, you can find it . Happy coding! here

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

Building .NET Document API Layouts Using Flat Element Hierarchy

Learn More About MESCIUS' Line of Products!

Too Long; Didn't Read

Make resilience your competitive advantage

Building a Node.js Inventory and an Invoice Billing Application: A Guide

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

Accelerating Accounts Receivable with Automated Technologies

e-Invoicing Automation: Key Concepts For Doing It Right

Invoicing Tech Can Boost Brand Appeal

Procure-to-pay: Innovation in P2P 2.0 Infrastructure

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

Accelerating Accounts Receivable with Automated Technologies

e-Invoicing Automation: Key Concepts For Doing It Right

Invoicing Tech Can Boost Brand Appeal

Procure-to-pay: Innovation in P2P 2.0 Infrastructure

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps