AdminJSOptions

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

Usage with regular javascript

const AdminJS = require('adminjs')
//...
const adminJS = new AdminJS({
  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 { AdminJSOptions } from 'adminjs'

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

const adminJs = new AdminJS(options)

View Source adminjs/src/adminjs-options.interface.ts, line 13

Members

Type: Assets | AssetsFunction

# assets Optional

Custom assets you want to pass to AdminJS

View Source adminjs/src/adminjs-options.interface.ts, line 134

Type: string

# assetsCDN Optional

Indicates is bundled by AdminJS files like:

components.bundle.js
global.bundle.js
design-system.bundle.js
app.bundle.js should be taken from the same server as other AdminJS 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 .adminjs/ folder by using AdminJS#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/adminjs/lib/frontend/assets/scripts/app-bundle.production.js' to './public/app.bundle.js',
copy './node_modules/adminjs/lib/frontend/assets/scripts/global-bundle.production.js' to './public/global.bundle.js'

- copy './node_modules/adminjs/node_modules/@adminjs/design-system/bundle.production.js' to './public/design-system.bundle.js'

host entire public folder under some domain (if you use firebase - you can host them with firebase hosting)
point AdminJS.assetsCDN to this domain

View Source adminjs/src/adminjs-options.interface.ts, line 140

Type: BrandingOptions | BrandingOptionsFunction

# branding Optional

Options which are related to the branding.

View Source adminjs/src/adminjs-options.interface.ts, line 128

Type: BundlerOptions

# bundler Optional

rollup bundle options;

View Source adminjs/src/adminjs-options.interface.ts, line 256

Type: 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 adminjs/src/adminjs-options.interface.ts, line 114

Type: Array.<any>

# databases Optional

Array of all Databases which are supported by AdminJS via adapters

View Source adminjs/src/adminjs-options.interface.ts, line 74

Type: 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 AdminJS({env: {
  GOOGLE_MAP_API_TOKEN: 'my-token',
}})

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

AdminJS.env.GOOGLE_MAP_API_TOKEN

View Source adminjs/src/adminjs-options.interface.ts, line 178

Type: 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 i18n tutorial to see how internationalization in AdminJS works.

View Source adminjs/src/adminjs-options.interface.ts, line 199

Type: string

# loginPath Optional

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

View Source adminjs/src/adminjs-options.interface.ts, line 68

Type: string

# logoutPath Optional

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

View Source adminjs/src/adminjs-options.interface.ts, line 62

Type: AdminPages

# pages Optional

List of custom pages which will be visible below all resources

View Source adminjs/src/adminjs-options.interface.ts, line 80

Example

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

Type: Array.<(ResourceWithOptions|any)>

# resources Optional

Array of all Resources which are supported by AdminJS 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`
`resources[].features`	`Array.<FeatureType>`

See:

ResourceOptions

View Source adminjs/src/adminjs-options.interface.ts, line 102

Type: string

# rootPath Optional

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

View Source adminjs/src/adminjs-options.interface.ts, line 55

Type: VersionSettings

# version Optional

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

View Source adminjs/src/adminjs-options.interface.ts, line 122

Type Definitions

Type: object

# AdminPage

Object describing regular page in AdminJS

Properties:

Name	Type	Attributes	Description
`handler`	`PageHandler`	<optional>	Handler function
`component`	`string`		Component defined by using AdminJS.bundle
`icon`	`string`	<optional>	Page icon

View Source adminjs/src/adminjs-options.interface.ts, line 331

Type: object

# Assets

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.
`coreScripts`	`CoreScripts`	<optional>	Mapping of core scripts in case you want to version your assets

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

# AssetsFunction(adminopt) → {Assets|Promise.<Assets>}

Function returning Assets

Parameters:

Name	Type	Attributes	Description
`admin`	`CurrentAdmin`	<optional>

View Source adminjs/src/adminjs-options.interface.ts, line 276

Returns:

Type: Assets | Promise.<Assets>

Type: object

# BrandingOptions

Branding Options

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

new AdminJS({
  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 "AdminJS".
`theme`	`Partial.<ThemeOverride>`	<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 adminjs/src/adminjs-options.interface.ts, line 296

# BrandingOptionsFunction(adminopt) → {BrandingOptions|Promise.<BrandingOptions>}

Branding Options Function

function returning BrandingOptions.

Parameters:

Name	Type	Attributes	Description
`admin`	`CurrentAdmin`	<optional>

View Source adminjs/src/adminjs-options.interface.ts, line 320

Returns:

Type: BrandingOptions | Promise.<BrandingOptions>

Type: object

# BundlerOptions

Bundle options

Properties:

Name	Type	Attributes	Description
`babelConfig`	`BabelConfig` \| `string`	<optional>	The file path to babel config file or json object of babel config.

View Source adminjs/src/adminjs-options.interface.ts, line 371

Example

const adminJS = new AdminJS({
    resources: [],
    rootPath: '/admin',
    babelConfig: './.adminJS.babelrc'
   })

# FeatureType(options) → {ResourceOptions}

Function taking ResourceOptions and merging it with all other options

Parameters:

Name	Type	Description
`options`	`ResourceOptions`	Options returned by the feature added before

View Source adminjs/src/adminjs-options.interface.ts, line 351

Returns:

Type: ResourceOptions

Type: object

# Locale

Locale object passed to AdminJSOptions 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 adminjs/src/locale/config.ts, line 70

Type: 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 adminjs/src/locale/config.ts, line 4

Type: object

# PageContext

Context object passed to a PageHandler

Properties:

Name	Type	Attributes	Description
`_admin`	`AdminJS`		current instance of AdminJS. You may use it to fetch other Resources by their names:
`currentAdmin`	`CurrentAdmin`	<optional>	Currently logged in admin
`h`	`ViewHelpers`		view helpers

View Source adminjs/src/backend/actions/action.interface.ts, line 38

# 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 adminjs/src/adminjs-options.interface.ts, line 361

Type: object

# ResourceWithOptions

Default way of passing Options with a Resource

Properties:

Name	Type	Attributes
`resource`	`any`
`options`	`ResourceOptions`
`features`	`Array.<FeatureType>`	<optional>

View Source adminjs/src/adminjs-options.interface.ts, line 342

Type: 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 adminjs/src/adminjs-options.interface.ts, line 286