1

I have a table of 2 columns in google sheet. 2nd column consists of charges which the values may vary based on user input via google form and sum up using GAS. xtrasvc
This gsheet table will then be converted into html with GAS and emailed as a report. When converting the gsheet table into html, the rows of data is filtered to display only rows of data which the 2nd column is not zero value. Thanks to @Tanaike,filter script as 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()!='-');

Filter criterias declared in the above line of code doesn't seem to work when I change the currency format of the charges to a custom format which is the same as default accounting format in excel/gsheet, where the currency symbol would always shows on the far left of the cell wall and the numbers would always be shown from the far-right of the cell. The output I expected is as below (in html format). I want to maintain that same custom format and just show the non-zero data rows:-
expectedoutput

my html code for this 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 this achievable? I've tried to insert the accounting.js library script in the html body but it resulted into blanks for all rows. Would appreciate some help. Thanks.

dell
  • 171
  • 13
  • In order to correctly understand about your current situation and your goal, can you provide the sample Spreadsheet? Unfortunately, I cannot understand about your top and bottom images. – Tanaike Oct 10 '20 at 23:36
  • I have edited my question content, Mr. @Tanaike . Hopefully suffice to your understanding on my objectives. thanks. – dell Oct 11 '20 at 09:20
  • Thank you for replying and adding more information. From the information, I proposed a modified script as an answer. Could you please confirm it? If that was not the direction you expect, I apologize. – Tanaike Oct 11 '20 at 23:20

2 Answers2

1

I believe your goal as follows.

  • You want to achieve the conversion from the top image to the bottom image using Google Apps Script.
  • In your above Spreadsheet, the column "B" is formatted by the number format.

Modification points:

  • Unfortunately, I cannot understand about your whole script. But I guess that you might be retrieving the values using getValues(). In that case, I think that the formatted values are not kept. So in your case, I would like to propose to use getDisplayValues() instead of getValues(). By this, the formatted values are kept.
    • When getDisplayValues() is used, the values can be checked using the regex.
  • And, in your HTML, the tag of <table></table> is not used.

When above points are reflected to your script, it becomes as follows.

Modified script:

Google Apps Script side:

const sheetName = "Sheet1"; // Please set 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)
  • In this sample script, the values are retrieved from the cells "A2:B9" on "Sheet1". So please modify this for your actual situation.
  • If you want to include the header, please modify A2:B9 to A1:B9.

HTML & Javascript side:

<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:

When above modified script is used, the following result can be obtained.

<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:

  • In above script, it supposes that the column "B" of your sample Spreadsheet is set by the number format like RM 12,345.00. If this was not correct, above script cannot be used. Please be careful this.

References:

Tanaike
  • 181,128
  • 11
  • 97
  • 165
  • Thank you soooo much for such a detailed, working and organized answer, @Tanaike! Works like a charm as always! – dell Oct 12 '20 at 05:32
  • 1
    @dell Thank you for replying. I'm glad your issue was resolved. Thank you, too. – Tanaike Oct 12 '20 at 05:36
  • Sorry have to bring up this question again, Mr. @Tanaike . Would like to understand what's this `a` represents in this html code line `align=" if (i == a.length - 1) {?> ='right'?> } else { ?> ='left'?> }?>"` ? Because when I tried to apply it in another table with 4 columns instead of 2, seems like it doesn't display like how you did for me in the answer above. I've tried putting it in every `` but still no difference. Thanks. – dell Oct 15 '20 at 13:25
  • Or if anyone who knows and can share more details abt this is very much appreciated.Tq! – dell Oct 15 '20 at 13:29
  • I found out something weird. I deleted this line of code `align=" if (i == a.length - 1) {?> ='right'?> } else { ?> ='left'?> }?>"` and just retain the ` – dell Oct 15 '20 at 15:04
  • @dell Thank you for replying. I have to apologize for my poor English skill. Unfortunately, I cannot understand about your current situation. But from your latest replying, I understood your new issue was resolved. I'm glad for it. – Tanaike Oct 15 '20 at 22:24
  • Hi, Mr. @Tanaike. Unfortunately, what my latest comment was to highlight my findings. I still don't have resolution for my new issue, which is to have the same alignment in the new table. would still appreciate if you can explain how to do it for other additional columns. Thanks. – dell Oct 16 '20 at 01:47
  • @dell Thank you for replying. I have to apologize for my poor English skill again. Unfortunately, I cannot understand about your new question. I would like to try to understand about it. When you can give me a time to understand about it, I'm glad. When I could correctly understand about your new question, I would like to think of the solution. I deeply apologize that I cannot resolve your new question soon. This is due to my poor skill. I would like to study more. – Tanaike Oct 16 '20 at 01:51
  • Ok, I will add that new table and the html code I have for that table in the question above. editing now..thanks – dell Oct 16 '20 at 01:59
  • @dell Thank you for replying. In this case, can you post it as new question by including the information? By this, more users including me can think of the solution. How about this? If you don't want to post it as new question, feel free to tell me. – Tanaike Oct 16 '20 at 02:00
  • Oops! Sorry Mr. @Tanaike . I didn't see your comment as I was editing the question earlier. And I thought to avoid new question because it seems like this website has kinda strict rules against duplicate question because I'm asking for the same thing actually. It's just that for a different number of table columns. Hopefully you understand from my additional info above.thanks – dell Oct 16 '20 at 02:50
  • @dell Thank you for replying. I saw your updated question. I would like to support you. But I think that this is different from your initial question. Please put one question in one question. So can you post it as new question by including the detail information? Because when your initial question is changed by comment, other users who see your question are confused. By posting it as new question, users including me can think of your new question. If you can cooperate to resolve your new issue, I'm glad. And I think that your new question is not duplicate your this question. – Tanaike Oct 16 '20 at 02:52
  • Ok, Mr. @Tanaike. I have created a new question for this. Hoepfully the info inside the new question is sufficient for your kind perusal. Thanks – dell Oct 16 '20 at 04:33
  • FYR, my new question is at https://stackoverflow.com/questions/64382932/how-to-always-justify-the-currency-symbol-on-the-left-and-the-figure-on-the-righ – dell Oct 16 '20 at 06:48
  • @dell Thank you for your response. When I could correctly understand about your new question, I would like to think of the solution. – Tanaike Oct 16 '20 at 07:19
0

Have you tried toFixed function in javascript ?

(19085.57).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); // 19,085.57
TheMaster
  • 45,448
  • 6
  • 62
  • 85
arlabbafi
  • 86
  • 6