Navigate between FileMaker and an app

Navigation between screens in a Web Viewer app is client-side routing — a router running in JavaScript, the same as any single-page app. FileMaker is not involved in a normal navigation; the user clicks a link or a button, and the router swaps the visible screen without a round trip to FileMaker.

This page covers the router itself and the one case where FileMaker needs to reach in and trigger a navigation. It doesn't cover where the router starts (see Initial Props) or how one bundle serves multiple entry points (see Multiple Apps) — those are both about routes at specific points in the app's lifecycle, not navigation as an ongoing interaction.

Within the app, navigation is ordinary router usage — a link, a programmatic navigate() call, whatever the router provides. Nothing about running inside a Web Viewer changes this. If your router is hash-based (common in a Web Viewer, since there's no server to handle deep links), the current route lives in window.location.hash and survives a refresh on its own.

Sometimes a FileMaker script needs to move the user to a different screen — for example, a button on a layout that isn't the Web Viewer's own layout, or a script that finishes some FileMaker-side work and wants to land the user on the record it just touched. There are two distinct things this could mean, and they use different mechanisms:

Leaving the Web Viewer entirely

If the destination is a FileMaker layout — not a screen inside the app — this isn't navigation within the app at all. Use callFMScript to hand off to FileMaker directly:

Copy 
callFMScript(
  "Navigate Away From Web Viewer",
  { layout: "Contacts" },
  FMScriptOption.RESUME,
);

See Call FileMaker Scripts from an App for the fire-and-forget script-call pattern this uses.

Changing the in-app route from a script

If the destination is a screen inside the app itself, the script needs to call into the running app, not the other way around — that's a Command. Register a command that calls the router:

Copy 
export function CommandNavigation() {
  const navigate = useNavigate();

  useWebViewerCommand("openCustomer", (recordId) => {
    navigate({ to: "/customers/$id", params: { id: recordId } });
  });

  return null;
}

FileMaker triggers it the same way it triggers any command, with Perform JavaScript in Web Viewer:

Copy 
Perform JavaScript in Web Viewer [ Object Name: "web" ; Function Name: "adt.openCustomer" ; Parameters: Customers::id ]

See Commands for the full registration API, including the React hook used above and the static registerWebViewerCommand alternative for handlers that don't need component state.