計算式プラグインでスペース項目にテーブル表示してみます。
概要
計算式プラグインが html を組み立てられるようになったので、スペース項目にテーブルを表示してみました。
あまり実用性は無さそうですが、モバイル表示ではテーブルが見やすくなりました。
操作例
編集画面で、テーブルを変更するとスペース項目に反映されます。
アプリ設定
kintone アプリストアの案件管理にスペース項目を追加しています。
スペース項目には、要素IDをつけてください。
計算式プラグイン設定
- スペース項目の計算式の指定方法
- ARRAY(ラベル,ラベルの書式,値,値の書式)
- ※今回、書式は style でまとめて指定
テーブルの css も、スペース項目内に作成していますが、CSS は <head> 内に記述するのが推奨されています。
実際に利用する場合は、css 部分を css ファイルとしてアップロードしてください。
- label: css 作成とテーブル名を表示
- html: テーブル本体を作成
- table: "custom-table"指定
- thead: th に各項目名
- tbody: td に各項目の値
.js
OPTION:
// sp1:(sp1) SPACER
LET(
tbl, JSON_P(OTVAL(活動履歴)),
tbl_name, "活動履歴",
fields, ARRAY("活動日","活動内容","メモ"),
label, TAGS_HTML(
TAG("style", JOIN(ARRAY(
".custom-table { width: auto; table-layout: auto; border-collapse: collapse; }",
IF(EV_INFO("mobile"),".custom-table thead { position: sticky; top: 40px; }"),
".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; }",
), NEWLINE(),1)),
TAG("div", tbl_name)
),
html, TAGS_HTML(TAG("table", ATTR("class", "custom-table"),
TAG("thead", TAG("tr", ARRAY_MAP(fields, fc, TAG("th", fc)))),
TAG("tbody", ARRAY_MAP(tbl, row,
TAG("tr", ARRAY_MAP(fields, fc, TAG("td", DIC_ITEM(row, fc))))
))
)),
ARRAY(label, "", html, "")
)
変数名の変更とコメントの追加
ChatGPT で、変数名の変更とコメントの追加を行いました。
コメントがあると、あとあとわかりやすいですね。
.js
// 活動履歴テーブルからテーブル形式のHTMLを作成
LET(
// 活動履歴のデータをJSON形式で取得
recs, JSON_P(OTVAL(活動履歴)),
// テーブルのタイトルを設定
tTitle, "活動履歴",
// 表示するカラム名の配列を定義
fields, ARRAY("活動日","活動内容","メモ"),
// テーブルのラベル（タイトルとスタイルを含む）
tLabel, TAGS_HTML(
TAG("style", JOIN(ARRAY(
".custom-table { width: auto; table-layout: auto; border-collapse: collapse; }", // テーブルのレイアウトを指定
IF(EV_INFO("mobile"),".custom-table thead { position: sticky; top: 40px; }"), // モバイル端末ではヘッダーを固定
".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; }" // 最後の列だけ改行を許可
), NEWLINE(),1)), // スタイルを改行で結合
TAG("div", tTitle) // テーブルのタイトルを div タグで表示
),
// HTMLテーブルの作成
tBody, TAGS_HTML(TAG("table", ATTR("class", "custom-table"),
// テーブルヘッダーを作成
TAG("thead", TAG("tr", ARRAY_MAP(fields, fcode, TAG("th", fcode)))),
// テーブルの行を作成（tbodyの中に、各行を挿入）
TAG("tbody", ARRAY_MAP(recs, row,
TAG("tr", ARRAY_MAP(fields, fcode, TAG("td", DIC_ITEM(row, fcode)))) // 各行のデータをセルに挿入
))
)),
// テーブルのラベルとHTMLテーブルを配列として返す
ARRAY(tLabel, "", tBody, "")
)
出力されたテーブルの html 例
.html
<div class="control-gaia control-show-gaia" style="width:637px">
<div class="control-label-gaia"><span class="control-label-text-gaia rex0220-formula-space-label">
<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;
}
</style>
<div>活動履歴</div>
</span></div>
<div class="control-value-gaia rex0220-formula-space-field-div"><span class="rex0220-formula-space-field">
<table class="custom-table">
<thead>
<tr>
<th>活動日</th>
<th>活動内容</th>
<th>メモ</th>
</tr>
</thead>
<tbody>
<tr>
<td>2018-01-15</td>
<td>電話</td>
<td>問い合わせ窓口からのエスカレーション。kintoneの価格を案内。訪問アポ取得。</td>
</tr>
<tr>
<td>2018-01-22</td>
<td>訪問/来訪</td>
<td>kintoneのデモを紹介。組織概要などをヒアリング。</td>
</tr>
<tr>
<td>2018-01-26</td>
<td>メール</td>
<td>50ユーザーの見積もりを提示。</td>
</tr>
</tbody>
</table>
</span></div>
</div>