Backoffice Entry Point
The Backoffice Entry Point extension type is used to run some JavaScript code at startup.
This manifest declares a single JavaScript file that will be loaded and run when the Backoffice starts. In other words, this can be used as an entry point for a package.
The backofficeEntryPoint
extension is also the way to go if you want to load in external libraries such as jQuery, Angular, React, etc. You can use the backofficeEntryPoint
to load in the external libraries to be shared by all your extensions. Additionally, global CSS files can also be used in the backofficeEntryPoint
extension.
Register a Backoffice Entry Point in the umbraco-package.json
manifest
{
"name": "Name of your package",
"alias": "My.Package",
"extensions": [
{
"type": "backofficeEntryPoint",
"alias": "My.EntryPoint",
"js": "/App_Plugins/YourFolder/index.js"
}
]
}
Base structure of the entry point file
import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
/**
* Perform any initialization logic when the Backoffice starts
*/
export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
// Your initialization logic here
}
/**
* Perform any cleanup logic when the Backoffice and/or the package is unloaded
*/
export const onUnload: UmbEntryPointOnUnload = (host, extensionRegistry) => {
// Your cleanup logic here
}
Examples
Register additional UI extensions in the entry point file
import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
const manifest: UmbExtensionManifest = {
type: '', // type of extension
alias: '', // unique alias for the extension
elementName: '', // unique name of the custom element
js: '', // path to the javascript resource
meta: {
// additional props for the extension type
}
};
export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
// Register the extension
extensionRegistry.register(manifest);
}
export const onUnload: UmbEntryPointOnUnload = (host, extensionRegistry) => {
// Unregister the extension (optional)
extensionRegistry.unregister(manifest);
}
Register global CSS
An entry point is a good place to load global CSS files for the whole application. You can do this by creating a link element and appending it to the head of the document:
import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
export const onInit: UmbEntryPointOnInit = (host, extensionsRegistry) => {
const css = document.createElement('link');
css.rel = 'stylesheet';
css.href = '/App_Plugins/YourFolder/global.css';
document.head.appendChild(css);
}
Alternatively, you can import the CSS file directly in your JavaScript file:
import '/App_Plugins/YourFolder/global.css';
Type IntelliSense
It is recommended to make use of the Type intellisense that we provide.
When writing your Manifest in TypeScript you should use the Type UmbExtensionManifest
, see the TypeScript setup article to make sure you have Types correctly configured.
import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
const manifests: Array<UmbExtensionManifest> = [
{
type: '...',
alias: 'my.customization',
name: 'My customization'
...
},
...
];
export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
// Register the extensions
extensionRegistry.registerMany(manifests);
}
What's next?
See the Extension Types article for more information about all the different extension types available in Umbraco:
Extension TypesRead about running code before log in using an appEntryPoint
:
Last updated
Was this helpful?