Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Add label to row title

default discord avatar
magneze909last year
4

I'm working with the

template-website

template, looking a the header global section is it possible to add a label to the row. It'll be easier to understand from looking at the image. The reason I want to do this is to make it easier to reorder the row items as you will be able to see the name of the nav item,

  • default discord avatar
    imcorfitzlast year

    I believe what you are looking for is the

    label

    property for the

    collapsible

    field:

    https://payloadcms.com/docs/fields/collapsible#example
  • default discord avatar
    magneze909last year

    Hi, thanks for the reply. I don't think there is a collapsible field, well I can't find one. I mistakenly thought it was a row field but looking again i think it may be a group, not too sure. This is the file in question, I should have posted this first

    https://github.com/payloadcms/template-website/blob/main/src/fields/link.ts
  • default discord avatar
    paulpopuslast year
    @399597629224386570

    I think what you're looking for is the array admin config for

    RowLabel

    , you can basically override the React component for it with custom data

    https://payloadcms.com/docs/fields/array#admin-config

    Here's a more full code example from an older codebase I have


    admin: {
      components: {
        /* @ts-ignore */
        RowLabel: ({ data, index }) => {
          return `Item ${String(index).padStart(2, '0')}: ${data?.label ?? ''}`
        },
      },
      initCollapsed: true,
    },


    A bit complex but inside

    data

    you can inspect it via your console and see the full object you have access to, in my example im naming it Item + a number and the

    label

    from data if it exists



    This is added on the

    array

    field itself



    I think in that template it'll be inside

    Header.ts
  • default discord avatar
    magneze909last year
    @858693520012476436

    thanks Paul, you're spot on. Not sure how easy it will be getting the label in there though. I will take a look in a bit. Very useful to know this though for future reference. Thanks!



    Awesome! was actually pretty easy. Logging the object allowed me to find the label no problem

    ${data.link.label}

    thanks again for your help

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.