- 0 minutes to read

New 6.1.0.112 New 7.x

Line break an EDIFACT/X12 message in Nodinite Log View

Transform dense, single-line EDI messages into readable output with Nodinite Liquid Stylesheets. Operators and integrators gain instant visibility into EDIFACT and X12 message structure, eliminating the need to copy messages into external tools for inspection. On this page, you will learn how to create a Liquid stylesheet that presents EDI segments line-by-line directly in Log Views for faster troubleshooting and validation.

Benefits:

  • ✅ Faster troubleshooting — present segment-per-line output for quick scanning.
  • ✅ Reduced cognitive load — show business-level segments instead of a single dense line.
  • ✅ Easier validation — terminators remain visible to speed protocol checks.

This page shows a minimal, working Liquid stylesheet that turns a single-line EDIFACT or X12 message into a readable, line-broken view in a Nodinite Log Views. Keep the message short here — put larger templates in a separate download if needed. See the Stylesheets overview for management and deployment details.

flowchart LR EDIFACT[EDIFACT Message] --> Stylesheet[Liquid Stylesheet in Log View] X12[X12 Message] --> Stylesheet Stylesheet --> Output[User-friendly output with line breaks]

Message Body Processing Options

⚠️ CRITICAL: This controls whether you use Liquid variables or JavaScript parsing.

On the Stylesheet management page, the Message Body is Json checkbox determines how data is accessed:

☑️ When CHECKED: "Message Body is Json"

  • Nodinite parses JSON and injects properties as direct Liquid variables
  • Access via: {{ orderId }}, {{ customer.name }}, {{ items | size }}
  • Use Liquid syntax: {%- for item in items -%}
  • Simple, performant, recommended for JSON data
  • Example: 1-Order-Received.md in the O2C demo

☐ When UNCHECKED: "Message Body is NOT Json"

  • Message body is treated as raw string accessible via {{data}}
  • Manipulate with string transformations: .replace(/'/g,"'\n")
  • Requires JavaScript parsing for complex data: JSON.parse(dataStr)
  • Use this for EDI (EDIFACT, X12), XML, CSV, or other non-JSON formats
  • This is the EDIFACT stylesheet approach shown below

Important

For EDIFACT and X12 messages, you MUST uncheck "Message Body is Json". These are plain text formats with segment terminators, not JSON. With the checkbox unchecked, the raw EDI message is available via {{data}} for string manipulation.

EDIFACT Message Examples

  • Segment terminator is an apostrophe ' character.
UNB+UNOB:1+SENDER1:1+RECEIVER1:1+071101:1701+131++INVOIC++1++1' UNG+INVOIC+2:1+3:4+971013:1040+5+UN+D:96A:UN+PASSPORT' UNH+509010117+INVOIC:D:96A:UN' BGM+380+IN432097' DTM+137:20020308:102' PAI+::42' RFF+ON:ORD9523' DTM+171:20020212:102' RFF+PL:PL99523' DTM+171:20020101:102' RFF+DQ:53662' DTM+171:20020215:102' NAD+BY+5412345000013::9' RFF+VA:4146023' NAD+SU+4012345500004::9' RFF+VA:VR12345' NAD+DP+5412345678908::9' CUX+2:EUR:4' PAT+1++5:3:M:2' PAT+22++5:3:D:10' PCD+12:2.5:13' ALC+C++6++FC' MOA+23:120' TAX+7+VAT+++:::19+S' MOA+124:22.80' LIN+1++4000862141404:SRS' QTY+47:40' MOA+203:2160' PRI+AAB:60:CA' TAX+7+VAT+++:::21+S' MOA+124:453.60' ALC+A' PCD+1:10' LIN+2++5412345111115:SRS' QTY+46:5' QTY+47:12.65:KGM' MOA+203:2530' PRI+AAA:200:CA::1:KGM' TAX+7+VAT+++:::19+S' MOA+124:480.70' UNS+S' CNT+2:2' MOA+86:5767.10' MOA+79:4690' MOA+129:5767.10' MOA+125:4810' MOA+176:957.10' MOA+131:120' TAX+7+VAT+++:::19+S' MOA+124:503.50' TAX+7+VAT+++:::21+S' MOA+124:453.60' ALC+C++++FC' MOA+131:120' UNT+53+509010117' UNE+1+5' UNZ+2+131'

X12

  • Segment terminator is a tilde ~ character.
ISA*00*00*00*00*ZZ*SENDERID*ZZ*RECEIVERID*210101*1200*U*00401*000000001*0*P*>~GS*IN*SENDERID*RECEIVERID*20210101*1200*1*X*004010~ST*810*0001~

How it works

The Stylesheet replaces the common segment terminators with a visible line break while keeping the terminator intact.

<textarea rows="50" cols="50" style="border: none;outline: none;" id="demo"> </textarea>
    <pre id="demoprint" style="margin:0; padding:0; border:none; display:none;"></pre>
    <script>
        var editor;
        function codemirroreditor(elem) {
            var mime = 'application/xml';
             editor = CodeMirror.fromTextArea(elem, {
                lineNumbers: true,
                mode: mime,
                indentWithTabs: true,
                smartIndent: true,
                lineNumbers: true,
                matchBrackets: true,
                lineWrapping: true,
                autofocus: true,
                autoRefresh: true,
                extraKeys: { "Ctrl-Space": "autocomplete" }
            });
        }
        var content = `{{data}}`.replace(/'/g,"'\n");
      
        function displayXml() {
            var elem = document.getElementById('demo');
            elem.value = content;
            codemirroreditor(elem);
        };

        function htmlEntities(str) {
            var htmlString = String(str).replace(/&/g, '&amp;').replace(/</g,'&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
            return htmlString;
        }
        
        window.addEventListener('beforeprint', (event) => {
            $(editor.getWrapperElement()).hide();
            $("#demoprint").html(htmlEntities(content)).show();
        });
        
        window.addEventListener('afterprint', (event) => {
            $(editor.getWrapperElement()).show();
            $("#demoprint").hide();
        });

        displayXml();
        </script>

<style>
  html {height:calc(100vh - 200px); min-height:500px;}
  body {height:100%;}
  .CodeMirror {
    min-height: 200px;
    height: 100%;
  }
</style>

Example of a liquid Stylesheet to line break EDIFACT/X12 messages in a Nodinite Log View:

Notes

  • Remember to uncheck "Message Body is Json" on the Stylesheet management page so the EDI message is accessible via {{data}} (see Message Body Processing Options above)
  • The template uses {{body}} as the variable name in the JavaScript—this is a client-side variable, not related to the Liquid {{data}} variable
  • The stylesheet keeps segment terminators (' for EDIFACT or ~ for X12) visible. If you prefer to remove them, change .replace(/'/g,"'\n") to .replace(/'/g,"\n") for EDIFACT, or use /~/g for X12
  • For X12 messages, modify line 97 to: var content = \{{data}}`.replace(//g,"\n");`
  • The CodeMirror editor provides syntax highlighting and is configured for XML mode—adjust the mime variable if needed for your use case
  • Log Views — overview and features for creating role-specific Log Views
  • Stylesheets — overview of stylesheet features and management

Next Step