Interface

AdminBroOptions

AdminBroOptions

AdminBroOptions

This is the heart of entire AdminBro - all options resides here.

Usage with regular javascript

const AdminBro = require('admin-bro')
//...
const adminBro = new AdminBro({
  rootPath: '/xyz-admin',
  logoutPath: '/xyz-admin/exit',
  loginPath: '/xyz-admin/sign-in',
  databases: [mongooseConnection],
  resources: [{ resource: ArticleModel, options: {...}}],
  branding: {
    companyName: 'XYZ c.o.',
  },
})

TypeScript

import { AdminBroOptions } from 'admin-bro

const options: AdminBroOptions = {
  rootPath: '/xyz-admin',
  logoutPath: '/xyz-admin/exit',
  loginPath: '/xyz-admin/sign-in',
  databases: [mongooseConnection],
  resources: [{ resource: ArticleModel, options: {...}}],
  branding: {
    companyName: 'XYZ c.o.',
  },
}

const adminBro = new AdminBro(options)

View Source admin-bro/src/admin-bro-options.interface.ts, line 10

Members

object

# assets Optional

Custom assets you want to pass to AdminBro

Properties:
Name Type Attributes Description
styles Array.<string> <optional>

List to urls of custom stylesheets. You can pass your font - icons here (as an example)

scripts Array.<string> <optional>

List of urls to custom scripts. If you use some particular js, library - you can pass its url here.

View Source admin-bro/src/admin-bro-options.interface.ts, line 130

string

# assetsCDN Optional

Indicates is bundled by AdminBro files like:

  • components.bundle.js
  • global.bundle.js
  • app.bundle.js should be taken from the same server as other AdminBro routes (default) or should be taken from an external CDN.

If set - bundles will go from given CDN if unset - from the same server.

When you can use this option? So let's say you want to deploy the app on serverless environment like Firebase Cloud Functions. In that case you don't want to serve static files with the same app because your function will be invoked every time frontend asks for static assets.

Solution would be to:

  • create public folder in your app
  • generate bundle.js file to .adminbro/ folder by using AdminBro#initialize function (with process.env.NODE_ENV set to 'production').
  • copy the before mentioned file to public folder and rename it to components.bundle.js
  • copy './node_modules/admin-bro/lib/frontend/assets/scripts/app-bundle.production.js' to './public/app.bundle.js',
  • copy './node_modules/admin-bro/lib/frontend/assets/scripts/global-bundle.production.js' to './public/global.bundle.js'
  • host entire public folder under some domain (if you use firebase - you can host them with firebase hosting)
  • point AdminBro.assetsCDN to this domain

View Source admin-bro/src/admin-bro-options.interface.ts, line 139

BrandingOptions

# branding Optional

Options which are related to the branding.

View Source admin-bro/src/admin-bro-options.interface.ts, line 124

object

# dashboard Optional

Option to modify the dashboard

Properties:
Name Type Attributes Description
handler PageHandler <optional>

Handler function which can be triggered using ApiClient#getDashboard.

component string <optional>

Bundled component name which should be rendered when user opens the dashboard

View Source admin-bro/src/admin-bro-options.interface.ts, line 110

Array.<any>

# databases Optional

Array of all Databases which are supported by AdminBro via adapters

View Source admin-bro/src/admin-bro-options.interface.ts, line 71

Record.<string, string>

# env Optional

Environmental variables passed to the frontend.

So let say you want to pass some GOOGLE_MAP_API_TOKEN to the frontend. You can do this by adding it here:

new AdminBro({env: {
  GOOGLE_MAP_API_TOKEN: 'my-token',
}})

and this token will be available on the frontend by using:

AdminBro.env.GOOGLE_MAP_API_TOKEN

View Source admin-bro/src/admin-bro-options.interface.ts, line 173

Locale

# locale Optional

Translation file. Change it in order to:

  • localize admin panel
  • change any arbitrary text in the UI

This is the example for changing name of a couple of resources along with some properties to Polish

{
  ...
  locale: {
    language: 'pl',
    translations: {
      labels: {
        Comments: 'Komentarze',
      }
      resources: {
        Comments: {
          properties: {
            name: 'Nazwa Komentarza',
            content: 'Zawartość',
          }
        }
      }
    }
  }
}

As I mentioned you can use this technic to change any text even in english. So to change button label for a "new action" from default "Create new" to "Create new Comment" only for Comment resource you can do:

{
  ...
  locale: {
    translations: {
      resources: {
        Comments: {
          actions: {
            new: 'Create new Comment',
          }
        }
      }
    }
  }
}

Check out the 09-i18n to see how internationalization in AdminBro works.

View Source admin-bro/src/admin-bro-options.interface.ts, line 194

string

# loginPath Optional

url to a login page, default to /admin/login

View Source admin-bro/src/admin-bro-options.interface.ts, line 65

string

# logoutPath Optional

url to a logout action, default to /admin/logout

View Source admin-bro/src/admin-bro-options.interface.ts, line 59

Record.<string, AdminPage>

# pages Optional

List of custom pages which will be visible below all resources

View Source admin-bro/src/admin-bro-options.interface.ts, line 77

Example
pages: {
  customPage: {
    label: "Custom page",
    handler: async (request, response, context) => {
      return {
        text: 'I am fetched from the backend',
      }
    },
    component: AdminBro.bundle('./components/some-stats'),
  },
  anotherPage: {
    label: "TypeScript page",
    component: AdminBro.bundle('./components/test-component'),
  },
}
Array.<(ResourceWithOptions|any)>

# resources Optional

Array of all Resources which are supported by AdminBro via adapters. You can pass either resource or resource with an options and thus modify it.

Properties:
Name Type Description
resources[].resource any
resources[].options ResourceOptions
See:

View Source admin-bro/src/admin-bro-options.interface.ts, line 99

string

# rootPath Optional

path, under which, AdminBro will be available. Default to /admin

View Source admin-bro/src/admin-bro-options.interface.ts, line 52

VersionSettings

# version Optional

Flag which indicates if version number should be visible on the UI

View Source admin-bro/src/admin-bro-options.interface.ts, line 118

Type Definitions

object

# AdminPage

Object describing regular page in AdminBro

Properties:
Name Type Attributes Description
handler PageHandler <optional>

Handler function

component string

Component defined by using AdminBro.bundle

View Source admin-bro/src/admin-bro-options.interface.ts, line 288

object

# BrandingOptions

Branding Options

You can use them to change how AdminBro looks. For instance to change name and colors (dark theme) run:

const theme = require('admin-bro-theme-dark')

new AdminBro({
  branding: {
    companyName: 'John Doe Family Business',
    theme,
  }
})
Properties:
Name Type Attributes Description
logo string | false <optional>

URL to a logo, or false if you want to hide the default one.

companyName string <optional>

Name of your company, which will replace "AdminBro".

theme Partial.<Theme> <optional>

CSS theme.

softwareBrothers boolean <optional>

Flag indicates if SoftwareBrothers tiny hart icon should be visible on the bottom sidebar.

favicon string <optional>

URL to a favicon

View Source admin-bro/src/admin-bro-options.interface.ts, line 262

object

# Locale

Locale object passed to AdminBroOptions and stored in the application

Properties:
Name Type Description
language string

Language ISO string like: 'en' 'pl' or 'de'

translations Partial.<LocaleTranslations>

All the translations.

View Source admin-bro/src/locale/config.ts, line 70

Object

# LocaleTranslations

Contains all the translations for given language. Everything is divided to sections/blocks like actions, properties, buttons, labels and messages, but also the same sections can can be nested under 'resources' property.

This allows you to define translations either for entire UI or for a specific resource. Take a look at this example:

{
  translations: {
    buttons: {
      save: 'Save it',
    },
    resources: {
      Comments: {
        buttons: {
          save: 'Save this comment'
        }
      }
    }
  }
}

In the example above all save buttons will be named: 'Save it'. All but save button in Comments resource. Where the button name will be: Save this comment.

Properties:
Name Type Attributes Description
actions Record.<string, string> <optional>

translated action labels

properties Record.<string, string> <optional>

translated resource properties

messages Record.<string, string> <optional>

translated messages

buttons Record.<string, string> <optional>

translated button labels

labels Record.<string, string> <optional>

translated labels

resources Record.<string, object> <optional>

optional resources sub-translations

resourceId Record.<string, object>

Id of a resource from the database. i.e. Comments for comments mongoose collection

resourceId.actions Record.<string, string> <optional>
resourceId.properties Record.<string, string> <optional>
resourceId.messages Record.<string, string> <optional>
resourceId.buttons Record.<string, string> <optional>
resourceId.labels Record.<string, string> <optional>

View Source admin-bro/src/locale/config.ts, line 4

object

# PageContext

Context object passed to a PageHandler

Properties:
Name Type Attributes Description
_admin AdminBro

current instance of AdminBro. You may use it to fetch other Resources by their names:

currentAdmin CurrentAdmin <optional>

Currently logged in admin

h ViewHelpers

view helpers

View Source admin-bro/src/backend/actions/action.interface.ts, line 34

# PageHandler(request, response, context)

Function which is invoked when user enters given AdminPage

Parameters:
Name Type Description
request any
response any
context PageContext

View Source admin-bro/src/admin-bro-options.interface.ts, line 305

object

# ResourceWithOptions

Default way of passing Options with a Resource

Properties:
Name Type Description
resource any
options ResourceOptions

View Source admin-bro/src/admin-bro-options.interface.ts, line 297

object

# VersionSettings

Version Props

Properties:
Name Type Attributes Description
admin boolean <optional>

if set to true - current admin version will be visible

app string <optional>

Here you can pass any arbitrary version text which will be seen in the US., You can pass here your current API version.

View Source admin-bro/src/admin-bro-options.interface.ts, line 251