Getting started with TMS FNC UI Pack

TMS FNC UI Pack is a set of cross-framework Delphi and C++ Builder UI controls that target VCL, FMX, and WEB Core from a single source. All components share a common FMX/FNC API surface, so knowledge transfers across framework-specific units.

Requirements

Requirement	Details
IDE	Delphi 10.1 Berlin or C++ Builder 10.1 Berlin or later
Frameworks	VCL Win32/Win64 · FMX Win32/Win64, macOS, iOS, Android, Linux · WEB Core (Chrome, Edge, Firefox, Safari)
Dependency	TMS FNC Core must be installed before UI Pack

Install the package

Open Component > Install packages in the IDE.
Add the TMS FNC UI Pack package for your target framework (VCL or FMX).
After installation the components appear in the Tool Palette under the TMS FNC UI Pack group.

For FMX projects, add the appropriate units to your uses clause:

uses
  FMX.TMSFNCTreeView,     // TreeView
  FMX.TMSFNCPlanner,      // Planner
  FMX.TMSFNCKanbanBoard,  // KanbanBoard
  FMX.TMSFNCRichEditor,   // RichEditor
  FMX.TMSFNCTabSet,       // TabSet
  FMX.TMSFNCListBox,      // ListBox
  FMX.TMSFNCNavigationPanel; // NavigationPanel

For VCL projects, replace the FMX. prefix with VCL..

Components at a glance

Component	Class	Best for
TreeView	`TTMSFNCTreeView`	Hierarchical data with multi-column support, filtering, and virtual/collection modes
Planner	`TTMSFNCPlanner`	Calendar and scheduling views with configurable time units and item resources
KanbanBoard	`TTMSFNCKanbanBoard`	Drag-and-drop kanban boards with column-based item management
RichEditor	`TTMSFNCRichEditor`	Full-featured rich text editor with RTF, HTML, PDF, and print support
TabSet	`TTMSFNCTabSet`	Highly customizable tab control with badges, progress bars, and HTML content
ListBox	`TTMSFNCListBox`	Flexible list control with HTML items, filtering, sorting, and drag-and-drop
DataGrid	`TTMSFNCDataGrid`	High-performance spreadsheet-style grid

HTML rendering

All UI Pack components support TMS Mini HTML for formatted text in nodes, tabs, items, and cells. A lightweight subset of HTML is rendered natively, including , , , , <A>, <IMG>, ,  , <UL>/<LI>, and / tags.

// Enable HTML in a node value
TreeView1.Nodes[0].Text[0] := '<B>Bold</B> and <FONT color="gcRed">red</FONT>';

HTML text is rendered automatically — no property needs to be enabled; the component detects the opening < tag and switches to HTML rendering.

BitmapContainer

Image references in HTML <IMG src="name"> tags and node/item icons are resolved through a TTMSFNCBitmapContainer from TMS FNC Core. Drop one on your form and assign it to the BitmapContainer property on any UI Pack component.