Fast create CMS/Dashboard Admin with Admin On Rest
According to wikipedia CMS(Content Management System) is software used to add and manipulate content of dynamic web. The point is to manage content of dynamic web. Admin on rest is frontend Framework for building admin applications running in the browser on top of REST services. This framework(Admin on rest) can be used to create CMS/Admin Dashboard easier. Before going further on how to use Admin On Rest there are some things you need to know. Admin On Rest is a framework built with REST API
, using ES6
, React
and Material Design
.
Before using Admin On Rest you need some things :
- Fundamental of Javasript (with ES6)
- Fundamental of React
- REST API for dashboard/CMS to be build
Build Basic Dasboard
In this example we will use JSONPlaceholder, a fake REST API as the datasource for the admin. We will build Create, Read (List), Update, and Delete (CRUD) for this basic tutorial. But remember that JSONPlaceholder is a read-only API
; although it seems to accept POST
, PUT
and DELETE
requests, it doesn’t take into account the creations and edits - that’s why, in this particular case, you will see errors after creation, and you won’t see your edits after you save them. It’s just an artifact of JSONPlaceholder.
- Instalation
If you have not install create-react-app
, please run npm install -g create-react-app
We will build basic dashboard with Facebook’s create-react-app to create an empty React app. Please run command below :
create-react-app cms
cd cms
yarn add admin-on-rest
2. Modify src/App.js
<Admin>
component is the main component of admin-on-rest. This component has props restClient
which expects a REST client as a parameter — a function capable of translating REST commands into HTTP requests.
jsonServerRestClient
will handle responses in the same format as the endpoints from JSONPlaceholder. Other than that, you can find REST clients for various backends in third-party repositories here: https://marmelab.com/admin-on-rest//RestClients.html#available-clients. If you have different format you must custom REST client to handle it. Please check the code from the simple REST client: it’s a good starting point for a custom rest client implementation.
3. Create resource component ( src/posts.js
)
Create file src/posts.js
and copy source code below:
Source code above is used for create : list, form edit, form create, show detail and delete title for resource Post (endpoint /post
).
- List (line 13–24)
Main component for PostList is <List>
component. This component responsible for grabbing the information from the API, displaying the page title, and handling pagination. <List>
component have child <Datagrid>
component . This <Datagrid>
component have one or more child and this child determine colunms to render. Each Field component maps a different field in the API response, specified by the source
prop. You can find all field type here: https://marmelab.com/admin-on-rest/Fields.html.
There are <EditButton>
, <ShowButton>
and <DeleteButton>
as <Datagrid>
child. This button will appear in each row of list. If you put <EditButton>
don’t forget to create Edit component
and pass the component to Resource edit
props. If you put <ShowButton>
don’t forget to create Show Component
and pass that component to Resource show
props. And if you put <DeleteButton>
don’t forget to pass the Delete
component from admin-on-rest to Resource remove
props. This button is not required. The most important when you want to build feature to Edit or Show is the component.
- Create and Edit Form
Line 43–50 is Create Component
and line 32–40 is Edit Component
. Main component for create is <Create>
and main component for edit is <Edit>
. That component responsible for fetching record. They pass the record down to <SimpleForm>
. <SimpleForm>
uses its children to determine the form inputs to display.
You can find all field type input here: https://marmelab.com/admin-on-rest/Inputs.html.
- Show detail
Line 53–60 is Show Component
. Main component for show is <Show>
which responsible for fetching record and pass down that record to child (<SimpleShowLayout>
). <SimpleShowLayout>
uses its children to determine field to display.
You can find all field type here: https://marmelab.com/admin-on-rest/Fields.html.
- Delete
If you want to build feature Delete
you just need to pass Delete Component
(import from admin-on-rest
) to props remove
in <Resource>
and put <DeleteButton>
on List Component
. If you want to custom delete title line 63–65 is the solution. Default title for delete on admin on rest is Delete {idElementToDelete}
.
4. Import resources to src/App.js
Modify src/App.js
like source code below :
- Import PostList, PostEdit, PostCreate and PostShow from
src/posts.js
(line 4) - Create
Resource
on child ofAdmin
(line 8 – 14). Resource has 5 props:list
,create
,edit
,show
, andremove
. This 5 props isnot required
. - Note :
Admin
component can contain one or more<Resource>
components, each resource being mapped to an endpoint in the API.
5. Run app : yarn start
6. Open : http://localhost:3000
You will see list, form create and form edit for endpoint /post
like below:
Thats all basic tutorial for list, edit, create, delete and show detail on admin-on-rest. Thanks.
Source : https://marmelab.com/admin-on-rest/