Settings.defineWorkspacePage()

Settings.defineWorkspacePage() defines the page where workspace admins configure your app’s settings. It takes the settings schema and a render callback.

File location

The page must be the default export of a file in src/app/settings/, conventionally src/app/settings/page.tsx, so the CLI can discover it.

Example

src/app/settings/page.tsx

import React from "react"
import {Settings} from "attio/client"

import schema from "./schema"

export default Settings.defineWorkspacePage(schema, () => {
  const {Form, Section, TextInput} = Settings.useForm(schema)

  return (
    <Form>
      <Section title="General">
        <TextInput label="Team name" name="team_name" />
      </Section>
    </Form>
  )
})

Inside the callback, call Settings.useForm with the same schema to get form components typed against it.

Arguments

WorkspaceSettingsSchema

required

The schema built with Settings.defineWorkspaceSchema, imported from your schema file.

() => React.ReactNode

required

A render callback returning the settings page. Use Settings.useForm inside it, and wrap the content in the <Form> component it returns. See Supported components.

Supported components

A settings page can render any attio/client component alongside the components returned by Settings.useForm. The direct children of <Form> should be <Section />s, so put everything inside one. Non-admins see the whole page read-only. Attio doesn’t render these on a settings page, at any depth:

Inputs from the regular useForm. Only Settings.useForm inputs save settings.
<Button />. Use the <Button /> returned by Settings.useForm instead.
<EmptyState />
<LoadingState />

Introduction

Guides

Extensions

Pages

Workflow blocks

Notifications

Dialogs

Navigation

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

Settings.defineWorkspacePage()

File location

Example

Arguments

Supported components

​File location

​Example

​Arguments

​Supported components

​Related

File location

Example

Arguments

Supported components

Related