[v3] Need example of custom form in admin

[elliott-w]

Documentation Issue

I'm trying to create a settings page for a plugin, but there is no documentation on how to create a custom form in a custom view in the admin UI that can execute a custom action server-side.

Additional Details

There's the:

• Form and RenderFields components from @payloadcms/ui
• mapFields function from @payloadcms/ui/utilities/buildComponentMap
• buildStateFromSchema function from @payloadcms/ui/forms/buildStateFromSchema

But there's no documentation around how these components/functions work and how to stitch them all together to create a custom form.

Some more nice-to-haves would be:

1. How can you create multiple forms in the same custom view?
2. How can you recreate the create/update form for a global/collection in a custom view? But with the Submit button down the bottom:
   Show/hide image

   

[elliott-w]

For anybody stumbling across this, here's my attempt so far:

https://gist.github.com/elliott-w/ba3af93a6ed535a7bdfc065db80b0870

Limitations:

1. The following fields:

• Array
• Blocks
• Collapsible
• Tabs

Will throw an error when collapsing/uncollapsing because they assume there's a DocumentInfoProvider. You can wrap the Form in a DocumentInfoProvider with id="" so it doesn't throw errors on collapsing/uncollapsing, but it'll add some network requests in the background that either 404 or 500 because so much of how fields are built assumes they are connected to a collection or a global.

2. Conditional field rendering and validation doesn't work. Since that is all done server side, you would need to create an api route e.g. /api/form-state-custom that replicates how /api/form-state works, in that it fetches your field schema from your payload config, but without all the mumbo jumbo surrounding collections and globals.
3. Haven't figured out how to populate initialData with something other than empty values

[stefvw93]

This example doesnt seem to work anymore? These imported modules do not exist at all:

import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema';
import { mapFields } from '@payloadcms/ui/utilities/buildComponentMap';