obsidian berry
Hey everyone, is there a way to customize the dropdown component used for relationship fields? Right now I have a reference to a Videos collection, where the ID isn't very helpful, and I want to render a small thumbnail instead. I don't see an option to customize this through admin.components for the relationship field itself, or for the videos collection that's being referenced. Thanks!
slate berry
Hey @obsidian berry can I check out the field setup you're using?
Maybe we can recommend a different way to display it
obsidian berry
@slate berry yep. Team Members references Videos.
The Videos are stored in Mux, so the Videos collection just has the playbackIds and fills in some fields via the Mux API to render thumbnails and get aspect ratio
slate berry
@obsidian berry Would a virtual field maybe work in this situation?"
const getAllMovies: FieldHook = async ({ data }) => {
const allMovies = await payload.find({
collection: 'movies',
where: {
member: {
equals: data.id,
},
},
});
if (allMovies.docs) return allMovies.docs.map((doc) => doc.id);
return null;
};
const Example: CollectionConfig = {
slug: 'example',
fields: [
{
name: 'movieList',
maxDepth: 0,
type: 'relationship',
relationTo: 'movies',
hasMany: true,
access: {
create: () => false,
update: () => false,
},
admin: {
readOnly: true,
},
hooks: {
beforeChange: [({ siblingData }) => {
// Mutate the sibling data to prevent DB storage
// eslint-disable-next-line no-param-reassign
siblingData.movieList = undefined;
}],
afterRead: [getAllMovies],
},
},
]
};
Or better yet, get the sibling data for the select and render it with the desired field as the label for each item
obsidian berry
That last part is what I'm stuck on. How do I hook into / override the component that's used for the select (or select items)? It's not part of the admin.components for either Collections or Field with type relationship
slate berry
Well say you have that select component
and you hide it in the admin display, but the field itself is still available via siblingData
so you create a virtual field along with it
obsidian berry
oh and then the virtual field is a fully custom dropdown
slate berry
Is one idea
obsidian berry
and changing that is tied to the virtual field
slate berry
Well see in beforeChange
its virtual because its data gets wiped on any change
It's for display only
But you could customize that so, it initially gets data from the relationship field
and on change, you update the relationship accordingly
or a similar flow
that's just an idea, but does that make sense?
Otherwise maybe @autumn meteor has an idea
obsidian berry
@slate berry I think so, but that sounds like it might render as one of the fields so above the Video relationship field, whereas I'm hoping to do this — render an image inside of the relationship select dropdown
But I think I get what you're saying if I keep the relationship and then make my own dropdown and that dropdown's onChange is tied to the real relationship field
I think the ideal solve would be that there is an admin.components.RelationshipDropdownItem override
astral viper
@obsidian berry could you just set a useAsTitle on your relationship? That way the labels displayed in your dropdown use titles that make sense.
obsidian berry
@astral viper unfortunately Mux doesn't really provide any useful metadata (not even the filename). I'm using the asset ID which helps a little bit to cross-reference inside of Mux, but a visual indicator would be much better.
My workaround for now is fine, you click into the item itself to see the thumbnail preview. But I think the ability to customize this component would be a great add. Goes right along with customizing the Field and Cell so you can configure how a Field appears in all circumstances
astral viper
Totally, I think this is great. If you'd like to open a new discussion on GitHub with your idea, that's the best way to get it marked as planned and on the roadmap 🗺️
You can paste a link to this conversation as well
obsidian berry
