fmFetch
The purpose of the fmFetch function is to call a FileMaker script and get the result of the FileMaker script back to your web application running in a webviewer. If you don't care about the script result, check out the callFMScript function instead.
To accomplish this, this function wraps the FileMaker.PerformScript function injected into the webviewer by FileMaker Pro and assigns each invocation of your fetch with a unique ID. In turn, the FileMaker script that you call must call back into the webviewer with this callback ID and the result of your script.
To see a working example of this, download this demo file.
Simple Example
Let's say you have the following in your Javascript code:
import { fmFetch } from "@proofkit/webviewer";
async function getData() {
const result = await fmFetch("GetSimpleResult");
}And the following in your FileMaker script named GetSimpleResult:
# Required properties
Set Variable [ $json ; Value: Get ( ScriptParameter ) ]
Set Variable [ $callback ; Value: JSONGetElement ( $json ; "callback" ) ]
Set Variable [ $webViewerName ; "web" ]
# $result must be an object.
Set Variable [ $result ; Value: JSONSetElement ( "" ; [ "hello" ; "world" ; JSONString ] ) ]
Set Variable [ $callback ; Value: JSONSetElement ( $callback ; ["result"; $result; JSONObject ]; ["webViewerName"; $webViewerName; JSONString ]) ]
Perform Script [ Specified: From list ; "SendCallBack" ; Parameter: $callback ]The SendCallBack script comes with the FileMaker addon that you installed
with the ProofKit CLI, or from the Demo
File.
The awaited result of the fmFetch call will be:
{
"hello": "world"
}Passing Script Parameters
A script parameter can be passed to the fmFetch function as a string or JS object. The script parameter will be passed to the FileMaker script as a string.
import { fmFetch } from "@proofkit/webviewer";
async function getData() {
const result = await fmFetch("ScriptName", {
param1: "value1",
param2: "value2",
});
}Then simply parse out the script parameter via the data key in your FileMaker script.
Set Variable [ $json ; Value: Get ( ScriptParameter ) ]
Set Variable [ $callback ; Value: JSONGetElement ( $json ; "callback" ) ]
Set Variable [ $data ; Value: JSONGetElement ( $json ; "data" ) ]TypeScript Support
If you want to directly type the result of your FileMaker script, you can pass a type to the fmFetch function.
type Result = {
hello: string;
};
async function getData() {
const result = await fmFetch<Result>("GetSimpleResult");
}Warning: Unsafe Casting
The type that you pass here is not validated with the actual FileMaker script result. You may want to consider validating the data that is returned from FileMaker with a runtime validation library such as zod. This technique is most powerful when combined with the Execute FileMaker Data API script step and automatic type generation found in the @proofkit/fmdapi package.