Overview

This tutorial assumes you are familiar with FTForm Plus to the point where you understand how to define a form and adds HTML Email knowledge.

HTML Emails may be formed (from Version 8.11 of FTForm Plus) and sent from the FormTrap Server.  Server Version 8.12 includes the ability to attach a PDF to an HTML Email.  This tutorial starts with a defined data file and document, then shows how to generate the HTML Email from it.  Basic knowledge of HTML is assumed, otherwise look here for details: www.w3schools.com (just one of several similar sites).

View the HTML Promo, Red copy HERE and the Blue copy HERE.  Note the samples have detail lines.  This tutorial builds the Blue sample.

HTML Emails are different from simple inclusion of HTML text via a file or directly into the Email tab, Body prompt of the FormTrap Server.  HTML output generated that way is NOT the subject of this tutorial.  For documents without conditional logic, without detail lines and without lookups,we suggest instead to include HTML code via FormTrap Server, Queues, Email tab, Body prompt.


This document shows how to handle normal document structures of header, detail lines and footer where the HTML content is defined in FTForm Plus.

Data Files

The data file is predefined, please download the .zip file by pressing here.

Unzipping Promo HTML.zip produces these folder and files:


..\Builds\HTML Promo (complete) 2017-05-26.ftzip

..\Data Files\HTML Promo no salutation.txt
                 HTML Promo.txt 

..\Projects\HTML Promo.ftxml
               HTML Promo (complete).ftxml

..\Substitutions\lookup.xml
                      our logo.png
                      Promo-Hdr no salutation.html
                      Promo Hdr.html
                      Promo Para.html
                      Promo Row Even Lookup.html
                      Promo Row Even.html
                      Promo Row Odd Lookup.html
                      Promo Row Odd.html
                      Promo Table Hdr.html
                      Promo Trl.html

..\Substitutions.other.colors\Promo Row Even blue.html
                                      Promo Row Even Lookup blue.html
                                      Promo Row Even Lookup red.html
                                      Promo Row Even red.html
                                      Promo Row Odd blue.html
                                      Promo Row Odd Lookup blue.html
                                      Promo Row Odd Lookup red.html
                                      Promo Row Odd red.html
                                      Promo Table Hdr blue.html
                                      Promo Table Hdr red.htm                     


You can relocate files except lookup.xml to their normal locations.

Make a decision on lookup entries, and see Trailer toward the bottom of this tutorial.  You must have lookup entries modified to your values to go into production.

..\Substitutions.other.colors contains files for the Blue and Red tables.

Top

Header

What follows assumes your email is roughly the same as our Outlook-based emails,  If you cannot decypher your email, you can send it to us to make these same adjustments and to send back your HTML files.  Our charge for doing so is $US 100 ($AUD 150 incl. GST), via credit card, subject to prior inspection of your email to ensure we can cope with it.  Should you require additional elements (like pictures linked to web site entries) please have your HTML specialist or contractor contact us.  What follows should do for most relatively simple Emailed output.


Write yourself an email with Subject Line, Salutation followed by a First paragraph, then Trailer paragraph, and your normal end of message.  View Source for this message (Windows 10, Outlook, make message current, then click in the message and mouse right to see what is shown below).




This shows the source (using PSPad).  Find, "Salutation" (= Dear Paul in the example), highlighted.



Find the natural division after Dear Paul (it's one line down and 4 characters to the left, between </p> and <p>.  From behind the </p> copy upward to the front of the file, cut and paste this to a new file called Promo Hdr.html.  Now change Dear Paul to [master/Salutation] and leave the comma as is.
Save the file in the same folder as Substitutions, location of the folder via Preferences, Folders (this icon ).

Reload the file just saved and replace  [master/Salutation] and the following comma with SPECIAL PROMOTION FOR [master/To Company] and save as Promo Hdr no salutation.html and we're done with the email header HTML files which we now need to link.





Go to Layout Placement, and select the Report Header, Properties.




Right shows what you see:






Pressing ...






    ... opens the HTML Layout window ...










... where pressing Add ...






... opens the HTML Code window where you select From file from the pull down.


Select Load Content which shows a list of HTML files,


Select the Promo Hdr.html saved above.





Now Add ... once more and select
Promo Hdr no salutation.html from the list.





You now have two files selected and need rules so each prints when it should.


Select the Promo Hdr.html file.







Press Edit rules ...





Press Add ... and set up the not empty rule as shown.


Now set the opposite of this rule (empty) for file
Promo Hdr no salutation.html.







Select (from the Build area top right)  and eventually you'll see Dear Jim, as an HTML page, modelling your email.


Modify the input file and remove salutation, now you'll see the other header.

Top

Paragraphs

HTML paragraphs are already built and need only to be selected from their form layout area. 

Select Promo Para, Properties, and attach the file Promo Para.html to it (see above for the steps). 

Select (from right top Build panel).  The resulting HTML display will show two additional paragraphs with data in them.  Let me explain.

  1. Look at the data file, you'll see this line after the heading:

    Para Promo: Start Para
  2. and this line prior to the trailer:

    Para Promo: Last Para

Paragraphs are defined by this rule:


Data converts into lookup keys, Lookup Paragraph-Start Para for the first and Lookup Paragraph-Last Para.  This shows the Start Para entry in the Lookup Table:



To see how Customer Name and other elements are inserted into the looked-up result, press HERE.  Using program lookup from the FormTrap Program group, you can view the HTML commands that sets "premier customers" to bold and make other modifications to fonts, etc.

Top

Table Header

Same old, same old ...

  1. Select the Table Header, then Properties
  2. Select
  3. From the HTML Layout window, select Add ...
  4. Now select File from the pull-down and select file Promo Table Hdr.html and OK until all windows close.
  5. Select to see the XML which now has a table header between the two paragraphs.

Top

Table Detail

Same old, same old once more ...

  1. Select the Promo Detail, then Properties
  2. Select
  3. From the HTML Layout window, select Add ...
  4. Now select File from the pull-down and select file Promo Row Odd.html and OK until all windows close.
  5. Select to see the XML which now has table records after the Table Header.

Top

Rules to select HTML Segments

Now we're going to "fancy this up".  We'll print with background in:

White (which is what we just looked at) as Odd rows and ...
Blue which you haven't seen as yet as Even rows

When we have those two types done, we'll then introduce looked-up product descriptions, as well as supplied-in-data product descriptions (which is what we have so far).


This form has a test defined for Odd and Even.  Select Document, Master and the Variable Table Odd Even which has an initial value of 2, then look at the Promo Detail, Formula Odd Even for the calculation, where a resulting Table Odd Even value of 1 is Odd and 2 is Even.







We'll start by printing the white row only when Odd.





From the Layout window, click  .



The HTML Layout window  opens, select the line and  Edit rules ...






The rule we want is (from pull down) Evaluates numeric expression to true or non zero, and set up using the Wizard as shown (only prints odd rows).  OK until all windows are closed.


See the result by clicking , you'll see only the odd detail lines.



then Add ... and select the file Promo Row Even.html.

 
Set the rule on this to only print when even
[master/Table Odd Even] == 2, then close all windows with OK.


See the result by clicking , you'll see alternate colored detail lines.











Now we'll add a rule to BOTH of the above entries to stop them printing if a lookup for the product exists.  Add a new rule to both entries, as shown.

The rule means no lookup exists, hence the lookup returns what went in.  When a lookup is found, the lookup is returned. OK until no windows are open.



See the result by clicking , you'll see the line with Code IBT7260 is missing and you have two adjacent White entries.

Add Lookup Entries



then Add ... and select the file Promo Row Even Lookup.html.

Set the rule on this to print when even, [master/Table Odd Even] == 2, and a second rule where a lookup exists.


See screen shot for finished rules.


Add the HTML file Promo Row Odd Lookup.html.

Set the rules to print when odd and where a lookup exists.

Close all windows with OK.

View the result with .  You should see the lookup for Code IBT7260 as an even row, with it's lookup.


Lookups are almost essential for Promos as what is normally shown is an invoicing description which is grossly inadequate for SELLING ...

Top

Trailer

Modify lookup.xml entries

Modify the entries below.  You will likely require multiple our email for-name, our phone for-name and our title for-name for different staff members.

Lookup paragraph-start para and Lookup paragraph-last para are the text for those respective paragraphs and may include HTML code, for example, this which bolds the enclosed text:  <b>premier customers</b>. Lookup may quote field names from the Master record in square brackets (eg. [Master/To Company]).  Once changes have been made, merge the new lookup entries into your normal lookup file, see HERE.





Modify all our xxx in the lookup table.

Some lookups are fixed (there is no data in the names).


There are also data carrying lookups where data in the input field Email From Name, "Paul Green" in the sample file, is suffixed to form the full lookup name, ie Our Title for-Paul Green as the lookup.  Please change all our xxx for-Paul Green to your required name (and add entries if multiple persons will send this Promo).








Finally, there is a separate file in Substitutions that carries the named file our logo.png which you should replace with your logo.  If you change the file extension, please also change the entry in Promo Ftr.html.

Top

FormTrap Server

Once you have Promo working in test, please Build the form, then set up in FormTrap Server.  You must also modify the data file's email address so you (rather than FormTrap) get sent the resulting email.

In FormTrap Server, via FTClient:

  1. Select Data Files, New folder ... and name the folder (something like HTML Promo), then if this is your common practice, tick Use private substitution files ... .  Select the form just built to load the folder.

  2. Select Add substitution files ... and select these files to move into the FormTrap Server:
    lookup.html
    our logo.png
    Promo*.html     (all of the .html files quoted in the form)
  3. In Processing tab, Output file type select Specify in delivery tabs from the pull-down.

  4. In Email tab:

    (Right side, middle block) select the middle button which allows BOTH HTML body + PDF attachment in the one Email delivery.  The results of pressing this.
    Currently defined attachment filters shows both filters. You can view these filters via Setup, Filters whereLayout-PDF filter has an Options question where the options such as color and logo can be varied (view options HERE).

    (Right side, top block) you must select Type as XML unformatted from the drop down and may optionally provide a name for the PDF file in Title.  Title may include Delivery tag names in square brackets
    (eg Promo for [Promo for Title]).

    (Bottom) Subject and Body Text are irrelevant (are ignored).

    Note: To output an HTML Email only, use Processing tab, Output file type and select HTML from the drop-down.

Top

Table in Red (and other HTML changes you can make)



An equivalent set of HTML segments for the table header and detail lines are available in Red.  If your prefer red, the simplest way is to remove these standard (no color suffix) segments from substitutions:

Promo Row Even Lookup.html
Promo Row Even.html
Promo Row Odd Lookup.html
Promo Odd.html
Promo Table Hdr.html

Then from folder ..\Substitutions\other.colors copy all *red.html files and paste them then remove the " red" from their names.


This will give you a red Promo email, nearly equivalent to the PDF.


Fonts and Sizes


You may find the Salutation is in the wrong font, in this case amend the highlighted items below in Promo Hdr.html and equivalent items in the other segments (salutation is also highlighted in the example).


Top