Custom admin

In this guide we will see how you can customize the admin panel.

Introduction

For this example, we will see two things:

1. The customization of the admin panel itself, by updating the content of the /admin/ 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.

Update the admin home page

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

Target the file to update

Then you will have to investigate into the strapi-admin (opens new window) package to find the file that is used to display the admin panel home page.

Here is the HomePage container (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:

yarn develop --watch-admin

npm run develop -- --watch-admin

If you visit the admin, nothing will have changed in the home page. And it’s normal!

Customize the file

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

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

import React, { memo } from 'react';
import { Block, Container } from './components';
const HomePage = ({ global: { plugins }, history: { push } }) => {
  return (
    <>
      <Container className="container-fluid">
        <div className="row">
          <div className="col-12">
            <Block>Hello World!</Block>
          </div>
        </div>
      </Container>
    </>
  );
};
export default memo(HomePage);

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

Update the Content Manager

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 date attribute.

Target the file to update

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

Here is the Row component (opens new window) which requires a dedicated file (opens new window) to modify the date display.

Eject the file

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

Path — ./extensions/content-manager/admin/src/utils/dateFormats.js

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

To run your application, run the following command:

yarn develop --watch-admin

npm run develop -- --watch-admin

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:

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

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.

Build the new admin

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.

To do so, you have to build the admin panel using the following command yarn build.