diff --git a/16/umbraco-cms/SUMMARY.md b/16/umbraco-cms/SUMMARY.md index 9312368f4b6..6865bebeabb 100644 --- a/16/umbraco-cms/SUMMARY.md +++ b/16/umbraco-cms/SUMMARY.md @@ -142,8 +142,8 @@ * [Extend and customize the editing experience](customizing/overview.md) * [Project Bellissima](customizing/project-bellissima.md) * [Setup Your Development Environment](customizing/development-flow/README.md) - * [TypeScript setup](customizing/development-flow/typescript-setup.md) * [Vite Package Setup](customizing/development-flow/vite-package-setup.md) + * [TypeScript setup](customizing/development-flow/typescript-setup.md) * [Extension Overview](customizing/extending-overview/README.md) * [Extension Registry](customizing/extending-overview/extension-registry/README.md) * [Extension Registration](customizing/extending-overview/extension-registry/extension-registry.md) diff --git a/16/umbraco-cms/customizing/development-flow/vite-package-setup.md b/16/umbraco-cms/customizing/development-flow/vite-package-setup.md index 8c4097981a3..1f04c0dce9e 100644 --- a/16/umbraco-cms/customizing/development-flow/vite-package-setup.md +++ b/16/umbraco-cms/customizing/development-flow/vite-package-setup.md @@ -7,73 +7,71 @@ description: Get started with a Vite Package, setup with TypeScript and Lit Umbraco recommends building extensions with a setup using TypeScript and a build tool such as Vite. Umbraco uses the library Lit for building web components which we will use throughout this guide. {% hint style="info" %} -This guide is based on our **general recommendations** for working with and building extensions for the Umbraco backoffice. - -You can use **any framework or library**, as you are not limited to the mentioned frameworks. +These are general recommendations for working with and building extensions for the Umbraco backoffice. You can use any framework or library of your choice. {% endhint %} -## Getting Started With Vite +## Before You Begin -Vite comes with a set of good presets to get you quickly up and running with libraries and languages. For example: Lit, Svelte, and Vanilla Web Components with both JavaScript and TypeScript. +Make sure to read the [Setup Your Development Environment](./) article before continuing. -{% hint style="info" %} -Before following this guide, read the [Setup Your Development Environment](./) article. -{% endhint %} +## Create a Vite Package + +Vite comes with a set of good presets to get you quickly up and running with libraries and languages. For example: Lit, Svelte, and Vanilla Web Components with both JavaScript and TypeScript. -1. Open a terminal and navigate to the project folder where you want to create your new Vite Package. -2. Run the following command in the folder to create a new Vite Package: +1. Open your terminal and navigate to the folder where you want to create the new Vite package. +2. Run the following command: ```bash npm create vite@latest ``` -This command will set up your new package and ask you to pick a framework and a compiler. +This command starts a setup prompt. -3. Enter `Client` as both the **Project Name** and **Package name** when prompted. +For this tutorial, it is recommended to use the names given below. However, feel free to choose other names if preferred. -4. Choose **Lit** and **TypeScript** as the framework and language. +3. When prompted: + * Enter **client** as the **Project Name**. + * Select **Lit** as the framework. + * Select **TypeScript** as the variant. -{% hint style="info" %} -For this tutorial, it is recommended to use the names given above. However, feel free to choose other names if preferred. -{% endhint %} - -

Create vite command choices

- -This creates a new folder called `Client`, sets up our new project, and creates a `package.json` file, which includes the necessary packages. This is where all your source files live. + This creates a new folder called **client** with your project files. {% hint style="info" %} -Alternatively, you can skip the interactive prompts and use this command: + +For Windows environments the command should be slightly different:: ```typescript -npm create vite@latest Client -- --template lit-ts +npm create vite@latest client --- --template lit-ts ``` -This will create a Vite Package with Lit and TypeScript in a folder called **Client**. +or you will still see the interactive prompts, especially when using PowerShell. + {% endhint %} -5. Navigate to the **Client** project folder and install the required packages: +4. Navigate into the new **client** folder and install the packages: ```bash +cd client npm install ``` +{% hint style="warning" %} Before proceeding, ensure that you install the version of the Backoffice package compatible with your Umbraco installation. You can find the appropriate version on the [@umbraco-cms/backoffice npm page](https://www.npmjs.com/package/@umbraco-cms/backoffice). +{% endhint %} -6. Install the Backoffice package using the following command: +5. Install the Umbraco Backoffice package: ```bash npm install -D @umbraco-cms/backoffice ``` -{% hint style="info" %} -To avoid installing Umbraco’s sub-dependencies such as TinyMCE and Monaco Editor, you can add the `--legacy-peer-deps` flag: -{% endhint %} +6. To avoid installing additional dependencies such as TinyMCE or Monaco Editor,use the `--legacy-peer-deps` flag: ```bash npm install --legacy-peer-deps -D @umbraco-cms/backoffice ``` -Using this flag will disable Intellisense for external references. +This disables IntelliSense for external references but keeps the install lean. 7. Open the `tsconfig.json` file. 8. Add the array `types` inside `compilerOptions`, with the entry of `@umbraco-cms/backoffice/extension-types`: @@ -89,7 +87,7 @@ Using this flag will disable Intellisense for external references. } ``` -9. Create a new file called `vite.config.ts` in the folder and insert the following code: +9. Create a new `vite.config.ts` file in the **client** folder: {% code title="vite.config.ts" lineNumbers="true" %} ```ts @@ -101,31 +99,27 @@ export default defineConfig({ entry: "src/my-element.ts", // your web component source file formats: ["es"], }, - outDir: "../App_Plugins/Client", // all compiled files will be placed here + outDir: "../App_Plugins/client", // all compiled files will be placed here emptyOutDir: true, sourcemap: true, rollupOptions: { external: [/^@umbraco/], // ignore the Umbraco Backoffice package in the build }, }, - base: "/App_Plugins/Client/", // the base path of the app in the browser (used for assets) + base: "/App_Plugins/client/", // the base path of the app in the browser (used for assets) }); ``` {% endcode %} -{% hint style="info" %} -The `outDir` parameter specifies where the compiled files are placed. In this example, they are stored in the `App_Plugins/Client` folder. If you are working with a different structure, such as a Razor Class Library (RCL) project, update this path to `wwwroot`. -{% endhint %} +The `outDir` parameter specifies where the compiled files are placed. In this example, they are stored in the `App_Plugins/client` folder. If you are working with a different structure, such as a Razor Class Library (RCL) project, update this path to `wwwroot`. This alters the Vite default output into a **library mode**, where the output is a JavaScript file with the same name as the `name` attribute in `package.json`. The name is `client.js` if you followed this tutorial with no changes. The source code that is compiled lives in the `src` folder of your package folder and that is where you can see a `my-element.ts` file. You can confirm that this file is the one specified as our entry on the Vite config file that we recently created. -{% hint style="info" %} The `build:lib:entry` parameter can accept an array which will allow you to export multiple files during the build. You can read more about [Vite's build options here](https://vitejs.dev/config/build-options.html#build-lib). -{% endhint %} -Build the `ts` file in the `Client` folder so we can use it in our package: +10. Build the `ts` file in the **client** folder: ```bash npm run build @@ -133,12 +127,14 @@ npm run build ## Watch for changes and build -If you like to continuously work on the package and have each change built, you can add a `watch`script in your `package.json` with `vite build --watch`. The example below indicates where in the structure this change should be implemented: +To continuously work on the package and have each change built, add a `watch`script in your `package.json` with `vite build --watch`. + +The example below indicates where in the structure this change should be implemented: {% code title="package.json" lineNumbers="true" %} ```json { - "name": "Client", + "name": "client", ... "scripts": { "watch": "vite build --watch" @@ -148,15 +144,15 @@ If you like to continuously work on the package and have each change built, you ``` {% endcode %} -Then in the terminal, you can run `npm run watch`. +Run `npm run watch` in the terminal. ## Umbraco Package declaration -Declare your package to Umbraco via a file called `umbraco-package.json`. This should be added at the root of your package. In this guide, it is inside the `Client/public` folder so that Vite automatically copies it over every time it builds. +Declare your package to Umbraco via a file called `umbraco-package.json`. This should be added in the `public` folder under the root of your package. Once built the `umbraco-package.json` file should be located at `/App_Plugins/` or `/App_Plugins/{YourPackageName}` for Umbraco to detect it. This example declares a Dashboard as part of your Package, using the Vite example element. -{% code title="Client/public/umbraco-package.json" lineNumbers="true" %} +{% code title="client/public/umbraco-package.json" lineNumbers="true" %} ```json { "$schema": "../../umbraco-package-schema.json", @@ -167,7 +163,7 @@ This example declares a Dashboard as part of your Package, using the Vite exampl "type": "dashboard", "alias": "My.Dashboard.MyExtension", "name": "My Dashboard", - "element": "/App_Plugins/Client/client.js", + "element": "/App_Plugins/client/client.js", "elementName": "my-element", "meta": { "label": "My Dashboard", @@ -194,9 +190,9 @@ Learn more about the abilities of the manifest file in the [Umbraco Package Mani #### Testing your package -To be able to test your package, you will need to run your site. +To test your package, run your site. -Before you do this, you need to make sure to run `npm run build` to compile your TypeScript files and copy them to the `App_Plugins/Client` folder. +Before doing this, make sure to run `npm run build` to compile your TypeScript files and copy them to the `App_Plugins/client` folder. {% hint style="warning" %} If you try to include some of these resources via Visual Studio (VS), then make sure not to include TypeScript files. Otherwise, VS will try to include a few lines on your `.csproj` file to compile the TypeScript code that exists in your project folder. When you run your website, VS will try to compile these files and fail. @@ -206,7 +202,7 @@ The final result looks like this:

My dashboard

-Back in the `src/my-element.ts` file, you can update the `styles` property to make any styling changes. You can change the `background-color` of the `button` to white so it is more visible: +In the `src/my-element.ts` file, update the `styles` property to make any styling changes. You can change the `background-color` of the `button` to white so it is more visible: ```css button { diff --git a/16/umbraco-cms/customizing/extending-overview/README.md b/16/umbraco-cms/customizing/extending-overview/README.md index 3182b6dcb57..cb389ea0944 100644 --- a/16/umbraco-cms/customizing/extending-overview/README.md +++ b/16/umbraco-cms/customizing/extending-overview/README.md @@ -4,16 +4,16 @@ description: Getting started with backoffice setup and configurations # Extension Overview -The Backoffice architecture is based on Extensions, making different parts of the UI extendable. Enabling you to append, replace, or remove parts. +The backoffice architecture is based on Extensions, making different parts of the UI extendable. Enabling you to append, replace, or remove parts.
-In this section you can find the common terms, concepts and guides used to extend the Umbraco backoffice. +In this section, you can find the common terms, concepts and guides used to extend the Umbraco backoffice. ## [Extension Registry](extension-registry/) -How to registere extensions or manipulate others. +How to register extensions or manipulate others. ## [Extension Types](extension-types/) -An overview of the different ways to append funcationtlity. +An overview of the different ways to append functionality. diff --git a/16/umbraco-cms/customizing/extending-overview/extension-registry/README.md b/16/umbraco-cms/customizing/extending-overview/extension-registry/README.md index 0a2ce0548c2..2cfe16b7c31 100644 --- a/16/umbraco-cms/customizing/extending-overview/extension-registry/README.md +++ b/16/umbraco-cms/customizing/extending-overview/extension-registry/README.md @@ -14,6 +14,6 @@ The extension registry is a global registry that can be accessed and changed at Each Extension Manifest has to declare its type, this is used to determine where it hooks into the system. It also looks at what data is required to declare within it. -## [Replace, Exclude or Unregistere](./#replace-exclude-or-unregistere) +## [Replace, Exclude, or Unregister](replace-exclude-or-unregister.md) Once you understand how to declare your own, you may want to replace or remove existing. diff --git a/16/umbraco-cms/customizing/extending-overview/extension-registry/replace-exclude-or-unregister.md b/16/umbraco-cms/customizing/extending-overview/extension-registry/replace-exclude-or-unregister.md index d4ae61646a7..0fded461712 100644 --- a/16/umbraco-cms/customizing/extending-overview/extension-registry/replace-exclude-or-unregister.md +++ b/16/umbraco-cms/customizing/extending-overview/extension-registry/replace-exclude-or-unregister.md @@ -54,12 +54,12 @@ UmbExtensionRegistry.exclude('Umb.WorkspaceAction.Document.SaveAndPreview'); ## Unregister -You can also choose to unregister an extension, this is only preferred if you registered the extension and are in control of the flow. If its not your Extension please seek to use the `Overwrites` or `Exclude` feature. +You can also choose to unregister an extension, this is only preferred if you registered the extension and are in control of the flow. If it's not your Extension please seek to use the `Overwrites` or `Exclude` feature. ```typescript -import { UmbExtensionRegistry } from '@umbraco-cms/backoffice/extension-api'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -UmbExtensionRegistry.unregister('My.WorkspaceAction.AutoFillWithUnicorns'); +umbExtensionsRegistry.unregister('My.WorkspaceAction.AutoFillWithUnicorns'); ``` This will not prevent the Extension from being registered again. diff --git a/16/umbraco-cms/customizing/extending-overview/extension-types/backoffice-entry-point.md b/16/umbraco-cms/customizing/extending-overview/extension-types/backoffice-entry-point.md index 81dfa73e2fb..a7b687bb47d 100644 --- a/16/umbraco-cms/customizing/extending-overview/extension-types/backoffice-entry-point.md +++ b/16/umbraco-cms/customizing/extending-overview/extension-types/backoffice-entry-point.md @@ -4,7 +4,7 @@ description: The Backoffice Entry Point extension type is used to run some JavaS # Backoffice Entry Point -This manifest declares a single JavaScript file that will be loaded and run when the Backoffice starts. In other words this can be used as an entry point for a package. +This manifest declares a single JavaScript file that will be loaded and run when the Backoffice starts. In other words, this can be used as an entry point for a package. The `backofficeEntryPoint` extension is also the way to go if you want to load in external libraries such as jQuery, Angular, React, etc. You can use the `backofficeEntryPoint` to load in the external libraries to be shared by all your extensions. Additionally, **global CSS files** can also be used in the `backofficeEntryPoint` extension. @@ -43,14 +43,14 @@ import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api' /** * Perform any initialization logic when the Backoffice starts */ -export const onInit: UmbEntryPointOnInit = (host, extensionsRegistry) => { +export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => { // Your initialization logic here } /** * Perform any cleanup logic when the Backoffice and/or the package is unloaded */ -export const onUnload: UmbEntryPointOnUnload = (host, extensionsRegistry) => { +export const onUnload: UmbEntryPointOnUnload = (host, extensionRegistry) => { // Your cleanup logic here } ``` @@ -78,14 +78,14 @@ const manifest: UmbExtensionManifest = { } }; -export const onInit: UmbEntryPointOnInit = (host, extensionsRegistry) => { +export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => { // Register the extension extensionRegistry.register(manifest); } -export const onUnload: UmbEntryPointOnUnload = (host, extensionsRegistry) => { +export const onUnload: UmbEntryPointOnUnload = (host, extensionRegistry) => { // Unregister the extension (optional) - extension.unregister(manifest); + extensionRegistry.unregister(manifest); } ``` {% endcode %} @@ -139,7 +139,7 @@ const manifests: Array = [ ... ]; -export const onInit: UmbEntryPointOnInit = (host, extensionsRegistry) => { +export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => { // Register the extensions extensionRegistry.registerMany(manifests); } diff --git a/16/umbraco-cms/fundamentals/code/creating-forms.md b/16/umbraco-cms/fundamentals/code/creating-forms.md index c7eb94a7728..ea445636460 100644 --- a/16/umbraco-cms/fundamentals/code/creating-forms.md +++ b/16/umbraco-cms/fundamentals/code/creating-forms.md @@ -8,7 +8,7 @@ description: "Information on creating forms in Umbraco" Creating forms requires that you know your way around .NET Core MVC. So if you are familiar with adding view models, views and controllers you are ready to make your first form. {% hint style="info" %} -You can also use [Umbraco forms](https://umbraco.com/products/umbraco-forms/). It lets you and/or your editors create and handle forms in the backoffice. This includes setting up validation, redirecting and storing and sending form data. Great UI, extendable and supported by Umbraco HQ. +You can also use [Umbraco forms](https://umbraco.com/products/add-ons/forms/). It lets you and/or your editors create and handle forms in the backoffice. This includes setting up validation, redirecting and storing and sending form data. Great UI, extendable and supported by Umbraco HQ. {% endhint %} In this example we'll create a basic contact form containing a name, email and message field. diff --git a/16/umbraco-cms/fundamentals/setup/install/README.md b/16/umbraco-cms/fundamentals/setup/install/README.md index a184166a46b..567bd263a0a 100644 --- a/16/umbraco-cms/fundamentals/setup/install/README.md +++ b/16/umbraco-cms/fundamentals/setup/install/README.md @@ -4,9 +4,15 @@ description: Instructions on installing Umbraco on various platforms using vario # Installation +## Install the latest .NET Software Development Kit (SDK) + +Before you install Umbraco, you must ensure that you can run it on your machine. + +* Identify and install the latest [.NET SDK](https://dotnet.microsoft.com/download). + ## Install Umbraco using CLI -The fastest way to get the latest version of Umbraco up and running is using the command line (CLI). +The fastest way to get the latest version of Umbraco up and running is by using the command line (CLI). 1. Open your command line. 2. Install the Umbraco templates: @@ -52,7 +58,7 @@ Members of the Umbraco Community have created a website that makes the installat ## Alternative Methods for Installing Umbraco -There are numerous ways to install Umbraco. Below, you can find links to different installation methods that will help you easily install and set up Umbraco projects. +There are numerous ways to install Umbraco. Below, you can find links to different installation methods that will help you install and set up Umbraco projects. ### [.NET CLI installation](install-umbraco-with-templates.md) diff --git a/16/umbraco-cms/reference/templating/modelsbuilder/understand-and-extend.md b/16/umbraco-cms/reference/templating/modelsbuilder/understand-and-extend.md index c3d7b89d21e..018e2d6f5d1 100644 --- a/16/umbraco-cms/reference/templating/modelsbuilder/understand-and-extend.md +++ b/16/umbraco-cms/reference/templating/modelsbuilder/understand-and-extend.md @@ -51,7 +51,7 @@ public partial class TextPage : PublishedContentModel In the above code: * The model includes a constructor and static helpers to fetch the content type (`PublishedContentType`) and property type (`PublishedPropertyType`). -* The most important part is the property definition (`Header`), which retrieve values from Umbraco. +* The most important part is the property definition (`Header`), which retrieves values from Umbraco. You can use helper methods to access content and property types: @@ -110,9 +110,13 @@ public partial class TextPage : PublishedContentModel, IMetaInfo ### Inheritance -In addition to composition, content types can have a parent-child relationship. In the Umbraco backoffice, a content type appears underneath its parent. +In addition to composition, earlier versions of Umbraco allowed content types to have a parent-child relationship. In the Umbraco backoffice, a content type appears underneath its parent. -By convention, a content type is always **composed of its parent** and therefore inherits its properties. However, the parent content type is treated differently, and the child content type *directly inherits* (as in C# inheritance) from the parent class. +{% hint style="info" %} +The option to add child content types in the backoffice was removed in v14. Migrated sites may still have the child content types set up. New content types can be inherited through Composition. +{% endhint %} + +This type of inheritance is treated differently since the content type is always **composed of its parent**. The child content type *inherits directly* (as in C# inheritance) from the parent class. If `AboutPage` is a child of TextPage, its generated model would inherit directly from `TextPage`: @@ -145,7 +149,7 @@ For more complex customizations, use the full version of [Models Builder](https: ### Custom Model Generation with IModelsGenerator -From Umbraco 11.4, you can implement the `IModelsGenerator` interface hto customize how models are generated. This allows you to replace Umbraco’s default implementation using dependency injection: +From Umbraco 11.4, you can implement the `IModelsGenerator` interface to customize how models are generated. This allows you to replace Umbraco’s default implementation using dependency injection: The interface can be accessed via `Infrastructure.ModelsBuilder.Building.ModelsGenerator`. diff --git a/16/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-2.md b/16/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-2.md index ef3a8f7422e..f25f9098a85 100644 --- a/16/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-2.md +++ b/16/umbraco-cms/tutorials/creating-a-basic-website/creating-master-template-part-2.md @@ -6,7 +6,7 @@ We will now create a page to display our contact details. For added functionalit Here are some potential solutions: -* **Use Umbraco Forms (for non-developers):** Umbraco offers an add-on called Umbraco Forms. This tool is ideal for users who aren’t programmers, as it allows editors to create custom forms. You can find more information and purchase the product on [Umbraco.com](https://umbraco.com/products/umbraco-forms/). +* **Use Umbraco Forms (for non-developers):** Umbraco offers an add-on called Umbraco Forms. This tool is ideal for users who aren’t programmers, as it allows editors to create custom forms. You can find more information and purchase the product on [Umbraco.com](https://umbraco.com/products/add-ons/forms/). * **Build Your Own Contact Form (for developers):** If you prefer a custom solution, you can build your own contact form using [Surface Controllers](../../fundamentals/code/creating-forms.md) in Umbraco. ### Creating the Document Type and Template diff --git a/16/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md b/16/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md index b647ef69f7c..bfc593b06a0 100644 --- a/16/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md +++ b/16/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md @@ -51,7 +51,7 @@ At each step, you will find a dropdown for `welcome-dashboard.element.ts`, `and ## Setting up a package 1. Follow the [Vite Package Setup](../../customizing/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. +2. Create a manifest file named `umbraco-package.json` within the `public` folder, located 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" %} @@ -65,7 +65,7 @@ At each step, you will find a dropdown for `welcome-dashboard.element.ts`, `and "type": "dashboard", "alias": "my.welcome.dashboard", "name": "My Welcome Dashboard", - "element": "/App_Plugins/welcome-dashboard/dist/welcome-dashboard.js", + "element": "/App_Plugins/welcome-dashboard/welcome-dashboard.js", "elementName": "my-welcome-dashboard", "weight": 30, "meta": { @@ -140,10 +140,26 @@ declare global { ``` {% endcode %} -3. In the `vite.config.ts` file replace the `entry` to our newly created `.ts` file: +3. In the `vite.config.ts` file update the `entry` to point to our newly created `.ts` file, and also ensure that the `outDir` and `base` attributes are pointing to the `welcome-dashboard` folder: ```typescript -entry: "src/welcome-dashboard.element.ts" +import { defineConfig } from "vite"; + +export default defineConfig({ + build: { + lib: { + entry: "src/welcome-dashboard.element.ts", // your web component source file + formats: ["es"], + }, + outDir: "../App_Plugins/welcome-dashboard", // all compiled files will be placed here + emptyOutDir: true, + sourcemap: true, + rollupOptions: { + external: [/^@umbraco/], // ignore the Umbraco Backoffice package in the build + }, + }, + base: "/App_Plugins/welcome-dashboard/", // the base path of the app in the browser (used for assets) +}); ``` 4. In the `welcome-dashboard` folder run `npm run build` and then run the project. Then in the content section of the Backoffice you will see our new dashboard: diff --git a/16/umbraco-cms/tutorials/creating-a-custom-dashboard/extending-the-dashboard-using-umbraco-ui-library.md b/16/umbraco-cms/tutorials/creating-a-custom-dashboard/extending-the-dashboard-using-umbraco-ui-library.md index c9367dc42ef..f4443d5da23 100644 --- a/16/umbraco-cms/tutorials/creating-a-custom-dashboard/extending-the-dashboard-using-umbraco-ui-library.md +++ b/16/umbraco-cms/tutorials/creating-a-custom-dashboard/extending-the-dashboard-using-umbraco-ui-library.md @@ -411,7 +411,7 @@ import { UUIInterfaceColor, UUIInterfaceLook } from '@umbraco-cms/backoffice/ext private _renderUser(user: UmbUserDetailModel) { if (!user) return; - const state = this.getLookAndColorFromUserState(user.state); + const state = this.getLookAndColorFromUserState(user.state!); return html` ${user.name} ${user.email} diff --git a/16/umbraco-cms/tutorials/creating-a-property-editor/custom-value-conversion-for-rendering.md b/16/umbraco-cms/tutorials/creating-a-property-editor/custom-value-conversion-for-rendering.md index 365b9ee960b..0d3d29e11ae 100644 --- a/16/umbraco-cms/tutorials/creating-a-property-editor/custom-value-conversion-for-rendering.md +++ b/16/umbraco-cms/tutorials/creating-a-property-editor/custom-value-conversion-for-rendering.md @@ -75,4 +75,4 @@ public class MySuggestionsModel We have used the property type editor UI alias from `umbraco-package.json` in the implementation of `IsConverter()`. {% endhint %} -For more advanced Property Value Converter techniques (for example, controlling caching), see the [Property Value Converters](https://docs.umbraco.com/umbraco-cms/extending/property-editors/property-value-converters) article. +For more advanced Property Value Converter techniques (for example, controlling caching), see the [Property Value Converters](../../customizing/property-editors/property-value-converters.md) article. diff --git a/16/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md b/16/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md index 3172349dba9..db85f4c27ca 100644 --- a/16/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md +++ b/16/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md @@ -142,25 +142,25 @@ constructor() { ... const trimmed = (this.value as string).substring(0, this._maxChars); - const modalHandler = this.#modalManagerContext?.open(this, UMB_CONFIRM_MODAL, - { - data: { - headline: `Trim text`, - content: `Do you want to trim the text to "${trimmed}"?`, - color: "danger", - confirmLabel: "Trim", - } + const modalHandler = this.#modalManagerContext?.open(this, UMB_CONFIRM_MODAL, + { + data: { + headline: `Trim text`, + content: `Do you want to trim the text to "${trimmed}"?`, + color: "danger", + confirmLabel: "Trim", } - ); - modalHandler?.onSubmit().then(() => { - this.value = trimmed; - this.#dispatchChangeEvent(); - const data: UmbNotificationDefaultData = { - headline: `Text trimmed`, - message: `You trimmed the text!`, - }; - this.#notificationContext?.peek("positive", { data }); - }, null); + } + ); + modalHandler?.onSubmit().then(() => { + this.value = trimmed; + this.#dispatchChangeEvent(); + const data: UmbNotificationDefaultData = { + headline: `Text trimmed`, + message: `You trimmed the text!`, + }; + this.#notificationContext?.peek("positive", { data }); + }, null); } ``` {% endcode %} diff --git a/16/umbraco-cms/tutorials/getting-started-with-entity-framework-core.md b/16/umbraco-cms/tutorials/getting-started-with-entity-framework-core.md index 003ead1fb76..d7513308548 100644 --- a/16/umbraco-cms/tutorials/getting-started-with-entity-framework-core.md +++ b/16/umbraco-cms/tutorials/getting-started-with-entity-framework-core.md @@ -39,7 +39,7 @@ You need to be aware of some things if you are using EF Core, and have installed * This package has a transient dependency to `Microsoft.CodeAnalysis.Common` which clashes with the same transient dependency from `Umbraco.Cms 13.0.0`. This happens because `Microsoft.EntityFrameworkCore.Design 8.0.0` requires `Microsoft.CodeAnalysis.CSharp.Workspaces` in v4.5.0 or higher. * If there are no other dependencies that need that package then it installs it in the lowest allowed version (4.5.0). That package then has a strict dependency on `Microsoft.CodeAnalysis.Common` version 4.5.0. The problem is `Umbraco.Cms` through its own transient dependencies that require the version of `Microsoft.CodeAnalysis.Common` to be >= 4.8.0. -* This can be fixed by installing `Microsoft.CodeAnalysis.CSharp.Workspaces` version 4.8.0 as a specific package instead of leaving it as a transient dependency. This is because it will then have a strict transient dependency on `Microsoft.CodeAnalysis.Common` version 4.8.0, which is the same that Umbraco has. +* This can be fixed by installing `Microsoft.CodeAnalysis.CSharp.Workspaces` version 4.10.0 as a specific package instead of leaving it as a transient dependency. This is because it will then have a strict transient dependency on `Microsoft.CodeAnalysis.Common` version 4.8.0, which is the same that Umbraco has. @@ -149,7 +149,7 @@ builder.Services.AddUmbracoDbContext((serviceProvider, options) {% endhint %} 2. Open your terminal and navigate to your project folder. -3. Generate the migration by running: +3. Generate the migration by running: ```bash dotnet ef migrations add InitialCreate --context BlogContext