How to add buttons at the top of Strapi Content Manager List View?

Questions and Answers Strapi Admin
1
System Information
  • Strapi Version: 4.3.4
  • Database: Postgres
  • Node Version: 16

Screen Shot 2022-09-30 at 3.51.48 pm

At the top of the Content Manager List View, I would like to add a button that will open a modal like the “Delete” button in the screenshot above. I need to allow users to filter a large number of records and I would like to use the “Filters” options that come with Strapi out-of-the-box to achieve this.

Otherwise, I will need to build my own Strapi Admin UI Component with filtering.

I hope, I don’t need to fork Strapi to achieve this.

Thanks,

Dallas

2

Hi. I think you can do this using the Injection Zones API.

I found a blog post in a different question that explains how to use it: 4 ways to build a custom Strapi Admin Panel | Theodo

2 Likes
3

Thanks @zerocaps.

Hopefully, I will be able to achieve the results I want with this!

Also, welcome to the forums! What a first post :clap:

4

The article and docs were definitely a help. I’ve been able to add the button on the listView.

In my use-case scenario, I’m trying to get the IDs of the content filtered or checked/selected. Any tips on how to do this?

Current progress with the “Link To” button:

image
image1450×430 51.8 KB

5

I’ve made some progress, I have a modal showing and have collected the filters by using the following:

...
const LinkRelationshipToModal = ({ onClose }) => {
  const [{ query }, setQuery] = useQueryParams();
  const filters: any[] = query.filters?.$and || [];
  console.log("openLinkToModal filters", filters);
  ...
};

Now all I have to do is connect the filters with an ID of the item they want to link the results to.

6

Hi. @dallasclark Have you succeded with the injection zone. With the blog you shared I came up with the button. Now I need to add the filter functionality of the collection with that button.

Can you please guide me?

7

I made it. Below is my solution.

/src/extensions/components/<FOLDER_NAME>/index.js

import React from "react";
import { Button } from "@strapi/design-system/Button";
import { Filter } from "@strapi/icons";

const ComponentName = () => {
  async function handleComponent() {
    // Your logic goes here
  }
    return (
      <Button
        variant="default"
        startIcon={<Filter />}
        onClick={handleComponent}
      >
        Next 5 days
      </Button>
    );
};

export default ComponentName;

/src/admin/app.js

import ComponentName from "./extensions/components/ComponentName";

export default {
  bootstrap(app) {
    app.injectContentManagerComponent("listView", "actions", {
      name: "ComponentName",
      Component: ComponentName,
    });
  },
};
2 Likes
8

Glad you had success, and thank you for sharing your solution