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 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 its 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

We've just added features to [email protected] On this page we will write all the things which we, or the community, will create.

So let's create the first feature!!!