Define Presentation Template
Intelligent Track and Trace enables you to view the transaction source document data in an easy to read rich text format.
A presentation template defines the rich text view structure of the document using HTML tags. This template is then applied to every incoming document to generate a rich text view as defined in the HTML structure.
All the preseeded document types have a predefined presentation template. For any new document types, you should provide a presentation template definition to generate a rich text view of the source document.
To define a presentation template, you must have a basic understanding of HyperText Markup Language (HTML) and how to construct a basic HTML document using supported elements and attributes.
Presentation Template Structure
Presentation template has an HTML document structure. Intelligent Track
and Trace currently supports a limited set of HTML elements listed in the following
table.
Note: When you define a
presentation template you must only use the HTML elements and attributes listed
the following table.
| Tag | Description |
|---|---|
| Block Elements | |
| <p> | Defines a paragraph. |
| <div> | Defines a section in a document |
| <h1> to <h6> | Defines HTML headings |
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <blockquote> | Defines a section that is quoted from another source |
| Inline Elements | |
| <a> | Defines a hyperlink in a text or image format to link one page to another |
| Formatting Elements | |
| <b> | Defines bold text |
| <i> | Defines a part of text in an alternate voice or mood |
| <font> | Defines font, color, and size for text |
| <s> | Defines text that is no longer correct |
| <u> | Defines text that should be stylistically different from normal text |
| <sup> | Defines superscripted text |
| <sub> | Defines subscripted text |
| <ins> | Defines a text that has been inserted into a document |
| <del> | Defines text that has been deleted from a document |
| <strong> | Defines important text |
| <strike> | Defines strikethrough text |
| <tt> | Defines teletype text |
| <code> | Defines a piece of code |
| <big> | Defines big text |
| <small> | Defines smaller text |
| <br> | Defines single line break |
| <span> | Defines a section in a document |
| <em> | Defines emphasized text |
| Table Elements | |
| <table> | Defines a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <th> | Defines a header cell in a table |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <caption> | Defines a table caption |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
| Style and Semantics Elements | |
| Flex layout | Provides complete control over the alignment, direction, order, and size of content. |
Alongside the HTML tags, you can also use helper functions About Handlebar Helpers to define the presentation template.
Once the presentation template is defined, you can upload it to Intelligent Track and Trace by following the instructions provided in Create a New Document Type.
Usage Example
The following is a sample presentation template for a pre-seeded document type PO ACK. If you define a presentation template for your custom document types, you can refer to the presentation templates of any of the pre-seeded documents.
<!DOCTYPE html>
{{#*inline "bodyStyle"}}
background-color: rgba(255, 255, 255, 0.877);
padding: 5px;
{{/inline}}
{{#*inline "tdStyle"}}
color: rgb(61,53,177);
font-size: 12px;
font-weight: bold;
padding-left: 10px;
{{/inline}}
{{#*inline "thStyle"}}
color: rgb(8, 8, 8);
background-color: rgb(199, 199, 199);
text-align: left;
padding: 10px;
{{/inline}}
{{#*inline "numberValueStyle"}}
padding-right: 10px;
{{/inline}}
{{#*inline "valueStyle"}}
color: rgb(61,53,177);
font-size: 12px;
font-weight: bold;
padding-left: 5px;
font-family: monospace;
{{/inline}}
{{#*inline "labelStyle"}}
color: rgb(6, 2, 17);
font-size: 14px;
padding: 5px;
{{/inline}}
<!-- Main container -->
<div style="{{>bodyStyle}}">
<!-- Outermost container -->
<div style="display: flex; flex-direction: column;">
<!-- Titles container -->
<div style="display: flex; flex-direction: row;">
<div style="flex-grow: 3;">
<span style="color: red; font-size: 20px;">Oracle</span>
</div>
<div style="flex-grow: 1; text-align: right;">
<span style="color: rgb(43, 43, 46); font-size: 24px">Order Confirmation</span>
</div>
</div>
<!-- Main body container -->
<div style="display: flex; flex-direction: row; justify-content: space-between;">
<!-- Ship To -->
<div style="display: flex; flex-direction: row; justify-content: right">
<div style="min-height: 100px; border: 1px solid; border-radius: 10px; border-color:rgb(5, 2, 44); justify-content:center; width: 300px;">
<div style="display: flex; {{>labelStyle}}">
<div style="flex: 0 0 400px;">Ship To</div>
</div>
<div style="display: flex; {{>valueStyle}}">
<div style="flex: 0 0 400px;">{{{document.result.shipToLocationName}}}</div>
</div>
<div style="display: flex; {{>valueStyle}}">
<div style="flex: 0 0 400px;">{{{document.result.soldToLeAddressLine1}}}</div>
</div>
<div style="display: flex; {{>valueStyle}}">
<div style="flex: 0 0 400px;">{{{document.result.soldToLeTownOrCity}}} {{{document.result.soldToLeStateProvn}}} {{{document.result.soldToLePostalCode}}}</div>
</div>
</div>
</div>
<!-- Bill To -->
<div style="display: flex; flex-direction: row; justify-content: right;">
<div style="min-height: 100px; border: 1px solid; border-radius: 10px; border-color:rgb(5, 2, 44); justify-content:center; width: 300px;">
<div style="display: flex; {{>labelStyle}}" ;>
<div style="flex: 0 0 400px;">Bill To</div>
</div>
<div style="display: flex;{{>valueStyle}}" ;>
<div style="flex: 0 0 400px;">{{{document.result.billToBuName}}}</div>
</div>
<div style="display: flex; {{>valueStyle}}">
<div style="flex: 0 0 400px;">{{{document.result.soldToLeAddressLine1}}}</div>
</div>
<div style="display: flex; {{>valueStyle}}">
<div style="flex: 0 0 400px;">
{{{document.result.soldToLeTownOrCity}}} {{{document.result.soldToLeStateProvn}}} {{{document.result.soldToLePostalCode}}}
</div>
</div>
</div>
</div>
<!-- Document number and date -->
<div style="display: flex; flex-direction: row; justify-content: right;">
<div style="border: 1px solid; border-radius: 10px; border-color:rgb(5, 2, 44); justify-content:center; width: 300px;">
<div style="display: flex;">
<div style="flex: 0 0 200px; {{>labelStyle}}">Order Date</div>
<div style="flex: 0 0 200px; {{>valueStyle}}">{{{document.result.poHeaderId}}}</div>
</div>
<div style="display: flex;">
<div style="flex: 0 0 200px; {{>labelStyle}}">Purchase Order Date</div>
<div style="flex: 0 0 200px; {{>valueStyle}}">{{{document.result.orderDateDisplay}}}</div>
</div>
<div style="display: flex;">
<div style="flex: 0 0 200px; {{>labelStyle}}">Customer Number</div>
<div style="flex: 0 0 200px; {{>valueStyle}}">{{{document.result.orderDateDisplay}}}</div>
</div>
<div style="display: flex;">
<div style="flex: 0 0 200px; {{>labelStyle}}">Buyer/Contact</div>
<div style="flex: 0 0 200px; {{>valueStyle}}">{{{document.result.orderDateDisplay}}}</div>
</div>
</div>
</div>
</div>
<!-- Header Container -->
<div style="display: flex; flex-direction:column; border: 1px solid; border-radius: 10px; border-color:rgb(5, 2, 44); min-height: 90px; margin-top: 10px;">
<div style="text-align: center;">
<h1>ACKNOWLEDGEMENT AND ACCEPTANCE OF ORDER</h1>
</div>
<!-- Items container -->
<div style="display: flex; flex-direction:column; min-height: 90px;">
<table style="border-collapse: collapse;">
<thead>
<tr>
<th style="{{>thStyle}}">Quantity</th>
<th style="{{>thStyle}}">Description</th>
<th style="{{>thStyle}}">Item #</th>
<th style="{{>thStyle}}">Unit Price</th>
<th style="{{>thStyle}}">Unit</th>
<th style="{{>thStyle}}">Total</th>
</tr>
</thead>
<tbody>
{{#each document.result.pdfDraftPurchaseOrderLine as |item n|}}
<tr>
<td style="{{>tdStyle}}">{{{item.itemNumber}}}</td>
<td style="{{>tdStyle}}">{{{item.itemDescription}}}</td>
<td style="{{>tdStyle}} {{>numberValueStyle}}">{{{item.quantity}}}</td>
<td style="{{>tdStyle}}">{{{item.uomCode}}}</td>
<td style="{{>tdStyle}} {{>numberValueStyle}}">{{{item.unitPrice}}}</td>
<td style="{{>tdStyle}}">{{{item.uomCode}}}</td>
<td style="{{>tdStyle}} {{>numberValueStyle}}">{{{item.unitPrice}}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<!-- Total line -->
<div style="display: flex; flex-direction: row; justify-content: right; margin-top: 5px;">
<div style="flex: 1 0 auto;"></div>
<div style="flex: 0 0 200px; border-top: 1px solid rgb(5, 2, 44); border-left: 1px solid rgb(5, 2, 44); justify-content:center;">
<div style="display: flex; align-content: space-between;">
<div style="{{>labelStyle}}flex: 1 0 50px; align-self: center;">Total</div>
<div style="{{>valueStyle}}flex: 1 0 auto; text-align: right; margin-right: 10px; align-self: center;">{{{document.result.ordered}}}</div>
</div>
<div style="display: flex;{{>valueStyle}}"></div>
</div>
</div>
</div>
</div>
</div>
Common Utility Helper Functions
As a founder admin, use the following helper functions to edit the presentation template of any pre-seeded or custom document type to generate the hyperlinks.
The rich text view of the transaction source document supports easy navigation to various data elements, such as serial-controlled, lot-controlled, or unassigned items, packages, and any other document associated to the business flow.
| Name | Argument | Description | Mandatory (Yes/No) |
|---|---|---|---|
itemUrl
|
Has two parameters with a value.
|
Navigate to any specific item type (lot-controlled or serial-controlled). | Yes |
itemTypeUrl
|
Has two parameters with a value.
|
Navigate to any specific item type. | Yes |
packageUrl
|
Has three parameters with a value.
|
Navigate to a specific package. | Yes |
documentUrl
|
Has a single parameter with a
value.
|
Navigate to an associated document. | Yes |
Note: For example:
Usage Example
In the following sample, line numbers 155 to 158 shows the helper functions used to generate the hyperlinks to the items, packages, and document for a custom document type Outbound Shipment.
1 {{#*inline "bodyStyle"}}
2 background-color: rgba(255, 255, 255, 0.877);
3 padding: 5px;
4 {{/inline}}
5
6 {{#*inline "tdStyle"}}
7 color: rgb(65,61,61);
8 font-size: 12px;
9 font-weight: bold;
10 padding-left: 10px;
11 {{/inline}}
12
13 {{#*inline "thStyle"}}
14 color: rgb(8, 8, 8);
15 background-color: rgb(199, 199, 199);
16 text-align: left;
17 padding: 10px;
18 {{/inline}}
19
20 {{#*inline "numberValueStyle"}}
21 padding-right: 10px;
22 {{/inline}}
23
24 {{#*inline "valueStyle"}}
25 color: rgb(44,43,43);
26 font-size: 12px;
27 font-weight: bold;
28 padding-left: 5px;
29 font-family: monospace;
30 {{/inline}}
31
32 {{#*inline "labelStyle"}}
33 color: rgb(6, 2, 17);
34 font-size: 14px;
35 padding: 5px;
36 {{/inline}}
37
38
39
40 <!-- Main container -->
41 <div style="{{>bodyStyle}}">
42 <!-- Outermost container -->
43 <div style="display: flex; flex-direction: column;">
44 <!-- Titles container -->
45 <div style="display: flex; flex-direction: row;">
46 <div style="flex-grow: 3;"><span style="color: red; font-size: 20px;">Oracle</span></div>
47 <div style="flex-grow: 1; text-align: right;">
48 <span style="color: rgb(43, 43, 46); font-size: 24px">Outbound Shipment</span>
49 </div>
50 </div>
51
52 <div style="display: flex; flex-direction: row; justify-content: space-between; margin-top: 10px;">
53 <!-- Ship To -->
54 <div style="display: flex; flex-direction: row; justify-content: right;">
55 <div
56 style="min-height: 200px; border: 1px solid; border-radius: 10px; border-color:rgb(5, 2, 44); justify-content:center; width: 400px;"
57 >
58 <div style="display: flex;">
59 <div style="flex: 0 0 200px; {{>labelStyle}}">Shipment Number</div>
60 <div style="flex: 0 0 200px; {{>valueStyle}}">{{{document.Shipment}}}</div>
61 </div>
62 <div style="display: flex;">
63 <div style="flex: 0 0 200px; {{>labelStyle}}">Ship by</div>
64 <div style="flex: 0 0 200px; {{>valueStyle}}">{{{document.LatestPickupDate}}}</div>
65 </div>
66 <div style="display: flex;">
67 <div style="flex: 0 0 200px; {{>labelStyle}}">Shipping Type</div>
68 <div style="flex: 0 0 200px; {{>valueStyle}}">{{{document.ShippingMethod}}}</div>
69 </div>
70
71 <div style="display: flex; {{>labelStyle}}">
72 <div style="flex: 0 0 400px;">Shipped From</div>
73 </div>
74 <div style="display: flex; {{>valueStyle}}">
75 <div style="flex: 0 0 400px;">{{{document.ShipFromAddress1}}}</div>
76 </div>
77 <div style="display: flex; {{>valueStyle}}">
78 <div style="flex: 0 0 400px;">{{{document.ShipFromAddress2}}}</div>
79 </div>
80 <div style="display: flex; {{>valueStyle}}">
81 <div style="flex: 0 0 400px;">{{{document.ShipFromAddress3}}}</div>
82 </div>
83 <div style="display: flex; {{>valueStyle}}">
84 <div style="flex: 0 0 400px;">{{{document.ShipFromAddress4}}}</div>
85 </div>
86 <div style="display: flex; {{>valueStyle}}">
87 <div style="flex: 0 0 400px;">{{{document.ShipFromCity}}} {{{document.ShipFromState}}} {{{document.ShipFromPostalCode}}}</div>
88 </div>
89 </div>
90 </div>
91
92 <!-- Document number and date -->
93 <div style="display: flex; flex-direction: row; justify-content: right;">
94 <div
95 style="border: 1px solid; border-radius: 10px; border-color:rgb(5, 2, 44); justify-content:center; width: 400px;"
96 >
97 <div style="display: flex;">
98 <div style="flex: 0 0 200px; {{>labelStyle}}">Ship Date</div>
99 <div style="flex: 0 0 200px; {{>valueStyle}}">{{{document.ActualShipDate}}}</div>
100 </div>
101 <div style="display: flex;">
102 <div style="flex: 0 0 200px; {{>labelStyle}}">Ship Mode</div>
103 <div style="flex: 0 0 200px; {{>valueStyle}}">{{{document.ModeOfTransport}}}</div>
104 </div>
105 <div style="display: flex; {{>labelStyle}}">
106 <div style="flex: 0 0 400px;">Shipped To</div>
107 </div>
108 <div style="display: flex; {{>valueStyle}}">
109 <div style="flex: 0 0 400px;">{{{document.ShipToAddress1}}}</div>
110 </div>
111 <div style="display: flex; {{>valueStyle}}">
112 <div style="flex: 0 0 400px;">{{{document.ShipToAddress2}}}</div>
113 </div>
114 <div style="display: flex; {{>valueStyle}}">
115 <div style="flex: 0 0 400px;">{{{document.ShipToAddress3}}}</div>
116 </div>
117 <div style="display: flex; {{>valueStyle}}">
118 <div style="flex: 0 0 400px;">{{{document.ShipToAddress4}}}</div>
119 </div>
120 <div style="display: flex; {{>valueStyle}}">
121 <div style="flex: 0 0 400px;">{{{document.ShipToCity}}} {{{document.ShipToState}}} {{{document.ShipToPostalCode}}}</div>
122 </div>
123 </div>
124 </div>
125 </div>
126
127 <!-- Header Container -->
128 <div
129 style="display: flex; flex-direction:column; border: 1px solid; border-radius: 0px; border-color:rgb(5, 2, 44); min-height: 90px; margin-top: 10px;"
130 >
131
132 <!-- Items container -->
133 <div
134 style="display: flex; flex-direction:column; min-height: 90px;"
135 >
136 <table style="border-collapse: collapse;">
137 <thead>
138 <tr>
139 <th style="{{>thStyle}}">Line</th>
140 <th style="{{>thStyle}}">Order Number</th>
141 <th style="{{>thStyle}}">Item Number</th>
142 <th style="{{>thStyle}}">Item Description</th>
143 <th style="{{>thStyle}}">Lot</th>
144 <th style="{{>thStyle}}">Package</th>
145 <th style="{{>thStyle}} text-align:right; padding-right: 10px;">Shipped Quantity</th>
146 <th style="{{>thStyle}}">UOM</th>
147 </tr>
148 </thead>
149 <tbody>
150 {{#each document.outerPackingUnits as |outerPackingUnit n1|}}
151 {{#each outerPackingUnit.innerPackingUnits as |innerPackingUnit|}}
152 {{#each innerPackingUnit.shipmentLines as |shipmentLine n|}}
153 <tr>
154 <td style="{{>tdStyle}}">{{{shipmentLine.ShipmentLine}}}</td>
155 <td style="{{>tdStyle}}"><a href={{documentUrl ledgerKey=(concat "PurchaseOrder:" shipmentLine.PONumber)}}>{{{shipmentLine.PONumber}}}</a></td>
156 <td style="{{>tdStyle}}"><a href={{itemTypeUrl itemTypeCode=shipmentLine.Item tpId=(lookupFounder)}}>{{{shipmentLine.Item}}}</a></td>
157 <td style="{{>tdStyle}}"><a href={{itemUrl lotNumber=shipmentLine.LotNumber control="LOT" tpId=(lookupFounder)}}>{{{shipmentLine.LotNumber}}}</a></td>
158 <td style="{{>tdStyle}}"><a href={{packageUrl packageType=innerPackingUnit.ContainerItem packageNumber=innerPackingUnit.LicensePlateNumber tpId=(lookupFounder)}}>{{{innerPackingUnit.LicensePlateNumber}}}</a></td>
159 <td style="{{>tdStyle}}">{{{shipmentLine.ItemDescription}}}</td>
160 <td style="text-align:right; padding-right: 10px; {{>tdStyle}} {{>numberValueStyle}}">{{shipmentLine.ShippedQuantity}}</td>
161 <td style="{{>tdStyle}}">{{{shipmentLine.RequestedQuantityUOMCode}}}</td>
162 </tr>
163 {{/each}}
164 {{/each}}
165
166 {{/each}}
167 </tbody>
168 </table>
169 </div>
170 </div>
171</div>Show/Hide Transaction Data
For a business use case, you may want your trading partner users to view transaction data conditionally, received during document submission. As a founder admin, you can modify document presentation template to show or hide the source transaction data by using the following attribute values.
- Current logged in user
- Access permissions
- Business identifiers
Usage Example
The handlebar attributes from line 182 to line 207 in the following Purchase Order Fusion sample document are used to retrieve the current user data.
In line 208, the conditional statement checks the current user type, such as founder or trading partner user.
40 <html>
41 <title>Purchase Order</title>
42
43 <body>
44 <!-- Main container -->
45 <div style="{{>bodyStyle}}">
46 <!-- Outermost container -->
47 <div style="display: flex; flex-direction: column;">
48 <!-- Titles container -->
49 <div style="display: flex; flex-direction: row;">
50 <div style="flex-grow: 3;"><span style="color: red; font-size: 20px;">Oracle</span></div>
51 <div style="flex-grow: 1; text-align: right;">
52 <span style="color: rgb(43, 43, 46); font-size: 24px">Purchase Order</span>
53 </div>
54 </div>
55
56 <!-- Document number and date -->
57 <div style="display: flex; flex-direction: row; justify-content: right; margin-top: 50px;">
58 <div style="flex: 1 0 auto;"></div>
59 <div
60 style="flex: 0 0 420px; border: 1px solid; border-radius: 10px; border-color:rgb(5, 2, 44); justify-content:center;"
61 >
62 <div style="display: flex; {{> labelStyle}}">
63 <div style="flex: 0 0 200px;">Order Number</div>
64 <div style="flex: 0 0 200px;">Order Date</div>
65 </div>
66 <div style="display: flex; {{>valueStyle}}">
67 <div style="flex: 0 0 200px;">{{{document.result.poHeaderId}}}</div>
68 <div style="flex: 0 0 200px;">{{{document.result.orderDateDisplay}}}</div>
69 </div>
70 </div>
71 </div>
72
73 <!-- Vendor, Ship To -->
74 <div style="display: flex; flex-direction: row; justify-content: right; margin-top: 5px;">
75 <div style="flex: 1 0 auto;">
76 <span style="{{> labelStyle}}">Vendor</span>
77 <div style="{{>valueStyle}}">{{{document.result.supplierPartyDisplayedName}}}</div>
78 <div style="{{>valueStyle}}">{{{document.result.supplierSiteAddress1}}}</div>
79 <div style="{{>valueStyle}}">{{{document.result.supplierSiteAddress2}}}</div>
80 <div style="{{>valueStyle}}">{{{document.result.supplierSiteCity}}}</div>
81 <div style="{{>valueStyle}}">{{{document.result.supplierSiteState}}} {{{document.result.supplierSitePostalCode}}}</div>
82 <div style="{{>valueStyle}}">{{{document.result.supplierSiteCountry}}}</div>
83 </div>
84 <div
85 style="flex: 0 0 420px; min-height: 100px; border: 1px solid; border-radius: 10px; border-color:rgb(5, 2, 44); justify-content:center;"
86 >
87 <div style="display: flex; {{> labelStyle}}">
88 <div style="flex: 0 0 400px;">Ship To</div>
89 </div>
90 <div style="display: flex; {{>valueStyle}}">
91 <div style="flex: 0 0 400px;">{{{document.result.shipToLocationName}}}</div>
92 </div>
93 <div style="display: flex; {{>valueStyle}}">
94 <div style="flex: 0 0 400px;">{{{document.result.soldToLeAddressLine1}}}</div>
95 </div>
96 <div style="display: flex; {{>valueStyle}}">
97 <div style="flex: 0 0 400px;">{{{document.result.soldToLeTownOrCity}}} {{{document.result.soldToLeStateProvn}}} {{{document.result.soldToLePostalCode}}}</div>
98 </div>
99 </div>
100 </div>
101
102 <!-- Bill To -->
103 <div style="display: flex; flex-direction: row; justify-content: right; margin-top: 5px;">
104 <div style="flex: 1 0 auto;"></div>
105 <div
106 style="flex: 0 0 420px; min-height: 100px; border: 1px solid; border-radius: 10px; border-color:rgb(5, 2, 44); justify-content:center;"
107 >
108 <div style="display: flex; {{> labelStyle}}" ;>
109 <div style="flex: 0 0 400px;">Bill To</div></div>
110 <div style="display: flex;{{>valueStyle}}" ;>
111 <div style="flex: 0 0 400px;">{{{document.result.billToBuName}}}</div>
112 </div>
113 <div style="display: flex; {{>valueStyle}}">
114 <div style="flex: 0 0 400px;">{{{document.result.billToLocAddressLine1}}}</div>
115 </div>
116 <div style="display: flex; {{>valueStyle}}">
117 <div style="flex: 0 0 400px;">{{{document.result.billToLocTownOrCity}}} {{{document.result.billToLocStateProvn}}} {{{document.result.billToLocPostalCode}}}</div>
118 </div>
119 </div>
120 </div>
121
122 <!-- Header Container -->
123 <div
124 style="display: flex; flex-direction:column; border: 1px solid; border-radius: 10px; border-color:rgb(5, 2, 44); min-height: 90px; margin-top: 5px;"
125 >
126 <!-- First row -->
127 <div style="display: flex; flex-direction: row; min-height: 30px;">
128 <div
129 style="flex-direction: column; border-bottom: 1px solid; border-right: 1px solid; border-color:rgb(5, 2, 44); flex: 1 0 200px;"
130 >
131 <div style="flex: 1 0 auto;"><span style="{{> labelStyle}}">Procurement BusinessUnit</span></div>
132 <div style="flex: 1 0 auto;"><span style="{{>valueStyle}}">{{{document.result.procurementBuName}}}</span></div>
133 </div>
134 <div
135 style="flex-direction: column; border-bottom: 1px solid; border-right: 1px solid; border-color:rgb(5, 2, 44); flex: 1 0 200px;"
136 >
137 <div style="flex: 1 0 auto;"><span style="{{> labelStyle}}">BusinessUnit</span></div>
138 <div style="flex: 1 0 auto;"><span style="{{>valueStyle}}">{{{document.result.billToBuName}}}</span></div>
139 </div>
140 <div style="flex-direction: column; border-bottom: 1px solid; border-color:rgb(5, 2, 44); flex: 1 0 200px;">
141 <div style="flex: 1 0 auto;"><span style="{{> labelStyle}}">Order Type</span></div>
142 <div style="flex: 1 0 auto;"><span style="{{>valueStyle}}">{{{document.result.typeLookupCode}}}</span></div>
143 </div>
144 </div>
145 <!-- second row -->
146 <div style="display: flex; flex-direction: row; min-height: 30px;">
147 <div
148 style="flex-direction: column; border-right: 1px solid; border-bottom: 1px solid; border-color:rgb(5, 2, 44); flex: 1 0 200px;"
149 >
150 <div style="flex: 1 0 auto;"><span style="{{> labelStyle}}">FOB</span></div>
151 <div style="flex: 1 0 auto;"><span style="{{>valueStyle}}">{{{document.result.fobDescription}}}</span></div>
152 </div>
153 <div
154 style="flex-direction: column; border-bottom: 1px solid; border-right: 1px solid; border-color:rgb(5, 2, 44); flex: 1 0 200px;"
155 >
156 <div style="flex: 1 0 auto;"><span style="{{> labelStyle}}">Freight Terms</span></div>
157 <div style="flex: 1 0 auto;"><span style="{{>valueStyle}}">{{{document.result.freightTermsDescription}}}</span></div>
158 </div>
159 <div style="flex-direction: column; border-bottom: 1px solid; border-color:rgb(5, 2, 44); flex: 1 0 200px;">
160 <div style="flex: 1 0 auto;"><span style="{{> labelStyle}}">Carrier</span></div>
161 <div style="flex: 1 0 auto;"><span style="{{>valueStyle}}">{{{document.result.carrierPartyDisplayedName}}}</span></div>
162 </div>
163 </div>
164 <!-- third row -->
165 <div style="display: flex; flex-direction: row; min-height: 30px;">
166 <div style="flex-direction: column; border-right: 1px solid; border-color:rgb(5, 2, 44); flex: 1 0 200px;">
167 <div style="flex: 1 0 auto;"><span style="{{> labelStyle}}">Payment Terms</span></div>
168 <div style="flex: 1 0 auto;"><span style="{{>valueStyle}}">{{{document.result.paymentTermsDescription}}}</span></div>
169 </div>
170
171 <div style="flex-direction: column; border-right: 1px solid; border-color:rgb(5, 2, 44); flex: 1 0 200px;">
172 <div style="flex: 1 0 auto;"><span style="{{> labelStyle}}">Reference #</span></div>
173 <div style="flex: 1 0 auto;"><span style="{{>valueStyle}}">{{{document.result.referenceNum}}}</span></div>
174 </div>
175
176 <div style="flex-direction: column; flex: 1 0 200px;">
177 <div style="flex: 1 0 auto;"><span style="{{> labelStyle}}">Currency</span></div>
178 <div style="flex: 1 0 auto;"><span style="{{>valueStyle}}">{{{document.result.currencyName}}}</span></div>
179 </div>
180 </div>
181 </div>
182 <div
183 style="display: flex; flex-direction:column; border: 1px solid; border-radius: 10px; border-color:rgb(5, 2, 44); min-height: 90px; margin-top: 5px;"
184 >
185 <table>
186 <thead>
187 <tr>
188 <th style="{{>thStyle}}">User Property</th>
189 <th style="{{>thStyle}}">Value</th>
190 </tr>
191 </thead>
192 <tbody>
193 <tr>
194 <td style="{{>tdStyle}}">user.name</td>
195 <td style="{{>tdStyle}}">{{user.name}}</td>
196 </tr>
197 <tr>
198 <td style="{{>tdStyle}}">user.tradingPartner.name</td>
199 <td style="{{>tdStyle}}">{{user.tradingPartner.name}}</td>
200 </tr>
201 <tr>
202 <td style="{{>tdStyle}}">user.tradingPartner.type</td>
203 <td style="{{>tdStyle}}">{{user.tradingPartner.type}}</td>
204 </tr>
205 </tbody>
206 </table>
207 </div>
208{{#if (eq user.tradingPartner.type "FOUNDER")}}
209 <!-- Items container -->
210 <div
211 style="display: flex; flex-direction:column; border: 1px solid; border-radius: 10px; border-color:rgb(5, 2, 44); min-height: 90px; margin-top: 5px;"
212 >
213 <table>
214 <thead>
215 <tr>
216 <th style="{{>thStyle}}">Item</th>
217 <th style="{{>thStyle}}">Description</th>
218 <th style="{{>thStyle}} {{> numberValueStyle}}">Quantity</th>
219 <th style="{{>thStyle}}">Unit</th>
220 <th style="{{>thStyle}} {{> numberValueStyle}}">Price</th>
221 </tr>
222 </thead>
223 <tbody>
224 {{#each document.result.pdfDraftPurchaseOrderLine as |item n|}}
225 <tr>
226 <td style="{{>tdStyle}}">{{{item.itemNumber}}}</td>
227 <td style="{{>tdStyle}}">{{{item.itemDescription}}}</td>
228 <td style="{{>tdStyle}} {{>numberValueStyle}}">{{{item.quantity}}}</td>
229 <td style="{{>tdStyle}}">{{{item.uomCode}}}</td>
230 <td style="{{>tdStyle}} {{>numberValueStyle}}">{{{item.unitPrice}}}</td>
231 </tr>
232 {{/each}}
233 </tbody>
234 </table>
235 </div>
236{{/if}}
237 <!-- Total line -->
238 <div style="display: flex; flex-direction: row; justify-content: right; margin-top: 5px;">
239 <div style="flex: 1 0 auto;"></div>
240 <div
241 style="flex: 0 0 200px; border: 1px solid; border-radius: 10px; border-color:rgb(5, 2, 44); justify-content:center;"
242 >
243 <div style="display: flex; align-content:space-between;">
244 <div style="{{> labelStyle}}flex: 1 0 50px; align-self: center;">Total</div>
245 <div style="{{>valueStyle}}flex: 1 0 auto; text-align: right; margin-right: 10px; align-self: center;">{{{document.result.ordered}}}</div>
246 </div>
247 <div style="display: flex;{{>valueStyle}}">
248
249 </div>
250 </div>
251 </div>
252 </div>
253
254 </div>
255 </body>
256</html>In the following image, the
user.tradingPartner.type attribute value is FOUNDER , so
all the transaction attributes are viewable to the founder user.
In following image, the
user.tradingPartner.type attribute value is ENDORSER, so no
transaction attributes are available for viewing for the endorser.
