Custom admin

    For this example, we will see two things:

    1. The customization of the admin panel itself, by updating the content of the home page;
    2. How to update the interface of a plugin, by replacing the date format in the content manager list view.

    First, you will have to read about admin panel customization, it will help you understand how to customize all of your application.

    If you are following the customization concept, you can already create a ./admin folder in your application.

    Then you will have to investigate into the package to find the file that is used to display the admin panel home page.

    Here is the HomePage containerCustom admin - 图2 (opens new window) you will have to update.

    Eject the file

    Let’s eject this file to be able to customize it.

    Path — ./admin/src/containers/HomePage/index.js

    In this new file, paste the current HomePage container (opens new window) code.

    To run your application, run the following command:

    1. npm run develop -- --watch-admin

    To keep this example really simple, we will just reduce the HomePage to a more simple design.

    Path — ./admin/src/containers/HomePage/index.js

    Now the admin panel home page should just contain the sentence Hello World!.

    If you are following the customization concept, you can already create a ./extensions/content-manager folder in your application.

    TIP

    To be able to see the update, you will need to have a Content Type that has a attribute.

    Target the file to update

    Then you will have to investigate into the strapi-plugin-content-managerCustom admin - 图4 (opens new window) package to find the file that is used to format the date for the list view.

    Here is the which requires a dedicated fileCustom admin - 图6 (opens new window) to modify the date display.

    Let’s eject the file to be able to customize it.

    In this new file, paste the current code.

    To run your application, run the following command:

      If you visit the entry list view of your content type, nothing will have changed. And it’s normal!

      Customize the file

      In our example, we want to change the format of the date. We have to find in this file the line that manages the date format.

      Here is the code you have to find:

      1. const dateFormats = {
      2.   ...defaultDateFormats,
      3.   // Customize the format by un-commenting the one you wan to override it corresponds to the type of your field
      4.   // date: 'dddd, MMMM Do YYYY',
      5.   // datetime: 'dddd, MMMM Do YYYY HH:mm',
      7. };

      Now let’s replace date: 'dddd, MMMM Do YYYY' by date: 'YYYY/MM/DD';

      And tada, the date will now display with the new format.

      Well now you have the admin panel you want. But during all the process, the admin panel was updated on the run time because of the command yarn develop --watch-admin or npm run develop -- --watch-admin.

      If you start your application using yarn start or yarn develop the admin will be the old version. Your updates are not applied.