SEO

A guide for creating a React Admin Panel with DhiWise

logo

DhiWise

{
October 17, 2021
}
image

For interacting with the backend database you will require an admin dashboard to manage, and configure a vast amount of data. An easy-to-use React JS framework can help you to easily build Admin Panel that runs in the browser.

DhiWise provides a lot of cool features to build a dynamic React Admin Panel. This guide will help you to learn, how to efficiently build a React admin dashboard with DhiWise.

How to Create Admin Panel in React JS with DhiWise?

To create React admin Panel on DhiWise, you first need to have a Node.js application already built-in DhiWise. Select an existing project having a Node js application, as shown in the snippet below.

Click on Add new application to select and add React app to your project.

Step 1: Select React Admin Panel from the available technologies


Step 1: Select React Admin Panel from the available technologies

Now, you need to select react Admin Panel from the available set of technologies.

Now, you need to select react Admin Panel from the available set of technologies.


Step 2: Create an Admin Panel app for your  project using React JS with DhiWise

Create React Admin Application for the Project by adding application name, and Node.js app for which you are creating React Admin Panel.

Create an Admin Panel app for your  project using React js with DhiWise


Step 3: Configure your React admin panel

With DhiWise you can configure React admin panel in just 4 steps.

  • Set up Themes and Layout just by selecting preferences for the view component.

You can select view components you want to see on your react theme. It enables you to select your preferences for the view components. Just select from the options such as listing, single-page form, loader, and theme, as shown in the image below.

Set up Themes and Layout just by selecting preferences for the view component
  • Listing
    Here you will find properties such as paginate, limit page setup (per page limit), data count, search, sorting, option to hide/show table columns, and row selections (Checkbox) that can be managed for the table on react theme page listing.

Select properties for the table layout

Select properties for the table layout
  • Single page form
    It will allow you to set your page in a 2:2 or 3:3 ratio.
  • Loader
    You can choose if you want a lazy loader or page loader.
  • Theme
    You can set up a light or dark theme that can be changed at any time.
  • Manage Models for your React admin Panel

Here you can manage the actions for Models that you want to see on your React Panel. All the models from your Node js application will be populated here.

You can either select or deselect models and actions such as all, add, edit, delete and view for each model.

You can either select or deselect models and actions such as all, add, edit, delete and view for each model.


Also, you can create model-wise custom actions that can be reflected on the admin panel.

Also, you can create model-wise custom actions that can be reflected on the admin panel.
  • Manage and view components and values for each model list.
    Here you can select the required values for each view type and for the respective models. A model can have several attributes, however, depending on the view type you can choose the required attributes.

You will find the view options such as add/edit, listing, and data view to your model list.

You will find the view options such as add/edit, listing, and data view to your model list.


Moreover, there is another option called clone data that will enable you to clone all attributes and their values to the selected tab view.

Moreover, there is another option called clone data that will enable you to clone all attributes and their values to the selected tab view.
  • Map out attribute having relationships with another model attribute.
    Here you can map the attribute to another model attribute that you want to show in the admin panel.

Here you can map the attribute to another model attribute that you want to show in the admin panel.


Finally, click on the Create React Admin to generate your React Admin Panel Code.

Finally, click on the Create React Admin to generate your React Admin Panel Code.


The generated React Admin Panel Code will look like this,

The generated React Admin Panel Code will look like this,


The generated source code can be downloaded, reviewed, or synchronized with the GitHub or GitLab Repositories.

So, this is all about creating react Admin Panel with the DhiWise. Watch our detailed YouTube video on “how to build a React Admin Panel with DhiWise”

Summing Up

DhiWise empowers developers to build web and mobile apps faster with complete flexibility for customization.

Here we have learned how to build a dynamic React Admin Panel in a few steps with DhiWise. You can configure themes and layout properties, set up actions, manage and view values and components of each model, and map out attributes.

Start using DhiWise today and accelerate your app development! Sign up here!