FormHostProvider

FormHostProvider is the bridge between the Buildocs SDK and your backend. You implement it once in your React project, and it routes every form event to the correct endpoint on your server.

Copy from the example

A ready-to-use FormHostProvider is included in the Workforce Management example project on GitHub. In most cases you can copy it as-is — the only thing you need to change is the backend URL so the endpoint mappings point to your own server.

The full reference implementation and step-by-step setup guide is available in the Integration section:

Implementing FormHostProvider →

---

Summary

The provider does three things:

1. Fetches an auth token from your backend on mount.
2. Uses useBuildocsApi(yourBackendUrl, token) to create a pre-wired HTTP client.
3. Builds a HostBridge object that maps each SDK event to the matching backend endpoint.

export function FormHostProvider({ children }: FormHostProviderProps) {
  const [token, setToken] = useState<string | undefined>(undefined);
  const buildocsApi = useBuildocsApi();
  const myApi = useBuildocsApi('https://your-backend.com/api/demo', token);

  useEffect(() => {
    fetch('https://your-backend.com/api/demo/token', { method: 'POST' })
      .then(r => r.json())
      .then((d: { token: string }) => setToken(d.token));
  }, []);

  const hostBridge: HostBridge = {
    runFormEvent:              async (args) => myApi.runEvent(args, '/runevent'),
    runFormUploadFiles:        async (args) => myApi.uploadFiles(args, '/uploadfiles'),
    runFormDeleteFileEvent:    async (args) => myApi.deleteFile(args, '/deletefile'),
    runFormDownloadFileEvent:  async (args) => myApi.downloadFile(args, '/downloadfile'),
    runFormGetLinkedFileEvent: async (args) => myApi.getLinkedFile(args, '/getlinkedfile'),
    runFormGetLinkedFileMetaEvent: async (args) => myApi.getLinkedFileMetaEvent(args, '/getlinkedfilemeta'),
    runFormGetLinkedFileByChunks:  async (args) => myApi.getLinkedFileByChunks(args, '/getlinkedfilebychunks'),
    runFormGetPresignedUrl:    async (args) => myApi.getPresignedUrl(args, '/getpresignedurl'),
    runLoadFormEvent: async (args: TLoadForm) => {
        const buildocsApiResponse = await buildocsApi.fetchFormDefinitionWithMeta(args.formCode);
        const result = await myApi.runLoadForm({...args, ...buildocsApiResponse?.payload}, '/loadform');
        return result;
    },
  };

  return (
    <BuildocsHostProvider hostBridge={hostBridge}>
      {children}
    </BuildocsHostProvider>
  );
}

Replace https://your-backend.com/api/demo with your actual backend URL.

---

Next step

Display your first form →