TemplateDataPanel

The TemplateDataPanel controller renders database records using a custom HTML template instead of a standard grid table. It is ideal for reports, image galleries, or any non-tabular data visualization.

It inherits from the List controller and reuses its filter panel, toolbar (ToolViews), and hidden state management. CRUD buttons (Add, Edit, Delete) are not shown since this is a display-only controller.

All records are loaded at once (no paging).

Tip: If you need a card layout with CRUD support (Add, Edit, Delete, View), use the List controller with TemplateFileName instead. See Card View with TemplateFileName for details.

Configuration

Define the controller directly at the top level of the view:

Controller: TemplateDataPanel
  TemplateFileName: ActivityReport.html

  Filters:
    DisplayLabel: Search panel
    Connector: and
    Items:
      FreeSearch: Description
        ExpressionTemplate: (UPPER(Activity.Description) like UPPER('%{value}%'))
      DynaList: Activity Type
        CommandText: |
          select '%' TYPE_ID, '(All)' TYPE_NAME from kitto_users
            union all
          select TYPE_ID, TYPE_NAME from ACTIVITY_TYPE order by 2
        ExpressionTemplate: Activity.TYPE_ID like '{value}'

MainTable:
  Model: ACTIVITY
  Controller:
    ToolViews:
      DownloadCSV:
        DisplayLabel: Download in CSV
        Controller: ExportCSVTool
          RequireSelection: False

Properties

Property	Type	Description
TemplateFileName	String	Path to the HTML template file inside the Resources directory. Supports macro expansion.
Template	String	Inline HTML template (alternative to TemplateFileName).
SortFieldNames	String	Space-separated field names for the ORDER BY clause.
Filters	Node	Standard filter panel configuration (same as List controller).

The TemplateFileName path is resolved through the standard resource lookup (application Home/Resources/ directory).

Template syntax

Templates use a simple HTML-based syntax. The <tpl for=".">...</tpl> block marks the repeating section that is rendered once for each record. Everything before and after the <tpl> block is rendered as static header and footer content.

Field placeholders

Inside the <tpl for="."> block, use {FieldName} to insert a field's value. The field name must match the aliased name from the view table definition.

Placeholder	Description
{FIELD_NAME}	Field value as text
{FIELD_NAME:date}	Date/time field formatted using UserFormats settings

Field values are automatically HTML-encoded to prevent XSS.

Special placeholders

These placeholders can be used anywhere in the template (inside or outside <tpl> blocks):

Placeholder	Description
{_ICON}	The view's icon (from ImageName) rendered as a <span> with CSS mask-image. The icon is monochromatic, colored by the --kx-accent theme variable. Adapts automatically to light/dark themes
{_IMAGE}	The view's icon (from ImageName) rendered as an <img> tag that preserves the original SVG colors. Use this for flat-color or multi-color icons (e.g. flat-design KPI icons)
{_KEY}	URL-encoded record key string (field=value&field2=value2)
{_VIEW}	The view's persistent name (useful for building HTMX URLs in templates)

{_ICON} vs {_IMAGE}: Use {_ICON} when you want the icon to follow the theme accent color (monochromatic). Use {_IMAGE} when you want to display the SVG with its original colors (e.g. flat-color icons from icon sets like SVGIconImageList).

The image resolution searches first in the project's Resources folder, then falls back to the framework's built-in resources.

These placeholders are particularly useful for KPI cards in Dashboard layouts:

<div class="kx-kpi-card">
  <div class="kx-kpi-icon">{_IMAGE}</div>
  <div class="kx-kpi-body">
    <div class="kx-kpi-value">{TOTAL_COUNT}</div>
    <div class="kx-kpi-label">Total items</div>
  </div>
</div>

Macros

Templates support standard Kitto^x macros:

Macro	Description
%IMAGE(name)%	Resolves to the URL of the named image resource
%HOME_PATH%	Application home directory path
%APP_PATH%	Application path
%Config.AppTitle%	Application title from Config.yaml

Example: report table

This template renders an Activity Report as an HTML table with header and logo:

<style type="text/css">
.Table_Header {
  font-size: 12px; font-weight: bold;
  color: #FFFFFF; background-color: #3300FF;
  padding: 2px; border: thin solid #0066FF;
}
.Table_Body {
  font-size: 12px; color: #333333;
  background-color: #FFFF99;
  padding: 2px; border: thin solid #FFCC00;
}
</style>
<table width="100%" border="0">
  <tr>
    <td><b>ACTIVITY LIST</b></td>
    <td align="right"><img src="%IMAGE(taskitto_logo_150)%" /></td>
  </tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td class="Table_Header">Description</td>
    <td class="Table_Header">Employee</td>
    <td class="Table_Header">Activity Date</td>
  </tr>
<tpl for=".">
  <tr>
    <td class="Table_Body">{DESCRIPTION}</td>
    <td class="Table_Body">{EMPLOYEE}</td>
    <td class="Table_Body">{ACTIVITY_DATE:date}</td>
  </tr>
</tpl>
</table>

Example: card layout (read-only)

This template renders records as image cards (e.g. a doll catalog) in a read-only display:

<style type="text/css">
.thumb-wrap {
  float: left; margin: 4px; padding: 5px;
}
.thumb img { height: 60px; width: 80px; }
.thumb-wrap span { display: block; text-align: center; }
</style>
<tpl for=".">
  <div class="thumb-wrap" id="{Doll_Id}">
    <div class="thumb"><img src="{Picture}" title="{Doll_Name}"></div>
    <span>{Doll_Name}</span>
    <span>{Date_Bought:date}</span>
    <span>{Hair} hair</span>
    <span>Size: {Dress_Size}</span>
  </div>
</tpl>

Note: For a card layout with full CRUD support (selectable cards, Add/Edit/Delete), use the List controller with TemplateFileName instead. The List controller provides built-in card selection, hover effects, double-click to edit, paging, and all standard toolbar actions.

ToolViews

Since TemplateDataPanel is display-only, the toolbar only shows ToolView buttons. Common use cases include export tools:

MainTable:
  Model: ACTIVITY
  Controller:
    ToolViews:
      DownloadCSV:
        DisplayLabel: Download in CSV
        Controller: ExportCSVTool
          RequireSelection: False
      DownloadExcel:
        DisplayLabel: Download in Excel
        Controller: ExportExcelTool
          ClientFileName: ActivityList.xls
          RequireSelection: False

Setting RequireSelection: False on each tool is important since TemplateDataPanel does not support row selection.

Filter refresh

When filters are applied, the template content is re-rendered server-side with the filtered data and swapped into the page via HTMX. No page reload is needed.

See also

• List — standard grid controller (parent class); also supports card view with TemplateFileName for CRUD-enabled card layouts
• GroupingList — grouped grid controller
• ChartPanel — data visualization with Chart.js
• Tool Controllers — export and action tools