diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index d5bac8d3b2..15f478e22f 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -189,6 +189,7 @@ module.exports = { '/3.0.0-beta.x/guides/jwt-validation', '/3.0.0-beta.x/guides/error-catching', '/3.0.0-beta.x/guides/external-data', + '/3.0.0-beta.x/guides/custom-admin', '/3.0.0-beta.x/guides/slug', '/3.0.0-beta.x/guides/webhooks', ], diff --git a/docs/3.0.0-beta.x/guides/custom-admin.md b/docs/3.0.0-beta.x/guides/custom-admin.md new file mode 100644 index 0000000000..d3676f31b1 --- /dev/null +++ b/docs/3.0.0-beta.x/guides/custom-admin.md @@ -0,0 +1,114 @@ +# Custom admin + +In this guide we will see how you can customize the admin panel. + +## Introduction + +For this example, we will see two things, the first one will be the customization of the admin panel it self, by updating the content of the `/admin/` home page. And in a second time we will see ho to update the interface of a plugin, by replacing the `date` format in the content manager list view. + +First of all, you will have to read the [customization concept](../concepts/customization.md), it will help you to understand how to customize all 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`](https://github.com/strapi/strapi/tree/master/packages/strapi-admin) package to find the file that is used to display the admin panel home page. + +Here is the [HomePage container](https://github.com/strapi/strapi/tree/master/packages/strapi-admin/admin/src/containers/HomePage/index.js) 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 files, paste the current [HomePage container](https://github.com/strapi/strapi/tree/master/packages/strapi-admin/admin/src/containers/HomePage/index.js) code. + +To run your application, you will have to run the `yarn develop --watch-admin` command. + +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 in it's more simple design. + +**Path —** `./admin/src/containers/HomePage/index.js` + +```js +import React, { memo } from 'react'; + +import { Block, Container } from './components'; + +const HomePage = ({ global: { plugins }, history: { push } }) => { + return ( + <> + +
+
+ Hello World! +
+
+
+ + ); +}; + +export default memo(HomePage); +``` + +Now the admin panel home page should just contain the sentence `Hello Wold!`. + +## 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 have a `date` attribute. + +::: + +### Target the file to update + +Then you will have to investigate into the [`strapi-plugin-content-manager`](https://github.com/strapi/strapi/tree/master/packages/strapi-plugin-content-manager) package to find the file that is used to format the date for the list view. + +Here is the [Row component](https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js) you will have to update. + +### Eject the file + +Let's eject the file to be able to customize it. + +**Path —** `./extensions/content-manager/admin/src/components/CustomTable/Row.js` + +In this new files, paste the current [Row component](https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js) code. + +To run your application, you will have to run the `yarn develop --watch-admin` 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 manage the date format. + +Here is the code you have to find: + +```js +return moment + .parseZone(date) + .utc() + .format('dddd, MMMM Do YYYY'); +``` + +Now let's replace `.format('dddd, MMMM Do YYYY');` by `.format('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`. + +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`.