Nested Docs UI improvement

jankocian

2 weeks ago

7

• 

  jacobsfletch

  Payload Team

  2 weeks ago

  👍 you can add a

  fullTitle

  field to your collection with a

  beforeChange

  field hook to populate based on your breadcrumbs, something like this:

  
  
  

  export const populateFullTitle = (breadcrumbs: unknown): string | undefined => {
    if (Array.isArray(breadcrumbs)) {
      return breadcrumbs.reduce((title, breadcrumb, i) => {
        if (i === 0) return `${breadcrumb.label}`;
        return `${title} > ${breadcrumb.label}`;
      }, '');
    }
  
    return undefined;
  };

  
  

  And here's your field config:

  
  

   {
      name: 'fullTitle',
      type: 'text',
      hooks: {
      beforeChange: [
          populateFullTitle,
      ],
    },
      admin: {
      components: {
          Field: () => null,
      },
    },
  },

  
  

  
  

  Then you can put this field in your

  defaultColumns

  so that it displays in the table view by default:

  
  

  defaultColumns: [
    'fullTitle',
  ]

  
  

  
  

  And now you can also sort by this field in your queries

  
  

  
  

  ?sort=fullTitle
• 

  jankocian

  2 weeks ago

  Hi @jacobsfletch, thank a lot for your suggestion! 🙂 And how do I make the collection list sorted by fullTitle by default for all the users?

  
  
  

  Also, if anyone stumbles upon this one, I'll just clarify that the Field Hook gets passed args and within these, there are breadcrumbs in

  args.data.breadcrumbs

  .

• 

  jacobsfletch

  Payload Team

  2 weeks ago

  I

  think

  if you set

  fullTitle

  as your

  useAsTitle

  then include it in

  defaultColumns

  , the list view will automatically sort by this field although I have not tested this

  
  

  
  

  Default sort would be a great feature to add