Template Editor (Beta Version)

 Accessing the Template Editor

Navigating the Template Editor Layout

Editing Templates

Previewing Template Changes

Undo and Delete Actions

Uploading Logos

Assigning Access Rights

Templates Purposes

Techie Language

HTML Basics

Date and time formatting

DocuSign

The Template Editor in FL3XX is designed to help you customize your templates for emails and documents used in operations. This guide provides an overview of the Template Editor’s interface, demonstrating how to manage, preview, and save changes efficiently.

Accessing the Template Editor

To access the Template Editor:

1. Go to Settings.
2. Select "Template Editor" under the General section.
3. The Template Editor will open in the same tab, with the first template in the left-hand (LH) menu selected by default.

Navigating the Template Editor Layout

The Template Editor has four main sections for managing your templates:

• Preview Section: Shows the final version of your email or document.
• Template Editor Section: Allows editing of the template's HTML code.
• Variables Section: Lists the variables that can be used in the template for customization.
• Versions Section: Displays previous versions of the template for restoration.

The default layout is a vertical split, with the Preview on top, the Template Editor below, and Variables on the right.

• Adjust the view (horizontal or vertical) by clicking the toggle next to "Edit Templates".
• Collapse each section by using the arrows icon next to each section title. 
• Expand each section by clicking the icon on the right side of your screen.
• Adjust the section sizes by dragging the grey bar between them.
• Restore a previous version by clicking one of the versions below the document title in the left-hand menu. 

Expanded view of all sections.

Collapsed view of the template editor and variables.

Tip: The Template Editor will remember your preferred layout after your first use.

Editing Templates

• Select a Template: Use the LH menu to select the template you wish to modify.
• Edit Content: Use the Template Editor to change the code or text as needed.
• Save Changes: Click the Save button (☁️) to apply changes. A confirmation popup will appear to avoid accidental overwrites.

Note: Leaving the page without saving will result in the loss of any unsaved changes.

Selecting a leg to use for the preview.

Code navigator used to find and replace key words. To access, click anywhere in the "Template Editor" section, then press "cmd" + "f" for mac, or "Windows key" + "f" for pc.

Previewing Template Changes

• Default Preview: By default, you will see a preview of an empty template.
• Booking Selector: Use the Booking Selector Dropdown List (DDL) to pick a booking, allowing you to see the template with specific booking details.

Pax Manifest template selected with all sections expanded.

Undo and Delete Actions

• Undo Changes: Use the Undo button (↩️) to revert all unsaved changes in a template.
• Restore to Default: Click the Delete button (🗑️) to restore a template to its default settings provided by FL3XX.

Warning: Restoring a template to its default state will delete any customizations made.

Action buttons.

Uploading Logos

To add a logo to your emails or documents:

1. Navigate to the Logo section. Here you will see the current logo being used. 
2. Upload the file, which will be included in your templates.

Note: Changing this logo inside the template editor will apply the change for all email templates. This logo will appear wherever logo://email is used in your templates.

Logo editing.

Assigning Access Rights

The following access rights can edit templates:

• Administrator
  • All administrators can use the template editor.
• External Template Development
  • This access right has only access to the template editor, so you can hand it out to a third party developer working on your templates.

Templates Purposes

In general, the type of document is indicated by its name:

• "Document" typically refers to a generated PDF, usually attached to an email.

• "Document ... Filename" defines the file name template for the related document.

• "Email Body" refers to the text generated for the body of the email.

• "Email Subject" refers to the subject line of the email.

Techie Language

Our templates use familiar tools: HTML and CSS. For logic (think: if-else or loops), we rely on Apache Velocity Template Language (VTL)—making customization easy and dynamic.

Want to dive deeper? Here’s your cheat sheet:

• VTL Reference
• User Guide

HTML Basics

• Adding a line break: add <br/> at the end of a line.

• Creating a new paragraph: enclose text in <p>your text</p> to start a new paragraph.

• Bold text: wrap text in <b>your text</b> to display it in bold.

• Italic text: wrap text in <i>your text</i> for italic styling.

• Underlining text: wrap text in <u>your text</u> to underline text.

• Adding a hyperlink: use <a href="https://example.com">Click here</a> to insert a clickable link.

• Adding a hyperlink opened in new tab: use <a href="https://example.com" target="_blank">Click here</a>

• Creating an unordered list: wrap list items in <ul></ul>, with each item inside <li>your item #1</li>.

• Creating an ordered list: wrap list items in <ol></ol>, with each item inside <li>your item #1</li>.

• Adding a horizontal rule: insert <hr/> to create a horizontal divider.

Date and time formatting

All Unix timestamps can be displayed to users using $!DateFormatUtils.format or $!DateFormatUtils.formatUTC. For example:

$!DateFormatUtils.formatUTC($flightTime, $dateDayTimeZFormat)

or

$!DateFormatUtils.format($flightTime, $dateDayTimeFormat, $airport.parsedTimeZone)

• The first parameter is the Unix timestamp.

• The second parameter is the desired date format.

• The third parameter (where applicable) specifies the time zone.

Date formats are configured based on the "US Date Format" setting. Below are all the predefined formats available to you:

You can also define your own format string using tokens described in the Java date formatting documentation.

DocuSign

To use DocuSign in your templates, you must first set up integration.

In templates, you can verify whether DocuSign is active by checking the $electronicSignature variable. For example, you can place your DocuSign-specific code inside a condition:

#if($electronicSignature)<input type="text" name="DocuSignSignHere">#end

#if($StringUtils.isNotEmpty($electronicSignatureUrl))
<p class="template-button__section" style="padding: 20px 0; border-top: 1px solid #EEE; border-bottom: 1px solid #EEE;">
<a href="$!electronicSignatureUrl" class="template-button__section-primary" 
    style="display: inline-block; color:#ffffff; background: #f15a2b; font-size: 14px; border-radius: 4px; 
        box-shadow: none; cursor: pointer; outline: 0; padding: 10px 30px; text-decoration: none;">eSign</a>
</p>
#end

/fn1/

/po2/

/co3/

/lc4/

/dt5/

/sn6/

<div class="inputs">
    <div>Name, Position#if($electronicSignature)
        <div class="inputs--with-signature"><div class="signature-name">/fn1/</div><div class="signature-position">/po2/</div></div>
        #end
    </div>
    <div>Company#if($electronicSignature)<div class="inputs--with-signature">/co3/</div>#end</div>
    <div>Location, Date#if($electronicSignature)<div class="inputs--with-signature"><div>/lc4/</div><div>/dt5/</div></div>#end</div>
    <div>Signature#if($electronicSignature)<div class="inputs--with-signature">/sn6/</div>#end</div>
</div>

<form class="inputs" action="#">
<div>Company
#if($electronicSignature)
<div class="inputs--with-signature">
           <input type="text" name="Agreement_DocuSignSignHere" title="Company Name" required="" />
</div>
     #end
     </div>
   <div>Date
         #if($electronicSignature)
         <div class="inputs--with-signature">
              <input type="text" name="Agreement_DocuSignDateSigned" title="Date" required="" />
         </div>
         #end
 </div>
 <div>Signature
         #if($electronicSignature)
         <div class="inputs--with-signature">
            <input type="text" name="Agreement_DocuSignSignHere" title="Date" required="" />
         </div>
         #end
   </div>
</div>