Displaying a simple widget in the admin interface

[tlodge]

Hi,

I'd really appreciate any help with this; I've searched the discussions and do not see anyone else with this problem, and I'm stumped! In short I'm trying to just create a the simplest widget on the admin UI. The following code compiles fine, and I get no errors when I run the dev-server - I also get no errors in the console, but I don't see my widget when logged in as superadmin in the admin panel. I've read and re-read the new docs. Seems as though registerDashboardWidget never gets called.

My component, jb-widget.component.ts

import { Component, NgModule, OnInit } from '@angular/core';
import { DataService, SharedModule } from '@vendure/admin-ui/core';

@Component({
  selector: 'jb-widget',
  template: `
    <ul>
      <li *ngFor="let review of pendingReviews$ | async">
        <a [routerLink]="['/extensions', 'product-reviews', review.id]">{{ review.summary }}</a>
        <span class="rating">{{ review.rating }} / 5</span>
      </li>
    </ul>
  `,
})

export class JBWidgetComponent implements OnInit {

  pendingReviews$: any;
  constructor(private dataService: DataService) {}

  ngOnInit() {
      this.pendingReviews$ = [
        {
            id:'an id',
            summary:'test',
            rating:6
        }
      ]
  }
}

@NgModule({
    imports: [SharedModule],
    declarations: [JBWidgetComponent],
})
export class JBWidgetModule {}

and then I have my shared extension module, shared-ui-extensionmodule:

import { NgModule } from '@angular/core';
import { registerDashboardWidget } from '@vendure/admin-ui/core';

@NgModule({
  imports: [],
  declarations: [],
  providers: [
    registerDashboardWidget('my test', {
      title: 'My test',
      supportedWidths: [4, 6, 8, 12],
      requiresPermissions: ['SuperAdmin'],
      loadComponent: () =>
        import('./components/jb-widget/jb-widget.component').then(
          m => m.JBWidgetComponent,
        ),
    }),
  ],
})
export class JBUIExtensionModule {}

and finally my plugin, jb.plugin.ts:

import { PluginCommonModule, VendurePlugin } from '@vendure/core';
import { AdminUiExtension } from '@vendure/ui-devkit/compiler';
import path from 'path';

@VendurePlugin({
    imports: [PluginCommonModule],
    configuration: config => {
        return config;
    }
})
export class JBPlugin {
    static uiExtensions: AdminUiExtension = {
        extensionPath: path.join(__dirname, 'ui'),
        ngModules: [
            {
                type: 'shared' as const,
                ngModuleFileName: 'shared-ui-extension.module.ts',
                ngModuleName: 'JBUIExtensionModule',
            }
        ],
    };
}

Finally in my vendure config I have:

AdminUiPlugin.init({
            route: 'admin',
            port: 5001,           
}),
JBPlugin

Any pointers or help gratefully received.

[michaelbromley]

Hi,

I don't see anywhere if you code that you are calling compileUiExtensions() - see these docs: https://beta-docs.vendure.io/guides/extending-the-admin-ui/using-angular/#4-pass-the-extension-to-the-compileuiextensions-function

btw I'm currently working on all the ui extension docs, so this should soon be easier to follow!

[tlodge]

Thanks Michael - really really appreciate how responsive you are! My misunderstanding - I'd made an assumption that when running in dev mode vendure would somehow spot the uiExtensions object in the plugin and do the necessary compilation - but I just need to do some more reading.