This article is relevant if you using NetSuite’s Advanced PDF/HTML Templates to create great looking output such as Email, HTML docs, PDFs, and you need an alternate way to manage style consistently within all your HTML.

Background

Whether we are generating a NetSuite PDF attachment or an email confirmation, our goal is to provide perfect looking output for our customers. Having a decent, working knowledge of HTML styling, also known as ‘cascading styling sheets’ (CSS), is a huge benefit for creating spectacular looking output. In some instances, we may have to improvise to get the output to look perfectly, especially when our destined output is Email.   The challenge with email is that many email clients strip away or do not properly reference CSS as defined by the the common external stylesheet method.  An alternative to the standard <style> element implementation of HTML styling is to use the inline style=””attribute as shown in this simple example:

By inserting an inline CSS style element directly into the html, we can bypass the <style> element section altogether. This is very useful if the target client ignores or removes any custom styling defined using the <style> element.  However, it can get difficult to manage all the elements individually when you want perfect output consistency.

Using Variables To Manage HTML Inline Styling

Imagine now that we wanted to add inline styling to all of the HTML tags in the template because it benefits the target application. This would ensure that our styling effects would be preserved in the target client and our output would be rendered as expected. But what about all that typing and the possibilities of typos and syntax errors? We all know that the debugging in NetSuite Advanced PDF templates can be challenging, and trying to find a misplaced end-quote or a missing end-tag can consume precious time. So thinking about it, if we could extend our use of the ‘inline’ by assigning various CSS styles to variables, we then could simply insert these variables directly into the HTML tags using the style=”” attribute. This would greatly reduce typing, help with syntax errors, and we could still get the benefits of a single style definition, like we get with externally referenced CSS files.  Take a look at the following code. It shows how we can simply convert our style attributes and properties to convenient variables. Just a note, we are using FreeMarker syntax in our example.

Of course, we would not use this technique for every NetSuite Advanced Template project. With most of the NetSuite templates, using the standard <style> element works well. However, in some cases, using variables can offer a reliable alternative. Using variables can help with some of the quirks we find with some HTML output. If your target output is an Email, then using variables can minimize the loss of styling in the receiving email client. Using variables in Email output will be a topic for another article.

Get Branded Content, Documents and Templates in NetSuite

If you are looking for ways to extend your NetSuite Advanced PDF and HTML Templates, we offer the Content Renderer Engine (CRE).  This tool is solving many challenges our clients face with NetSuite’s built-in Advanced PDF template technologies — especially when they discover that the range of data offered to NetSuite’s template is limited.  We offer the tool to all of our clients without a license charge which helps them get the most from their NetSuite investment. If you are seeking to get more out of your NetSuite HTML and PDF templates, let’s discuss your application.

Marty Zigman

Holding all three official certifications, Marty is regarded as the top NetSuite expert and leads a team of senior professionals at Prolecto Resources, Inc. He is a former Deloitte & Touche CPA and has held CTO roles. For over 30 years, Marty has produced leadership in ERP, CRM and eCommerce business systems. Contact Marty to set up a conversation.

More Posts - Website - Twitter - Facebook - LinkedIn - YouTube