Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

Example modal popup dialogs in Sanity Studio

7 replies
Last updated: Sep 22, 2022
Does anyone have an example of a modal popup dialog in their Sanity Studio? I am specifically interested in your onClose function, but also interested in seeing what else I may want/need. TIA!
Sep 22, 2022, 4:11 PM
Are you referring to the mechanics of it? There's a quick example in the UI docs that might be helpful: https://www.sanity.io/ui/docs/component/dialog
Sep 22, 2022, 4:26 PM
Hey
user R
! Is there some particular functionality you're looking for an example of?
Sep 22, 2022, 5:13 PM
well, i am just struggling to get my modal to close
Sep 22, 2022, 6:29 PM
This is my action.

export function PublishMicrositeAction(props) {
    if (props.type !== 'microsite') {
      return null
    }
    getMicrositeHook(props)
    return {
      label: "Publish Microsite",
      onHandle: () => {
      },
      dialog: {
          type: 'modal',
          onClose: (onClose function to go here),
          content: <div class="modal" style={{paddingBottom: 30 + 'px'}}>
          <h3>Publishing {siteName}</h3>
          <p>Please enter a brief description of what was changed.</p>
          <form action="${baseHookUrl}${hookId}"  method="POST" >
          <label for="trigger_title">Message: </label>
          <input type="text" name="trigger_title" id="trigger_title" />
          <button class="submit" type="button" style={{marginLeft: 10 + 'px'}}>Publish</button>
          </form>
          </div>

      }
    }

  }
Sep 22, 2022, 6:30 PM
Here's an example of a document action I created that creates a task document then closes itself:
import React, {useState, useEffect} from 'react'
import {client} from '../../../src/utils/sanityClient'
import {ComposeIcon} from '@sanity/icons'
import CreateTaskForm from './components/CreateTaskForm'
import {v4 as uuid} from 'uuid'

export function CreateTaskAction(props) {
  const [creating, setCreating] = useState(false)
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [task, setTask] = useState({
    status: {
      isHighPriority: false,
      isBlocked: false,
      isComplete: false,
    },
    title: '',
    description: '',
    category: '',
    dueDate: new Date(),
    connections: [
      {
        _type: props.type,
        _ref: props.id,
      },
    ],
    contributors: false,
  })

  const handleClose = async () => {
    setCreating(true)

    const doc = {
      ...task,
      dueDate: task.dueDate?.toISOString(),
      contributors: task.contributors
        ? [
            {
              _type: 'contributor',
              _ref: task.createdBy._ref,
            },
          ]
        : [],
      _type: 'task',
      _id: uuid(),
    }

    await client
      .create(doc, {autoGenerateArrayKeys: true})
      .then((doc) => {
        setCreating(false)
        setTask({
          status: {
            isHighPriority: false,
            isBlocked: false,
            isComplete: false,
          },
          title: '',
          description: '',
          category: '',
          connections: [
            {
              _type: 'ticket',
              _ref: props.id,
            },
          ],
          contributors: false,
        })
        setIsDialogOpen(false)
      })
      .catch((err) => {
        console.log(err)
      })
  }

  return {
    label: 'Create Task',
    icon: <ComposeIcon />,
    onHandle: () => setIsDialogOpen(true),
    dialog: isDialogOpen && {
      type: 'modal',
      onClose: () => setIsDialogOpen(false),
      header: 'Create Task',
      content: (
        <CreateTaskForm
          handleClose={handleClose}
          setTask={setTask}
          task={task}
          creating={creating}
          setCreating={setCreating}
        />
      ),
    },
  }
}
Sep 22, 2022, 6:35 PM
That was very, very helpful! Thank you!
Sep 22, 2022, 9:20 PM
You're welcome!
Sep 22, 2022, 9:38 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?