AdminForthPageInjectionDeclarationFull

Extends

• AdminForthComponentDeclarationFull

Properties

file

file: string

Path to custom component which will be used to render field in the admin panel. e.g. @@/MyCustomComponent.vue

Inherited from

AdminForthComponentDeclarationFull.file

---

isVisible?

optional isVisible?: (params) => boolean | Promise<boolean>

Called on the backend every time the resource is loaded for the user. When it returns false, the injection is not sent to the frontend, so the component is not rendered for this user. Use it to hide a component from users who are not allowed to use it, and check the same rule in the backend endpoints the component calls.

Example:

threeDotsDropdownItems: [{
  file: '@@/GenerateReport.vue',
  isVisible: ({ adminUser }) => adminUser.dbUser.role === 'superadmin',
}],

Parameters

Parameter	Type
params	{ adminUser: AdminUser; resource: AdminForthResource; }
params.adminUser	AdminUser
params.resource	AdminForthResource

Returns

boolean | Promise<boolean>

---

meta?

optional meta?: object

Optional Meta object which will be passed to custom component as props. For example used by plugins to pass plugin options to custom components.

Example:

{
   name: 'Country Flag',
   virtual: true,
   showIn: {
     [AdminForthResourcePages.list]: false,
     [AdminForthResourcePages.edit]: false,
     [AdminForthResourcePages.create]: false,
     [AdminForthResourcePages.filter]: false,
   },
   components: {
     show: {
       file: '@@/Flag.vue',
       meta: {
         flagType: 'country',
       },
     },
   },
},
{
   name: 'Team Flag',
   virtual: true,
   showIn: {
     [AdminForthResourcePages.list]: false,
     [AdminForthResourcePages.edit]: false,
     [AdminForthResourcePages.create]: false,
     [AdminForthResourcePages.filter]: false,
   },
   components: {
     show: {
       file: '@@/Flag.vue',
       meta: {
         flagType: 'team',
       },
    },
   },
}

In Flag.vue you can access this meta object like this:

<template>
 <img :src="loadFile(`@@/flags/${meta.flagType}/${meta.flagType === 'country' ? record.countryIso : record.teamCode}.png`)" />
</template>

<script setup>
import { loadFile } from '@/utils';
defineProps(['meta', 'record']);
</script>

#### Index Signature

\[`key`: `string`\]: `any`

#### sidebarAndHeader?

> `optional` **sidebarAndHeader?**: `"default"` \| `"none"` \| `"preferIconOnly"` \| `"headerOnly"`

Controls sidebar and header visibility for custom pages
- 'default': Show both sidebar and header (default behavior)
- 'none': Hide both sidebar and header (full custom layout)
- 'preferIconOnly': Show header but prefer icon-only sidebar
- 'headerOnly': Show only header (full custom layout)

#### Inherited from

[`AdminForthComponentDeclarationFull`](AdminForthComponentDeclarationFull.md).[`meta`](AdminForthComponentDeclarationFull.md#meta)