Admin Bro Features

Have you ever written an application in Node.js and needed to implement an administration panel? All the options were too time consuming or not exactly what you wanted? AdminBro is a fully customizable and automatically generated user interface which fulfills all your needs.

Why is AdminBro  suitable for your needs?

AdminBro aims to be extensible and modular. The core library uses adapters to connect with various databases and plugins to work with your specific web framework. In the newest release of the package you can find a functionality called “features”. Features allow you to extract the logic from your application and use them in your other projects without copying and pasting them every time.

What are the possibilities?

That opens a possibility to use features from other developers of the AdminBro community. There are already two which you can use right away. The first one is @admin-bro/passwords package that saves you time implementing user management in  your application and ensures that user passwords are safe. It automatically hashes the password entered in the admin panel and saves it in the entity. All you have to do is install that package and specify proper options when creating a user entity. The second feature allows you to upload files through the admin panel. Right now you can use it with S3 or your local file saving.

You can find all the help needed in the official AdminBro documentation:

Or directly in AdminBro community repositories:

How do I extend AdminBro with my features?

Writing new features is extremely simple: you can describe it as just extending the resource options for your entities. AdminBro will take care of merging your feature into the resource options. Let’s say you want to write a simple “log in” feature and want to know who made  changes to the specific entities. The best way to implement that is to create an after hook (After - AdminBro) for edit, new and delete actions. If you’re using TypeScript AdminBro provides useful some types  you can use:

import { ActionResponse, After, buildFeature, FeatureType } from 'admin-bro';

export const logFeature = (): FeatureType => {
 const logAction = async (
   response,
   request,
   context
 ): Promise<After<ActionResponse>> => {
   if (request.method !== 'post') {
     return response;
   }
   // Here you can save it in your log file or database
   console.log(context.currentAdmin.email, request.payload);

   return response;
 };

 return buildFeature({
   actions: {
     edit: {
       after: [logAction],
     },
     new: {
       after: [logAction],
     },
     delete: {
       after: [logAction],
     },
   },
 });
};

Now it’s time to embed that feature into your resource using resource options:

const options = {
 resources: [
   {
     resource: User,
     features: [logFeature()],
   },
 ],
};

And that’s it! Now you will be able to track users and see what actions they execute.

How to share my features between projects?

If you want to share the feature code between your projects you have to:

  1. Extract your feature code to a separate repository
    • Create a new main file e.g. index.js
    • Export your feature function from index.js
    • Add field: “main”: “index.js” to your package.json.
  2. Create an account on www.npmjs.com.
    • Log in to your account using command npm login from your terminal
    • Run npm publish and follow the instructions.
  3. Download your package and use it within any of your projects.

If you have your feature code written in typescript all you have to do is specify the additional fields in package.json:

"files": [
 "lib" <-- name of directory with built .js files
],
"scripts": {
 "build": "tsc" <-- build script to transpile .ts files into .js files
},

You can find the full example here:

Repository: https://github.com/JonaszJestem/admin-bro-logs

End-result NPM package: https://www.npmjs.com/package/admin-bro-logs

Did you write an amazing feature and want to share it with the AdminBro community? That’s great! Submit your pull request here: AdminBro Features

That’s a way to be noticed. Don’t forget to join and share it also on the AdminBro Slack community: https://adminbro.slack.com/join/shared_invite/zt-djsqxxpz-_YCS8UMtQ9Ade6DPuLR7Zw

What’s next?

AdminBro features open a world full of possibilities. Features save a lot of development time and provide an instant business value. You can set up an AdminBro panel within a matter of minutes and pack it with the features you want it to have.

Features allow you to extend actions, define property options and even customize the UI via custom-made components. That means you can write custom actions like: export records, import records from file or synchronize your database with some external tools. Making custom components in features opens a possibility to customize the view of your resources e.g. make a wizard for creating new records. Share your ideas and brag about your custom features!