Payload is now part of Figma! Learn More
Simplify your stack and build anything. Or everything.
Schedule a Demo
USE CASES
Headless CMSEnterprise App BuilderHeadless E-CommerceDigital Asset Management
FEATURES
Multi-TenancyWhite LabelLocalizationAccess ControlAuth
CASE STUDIES

See what others are building with Payload.

Browse Case Studies
Build tomorrow’s web with a modern solution you truly own.
PAYLOAD IS FOR
DevelopersMarketing teamsEnterprise companiesAgencies & Consultancies
COMPARE PAYLOAD
Payload vs WordPressPayload vs ContentfulPayload vs SanityPayload vs StrapiPayload vs Directus
AGENCY TESTIMONIAL

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Become a PartnerFind a Partner
Code-based nature means you can build on top of it to power anything.
Resources
DocumentationExamplesTemplatesGitHubReleasesBlogGuides & Tutorials
Community
RoadmapDiscordCommunity Help
Resources for Developers

Get the resources you need to start building today

Guides & TutorialsExplore Docs
It’s time to take back your content infrastructure.
Schedule a Demo
Enterprise Features
SSOAI Auto-EmbeddingPublishing WorkflowsVisual EditorStatic A/B testingAI features
Customer Stories
MicrosoftASICSBlue OriginHello BelloTekton
Featured Customer Story

Microsoft chose Payload to tell the world about AI.

Read the case studyBrowse all
LoginGet Started
Community Help

Best way to add buttons and other elements within a collection list?

default discord avatar
djfigs13 years ago
2

First, I want to give my thanks to the development team because Payload is honestly one of my favorite development tools right now!



I was wondering how I might go about inserting a button into the Collection list view, similar to this mockup below with the "Import from Roster" button. In my project I want to have the option for an admin to import members from a public roster, thus I want to place a button within the list view that will trigger that action on the backend (by using an endpoint or something). I am aware that you can create a custom List component for a collection, so what I have tried so far is to create a new List component that combines the default list with the new button. However, doing that will place the button before/after the whole list view, and I would like to place it

within

as seen on the mockup. I guess I could copy the DefaultList source and inject it directly myself, but I would like to know if anyone has a better approach because this definitely seems hacky 😛

  • default discord avatar
    exo37183 years ago

    I think the easiest way right now (there are better solutions planned) is to create a new component in the admin dashboard under a custom url, rather than extending the given collection overview. For one project I set up an "Admin Overview" component with buttons to import and export certain collections. This here is a good starting point

    https://payloadcms.com/docs/admin/components



    If you insist on modifying the collection view you can do that too, but I think you'd need to overwrite the default list component

    admin/components/views/collections/List/Default.tsx
  • discord user avatar
    denolfe
    3 years ago

    I think what both you and Tim alluded to in replacing the List component is the only way to do this as of now. However, I think this is something that we should allow, similar to how we offer the ability to add a BeforeLogin and BeforeDashboard here:

    https://payloadcms.com/docs/admin/components#base-component-overrides

    I'd say go ahead and create a feature request in GH Discussions if you'd like 👍

Open

Continue the discussion in Discord

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.