Form Filling SDK Configuration Examples

JavaScript and React code samples for SukiAuthManager and FormFillingClient session setup

The following examples in this guide show how to configure SukiAuthManager and FormFillingClient in JavaScript and React.

Before you begin, prefer forms. Obtain static template_id UUIDs from your Suki support team and/or define partner schema entries. Refer to Form filling templates and Dynamic Form filling.

What each step does

1. Authenticate

   Create SukiAuthManager with your partnerId, partnerToken, and environment. The SDK signs in before the Form filling interface can open.

2. Create the Client

   Pass the auth manager to new FormFillingClient({ authManager }). Create this once per page and reuse it for every session. Optionally add onError to log configuration or runtime errors.

3. Open a Session

   Call client.start() or render FormFilling with forms and onSubmit. Pass your encounter ID as correlation_id so results map to the right patient record. In JavaScript, also pass rootElement and give that container explicit height.

JavaScript

HTML

<div id="suki-form-container" style="width:100%;height:600px;"></div>
<button type="button" id="fill-forms-btn">Fill Forms with Suki</button>

JavaScript

import { SukiAuthManager } from "@suki-sdk/core";
import { FormFillingClient } from "@suki-sdk/form-filling";

const authManager = new SukiAuthManager({
  partnerId: "YOUR_PARTNER_ID", // Required
  partnerToken: "YOUR_PARTNER_TOKEN", // Required
  environment: "staging", // Optional
  loginOnInitialize: true,
  autoRegister: false, // optional (default true); when true, provider fields below are often required
  providerId: "YOUR_PROVIDER_ID", // Optional
  providerName: "Dr. Jane Smith", // Optional
});

const client = new FormFillingClient({
  authManager,
  onError: (err) => console.error(err.code, err.reason, err.message),
});

document.getElementById("fill-forms-btn").addEventListener("click", async () => {
  await client.start({
    rootElement: document.getElementById("suki-form-container"),
    forms: [{ form_template_id: "YOUR_TEMPLATE_ID" }],
    correlation_id: "c3d4e5f6-a7b8-9012-cdef-123456789012",
    onReady: () => console.log("Form UI ready"),
    onSubmit: (result) => console.log(result.structured_data.generated_values),
    onCancel: () => console.log("Cancelled"),
  });
});

React

React

import { useMemo, useState } from "react";
import { SukiAuthManager } from "@suki-sdk/core";
import { FormFillingClient, FormFillingProvider, FormFilling } from "@suki-sdk/form-filling-react";

export function FormFillingExample() {
  const client = useMemo(() => {
    const authManager = new SukiAuthManager({
      partnerId: "YOUR_PARTNER_ID", // Required
      partnerToken: "YOUR_PARTNER_TOKEN", // Required
      environment: "staging", // Optional
      loginOnInitialize: true,
      autoRegister: false, // optional (default true); when true, providerName and providerOrgId are often required
    });
    return new FormFillingClient({ authManager });
  }, []);

  const [open, setOpen] = useState(false);

  return (
    <FormFillingProvider client={client}>
      <button type="button" onClick={() => setOpen(true)} disabled={open}>
        Fill Forms with Suki
      </button>
      {open && (
        <FormFilling
          forms={[{ form_template_id: "YOUR_TEMPLATE_ID" }]}
          correlation_id="c3d4e5f6-a7b8-9012-cdef-123456789012"
          onSubmit={() => setOpen(false)}
          onCancel={() => setOpen(false)}
        />
      )}
    </FormFillingProvider>
  );
}

• In React, create FormFillingClient inside useMemo so you do not build a new client on every render. Mount FormFilling only while Form filling should be visible.

• Always implement onSubmit. It runs when structured JSON is ready after processing, not when the clinician taps submit.

Next steps

Configuration - full start() and FormFilling field reference.

Quickstart - A full walkthrough.

Basic usage example - Session status UI with useFormFilling().