Skip to main content

Integrating with @proofgeist/fmdapi

You can combine the @proofgeist/fm-webviewer-fetch package with the @proofgeist/fmdapi package for an even better developer experience developing custom webviewer integrations. The @proofgeist/fmdapi package can create a type-safe client for interacting with a layout in your FileMaker solution and generate a payload suitable for the Execute Data API script step. Using the fmFetch function behind the scenes, you now get the same power of the DataAPI without having to worry about authentication or making network requests to your FileMaker server.

1. JavaScript Installation​

Install both packages to your project.

npm install @proofgeist/fmdapi @proofgeist/fm-webviewer-fetch
yarn add @proofgeist/fmdapi @proofgeist/fm-webviewer-fetch

2. FileMaker Script Installation​

tip

Copy these scripts from the demo file to your own FileMaker solution.

  • ExecuteDataAPI
  • SendCallback

Create a FileMaker Script that passes the parameter to the Execute Data API script step and returns the result to the webviewer according the fmFetch specification.

# Script Name: "ExecuteDataAPI"
Set Variable [ $json ; Value: Get ( ScriptParameter ) ]
Set Variable [ $request ; Value: JSONGetElement ( $json ; "data" ) ]
Set Variable [ $callback ; Value: JSONGetElement ( $json ; "callback" ) ]

Execute FileMaker Data API [ Select ; Target: $result ; $request ]

#  send it back to the webviewer
Set Variable [ $callback ; Value: JSONSetElement ( $callback ; ["result"; $result; JSONObject ]; ["webViewerName"; "TaskViewWV"; JSONString ]) ]
Perform Script [ Specified: From list ; “SendCallBack” ; Parameter: $callback ]

3. Initialize the fmdapi client​

info

This method requires the DataAPI enabled on the FileMaker Server and that you have a user with DataAPI privileges to access the solution, but only for generating the types; afterwards all calls to fetch data will go through your FileMaker scripts.

If you are unable to host the file or cannot enable the DataAPI on your development server, use Option B to create the client manually.

Initialize the codegen tools:

codegen --init

Add an .env.local file to the root of your project with credentials to your FileMaker server:

FM_DATABASE=filename.fmp12
FM_SERVER=https://filemaker.example.com

# if you want to use the Otto Data API Proxy
OTTO_API_KEY=KEY_123456...789
# otherwise
FM_USERNAME=admin
FM_PASSWORD=password

Configure which layouts you want to access in the fmschema.config.mjs file (generated by codegen --init):

/**
 * @type {import("@proofgeist/fmdapi/dist/utils/codegen").GenerateSchemaOptions}
 */
export const config = {
  // the name of the script you created in step 2
  webviewerScriptName: "ExecuteDataApi",

  // any layouts you want to access
  schemas: [
    {
      layout: "API_Users",
      schemaName: "Users",
    },
  ],
};

For more options, see the fmdapi codegen documentation

Then run the codegen:

codegen

Option B: Manual client creation​

import { DataApiWV } from "@proofgeist/fmdapi";

export const client = DataApiWV({
  // the name of the script you created in step 2
  scriptName: "ExecuteDataApi",
});
caution

This method will not be fully type-safe and autocomplete the fields on your layout, but you can you manually create types and pass them to this client. Learn more

4. Use the client​

import { UsersClient } from "./schema/client";

const users = await UsersClient.findOne({ query: { id: "===1234" } });

For all available methods, see the fmdapi documentation