diff --git a/14/umbraco-cms/README.md b/14/umbraco-cms/README.md index 3036bdde22c..6fa048e997f 100644 --- a/14/umbraco-cms/README.md +++ b/14/umbraco-cms/README.md @@ -12,7 +12,7 @@ The new Backoffice for Umbraco CMS is scheduled for release along with Umbraco 1 ### Getting started with the Umbraco 14 -
Getting StartedAre you excited to discover the new Backoffice for Umbraco CMS? Head over to the Setup section to learn how to install and configure v14 Umbraco installation.setupDocumentations Icons_Umbraco_CMS_Install (1).png
Customizing the BackofficeWant to learn how to set up a package and implement the Backoffice extensions? Let's get started!customize-backoffice.mdDocumentations Icons_Umbraco_CMS_Fundamentals_Backoffice (1) (2).png
TutorialsOur step-by-step guides will take you through creating a simple website, creating a custom dashboard todeep diving into the world of Property Editors. Don't wait, start exploring now.broken-referenceDocumentations Icons_Umbraco_CMS_Tutorials_the_Starter_Kit (1).png
+
Getting StartedAre you excited to discover the new Backoffice for Umbraco CMS? Head over to the Setup section to learn how to install and configure v14 Umbraco installation.setupDocumentations Icons_Umbraco_CMS_Install (1).png
Customizing the BackofficeWant to learn how to set up a package and implement the Backoffice extensions? Let's get started!customize-backoffice.mdDocumentations Icons_Umbraco_CMS_Fundamentals_Backoffice (1) (2).png
TutorialsOur step-by-step guides will take you through creating a basic website, creating a custom dashboard todeep diving into the world of Property Editors. Don't wait, start exploring now.broken-referenceDocumentations Icons_Umbraco_CMS_Tutorials_the_Starter_Kit (1).png
### Recommended starting points @@ -26,12 +26,12 @@ If you have previously installed the Nightly or pre-release feeds versions you m Then restore your package with `dotnet restore` and run the solution again with `dotnet run`. {% endhint %} -2. [Setup your development Environment](extending-backoffice/development-flow/) followed by [Vite package setup](extending-backoffice/development-flow/vite-package-setup.md) +2. [Setup your development Environment](extending/customize-backoffice/development-flow/README.md) followed by [Vite package setup](extending/customize-backoffice/development-flow/vite-package-setup.md) 3. [Creating your first extension](tutorials/creating-a-basic-website/creating-your-first-template-and-content-node.md) 4. [Creating a custom dashboard](tutorials/creating-a-custom-dashboard/) 5. [Creating a property editor](tutorials/creating-a-property-editor/) -6. [Terminology](extending-backoffice/customize-backoffice.md#terminology) -7. [UI Documentation](extending-backoffice/ui-documentation.md) +6. [Terminology](extending/customize-backoffice/README.md#terminology) +7. [UI Documentation](extending/ui-documentation.md) 8. [Creating your own api](fundamentals/backoffice/create-your-own-api.md) {% hint style="info" %} @@ -58,8 +58,8 @@ The list will be updated as more articles have been created and updated. * **BACKOFFICE**: * [Document Blueprints](fundamentals/backoffice/document-blueprints.md) (previously known as Content Templates) * [Create a custom API](fundamentals/backoffice/create-your-own-api.md) -* **EXTENDING BACKOFFICE (new section)** - * All articles under it are mostly new +* **EXTENDING** + * More or less all articles are new. * **REFERENCE**: * [Two-factor Authentication](reference/security/two-factor-authentication.md) * [Management API](reference/management-api/) (new article) diff --git a/14/umbraco-cms/SUMMARY.md b/14/umbraco-cms/SUMMARY.md index 5c79c9208d5..e19ecec1249 100644 --- a/14/umbraco-cms/SUMMARY.md +++ b/14/umbraco-cms/SUMMARY.md @@ -21,56 +21,60 @@ * [Document Blueprints](fundamentals/backoffice/document-blueprints.md) * [Creating a custom API](fundamentals/backoffice/create-your-own-api.md) -## Extending Backoffice +## Extending -* [Customize Backoffice](extending-backoffice/customize-backoffice.md) -* [Setup Your Development Environment](extending-backoffice/development-flow/README.md) - * [Vite Package Setup](extending-backoffice/development-flow/vite-package-setup.md) - * [Umbraco Package Manifest](extending-backoffice/development-flow/package-manifest.md) -* [Working with Data](extending-backoffice/working-with-data/README.md) - * [Repositories](extending-backoffice/working-with-data/repositories.md) - * [Context API](extending-backoffice/working-with-data/context-api.md) - * [Store](extending-backoffice/working-with-data/store.md) - * [States](extending-backoffice/working-with-data/states.md) -* [Contexts](extending-backoffice/contexts/README.md) - * [Global Context](extending-backoffice/contexts/global-context.md) - * [Property Dataset Context](extending-backoffice/contexts/variant-context.md) -* [Umbraco Element](extending-backoffice/umbraco-element/README.md) - * [Controllers](extending-backoffice/umbraco-element/controllers/README.md) - * [Write your own Controller](extending-backoffice/umbraco-element/controllers/write-your-own-controller.md) -* [Extension Registry](extending-backoffice/extension-registry/README.md) - * [Extension Registration](extending-backoffice/extension-registry/extension-registration.md) - * [Extension Conditions](extending-backoffice/extension-registry/extension-conditions.md) - * [Kind](extending-backoffice/extension-registry/kind.md) - * [Entry Point](extending-backoffice/extension-registry/entry-point.md) - * [Bundle](extending-backoffice/extension-registry/bundle.md) -* [Extension Types](extending-backoffice/extension-types/README.md) - * [Dashboard](extending-backoffice/extension-types/dashboards.md) - * [Property Editors](extending-backoffice/extension-types/property-editors/README.md) - * [Property Editor Schema](extending-backoffice/extension-types/property-editors/property-editor-schema.md) - * [Property Editor UI](extending-backoffice/extension-types/property-editors/property-editor-ui.md) - * [Entity Actions](extending-backoffice/extension-types/entity-actions/README.md) - * [Entity Bulk Actions](extending-backoffice/extension-types/entity-actions/entity-bulk-actions.md) - * [Workspace](extending-backoffice/extension-types/workspaces/README.md) - * [Workspace Context](extending-backoffice/extension-types/workspaces/workspace-context.md) - * [Workspace Views](extending-backoffice/extension-types/workspaces/workspace-editor-views.md) - * [Workspace Actions](extending-backoffice/extension-types/workspaces/workspace-editor-actions.md) - * [Section](extending-backoffice/extension-types/sections/README.md) - * [Section View](extending-backoffice/extension-types/sections/section-view.md) - * [Section Sidebar](extending-backoffice/extension-types/sections/section-sidebar.md) - * [Menu](extending-backoffice/extension-types/menu/README.md) - * [Trees](extending-backoffice/extension-types/menu/trees.md) - * [Header Apps](extending-backoffice/extension-types/header-apps.md) - * [Modals](extending-backoffice/extension-types/modals/README.md) - * [Confirm Dialog](extending-backoffice/extension-types/modals/confirm-dialog.md) - * [Custom Modals](extending-backoffice/extension-types/modals/custom-modals.md) - * [Route Registration](extending-backoffice/extension-types/modals/route-registration.md) -* [Sorting](extending-backoffice/sorting.md) -* [UI Documentation](extending-backoffice/ui-documentation.md) -* [Localization](extending-backoffice/localization/README.md) - * [.NET Localization](extending-backoffice/localization/net-localization.md) - * [UI Localization](extending-backoffice/localization/ui-localization.md) -* [Routes](extending-backoffice/routes.md) +* [Customize Backoffice](extending/customize-backoffice/README.md) + * [Setup Your Development Environment](extending/customize-backoffice/development-flow/README.md) + * [Vite Package Setup](extending/customize-backoffice/development-flow/vite-package-setup.md) +* [Backoffice Setup](extending/backoffice-setup/README.md) + * [Working with Data](extending/backoffice-setup/working-with-data/README.md) + * [Repositories](extending/backoffice-setup/working-with-data/repositories.md) + * [Context API](extending/backoffice-setup/working-with-data/context-api.md) + * [Store](extending/backoffice-setup/working-with-data/store.md) + * [States](extending/backoffice-setup/working-with-data/states.md) + * [Contexts](extending/backoffice-setup/contexts/README.md) + * [Global Context](extending/backoffice-setup/contexts/global-context.md) + * [Property Dataset Context](extending/backoffice-setup/contexts/variant-context.md) + * [Umbraco Element](extending/backoffice-setup/umbraco-element/README.md) + * [Controllers](extending/backoffice-setup/umbraco-element/controllers/README.md) + * [Write your own Controller](extending/backoffice-setup/umbraco-element/controllers/write-your-own-controller.md) + * [Extension Registry](extending/backoffice-setup/extension-registry/README.md) + * [Extension Registration](extending/backoffice-setup/extension-registry/extension-registration.md) + * [Extension Conditions](extending/backoffice-setup/extension-registry/extension-conditions.md) + * [Kind](extending/backoffice-setup/extension-registry/kind.md) + * [Entry Point](extending/backoffice-setup/extension-registry/entry-point.md) + * [Bundle](extending/backoffice-setup/extension-registry/bundle.md) + * [Extension Types](extending/backoffice-setup/extension-types/README.md) + * [Menu](extending/backoffice-setup/extension-types/menu/README.md) + * [Header Apps](extending/backoffice-setup/extension-types/header-apps.md) + * [Modals](extending/backoffice-setup/extension-types/modals/README.md) + * [Confirm Dialog](extending/backoffice-setup/extension-types/modals/confirm-dialog.md) + * [Custom Modals](extending/backoffice-setup/extension-types/modals/custom-modals.md) + * [Route Registration](extending/backoffice-setup/extension-types/modals/route-registration.md) + * [Sorting](extending/backoffice-setup/sorting.md) + * [Routes](extending/backoffice-setup/routes.md) +* [Dashboards](extending/dashboards.md) +* [Sections & Trees](extending/section-trees/README.md) + * [Sections](extending/section-trees/sections/README.md) + * [Section View](extending/section-trees/sections/section-view.md) + * [Section Sidebar](extending/section-trees/sections/section-sidebar.md) + * [Trees](extending/section-trees/trees/README.md) + * [Entity Actions](extending/section-trees/trees/entity-actions.md) + * [Entity Bulk Actions](extending/section-trees/trees/entity-bulk-actions.md) + * [Searchable Trees (ISearchableTree)](extending/section-trees/searchable-trees.md) +* [Property Editors](extending/property-editors/README.md) + * [Property Editors Composition](extending/property-editors/composition/README.md) + * [Property Editor Schema](extending/property-editors/composition/property-editor-schema.md) + * [Property Editor UI](extending/property-editors/composition/property-editor-ui.md) + * [Package Manifest](extending/property-editors/package-manifest.md) +* [Language Files & Localization](extending/language-files/README.md) + * [.NET Localization](extending/language-files/net-localization.md) + * [UI Localization](extending/language-files/ui-localization.md) +* [Workspace](extending/workspaces/README.md) + * [Workspace Context](extending/workspaces/workspace-context.md) + * [Workspace Views](extending/workspaces/workspace-editor-views.md) + * [Workspace Actions](extending/workspaces/workspace-editor-actions.md) +* [UI Documentation](extending/ui-documentation.md) ## Reference diff --git a/14/umbraco-cms/extending-backoffice/extension-types/menu/README.md b/14/umbraco-cms/extending-backoffice/extension-types/menu/README.md deleted file mode 100644 index 20aef3aefb5..00000000000 --- a/14/umbraco-cms/extending-backoffice/extension-types/menu/README.md +++ /dev/null @@ -1,80 +0,0 @@ -# Menu - -{% hint style="warning" %} -This page is a work in progress. It will be updated as the software evolves. -{% endhint %} - -## Menu - -

Menu

- -```typescript -{ - "type": "menu", - "alias": "My.Menu", - "name": "My Menu" -} -``` - -### Menu Item - -

Menu Item

- -```typescript -{ - "type": "menuItem", - "alias": "My.MenuItem", - "name": "My Menu Item", - "meta": { - "label": "My Menu Item", - "menus": ["My.Menu"] - } -} -``` - -### **Tree Menu Item** - -// TODO adds docs when we have extension kinds - -#### **Manifest** - -```typescript -// it will be something like this -{ - "type": "menuItem", - "kind": "tree", - "alias": "My.TreeMenuItem", - "name": "My Tree Menu Item", - "meta": { - "label": "My Tree Menu Item", - "menus": ["My.Menu"] - } -} -``` - -#### **Default Element** - -```typescript -// get interface -interface UmbTreeMenuItemElement {} -``` - -### **Adding menu items to an existing menu** - -The backoffice comes with a couple of menus. - -* Content, Media, Settings, Templating, Dictionary, etc. - -To add a menu item to an existing menu, you can use the `meta.menus` property. - -```typescript -{ - "type": "menuItem", - "alias": "My.MenuItem", - "name": "My Menu Item", - "meta": { - "label": "My Menu Item", - "menus": ["Umb.Menu.Content"] - } -} -``` diff --git a/14/umbraco-cms/extending-cms/dashboards.md b/14/umbraco-cms/extending-cms/dashboards.md deleted file mode 100644 index f18785697b7..00000000000 --- a/14/umbraco-cms/extending-cms/dashboards.md +++ /dev/null @@ -1,333 +0,0 @@ ---- -description: "A guide to creating custom dashboards in Umbraco" ---- - -# Dashboards - -Each section of the Umbraco backoffice has its own set of default dashboards. - -The dashboard area of Umbraco is used to display an 'editor' for the selected item in the tree. If no item is selected, for example when the section is first loaded in the browser, then the default set of section dashboards are displayed in the dashboard area, arranged over multiple tabs. - -## Registering your Dashboard - -There are two approaches to registering a custom dashboard to appear in the Umbraco Backoffice: - -### Registering with the package.manifest file - -Add a file named 'package.manifest' to the 'App_Plugins' folder, containing the following JSON configuration pointing to your dashboard view: - -```json -{ - "dashboards": [ - { - "alias": "myCustomDashboard", - "view": "/App_Plugins/MyCustomDashboard/dashboard.html", - "sections": [ "content", "member", "settings" ], - "weight": -10 - } - ] -} -``` - -The section aliases can be found in the C# developer reference for [Umbraco.Cms.Core.Constants.Applications](https://apidocs.umbraco.com/v14/csharp/api/Umbraco.Cms.Core.Constants.Applications.html). - -### Registering with C# Type - -By creating a C# class that implements `IDashboard` from `Umbraco.Cms.Core.Dashboards` then this will automatically be discovered by Umbraco at application startup time. - -```csharp -using Umbraco.Cms.Core.Composing; -using Umbraco.Cms.Core.Dashboards; -using Umbraco.Cms.Core; - -namespace Umbraco.Docs.Samples.Web.Dashboards; - -[Weight(-10)] -public class MyCustomDashboard : IDashboard -{ - public string Alias => "myCustomDashboard"; - - public string[] Sections => new[] - { - Constants.Applications.Content, - Constants.Applications.Members, - Constants.Applications.Settings - }; - - public string View => "/App_Plugins/MyCustomDashboard/dashboard.html"; - - public IAccessRule[] AccessRules => Array.Empty(); - -} -``` - -### Re-ordering / weighting - -Each dashboard regardless of how it is registered (package.manifest or C# or default core dashboard) uses a *weight* property to assign the order that the dashboard should be displayed. The dashboard with the lowest weighting number will be displayed first in a collection where one or more dashboards are visible for a section/application. - -For reference, here is a list of the weighting values for the default Umbraco dashboards, so you can assign a weighting to your custom dashboard with a higher or lower value to suit your custom ordering needs. - -**Content** - - - - - - - - - - - - - - - - - - - - - - - -
NameWeightLanguage KeyC# Type
Getting Started10dashboardTabs/contentIntroUmbraco.Cms.Core.Dashboards.ContentDashboard
Redirect URL Management20dashboardTabs/contentRedirectManagerUmbraco.Cms.Core.Dashboards.RedirectUrlDashboard
- -**Media** - - - - - - - - - - - - - - - - - -
NameWeightLanguage KeyC# Type
Content10dashboardTabs/mediaFolderBrowserUmbraco.Cms.Core.Dashboards.MediaDashboard
- -**Settings** - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameWeightLanguage KeyC# Type
Welcome10dashboardTabs/settingsWelcomeUmbraco.Cms.Core.Dashboards.SettingsDashboard
Examine Management20dashboardTabs/settingsExamineUmbraco.Cms.Core.Dashboards.ExamineDashboard
Published Status30dashboardTabs/settingsPublishedStatusUmbraco.Cms.Core.Dashboards.PublishedStatusDashboard
Models Builder40dashboardTabs/settingsModelsBuilderUmbraco.Cms.Core.Dashboards.ModelsBuilderDashboard
Health Check50dashboardTabs/settingsHealthCheckUmbraco.Cms.Core.Dashboards.HealthCheckDashboard
- -**Members** - - - - - - - - - - - - - - - - - -
NameWeightLanguage KeyC# Type
Getting Started10dashboardTabs/memberIntroUmbraco.Cms.Core.Dashboards.MembersDashboard
- -**Forms** - - - - - - - - - - - - - - - - - -
NameWeightLanguage KeyC# Type
Install Umbraco Forms10dashboardTabs/formsInstallUmbraco.Cms.Core.Dashboards.FormsDashboard
- -### Add Language Keys - -After registering your dashboard, it will appear in the backoffice - however, it will have its dashboard alias [mycustomdashboard] wrapped in square brackets. This is because it is missing a language key. The language key allows people to provide a translation of the dashboard name in multilingual environments. To remove the square brackets - add a language key: - -If your dashboard is unique to your installation, you can add or modify the relevant language files: `config/lang/{language}.user.xml` (e.g. `config/lang/en-US.user.xml`). If the dashboard is to be released as an Umbraco package, you will need to create a *lang* folder in your custom dashboard folder. You also need to create a package-specific language file: `App_Plugins/Mycustomdashboard/lang/en-US.xml`. - -[Read more about language files](language-files.md) - -```xml - - - - My Dashboard - - -``` - -### Specifying permissions - -You can configure which applications/sections a dashboard will appear in, in the above examples (package.manifest or C#), you can see the alias of the section is used to control where the dashboard is allowed to appear. - -Further to this, within this section, you can control which users can see a particular dashboard based on the *User Groups* they belong to. This is done by setting the 'access' permissions based on the *User Group* alias, you choose to deny or grant a particular User Group's access to the dashboard. - -```json -{ - "dashboards": [ - { - "alias": "myCustomDashboard", - "view": "/App_Plugins/MyCustomDashboard/dashboard.html", - "sections": [ "content", "member", "settings" ], - "weight": -10, - "access": [ - { "deny": "translator" }, - { "grant": "admin" } - ] - } - ] -} -``` - -```csharp -using Umbraco.Cms.Core.Composing; -using Umbraco.Cms.Core.Dashboards; -using Umbraco.Cms.Core; - -namespace Umbraco.Docs.Samples.Web.Dashboards; - -[Weight(-10)] -public class MyCustomDashboard : IDashboard -{ - public string Alias => "myCustomDashboard"; - - public string[] Sections => new[] - { - Constants.Applications.Content, - Constants.Applications.Members, - Constants.Applications.Settings - }; - - public string View => "/App_Plugins/MyCustomDashboard/dashboard.html"; - - public IAccessRule[] AccessRules - { - get - { - var rules = new IAccessRule[] - { - new AccessRule {Type = AccessRuleType.Deny, Value = Constants.Security.TranslatorGroupAlias}, - new AccessRule {Type = AccessRuleType.Grant, Value = Constants.Security.AdminGroupAlias} - }; - return rules; - } - } -} -``` - -## Remove an Umbraco dashboard - -In previous versions of Umbraco if you wanted to remove or modify the order of a default dashboard you would amend the `config/dashboards.config` file on disk. - -You need to use code to create your own *composer* to remove a dashboard. It could be a c# class that can be used to organize and customize your Umbraco application to your own needs. For example - if you wanted to remove the 'Content Dashboard' you would create a RemoveDashboard composer like this: - -```csharp -using Umbraco.Cms.Core.Composing; -using Umbraco.Cms.Core.Dashboards; -using Umbraco.Cms.Core.DependencyInjection; - -namespace Umbraco.Docs.Samples.Web.Dashboards; - -public class RemoveDashboard : IComposer -{ - public void Compose(IUmbracoBuilder builder) - { - builder.Dashboards().Remove(); - } -} -``` - -## Override an Umbraco Dashboard - -To modify the order of a default dashboard or change its permissions, you must first remove the default dashboard (see above), then add an overridden instance of the default dashboard. The overridden dashboard can then include your modifications. For example, if you wanted to deny the Writers group access to the default Redirect URL Management dashboard, you would create an override of RedirectUrlDashboard to add after removing the default dashboard. - -```csharp -using Umbraco.Cms.Core; -using Umbraco.Cms.Core.Composing; -using Umbraco.Cms.Core.Dashboards; -using Umbraco.Cms.Core.DependencyInjection; - -namespace Umbraco.Docs.Samples.Web.Dashboards; - -public class MyDashboardComposer : IComposer -{ - public void Compose(IUmbracoBuilder builder) - { - builder.Dashboards() - // Remove the default - .Remove() - // Add the overridden one - .Add(); - } -} - -// overridden redirect dashboard with custom rules -public class MyRedirectUrlDashboard : RedirectUrlDashboard, IDashboard -{ - // override explicit implementation - IAccessRule[] IDashboard.AccessRules { get; } = new IAccessRule[] - { - new AccessRule {Type = AccessRuleType.Deny, Value = Constants.Security.WriterGroupAlias}, - new AccessRule {Type = AccessRuleType.Grant, Value = Constants.Security.AdminGroupAlias}, - new AccessRule {Type = AccessRuleType.Grant, Value = "marketing"} - }; -} -``` diff --git a/14/umbraco-cms/extending-cms/section-trees/sections.md b/14/umbraco-cms/extending-cms/section-trees/sections.md deleted file mode 100644 index 96e3ed042ee..00000000000 --- a/14/umbraco-cms/extending-cms/section-trees/sections.md +++ /dev/null @@ -1,132 +0,0 @@ ---- -description: An explanation on sections and trees in Umbraco ---- - -# Sections - -The Umbraco backoffice consists of Sections, also referred to as Applications, which contain Trees. - -Each section is shown in the top navigation ribbon of the Umbraco Backoffice. - -## Create a Custom Section - -To create a new custom section in your Umbraco backoffice, the first thing you have to do is create a new folder inside `/App_Plugins`. We will call it `MyFavouriteThings`. - -Next we need to create a manifest where we'll include some basic configuration for our new section. - -## Registering a Custom Section - -There are two approaches to registering a custom section to appear in the Umbraco Backoffice: - -### Registering with package.manifest - -Create a new file in the `/App_Plugins/MyFavouriteThings/` folder and name it `package.manifest`. In this new file, copy the code snippet below and save it. - -```json -{ - "sections": [ - { - "alias": "myFavouriteThings", - "name": "My Favourite Things" - } - ] -} -``` - -This would create a new section in your Umbraco backoffice called 'My Favourite Things'. - -When registering your section this way, it is added to the end of the collection of sections. But as more `package.manifest` files may do the same, the order of the additional sections depends on the order of which the `package.manifest` files are loaded. Registering your section this way doesn't allow further control of its order. - -### Registering with C# Type - -By creating a C# class that implements `ISection` from `Umbraco.Cms.Core.Sections`: - -```csharp -using Umbraco.Cms.Core.Sections; - -namespace My.Website.Sections; - -public class MyFavouriteThingsSection : ISection -{ - public string Alias => "myFavouriteThings"; - - public string Name => "My Favourite Things"; -} -``` - -For your C# type to be discovered by Umbraco at application start up, it needs to be appended to the `SectionCollectionBuilder`. - -You can achieve this by creating a `Composer` and call the `Append` method: - -```csharp -using Umbraco.Cms.Core.Composing; - -namespace My.Website.Sections; - -public class SectionComposer : IComposer -{ - public void Compose(IUmbracoBuilder builder) - { - builder.Sections().Append(); - } -} -``` - -This would also create a new section called 'My Favourite Things' in your Umbraco Backoffice. - -Similar to registering the section via a `package.manifest` file, the `Append<>` method will add the section to the end of the list of sections. - -If you wish to control the order of your section a bit more, you can use some of the other methods on `SectionsCollectionBuilder`. For instance, you can add your section at a specific index: - -```csharp -builder.Sections().Insert(2); -``` - -Or before or after an existing section: - -```csharp -builder.Sections().InsertBefore(); -``` - -```csharp -builder.Sections().InsertAfter(); -``` - -The final order of the sections is down to the order of which the composers are executed. For instance, two composers may add a new section before `SettingsSection`, in which case the latter will add its section between the section of the first composer and `SettingsSection`. - -### Why can't I see my new Custom Section? - -You will also need to allow your current Umbraco User group access to this new Custom Section via the backoffice! (you will need to logout and back in again to see the change) - -![Add Section for User](../../../../10/umbraco-cms/extending/section-trees/images/add-custom-section-v8.png) - -### Adding a Language Translation (get rid of the square brackets) - -![Custom Section appears displaying Alias](<../../../../10/umbraco-cms/extending/section-trees/images/custom-section-alias-v8 (1).png>) - -When your new custom section appears, you'll notice only the section 'Alias' is displayed inside square brackets. This is because Umbraco caters for Multiple Languages in the backoffice, and is looking for a translation file for the current backoffice culture, containing a translation key for your custom section alias. - -Create a /lang folder in the folder where you are creating the implementation for your custom section. If you do not have one already, create a `/lang` folder within the folder where you are creating the implementation for your custom section, eg. `/App_Plugins/MyFavouriteThings/lang/`. - -It is worth knowing that the `/lang` folder does not have to be directly in the MyFavouriteThings folder, it can be nested deeper if you need it to be. The only requirement is that the folder is called lang. E.g. _\~/App\_Plugins/MyFavouriteThings/Some/Another/Lang/_. - -Inside this folder create a file called **en-us.xml**. This is the 'default' fallback language translation file. Add the following definition: - -```xml - - - - My Favourite Things - - -``` - -Recycle the application pool, and the square brackets will be gone, and your section will have the title 'My Favourite Things'. - -You can add custom language translation keys in this file for providing translated versions of text used throughout your custom section/tree implementation. - -To provide translations in other languages, duplicate the en-us.xml file in the /lang folder and rename it to match the lang/culture combination of your newly supported language. Update the contents of the language element attributes, and provide a translation for each 'language translation key'. - -You will need to recycle the application pool, to see changes to the language translation files reflected in the backoffice. - -[Now create a custom tree to load in your custom section!](trees/) diff --git a/14/umbraco-cms/extending-cms/section-trees/trees/README.md b/14/umbraco-cms/extending-cms/section-trees/trees/README.md deleted file mode 100644 index a8f8df5a40a..00000000000 --- a/14/umbraco-cms/extending-cms/section-trees/trees/README.md +++ /dev/null @@ -1,404 +0,0 @@ ---- -description: A guide to creating a custom tree in Umbraco ---- - -# Trees - -This section describes how to work with and create trees with Umbraco APIs. - -## Creating trees - -To Create a Tree in a section of the Umbraco backoffice, you need to take multiple steps: - -Create a `TreeController` class in C#. A new controller which inherits from the abstract `Umbraco.Cms.Web.BackOffice.Trees.TreeController` class and provides an implementation for two abstract methods: - -* GetTreeNodes (returns a `TreeNodeCollection`) - Responsible for rendering the content of the tree structure; -* GetMenuForNode (returns a `MenuItemCollection`) - Responsible for returning the menu structure to use for a particular node within a tree. - -You will need to add a constructor as `TreeController` requires this. See full code snippet in the "Implementing the Tree" section below. - -The `Tree` attribute used to decorate the `TreeController` has multiple properties. - -* `SectionAlias` - Alias of the section in which the tree appears -* `TreeAlias` - Alias of the tree -* `TreeTitle` - The title of the tree -* `TreeGroup` - The tree group, the tree belongs to -* `SortOrder` - Sort order of the tree - -For example: - -```csharp -[Tree("settings", "favouriteThingsAlias", TreeTitle = "Favourite Things Name", TreeGroup="favouritesGroup", SortOrder=5)] -public class FavouriteThingsTreeController : TreeController -{ } -``` - -The example above would register a custom tree with a title 'Favourite Things Name' in the Settings section of Umbraco. It will be visiable inside a custom group called 'Favourites'. - -### Tree Groups - -Tree Groups enable you to group trees in a section. You provide the alias of the Tree Group name, you wish to add your tree to. See [Constants.Trees.Groups](https://apidocs.umbraco.com/v14/csharp/api/Umbraco.Cms.Core.Constants.Trees.Groups.html) for a list of existing group alias. An example of tree groups in the backoffice would be the _Settings_ tree group and the _Templating_ tree group in the _Settings_ section. - -If you add your own alias, you'll need to add a translation key. This can be done by adding a language file to a `lang` folder with your application folder in `App_Plugins`: `App_Plugins/favouriteThings/lang/en-us.xml`. This will avoid the alias appearing as the header in \[square brackets]. - -The language file should contain the following XML: - -```xml - - - Favourites - - -``` - -### Customising the Root Tree Node - -The first node in the tree is referred to as the **Root Node**. You can customise the Root Node by overriding the abstract `CreateRootNode` method. You can assign a custom icon to the Root Node. You can also specify a custom URL route path in the backoffice to use with your custom tree. The method can be useful if your section has a single node (single page app). - -[See Also: How to create your own custom section](../sections.md) - -### Implementing the Tree - -{% hint style="warning" %} -The example below uses UmbracoApiController which is obsolete in Umbraco 14 and will be removed in Umbraco 15. -{% endhint %} - -```csharp -using Microsoft.AspNetCore.Http; -using Microsoft.AspNetCore.Mvc; -using Umbraco.Cms.Core; -using Umbraco.Cms.Core.Actions; -using Umbraco.Cms.Core.Events; -using Umbraco.Cms.Core.Models.Trees; -using Umbraco.Cms.Core.Services; -using Umbraco.Cms.Core.Trees; -using Umbraco.Cms.Web.BackOffice.Trees; -using Umbraco.Extensions; - -namespace My.Website.Trees; - -[Tree("settings", "favouriteThingsAlias", TreeTitle = "Favourite Things Name", TreeGroup = "favouritesGroup", SortOrder = 5)] -public class FavouriteThingsTreeController : TreeController -{ - - private readonly IMenuItemCollectionFactory _menuItemCollectionFactory; - - public FavouriteThingsTreeController(ILocalizedTextService localizedTextService, - UmbracoApiControllerTypeCollection umbracoApiControllerTypeCollection, - IMenuItemCollectionFactory menuItemCollectionFactory, - IEventAggregator eventAggregator) - : base(localizedTextService, umbracoApiControllerTypeCollection, eventAggregator) - { - _menuItemCollectionFactory = menuItemCollectionFactory ?? throw new ArgumentNullException(nameof(menuItemCollectionFactory)); - } - - protected override ActionResult GetTreeNodes(string id, FormCollection queryStrings) - { - var nodes = new TreeNodeCollection(); - - // check if we're rendering the root node's children - if (id == Constants.System.Root.ToInvariantString()) - { - // you can get your custom nodes from anywhere, and they can represent anything... - Dictionary favouriteThings = new Dictionary(); - favouriteThings.Add(1, "Raindrops on Roses"); - favouriteThings.Add(2, "Whiskers on Kittens"); - favouriteThings.Add(3, "Skys full of Stars"); - favouriteThings.Add(4, "Warm Woolen Mittens"); - favouriteThings.Add(5, "Cream coloured Unicorns"); - favouriteThings.Add(6, "Schnitzel with Noodles"); - - // loop through our favourite things and create a tree item for each one - foreach (var thing in favouriteThings) - { - // add each node to the tree collection using the base CreateTreeNode method - // it has several overloads, using here unique Id of tree item, - // -1 is the Id of the parent node to create, eg the root of this tree is -1 by convention - // - the querystring collection passed into this route - // - the name of the tree node - // - css class of icon to display for the node - // - and whether the item has child nodes - var node = CreateTreeNode(thing.Key.ToString(), "-1", queryStrings, thing.Value, "icon-presentation", false); - nodes.Add(node); - } - } - - return nodes; - } - - protected override ActionResult GetMenuForNode(string id, FormCollection queryStrings) - { - // create a Menu Item Collection to return so people can interact with the nodes in your tree - var menu = _menuItemCollectionFactory.Create(); - - if (id == Constants.System.Root.ToInvariantString()) - { - // root actions, perhaps users can create new items in this tree, or perhaps it's not a content tree, it might be a read only tree, or each node item might represent something entirely different... - // add your menu item actions or custom ActionMenuItems - menu.Items.Add(new CreateChildEntity(LocalizedTextService)); - // add refresh menu item (note no dialog) - menu.Items.Add(new RefreshNode(LocalizedTextService, true)); - } - else - { - // add a delete action to each individual item - menu.Items.Add(LocalizedTextService, true, opensDialog: true); - } - - return menu; - } - - protected override ActionResult CreateRootNode(FormCollection queryStrings) - { - var rootResult = base.CreateRootNode(queryStrings); - if (!(rootResult.Result is null)) - { - return rootResult; - } - - var root = rootResult.Value; - - // set the icon - root.Icon = "icon-hearts"; - // could be set to false for a custom tree with a single node. - root.HasChildren = true; - //url for menu - root.MenuUrl = null; - - return root; - } -} -``` - -![Favourite Things Custom Tree](../../../../../10/umbraco-cms/extending/section-trees/trees/images/favourite-things-custom-tree-v8.png) - -### Responding to Tree Actions - -The actions on items in an Umbraco Tree will trigger a request to load a view, with a name corresponding the name of the action. From a subfolder of the views folder matching the name of the 'customTreeAlias'. - -Clicking on one of the 'Favourite Things' in the custom tree example will load an `edit.html` view from the folder: `/views/favouriteThingsAlias/edit.html`. The 'Delete' menu item would also load a view from: `/views/favouriteThingsAlias/delete.html` - -When creating a custom tree as part of a Umbraco package, it is recommended to change the location of the default folder. It should be changed to the `App_Plugins` folder. You achieve this by decorating your MVC `TreeController` with the `PluginController` attribute. - -```csharp -@using Umbraco.Cms.Web.Common.Attributes; - -[Tree("settings", "favouriteThingsAlias", TreeTitle = "Favourite Things Name")] -[PluginController("favouriteThings")] -public class FavouriteThingsTreeController : TreeController -{ } -``` - -The edit view in the example would now be loaded from the location: `/App_Plugins/favouriteThings/backoffice/favouriteThingsAlias/edit.html` - -#### Providing functionality in your Tree Action Views - -You can instruct the Umbraco backoffice to load additional JavaScript resources (eg. AngularJS controllers) to use in conjunction with your 'tree action views' by adding a `package.manifest` file in the same folder location as your views. - -**For example**... - -```json -{ - "javascript": [ - "~/App_Plugins/favouriteThings/favouriteThings.resource.js", - "~/App_Plugins/favouriteThings/backoffice/favouriteThingsAlias/edit.controller.js", - "~/App_Plugins/favouriteThings/backoffice/favouriteThingsAlias/delete.controller.js" - ] -} -``` - -...this manifest would load files for two controllers to work with the edit and delete views and a general resource file. Those files perhaps containing code to retrieve, create, edit and delete 'favourite things' from some external non-Umbraco API. - -Our Tree Action View would then be wired to the loaded controller using the `ng-controller` attribute. The delete view would perhaps the delete view look a little bit like this: - -```csharp -
-
-

- Are you sure you want to delete this favourite thing: {{currentNode.name}} ? -

- - -
-
-``` - -![Delete Raindrops on Roses](<../../../../../10/umbraco-cms/extending/section-trees/trees/images/delete-raindrops-on-roses-v8 (1).png>) - -[see Tree Actions for a list of tree _ActionMenuItems_ and _IActions_](tree-actions.md) - -### Single Node Trees / Customising the Root Node Action - -It is possible to create 'trees' consisting of only a single node. Perhaps you want to do this to provide an area to control some settings or a placeholder for a single page backoffice app. See the LogViewer in the settings section for a good example. (in the case of the 'content templates' tree, it's possible to have a custom view for the root node). - -In both scenarios you need to override the `CreateRootNode` method for the custom tree. - -```csharp -[Tree("settings", "favouritistThingsAlias", TreeTitle = "Favourite Thing", TreeGroup = "favoritesGroup", SortOrder = 5)] -[PluginController("favouriteThing")] -public class FavouritistThingsTreeController : TreeController -{ } -``` - -You can override the `CreateRootNode` method to set the 'RoutePath' to where the single page application will live (or introduction page). Setting `HasChildren` to `false` will result in a Single Node Tree. - -```csharp -protected override ActionResult CreateRootNode(FormCollection queryStrings) -{ - var rootResult = base.CreateRootNode(queryStrings); - if (!(rootResult.Result is null)) - { - return rootResult; - } - - var root = rootResult.Value; - - //optionally setting a routepath would allow you to load in a custom UI instead of the usual behaviour for a tree - root.RoutePath = string.Format("{0}/{1}/{2}", Constants.Applications.Settings, "favouritistThingsAlias", "overview"); - // set the icon - root.Icon = "icon-hearts"; - // set to false for a custom tree with a single node. - root.HasChildren = false; - //url for menu - root.MenuUrl = null; - - return root; -} -``` - -The RoutePath should be in the format of: **section/treeAlias/method**. As our example controller uses the `PluginController` attribute, clicking the root node would now request `/App_Plugins/favouriteThing/backoffice/favouritistThingsAlias/overview.html`. If you are not using the `PluginController` attribute, then the request would be to `/umbraco/views/favouritistThingsAlias/overview.html`. - -![Favourite Thing Custom Single Node Tree](../../../../../10/umbraco-cms/extending/section-trees/trees/images/favourite-thing-custom-single-node-tree.png) - -#### Full Width App - IsSingleNodeTree - -It's possible to make your single node tree app stretch across the full screen of the backoffice (no navigation tree). See the Packages section for an example. To achieve this add an additional attribute `IsSingleNodeTree`, in the Tree attribute for the custom controller. - -```csharp -[Tree("settings", "favouritistThingsAlias", IsSingleNodeTree = true, TreeTitle = "Favourite Thing", TreeGroup = "favoritesGroup", SortOrder = 5)] -[PluginController("favouriteThing")] -public class FavouritistThingsTreeController : TreeController -{ } -``` - -## Tree notifications - -All tree notications are defined in the namespace `Umbraco.Cms.Core.Notifications`. - -For more information about registering and using notifications see [Notifications](../../../reference/notifications/) - -### RootNodeRenderingNotification - -The `RootNodeRenderingNotification` is published whenever a tree's root node is created. - -**Members:** - -* `TreeNode Node` -* `FormCollection QueryString` -* `string TreeAlias` - -**Usage:** - -```csharp -public void Handle(RootNodeRenderingNotification notification) -{ - // normally you will want to target a specific tree, this can be done by checking the tree alias - if (notification.TreeAlias.Equals("content")) - { - notification.Node.Name = "My new title"; - } -} -``` - -### TreeNodesRenderingNotification - -The `TreeNodesRenderingNotification` is published whenever a list of child nodes are created. - -**Members:** - -* `TreeNodeCollection Nodes` -* `FormCollection QueryString` -* `string TreeAlias` - -**Usage:** - -```csharp -using Umbraco.Cms.Core.Security; - -public class TreeNotificationHandler :INotificationHandler -{ - private readonly IBackOfficeSecurityAccessor _backOfficeSecurityAccessor; - - public TreeNotificationHandler(IBackOfficeSecurityAccessor backOfficeSecurityAccessor) - { - _backOfficeSecurityAccessor = backOfficeSecurityAccessor; - } - - public void Handle(TreeNodesRenderingNotification notification) - { - // this example will filter any content tree node whose node name starts with - // 'Private', for any user that is in the customUserGroup - if (notification.TreeAlias.Equals("content") && - _backOfficeSecurityAccessor.BackOfficeSecurity.CurrentUser.Groups.Any(f => - f.Alias.Equals("customUserGroupAlias"))) - { - notification.Nodes.RemoveAll(node => node.Name.StartsWith("Private")); - } - } -} -``` - -### MenuRenderingNotification - -The `MenuRenderingNotification` is raised whenever a menu is generated for a tree node. - -**Members:** - -* `MenuItemCollection Menu` -* `string NodeId` -* `FormCollection QueryString` -* `string TreeAlias` - -**Usage:** - -```csharp -using Umbraco.Cms.Core.Events; -using Umbraco.Cms.Core.Notifications; -using Umbraco.Cms.Core.Security; - -public class TreeNotificationHandler : INotificationHandler -{ - private readonly IBackOfficeSecurityAccessor _backOfficeSecurityAccessor; - - public TreeNotificationHandler(IBackOfficeSecurityAccessor backOfficeSecurityAccessor) - { - _backOfficeSecurityAccessor = backOfficeSecurityAccessor; - } - - public void Handle(MenuRenderingNotification notification) - { - // this example will add a custom menu item for all admin users - - // for all content tree nodes - if (notification.TreeAlias.Equals("content") && - _backOfficeSecurityAccessor.BackOfficeSecurity.CurrentUser.IsAdmin()) - { - // Creates a menu action that will open /umbraco/currentSection/itemAlias.html - var menuItem = new Umbraco.Cms.Core.Models.Trees.MenuItem("itemAlias", "Item name"); - - // optional, if you don't want to follow the naming conventions, but do want to use a angular view - // you can also use a direct path "../App_Plugins/my/long/url/to/view.html" - menuItem.AdditionalData.Add("actionView", "my/long/url/to/view.html"); - - // sets the icon to icon-wine-glass - menuItem.Icon = "wine-glass"; - // insert at index 5 - notification.Menu.Items.Insert(5, menuItem); - } - } -} -``` - -## Tree Actions and User Permissions - -[See a list of Tree Actions and User Permission Codes](tree-actions.md) diff --git a/14/umbraco-cms/extending-cms/section-trees/trees/tree-actions.md b/14/umbraco-cms/extending-cms/section-trees/trees/tree-actions.md deleted file mode 100644 index cdd408a351c..00000000000 --- a/14/umbraco-cms/extending-cms/section-trees/trees/tree-actions.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -description: A guide to creating a custom tree action in Umbraco ---- - -# Tree Actions - -Items in an Umbraco Tree can have associated Actions. The actions visible to the currently logged in user can be controlled via User Permissions. - -You can set a User's permissions for each item in the Umbraco Content tree from the User Section of the Umbraco Backoffice. - -If you are developing a custom section, or a custom Dashboard, you might want to display some different options based on a User's permission set on a particular item. - -For example, on a custom dashboard you might add a quick 'Create a Blog Post' button for an editor, but only if that editor has permissions to create a blog post. You could create some sort of API endpoint, to call from your AngularJS controller, that in turn uses the UserService to return the current user's permissions. Then you can see whether they have the required permission to 'create' within the site's blog section. - -```csharp -bool canCreateBlogs = false; -var user = _userService.GetByEmail(email); -var userPermissionsForBlog = _userService.GetPermissions(user, blogId); -foreach (var permission in userPermissionsForBlog) -{ - if (permission.AssignedPermissions.Contains("C")) - { - canCreateBlogs = true; - } -} -``` - -## But how to know which letter corresponds to which Tree Action? - -Each tree action in Umbraco implements the IAction interface, and each Action has a corresponding 'Letter', and a boolean value describing whether permissions can be assigned for an action. - -```csharp -public interface IAction : IDiscoverable -{ - char Letter {get;} - bool ShowInNotifier {get;} - bool CanBePermissionAssigned {get;} - string Icon {get;} - string Alias {get;} - string JsFunctionName {get;} - /// - /// A path to a supporting JavaScript file for the IAction. A script tag will be rendered out with the reference to the JavaScript file. - /// - string JsSource {get;} -} -``` - -When you pull back the AssignedPermissions for a user on a particular item, it is these letters that indicate which actions the User is permitted to perform in the context of the tree item. - -### User Permission Codes - -Here is a list of the tree actions and associated user permission codes shipped by Umbraco CMS and add-on projects (such as Umbraco Deploy), as well as those used by some community packages. - -If building a package or adding custom tree actions to your solution, it's important to pick a permission letter that doesn't clash with one of these. - -If you have created a package using a custom tree action, please consider providing an update to this documentation page via a PR to the [documentation repository](https://github.com/umbraco/UmbracoDocs), such that other developers can discover and avoid using the same permission letter. - -| Type | Alias | Letter | Can Be Permission Assigned | -| ------------------------------------------------------------- | ---------------------- | ------ | -------------------------- | -| Umbraco.Cms.Core.Actions.ActionAssignDomain | assignDomain | I | True | -| Umbraco.Cms.Core.Actions.ActionBrowse | browse | F | True | -| Umbraco.Cms.Core.Actions.ActionCopy | copy | O | True | -| Umbraco.Cms.Core.Actions.ActionCreateBlueprintFromContent | createblueprint | ï | True | -| Umbraco.Cms.Core.Actions.ActionDelete | delete | D | True | -| Umbraco.Cms.Core.Actions.ActionMove | move | M | True | -| Umbraco.Cms.Core.Actions.ActionNew | create | C | True | -| Umbraco.Cms.Core.Actions.ActionNotify | notify | N | True | -| Umbraco.Cms.Core.Actions.ActionProtect | protect | P | True | -| Umbraco.Cms.Core.Actions.ActionPublish | publish | U | True | -| Umbraco.Cms.Core.Actions.ActionRestore | restore | V | False | -| Umbraco.Cms.Core.Actions.ActionRights | rights | R | True | -| Umbraco.Cms.Core.Actions.ActionRollback | rollback | K | True | -| Umbraco.Cms.Core.Actions.ActionSort | sort | S | True | -| Umbraco.Cms.Core.Actions.ActionToPublish | sendtopublish | H | True | -| Umbraco.Cms.Core.Actions.ActionUnpublish | unpublish | Z | True | -| Umbraco.Cms.Core.Actions.ActionUpdate | update | A | True | -| Umbraco.Deploy.UI.Actions.ActionDeployRestore | deployRestore | Q | True | -| Umbraco.Deploy.UI.Actions.ActionDeployTreeRestore | deployTreeRestore | Ψ | True | -| Umbraco.Deploy.UI.Actions.ActionPartialRestore | deployPartialRestore | Ø | True | -| Umbraco.Deploy.UI.Actions.ActionQueueForTransfer | deployQueueForTransfer | T | True | -| Umbraco.Deploy.UI.Actions.Export | deployExport | П | True | -| Umbraco.Deploy.UI.Actions.Import | deployImport | Џ | True | -| Jumoo.TranslationManager.Core.Actions.ActionTranslate | translate | 5 | True | -| Jumoo.TranslationManager.Core.Actions.ActionManageTranslation | manageTranslations | Ť | True | -| uSync.Publisher.Actions.PushToServer | pushContent | > | True | -| uSync.Publisher.Actions.PullFromServer | pullContent | < | True | -| uSync.Publisher.Action.PushButton | pushContentButton | ^ | True | -| Our.Umbraco.LinkedPages.LinkedAction | linkPages | l | True | - -{% hint style="info" %} -_Up until Umbraco Deploy 9.2.0, the letter "N" was used for the "Queue For Transfer" action. In 9.2.1 it was changed to be "T". To avoid clashing with the letter selected for the Umbraco CMS "Notify" action, introduced in CMS version 8.18._ -{% endhint %} diff --git a/14/umbraco-cms/extending-cms/ui-library.md b/14/umbraco-cms/extending-cms/ui-library.md deleted file mode 100644 index c108a7ae1b4..00000000000 --- a/14/umbraco-cms/extending-cms/ui-library.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -description: A guide for getting started working with the Umbraco UI Library ---- - -# UI Library - -{% hint style="info" %} -The UI Library is currently _opt-in_. We recommend Backoffice and package developers start getting familiar with it. - -In the [Backoffice UI API Documentation](backoffice-ui-api-documentation.md) article you can find links to relevant resources for working with the Umbraco backoffice. -{% endhint %} - -The Umbraco UI Library is a set of web components that can be used to build Umbraco User Interfaces. The UI Library separates the user interface from Umbraco’s business logic and creates a unified user experience. This is done with coherent styling and naming, across all the Umbraco platforms and projects including the ones developed by you. - -With the UI Library, you get a collection of visual building blocks that consists of pieces to build any UI in Umbraco. Each component is a building block updating its display according to the data passed to it. - -## UI Library Storybook - -[Storybook](https://uui.umbraco.com/) is an application that gathers all the components together of the UI Library. It holds the documentation for the components and showcases different use case scenarios. You can explore all the components through stories reflecting their use cases. - -Each story has interactive controls that allows you to change the state of the component in real-time. Every publicly available property is editable in Storybook, so you can test out custom configurations and use-cases. - -You can also change the stylesheet of custom properties to see how the component will look like. Every story has a code example that you can copy and paste into your project. This will allow you to implement the components in your own packages and extensions. - -## Installing the UI Library Components - -You can download the UI Library package from [Github](https://github.com/umbraco/Umbraco.UI/tree/v1/contrib/packages). - -If you are installing a component via npm, there are two ways to import it: - -1. To import a specific component and register it at the same time, use the following command: - - ```sql - import '@umbraco-ui/uui-button/lib'; - ``` -2. To build on top of the components functionality, you can extend its class: - - ```sql - import { UUIButtonElement } from - '@umbraco-ui/uui-button/lib/uui-button.element'; - ``` - -For more information on installation, Content Delivery Networks (CDN), or included components, see the[ Readme file in the Github ](https://github.com/umbraco/Umbraco.UI#readme)project. - -## Getting Started with the UI Library - -The [Storybook](https://uui.umbraco.com/) is the starting point for working with the Umbraco UI Library. The Storybook contains two tabs: - -1. Canvas - The Canvas tab allows to use the interactive controls. - -
-2. Docs - Here, you can find code examples for all the stories and use them in your markup. You can look it up by tag name or head to the project repository, where, in the packages folder, you will find all the component packages with all the necessary scripts and examples in the readme files. - -
diff --git a/14/umbraco-cms/extending-cms/backoffice-search.md b/14/umbraco-cms/extending/backoffice-search.md similarity index 100% rename from 14/umbraco-cms/extending-cms/backoffice-search.md rename to 14/umbraco-cms/extending/backoffice-search.md diff --git a/14/umbraco-cms/extending/backoffice-setup/README.md b/14/umbraco-cms/extending/backoffice-setup/README.md new file mode 100644 index 00000000000..da6074cdb2c --- /dev/null +++ b/14/umbraco-cms/extending/backoffice-setup/README.md @@ -0,0 +1,6 @@ +--- +description: >- + Getting started with backoffice setup and configurations +--- + +Umbraco 14+ configurations diff --git a/14/umbraco-cms/extending-backoffice/contexts/README.md b/14/umbraco-cms/extending/backoffice-setup/contexts/README.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/contexts/README.md rename to 14/umbraco-cms/extending/backoffice-setup/contexts/README.md diff --git a/14/umbraco-cms/extending-backoffice/contexts/global-context.md b/14/umbraco-cms/extending/backoffice-setup/contexts/global-context.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/contexts/global-context.md rename to 14/umbraco-cms/extending/backoffice-setup/contexts/global-context.md diff --git a/14/umbraco-cms/extending-backoffice/contexts/variant-context.md b/14/umbraco-cms/extending/backoffice-setup/contexts/variant-context.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/contexts/variant-context.md rename to 14/umbraco-cms/extending/backoffice-setup/contexts/variant-context.md diff --git a/14/umbraco-cms/extending-backoffice/extension-registry/README.md b/14/umbraco-cms/extending/backoffice-setup/extension-registry/README.md similarity index 93% rename from 14/umbraco-cms/extending-backoffice/extension-registry/README.md rename to 14/umbraco-cms/extending/backoffice-setup/extension-registry/README.md index 16748f7e1bb..9a40ae10529 100644 --- a/14/umbraco-cms/extending-backoffice/extension-registry/README.md +++ b/14/umbraco-cms/extending/backoffice-setup/extension-registry/README.md @@ -30,6 +30,6 @@ The kinds feature enables you to base your extension registration on a preset. A import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; ``` -## [Package Manifest](../development-flow/package-manifest.md) +## [Package Manifest](../../property-editors/package-manifest.md) A Package is declared via an Umbraco Package Manifest. This describes the Package and declares one or more UI Extensions. diff --git a/14/umbraco-cms/extending-backoffice/extension-registry/bundle.md b/14/umbraco-cms/extending/backoffice-setup/extension-registry/bundle.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-registry/bundle.md rename to 14/umbraco-cms/extending/backoffice-setup/extension-registry/bundle.md diff --git a/14/umbraco-cms/extending-backoffice/extension-registry/entry-point.md b/14/umbraco-cms/extending/backoffice-setup/extension-registry/entry-point.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-registry/entry-point.md rename to 14/umbraco-cms/extending/backoffice-setup/extension-registry/entry-point.md diff --git a/14/umbraco-cms/extending-backoffice/extension-registry/extension-conditions.md b/14/umbraco-cms/extending/backoffice-setup/extension-registry/extension-conditions.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-registry/extension-conditions.md rename to 14/umbraco-cms/extending/backoffice-setup/extension-registry/extension-conditions.md diff --git a/14/umbraco-cms/extending-backoffice/extension-registry/extension-registration.md b/14/umbraco-cms/extending/backoffice-setup/extension-registry/extension-registration.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-registry/extension-registration.md rename to 14/umbraco-cms/extending/backoffice-setup/extension-registry/extension-registration.md diff --git a/14/umbraco-cms/extending-backoffice/extension-registry/kind.md b/14/umbraco-cms/extending/backoffice-setup/extension-registry/kind.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-registry/kind.md rename to 14/umbraco-cms/extending/backoffice-setup/extension-registry/kind.md diff --git a/14/umbraco-cms/extending-backoffice/extension-types/README.md b/14/umbraco-cms/extending/backoffice-setup/extension-types/README.md similarity index 93% rename from 14/umbraco-cms/extending-backoffice/extension-types/README.md rename to 14/umbraco-cms/extending/backoffice-setup/extension-types/README.md index 967b8d9b3d2..313a1b4e599 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/README.md +++ b/14/umbraco-cms/extending/backoffice-setup/extension-types/README.md @@ -14,20 +14,20 @@ Each Extension Manifest has to declare its type, this is used to determine where The pages of this article describe all the extension types that Backoffice supports. Here is a list of the most common types: {% content-ref url="dashboards.md" %} -[dashboards.md](dashboards.md) +[dashboards.md](../../dashboards.md) {% endcontent-ref %} {% content-ref url="property-editors/" %} -[property-editors](property-editors/) +[property-editors](../../property-editors/README.md) {% endcontent-ref %} {% content-ref url="sections-and-trees/" %} -[sections-and-trees](sections-and-trees/) +[sections-and-trees](../../section-trees/README.md) {% endcontent-ref %} ## Declare Extension Manifest -Extension Manifest and can be declared in multiple ways. One of these is to declare it as part of the [Umbraco Package Manifest](../development-flow/package-manifest.md). +Extension Manifest and can be declared in multiple ways. One of these is to declare it as part of the [Umbraco Package Manifest](../../property-editors/package-manifest.md). You can declare new Extension Manifests in JavaScript at any given point. diff --git a/14/umbraco-cms/extending-backoffice/extension-types/header-apps.md b/14/umbraco-cms/extending/backoffice-setup/extension-types/header-apps.md similarity index 85% rename from 14/umbraco-cms/extending-backoffice/extension-types/header-apps.md rename to 14/umbraco-cms/extending/backoffice-setup/extension-types/header-apps.md index 342038e099d..b317eb23e2f 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/header-apps.md +++ b/14/umbraco-cms/extending/backoffice-setup/extension-types/header-apps.md @@ -15,13 +15,13 @@ In this article, you can find an example of an extension registry. This example 1. [Using a manifest file](header-apps.md#button-header-app-with-manifest). 2. [Using the javascript/typescript file](header-apps.md#button-header-app-with-js-ts). -

Header Apps

+

Header Apps

## **Button Header App with Manifest** Below you can find an example of how to setup a Header App using the manifest file. -1. Follow the [Vite Package Setup](../development-flow/vite-package-setup.md) to create a header app and name it "`header-app`" when using the guide. +1. Follow the [Vite Package Setup](../../customize-backoffice/development-flow/vite-package-setup.md) to create a header app and name it "`header-app`" when using the guide. 2. Create a manifest file named `umbraco-package.json` at the root of the `header-app` folder. Here we define and configure our dashboard. 3. Add the following code to `umbraco-package.json`: @@ -57,7 +57,7 @@ Below you can find an example of how to setup a Header App using the manifest fi 4. In the `header-app` folder run `npm run build` and then run the project. Then in the backoffice you will see our new Header App extension with **heart icon**: -

Header App in the Backoffice registered via Manifest File

+

Header App in the Backoffice registered via Manifest File

## **Button Header App with JS/TS** @@ -119,4 +119,4 @@ umbExtensionsRegistry.register(manifest); 3. In the `header-app` folder run `npm run build` and then run the project. Then in the backoffice you will see our new Header App extension with **address book** **icon**: -

Header App in Backoffice registered via ts File

+

Header App in Backoffice registered via ts File

diff --git a/14/umbraco-cms/extending/backoffice-setup/extension-types/menu/README.md b/14/umbraco-cms/extending/backoffice-setup/extension-types/menu/README.md new file mode 100644 index 00000000000..5821c509ede --- /dev/null +++ b/14/umbraco-cms/extending/backoffice-setup/extension-types/menu/README.md @@ -0,0 +1,80 @@ +# Menu + +{% hint style="warning" %} +This page is a work in progress. It will be updated as the software evolves. +{% endhint %} + +## Menu + +

Menu

+ +```typescript +{ + "type": "menu", + "alias": "My.Menu", + "name": "My Menu" +} +``` + +### Menu Item + +

Menu Item

+ +```typescript +{ + "type": "menuItem", + "alias": "My.MenuItem", + "name": "My Menu Item", + "meta": { + "label": "My Menu Item", + "menus": ["My.Menu"] + } +} +``` + +### **Tree Menu Item** + +// TODO adds docs when we have extension kinds + +#### **Manifest** + +```typescript +// it will be something like this +{ + "type": "menuItem", + "kind": "tree", + "alias": "My.TreeMenuItem", + "name": "My Tree Menu Item", + "meta": { + "label": "My Tree Menu Item", + "menus": ["My.Menu"] + } +} +``` + +#### **Default Element** + +```typescript +// get interface +interface UmbTreeMenuItemElement {} +``` + +### **Adding menu items to an existing menu** + +The backoffice comes with a couple of menus. + +* Content, Media, Settings, Templating, Dictionary, etc. + +To add a menu item to an existing menu, you can use the `meta.menus` property. + +```typescript +{ + "type": "menuItem", + "alias": "My.MenuItem", + "name": "My Menu Item", + "meta": { + "label": "My Menu Item", + "menus": ["Umb.Menu.Content"] + } +} +``` diff --git a/14/umbraco-cms/extending-backoffice/extension-types/modals/README.md b/14/umbraco-cms/extending/backoffice-setup/extension-types/modals/README.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-types/modals/README.md rename to 14/umbraco-cms/extending/backoffice-setup/extension-types/modals/README.md diff --git a/14/umbraco-cms/extending-backoffice/extension-types/modals/confirm-dialog.md b/14/umbraco-cms/extending/backoffice-setup/extension-types/modals/confirm-dialog.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-types/modals/confirm-dialog.md rename to 14/umbraco-cms/extending/backoffice-setup/extension-types/modals/confirm-dialog.md diff --git a/14/umbraco-cms/extending-backoffice/extension-types/modals/custom-modals.md b/14/umbraco-cms/extending/backoffice-setup/extension-types/modals/custom-modals.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-types/modals/custom-modals.md rename to 14/umbraco-cms/extending/backoffice-setup/extension-types/modals/custom-modals.md diff --git a/14/umbraco-cms/extending-backoffice/extension-types/modals/route-registration.md b/14/umbraco-cms/extending/backoffice-setup/extension-types/modals/route-registration.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-types/modals/route-registration.md rename to 14/umbraco-cms/extending/backoffice-setup/extension-types/modals/route-registration.md diff --git a/14/umbraco-cms/extending-backoffice/routes.md b/14/umbraco-cms/extending/backoffice-setup/routes.md similarity index 67% rename from 14/umbraco-cms/extending-backoffice/routes.md rename to 14/umbraco-cms/extending/backoffice-setup/routes.md index fb15e86b211..32725d1e90a 100644 --- a/14/umbraco-cms/extending-backoffice/routes.md +++ b/14/umbraco-cms/extending/backoffice-setup/routes.md @@ -12,13 +12,13 @@ This page is a work in progress. It will be updated as the software evolves. The routing in the backoffice is flexible and customizable. In this article, you can find a couple of starting points for routing. -The overall **divider** is the [Section](broken-reference) which is a `ManifestSection` extension type. It is also used internally by the following sections: Content, Media, Settings, Members, and so on. +The overall **divider** is the [Section](../section-trees/sections/README.md) which is a `ManifestSection` extension type. It is also used internally by the following sections: Content, Media, Settings, Members, and so on. Depending on which section you are working on, there are different options: -* **SectionView**: The [Section View](extension-types/sections/section-view.md) is a view in a section and one of the automatic router extension types. It can be an entry point to a section. If a section has multiple views defined (or both dashboards and views) then the tabs and icons will be rendered. As some examples, you can check the **Packages** and **Member** sections. -* **Dashboard**: The [Dashboard](extension-types/dashboards.md) is an entry point to a section. If there is more than one section view or dashboard then the defined tabs and icons will be rendered to make it possible to navigate. -* **Workspace**: The [Workspace](extension-types/workspaces/) concept has built-in features to facilitate editing of an entity of a certain entity type. It is used by many entities in the backoffice like content, media, content types, data types, dictionaries and so on. +* **SectionView**: The [Section View](../section-trees/sections/section-view.md) is a view in a section and one of the automatic router extension types. It can be an entry point to a section. If a section has multiple views defined (or both dashboards and views) then the tabs and icons will be rendered. As some examples, you can check the **Packages** and **Member** sections. +* **Dashboard**: The [Dashboard](../dashboards.md) is an entry point to a section. If there is more than one section view or dashboard then the defined tabs and icons will be rendered to make it possible to navigate. +* **Workspace**: The [Workspace](../workspaces/README.md) concept has built-in features to facilitate editing of an entity of a certain entity type. It is used by many entities in the backoffice like content, media, content types, data types, dictionaries and so on. * **Custom element**: A [Custom Element](umbraco-element/) is a section that can be configured to use any web component as the **entry point**. The `element()` can be configured in the manifest. By doing this we'll disable the possibility of using dashboards and section views for the section since they will not be automatically routed/rendered. This option should be used only when necessary. ### Building routing diff --git a/14/umbraco-cms/extending-backoffice/sorting.md b/14/umbraco-cms/extending/backoffice-setup/sorting.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/sorting.md rename to 14/umbraco-cms/extending/backoffice-setup/sorting.md diff --git a/14/umbraco-cms/extending-backoffice/umbraco-element/README.md b/14/umbraco-cms/extending/backoffice-setup/umbraco-element/README.md similarity index 92% rename from 14/umbraco-cms/extending-backoffice/umbraco-element/README.md rename to 14/umbraco-cms/extending/backoffice-setup/umbraco-element/README.md index 2b0725ae846..2f95cd6f958 100644 --- a/14/umbraco-cms/extending-backoffice/umbraco-element/README.md +++ b/14/umbraco-cms/extending/backoffice-setup/umbraco-element/README.md @@ -13,7 +13,7 @@ This provides a few methods to connect with the Backoffice, giving you the abili * Consume a Context — [Learn more about Consuming Contexts](../working-with-data/context-api.md) * Provide Context — [Learn more about Providing Contexts](../working-with-data/context-api.md#provide-a-context-api) * Observe a State — [Learn more about States](../working-with-data/states.md#observe-a-state-via-umbraco-element-or-umbraco-controller) -* Localization — [Learn more about Localization](../localization/) +* Localization — [Learn more about Localization](../../language-files/README.md) * Host Controllers — [Learn more about Controllers](controllers/) ## Create an Umbraco Element diff --git a/14/umbraco-cms/extending-backoffice/umbraco-element/controllers/README.md b/14/umbraco-cms/extending/backoffice-setup/umbraco-element/controllers/README.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/umbraco-element/controllers/README.md rename to 14/umbraco-cms/extending/backoffice-setup/umbraco-element/controllers/README.md diff --git a/14/umbraco-cms/extending-backoffice/umbraco-element/controllers/write-your-own-controller.md b/14/umbraco-cms/extending/backoffice-setup/umbraco-element/controllers/write-your-own-controller.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/umbraco-element/controllers/write-your-own-controller.md rename to 14/umbraco-cms/extending/backoffice-setup/umbraco-element/controllers/write-your-own-controller.md diff --git a/14/umbraco-cms/extending-backoffice/working-with-data/README.md b/14/umbraco-cms/extending/backoffice-setup/working-with-data/README.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/working-with-data/README.md rename to 14/umbraco-cms/extending/backoffice-setup/working-with-data/README.md diff --git a/14/umbraco-cms/extending-backoffice/working-with-data/context-api.md b/14/umbraco-cms/extending/backoffice-setup/working-with-data/context-api.md similarity index 98% rename from 14/umbraco-cms/extending-backoffice/working-with-data/context-api.md rename to 14/umbraco-cms/extending/backoffice-setup/working-with-data/context-api.md index d26993dcfdd..5bd57853bfd 100644 --- a/14/umbraco-cms/extending-backoffice/working-with-data/context-api.md +++ b/14/umbraco-cms/extending/backoffice-setup/working-with-data/context-api.md @@ -129,7 +129,7 @@ The consumption of the Additional API will never happen as the token uses the sa This is only relevant if you are going to make multiple context API for the same context. Discriminator only gives value for consumption of Context APIs that have a varying interface. The backoffice uses this for the different types of Workspace Contexts. {% endhint %} -In some cases, it is needed to have different APIs for the same context. For example, the [Workspace Contexts](../extension-types/workspaces/workspace-context.md). +In some cases, it is needed to have different APIs for the same context. For example, the [Workspace Contexts](../../workspaces/workspace-context.md). If someone wants the workspace name, they might not care about the specific API of the Workspace Context. These implementations can use a standard Context Token with a type of generic Workspace Context. diff --git a/14/umbraco-cms/extending-backoffice/working-with-data/repositories.md b/14/umbraco-cms/extending/backoffice-setup/working-with-data/repositories.md similarity index 88% rename from 14/umbraco-cms/extending-backoffice/working-with-data/repositories.md rename to 14/umbraco-cms/extending/backoffice-setup/working-with-data/repositories.md index 0b91ef42d36..e2d4c93b6f6 100644 --- a/14/umbraco-cms/extending-backoffice/working-with-data/repositories.md +++ b/14/umbraco-cms/extending/backoffice-setup/working-with-data/repositories.md @@ -13,10 +13,10 @@ import { umbExtensionRegistry } from '@umbraco-cms/backoffice/extension-registry import { MyRepository } from './MyRepository'; const repositoryManifest = { - type: 'repository', - alias: 'My.Repository', - name: 'My Repository', - api: MyRepository, + type: 'repository', + alias: 'My.Repository', + name: 'My Repository', + api: MyRepository, }; ``` @@ -24,7 +24,7 @@ With a repository we can have different data sources depending on the state of t ### Data flow with a repository -

Data flow

+

Data flow

A repository has to be instanced in the context where it is used. It should take a host element as part of the constructor, so any contexts consumed in the repository (notifications, modals, etc.) get rendered in the correct DOM context. diff --git a/14/umbraco-cms/extending-backoffice/working-with-data/states.md b/14/umbraco-cms/extending/backoffice-setup/working-with-data/states.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/working-with-data/states.md rename to 14/umbraco-cms/extending/backoffice-setup/working-with-data/states.md diff --git a/14/umbraco-cms/extending-backoffice/working-with-data/store.md b/14/umbraco-cms/extending/backoffice-setup/working-with-data/store.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/working-with-data/store.md rename to 14/umbraco-cms/extending/backoffice-setup/working-with-data/store.md diff --git a/14/umbraco-cms/extending-cms/backoffice-tours.md b/14/umbraco-cms/extending/backoffice-tours.md similarity index 100% rename from 14/umbraco-cms/extending-cms/backoffice-tours.md rename to 14/umbraco-cms/extending/backoffice-tours.md diff --git a/14/umbraco-cms/extending-backoffice/customize-backoffice.md b/14/umbraco-cms/extending/customize-backoffice/README.md similarity index 63% rename from 14/umbraco-cms/extending-backoffice/customize-backoffice.md rename to 14/umbraco-cms/extending/customize-backoffice/README.md index af8ec75e024..6ead9d4f65f 100644 --- a/14/umbraco-cms/extending-backoffice/customize-backoffice.md +++ b/14/umbraco-cms/extending/customize-backoffice/README.md @@ -6,7 +6,7 @@ description: Get started with the New Backoffice in Umbraco 14. ## Overview -"Belissima", code name for the frontend code of the backoffice, is a re-creation of the backoffice of Umbraco with a more modern approach. While replacing the deprecated angular code with [Vite](https://vitejs.dev/), [Lit ](https://lit.dev/)and [TypeScript](https://www.typescriptlang.org/), you can customize or extend more or less everything in the backoffice: +"Belissima", code name for the frontend code of the backoffice, is a re-creation of the backoffice of Umbraco with a more modern approach. While replacing the deprecated angular code with [Vite](https://vitejs.dev/), [Lit](https://lit.dev/)and [TypeScript](https://www.typescriptlang.org/), you can customize or extend more or less everything in the backoffice:

Backoffice Overview Customizable items

@@ -18,7 +18,7 @@ You are also not limited to the mentioned frameworks. You can use any other fram In this article, we'll provide an overview of the different ways you can extend the backoffice using the new frameworks. -
SetupDiscover how to get started with the new backoffice.Documentations Icons_Umbraco_CMS_Fundamentals_Setup (1).pngdevelopment-flow
UI DocumentationDiscover how to extend the backoffice using the Umbraco UI Library, UI API and Storybook.Documentations Icons_Umbraco_CMS_Fundamentals_Design.pngui-documentation.md
TutorialsCreating your first extension

Creating a custom dashboard

Creating a property editor		Documentations Icons_Umbraco_CMS_Tutorials_the_Starter_Kit (1).png
+
SetupDiscover how to get started with the new backoffice.Documentations Icons_Umbraco_CMS_Fundamentals_Setup (1).pngdevelopment-flow
UI DocumentationDiscover how to extend the backoffice using the Umbraco UI Library, UI API and Storybook.Documentations Icons_Umbraco_CMS_Fundamentals_Design.pngui-documentation.md
TutorialsCreating your first extension

Creating a custom dashboard

Creating a property editor		Documentations Icons_Umbraco_CMS_Tutorials_the_Starter_Kit (1).png
{% hint style="info" %} You can also find a list of other resources related to the new backoffice of Umbraco in the [Umbraco v14 "Bellissima" Resources](https://github.com/umbraco/Umbraco.Packages/tree/main/bellissima) article. @@ -29,15 +29,15 @@ You can also find a list of other resources related to the new backoffice of Umb There are a few words that cover certain concepts, which is good to learn to decode the purpose of code. These terminologies can be handy when starting to customize the new backoffice: * **Resource:** An API enables communication with a server. -* **Store:** An API representing data, generally coming from the server. Most stores would talk with one or more resources. You can read more about this in the [Store](working-with-data/store.md) article. -* **State:** A reactive container holding data, when data is changed all its Observables will be notified. You can read more about state and observables in the [States](working-with-data/states.md) article. +* **Store:** An API representing data, generally coming from the server. Most stores would talk with one or more resources. You can read more about this in the [Store](../backoffice-setup/working-with-data/store.md) article. +* **State:** A reactive container holding data, when data is changed all its Observables will be notified. You can read more about state and observables in the [States](../backoffice-setup/working-with-data/states.md) article. * **Observable:** An observable is the hook for others to subscribe to the data of a State. * **Observe:** Observe is the term of what we do when subscribing to an Observable. -* **Context-API:** The name of the system used to serve APIs (instances/classes) for a certain context in the DOM. An API that is served via the Context-API is called a Context. You can read more about this in the [Context API](working-with-data/context-api.md) article. +* **Context-API:** The name of the system used to serve APIs (instances/classes) for a certain context in the DOM. An API that is served via the Context-API is called a Context. You can read more about this in the [Context API](../backoffice-setup/working-with-data/context-api.md) article. * **Context Provider:** One that provides a class instance as a Context API. * **Context Consumer:** One that consumer subscribes to a class instance as a Context API. * **Controller:** An abstract term for a thing that hooks into the lifecycle of an element. Many things in our system are Controllers. -* **Umbraco Controller:** Enables hosting controllers. Additionally, it provides a few shortcut methods for initializing core Umbraco Controllers. You can read more about this in the [Controllers](umbraco-element/controllers/) article. +* **Umbraco Controller:** Enables hosting controllers. Additionally, it provides a few shortcut methods for initializing core Umbraco Controllers. You can read more about this in the [Controllers](../backoffice-setup/umbraco-element/controllers/) article. * **Controller Host:** A class that can host controllers. * **Controller Host Element:** The element that can host controllers. -* **Umbraco Element:** The `UmbLitElement` or `UmbElemenMixin` enables hosting controllers. Additionally, it provides a few shortcut methods for initializing core Umbraco Controllers. You can read more about this in the [Umbraco Element](umbraco-element/) article. +* **Umbraco Element:** The `UmbLitElement` or `UmbElemenMixin` enables hosting controllers. Additionally, it provides a few shortcut methods for initializing core Umbraco Controllers. You can read more about this in the [Umbraco Element](../backoffice-setup/umbraco-element/README.md) article. diff --git a/14/umbraco-cms/extending-backoffice/development-flow/README.md b/14/umbraco-cms/extending/customize-backoffice/development-flow/README.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/development-flow/README.md rename to 14/umbraco-cms/extending/customize-backoffice/development-flow/README.md diff --git a/14/umbraco-cms/extending-backoffice/development-flow/vite-package-setup.md b/14/umbraco-cms/extending/customize-backoffice/development-flow/vite-package-setup.md similarity index 94% rename from 14/umbraco-cms/extending-backoffice/development-flow/vite-package-setup.md rename to 14/umbraco-cms/extending/customize-backoffice/development-flow/vite-package-setup.md index e39bdd9b1a1..ae4d8ac5f83 100644 --- a/14/umbraco-cms/extending-backoffice/development-flow/vite-package-setup.md +++ b/14/umbraco-cms/extending/customize-backoffice/development-flow/vite-package-setup.md @@ -28,7 +28,7 @@ This command will help you set up your new package, asking you to pick a framewo 2. To follow this tutorial, we recommend you enter `my-dashboard` as the **Project Name** when prompted, although you can choose any other you like. Then choose **Lit** and **TypeScript**. -

Create vite command choices

+

Create vite command choices

This creates a new folder, sets up our new project, and creates a `package.json` file, which includes the necessary packages. @@ -161,7 +161,7 @@ export default class MyElement extends LitElement { {% endhint %} -Learn more about the abilities of the manifest file in the [Umbraco Package Manifest](package-manifest.md) article. +Learn more about the abilities of the manifest file in the [Umbraco Package Manifest](../../property-editors/package-manifest.md) article. #### Testing your package @@ -175,7 +175,7 @@ If you try to include these resources via Visual Studio (VS), then only the `dis The final result looks like this: -

My dashboard

+

My dashboard

If the Vite logo is not found, the path to its location needs to be changed. Update the `my-element.ts` file in the `src` folder accordingly: diff --git a/14/umbraco-cms/extending-cms/customize-the-editing-experience.md b/14/umbraco-cms/extending/customize-the-editing-experience.md similarity index 96% rename from 14/umbraco-cms/extending-cms/customize-the-editing-experience.md rename to 14/umbraco-cms/extending/customize-the-editing-experience.md index f339875551d..a8af3be7b63 100644 --- a/14/umbraco-cms/extending-cms/customize-the-editing-experience.md +++ b/14/umbraco-cms/extending/customize-the-editing-experience.md @@ -16,8 +16,8 @@ In this section, you will find all the resources you need to build an intuitive * [Backoffice Tours](backoffice-tours.md) * [Backoffice Search](backoffice-search.md) -* [Content Apps](content-apps.md) -* [Language files and localization](language-files.md) +* [Workspace](workspaces/README.md) +* [Language files and localization](language-files/README.md) ## Also in this section diff --git a/14/umbraco-cms/extending-backoffice/extension-types/dashboards.md b/14/umbraco-cms/extending/dashboards.md similarity index 73% rename from 14/umbraco-cms/extending-backoffice/extension-types/dashboards.md rename to 14/umbraco-cms/extending/dashboards.md index 61e8b412e25..52e28e1607a 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/dashboards.md +++ b/14/umbraco-cms/extending/dashboards.md @@ -1,7 +1,6 @@ --- description: >- - Dashboards provides a space for information, placed at the entrance of a - Section + A guide to creating custom dashboards in Umbraco --- # Dashboard @@ -10,11 +9,15 @@ description: >- This page is a work in progress. It has been migrated but the content is waiting to be updated for the new Backoffice. {% endhint %} +Each section of the Umbraco backoffice has its own set of default dashboards. + +The dashboard area of Umbraco is used to display an 'editor' for the selected item in the tree. If no item is selected, for example when the section is first loaded in the browser, then the default set of section dashboards are displayed in the dashboard area, arranged over multiple tabs. + The dashboard area of Umbraco is used to display information for a Section. Notice that Section Views is another similar approach to append information to the root of a Section. Section views are thought mainly used as Secondary pages. These two approaches should ideally not be combined. You can try and [create a custom dashboard](../../tutorials/creating-a-custom-dashboard/) as a way on getting started on this topic. -## Dashboard registration +## Registering your Dashboard This section dives into the Dashboard Extension Manifest, shows how to register one, and append additional details. diff --git a/14/umbraco-cms/extending-cms/database.md b/14/umbraco-cms/extending/database.md similarity index 100% rename from 14/umbraco-cms/extending-cms/database.md rename to 14/umbraco-cms/extending/database.md diff --git a/14/umbraco-cms/extending-cms/embedded-media-providers.md b/14/umbraco-cms/extending/embedded-media-providers.md similarity index 100% rename from 14/umbraco-cms/extending-cms/embedded-media-providers.md rename to 14/umbraco-cms/extending/embedded-media-providers.md diff --git a/14/umbraco-cms/extending-cms/filesystemproviders/README.md b/14/umbraco-cms/extending/filesystemproviders/README.md similarity index 100% rename from 14/umbraco-cms/extending-cms/filesystemproviders/README.md rename to 14/umbraco-cms/extending/filesystemproviders/README.md diff --git a/14/umbraco-cms/extending-cms/filesystemproviders/azure-blob-storage.md b/14/umbraco-cms/extending/filesystemproviders/azure-blob-storage.md similarity index 100% rename from 14/umbraco-cms/extending-cms/filesystemproviders/azure-blob-storage.md rename to 14/umbraco-cms/extending/filesystemproviders/azure-blob-storage.md diff --git a/14/umbraco-cms/extending-cms/filesystemproviders/images/config-from-backoffice.png b/14/umbraco-cms/extending/filesystemproviders/images/config-from-backoffice.png similarity index 100% rename from 14/umbraco-cms/extending-cms/filesystemproviders/images/config-from-backoffice.png rename to 14/umbraco-cms/extending/filesystemproviders/images/config-from-backoffice.png diff --git a/14/umbraco-cms/extending-cms/health-check/README.md b/14/umbraco-cms/extending/health-check/README.md similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/README.md rename to 14/umbraco-cms/extending/health-check/README.md diff --git a/14/umbraco-cms/extending-cms/health-check/guides/README.md b/14/umbraco-cms/extending/health-check/guides/README.md similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/README.md rename to 14/umbraco-cms/extending/health-check/guides/README.md diff --git a/14/umbraco-cms/extending-cms/health-check/guides/clickjackingprotection.md b/14/umbraco-cms/extending/health-check/guides/clickjackingprotection.md similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/clickjackingprotection.md rename to 14/umbraco-cms/extending/health-check/guides/clickjackingprotection.md diff --git a/14/umbraco-cms/extending-cms/health-check/guides/contentsniffingprotection.md b/14/umbraco-cms/extending/health-check/guides/contentsniffingprotection.md similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/contentsniffingprotection.md rename to 14/umbraco-cms/extending/health-check/guides/contentsniffingprotection.md diff --git a/14/umbraco-cms/extending-cms/health-check/guides/crosssitescriptingprotection.md b/14/umbraco-cms/extending/health-check/guides/crosssitescriptingprotection.md similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/crosssitescriptingprotection.md rename to 14/umbraco-cms/extending/health-check/guides/crosssitescriptingprotection.md diff --git a/14/umbraco-cms/extending-cms/health-check/guides/debugcompilationmode.md b/14/umbraco-cms/extending/health-check/guides/debugcompilationmode.md similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/debugcompilationmode.md rename to 14/umbraco-cms/extending/health-check/guides/debugcompilationmode.md diff --git a/14/umbraco-cms/extending-cms/health-check/guides/excessiveheaders.md b/14/umbraco-cms/extending/health-check/guides/excessiveheaders.md similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/excessiveheaders.md rename to 14/umbraco-cms/extending/health-check/guides/excessiveheaders.md diff --git a/14/umbraco-cms/extending-cms/health-check/guides/fixedapplicationurl.md b/14/umbraco-cms/extending/health-check/guides/fixedapplicationurl.md similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/fixedapplicationurl.md rename to 14/umbraco-cms/extending/health-check/guides/fixedapplicationurl.md diff --git a/14/umbraco-cms/extending-cms/health-check/guides/folderandfilepermissions.md b/14/umbraco-cms/extending/health-check/guides/folderandfilepermissions.md similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/folderandfilepermissions.md rename to 14/umbraco-cms/extending/health-check/guides/folderandfilepermissions.md diff --git a/14/umbraco-cms/extending-cms/health-check/guides/httpsconfiguration.md b/14/umbraco-cms/extending/health-check/guides/httpsconfiguration.md similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/httpsconfiguration.md rename to 14/umbraco-cms/extending/health-check/guides/httpsconfiguration.md diff --git a/14/umbraco-cms/extending-cms/health-check/guides/images/failed_healthcheck_folder_permissions.png b/14/umbraco-cms/extending/health-check/guides/images/failed_healthcheck_folder_permissions.png similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/images/failed_healthcheck_folder_permissions.png rename to 14/umbraco-cms/extending/health-check/guides/images/failed_healthcheck_folder_permissions.png diff --git a/14/umbraco-cms/extending-cms/health-check/guides/images/folder_properties.png b/14/umbraco-cms/extending/health-check/guides/images/folder_properties.png similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/images/folder_properties.png rename to 14/umbraco-cms/extending/health-check/guides/images/folder_properties.png diff --git a/14/umbraco-cms/extending-cms/health-check/guides/images/folder_properties_security.png b/14/umbraco-cms/extending/health-check/guides/images/folder_properties_security.png similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/images/folder_properties_security.png rename to 14/umbraco-cms/extending/health-check/guides/images/folder_properties_security.png diff --git a/14/umbraco-cms/extending-cms/health-check/guides/notificationemail.md b/14/umbraco-cms/extending/health-check/guides/notificationemail.md similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/notificationemail.md rename to 14/umbraco-cms/extending/health-check/guides/notificationemail.md diff --git a/14/umbraco-cms/extending-cms/health-check/guides/smtp.md b/14/umbraco-cms/extending/health-check/guides/smtp.md similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/smtp.md rename to 14/umbraco-cms/extending/health-check/guides/smtp.md diff --git a/14/umbraco-cms/extending-cms/health-check/guides/stricttransportsecurityheader.md b/14/umbraco-cms/extending/health-check/guides/stricttransportsecurityheader.md similarity index 100% rename from 14/umbraco-cms/extending-cms/health-check/guides/stricttransportsecurityheader.md rename to 14/umbraco-cms/extending/health-check/guides/stricttransportsecurityheader.md diff --git a/14/umbraco-cms/extending-cms/images/Canvas_tab (1).png b/14/umbraco-cms/extending/images/Canvas_tab (1).png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/Canvas_tab (1).png rename to 14/umbraco-cms/extending/images/Canvas_tab (1).png diff --git a/14/umbraco-cms/extending-cms/images/Canvas_tab (2).png b/14/umbraco-cms/extending/images/Canvas_tab (2).png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/Canvas_tab (2).png rename to 14/umbraco-cms/extending/images/Canvas_tab (2).png diff --git a/14/umbraco-cms/extending-cms/images/Canvas_tab.png b/14/umbraco-cms/extending/images/Canvas_tab.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/Canvas_tab.png rename to 14/umbraco-cms/extending/images/Canvas_tab.png diff --git a/14/umbraco-cms/extending-cms/images/Docs_tab (1).png b/14/umbraco-cms/extending/images/Docs_tab (1).png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/Docs_tab (1).png rename to 14/umbraco-cms/extending/images/Docs_tab (1).png diff --git a/14/umbraco-cms/extending-cms/images/Docs_tab (2).png b/14/umbraco-cms/extending/images/Docs_tab (2).png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/Docs_tab (2).png rename to 14/umbraco-cms/extending/images/Docs_tab (2).png diff --git a/14/umbraco-cms/extending-cms/images/Docs_tab.png b/14/umbraco-cms/extending/images/Docs_tab.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/Docs_tab.png rename to 14/umbraco-cms/extending/images/Docs_tab.png diff --git a/14/umbraco-cms/extending-cms/images/Embed-Button.png b/14/umbraco-cms/extending/images/Embed-Button.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/Embed-Button.png rename to 14/umbraco-cms/extending/images/Embed-Button.png diff --git a/14/umbraco-cms/extending-cms/images/Embed-YouTube.png b/14/umbraco-cms/extending/images/Embed-YouTube.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/Embed-YouTube.png rename to 14/umbraco-cms/extending/images/Embed-YouTube.png diff --git a/14/umbraco-cms/extending-cms/images/content-app-1.png b/14/umbraco-cms/extending/images/content-app-1.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/content-app-1.png rename to 14/umbraco-cms/extending/images/content-app-1.png diff --git a/14/umbraco-cms/extending-cms/images/content-app-2.png b/14/umbraco-cms/extending/images/content-app-2.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/content-app-2.png rename to 14/umbraco-cms/extending/images/content-app-2.png diff --git a/14/umbraco-cms/extending-cms/images/content-app-badge-v9.png b/14/umbraco-cms/extending/images/content-app-badge-v9.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/content-app-badge-v9.png rename to 14/umbraco-cms/extending/images/content-app-badge-v9.png diff --git a/14/umbraco-cms/extending-cms/images/content-app-badge.png b/14/umbraco-cms/extending/images/content-app-badge.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/content-app-badge.png rename to 14/umbraco-cms/extending/images/content-app-badge.png diff --git a/14/umbraco-cms/extending-cms/images/content-apps-location.png b/14/umbraco-cms/extending/images/content-apps-location.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/content-apps-location.png rename to 14/umbraco-cms/extending/images/content-apps-location.png diff --git a/14/umbraco-cms/extending-cms/images/content-dashboards.png b/14/umbraco-cms/extending/images/content-dashboards.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/content-dashboards.png rename to 14/umbraco-cms/extending/images/content-dashboards.png diff --git a/14/umbraco-cms/extending-cms/images/contentTypespecific-v8 (1) (1) (1).png b/14/umbraco-cms/extending/images/contentTypespecific-v8 (1) (1) (1).png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/contentTypespecific-v8 (1) (1) (1).png rename to 14/umbraco-cms/extending/images/contentTypespecific-v8 (1) (1) (1).png diff --git a/14/umbraco-cms/extending-cms/images/contentTypespecific-v8 (1) (1) (2).png b/14/umbraco-cms/extending/images/contentTypespecific-v8 (1) (1) (2).png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/contentTypespecific-v8 (1) (1) (2).png rename to 14/umbraco-cms/extending/images/contentTypespecific-v8 (1) (1) (2).png diff --git a/14/umbraco-cms/extending-cms/images/contentTypespecific-v8 (1) (1) (3).png b/14/umbraco-cms/extending/images/contentTypespecific-v8 (1) (1) (3).png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/contentTypespecific-v8 (1) (1) (3).png rename to 14/umbraco-cms/extending/images/contentTypespecific-v8 (1) (1) (3).png diff --git a/14/umbraco-cms/extending-cms/images/contentTypespecific-v8 (1) (1).png b/14/umbraco-cms/extending/images/contentTypespecific-v8 (1) (1).png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/contentTypespecific-v8 (1) (1).png rename to 14/umbraco-cms/extending/images/contentTypespecific-v8 (1) (1).png diff --git a/14/umbraco-cms/extending-cms/images/contentTypespecific-v8 (1) (2).png b/14/umbraco-cms/extending/images/contentTypespecific-v8 (1) (2).png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/contentTypespecific-v8 (1) (2).png rename to 14/umbraco-cms/extending/images/contentTypespecific-v8 (1) (2).png diff --git a/14/umbraco-cms/extending-cms/images/contentTypespecific-v8 (1).png b/14/umbraco-cms/extending/images/contentTypespecific-v8 (1).png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/contentTypespecific-v8 (1).png rename to 14/umbraco-cms/extending/images/contentTypespecific-v8 (1).png diff --git a/14/umbraco-cms/extending-cms/images/contentTypespecific-v8.png b/14/umbraco-cms/extending/images/contentTypespecific-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/contentTypespecific-v8.png rename to 14/umbraco-cms/extending/images/contentTypespecific-v8.png diff --git a/14/umbraco-cms/extending-cms/images/contentTypespecific.png b/14/umbraco-cms/extending/images/contentTypespecific.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/contentTypespecific.png rename to 14/umbraco-cms/extending/images/contentTypespecific.png diff --git a/14/umbraco-cms/extending-cms/images/db-table (1).png b/14/umbraco-cms/extending/images/db-table (1).png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/db-table (1).png rename to 14/umbraco-cms/extending/images/db-table (1).png diff --git a/14/umbraco-cms/extending-cms/images/db-table (2).png b/14/umbraco-cms/extending/images/db-table (2).png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/db-table (2).png rename to 14/umbraco-cms/extending/images/db-table (2).png diff --git a/14/umbraco-cms/extending-cms/images/db-table.png b/14/umbraco-cms/extending/images/db-table.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/db-table.png rename to 14/umbraco-cms/extending/images/db-table.png diff --git a/14/umbraco-cms/extending-cms/images/developer-dashboards.png b/14/umbraco-cms/extending/images/developer-dashboards.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/developer-dashboards.png rename to 14/umbraco-cms/extending/images/developer-dashboards.png diff --git a/14/umbraco-cms/extending-cms/images/deviantart-embedded-media.png b/14/umbraco-cms/extending/images/deviantart-embedded-media.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/deviantart-embedded-media.png rename to 14/umbraco-cms/extending/images/deviantart-embedded-media.png diff --git a/14/umbraco-cms/extending-cms/images/element-v8.png b/14/umbraco-cms/extending/images/element-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/element-v8.png rename to 14/umbraco-cms/extending/images/element-v8.png diff --git a/14/umbraco-cms/extending-cms/images/element.png b/14/umbraco-cms/extending/images/element.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/element.png rename to 14/umbraco-cms/extending/images/element.png diff --git a/14/umbraco-cms/extending-cms/images/image-position-v8.png b/14/umbraco-cms/extending/images/image-position-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/image-position-v8.png rename to 14/umbraco-cms/extending/images/image-position-v8.png diff --git a/14/umbraco-cms/extending-cms/images/image-position.png b/14/umbraco-cms/extending/images/image-position.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/image-position.png rename to 14/umbraco-cms/extending/images/image-position.png diff --git a/14/umbraco-cms/extending-cms/images/introstep.png b/14/umbraco-cms/extending/images/introstep.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/introstep.png rename to 14/umbraco-cms/extending/images/introstep.png diff --git a/14/umbraco-cms/extending-cms/images/step-event-element-v8.png b/14/umbraco-cms/extending/images/step-event-element-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/step-event-element-v8.png rename to 14/umbraco-cms/extending/images/step-event-element-v8.png diff --git a/14/umbraco-cms/extending-cms/images/step-event-element.png b/14/umbraco-cms/extending/images/step-event-element.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/step-event-element.png rename to 14/umbraco-cms/extending/images/step-event-element.png diff --git a/14/umbraco-cms/extending-cms/images/stepcontent-v8.png b/14/umbraco-cms/extending/images/stepcontent-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/stepcontent-v8.png rename to 14/umbraco-cms/extending/images/stepcontent-v8.png diff --git a/14/umbraco-cms/extending-cms/images/stepcontent.png b/14/umbraco-cms/extending/images/stepcontent.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/stepcontent.png rename to 14/umbraco-cms/extending/images/stepcontent.png diff --git a/14/umbraco-cms/extending-cms/images/steptitle-v8.png b/14/umbraco-cms/extending/images/steptitle-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/steptitle-v8.png rename to 14/umbraco-cms/extending/images/steptitle-v8.png diff --git a/14/umbraco-cms/extending-cms/images/steptitle.png b/14/umbraco-cms/extending/images/steptitle.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/steptitle.png rename to 14/umbraco-cms/extending/images/steptitle.png diff --git a/14/umbraco-cms/extending-cms/images/the-dashboard-package.png b/14/umbraco-cms/extending/images/the-dashboard-package.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/the-dashboard-package.png rename to 14/umbraco-cms/extending/images/the-dashboard-package.png diff --git a/14/umbraco-cms/extending-cms/images/tourallowdisable-v8.png b/14/umbraco-cms/extending/images/tourallowdisable-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/tourallowdisable-v8.png rename to 14/umbraco-cms/extending/images/tourallowdisable-v8.png diff --git a/14/umbraco-cms/extending-cms/images/tourallowdisable.png b/14/umbraco-cms/extending/images/tourallowdisable.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/tourallowdisable.png rename to 14/umbraco-cms/extending/images/tourallowdisable.png diff --git a/14/umbraco-cms/extending-cms/images/tourgroup-v8.png b/14/umbraco-cms/extending/images/tourgroup-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/tourgroup-v8.png rename to 14/umbraco-cms/extending/images/tourgroup-v8.png diff --git a/14/umbraco-cms/extending-cms/images/tourgroup.png b/14/umbraco-cms/extending/images/tourgroup.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/tourgroup.png rename to 14/umbraco-cms/extending/images/tourgroup.png diff --git a/14/umbraco-cms/extending-cms/images/tourname-v8.png b/14/umbraco-cms/extending/images/tourname-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/tourname-v8.png rename to 14/umbraco-cms/extending/images/tourname-v8.png diff --git a/14/umbraco-cms/extending-cms/images/tourname.png b/14/umbraco-cms/extending/images/tourname.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/tourname.png rename to 14/umbraco-cms/extending/images/tourname.png diff --git a/14/umbraco-cms/extending-cms/images/welcome-example.png b/14/umbraco-cms/extending/images/welcome-example.png similarity index 100% rename from 14/umbraco-cms/extending-cms/images/welcome-example.png rename to 14/umbraco-cms/extending/images/welcome-example.png diff --git a/14/umbraco-cms/extending-cms/key-vault.md b/14/umbraco-cms/extending/key-vault.md similarity index 100% rename from 14/umbraco-cms/extending-cms/key-vault.md rename to 14/umbraco-cms/extending/key-vault.md diff --git a/14/umbraco-cms/extending-backoffice/localization/README.md b/14/umbraco-cms/extending/language-files/README.md similarity index 93% rename from 14/umbraco-cms/extending-backoffice/localization/README.md rename to 14/umbraco-cms/extending/language-files/README.md index c9527536155..95adbe0fb97 100644 --- a/14/umbraco-cms/extending-backoffice/localization/README.md +++ b/14/umbraco-cms/extending/language-files/README.md @@ -4,7 +4,7 @@ description: >- localization files. --- -# Localization +# Language Files & Localization Localization files are used to translate: @@ -14,7 +14,7 @@ Localization files are used to translate: You can also: * Override existing language files. -* Include translations for your own package. Read [Add translations for your packages](../../extending-cms/packages/language-files-for-packages.md) to see how to you can achieve this. +* Include translations for your own package. Read [Add translations for your packages](../../extending/packages/language-files-for-packages.md) to see how to you can achieve this. ## [.NET Localization](net-localization.md) diff --git a/14/umbraco-cms/extending-backoffice/localization/net-localization.md b/14/umbraco-cms/extending/language-files/net-localization.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/localization/net-localization.md rename to 14/umbraco-cms/extending/language-files/net-localization.md diff --git a/14/umbraco-cms/extending-backoffice/localization/ui-localization.md b/14/umbraco-cms/extending/language-files/ui-localization.md similarity index 89% rename from 14/umbraco-cms/extending-backoffice/localization/ui-localization.md rename to 14/umbraco-cms/extending/language-files/ui-localization.md index 24a48bbd0a2..8397a3b1857 100644 --- a/14/umbraco-cms/extending-backoffice/localization/ui-localization.md +++ b/14/umbraco-cms/extending/language-files/ui-localization.md @@ -4,7 +4,7 @@ description: Learn how to manage and use the UI Localization files. # UI Localization -This article describes how you can use the UI Localization files via the [Package Manifest](../development-flow/package-manifest.md). +This article describes how you can use the UI Localization files via the [Package Manifest](../property-editors/package-manifest.md). ## Default Localization @@ -13,6 +13,7 @@ If you want the dashboard to be available in different languages, you can use th To register localizations to a language, you need to add a new manifest to the Extension API. The manifest can be added through the `umbraco-package.json` file like this: {% code title="umbraco-package.json" %} + ```typescript { ... @@ -30,19 +31,20 @@ To register localizations to a language, you need to add a new manifest to the E ] } ``` + {% endcode %} If you do not have many translations, you can also choose to include them directly in the meta-object like so: ```typescript "meta": { - "culture": "en-us", - "translations": { - "section": { - "key1": "value1", - "key2": "value2" - } - } + "culture": "en-us", + "translations": { + "section": { + "key1": "value1", + "key2": "value2" + } + } } ``` @@ -52,10 +54,10 @@ The localization files for the UI are JS modules with a default export containin ```js export default { - section: { - key1: 'value1', - key2: 'value2', - }, + section: { + key1: 'value1', + key2: 'value2', + }, }; ``` @@ -65,16 +67,16 @@ The values can be either a string or a function that returns a string: ```js export default { - section: { - key1: 'value1', - key2: (count) => { - count = parseInt(count, 10); - if (count === 0) return 'Nothing'; - if (count === 1) return 'One thing'; - return 'Many things'; - }, - }, -}; + section: { + key1: 'value1', + key2: (count) => { + count = parseInt(count, 10); + if (count === 0) return 'Nothing'; + if (count === 1) return 'One thing'; + return 'Many things'; + }, + }, +}; ``` ### Missing Localization Keys @@ -144,8 +146,8 @@ export class MyController extends UmbControllerBase { private localize = new UmbLocalizationController(this); render() { - return html` `; - } + return html` `; + } } ``` diff --git a/14/umbraco-cms/extending-cms/packages/README.md b/14/umbraco-cms/extending/packages/README.md similarity index 99% rename from 14/umbraco-cms/extending-cms/packages/README.md rename to 14/umbraco-cms/extending/packages/README.md index 9a982b4c383..6820b78adae 100644 --- a/14/umbraco-cms/extending-cms/packages/README.md +++ b/14/umbraco-cms/extending/packages/README.md @@ -23,7 +23,6 @@ Packages provide a wide variety of functionality, and can often span multiple ca - [Schema Extensions](#schema-extensions) - [Management Extensions](#management-extensions) - [Starter Kits](#starter-kits) -- [Content Apps](#content-apps) - [Integration Extensions](#integration-extensions) #### Schema Extensions diff --git a/14/umbraco-cms/extending-cms/packages/accessibility.md b/14/umbraco-cms/extending/packages/accessibility.md similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/accessibility.md rename to 14/umbraco-cms/extending/packages/accessibility.md diff --git a/14/umbraco-cms/extending-cms/packages/creating-a-package.md b/14/umbraco-cms/extending/packages/creating-a-package.md similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/creating-a-package.md rename to 14/umbraco-cms/extending/packages/creating-a-package.md diff --git a/14/umbraco-cms/extending-cms/packages/example-package-repository.md b/14/umbraco-cms/extending/packages/example-package-repository.md similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/example-package-repository.md rename to 14/umbraco-cms/extending/packages/example-package-repository.md diff --git a/14/umbraco-cms/extending-cms/packages/good-practice-and-defaults.md b/14/umbraco-cms/extending/packages/good-practice-and-defaults.md similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/good-practice-and-defaults.md rename to 14/umbraco-cms/extending/packages/good-practice-and-defaults.md diff --git a/14/umbraco-cms/extending-cms/packages/images/PackagesPage.png b/14/umbraco-cms/extending/packages/images/PackagesPage.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/PackagesPage.png rename to 14/umbraco-cms/extending/packages/images/PackagesPage.png diff --git a/14/umbraco-cms/extending-cms/packages/images/app-pligins-contents.png b/14/umbraco-cms/extending/packages/images/app-pligins-contents.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/app-pligins-contents.png rename to 14/umbraco-cms/extending/packages/images/app-pligins-contents.png diff --git a/14/umbraco-cms/extending-cms/packages/images/app-plugins-starterkit.png b/14/umbraco-cms/extending/packages/images/app-plugins-starterkit.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/app-plugins-starterkit.png rename to 14/umbraco-cms/extending/packages/images/app-plugins-starterkit.png diff --git a/14/umbraco-cms/extending-cms/packages/images/backoffice-installed-packages.png b/14/umbraco-cms/extending/packages/images/backoffice-installed-packages.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/backoffice-installed-packages.png rename to 14/umbraco-cms/extending/packages/images/backoffice-installed-packages.png diff --git a/14/umbraco-cms/extending-cms/packages/images/backoffice-package-section.png b/14/umbraco-cms/extending/packages/images/backoffice-package-section.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/backoffice-package-section.png rename to 14/umbraco-cms/extending/packages/images/backoffice-package-section.png diff --git a/14/umbraco-cms/extending-cms/packages/images/backoffice-packages-section-package.png b/14/umbraco-cms/extending/packages/images/backoffice-packages-section-package.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/backoffice-packages-section-package.png rename to 14/umbraco-cms/extending/packages/images/backoffice-packages-section-package.png diff --git a/14/umbraco-cms/extending-cms/packages/images/backoffice-packages-section.png b/14/umbraco-cms/extending/packages/images/backoffice-packages-section.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/backoffice-packages-section.png rename to 14/umbraco-cms/extending/packages/images/backoffice-packages-section.png diff --git a/14/umbraco-cms/extending-cms/packages/images/cloud-flow.png b/14/umbraco-cms/extending/packages/images/cloud-flow.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/cloud-flow.png rename to 14/umbraco-cms/extending/packages/images/cloud-flow.png diff --git a/14/umbraco-cms/extending-cms/packages/images/creating-package-menu-v9.png b/14/umbraco-cms/extending/packages/images/creating-package-menu-v9.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/creating-package-menu-v9.png rename to 14/umbraco-cms/extending/packages/images/creating-package-menu-v9.png diff --git a/14/umbraco-cms/extending-cms/packages/images/creating-package-menu.png b/14/umbraco-cms/extending/packages/images/creating-package-menu.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/creating-package-menu.png rename to 14/umbraco-cms/extending/packages/images/creating-package-menu.png diff --git a/14/umbraco-cms/extending-cms/packages/images/display-retired.png b/14/umbraco-cms/extending/packages/images/display-retired.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/display-retired.png rename to 14/umbraco-cms/extending/packages/images/display-retired.png diff --git a/14/umbraco-cms/extending-cms/packages/images/download-package-button.png b/14/umbraco-cms/extending/packages/images/download-package-button.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/download-package-button.png rename to 14/umbraco-cms/extending/packages/images/download-package-button.png diff --git a/14/umbraco-cms/extending-cms/packages/images/embeded-resource-props.png b/14/umbraco-cms/extending/packages/images/embeded-resource-props.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/embeded-resource-props.png rename to 14/umbraco-cms/extending/packages/images/embeded-resource-props.png diff --git a/14/umbraco-cms/extending-cms/packages/images/embeded-resource.png b/14/umbraco-cms/extending/packages/images/embeded-resource.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/embeded-resource.png rename to 14/umbraco-cms/extending/packages/images/embeded-resource.png diff --git a/14/umbraco-cms/extending-cms/packages/images/embeded-zip-resource.png b/14/umbraco-cms/extending/packages/images/embeded-zip-resource.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/embeded-zip-resource.png rename to 14/umbraco-cms/extending/packages/images/embeded-zip-resource.png diff --git a/14/umbraco-cms/extending-cms/packages/images/empty-package-from-template.png b/14/umbraco-cms/extending/packages/images/empty-package-from-template.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/empty-package-from-template.png rename to 14/umbraco-cms/extending/packages/images/empty-package-from-template.png diff --git a/14/umbraco-cms/extending-cms/packages/images/flag-as-retired.png b/14/umbraco-cms/extending/packages/images/flag-as-retired.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/flag-as-retired.png rename to 14/umbraco-cms/extending/packages/images/flag-as-retired.png diff --git a/14/umbraco-cms/extending-cms/packages/images/forum-create.png b/14/umbraco-cms/extending/packages/images/forum-create.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/forum-create.png rename to 14/umbraco-cms/extending/packages/images/forum-create.png diff --git a/14/umbraco-cms/extending-cms/packages/images/forums-display.png b/14/umbraco-cms/extending/packages/images/forums-display.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/forums-display.png rename to 14/umbraco-cms/extending/packages/images/forums-display.png diff --git a/14/umbraco-cms/extending-cms/packages/images/forums-link.png b/14/umbraco-cms/extending/packages/images/forums-link.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/forums-link.png rename to 14/umbraco-cms/extending/packages/images/forums-link.png diff --git a/14/umbraco-cms/extending-cms/packages/images/fromArtifact.png b/14/umbraco-cms/extending/packages/images/fromArtifact.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/fromArtifact.png rename to 14/umbraco-cms/extending/packages/images/fromArtifact.png diff --git a/14/umbraco-cms/extending-cms/packages/images/hitting-breakpoints.png b/14/umbraco-cms/extending/packages/images/hitting-breakpoints.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/hitting-breakpoints.png rename to 14/umbraco-cms/extending/packages/images/hitting-breakpoints.png diff --git a/14/umbraco-cms/extending-cms/packages/images/installed-package-leftovers-backoffice.png b/14/umbraco-cms/extending/packages/images/installed-package-leftovers-backoffice.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/installed-package-leftovers-backoffice.png rename to 14/umbraco-cms/extending/packages/images/installed-package-leftovers-backoffice.png diff --git a/14/umbraco-cms/extending-cms/packages/images/installed-package.png b/14/umbraco-cms/extending/packages/images/installed-package.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/installed-package.png rename to 14/umbraco-cms/extending/packages/images/installed-package.png diff --git a/14/umbraco-cms/extending-cms/packages/images/nuget-installing-options.png b/14/umbraco-cms/extending/packages/images/nuget-installing-options.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/nuget-installing-options.png rename to 14/umbraco-cms/extending/packages/images/nuget-installing-options.png diff --git a/14/umbraco-cms/extending-cms/packages/images/nuget-package-in-manager.png b/14/umbraco-cms/extending/packages/images/nuget-package-in-manager.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/nuget-package-in-manager.png rename to 14/umbraco-cms/extending/packages/images/nuget-package-in-manager.png diff --git a/14/umbraco-cms/extending-cms/packages/images/package-files-list.png b/14/umbraco-cms/extending/packages/images/package-files-list.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/package-files-list.png rename to 14/umbraco-cms/extending/packages/images/package-files-list.png diff --git a/14/umbraco-cms/extending-cms/packages/images/package-install-attended.png b/14/umbraco-cms/extending/packages/images/package-install-attended.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/package-install-attended.png rename to 14/umbraco-cms/extending/packages/images/package-install-attended.png diff --git a/14/umbraco-cms/extending-cms/packages/images/package-options.gif b/14/umbraco-cms/extending/packages/images/package-options.gif similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/package-options.gif rename to 14/umbraco-cms/extending/packages/images/package-options.gif diff --git a/14/umbraco-cms/extending-cms/packages/images/package-properties.png b/14/umbraco-cms/extending/packages/images/package-properties.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/package-properties.png rename to 14/umbraco-cms/extending/packages/images/package-properties.png diff --git a/14/umbraco-cms/extending-cms/packages/images/property-editor.png b/14/umbraco-cms/extending/packages/images/property-editor.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/property-editor.png rename to 14/umbraco-cms/extending/packages/images/property-editor.png diff --git a/14/umbraco-cms/extending-cms/packages/images/removing-content.png b/14/umbraco-cms/extending/packages/images/removing-content.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/removing-content.png rename to 14/umbraco-cms/extending/packages/images/removing-content.png diff --git a/14/umbraco-cms/extending-cms/packages/images/removing-datatypes.png b/14/umbraco-cms/extending/packages/images/removing-datatypes.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/removing-datatypes.png rename to 14/umbraco-cms/extending/packages/images/removing-datatypes.png diff --git a/14/umbraco-cms/extending-cms/packages/images/removing-document-types.png b/14/umbraco-cms/extending/packages/images/removing-document-types.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/removing-document-types.png rename to 14/umbraco-cms/extending/packages/images/removing-document-types.png diff --git a/14/umbraco-cms/extending-cms/packages/images/removing-media.png b/14/umbraco-cms/extending/packages/images/removing-media.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/removing-media.png rename to 14/umbraco-cms/extending/packages/images/removing-media.png diff --git a/14/umbraco-cms/extending-cms/packages/images/removing-partials.png b/14/umbraco-cms/extending/packages/images/removing-partials.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/removing-partials.png rename to 14/umbraco-cms/extending/packages/images/removing-partials.png diff --git a/14/umbraco-cms/extending-cms/packages/images/removing-templates.png b/14/umbraco-cms/extending/packages/images/removing-templates.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/removing-templates.png rename to 14/umbraco-cms/extending/packages/images/removing-templates.png diff --git a/14/umbraco-cms/extending-cms/packages/images/select-files-for-package.png b/14/umbraco-cms/extending/packages/images/select-files-for-package.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/select-files-for-package.png rename to 14/umbraco-cms/extending/packages/images/select-files-for-package.png diff --git a/14/umbraco-cms/extending-cms/packages/images/seochecker-after-removal.png b/14/umbraco-cms/extending/packages/images/seochecker-after-removal.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/seochecker-after-removal.png rename to 14/umbraco-cms/extending/packages/images/seochecker-after-removal.png diff --git a/14/umbraco-cms/extending-cms/packages/images/seochecker-app-plugins.png b/14/umbraco-cms/extending/packages/images/seochecker-app-plugins.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/seochecker-app-plugins.png rename to 14/umbraco-cms/extending/packages/images/seochecker-app-plugins.png diff --git a/14/umbraco-cms/extending-cms/packages/images/seochecker-content-section.png b/14/umbraco-cms/extending/packages/images/seochecker-content-section.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/seochecker-content-section.png rename to 14/umbraco-cms/extending/packages/images/seochecker-content-section.png diff --git a/14/umbraco-cms/extending-cms/packages/images/specify-version-info.png b/14/umbraco-cms/extending/packages/images/specify-version-info.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/specify-version-info.png rename to 14/umbraco-cms/extending/packages/images/specify-version-info.png diff --git a/14/umbraco-cms/extending-cms/packages/images/steppingThroughCode.png b/14/umbraco-cms/extending/packages/images/steppingThroughCode.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/steppingThroughCode.png rename to 14/umbraco-cms/extending/packages/images/steppingThroughCode.png diff --git a/14/umbraco-cms/extending-cms/packages/images/team-link.png b/14/umbraco-cms/extending/packages/images/team-link.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/team-link.png rename to 14/umbraco-cms/extending/packages/images/team-link.png diff --git a/14/umbraco-cms/extending-cms/packages/images/uninstalling-via-nuget-package-manager.png b/14/umbraco-cms/extending/packages/images/uninstalling-via-nuget-package-manager.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/uninstalling-via-nuget-package-manager.png rename to 14/umbraco-cms/extending/packages/images/uninstalling-via-nuget-package-manager.png diff --git a/14/umbraco-cms/extending-cms/packages/images/valueconnector.gif b/14/umbraco-cms/extending/packages/images/valueconnector.gif similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/valueconnector.gif rename to 14/umbraco-cms/extending/packages/images/valueconnector.gif diff --git a/14/umbraco-cms/extending-cms/packages/images/vs-cleaning-solution.png b/14/umbraco-cms/extending/packages/images/vs-cleaning-solution.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/vs-cleaning-solution.png rename to 14/umbraco-cms/extending/packages/images/vs-cleaning-solution.png diff --git a/14/umbraco-cms/extending-cms/packages/images/zip-package-v9.png b/14/umbraco-cms/extending/packages/images/zip-package-v9.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/zip-package-v9.png rename to 14/umbraco-cms/extending/packages/images/zip-package-v9.png diff --git a/14/umbraco-cms/extending-cms/packages/images/zip-package.png b/14/umbraco-cms/extending/packages/images/zip-package.png similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/images/zip-package.png rename to 14/umbraco-cms/extending/packages/images/zip-package.png diff --git a/14/umbraco-cms/extending-cms/packages/installing-and-uninstalling-packages.md b/14/umbraco-cms/extending/packages/installing-and-uninstalling-packages.md similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/installing-and-uninstalling-packages.md rename to 14/umbraco-cms/extending/packages/installing-and-uninstalling-packages.md diff --git a/14/umbraco-cms/extending-cms/packages/language-files-for-packages.md b/14/umbraco-cms/extending/packages/language-files-for-packages.md similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/language-files-for-packages.md rename to 14/umbraco-cms/extending/packages/language-files-for-packages.md diff --git a/14/umbraco-cms/extending-cms/packages/listing-on-marketplace.md b/14/umbraco-cms/extending/packages/listing-on-marketplace.md similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/listing-on-marketplace.md rename to 14/umbraco-cms/extending/packages/listing-on-marketplace.md diff --git a/14/umbraco-cms/extending-cms/packages/maintaining-packages.md b/14/umbraco-cms/extending/packages/maintaining-packages.md similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/maintaining-packages.md rename to 14/umbraco-cms/extending/packages/maintaining-packages.md diff --git a/14/umbraco-cms/extending-cms/packages/packages-on-umbraco-cloud.md b/14/umbraco-cms/extending/packages/packages-on-umbraco-cloud.md similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/packages-on-umbraco-cloud.md rename to 14/umbraco-cms/extending/packages/packages-on-umbraco-cloud.md diff --git a/14/umbraco-cms/extending-cms/packages/types-of-packages.md b/14/umbraco-cms/extending/packages/types-of-packages.md similarity index 100% rename from 14/umbraco-cms/extending-cms/packages/types-of-packages.md rename to 14/umbraco-cms/extending/packages/types-of-packages.md diff --git a/14/umbraco-cms/extending-cms/property-editors/README.md b/14/umbraco-cms/extending/property-editors/README.md similarity index 83% rename from 14/umbraco-cms/extending-cms/property-editors/README.md rename to 14/umbraco-cms/extending/property-editors/README.md index f5ba2ec255e..1ee8d6de358 100644 --- a/14/umbraco-cms/extending-cms/property-editors/README.md +++ b/14/umbraco-cms/extending/property-editors/README.md @@ -4,8 +4,16 @@ description: Guide on how to work with and create Property Editors in Umbraco # Property Editors +{% hint style="warning" %} +This page is a work in progress. It will be updated as the software evolves. +{% endhint %} + This section describes how to work with and create Property Editors. A property editor is the editor used to insert content into Umbraco. [See here for definition](../../fundamentals/backoffice/property-editors/) +## Property Editors Composition + +A property editor is an editor used to insert content into Umbraco. A Property Editor is composed of two extensions: Property Editor Schema and Property Editor UI. + ## Tutorials - Creating a property editor * [Creating a property editor](../../tutorials/creating-a-property-editor/README.md) diff --git a/14/umbraco-cms/extending-cms/property-editors/build-a-block-editor.md b/14/umbraco-cms/extending/property-editors/build-a-block-editor.md similarity index 100% rename from 14/umbraco-cms/extending-cms/property-editors/build-a-block-editor.md rename to 14/umbraco-cms/extending/property-editors/build-a-block-editor.md diff --git a/14/umbraco-cms/extending-backoffice/extension-types/property-editors/README.md b/14/umbraco-cms/extending/property-editors/composition/README.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-types/property-editors/README.md rename to 14/umbraco-cms/extending/property-editors/composition/README.md diff --git a/14/umbraco-cms/extending-backoffice/extension-types/property-editors/property-editor-schema.md b/14/umbraco-cms/extending/property-editors/composition/property-editor-schema.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-types/property-editors/property-editor-schema.md rename to 14/umbraco-cms/extending/property-editors/composition/property-editor-schema.md diff --git a/14/umbraco-cms/extending-backoffice/extension-types/property-editors/property-editor-ui.md b/14/umbraco-cms/extending/property-editors/composition/property-editor-ui.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-types/property-editors/property-editor-ui.md rename to 14/umbraco-cms/extending/property-editors/composition/property-editor-ui.md diff --git a/14/umbraco-cms/extending-cms/property-editors/declaring-your-property-editor.md b/14/umbraco-cms/extending/property-editors/declaring-your-property-editor.md similarity index 100% rename from 14/umbraco-cms/extending-cms/property-editors/declaring-your-property-editor.md rename to 14/umbraco-cms/extending/property-editors/declaring-your-property-editor.md diff --git a/14/umbraco-cms/extending-cms/property-editors/full-examples-value-converters.md b/14/umbraco-cms/extending/property-editors/full-examples-value-converters.md similarity index 100% rename from 14/umbraco-cms/extending-cms/property-editors/full-examples-value-converters.md rename to 14/umbraco-cms/extending/property-editors/full-examples-value-converters.md diff --git a/14/umbraco-cms/extending-cms/property-editors/images/JSON-schema.png b/14/umbraco-cms/extending/property-editors/images/JSON-schema.png similarity index 100% rename from 14/umbraco-cms/extending-cms/property-editors/images/JSON-schema.png rename to 14/umbraco-cms/extending/property-editors/images/JSON-schema.png diff --git a/14/umbraco-cms/extending-cms/property-editors/images/data-types-references-v10.png b/14/umbraco-cms/extending/property-editors/images/data-types-references-v10.png similarity index 100% rename from 14/umbraco-cms/extending-cms/property-editors/images/data-types-references-v10.png rename to 14/umbraco-cms/extending/property-editors/images/data-types-references-v10.png diff --git a/14/umbraco-cms/extending-cms/property-editors/images/document-references-v9.png b/14/umbraco-cms/extending/property-editors/images/document-references-v9.png similarity index 100% rename from 14/umbraco-cms/extending-cms/property-editors/images/document-references-v9.png rename to 14/umbraco-cms/extending/property-editors/images/document-references-v9.png diff --git a/14/umbraco-cms/extending-cms/property-editors/images/example-of-property-actions (1).jpg b/14/umbraco-cms/extending/property-editors/images/example-of-property-actions (1).jpg similarity index 100% rename from 14/umbraco-cms/extending-cms/property-editors/images/example-of-property-actions (1).jpg rename to 14/umbraco-cms/extending/property-editors/images/example-of-property-actions (1).jpg diff --git a/14/umbraco-cms/extending-cms/property-editors/images/example-of-property-actions.jpg b/14/umbraco-cms/extending/property-editors/images/example-of-property-actions.jpg similarity index 100% rename from 14/umbraco-cms/extending-cms/property-editors/images/example-of-property-actions.jpg rename to 14/umbraco-cms/extending/property-editors/images/example-of-property-actions.jpg diff --git a/14/umbraco-cms/extending-cms/property-editors/images/media-references-v9.png b/14/umbraco-cms/extending/property-editors/images/media-references-v9.png similarity index 100% rename from 14/umbraco-cms/extending-cms/property-editors/images/media-references-v9.png rename to 14/umbraco-cms/extending/property-editors/images/media-references-v9.png diff --git a/14/umbraco-cms/extending-backoffice/development-flow/package-manifest.md b/14/umbraco-cms/extending/property-editors/package-manifest.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/development-flow/package-manifest.md rename to 14/umbraco-cms/extending/property-editors/package-manifest.md diff --git a/14/umbraco-cms/extending-cms/property-editors/property-actions.md b/14/umbraco-cms/extending/property-editors/property-actions.md similarity index 98% rename from 14/umbraco-cms/extending-cms/property-editors/property-actions.md rename to 14/umbraco-cms/extending/property-editors/property-actions.md index 4dabaf6a847..8e7ecbefe15 100644 --- a/14/umbraco-cms/extending-cms/property-editors/property-actions.md +++ b/14/umbraco-cms/extending/property-editors/property-actions.md @@ -22,7 +22,7 @@ Property Actions are an array of objects defining each action. An action is defi } ``` -We use `labelKey` and `labelTokens` to retrieve a localized string that is displayed as the Actions label. [See localization for more info.](../language-files.md) +We use `labelKey` and `labelTokens` to retrieve a localized string that is displayed as the Actions label. [See localization for more info.](../language-files/README.md) `isDisabled` is used to disable an Action, which change the visual appearance and prevents interaction. Use this option when an action wouldn't provide any change. In the example above, the action `remove all entries` would not have any impact if there is no entries. diff --git a/14/umbraco-cms/extending-cms/property-editors/property-value-converters.md b/14/umbraco-cms/extending/property-editors/property-value-converters.md similarity index 100% rename from 14/umbraco-cms/extending-cms/property-editors/property-value-converters.md rename to 14/umbraco-cms/extending/property-editors/property-value-converters.md diff --git a/14/umbraco-cms/extending-cms/property-editors/tracking.md b/14/umbraco-cms/extending/property-editors/tracking.md similarity index 100% rename from 14/umbraco-cms/extending-cms/property-editors/tracking.md rename to 14/umbraco-cms/extending/property-editors/tracking.md diff --git a/14/umbraco-cms/extending-cms/section-trees/README.md b/14/umbraco-cms/extending/section-trees/README.md similarity index 96% rename from 14/umbraco-cms/extending-cms/section-trees/README.md rename to 14/umbraco-cms/extending/section-trees/README.md index 10277d66dd6..20852e548ad 100644 --- a/14/umbraco-cms/extending-cms/section-trees/README.md +++ b/14/umbraco-cms/extending/section-trees/README.md @@ -12,7 +12,7 @@ For example, when you load the backoffice, you'll see that the 'Content' section You can create your own sections and trees to extend Umbraco. -## [Sections](sections.md) +## [Sections](sections/README.md) Describes Umbraco Sections, configuration and APIs. diff --git a/14/umbraco-cms/extending-cms/section-trees/images/add-custom-section-v8 (1).png b/14/umbraco-cms/extending/section-trees/images/add-custom-section-v8 (1).png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/images/add-custom-section-v8 (1).png rename to 14/umbraco-cms/extending/section-trees/images/add-custom-section-v8 (1).png diff --git a/14/umbraco-cms/extending-cms/section-trees/images/add-custom-section-v8.png b/14/umbraco-cms/extending/section-trees/images/add-custom-section-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/images/add-custom-section-v8.png rename to 14/umbraco-cms/extending/section-trees/images/add-custom-section-v8.png diff --git a/14/umbraco-cms/extending-cms/section-trees/images/add-custom-section.png b/14/umbraco-cms/extending/section-trees/images/add-custom-section.png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/images/add-custom-section.png rename to 14/umbraco-cms/extending/section-trees/images/add-custom-section.png diff --git a/14/umbraco-cms/extending-cms/section-trees/images/backoffice-search-v8 (1).png b/14/umbraco-cms/extending/section-trees/images/backoffice-search-v8 (1).png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/images/backoffice-search-v8 (1).png rename to 14/umbraco-cms/extending/section-trees/images/backoffice-search-v8 (1).png diff --git a/14/umbraco-cms/extending-cms/section-trees/images/backoffice-search-v8.png b/14/umbraco-cms/extending/section-trees/images/backoffice-search-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/images/backoffice-search-v8.png rename to 14/umbraco-cms/extending/section-trees/images/backoffice-search-v8.png diff --git a/14/umbraco-cms/extending-cms/section-trees/images/backoffice-search.png b/14/umbraco-cms/extending/section-trees/images/backoffice-search.png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/images/backoffice-search.png rename to 14/umbraco-cms/extending/section-trees/images/backoffice-search.png diff --git a/14/umbraco-cms/extending-cms/section-trees/images/custom-section-alias-v8 (1).png b/14/umbraco-cms/extending/section-trees/images/custom-section-alias-v8 (1).png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/images/custom-section-alias-v8 (1).png rename to 14/umbraco-cms/extending/section-trees/images/custom-section-alias-v8 (1).png diff --git a/14/umbraco-cms/extending-cms/section-trees/images/custom-section-alias-v8.png b/14/umbraco-cms/extending/section-trees/images/custom-section-alias-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/images/custom-section-alias-v8.png rename to 14/umbraco-cms/extending/section-trees/images/custom-section-alias-v8.png diff --git a/14/umbraco-cms/extending-cms/section-trees/images/custom-section-alias.png b/14/umbraco-cms/extending/section-trees/images/custom-section-alias.png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/images/custom-section-alias.png rename to 14/umbraco-cms/extending/section-trees/images/custom-section-alias.png diff --git a/14/umbraco-cms/extending-cms/section-trees/images/favouritethings-search-v8 (1).png b/14/umbraco-cms/extending/section-trees/images/favouritethings-search-v8 (1).png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/images/favouritethings-search-v8 (1).png rename to 14/umbraco-cms/extending/section-trees/images/favouritethings-search-v8 (1).png diff --git a/14/umbraco-cms/extending-cms/section-trees/images/favouritethings-search-v8.png b/14/umbraco-cms/extending/section-trees/images/favouritethings-search-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/images/favouritethings-search-v8.png rename to 14/umbraco-cms/extending/section-trees/images/favouritethings-search-v8.png diff --git a/14/umbraco-cms/extending-cms/section-trees/images/favouritethings-search.png b/14/umbraco-cms/extending/section-trees/images/favouritethings-search.png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/images/favouritethings-search.png rename to 14/umbraco-cms/extending/section-trees/images/favouritethings-search.png diff --git a/14/umbraco-cms/extending-cms/section-trees/searchable-trees.md b/14/umbraco-cms/extending/section-trees/searchable-trees.md similarity index 98% rename from 14/umbraco-cms/extending-cms/section-trees/searchable-trees.md rename to 14/umbraco-cms/extending/section-trees/searchable-trees.md index 20d42b5528e..778aef11478 100644 --- a/14/umbraco-cms/extending-cms/section-trees/searchable-trees.md +++ b/14/umbraco-cms/extending/section-trees/searchable-trees.md @@ -1,5 +1,9 @@ # Searchable Trees (ISearchableTree) +{% hint style="warning" %} +This page is a work in progress. It will be updated as the software evolves. +{% endhint %} + When you type a search term into the Umbraco backoffice search field, you'll see search results from all the Section Trees that your user account has permission to access: ![Content Section Dashboards](<../../../../10/umbraco-cms/extending/section-trees/images/backoffice-search-v8 (1).png>) diff --git a/14/umbraco-cms/extending-backoffice/extension-types/sections/README.md b/14/umbraco-cms/extending/section-trees/sections/README.md similarity index 92% rename from 14/umbraco-cms/extending-backoffice/extension-types/sections/README.md rename to 14/umbraco-cms/extending/section-trees/sections/README.md index 668475ea7f8..c0817397cd6 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/sections/README.md +++ b/14/umbraco-cms/extending/section-trees/sections/README.md @@ -22,7 +22,7 @@ You can create your own sections and trees to extend Umbraco.\\ ### **Manifests** -When creating a new section it's recommended to use a [Entry Point](../../extension-registry/entry-point.md)-extension in your [Umbraco Package Manifest](../../development-flow/package-manifest.md). This is to get better control over all the additional extensions required for the new section. +When creating a new section it's recommended to use a [Entry Point](../../backoffice-setup/extension-registry/entry-point.md)-extension in your [Umbraco Package Manifest](../../property-editors/package-manifest.md). This is to get better control over all the additional extensions required for the new section. 1. In the manifest file add the following: diff --git a/14/umbraco-cms/extending-backoffice/extension-types/sections/section-sidebar.md b/14/umbraco-cms/extending/section-trees/sections/section-sidebar.md similarity index 79% rename from 14/umbraco-cms/extending-backoffice/extension-types/sections/section-sidebar.md rename to 14/umbraco-cms/extending/section-trees/sections/section-sidebar.md index 25c7200c390..8eb6f6193ed 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/sections/section-sidebar.md +++ b/14/umbraco-cms/extending/section-trees/sections/section-sidebar.md @@ -17,12 +17,12 @@ TODO: Introduction to Section Sidebar Apps ```typescript // TODO: add interface { - "type": "sectionSidebarApp", - "alias": "My.SectionSidebarApp", - "name": "My Section Sidebar App", - "meta": { - "sections": ["My.Section"] - } + "type": "sectionSidebarApp", + "alias": "My.SectionSidebarApp", + "name": "My Section Sidebar App", + "meta": { + "sections": ["My.Section"] + } } ``` @@ -47,14 +47,14 @@ TODO: Introduction to the sidebar menu ```typescript { - "type": "menuSectionSidebarApp", - "alias": "My.SectionSidebarApp.MyMenu", - "name": "My Menu Section Sidebar App", - "meta": { - "label": "My Sidebar Menu", - "sections": ["My.Section"], - "menu": "My.Menu" - } + "type": "menuSectionSidebarApp", + "alias": "My.SectionSidebarApp.MyMenu", + "name": "My Menu Section Sidebar App", + "meta": { + "label": "My Sidebar Menu", + "sections": ["My.Section"], + "menu": "My.Menu" + } } ``` @@ -71,4 +71,4 @@ This will make it possible to compose a sidebar menu from multiple Apps:

Composed sidebar menu

-You can read more about this in the [Menu ](../menu/)article. +You can read more about this in the [Menu](../menu/) article. diff --git a/14/umbraco-cms/extending-backoffice/extension-types/sections/section-view.md b/14/umbraco-cms/extending/section-trees/sections/section-view.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-types/sections/section-view.md rename to 14/umbraco-cms/extending/section-trees/sections/section-view.md diff --git a/14/umbraco-cms/extending-backoffice/extension-types/menu/trees.md b/14/umbraco-cms/extending/section-trees/trees/README.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-types/menu/trees.md rename to 14/umbraco-cms/extending/section-trees/trees/README.md diff --git a/14/umbraco-cms/extending-backoffice/extension-types/entity-actions/README.md b/14/umbraco-cms/extending/section-trees/trees/entity-actions.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-types/entity-actions/README.md rename to 14/umbraco-cms/extending/section-trees/trees/entity-actions.md diff --git a/14/umbraco-cms/extending-backoffice/extension-types/entity-actions/entity-bulk-actions.md b/14/umbraco-cms/extending/section-trees/trees/entity-bulk-actions.md similarity index 73% rename from 14/umbraco-cms/extending-backoffice/extension-types/entity-actions/entity-bulk-actions.md rename to 14/umbraco-cms/extending/section-trees/trees/entity-bulk-actions.md index b2c982aab28..f55b2556ccf 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/entity-actions/entity-bulk-actions.md +++ b/14/umbraco-cms/extending/section-trees/trees/entity-bulk-actions.md @@ -17,22 +17,22 @@ import { extensionRegistry } from '@umbraco-cms/extension-registry'; import { MyEntityBulkAction } from './entity-bulk-action'; const manifest = { - type: 'entityBulkAction', - alias: 'My.EntityBulkAction', - name: 'My Entity Bulk Action', - weight: 10, - api: MyEntityBulkAction, - meta: { - icon: 'icon-add', - label: 'My Entity Bulk Action', - repositoryAlias: 'My.Repository', - }, - conditions: [ - { - alias: 'Umb.Condition.CollectionAlias', - match: 'my-collection-alias', - }, - ], + type: 'entityBulkAction', + alias: 'My.EntityBulkAction', + name: 'My Entity Bulk Action', + weight: 10, + api: MyEntityBulkAction, + meta: { + icon: 'icon-add', + label: 'My Entity Bulk Action', + repositoryAlias: 'My.Repository', + }, + conditions: [ + { + alias: 'Umb.Condition.CollectionAlias', + match: 'my-collection-alias', + }, + ], }; extensionRegistry.register(manifest); @@ -40,7 +40,7 @@ extensionRegistry.register(manifest); ## The Entity Bulk Action Class -As part of the Extension Manifest you can attach a class that will be instanciated as part of the action. It will have access to the host element, a repository with the given alias and the unique (key etc) of the entity. When the action is clicked the `execute` method on the api class will be run. When the action is completed, an event on the host element will be dispatched to notify any surrounding elements. +As part of the Extension Manifest you can attach a class that will be instantiated as part of the action. It will have access to the host element, a repository with the given alias and the unique (key etc) of the entity. When the action is clicked the `execute` method on the api class will be run. When the action is completed, an event on the host element will be dispatched to notify any surrounding elements. ```typescript import { UmbEntityBulkActionBase } from '@umbraco-cms/entity-action'; @@ -48,13 +48,12 @@ import { UmbControllerHostElement } from '@umbraco-cms/controller'; import { MyRepository } from './my-repository'; export class MyEntityBulkAction extends UmbEntityBulkActionBase { - constructor(host: UmbControllerHostElement, repositoryAlias: string, selection: Array) { - super(host, repositoryAlias, selection); - } + constructor(host: UmbControllerHostElement, repositoryAlias: string, selection: Array) { + super(host, repositoryAlias, selection); + } - async execute() { - await this.repository?.myBulkAction(this.selection); - } + async execute() { + await this.repository?.myBulkAction(this.selection); + } } ``` - diff --git a/14/umbraco-cms/extending-cms/section-trees/trees/images/delete-raindrops-on-roses-v8.png b/14/umbraco-cms/extending/section-trees/trees/images/delete-raindrops-on-roses-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/trees/images/delete-raindrops-on-roses-v8.png rename to 14/umbraco-cms/extending/section-trees/trees/images/delete-raindrops-on-roses-v8.png diff --git a/14/umbraco-cms/extending-cms/section-trees/trees/images/favourite-thing-custom-single-node-tree.png b/14/umbraco-cms/extending/section-trees/trees/images/favourite-thing-custom-single-node-tree.png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/trees/images/favourite-thing-custom-single-node-tree.png rename to 14/umbraco-cms/extending/section-trees/trees/images/favourite-thing-custom-single-node-tree.png diff --git a/14/umbraco-cms/extending-cms/section-trees/trees/images/favourite-thing-custom-tree-v8.png b/14/umbraco-cms/extending/section-trees/trees/images/favourite-thing-custom-tree-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/trees/images/favourite-thing-custom-tree-v8.png rename to 14/umbraco-cms/extending/section-trees/trees/images/favourite-thing-custom-tree-v8.png diff --git a/14/umbraco-cms/extending-cms/section-trees/trees/images/favourite-things-custom-tree-v8.png b/14/umbraco-cms/extending/section-trees/trees/images/favourite-things-custom-tree-v8.png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/trees/images/favourite-things-custom-tree-v8.png rename to 14/umbraco-cms/extending/section-trees/trees/images/favourite-things-custom-tree-v8.png diff --git a/14/umbraco-cms/extending-cms/section-trees/trees/images/favourite-things-custom-tree.png b/14/umbraco-cms/extending/section-trees/trees/images/favourite-things-custom-tree.png similarity index 100% rename from 14/umbraco-cms/extending-cms/section-trees/trees/images/favourite-things-custom-tree.png rename to 14/umbraco-cms/extending/section-trees/trees/images/favourite-things-custom-tree.png diff --git a/14/umbraco-cms/extending-backoffice/ui-documentation.md b/14/umbraco-cms/extending/ui-documentation.md similarity index 69% rename from 14/umbraco-cms/extending-backoffice/ui-documentation.md rename to 14/umbraco-cms/extending/ui-documentation.md index 7cecc8f0a2b..a6c3e211f2b 100644 --- a/14/umbraco-cms/extending-backoffice/ui-documentation.md +++ b/14/umbraco-cms/extending/ui-documentation.md @@ -12,6 +12,10 @@ With the UI API, you get a set of collections related to modules export, interfa
Backoffice UI LibrarySee, test, and get a feel for the familiar backoffice components built using the new UI components.https://apidocs.umbraco.com/v14/ui/Documentations Icons_Umbraco_CMS_Fundamentals_Backoffice (1) (2).png
Backoffice UI APISee what all of the modules export, interfaces, hierarchy, code examples, and much more.https://apidocs.umbraco.com/v14/ui-api/index.htmlDocumentations Icons_Umbraco_CMS_Tutorials_the_Starter_Kit (1).png
+## UI Icons + +The icons from the Umbraco backoffice are based on [Lucide Icons](https://lucide.dev/). The syntax for getting the icons starts with`icon-`. You can find the list of all icons in the [Icon registry list on Github](https://github.com/umbraco/Umbraco.CMS.Backoffice/tree/762e43b2f49ca483df9cfe28de20f31ca07bb22b/src/packages/core/icon-registry/icons). + ## UI Library Storybook The Umbraco UI Library is a set of web components that can be used to build Umbraco User Interfaces. The UI Library separates the user interface from Umbraco’s business logic and creates a unified user experience. This is done with coherent styling and naming, across all the Umbraco platforms and projects including the ones developed by you. @@ -22,6 +26,37 @@ Each story has interactive controls that allow you to change the state of the co You can also change the stylesheet of custom properties to see how the component will look like. Every story has a code example that you can copy and paste into your project. This will allow you to implement the components in your own packages and extensions. +### Getting Started with the UI Library + +The [Storybook](https://uui.umbraco.com/) is the starting point for working with the Umbraco UI Library. The Storybook contains two tabs: + +1. Canvas - The Canvas tab allows to use the interactive controls. + +
+2. Docs - Here, you can find code examples for all the stories and use them in your markup. You can look it up by tag name or head to the project repository, where, in the packages folder, you will find all the component packages with all the necessary scripts and examples in the readme files. + +
+ +### Install the UI Library Components + +You can download the UI Library package from [Github](https://github.com/umbraco/Umbraco.UI/tree/v1/contrib/packages). + +If you are installing a component via npm, there are two ways to import it: + +1. To import a specific component and register it at the same time, use the following command: + +```sql +import { UUIButtonElement } from '@umbraco-ui/uui-button'; +``` + +2. To build on top of the components functionality, you can extend its class: + +```sql +import { UUIButtonElement } from '@umbraco-ui/uui-button/lib/uui-button.element'; +``` + +For more information on installation, Content Delivery Networks (CDN), or included components, see the[Readme file in the Github](https://github.com/umbraco/Umbraco.UI#readme)project. + ### Import UI Library Components You can also work with the components on a code level. If you want to do so here is how you import it: @@ -31,9 +66,3 @@ import { UUIButtonElement } from '@umbraco-cms/backoffice/external/uui'; ``` This requires that your Package has the `@umbraco-cms/backoffice` dependency. - -For more information on installation or included components, see the [Readme file](https://github.com/umbraco/Umbraco.UI/blob/dev/packages/uui/README.md) in the [Github](https://github.com/umbraco/Umbraco.UI/tree/dev/packages/uui) project. - -## UI Icons - -The icons from the Umbraco backoffice are based on [Lucide Icons](https://lucide.dev/). The syntax for getting the icons starts with`icon-`. You can find the list of all icons in the [Icon registry list on Github](https://github.com/umbraco/Umbraco.CMS.Backoffice/tree/762e43b2f49ca483df9cfe28de20f31ca07bb22b/src/packages/core/icon-registry/icons). diff --git a/14/umbraco-cms/extending-backoffice/extension-types/workspaces/README.md b/14/umbraco-cms/extending/workspaces/README.md similarity index 89% rename from 14/umbraco-cms/extending-backoffice/extension-types/workspaces/README.md rename to 14/umbraco-cms/extending/workspaces/README.md index dc528e45e67..09401826beb 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/workspaces/README.md +++ b/14/umbraco-cms/extending/workspaces/README.md @@ -10,14 +10,12 @@ description: >- This page is a work in progress. It will be updated as the software evolves. {% endhint %} - - * A workspace is based on an entity type (e.g. content, media, member, etc.) and a unique string (ex: key). * Most workspaces hold a draft state of an entity. It is a copy of the entity data that can be modified at runtime and sent to the server to be saved. * A workspace can be a single view or consist of multiple views. * A workspace should host a workspace context, with which anything within can communicate. -

Workspace

+

Workspace

```ts // TODO: get typescript interface diff --git a/14/umbraco-cms/extending-backoffice/extension-types/workspaces/workspace-context.md b/14/umbraco-cms/extending/workspaces/workspace-context.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-types/workspaces/workspace-context.md rename to 14/umbraco-cms/extending/workspaces/workspace-context.md diff --git a/14/umbraco-cms/extending-backoffice/extension-types/workspaces/workspace-editor-actions.md b/14/umbraco-cms/extending/workspaces/workspace-editor-actions.md similarity index 76% rename from 14/umbraco-cms/extending-backoffice/extension-types/workspaces/workspace-editor-actions.md rename to 14/umbraco-cms/extending/workspaces/workspace-editor-actions.md index d945cdca211..1ed604ed984 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/workspaces/workspace-editor-actions.md +++ b/14/umbraco-cms/extending/workspaces/workspace-editor-actions.md @@ -8,7 +8,7 @@ Workspace actions are a set of functionalities or operations that can be perform Workspace action relates to a workspace alias (Umb.Workspace.Document) and has Access to the workspace context. -

Workspace Actions

+

Workspace Actions

**JavaScript Manifest example** @@ -16,19 +16,19 @@ Workspace action relates to a workspace alias (Umb.Workspace.Document) and has A import { MyWorkspaceAction } from './my-workspace-action'; const manifest = { - type: 'workspaceAction', - alias: 'My.WorkspaceAction', - name: 'My Workspace Action', - meta: { - label: 'My Action', - api: MyWorkspaceAction, - }, - conditions: [ - { - alias: 'Umb.Condition.WorkspaceAlias', - match: 'My.Workspace', - }, - ], + type: 'workspaceAction', + alias: 'My.WorkspaceAction', + name: 'My Workspace Action', + meta: { + label: 'My Action', + api: MyWorkspaceAction, + }, + conditions: [ + { + alias: 'Umb.Condition.WorkspaceAlias', + match: 'My.Workspace', + }, + ], }; extensionRegistry.register(manifest); @@ -42,9 +42,9 @@ As part of the Extension Manifest you can attach a class that will be instantiat import { UmbWorkspaceActionBase } from '@umbraco-cms/backoffice/workspace'; export class MyWorkspaceAction extends UmbWorkspaceActionBase { - execute() { - this.workspaceContext.myAction(this.selection); - } + execute() { + this.workspaceContext.myAction(this.selection); + } } ``` diff --git a/14/umbraco-cms/extending-backoffice/extension-types/workspaces/workspace-editor-views.md b/14/umbraco-cms/extending/workspaces/workspace-editor-views.md similarity index 85% rename from 14/umbraco-cms/extending-backoffice/extension-types/workspaces/workspace-editor-views.md rename to 14/umbraco-cms/extending/workspaces/workspace-editor-views.md index 39ce04eed55..7456b8747de 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/workspaces/workspace-editor-views.md +++ b/14/umbraco-cms/extending/workspaces/workspace-editor-views.md @@ -10,7 +10,7 @@ This page is a work in progress. It will be updated as the software evolves. Previously known as Content Apps, Workspace Views are customizable companion **tabs** with the ability to take place in any workspace. -

Workspace Views

+

Workspace Views

**In Content Section** @@ -20,7 +20,7 @@ The default workspace view is **'Info'** - displaying Links, History and Status ## Example of a Workspace View -1. Follow the [Vite Package Setup](../../development-flow/vite-package-setup.md) by creating a new project folder called "`workspaceview`" in `App_Plugins`. +1. Follow the [Vite Package Setup](../customize-backoffice/development-flow/vite-package-setup.md) by creating a new project folder called "`workspaceview`" in `App_Plugins`. 2. Create a manifest file named `umbraco-package.json` at the root of the `welcome-dashboard` folder. Here we define and configure our dashboard. 3. Add the following code to `umbraco-package.json`: @@ -93,7 +93,7 @@ declare global { In the `workspaceview` folder run `npm run build` and then run the project. Then in the content section of the Backoffice you will see our new Workspace View: -

Workspace View Example

+

Workspace View Example

{% hint style="info" %} To see the Workspace View that we have created in the content section, first you will need to have some content created. diff --git a/14/umbraco-cms/fundamentals/data/defining-content/document-type-localization.md b/14/umbraco-cms/fundamentals/data/defining-content/document-type-localization.md index 35d03803933..f789182cd5a 100644 --- a/14/umbraco-cms/fundamentals/data/defining-content/document-type-localization.md +++ b/14/umbraco-cms/fundamentals/data/defining-content/document-type-localization.md @@ -13,7 +13,7 @@ The Umbraco backoffice is fully localized to match the user's [configured langua Setting up localization for Document Types is a two-step process: -* Create the localizations in [user defined language files](../../../extending/language-files.md). +* Create the localizations in [user defined language files](../../../extending/language-files/README.md). * Apply the localizations to the Document Types. {% hint style="info" %} @@ -27,6 +27,7 @@ User defined language files are created in `/config/lang` and must be named `{la There are no specific requirements as to how localizations should be structured for use in Document Types. The following localizations have been used for the samples in this article: {% code title="en-us.user.xml" lineNumbers="true" %} + ```xml @@ -52,6 +53,7 @@ There are no specific requirements as to how localizations should be structured ``` + {% endcode %} {% hint style="info" %} diff --git a/14/umbraco-cms/fundamentals/setup/upgrading/version-specific/README.md b/14/umbraco-cms/fundamentals/setup/upgrading/version-specific/README.md index bc139accb2a..68ee35c53ed 100644 --- a/14/umbraco-cms/fundamentals/setup/upgrading/version-specific/README.md +++ b/14/umbraco-cms/fundamentals/setup/upgrading/version-specific/README.md @@ -29,7 +29,7 @@ Below you can find the list of breaking changes introduced in Umbraco 14 CMS. * [**AngularJS removed: A new backoffice built with Web Components, Lit, and fueled by the Umbraco UI Library**](https://github.com/umbraco/Umbraco.CMS.Backoffice) -This is by far the most impactful update of Umbraco in years. We’ve fundamentally changed the way you extend Umbraco. If you are experienced in developing Web Components you can now use your preferred framework for this. If you are unsure how to proceed, you can implement it with Typescript and the Lit library like we’ve done. In this case, please start with this article on how to [customize the Backoffice](https://docs.umbraco.com/umbraco-cms/v/14.latest-rc/extending-backoffice/customize-backoffice). +This is by far the most impactful update of Umbraco in years. We’ve fundamentally changed the way you extend Umbraco. If you are experienced in developing Web Components you can now use your preferred framework for this. If you are unsure how to proceed, you can implement it with Typescript and the Lit library like we’ve done. In this case, please start with this article on how to [customize the Backoffice](https://docs.umbraco.com/umbraco-cms/v/14.latest-rc/extending/customize-backoffice). The new Backoffice (Bellissima) is entirely built on the Umbraco UI Library. This means that you might experience some of your components not being rendered on the page because the name has been changed. You should be able to find equivalents to what you were used to. For example, the `umb-button` is now called `uui-button`, and `umb-box` is now `uui-box`. When extending the Backoffice, we encourage you to use our [Umbraco UI Library](https://uui.umbraco.com/) to ensure the same look and feel in your extensions. The UI Library is Open Source and [hosted on GitHub](https://github.com/umbraco/Umbraco.UI), so feel free to contribute with new components or raise issues or discussions. @@ -45,7 +45,7 @@ To add custom icons to the Backoffice, you must add an extension type called “ Translations used in the UI (which are most of them) have been migrated from XML to JavaScript modules. This means that if you wish to override any of the built-in translation keys for the UI, you will now have to add an extension type called “localization”. It is still possible to add XML translations, but they can no longer be used in the Backoffice UI. However, you may still find usage for them in server-to-server scenarios. Umbraco also keeps its e-mail templates as XML translations. Package and extension developers working with localization will find many benefits from this change seeing that you can add logic to JavaScript modules making your localization files more dynamic and even making them able to react to input parameters. -You can read more about [localization on the Umbraco Documentation](https://docs.umbraco.com/umbraco-cms/v/14.latest-rc/extending-backoffice/localization). +You can read more about [localization on the Umbraco Documentation](https://docs.umbraco.com/umbraco-cms/v/14.latest-rc/extending/language-files). * #### BackOffice controllers have been replaced with the Management API @@ -61,13 +61,13 @@ Although this sounds simple, it’s one of the most breaking changes on the back * #### Nested Content and Grid Layout have been removed -These two property editors have been deprecated in Umbraco for some time as you can read in our breaking change announcements for[ Nested Content](https://github.com/umbraco/Announcements/issues/6) and [Grid Layout](https://github.com/umbraco/Announcements/issues/7). The recommended action is to use blocks instead - Block Grid for the grid layout and either Block Grid or Block List for Nested Content. +These two property editors have been deprecated in Umbraco for some time as you can read in our breaking change announcements for[Nested Content](https://github.com/umbraco/Announcements/issues/6) and [Grid Layout](https://github.com/umbraco/Announcements/issues/7). The recommended action is to use blocks instead - Block Grid for the grid layout and either Block Grid or Block List for Nested Content. * #### [The legacy media picker has been removed](https://github.com/umbraco/Umbraco-CMS/pull/15835) We have for some time [encouraged to not use the legacy Media Picker](https://github.com/umbraco/Announcements/issues/8), and now it’s fully removed. You should use the default Media Picker instead. -* #### Macros and Partial View Macros have been removed. Use partial views and/or blocks in the Rich Text Editor (RTE). +* #### Macros and Partial View Macros have been removed. Use partial views and/or blocks in the Rich Text Editor (RTE) Depending on the usage of macros, you’ll be able to use either partial views or blocks in the RTE. They are not the same kind of functionality, but they cover all the identified use cases in a way more consistent and supportable way. @@ -75,20 +75,20 @@ Depending on the usage of macros, you’ll be able to use either partial views o An alternative is using the Dynamic Roots in the Multinode Treepicker and for ContentXPath the alternative is [IContentLastChanceFinder](https://docs.umbraco.com/umbraco-cms/v/14.latest-rc/tutorials/custom-error-page). -* #### [The package manifest format has changed](https://docs.umbraco.com/umbraco-cms/v/14.latest-rc/extending-backoffice/development-flow/package-manifest) +* #### [The package manifest format has changed](https://docs.umbraco.com/umbraco-cms/v/14.latest-rc/extending/property-editors/package-manifest) -The `package.manifest` file is no longer supported and has been replaced with the `umbraco-package.json` file. The format is very similar and after building your Umbraco solution, you will have access to a JSON schema file, that you can reference and thereby have type-safety in the file. You can read more about the new format on [the Umbraco Documentation](https://docs.umbraco.com/umbraco-cms/v/14.latest-rc/extending-backoffice/development-flow/package-manifest). +The `package.manifest` file is no longer supported and has been replaced with the `umbraco-package.json` file. The format is very similar and after building your Umbraco solution, you will have access to a JSON schema file, that you can reference and thereby have type-safety in the file. You can read more about the new format on [the Umbraco Documentation](https://docs.umbraco.com/umbraco-cms/v/14.latest-rc/extending/property-editors/package-manifest). * #### Smidge is no longer a default dependency [Smidge has been removed from the default installation](https://github.com/umbraco/Umbraco-CMS/pull/15788) along with the RuntimeMinification setting and related classes. Smidge used to bundle up Backoffice and package assets before, however, with the Bellissima, we have migrated entirely to ESModules. This means we can no longer predict how modules work in automated bundles. -We recommend that you bundle up your Backoffice static assets for instance by a tool called Vite, which you can read more about on [the Umbraco Documentation](https://docs.umbraco.com/umbraco-cms/v/14.latest-rc/extending-backoffice/development-flow/vite-package-setup). You can still use libraries like Smidge for frontend static assets by manually installing the package from NuGet. +We recommend that you bundle up your Backoffice static assets for instance by a tool called Vite, which you can read more about on [the Umbraco Documentation](https://docs.umbraco.com/umbraco-cms/v/14.latest-rc/extending/customize-backoffice/development-flow/vite-package-setup). You can still use libraries like Smidge for frontend static assets by manually installing the package from NuGet. You can read the [Smidge documentation](https://github.com/Shazwazza/Smidge/wiki) on how to set up a similar setting to RuntimeMinification.\ For sites being upgraded from V13 or below, please remove [these lines](https://github.com/umbraco/Umbraco-CMS/blob/04ed514a21279ae82d95b34c55cb2ba96545eb39/src/Umbraco.Web.UI/Views/\_ViewImports.cshtml#L7-L8) from the `_ViewImports.cshtml` file. -* #### Base classes for Backoffice controllers have been removed. +* #### Base classes for Backoffice controllers have been removed The `UmbracoAuthorizedApiController` and `UmbracoAuthorizedJsonController` classes have been removed. We recommend basing your Backoffice APIs on the `ManagementApiControllerBase` class from the `Umbraco.Cms.Api.Management` project. @@ -96,7 +96,7 @@ Please read the [Creating a Custom API article](https://docs.umbraco.com/umbraco * #### Removal of certain AppSettings -Some AppSettings have been removed or found a new place. In general, any UI-related app settings will now have to be configured as [extensions through the manifest system](https://docs.umbraco.com/umbraco-cms/v/14.latest-rc/extending-backoffice/extension-types). +Some AppSettings have been removed or found a new place. In general, any UI-related app settings will now have to be configured as [extensions through the manifest system](https://docs.umbraco.com/umbraco-cms/v/14.latest-rc/extending/backoffice-setup/extension-types). * #### RichTextEditor @@ -156,7 +156,7 @@ Make sure to perform thorough testing of all usages of `UmbracoApiController`. A * **Two-Factor Authentication requires a client registration** -The C# models for Two-Factor Authentication previously supported setting a custom AngularJS view to setup the QR code. This has been moved to the Backoffice client and requires a registration through the new extension type [`mfaProvider`](../../../../extending-backoffice/development-flow/package-manifest.md): +The C# models for Two-Factor Authentication previously supported setting a custom AngularJS view to setup the QR code. This has been moved to the Backoffice client and requires a registration through the new extension type [`mfaProvider`](../../../../extending/property-editors/package-manifest): ```typescript { @@ -178,7 +178,7 @@ More details and code examples can be found in the [Two-Factor Authentication](. * **External Login Providers require a client registration** -The C# models for External Login Providers have changed and no longer hold configuration options for the “Sign in with XYZ” button. To show a button in the Backoffice to sign in with an external provider, you need to register this through the extension type called [`authProvider`](../../../../extending-backoffice/development-flow/package-manifest.md) : +The C# models for External Login Providers have changed and no longer hold configuration options for the “Sign in with XYZ” button. To show a button in the Backoffice to sign in with an external provider, you need to register this through the extension type called [`authProvider`](../../../../extending/property-editors/package-manifest.md) : ```typescript { @@ -205,7 +205,6 @@ Additionally, on the backend side, there is an additional helper available to do More details and code examples can be found in the [External Login Providers](../../../../reference/security/external-login-providers.md) article.\ - **In-depth and further breaking changes for Umbraco 14 can be found on the** [**CMS GitHub**](https://github.com/umbraco/Umbraco-CMS/pulls?q=is%3Apr+base%3Av14%2Fdev+label%3Acategory%2Fbreaking) **repository and on** [**Our Website**](https://our.umbraco.com/download/releases/1400)**.** diff --git a/14/umbraco-cms/reference/api-documentation.md b/14/umbraco-cms/reference/api-documentation.md index 2c19e604bb5..0c5fd5e8e83 100644 --- a/14/umbraco-cms/reference/api-documentation.md +++ b/14/umbraco-cms/reference/api-documentation.md @@ -24,4 +24,4 @@ Opens a documentation browser that is different from the documentation section y ## Backoffice UI Documentation -You can find all reference documentation for the Backoffice UI in the [UI Documentation](../extending-backoffice/ui-documentation.md) article. +You can find all reference documentation for the Backoffice UI in the [UI Documentation](../extending/ui-documentation.md) article. diff --git a/14/umbraco-cms/reference/security/external-login-providers.md b/14/umbraco-cms/reference/security/external-login-providers.md index 914086a7082..ef01eaea91d 100644 --- a/14/umbraco-cms/reference/security/external-login-providers.md +++ b/14/umbraco-cms/reference/security/external-login-providers.md @@ -403,7 +403,7 @@ The Custom Element can be implemented in a number of ways with many different li When you click the button, the form will submit a POST request to the `externalLoginUrl` property. The external login provider will then redirect back to the Umbraco site with the user logged in. {% hint style="info" %} -You have access to the [Umbraco UI Library](../../extending/ui-library.md) in the custom element. You can use the components directly in your custom element. +You have access to the [Umbraco UI Library](../../extending/ui-documentation.md) in the custom element. You can use the components directly in your custom element. {% endhint %} {% tabs %} diff --git a/14/umbraco-cms/reference/security/two-factor-authentication.md b/14/umbraco-cms/reference/security/two-factor-authentication.md index b204d4777a8..54c4dddcbe4 100644 --- a/14/umbraco-cms/reference/security/two-factor-authentication.md +++ b/14/umbraco-cms/reference/security/two-factor-authentication.md @@ -23,6 +23,7 @@ In the following example, we will use the [GoogleAuthenticator NuGet Package](ht Despite the name, this package works for both Google and Microsoft authenticator apps. It can be used to generate the QR code needed to activate the app for the website. {% code title="UmbracoAppAuthenticator.cs" lineNumbers="true" %} + ```csharp using System; using System.Threading.Tasks; @@ -111,6 +112,7 @@ public class UmbracoAppAuthenticator : ITwoFactorProvider public bool ValidateTwoFactorSetup(string secret, string token) => ValidateTwoFactorPIN(secret, token); } ``` + {% endcode %} First, we create a model with the information required to set up the 2FA provider. Then we implement the `ITwoFactorProvider` with the use of the `TwoFactorAuthenticator` from the GoogleAuthenticator NuGet package. @@ -118,6 +120,7 @@ First, we create a model with the information required to set up the 2FA provide Now we need to register the `UmbracoAppAuthenticator` implementation. This can be done on the `IUmbracoBuilder` in your startup or a composer. {% code title="UmbracoAppAuthenticatorComposer.cs" lineNumbers="true" %} + ```csharp using Umbraco.Cms.Core.Composing; using Umbraco.Cms.Core.DependencyInjection; @@ -134,6 +137,7 @@ public class UmbracoAppAuthenticatorComposer : IComposer } } ``` + {% endcode %} At this point, the 2FA is active, but no members have set up 2FA yet. The setup of 2FA depends on the type. In the case of App Authenticator, we will add the following to our **view** showing the edit profile of the member. @@ -204,6 +208,7 @@ Umbraco controls how the UI is for user login and user edits, but will still nee In the following example, we will use the [GoogleAuthenticator NuGet Package](https://www.nuget.org/packages/GoogleAuthenticator/). Despite the name, this package works for both Google and Microsoft authenticator apps. It can be used to generate the QR code needed to activate the app for the website. {% code title="TwoFactorAuthInfo.cs" lineNumbers="true" %} + ```csharp using System.Runtime.Serialization; using Google.Authenticator; @@ -288,6 +293,7 @@ public class UmbracoUserAppAuthenticator : ITwoFactorProvider public bool ValidateTwoFactorSetup(string secret, string token) => ValidateTwoFactorPIN(secret, token); } ``` + {% endcode %} First, we create a model with the information required to set up the 2FA provider. Then we implement the `ITwoFactorProvider` with the use of the `TwoFactorAuthenticator` from the GoogleAuthenticator NuGet package. @@ -295,6 +301,7 @@ First, we create a model with the information required to set up the 2FA provide Now we need to register the `UmbracoUserAppAuthenticator` implementation and the view to show to set up this provider. This can be done on the `IUmbracoBuilder` in your startup or a composer. {% code title="UmbracoAppAuthenticatorComposer.cs" lineNumbers="true" %} + ```csharp using Umbraco.Cms.Core.Composing; using Umbraco.Cms.Core.Security; @@ -303,19 +310,21 @@ namespace My.Website; public class UmbracoAppAuthenticatorComposer : IComposer { - public void Compose(IUmbracoBuilder builder) - { - var identityBuilder = new BackOfficeIdentityBuilder(builder.Services); + public void Compose(IUmbracoBuilder builder) + { + var identityBuilder = new BackOfficeIdentityBuilder(builder.Services); - identityBuilder.AddTwoFactorProvider(UmbracoUserAppAuthenticator.Name); - } + identityBuilder.AddTwoFactorProvider(UmbracoUserAppAuthenticator.Name); + } } ``` + {% endcode %} The last thing required is to register the provider in the Backoffice client so that the user can enable it. This can be done in a `umbraco-package.json` file. {% code title="~/App_Plugins/TwoFactorProviders/umbraco-package.json" lineNumbers="true" %} + ```json { "$schema": "../../umbraco-package-schema.json", @@ -334,6 +343,7 @@ The last thing required is to register the provider in the Backoffice client so ] } ``` + {% endcode %} At this point, the 2FA is active, but no users have set up 2FA yet. @@ -390,7 +400,7 @@ The examples are using the [Lit](https://lit.dev/) library to create custom elem The examples are using the `@umbraco-cms/backoffice` package to get access to the Umbraco backoffice components and services. This package is included in Umbraco and can be used to create custom elements that look and feel like the rest of the Umbraco backoffice. -They are written in vanilla JavaScript and C#, but the same principles can be applied to other languages. For more information about creating custom elements in Umbraco with a bundler and TypeScript, see the [Development Flow](../../extending-backoffice/development-flow/) article. +They are written in vanilla JavaScript and C#, but the same principles can be applied to other languages. For more information about creating custom elements in Umbraco with a bundler and TypeScript, see the [Development Flow](../../extending/customize-backoffice/development-flow/README.md) article. ### Customizing the 2FA activation screen @@ -399,6 +409,7 @@ The 2FA activation screen can be customized. This should be done if you have a 2 To customize the 2FA activation screen, you need to create a JavaScript module. The module should export a default custom element to be used in the activation screen. This module should be placed in the `App_Plugins/TwoFactorProviders` folder. {% code title="~/App_Plugins/TwoFactorProviders/2fa-activation.js" lineNumbers="true" %} + ```javascript import { UserService } from '@umbraco-cms/backoffice/external/backend-api'; import { css, html } from '@umbraco-cms/backoffice/external/lit'; @@ -464,61 +475,61 @@ export default class My2faActivationElement extends UmbLitElement { } return html` - -
- -
- -
-

- - Scan this QR code with your authenticator app to enable two-factor authentication - -

- ${this.localize.term('user_2faQrCodeAlt')} -
- - - - - - - -
-
- - ${this.localize.term('general_close')} - - - ${this.localize.term('general_submit')} - -
- -
- - `; + +
+ +
+ +
+

+ + Scan this QR code with your authenticator app to enable two-factor authentication + +

+ ${this.localize.term('user_2faQrCodeAlt')} +
+ + + + + + + +
+
+ + ${this.localize.term('general_close')} + + + ${this.localize.term('general_submit')} + +
+ +
+ + `; } /** @@ -606,6 +617,7 @@ export default class My2faActivationElement extends UmbLitElement { customElements.define('my-2fa-activation', My2faActivationElement); ``` + {% endcode %} This module will show a QR code and an input field for the user to enter the code from the authenticator app. When the user submits the form, the code will be sent to the server to validate. If the code is correct, the provider will be enabled. @@ -613,6 +625,7 @@ This module will show a QR code and an input field for the user to enter the cod To replace the default activation screen with the custom view, you need to register the element in the `umbraco-package.json` file that you created before. The final form of the file should look like this: {% code title="~/App_Plugins/TwoFactorProviders/umbraco-package.json" lineNumbers="true" %} + ```json { "$schema": "../../umbraco-package-schema.json", @@ -632,6 +645,7 @@ To replace the default activation screen with the custom view, you need to regis ] } ``` + {% endcode %} ### Customizing the login screen @@ -655,6 +669,7 @@ The following code is an example of a custom 2FA login screen using [Lit](https: The element registers two properties: providers and returnPath. These properties are used to render the view. The providers property is an array of strings, where each string is the name of a 2FA provider. The returnPath is the path to redirect to after a successful login. Both supplied by the login screen automatically. {% code title="~/App_Plugins/TwoFactorProviders/Custom2faLogin.js" lineNumbers="true" %} + ```javascript import { css, html } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -774,11 +789,13 @@ export default class My2faViewElement extends UmbLitElement { customElements.define('my-2fa-view', My2faViewElement); ``` + {% endcode %} We need to register the custom view using a composer. This can be done on the `IUmbracoBuilder` in your startup or a composer. In this case, we will add a composer to your project. This composer will overwrite the `IBackOfficeTwoFactorOptions` to use the custom view. {% code title="TwoFactorConfiguration.cs" lineNumbers="true" %} + ```csharp using Umbraco.Cms.Core.Composing; using Umbraco.Cms.Web.BackOffice.Security; @@ -801,4 +818,5 @@ public class TwoFactorConfigurationComposer : IComposer } ``` + {% endcode %} diff --git a/14/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md b/14/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md index 9ec1ed0cee7..fcde327dc18 100644 --- a/14/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md +++ b/14/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md @@ -27,7 +27,7 @@ This guide will show the basics of creating a custom 'Welcome Message' dashboard The finished dashboard will give the editors an overview of which pages and media files they've worked on most recently. -This tutorial uses Typescript and Lit with Umbraco, It is expected that your package is already [set up to use Typescript and Lit](../../extending-backoffice/development-flow/vite-package-setup.md). +This tutorial uses Typescript and Lit with Umbraco, It is expected that your package is already [set up to use Typescript and Lit](../../extending/customize-backoffice/development-flow/vite-package-setup.md). To see how to set up an extension in Umbraco using Typescript and Lit, read the article [Creating your first extension](../creating-your-first-extension.md). @@ -50,11 +50,12 @@ At each step, you will find a dropdown for `welcome-dashboard.element.ts`, `and ## Setting up a package -1. Follow the [Vite Package Setup](../../extending-backoffice/development-flow/vite-package-setup.md) by creating a new project folder called "`welcome-dashboard`" in `App_Plugins`. +1. Follow the [Vite Package Setup](../../extending/customize-backoffice/development-flow/vite-package-setup.md) by creating a new project folder called "`welcome-dashboard`" in `App_Plugins`. 2. Create a manifest file named `umbraco-package.json` at the root of the `welcome-dashboard` folder. Here we define and configure our dashboard. 3. Add the following code to `umbraco-package.json`: {% code title="umbraco-package.json" lineNumbers="true" %} + ```json { "$schema": "../../umbraco-package-schema.json", @@ -82,9 +83,10 @@ At each step, you will find a dropdown for `welcome-dashboard.element.ts`, `and ] } ``` + {% endcode %} -For more information about the `umbraco-package.json` file, read the article [Package Manifest](../../extending-backoffice/development-flow/package-manifest.md). For more information about the dashboard configurations read the [Dashboards](../../extending-backoffice/extension-types/dashboards.md) article. +For more information about the `umbraco-package.json` file, read the article [Package Manifest](../../extending/property-editors/package-manifest.md). For more information about the dashboard configurations read the [Dashboards](../../extending/dashboards.md) article. {% hint style="info" %} Please be aware that the file`umbraco-package.json` is loaded into memory when Umbraco starts up. If you are changing or adding new configurations you will need to start and stop your application for it to be loaded. @@ -98,6 +100,7 @@ Now let's create the web component we need for our property editor. This web com 2. In this new file, add the following code: {% code title="welcome-dashboard.element.ts" lineNumbers="true" %} + ```typescript import { LitElement, css, html, customElement} from "@umbraco-cms/backoffice/external/lit"; import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api"; @@ -136,6 +139,7 @@ declare global { } } ``` + {% endcode %} 3. In the `vite.config.ts` file replace the `entry` to our newly created `.ts` file: diff --git a/14/umbraco-cms/tutorials/creating-a-custom-dashboard/adding-localization-to-the-dashboard.md b/14/umbraco-cms/tutorials/creating-a-custom-dashboard/adding-localization-to-the-dashboard.md index 185f65f35e2..8156220bc82 100644 --- a/14/umbraco-cms/tutorials/creating-a-custom-dashboard/adding-localization-to-the-dashboard.md +++ b/14/umbraco-cms/tutorials/creating-a-custom-dashboard/adding-localization-to-the-dashboard.md @@ -258,7 +258,7 @@ This is how our dashboard should now look like: {% hint style="info" %} -Tip: If you do not have many translations, you can also choose to include the localizations directly in the meta-object. Read more about translations in the [**Localization**](../../extending-backoffice/localization/) article. +Tip: If you do not have many translations, you can also choose to include the localizations directly in the meta-object. Read more about translations in the [**Localization**](../../extending/language-files/README.md) article. {% endhint %} ## Going Further diff --git a/14/umbraco-cms/tutorials/creating-a-property-editor/README.md b/14/umbraco-cms/tutorials/creating-a-property-editor/README.md index ccea573bf94..86811e63a85 100644 --- a/14/umbraco-cms/tutorials/creating-a-property-editor/README.md +++ b/14/umbraco-cms/tutorials/creating-a-property-editor/README.md @@ -16,7 +16,7 @@ The steps we will go through in part one are: * [Adding styling and setting up events in Web Components](./#adding-styling-and-setting-up-events-in-the-web-components) * [Setup Event Logic](./#setup-event-logic) -This tutorial uses Typescript and Lit with Umbraco, It is expected that your package is already [set up to use Typescript and Lit](../../extending-backoffice/development-flow/vite-package-setup.md). +This tutorial uses Typescript and Lit with Umbraco, It is expected that your package is already [set up to use Typescript and Lit](../../extending/customize-backoffice/development-flow/vite-package-setup.md). To see how to set up an extension in Umbraco using Typescript and Lit, read the article [Creating your first extension](../creating-your-first-extension.md). @@ -37,7 +37,7 @@ At each step, you will find a dropdown for `suggestions-property-editor-ui.eleme ## Setting up a plugin -1. Follow the [Vite Package Setup](../../extending-backoffice/development-flow/vite-package-setup.md) by creating a new project folder called "`suggestions`" in `App_Plugins`. +1. Follow the [Vite Package Setup](../../extending/customize-backoffice/development-flow/vite-package-setup.md) by creating a new project folder called "`suggestions`" in `App_Plugins`. 2. Then create the manifest file named `umbraco-package.json` at the root of the `suggestions` folder. Here we define and configure our dashboard. 3. Add the following code to `umbraco-package.json`: @@ -436,7 +436,7 @@ declare global { When we save or publish, the value of the Data Type is now automatically synced to the current content object and sent to the server. -Learn more about extending this service by visiting the [Property Editors page](../../extending-backoffice/extension-types/property-editors/). +Learn more about extending this service by visiting the [Property Editors page](../../extending/property-editors/composition/README.md). ## Going further diff --git a/14/umbraco-cms/tutorials/creating-your-first-extension.md b/14/umbraco-cms/tutorials/creating-your-first-extension.md index d5fa48a2988..bd57abff17a 100644 --- a/14/umbraco-cms/tutorials/creating-your-first-extension.md +++ b/14/umbraco-cms/tutorials/creating-your-first-extension.md @@ -9,7 +9,7 @@ This guide will help you set up your first extension with a Web Component using 1. [Vanilla JavaScript](creating-your-first-extension.md#extension-with-vanilla-javascript) or 2. [Vite, Typescript, and Lit](creating-your-first-extension.md#extension-with-vite-typescript-and-lit) -Before following this tutorial make sure to read the [Setup Your Development Environment](../extending-backoffice/development-flow/) article. +Before following this tutorial make sure to read the [Setup Your Development Environment](../extending/customize-backoffice/development-flow/README.md) article. This article is also part of the prerequisites for [Creating a Property Editor](creating-a-property-editor/) and [Creating a Custom Dashboard](creating-a-custom-dashboard.md) tutorials. @@ -132,7 +132,7 @@ You now have a working extension with a dashboard Web Component written in plain ### Getting Started With Vite {% hint style="info" %} -If you want to learn more about Vite, you can read the [Vite Package Setup](../extending-backoffice/development-flow/vite-package-setup.md) article. It will go into more detail about the setup and how to use Vite with Umbraco. For this tutorial, we will only cover the basics and assume you have no Vite setup yet. +If you want to learn more about Vite, you can read the [Vite Package Setup](../extending/customize-backoffice/development-flow/vite-package-setup.md) article. It will go into more detail about the setup and how to use Vite with Umbraco. For this tutorial, we will only cover the basics and assume you have no Vite setup yet. {% endhint %} Vite comes with a set of really good presets to get you quickly up and running with libraries and languages. Examples: Lit, Svelte, and vanilla Web Components with both JavaScript and TypeScript. We will use their preset of Lit and TypeScript. @@ -166,7 +166,7 @@ npm install -D @umbraco-cms/backoffice@14.0.0-rc4 This will add a package to your devDependencies containing the TypeScript definitions for the Umbraco Backoffice. The `-rc4` is the version of the package, which will change as new versions are released. {% hint style="warning" %} -If you see any errors during this process, make sure that you have the right tools installed (Node, .NET, and so on). Also, make sure you have followed the steps on how to [Setup Your Development Environment](../extending-backoffice/development-flow/). +If you see any errors during this process, make sure that you have the right tools installed (Node, .NET, and so on). Also, make sure you have followed the steps on how to [Setup Your Development Environment](../extending/customize-backoffice/development-flow/README.md). {% endhint %} 4. At the root of the `my-typescript-extension` folder create a new file called `vite.config.ts` and insert the following code: @@ -313,4 +313,4 @@ Clicking the button will open a notification with the message "#h5yr". Now that you have created your first extension (which is a dashboard), you can continue to the next tutorial: [Creating a Custom Dashboard](creating-a-custom-dashboard.md). -You can also read more about the [Umbraco Package Manifest](../extending-backoffice/development-flow/package-manifest.md) to learn more about the different options you have when creating an extension. +You can also read more about the [Umbraco Package Manifest](../extending/property-editors/package-manifest.md) to learn more about the different options you have when creating an extension.