Skip to content

Column

Optional XML element that defines a column and its UI options.

XML
1
<itm model="column" type="timg" name="logo">/api/files/26EFEED6-CDEF-E911-80DA-9C8E994DC647.png</itm>

In the UI, timg is rendered as an <img> tag.

Attributes

Required

  • name - column name

Optional

  • lg - (true/false) show/hide column on desktop
  • sm - (true/false) show/hide column on mobile
  • ex - (true/false) show/hide column on export (.html, .xlsx, .md, .txt, .xml); default is lg
  • title - title template, for example title="{invoiceFullNR} {printoutName}"
  • element value (text or CDATA) - URL/template, for example /item/{anycolumnname}/{anycolumnname}?app_name=[[app_name]]&amp;columnx1={columnx1}
    • server-side variables [[variable]] are available, see server side variables
    • IMPORTANT: server-side variables are replaced with an empty string if not found
    • Warning: & must be written as &amp; (or use CDATA)
  • label - label template
    • server-side variables [[variable]] are available, see server side variables
    • IMPORTANT: server-side variables are replaced with an empty string if not found
  • type see section Column type
  • acl - column permission; without the permission the column is hidden and its values are removed
  • css - custom CSS class (see xd.css https://kotynia.github.io/xd-css/)
  • width - column width
  • opts
    • uiinline - renders the v_ component inline in the row instead of opening it in a modal
    • uianonymize - when the uianonymize role is assigned, sensitive information is removed
    • uiauto-width - if the total width of the columns is below 1320, the column fills the empty space
    • uisum - show the total in the table footer
    • global-on - information: column configuration was inherited from global configuration global.xml
    • lg-auto - set lg=false when the column value is empty
    • lg-true, lg-false - override desktop visibility; can be set through Business logic in srssetup
    • sm-true, sm-false - override mobile visibility; can be set through Business logic in srssetup
    • dttranslation - translate values if srstranslation data exists
    • uirownav - the v_ column opens by default from the row menu (dots) instead of the generic property list

Column type

Autodiscover

List of autodiscover types from the database schema:

  • tguid
  • tdate - date. On the client, the UTC offset is applied to convert it to local time
  • tbool - Boolean
  • tinteger - Integer, example 2
  • tdecimal - Decimal, example 2.02
  • tstring

UI types

UI types apply only to the default client UI. Renderers such as .json or .xlsx ignore them.

  • tdatetime - date with time DD/MM/YYYY HH:mm. On the client, the UTC offset is applied to convert it to local time
  • tinput_number - input number
  • tinput_text - text
  • tinput_bool - checkbox
  • tinput_date - date input
  • tlink - link
    • text value = URL
    • if the value is panull, render plain text (no link)
  • tlink_frame - link; Ctrl+click opens a modal
    • text value = URL
    • if the value is panull, render plain text (no link)
  • tlink_frame_blank - tlink_frame that opens in a new browser tab
  • tlink_modal - tlink_frame with a default modal
  • tlink_tag - renders a tag link with a color based on the text
  • tlink_icon - internal link with a Font Awesome 4 icon
  • tlink_download - dedicated to downloading files
  • tlink_icon_download_pdf - dedicated to downloading PDF files
    • the downloaded file name can be set by column.title
    • only works for icons; make sure you pass an icon class in column.css
    • example: <itm model="column" name="action" label="Drukuj" type="tlink_icon_download_pdf" title="{invoiceFullNR} {printoutName}" css="fa fa-print">{action}</itm>
  • tlink_post - on click, sends a POST with the row as an object (plus the query string parameters of the URL) and reloads the table
  • turl_blank - external link in a new window
  • tcolor_progress
  • turl_progress
  • tformat_bytes - human-readable size from input in bytes
  • tformat_k - human-readable format for large numbers, returns e.g. 10K, 20M
  • ttag - renders a tag list with colors based on the text
  • ttagmenu - renders a tag list with colors based on the text, with an extra menu on top
  • tstring_2lines - two lines of text
  • timg - image
  • tmail - email addresses separated by spaces
  • tdonut, tchart - small donut chart for a percentage value
  • tnotes - flag icon with the note text
  • v_... - custom Vue component, for example v_form_auto; see Custom component column

Server-side transformation

Server-side transformations are executed on the server after the data is processed. You cannot use the result of a server-side transformation in a query or virtual query (link="self").

  • file related
    • tbase64 - server-side base64 datastore image renderer (returns bytes)
      • supported: "jpg", "png", "jpeg", "apng", "webp", "gif" with optimization; optional w,h,o (width, height, option); default w=400
      • example item 00000000-0000-0000-0000-000000000000.png?w=400
    • tfs_exist - server-side file existence check (T/F)
    • tfs_length - server-side file length (KB)
    • tfs_videolength - server-side video length (seconds), Windows X64 only, experimental
  • tcolor - renders a hexadecimal color code based on the text
  • tbarcode - server-side barcode (returns bytes)
    • width set width
    • opts="label" show label
    • tips: to scale height and avoid image loss <div style="height: 50;overflow: hidden;"><img src="data:image/png;base64,{{barcode}}" /></div>
  • tqrcode - server-side QR code (returns bytes)
  • tmarkdown - renders Markdown to HTML
  • tjson - renders XML to JSON
    • properties starting with <Array will convert to an array
    • properties mentioned in value (csv) will convert to an array, for example <itm model="column" type="tjson" name="xml">xmlField</itm>
  • txml - XML fragment for the .xml renderer
    • the value is inserted as-is, without an element named after the column
    • use it for repeated child elements, for example a FOR XML PATH('INV_ITEM'), TYPE subquery
    • a value that is not valid XML is written as escaped text
    • see XML export

Special column names

  • pa_background - hexadecimal color for the background
  • pa_color - hexadecimal color for the text; when empty, a readable text color is calculated from pa_background

The UI also accepts CSS variables such as var(--xd-green1). The .html and .xlsx renderers use only hexadecimal values starting with #.

Examples

tlink tlink_modal tlink_frame,tlink_post

All link types require a URL as the element value (text/CDATA). In the URL you can use:

  • row data, for example {planid}
  • server-side variables [[variable]] are available, see server side variables
  • client-side parameters are available as {parameter}, which will be replaced with (in order of priority):
    1. client side parameters passed to the srs
    2. query string parameters
  • Warning: & must be written as &amp; in XML attributes (or use CDATA)
XML
1
2
<itm model="column" type="tlink_modal" css="xd-button" name="PlanDetails" label="-"><![CDATA[/srs/456-plan/view?planid={planid}&app_name=[[app_name]]]]></itm>
<itm model="column" type="tlink_modal" css="xd-button" name="PlanDetails" label="-"><![CDATA[/srs/456-plan/view?planid={planid}&datefrom=[[datefrom]]]]></itm>

tjson - Arrays Examples

By default, if a single element is provided it will be returned as an object. In some cases you may want to force an array, for example when you want the output to always be an array (even if it has a single item).

XML
1
2
3
<xml>
 <file>test</file>
</xml>

Output

JSON
1
2
3
4
5
{
  "xml": {
    "file": "test"
  }
}

There are two options to force an element to be an array.

  1. force array output for a single item by starting the element name with <Array (otherwise it will return an object)
  2. properties mentioned in the value (csv) will convert to an array, for example <itm model="column" type="tjson" name="xml">xmlField,xmlField2</itm>

Example 1 - force array output <Array

XML
1
2
3
4
5
6
7
8
<ArrayOfFile>
  <file>
    <name>image001.png</name>
    <bytes>32674</bytes>
    <hash>550dc3bf-a1d2-e39b-58b1-56883453c2f0</hash>
    <extension>.png</extension>
  </file>
</ArrayOfFile>
JSON
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  "ArrayOfFile": {
    "file": [
      {
        "name": "image001.png",
        "bytes": "32674",
        "hash": "550dc3bf-a1d2-e39b-58b1-56883453c2f0",
        "extension": ".png"
      }
    ]
  }
}

Example 2 - force array output for specific elements <itm model="column" type="tjson" name="xml">file</itm>

XML
1
2
3
<xml>
 <file>test</file>
</xml>
JSON
1
2
3
4
5
6
7
{
  "xml": {
    "file": [
      "test"
    ]
  }
}

Example 3 - self closing tag

XML
1
2
3
4
5
<diff>
  <itm name="ID" old="a" new="b" />
  <itm name="DATE" old="" new="2025-03-11 00:00:00" />
  <itm name="LINEID" old="" new="b2401d60-ce9c-ef11-95b7-d89d6719e0cb" />
</diff>

Output

JSON
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "diff": {
    "itm": [
      {
        "@name": "ID",
        "@old": "a",
        "@new": "b"
      },
      {
        "@name": "DATE",
        "@old": "",
        "@new": "2025-03-11 00:00:00"
      },
      {
        "@name": "LINEID",
        "@old": "",
        "@new": "b2401d60-ce9c-ef11-95b7-d89d6719e0cb"
      }
    ]
  }
}

timg images

Important: ampersand (&) must be written as &amp; in attributes, or you can use a CDATA section.

XML
1
2
3
4
5
6
7
8
9
<itm model="column" type="timg" name="logo">/api/files/26EFEED6-CDEF-E911-80DA-9C8E994DC647.png</itm>
<itm model="column" type="timg" name="logo">/assets/images/logo.png?w=150</itm>
<itm model="column" type="timg" name="mail_to_avatar">/account/avatar/{mail_to_avatar}</itm>
<!--Example BARCODE-->
<itm model="column" type="timg" name="qr" width="100">/api/core/system/barcode?code={qr}&amp;type=code128</itm>
<!--Example BARCODE using cdata -->
<itm model="column" type="timg" name="qr" width="100"><![CDATA[/api/core/system/barcode?code={qr}&type=code128]]></itm>
<!--Example QRCODE-->
<itm model="column" type="timg" name="qr" width="100">/api/core/system/qrcode?code={qr}</itm>

turl_blank external linking

XML
1
2
3
4
<!--Redirect to external page-->
<itm model="column" type="turl_blank" name="test1">http://test.com/test?commissionID={commissionID}</itm>
<itm model="column" type="turl_blank" name="email">mailto:{email}</itm>
<itm model="column" type="turl_blank" name="phone">tel:{phone}</itm>

pa_background color for background

Used with a CSS variable, for example var(--xd-green1)

XML
1
2
3
4
5
6
7
8
9
<itm model="command" name="saleInvoiceDateSummary"><![CDATA[
select
  ROUND(sum(sysnetValue), 2) value,
  'RAZEM'  invoiceCategory,
  'var(--xd-green1)' pa_background
FROM
  saleInvoiceSummary 
]]>
</itm>

Used with a hex value (for example '#112233') or a column name from the query (for example column_hex_example)

XML
1
2
3
4
5
6
7
8
9
<itm model="command" name="saleInvoiceDateSummary"><![CDATA[
select
  ROUND(sum(sysnetValue), 2) value,
  'RAZEM'  invoiceCategory,
  '#112233' pa_background 
FROM
  saleInvoiceSummary 
]]>
</itm>

Custom component column

Example:

A column with a type that starts with v_ renders a Vue component, for example v_form_auto.

  • by default, the cell shows the column value as a button; a click opens the component in a modal
  • with opts="uiinline", the component is rendered directly in the cell
  • with opts="uirownav", the component also opens from the row menu (dots)
  • an empty cell value renders nothing (without uiinline)
  • the element value is a JSON object with component props
    • {columnName} placeholders are replaced with the row values
    • the object is passed to the component as the params prop
  • the component also receives row, column, value (cell value), table, parameters (SRS def) and clipboard_items; a reload-event emitted by the component reloads the table
XML
1
2
3
4
5
<itm model="column" name="locationCode" type="v_form_auto" label="Location code">
<![CDATA[
  { "srsurl":"srs/993/api", "locationID":"{locationID}" }
]]>
</itm>

A click on the location code opens the srs/993/api form for the location in the row:

v_form_auto column