Skip to main content

AdminForthConfig

AdminForthConfig: object

Main configuration object for AdminForth

Type declaration​

auth?​

optional auth: object

Authorization module configuration

auth.beforeLoginConfirmation?​

optional beforeLoginConfirmation: BeforeLoginConfirmationFunction | BeforeLoginConfirmationFunction[]

Function or functions which will be called before user try to login. Each function will resive User object as an argument

auth.demoCredentials?​

optional demoCredentials: string

Pair of login and pass substitution for demo mode. Split by ':' ! This option is for demo purposes only, never use it for your projects

auth.loginBackgroundImage?​

optional loginBackgroundImage: string

File path to custom background image for login page Example: Place file login-background.jpg to ./custom folder and set this option:

loginBackgroundImage: '@@/login-background.jpg',

auth.loginBackgroundPosition?​

optional loginBackgroundPosition: "over" | "1/2" | "1/3" | "2/3" | "3/4" | "2/5" | "3/5"

Position of background image on login page 'over' - image will be displayed over full login page under login form '1/2' - image will be displayed on left 1/2 of login page

Default: '1/2'

auth.loginPromptHTML?​

optional loginPromptHTML: string

Any prompt to show users on login. Supports HTML.

auth.passwordHashField​

passwordHashField: string

Field name (column name) in user resource which will be used to get hash of password. Can be e.g. 'passwordHash'

auth.rememberMeDays?​

optional rememberMeDays: number

Remember me days for "Remember Me" checkbox on login page. If not set or set to null/0/undefined, "Remember Me" checkbox will not be displayed. If rememberMeDays is set, then users who check "Remember Me" will be staying logged in for this amount of days.

auth.resourceId?​

optional resourceId: string

Legacy field left for backward compatibility. Use usersResourceId instead.

auth.userFullNameField?​

optional userFullNameField: string

Optionally if your users table has a field(column) with full name, you can set it here. This field will be used to display user name in the top right corner of the admin panel.

auth.usernameField​

usernameField: string

Field name (column name) in user resource which will be used as username for searching user in database during login. Can be e.g. 'email' or 'username'

auth.usersResourceId?​

optional usersResourceId: string

Resource ID for resource which stores user table. Resource is a table in database where users will be stored and fetched from. Resources and their ids are defined in resources section of the config. In other words this setting is a reference to a table in database where users will be fetched from on login.

baseUrl?​

optional baseUrl: string

If you want to Serve AdminForth from a subdirectory, e.g. on example.com/backoffice, you can specify it like:

baseUrl: '/backoffice',

customization?​

optional customization: object

Settings which allow you to customize AdminForth

customization.announcementBadge()?​

optional announcementBadge: (user) => object | null

Function to return custom badge in side bar for users. Can return text or html If function is not passed or returns null, badge will not be shown. Execution is done on admin app load.

Parameters​

ParameterType
userAdminUser

Returns​

object | null

optional brandLogo: string

Path to your app logo

Example: Place file logo.svg to ./custom folder and set this option:

brandLogo: '@@/logo.svg',

customization.brandName?​

optional brandName: string

Your app name

customization.customComponentsDir?​

optional customComponentsDir: string

Relative or absolute path to custom components directory By default equals ./custom.

Custom .vue files, images, and any other assets placed in this directory can be accessed in AdminForth components and configs with @@/.

For example if file path is ./custom/comp/my.vue, you can use it in AdminForth config like this:

components: {
 show: '@@/comp/my.vue',
}

customization.customPages?​

optional customPages: object[]

Description of custom pages which will let register custom pages for custom routes in AdminForth.

customization.datesFormat?​

optional datesFormat: string

DayJS format string for all dates in the app. Defaulted to 'MMM D, YYYY'

customization.emptyFieldPlaceholder?​

optional emptyFieldPlaceholder: object | string

Placeholder for empty fields in lists and show views, by default empty string ''

customization.favicon?​

optional favicon: string

Path to your app favicon

Example: Place file favicon.png to ./custom folder and set this option:

favicon: '@@/favicon.png',

customization.globalInjections?​

optional globalInjections: object

Custom panel components or array of components which will be displayed in different parts of the admin panel.

customization.globalInjections.header?​

optional header: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

customization.globalInjections.sidebar?​

optional sidebar: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

customization.globalInjections.userMenu?​

optional userMenu: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

customization.loginPageInjections?​

optional loginPageInjections: object

Custom panel components or array of components which will be displayed in the login form right after the inputs. Use it to add custom authorization methods like social login or other custom fields e.g. 'reset' password link.

customization.loginPageInjections.underInputs?​

optional underInputs: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

customization.showBrandNameInSidebar?​

optional showBrandNameInSidebar: boolean

Whether to show brand name in sidebar default is true

customization.styles?​

optional styles: Object

Object to redefine default styles for AdminForth components. Use this file as reference for all possible adjustments https://github.com/devforth/adminforth/blob/main/adminforth/modules/styles.ts

customization.timeFormat?​

optional timeFormat: string

DayJS format string for all datetimes in the app. Defaulted to 'HH:mm:ss'

customization.title?​

optional title: string

HTML title tag value, defaults to brandName

customization.vueUsesFile?​

optional vueUsesFile: string

Path to custom .ts file which allows to inject custom Vue uses in SPA or add custom imports.

Example: Create file: ./custom/vue-uses.ts with next content:

import HighchartsVue from 'highcharts-vue';
// import '@@/custom.scss'; // here is how you can import custom styles

export default function (app) {
   app.use(HighchartsVue);
}

Install HighCharts into custom folder:

cd custom
npm init -y
npm install highcharts highcharts-vue

And specify vueUsesFile in AdminForth config:

vueUsesFile: '@@/vue-uses.ts',

dataSources​

dataSources: AdminForthDataSource[]

List of data sources which will be used to fetch data for resources. Datasource is one database connection

databaseConnectors?​

optional databaseConnectors: object

If you want use custom DataSource which is not supported by AdminForth yet, you can define it's class here

Index signature​

[key: string]: IAdminForthDataSourceConnectorConstructor

deleteConfirmation?​

optional deleteConfirmation: boolean

Whether to show delete confirmation dialog before deleting record. By default it is true.

menu: AdminForthConfigMenuItem[]

Array of left sidebar menu items which will be displayed in the admin panel. Menu items can be links to resources or custom pages. Menu items can be grouped.

resources​

resources: AdminForthResource[]

Array of resources which will be displayed in the admin panel. Resource represents one table or collection in database. Each resource has its own configuration.