Designing Form PDF HTML Templates
Oracle Fusion Field Service allows you to generate PDF files directly from the data you collect. You can achieve this by creating and attaching HTML templates to your form configurations. The HTML template defines a visual representation of PDF files; it defines how your final document will look, including your branding, layout, and tags where your data will appear.
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}}
-
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)
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.
Example of the template
To help you get started, below is an example HTML template. You can 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><img src="{{resource.iak_res_file_signature}}" alt="Techncian Signature"></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><img src="{{customerSignature}}" alt="Cutomer Signature"></li>
<li><img src="" alt=""></li>
</ul>
</div>
</section>
</li>
</ul>
</div>
</section>
</main>
<footer>
<h3>Powered by <a href="#">Supremopower</a></h3>
</footer>
</body>
</html>