Skip to content

Commit a161af8

Browse files
Luuk PetersLuuk Peters
authored andcommitted
First draft done
1 parent ee96a26 commit a161af8

File tree

4 files changed

+77
-38
lines changed

4 files changed

+77
-38
lines changed

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,17 @@ description: >-
77
# Extension Registry
88
The Umbraco backoffice is build with extendability 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, menu's, 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.
99

10-
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. You can see in the backoffice what extensions are registered by going to Settings > Extensions Insights.
10+
{% hint style="info" %}
11+
You can see in the backoffice what extensions are registered and to go to Settings > Extensions Insights.
12+
{% endhint %}
13+
14+
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.
1115

1216
## [Introduction to a Extension Manifest](extension-manifest.md)
13-
An Extension Manifest is a declaration on what you want to register in the Umbraco backoffice. This handles what an extension manifest looks like and what is required or not.
17+
An Extension Manifest is a declaration on what you want to register in the Umbraco backoffice. This articles handles what an extension manifest looks like and what is required or not.
1418

1519
## [Register an extension](extension-registry.md)
16-
The extension registry is a global registry that can be accessed and changed at any time while Backoffice is running.
20+
This article handles how to register an extension using an umbraco-package.json file.
1721

1822
## [Change an existing extension](replace-exclude-or-unregister.md)
1923
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: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@ description: Learn about the different methods for declaring an Extension Manife
33
---
44

55
# Extension Manifest
6-
This page explains how to author Extension Manifests for Umbraco backoffice extensions.
7-
It outlines the manifest structure, required fields, and optional features used across types.
6+
This page explains what an Extension Manifests for Umbraco backoffice extensions is. It outlines the manifest structure, required fields, and optional features used across types.
87

98
## What is an Extension Manifest?
109
An Extension Manifest declares a single backoffice extension and its configuration.
1110
Umbraco reads the manifest to register the extension in the Extension Registry.
12-
The chosen extension type determines required fields and available capabilities.
11+
Each extension is of a certain type and this determines the required fields of the manifest and its available capabilities.
1312
Some extensions need extra assets, like a JavaScript file with a Web Component.
1413

1514
## Extension Manifest Format
@@ -18,7 +17,7 @@ An Extension Manifest has a strict format where some properties are required and
1817
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.
1918

2019
### Required Manifest properties
21-
A minimal Extension Manifest looks like this (in JSON formatting):
20+
A minimal Extension Manifest looks like this:
2221

2322
```json
2423
{

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

Lines changed: 53 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,35 @@ description: >-
55
---
66

77
# Register extensions
8-
9-
Whether you're looking to make a single correction or a package, it is done via a file on the server that we call Umbraco Package JSON. This will be your starting point.
8+
Whether you're looking to make extensions in the context of an Umbraco project or a package, you always need a specific JSON file for this, the umbraco-package.json file. This is the starting point of any extension.
109

1110
## Umbraco-package.json
11+
To get extensions registered in Umbraco, you need to have an `umbraco-package.json` file. This file needs to be located in `wwwroot/App_Plugins/#YOUR_EXTENSION_NAME#`. 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.
1212

13-
In this file, you declare a name for the Package and declare one or more [`extension manifests`](extension-manifest.md).
13+
{% hint style="info" %}
14+
Even though the file is called umbraco-package.json and even though it will be displayed in the 'installed packages' overview in the backoffice, it does not mean that extensions can only work in the context of a package.
15+
{% endhint %}
1416

17+
{% code title="umbraco-package.json" %}
1518
```json
1619
{
1720
"name": "My Customizations",
1821
"extensions": [
1922
{
2023
"type": "...",
21-
"alias": "my.customization",
22-
"name": "My customization"
24+
"alias": "my.customization.extension1",
25+
"name": "My customization extension 1"
2326
...
2427
},
2528
...
2629
]
2730
}
2831
```
32+
{% endcode %}
2933

3034
When writing the Umbraco Package Manifest, you can use the JSON Schema located in the root of your Umbraco project. The file is called `umbraco-package-schema.json`
3135

36+
{% code title="umbraco-package.json" %}
3237
```json
3338
{
3439
"$schema": "../../umbraco-package-schema.json",
@@ -38,30 +43,55 @@ When writing the Umbraco Package Manifest, you can use the JSON Schema located i
3843
]
3944
}
4045
```
46+
{% endcode %}
4147

42-
## Declare Extensions in JavaScript/TypeScript
43-
44-
Are you looking for as much help as you can get, or to make a bigger project? Then it's recommended to spend the time setting up a TypeScript Project for your Customizations. [Read more about Development Setups here](../../development-flow/).
45-
46-
TypeScript gives IntelliSense for everything, acting as documentation.
47-
48-
The following example demonstrates how you can configure your `umbraco-package.json` file to point to a single JavaScript/TypeScript file that declares all your Manifests.
49-
50-
There are two approaches for declaring Manifests in JavaScript/TypeScript. Read more about each option:
48+
There are two additional properties that are not required, but can be useful:
5149

52-
### [The Bundle approach](../extension-types/bundle.md)
50+
* `id` - a unique identifier of the package. If you are creating a NuGet package, use that as the id.
51+
* `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.
5352

54-
The Bundle is an Extension that declares one or more Extension Manifests.
53+
This is an example of a full umbraco-package.json that registers two localization extensions:
5554

56-
### [The Entry Point approach](../extension-types/backoffice-entry-point.md)
55+
```json
56+
{
57+
"$schema": "../../umbraco-package-schema.json",
58+
"id": "MyCustomizations",
59+
"name": "My Customizations",
60+
"version": "16.0.0",
61+
"extensions": [
62+
{
63+
"type": "localization",
64+
"alias": "MyCustomizations.Localize.EnUS",
65+
"name": "English",
66+
"meta": {
67+
"culture": "en"
68+
},
69+
"js": "/App_Plugins/MyCustomizations/localization/en.js"
70+
},
71+
{
72+
"type": "localization",
73+
"alias": "MyCustomizations.Localize.NlNl",
74+
"name": "Danish",
75+
"meta": {
76+
"culture": "dk"
77+
},
78+
"js": "/App_Plugins/MyCustomizations/localization/dk.js"
79+
}
80+
]
81+
}
82+
```
5783

58-
The Entry Point is an Extension that executes a method on startup. This can be used for different tasks, such as performing initial configuration and registering other Extension Manifests.
84+
## Advanced registration
85+
### The bundle approach
86+
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 leaner. Read more in the [bundle approach](../extension-types/bundle.md).
5987

60-
### Registration via any JavaScript code
88+
### The entry point approach
89+
The Entry Point is an Extension that executes a method on startup. This can be used 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).
6190

62-
Once you have running code, you can declare an Extension Manifest at any given point.
91+
### Registration with JavaScript on the fly
92+
In some cases, extensions are not static and cannot be registered in the umbraco-package.json or in a bundle. For instance, your manifest gets defined based on information from the server. Or you can even generate the manifests server side based on data in the database. In that case, you need to register extensions on the fly.
6393

64-
It's not a recommended approach, but for some cases, you may like to register and unregister Extensions on the fly. The following example shows how to register an extension manifest via JavaScript/TypeScript code:
94+
The following example shows how to register an extension manifest via JavaScript/TypeScript code:
6595

6696
```typescript
6797
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
@@ -73,3 +103,5 @@ const manifest = {
73103

74104
umbExtensionsRegistry.register(extension);
75105
```
106+
107+
When and where to execute this code is up to you and depending on your situation. But in a lot of cases, it makes sense to execute this on boot, using the [the entry point approach](../extension-types/backoffice-entry-point.md).

16/umbraco-cms/customizing/extending-overview/extension-registry/replace-exclude-or-unregister.md

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@ description: >-
55
---
66

77
# Replace, Exclude or Unregister
8+
Besides adding extensions to Umbraco, sometimes you want to change what's already there. You can replace extensions with your own and exclude or unregister extensions.
89

910
## Replace
11+
You can have an extension that replaces another extension.
12+
This can be done by defining `overwrites` of your [manifest](extension-manifest.md) with one Extension-alias or an array of Extension-aliases that need to be replaced.
1013

11-
If you want to bring your own extension and remove an existing, define your Extension to replace one or more other Extensions.
1214

13-
This can be done by defining `overwrites` of your manifest with one Extension-alias or an array of Extension-aliases. [Read more about the Manifest Declaration here.](extension-manifest.md)
1415

15-
Overwrite a single extension:
16+
This example overrides the save and preview button with an external preview button (single overwrite):
1617

1718
```typescript
1819
const manifest = {
@@ -24,7 +25,7 @@ const manifest = {
2425
};
2526
```
2627

27-
Overwrite multiple extensions:
28+
This example overrides both the save and preview button as well as the save button with an external preview button (multiple overwrite):
2829

2930
```typescript
3031
const manifest = {
@@ -36,13 +37,14 @@ const manifest = {
3637
};
3738
```
3839

39-
Once your extension is displayed in the same spot as the one defined in `overwrites`, those will be hidden.
40-
4140
If your extension has conditions, then the overwrites will only be hidden when your extension is displayed. This means that the overwrites only have an effect if all the conditions are permitted and the extensions are displayed at the same spot.
4241

4342
## Exclude
43+
When you exclude an extension, the extension will never be displayed. This allows for permanently hiding for example a menu or a button. This does not unregister the extensions, but rather flags it as excluded. This also means that no-one else can register an extension with the same alias as the excluded extension.
4444

45-
To make an extension go away completely, you should exclude it. This approach secures that the extension will never be presented.
45+
{% hint style="warning" %}
46+
Currently, it's not possible to un-exclude extensions once excluded.
47+
{% endhint %}
4648

4749
The following JavaScript code hides the `Save and Preview` button from the Document Workspace.
4850

@@ -51,17 +53,19 @@ import { UmbExtensionRegistry } from '@umbraco-cms/backoffice/extension-api';
5153

5254
UmbExtensionRegistry.exclude('Umb.WorkspaceAction.Document.SaveAndPreview');
5355
```
56+
When and where to execute this code is up to you and depending on your situation. But in a lot of cases, it makes sense to execute this on boot, using the [the entry point approach](../extension-types/backoffice-entry-point.md).
5457

5558
## Unregister
59+
You can also choose to unregister an extension. It's recommended to only use this of on extension you registered yourself and have control over. Otherwise you might try to remove an extension before it's registered. A use case for this is if you temporarily registered an extension and you like to remove it again.
5660

57-
You can also choose to unregister an extension, this is only preferred if you registered the extension and are in control of the flow. If it's not your Extension please seek to use the `Overwrites` or `Exclude` feature.
61+
In other cases you can use the `overwrites` or `exclude` option. The difference with the `exclude` approach, is that unregistering removes the extension from the extension registry. This allows for re-registering extensions with the same alias.
5862

5963
```typescript
6064
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
6165

6266
umbExtensionsRegistry.unregister('My.WorkspaceAction.AutoFillWithUnicorns');
6367
```
6468

65-
This will not prevent the Extension from being registered again.
69+
When and where to execute this code is up to you and depending on your situation. But in a lot of cases, it makes sense to execute this on boot, using the [the entry point approach](../extension-types/backoffice-entry-point.md).
70+
6671

67-
A use case for this is if you temporarily registered an extension and you like to remove it again.

0 commit comments

Comments
 (0)