Copy page

Components

FormPageLayout

src/lib/components/FormPageLayout.svelte

Purpose

Provides the standard layout shell for entity create and edit form pages. It renders an optional header (title or custom header snippet), a bordered content area for the form, and a footer split into an audit box (version, created/updated metadata) and action buttons. Use it on every entity create/edit route so that audit metadata and action placement stay consistent.

Origin

Custom — Primebrick-written. Composes Badge and the useAuditBox composable for the footer audit metadata.

Usage

Edit page (with audit box)

Code
<FormPageLayout
  title={$t('users.editTitle')}
  entity="users"
  rowUuid={row.uuid}
  auditData={row}
  auditingColumns={auditingColumns}
  meta={entityMeta}
  footerActions={@render actions()}
>
  <UserForm bind:value={row} />
</FormPageLayout>

Create page (audit box hidden)

Set isCreatePage to suppress the audit box — new records have no audit metadata yet.

Code
<FormPageLayout
  title={$t('users.createTitle')}
  entity="users"
  rowUuid=""
  auditData={{}}
  auditingColumns={[]}
  isCreatePage
  footerActions={@render actions()}
>
  <UserForm bind:value={draft} />
</FormPageLayout>

Custom header snippet

Pass a header snippet to fully replace the default title row (for example, to add breadcrumbs or inline actions).

Code
<FormPageLayout
  entity="users"
  rowUuid={row.uuid}
  auditData={row}
  auditingColumns={auditingColumns}
  footerActions={@render actions()}
>
  {#snippet header()}
    <div class="flex items-center justify-between">
      <Breadcrumbs />
      <Button size="sm">{$t('common.duplicate')}</Button>
    </div>
  {/snippet}
  <UserForm bind:value={row} />
</FormPageLayout>

Props

Full prop table: see API reference — formpagelayout.

Key props: title (string, default header text), header (Snippet, overrides title), headerExtras (Snippet, rendered next to title), children (Snippet, form content), footerActions (Snippet, action buttons), entity (string), rowUuid (string), auditData (Record<string, any>), auditingColumns (MetaColumn[]), isCreatePage (boolean, default false, hides audit box), meta (EntityMetadata, used for the entity ID display).

Next steps

• Component catalog
• UI stack
• API reference