Example how to work with extension registry
This page is a work in progress. It will be updated as the software evolves.
A header app appears next to the user profile and global search icon on the top-right corner of Umbraco's backoffice.
In this article, you can find an example of an extension registry. This example goes through the creation of a Header App in two ways just as the extension registry can be done as well:
Below you can find an example of how to setup a Header App using the manifest file.
Follow the Vite Package Setup to create a header app and name it "header-app
" when using the guide.
Create a manifest file named umbraco-package.json
at the root of the header-app
folder. Here we define and configure our dashboard.
Add the following code to umbraco-package.json
:
First we define the type which is a headerApp
. Then we add a unique alias and a name to define the extension UI.
Then we can define what kind of extension it is, where in this case we can use a pre-defined element called button.
The button requires some metdata: an icon, label of the button (name of the button) and a link which opens once clicked.
In the header-app
folder run npm run build
and then run the project. Then in the backoffice you will see our new Header App extension with heart icon:
Below you can find an example of how to setup a Header App using the ts file.
This is a continuation of the above steps from Button Header App with Manifest example as we will register a new Header App directly from the .ts file.
Add a reference to the .js file. Update the umbraco-package.json
with the following:
Replace the content of the src/my-element.ts file
with the following:
In the header-app
folder run npm run build
and then run the project. Then in the backoffice you will see our new Header App extension with address book icon: