Creating Widgets

Learn how to create custom widgets for the gridster-based dashboard system.

Overview

Widgets are reusable dashboard components that can be dynamically loaded, resized, and positioned by users.

Widget Structure

packages/@barcoding/widget-example/
├── src/
│   ├── lib/
│   │   ├── widget-example.component.ts
│   │   ├── widget-example.component.html
│   │   ├── widget-example.component.scss
│   │   ├── widget-example.component.spec.ts
│   │   └── widget-example.module.ts
│   └── index.ts
├── package.json
├── ng-package.json
└── README.md

Quick Start

1. Generate Widget

cd web
ng generate library @barcoding/widget-example --prefix=app

2. Add Dependencies

{
  "dependencies": {
    "@barcoding/core": "*",
    "@barcoding/sdk": "*",
    "@barcoding/gridster-core": "*"
  }
}

3. Create Widget Component

// widget-example.component.ts
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-widget-example',
  templateUrl: './widget-example.component.html',
  styleUrls: ['./widget-example.component.scss']
})
export class WidgetExampleComponent implements OnInit {
  @Input() config: any;

  ngOnInit() {
    // Initialize widget with config
    console.log('Widget config:', this.config);
  }
}

4. Create Widget Module

// widget-example.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WidgetExampleComponent } from './widget-example.component';

@NgModule({
  declarations: [WidgetExampleComponent],
  imports: [CommonModule],
  exports: [WidgetExampleComponent]
})
export class WidgetExampleModule {}

5. Register Widget

Register in the widget catalog (database or configuration):

{
  type: 'example',
  title: 'Example Widget',
  description: 'An example widget',
  component: WidgetExampleComponent,
  defaultConfig: {
    cols: 2,
    rows: 2
  }
}

6. Build Widget

ng build @barcoding/widget-example

Widget Configuration

Widgets can accept configuration:

interface WidgetConfig {
  title?: string;
  refreshInterval?: number;
  dataSource?: string;
  // Widget-specific config
}

Coming Soon

This page is under construction. More details will be added about:

• Widget lifecycle
• Data loading
• Widget configuration UI
• Widget templates
• Testing widgets
• Best practices

For now, refer to:

• Gridster Core Package
• Multi-Instance Architecture
• Web Overview