計算式プラグインでスペース項目にレコードの概要を表示してみます。
概要
スペース項目にレコードの概要を表示してみました。
散らばった項目をまとめて表示することで、概要を把握しやすくなります。
モバイル表示では、スクロール量が少なくなりわかりやすいと思います。
※計算式プラグインとタブ表示プラグインを利用
- pc版表示とモバイル版表示
- 詳細画面の項目から概要作成
操作例： レコード切り替え
アプリ設定
kintone アプリストアの案件管理（営業支援パック）にスペース項目を追加します。
スペース項目には、要素IDをつけてください。
計算式プラグイン設定
各タグに、STYLE関数で書式指定が出来ます。
- 初回商談日： 未入力時は背景色指定
- 数値項目は、FIXED 関数で書式指定、 右寄せ、100万以上を赤表示
- 日付項目は、DATE_FORMAT 関数で書式指定
.js
OPTION:
// sp1:(sp1) SPACER
LET(
label, TAGS_HTML(
TAG("style", JOIN(ARRAY(
".custom-table { width: auto; table-layout: auto; border-collapse: collapse; }",
".custom-table td { border: 1px solid darkgray; padding: 4px 6px; }",
".custom-table td:first-child { white-space: nowrap; color: blue; }",
".custom-table td:last-child { word-break: break-word; }",
), NEWLINE(),1)),
TAG("div", "概要")
),
table, TAGS_HTML(
TAG("table",
ATTR("class", "custom-table "),
STYLE("border-collapse", "collapse"),
TAG("tr", TAG("td", "顧客名"), TAG("td", 顧客名)),
TAG("tr", TAG("td", "部署名"), TAG("td", 部署名)),
TAG("tr", TAG("td", "担当者名"), TAG("td", 担当者名)),
TAG("tr", TAG("td", "案件名"), TAG("td", 案件名)),
TAG("tr", TAG("td", "確度"), TAG("td", 確度)),
TAG("tr", TAG("td", "初回商談日"), TAG("td", DATE_FORMAT(初回商談日),
IF(NOT(初回商談日),STYLE("background-color:#f9bba5;")))),
TAG("tr", TAG("td", "提案プラン"), TAG("td", 提案プラン)),
TAG("tr", TAG("td", "オプション"), TAG("td", オプション)),
TAG("tr", TAG("td", "商談担当者"), TAG("td", 商談担当者)),
TAG("tr", TAG("td", "プラン費用"), TAG("td", FIXED(プラン費用),
STYLE("text-align:right;"), IF(プラン費用>1000000,STYLE("color:red;")))),
TAG("tr", TAG("td", "オプション費用"), TAG("td", FIXED(オプション費用),
STYLE("text-align:right;"), IF(オプション費用>1000000,STYLE("color:red;")))),
TAG("tr", TAG("td", "合計費用"), TAG("td", FIXED(合計費用),
STYLE("text-align:right;"), IF(合計費用>1000000,STYLE("color:red;")))),
TAG("tr", TAG("td", "受注予定日"), TAG("td", DATE_FORMAT(受注予定日))),
TAG("tr", TAG("td", "詳細"), TAG("td", 詳細)),
)),
ARRAY(label,"",table,"")
)