Why are comma's not showing in UI Page?

Nic Omaha
Tera Guru

I have a UI page that generates a purchase order. For some reason the comma is not showing in the UI page. I have tried everything and can not figure out why?  The fields are currency fields. Example and code below

NicOmaha_0-1706121932000.png

NicOmaha_1-1706121959565.png

<?xml version="1.0" encoding="UTF-8"?>
<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null" trim="false">
  <style type="text/css">
    table, td {
      border-color:#000;
      border-style:solid;
    }

    table {
      border-collapse:collapse;
      border-spacing:0;
      border-width:0 0 1px 1px;
      margin-top:14px;

    }
     
    td {
      border-width:1px 1px 0 0;
      margin:0;
      padding:4px;
      vertical-align:bottom;
    }
   

    table.borderless, table.borderless td {
      border:0px;
      border-style:none;
    }

    table.borderAroundMe {
      border:1px;
      border-style:solid;
    }
    
    td.header {
      background-color:#49E227; 
      font-weight:bold;
    }
    
    .center {
      text-align:center;
    }

    @media print {
      html, body {
        margin:0;
        padding:0;
      }
      br.page-break {
        display:block;
        page-break-before:always;
      }
      table {
        page-break-after:auto;
      }
      tr {
        page-break-inside:avoid;
        page-break-after:auto
      }
      td {
        page-break-inside:avoid;
        page-break-after:auto
      }
      thead {
        display:table-header-group
      }
      tfoot {
        display:table-footer-group
      }
      img {
        display:block;
      }
      div.printPage {
        position:relative;
        page-break-inside:avoid;
        page-break-after:auto;
        height:100%;
        width:100%;
      }
      table.footer {
        position:absolute;
        bottom:0;
      }
    }

    @page{
      margin:80px auto;
    }
  </style>
  <g:evaluate>
    var po = new GlideRecord('proc_po');
    po.get('${sysparm_id}');

    var poLine = new GlideRecord('proc_po_item');
    poLine.addQuery('purchase_order','${sysparm_id}');
    poLine.orderBy('number');
    poLine.query();
    var twoPage = poLine.getRowCount() > 22;
    var startTwoPage = '<div class="printPage">';
    var endTwoPage = '</div>';

    var arr=[];
   
    var totalCost = 0;
    var shipping = 0;
    var subTotal = 0;
    var grandTotal = 0;
    var theDate = N.formatDate(gs.now(), "yyyy-MM-dd", "MM/dd/yyyy")
    var deliveryDate = po.po_date.toString().substring(0,10);
  </g:evaluate>
  <j:if test="${twoPage}">
  ${startTwoPage}
  </j:if>
    <table class="borderless" width="100%">
      <tr>
        <td />
        <br />
      </tr>
    </table>
    <div style="float:left; width:50%;">
      <g:evaluate var="jvar_instance_name">
        gs.getProperty('instance_name', '');
      </g:evaluate>
      <g:evaluate var="jvar_pricomp" object="true">
        var pricomp = new GlideRecord('core_company');
        pricomp.get('primary', true);
        pricomp;
      </g:evaluate>
      <img src="https://${jvar_instance_name}.service-now.com/${jvar_pricomp.getDisplayValue('banner_image')}" style="visibility: visible;" />
    </div>
    <div style="float:right; width:50%;">
      <table class="borderless" style="float:right;">
        <tr>
          <td colspan="2">
            <table style="border-style:inset; border-width:medium;">
              <tr>
                <td>
                  <font size="4">
                    <b>PO #: ${HTML:po.number}</b>
                  </font>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <b>P.O. Date:</b>
          </td>
          <td>${HTML:po.po_date.toString().substring(0,10)}</td>
        </tr>
      </table>
    </div>
    <table class="borderless" width="100%">
      <tr>
        <td />
      </tr>
    </table>
    <table class="borderless" width="100%" align="center" cellspacing="0" cellpadding="0">
      <tr>
        <td />
      </tr>
      <tr>
        <td width="10%">
          <b>Bill To:</b>
        </td>
        <td width="40%">
          <b>Nebraska Furniture Mart</b>
        </td>
        <td width="10%">
          <b>Ship To:</b>
        </td>
        <td width="40%">
			<b>${HTML: po.ship_to.name}</b>
        </td>
      </tr>
      <tr>
        <td width="10%" />
		  <td width="40%"><b>PO Box 12345</b></td>
        <td width="10%" />
		  <td width="40%"><b>${HTML:po.ship_to.location.street}</b></td>
      </tr>
      <tr>
        <td width="10%" />
		  <td width="40%"><b>Omaha, Ne 68103</b></td>
        <td width="10%" />
		  <td width="40%"><b>${HTML:po.ship_to.location.city} ${HTML:po.ship_to.location.state} ${HTML:po.ship_to.location.zip}</b></td>
 </tr>
      <tr>
		  <b>****Please email all invoices to invoices@test.com**** </b>
        <td width="10%" />
        <td width="40%" />
        <td width="10%">
          <b>GL Account:</b>
        </td>
        <td width="40%">${HTML:po.budget_number}</td>
      </tr>
    </table>
    <table class="borderless" style="border-style:solid; border-width:1px;" width="100%" align="center" cellspacing="0" cellpadding="0">
      <tr>
        <td width="10%">
          <b>Vendor:</b>
        </td>
        <td width="40%">
          <b>${HTML:po.vendor.name}</b>
        </td>
        <td width="10%">
          <b>Address:</b>
        </td>
        <td width="40%">${HTML:po.vendor.street}</td>
      </tr>
      <tr>
        <td width="10%">
          <b>Contact:</b>
        </td>
		  <td width="40%">${HTML:po.vendor.u_contact_person}</td>
        <td width="10%" />
        <td width="40%">${HTML:po.vendor.city}</td>
      </tr>
      <tr>
        <td width="10%">
          <b>Terms:</b>
        </td>
        <td width="40%">${HTML:po.terms}</td>
        <td width="10%" />
        <td width="40%">${HTML:po.vendor.state} ${HTML:po.vendor.zip}</td>
      </tr>
      <tr>
        <td width="10%">
          <b>Phone:</b>
        </td>
        <td width="40%">${HTML:po.vendor.phone}</td>
        <td width="10%" />
        <td width="40%" />
      </tr>
      <tr>
        <td width="10%">
          <b>Email:</b>
        </td>
        <td width="40%">${HTML:po.vendor.u_email}</td>
        <td width="10%" />
        <td width="40%" />
      </tr>
    </table>
    <br />
    <table id="polines" width="100%" align="center" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <td class="header center" colspan="1">Product Description</td>
          <td class="header center" colspan="1">Part Number</td>
          <td class="header center" colspan="1">Qty</td>
          <td class="header center" colspan="1">Price</td>
          <td class="header center" colspan="1">Extended</td>
        </tr>
      </thead>
      <j:while test="${poLine.next()}">
        <g:evaluate>poLineCost = poLine.cost == '' ? 0.00 : poLine.cost;
          poLineCost = parseInt(poLineCost*100)/100;
          poLineTotalCost = poLine.total_cost == '' ? 0.00 : poLine.total_cost;
          poLineTotalCost = parseInt(poLineTotalCost*100)/100;
          subTotal = parseInt((subTotal*100) + (poLineTotalCost*100))/100;</g:evaluate>
        <tr>
          <td width="50%" align="left">${HTML:poLine.model.getDisplayValue()}</td>
          <td width="20%" align="left">${HTML:poLine.part_number}</td>
          <td width="10%" align="center">${HTML:poLine.ordered_quantity}</td>
          <td width="10%" align="right">${'$'+poLineCost.toFixed(2)}</td>
          <td width="10%" align="right">${'$'+poLineTotalCost.toFixed(2)}</td>
        </tr>
      </j:while>
      <g:evaluate>
          shipping = po.ship_rate == '' ? 0.00 : po.ship_rate;
          shipping = parseInt(shipping*100)/100;
          grandTotal = po.total_cost == '' ? 0.00 : po.total_cost;
          grandTotal = parseInt(grandTotal*100)/100;</g:evaluate>
      <tr>
        <td align="right" colspan="4">
          <b>SubTotal</b>
        </td>
        <td align="right">
          <b>${'$' + subTotal.toFixed(2)}</b>
        </td>
      </tr>
      <tr>
        <td align="right" colspan="4">
          <b>Shipping Rate</b>
        </td>
        <td align="right">
          <b>${'$'+shipping.toFixed(2)}</b>
        </td>
      </tr>
		<tr>
        <td align="right" colspan="4">
          <b>Labor</b>
        </td>
        <td align="right">
          <b>${'$'+po.u_labor}</b>
        </td>
      </tr>
		<tr>
        <td align="right" colspan="4">
          <b>Discount</b>
        </td>
        <td align="right">
          <b>${'$'+po.u_discount}</b>
        </td>
      </tr>
		 <tr>
        <td align="right" colspan="4">
          <b>Tax</b>
        </td>
        <td align="right">
          <b>${'$'+po.u_tax}</b>
        </td>
      </tr>
      <tr>
        <td align="right" colspan="4">
          <b>Grand Total</b>
        </td>
        <td align="right">
          <b>${'$'+grandTotal.toFixed(2)}</b>
        </td>
      </tr>
    </table>
    <br />
    <table class="borderless" width="100%" align="center" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100%" align="left">
			<b>Comments / Required For:</b>
        </td>
      </tr>
      <tr>
        <td width="100%" align="left">
          <b>${HTML:po.description}</b>
        </td>
      </tr>
    </table>
    <br />
  <j:if test="${twoPage}">
  ${endTwoPage}
  </j:if>
</j:jelly>

 

 

2 REPLIES 2

BalaG
Kilo Sage

Hello @Nic Omaha as far I know variable replacement  on a UI Page does just that, i.e replaces variable with it's value, Any formatting has to be explicitly done by you.  Here is a reference to an earlier post that describes how you can add commas to a number

 

https://www.servicenow.com/community/developer-forum/i-want-to-add-a-comma-to-the-decimal-item-and-d...

 

https://www.hashbangcode.com/article/format-numbers-commas-javascript

 

Hope this helps

--

Bala Guthy

Please mark this as a solution or helpful as appropriate

Amit Verma
Kilo Patron
Kilo Patron

Hi @Nic Omaha 

 

Please refer below posts which could be helpful :

https://www.servicenow.com/community/developer-forum/show-commas-in-numeric-value-in-the-service-cat...

https://www.servicenow.com/community/developer-forum/displaying-currency-values-via-ui-page/m-p/1559...

 

Thanks & Regards

Amit Verma


Please mark this response as correct and helpful if it assisted you with your question.