Feature / UI 03

JS 管理側 公開側

サイドパネル

一覧を見たまま、右側や左側に詳細・編集・履歴を表示します。

サイドパネルは、一覧やボードの文脈を残したまま、選択したレコードの詳細、編集フォーム、対応履歴、コメントを横の領域で扱うためのUIです。Roundtableでは「どの一覧から開くか」「パネルで何を見せるか」「保存後に一覧へ何を反映するか」を先にそろえると、画面遷移を増やさずに業務の流れを整理できます。

案件一覧の右側に詳細と履歴のサイドパネルを表示している画面例

この機能でできること

一覧で顧客、案件、問い合わせ、予約などを見ながら、選択した1件の詳細確認、ステータス変更、担当者メモ、履歴確認を同じ画面内で行えます。元の一覧を残したまま作業できるため、検索条件や比較対象を見失わず、次のレコードへ移る操作も軽くできます。

一覧と詳細を、同じ作業画面に並べる部品です。 1件を深く編集する画面より、複数件を確認しながら順番に処理する業務で効果が出ます。

よくある利用場面

問い合わせ対応 問い合わせ一覧を左に残し、右パネルで本文、顧客情報、対応履歴、返信メモを確認します。
案件・タスク処理 未対応や進行中の一覧から1件を選び、期限、担当者、状態、コメントを横で更新します。
履歴確認 予約、請求、契約、サポートなどの詳細と履歴を並べ、次の対応判断に使います。

プロンプト例

「問い合わせ一覧の行をクリックしたら右側に詳細パネルを開き、本文、顧客情報、対応履歴、メモ追加フォームを表示したい」のように、起点、表示項目、編集可否、保存後の反映範囲をセットで伝えます。

プロンプト 案件一覧で行を選択すると右側にサイドパネルを表示してください。パネルには案件名、顧客名、状態、担当者、直近の対応履歴を出し、状態と担当者だけ編集できるようにします。保存後は一覧の該当行を更新してください。

この機能を使うときのポイント

起点行クリック、詳細ボタン、カード選択、検索結果選択など、どの操作で開くかを決めます。
表示内容基本情報、履歴、コメント、編集フォーム、添付など、パネル内に置く情報を絞ります。
一覧との関係選択中の行表示、保存後の行更新、次の行へ移る操作、検索条件の保持を確認します。
画面幅スマホではパネルを全画面扱いにする、または詳細ページへ切り替えるなど、幅に応じた動きを決めます。

この機能を実装するときのコツ

初回は、一覧1つ、選択レコード1件、表示項目数個に絞って作ると確認しやすくなります。パネル内で登録、編集、履歴追加、添付、通知まで詰め込むと複雑になるため、まずは詳細確認と少数項目の更新を作り、業務上よく使う操作から順に増やします。