TFlexFMXLayout

How do I preview different screen sizes at design time?

Set the DesignBreakpoint property in the Object Inspector to xs, sm, md, lg, or xl. The layout will re-render in the Form Designer to show exactly how it will look at that viewport width.

How do I change and view LayoutIndex?

Each child control inside a TFlexFMXLayout exposes a FlexFMXCSS.LayoutIndex property. This controls the visual order of the child independent of its position in the component tree. To change it at design time, select the child control and set FlexFMXCSS → LayoutIndex in the Object Inspector. To change it at runtime:

MyButton.FlexFMXCSS.LayoutIndex := 2;
MyLayout.Refresh;

For a small visual indicator of your controls, set ShowLayoutIndicator to true. 

How do I create a two-column layout that stacks on mobile?

// Parent layout is the row
RowLayout.FlexFMXCSS.CSSClasses := 'row';

// Each child fills full width on mobile, half on medium+
LeftPanel.FlexFMXCSS.CSSClasses  := 'col-12 col-md-6';
RightPanel.FlexFMXCSS.CSSClasses := 'col-12 col-md-6';

How do I centre content both horizontally and vertically?

ContainerLayout.FlexFMXCSS.CSSClasses := 'row justify-content-center align-items-center vh-100';

Best practice: nesting layouts

Always set the outermost TFlexFMXLayout to container or container-fluid, then nest row layouts inside, with col-* classes on leaf controls. Avoid skipping the row level — going directly from container to col causes alignment issues.

TFlexFMXAdvancedCalendar

How do I connect the calendar to a database?

Drop a TDataSource linked to your dataset on the form, then set the calendar’s DataSource property to it. Next, expand FieldMapping in the Object Inspector and map each sub-property to the corresponding field name in your dataset:

Calendar1.DataSource := DataSource1;
Calendar1.FieldMapping.EventIDField        := 'ID';
Calendar1.FieldMapping.StartDateTimeField  := 'StartDate';
Calendar1.FieldMapping.EndDateTimeField    := 'EndDate';
Calendar1.FieldMapping.TitleField          := 'Subject';
Calendar1.FieldMapping.ColorField          := 'EventColor'; // optional

The calendar refreshes automatically whenever the dataset is refreshed or a record is changed.

How do I add an event programmatically?

with Calendar1.Events.Add do
begin
  EventID   := 42;
  DateTime  := Now;
  EndDateTime := Now + (1/24); // 1 hour later
  Title     := 'Team Meeting';
  Color     := TAlphaColors.Steelblue;
end;
Calendar1.Refresh;

How do I respond when a user clicks an event?

Handle the OnEventClick event. The AEvent parameter gives you the full TFlexFMXCalendarEvent record:

procedure TForm1.Calendar1EventClick(Sender: TObject; AEvent: TFlexFMXCalendarEvent);
begin
  ShowMessage('Clicked: ' + AEvent.Title + ' (ID=' + AEvent.EventID.ToString + ')');
end;

How do I switch between Day, Week, and Month views at runtime?

Calendar1.ViewMode := cvmWeek;   // Day, Week, or Month

How do I navigate to a specific date?

Calendar1.CurrentDate := EncodeDate(2026, 6, 1);

Best practice: recurring events

Use a separate recurrence dataset and set RecurrenceDataSource with matching RecurrenceFieldMapping. Do not duplicate rows in your main events dataset for each occurrence — let the calendar engine expand the recurrence rule. This keeps your database clean and the calendar performant.

TFlexFMXAdvancedButton

How do I add an icon to a button?

// Assign an image list at design time via ImageSettings.ImageList, then:
Button1.ImageSettings.ImageIndex := 3;
Button1.ImageSettings.Position   := ipLeft;
Button1.ButtonLayout             := blImageAndText;

How do I show a notification badge on a button?

Button1.BadgeSettings.Text       := '5';
Button1.BadgeSettings.BadgeColor := TAlphaColors.Red;

Set BadgeSettings.Text to '' or '0' to hide the badge.

How do I use HTML text in a button label?

Button1.UseHTMLText := True;
Button1.HTMLText    := '<b>Save</b> <font size="11">(Ctrl+S)</font>';

How do I create a group of toggle buttons where only one can be selected?

Set GroupName to the same string on all buttons in the group, and set IsToggle := True. Clicking one will automatically deselect the others.

Best practice: Bootstrap style consistency

Use ButtonStyle semantically — bsDanger for destructive actions, bsSuccess for confirmation, bsSecondary for cancel. Pair with a TFlexFMXStyleController so dark/light mode automatically adjusts all button colours.

TFlexFMXAdvancedTreeView

How do I populate the tree from a dataset?

The tree does not have a built-in DataSource — populate it in code after opening your dataset. A common pattern for self-referencing tables:

procedure TForm1.LoadTree;
var
  Node: TFlexFMXTreeNode;
begin
  TreeView1.Nodes.Clear;
  // Load top-level nodes first
  qryItems.Filter := 'ParentID IS NULL';
  qryItems.Filtered := True;
  qryItems.First;
  while not qryItems.Eof do
  begin
    Node := TreeView1.Nodes.Add;
    Node.Text := qryItems.FieldByName('Name').AsString;
    Node.Tag  := qryItems.FieldByName('ID').AsInteger;
    AddChildNodes(Node, Node.Tag);
    qryItems.Next;
  end;
  TreeView1.Refresh;
end;

How do I attach custom data to a node?

Node.Data := TMyRecord.Create; // or use Node.Tag for a simple integer ID

How do I respond to a node selection?

procedure TForm1.TreeView1NodeSelected(Sender: TObject; ANode: TFlexFMXTreeNode);
begin
  // ANode.Tag holds the ID you set when building the tree
  LoadDetailPanel(ANode.Tag);
end;

How do I use HTML text in a node?

Node.Text := '<b>Project Alpha</b><br><font color="#888">Due: 2026-06-01</font>';

How do I show a badge count on a node?

Node.BadgeText  := '3';
Node.BadgeColor := TAlphaColors.Red;

Best practice: large trees

Set AutoHeight := False and place the tree inside a TScrollBox for large datasets. Load child nodes lazily in the OnExpand event rather than loading the entire tree upfront — this keeps initial render time fast.

TFlexFMXCharts

How do I bind chart data from a database query?

Chart1.Labels.Clear;
Chart1.DataSets.Clear;

var DS := Chart1.DataSets.Add;
DS.Name  := 'Monthly Sales';
DS.Color := TAlphaColors.Royalblue;

qrySales.First;
while not qrySales.Eof do
begin
  Chart1.Labels.Add(qrySales.FieldByName('Month').AsString);
  DS.Data := DS.Data + [qrySales.FieldByName('Total').AsFloat];
  qrySales.Next;
end;
Chart1.Refresh;

How do I animate the chart on data load?

Chart1.Animated         := True;
Chart1.AnimationDuration := 0.4; // seconds

How do I switch chart types at runtime?

Chart1.ChartType := ctBar;  // ctLine, ctBar, ctPie, ctDoughnut, ctArea
Chart1.Refresh;

Best practice: multiple series

When adding multiple DataSets, make sure the Labels count matches the Data array length in every series. Mismatched lengths cause clipped rendering. Always call Chart1.Refresh once after all series are added rather than after each one.

TFlexFMXTileList

How do I populate tiles from a database?

TileList1.Items.Clear;
qryProducts.First;
while not qryProducts.Eof do
begin
  with TileList1.Items.Add do
  begin
    Title       := qryProducts.FieldByName('Name').AsString;
    Description := qryProducts.FieldByName('Description').AsString;
    FooterText  := CurrToStr(qryProducts.FieldByName('Price').AsCurrency);
    Tag         := qryProducts.FieldByName('ID').AsInteger;
    // Load image from blob or file path
    if not qryProducts.FieldByName('Image').IsNull then
      ImageBitmap.LoadFromStream(TBlobField(qryProducts.FieldByName('Image')).AsStream);
  end;
  qryProducts.Next;
end;

How do I respond when a tile is clicked?

procedure TForm1.TileList1TileClick(Sender: TObject; AIndex: Integer);
begin
  // Use Tag to identify the record
  LoadProduct(TileList1.Items[AIndex].Tag);
end;

How do I make tiles responsive (auto columns)?

TileList1.ColumnsCount := 0;   // 0 = auto-calculate from available width
TileList1.TileWidth    := 220;
TileList1.Spacing      := 12;

Best practice: images

Use TileHeight with a fixed value and keep images the same aspect ratio for a uniform grid. If images vary in size, enable AutoHeight := True so taller tiles do not clip their content.

TFlexFMXAdvancedPanel

How do I add a collapsible panel (accordion)?

Panel1.Collapsible := True;
Panel1.Collapsed   := True;   // starts collapsed
Panel1.ShowHeader  := True;
Panel1.HeaderText  := 'Advanced Options';

How do I change the panel header colour?

Panel1.ColorScheme := ccsPrimary;  // Bootstrap colour palette

How do I use a panel as a card with a footer?

Panel1.ShowHeader  := True;
Panel1.HeaderText  := 'Order Summary';
Panel1.ShowFooter  := True;
Panel1.FooterText  := 'Total: £125.00';

TFlexFMXAdvancedDateTimeEditor

How do I connect it to a database field?

DateEditor1.DataSource := DataSource1;
DateEditor1.DataField  := 'AppointmentDate';

How do I restrict selectable dates?

DateEditor1.MinDate := Today;
DateEditor1.MaxDate := IncMonth(Today, 3);

How do I get/set the value in code?

// Get
var D := DateEditor1.Date;

// Set
DateEditor1.Date := EncodeDate(2026, 12, 25);

TFlexFMXAdvancedSignatureCapture

How do I save the signature to a database blob?

var Stream := TMemoryStream.Create;
try
  SignatureCapture1.SaveToStream(Stream);
  Stream.Position := 0;
  TBlobField(qryOrders.FieldByName('Signature')).LoadFromStream(Stream);
finally
  Stream.Free;
end;

How do I load a saved signature back?

var Stream := TMemoryStream.Create;
try
  TBlobField(qryOrders.FieldByName('Signature')).SaveToStream(Stream);
  Stream.Position := 0;
  SignatureCapture1.LoadFromStream(Stream);
finally
  Stream.Free;
end;

How do I check if the user has signed?

if SignatureCapture1.IsEmpty then
  ShowMessage('Please sign before continuing.');

How do I clear the signature?

SignatureCapture1.Clear;

TFlexFMXToast

How do I show a toast notification?

Toast1.Message    := 'Record saved successfully.';
Toast1.ToastStyle := tsSuccess;
Toast1.Show;

How do I change the style and auto-hide delay?

Toast1.ToastStyle  := tsWarning;   // tsDefault, tsSuccess, tsDanger, tsWarning, tsInfo
Toast1.AutoHide    := True;
Toast1.Delay       := 3000;        // milliseconds
Toast1.CompactMode := True;        // smaller footprint
Toast1.Show;

How do I show a toast without placing a component on the form?

Use the class method — no instance needed:

TFlexFMXToast.ShowToast(Self, 'Done', 'Record saved.',
  tpTopRight, tsSuccess, True, 3000);

How do I control where the toast appears?

Pass a TToastPosition to ShowToast: tpTopLeft, tpTopCenter, tpTopRight, tpBottomLeft, tpBottomCenter, tpBottomRight.

Best practice

Prefer the ShowToast class method for fire-and-forget notifications. Drop a persistent TFlexFMXToast instance only when you need to pre-configure properties at design time.

TFlexFMXAdvancedHTMLLabel

How do I enable HTML rendering?

HTMLText is a Boolean that enables HTML parsing. The actual HTML content goes in HTMLSource. The plain text value is in Text (inherited).

Label1.HTMLText   := True;   // enable HTML parsing
Label1.HTMLSource := '<b>Status:</b> <font color="#28a745">Active</font> '
                   + '<font size="11">(since 2026-01-01)</font>';

How do I make a clickable hyperlink inside the label?

Label1.HTMLText   := True;
Label1.HTMLSource := 'Visit our <a href="https://example.com">website</a> for details.';

procedure TForm1.Label1LabelLinkClicked(Sender: TObject; const AURL: string);
begin
  ShellExecute(0, 'open', PChar(AURL), nil, nil, SW_SHOWNORMAL);
end;

Wire up the OnLinkClicked event in the Object Inspector.

How do I enable word wrap and auto-sizing?

Label1.AutoWrap := True;
Label1.AutoSize := True;

How do I truncate long text with an ellipsis?

Label1.TruncateMode := tmEllipsis;
Label1.MaxLines     := 2;

TFlexFMXStyleController

How do I switch between light and dark colour schemes at runtime?

Use the ColorScheme property which accepts a TFlexFMXGridColorScheme value (e.g. gcsLight, gcsDark, gcsPrimary, gcsCustom etc.):

StyleController1.ColorScheme := gcsDark;

How do I apply custom colours?

Set ColorScheme := gcsCustom then modify the sub-property groups:

StyleController1.ColorScheme := gcsCustom;
StyleController1.AdvancedPanelStyles.FillColor  := TAlphaColors.Navy;
StyleController1.AdvancedButtonColors.StandardColor := TAlphaColors.Darkslateblue;

How do I know when the style changes?

Handle the OnStyleChanged event or call Subscribe from a component that needs to refresh when the scheme changes:

StyleController1.Subscribe(MyPanel.StyleChanged);

Best practice: global theming

Place one TFlexFMXStyleController on a shared data module and point every FlexFMX control’s StyleController property to it. Store the user’s preference in your settings and restore it in the data module’s OnCreate.

TFlexFMXAdvancedRating

How do I set and read the rating value?

Rating1.Value    := 4;      // set
Rating1.MaxValue := 5;      // default is 5
ShowMessage(Rating1.Value.ToString + ' / ' + Rating1.MaxValue.ToString);

How do I make the rating read-only?

Rating1.ReadOnly := True;

How do I save the rating to a database when it changes?

procedure TForm1.Rating1RatingChange(Sender: TObject; AValue: Integer);
begin
  qryReviews.Edit;
  qryReviews.FieldByName('Stars').AsInteger := AValue;
  qryReviews.Post;
end;

Wire up the OnRatingChange event in the Object Inspector.

How do I change the rating style (stars vs numbers)?

Rating1.RatingStyle := rsStars;    // rsNumbers, rsStars, rsCircles, rsSquares

TFlexFMXProgressDialog

How do I show progress for a long-running task?

ProgressDialog1.Title   := 'Importing data…';
ProgressDialog1.Message := 'Please wait.';
ProgressDialog1.Show;
try
  for I := 1 to RecordCount do
  begin
    ProcessRecord(I);
    ProgressDialog1.Progress := (I / RecordCount) * 100;
    Application.ProcessMessages;
  end;
finally
  ProgressDialog1.Hide;
end;

How do I show an indeterminate (spinning) progress indicator?

ProgressDialog1.Indeterminate := True;
ProgressDialog1.Show;

TFlexFMXPassLock

How do I set up a PIN and prompt the user on app start?

// On first run, let the user set a PIN:
PassLock1.SetPIN('1234');

// On subsequent starts, validate:
PassLock1.OnSuccess := HandleUnlock;
PassLock1.Show;

How do I respond to a successful unlock?

procedure TForm1.HandleUnlock(Sender: TObject);
begin
  MainForm.Show;
end;

TFlexFMXOrgChart

How do I populate an org chart from a self-referencing table?

OrgChart1.Nodes.Clear;
// Add root node
var Root := OrgChart1.Nodes.Add;
Root.Title    := 'CEO';
Root.SubTitle := 'Jane Smith';

// Add child
var Mgr := Root.Children.Add;
Mgr.Title    := 'CTO';
Mgr.SubTitle := 'John Doe';

OrgChart1.Refresh;

How do I add a photo to an org chart node?

Node.ImageBitmap.LoadFromFile('avatar.png');

TFlexFMXAdvancedSwitch

How do I toggle the switch on or off in code?

Switch1.IsOn := True;

How do I change the colour scheme?

Use the ColorScheme property (type TFlexFMXGridColorScheme):

Switch1.ColorScheme := gcsPrimary;   // gcsSuccess, gcsDanger, gcsWarning, etc.

For fully custom colours, set ColorScheme := gcsCustom and configure them through a linked TFlexFMXStyleController.

How do I set custom on/off labels?

Switch1.OnText  := 'YES';
Switch1.OffText := 'NO';

How do I respond when the user toggles the switch?

procedure TForm1.Switch1Switch(Sender: TObject; IsOn: Boolean);
begin
  qrySettings.Edit;
  qrySettings.FieldByName('IsActive').AsBoolean := IsOn;
  qrySettings.Post;
end;

Wire up the OnSwitch event in the Object Inspector.

TFlexFMXBreadCrumbList

How do I build a navigation breadcrumb trail?

BreadCrumb1.Items.Clear;
BreadCrumb1.Items.Add.Text := 'Home';
BreadCrumb1.Items.Add.Text := 'Products';
with BreadCrumb1.Items.Add do
begin
  Text    := 'Widget A';
  IsActive := True;  // marks as current page
end;

How do I respond when the user clicks a breadcrumb item?

procedure TForm1.BreadCrumb1ItemClick(Sender: TObject; AIndex: Integer);
begin
  NavigateTo(AIndex);
end;

TFlexFMXCSS / CSS Classes (General Tips)

How do I apply CSS classes to any FlexFMX control?

Every FlexFMX control exposes a FlexFMXCSS sub-property. Set FlexFMXCSS.CSSClasses in the Object Inspector or in code:

MyButton.FlexFMXCSS.CSSClasses := 'col-6 mt-3 mb-2';

What CSS spacing values are available?

Margins and paddings follow Bootstrap naming: m-0 through m-5 (all sides), and directional variants mt-, mb-, ml-, mr-, mx-, my-. Same prefix pattern for padding with p-.

Best practice: avoid mixing Align and CSS classes

Do not set the FMX Align property on controls that are managed by a TFlexFMXLayout. The layout engine sets size and position itself; a conflicting Align value will cause unpredictable results. Leave Align as alNone.