Skip to main content

Displaying Your First Form

With your backend running and FormHostProvider in place, rendering a Buildocs form requires only a few lines in your React entry point.

Full example — index.tsx​

The example below is a minimal but complete index.tsx that renders a single form with language-switching support.

import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { I18nextProvider, useTranslation } from 'react-i18next';
import { BuildocsProvider, LanguageSwitcher } from '@buildocsdev/sdk';
import { Form } from '@buildocsdev/sdk/form';

import '@buildocsdev/sdk/form.css';
import '@buildocsdev/sdk/formcanvas.css';
import '@buildocsdev/sdk/providers/theme.css';
import { FormHostProvider } from './provider/formhostprovider';
import i18n from './i18n';

function App() {
  const { i18n: { language } } = useTranslation();
  return (
    <I18nextProvider i18n={i18n}>
      <BrowserRouter>
        <BuildocsProvider apiKey="YOUR_API_KEY">
          <FormHostProvider>
            <div style={{ paddingBottom: '5rem', display: 'flex', justifyContent: 'flex-end', padding: '16px' }}>
              <LanguageSwitcher />
            </div>
            <div>
              <Form
                key={language}
                params={{
                  formCode: "EMPLTBL",
                  guid: "new",
                  pluginCode: "INTRA",
                  pGuid: "",
                }}
                enableEventHandlers={true}
              />
            </div>
          </FormHostProvider>
        </BuildocsProvider>
      </BrowserRouter>
    </I18nextProvider>
  );
}

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <App />
);

What each part does​

CSS imports​

import '@buildocsdev/sdk/form.css';
import '@buildocsdev/sdk/formcanvas.css';
import '@buildocsdev/sdk/providers/theme.css';

These three stylesheets are required. Without them, the form will render unstyled.

BuildocsProvider​

<BuildocsProvider apiKey="YOUR_API_KEY">

Authenticates your app with Buildocs. Replace the apiKey value with the API Key from your project settings in the Buildocs portal.

FormHostProvider​

<FormHostProvider>

Connects form events to your backend. See FormHostProvider for implementation details.

LanguageSwitcher​

<LanguageSwitcher />

An optional built-in widget that lets users switch the form language at runtime. You can remove it if you do not need multi-language support.

Form component​

<Form
  key={language}
  params={{
    formCode: "EMPLTBL",
    guid: "new",
    pluginCode: "INTRA",
    pGuid: "",
  }}
  enableEventHandlers={true}
/>
PropDescription
key={language}Forces a full re-render when the language changes so translations apply immediately
formCodeThe form code you set in the Buildocs Form Builder
guidThe record identifier. Use "new" for a blank new-record form, or a UUID to load an existing record
pluginCodeThe plugin code for your project
pGuidProject GUID (leave empty if not needed)
enableEventHandlersSet to true to enable backend event handling
Form Code and Plugin Code
  • Form Code — the short code you assigned in the Buildocs Form Builder (e.g. EMPLTBL). This identifies which form definition to load.
  • Plugin Code — optional short code used to group related forms in your backend. All event handler classes for forms that share a plugin code live together in one place, making larger projects easier to navigate. The plugin code is included in every request the SDK sends to your backend (/loadform, /runevent, and all file endpoints), so your backend can use it to route to the correct handler. Leave it empty if you only have a few forms and don't need that structure yet.

Next steps​