Build-On Tutorial:

Email Templates

Email Templates: Lesson 1

List of Email Templates

Lesson Overview

The objectives for this lesson are to allow your team to create email templates, view those templates in a list and edit them in a detail view.

You will adjust the existing navigation scripts and the dashboard landing page, and create a new list and detail layouts for the templates.

Here is a sneak peek of what you will build:

Step 1 - Add a table and fields

You will create a new table and fields to store your email templates.

  1. Open the Manage Database dialog (File > Manage > Database...) and activate the Tables tab.
  2. Duplicate the Template table by selecting it, then clicking Copy, then Paste, at the bottom of the dialog.
  3. Rename the new table to “EmailTemplate” by typing the new name and clicking the Change button.
  4. Double-click the EmailTemplate table to see the list of fields it contains.
  5. Create the following additional fields in the EmailTemplate table, by typing the name into the Field Name area, choosing a Type (noted below in parentheses), then clicking Create:
    1. Body (text)
    2. Description (text)
    3. Subject (text)
    4. Title (text)
  6. Select the Body field, then click Options... to access additional field options. In the Validation tab check the Not Empty and the Display Custom Message if Validation Fails checkboxes. Set the custom message to “Body may not be empty”.
  1. Apply the same settings to:
    1. Description - Set the custom message to “Description may not be empty”
    2. Subject - Set the custom message to “Subject may not be empty”
    3. Title - Set the custom message to “Title may not be empty and must be unique”
    4. Title - Also check the Unique Value checkbox.
  1. Switch to the Relationships tab of the Manage Database dialog. Note that a new table occurrence named EmailTemplate was automatically added to the graph when you created that table.
    1. Double-click the EmailTemplate table occurrence and rename it to "EMAILTEMPLATE". This is done for consistency with the graph organization techniques used in the file.
    2. Drag the EMAILTEMPLATE table occurrence to the left column of table occurrences, and place it below the INTERACTION table occurrence. With both table occurences selected use the Arrange tools to Align Left Edges and Resize to Largest Width so the EMAILTEMPLATE table occurrence aligns with INTERACTION.
    3. Close the Manage Database window.
  1. When you created the EmailTemplate table, FileMaker also created a layout named “EmailTemplate”. Keep this layout for use in scripts, but rename it to match the other default layouts in the file:
    1. Open the Manage Layouts window (File > Manage > Layouts...).
    2. Double-click the EmailTemplate layout and rename it to: “Email Template_DEV”.
    3. Drag the layout to the Developer folder.

Step 2 - Create the Email Template List layout

You will create new list and detail layouts for email templates by duplicating the existing Member List and Member Detail layouts. You will duplicate them both, then modify them in separate steps.

  1. If you are not in the Manage Layouts window, open it (File > Manage > Layouts...).

    Note: You can also press the keyboard shortcut Command-Shift-L (macOS) / Control-Shift-L (Windows).
  2. Create a new email template layout folder, to organize your new layouts: click the arrow next to the New button in the lower left corner and choose Folder...
  1. Name the folder Email Template, and drag it within the “Desktop” folder. Make sure the Include in layout menus box is deselected.
  1. Select both Member List and Member Detail layouts in the Member folder and duplicate them by clicking the Duplicate button or by pressing Command-D (macOS) / Control-D (Windows).
  2. Drag both layouts to the Email Template folder.
  3. Double-click the Member List Copy layout. In the Layout Setup dialog do the following:
    1. Change Layout Name to “Email Template List”.
    2. Show records from: change MEMBER to EMAILTEMPLATE.
  1. Do the same for the “Member Detail Copy” layout. In Layout Setup:
    1. Change Layout Name to “Email Template Detail”.
    2. Show records from: change MEMBER to EMAILTEMPLATE.
  2. Close the Manage Layouts window.

    Now you can adjust the Email Template List layout to display fields and objects related to email templates.
  3. Enter Layout mode using the Edit Layout button in the status toolbar.

    Note: You can also enter Layout mode using the View > Layout Mode menu item, or the keyboard shortcut Command-L (macOS) / Control-L (Windows).
  4. Use the Layout pulldown menu in the status toolbar to navigate to the Desktop > Email Template > Email Template List layout.
  5. In the Header part, double-click the title and change it from “Members” to “Email Templates”. You may need to resize the text block to keep the text in a single line.
  6. Double-click the the Member_Name field. The Specify Field window will open. Select the EMAILTEMPLATE table occurrence from the dropdown menu, then select the Title field.
  1. Repeat this step to change the Type field to the Description field from the EMAILTEMPLATE table.
  2. Remove all other fields and their labels: click each field and field label and press Backspace or Delete.

    Note: There is a transparent button behind the fields in the Body layout part. Be careful not to delete this, because you will use it later to navigate from the list to the detail view.
  3. Open the Inspector and select the Position tab.
    1. Select the Title field - Remove the Name.
    2. Select the Description - Remove the Name and add a Tooltip of Self.

      These tooltips will show the user the entire contents of the field on hover, in case the contents are too long to be visible in the list view.
  1. Resize the Description field to occupy the Body.
  2. Change the Labels to match the new fields:
    1. Change Name to Title
    2. Change Type to Description
  3. Remove all of the Buttons in the footer except for the New Member button. (You will change the name of this button later in this lesson.)
  4. Your layout should look similar to the image below.

Step 3 - Create the Email Template Detail layout

  1. Use the Layout pulldown menu in the status toolbar to navigate to the Desktop > Email Template > Email Template Detail layout
  2. In the Header part, Double-click the title and change it from “Members” to “Email Template Detail”.
  3. Double-click the grey MEMBER portal along the left of the layout and change Show Records From to Current Table (“EMAILTEMPLATE”).
  1. Double-click the Member_name field in the portal. The Specify Field window will open. Select the Title field.
  1. Repeat this step for the Status field, choosing to replace it with the Subject field.
  2. You do not need the tab control object for email templates, so you will delete it. Click anywhere in an empty space in the Tab Control to select it.

    Note : You can also open the objects pane and select the Tab Control in the left column.
  1. Press Backspace or Delete. When prompted, confirm the Delete the selected panel control(s) and ALL objects inside dialog.
  2. Double-click the Member Detail label and change it to “EMAIL TEMPLATE DETAIL”.
  3. Double-click the <<Member_Name>> merge field and change it to “<<Title>>”.
  4. Select the <<Organization>> merge field and delete it.
  5. Select the thin grey line that is still visible in the body of the layout and delete it.
  6. Activate the Fields Tab in the Objects Pane. At the bottom of the tab, set Field Placement to vertical and Labels to above.
  1. Select the following fields in the Fields Tab and drag them to the body of the layout.
    1. Title
    2. Description
    3. Subject
    4. Body
  2. Activate the Styles tab of the Inspector.
  1. Apply the following styles:
    1. Title - style: txt Black.Left
    2. Description - style: txt Black.Left
    3. Subject - style: txt Black.Left
    4. Body - style: txt Black.Left
    5. All Labels for the fields - style: label Left
  2. Adjust the widths and positions of the fields on the layout so yours looks similar to the image below.
  1. Use the Exit Layout button to return to Browse mode and review your progress. Keep in mind there is no data yet in the EmailTemplate table.

    Note: You can also enter Browse mode using the View > Browse Mode menu item, or the keyboard shortcut Command-B (macOS) / Control-B (Windows).

Step 4 - Adapt existing layouts and scripts for navigation

  1. Continue in Layout mode and navigate to the Desktop > Dashboard layout.
  2. Select the Members button and duplicate it. You can Copy and Paste this buttonor you can press Option on your keyboard and click and drag the button to create a duplicate.
  3. Double-click the newly created button to open the Button Setup window.
    1. Change the label to “Email Templates”
    2. Choose an icon.
    3. Click on the optional script parameter and change it to

# ( "nav" ; “Email Templates" )

  1. Close the Button Setup window, then back on the layout, adjust the positions of the buttons so your layout looks similar to the image below.
  1. Use the Layout pulldown menu in the status toolbar to switch to the Desktop > Menu | Card layout.
  2. Double-click on “Donation History”. Since this is a segment that is part of a Button Bar, the Button Bar Setup window will open.
    1. Click the “+” button to add a Segment to the button bar
    2. Set its label to “Email Templates”
    3. Set Action to: “Perform Script”
    4. Select the “Nav Menu” script from the list. You can find it in the “Generic Scripts” folder.
    5. Add an optional Script Parameter
# ( "nav" ; “Email Templates" )
  1. Your layout should look similar to the image below.
  1. Open the Script Workspace (Scripts > Script Workspace...).
  2. Create a folder called Email Template. This folder will contain all the scripts you create for this Build-On.

    Right-click the folder and select the option to Exclude from Scripts Menu:
  3. When users navigate to the new Email Template List layout, it will help them to have the templates sorted in a predictable manner. You will create a script for this.

    Note: If you have not worked with scripts before, you will find it helpful to review the Creating and Editing Scripts section of the FileMaker Pro Advanced Help system before starting this task. 
  4. Duplicate the Template Script.
  5. Rename the new script (right-click > Rename) to "Email Template Go To List" and move it into the folder you just created.

    Note: Any time you create a new script or copy an existing one, amend the comments at the top to fit your current script.
  6. Add the following highlighted script steps after the existing Freeze Window script step:

    NOTE: See the following step for details on the Sort Records script step.

#===============================================================
# Purpose: Go to List layout for Email Templates
# Context: Menu
#--------------------------------------------------------------
# Parameters: None
#--------------------------------------------------------------
# Returns: Nothing
#===============================================================

Allow User Abort [ Off ]
Set Error Capture [ Off ]
Freeze Window

# Navigate to layout
Go to Layout [ “Email Template List” (EMAILTEMPLATE) ; Animation: None]

#Sort by Title
Sort Records [ Restore ; With dialog: Off ]
Go to Record/Request/Page [ First ]

Exit Script [ Result: $null ]

  1. In the Sort Records script step, set the Sort Order to EMAILTEMPLATE::Title, in Ascending order.
  1. Open the Generic Scripts > Nav Menu script. You will amend this to recognize your new layout and script.
  2. Add the highlighted code to the script, near the end. See the full script below for placement.

Else If [ $nav = "Email templates" ]
#Email template List
Go to Layout [  “Email Template List” (EMAILTEMPLATE) ; Animation: None  ]
Show All Records
Perform Script [  “Email Template Go to List” ; Parameter:  ]

Go to Record/Request/Page [ First ]

Step 5 - Create script to go from List to Detail

You should now be able to navigate from the dashboard or side menu to the list layout. The final navigation step is to allow users to click a template from the list and view or edit that template in a detail view.

The script begins by using the #Assign custom function to parse any script parameters and test to make sure they are valid. The only parameter you will send for now is the single context of Email Template List to Email Template Detail, but using this format gives you the flexibility to expand this script for other navigation from email templates in the future.

Note: The #( ) and #Assign ( ) custom functions are used to pass and parse parameters. The #( ) custom function is generally used to define a script parameter and accepts a key-value pair; the #Assign ( ) custom function is called in the script and turns the key-value pair into a script variable.

  1. Open the Script Workspace (Scripts > Script Workspace...).
  2. Create a new script by duplicating the Template Script.
    1. Name the script “Email Template - Go To Related Record (context)”.
    2. Move it into the Email Template folder.
  3. Modify the script by adding the highlighted steps below:

Allow User Abort [ Off ]
Set Error Capture [ Off ]
Freeze Window

# Parse the parameters
Set Variable [ $parameter_parsing_ok; Value:#Assign ( Get(ScriptParameter ) ) ]
If [ $parameter_parsing_ok = False ]
    # Parameters could not be parsed, exit this script and report back
    Exit Script [ Text Result: False ]
End If

If [ $context = "Email Template List to Email Template Detail" ]
    # Email template List to Email template Detail
    Go to Layout [ “Email Template Detail” (EMAILTEMPLATE) ; Animation: None ]
End If

Exit Script [ Result: $null ]

 

  1. Now assign that script to a button so your team can use it. Make sure your edited scripts are saved, then enter Layout mode using the Edit Layout button in the status toolbar, and navigate to the Email Template List layout.
  2. Double-click the invisible button in the background of the body. In the Button Setup dialog, set the following properties for the button:
    1. Select the Email Template - Go To Related Record (context) script.
    2. Set the Optional Script Parameter to:

# ( "context" ; "Email Template List to Email Template Detail" )

Step 6 - Create script to add new template

This script will first ensure the user can safely navigate away from the current record, then take him to the Email Template Detail layout, create a new record, and place the cursor in the Title field so he can begin typing right away.

  1. Create another new script by duplicating the Template Script.
    1. Name the script “Add New Email Template”.
    2. Move it into the Email Template folder.
  2. Modify the script so it matches the steps below.

Allow User Abort [ Off ]
Set Error Capture [ Off ]

# Do not proceed if current record can not be committed
Perform Script [ “Try To Commit or Halt” ; Parameter: ]

# Navigate to detail layout
Go to Layout [ “Email Template Detail” (EMAILTEMPLATE) ; Animation: None ]

# create new record
New Record/Request
Go to Field [ Select/perform ; EMAILTEMPLATE::Title ]

Exit Script [ Text Result: $null ]

  1. Now you can set up the button to trigger this New Email Template script. Enter Layout mode using the Edit Layout button in the status toolbar, and return to the Email Template List layout.
  2. Double-click on the New Member button. In the Button Setup dialog, set the following properties for the button:
    1. Set the button name to “New Template”.
    2. Set the Action: to Perform Script.
    3. Select the Add New Email Template script.
  1. Your layout should look similar to this:

Step 7 - Review your work

With all of the schema, interface, and scripting now in place, you can test adding and viewing email templates.

  1. You should be able to navigate to the Email Template List layout from the Dashboard button or from the side menu.
  2. When you go to the Email Template List layout, you should see all available templates.
  3. When you click the New Template button, you should navigate to the Email Template Detail layout where a blank new record is created for you. You can start to type the title for this template.
  4. If there are templates available in the list layout you can click on a row. This will bring you to the related record in the Template Detail layout.