Designing Form PDF HTML Templates
Oracle Fusion Field Service lets you generate PDF files directly from the data you collect in forms. To control the layout and appearance of generated PDF files, create an HTML template and attach it to a form configuration. The HTML template defines the visual representation of the PDF file, including branding, layout, and tags where form, activity, resource, or inventory data appears.
Template Structure or Content of a Template
Your HTML template is key to controlling the visual presentation of your PDFs. It's where you'll define the following:
- Branding: Incorporate your brand's identity by using specific colors for headers, footers, and section headings. You can also embed your company logo by converting the image into a Base64 format and including it directly in the HTML.
- Layout: You have the freedom to design any layout you need. However, remember that the final PDF is intended for printing, so ensure your layout is suitable for print and fits within a standard page width.
- Tags: Tags are special placeholders in your template that
tell the application exactly where to insert data from your forms. Tags follow
the same syntax as Default & Validation rules where the first part
represents an entity (such as, 'activity') and the second part represents a
field or property label (such as, 'account_number'). For form fields you must
not specify the entity leaving just a label. Tags are wrapped into double curly
braces.
- Examples of tags: Product field/property - {{activity.account_number}}
- Example of Form field - {{signature}}: For
signature form fields, use the form field label directly, for example
{{signature}}. Do not use{{signature_property}}or any*_propertysuffix. Do not place signature fields inside an<img>tag. The PDF generator creates the image element automatically when the signature placeholder is processed.
-
Supported Field Types: Your HTML templates can display a
wide range of data. This includes all types of product fields, properties, and
form fields such as inputs, checkboxes, dropdown lists, images, and signatures.
All these will be correctly displayed in your generated PDFs. However, note that
the list of product fields specifically available for templates is
limited to those described below.
- Work Order [appt_number]
-
Address [caddress]
-
Cellular Phone [ccell]
-
City [ccity]
-
Email [cemail]
- Name [cname]
- Phone [cphone]
- SLA Window Start [sla_window_start]
- SLA Window End [sla_window_end]
- State [cstate]
-
Account Number [customer_number]
-
ZIP/Postal Code [czip]
-
Date [date]
- Duration [length]
-
Serial Number [invsn]
-
Inventory Type [invtype]
-
Quantity [quantity]
- Name [pname]
- Phone [pphone]
- Email Address [email] (Resource email)
Important: HTML templates support HTML, CSS, and data placeholders. They don’t support conditional logic, scripting, or expressions to determine whether a field has a value. For example, you can insert {{activity.cemail}}, but you can’t use template logic to hide the entire row when the email value is empty.
Template File Requirements
- File Type: Your template must be an HTML file.
- Remote Content: For security and reliability, remote content is not allowed. This means all images, style sheets, icons, and other assets must be embedded directly within your HTML template.
- CSS can style template elements, but it can’t evaluate placeholder values at
runtime. Note: Don’t rely on CSS to hide rows whose placeholder values are empty. CSS can’t test whether a value inserted by a placeholder is empty.
Handling Empty Fields in Generated PDFs
When a placeholder refers to a field or property that has no value, the generated PDF may show the label or layout row with an empty value area.
To avoid empty rows in generated PDFs, use one of these approaches:
- Create separate form configurations or PDF templates for different business scenarios.
- Make required the fields that must always appear in the PDF.
- Group optional fields in a clearly labeled section where blank values are acceptable.
- Store preformatted display text in a field or property before PDF generation, if your implementation supports that pattern.
Example Template
Use this example to understand the structure, available features, and best practices for building your own templates.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PDF Reporting Template</title>
<style>
body {
font-size: 1rem;
font-weight: 400;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
line-height: 1.3;
padding: 0;
margin: 0;
--title-color: #ffffff;
--title-background: rgb(143 191 208 / 40%);;/*#00688c;*/
}
header {
background: #34302E;
color: var(--title-color);
padding: 1.25rem 2.25rem;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
}
main {margin-top: 2.25rem;}
h3 {
margin: 0 0 1rem;
font-size: 2.25rem;
font-weight: 700;
}
.logo {
max-width: 200px;
}
p {margin: 0 0 1rem;}
p:last-child {margin: 0;}
.info {
width: 100%;
padding: 0 2.25rem;
box-sizing: border-box;
}
.info .info {padding: 0;}
.info--table {
width: 100%;
border: 1px solid var(--title-background);;
}
.info--table .info--table {
border-bottom: none;
}
.info--table ul {
list-style: none;
padding: 0;
margin: 0;
}
.info--table li {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
padding: 0.75rem 0;
margin: 0 2rem;
border-bottom: 1px solid var(--title-background);;
}
.info--table li:first-child {
background: var(--title-background);;
margin: 0;
padding: 0.75rem 2rem;
}
.info--table li:last-child {border: none;}
.info--table li.table {padding: 0;}
.info--table h4 {
font-size: 1.25rem;
text-align: left;
margin: 0;
}
.info--table li .list__title {width: 35%;}
.info--table li .list_content {width: 65%;}
.info--table li .textarea {
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
background: var(--title-background);;
}
.info--table li img {width: 500px;}
.info--table table {
width: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border: 1px solid var(--title-background);;
border-top: none;
border-bottom: none;
}
.info--table table td,
.info--table table th {
border: 1px solid var(--title-background);;
text-align: center;
padding: 0.5rem;
}
.info--table table td.right {
text-align: right;
font-weight: 700;
}
.info--table table tr:last-child td {border-bottom: none;}
.info--table table th.table-header {border: none;}
footer {
padding: 1.25rem 2.25rem;
background: var(--title-background);;
}
footer h3 {margin: 0;}
a {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<div class="header-info">
<h3 class="header-info__title">Claim Report</h3>
<p class="header-info__date">Created {{activity.order_date}}</p>
<p class="header-info__date">Reported By {{activity.cname}}</p>
</div>
<div class="logo">
<img src="" alt="Logo">
</div>
</header>
<main>
<section class="info">
<div class="info--table">
<ul class="list">
<li><h4>Customer Information</h4></li>
<li class="table">
<section class="info">
<div class="info--table">
<ul class="list">
<li><h4>Person</h4></li>
<li>
<div class="list__title">Account Number</div>
<div class="list_content">{{activity.customer_number}}</div>
</li>
<li>
<div class="list__title">Name</div>
<div class="list_content">{{activity.cname}}</div>
</li>
<li>
<div class="list__title">Phone</div>
<div class="list_content">{{activity.cphone}}</div>
</li>
<li>
<div class="list__title">Cellular Phone</div>
<div class="list_content">{{activity.ccell}}</div>
</li>
<li>
<div class="list__title">Email</div>
<div class="list_content">{{activity.cemail}}</div>
</li>
</ul>
<ul class="list">
<li><h4>Address</h4></li>
<li>
<div class="list__title">Address</div>
<div class="list_content">{{activity.caddress}}</div>
</li>
<li>
<div class="list__title">City</div>
<div class="list_content">{{activity.ccity}}</div>
</li>
<li>
<div class="list__title">State</div>
<div class="list_content">{{activity.cstate}}</div>
</li>
<li>
<div class="list__title">Zip Code</div>
<div class="list_content">{{activity.czip}}</div>
</li>
</ul>
</div>
</section>
</li>
</ul>
</div>
</section>
<section class="info">
<div class="info--table">
<ul class="list">
<li><h4>Incident details</h4></li>
<li>
<div class="list__title">Work Order</div>
<div class="list_content">{{activity.appt_number}}</div>
</li>
<li>
<div class="list__title">Order Date</div>
<div class="list_content">{{activity.order_date}}</div>
</li>
<li>
<div class="list__title">Priority</div>
<div class="list_content">{{activity.XA_CASE_PRIORITY}}</div>
</li>
<li>
<div class="list__title">Case Number</div>
<div class="list_content">{{activity.XA_CASE_NUMBER}}</div>
</li>
<li>
<div class="list__title">Case Type</div>
<div class="list_content">{{activity.XA_CASE_TYPE}}</div>
</li>
<li>
<div class="list__title">Case Subject</div>
<div class="list_content">{{activity.XA_CASE_SUBJECT}}</div>
</li>
<li>
<div class="list__title">Case Description</div>
<div class="list_content">{{activity.XA_CASE_DESCRIPTION}}</div>
</li>
<li>
<div class="list__title">Case Reason</div>
<div class="list_content">{{activity.XA_CASE_REASON}}</div>
</li>
<li>
<div class="list__title">Activity Notes</div>
<div class="list_content">{{activity.ACTIVITY_NOTES}}</div>
</li>
<li>
<div class="list__title">Completion Code</div>
<div class="list_content">{{activity.complete_code}}</div>
</li>
<li>
<div class="list__title">Notes</div>
<div class="list_content textarea">{{activity.CLOSURE_NOTES}}</div>
</li>
</ul>
</div>
</section>
<section class="info">
<div class="info--table">
<ul class="list">
<li><h4 id="report">Time and Related Expenses Reporting</h4></li>
<li class="table" style="margin-bottom: 1rem;">
<table aria-labelledby="report">
<tr>
<th colspan="4" class="table-header">Labor</th>
</tr>
<tr>
<th>Date</th>
<th>Type</th>
<th>Hourly Rate</th>
<th>Hours</th>
</tr>
<tr>
<td>{{lbr_date_1}}</td>
<td>{{lbr_type_1}}</td>
<td>{{lbr_cost_1}}</td>
<td>{{lbr_hrs_1}}</td>
</tr>
<tr>
<td>{{lbr_date_2}}</td>
<td>{{lbr_type_2}}</td>
<td>{{lbr_cost_2}}</td>
<td>{{lbr_hrs_2}}</td>
</tr>
<tr>
<td>{{lbr_date_3}}</td>
<td>{{lbr_type_3}}</td>
<td>{{lbr_cost_3}}</td>
<td>{{lbr_hrs_3}}</td>
</tr>
<tr>
<td colspan="3" class="right">Labor Cost</td>
<td>{{activity.XA_LABOR_COST}}</td>
</tr>
</table>
</li>
<li class="table">
<table aria-labelledby="report">
<tr>
<th colspan="3">Trucks, Trailers,ETC.</th>
<th colspan="2">Meals.</th>
</tr>
<tr>
<th scope="col">Vehicle #Used</th>
<th scope="col">Hrs</th>
<th scope="col">Vehicle usage cost</th>
<th scope="col"># of Meals</th>
<th scope="col">Meals cost</th>
</tr>
<tr>
<td>{{vh_usd}}</td>
<td>{{vh_hrs}}</td>
<td>{{vh_cost}}</td>
<td>{{mls_num}}</td>
<td>{{mls_cost}}</td>
</tr>
</table>
</li>
<li>
<div class="list__title">Tax</div>
<div class="list_content">{{activity.XA_TAX}}</div>
</li>
<li>
<div class="list__title">Total Cost</div>
<div class="list_content">{{activity.XA_TOTAL_COST}}</div>
</li>
</ul>
</div>
</section>
<section class="info">
<div class="info--table">
<ul class="list">
<li><h4>Approvals</h4></li>
<li class="table">
<section class="info">
<div class="info--table">
<ul class="list">
<li><h4>Technician</h4></li>
<li>
<div class="list__title">Name</div>
<div class="list_content">{{resource.pname}}</div>
</li>
<li>
<div class="list__title">Signature</div>
<div class="list_content">{{technicianSignature}}</div>
</li>
</ul>
<ul class="list">
<li><h4>Customer</h4></li>
<li>
<div class="list__title">Name</div>
<div class="list_content">{{activity.cname}}</div>
</li>
<li>
<div class="list__title">Signature</div>
<div class="list_content">{{customerSignature}}</div>
</li>
</ul>
</div>
</section>
</li>
</ul>
</div>
</section>
</main>
<footer>
<h3>Powered by <a href="#">Supremopower</a></h3>
</footer>
</body>
</html>