Custom Widgets

Create custom dashboard widgets

Overview

Widgets display data visualizations, KPIs, and custom content in qqq dashboards. Create custom widgets for specialized displays.

Built-in widget types:

Chart - Bar, line, pie charts

KPI - Single metric display

Table - Data grid

HTML - Custom HTML content

Define the widget metadata:

Java

@QWidgetMetaData(name = "salesFunnel")
public class SalesFunnelWidget implements WidgetMetaDataProducer {
    @Override
    public QWidgetMetaData produce(QInstance qInstance) {
        return new QWidgetMetaData()
            .withName("salesFunnel")
            .withLabel("Sales Funnel")
            .withType("custom")
            .withCodeReference(new SalesFunnelRenderer());
    }
}

Implement the rendering logic:

Java

public class SalesFunnelRenderer implements QWidgetRenderer {
    @Override
    public RenderWidgetOutput render(RenderWidgetInput input) {
        // Fetch data
        List<FunnelStage> stages = fetchFunnelData();
        
        // Return widget data
        return new RenderWidgetOutput()
            .withData(Map.of(
                "stages", stages,
                "totalValue", calculateTotal(stages)
            ));
    }
}

Frontend Component

For fully custom rendering, provide a React component:

JavaScript

// widgets/SalesFunnel.jsx
export function SalesFunnel({ data }) {
    return (
        <div className="sales-funnel">
            {data.stages.map(stage => (
                <FunnelStage key={stage.name} {...stage} />
            ))}
        </div>
    );
}

Adding to Dashboard

Add widgets to app dashboards:

Java

.withWidgets(List.of(
    new QWidgetReference("salesFunnel")
        .withLabel("Sales Pipeline")
        .withSize("large")
))

Next Steps

Creating qBits - Package widgets as qBits

Custom Widgets

Overview

Widget Types

Creating a Custom Widget

Widget Renderer

Frontend Component

Adding to Dashboard

Next Steps