Advanced Row Formatting - RowFormat
Simple row formatting can be used if you wish to format every row in the same way. For cases when you need more control over the output, you can use advanced formatting. Unlike simple formatting, advanced formatting can only be used in the xml form and not in the attribute form. Advanced formatting allows you to format each row and each column separately. You can display captions per column, group rows based on a group column and create levels based on a level in the level column. We'll show examples for each of these use cases.
A common use case of multiple row formats is applying alternating colors for odd and even rows. Falcon allows you to specify multiple rowformat and place either an expression or a match attribute on the format element. The expression attribute contains a Viper expression which should evaluate to true or false. Note that the expression does not contain any curly brackets. Unlike Vipers that are resolved immediately, expressions are evaluated by the formatting engine when needed. The match attribute can contain one of the following values:
- first
- last
- odd
- even
- <number> indicating the rownumber.
If the position indicated by the match or expression attribute of a rowformat matches the position of the current row, that rowformat is applied to the row. If multiple rowformats match, the first defined rowformat is applied. If there is no matching rowformat but there is a rowformat with no match and no expression attribute, this rowformat is applied, regardless of its position.
Example 1:
This example will make every odd row light gray and every even row slightly darker.
| Smartsite SXML |
Copy Code
|
|---|---|
!<!--// Create a random datatable -->
<se:hidden>
{math.setrandomseed(1, rem="set seed to ensure data is identical for each rendering")}
{buffer.set(dt, datatable.createempty(Nr,Text))}
<se:for from="1" to="100">
<se:lorem save="lorem" unittype="sentence" unitcount="100" skiprows="{math.random(100)}" maxrows="1" rowformat="{this.field(1)}" />
{datatable.rows.add($dt, this.index(), $lorem)}
</se:for>
</se:hidden>
<!--// Format the data, give odd and even lines different colors. -->
<se:format inputdata="{buffer.get(dt)}">
<se:parameters>
<se:parameter name="format">
<se:rowformat match="even">
<tr style="background-color: #e0e0e0">
<td>{this.field(nr)}</td>
<td>{this.field(text)}</td>
</tr>
</se:rowformat>
<se:rowformat match="odd">
<tr style="background-color: #f0f0f0">
<td>{this.field(nr)}</td>
<td>{this.field(text)}</td>
</tr>
</se:rowformat>
</se:parameter>
<se:parameter name="resultformat">
<table>
{this.result()}
</table>
</se:parameter>
</se:parameters>
</se:format>
|
|
Example 2:
This example will make every fifth row the color LightCoral, every other odd row DeepSkyBlue and every other row FloralWhite.
| Smartsite SXML |
Copy Code
|
|---|---|
!<!--// Create a random datatable -->
<se:hidden>
{math.setrandomseed(1, rem="set seed to ensure data is identical for each rendering")}
{buffer.set(dt, datatable.createempty(Nr,Text))}
<se:for from="1" to="100">
<se:lorem save="lorem" unittype="sentence" unitcount="100" skiprows="{math.random(100)}" maxrows="1" rowformat="{this.field(1)}" />
{datatable.rows.add($dt, this.index(), $lorem)}
</se:for>
</se:hidden>
<!--// Format the data, give odd and even lines different colors. -->
<se:format inputdata="{buffer.get(dt)}">
<se:parameters>
<se:parameter name="format">
<se:rowformat expression="this.rownumber() % 5 == 0">
<tr style="background-color: LightCoral">
<td>{this.field(nr)}</td>
<td>{this.field(text)}</td>
</tr>
</se:rowformat>
<se:rowformat match="odd">
<tr style="background-color: DeepSkyBlue">
<td>{this.field(nr)}</td>
<td>{this.field(text)}</td>
</tr>
</se:rowformat>
<se:rowformat>
<tr style="background-color: FloralWhite">
<td>{this.field(nr)}</td>
<td>{this.field(text)}</td>
</tr>
</se:rowformat>
</se:parameter>
<se:parameter name="resultformat">
<table>
{this.result()}
</table>
</se:parameter>
</se:parameters>
</se:format>
|
|