Creating Widgets

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

Note: This page provides a quick overview. For comprehensive widget documentation, see the Complete Widget System Guide.

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
}

Complete Widget Documentation

For comprehensive widget documentation, see:

Core Documentation

• Widget System Overview - Architecture, concepts, database schema
• Widget Creation Guide - Step-by-step creation with schematics
• Widget Development Guide - Best practices and patterns

Additional Resources

• Gridster Core Package - Core widget system
• Multi-Instance Architecture - Instance architecture
• Web Overview - Web application overview

Quick Start

To create a new widget using schematics:

cd /workspace/web
schematics ./widget-create/:widget-create --no-dry-run --name="YourWidgetName" --instance="backend"

Or use the Claude Code command:

/create-widget YourWidgetName "Widget description"

See Widget Creation Guide for complete instructions.