How to handle Content Manager APIs in JavaScript

Questions and Answers
1
System Information
  • 5.9.0:
  • Mac OS X 15.1.1:
  • MySQL 8.0:
  • v20.18.2:
  • 10.8.2:

I have a question in connection with Content Management API. In the docs are only TypeScript Examples published. I implement in JavaScript.

The quest: I want to add a SidePanel to the Content Manager. I’ve tried it in the following way:

Under plugin/src/index.js:

import { SqlJobPanel } from './components/SqlJobPanel';
...

bootstrap(app) {
    app.getPlugin('content-manager').apis.addEditViewSidePanel(SqlJobPanel);
  },

Under plugin/src/components/ in SqlJobPanel.jsx:

const SqlJobPanel = ({ 
    activeTab, 
    collectionType, 
    document, 
    documentId, 
    meta, 
    model 
  }) => {
    return {
      title: 'My Panel',
      content: <p>I'm on {activeTab}</p>
    };
  };
  
  export { SqlJobPanel };

The app crashes with “Something went wrong …”. The docs are not very helpful. Has anyone a hint for me please?

regards,
Sven

2

The trick is to look into other githubs to understand the strapi documentation :smile: . A simple change of line app.getPlugin('content-manager').apis.addEditViewSidePanel(SqlJobPanel); to app.getPlugin('content-manager').apis.addEditViewSidePanel([SqlJobPanel]); because addEditViewSidePanel is awaiting an array ( - brackets), did the trick.

regards,
Sven