Order Invoiced Stylesheet

This page provides the Liquid Stylesheet O2C - View Order Invoice for the JSON Order Invoiced messages (Step 7) in the Order-to-Cash demo.

The JSON Order Invoice message rendered as an invoice: bill-to with e-mail, invoice and due dates, payment terms and method, the invoice lines with tax, and the totals.

Let finance read the invoice the customer got. With Nodinite Stylesheets, the last message of the order reads as an invoice, so finance can answer a billing question without the ERP. On this page, you will:

• ✅ Transform the JSON Order Invoice message into an invoice with Liquid
• ✅ Show the invoice lines with tax, and the subtotal, shipping, tax, and total rows
• ✅ Open the invoice from Log Views and from BPM Log Search ^{New 7.11}

Understanding the Order Invoiced Stylesheet

A Stylesheet is tied to a Message Type. The business Log Event of Step 7, Order Invoiced, carries the Message Type O2C.Order.Invoice/1.0, so Nodinite offers O2C - View Order Invoice for it. With Message Body is Json checked, Nodinite parses the JSON body and hands its properties to the template as variables, such as invoiceId and invoiceItems.

The Order Invoiced Log Event (blue) is matched to its Message Type (purple); the Liquid Stylesheet (teal) renders the invoice (green), which users open from a Log View or from BPM Log Search (blue).

Where Users Open the Invoice

The dialog is titled View message body formatted as 'O2C - View Order Invoice' and has the buttons Open in New Window, Print, and Close. The forwarding event of the step, Invoice Request Received, logs O2C.Forwarding/1.0, so this Stylesheet isn't offered there.

Stylesheet Settings

Important

With Message Body is Json unchecked, the template still renders, but every field is empty: the heading reads Invoice, the subtitle Order · PO, and the total row Total ().

Input JSON

The Order Invoice body of order 1 as logged by the demo data script, the same message as on the Step 7 page.

{
  "invoiceId": "INV-2025-10001",
  "orderId": "ORD-10001",
  "customerId": "CUST-001",
  "customerName": "Contoso Corporation",
  "customerEmail": "orders@Contoso.example.com",
  "invoiceDate": "2025-10-21T09:15:00Z",
  "dueDate": "2025-11-20",
  "paymentTerms": "NET30",
  "invoiceStatus": "ISSUED",
  "invoiceItems": [
    {
      "lineNumber": 1,
      "description": "Demo Widget",
      "sku": "SKU-DEMO-001",
      "quantity": 1,
      "unitPrice": 99.95,
      "lineTotal": 99.95,
      "taxCode": "STANDARD",
      "taxRate": 0.0,
      "taxAmount": 0.0
    }
  ],
  "subtotal": 99.95,
  "taxTotal": 0.0,
  "shippingCharge": 0.0,
  "invoiceTotal": 99.95,
  "currency": "USD",
  "paymentMethod": "INVOICE",
  "purchaseOrder": "PO-2025-10001",
  "trackingNumber": "TRK-20251016-10001",
  "gl_account": "4100-Sales-Revenue",
  "revenue_recognition_date": "2025-10-20"
}

The property order varies between runs, because the script serializes a PowerShell hashtable; Liquid reads properties by name, so the order doesn't matter.

JSON to Invoice Mapping

The JSON parser normalizes dates and numbers before Liquid sees them: 2025-10-21T09:15:00Z shows as 2025-10-21 09:15:00, and 1245.0 shows as 1245. To print amounts with two decimals, see Amounts with two decimals. trackingNumber, gl_account, revenue_recognition_date, and the tax code and rate are not displayed.

Liquid Template

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container mt-4">
  <div class="row align-items-center mb-3">
    <div class="col">
      <h1 class="mb-0">Invoice {{ invoiceId }}</h1>
      <span class="text-muted">Order {{ orderId }} &middot; PO {{ purchaseOrder }}</span>
    </div>
    <div class="col text-right">
      <span class="badge badge-info">{{ invoiceStatus }}</span>
    </div>
  </div>
  <table class="table">
    <thead>
      <tr><th>Bill to</th><th>Invoice Date</th><th>Due Date</th><th>Terms</th><th>Payment</th></tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>{{ customerName }}</strong><br/><span class="text-muted">{{ customerId }}</span><br/><a href="mailto:{{ customerEmail }}">{{ customerEmail }}</a></td>
        <td>{{ invoiceDate }}</td>
        <td>{{ dueDate }}</td>
        <td>{{ paymentTerms }}</td>
        <td>{{ paymentMethod }}</td>
      </tr>
    </tbody>
  </table>
  <h5 class="mt-4">Invoice Lines</h5>
  <table class="table table-sm">
    <thead>
      <tr><th>Line</th><th>SKU</th><th>Description</th><th class="text-center">Qty</th><th class="text-right">Unit Price</th><th class="text-right">Tax</th><th class="text-right">Line Total</th></tr>
    </thead>
    <tbody>
      {%- for item in invoiceItems -%}
      <tr><td>{{ item.lineNumber }}</td><td>{{ item.sku }}</td><td>{{ item.description }}</td><td class="text-center">{{ item.quantity }}</td><td class="text-right">{{ item.unitPrice }}</td><td class="text-right">{{ item.taxAmount }}</td><td class="text-right">{{ item.lineTotal }}</td></tr>
      {%- endfor -%}
    </tbody>
    <tfoot>
      <tr><td colspan="6" class="text-right">Subtotal</td><td class="text-right">{{ subtotal }}</td></tr>
      <tr><td colspan="6" class="text-right">Shipping</td><td class="text-right">{{ shippingCharge }}</td></tr>
      <tr><td colspan="6" class="text-right">Tax</td><td class="text-right">{{ taxTotal }}</td></tr>
      <tr><th colspan="6" class="text-right">Total ({{ currency }})</th><th class="text-right">{{ invoiceTotal }}</th></tr>
    </tfoot>
  </table>
  <div class="mt-5 pt-3 border-top text-center text-muted"><small>Rendered by a Nodinite Stylesheet (Liquid) from the Order Invoice message</small></div>
</div>

Next Steps

• View all O2C stylesheets — Every demo Stylesheet and its settings
• Generate O2C Demo Data — Create test messages for this Stylesheet
• Search log events from a BPM — Read the whole order, step by step

Related Topics

• Order Shipped Stylesheet
• 7. Order Invoiced — The step this message belongs to
• What is a Stylesheet?
• Add or manage Stylesheet
• Message Types