Widget Service

The widget service (universe/widget-service) manages two registries used by the dashboard:

Dashboards — named groups of widgets ('dashboard' is the built-in console home; you can register your own)
Widgets — Widget descriptors made selectable on a dashboard, optionally auto-loaded as defaults

You'll most often add widgets to the built-in 'dashboard'. You can also register your own dashboard for an extension-specific page.

Resolving the Service

// addon/extension.js
import { Widget, ExtensionComponent } from '@fleetbase/ember-core/contracts';

export default {
    setupExtension(app, universe) {
        const widgetService = universe.getService('widget');
        // …
    },
};

Registering Widgets on the Built-in Dashboard

The most common pattern — add one or more widgets to the console home dashboard. Widgets with default: true are also added to the default-widget list, so they appear automatically the first time a user lands on the dashboard.

// addon/extension.js
import { Widget, ExtensionComponent } from '@fleetbase/ember-core/contracts';

export default {
    setupExtension(app, universe) {
        const widgetService = universe.getService('widget');

        widgetService.registerWidgets('dashboard', [
            new Widget({
                id: 'storefront-key-metrics-widget',
                name: 'Storefront Metrics',
                description: 'Key metrics from Storefront.',
                icon: 'store',
                component: new ExtensionComponent(
                    '@fleetbase/storefront-engine',
                    'widget/storefront-key-metrics'
                ),
                grid_options: { w: 12, h: 7, minW: 8, minH: 7 },
                options: { title: 'Storefront Metrics' },
                default: true,
            }),
        ]);
    },
};

Real example: packages/storefront/addon/extension.js:55.

Registering a New Dashboard

For extensions that ship their own dashboard surface (e.g. Ledger's /console/ledger overview), register the dashboard and then attach widgets to it.

widgetService.registerDashboard('ledger');
widgetService.registerWidgets('ledger', widgets);

Real example: packages/ledger/addon/extension.js:185 — Ledger registers its own dashboard, attaches its full widget set there, and additionally exposes a curated subset on the built-in 'dashboard'.

Methods

`registerDashboard(name, options?)`

Registers a named dashboard. options are stored alongside the dashboard record and forwarded to whatever component renders it.

widgetService.registerDashboard('ledger', {
    title: 'Ledger Overview',
    icon: 'gauge-high',
});

`registerWidgets(dashboardName, widgets)`

Adds widgets to a dashboard's pickable list. Widgets with default: true are also added to the default-widget list.

widgets accepts a single Widget/object or an array
Each widget is normalized via Widget.toObject() and stored under the key ${dashboardName}#${widget.id}
id (or the legacy alias widgetId) is required; missing ids emit a warning

Property	Description
`id`	Required. Unique identifier (alias `widgetId` accepted)
`name`	Display name in the picker
`description`	Short description in the picker
`icon`	FontAwesome icon
`component`	An `ExtensionComponent` (string path, class, or full options)
`grid_options`	`{ w, h, minW, minH }` — passed through to `grid-stack`
`options`	Default options forwarded to the widget component
`category`	Picker category (default `'default'`)
`default`	Auto-add to the dashboard's default-widget list

new Widget({
    id: 'fleet-ops-key-metrics',
    name: 'Fleet-Ops Metrics',
    description: 'Active vehicles, drivers, and live orders.',
    icon: 'truck',
    component: new ExtensionComponent('@fleetbase/fleetops-engine', 'widget/fleet-ops-key-metrics'),
    grid_options: { w: 12, h: 7, minW: 8, minH: 7 },
    options: { title: 'Fleet-Ops Metrics' },
    default: true,
});

A widget component lives inside your engine — anywhere under addon/components/ works. The ExtensionComponent reference is what crosses the engine boundary.

{{!-- addon/components/widget/storefront-key-metrics.hbs --}}
<div class="widget">
    {{#if this.isLoading}}
        <Spinner />
    {{else}}
        <div class="text-2xl">{{this.metrics.totalOrders}}</div>
        <div class="text-xs text-secondary">Total orders this week</div>
    {{/if}}
</div>

// addon/components/widget/storefront-key-metrics.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';

export default class StorefrontKeyMetricsWidget extends Component {
    @service fetch;
    @tracked metrics = null;
    @tracked isLoading = true;

    constructor() {
        super(...arguments);
        this.load();
    }

    async load() {
        this.metrics = await this.fetch.get('storefront/v1/metrics');
        this.isLoading = false;
    }
}

Deprecated Methods

The two façade shortcuts on UniverseService are still wired but emit deprecation warnings:

Deprecated	Use instead
`universe.registerDashboardWidgets(widgets)`	`universe.getService('widget').registerWidgets('dashboard', widgets)`
`universe.registerDefaultDashboardWidgets(widgets)`	`universe.getService('widget').registerDefaultWidgets('dashboard', widgets)`

Source

File	Description
`addon/services/universe/widget-service.js`	`WidgetService`
`addon/contracts/widget.js`	`Widget` contract
`packages/storefront/addon/extension.js`	Single-widget on built-in dashboard
`packages/ledger/addon/extension.js`	Custom dashboard + widget set

Widget Service

Resolving the Service

Registering Widgets on the Built-in Dashboard

Registering a New Dashboard

Methods

`registerDashboard(name, options?)`

`registerWidgets(dashboardName, widgets)`

`registerDefaultWidgets(dashboardName, widgets)`

`getWidgets(dashboardName)`

`getDefaultWidgets(dashboardName)`

`getWidget(dashboardName, widgetId)`

`getDashboards()` / `getDashboard(name)`

The `Widget` Contract

Building the Widget Component

Deprecated Methods

Source

On this page