Working with web viewers on layouts

Use web viewers to display webpages directly in a FileMaker Pro layout. Web viewers are layout objects that allow you to display information from websites based on data in your database. For example, a web viewer can calculate a URL for a map website based on information in your database table’s address and city fields. As you browse each record in your table, the web viewer displays a map of the location specified in the current record.

Web viewers use the operating system’s web browser technology, so you can perform many of the same tasks with web viewers that you can with web browsers. You can click links and navigate to pages other than the page the web viewer originally loaded. Web viewers can also display content on websites—such as PDF documents and videos—for which you may need to install additional software. You can also control URL encoding.

To make it easier for you to create web viewers, FileMaker Pro includes templates for several data-driven websites. When you use one of these templates, you only need to specify the parameters used by the website.

You can also create a custom web address for any website by defining a calculation. FileMaker Pro evaluates the expression to construct a URL, which the web viewer uses to display a webpage. Alternatively, the custom web address can be a data URL that passes HTML, CSS, and JavaScript to the web viewer (see Scripting with JavaScript in web viewers).

To add or change a web viewer:

  1. In Layout mode, choose the layout you want from the Layout pop-up menu.
  2. Click the Web Viewer tool Web Viewer tool in the status toolbar, then drag the crosshair on the layout to draw a web viewer.

    To change a web viewer, double-click the web viewer on the layout. Then skip to step 4.

  3. Choose a website from the Choose a Website list.

    To define a custom web address, choose Custom Web Address from the list. Click Specify next to the Web Address box, then define a calculation for the web address and click OK. (See Working with formulas and functions.) Then skip to step 5.

  4. For each website parameter you want to use:

    5. To

    Do this

    Add or change a field that contains the parameter

    Click Arrow button and choose Specify Field. Then select a database field and click OK. Or, type directly in the website parameter box.

    Add or change a calculation that generates the parameter

    Click Arrow button and choose Specify Calculation. Then create or change the calculation and click OK.

    Specify a constant value

    Type a constant value enclosed in quotation marks. To specify a parameter that consists of both a constant and a field, define a calculation.

    Remove the field or calculation used for a website parameter

    In a website parameter box, select the item, then press Backspace or Delete.
  5. Select options for the web viewer, such as displaying a progress bar or error messages and security status.

    For Display content in Find mode, after users enter a value into a field and then move out of that field, the web viewer recalculates the URL and reloads the webpage if the web address is based on the field.

    For Automatically encode URL, the web viewer applies encoding rules to the URL, if necessary, to comply with a browser’s required format. See About URL encoding in web viewers.

    For Allow JavaScript to perform FileMaker scripts, JavaScript that runs in the web viewer can perform a FileMaker script. See Scripting with JavaScript in web viewers.

Notes 

  • Web viewers display webpages in Form View and List View. In Table View, web viewers display only when they are in the header or footer parts or top or bottom navigation parts of a layout.
  • You can’t place a web viewer in a portal. If you place a web viewer in a portal, the web viewer appears as an object on the layout that overlaps the portal. However, you can place a web viewer on a popover within a portal, but the web viewer’s context will be that of the portal’s first record, not the portal’s current record.
  • Avoid placing objects in front of or behind web viewers. Web viewers may not display in Browse, Find, and Preview modes in the stacking order that you set in Layout mode.
  • You can send html data to a web viewer by embedding the data in a URL. See the Set Web Viewer script step.
  • To see a calculated URL based on a custom web address, in Layout mode, choose View menu  > Show > Sample Data.
  • You must ensure that a custom web address:
    • begins with the correct scheme—for example, http://, https://, ftp://, or file://
    • is correctly encoded as a URL, by selecting Automatically encode URL

Related topics