Custom Select Component (for field type relationship)

jm.svlast year

16

• 

  notchrlast year

  Hey

  @722129234474303508

  can I check out the field setup you're using?

  
  
  

  Maybe we can recommend a different way to display it

• 

  jm.svlast year

  @1049775120559898725

  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
• 

  notchrlast year

  @722129234474303508

  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

• 

  jm.svlast year

  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

• 

  notchrlast year

  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

• 

  jm.svlast year

  oh and then the virtual field is a fully custom dropdown

• 

  notchrlast year

  Is one idea

• 

  jm.svlast year

  and changing that is tied to the virtual field

• 

  notchrlast year

  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

  @360823574644129795

  has an idea

• 

  jm.svlast year

  @1049775120559898725

  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
• 

  notchrlast year

  Hmmm

  
  
  @808734492645785600

  if you have some time today, any ideas on this one?

• 

  jacobsfletch

  last year

  @722129234474303508

  could you just set a

  useAsTitle

  on your relationship? That way the labels displayed in your dropdown use titles that make sense.

• 

  jm.svlast year

  @808734492645785600

  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

• 

  jacobsfletch

  last year

  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

• 

  jm.svlast year

  Done!

  https://github.com/payloadcms/payload/discussions/2934
• 

  leonardooricklast year

  @722129234474303508

  I was looking for this exactly feature. Would be nice if the thumbnail could appear on the field after selected also. And on the list of items as well . I don't know if the current

  admin.components

  already allow that, but I couldn't find it