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

An array in Javascript that contains sub-arrays within its keys

I am encountering an issue with my array structure. The main array contains sub-arrays and uses custom keys as identifiers. However, I am unable to access the array using these keys. For example, when I try to get the length of the array, it returns 0 even ...

Utilize the class names to assign a distinctive color using mixins in SCSS

I am diving into the world of Sass and I have a peculiar challenge. I want to create a class that allows me to set a color using percentages for red, green, and blue values. For example, the class name color-50-10-60 would represent 50% red, 10% green, a ...

Validation on the client side will now support the input of comma-separated values

Is there a way to use the jQuery.validator.addClassRules method in order to validate input fields and restrict my textbox to only accept comma-separated values? I also want it to display a default message if incorrect. <input type="text" cla ...

HTML not updating after a change in properties

My template is structured as a table where I update a column based on a button click that changes the props. Even though the props are updated, I do not see the template re-rendered. However, since I am also caching values for other rows in translatedMessa ...

JavaScript transform numbers into array of buffers with a length of 4

I'm looking for a way to insert a numerical value into an array of 4 values [uint32_t] For example 255 should look like [0x00, 0x00, 0x00, 0xFF] I need to transmit this value from a Node.js server to an Arduino board Is there a built-in solution or ...

Angular: The issue with lazy-loading a decorator and how to solve it

How to Register a Decorator Synchronously angular .module('myApp') .decorator('$controller', MyDecorator); angular .module('myApp') .controller('MyCtrl', MyCtrl); Registering a Decorator Asynchronously $t ...

Tips for customizing the appearance of Material UI's time picker diolog styles

I am currently incorporating the Material UI Time Picker from GitHub, specifically TeamWertarbyte's repository. My task involves modifying the color of the time displayed. In the image provided, I aim to customize the color of the time shown as 11:3 ...

Error: React/Express - The renderToString() function encountered an unexpected token '<'

As I work on implementing server-side rendering for my React/Express application, I have hit a snag due to a syntax error related to the use of the react-dom/server renderToString() method. In my approach, I am following a tutorial mentioned here - The sn ...

An error occurred when attempting to use the getDoc() function from Firebase within Next.js: TypeError - reading 'map' on properties of undefined

Hello everyone at StackOverflow, I ran into a problem while attempting to use .map() on a getDoc() constant in my Next.js application. The error message I'm getting is: "TypeError: Cannot read properties of undefined (reading 'map')". As a n ...

Unable to alphabetically arrange buttons automatically

I am encountering a challenge with automatically sorting buttons alphabetically on my webpage. I am unable to determine the method for sorting these buttons using jquery or javascript, but my goal is to have them sorted automatically when the page loads. I ...

Selecting a default option in Angular when the value is present and repeated

My goal is to pass a parameter in the URL to a page where a select element is populated dynamically. The parameter that needs to be passed is customerProfile.id. I want to find this id in the select options and have it selected by default. How can I achiev ...

Inserting an item into a list

Looking for assistance with this particular scenario: { "EekvB3cnwEzE":{ "name":"hi", }, "Brv1R4C6bZnD":{ "name":"yup", }, "kRwRXju6ALJZ":{ "name":"okay", } } I'm attempting to store each of these objects in an array. Howe ...

Converting a string to a JSON array with Jackson in RESTful APIs

As I delve into the world of JSON and REST, I find myself testing a REST API that returns strings in the following format: [{ "Supervisor_UniqueName": "adavis", "Active": "true", "DefaultCurrency_UniqueName": "USD", "arches_type": "x-zensa ...

Error: guild is not defined | discord.js

Having trouble with a ReferenceError that says guild is not defined? I recently encountered a similar issue with members but managed to fix it by adding a constant. As someone new to javascript and node.js, I could use some assistance. I've even tried ...

Sending form data to the server using JavaScript: A step-by-step guide

Currently, I am dealing with the configuration of two servers. One server is running on React at address http://localhost:3000/contact, while the other is powered by Express at address http://localhost:5000/. My goal is to transmit form data as an object v ...

Issue with HTML not being displayed during Eclipse Eclipse html not showing up on

This is an example of a servlet: package userInterface; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servle ...

The Zip file generated in memory is experiencing corruption

I'm encountering an issue while attempting to serve a zip file generated in memory by Flask to a JavaScript front-end. However, the downloaded file appears corrupted and I am unsure of what mistake I may be making. @app.route('/route') def ...

Ways to achieve perfect alignment for SVG text within its container, as opposed to stretching across the entire webpage

Recently, I've been working on a customizable photo frame designer using SVG. One of the key features allows users to add their own text to the frame. To achieve this, I'm utilizing jQuery's .keyup function. However, the issue I'm facin ...

Effortless content extraction between HTML tags using BeautifulSoup in Python

My Weather Data Extraction Project: I'm currently developing a webpage scraper to collect weather information. This is the progress I have made so far: import urllib.request from bs4 import BeautifulSoup # opening the webpage and storing the conten ...

Is there a way to lock the eye icon in place within the password field using Vue.js?

I added an eye icon to the right side of my password input fields. However, occasionally error messages may pop up on the page to signify issues with the input fields. When these error messages appear below the relevant input field, the position of the eye ...