Index
Edit

Methods Reference

Methods reference

The methods in the structure builder can be grouped into the individual methods that controls different parts of the desk tool, and convenience methods that does much of the heavy lifting for you (sets titles, actions, menu items and so on). The convenience methods typically takes a simple parameter (e.g. a type name). The structure builder is written in TypeScript, which gives support for autocomplete and various features in editors that supports it (e.g. IntelliSense in VS Code).

documentTypeList

Convenience method for returning a list of documents by type.

Params:

  • typeName (string; required)
  • schema (Schema; optional)

Methods:

  • id (string; optional)
  • title (string; optional)
  • showIcons (boolean; optional)

S.documentTypeList("product") will list all documents of the type "product" in a pane.

It does the following:

  • Sets title based on the title defined in the schema configuration
  • Filters documents by the type name
  • Sets up menu items for making new documents
  • Sets up ordering menus, also those defined by a schema
  • Sets up the display

Example:

import S from '@sanity/desk-tool/structure-builder';

const preview = () =>
  S.list()
    .title('Content')
    .items([
      S.listItem()
      .title('All the products!')
      .child(
        S.documentTypeList('product')
      )
    ])
List all of a document type

documentTypeListItem

Convenience method for returning an item for a document type list.

Params:

  • name (string; required)

Methods:

  • id (string)
  • title (string)

Example:

import S from "@sanity/desk-tool/structure-builder";

export default () =>
  S.list()
    .title('Content')
    .items([
      S.documentTypeListItem('product')
    ])

documentTypeListItems

Convenience method for listing all document types from schemas with their respective actions, menus, documents, and editors.

Example:

import S from "@sanity/desk-tool/structure-builder";

export default () =>
  S.list()
    .title('Content')
    .items([
      ...S.documentTypeListItems()
    ])

list

A list with a defined set of list items.

Methods:

  • title (string)
  • items (array)
  • showIcons (boolean)

Example:

import S from "@sanity/desk-tool/structure-builder";

const preview = () =>
  S.list()
    .title('Content')
    .items(/* Menu items goes here */)
An empty list

listItem

A list item

Methods:

  • id (string)
  • title (string)
  • child (List|Editor)
  • showIcon (boolean)
import S from "@sanity/desk-tool/structure-builder";

export default () =>
  S.list()
    .title('Content')
    .items([
      S.listItem()
        .title('A list item!')
    ])

documentList

Returns a list of documents based on a GROQ filter expression

Methods:

  • title (string; required)
  • filter (string; required)
  • params (object: optional)
  • showIcons (boolean)

Example:

import S from "@sanity/desk-tool/structure-builder";

export default () =>
  S.documentList()
    .title('Products')
    .filter('_type == $type')
    .params({ type: 'product'})

documentListItem

Convenience method for a list item with a specific child of a type

Methods:

  • id (string; required)
  • title (string)
  • schemaType (string)
  • showIcon (boolean)
import S from '@sanity/desk-tool/structure-builder'

const preview = () =>
S.list()
  .title('Content')
  .items([
    S.documentListItem()
      .id('global-config')
      .title('Configuration')
      .schemaType('config')
  ])

editor

Places an editor in the current pane.

Params:

  • id (string) required
  • title (string)
  • options (object)
    • id (string)
    • type (string)

Methods:

  • id (string)
  • schemaType (string)
  • documentId (string)
  • title (string)

Example:

import S from '@sanity/desk-tool/structure-builder'

export default () =>
  S.list()
    .title('Content')
    .items([
      S.listItem()
        .title('Global configuration')
        .child(
          S.editor()
            .id('global-config')
            .schemaType('config')
            .documentId('global-config')
        )
    ])

component

Renders a custom React component in the pane.

Example:

import React from 'react' // if you want to write JSX
import S from "@sanity/desk-tool/structure-builder";

export default () =>
  S.list()
    .title('Content')
    .items([
      S.listItem()
      .title('Custom component')
      .child(
        S.component()
        .title('My custom component')
        .component(props => <pre>{JSON.stringify(props, null, 2)}</pre>)
      )
    ])
Render a custom React component in a pane

menuItem

A menu item

Methods:

  • title (string)
  • action (string | function)
  • intent (Intent)
  • group (string)
  • icon (function)
  • params (object)
  • showAsAction (boolean)

menuItemGroup

Group items in a menu

orderingMenuItem

Convenience method for orderings etc, takes a ordering clause by([]) og title()

orderingMenuItemsForType

Orderings from the schema

Previous: How it worksNext: Content Studio Deployment