Tutorial

06. Using AdminBro features

in v3 of AdminBro, we introduced AdminBro features.

From business perspective Feature is a chunk of code which solves one business problem and it can be applied to selected resource/resources.

From the technical perspective Feature is a function returning ResourceOptions.

We wrote them because we want the sharing functionalities among projects to be super easy.

The feature can be:

  • file upload
  • blog
  • password hashing
  • user profile ...etc

Using features

Features are passed to configuration along with the resources and their options.

Let me show you an example:

const User = require('./models/user')
const argon2 = require('argon2')
const hashPassword = require('@admin-bro/passwords')

const adminBroOptions = {
  resources: [
    {
      resource: User,
      options: {
        //...your regular options go here'
        properties: { encryptedPassword: { isVisible: false } },
      },
      features: [hashPassword({
        properties: {
          encryptedPassword: 'myDbField',
          password: 'password'
        }
        hash: argon2.hash,
      })]
    },
  ],
  //...
}

Writing your own features

As I mentioned the feature is a simple function which returns ResourceOptions. Simple as that.

But since features can be chained they also take ResourceOptions generated by the previous features as a parameter.

Simple feature implementation (idea):

const feature = (prevResourceOptions) {
  return {
    ...prevResourceOptions,
    actions: {
      ...prevResourceOptions.actions,
      edit: {
        ...(prevResourceOptions.actions && prevResourceOptions.actions.edit),
        //..
      }
      //..
    }
  }
}

export { feature }

As you can see, in the example above, that you have to take care of merging previous options, which could be problematic.

Fortunately AdminBro gives you the helper functions for that:

This is how a feature could look when we use buildFeature function:

const { buildFeature } = require('admin-bro')

const feature = buildFeature({
  actions: {
    before: myBeforeHook
  }
})

Available features

Supported by SoftwareBrothers

Community plugins

We've just added features to admin-bro@3. On this page, we will write all the things which we, or the community, will create.

So let's create the first feature!!!

SoftwareBrothers

Proudly built and maintained by SoftwareBrothers

Software House with a passion for both JavaScript and TypeScript.

See what we do See what we believe in

Proudly built and maintained by

SoftwareBrothers