An ERP system like NetSuite offers businesses access to information which allows insights into your customers, sales, purchases, and more - all available within your NetSuite instance. However, having access to data and making the most of your data are two different things.
NetSuite provides default PDF forms for transactions, and pre-built reports to visualize your data. However, you can extend far beyond these capabilities with a little HTML/CSS knowledge, and the use of Advanced PDF/HTML Templates.
In this guide, we’ll look at two ways to utilize custom PDFs in your NetSuite instance. The first application is using Advanced PDF/HTML Templates to customize printed or emailed transactions. The second use case is leveraging SuiteScript to render PDFs using custom data sources.
Prerequisites
First things first, we need to enable Advanced PDF Template Functionality in our NetSuite Instance. To do this, we navigate to Setup > Company > Enable Features and check the “Advanced PDF/HTML Templates” option in the SuiteBuilder section.
After this feature is enabled, users with Advanced PDF/HTML Template permissions can set custom templates to be used when emailing or printing transactions.
Customizing Transaction PDF Layouts
Transactions in NetSuite have default forms that are used when emailing and printing. These can be customized natively in NetSuite or via Freemarker Templates. To preview the different transaction forms: navigate to any transaction record, click “Print,” and a preview of the transaction will appear. To customize the default forms for any transaction natively in NetSuite, you can navigate to Customization > Forms > Transaction Form PDF Layouts and click “Customize” next to the form you’d like to customize.
For more extensive customization, Advanced PDF/HTML Templates are a better solution. Navigate to Customization > Forms > Advanced PDF/HTML Templates to find transaction templates which allow you to edit the form’s source code. Source code editing allows you to use HTML and CSS to completely customize the look and feel of your PDF.
With transaction PDFs, the transaction record itself is the data source and this limits the fields available for use in the template. Only fields on the record itself, or one join away are accessible (such as ${record.item.salesdescription}). A more powerful use case of custom PDFs is to populate the data sources from a script and render the PDF with NetSuite’s integrations with FreeMarker and Big Faceless Organization’s report generator.
FreeMarker and BFO
Whenever possible, we prefer to write source code that is turned into PDFs by NetSuite. This provides much more freedom in what data is included, and more control over exactly how it is formatted and displayed. NetSuite uses the FreeMarker template engine and the Big Faceless Organization’s (BFO) report generator to turn source code into pdf documents.
FreeMarker (https://freemarker.apache.org/) is a template engine that can generate HTML webpages. The engine uses a template and a data-model to produce html output. The template may contain placeholder elements, such as ${record.entity}, or ${customer.name}. FreeMarker replaces these elements in the HTML output with actual values contained in the data source. Additionally, FreeMarker supports some logic processing, such as defining variables, if statements, or looping through arrays.
After FreeMarker processes the source code, the resulting HTML document is passed to BFO’s report generator. BFO (https://bfo.com/) is a set of third party libraries used by NetSuite to generate PDFs from the FreeMarker source code. After BFO processes the HTML, a PDF file is returned to be printed, emailed, or used however you like.
Custom PDFs via SuiteScript
Rendering pdf from scripts opens a world of possibilities. Once these custom pdfs are rendered, you are free to use them however you like. Create custom packing slips for your warehouse workers, send detailed invoices with customer-specific formatting, or create specialized reports for decision makers within your business.
Inside our scripts, we can leverage NetSuite’s N/render module to customize our template’s data sources. In contrast to transaction PDFs, we can add multiple data sources, or configure custom JSON objects that pull field values from multiple different record types.
Here’s an example code block that renders a custom PDF in a Suitelet:
Basic Steps
Create render.TemplateRenderer object through render.create() (Line 18)
Set the content of the TemplateRenderer object. (Line 25)
Load file with file.load() which returns a Freemarker file.File object which is saved in our instanc’es File Cabinet. (Line 16)
Set the content through File.getContents()
Add a data source for TemplateRenderer through TemplateRenderer.addCustomDataSource(options) (Lines 29-33)
Set the format using the render.DataSource enum
Set the alias. This is the string that can be used in the template to retrieve values from the data source (In this case, ${lines.labels} would return the object we define as labels in the lines object)
Set the data source, which in this case is an object defined by a custom function, constructItemLabelObj. (Line 27)
Render the pdf file through TemplateRenderer.renderAsPdf() (Line 35)
Write the pdf file to the response through context.response.writeFile(pdf, true) (Line 36)
Advanced Features
Multiple custom data sources, and complete control over the layout are only a few of the benefits of using source code to generate PDFs. Some of the many other features offered by this approach are outlined below.
Barcodes and QR Codes
Use the <barcode /> tag within the FreeMarker source code to create a custom barcode. Within the tag, you can set the height, width, and codetype parameters to customize the display to your needs. Using the value parameter, you can encode a URL or serial number in the barcode.
Add Striping to Transactions
BFO has many useful libraries for customizing the look and feel of your PDFs. One of the most frequently used adds striping to the line items of a transaction. You can even specify which colours you want with HTML hex codes. When iterating through your list of items, include the following CSS styling to your table rows:
<tr style=”background-color: ${((item_index % 2)==0)?string(‘#ffffff’, ‘#ccffcc’)};”>. Other Features
Add page breaks
Create macros to repeat HTML code on each page
Use fonts unavailable in NetSuite
Get in Touch Today
Rendering PDFs via SuiteScript is a versatile tool to customize transaction forms and PDF layouts for your NetSuite instance. If you’d like to explore how this powerful customization can elevate your business, fill out this form and we'll be happy to book a free consultation session.