Skip to content

Commit 542d4c3

Browse files
authored
Merge pull request #7441 from Luuk1983/feature/7360_extension_registry
Extension registry
2 parents 67fda89 + 54e8a1c commit 542d4c3

File tree

6 files changed

+183
-156
lines changed

6 files changed

+183
-156
lines changed

16/umbraco-cms/.gitbook.yaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,3 +145,4 @@ redirects:
145145
extending/customize-backoffice: customizing/README.md
146146
extending/content-apps: customizing/extending-overview/extension-types/workspaces/workspace-views.md
147147
extending/backoffice-setup/extension-types: customizing/extending-overview/extension-types/README.md
148+
customizing/extending-overview/extension-registry/extension-registry: customizing/extending-overview/extension-registry/register-extensions.md
Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
---
22
description: >-
3-
Almost any UI in the Backoffice is an extension. All managed by the Extension
4-
Registry on the Client at Runtime. Giving you enormous flexibility.
3+
Almost any UI in the Backoffice is an extension managed by the Extension Registry.
54
---
65

76
# Extension Registry
7+
The Umbraco backoffice is built with extensibility in mind. The backoffice without extensions is more or less a blank canvas that is build out using extensions. These extensions dictate how the backoffice functions and looks. All visual elements in an Umbraco installation, like the sections, menus, trees and buttons, are extensions. But extensions also dictate behaviour and the editing experience. So everything in the backoffice is governed (and extendable) by extensions.
88

9-
The Extensions Registry is your entry to extend or customize the Backoffice. Therefore, it is crucial to understand the abilities of the Extension Registry.
9+
{% hint style="info" %}
10+
You can see which extensions are registered in the backoffice by going to Settings > Extensions Insights.
11+
{% endhint %}
1012

11-
## [Extension Registration](extension-registry.md) <a href="#registration" id="registration"></a>
13+
All extensions are registered in the extension registry. The registry can be manipulated at any time, meaning you can add or remove extensions at runtime. You as a developer have the same possibilities as an Umbraco HQ developer, which means what HQ can do, you can do. This also means that you can change almost everything that is by default present in Umbraco.
1214

13-
The extension registry is a global registry that can be accessed and changed at any time while Backoffice is running.
15+
## [Introduction to a Extension Manifest](extension-manifest.md)
16+
An Extension Manifest is a declaration of what you want to register in the Umbraco backoffice. This articles handles the layout and requirements of an Extension Manifest.
1417

15-
## [Extension Manifest](extension-manifest.md)
16-
17-
Each Extension Manifest has to declare its type. This is used to determine where it hooks into the system. It also looks at what data is required to declare within it.
18-
19-
## [Replace, Exclude, or Unregister](replace-exclude-or-unregister.md)
18+
## [Register an extension](extension-registry.md)
19+
This article handles how to register an extension using an umbraco-package.json file.
2020

21+
## [Change an existing extension](replace-exclude-or-unregister.md)
2122
Once you understand how to declare your own, you may want to replace or remove existing ones.

16/umbraco-cms/customizing/extending-overview/extension-registry/extension-manifest.md

Lines changed: 26 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,77 +3,42 @@ description: Learn about the different methods for declaring an Extension Manife
33
---
44

55
# Extension Manifest
6+
This page explains what an Extension Manifest for a Umbraco backoffice extension is. It outlines the manifest structure, required fields, and optional features used across types.
67

7-
The Extension Manifest is the first step for any extension. It is the declaration of what you want to register.
8-
9-
In this section, you will find all the Extension Types provided by the Backoffice. [See all Extension Types here.](../extension-types/)
8+
## What is an Extension Manifest?
9+
Umbraco reads the extension manifest to register the extension in the Extension Registry.
10+
Each extension is of a certain type and this determines the required fields of the manifest and its available capabilities.
11+
An Extension Manifest declares a single backoffice extension along with its configuration.
1012

1113
## Extension Manifest Format
14+
Some extensions need extra assets, such as a JavaScript file with a Web Component.
1215

13-
An Extension Manifest can be written as a JavaScript or JSON Object.
14-
15-
The abilities of the extensions rely on the specific extension type. The Type sets the scene for what the extension can do and what it needs to be utilized. Some extension types can be made purely via the manifest. Other types require files, like a JavaScript file containing a Web Component.
16+
The abilities of the extensions rely on the specific extension type. The type sets the scene for what the extension can do and what it needs to be utilized. Some extension types can be made purely via the manifest, like a section or menu item. Other types require files, like a JavaScript file containing a Web Component, like a custom property editor.
17+
An Extension Manifest has a strict format where some properties are required and some depend on the Extension Type. An Extension Manifest can be written as a JavaScript or JSON object. You can learn more about this when [registering an extension](register-extensions.md).
18+
### Required Manifest properties
19+
A minimal Extension Manifest looks like this:
1620

17-
```typescript
21+
```json
1822
{
19-
type: '...',
20-
alias: 'my.customization',
21-
name: 'My customization'
22-
...
23-
};
23+
"type": "...",
24+
"alias": "my.customization",
25+
"name": "My customization"
26+
}
2427
```
2528

26-
The required fields of any Extension Manifest are:
27-
28-
* `type` — The type defines the purpose of the extension. It is used to determine where the extension will be used.
29-
* `alias` — This is a unique identifier for this manifest. Prefix it with something that makes your extension unique. Example: `mfc.Dashboard.Overview` .
30-
* `name` — This is a representational name of this manifest; It does not need to be unique, but this can be beneficial when debugging extensions. Example: `My Fictive Company Overview Dashboard` .
29+
These fields are all required and have the following meaning:
3130

32-
### Additional Manifest features
31+
* `type` — The type defines the purpose of the extension. Umbraco has many [extension types](../extension-types) available.
32+
* `alias` — Unique identifier for this manifest. Prefix it with something that makes your extension unique. For example: _FictiveCompany.MyProject.Dashboard.Overview_.
33+
* `name` — Representational name of this manifest. This name does not need to be unique, but this can be beneficial when debugging extensions. This name also shows up in the Extensions Insights in the backoffice of Umbraco. For example: _My Fictive Company Overview Dashboard_.
3334

35+
### Additional Manifest properties
3436
Most extension types support the use of the following generic features for their Manifest:
3537

36-
* `weight` - Define a weight to determine the importance or visual order of this extension. A higher weight gives a more prominent position.
37-
* `overwrites` - Define one or more Extension Aliases that this extension should replace. Notice it only omits the listed Extensions when this is rendered in the same spot. [Read more in Replace, Exclude or Unregister](replace-exclude-or-unregister.md).
38-
* `conditions` - Define one or more conditions that must be permitted for the extension to become available. [Extension Conditions](../extension-conditions.md).
39-
* `kind` - Define a kind-alias of which this manifest should be based upon. Kind acts like a preset for your manifest. [Extension Kinds](../extension-kind.md).
40-
41-
Many of the Extension Types require additional information declared as part of a `meta` field.
42-
43-
## Type intellisense
44-
45-
It is recommended to make use of the Type IntelliSense that we provide.
46-
47-
When writing your Manifest in TypeScript, you should use the Type `UmbExtensionManifest`. See the article on [Development Setup](../../development-flow/) to ensure you have Types correctly configured.
48-
49-
{% code title="manifests.ts" %}
50-
```typescript
51-
export const manifests: Array<UmbExtensionManifest> = [
52-
{
53-
type: '...',
54-
alias: 'my.customization',
55-
name: 'My customization'
56-
...
57-
}
58-
]
59-
```
60-
{% endcode %}
61-
62-
When writing the Umbraco Package Manifest, you can use the JSON Schema located in the root of your Umbraco project called `umbraco-package-schema.json` .
63-
64-
```json
65-
{
66-
"$schema": "../../umbraco-package-schema.json",
67-
"name": "My Customizations",
68-
"extensions": [
69-
{
70-
"type": "...",
71-
"alias": "my.customization",
72-
"name": "My customization"
73-
...
74-
},
75-
...
76-
]
77-
}
78-
```
38+
* `weight` - Define a weight to determine the importance or visual order of this extension. A higher weight gives a more prominent position. For instance, for a dashboard it determines its order between other dashboards.
39+
* `overwrites` - If you want to omit an existing extension, then define one or more Extension Aliases that this extension should omit when presented. Read more in [Replace, Exclude or Unregister extensions](replace-exclude-or-unregister.md).
40+
* `conditions` - Define one or more conditions that must pass for the extension to become available. For instance, don't show a section if you don't have the proper rights. Read more in [Extension Conditions](../extension-conditions.md).
41+
* `kind` - Some extension types can reference a predefined `kind`. By specifying a `kind`, the manifest inherits the `kind`'s properties. This allows for reuse of predefined settings. See [Extension Kind](../extension-kind.md).
42+
* `meta` - Many Extension Types require additional information declared as part of a `meta` field. It depends on the Extension Type what is required. For instance label and icon of a menu item.
7943

44+
For more information, see an overview of all possible [Extension Types](../extension-types/) and their requirements.

16/umbraco-cms/customizing/extending-overview/extension-registry/extension-registry.md

Lines changed: 0 additions & 75 deletions
This file was deleted.
Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
---
2+
description: >-
3+
You can bring new UI or additional features to the Backoffice by
4+
registering an Extension via an Extension Manifest.
5+
---
6+
7+
8+
# Register Extensions
9+
Making extensions to either an Umbraco project or a package requires an umbraco-package.json file. This JSON file is the starting point for any extension.
10+
11+
## Umbraco-package.json
12+
To get extensions registered in Umbraco, you need to have an `umbraco-package.json` file. This file must be located in or in a subfolder of either the `App_Plugins` folder or the `wwwroot` folder. It's recommended to place the file in `App_Plugins/#YOUR_EXTENSION_NAME#/umbraco-package.json`, or in `wwwroot/App_Plugins/#YOUR_EXTENSION_NAME#/umbraco-package.json` for packages and Razor Class Libraries. Umbraco scans for these files on boot and reads the [`Extension Manifests`](extension-manifest.md) that are present in the file to register the extensions.
13+
14+
{% hint style="info" %}
15+
Extensions can also work outside of the context of a package.
16+
{% endhint %}
17+
18+
{% code title="umbraco-package.json" %}
19+
```json
20+
{
21+
"name": "My Customizations",
22+
"extensions": [
23+
{
24+
"type": "...",
25+
"alias": "my.customization.extension1",
26+
"name": "My customization extension 1"
27+
...
28+
},
29+
...
30+
]
31+
}
32+
```
33+
{% endcode %}
34+
35+
36+
When writing the Umbraco Package Manifest, you can use the JSON schema located in the root of your Umbraco project. This file is called `umbraco-package-schema.json`.
37+
38+
{% code title="umbraco-package.json" %}
39+
```json
40+
{
41+
"$schema": "../../umbraco-package-schema.json",
42+
"name": "My Customizations",
43+
"extensions": [
44+
...
45+
]
46+
}
47+
```
48+
{% endcode %}
49+
50+
51+
There are two additional, optional properties that can be useful:
52+
53+
* `id` - a unique identifier of the package. If you are creating a NuGet package, use this value as the id.
54+
* `version` - the version of the package that is displayed in the backoffice in the overview of installed packages. This is also used for package migrations.
55+
56+
57+
This is an example of a full `umbraco-package.json` that registers two localization extensions:
58+
59+
```json
60+
{
61+
"$schema": "../../umbraco-package-schema.json",
62+
"id": "MyCustomizations",
63+
"name": "My Customizations",
64+
"version": "16.0.0",
65+
"extensions": [
66+
{
67+
"type": "localization",
68+
"alias": "MyCustomizations.Localize.EnUS",
69+
"name": "English",
70+
"meta": {
71+
"culture": "en"
72+
},
73+
"js": "/App_Plugins/MyCustomizations/localization/en.js"
74+
},
75+
{
76+
"type": "localization",
77+
"alias": "MyCustomizations.Localize.DkDk",
78+
"name": "Danish",
79+
"meta": {
80+
"culture": "dk"
81+
},
82+
"js": "/App_Plugins/MyCustomizations/localization/dk.js"
83+
}
84+
]
85+
}
86+
```
87+
88+
89+
## Advanced Registration
90+
### The Bundle Approach
91+
Instead of registering each manifest in the `umbraco-package.json`, you can have multiple manifests and build them into a bundle. You then register this bundle in a single `bundle` extension. In larger projects with a lot of extensions, this allows you to keep your `umbraco-package.json` file cleaner. Read more in the [bundle approach](../extension-types/bundle.md).
92+
93+
### The Entry Point Approach
94+
The Entry Point is an extension that executes a method on startup. You can use this for different tasks, such as performing initial configuration and registering other Extension Manifests. Read more in [the entry point approach](../extension-types/backoffice-entry-point.md).
95+
96+
### Registration with JavaScript on the Fly
97+
In some cases, extensions are not static and cannot be registered in the umbraco-package.json or in a bundle. Here are some examples of these cases:
98+
99+
- your manifest might be defined based on information from the server
100+
- you might generate the manifests server side based on data in the database.
101+
102+
In cases such as these, you need to register extensions on the fly.
103+
104+
105+
The following example shows how to register an Extension Manifest via JavaScript/TypeScript code:
106+
107+
```typescript
108+
109+
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
110+
111+
const manifest = {
112+
type: '...',
113+
// ...
114+
};
115+
116+
umbExtensionsRegistry.register(manifest);
117+
```
118+
119+
120+
When and where you execute this code depends on your situation. In many cases, it makes sense to execute this on boot, using the [entry point approach](../extension-types/backoffice-entry-point.md).

0 commit comments

Comments
 (0)