You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A Kind is a preset configuration that extensions can inherit to ensure consistency and reduce redundancy. It defines a set of default properties or behaviors that extensions can adopt, making it easier to maintain and configure extensions that share similar functionality.
7
+
A Kind is a preset configuration that extensions inherit for consistency. It reduces redundancy by defining default properties. This simplifies maintenance for extensions sharing similar functionality.
8
8
9
-
A Kind is always linked to a specific extension type. Extensions using the same type and referencing a Kind automatically inherit its settings, ensuring uniformity across different extensions.
9
+
Every Kind links to a specific extension type. Extensions of that type referencing a Kind automatically inherit its settings. This ensures uniformity across different extensions.
10
10
11
11
## Benefits of Using a Kind
12
12
13
-
- Reduces redundancy – Common settings are defined once and reused across extensions.
14
-
- Ensures consistency – Extensions using the same Kind follow a standardized structure and behavior.
To register a Kind, use the same method as other extensions. The key properties that define a Kind registration are:
19
+
Register a Kind using the standard extension method. The key properties defining a Kind registration are:
20
20
21
-
-`type`: Always set to `kind`.
21
+
-`type`: Always set this to `kind`.
22
22
-`alias`: A unique identifier for the Kind.
23
-
-`matchType`: Specifies the extension type that the Kind applies to.
24
-
-`matchKind`: Defines the Kind alias, which extensions must reference.
25
-
-`manifest`: Contains the preset values that extensions will inherit.
23
+
-`matchType`: Specifies the applicable extension type.
24
+
-`matchKind`: Defines the Kind alias referenced by extensions.
25
+
-`manifest`: Contains preset values for inheritance.
26
26
27
27
### Example: Registering a Button Kind for Header Apps
28
28
29
-
The following example shows how to register a Button Kind for [**Header Apps**](../extension-types/header-apps.md). This kind provides a preset configuration for a button element that can be reused by other Header App extensions.
29
+
This example registers a Button Kind for [**Header Apps**](../extension-types/header-apps.md). It provides a preset button configuration for other extensions to reuse.
30
+
31
+
Properties:
32
+
33
+
-`type` is 'kind', registering it as a Kind extension.
34
+
-`matchType` is 'headerApp', targeting Header App extensions.
35
+
-`matchKind` is 'button', serving as the Kind's alias.
36
+
- The `manifest` holds default properties, like `elementName`, for inheritance.
-`type` is set to 'kind' to register it as a Kind extension.
49
-
-`matchType` is 'headerApp', specifying that this Kind is for Header App extensions.
50
-
-`matchKind` is 'button', which is the alias of the Kind.
51
-
- The `manifest` contains default properties like elementName that extensions using this Kind will inherit.
52
-
53
53
## Using the Kind in Other Extensions
54
54
55
-
To use the Kind in other extensions, the extension must reference it by setting the `type` and `kind` properties. The extension will automatically inherit the Kind's properties.
55
+
Use a Kind by setting the `type` and `kind` properties. The extension then automatically inherits the Kind's properties.
56
56
57
57
### Example: Header App Extension Using the Button Kind
58
58
@@ -70,18 +70,13 @@ const manifest = {
70
70
};
71
71
```
72
72
73
-
In this example, the Header App extension uses the `kind: 'button'`, meaning it inherits the `elementName` defined in the Button Kind. The extension can still add custom properties (like metadata in this case) to further customize the behavior or appearance.
73
+
Here, the extension uses `kind: 'button'` to inherit `elementName`. It also adds custom metadata to further customize behavior or appearance.
74
74
75
-
## Kind Example
75
+
## Custom Kind Example
76
76
77
-
Here’s an example of how to register and use the Button Kind in a Header App extension:
77
+
The code below demonstrates how to create a custom kind and then use it to create a header button app.
78
78
79
79
{% code title="kinds/manifests.ts" %}
80
-
81
-
{% hint style="info" %}
82
-
This example uses the dynamic extension registration approach. `umbExtensionsRegistry.register()` might be called from within an entrypoint lifecycle method like `onInit()`. For more information, see the [Backoffice Entry Point](./backoffice-entry-point.md) article.
This code registers the Button Kind, so other Header App extensions using `type: 'headerApp'` and `kind: 'customHeaderAppButton'` will inherit the preset `elementName: 'umb-header-app-button'`.
95
+
This code registers the Button Kind. Other Header App extensions using `type: 'headerApp'` and `kind: 'customHeaderAppButton'` will inherit the preset `elementName: 'umb-header-app-button'`.
101
96
102
-
Now another Header App extension can be created without defining `elementName`, as it will automatically inherit it from the Kind:
97
+
Another Header App extension can be created without defining `elementName`. It automatically inherits this property from the Kind.
103
98
104
-
{% code title="kinds/manifests.ts" %}
99
+
{% code title="header-button/manifests.ts" %}
105
100
```typescript
106
101
const manifest = {
107
102
type: 'headerApp',
@@ -117,4 +112,4 @@ const manifest = {
117
112
```
118
113
{% endcode %}
119
114
120
-
By referencing the Kind, the extension inherits shared properties like `elementName`, ensuring consistency and reducing redundancy across extensions. This method also makes it easier to update configurations across multiple extensions.
115
+
Referencing the Kind ensures consistency by inheriting shared properties. This also simplifies updating configurations across multiple extensions.
description: A kind extension provides the preset for other extensionsto use.
2
+
description: Create reusable, standardized configurations for extensions, helping to streamline development, ensure consistency, and reduce duplication.
3
3
---
4
4
5
5
# Kind
6
6
7
-
{% hint style="warning" %}
8
-
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.
9
-
{% endhint %}
7
+
A Kind is a preset configuration that extensions inherit for consistency. It reduces redundancy by defining default properties. This simplifies maintenance for extensions sharing similar functionality.
10
8
11
-
A Kind is a preset configuration that can be inherited by extensions to ensure consistency and reduce redundancy. It defines a set of default properties or behaviors that extensions can adopt, making it easier to maintain and configure extensions that share similar functionality.
12
-
13
-
A Kind is always linked to a specific extension type. Extensions using the same type and referencing a Kind automatically inherit its settings, ensuring uniformity across different extensions.
9
+
Every Kind links to a specific extension type. Extensions of that type referencing a Kind automatically inherit its settings. This ensures uniformity across different extensions.
14
10
15
11
## Benefits of Using a Kind
16
12
17
-
- Reduces redundancy – Common settings are defined once and reused across extensions.
18
-
- Ensures consistency – Extensions using the same Kind follow a standardized structure and behavior.
To register a Kind, use the same method as other extensions. The key properties that define a Kind registration are:
19
+
Register a Kind using the standard extension method. The key properties defining a Kind registration are:
24
20
25
-
-`type`: Always set to `kind`.
21
+
-`type`: Always set this to `kind`.
26
22
-`alias`: A unique identifier for the Kind.
27
-
-`matchType`: Specifies the extension type that the Kind applies to.
28
-
-`matchKind`: Defines the Kind alias, which extensions must reference.
29
-
-`manifest`: Contains the preset values that extensions will inherit.
23
+
-`matchType`: Specifies the applicable extension type.
24
+
-`matchKind`: Defines the Kind alias referenced by extensions.
25
+
-`manifest`: Contains preset values for inheritance.
30
26
31
27
### Example: Registering a Button Kind for Header Apps
32
28
33
-
The following example shows how to register a Button Kind for [**Header Apps**](../extension-types/header-apps.md). This kind provides a preset configuration for a button element that can be reused by other Header App extensions.
29
+
This example registers a Button Kind for [**Header Apps**](../extension-types/header-apps.md). It provides a preset button configuration for other extensions to reuse.
30
+
31
+
Properties:
32
+
33
+
-`type` is 'kind', registering it as a Kind extension.
34
+
-`matchType` is 'headerApp', targeting Header App extensions.
35
+
-`matchKind` is 'button', serving as the Kind's alias.
36
+
- The `manifest` holds default properties, like `elementName`, for inheritance.
alias: 'Umb.Kind.MyButtonKind', // Unique alias for the Kind
39
-
matchType: 'headerApp', // Applies to Header App extensions
40
-
matchKind: 'button', // Defines the Kind alias
43
+
alias: 'Umb.Kind.MyButtonKind',
44
+
matchType: 'headerApp',
45
+
matchKind: 'button',
41
46
manifest: {
42
47
// Add default properties for the 'button' Kind
43
48
elementName: 'umb-header-app-button',
44
49
},
45
50
};
46
51
```
47
52
48
-
In this example:
49
-
50
-
-`type` is set to 'kind' to register it as a Kind extension.
51
-
-`matchType` is 'headerApp', specifying that this Kind is for Header App extensions.
52
-
-`matchKind` is 'button', which is the alias of the Kind.
53
-
- The `manifest` contains default properties like elementName that extensions using this Kind will inherit.
54
-
55
53
## Using the Kind in Other Extensions
56
54
57
-
To use the Kind in other extensions, the extension must reference it by setting the `type` and `kind` properties. The extension will automatically inherit the Kind's properties.
55
+
Use a Kind by setting the `type` and `kind` properties. The extension then automatically inherits the Kind's properties.
58
56
59
57
### Example: Header App Extension Using the Button Kind
60
58
@@ -70,42 +68,39 @@ const manifest = {
70
68
href: '/some/path/to/open/when/clicked',
71
69
},
72
70
};
73
-
74
-
extensionRegistry.register(manifest);
75
71
```
76
72
77
-
In this example, the Header App extension uses the `kind: 'button'`, meaning it inherits the `elementName` defined in the Button Kind. The extension can still add custom properties (like metadata in this case) to further customize the behavior or appearance.
73
+
Here, the extension uses `kind: 'button'` to inherit `elementName`. It also adds custom metadata to further customize behavior or appearance.
78
74
79
-
## Kind Example
75
+
## Custom Kind Example
80
76
81
-
Here’s an example of how to register and use the Button Kind in a Header App extension:
77
+
The code below demonstrates how to create a custom kind and then use it to create a header button app.
alias: 'Umb.Kind.MyButtonKind', // Alias for the Kind
89
-
matchType: 'headerApp', // Extension type the Kind applies to
90
-
matchKind: 'button', // Defines the Kind alias
85
+
alias: 'Umb.Kind.MyButtonKind',
86
+
matchType: 'headerApp',
87
+
matchKind: 'customHeaderAppButton',
91
88
manifest: {
92
89
elementName: 'umb-header-app-button',
93
90
},
94
91
};
95
-
96
-
umbExtensionsRegistry.register(manifest);
97
92
```
93
+
{% endcode %}
98
94
99
-
This code registers the Button Kind, so other Header App extensions using `type: 'headerApp'` and `kind: 'button'` will inherit the preset `elementName: 'umb-header-app-button'`.
95
+
This code registers the Button Kind. Other Header App extensions using `type: 'headerApp'` and `kind: 'customHeaderAppButton'` will inherit the preset `elementName: 'umb-header-app-button'`.
100
96
101
-
Now, another Header App extension can be created without defining `elementName`, as it will automatically inherit it from the Kind:
97
+
Another Header App extension can be created without defining `elementName`. It automatically inherits this property from the Kind.
By referencing the Kind, the extension inherits shared properties like `elementName`, ensuring consistency and reducing redundancy across extensions. This method also makes it easier to update configurations across multiple extensions.
122
-
123
-
By using Kinds, you can create reusable, standardized configurations for extensions, helping to streamline development, ensure consistency, and reduce duplication. Understanding how to register and reference Kinds effectively will enhance the maintainability of your Umbraco extensions.
115
+
Referencing the Kind ensures consistency by inheriting shared properties. This also simplifies updating configurations across multiple extensions.
0 commit comments