Order Received Stylesheet

This page provides the Liquid Stylesheet O2C - View Order for the Order Received messages (Step 0) in the Order-to-Cash demo.

The Order Received JSON message rendered as an Order Report: order header, customer, amount, barcode, and order lines.

Render JSON order data into formatted, business-friendly reports. With Nodinite Stylesheets, operators and business users read an order as a document instead of raw JSON, without external tools. On this page, you will:

• ✅ Transform raw JSON order messages into a formatted Order Report
• ✅ Display the order header, customer details, and line items with Bootstrap styling and a barcode
• ✅ Open the same Order Report from Log Views and from BPM Log Search ^{New 7.11}

Understanding the Order Received Stylesheet

A Stylesheet is tied to a Message Type. Every Order Received Log Event in the demo carries the same Message Type, so Nodinite offers the O2C - View Order Stylesheet for each of them. Because the Stylesheet has Message Body is Json checked, Nodinite parses the JSON body and hands its properties to the Liquid template as variables.

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

Where Users Open the Order Report

Users only see the Order Report for events in Log Views their role can use; BPM Log Search searches in those same Log Views.

Stylesheet Settings

Important

Message Body is Json is a setting on the Stylesheet, not on the Log View. With it unchecked, the variables are empty and the Order Report shows blank fields.

Input JSON

The Order Received body as logged by the demo data script (a recent run). generatedAt and orderDate are set to the day of the run at 06:00 UTC, and orderId increases per order.

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

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

JSON to Order Report Mapping

generatedAt is not displayed.

Liquid Template

The template uses Bootstrap 4 for the table layout and the Libre Barcode 39 Text font for the barcode.

<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

• View all O2C stylesheets — Complete stylesheet reference for all demo messages
• Generate O2C Demo Data — Create test messages for this stylesheet
• Search log events from a BPM — Open the Order Report from BPM Log Search

Related Topics

• What is a Stylesheet?
• Add or manage Stylesheet
• Log Views
• Message Types
• Order Received Message Type — First message in the order-to-cash call chain