Build a business dashboard without layout code. Drop tiles on a 12 column grid, put a KPI card, a chart, a map or a report preview in each one, switch the whole screen to a dark theme with one property, and let users drag, resize and save their own layout.
Eleven capabilities in four groups, with the real component and property names and a link to each help topic. Features marked Registered are not in the free .NET Community build.
A grid that places tiles for you, and cards that show the numbers.
Layout and content
A dashboard is a grid of tiles that must stay tidy at any window size and any DPI. Drop a dashboard on the form, add tiles, and give each one a column, a row and a span. The grid computes column widths from the available width, scales gaps and row heights by the monitor DPI, and scrolls vertically when the tiles need more rows than fit. Overlapping tiles are pushed down a row at a time, never on top of each other. Because the layout lives in one engine, the same tile cells give the same arrangement on VCL, FireMonkey and the .NET views.
TsgcVCLDashboard with Columns (default 12), RowHeight (120), Gap and Padding (12)TsgcVCLDashboardTile with Col, Row, ColSpan and RowSpanLayout.PlacedCell and Layout.Rect
Layout and content
When the content of a dashboard depends on the user or the data, you do not want to compute coordinates. Leave a tile's column and row at -1 and auto-flow puts it in the first free slot, scanning rows from the top and columns from the left. Fix only the column and the tile drops to the first free row in that column. Mix fixed and flowing tiles on the same dashboard.
AutoFlow is on by default; a new tile starts at Col and Row -1 with a 3 by 2 spanTsgcDashboardLayout, drives VCL, FireMonkey and .NET
Layout and content
A tile is a container with an optional header, so it hosts whatever your screen needs: a chart, a grid, a map, a PDF viewer, a report preview or a plain memo. Set the control's parent to the tile and align it to the client area. The Suite demo hosts sgcCharts, sgcMaps, sgcPDF and sgcReports in one dashboard, all following the dashboard theme. A tile can drop its header for a clean full bleed chart, or keep it as a title bar. The dashboard grows by rows and scrolls vertically as you add tiles.
Title and ShowHeader on every tileParentTheme lets a tile follow the dashboard or keep its own ThemeTsgcFMXDashboardTile on FireMonkey
Layout and content
Every dashboard opens with a row of numbers that matter: revenue, orders, churn, response time. A KPI card shows the value large, an icon, a trend arrow with its text, a footer line and a small sparkline of recent values, in one component. Call AddValue as new figures arrive and the sparkline scrolls; MaxPoints decides how much history it keeps. AccentColor lets you colour a card to match what it measures, and the card follows the light or dark theme of the dashboard it sits in.
TsgcVCLKPICard with Title, Value, Icon, FooterText and AccentColorTrend: ktUp, ktDown or ktNeutral, with TrendValue textAddValue, ClearValues and MaxPoints for the sparklineAddValue is thread-safe, so a worker thread can feed itLet users arrange their own start page and keep it, and feed it from the wire.
User layouts and live data Registered only
On a shared start page every user wants different numbers in front. Turn on dragging and the user moves a tile by its header; turn on resizing and a grip in the corner changes its span. While the mouse moves, the target cell is drawn under the tiles and the tile snaps to the grid. Escape cancels. Tiles you mark as locked never move. Combine it with saved layouts below and every user keeps the start page they arranged, while you still decide which tiles exist.
AllowDrag and AllowResize on the dashboardLocked on a tile keeps it in placeOnLayoutChanged fires after every drag or resizeCommunity builds a fixed layout from code; runtime drag and resize are Registered.
Read the help topicUser layouts and live data Registered only
A layout the user arranged must come back after a restart. One call writes the grid metrics and, for every named tile, its cell and visibility as compact JSON; another applies it. Tiles are matched by name, unknown names are ignored, and tiles missing from the text keep their cells, so an older saved layout still loads after you add a tile in a new version. The JSON is small and readable, so you can ship a default layout with the application and offer a reset button that loads it again.
SaveLayout and LoadLayout return and apply a JSON stringSaveLayoutToFile, LoadLayoutFromFile, SaveLayoutToStream, LoadLayoutFromStreamUser layouts and live data Registered only
Operations screens show values that change every second. The sgcDashboardWS bridge reads a number out of every JSON message of an sgcWebSockets client and pushes it into a card, sparkline included. The trend arrow follows the previous value by itself. On Delphi 2010 and later the text updates run in the main thread, so the client can use any threading mode. Messages that are not valid JSON, or whose path is not a number, are ignored, so a noisy feed never breaks the screen.
TsgcDashboardSource_WebSocket, TsgcDashboardSource_MQTT (with Topic) and TsgcDashboardSource_SSEValuePath such as data.items[0].value, ValueFormat default %.2fTitlePath and TrendValuePath copy more fields into the cardOnValue event after each updateThe bridge needs sgcWebSockets. In Community, feed cards from code with Value and AddValue.
Read the help topicOne look across the screen, the same cards as images, the same design on every target.
Themes, images and platforms
A dark control room and a bright office need the same screen in two looks. Set the dashboard theme and it reaches every tile, every KPI card and the sgcUI controls inside them, so charts, gauges and grids switch together. The theme type is the same one every sgcUI product uses, so a whole application can follow one setting. Tiles that need to stand out can keep a theme of their own while the rest of the dashboard follows the global one.
Theme := utDark or utLight on the dashboardParentTheme, or keep their own ThemeThemes, images and platforms
The numbers on the dashboard are often wanted elsewhere: in the morning report e-mail, on an intranet page or in a PDF. TsgcDashboardKPI renders the same card with no window and no VCL or FireMonkey, so a console program, a Windows service or a Linux64 server can produce it. Width and height are logical pixels and a scale factor gives sharp high DPI images. Use it for scheduled reports: build the cards from the same queries your dashboard uses and attach the images to the message.
SaveToPNG to a file or stream, for example 320 by 160 at scale 2 for a 640 by 320 imageSaveToSVG for crisp vector outputCard.KPI.SaveToPNG saves what an on screen card showsThemes, images and platforms
Write the dashboard once and reuse the design. The FireMonkey dashboard, tiles and KPI cards run on Windows, macOS, iOS and Android, and the .NET port offers the same classes for WinForms, WPF and Avalonia. Because one layout engine computes the cells everywhere, a saved layout means the same thing on every target. The demos ship in the same set for every target: Basic, LiveKPI, SaveLayout and Suite for Delphi and C++ Builder, plus WinForms, WPF and Avalonia versions in .NET.
TsgcFMXDashboard, TsgcFMXDashboardTile, TsgcFMXKPICardTsgcWinFormsDashboard, TsgcWinFormsKPICard and their WPF and Avalonia twinsThe preview shows exactly what the printer and the PDF get.
Print, preview and PDF
The dashboard prints on one page as a picture of the whole board: every tile that is not hidden, the tiles scrolled out of view included, laid out as on screen. Every sgcUI control in a tile is drawn by its own renderer, so KPI cards, charts, gauges, grids, pivot grids, planner views and diagrams all print. Other controls in a tile, such as a memo or a label, are left blank.
Print shows the print dialog or prints straight to the default printer, and ShowPrintPreview opens a preview with page navigation, zoom, page setup, printing and PDF exportPrintSettings holds the paper, the orientation, the margins, the scaling and the header and footer text, and the printer, the preview and the PDF all use itExportToPDF writes the page as one tagged picture, 192 dpi by default, with an alternative text that lists the titles of the tiles in reading orderPDFALevel of TsgcUIPDFOptions adds PDF/A-2a or PDF/A-3a for archiving, alone or together with PDF/UAPrinting and the preview are in every edition, the free Community edition included, on VCL, FireMonkey, WinForms, WPF and Avalonia. In FireMonkey, printing works on Windows and macOS, and the preview and the PDF export on every platform. The PDF export needs the sgcUIPDF bridge and a licensed sgcPDF (the NuGet package esegece.sgcUICore.sgcPDF in .NET), so it is not in the Community edition.
UI Automation for screen readers, the keyboard and high contrast, with no setup.
Accessibility
sgcDashboard exposes the dashboard and its tiles to Microsoft UI Automation with their titles and position, the control hosted in each tile, and the KPI cards with title, value, unit and trend.
Accessibility is on by default in every edition, the free Community edition included, on VCL in every Delphi and C++Builder version from Delphi 7 to Delphi 13, on FireMonkey on Windows, and on WinForms, WPF and Avalonia. In Delphi and C++Builder, AccessibleName and AccessibleDescription set the name and the description exposed to UI Automation, and in .NET the standard accessible name and help text of each framework do the same. See the accessibility conformance reports.
sgcDashboard inside the sgcUI suite demos: complete applications that run offline with built-in simulated data.
KPI cards with sparklines, alarm tiles, a treemap and a VaR gauge as dashboard tiles.
Altamira Markets →
OEE cards with sparklines, a bottle counter and alarm tiles around the process diagram.
Altamira Plant →
The ERP dashboard: KPI cards with sparklines, a revenue chart, gauges and a customer map.
Altamira ERP →
Portfolio KPI cards with sparklines, health gauges and charts on one page.
Altamira PMO →
The start page of an ERP shows revenue, open orders, overdue invoices and churn as KPI cards with trend arrows, a sales chart and a top customers grid in tiles below. Every night a service renders the same cards as PNG for the management e-mail, with the same numbers and colours as on screen.
A wall screen in a plant shows line throughput, temperatures and alarm counts. MQTT sources push each reading into its card as it arrives, the sparklines show the last minutes, and a dark theme keeps the room calm at night. Gauges and charts in neighbouring tiles follow the same theme.
In a desktop client used by many roles, each user drags the tiles that matter to the top, resizes the chart they watch most and hides the rest. The layout is saved as JSON per user and restored at the next login, and new tiles added in an update simply flow into free space.
The same API in Delphi, C++ Builder and C#: tiles on the grid, a KPI card with a sparkline in each, a dark theme and a saved layout. Dragging and layout files need the Registered edition.
Tiles on the 12 column grid with a KPI card in each, a dark theme, and the layout saved to a file. Dragging and layout files need the Registered edition.
uses
SysUtils, Controls, sgcUICore_Theme, sgcDashboard_KPI, sgcDashboard_VCL, sgcDashboard_KPI_VCL;
procedure AddKPI(aDash: TsgcVCLDashboard; const aName, aTitle, aValue,
aChange: string; aCol: Integer; aTrend: TsgcDashboardKPITrend);
var
oTile: TsgcVCLDashboardTile;
oCard: TsgcVCLKPICard;
begin
oTile := TsgcVCLDashboardTile.Create(aDash.Owner);
oTile.Name := aName;
oTile.Parent := aDash;
oTile.Col := aCol;
oTile.ColSpan := 4;
oTile.Title := aTitle;
oCard := TsgcVCLKPICard.Create(aDash.Owner);
oCard.Parent := oTile;
oCard.Align := alClient;
oCard.Value := aValue;
oCard.Trend := aTrend;
oCard.TrendValue := aChange;
oCard.AddValue(47);
oCard.AddValue(52);
end;
procedure BuildDashboard(aOwner: TWinControl);
var
oDash: TsgcVCLDashboard;
begin
oDash := TsgcVCLDashboard.Create(aOwner);
oDash.Parent := aOwner;
oDash.Align := alClient;
// drag, resize and layout files need the Registered edition
oDash.AllowDrag := True;
AddKPI(oDash, 'tileRevenue', 'Revenue', '12,480 USD', '+4.2 %', 0, ktUp);
AddKPI(oDash, 'tileOrders', 'Orders', '1,284', '+8.1 %', 4, ktUp);
oDash.Theme := utDark;
if FileExists('layout.json') then
oDash.LoadLayoutFromFile('layout.json');
oDash.SaveLayoutToFile('layout.json');
end;The same dashboard in C++ Builder with the generated headers.
#include <vcl.h>
#include "sgcUICore_Theme.hpp"
#include "sgcDashboard_KPI.hpp"
#include "sgcDashboard_VCL.hpp"
#include "sgcDashboard_KPI_VCL.hpp"
void AddKPI(TsgcVCLDashboard *aDash, const String aName, const String aTitle,
const String aValue, const String aChange, int aCol,
TsgcDashboardKPITrend aTrend)
{
TsgcVCLDashboardTile *oTile = new TsgcVCLDashboardTile(aDash->Owner);
oTile->Name = aName;
oTile->Parent = aDash;
oTile->Col = aCol;
oTile->ColSpan = 4;
oTile->Title = aTitle;
TsgcVCLKPICard *oCard = new TsgcVCLKPICard(aDash->Owner);
oCard->Parent = oTile;
oCard->Align = alClient;
oCard->Value = aValue;
oCard->Trend = aTrend;
oCard->TrendValue = aChange;
oCard->AddValue(47);
oCard->AddValue(52);
}
void BuildDashboard(TWinControl *aOwner)
{
TsgcVCLDashboard *oDash = new TsgcVCLDashboard(aOwner);
oDash->Parent = aOwner;
oDash->Align = alClient;
// drag, resize and layout files need the Registered edition
oDash->AllowDrag = true;
AddKPI(oDash, "tileRevenue", "Revenue", "12,480 USD", "+4.2 %", 0, ktUp);
AddKPI(oDash, "tileOrders", "Orders", "1,284", "+8.1 %", 4, ktUp);
oDash->Theme = utDark;
if (FileExists("layout.json"))
oDash->LoadLayoutFromFile("layout.json");
oDash->SaveLayoutToFile("layout.json");
}The WinForms version in C#, with the same class names as Delphi.
using System.Windows.Forms;
using esegece.sgcDashboard;
using esegece.sgcUICore;
public static class KpiDashboard
{
// One KPI tile with a sparkline, placed on the dashboard grid.
static void AddKPI(TsgcWinFormsDashboard aDash, string aName, string aTitle,
string aValue, string aChange, int aCol, TsgcDashboardKPITrend aTrend)
{
var oTile = new TsgcWinFormsDashboardTile();
oTile.Name = aName;
oTile.Title = aTitle;
oTile.Col = aCol;
oTile.ColSpan = 4;
var oCard = new TsgcWinFormsKPICard();
oCard.Dock = DockStyle.Fill;
oCard.Value = aValue;
oCard.Trend = aTrend;
oCard.TrendValue = aChange;
oCard.AddValue(47);
oCard.AddValue(52);
oTile.Controls.Add(oCard);
aDash.Controls.Add(oTile);
}
public static void Build(Form aForm)
{
var oDash = new TsgcWinFormsDashboard();
oDash.Dock = DockStyle.Fill;
oDash.Theme = TsgcUITheme.utDark;
oDash.AllowDrag = true; // drag and layout files: Registered edition
AddKPI(oDash, "tileRevenue", "Revenue", "12,480 USD", "+4.2 %", 0, TsgcDashboardKPITrend.ktUp);
AddKPI(oDash, "tileOrders", "Orders", "1,284", "+8.1 %", 4, TsgcDashboardKPITrend.ktUp);
AddKPI(oDash, "tileChurn", "Churn", "2.4 %", "-0.3 %", 8, TsgcDashboardKPITrend.ktDown);
aForm.Controls.Add(oDash);
if (System.IO.File.Exists("layout.json"))
oDash.LoadLayoutFromFile("layout.json");
oDash.SaveLayoutToFile("layout.json");
}
}dotnet add package esegece.sgcDashboard.WinFormsFour demos for Delphi and C++ Builder and six for .NET, all in the compiled demos download.
Six tiles and four KPI cards on the 12 column grid, with a log and a list in the other tiles. The quickest way to see the layout engine and the theme switch.
KPI cards fed by the sgcDashboardWS bridge, with values ticking and sparklines growing as messages arrive. Needs sgcWebSockets.
Drag tiles by their header, resize them by the grip, save the layout to JSON, restart the demo and see it restored.
A chart, a map, a PDF viewer, a report preview and KPI cards from other sgcUI products in one themed dashboard.
Basic, BasicWpf, BasicAvalonia, LiveKPI, SaveLayout and Suite for WinForms, WPF and Avalonia.
Ready to run executables of every sgcUI product, nothing to install.
Download sgcUI_bin.zip →sgcDashboard is in sgcUI Professional and Enterprise, and it is also sold on its own. sgcDashboard is also included in the All-Access bundle.
€199 / developer, full source code, 1 year of updates.
Buy sgcDashboard → See pricing →The free Community edition (esegece.sgcDashboard.Community on NuGet) includes the grid, tiles, KPI cards with sparklines, headless PNG and SVG and themes. It leaves out runtime drag and resize, SaveLayout and LoadLayout, and the sgcDashboardWS bridge.
| Feature | Community (free) | Registered |
|---|---|---|
| Tile grid with spans and auto-flow | ✓ | ✓ |
| KPI cards with trend and sparkline | ✓ | ✓ |
| Light and dark themes | ✓ | ✓ |
| Headless KPI cards as PNG and SVG | ✓ | ✓ |
| Runtime drag and resize of tiles | − | ✓ |
| SaveLayout and LoadLayout | − | ✓ |
| sgcDashboardWS live sources (WebSocket, MQTT, SSE) | − | ✓ |
| Component | What it is |
|---|---|
| TsgcVCLDashboard, TsgcFMXDashboard | The grid container for VCL and FireMonkey. |
| TsgcVCLDashboardTile, TsgcFMXDashboardTile | A tile with a title that hosts any control. |
| TsgcVCLKPICard, TsgcFMXKPICard | A KPI card with trend, footer and sparkline. |
| TsgcDashboardKPI | The framework neutral, headless KPI card with PNG and SVG export. |
| TsgcDashboardLayout | The layout engine, also available on Linux64. |
| TsgcDashboardSource_WebSocket, _MQTT, _SSE | Live KPI sources of the sgcDashboardWS bridge (Registered only). |
| Target | Component | Platforms |
|---|---|---|
| Delphi 7 to 13, VCL | TsgcVCLDashboard | Win32 and Win64 |
| Delphi XE6 to 13, FireMonkey | TsgcFMXDashboard | Windows, macOS, iOS and Android |
| C++ Builder 2007 to 13 | TsgcVCLDashboard, TsgcFMXDashboard | Generated .hpp headers and static libraries |
| Delphi 10.2 to 13, framework neutral | TsgcDashboardLayout, TsgcDashboardKPI | Linux64, layout engine and headless KPI cards |
| .NET Framework 4.7.2, .NET 8, 9 and 10 | TsgcWinFormsDashboard, WPF and Avalonia counterparts | WinForms, WPF and Avalonia |
Yes, in the Registered edition. AllowDrag and AllowResize let users move tiles by the header and resize them by a grip, and SaveLayoutToFile or SaveLayout store the result as JSON. LoadLayout restores it by tile name, so layouts survive new versions of your application.
Any control. A tile is a container: set the control's parent to the tile and align it to the client area. The Suite demo hosts a chart, a map, a PDF viewer and a report preview, and sgcUI controls in a tile follow the dashboard theme.
From code, set Value and call AddValue, which is thread-safe. With the Registered edition and sgcWebSockets, the sgcDashboardWS sources read a number from each WebSocket, MQTT or SSE message by ValuePath and update the card and its trend for you.
The dashboards and tiles, the grid layout with auto-flow, KPI cards with sparklines, headless PNG and SVG and the themes. It leaves out runtime drag and resize, SaveLayout and LoadLayout, and the sgcDashboardWS bridge. See Editions.
Yes. TsgcFMXDashboard, its tiles and the KPI cards run on FireMonkey from Delphi XE6 on Windows, macOS, iOS and Android, with the same layout engine as the VCL dashboard. Sizes are device independent and follow the form scale.
Yes. TsgcDashboardKPI draws a card with no window and no VCL or FireMonkey, and writes PNG or SVG to a file or stream. It builds on every platform, Linux64 included, so a service or web server can produce the images.
Yes. All sizes are device independent pixels. The VCL dashboard scales them by the monitor PPI divided by 96 and the FireMonkey dashboard by the form scale, so tiles, gaps and row heights keep their proportions on any monitor.
Introduction, Quick Start VCL, Platforms, Editions, Dashboard, KPI card, Layout, Persistence, Live data.
Introduction, Quick Start C++ Builder, Platforms, Layout, Live data.
Delphi, C++ Builder and .NET, covering every sgcUI product.
Put trend charts in dashboard tiles next to the KPI cards; both follow the same theme.
Explore sgcCharts →
Gauges make clear tiles for current values; the DashboardGauges demo shows six of them.
Explore sgcGauges →Feed KPI cards from WebSocket, MQTT or SSE with the sgcDashboardWS bridge.
Explore sgcWebSockets →