{"id":3229,"date":"2020-07-24T14:05:33","date_gmt":"2020-07-24T14:05:33","guid":{"rendered":"https:\/\/contentlab.com\/build-a-responsive-web-based-inventory-and-invoice-app-with-activereportsjs-and-node-js\/"},"modified":"2021-11-18T18:45:31","modified_gmt":"2021-11-18T18:45:31","slug":"build-a-responsive-web-based-inventory-and-invoice-app-with-activereportsjs-and-node-js","status":"publish","type":"post","link":"https:\/\/contentlab.com\/build-a-responsive-web-based-inventory-and-invoice-app-with-activereportsjs-and-node-js\/","title":{"rendered":"Build a Responsive Web-Based Inventory and Invoice App with ActiveReportsJS and Node.js"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3229\" class=\"elementor elementor-3229\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-34d23f82 elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"34d23f82\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-63c2f541\" data-id=\"63c2f541\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4f8a433 elementor-widget elementor-widget-text-editor\" data-id=\"4f8a433\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>To run a business today, you need to have access to your order, inventory, and financial data wherever you find yourself working. To support that, on-screen reports must be not only flexible and interactive but also available in a variety of screen resolutions.<\/p><p>With\u00a0<a href=\"https:\/\/www.grapecity.com\/activereportsjs\/docs\/GettingStarted\/QuickStart\/index\">ActiveReportsJS<\/a>, you can build responsive web applications with highly interactive reporting capabilities that work in any browser, on desktops, and mobile devices.<\/p><p>In this article, we&#8217;ll show you how to build a responsive app for order tracking reports with Node.js and ActiveReportsJS. This app will let you drill-down from tables or charts of month-to-month order volumes to individual order and product details.<\/p><h3 id=\"building-a-web-based-sales-report\">Building a Web-Based Sales Report<\/h3><p>Let\u2019s say a client named ACME Inc. contracted you to build a sales report. The client\u2019s request comes with an attachment, which is a mockup of the real report, and it looks like this:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/01-1.png\" alt=\"Node.js Web-Based Sales Report Output\" \/><\/p><p>To create enterprise-level reports like the one above, GrapeCity offers\u00a0<a href=\"https:\/\/www.grapecity.com\/activereportsjs\/docs\/DeveloperGuide\/ActiveReportsJSDesigner\/Overview\">ActiveReportsJS Designer<\/a>, an intuitive tool that helps you configure your report to fetch data and render it using multiple visual element types, including tables, bar charts, pie charts, and others.<\/p><p>ActiveReportsJS Designer stores report definitions in a special JSON format and saves them in files with the\u00a0<span style=\"font-weight: bolder;\">.rdlx-json<\/span>\u00a0extension.<\/p><p><a href=\"https:\/\/www.grapecity.com\/activereportsjs\/docs\/DeveloperGuide\/ActiveReportsJSDesigner\/Installation\">Install ActiveReportsJS<\/a>\u00a0with the Windows, macOS, or Linux installer.<\/p><h3 id=\"design-the-report-title\">Design the Report Title<\/h3><p>To create a new report, in the Designer, open the\u00a0<span style=\"font-weight: bolder;\">File<\/span>\u00a0menu. Select the\u00a0<span style=\"font-weight: bolder;\">RDL<\/span>\u00a0option (standard language for data-driven reports), then save the new report as\u00a0<span style=\"font-weight: bolder;\">MonthlyOrders.rdlx-json<\/span>.<\/p><p>The report title consists of a container that holds a logo image and a label. Notice the control toolbox on the left-hand side.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/02.png\" alt=\"ActiveReportsJS Toolbox - Report Controls\" \/><\/p><p>You can drag report controls from the toolbox and drop them onto the report canvas. To create a title with an image and a heading, you&#8217;ll need a container to hold these controls. Containers are especially useful for grouping controls that you want to move together.<\/p><p>Drag a container control and drop it onto the top of the report.<\/p><p>Drag an image control and drop it onto the container. The image can be pulled from an external source, such as a URL or a database, or be embedded.<\/p><p>Add a textbox to the container to display the title text. Customize the title font, size, and color as you see fit.<\/p><p>The title should look like this:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/03.png\" alt=\"ActiveReportsJS Report Header\" \/><\/p><p>Click the Explorer icon on the toolbar.<\/p><p>From the control tree that opens, select the Report node. The properties panel opens at the right-hand side. On the properties tab, change the report margin sizes to 1 cm.<\/p><p>Create a title for the report.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-999ba67 elementor-widget elementor-widget-code-highlight\" data-id=\"999ba67\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>Container  \r\n    Background Color: #f1f1f1  \r\n    Items:  \r\n        Image  \r\n            Source: #551e5f  \r\n            #551e5f: FitProportional  \r\n        Textbox  \r\n            Value: \"Monthly Orders\"<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e91aa65 elementor-widget elementor-widget-text-editor\" data-id=\"e91aa65\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>You can use Explorer to select controls and view their properties:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/04.png\" alt=\"ActiveReportsJS Designer Explorer\" \/><\/p><h3 id=\"define-data-access-in-node-js\">Define Data Access in Node.js<\/h3><p>ActiveReportsJS Designer manages data through two types of entities: data sources and data sets.<\/p><p>A data source works as a connection to an external data storage, like a URI or a JSON file, or a JSON document that can be embedded in the report itself.<\/p><p>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 use expressions to transform the source data. The data set fields then can be used by the report components.<\/p><p>Your report will access data through an external API located at an HTTP service, which will return results in JSON format. The report will show a variety of order information based on &#8220;live&#8221; data from that service.<\/p><p>To define access to customer data in your report, start by selecting the\u00a0<span style=\"font-weight: bolder;\">Data Sources<\/span>\u00a0tab.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/05.png\" alt=\"Data Sources Tab\" \/><\/p><p>On the tab, click\u00a0<span style=\"font-weight: bolder;\">Add<\/span>.<\/p><p>In the\u00a0<span style=\"font-weight: bolder;\">New Data Source<\/span>\u00a0dialog that opens, enter \u201cCustomers\u201d in the\u00a0<span style=\"font-weight: bolder;\">Name<\/span>\u00a0field.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/06.png\" alt=\"Add New Data Source\" \/><\/p><p>To define the Customers data source, in the\u00a0<span style=\"font-weight: bolder;\">Content URI<\/span>\u00a0field, enter the URI of some HTTP Rest service endpoint that returns a collection of customers in JSON format:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d1ea7a elementor-widget elementor-widget-code-highlight\" data-id=\"3d1ea7a\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>https:\/\/[some-api-service]\/Customers<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fefdc14 elementor-widget elementor-widget-text-editor\" data-id=\"fefdc14\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: bolder;\">Note:<\/span>\u00a0that this data source is just a connection configuration, and no request has been made yet.<\/p><p>Click the plus sign to add a new data set using the Customers data source connection:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/07.png\" alt=\"Data Source Tab - Add Data Set\" \/><\/p><p>The\u00a0<span style=\"font-weight: bolder;\">Edit Data Set<\/span>\u00a0dialog opens. Name the new data set \u201cCustomers.\u201d<br \/><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/08.png\" alt=\"Edit Data Set Dialog\" \/><\/p><p>Modify the\u00a0<span style=\"font-weight: bolder;\">Query<\/span>\u00a0field value to read:<\/p><p><code>$.[*]<\/code><\/p><p>This field is a JsonPath expression required to infer the report fields from the JSON-formatted data coming from the URI you have defined.<\/p><p>Click the\u00a0<span style=\"font-weight: bolder;\">Validate<\/span>\u00a0button and expand the\u00a0<span style=\"font-weight: bolder;\">Bound Fields<\/span>\u00a0section to see the report fields created from the data set:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/09.png\" alt=\"Data Set Bound Fields\" \/><\/p><p>Note that those fields were created automatically from the data source\u2019s JSON result.<\/p><p>Now create a new Products data source and the corresponding data set. Use the process described for the Customers data access above. In the\u00a0<span style=\"font-weight: bolder;\">Content URI<\/span>\u00a0field, enter the URI of an endpoint that returns a collection of products, for example:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54091be elementor-widget elementor-widget-code-highlight\" data-id=\"54091be\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>https:\/\/[some-api-service]\/Products<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-53b31f2 elementor-widget elementor-widget-text-editor\" data-id=\"53b31f2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Create the Orders data source and the corresponding data set using the above process with the following field values.<\/p><p>For the\u00a0<span style=\"font-weight: bolder;\">Content URI<\/span>, use the URL of some HTTP Rest service endpoint that returns a collection of orders along with their order items:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8fc41c7 elementor-widget elementor-widget-code-highlight\" data-id=\"8fc41c7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>https:\/\/[some-api-service]\/Orders<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b893e2a elementor-widget elementor-widget-text-editor\" data-id=\"b893e2a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>For the\u00a0<span style=\"font-weight: bolder;\">Query<\/span>, use:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f7c7e5 elementor-widget elementor-widget-code-highlight\" data-id=\"3f7c7e5\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>$.value[*]<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c760727 elementor-widget elementor-widget-text-editor\" data-id=\"c760727\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3 id=\"using-calculated-fields\">Using Calculated Fields<\/h3><p>Occasionally, you need to transform one or more source fields into a new calculated field to be used in the report. ActiveReportsJS offers an\u00a0<a href=\"https:\/\/www.grapecity.com\/activereportsjs\/docs\/DeveloperGuide\/ActiveReportsJSDesigner\/Expressions\">expression language<\/a>\u00a0with a rich set of built-in functions to meet this need.<\/p><p>In this example, let\u2019s transform the orderDate field into a \u201cmonth\/year\u201d format. To achieve that, you need to add custom field to the list of automatically bound fields:<\/p><p>Expand the\u00a0<span style=\"font-weight: bolder;\">Calculated Fields<\/span>\u00a0section.<\/p><p>Add the MonthYear field.<\/p><p>Enter the following formula as a value of the MonthYear field:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d624713 elementor-widget elementor-widget-code-highlight\" data-id=\"d624713\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>=DateTime.Parse(Fields!orderDate.Value).ToString(\"MM\/yyyy\")<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f93e7a elementor-widget elementor-widget-text-editor\" data-id=\"2f93e7a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/10-1.png\" alt=\"Data Set - Calculated Fields (MonthYear)\" \/><\/p><p>Create a new OrderDetails data set based on the existing Orders data source, but with the\u00a0<span style=\"font-weight: bolder;\">Query<\/span>\u00a0field value:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-adb1b8d elementor-widget elementor-widget-code-highlight\" data-id=\"adb1b8d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>$.value.[*].orderDetails[*]<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-317d443 elementor-widget elementor-widget-text-editor\" data-id=\"317d443\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>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\u2019ll either have to calculate this value every time it\u2019s needed, or create a new calculated field. The latter option is way more efficient.<\/p><p>Expand the\u00a0<span style=\"font-weight: bolder;\">Calculated Fields<\/span>\u00a0section.<\/p><p>Add the Subtotal field.<\/p><p>Enter the following formula as the Subtotal field\u2019s value:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fb0822d elementor-widget elementor-widget-code-highlight\" data-id=\"fb0822d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>=Round(100 * (Fields!unitPrice.Value - (Fields!unitPrice.Value*Fields!discount.Value))*Fields!quantity.Value) \/ 100.0<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0443550 elementor-widget elementor-widget-text-editor\" data-id=\"0443550\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>\u00a0<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/11.png\" alt=\"Data Set - Calculated Fields (Subtotal)\" \/><\/p><h3>Adding a Chart<\/h3><p>To graphically present the retrieved sales data to the user:<\/p><p>Add a Chart Control at the top of the report, right below the title:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/12.png\" alt=\"Monthly Orders Report with Chart\" \/><\/p><p>Modify the chart to use data coming from the OrderDetails data set. Once inserted, the chart will appear on the Explorer tab as a tree of elements that are easy to configure:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/13.png\" alt=\"Report Explorer - Chart Elements\" \/><\/p><p>Define the chart properties as follows:<\/p><table style=\"background-color: #ffffff; width: 646.75px;\" border=\"1\" width=\"576\" cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td valign=\"top\" width=\"288\"><span style=\"font-weight: bolder;\">Element<\/span><\/td><td valign=\"top\" width=\"288\"><span style=\"font-weight: bolder;\">Relevant Values<\/span><\/td><\/tr><tr><td valign=\"top\" width=\"288\">Chart<\/td><td valign=\"top\" width=\"288\"><span style=\"font-weight: bolder;\">Data Set Name:<\/span>\u00a0&#8220;OrderDetails&#8221;<\/td><\/tr><tr><td valign=\"top\" width=\"288\">Header<\/td><td valign=\"top\" width=\"288\"><span style=\"font-weight: bolder;\">Title:<\/span>\u00a0\u201cSales Volume by Month\u201d<\/td><\/tr><tr><td valign=\"top\" width=\"288\">X Axis<\/td><td valign=\"top\" width=\"288\"><span style=\"font-weight: bolder;\">Title:<\/span>\u00a0&#8220;Month&#8221;<\/td><\/tr><tr><td valign=\"top\" width=\"288\">Y Axis<\/td><td valign=\"top\" width=\"288\"><p><span style=\"font-weight: bolder;\">Title:<\/span>\u00a0&#8220;Volume ($)&#8221;<\/p><p><span style=\"font-weight: bolder;\">Major Interval:<\/span>\u00a020,000<\/p><p><span style=\"font-weight: bolder;\">Min:<\/span>\u00a00<\/p><p><span style=\"font-weight: bolder;\">Max:<\/span>\u00a0150,000<\/p><\/td><\/tr><tr><td valign=\"top\" width=\"288\">Plot<\/td><td valign=\"top\" width=\"288\"><p><span style=\"font-weight: bolder;\">Field Value:<\/span>\u00a0&#8220;=Fields!Subtotal.Value&#8221;<\/p><p><span style=\"font-weight: bolder;\">Aggregate:<\/span>\u00a0Sum<\/p><p><span style=\"font-weight: bolder;\">Category:<\/span>\u00a0&#8220;=Lookup(Fields!orderId.Value, Fields!orderId.Value, Fields!MonthYear.Value, &#8220;Orders&#8221;)&#8221;<\/p><p><span style=\"font-weight: bolder;\">Category Sort Expression:<\/span>\u00a0&#8220;=Fields!orderDate.Value&#8221;<\/p><p><span style=\"font-weight: bolder;\">Label Text Template:<\/span>\u00a0&#8220;=Value Field Value&#8221;<\/p><p><span style=\"font-weight: bolder;\">Tooltip Template:<\/span>\u00a0&#8220;=Value Field Value&#8221;<\/p><\/td><\/tr><\/tbody><\/table><p>The chart consists of a set of bars representing the sales volume per month. The Y axis values are calculated based on the Subtotal field of the OrderDetails data set. The X axis runs from January to December, month by month. The chart categories are sorted by the value of the orderDate field.<\/p><p>Click\u00a0<span style=\"font-weight: bolder;\">Preview<\/span>\u00a0to display the chart with the OrderDetails data.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/14.png\" alt=\"Monthly Orders Report - Sales Volume By Month\" \/><\/p><h3>Add a Table<\/h3><p>In addition to the chart, let\u2019s create a tabular view of the month-by-month order volumes. Let\u2019s position the new table right below the chart.<\/p><p>By default, the new table is created with three columns and three rows. You have the tools to resize the table, add or remove rows and columns, as well as define multiple headers, footer rows, and so on.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/15.png\" alt=\"Table - Details Row\" \/><\/p><p>Now configure the table as follows.<\/p><table style=\"background-color: #ffffff; width: 646.75px;\" border=\"1\" width=\"624\" cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Element<\/span><\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Value<\/span><\/td><\/tr><tr><td valign=\"top\" width=\"312\">Table<\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Name:<\/span>\u00a0&#8220;tableMonths&#8221;<br \/><span style=\"font-weight: bolder;\">Data Set Name:<\/span>\u00a0&#8220;Orders&#8221;<\/td><\/tr><\/tbody><\/table><p>Then remove the header and footer rows, as they aren\u2019t needed:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/16.png\" alt=\"Table - Delete Row\" \/><\/p><p>Then merge cells for the details row.<br \/><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/17.png\" alt=\"Table - Merge Cells\" \/><\/p><p>Name the merged cells textbox to txtMonth and set its value to an expression =MonthName(Month(Fields!orderDate.Value)) &amp; \u201c\/\u201d &amp; Year(Fields!orderDate.Value).<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/18.png\" alt=\"TextBox Table Cell - txtMonth\" \/><\/p><p>Finally, you have to define the table grouping.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/19.png\" alt=\"Table Grouping\" \/><\/p><p>Set the first level of the group with the formula =Year(Fields!orderDate.Value) and the second level as =Month(Fields!orderDate.Value).<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/20-1.png\" alt=\"Table Group Details\" \/><\/p><p>The new table displays the first level of data in the tabular section:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/21.png\" alt=\"Preview of Table with Grouping\" \/><\/p><p>To add another level of data, modify tableMonths and add a new detail row.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/22.png\" alt=\"Add Detail Row to Table\" \/><\/p><p>Increase the height of the newly created row, then create a new table named tableOrders inside that row.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/23.png\" alt=\"Add Table to New Detail Row\" \/><\/p><p>Configure the new table as follows:<\/p><table style=\"background-color: #ffffff; width: 646.75px;\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Element<\/span><\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Value<\/span><\/td><\/tr><tr><td valign=\"top\" width=\"312\">Table<\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Name:<\/span>\u00a0&#8220;tableOrders&#8221;<br \/><span style=\"font-weight: bolder;\">Data Set Name:<\/span>\u00a0&#8220;Orders&#8221;<\/td><\/tr><\/tbody><\/table><p>Then remove the header and footer rows, as they aren\u2019t needed:<\/p><p>Next, merge cells 1, 2, and 3 for the details row, and set the merged cell value to an expression =&#8221;Order ID: &#8221; &amp; [orderId].<\/p><p>Click\u00a0<span style=\"font-weight: bolder;\">Preview<\/span>\u00a0to see the results.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/24.png\" alt=\"Preview of Table Grouping for Monthly Orders\" \/><\/p><p>Notice that tableOrders is at the second level in your report: it details the orders placed within a particular month.<\/p><h3>More Details<\/h3><p>Now display the order totals. To show the total amount for each order, create a new table named tableOrderTotal inside tableOrders:<\/p><p>Create a new detail row below the current tableOrders row and insert the new table there.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/25.png\" alt=\"Table for Orders\" \/><\/p><p>Configure the new table as follows:<\/p><table style=\"background-color: #ffffff; width: 646.75px;\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Element<\/span><\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Value<\/span><\/td><\/tr><tr><td valign=\"top\" width=\"312\">Table<\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Name:<\/span>\u00a0&#8220;tableOrderTotal&#8221;<br \/><span style=\"font-weight: bolder;\">Data Set Name:<\/span>\u00a0&#8220;OrderDetails&#8221;<\/td><\/tr><\/tbody><\/table><p>Again, remove the Details Row and the Footer Row, as they\u2019re not needed.<\/p><p>Then merge only the center and right cells for the details row. Define the left cell formula as \u201cTotal:\u201d. Configure the merged cell alignment to Left, and its format to Currency. Then define the merged cell formula as =SUM(Fields!Subtotal.Value).<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/26.png\" alt=\"Table Header (Total)\" \/><\/p><p>Now, select the tableOrderTotal table in the Explorer and expand the Filters property:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/27.png\" alt=\"Table Filters Property\" \/><\/p><p>Click Add Item and add new filter criteria with the following fields:<\/p><ol style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Filter Expression:<\/span>\u00a0\u201c=Fields!orderId.Value\u201d<\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Operator:<\/span>\u00a0\u201cEqual\u201d<\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Value:<\/span>\u00a0\u201c=Fields!orderId.Value\u201d<br \/><br \/><\/li><\/ol><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/28.png\" alt=\"Table Filter Properties\" \/><\/p><p>As we 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 order ID of the tableOrder row, and by summing up the Subtotal field values.<\/p><p>Click\u00a0<span style=\"font-weight: bolder;\">Preview<\/span>\u00a0and check out the results.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/29.png\" alt=\"Table Preview of Grouped Monthly Orders and Totals\" \/><\/p><p>Finally, let\u2019s create a table that will represent order items.<\/p><p>Create a new detail row in tableOrders, then create the tableOrderDetails table inside that row. Configure the table as follows:<\/p><table style=\"background-color: #ffffff; width: 646.75px;\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Element<\/span><\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Value<\/span><\/td><\/tr><tr><td valign=\"top\" width=\"312\">Table<\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Name:<\/span>\u00a0&#8220;tableOrderDetails&#8221;<br \/><span style=\"font-weight: bolder;\">Data Set Name:<\/span>\u00a0&#8220;OrderDetails&#8221;<\/td><\/tr><tr><td valign=\"top\" width=\"312\">Header Row<\/td><td valign=\"top\" width=\"312\"><p><span style=\"font-weight: bolder;\">Column labels:<\/span><\/p><p>1. &#8220;Item&#8221;<br \/>2. &#8220;Qty&#8221;<br \/>3. &#8220;Unit Price&#8221;<br \/>4. &#8220;Discount&#8221;<br \/>5. &#8220;Discounted Price&#8221;<br \/>6. &#8220;Total Price&#8221;<\/p><\/td><\/tr><tr><td valign=\"top\" width=\"312\">Details Row<\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Cell 1 formula:<\/span>\u00a0&#8220;=Lookup([productId], [productId], [productName], &#8220;Products&#8221;)&#8221;<br \/><span style=\"font-weight: bolder;\">Cell 2 formula:<\/span>\u00a0&#8220;=[quantity]&#8221;<br \/><span style=\"font-weight: bolder;\">Cell 3 formula:<\/span>\u00a0&#8220;=[unitPrice]&#8221;<br \/><span style=\"font-weight: bolder;\">Cell 4 formula:<\/span>\u00a0&#8220;=[discount]&#8221;<br \/><span style=\"font-weight: bolder;\">Cell 5 formula:<\/span>\u00a0&#8220;=[unitPrice] &#8211; ([unitPrice]<em>[discount])&#8221;<br \/><span style=\"font-weight: bolder;\">Cell 6 formula:<\/span>\u00a0&#8220;=[Subtotal]&#8221;<\/em><\/td><\/tr><tr><td valign=\"top\" width=\"312\">Footer Row<\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Cell 1 formula:<\/span>\u00a0&#8220;TOTAL INVOICE VALUE:&#8221;<br \/><span style=\"font-weight: bolder;\">Cell 2 formula:<\/span>\u00a0&#8220;=SUM(([unitPrice] &#8211; ([unitPrice][discount]))*[quantity])&#8221;<\/td><\/tr><tr><td valign=\"top\" width=\"312\">Filter<\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Filter Expression:<\/span>\u00a0&#8220;=Fields!orderId.Value&#8221;<br \/><span style=\"font-weight: bolder;\">Operator:<\/span>\u00a0Equal<br \/><span style=\"font-weight: bolder;\">Value:<\/span>\u00a0&#8220;=Fields!orderId.Value&#8221;<\/td><\/tr><\/tbody><\/table><p>This table will have 6 columns. Add new columns, then define their header row labels as follows:<\/p><ol style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">&#8220;Item&#8221;<\/li><li style=\"font-size: 16px;\">&#8220;Qty&#8221;<\/li><li style=\"font-size: 16px;\">&#8220;Unit Price&#8221;<\/li><li style=\"font-size: 16px;\">&#8220;Discount&#8221;<\/li><li style=\"font-size: 16px;\">&#8220;Discounted Price&#8221;<\/li><li style=\"font-size: 16px;\">&#8220;Total Price&#8221;<br \/><br \/><\/li><\/ol><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/30.png\" alt=\"Table Header Row - Column Headers\" \/><\/p><p>For the row details, configure the cell formulas so that they display the order items:<\/p><ol style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Cell 1 formula:<\/span>\u00a0&#8220;=Lookup([productId], [productId], [productName], &#8220;Products&#8221;)&#8221;<\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Cell 2 formula:<\/span>\u00a0&#8220;=[quantity]&#8221;<\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Cell 3 formula:<\/span>\u00a0&#8220;=[unitPrice]&#8221;<\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Cell 4 formula:<\/span>\u00a0&#8220;=[discount]&#8221;<\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Cell 5 formula:<\/span>\u00a0&#8220;=[unitPrice] &#8211; ([unitPrice]*[discount])&#8221;<\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Cell 6 formula:<\/span>\u00a0&#8220;=[Subtotal]&#8221;<\/li><\/ol><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/31.png\" alt=\"Table Details Row - cell values\" \/><\/p><p>Now, configure the footer row so that it represents the order summary. Merge the two right-most cells, then define their formulas as follows:<\/p><ol style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Cell 1 formula:<\/span>\u00a0&#8220;TOTAL INVOICE VALUE:&#8221;<\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Cell 2 formula:<\/span>\u00a0&#8220;=SUM(([unitPrice] &#8211; ([unitPrice]<em>[discount]))<\/em>[quantity])&#8221;<br \/><br \/><\/li><\/ol><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/32.png\" alt=\"Table Footer Row - Total Invoice Value\" \/><\/p><p>Finally, you must create a relationship between the OrderDetails table and the data coming from the Orders table. Select the tableOrderDetails table in the Explorer and expand the Filters property:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/33.png\" alt=\"Filters for TableOrderDetails\" \/><\/p><p>Click Add Item and add new filter criteria with the following fields:<\/p><ol style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Filter Expression:<\/span>\u00a0&#8220;=Fields!orderId.Value&#8221;<\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Operator:<\/span>\u00a0&#8220;Equal&#8221;<\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Value:<\/span>\u00a0&#8220;=Fields!orderId.Value&#8221;<br \/><br \/><\/li><\/ol><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/34.png\" alt=\"Filter Properties for TableOrderDetails\" \/><\/p><p>Click\u00a0<span style=\"font-weight: bolder;\">Preview<\/span>\u00a0to see the result.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/35.png\" alt=\"Preview Table with Groupd Monthly Orders, Order Details and Totals\" \/><\/p><h3>Drill-Down<\/h3><p>Now let\u2019s add a drill-down feature, which will keep tableOrders and tableOrderDetails collapsed until the user expands them:<\/p><p>Rename the following labels:<\/p><table style=\"background-color: #ffffff; width: 646.75px;\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Field (as shown in the report)<\/span><\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">New Name<\/span><\/td><\/tr><tr><td valign=\"top\" width=\"312\">\u201cJuly 1996\u201d<\/td><td valign=\"top\" width=\"312\">txtMonth<\/td><\/tr><tr><td valign=\"top\" width=\"312\">\u201cOrder ID: 10248\u201d<\/td><td valign=\"top\" width=\"312\">txtOrderId<\/td><\/tr><\/tbody><\/table><p>Select tableOrders, and change the\u00a0<span style=\"font-weight: bolder;\">Hidden<\/span>\u00a0and\u00a0<span style=\"font-weight: bolder;\">Toggle Item<\/span>\u00a0properties as follows:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/36.png\" alt=\"Visibility Properties of tableOrders Table\" \/><\/p><p>Select tableOrderDetails and make it collapsible, too:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/37.png\" alt=\"Visibility Properties of tableOrderDetails Table\" \/><\/p><p>Now we can expand\/collapse detail levels by clicking the \u201c+\/-\u201d symbol:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/38.png\" alt=\"Preview of Collapsed tableOrders\" \/><\/p><p>We can first expand the month:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/39.png\" alt=\"Preview of Expanded Month Table\" \/><\/p><p>We can then expand the order:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/40.png\" alt=\"Preview of Expanded Month and Order Table\" \/><\/p><p>Next, let\u2019s add some more details to the order information:<\/p><p>Add four new rows above the existing header row, then enter the following formulas in the new cells:<\/p><ol style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Contact Name:<\/span>\u00a0&#8220;=Lookup([customerId], [customerID], [contactName], &#8220;Customers&#8221;).ToUpper()&#8221;<\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Order Date:<\/span>\u00a0&#8220;=DateTime.Parse(Fields!orderDate.Value).ToString(&#8220;MM\/dd\/yyyy&#8221;)&#8221;<br \/><br \/><\/li><\/ol><p>Notice that we have used the Lookup function in several places. Similar to Lookup in Excel spreadsheets, this function allows you to create a simple query that navigates from one data set to another based on a relationship between two fields, and then retrieves the value of a third field.<\/p><p>Select a cell inside the header row of tableOrderDetails and insert four new rows above the header.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/41.png\" alt=\"Add Rows to tableOrderDetails Table\" \/><\/p><p>Create two new fields to contain the customer name and order date. For the customer name, we\u2019ll use the Lookup function twice to navigate from the OrderDetails to the Customer data set, using the Orders data set as a springboard:<\/p><ol style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Customer:<\/span>\u00a0&#8220;=Lookup(Lookup(Fields!orderId.Value, Fields!orderId.Value, Fields!customerId.Value, &#8220;Orders&#8221;), Fields!customerId.Value, Fields!companyName.Value, &#8220;Customers&#8221;)&#8221;<br \/><br \/><\/li><\/ol><p>For the order date, we\u2019ll navigate from the OrderDetails data set to the Orders data set:<\/p><ol style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Order Date:<\/span>\u00a0&#8220;=DateTime.Parse(Lookup(Fields!orderId.Value, Fields!orderId.Value, Fields!orderDate.Value, &#8220;Orders&#8221;)).ToString(&#8220;dd\/MM\/yyyy&#8221;)&#8221;<br \/><br \/><\/li><\/ol><p>Click\u00a0<span style=\"font-weight: bolder;\">Preview<\/span>\u00a0to see the customer name and order date:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/42.png\" alt=\"Preview of tableOrderDetails with Additional Detail Rows\" \/><\/p><h3>Sorting Columns<\/h3><p>Finally, let\u2019s make the order details\u2019 columns sortable.<\/p><p>Select each header cell and fill out the Sort Expression field under the User Sort section with the following formulas:<\/p><table style=\"background-color: #ffffff; width: 646.75px;\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Column Header<\/span><\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Sort Expression<\/span><\/td><\/tr><tr><td valign=\"top\" width=\"312\">Item<\/td><td valign=\"top\" width=\"312\">&#8220;=Lookup(Fields!productId.Value, Fields!productId.Value, Fields!productName.Value, &#8220;Products&#8221;)&#8221;<\/td><\/tr><tr><td valign=\"top\" width=\"312\">Qty<\/td><td valign=\"top\" width=\"312\">&#8220;=Fields!quantity.Value&#8221;<\/td><\/tr><tr><td valign=\"top\" width=\"312\">Unit Price<\/td><td valign=\"top\" width=\"312\">&#8220;=Fields!unitPrice.Value&#8221;<\/td><\/tr><tr><td valign=\"top\" width=\"312\">Discount<\/td><td valign=\"top\" width=\"312\">&#8220;=Fields!discount.Value&#8221;<\/td><\/tr><tr><td valign=\"top\" width=\"312\">Discounted Price<\/td><td valign=\"top\" width=\"312\">&#8220;=Fields!unitPrice.Value &#8211; (Fields!unitPrice.Value*Fields!discount.Value)&#8221;<\/td><\/tr><tr><td valign=\"top\" width=\"312\">Total Price<\/td><td valign=\"top\" width=\"312\">&#8220;=Fields!Subtotal.Value&#8221;<\/td><\/tr><\/tbody><\/table><p>Click\u00a0<span style=\"font-weight: bolder;\">Preview<\/span>\u00a0and sort the order items by Quantity.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/43.png\" alt=\"Table with Sorting\" \/><\/p><p>Sort the order items by Total Price.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/44.png\" alt=\"Table Sort Items by Price\" \/><\/p><h3>Create Host and NodeJS Apps<\/h3><p>Now, with the report defined, you can create a responsive web display forit \u2014 a display that will look good on both desktops and mobile devices. ActiveReportsJS offers this capability by default.<\/p><p>Your sample application will use Node.JS, a\u00a0<a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a>\u00a0runtime environment, to execute the web app on the server side.<\/p><p>Follow the steps necessary to create a\u00a0<a href=\"https:\/\/www.grapecity.com\/activereportsjs\/docs\/GettingStarted\/QuickStart\/QuickStart-PureJS\">web application in PureJS<\/a>, a template engine that uses the ActiveReportsJS Viewer component:<\/p><p>Create a new OrdersReport folder for your application.<\/p><p>Install the Node.JS Express package by typing the following line in the command prompt:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69f810f elementor-widget elementor-widget-code-highlight\" data-id=\"69f810f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>npm install express<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4c95834 elementor-widget elementor-widget-text-editor\" data-id=\"4c95834\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>To Install the ActiveReportsJS modules, which are required to view and embed the monthly sales report on the client side of your web application, enter the following command:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-226d3b5 elementor-widget elementor-widget-code-highlight\" data-id=\"226d3b5\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>npm install @grapecity\/activereports<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d6c05d elementor-widget elementor-widget-text-editor\" data-id=\"9d6c05d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Create the index.html file with the following content:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-035bf87 elementor-widget elementor-widget-code-highlight\" data-id=\"035bf87\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><html>\r\n<head>\r\n    <meta charset=\"utf-8\" \/>\r\n    <title>ActiveReportsJS Viewer<\/title>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n\r\n    <link rel=\"stylesheet\" href=\"node_modules\/@grapecity\/activereports\/styles\/ar-js-viewer.css\" \/>\r\n    <script type=\"text\/javascript\" src=\"node_modules\/@grapecity\/activereports\/dist\/ie-polyfills.js\"><\/script> <!--to run in IE-->\r\n    <script type=\"text\/javascript\" src=\"node_modules\/@grapecity\/activereports\/dist\/ar-js-core.js\"><\/script>\r\n    <script type=\"text\/javascript\" src=\"node_modules\/@grapecity\/activereports\/dist\/ar-js-viewer.js\"><\/script>\r\n<\/head>\r\n<body onload=\"load()\">\r\n    <div id=\"ARJSviewerDiv\" style=\"height: 600px\"><\/div>\r\n    <script>\r\n        function load() {\r\n            const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');\r\n            viewer.open('MonthlyOrders.rdlx-json');\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-80dbe93 elementor-widget elementor-widget-text-editor\" data-id=\"80dbe93\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Note that the above code uses\u00a0<a href=\"https:\/\/www.grapecity.com\/activereportsjs\/docs\/DeveloperGuide\/ActiveReportsJSDesigner\/Overview\">ActiveReportsJS Viewer<\/a>\u00a0to display the report on your web page at the client side.<\/p><p>Create the web server logic by adding the server.js file with the following content:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-587bf82 elementor-widget elementor-widget-code-highlight\" data-id=\"587bf82\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const express = require('express'); \/\/import Express.js module  \r\nconst app = express();  \r\nconst path = require('path');  \r\napp.use(express.static(path.join(__dirname)));  \r\napp.listen(8085);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb5a41e elementor-widget elementor-widget-text-editor\" data-id=\"eb5a41e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3 id=\"run-the-node-js-app\">Run the Node.js App<\/h3><p>Now that you\u2019ve embedded ActiveReportsJS Viewer in the client-side\u00a0<a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a>\u00a0code, you can run your web app to see some of its features in action:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-de0fe83 elementor-widget elementor-widget-code-highlight\" data-id=\"de0fe83\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>node .server.js<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6f1dbcda elementor-widget elementor-widget-text-editor\" data-id=\"6f1dbcda\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><\/p>\n<pre><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">Navigate to <\/span><code style=\"color: var( --e-global-color-text ); font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">http:\/\/localhost:8085<\/code><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\"> in your desktop browser.<\/span><br><\/pre>\n<p>Your application starts running with ActiveReportsJS Viewer embedded in the index.html home page:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/45.png\" alt=\"View Report in Web Application Hosted in Node.js\"><\/p>\n<p>The bar chart at the top displays the order volume month to month.<\/p>\n<p>Chart reporting is particularly useful for transforming large volumes of data into a visual map that immediately makes sense to the user by highlighting maximum and minimum values and offering visual clues about trends based on categories or periods.<\/p>\n<p>The report features a tooltip that displays data for the bar you hover over.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/46.png\" alt=\"Report Tooltip\"><\/p>\n<p>Remember the Visibility and Toggle Item properties you have configured for some of the report elements? These properties come handy when you implement a drill-down to multiple data levels in your report.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/47.png\" alt=\"Drill Down Report with Table Sorting\"><\/p>\n<p>In your app, the drill-down feature allows your user to navigate from a month to an order in that month, and then to items within that order. You can also sort columns based on the sorting formulas you have configured while designing the report. Drill-down and sorting are examples of the ActiveReportsJS interactive capabilities.<\/p>\n<p>The ActiveReportsJS Viewer component is responsive: it is rendered appropriately on a variety of 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.<\/p>\n<p>Compare the views of the same report page on a desktop and on mobile emulators available from the Chrome and Safari browsers.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/48.jpg\" alt=\"Mobile Preview of Sales Report in Browser\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/49-2.png\" alt=\"View Reponsive Sales Report on Mobile\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/50.jpg\" alt=\"Responsive and Interactive Mobile Report\"><\/p>\n<h3 id=\"creating-a-monthly-sales-report\">Creating a Monthly Sales Report<\/h3>\n<p>In this article, we provided a hands-on approach to creating a monthly sales report using GrapeCity&#8217;s ActiveReportsJS Designer. We explained how to aggregate information to draw a sales chart grouped by month, in addition to a drill-down, interactive tabular report that consolidates sales by month and order ID.<\/p>\n<p>Start exploring ActiveReportsJS capabilities, including design of more complete and visually appealing reports, integrated with popular web frameworks.<\/p>\n<p>To keep experimenting with the code we\u2019ve created for this article, feel free to download or clone the <strong><a href=\"https:\/\/github.com\/GrapeCity\/ActiveReportsJsDemo\">repository<\/a><\/strong>.<\/p>\n<p>As an exercise, we suggest that you expand on the drill-down idea to add a new level of data to your report.<\/p>\n<p>For example, you can drill-down from a product to product details. You can also create a new report with a chart showing sales volumes per product category, and a tabular product listing with the corresponding sales.<\/p>\n<p><em>This article was originally published on <a href=\"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js\">GrapeCity&#8217;s blog<\/a><\/em>.<\/p>\n<p><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In this article, we&#8217;ll show you how to build a responsive app for order tracking reports with Node.js and ActiveReportsJS.<\/p>\n","protected":false},"author":3,"featured_media":4888,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[272,284,271],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build a Responsive Web-Based Inventory and Invoice App with ActiveReportsJS and Node.js &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a Responsive Web-Based Inventory and Invoice App with ActiveReportsJS and Node.js &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"In this article, we&#039;ll show you how to build a responsive app for order tracking reports with Node.js and ActiveReportsJS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-24T14:05:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-18T18:45:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-44.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/build-a-responsive-web-based-inventory-and-invoice-app-with-activereportsjs-and-node-js\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"Build a Responsive Web-Based Inventory and Invoice App with ActiveReportsJS and Node.js\",\"datePublished\":\"2020-07-24T14:05:33+00:00\",\"dateModified\":\"2021-11-18T18:45:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/build-a-responsive-web-based-inventory-and-invoice-app-with-activereportsjs-and-node-js\/\"},\"wordCount\":2973,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-44.png\",\"keywords\":[\"JavaScript\",\"JSON\",\"Node.js\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/build-a-responsive-web-based-inventory-and-invoice-app-with-activereportsjs-and-node-js\/\",\"url\":\"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js\",\"name\":\"Build a Responsive Web-Based Inventory and Invoice App with ActiveReportsJS and Node.js &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-44.png\",\"datePublished\":\"2020-07-24T14:05:33+00:00\",\"dateModified\":\"2021-11-18T18:45:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-44.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-44.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build a Responsive Web-Based Inventory and Invoice App with ActiveReportsJS and Node.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build a Responsive Web-Based Inventory and Invoice App with ActiveReportsJS and Node.js &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js","og_locale":"en_US","og_type":"article","og_title":"Build a Responsive Web-Based Inventory and Invoice App with ActiveReportsJS and Node.js &#183; Technical Content Marketing | ContentLab","og_description":"In this article, we'll show you how to build a responsive app for order tracking reports with Node.js and ActiveReportsJS.","og_url":"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2020-07-24T14:05:33+00:00","article_modified_time":"2021-11-18T18:45:31+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-44.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"24 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#article","isPartOf":{"@id":"https:\/\/contentlab.com\/build-a-responsive-web-based-inventory-and-invoice-app-with-activereportsjs-and-node-js\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"Build a Responsive Web-Based Inventory and Invoice App with ActiveReportsJS and Node.js","datePublished":"2020-07-24T14:05:33+00:00","dateModified":"2021-11-18T18:45:31+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/build-a-responsive-web-based-inventory-and-invoice-app-with-activereportsjs-and-node-js\/"},"wordCount":2973,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-44.png","keywords":["JavaScript","JSON","Node.js"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/build-a-responsive-web-based-inventory-and-invoice-app-with-activereportsjs-and-node-js\/","url":"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js","name":"Build a Responsive Web-Based Inventory and Invoice App with ActiveReportsJS and Node.js &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#primaryimage"},"image":{"@id":"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-44.png","datePublished":"2020-07-24T14:05:33+00:00","dateModified":"2021-11-18T18:45:31+00:00","breadcrumb":{"@id":"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-44.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-44.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/www.grapecity.com\/blogs\/building-a-web-based-inventory-and-invoice-application-using-node-js#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"Build a Responsive Web-Based Inventory and Invoice App with ActiveReportsJS and Node.js"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2020\/07\/Untitled-design-44.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3229"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=3229"}],"version-history":[{"count":7,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3229\/revisions"}],"predecessor-version":[{"id":5514,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3229\/revisions\/5514"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/4888"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=3229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=3229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=3229"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=3229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}