Skip to content

Commit cfbda12

Browse files
nielslyngsoegitbook-bot
authored andcommitted
GITBOOK-47: Extensions Introduction updates
1 parent 6a5bd27 commit cfbda12

File tree

7 files changed

+124
-73
lines changed

7 files changed

+124
-73
lines changed

15/umbraco-cms/SUMMARY.md

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -148,23 +148,8 @@
148148
* [Extend and customize the editing experience](customizing/overview.md)
149149
* [Project Bellissima](customizing/project-bellissima.md)
150150
* [Setup Your Development Environment](customizing/development-flow/README.md)
151+
* [TypeScript setup](customizing/development-flow/typescript-setup.md)
151152
* [Vite Package Setup](customizing/development-flow/vite-package-setup.md)
152-
* [Foundation](customizing/foundation/README.md)
153-
* [Working with Data](customizing/foundation/working-with-data/README.md)
154-
* [Repositories](customizing/foundation/working-with-data/repositories.md)
155-
* [Context API](customizing/foundation/working-with-data/context-api.md)
156-
* [Store](customizing/foundation/working-with-data/store.md)
157-
* [States](customizing/foundation/working-with-data/states.md)
158-
* [Contexts](customizing/foundation/contexts/README.md)
159-
* [Property Dataset Context](customizing/foundation/contexts/property-dataset-context.md)
160-
* [Umbraco Element](customizing/foundation/umbraco-element/README.md)
161-
* [Controllers](customizing/foundation/umbraco-element/controllers/README.md)
162-
* [Write your own controller](customizing/foundation/umbraco-element/controllers/write-your-own-controller.md)
163-
* [Sorting](customizing/foundation/sorting.md)
164-
* [Routes](customizing/foundation/routes.md)
165-
* [Icons](customizing/foundation/icons.md)
166-
* [Backoffice Localization](customizing/foundation/localization.md)
167-
* [Terminology](customizing/foundation/terminology.md)
168153
* [Extension Overview](customizing/extending-overview/README.md)
169154
* [Extension Registry](customizing/extending-overview/extension-registry/README.md)
170155
* [Extension Registration](customizing/extending-overview/extension-registry/extension-registry.md)
@@ -202,6 +187,22 @@
202187
* [Extension Kind](customizing/extending-overview/extension-kind.md)
203188
* [Extension Conditions](customizing/extending-overview/extension-conditions.md)
204189
* [Custom Extension types](customizing/extending-overview/custom-extension-type.md)
190+
* [Foundation](customizing/foundation/README.md)
191+
* [Working with Data](customizing/foundation/working-with-data/README.md)
192+
* [Repositories](customizing/foundation/working-with-data/repositories.md)
193+
* [Context API](customizing/foundation/working-with-data/context-api.md)
194+
* [Store](customizing/foundation/working-with-data/store.md)
195+
* [States](customizing/foundation/working-with-data/states.md)
196+
* [Contexts](customizing/foundation/contexts/README.md)
197+
* [Property Dataset Context](customizing/foundation/contexts/property-dataset-context.md)
198+
* [Umbraco Element](customizing/foundation/umbraco-element/README.md)
199+
* [Controllers](customizing/foundation/umbraco-element/controllers/README.md)
200+
* [Write your own controller](customizing/foundation/umbraco-element/controllers/write-your-own-controller.md)
201+
* [Sorting](customizing/foundation/sorting.md)
202+
* [Routes](customizing/foundation/routes.md)
203+
* [Icons](customizing/foundation/icons.md)
204+
* [Backoffice Localization](customizing/foundation/localization.md)
205+
* [Terminology](customizing/foundation/terminology.md)
205206
* [Sections & Trees](customizing/section-trees.md)
206207
* [Searchable Trees (ISearchableTree)](customizing/searchable-trees.md)
207208
* [Property Editors](customizing/property-editors/README.md)
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# TypeScript setup
2+
3+
Make sure to configure your TypeScript compiler so it includes the Global Types from the Backoffice. This enables you to utilize the declared Extension Types. If your project is using other Packages that provides their Extension Types then please list these as well.
4+
5+
In your `tsconfig.json` file. Add the array `types` inside `compilerOptions`, with the entry of `@umbraco-cms/backoffice/extension-types`:
6+
7+
```json
8+
{
9+
"compilerOptions": {
10+
...
11+
"types": [
12+
"@umbraco-cms/backoffice/extension-types"
13+
]
14+
}
15+
}
16+
```

15/umbraco-cms/customizing/extending-overview/README.md

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,16 @@ description: Getting started with backoffice setup and configurations
44

55
# Extension Overview
66

7-
The Backoffice architecture is based on Extensions, making different UI parts extendable. Enabling you to append, replace, or remove parts.
8-
9-
You are not limited to any specific tech stack. UI Elements are based on Web Components and the Backoffice APIs are based on native code.
7+
The Backoffice architecture is based on Extensions, making different parts of the UI extendable. Enabling you to append, replace, or remove parts.
108

119
<figure><img src="../../.gitbook/assets/backoffice-overview-customizations.png" alt=""><figcaption></figcaption></figure>
1210

1311
In this section you can find the common terms, concepts and guides used to extend the Umbraco backoffice.
1412

15-
{% hint style="warning" %}
16-
This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
17-
{% endhint %}
18-
1913
## [Extension Registry](extension-registry/)
2014

21-
An overview of concepts on how to work with extension registration when extending the backoffice.
15+
How to registere extensions or manipulate others.
2216

2317
## [Extension Types](extension-types/)
2418

25-
An overview of concepts on how to work with extension types when extending the backoffice.
19+
An overview of the different ways to append funcationtlity.

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

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
55
{% endhint %}
66

7-
Most of BackOffice is based on Extensions making it crucial to understand how to register your own extensions. This introduction will give you an outline of the abilities of the extension registry.
7+
The Extensions Registry is your entry to extend or customize the Backoffice. Therefor it is crucial to understand the abilities of the Extension Registry.
88

99
## [Extension Registration](extension-registry.md) <a href="#registration" id="registration"></a>
1010

@@ -14,24 +14,6 @@ The extension registry is a global registry that can be accessed and changed at
1414

1515
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.
1616

17-
## [Extension Types](../extension-types/)
17+
## [Replace, Exclude or Unregistere](./#replace-exclude-or-unregistere)
1818

19-
### [Extension Conditions](../extension-types/condition.md) <a href="#conditions" id="conditions"></a>
20-
21-
Most extension types support conditions. Defining conditions enables you to control when and where the extension is available.
22-
23-
### [Kinds](../extension-types/kind.md) <a href="#kinds" id="kinds"></a>
24-
25-
The kinds feature enables you to base your extension registration on a preset. A kind provides the base manifest that you like to extend.
26-
27-
```typescript
28-
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
29-
```
30-
31-
### [Entry Point](../extension-types/backoffice-entry-point.md) <a href="#entry-point" id="entry-point"></a>
32-
33-
The Entry Point manifest type is used to register an entry point for the backoffice. An entry point is a single JavaScript file that is loaded when the backoffice is initialized. This file can be used to do anything, this enables more complex logic to take place on startup.
34-
35-
### [Bundle](../extension-types/bundle.md) <a href="#package-manifest" id="package-manifest"></a>
36-
37-
The `bundle` extension type enables you to gather many extension manifests into one.
19+
Once you understand how to declare your own, you may want to replace or remove existing.

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

Lines changed: 52 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ description: Learn about the different methods for declaring an Extension Manife
44

55
# Extension Manifest
66

7-
The Extension Manifest is the entry point for any extension. It is the declaration of what you want to register.
7+
The Extension Manifest is the first step for any extension. It is the declaration of what you want to register.
88

9-
The content in this section describes all the extension types that the Backoffice supports. Find a list of the most common types in the [Extension Types](../extension-types/) article.
9+
In this section you will find all the Extension Types provided by the Backoffice. [See all Extension Types here.](../extension-types/)
1010

1111
### Extension Manifest Format
1212

@@ -48,31 +48,72 @@ Many of the Extension Types require additional information declared as part of a
4848

4949
### Registration
5050

51-
An Extension Manifest can be declared in multiple ways.
51+
An Extension Manifest can be registered in multiple ways.
5252

53-
The primary way is to declare it as part of the [Umbraco Package Manifest](../../umbraco-package.md).
53+
The primary registration should take part of the Umbraco Package Manifest.
5454

55-
Additionally, two Extension types can be used to register other extensions.
55+
You can choose to declare all Extensions in the Package Manifest, or use one of three Extension Types to registere more extensions.
5656

57-
A typical use case is to declare one main Extension Manifest as part of the [Umbraco Package Manifest](../../umbraco-package.md). Such main Extension Manifest would be using one of the following types:
57+
This enables you to locate your Manifests in files together with the implementation code and the ability to declare Extension Manifests in TypeScript.
58+
59+
A typical structure would be to declare one or more `Bundle` extensions in the Package Manifest. Each of the Bundles points to a `manifests.js` file which declares the Extensions of interest.
5860

5961
#### The `bundle` extension type
6062

61-
The Bundle extension type can be used for declaring multiple Extension Manifests with JavaScript in a single file.
63+
The Bundle extension type is used to declare multiple Extension Manifests from a single JavaScript file.
6264

63-
The Bundle declares a single JavaScript file that will be loaded at startup. All the Extension Manifests exported of this Module will be registered in the Extension Registry.
65+
The Bundle is loaded at startup. All the Extension Manifests exported of the JavaScript file will be registered.
6466

65-
Read more about the `bundle` extension type in the [Bundle](../../../extending/extending-overview/extension-registry/bundle.md) article.
67+
Read more about the `bundle` extension type in the [Bundle](../../../extending/extending-overview/extension-registry/bundle.md)[ ](../extension-types/bundle.md)article.
6668

6769
#### The `backofficeEntryPoint` extension type
6870

69-
Run any JavaScript code at startup. This can be used as an entry point for a package, registering more extensions or configuring your package.
71+
Run any JavaScript code when Backoffice startups, after the user is logged in. This can be used as an entry point for a package, registering more extensions or configuring your package.
7072

7173
There are many use cases. To name a few, it could be to load external libraries shared by all your extensions or load **global CSS files** for the whole application.
7274

7375
The entry point declares a single JavaScript file that will be loaded and run when the Backoffice starts.
7476

75-
Read more about the `backofficeEntryPoint` extension type in the [Entry Point](../../../extending/extending-overview/extension-registry/entry-point.md) article.
77+
Read more about the `backofficeEntryPoint` extension type in the [Entry Point](extension-manifest.md#the-backofficeentrypoint-extension-type) article.
78+
79+
#### The `appEntryPoint` extension type
80+
81+
Similar as `appEntryPoint` this runs as startup, the difference is that this runs before the user is logged in. Use this to initiate things before the user is logged in or to provide things for the Login screen.
82+
83+
## Type intellisense
84+
85+
It is recommend to make use of the Type intellisense that we provide.
86+
87+
When writing your Manifest in TypeScript you should use the Type `UmbExtensionManifest`, see the [TypeScript setup](../../development-flow/typescript-setup.md) article to make sure you have Types correctly configured.
88+
89+
<pre class="language-typescript"><code class="lang-typescript">export const manifests: Array&#x3C;UmbExtensionManifest> = [
90+
<strong> {
91+
</strong> type: '...',
92+
alias: 'my.customization',
93+
name: 'My customization'
94+
...
95+
},
96+
...
97+
];
98+
</code></pre>
99+
100+
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`
101+
102+
```json
103+
{
104+
"$schema": "../../umbraco-package-schema.json",
105+
"name": "Fast Track Customizations",
106+
"extensions": [
107+
{
108+
"type": "...",
109+
"alias": "my.customization",
110+
"name": "My customization"
111+
...
112+
},
113+
...
114+
]
115+
}
116+
```
76117

77118
### Registration via any JavaScript code
78119

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,31 @@
11
---
22
description: >-
3-
The declaration of an extension is done by an Extension Manifest, either
4-
registered via an Umbraco-Package Manifest or directly to the Extension
5-
Registry in JavaScript.
3+
The Extension types have some general features and some are provide
4+
specifically to a type.
65
---
76

87
# Extension Types
8+
9+
### General features <a href="#package-manifest" id="package-manifest"></a>
10+
11+
The general features of all Extension Types can be read as part of the [Extension Manifest Article](../extension-registry/extension-manifest.md)
12+
13+
### General Extension Type <a href="#package-manifest" id="package-manifest"></a>
14+
15+
The system provides Extension Types for certain needs and then there is a few that has a general prupose.
16+
17+
### [Bundle](bundle.md) <a href="#package-manifest" id="package-manifest"></a>
18+
19+
The `bundle` type enables you to gather many extension manifests into one. These will be registered at startup.
20+
21+
### [Entry Point](backoffice-entry-point.md) <a href="#entry-point" id="entry-point"></a>
22+
23+
The `Entry Point` type is used to execute the method of a JavaScript file when the backoffice is initialized. This file can be used to do anything, this enables more complex logic to take place on startup.
24+
25+
### [Extension Conditions](condition.md) <a href="#conditions" id="conditions"></a>
26+
27+
Most Extension Types support conditions. Defining conditions enables you to control when and where the Extension is available. This Type enables you to bring your own Conditions for the system.
28+
29+
### [Kinds](kind.md) <a href="#kinds" id="kinds"></a>
30+
31+
The Kind-type enables you to base your Extension registration on a preset manifest. A kind provides the base manifest that your manifest will be ammending. A typical Kind declaration would provide a default Element, making it posible for you to only configure the Element via properties of the Manifest.

15/umbraco-cms/customizing/extending-overview/extension-types/bundle.md

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
# Bundle
2-
3-
{% hint style="warning" %}
4-
This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
5-
{% endhint %}
1+
---
2+
description: Gather Extension Manifests in one file
3+
---
64

7-
The `bundle` extension type enables you to gather many extension manifests into one.
5+
# Bundle
86

9-
It points to a single JavaScript file that via JavaScript Modules, exports or re-exports Extension Manifests written in JavaScript.
7+
The `bundle` Extension Type points to a single JavaScript file that exports or re-exports Extension Manifests written in JavaScript.
108

11-
It can be used as the entry point for a package, or as a grouping for a set of manifests.
9+
It can be used as the entry point for a package, or as a grouping for a set of manifests. A Bundle can reference other Bundles.
1210

1311
## Use Bundle as an entry point for a package
1412

@@ -17,7 +15,6 @@ If you want to declare your manifests in JavaScript/TypeScript, the Bundle is a
1715
The following example shows an `umbraco-package.json` that refers to one bundle, which can then declare manifests.
1816

1917
{% code title="umbraco-package.json" %}
20-
2118
```json
2219
{
2320
"name": "My Package Name",
@@ -32,11 +29,9 @@ The following example shows an `umbraco-package.json` that refers to one bundle,
3229
]
3330
}
3431
```
35-
3632
{% endcode %}
3733

3834
{% code title="manifests.ts" %}
39-
4035
```typescript
4136
export const manifests: Array<UmbExtensionManifest> = [
4237
{
@@ -55,7 +50,6 @@ export const manifests: Array<UmbExtensionManifest> = [
5550
```
5651
{% endcode %}
5752

58-
5953
{% hint style="info" %}
6054
Ensure you have set up your `tsconfig.json` to include the extension-types as global types. Like this:
6155

@@ -69,4 +63,4 @@ Ensure you have set up your `tsconfig.json` to include the extension-types as gl
6963
}
7064
}
7165
```
72-
{% endhint %}
66+
{% endhint %}

0 commit comments

Comments
 (0)