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)
Members
# assetsCDN Optional
Indicates is bundled by AdminBro files like:
- components.bundle.js
- global.bundle.js
- design-system.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'
-
- copy './node_modules/admin-bro/node_modules/@admin-bro/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 AdminBro.assetsCDN to this domain
# branding Optional
Options which are related to the branding.
# 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 |
# databases Optional
Array of all Databases which are supported by AdminBro via adapters
# 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
# 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 AdminBro works.
# pages Optional
List of custom pages which will be visible below all resources
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'),
},
}
# 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 | |
resources[].features |
Array.<FeatureType> |
# version Optional
Flag which indicates if version number should be visible on the UI
Type Definitions
# 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 |
|
icon |
string |
<optional> |
Page icon |
# 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. |
# AssetsFunction(adminopt) → {Assets|Promise.<Assets>}
Function returning Assets
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
admin |
CurrentAdmin |
<optional> |
# BrandingOptions
Branding Options
You can use them to change how AdminBro looks. For instance to change name and colors (dark theme) run:
new AdminBro({
branding: {
companyName: 'John Doe Family Business',
theme,
}
})
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
logo |
string | false |
<optional> |
URL to a logo, or |
companyName |
string |
<optional> |
Name of your company, which will replace "AdminBro". |
theme |
Partial.<ThemeOverride> |
<optional> |
CSS theme. |
softwareBrothers |
boolean |
<optional> |
Flag indicates if |
favicon |
string |
<optional> |
URL to a favicon |
# BrandingOptionsFunction(adminopt) → {BrandingOptions|Promise.<BrandingOptions>}
Branding Options Function
function returning BrandingOptions.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
admin |
CurrentAdmin |
<optional> |
# 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 |
# 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. |
# 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> |
# 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 |
# PageHandler(request, response, context)
Function which is invoked when user enters given AdminPage
Parameters:
Name | Type | Description |
---|---|---|
request |
any | |
response |
any | |
context |
PageContext |
# ResourceWithOptions
Default way of passing Options with a Resource
Properties:
Name | Type | Attributes | Description |
---|---|---|---|
resource |
any | ||
options |
ResourceOptions | ||
features |
Array.<FeatureType> |
<optional> |
# 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. |