55d00e2b1d
### What? This PR adds the ability to use the ListDrawer component for selecting related collections for the relationship field instead of the default drop down interface. This exposes the advanced filtering options that the list view provides and provides a good interface for searching for the correct relationship when the workflows may be more complicated. I've added an additional "selectionType" prop to the relationship field admin config that defaults to "dropdown" for compatability with the existing implementation but "drawer" can be passed in as well which enables using the ListDrawer for selecting related components. ### Why? Adding the ability to search through the list view enables advanced workflows or handles edge cases when just using the useAsTitle may not be informative enough to find the related record that the user wants. For example, if we have a collection of oscars nominations and are trying to relate the nomination to the person who recieved the nomination there may be multiple actors with the same name (Michelle Williams, for example: [https://www.imdb.com/name/nm0931329/](https://www.imdb.com/name/nm0931329/), [https://www.imdb.com/name/nm0931332/](https://www.imdb.com/name/nm0931332/)). It would be hard to search through the current dropdown ui to choose the correct person, but in the list view the user could use other fields to identify the correct person such as an imdb id, description, or anything else they have in the collection for that person. Other advanced workflows could be if there are multiple versions of a record in a collection and the user wants to select the most recent one or just anything where the user needs to see more details about the record that they are setting up the relationship to. ### How? This implementation just re-uses the useListDrawer hook and the ListDrawer component so the code changes are pretty minimal. The main change is a new onListSelect handler that gets passed into the ListDrawer and handles updating the value in the field when a record is selected in the ListDrawer. There were also a two things that I didn't implement as they would require broader code changes 1) Bulk select from the ListDrawer when a relationship is hasMany - when using bulkSelect in the list drawer the relatedCollection doesn't get returned so this doesn't work for polymorphic relationships. Updating this would involve changing the useListDrawer hook 2) Hide values that are already selected from the ListDrawer - potentially possible by modifying the filterOptions and passing in an additional filter but honestly it may not be desired behaviour to hide values from the ListDrawer as this could be confusing for the user if they don't see records that they are expected to see (maybe if anything make them unselectable and indicate that they are disabled). Currently if an already selected value gets selected the selected value gets replaced by the new value https://github.com/user-attachments/assets/fee164da-4270-4612-9304-73ccf34ccf69 --------- Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>
Explore the Docs · Community Help · Roadmap · View G2 Reviews
Important
🎉 We've released 3.0! Star this repo or keep an eye on it to follow along.
Payload is the first-ever Next.js native CMS that can install directly in your existing /app folder. It's the start of a new era for headless CMS.
Benefits over a regular CMS
- Deploy anywhere, including serverless on Vercel for free
- Combine your front+backend in the same
/appfolder if you want - Don't sign up for yet another SaaS - Payload is open source
- Query your database in React Server Components
- Both admin and backend are 100% extensible
- No vendor lock-in
- Never touch ancient WP code again
- Build faster, never hit a roadblock
Quickstart
Before beginning to work with Payload, make sure you have all of the required software.
pnpx create-payload-app@latest
If you're new to Payload, you should start with the website template (pnpx create-payload-app@latest -t website). It shows how to do everything - including custom Rich Text blocks, on-demand revalidation, live preview, and more. It comes with a frontend built with Tailwind all in one /app folder.
One-click templates
Jumpstart your next project by starting with a pre-made template. These are production-ready, end-to-end solutions designed to get you to market as fast as possible.
🌐 Website
Build any kind of website, blog, or portfolio from small to enterprise. Comes with a fully functional front-end built with RSCs and Tailwind.
We're constantly adding more templates to our Templates Directory. If you maintain your own template, consider adding the payload-template topic to your GitHub repository for others to find.
✨ Features
- Completely free and open-source
- Next.js native, built to run inside your
/appfolder - Use server components to extend Payload UI
- Query your database directly in server components, no need for REST / GraphQL
- Fully TypeScript with automatic types for your data
- Auth out of the box
- Versions and drafts
- Localization
- Block-based layout builder
- Customizable React admin
- Lexical rich text editor
- Conditional field logic
- Extremely granular Access Control
- Document and field-level hooks for every action Payload provides
- Intensely fast API
- Highly secure thanks to HTTP-only cookies, CSRF protection, and more
🗒️ Documentation
Check out the Payload website to find in-depth documentation for everything that Payload offers.
Migrating from v2 to v3? Check out the 3.0 Migration Guide on how to do it.
🙋 Contributing
If you want to add contributions to this repository, please follow the instructions in contributing.md.
📚 Examples
The Examples Directory is a great resource for learning how to setup Payload in a variety of different ways, but you can also find great examples in our blog and throughout our social media.
If you'd like to run the examples, you can use create-payload-app to create a project from one:
npx create-payload-app --example example_name
You can see more examples at:
🔌 Plugins
Payload is highly extensible and allows you to install or distribute plugins that add or remove functionality. There are both officially-supported and community-supported plugins available. If you maintain your own plugin, consider adding the payload-plugin topic to your GitHub repository for others to find.
🚨 Need help?
There are lots of good conversations and resources in our Github Discussions board and our Discord Server. If you're struggling with something, chances are, someone's already solved what you're up against. 👇
⭐ Like what we're doing? Give us a star
