DashboardLayout

TsgcHTMLDashboardLayout — render a full dashboard shell with a fixed sidebar and titled content sections, in Delphi, C++ Builder and .NET.

At a glance

TsgcHTMLDashboardLayout

A layout component that emits a complete dashboard shell: a fixed sidebar on the left and a padded main area built from titled sections. Configure the Sidebar, add sections, then read the HTML property.

Component class

TsgcHTMLDashboardLayout

Renders

Dashboard shell (fixed sidebar + content)

Family

Navigation & Structure

Languages

Delphi, C++ Builder, .NET

QuickStart

Create it, build the shell, render it

Configure the read-only Sidebar, call AddSection(title, content) for each block, then read HTML (or drop it into a TsgcHTMLTemplate_Bootstrap page).

uses
  sgcHTML_Enums, sgcHTML_Component_DashboardLayout;

var
  oDash: TsgcHTMLDashboardLayout;
begin
  oDash := TsgcHTMLDashboardLayout.Create(nil);
  try
    oDash.DarkMode := True;
    oDash.FooterText := '© 2026 Acme Inc.';

    oDash.Sidebar.Brand := 'Acme Admin';
    oDash.Sidebar.Items.Add.Text := 'Overview';
    oDash.Sidebar.Items.Add.Text := 'Reports';

    oDash.AddSection('Sales', '<p>Revenue is up 12%</p>');
    oDash.AddSection('Activity', '<p>3 new orders</p>');

    WebModule.Response := oDash.HTML;   // dashboard shell
  finally
    oDash.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_DashboardLayout.hpp

TsgcHTMLDashboardLayout *oDash = new TsgcHTMLDashboardLayout(NULL);
try
{
  oDash->DarkMode = true;
  oDash->FooterText = "© 2026 Acme Inc.";

  oDash->Sidebar->Brand = "Acme Admin";
  oDash->Sidebar->Items->Add()->Text = "Overview";
  oDash->Sidebar->Items->Add()->Text = "Reports";

  oDash->AddSection("Sales", "<p>Revenue is up 12%</p>");
  oDash->AddSection("Activity", "<p>3 new orders</p>");

  String html = oDash->HTML;   // dashboard shell
}
__finally
{
  delete oDash;
}

using esegece.sgcWebSockets;

var dash = new TsgcHTMLDashboardLayout();
dash.DarkMode = true;
dash.FooterText = "© 2026 Acme Inc.";

dash.Sidebar.Brand = "Acme Admin";
dash.Sidebar.Items.Add().Text = "Overview";
dash.Sidebar.Items.Add().Text = "Reports";

dash.AddSection("Sales", "<p>Revenue is up 12%</p>");
dash.AddSection("Activity", "<p>3 new orders</p>");

string html = dash.HTML;   // dashboard shell

Reference

Key properties & methods

The members you reach for most often.

Sidebar is a read-only TsgcHTMLComponent_Sidebar rendered fixed on the left; configure its Brand, Width and Items in place.

Sections

AddSection(aTitle, aContent, aID) appends a titled <section>; AddRawContent(aContent) drops in markup untouched; ClearContent empties the main area.

Shell

Fluid toggles the full-width container, FooterText adds a centered footer, and LayoutID sets the wrapper's element id.

Dark mode

DarkMode injects a dark theme stylesheet that recolors cards, tables, forms, nav and list groups inside the shell.

Spacing & accents

MainPadding, MainMinHeight and SectionMarginBottom size the main area; SectionTitleBorderColorStyle (a TsgcHTMLColor) tints each section's title underline.

Output

HTML returns the full shell — fixed sidebar, main content and footer — ready to serve, or assign it to a page template's BodyContent.

Resources

Keep exploring

	Online HelpFull API reference and usage guide for this component.	Open
	All sgcHTML ComponentsBrowse the full feature matrix of 80+ components.	Open
	Download Free TrialThe 30-day trial ships the 60.HTML demo projects.	Open
	PricingSingle, Team and Site licenses with full source code.	Open

Best value: All-AccessEvery eSeGeCe product, Premium Support included, from €1,059/year.

See All-Access pricing

Last updated: 16 July 2026