- 0 minutes to read

Order Received Stylesheet

This page provides a Liquid stylesheet for displaying Order Received messages (Step 0) in the Order-to-Cash demo.

Render JSON order data into formatted, business-friendly reports. With Nodinite Liquid stylesheets, operators and business users gain instant visibility into order-to-cash messages without external tools. On this page, you will:

  • ✅ Transform raw JSON order messages into formatted table layouts
  • ✅ Display order headers, customer details, and line items with professional styling
  • ✅ Access order data directly via Liquid variables when "Message Body is Json" is enabled

This stylesheet transforms the JSON order reception message into a user-friendly table format showing order header details, customer information, and line items. For more information about Stylesheets, see the documentation.

Configuration: Ensure "Message Body is Json" is CHECKED in Log View Settings.

Input JSON 

{
  "generatedAt": "2025-10-24T06:00:00.0000000Z",
  "currency": "USD",
  "batchId": "batch-2025-10-14-001",
  "orderDate": "2025-10-24T06:00:00.0000000Z",
  "orderId": "ORD-10001",
  "orderTotal": 99.95,
  "orderRows": [
    {
      "rowId": 1,
      "lineTotal": 99.95,
      "unitPrice": 99.95,
      "quantity": 1,
      "sku": "SKU-DEMO-001",
      "description": "Demo Widget"
    }
  ],
  "customer": {
    "customerId": "CUST-001",
    "name": "Acme Corporation",
    "email": "orders@acme.example.com"
  }
}

Liquid Template 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&display=swap" rel="stylesheet">
<style>
  .barcode {
    font-family: 'Libre Barcode 39 Text', cursive;
    font-size: 22px;
  }
</style>

<div class="container mt-4">
  <div class="row">
    <div class="col text-center">
      <img src="https://download.nodinite.com/public/logogoeshere.png" style="width: 200px; margin-bottom: 20px;" alt="Company Logo" />
    </div>
  </div>

  <h1>Order Report</h1>
  
  <table class="table">
    <thead>
      <tr>
        <th>Order ID</th>
        <th>OCR</th>
        <th>Customer</th>
        <th>Order Date</th>
        <th>Rows</th>
        <th class="text-right">Amount ({{ currency }})</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>{{ orderId }}</strong></td>
        <td class="barcode">{{ orderId }}</td>
        <td>
          <strong>{{ customer.name }}</strong><br/>
          <span class="text-muted">{{ customer.customerId }}</span><br/>
          <a href="mailto:{{ customer.email }}">{{ customer.email }}</a>
        </td>
        <td>{{ orderDate }}</td>
        <td>{{ orderRows | size }}</td>
        <td class="text-right"><strong>{{ orderTotal }}</strong></td>
      </tr>
    </tbody>
  </table>

  <div class="mt-3">
    <small class="text-muted">
      <strong>Batch ID:</strong> {{ batchId }}
    </small>
  </div>

  {%- if orderRows.size > 0 -%}
  <h5 class="mt-4">Order 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">Line Total</th>
      </tr>
    </thead>
    <tbody>
      {%- for row in orderRows -%}
      <tr>
        <td>{{ row.rowId }}</td>
        <td>{{ row.sku }}</td>
        <td>{{ row.description }}</td>
        <td class="text-center">{{ row.quantity }}</td>
        <td class="text-right">{{ row.unitPrice }}</td>
        <td class="text-right">{{ row.lineTotal }}</td>
      </tr>
      {%- endfor -%}
    </tbody>
  </table>
  {%- endif -%}

  <div class="mt-5 pt-3 border-top text-center text-muted">
    <small>©2025 Nodinite. All rights reserved</small>
  </div>
</div>

Next Steps