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