Like what we’re doing? Star us on GitHub!

Nested Docs UI improvement

jankocian
2 weeks ago
7

Hey all and @jacobsfletch, I've added the official Nested Docs plugin to my Payload instance. It works perfectly fine, though there is a significant UI deficiency I think.



In the list view of collection docs, there is no visual indicator of the relationships.



The minimal implementation would probably consist of 2 features:


- add a dash or other indicator in front of the children doc's title


- alter the sorting so that children are getting properly ordered right after their parent


...aka WP's default behavior



Ver. #2 - recreate what Nested Pages WP plugin does.



Any chance of getting this in? 🙂



Thanks!

  • 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

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More