🤖Advanced Customization

Now that you have the fundamentals ready, it's time to build features tailored to even your most specific needs. With Forest Admin, it only takes a few moments, as we facilitate the process thanks to custom actions and fields.

In this part of the tutorial, you'll learn:

How to add functionalities to approve and reject users and companies in the onboarding. All with no code!
How to add functionality to update the status of a user or a company using our low-code developer workflow.
How to display different customer documents the way you want, not the way they're stored in the database.
How to make your onboarding team even more productive thanks to AI-powered custom actions.

No-code Actions

No-code Actions can be created directly from the UI, offering a straightforward and quick approach without requiring access to your project's code or advanced development skills. In our User Onboarding demo app, we created 4 no-code actions that allow analysts to change the status of a new user or to blacklist users if necessary.

To make an action, turn on Layout Editor mode, go to the collection settings, and then the Actions tab. Follow this tutorial to create your first no-code Action on a collection there.

Custom Actions

We know that to meet very unique needs, sometimes no-code features are not enough. That's why Forest Admin is also equipped with developer tools to make adding custom features that require coding a smooth process. In fact, Forest Admin is the only SaaS admin panel solution that gives access to the underlying code.

In this example, let's have a look on how to create a custom action that allows to easily change the status of the onboarding, for example, in case where a company was rejected by mistake. We will create an action button that triggers a drop-down list that allows to change the status. We will also restrict this action in a way that every team member can request the status change but then senior analysts or managers will need to approve this action.

Check this tutorial to see how to create a Custom Action with developer tools.

Here is the code we used in this example 👇

import type { Agent } from '@forestadmin/forest-cloud';

import { Schema } from '../typings';

const STATUSES = [
  'signed_up',
  'waiting_for_legal_doc',
  'approved',
  'rejected',
  'require_further_verification',
];

agent.customizeCollection('users', users => {
    users.addAction('Update status', {
      scope: 'Bulk',
      form: [
        {
          label: 'new status',
          type: 'Enum',
          enumValues: STATUSES,
        },
      ],
      execute: async context => {
        await context.collection.update(context.filter, {
          status: context.formValues['Update status'],
        });
      },
    });
  });

Custom Fields

To improve the user experience, it often makes sense to create new fields that are not directly linked to a database field. These fields can be dynamically computed or sourced from other data sources or services.

In our Customer Onboarding project, all documents stored in the database (passports, proofs of address, certificates of incorporation, bank statements) are stored in the Documents collection. However, to make the KYC and KYB workflows smooth, we created a Custom Fields that allows to display the passports, proofs of address in the Users collection, and the certificates of incorporation and bank statements in the Companies collection.

To create Smart Fields, follow the same flow as for creating Smart Actions. In our project, we used the following code 👇

agent
  .customizeCollection('users', users => {
    users.importField('ProofOfAddressURL', { path: 'proof_of_address:url' })
    users.importField('PassportURL', { path: 'passport:url' })
  })
  .customizeCollection('companies', companies => {
    companies.importField('CertificateOfIncorporationURL', {
      path: 'certificate_of_incorporation:url',
    })
    companies.importField('BankStatementURL', { path: 'bank_statement:url' })
  });

To learn more about Custom Fields, go to the documentation.

AI-powered customizations

Forest Admin gives you the ability to integrate AI-powered workflows to make your operations even more efficient. There are many ways to make user onboarding faster with AI but in the user onboarding with KYC and KYB processes, the most common is using optical character recognition to extract data from legal documents and automated actions to save the data in the system. No more manual work, only a verification if AI-powered automated data entry was correct.

Watch this video to see such a Smart Action 👇 or check this article about Forest Admin AI if you prefer to read.

Once you have your customizations ready, it's time to create micro-apps and automations. Go to the next part of the tutorial, where you will learn:

How to build a KYC tool using no-code WYSIWYG editor.
How to create an Inbox to automatically route records to your operators, e.g. KYC analysts.

Go to Step Four: Automating Processes

PreviousUI Customization NextAutomating Processes with Workspaces & Inboxes

Last updated 4 months ago

import type { Agent } from '@forestadmin/forest-cloud'; import { Schema } from '../typings'; const STATUSES = [ 'signed_up', 'waiting_for_legal_doc', 'approved', 'rejected', 'require_further_verification', ]; agent.customizeCollection('users', users => { users.addAction('Update status', { scope: 'Bulk', form: [ { label: 'new status', type: 'Enum', enumValues: STATUSES, }, ], execute: async context => { await context.collection.update(context.filter, { status: context.formValues['Update status'], }); }, }); });

agent .customizeCollection('users', users => { users.importField('ProofOfAddressURL', { path: 'proof_of_address:url' }) users.importField('PassportURL', { path: 'passport:url' }) }) .customizeCollection('companies', companies => { companies.importField('CertificateOfIncorporationURL', { path: 'certificate_of_incorporation:url', }) companies.importField('BankStatementURL', { path: 'bank_statement:url' }) });