Skip to main content

AdminForthResource

AdminForthResource: object

Resource describes one table or collection in database. AdminForth generates set of pages for 'list', 'show', 'edit', 'create', 'filter' operations for each resource.

Type declaration​

columns​

columns: AdminForthResourceColumn[]

Array of columns which will be displayed in the admin panel. Each column has its own configuration.

dataSource​

dataSource: string

ID of datasource which will be used to fetch data from.

dataSourceColumns?​

optional dataSourceColumns: AdminForthResourceColumn[]

Internal array of columns which are not virtual. You should not edit it.

hooks?​

optional hooks: object

Hooks allow you to change the data on different stages of resource lifecycle. Hooks are functions which will be called on backend side (only backend side).

hooks.create?​

optional create: object

hooks.create.afterSave?​

optional afterSave: AfterSaveFunction | AfterSaveFunction[]

Typical use-cases:

  • Initiate some trigger after record saved to database (e.g sync to another datasource)

hooks.create.beforeSave?​

optional beforeSave: BeforeSaveFunction | BeforeSaveFunction[]

Typical use-cases:

  • Validate record before saving to database and interrupt execution if validation failed (allowedActions.create should be preferred in most cases)
  • fill-in adminUser as creator of record
  • Attach additional data to record before saving to database (mostly fillOnCreate should be used instead)

hooks.delete?​

optional delete: object

hooks.delete.afterSave?​

optional afterSave: BeforeSaveFunction | BeforeSaveFunction[]

Typical use-cases:

  • Initiate some trigger after record deleted from database (e.g sync to another datasource)

hooks.delete.beforeSave?​

optional beforeSave: BeforeSaveFunction | BeforeSaveFunction[]

Typical use-cases:

  • Validate that record can be deleted and interrupt execution if validation failed (allowedActions.delete should be preferred in most cases)

hooks.edit?​

optional edit: object

hooks.edit.afterSave?​

optional afterSave: AfterSaveFunction | AfterSaveFunction[]

Typical use-cases:

  • Same as hooks.create.afterSave but for edit page

hooks.edit.beforeSave?​

optional beforeSave: BeforeSaveFunction | BeforeSaveFunction[]

Typical use-cases:

  • Same as hooks.create.beforeSave but for edit page

hooks.list?​

optional list: object

hooks.list.afterDatasourceResponse?​

optional afterDatasourceResponse: AfterDataSourceResponseFunction | AfterDataSourceResponseFunction[]

Typical use-cases:

  • Same as hooks.show.afterDatasourceResponse but applied for all records returned from database for showing in list view, e.g. add new field to each record in list view

hooks.list.beforeDatasourceRequest?​

optional beforeDatasourceRequest: BeforeDataSourceRequestFunction | BeforeDataSourceRequestFunction[]

Typical use-cases:

  • add additional filters in addition to what user selected before fetching data from database.
  • same as hooks.show.beforeDatasourceRequest

hooks.show?​

optional show: object

hooks.show.afterDatasourceResponse?​

optional afterDatasourceResponse: AfterDataSourceResponseFunction | AfterDataSourceResponseFunction[]

Typical use-cases:

  • Transform value for some field for record returned from database before returning to frontend (minimize, sanitize, etc)
  • If some-why you can't use backendOnly you can cleanup sensitive fields here
  • Attach additional data to record before returning to frontend

hooks.show.beforeDatasourceRequest?​

optional beforeDatasourceRequest: BeforeDataSourceRequestFunction | BeforeDataSourceRequestFunction[]

Typical use-cases:

  • request additional data from database before returning to frontend for soft-join

label?​

optional label: string

Label for resource which will be displayed in the admin panel. By default it equals to table name in database.

options?​

optional options: object

General options for resource.

options.allowedActions?​

optional allowedActions: AllowedActions

Allowed actions for resource.

Example:

allowedActions: {
 create: ({ resource, adminUser }) => {
   // Allow only superadmin to create records
   return adminUser.dbUser.role === 'superadmin';
 },
 delete: false, // disable delete action for all users
}

options.bulkActions?​

optional bulkActions: AdminForthBulkAction[]

Custom bulk actions list. Bulk actions available in list view when user selects multiple records by using checkboxes.

options.createEditGroups?​

optional createEditGroups: object[]

Allows to make groups of columns in create/edit resource pages.

options.defaultSort?​

optional defaultSort: object

Default sort for list view. Example:

import { AdminForthSortDirections } from 'adminforth';

...

defaultSort: {
  columnName: 'created_at',
  direction: AdminForthSortDirections.ASC, 
}

options.defaultSort.columnName​

columnName: string

Column name which will be used to sort records.

options.defaultSort.direction​

direction: AdminForthSortDirections | string

Direction of sorting. Can be 'asc' or 'desc'.

options.listPageSize?​

optional listPageSize: number

Page size for list view

options.listTableClickUrl()?​

optional listTableClickUrl: (record, adminUser) => Promise<string | null>

Callback to define what happens when user clicks on record in list view. By default show view will be opened. If you wish to open custom page, return URL to the custom page (can start with https://, or relative adminforth path) If you wish to open page in new tab, add target=_blank get param to returned URL, example:

listTableClickUrl: async (record, adminUser) => {
  return `https://google.com/search?q=${record.name}&target=_blank`;
}

If you wish to do nothing on click, return null.

Example:

listTableClickUrl: async (record, adminUser) => {
  return null;
}

Parameters​

ParameterTypeDescription
recordanyrecord which was clicked
adminUserAdminUseruser who clicked

Returns​

Promise<string | null>

options.pageInjections?​

optional pageInjections: object

Custom components which can be injected into AdminForth CRUD pages. Each injection is a path to a custom component which will be displayed in the admin panel. Can be also array to render multiple injections one after another.

Example:

pageInjections: {
 list: {
  beforeBreadcrumbs: '@@/Announcement.vue',
 }
}

options.pageInjections.create?​

optional create: object

Custom components which can be injected into resource create page.

Component accepts next props: [resource, adminUser, meta]

options.pageInjections.create.afterBreadcrumbs?​

optional afterBreadcrumbs: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.create.beforeBreadcrumbs?​

optional beforeBreadcrumbs: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.create.bottom?​

optional bottom: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.create.threeDotsDropdownItems?​

optional threeDotsDropdownItems: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.edit?​

optional edit: object

Custom components which can be injected into resource edit page.

Component accepts next props: [record, resource, adminUser, meta]

options.pageInjections.edit.afterBreadcrumbs?​

optional afterBreadcrumbs: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.edit.beforeBreadcrumbs?​

optional beforeBreadcrumbs: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.edit.bottom?​

optional bottom: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.edit.threeDotsDropdownItems?​

optional threeDotsDropdownItems: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.list?​

optional list: object

Custom components which can be injected into resource list page.

Component accepts next props: [resource, adminUser, meta]

options.pageInjections.list.afterBreadcrumbs?​

optional afterBreadcrumbs: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.list.beforeBreadcrumbs?​

optional beforeBreadcrumbs: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.list.bottom?​

optional bottom: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.list.customActionIcons?​

optional customActionIcons: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.list.threeDotsDropdownItems?​

optional threeDotsDropdownItems: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.show?​

optional show: object

Custom components which can be injected into resource show page.

Component accepts next props: [record, resource, adminUser, meta]

options.pageInjections.show.afterBreadcrumbs?​

optional afterBreadcrumbs: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.show.beforeBreadcrumbs?​

optional beforeBreadcrumbs: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.show.bottom?​

optional bottom: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

options.pageInjections.show.threeDotsDropdownItems?​

optional threeDotsDropdownItems: AdminForthComponentDeclaration | AdminForthComponentDeclaration[]

plugins?​

optional plugins: IAdminForthPlugin[]

Array of plugins which will be used to modify resource configuration.

recordLabel?​

optional recordLabel: Function

Hook which allow you to modify record label

Example:

recordLabel: (record) => `${record.name} - ${record.id}`,

resourceId?​

optional resourceId: string

Unique identifier of resource. By default it equals to table name in database. If you wish you can explicitly set it to any string. We added to support cases when 2 datasources have tables with the same name.

table​

table: string

Table name in database which will be used to fetch data from. Might be case sensitive.