feature(REPORT-478182): Bold Reports 12.1 Release Changes

build/copy.js

@@ -3,13 +3,12 @@ const { cp, mkdir } = require('shelljs');
 const fs = require('fs');
 
 const scripts = {
-    common: ['common/ej2-base.min.js', 'common/ej2-data.min.js', 'common/ej2-pdf-export.min.js', 'common/ej2-svg-base.min.js'],
-    control: ['data-visualization/ej2-circulargauge.min.js', 'data-visualization/ej2-lineargauge.min.js', 'data-visualization/ej2-maps.min.js'],
     barcode: ['images', 'barcode.reportitem.css', 'barcode.reportitem.js', 'qrbarcode.reportitem.js'],
     signature: ['signature.reportitem.css', 'signature.dialog.css', 'signature.reportitem.js', 'signature.dialog.js'],
     shape: ['shape.reportitem.css', 'shape.reportitem.js'],
     pdf: ['document.reportitem.css', 'pdfdocument.reportitem.js'],
-    html: ['htmldocument.reportitem.js']
+    html: ['htmldocument.reportitem.js'],
+    pdfSignature: ['pdf.signature.reportitem.css', 'pdf.signature.reportitem.js']
 };
 
 const srcDir = 'node_modules/@boldreports/javascript-reporting-controls/Scripts/';
@@ -23,17 +22,17 @@ const extensionsExportTemp = {
     'signatureDialog': 'export { SignatureDialog }',
     'shape': 'export { EJShape }',
     'pdfDocument': 'export { EJPdfDocument }',
-    'htmlDocument': 'export { EJHtmlDocument }'
+    'htmlDocument': 'export { EJHtmlDocument }',
+    'pdfSignature': 'export { EJPDFSignature  }'
 }
 
 gulp.task('copy', (done) => {
-    copyFiles(scripts.common, srcDir, destDir + 'common');
-    copyFiles(scripts.control, srcDir, destDir + 'data-visualization');
     copyFiles(scripts.barcode, extensionsItemSrcDir, extensionsItemDir);
     copyFiles(scripts.signature, extensionsItemSrcDir, extensionsItemDir);
     copyFiles(scripts.shape, extensionsItemSrcDir, extensionsItemDir);
     copyFiles(scripts.html, extensionsItemSrcDir, extensionsItemDir);
     copyFiles(scripts.pdf, extensionsItemSrcDir, extensionsItemDir);
+    copyFiles(scripts.pdfSignature, extensionsItemSrcDir, extensionsItemDir);
     done();
 });
 
@@ -52,7 +51,8 @@ gulp.task('update-extensions-export', (done) => {
         'signatureDialog': ['signature.dialog.js', 'signatureDialog'],
         'shape': ['shape.reportitem.js', 'shape'],
         'pdfDocument': ['pdfdocument.reportitem.js', 'pdfDocument'],
-        'htmlDocument': ['htmldocument.reportitem.js', 'htmlDocument']
+        'htmlDocument': ['htmldocument.reportitem.js', 'htmlDocument'],
+        'pdfSignature': ['pdf.signature.reportitem.js', 'pdfSignature']
     };
     const updateFile = (key, [filename, exportKey]) => {
         const filePath = `${extensionsItemDir}${filename}`;

build/templates/common/index.html

@@ -21,6 +21,13 @@
                 location.href = location.origin + '/error.html';
             }
         }
+        (function addTrailingSlash() {
+            var path = window.location.pathname;
+            if (path.indexOf('/preview') !== -1 && !path.endsWith('/')) {
+                var newUrl = window.location.origin + path + '/';
+                window.location.replace(newUrl);
+            }
+        })();
     </script>
     <link rel="shortcut icon" type="image/x-icon" href="../../../favicon.ico">
     <link href="../../../common/index.css" rel="stylesheet" />

build/templates/common/index.js

@@ -49,6 +49,10 @@ import { SignatureDialog } from './../extensions/report-item-extensions/signatur
 import './../extensions/report-item-extensions/shape.reportitem.css';
 import { EJShape } from './../extensions/report-item-extensions/shape.reportitem';
 
+//PDF signature
+import './../extensions/report-item-extensions/pdf.signature.reportitem.css';
+import { EJPDFSignature } from './../extensions/report-item-extensions/pdf.signature.reportitem';
+
 //globals
 import './../../../src/controls/globals';
 
@@ -70,6 +74,9 @@ let htmlDocument = 'EJHtmlDocument';
 window[pdfDocument] = EJPdfDocument;
 window[htmlDocument] = EJHtmlDocument;
 
+let pdfSignature = 'EJPDFSignature';
+window[pdfSignature] = EJPDFSignature;
+
 //code-mirror
 import 'codemirror/lib/codemirror';
 import 'codemirror/addon/hint/show-hint';

build/templates/report-designer/index.html

@@ -21,6 +21,13 @@
                 location.href = location.origin + '/error.html';
             }
         }
+        (function addTrailingSlash() {
+            var path = window.location.pathname;
+            if (path === '/report-designer') {
+                var newUrl = window.location.origin + path + '/' + window.location.search;
+                window.location.replace(newUrl);
+            }
+        })();
     </script>
     <link href="../favicon.ico" type="image/x-icon" rel="shortcut icon" />
     <link href="../common/index.css" rel="stylesheet" />

build/templates/report-designer/index.js

@@ -45,11 +45,22 @@ $(function () {
             className: 'EJSignature',
             imageClass: 'customitem-signature',
             displayName: 'Electronic',
-            category: 'Signature',
+            category: 'Signatures',
             toolTip:{
                 requirements: 'Add a report item to the designer area.',
                 description: 'This report item is used to add a graphic signature.',
-                title: 'Signature'
+                title: 'Electronic Signature'
+            }
+        }, {
+            name: 'PDFSignature',
+            className: 'EJPDFSignature',
+            imageClass: 'customitem-pdfsignature',
+            displayName: 'PDF',
+            category: 'Signatures',
+            toolTip:{
+                requirements: 'Add a report item to the designer area.',
+                description: 'This report item is used to add a digital PDF signature.',
+                title: 'PDF Signature'
             }
         }, {
             name: 'Shape',

build/templates/report-designer/rdlc/index.html

@@ -21,6 +21,13 @@
                 location.href = location.origin + '/error.html';
             }
         }
+        (function addTrailingSlash() {
+            var path = window.location.pathname;
+            if (path === '/report-designer/rdlc') {
+                var newUrl = window.location.origin + path + '/' + window.location.search;
+                window.location.replace(newUrl);
+            }
+        })();
     </script>
     <link href="../../favicon.ico" type="image/x-icon" rel="shortcut icon" />
     <link href="../../common/index.css" rel="stylesheet" />

build/templates/report-designer/rdlc/index.js

@@ -45,11 +45,22 @@ $(function () {
             className: 'EJSignature',
             imageClass: 'customitem-signature',
             displayName: 'Electronic',
-            category: 'Signature',
+            category: 'Signatures',
             toolTip:{
                 requirements: 'Add a report item to the designer area.',
                 description: 'This report item is used to add a graphic signature.',
-                title: 'Signature'
+                title: 'Electronic Signature'
+            }
+        }, {
+            name: 'PDFSignature',
+            className: 'EJPDFSignature',
+            imageClass: 'customitem-pdfsignature',
+            displayName: 'PDF',
+            category: 'Signatures',
+            toolTip:{
+                requirements: 'Add a report item to the designer area.',
+                description: 'This report item is used to add a digital PDF signature.',
+                title: 'PDF Signature'
             }
         }, {
             name: 'Shape',

index.html

@@ -28,6 +28,15 @@
                 location.href = location.origin + '/error.html';
             }
         }
+        function addTrailingSlash() {
+            var path = window.location.href;
+            if (path && path !== '/' && !path.endsWith('/')) {
+                var newUrl = path + '/';
+                window.location.replace(newUrl);
+            }
+        }
+        addTrailingSlash();
+        window.addEventListener('hashchange', addTrailingSlash, false);
     </script>
     <link rel="stylesheet" href="app.css" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "javascript-samples",
-  "version": "11.1.10",
+  "version": "12.1.12",
   "description": "",
   "author": "",
   "license": "ISC",
@@ -39,8 +39,8 @@
   },
   "dependencies": {
     "@babel/polyfill": "7.2.5",
-    "@boldreports/javascript-reporting-controls": "11.1.10",
-    "@boldreports/javascript-reporting-extensions": "11.1.10",
+    "@boldreports/javascript-reporting-controls": "12.1.12",
+    "@boldreports/javascript-reporting-extensions": "12.1.12",
     "codemirror": "5.58.2",
     "hasher": "1.2.0",
     "jquery": "3.6.0",

src/common/main-content/main-content.js

@@ -52,7 +52,7 @@ export class MainContent {
         const curRouterIndex = curRouterData.curIndex;
         const sampleData = curRouterData.isFirst ? samples[data.samples.length - 1] : samples[curRouterIndex - 1];
         const reportPath = sampleData.routerPath ? (sampleData.basePath + '/' + sampleData.routerPath) : sampleData.basePath;
-        hasher.setHash(reportPath);
+        hasher.setHash(reportPath + "/");
     }
 
     onTabNext() {
@@ -62,7 +62,7 @@ export class MainContent {
         const curRouterIndex = curRouterData.curIndex;
         const sampleData = curRouterData.isLast ? samples[0] : samples[curRouterIndex + 1];
         const reportPath = sampleData.routerPath ? (sampleData.basePath + '/' + sampleData.routerPath) : sampleData.basePath;
-        hasher.setHash(reportPath);
+        hasher.setHash(reportPath + "/");
     }
 
     getCurRouterData() {

src/common/sidebar/sidebar.css

@@ -52,7 +52,7 @@
   width: 90px;
   margin: 8px;
   background-image: url('./../../../assets/sidebar/portrait.png');
-  background-size: 100% 2100%;
+  background-size: 100% 2200%;
 }
 
 .ej-sidebar-content .ej-sb-toc .ej-sb-toc-card .ej-sb-toc-title {

src/common/sidebar/sidebar.js

@@ -1,5 +1,6 @@
 import samplesData from '../../controls/samples.json';
 import * as hasher from 'hasher';
+import { normalizeHash } from '../router';
 
 export class Sidebar {
     constructor(element) {
@@ -54,7 +55,7 @@ export class Sidebar {
             let index = ele.getAttribute('data-uid');
             let sampleData = samplesData.samples[index];
             const reportPath = sampleData.routerPath ? (sampleData.basePath + '/' + sampleData.routerPath) : sampleData.basePath;
-            hasher.setHash(reportPath);
+            hasher.setHash(reportPath + "/");
         }
     }
 

src/controls/hr-payroll/hr-payroll.html

@@ -0,0 +1,18 @@
+<div id="container"></div>
+<div id="description">
+    <p>
+        The HR Payroll report provides a comprehensive overview of employee compensation, departmental performance, and leave management. It helps HR teams analyze payroll trends and make informed decisions.
+    </p>
+    <ul>
+        <li>Displays <code>gross salary</code>, <code>net salary</code>, and <code>deductions</code> across departments.</li>
+        <li>Visualizes <code>Loss of Pay (LOP)</code>breakdown by leave type: sick, good, and compensation leave.</li>
+        <li>Includes <code>employee demographics</code> such as gender distribution and contract types.</li>
+        <li>Summarizes leave availability for sick and casual leave by department.</li>
+        <li>Highlights <code>average performance</code> and employee count per department.</li>
+    </ul>
+    <p>
+        For more information on how dynamic image report items enhance customization in multi-company HR reports, refer to this 
+            <a href="https://help.boldreports.com/enterprise-reporting/designer-guide/report-designer/image-manager/"
+            target="_blank" rel="noreferrer">documentation</a> section.
+    </p>
+</div>

src/controls/hr-payroll/hr-payroll.js

@@ -0,0 +1,14 @@
+/**
+ * This demo showcases a comprehensive HR Payroll report, presenting key metrics such as gross and net salaries, deductions, employee demographics, departmental performance, and leave summaries. It enables HR teams to analyze payroll trends and make informed decisions using dynamic visualizations in the ASP.NET Core Bold Report Viewer.
+ */
+ $(function () {
+    $("#container").boldReportViewer({
+        // Specifies the report Web API service URL. It is used to process the reports.
+        reportServiceUrl: window.Globals.SERVICE_URL,
+        // Specifies the path of the RDL report file
+        reportPath: 'hr-payroll.rdl',
+        toolbarSettings: window.Globals.TOOLBAR_OPTIONS,
+        toolBarItemClick: window.Globals.EDIT_REPORT,
+        exportItemClick: window.Globals.EXPORT_ITEM_CLICK
+    });
+});

src/controls/multi-language-report/multi-language-report.js

@@ -30,13 +30,30 @@ $(function () {
     ejs.popups.hideSpinner(document.getElementById("spinner-container"));
     $("#r-w-property-title, .r-w-genearte").css("display", "block");
     $(".r-w-property").css("display", "inline-flex");
+    const tooltipLocales = {
+        "en-US": { header: "Edit Report", content: "Edit this report in designer" },
+        "fr-CA": { header: "Modifier le rapport", content: "Modifier ce rapport dans le concepteur" },
+        "de-DE": { header: "Bericht bearbeiten", content: "Bearbeiten Sie diesen Bericht im Designer" },
+        "hi-IN": { header: "रिपोर्ट संपादित करें", content: "इस रिपोर्ट को डिज़ाइनर में संपादित करें" },
+        "es-ES": { header: "Editar informe", content: "Editar este informe en el diseñador" },
+        "nl-NL": { header: "Rapport bewerken", content: "Bewerk dit rapport in de ontwerper" },
+        "ko-KR": { header: "보고서 편집", content: "디자이너에서 이 보고서를 편집합니다" },
+        "he-IL": { header: "ערוך דוח", content: "ערוך דוח זה במעצב" },
+        "ru-RU": { header: "Редактировать отчет", content: "Редактировать этот отчет в дизайнере" }
+    };
     $("#update").on("click", function () {
         const reportViewer = $("#container").boldReportViewer("instance");
         const selectedLanguageId = languages.value.toString();
+        const tooltipData = tooltipLocales[selectedLanguageId];
         const selectedLanguage = languagesList.find(lang => lang.languageId === selectedLanguageId);
         const parameters = [{ name: 'Language', labels: [selectedLanguage.Name], values: [selectedLanguage.Name] }];
         reportViewer.model.parameters = parameters;
         reportViewer.reload();
         reportViewer.setModel({'locale': selectedLanguageId});
+        const item = reportViewer.model.toolbarSettings.customGroups[0].items[0];
+        item.tooltip = {
+            header: tooltipData.header,
+            content: tooltipData.content
+        };
     });
 });

src/controls/samples.json

@@ -71,7 +71,6 @@
       "sampleName": "Sales Report",
       "basePath": "report-viewer",
       "directoryName": "sales-report",
-      "status": "Updated",
       "imageDetails": {
         "isLandscape": false,
         "index": 9
@@ -465,7 +464,6 @@
       "sampleName": "Dynamic Logos",
       "basePath": "report-viewer",
       "directoryName": "dynamic-logos",
-      "status": "New",
       "imageDetails": {
         "isLandscape": false,
         "index": 19
@@ -479,14 +477,27 @@
       "sampleName": "Multi Language Report",
       "basePath": "report-viewer",
       "directoryName": "multi-language-report",
-      "status": "New",
       "imageDetails": {
         "isLandscape": false,
         "index": 5
       },
       "metaData": {
         "description": "This demo showcases a Multi Language Report that allows users to view report in various languages using the JavaScript Bold Report Viewer."
       }
+    },
+    {
+      "routerPath": "hr-payroll",
+      "sampleName": "HR Payroll",
+      "basePath": "report-viewer",
+      "directoryName": "hr-payroll",
+      "status": "New",
+      "imageDetails": {
+        "isLandscape": false,
+        "index": 20
+      },
+      "metaData": {
+        "description": "This demo showcases an HR Payroll report showing salaries, deductions, demographics, and performance insights in JavaScript Bold Report Viewer."
+      }
     }
   ]
 }