Formula - XHTML
Formula - XHTML allows you to enhance the appearance of column values by embedding limited HTML markup within TeamDesk’s formula language. This feature enables you to style content by inserting HTML directly into formula results, but with some important constraints.
When using Formula - XHTML:
-
Embedding Code Points: You can insert formula code points (enclosed within
<% ... %>
marks) inside attribute values and tag contents, but not as part of the tag structure itself. This ensures that the HTML remains well-formed. -
No Dynamic Tag Generation: You cannot generate or alter HTML tags dynamically within the formula. This restriction is designed to maintain the integrity of the HTML structure, preventing issues that could arise from malformed or improperly nested tags.
-
Safe Encoding: Each formula piece is evaluated, and its result is automatically encoded to ensure it’s safely integrated into the markup without affecting other parts of the page.
This approach guarantees that the output is valid HTML, preserving both the appearance and functionality of the content.
Here are typical usage examples for the formula:
Coloring the Status
Color a Status value green if it is "Completed", red if it is "Overdue", otherwise black.
To do this, add a new Formula - XHTML column and name it "Status(Colored)". This column can be added to a Table View instead of the existing "Status" text column, which can be used only for record editing. When the Formula - XHTML column is created, you can enter the following formula:
<font color="<%Case([Status],"Completed","#339900","Overdue","#ff3333","")%>"><%=[Status]%></font>
Contact Name as Email Link
Decorate contact names as e-mail links.
Create a "Contact Person" Formula-XHTML column, where the existing "Name" column is associated with a corresponding e-mail listed in the E-mail column.
Enter the following formula:
<a href="<% Nz("mailto:" & [E-mail]) %>"><% [Name] %></a>
Coloring Numeric Values
Color a value red if it is less than 100.
Create the "Value (Colored)" Formula-XHTML column, where the values should be colored.
Enter the following formula:
<span style="<% If([Value] < 100, "color:red", "") %>">
<%= [Value] %>
</span>
Highlighting Date Background
Highlight the background of an Expiry Date value in red if it is less than today+60 days and in yellow if a value is less than today+180 days.
Create the "Colored Date" Formula-XHTML column, where the "Expiry Date" column value background should be highlighted.
Enter the following formula:
<span style="background-color:<%If([Expiry Date]<Today()+60d,"red",[Expiry Date]<Today()+180d,"yellow","")%>"><%=[Expiry Date]%></span>
Changing the Font Size
Increase/decrease the font size.
The Formula XHTML keeps the following formula:
<span style="font-size:300%"><%[Test Column]%></span>
You can specify the percentage value you need and write a corresponding column name instead of "Test Column".
Be aware of the way concatenation handles null
values - if one of the parts is null, the whole result is also null. The first example produces no markup at all when the value of [Name]
is blank. While it is useful in some scenarios, enclosing each and every field you want to display in a sort of null checks is a cumbersome task. To handle this case, we created a shorthand for code points containing a sole reference to a column, <%= [Column] %>
. It creates an Nz()
wrapper so that null values produce empty strings that can be safely concatenated. Numbers, dates, times, and timestamps are converted to text via locale-aware Format()
function, and other types are converted via ToText()
function. In the second example, <%= [Value] %>
produces Encode(Nz(Format([Value])))
.
The usage of HTML and Formula - XHTML is somewhat limited due to technical reasons.
- Markup will be displayed as text in:
- Dropdown lists, as dropdowns do not support markup;
- Calendar views and Lookup columns with "Display As Link" options checked, as a very limited set of tags can be displayed inside of a link;
- Documents as the Word file format has no connection to HTML.
-
Some tags are disabled to avoid interference with the rest of the page:
<html>, <head>, <script>, <noscript>, <title>, <meta>, <link>, <base>, <style>, <body>, <form>, <input>, <isindex>, <textarea>, <select>, <optgroup>, <option>, <fieldset>, <legend>.
<button>
tag is allowed only when its type attribute is set to "button". -
All allowed tags require a closing tag, even if it is not required by HTML. For example, in HTML you can write:
<p>First paragraph <p>Second paragraph
-
In formula code, you should close the
</p>
tag before opening a new<p>
tag:<p>First paragraph</p> <p>Second paragraph</p>
-
Tags that cannot have inner content, such as
<img>
,<br>
,<hr>
, and<param>
, should be self-closed, e.g., written as<br/>
or<img src="image.gif"/>
.