この記事では、kintone アプリのレコードのフィールド値によって、バッジ付きテキストで異なるスタイルのバッジをシンプル縦フォームに表示する方法をご紹介します。
表示例
今回、kintone の「案件管理」アプリのレコードを、「進捗状況」フィールドの値によって、色違いのバッジで表示することを想定します。
エブリサイトでは、入力された案件IDに対応するレコードを「案件管理」アプリから取得し、案件名と進捗状況を表示します。
下記は、進捗状況：未着手／提案中／進行中／完了の案件を表示した例です。
kintone の設定
【設定例】フォーム
kintone のアプリでは、下記のフィールドを用意します。
【設定例】APIトークン
APIトークンを用意します。「アクセス権」は「レコード閲覧」をチェックします。
エブリサイトの設定
【設定例】接続設定
kintone の設定で取得した APIトークンを設定します。
接続設定タブの説明については、次の記事をご覧ください。
【設定例】画面デザイン
タイルにウィジェット「シンプル縦フォーム」を配置します。
ウィジェットの一般的な設定については、下記の記事をご覧ください。
ウィジェット編集画面全体とウィジェットの設定および編集について
【設定例】ウィジェット編集
表示したい案件の「案件ID」を入力するアイテム「文字列入力（１行）」を１つ、「顧客名」を表示するためのアイテム「テキスト」を１つ、「案件名」と「進捗状況」（未着手／提案中／進行中／完了）を表示するアイテム「バッジ付きテキスト」を４つ設置します。
後のページ内処理で、kintone のアプリから取得した値をセットするため、各々のパラメータで「初期値」や「テキスト」は入れず、下記の通り設定します。
・文字列入力（１行）：案件ID
・テキスト：顧客名
・バッジ付きテキスト：案件名、進捗状況
進捗状況の値に対応し、「バッジテキスト」・「バッジの文字色」・「バッジの背景色」を下記の通り設定します。
【設定例】ページ内処理
全体の設定例を下記に示します。
ページ内処理タブの説明については、次の記事をご覧ください。
ページ表示時はまだ案件に関する情報は表示しないので、アクション1 では案件情報を設定するすべてのアイテムを、一旦、非表示にしておきます。
やること「アイテムを非表示にする」
条件「ページを表示した時」
アクション2 以降は、案件ID（ProjectID）が入力された後の動作を設定します。
まず、前回の結果が表示されている場合があるので、アクション1 と同様、案件情報を設定するすべてのアイテムを、一旦、非表示にします。
やること「アイテムを非表示にする」
次にアクション3 では、案件ID（ProjectID）に入力された値と合致するレコードを、kintone の「案件管理」アプリから取得します。
やること「クエリで条件を指定して kintone からレコードを取得する」
条件「他のアクションの実行が完了した時」
アクション4・5 では、アクション3 で取得したレコードから、「顧客名」フィールドの値をテキストアイテム（ClientName）にセットし表示します。
アクション4：
やること「表示アイテムの内容をセットする」
条件「他のアクションの実行が完了した時」
アクション5：
やること「アイテムを表示する」
条件「他のアクションの実行が完了した時」
アクション6・7 では、アクション3 で取得したレコードの「進捗状況」フィールドの値が ”未着手” であった場合に、対応するバッジ付きテキストアイテム（Status_NotStarted）に「案件名」フィールドの値をセットし表示します。
アクション6：
やること「表示アイテムの内容をセットする」
条件「他のアクションの実行が完了した時」
追加条件「文字列が条件を満たすならば」
アクション7：
やること「アイテムを表示する」
条件「他のアクションの実行が完了した時」
以降、「進捗状況」フィールドの値が ”提案中”（アクション8・9）、”進行中”（アクション10・11）、”完了”（アクション12・13）の場合も、アクション6・7 と同様に設定します。
まとめ
以上が kintone アプリのレコードのフィールド値によって、バッジ付きテキストで異なるスタイルのバッジを表示する方法でした。
本記事で紹介した内容以外にも、エブリサイトの ドキュメントページ や サポートページ では、さまざまな設定方法や活用例を紹介しています。ぜひあわせてご活用ください。