Wiresk

Dynamics CRM template customization

You are here:
Estimated reading time: 2 min
In this article

The goal is to make them as close to the existing HTML templates as possible.

Styling

In all templates, please include basic styling to ensure consistent rendering.

<style>table { border-collapse: collapse;table-layout: fixed; -webkit-print-color-adjust:exact; } @media print { @page { margin: 0; } body { margin: 1.6cm; } }</style> <meta charset=”utf-8″>

It ensures that:

  • Overlapping borders are shown only once. Some templates will have you display borders just on certain sides of cells, and sometimes you can end up with disjointed borders. This will force these borders to connect
  • tables are not resized based on content: when printing a webpage, because the page format is oriented vertically rather than horizontally, the browser will resize the cells to fit everything in, which will distort the template.
  • Background colors, among others, are properly printed into the PDF.
  • The last bit removes the header and footer that otherwise comes with printed PDF from HTML.
  • DO NOT use external libraries for your CSS While very practical, bootstrap and the likes cannot be used here, as we don’t want external dependencies when converting a pdf. It would slow the API and potentially be unreliable

Variables

For fields that should be variables, (I.E. an invoice number, a contact’s name, …) you should write an explicit variable name so that we know what you are referring to. For instance, for a contact’s full name, {{contact.fullname}}.

Sometimes, the PDF will have to include a variable number of lines in a table corresponding to a 1:N relationship. For example, you will have to display all the opportunity products when drafting a quote from an opportunity. This will be done at document generation, so your template will feature only one such element, but you need to tag this element as repeating by adding a “foreach” tag in the parent element as per the following code example: this means that everything within that element will be repeated for each of the elements in the record collection.

Loop

<tr foreach="opportunityproduct">
  <td style="width:80%; border:1px solid black;">
    <p><br></p><p>{{opportunityproduct.type}}</p>
    <p>
      Oeuvre:&nbsp;{{opportunityproduct.productname}}<br>
      Compositeur:&nbsp;{{opportunityproduct.productcreator}}<br>
      Album:&nbsp;{{opportunityproduct.albumname}}
    </p>
    <p>
      Objet: {opportunityproduct.type}}<br>
      Type de contenu:&nbsp;{{opportunityproduct.contenttype}}<br>
      Média(s):{{opportunityproduct.media}}<br>Territoire(s) {{opportunityproduct.location}}<br>
      Durée de cession: {{opportunityproduct.duration}}<br>
      Utilisation: {{opportunityproduct.use}}
    </p>
  </td>
  <td style="vertical-align:top;width:10%">{{opportunityproduct.price}}</p></td>
  <td style="vertical-align:top; width:10%">{opportunityproduct.vat}}</p></td>
</tr>

For now, I’ve only needed 3 “functions” that will calculate compiled values (such as the sum of all the prices of opportunity products). You can find examples in my code. If you need more in a specific situation, send me a message, and we’ll discuss the best way to write it so that I can interpret it at compilation time.
• The way it looks in the editor is close to what it would look like after conversion, but not exact. To make sure your template looks like what you want, you need to:
• Save it as an HTML file
• Open it in a Chromium-based browser (Chrome, the new version of Edge,…) and use the print preview functionality
• Verify it looks as you want, otherwise the necessary adjustments until it does
• The reason why we are using this print preview is because the way HTML will be converted into PDF is by using the Google Chrome print API.
• Note that in some situations, the preview display will have elements that don’t look good, mainly when they include variables because the variable’s name is often much bigger than the variable’s content (in my case, this was particularly true for the variable that represented the total sum price of the various products in the invoice). To make sure it would look fine in an actual situation, temporarily replace them with a realistic value (e.g., on a quote, return the total price with something like $10000), check everything is fine, then roll back to the variable name.
• You must include the following bit of code in your HTML file:

Was this article helpful?
Dislike 0