Umbraco-package Can there be multiple JS files

Questions
1

Hi,

Is it possible in the umbraco-package in Umbraco 17 to allow multiple JavaScript files to be used on the same dash board.

Say 2 files.

Once for the Logic

One for the UI?

Ta

Darren

2

Hi @darrenhunterEmerald ,

Yes, it can be done.

Like on Umbraco 13 we used to add all JS files like this:

// The OLD Umbraco 13 way
{
    "javascript": [
        "~/App_Plugins/MyDashboard/dashboard.controller.js",
        "~/App_Plugins/MyDashboard/dashboard.resource.js" // You had to list the logic file here!
    ]
}

In Umbraco 17: Umbraco no longer manages your file loading — the browser does. You only tell Umbraco where your UI starts, and standard JavaScript handles the rest.

For example, see this setup:

1. The Logic File (dashboard.logic.js)

export class DashboardLogic {
    async getData() {
        return { text: "Hello from the logic file" };
    }
}

2. The UI File (dashboard.ui.js) This handles the Lit element. You use a standard ES Module import to bring your logic file in.

import { html, LitElement } from "@umbraco-cms/backoffice/external/lit";
import { DashboardLogic } from "./dashboard.logic.js"; // Standard JS import

export default class MyDashboard extends LitElement {
    constructor() {
        super();
        this.logic = new DashboardLogic();
    }
    // ... Lit rendering logic goes here
}
customElements.define("my-dashboard", MyDashboard);

3. The Manifest (umbraco-package.json) You only point the element property to the UI file. You do not register the logic file here at all.

{
  "type": "dashboard",
  "alias": "My.Dashboard",
  "name": "My Dashboard",
  "element": "/App_Plugins/MyPackage/dashboard.ui.js"
}

Helpful Resources:

Hope this helps!

Regards,
Shekhar

3

In addition to @ShekharTarare’s answer, you also have the ability to use the bundle extension point which allows you to point your JSON to a JS file containing definitions for multiple manifests.

4

LottePitcher/opinionated-package-starter: Get a head start when creating Umbraco Packages

if you want a quick up and running with bundles!