V4 Custom buttons inside of the content-manager

Questions and Answers Strapi Admin
1
System Information
  • v4.0.0:
  • Linux manjaro:
  • sqlite:
  • v14.18.2:
  • 6.14.15:
  • 1.22.17:

Hey, quick question.

Is it possible to add custom buttons with actions to the content-manager page? e.g. adding a export to csv button next to the filter button. I read through the docs a bit but they’re a bit unclear for me.

If anyone can point me in the right direction.

Thank you!

2

I’ve also poured through the docs and forums and cannot find a decent explanation of how to perform this.

I’d jump into these docs and see if you can gleam more from them than I could.

Injection Zones API

Here is my current (non-functioning) code:

// src/extensions/content-manager/strapi-admin.js

'use strict'

module.exports = require('./admin/src').default


// src/extensions/content-manager/admin/src/index.js

import axios from 'axios'
import { Button } from '@strapi/design-system'
import { Upload } from '@strapi/icons'

const handleTriggerDeployment = () => {
      // ... 
}

export default {
  bootstrap(app) {
    app.injectContentManagerComponent('editView', 'right-links', {
      name: 'trigger-deployment-button',
      Component: () => (
        <Button
          onClick={() => handleTriggerDeployment}
          variant='secondary'
          endIcon={<Upload />}
        >
          Rebuild Website
        </Button>
      ),
    })
  },
}

Deleting and re-installing node_modules, then running yarn strapi build and yarn strapi develop --watch-admin does not seem to make any difference.

Any help would be greatly appreciated! :slightly_smiling_face:

3

I am in the same situation. Can someone please suggest any solution or work around for this problem?

4

anyone have succeed doing this?
dang it, strapi docs are harder than cs50

3 Likes
5

Following this guide, I am able to use the bootstrap function in ./src/admin/app.js file to inject components. And can reference this example foodadvisor/app.js at master · strapi/foodadvisor (github.com) as well

2 Likes
6

app.injectContentManagerComponent('editView', 'right-links', {
You need to put it in “informations” instead of “right-links”

7

Thank you @Logantai, this was very helpful. Somehow I missed the need to place admin extensions in the ./src/admin/app.js file :sweat_smile:

8 
export const getDataToDele = async () => {
  try {
    const dataStrapi = await fetchData(
      "http://localhost:1337/api/i18ns?populate=*"
    );

    return dataStrapi.data;
  } catch (error) {
    console.error("Error fetching data from Strapi:", error);
  }
};

I did the same and it worked. But I have a problem as follows:
I used fetch API to get data from strapi but I only received 50 records out of my total of 900. I’m thinking of using Entity service to get data but it doesn’t seem to work in admin/extension/components? Anyone have any ideas for this problem? Thanks

9

Thanks @sg-code it works for me
Using Strapi V4

in my code, there is src/admin/app.example.js, I renamed src/admin/app.js
after that it start works.
if there is no file inside src/admin, just create app.js and use this reference

const config = {
  locales: [],
};
import { Button } from '@strapi/design-system'
import React from 'react';

const bootstrap = (app) => {
  app.injectContentManagerComponent("listView", "actions", {
    name: "CustomCreateButton",
    Component: () => (
        <Button
          variant='secondary'>
          Rebuild Website
        </Button>
      ),
  });
  app.injectContentManagerComponent("listView", "actions", {
    name: "CustomCreateButton",
    Component: () => {
      // Use useEffect to remove the original button
      React.useEffect(() => {
        const defaultButton = document.querySelector('[href$="/create"]'); // Find the default button
        if (defaultButton) {
          defaultButton.style.display = "none"; // Hide it
        }
      }, []); // Run this once when the component mounts
  
      return (
        <Button
          variant="success"
          onClick={() => {
            // Custom action for creating a new entry
            alert("Custom Create Entry Clicked!");
          }}
        >
          Custom Create Entry
        </Button>
      );
    },
  });
  
  app.injectContentManagerComponent("editView", "right-links", {
    name: "TweetButton",
    Component: () => (
        <Button
          variant='secondary'
        >
          Rebuild Website
        </Button>
      ),
  });
};

export default {
  config,
  bootstrap,
};