Merge pull request #7040 from sarah-nic/main

Fixed some minor errors in the custom dashboard tutorials

Author: sofietoft

15/umbraco-cms/customizing/development-flow/vite-package-setup.md

@@ -31,7 +31,6 @@ For this tutorial, it is recommended to use the names given below. However, feel
 
 3. When prompted:
     * Enter **client** as the **Project Name**.
-    * Enter **client** as the **Package name**.
     * Select **Lit** as the framework.
     * Select **TypeScript** as the variant.
 
@@ -46,6 +45,17 @@ npm create vite@latest client -- --template lit-ts
 
 {% endhint %}
 
+{% hint style="info" %}
+For Windows environments the command should be slightly different::
+
+```typescript
+npm create vite@latest client --- --template lit-ts
+```
+
+or you will still see the interactive prompts, especially when using PowerShell.
+
+{% endhint %}
+
 4. Navigate into the new **client** folder and install the packages:
 
 ```bash
@@ -146,7 +156,7 @@ 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. The `umbraco-package.json` file should be located at `/App_Plugins/` or `/App_Plugins/{YourPackageName}` for Umbraco to detect it.
+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.
 

15/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:

15/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`<uui-table-row class="user">
 			<uui-table-cell>${user.name}</uui-table-cell>
 			<uui-table-cell>${user.email}</uui-table-cell>