PDF Export - Currency and number formatting

Hi team!

Has anyone been able to export a pdf with a number field using a currency format or been able to add any formatting to a number to include thousands separator?

Eg: 4,560.99

I can’t get this to work and speaking with the Fibery team they can’t either… so hoping the brains trust can help!

Context: I am planning to use fibery to issue invoices. Ironically, the template that is provided appears to work because the values are less than $1,000.

Thanks

Try this:

{!Amount!}
<%= parseFloat(Entity.Amount).toLocaleString('en',{style:'currency',currency:'USD'}) %>

(assuming the field name is Amount and that you want it to be shown as dollars)

2 Likes

Dang Chris, I should have waited a week to do this, would have saved me a lot of time with your response. :smile:

That’s awesome! In Fibery formulas where I use ToText(number) I also don’t get a thousand separator. Therefor the text show as 122987. Is there also a hack for that?

Try this:

ReplaceRegex(ToText(Num), "(?<![.$])[0-9](?=(?:[0-9]{3})+(?![0-9]))", "\&,")

Hi Chris, the code you just posted drops off the 2nd decimal anything we can do for that?

image

Also I had trouble implementing the solution you posted for the html I will try again in the morning when less tired :smiley:

Can you post what your automation looks like and how the relevant db fields are configured.
The code I posted works fine for me with a currency field as follows:

This works! Awesome :star_struck:

I’m not sure if this is helpful but here is my customization on the invoice template provided by Fibery. Chris will have to attest to whether this aspect of the currency formatting is an acceptable solution:

$<%= parseFloat(details['Amount']).toFixed(2) %>
<!DOCTYPE html>
{! Invoice Details:Service Date, Service, Hours, Amount !}

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title></title>
  <!-- Invoice styling -->
<style>
        .invoice-box {
            max-width: 800px;
            margin: auto;
            padding: 30px;
            font-size: 16px;
            line-height: 24px;
            color: #555;
        }

        .invoice-box table {
            width: 100%;
            line-height: inherit;
            text-align: left;
            border-collapse: collapse;
        }

        .invoice-box table td {
            padding: 5px;
            vertical-align: top;
        }

        .invoice-box table tr td:nth-child(1) {
            text-align: left;
        }
        .invoice-box table tr td:nth-child(2) {
            text-align: left;
        }

        .invoice-box table tr td:nth-child(3) {
            text-align: right;
        }

        .invoice-box table tr td:nth-child(4) {
            text-align: right;
        }
        .invoice-box table tr.top table td {
            padding-bottom: 20px;
        }

        .invoice-box table tr.top table td.title {
            font-size: 45px;
            line-height: 45px;
            color: #364357;
        }

        .note {
            font-size: 16px;
            color: #364357;
        }

      .rendered {
            font-size: 18px;
            color: #364357;
        }

        .invoice-box table tr.information table td {
            padding-bottom: 20px;
        }

        .invoice-box table tr.heading td {
            background: #eee;
            border-bottom: 1px solid #ddd;
            font-weight: bold;
        }

        .invoice-box table tr.details td {
            padding-bottom: 30px;
        }

        .invoice-box table tr.item td {
            border-bottom: 2px solid #eee;
        }

        .invoice-box table tr.item.last td {
            border-bottom: none;
        }

        .invoice-box table tr.subtotal td {
            padding-top: 20px;
            font-weight: normal;
            font-size: large;
            text-align: right;
        }      
       
        .invoice-box table tr.tax td{
            padding-top: 5px;
            font-weight: normal;
            font-size: large;
            text-align: right;
        }
       
        .invoice-box table tr.total td{
            padding-top: 5px;
            padding-bottom: 20px;
            font-weight: bold;
            color: #364357;
            font-size: larger;
            text-align: right;
        }

        @media only screen and (max-width: 600px) {
            .invoice-box table tr.top table td {
                width: 100%;
                display: block;
                text-align: center;
            }

            .invoice-box table tr.information table td {
                width: 100%;
                display: block;
                text-align: center;
            }
        }
    </style>
</head>

<body>
  <div class="invoice-box">
    <table>
      <tr class="top">
        <td colspan="4">
          <table>
            <tr>
              <td class="title">
                Invoice
              </td>
              <td />
              <td />
              <td>
                <div class="note">
                  Invoice #: <b>{{Invoice Number}}</b><br />
                  Date: <b>{{Invoice Date}}</b><br />
                  Due: <b>{{Due Date}}</b>
                </div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr class="information">
        <td colspan="4">
          <table>
            <tr>
              <td>
                Jim John<br />
                ###-###-####<br />
                test@test.com
              </td>
              <td />
              <td />
              <td>
               123 Jolly Lane
                <br />
                Somewhere, AA 88888
              </td>
            </tr>
          </table>
        </td>
      </tr>

      <tr>
        <td colspan="4">
          <table>
            <tr class="heading">
              <td colspan="4">Bill to</td>
            </tr>
            <tr class="details">
              <td class="note">
                <b>{{Customer.Name}}</b><br />
                 Attn: {{Customer.Billing Contact}}<br />
                 {{Customer.Billing Email}}
              </td>
              <td></td>
              <td></td>
              <td>
                {{Customer.Billing Address}}
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <table>
            <tr class="heading">
              <td>Date</td>
              <td>Services</td>
              <td>Hours</td>
              <td>Amount</td>
            </tr>
            <% for(let details of Entity['Invoice Details']) {%>
            <tr class="item">
              <td><%= details['Service Date'] %></td>
              <td><%= details['Service'] %></td>
              <td><%= details['Hours'] %></td>
              <td>$<%= parseFloat(details['Amount']).toFixed(2) %></td>
            </tr>
      <%}%>
          </table>
        </td>
      </tr>


<%
    const fibery = context.getService('fibery');
    const entityDeets = await fibery.getEntityById(Entity.Type, Entity.Id, ['Invoice Subtotal', 'Invoice Tax', 'Invoice Total']);

    
let subtotal = entityDeets['Invoice Subtotal'];
let tax = entityDeets['Invoice Tax'];
let total = entityDeets['Invoice Total'];

let subtotalr = parseFloat(subtotal).toFixed(2);
let taxr = parseFloat(tax).toFixed(2);
let totalr = parseFloat(total).toFixed(2);

%>

        <tr class="subtotal">
        <td> Subtotal: $<%= subtotalr %></td>
        </tr>

	<tr class="tax">
       <td> Tax: $<%= taxr %></td>
        </tr>

	<tr class="total">
        <td>Total: $<%= totalr %></td>
        </tr>
		
        <tr>
	<td class="rendered"><b>Services Rendered</b></td>
	</tr>
	
	<tr>
	<td>{{Description}}</td>
	</tr>
    </table>
</div>
</body>
</html>

Comes out looking something like this.

5 Likes

Nice work @cssrctech !

Is there a trick for this when your field name is multiple words? For example ‘Total Amount’. I’ve tried various options, but it keeps getting rejected.

Try replacing Entity.Amount with Entity['Total Amount']

1 Like

Perfect! Thank you Chris!