From dad1fbe6442b86f0ec4dde1f0cf9a4f9c7dcb520 Mon Sep 17 00:00:00 2001 From: Sarah Nicholson Date: Thu, 24 Apr 2025 15:01:23 +0100 Subject: [PATCH 1/3] Fixed some minor errors in the tutorials for creating a dashboard in the back office --- .../development-flow/vite-package-setup.md | 12 ++++++++-- .../creating-a-custom-dashboard/README.md | 24 +++++++++++++++---- ...-the-dashboard-using-umbraco-ui-library.md | 2 +- 3 files changed, 31 insertions(+), 7 deletions(-) diff --git a/15/umbraco-cms/customizing/development-flow/vite-package-setup.md b/15/umbraco-cms/customizing/development-flow/vite-package-setup.md index 6a477957ca0..b7f4f918f09 100644 --- a/15/umbraco-cms/customizing/development-flow/vite-package-setup.md +++ b/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,15 @@ npm create vite@latest client -- --template lit-ts {% endhint %} +{% hint style="info" %} +For Windows environments, especially when using PowerShell, the command above should be as shown below (note the extra -) or you will still see the interactive prompts: + +```typescript +npm create vite@latest client --- --template lit-ts +``` + +{% endhint %} + 4. Navigate into the new **client** folder and install the packages: ```bash @@ -146,7 +154,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. diff --git a/15/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md b/15/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md index b647ef69f7c..dbd0d1dde9c 100644 --- a/15/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md +++ b/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: diff --git a/15/umbraco-cms/tutorials/creating-a-custom-dashboard/extending-the-dashboard-using-umbraco-ui-library.md b/15/umbraco-cms/tutorials/creating-a-custom-dashboard/extending-the-dashboard-using-umbraco-ui-library.md index c9367dc42ef..56a8d619c69 100644 --- a/15/umbraco-cms/tutorials/creating-a-custom-dashboard/extending-the-dashboard-using-umbraco-ui-library.md +++ b/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` ${user.name} ${user.email} From dec55f02a4b375e6edc159e7e33dd8782879f643 Mon Sep 17 00:00:00 2001 From: Sarah Nicholson Date: Mon, 28 Apr 2025 14:17:10 +0100 Subject: [PATCH 2/3] Reword long run-on sentence --- .../customizing/development-flow/vite-package-setup.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/15/umbraco-cms/customizing/development-flow/vite-package-setup.md b/15/umbraco-cms/customizing/development-flow/vite-package-setup.md index b7f4f918f09..5d0f2196ced 100644 --- a/15/umbraco-cms/customizing/development-flow/vite-package-setup.md +++ b/15/umbraco-cms/customizing/development-flow/vite-package-setup.md @@ -46,12 +46,14 @@ npm create vite@latest client -- --template lit-ts {% endhint %} {% hint style="info" %} -For Windows environments, especially when using PowerShell, the command above should be as shown below (note the extra -) or you will still see the interactive prompts: +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: From ea71ec43567f645feb692d9be414c7242ee08560 Mon Sep 17 00:00:00 2001 From: sarah-nic <42029852+sarah-nic@users.noreply.github.com> Date: Mon, 28 Apr 2025 14:18:03 +0100 Subject: [PATCH 3/3] Update 15/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md Co-authored-by: sofietoft --- 15/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/15/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md b/15/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md index dbd0d1dde9c..bfc593b06a0 100644 --- a/15/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md +++ b/15/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md @@ -140,7 +140,7 @@ declare global { ``` {% endcode %} -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: +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 import { defineConfig } from "vite";