計算式プラグインのHTML関連の関数の記載方法を理解しないとこのあたりは難しいでしょうか。
サンプルの計算式をフォルトンに解説してもらい、さらに計算式の実行結果を見るとわかりやすいかもしれません。
以下は、フォルトンによる 計算式の分かりやすい解説です。
この式は テーブル値を HTML の表に変換して、CSS を適用して表示するためのものです。
使用されている関数はすべて計算式プラグインに含まれるものです（HTML 関連関数として TAGS_HTML、TAG、STYLE、TABLE_HTML など）
計算式の全体像
LET(
table, TARRAY(オプションT),
IF(ARRAY_COUNT(table) = 0, "",
TAGS_HTML(
TAG("style", JOIN(ARRAY(
".custom-table { width: auto; table-layout: auto; border-collapse: collapse; }",
".custom-table th { background-color: #c0eefe; }",
".custom-table th, .custom-table td { white-space: nowrap; border: 1px solid darkgray; padding: 4px 6px; }",
".custom-table td:last-child { white-space: initial; }",
".value-right { text-align: right; }"
), NEWLINE(), 1)),
TABLE_HTML(table, OPT("pref", "custom-"),
オプションT, オプション費用T
)
)
)
)
1. LET で変数 table を作成
table, TARRAY(オプションT)
- TARRAY(オプションT) は、テーブル「オプションT」から
行ごとのデータを配列で取り出す関数です。
➜ つまり テーブル内容を配列化して扱いやすくしています。
（TARRAY の説明：テーブルを配列に変換する ）
2. テーブルが空なら空文字、それ以外なら HTML を返す
IF(ARRAY_COUNT(table) = 0, "", …HTML生成… )
- ARRAY_COUNT(table)=0
→ 配列（＝テーブルの行）が 0 行なら何も表示しない
- 1 行以上ある場合のみ HTML 表示を作成
3. TAGS_HTML で複数の HTML 要素をまとめて返す
TAGS_HTML( …styleタグ…, …TABLE_HTML… )
TAGS_HTML
→ 複数の TAG(…) をまとめて HTML に変換する関数です
この中では
- スタイル（CSS）を記述した style タグ
- テーブル本体（TABLE_HTML）
をセットで返しています。
4. CSS の組み立て
TAG("style",
JOIN(ARRAY(
".custom-table { ... }",
".custom-table th { ... }",
".custom-table th, .custom-table td { ... }",
".custom-table td:last-child { ... }",
".value-right { text-align: right; }"
), NEWLINE(), 1)
)
何をしているのか？
- CSS の 5 行を ARRAY で作成
- JOIN()＋NEWLINE() により改行付きの 1 つの文字列にまとめる（JOIN の説明：配列を区切り文字で文字列化 ）
- その文字列を style タグ内に配置する
どのような CSS が作られる？
.custom-table というクラスを持つ表に対するデザイン- ヘッダー行の背景色
- 枠線
- 右寄せ用クラス
.value-right
5. TABLE_HTML による HTML テーブル作成
TABLE_HTML(table, OPT("pref", "custom-"),
オプションT, オプション費用T
)
TABLE_HTML の役割
- テーブル配列（table）を HTML の
<table> 形式に変換する
OPT("pref", "custom-") を指定しているので
生成される class 名は “custom-〇〇” の形になる
例：
<table class="custom-table">
オプション指定により、
- 「オプションT」
- 「オプション費用T」
の項目がどのように表として出力されるかを制御します。
全体がやっていることのまとめ
この計算式は以下のことを自動で行います：
-
テーブル（オプションT）を配列として取得
-
行が 0 の場合は空
-
行がある場合：
- CSS を生成し
<style> タグを作成
- TABLE_HTML でテーブルを HTML 化
-
これらを TAGS_HTML でまとめて返す
最終的にレスポンシブで見やすい独自デザインの
HTML テーブルをスペース欄に表示できる仕組みです。
もっと細かく知りたい箇所はありますか？
たとえば：
- TABLE_HTML の詳しいオプション
- CSS の追加方法
- テーブル行ごとに色を変える方法
- total（合計行）を追加する方法
など、用途にあわせて最適な説明や改善案を作成します。
計算式ルールで、計算式を実行
集計元のアプリで計算式ツールを使うと、計算式を実行できます。
html の文字列として、style タグと、table タグが作成されます。
計算結果（文字列を見やすくフォーマットしています）
style タグとオプションTテーブルの3行分が変換されています。
<style>
.custom-table {
width: auto;
table-layout: auto;
border-collapse: collapse;
}
.custom-table th {
background-color: #c0eefe;
}
.custom-table th,
.custom-table td {
white-space: nowrap;
border: 1px solid darkgray;
padding: 4px 6px;
}
.custom-table td:last-child {
white-space: initial;
}
.value-right {
text-align: right;
}
</style>
<table class="custom-table">
<thead class="custom-head">
<tr class="custom-header-row">
<th class="custom-th-label">オプションT</th>
<th class="custom-th-label">オプション費用T</th>
</tr>
</thead>
<tbody class="custom-body">
<tr class="custom-row">
<td class="custom-td-value">X</td>
<td class="custom-td-value value-right">1,000</td>
</tr>
<tr class="custom-row">
<td class="custom-td-value">Y</td>
<td class="custom-td-value value-right">2,000</td>
</tr>
<tr class="custom-row">
<td class="custom-td-value">Z</td>
<td class="custom-td-value value-right">3,000</td>
</tr>
</tbody>
</table>
計算式にどう組み込むか？は、すでに書かれた式の中に
