Is there any HTML code that is able to implement a currency format identical to the one we've customized in Google Sheets/Google Apps Script

I am currently working with a Google Sheet table that consists of 2 columns. The second column contains charges which can vary based on user input through a Google Form and are summed up using GAS. To view an example, click here.
The data from this Google Sheet table will be converted into HTML using GAS and sent as a report via email. During the conversion process, I need to filter out rows where the value in the second column is NOT zero. Thanks to @Tanaike, he provided a filtering script shown below:

var tableRangeValues = xtraqsheet.getRange(2,1,5,2).getDisplayValues();

var forhtmlemail = HtmlService.createTemplateFromFile("extrasvcitem");

forhtmlemail.tableRangeValues = tableRangeValues.filter(([,b]) => b.toString() != 0 && b.toString() != '0' && b.toString() != '' && b.toString() != 'RM - ' && b.toString() != '-');

The filtering criteria mentioned above does not work when I change the currency format of the charges to a custom format similar to the default accounting format in Excel/Google Sheets. In this custom format, the currency symbol always appears on the far left of the cell wall, and the numbers are displayed from the far-right of the cell. The desired output in HTML format is shown below:
Image Link

Here is my HTML code for the table:

<tbody style="border-style: none solid solid;border-color: #3E1176">

<?tableRangeValues.forEach((r,i) => {
let color;
if(i % 2 === 0){color="white";}else{color="#F6EFFE";}?>
<tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:<?=color?>">
      <td style="width: 52.7272%;"><?=r[0]?></td>
      <td style="width: 36.0039%;"><?=r[1]?></td>
</tr>
<?})?>
</tbody>

Is it possible to achieve this customization? I attempted to include the accounting.js library script in the HTML body, but it resulted in blank rows. Any assistance would be greatly appreciated. Thank you.

Answer №1

It is my understanding that you aim to convert the top image into the bottom image using Google Apps Script.

  • The column "B" in your Spreadsheet appears to be formatted with a number format.

Areas for Modification:

  • Based on my interpretation, it seems like you might be fetching values using getValues(). However, if you want to retain the formatted values, I recommend using getDisplayValues() instead of getValues().
  • Additionally, ensure that you include the <table></table> tag in your HTML code.

By incorporating the above suggestions into your script, it should look like this:

Modified Script:

Google Apps Script Section:

const sheetName = "Sheet1"; // Please specify the sheet name.

const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheet = ss.getSheetByName(sheetName);
const tableRangeValues = sheet.getRange("A2:B9").getDisplayValues();
const forhtmlemail= HtmlService.createTemplateFromFile("i17");
forhtmlemail.tableRangeValues = tableRangeValues.filter(([,b]) => !(/^[RM -]+$/.test(b)));
const res = forhtmlemail.evaluate().getContent();
console.log(res)
  • Adjust the cell range (e.g., "A2:B9") according to your specific requirements in the sample script.
  • If you wish to include headers, modify A2:B9 to A1:B9.

HTML & Javascript Section:

<tbody style="border-style: none solid solid;border-color: #3E1176">
  <table>
    <?tableRangeValues.forEach((r,i,a)=> {
let color;
if(i%2===0){color="white";} else {color="#F6EFFE";}?>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:<?=color?>;">
      <td style="width: 52.7272%;" align="<? if (i == a.length - 1) {?> <?'right'?> <? } else { ?> <?'left'?> <?}?>"><?=r[0]?></td>
      <td style="width: 36.0039%; text-align-last: justify;">
        <?!=r[1]?>
      </td>
    </tr>
    <?})?>
  </table>
</tbody>

Result:

Upon executing the modified script as provided above, you should obtain the following result.

<tbody style="border-style: none solid solid;border-color: #3E1176">
  <table>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:white;">
      <td style="width: 52.7272%;" align=" left ">Custom packaging request</td>
      <td style="width: 36.0039%; text-align-last: justify;"> RM 12,345.00 </td>
    </tr>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:#F6EFFE;">
      <td style="width: 52.7272%;" align=" left ">Change of license plate</td>
      <td style="width: 36.0039%; text-align-last: justify;"> RM 1,234.00 </td>
    </tr>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:white;">
      <td style="width: 52.7272%;" align=" left ">Car wash mobile service</td>
      <td style="width: 36.0039%; text-align-last: justify;"> RM 123.00 </td>
    </tr>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:#F6EFFE;">
      <td style="width: 52.7272%;" align=" left ">Personal drive service</td>
      <td style="width: 36.0039%; text-align-last: justify;"> RM 20.00 </td>
    </tr>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:white;">
      <td style="width: 52.7272%;" align=" left ">Change of security ID</td>
      <td style="width: 36.0039%; text-align-last: justify;"> RM 2.00 </td>
    </tr>
    <tr style="border-style: none solid;border-color:#3E1176;padding:10px;color:#3E1176;font-size:10pt;background-color:#F6EFFE;">
      <td style="width: 52.7272%;" align=" right ">TOTAL</td>
      <td style="width: 36.0039%; text-align-last: justify;"> RM 13,724.00 </td>
    </tr>
  </table>
</tbody>

Note:

  • This script assumes that the column "B" in your sample Spreadsheet follows the number format like RM 12,345.00. If this is not accurate, the script may not function correctly. Please verify this detail.

References:

Answer №2

Have you experimented with the toFixed method in JavaScript?

(9574.23).toFixed(3).replace(/\d(?=(\d{3})+\.)/g, '$&,'); // 9,574.230

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The EJS view fails to render when called using the fetch API

Within my client-side JavaScript, I have implemented the following function which is executed upon an onclick event: function submitForm(event) { const data = { name, image_url }; console.log(data); fetch('/', { method: &apo ...

Tips for retrieving a value from a callback function?

How do I return a value from a callback function? The following code snippet is what I have: function storeData(data) { const id = "5f354b7470e79f7e5b6feb25"; const body = { name: "john doe" }; bucket.insert(id, body, (error, r ...

Upon refreshing the page, next.js 13's useSession() function fails to fetch session information

Currently, I am working on replicating an ecommerce site using nextjs 13. On the order page, I am utilizing useSession from next-auth/react to check if a user is signed in or not. Everything works fine when I navigate to the page through a link, but if I r ...

What advantages and disadvantages come with choosing between using vh and vw for responsive text?

My main inquiry is centered around the various techniques for creating responsive text. Is there a particular method that stands out as the best option for general use, or do different methods serve distinct purposes? ...

Having trouble with clearing floats in Twitter Bootstrap CSS - any help appreciated!

Today, in an effort to learn CSS and apply it practically by creating simple themes, I decided to delve into the proper ways of clearing floats in CSS. My research led me to explore how Twitter handles this issue, so I dug into Bootstrap's CSS file an ...

Interactive JQuery calendar

Can anybody assist me with this issue? I am seeing question marks in the graphic and I'm not sure why. I remember encountering these symbols before and I believe it has something to do with charset. Currently, I am using: <meta http-equiv="Content ...

Having Trouble with Sending Emails Using Google Scripts - Javascript POST Request Issue

I have been working on setting up a basic form on my website where users can input their name, email, and a short message. This information is then sent to Google Apps Script which forwards the message to me via email. Unfortunately, I keep encountering an ...

Step-by-step guide on using JQuery to listen to an event and dynamically add a p element after a button, with the feature to remove it on click

I need to implement a functionality where clicking a button will add a new paragraph after the button, and then be able to remove that paragraph by clicking on any word within it. Any guidance on how to achieve this would be highly appreciated. Thank you! ...

Solving Issues with URL Parameters and AJAX

My JSP page has a JavaScript function called loadData() that is triggered when the page loads. This function makes an AJAX request to a servlet in order to retrieve data and return the necessary HTML content to display on the page. I am trying to call thi ...

How can I save files to the ~/Documents directory using Node.js on my Mac computer?

Trying to work with the user's Documents folder in Node.js on macOS: var logger = fs.createWriteStream('~/Documents/somefolderwhichexists/'+title+'.txt'); Encountering an error without clear cause. Error message received: Unca ...

How can we efficiently add a new node to a polyline link in gojs while maintaining the original positions of points in the links adjacent to the inserted node

After posting a question on StackOverflow (Seeking Javascript library for displaying and editing networks of nodes and edges), I was directed to the gojs splice sample. The sample has been helpful, but I've hit a roadblock trying to achieve the speci ...

What is the process for using jQuery to systematically alter the src attribute of all avatar images on Twitter.com?

Summary: I am learning JavaScript and jQuery, and wanted to write a script to replace "_normal.png" with ".png" for all "img.avatar" images on Twitter.com. I encountered an error which I will explain below. Background: Practice makes perfect, so I like to ...

"Integrating multiple partials with templateUrl in AngularJS: A step-by-step

Is there a way to merge partial views using the templateUrl attribute in an AngularJS directive? Imagine having a directive like this: .directive('combinePartials', function () { var mainPartial = "mainpartial.html", var template2 = "pa ...

javascript accessing all data in firebase real-time database using JavaScript the right way

Working with node.js, I am retrieving data from the firebase real-time database. However, the data is being returned in the following format: Data Retrieval Code import firebaseApp from '../config.js'; import { getDatabase, ref, onValue } from & ...

What strategies can be used to refactor nested callbacks in node and effectively pass parameters to each function within the callbacks?

I am currently in the process of refactoring some JavaScript code within a Node environment, and I'm encountering difficulties when it comes to passing parameters to functions that serve as callbacks for other functions. Here is an example of my curre ...

The cart total variable in Vuejs is coming back as NaN

I'm currently in the process of creating a cart system using vuejs and I've encountered an issue where my total variable is displaying NaN instead of calculating the total price of all products. Below is the function responsible for calculating ...

What is the reason why setting 'onClick' as an event handler is not flagged as a syntax error?

I am currently working on a JavaScript code snippet where I am trying to change the headline text when it is clicked. The code I have written is: var headline = document.getElementById("mainHeading"); headline.onClick = function() { headline.innerHTML ...

Concerns have been raised regarding the lack of light and shadows being detected by THREE.BufferGeometry in JavaScript/th

I've been trying to generate terrain using noise functions, but I'm running into an issue where the BufferGeometry mesh isn't receiving any light from PointLight. When I switch to AmbientLight, the BufferGeometry is visible, but not with Poi ...

Issues with splicing an Angular array using pure JavaScript

Could someone please help me figure out what I'm doing incorrectly? I have some JSON data that I am converting into an array for use in an ng-repeat. Before looping through the array, I am checking the event dates against today's date and removin ...

Update the variable values in the Onclick function

I am trying to modify the onClick function attached to a button. My goal is to change the function var from 'create' to 'update' when the page loads and also through other functions. I attempted the code below but it did not work as exp ...