As of my last update in September 2021, Strapi v3 does not have an official plugin system. However, it's worth noting that Strapi might have undergone updates and changes since then. If there have been updates or changes to the plugin system, I recommend checking the official Strapi documentation or GitHub repository for the latest information.

Assuming that the plugin system in Strapi remains similar or has been expanded upon, here are the general steps you can follow to customize the admin panel component from a Strapi plugin:

  1. Create a new Strapi plugin:

    • Start by creating a new Strapi plugin using the Strapi CLI. Navigate to your Strapi project's root directory and run the following command:

      bash
      strapi generate:plugin your-plugin-name
    • This will create a new folder named "your-plugin-name" inside the "plugins" directory with the necessary files and structure for your plugin.

  2. Understand the plugin structure:

    • In your newly created plugin folder, you'll find a "admin" folder. This is where you can customize the admin panel components.
    • The "admin" folder should contain "src" and "translations" subfolders.
  3. Customize the admin panel component:

    • Inside the "src" folder, you can create or modify React components to customize the admin panel.
    • For example, if you want to customize the view of a specific content type's edit page, you can navigate to the corresponding folder in your plugin's "src" directory, such as "plugins/your-plugin-name/admin/src/containers/EditViewContentTypeName".
    • Edit or create React components to achieve the desired customization.
  4. Use Strapi's APIs for data retrieval and manipulation:

    • To interact with the Strapi backend and fetch data, use the APIs provided by Strapi. You can import and use the Strapi JavaScript SDK or utilize the Strapi provided Redux store (if available) to handle data retrieval and updates.
  5. Translations (optional):

    • If you need to add translations for your custom admin panel components, you can do so in the "translations" folder of your plugin.
  6. Build and deploy the plugin:

    • After you have made the necessary changes to your plugin, you'll need to build and deploy it for the changes to take effect.

    • Run the following command to build the plugin:

      bash
      strapi build
    • Then, restart your Strapi server:

      bash
      strapi develop
  7. Test the customized admin panel:

    • Once your Strapi server is running, navigate to the Strapi admin panel in your browser and log in with your credentials.
    • You should see your customizations in effect.

Keep in mind that the plugin system and folder structure might have changed or evolved in newer versions of Strapi. Always refer to the official Strapi documentation or GitHub repository for the most up-to-date information and guidelines on customizing the admin panel using plugins.

Have questions or queries?
Get in Touch