Build-On Tutorial:

WebDirect Access

WebDirect Access: Lesson 1

View campaign status in a browser

Lesson Overview

The objective of this build-on is to allow users to view campaign records from a desktop or mobile browser. You will create two new layouts set up for FileMaker WebDirect: a large one for desktop use and a smaller one for mobile use. You will enable FileMaker WebDirect access and update the script at startup to redirect web users to the new layouts. You will also create a script that detects the window size to choose the right layout to display.

Step 1 - Create new desktop layout for web use

Duplicate the existing Campaign List layout and modify it for use with FileMaker WebDirect.

  1. Open the Manage Layouts dialog (File > Manage > Layouts...).

    Note: You can also press the keyboard shortcut Command-Shift-L (macOS) / Control-Shift-L (Windows).
  2. Create a new layout folder.
    1. Click the arrow next to the New button in the lower-left corner and choose Folder...
    2. Name the folder “WebDirect”.
  3. Drag the new WebDirect folder to the end of the layout list.
  1. Select the Campaign List layout and duplicate it by clicking the Duplicate button or by pressing Command-D (macOS) / Control-D (Windows)
  2. Drag the new Campaign List Copy layout to the WebDirect folder
  1. Double-click the Campaign List Copy layout. In the Layout Setup dialog, rename it to “Campaign List | WebDirect”.
  1. Click OK, then click Open in the Manage Layouts dialog. Your new layout will open in a new window.
  2. 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).
  3. In the Header, remove the side navigation button in the top right corner.
  4. Next, delete the Footer part. To do so, click on the grey Footer label on the left and press the Backspace or Delete key.

    Note: You can also delete or add Layout Parts using the Layouts > Part Setup... menu item.
  1. In the Body of the layout, remove the large, transparent button. You can select it by clicking in the white space behind the fields.
  1. You might want your FileMaker WebDirect users to see a limited amount of data about campaigns. Remove the Start Date and End Date fields and labels.
  1. Next, resize the Name field to a Width of 288 pt via the Position tab in the Inspector.
  1. You will have some white space between the campaign Name field and the other fields on the layout. Select the fields on the right side, along with their labels. Then, move the objects to the left, closer to the campaign’s name.
  1. Next, reduce the size of the layout to accommodate a variety of screen sizes for FileMaker WebDirect users. Making sure no layout objects are selected, use the Position tab of the Inspector to resize the layout Width to 704 pt and move the fields to fit within the layout.
  1. Your FileMaker WebDirect layout is now ready. Save it by using the Layouts > Save Layout menu item or by pressing Command-S (macOS) / Control-S (Windows).

Step 2 - Mobile layout for WebDirect

You will now create a second, smaller version of the Campaign layout for use with mobile devices.

  1. Open the Manage Layouts dialog again (File > Manage > Layouts...)
  2. Select the Campaign List | WebDirect Layout you created in Step 1 and duplicate it.
  3. Make sure the new layout is in the WebDirect folder.
  4. Double-click the layout. Using the Layout Setup dialog, rename it to “Campaign List | WebDirect Small”
  1. Click Open to open the new layout in a new window.
  2. Enter Layout mode using the Edit Layout button in the status toolbar.
  3. Select the Body part label and resize the Height of the Body to 176 pt via the Position tab in the Inspector. This will allow you to place fields on top of each other, instead of in a single row.
  1. Select the fields Amount Raised and Goal and move them below the Name field.
  1. Change the field label Amount Raised to “Raised” and reduce the white space between the labels and fields.
  1. In the Header, delete the labels Campaign and Goal Met.
  2. Select the Header part label and resize the Header to a Height of 72 pt via the Position tab in the Inspector.
  1. Resize (via the Position tab in the Inspector) and rearrange the fields as follows:
    1. Resize the Name field to a Width of 240 pt.
    2. Resize the Donation_PercentOfGoal field to a Width of 72 pt.
    3. Move the Donation_PercentOfGoal to the left, next to the Name field.
    4. Resize the Donation_TotalAmount and Financial_Goal to a Width of 157 pt.
    5. Rearrange the fields similar to the image below.
  1. Next, you will make some changes to the styles of the layout objects. Activate the Inspector Pane (View > Inspectors > Inspector) or the keyboard shortcut Command-I (macOS) / Control-I (Windows).
  2. Select the Styles pane.
  1. Now, change the styles to the following objects via the Styles tab in the Inspector:
    1. Name field: style txt Minimal.Black.Left.Bold
    2. Donation_PercentOfGoal field: style txt Minimal.Black.Right.Bold
    3. Donation_TotalAmount and Financial_Goal field: style txt disabled.Gray.Right
    4. Raised and Goal labels: style label Left
    5. Rearrange the field labels to align with the left border of the fields
  1. Select the Donation_TotalAmount and Financial_Goal fields, along with their labels. Using the Position tab of the Inspector, in the Autoresizing area, turn on the anchors for only the top and left. This means that if a window is wider than the layout, the objects will remain anchored to the top and left of the screen.
  2. Resize the layout to a Width of 352 pt to accommodate smaller screens.
  1. Save the layout by using the Layouts > Save Layout menu item or by pressing Command-S (macOS) / Control-S (Windows).

Step 3 - Adapt layout to screen width

Add script triggers to the new layouts and create a script so that the smaller version is automatically displayed when resizing the window. In some cases, like with mobile phones, changing the orientation of the device may trigger the layout change, based on the dimensions of the screen. When the script is triggered, the script will check if the window width is greater than 724 pt. If it is, the user will see the larger of the two layouts. Otherwise, the user will see the smaller layout.

  1. Open the Script Workspace (Scripts > Script Workspace...).
  2. Create a new script by duplicating (Scripts > Duplicate Script) the Template Script in the Example Scripts folder.
  3. Rename (Scripts > Rename Script) the script to “TRIGGER_Resize Window”.
  4. Modify the script by adding the highlighted steps below.

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

If [ Get(WindowWidth) < 724 ]
   Go to Layout [ “Campaign List | WebDirect Small” (CAMPAIGN); Animation: None ]
   Go to Layout [ “Campaign List | WebDirect” (CAMPAIGN) ; Animation: None ]
End If

  1. Exit Script Workspace and save your changes. Open the Manage Layouts dialog (File > Manage > Layouts...).
  2. Double-click the Campaign List | WebDirect layout to open the Layout Setup window.
  3. Activate the Script Triggers section and select OnLayoutSizeChange. This script trigger will activate when the size of the window changes. This can happen if a user rotates their device, like with a phone or tablet. It can also happen if a user resizes a browser window.
  4. Select the new script TRIGGER_Resize Window.
  1. Using the Manage Layouts dialog, double-click the Campaign List | WebDirect Small layout. Activate the Script Triggers tab and similar to the previous layout, activate the OnLayoutSizeChange event and choose the TRIGGER_Resize_Window script.
  2. Click OK and close the Manage Layouts dialog.

Step 4 - Redirect web users to correct layout

Modify the script that runs when a user opens the file to redirect web users to the correct layout.

Note: Depending on the lessons you’ve already completed, the TRIGGER_OnOpen script might look differently. But the part you are about to add should look similar to what is described below.

  1. Open the Script Workspace (Scripts > Script Workspace...).
  2. Open the TRIGGER_OnOpen script in the General Scripts folder.
  3. Modify the script by adding the highlighted steps below.

    NOTE: Details for the Sort Records script step are following the script below.

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

If [ Get(SystemPlatform) = 4 // WebDirect ]
    # Check window width and choose right layout
    Perform Script [ Specified: From List ; “TRIGGER_Resize Window” ; Parameter: ]

    Show All Records

    # Sort by Campaign Start Date, descending
    Sort Records [ Restore; With dialog: Off ]
    Go to Record/Request/Page [ First ]
    Exit Script [ Result: $null ]

    Go to Layout [ “Dashboard” (_GLOBAL) ]
    Adjust Window [ Resize to Fit ]
    Move/Resize Window [ Current Window; Top: 0; Left: 0 ]

End If

  1. For the Sort Records script step, sort by the Date_Start field, in descending order, so your users can see future and recent campaigns at the top of the list.
  1. Exit the Script Workspace to save your changes.

Step 5 - Enable access to the file via FileMaker WebDirect

Create a new Privilege Set for web users.

  1. Go to File >Manage > Security...
  2. Activate the Privilege Sets tab and click New... to create a new priviledge set.
  3. In the Privilege Set Name field, type “WebDirect”. At first, the new Privilege Set will be very restricted, so you will adjust the settings to allow users to see the correct information.
  4. Under Extended Privileges, turn on Access via FileMaker WebDirect (fmwebdirect). Uncheck Access via FileMaker Network (fmapp).
  5. Note: If you have other Privilege Sets that should allow user to log in from a browser, you should activate this extended privilege for those Privilege Sets as well.
  6. Under Other Privileges, turn on the following:
    1. Allow Printing
    2. Allow user to modify their own password
  1. Under Data Access and Design> Records, select Custom Privileges...
  2. You want your web users to only view Campaign and Donation information. Set Records to have Custom privileges... and the Custom Record Privileges window will appear.
  3. Select Campaign, Donation, z_Globals, and z_Resource. You can do this by clicking on each table row while holding down the Command key on the Mac, or the Ctrl key on Windows.
  4. In the Set Privileges: section, set the View action to yes, with Field Access set to all. Since you don't want users creating, editing, or deleting campaigns, you’ll leave those actions to no.

    Note: Since z_Globals and z_Resource are utility tables, all users should have access to these tables.

    Your Custom Record Privileges should look like the image below.
  1. Click OK to close the dialog, then complete the 'Data Access and Design' portion of the Edit Privilege Set window as follows:
    1. Layouts: “All View Only”
    2. Value Lists: “All View Only”
    3. Scripts: “All Executable Only”
  1. Save the WebDirect privilege set and create a new user account assigned to the new privilege set.
    1. Go to the Accounts tab of the Manage Security dialog and click on the New... button.
    2. Type in the account name “test” and set the password to “123”.
    3. Set the Privilege Set to WebDirect.
  1. Save all of your changes by entering full access credentials (Account Name: Admin, Password: <Blank>).

    Note that you’ll want to delete this test account once you’ve made sure your account works as expected.

Step 6 - Review your work

With the security, layouts, and scripts now in place, you can test the new WebDirect features. Note that you’ll need to host your app on FileMaker Cloud or FileMaker Server in order to test properly. For more information on FileMaker WebDirect, review the guide found here:

  1. Once your app is hosted, open your app from your browser, using the following web address: https://<your server name>/fmi/webd/Memberships. You can log in with your test account (account name: test; password: 123).
  2. Depending on the size of your screen, you should be redirected to either the Campaign List | WebDirect or the Campaign List | WebDirect Small layout.  
  3. On the desktop, try resizing the browser window to mimic a phone screen. The layout should change to the smaller version when the window is too small (less than 724 pt).    
  4. On a mobile device with a large enough screen, the layout may change when changing the orientation of the device, depending on the screen resolution.
  5. When logged in through FileMaker WebDirect, you should not be able to create or edit campaign information, or view Member information.