improvments in codes and readme

ApexAppCode.js

@@ -1,14 +1,26 @@
-/* Description: This is the code that will be used in the APEX application 
-  to download the report file from the Google Apps Script.
-*/
-
-// 1. Define the variables
-let url = 'https://script.google.com/macros/s/AKfycby1XlaeeK0lI4VLhTmk2k3en5d23x_-W2Gkuvj751gZKUj4eGRyWTDaxtZct02VPc_z/exec';
-let bodyData = { template: "TemplateAPEX1", data: { AisGateId: "xxx123" } };
+// Copyright © 2024 SVIETE Andrzej Raczkowski
+// Description: Script to get report from AsReporter - you can run it on Oracle APEX Page
+let url = 'https://script.google.com/macros/s/AKfycbx_V5pYTR9iTjcWpi4u1R8u2K850i8FFx6JoGH_1FpBr36SVJVkN_TPlVTIvguMLaxN/exec';
+let bodyData = {
+    template:"Demo report template",
+    data:{
+        placeholders:{
+            Name:"Oracle APEX ❤️",
+            TemplatePlaceholder1:"This is imporant data from JSON",
+            DYN_COL_2: "Column 2"
+         },
+         tables:{
+            0: [
+              ['r1c1', 'r1c2', 'r1c3', 'r1c4'],
+              ['r2c1', 'r2c2', 'r2c3', 'r2c4']
+            ],
+            1: [['❤️', '☠️☠️'], ['👍👍👍', '👏👏👏👏']]
+         }
+    }
+ }
 let fileType = "application/pdf";
-let fileName = "filename.pdf";
+let fileName = "ImportantReportNo1.pdf";
 
-// 2. Fetch the data from the server
 fetch(url, { method: 'POST', redirect: 'follow', body: JSON.stringify(bodyData) })
     .then(response => response.text())
     .then((text) => {
@@ -20,7 +32,7 @@ fetch(url, { method: 'POST', redirect: 'follow', body: JSON.stringify(bodyData)
     }
     )
 
-// 3. Download the file in browser
+//
 function downloadTheRaportResult(rawdata) {
     // decode base64 to bytes
     const base64ToDecode = atob(rawdata);

BrowserAppCode.js

@@ -1,7 +1,25 @@
-let url = 'https://script.google.com/macros/s/AKfycby1XlaeeK0lI4VLhTmk2k3en5d23x_-W2Gkuvj751gZKUj4eGRyWTDaxtZct02VPc_z/exec';
-let bodyData = { template: "TemplateAPEX1", data: { AisGateId: "xxx123" } };
+// Copyright © 2024 SVIETE Andrzej Raczkowski
+// Description: Script to get report from AsReporter - you can run it on any app/webpage
+let url = 'https://script.google.com/macros/s/AKfycbx_V5pYTR9iTjcWpi4u1R8u2K850i8FFx6JoGH_1FpBr36SVJVkN_TPlVTIvguMLaxN/exec';
+let bodyData = {
+    template:"Demo report template",
+    data:{
+        placeholders:{
+            Name:"Celina ❤️",
+            TemplatePlaceholder1:"This is imporant data from JSON",
+            DYN_COL_2: "Column 2"
+         },
+         tables:{
+            0: [
+              ['r1c1', 'r1c2', 'r1c3', 'r1c4'],
+              ['r2c1', 'r2c2', 'r2c3', 'r2c4']
+            ],
+            1: [['❤️', '☠️☠️'], ['👍👍👍', '👏👏👏👏']]
+         }
+    }
+ }
 let fileType = "application/pdf";
-let fileName = "filename.pdf";
+let fileName = "ImportantReportNo1.pdf";
 
 fetch(url, { method: 'POST', redirect: 'follow', body: JSON.stringify(bodyData) })
     .then(response => response.text())

Code.gs.js

@@ -1,19 +1,35 @@
 // Copyright © 2024 SVIETE Andrzej Raczkowski
-// Description: Google Apps Script code for AsReporter - Application Script Reporter
+// Description: Google Apps Script code for ASReporter - Application Script Reporter
 // This app is used to generate reports based on the templates and data in JSON format
 
-// global variables
-const TEMPLATES_FOLDER_NAME = 'AsReporter Templates Files';
+// test variables used in debug mode
+const TEMPLATES_FOLDER_NAME = 'ASReporter Templates Files';
 let fileType = "application/pdf";
 let fileName = "filename.pdf";
+let templateName = "Demo report template";
+let reportData = {
+       placeholders:{
+          Name:"Andrzej 😎",
+          TemplatePlaceholder1:"Value from JSON",
+          DYN_COL_2: "Description"
+       },
+       tables:{
+          0: [
+            ['1:1', '1:2', '1:3', '1:4'],
+            ['2:1', '2:2', '2:3', '2:4']
+          ],
+          1: [['❤️', '☠️'], ['👍', '👏']]
+       }
+    };
 
 // doPost function is used to handle the POST request from the client.
 function doPost(e) {
   // we have here the data from the client in POST body
-  let dataBody= JSON.parse(e.postData.contents);
-  let templateName = dataBody.template;
-  let reportData = dataBody.data;
-
+  if (e) {
+    let dataBody= JSON.parse(e.postData.contents);
+    templateName = dataBody.template;
+    reportData = dataBody.data;
+  }
   // transform data into report
   let templateFile = getDriveFileByName(templateName);
   let reportEncoded = renderReportFile(reportData, templateFile);
@@ -40,7 +56,7 @@ function doGet(e) {
           <div class="form-signin">
             <img class="mb-4" src="https://raw.githubusercontent.com/araczkowski/AsReporter/main/images/about.webp" alt="SVIETE" style="max-width:80%;">
             <h1 class="h3 mb-3 font-weight-normal">Please find the instruction and source code on Github:</h1>
-            <h2 class="h3 mb-3 font-weight-normal"><a href="https://github.com/araczkowski/AsReporter" target="_blank">Github AsReporter Project</a></h3>
+            <h2 class="h3 mb-3 font-weight-normal"><a href="https://github.com/araczkowski/ASReporter" target="_blank">Github AsReporter Project</a></h3>
             <p class="mt-5 mb-3 text-muted"> © 2024 SVIETE Andrzej Raczkowski</p>
           </div>
       </body>
@@ -50,7 +66,7 @@ function doGet(e) {
 
 // get the template file by neame - we are taking the last one - use unic name on drive to avoid this
 function getDriveFileByName(fileName) {
-    let files = DriveApp.getFilesByName(fileName);
+  let files = DriveApp.getFilesByName(fileName);
   let fileId = '';
   while (files.hasNext()) {
     let file = files.next();
@@ -74,15 +90,35 @@ function renderReportFile(reportData, templateFile) {
   // gate template body
   let TemplatesFolder = getDriveFolderByName(TEMPLATES_FOLDER_NAME);
   const newTemplateFile = templateFile.makeCopy(TemplatesFolder);
-  const  OpenDoc = DocumentApp.openById(newTempFile.getId());
+  const  OpenDoc = DocumentApp.openById(newTemplateFile.getId());
 
   // replace the placeholders with the data
   const body = OpenDoc.getBody();
-  body.replaceText("{AisGateId}", reportData.AisGateId);
+  Object.keys(reportData.placeholders).forEach(function(key) {
+    body.replaceText("{"+ key +"}", reportData.placeholders[key]);
+  })
+
+  // replace table with data
+  var cellStyle = {};
+  cellStyle[DocumentApp.Attribute.HORIZONTAL_ALIGNMENT] = DocumentApp.HorizontalAlignment.CENTER;
+  const tables = body.getTables();
+  let tableIdx = 0;
+  tables.forEach(table => {
+    table.removeRow(1);
+    for (let r = 0; r < reportData.tables[tableIdx].length; r++) {
+      let tr = table.appendTableRow();
+      for (let c = 0; c < reportData.tables[tableIdx][r].length; c++) {
+        let td = tr.appendTableCell(reportData.tables[tableIdx][r][c]);
+        td.getChild(0).asParagraph().setAttributes(cellStyle);
+      }
+    }
+    tableIdx = tableIdx+1;
+  });
 
   // save the file and return the encoded content
   OpenDoc.saveAndClose();
   const BLOBPDF = newTemplateFile.getAs(fileType);
+  // comment this to not strore pdf in Google Drive
   TemplatesFolder.createFile(BLOBPDF).setName(fileName);
   TemplatesFolder.removeFile(newTemplateFile);
 

README.md

@@ -60,14 +60,35 @@ Copy and Paste the folder ``AsReporter Templates Files`` from this repo to the `
 
 #### 2. Review the demo template
 
-In the folder ``Google Drive`` -> ``AsReporter Templates Files`` there is a file ``Demo report template`` open it in Google Docs to see how the template is writen:
+In the folder ``Google Drive`` -> ``AsReporter Templates Files`` there is a file ``Demo report template`` open it in Google Docs to see how the template was writen:
+![picture12](images/12.png?raw=true "Apps Script 12")
+You should easy see the text and table placeholders.
 
+### Call report generation
 
-### Call report generation from any web app
+#### 1. From Apps Script
 
-#### 1. Use ``BrowserAppCode.js`` to POST report rendering and download
+In Apps script you can runn or debug the ``doPost`` function:
+![picture13](images/13.png?raw=true "Apps Script 13")
+After ``doPost`` run or debug, you can open generated pdf file in Google Drive folder ``AsReporter Templates Files``:
+![picture14](images/14.png?raw=true "Apps Script 14")
+
+#### 2. From any web app - use ``BrowserAppCode.js`` to POST report rendering and download
 
 Go to any page in the browser, for example ``https://google.com`` and open a browser console via ``F12``.
-Now paste to the console code from the script ``BrowserAppCode.js``
+Now paste to the console code from the script ``BrowserAppCode.js`` and press ``Enter``:
+![picture15](images/15.png?raw=true "Apps Script 15")
+
+The report will be produced and downloaded in the browser - you will recive a prompt to save it:
+![picture16](images/16.png?raw=true "Apps Script 16")
+
+Now you can open the report from your disk to see the resoult:
+![picture17](images/17.png?raw=true "Apps Script 17")
+(as you can see my pdf viewer on Ubuntu can't handle the emoticons color... never mind)
+
+#### 3. Use ``ApexAppCode.js`` in Oracle APEX to POST report rendering and download from Oracle APEX
+
+If you wish to generate report from APEX then you can use sample ``ApexAppCode.js`` for this.
+Just copy this code and paste in the dynamic action after button do download report is clicked:
 
-#### 3. Use ``ApexAppCode.js`` in Oracle APEX to POST report rendering and download from Oracle APEX
+> TODO - finish the description...