FBO One sends a variety of messages, such as handling confirmations, invoices and supply orders. FBO One can send HTML formatted email messages that follow your corporate identity. The message can contain embedded images such as logo's. 

Each message can follow the standard layout that you define per FBO location, or it can be assigned its own unique layout.

Defining a layout

Email layouts are managed in the administration section of the FBO One application.

Goto Menu > Administration > Application > Email layout settings:

The structure of HTML layouts

Email HTML layouts can be designed by any person that knows how to write HTML code. Each layout defines the styles and the structure of the message. You can specify where FBO One needs to insert the actual body text of the message, as well as where any image files need to be embedded.

For this purpose, the following variables can be inserted in the HTML:

1.~emailsubject~

This variable will be replaced by the subject of the email message. It will be displayed in the title section of the HTML layout.

2.~emailbody~

This variable will be replaced by the email body text

3.~Attachment-[name]~

Use this to embed images from the FBO One template documents into the email layout. The [name] must exactly match the name of the template document that holds the image file. To get started, FBO One already contains a default layout, that embeds the ‘EmailHeaderLogo’ template document.

Example HTML email layout

The picture below shows a rather minimal layout, that just inserts a logo at the top of the message.

This is the actual text of the layout:

The email looks like this:

How to optimize the logo for display on high resolution screens and on printers

The logo will look fine on classical monitors, that have a density of 96 pixels per inch (e.g. a 1600x1080 resolution). When using an HD-screen, or when printing the message, the image will be zoomed-in by the browser. This causes the image to look blurry. To prevent this, it is best practice to upload an image that is exactly 2 or 3 times larger than needed. For example, to display the logo as 100x55 logical pixels, upload an image that is 300x165 pixels. In the HTML template, zoom-out the image by setting the width and height, in this case, to be 3 times smaller than the real number of pixels. This ensures the the image will look crisp even when displayed on a screen that is up to three times the classical resolution.

<img src="~Attachment-EmailHeaderLogo~" border="0" style="display: block" alt="HeaderLogo" width=100 height=55 />

How to add a new image template document 

Before a using a new image in the email layout it should first be added to the template documents:

Goto Menu > Administration > Application > Template Documents:

Click the ‘Add’ button and select an image and give the image an logical name.

After OK the message: ‘File image002.gif has been successfully uploaded’ is shown.

Now the new image is stored in the template documents and can be used in the email layout definition.

To reference this new image in the layout, replace the the src="" and alt="" attributes of the img tag in the HTML, as follows::

Result:

Testing email layout definitions

There are two ways to test an email layout definition.

1. Preview in browser.
2. Send a test email

Preview in browser

This preview option shows the email body in a web browser.

Just click the ‘preview’ link after the email layout name on the email payout setting page:

After clicking the preview link a new window is opend:

Send a test email

With this option it is possible to send a test email.

Goto Menu > Administration > Application > Send test email message:

Enter your email in the to field an select your email layout you want to test.

When click the ‘Send message’ button the email will be sent.

Test email result:

How to activate email layouts in FBO One

By default, the email layouts are disabled for all FBO Locations.

There are three ways to activate an email layout.

1. Set a default email layout at the administration level

When setting this option all FBO locations that are part of the administration will use the selected layout by default.

Go to Administration > Back office > Administrations

2. Set default email layout at FBO location level

This allows you to specify a specific layout for an individual FBO location. This may be helpful in case the FBO has its own logo.

Go to Administration > Station > FBO Location

3. Select the email layout in the email message template

This option will overrule FBO Location and Administration default layout.

Email message templates can be defined in a number of places in FBO One:

1. The application global email settings (Administration > Application > Email message settings)
2. In the FBO location specific settings (Administration > Station > FBO locations)
3. In the email template of a product. These templates are used for supply order messages and for customer notification messages. 

As an example, we are going to specify a custom layout for the application-wide handling confirmation template:

To specify the layout, you need to insert the variable ‘~MessageLayout-[Email layout name]~’ anywhere in the HnConfirmationEmailBody template:

A sample HTML layout

The below layout has been tested against most email clients and HTML standards. It is a good starting point for your own layouts.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>~emailsubject~</title>

</head>

<body style="margin: 0px; padding:0px">

  <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f5f5f5; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">

    <tbody>

      <tr>

        <td bgcolor="#f5f5f5" style="font-family: Arial, sans-serif; font-size: 14px; -webkit-text-size-adjust: none;padding-left:20px; padding-right: 20px; padding-top:10px; padding-bottom:20px;">

          <table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f5f5f5; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt">

            <tr>

              <td style="padding-bottom:10px;">

                <!--Header-->

                <img src="~Attachment-EmailHeaderLogo~" border="0" style="display: block;" alt="Amsterdam Software" />

              </td>

            </tr>

            <tr>

              <td style="margin: 0px; background-color: #ffffff; border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 0; height: 8px; line-height: 8px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; border-radius: 8px 8px 0px 0px; -webkit-border-radius: 8px 8px 0px 0px; -moz-border-radius: 8px 8px 0px 0px; "></td>

            </tr>

            <tr>

              <td style="margin: 0px; background-color: #ffffff; border-left: 1px solid #ccc; border-top: 0; border-right: 1px solid #ccc; border-bottom: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 2px; -webkit-text-size-adjust: none; ">

                <table cellspacing="0" cellpadding="0" border="0">

                  <tbody>

                    <tr>

                      <td style="margin: 0px; padding: 10px 15px 10px 15px; background-color: #ffffff; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; mso-line-height-rule: exactly; mso-text-raise: 2px; -webkit-text-size-adjust: none; ">

                        <!--Body-->

                        ~emailbody~

                      </td>

                    </tr>

                  </tbody>

                </table>

              </td>

            </tr>

            <tr>

              <td style="margin: 0px; background-color: #ffffff; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; border-top: 0; height: 8px; line-height: 8px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; border-radius: 0px 0px 8px 8px; -webkit-border-radius: 0px 0px 8px 8px; -moz-border-radius: 0px 0px 8px 8px; "></td>

            </tr>

            <tr>

              <td style="padding-bottom:10px;padding-bottom:20px;">

                <!--Footer-->

                 

              </td>

            </tr>

          </table>

        </td>

      </tr>

    </tbody>

  </table>

</body>

</html>

Format for adding HTML Layout to Scheduled Report Template Text

In order for the HTML Format to apply to the email accompanying outgoing Scheduled Reports from FBO One, the following format should be used preceding the 'Body template text':

The result will ensure the specified HTML Format is applied: