There are two ways to populate your table data: initializing the HTML with data to be rendered when the page is rendered or live-updating the table data using JavaScript.

Initializing the HTML with table data

The HTML included in the demo file has a placeholder for the initial data for the table to load with. The __data__ placeholder should be substituted out for the table data you want to display using the Substitute() function. This data is loaded at the time the page is loaded, and will form the table that the user sees right away. If you are using FileMaker 18 or earlier this is the only way to get data into the table.

Generate your data for the table using your own scripting, and then substitute the __data__ placeholder text in the HTML with your own data. The page will load and your table will appear.

Use JavaScript to fill or update the table

If you are on FileMaker 19 or later you can use the “Perform JavaScript in Web Viewer” script step to fill or update the table data after the page has loaded. Call this script step with the name of your web viewer and call the “fmSetData” function with your table data as a parameter to fill or update your table being displayed. You can use this to change the data on the page without having to reload the entire web viewer.

Perform JavaScript in Web Viewer [ Object Name: "MyWebViewer" ; Function Name: "fmSetData" ; Parameters: $table ]

Going this route, you can choose to initialize the table as an empty JSON object “{}” or only with headers and no rows, such as:

{
  "headers": [
    {
      "align": "right",
      "value": "ID"
    },
    {
      "value": "Business"
    },
    {
      "value": "Primary Contact"
    },
    {
      "value": "Website"
    },
    {
      "align": "center",
      "value": "View Site"
    }
  ]
}