Payload 3 - RowLabel

tobedamobelast year

6

'use client'

import { useRowLabel } from '@payloadcms/ui'

export const NavigationRowLabel = () => {
  const { data, rowNumber } = useRowLabel<{ title?: string }>()

  const customLabel = `${data.title || 'Slide'} ${String(rowNumber).padStart(2, '0')}

  return <div>Custom Label: {customLabel}</div>
}

admin : { 
  components: { 
    RowLabel: NavigationRowLabel
  } 
}

Das Objektliteral kann nur bekannte Eigenschaften angeben, und "RowLabel" ist im Typ "{ afterInput?: CustomComponent[] | undefined; beforeInput?: CustomComponent[] | undefined; Error?: CustomComponent<JSONFieldErrorClientComponent | JSONFieldErrorServerComponent> | undefined; Label?: CustomComponent<...> | undefined; } & { ...; }" nicht vorhanden.ts(2353)

The object literal can only specify known properties, and "RowLabel" is not in type "{ afterInput?: CustomComponent[] | undefined; beforeInput?: CustomComponent[] | undefined; Error?: CustomComponent<JSONFieldErrorClientComponent | JSONFieldErrorServerComponent> | undefined; Label?: CustomComponent<...> | undefined; } & { ...; }". present.ts(2353)

components: {
  RowLabel: '@/fields/navigation/NavigationRowLabel',
}

• 

  aaronksaunderslast year

  u need to use the component on the actual fields in the collection, here is an example.

  
  
  

      {
        name: 'images',
        type: 'array',
        admin: {
          components: {
            RowLabel: '@/collections/Vehicles/CustomImageRowLabel',
          },
        },
        fields: [
          {
            name: 'image',
            type: 'upload',
            relationTo: 'media',
            required: true,
          },
          {
            name: 'caption',
            type: 'text',
            defaultValue: 'Vehicle Image',
          },
        ],
      },

• 

  tobedamobelast year

  Thanks! We already tried it this way. Referencing the component by its path, but no success. The component works but the useRowLabel hook has no data. The whole hook returns an object with data, rowNumber but there is no content in it.

• 

  aaronksaunderslast year

  Just create a small project with the collection and the custom component and post it to GitHub I will take a look 👀. I copied that code from a working project of mine

• 

  tobedamobelast year

  thanks for looking at my code. especially for the time you would have spent on it. I thought before I do that I'll try it one last time with your advice and voila, it works. So the RowLabel that I create has to be in the same folder as my collection? Can you say that in general? I think this should be included in the documentation 😄 I can't imagine that I'm the only one who stumbles upon it 🙂

  
  
  

  here is my working code now:

  
  
  

  'use client'
  
  import { useRowLabel } from '@payloadcms/ui'
  
  const RowLabel = () => {
    const { data, rowNumber } = useRowLabel<{ title?: string }>()
  
    // Do something with the data of the row entry
  
    const customLabel = `${data.title || 'Slide'} ${String(rowNumber).padStart(2, '0')} `
  
    return <div>Custom Label: {customLabel}</div>
  }
  
  export default RowLabel

  
  
  

  Notice that this file/component lies in the same directory the collection lies in where it is used.

  
  
  

  Here:

  
  
  

  globals > Navigation > RowLabel > index.tsx
• 

  aaronksaunderslast year

  It doesn’t need to be in same folder, it sounds like there was some other issue, but glad u got it working

• 

  masa_89238last year

  pnpm generate:importmap

  for fix