Rendering Forms

Learn how to render Buildocs UI Engine in your application.

Required Providers

The Form component must be wrapped by two providers. Without them the form cannot load its definition or communicate with your API.

Provider	Source	Responsibility
BuildocsProvider	@buildocsdev/sdk — distributed by Buildocs	Supplies the API key and base URL to all SDK internals
FormHostProvider	Implemented by you	Bridges form events to your backend and UI layer

BuildocsProvider is ready to use once you install the SDK. FormHostProvider is a component you write yourself using the provided boilerplate — see Implementing FormHostProvider for the step-by-step guide.

Basic Usage

import { BuildocsProvider } from '@buildocsdev/sdk';
import { Form } from '@buildocsdev/sdk/form';
import { FormHostProvider } from './provider/FormHostProvider'; // your implementation

function MyFormPage() {
  return (
    <BuildocsProvider apiKey="your-api-key">
      <FormHostProvider>
        <Form
          params={{
            formCode: "your-form-code",
            guid: "new",
            pluginCode: "",
            pGuid: "",
          }}
          enableEventHandlers={true}
        />
      </FormHostProvider>
    </BuildocsProvider>
  );
}

Form Parameters

params Object

Property	Type	Description
formCode	string	The unique form identifier from Buildocs
guid	string	Record GUID or "new" for new submissions
pluginCode	string	Optional plugin identifier
pGuid	string	Project GUID

Component Props

Prop	Type	Description
params	object	Form configuration parameters
enableEventHandlers	boolean	Enable form event callbacks

Creating New Records

Pass guid: "new" to render an empty form for new submissions:

<Form params={{ formCode: "contact-form", guid: "new" }} />

Editing Existing Records

Pass a record GUID to load existing data:

<Form params={{ formCode: "contact-form", guid: "abc-123-def" }} />