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, TextInput} = Settings.useForm(schema)

  return (
    <Form>
      <TextInput label="Team name" name="team_name" />
    </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 form. Use Settings.useForm inside it, and wrap the inputs in the <Form> component it returns.

Settings.defineWorkspaceSchema()Settings.useForm()

⌘I

Introduction

Guides

Extensions

Workflow blocks

Notifications

Dialogs

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

Settings.defineWorkspacePage()

File location

Example

Arguments

​File location

​Example

​Arguments

​Related

File location

Example

Arguments

Related