Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ Prefer other context types such as [Workspace Contexts](workspaces/workspace-con
Global Context extensions are registered using a `umbraco-package.json` manifest file.

**Key fields:**
- `type`: Must be `"globalContext"`, see: [ManifestGlobalContext](https://apidocs.umbraco.com/v16/ui-api/interfaces/packages_core_extension-registry.ManifestGlobalContext.html)
- `type`: Must be `"globalContext"`, see: [ManifestGlobalContext](https://apidocs.umbraco.com/v17/ui-api/interfaces/packages_core_extension-registry.ManifestGlobalContext.html)
- `alias`: A unique identifier for the context
- `name`: A human-readable name
- `api`: The path to the compiled JavaScript file
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ To render a tree in the Backoffice, you can use the `<umb-tree>` element. You ne

### Render a Custom Tree Item <a href="#render-a-custom-tree-item" id="render-a-custom-tree-item"></a>

The `<umb-tree />` element will render the tree items based on the registered tree item alias. The tree will be rendered using the [<umb-default-tree-item />](https://apidocs.umbraco.com/v16/ui-api/classes/packages_core_tree.UmbDefaultTreeItemElement.html) element by default. If you want to render a custom tree item, you need to register a tree item manifest. This manifest can then show a custom element for the tree item.
The `<umb-tree />` element will render the tree items based on the registered tree item alias. The tree will be rendered using the [<umb-default-tree-item />](https://apidocs.umbraco.com/v17/ui-api/classes/packages_core_tree.UmbDefaultTreeItemElement.html) element by default. If you want to render a custom tree item, you need to register a tree item manifest. This manifest can then show a custom element for the tree item.

#### **The Tree Item Manifest**

Expand All @@ -57,7 +57,7 @@ The `<umb-tree />` element will render the tree items based on the registered tr

#### The Tree Item Element <a href="#the-tree-item-element" id="the-tree-item-element"></a>

To create a custom tree item, you need to create a custom element. This element can optionally extend the [UmbTreeItemElementBase<T>](https://apidocs.umbraco.com/v16/ui-api/classes/packages_core_tree.UmbTreeItemElementBase.html) class. However, it can also be used as a standalone element if you prefer to implement the tree item logic yourself.
To create a custom tree item, you need to create a custom element. This element can optionally extend the [UmbTreeItemElementBase<T>](https://apidocs.umbraco.com/v17/ui-api/classes/packages_core_tree.UmbTreeItemElementBase.html) class. However, it can also be used as a standalone element if you prefer to implement the tree item logic yourself.

This example creates a custom tree item that extends the base class. The base class provides the necessary context and functionality for the tree item.

Expand All @@ -84,7 +84,7 @@ export default MyTreeItemElement;

#### The Tree Item Model <a href="#extending-the-tree-item-model" id="extending-the-tree-item-model"></a>

To define the data model for your tree item, you can create a model that extends the [UmbTreeItemModel](https://apidocs.umbraco.com/v16/ui-api/interfaces/packages_core_tree.UmbTreeItemModel.html). This model will be used to provide the data for your custom tree item.
To define the data model for your tree item, you can create a model that extends the [UmbTreeItemModel](https://apidocs.umbraco.com/v17/ui-api/interfaces/packages_core_tree.UmbTreeItemModel.html). This model will be used to provide the data for your custom tree item.

{% code title="my-tree-item.model.ts" %}
```typescript
Expand Down Expand Up @@ -112,7 +112,7 @@ To add data to the tree, you need to create a repository that will provide the d

#### Implementing the repository <a href="#implementing-the-repository" id="implementing-the-repository"></a>

The repository needs to be able to fetch data for the tree. You can implement the repository as a class that extends the [UmbTreeRepositoryBase](https://apidocs.umbraco.com/v16/ui-api/classes/packages_core_tree.UmbTreeRepositoryBase.html) class. This class provides the necessary methods to fetch data for the tree.
The repository needs to be able to fetch data for the tree. You can implement the repository as a class that extends the [UmbTreeRepositoryBase](https://apidocs.umbraco.com/v17/ui-api/classes/packages_core_tree.UmbTreeRepositoryBase.html) class. This class provides the necessary methods to fetch data for the tree.

{% code title="my-repository.ts" %}
```typescript
Expand All @@ -130,7 +130,7 @@ export class MyRepository extends UmbTreeRepositoryBase {

#### Implementing the data source <a href="#implementing-the-data-source" id="implementing-the-data-source"></a>

The data source is responsible for fetching the data for the tree. You can implement the data source as a class that implements the [UmbTreeDataSource](https://apidocs.umbraco.com/v16/ui-api/interfaces/packages_core_tree.UmbTreeDataSource.html) interface.
The data source is responsible for fetching the data for the tree. You can implement the data source as a class that implements the [UmbTreeDataSource](https://apidocs.umbraco.com/v17/ui-api/interfaces/packages_core_tree.UmbTreeDataSource.html) interface.

{% code title="my-tree-data-source.ts" %}
```typescript
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -113,13 +113,13 @@ You can read more about this concept in the [API Users](../../../fundamentals/da

The Fetch API can also be used to make requests to the Management API using a Backoffice token. This is useful for making requests from custom components that are running in the Backoffice. The concept is similar to the API Users, but the Backoffice token represents the current user in the Backoffice. You will share the access policies of the current user, so you can use the token to make requests on behalf of the current user.

To use the Backoffice access token, you will have to consume the **UMB\_AUTH\_CONTEXT** context. This context is only available in the Backoffice and includes tools to hook on to the authentication process. You can use the [getOpenApiConfiguration](https://apidocs.umbraco.com/v16/ui-api/classes/packages_core_auth.UmbAuthContext.html#getopenapiconfiguration) method to get a configuration object that includes a few useful properties:
To use the Backoffice access token, you will have to consume the **UMB_AUTH_CONTEXT** context. This context is only available in the Backoffice and includes tools to hook on to the authentication process. You can use the [getOpenApiConfiguration](https://apidocs.umbraco.com/v17/ui-api/classes/packages_core_auth.UmbAuthContext.html#getopenapiconfiguration) method to get a configuration object that includes a few useful properties:

* `base`: The base URL of the Management API.
* `credentials`: The credentials to use for the request.
* `token()`: A function that returns the current access token.

Read more about this in the [UmbOpenApiConfiguration](https://apidocs.umbraco.com/v16/ui-api/interfaces/packages_core_auth.UmbOpenApiConfiguration.html) interface.
Read more about this in the [UmbOpenApiConfiguration](https://apidocs.umbraco.com/v17/ui-api/interfaces/packages_core_auth.UmbOpenApiConfiguration.html) interface.

It is rather tiresome to manually add the token to each request. Therefore, you can wrap the Fetch API in a custom function that automatically adds the token to the request headers. This way, you can use the Fetch API without worrying about adding the token manually:

Expand Down Expand Up @@ -154,7 +154,7 @@ The above example illustrates the process of making a request to the Management

## Executing the request

Regardless of method, you can execute the fetch requests through Umbraco's [tryExecute](https://apidocs.umbraco.com/v16/ui-api/classes/packages_core_auth.UmbAuthContext.html#tryexecute) function. This function will handle any errors that occur during the request and will automatically refresh the token if it is expired. If the session is expired, the function will also make sure the user logs in again.
Regardless of method, you can execute the fetch requests through Umbraco's [tryExecute](https://apidocs.umbraco.com/v17/ui-api/classes/packages_core_auth.UmbAuthContext.html#tryexecute) function. This function will handle any errors that occur during the request and will automatically refresh the token if it is expired. If the session is expired, the function will also make sure the user logs in again.

**Example:**

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,6 @@ Read more about generating your own client here:
## Further reading

* [@hey-api/openapi-ts](https://heyapi.dev/openapi-ts/get-started)
* [@umbraco-cms/backoffice/http-client](https://apidocs.umbraco.com/v16/ui-api/modules/packages_core_http-client.html)
* [@umbraco-cms/backoffice/http-client](https://apidocs.umbraco.com/v17/ui-api/modules/packages_core_http-client.html)
* [Using the Fetch API](fetch-api.md)
* [Creating a Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point.md)
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ description:: Learn how to execute requests in the Backoffice.
Requests can be made using the Fetch API or the Umbraco HTTP client. The Backoffice also provides a `tryExecute` function that you can use to execute requests. This function handles any errors that occur during the request and automatically refreshes the token if it has expired. If the session has expired, it prompts the user to log in again.

{% hint style="info" %}
You can read the technical documentation for the `tryExecute` function in the [UI API Documentation](https://apidocs.umbraco.com/v16/ui-api/functions/packages_core_resources.tryExecute.html) class.
You can read the technical documentation for the `tryExecute` function in the [UI API Documentation](https://apidocs.umbraco.com/v17/ui-api/functions/packages_core_resources.tryExecute.html) class.
{% endhint %}

## Using the Umbraco HTTP Client
Expand All @@ -29,7 +29,7 @@ if (error) {
}
```

The `tryExecute` function takes the context of the current class or element as the first argument and the request as the second argument. Therefore, the above example can be used in any class or element that extends from either the [UmbController](https://apidocs.umbraco.com/v16/ui-api/interfaces/libs_controller-api.UmbController.html) or [UmbLitElement](https://apidocs.umbraco.com/v16/ui-api/classes/packages_core_lit-element.UmbLitElement.html) classes.
The `tryExecute` function takes the context of the current class or element as the first argument and the request as the second argument. Therefore, the above example can be used in any class or element that extends from either the [UmbController](https://apidocs.umbraco.com/v17/ui-api/interfaces/libs_controller-api.UmbController.html) or [UmbLitElement](https://apidocs.umbraco.com/v17/ui-api/classes/packages_core_lit-element.UmbLitElement.html) classes.

{% hint style="info" %}
The above example requires a host element illustrated by the use of `this`. This is typically a custom element that extends the `UmbLitElement` class.
Expand Down
4 changes: 2 additions & 2 deletions 17/umbraco-cms/customizing/foundation/localization.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ The following example shows how you can display localized text with the `umb-loc
```

{% hint style="info" %}
You can have a look and try out the element in the [UI API Documentation](https://apidocs.umbraco.com/v15/ui/?path=/docs/api-localization-umblocalizeelement--docs).
You can have a look and try out the element in the [UI API Documentation](https://apidocs.umbraco.com/v17/ui/?path=/docs/guides-localization-umblocalizeelement--docs).
{% endhint %}

### **Localize Controller**
Expand Down Expand Up @@ -106,7 +106,7 @@ export default {
```

{% hint style="info" %}
You can try out the arguments feature in the [UI API Documentation](https://apidocs.umbraco.com/v15/ui/?path=/story/api-localization-umblocalizeelement--with-arguments).
You can try out the arguments feature in the [UI API Documentation](https://apidocs.umbraco.com/v17/ui/?path=/story/guides-localization-umblocalizeelement--with-arguments).
{% endhint %}

**Using the Localize Element**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ interface UmbPropertyEditorUiElement extends HTMLElement {
{% hint style="info" %}
The `UmbPropertyEditorUiElement` interface ensures that your Element has the necessary properties and methods to be used as a Property Editor UI Element.

See the [UI API documentation](https://apidocs.umbraco.com/v15/ui-api/interfaces/packages_core_property-editor.UmbPropertyEditorUiElement.html) for more information.
See the [UI API documentation](https://apidocs.umbraco.com/v17/ui-api/interfaces/packages_core_property-editor.UmbPropertyEditorUiElement.html) for more information.
{% endhint %}

**Example with LitElement**
Expand Down
2 changes: 1 addition & 1 deletion 17/umbraco-cms/customizing/ui-library.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ With Umbraco 14 the Umbraco backoffice has been rebuilt using Web Components and

With the UI API, you get a set of collections related to modules export, interfaces, and hierarchy. This includes code examples and much more that you can use to extend the backoffice.

<table data-card-size="large" data-view="cards" data-full-width="false"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="https://apidocs.umbraco.com/v15/ui/"><strong>Backoffice UI Library</strong></a></td><td>See, test, and get a feel for the familiar backoffice components built using the new UI components.</td><td><a href="https://apidocs.umbraco.com/v15/ui/">https://apidocs.umbraco.com/v15/ui/</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Fundamentals_Backoffice (1).png">Documentations Icons_Umbraco_CMS_Fundamentals_Backoffice (1).png</a></td></tr><tr><td><a href="https://apidocs.umbraco.com/v15/ui-api/"><strong>Backoffice UI API</strong></a></td><td>Find reference documentation about all types and contexts in the Backoffice.</td><td><a href="https://apidocs.umbraco.com/v15/ui-api/">https://apidocs.umbraco.com/v15/ui-api/</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Fundamentals_Code.png">Documentations Icons_Umbraco_CMS_Fundamentals_Code.png</a></td></tr></tbody></table>
<table data-card-size="large" data-view="cards" data-full-width="false"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><a href="https://apidocs.umbraco.com/v17/ui/"><strong>Backoffice UI Library</strong></a></td><td>See, test, and get a feel for the familiar backoffice components built using the new UI components.</td><td><a href="https://apidocs.umbraco.com/v17/ui/">https://apidocs.umbraco.com/v17/ui/</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Fundamentals_Backoffice (1).png">Documentations Icons_Umbraco_CMS_Fundamentals_Backoffice (1).png</a></td></tr><tr><td><a href="https://apidocs.umbraco.com/v17/ui-api/"><strong>Backoffice UI API</strong></a></td><td>Find reference documentation about all types and contexts in the Backoffice.</td><td><a href="https://apidocs.umbraco.com/v17/ui-api/">https://apidocs.umbraco.com/v17/ui-api/</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Fundamentals_Code.png">Documentations Icons_Umbraco_CMS_Fundamentals_Code.png</a></td></tr></tbody></table>

## UI Library Storybook

Expand Down
2 changes: 1 addition & 1 deletion 17/umbraco-cms/customizing/umbraco-package.md
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ You may need to restart the application, if you add a new file or modify an exis
If the runtime mode is `Production`, the manifests are cached for 30 days or until the application is restarted to improve performance. In other runtime modes, the cache is cleared every 10 seconds.

{% hint style="info" %}
You can implement the interface [IPackageManifestReader](https://apidocs.umbraco.com/v15/csharp/api/Umbraco.Cms.Infrastructure.Manifest.IPackageManifestReader.html) to provide your own package manifest reader. This can be useful if you want to load package manifests from a different location or source.
You can implement the interface [IPackageManifestReader](https://apidocs.umbraco.com/v17/csharp/api/Umbraco.Cms.Infrastructure.Manifest.IPackageManifestReader.html) to provide your own package manifest reader. This can be useful if you want to load package manifests from a different location or source.
{% endhint %}

## Razor Class Library
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Extension authors can customize the dialog with configuration options such as he
- `confirmLabel` - (Optional) The label of the confirmation button.
- `cancelLabel` - (Optional) The label of the cancel button.

To see all properties of the `UMB_CONFIRM_MODAL` token, see the [API reference](https://apidocs.umbraco.com/v16/ui-api/interfaces/packages_core_modal.UmbConfirmModalData.html).
To see all properties of the `UMB_CONFIRM_MODAL` token, see the [API reference](https://apidocs.umbraco.com/v17/ui-api/interfaces/packages_core_modal.UmbConfirmModalData.html).

The `onSubmit` method returns a promise that resolves when the user confirms the dialog, and rejects when the user cancels the dialog.

Expand Down
4 changes: 2 additions & 2 deletions 17/umbraco-cms/extending/embedded-media-providers.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@ The list of available default Embed Providers in an Umbraco install is as follow
* Hulu
* Giphy

You can see the details of these, and any recent editions in the C# developer reference for [Umbraco.Core.Media.EmbedProviders](https://apidocs.umbraco.com/v15/csharp/api/Umbraco.Cms.Core.Media.EmbedProviders.html).
You can see the details of these, and any recent editions in the C# developer reference for [Umbraco.Core.Media.EmbedProviders](https://apidocs.umbraco.com/v17/csharp/api/Umbraco.Cms.Core.Media.EmbedProviders.html).

## Configuring a new provider

Create a new provider by creating a C# class that implements the `IEmbedProvider` interface. Umbraco provides a convenient `OEmbedProviderBase` class as a starting point. You can read more about this class in the [Api documentation](https://apidocs.umbraco.com/v15/csharp/api/Umbraco.Cms.Core.Media.EmbedProviders.OEmbedProviderBase.html?q=OEmbedProviderBase).
Create a new provider by creating a C# class that implements the `IEmbedProvider` interface. Umbraco provides a convenient `OEmbedProviderBase` class as a starting point. You can read more about this class in the [Api documentation](https://apidocs.umbraco.com/v17/csharp/api/Umbraco.Cms.Core.Media.EmbedProviders.OEmbedProviderBase.html?q=OEmbedProviderBase).

### Adding a new OEmbed Provider Example

Expand Down
2 changes: 1 addition & 1 deletion 17/umbraco-cms/extending/health-check/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ description: "Health Checks are used to determine the state of your Umbraco proj

The Settings section of the Umbraco backoffice holds a dashboard named "Health Check". It is a handy list of checks to see if your Umbraco installation is configured according to best practices. It's possible to add your custom-built health checks.

For inspiration when building your checks you can look at the checks we've [built into Umbraco](https://github.com/umbraco/Umbraco-CMS/tree/v10/dev/src/Umbraco.Core/HealthChecks/Checks), as well as our [guides](guides/). Some examples will follow in this document.
For inspiration when building your checks you can look at the checks we've [built into Umbraco](https://github.com/umbraco/Umbraco-CMS/tree/v16/dev/src/Umbraco.Core/HealthChecks/Checks), as well as our [guides](guides/). Some examples will follow in this document.

## Built-in checks

Expand Down
2 changes: 1 addition & 1 deletion 17/umbraco-cms/fundamentals/backoffice/login.md
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ The following CSS properties are available for customization:
| `--umb-login-curves-color` | The color of the curves | `#f5c1bc` |
| `--umb-login-curves-display` | The display of the curves | `inline` |

The CSS custom properties may change in future versions of Umbraco. You can always find the latest values in the [login layout element](https://github.com/umbraco/Umbraco-CMS/blob/v14/dev/src/Umbraco.Web.UI.Login/src/components/layouts/auth-layout.element.ts) in the Umbraco CMS GitHub repository.
The CSS custom properties may change in future versions of Umbraco. You can always find the latest values in the [login layout element](https://github.com/umbraco/Umbraco-CMS/blob/v16/dev/src/Umbraco.Web.UI.Login/src/components/layouts/auth-layout.element.ts) in the Umbraco CMS GitHub repository.

## The Time Out Screen

Expand Down
Loading
Loading