{"id":11580,"date":"2019-10-14T17:14:29","date_gmt":"2019-10-14T17:14:29","guid":{"rendered":"https:\/\/www.directimpactsolutions.com\/?p=11580"},"modified":"2024-06-01T01:12:29","modified_gmt":"2024-06-01T01:12:29","slug":"how-to-display-filemaker-data-on-the-web","status":"publish","type":"post","link":"https:\/\/www.directimpactsolutions.com\/en\/how-to-display-filemaker-data-on-the-web\/","title":{"rendered":"How to Display FileMaker Data on the Web"},"content":{"rendered":"
\"displaying<\/figure>

Here\u2019s a quick way to display data from your FileMaker app on the web. This method is especially useful if you don\u2019t have a FileMaker Server.<\/p>

The example below is using DataTables<\/strong> (datatables.net<\/a>).<\/p>

\"example<\/figure>

Before we begin<\/h3>

There are multiple ways to\u00a0display data on the web<\/a>\u00a0from FileMaker Server (WebDirect, Data API, CWP\u2026). The options are more limited when you\u2019re using FileMaker client only.<\/p>

This method consists of 3 steps:<\/p>

  1. Setup your data table (we used one from datatables.net<\/a>)<\/li>\n\n
  2. Export the data as\u00a0JSON in FileMaker<\/a><\/li>\n\n
  3. Upload the data to your web server<\/li>\n\n
  4. Done!<\/li><\/ol>

    1. Setup your data table<\/h3>

    Throughout this guide, I\u2019ll be using data with 4 fields\/columns: Name, StockCode, Quantity and UnitPrice.<\/p>

    Copy the code below and save it as datatable.html<\/em> (you can embed the code below into your existing page, just be sure that you load the same JS and CSS files from the code below). Make sure you customize the column names between the CUSTOMIZE comments, according to your data. This table is set to pull JSON data from a file called data.json<\/em>. This file will be created and uploaded by FileMaker in steps 2 and 3 below.<\/p>

    <html>\n\t<head>\n\t\t<title>FM Datatables Demo<\/title>\n\t\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.1.3\/css\/bootstrap.css\"\/>\n\t\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.datatables.net\/1.10.20\/css\/dataTables.bootstrap4.min.css\"\/>\n\t\t<script\n  src=\"https:\/\/code.jquery.com\/jquery-3.4.1.min.js\"\n  integrity=\"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=\"\n  crossorigin=\"anonymous\"><\/script>\n\t\t<script type=\"text\/javascript\" src=\"https:\/\/cdn.datatables.net\/1.10.20\/js\/jquery.dataTables.min.js\"><\/script>\n\t\t<script type=\"text\/javascript\" src=\"https:\/\/cdn.datatables.net\/1.10.20\/js\/dataTables.bootstrap4.min.js\"><\/script>\n\t<\/head>\n\t<body>\n\t\t<table id=\"example\" class=\"table table-striped table-bordered\" style=\"width:100%\">\n\t\t\t<thead>\n\t\t\t    \n\t\t\t    <!-- CUSTOMIZE - START -->\n\t\t\t\t<tr>\n\t\t\t\t\t<th>Name<\/th>\n\t\t\t\t\t<th>StockCode<\/th>\n\t\t\t\t\t<th>UnitPrice<\/th>\n\t\t\t\t\t<th>Quantity<\/th>\n\t\t\t\t<\/tr>\n\t\t\t\t<!-- CUSTOMIZE - END -->\n\t\t\t<\/thead>\n\t\t<\/table>\n\t\t<script>\n$(document).ready(function() {\n    $(\"#example\").DataTable({\n      ajax: {\n            url: \"data.json\",\n            dataSrc: \"\"\n      },\n      \n      \/\/ CUSTOMIZE - START\n      \/\/ Column names are case-sensitive\n     columns: [\n          { \"data\": \"name\" },\n          { \"data\": \"stockcode\" },\n          { \"data\": \"unitprice\" },\n          { \"data\": \"quantity\" }\n     ],\n     \"pageLength\": 15\n     \/\/ CUSTOMIZE - END\n    });\n} );\n\n<\/script>\n\t<\/body>\n<\/html><\/code><\/pre>
    2. Export the data as JSON in FileMaker<\/h3>
    Here\u2018s an example of how to convert your records into JSON.<\/p>
    \"Export<\/figure>
    3. Upload the data to your web server<\/h3>
    We\u2019re using FTP in this example to upload data.<\/p>
    \"Upload<\/figure>
    4. That\u2019s it!<\/h3>
    Open the URL leading to where you saved datatable.html<\/em> in step 1. You can now see the data that you put in that JSON file in your table. From now on you can just run the \u201cExport to JSON and Upload\u201d script, and your data will be uploaded within a few seconds. You don\u2019t have to modify any code.<\/p>
    Going further:<\/h3>