カスタマイズ

一覧画面と詳細画面の複合画面を作成する

概要

一覧画面をカスタマイズして、左側にレコード一覧、右側にレコード詳細画面を組み合わせた複合画面を作成します。

使い方

この「やること」はカスタマイズされた一覧画面を作成します。

準備として、kintone アプリ側の設定で「一覧画面と詳細画面の複合画面を作成する」用の「一覧」を作成してください。この一覧は、以下のように設定しておきます。

  • 一覧名 … 任意で構いません。
  • レコード一覧の表示形式 … 必ず「カスタマイズ」を選択してください。
  • 一覧を表示する範囲 … 「PC版のみで表示する」にしてください。
  • 一覧ID … 変更はできません。この値を Customine 側で設定するのでコピーしておいてください。
  • ページネーションを表示する … チェックは入れておいてください。
  • HTML … 空のままで構いません。逆に、何か入れても無視されます。
  • 絞り込み … 任意で構いません。

どのフィールドを表示するかは、kintone アプリ側ではなく、Customine のアクションで設定します。

「一覧画面と詳細画面の複合画面を作成する」をセットするアクションでは、条件を「一覧画面を表示した時」にしてください。なお、「現在の一覧が指定の一覧ならば」は必要ありません。

「一覧画面と詳細画面の複合画面を作成する」をセットしたアクションを実行すると、一覧画面が「一覧のID」で指定した一覧であれば、そのアクションがカスタマイズした複合一覧画面を表示します。「一覧のID」で指定した以外の一覧であれば通常通りの一覧表示になります。

一覧側のレコード行をクリックすると、そのレコードの詳細が右側に表示されます。

標準の一覧画面と異なり、以下の要素はありません。

  • 詳細画面へ遷移するボタン
  • 一覧画面内でレコードを編集するための鉛筆ボタン
  • レコードを削除するためのボタン

この画面で表示されるレコード詳細は、kintone 標準のレコード詳細画面と異なり、以下のボタンやメニュー項目が非表示になります。

  • アプリの説明
  • スペースやアプリに戻るためのメニュー(パンくずメニュー)
  • レコード追加ボタン
  • アプリ設定ボタン
  • レコード削除メニュー項目

レコード詳細表示時、一覧側に「»」「×」といったボタンが表示されます。これらは以下のような機能があります。

  • 「»」 … レコード詳細を閉じて、全体を一覧表示にします。
  • 「×」 … レコード一覧を閉じて、kintone 標準のレコード詳細画面に遷移します。

添付ファイルフィールドはリンク形式で表示されます。画像、PDFはクリックするとギャラリー形式(プレビュー)で表示されます。それ以外のファイルはクリックするとダウンロードされます。

設定するパラメーター

「一覧のID」「固定表示するフィールド」「固定しないフィールド」「固定列の幅(ピクセル)」を設定します。

一覧のID

「使い方」の説明で準備した一覧のID を指定します。kintone アプリから一覧の設定画面で確認可能です。

一覧の名前で指定することはできません。

固定表示するフィールド

複合画面でレコード詳細を表示している間も一覧側で表示し続けるフィールドを選択します。

選択したフィールドを並べ替えると、一覧内でもその順番で表示されます。

選択可能なフィールドタイプは、以下のもの以外です。

  • テーブル
  • 関連レコード一覧
  • グループ
  • スペース

テーブル内のフィールドは選択できません。

固定しないフィールド

レコード詳細を表示していない間は一覧に表示し、レコード詳細を表示している間は非表示になるフィールドを選択します。

「固定表示するフィールド」より右側に表示されます。

選択したフィールドを並べ替えると、一覧内でもその順番で表示されます。

選択可能なフィールドタイプは、以下のもの以外です。

  • テーブル
  • 関連レコード一覧
  • グループ
  • スペース

テーブルそのものは選択できませんが、テーブル内のフィールドは選択できます。テーブル内のフィールドを選択している場合、テーブルの1行が一覧の1行になり、テーブル外のフィールドはテーブル行数分だけ縦にセル結合して表示されます。

固定列の幅(ピクセル)

レコード詳細を表示している際の、一覧側で「固定表示するフィールド」表示幅を指定します。

「フィールド背景色を変更する」等との組み合わせについて

フィールド背景色を変更する」をはじめとするとフィールドの見た目を装飾する「やること」は、本「一覧画面と詳細画面の複合画面を作成する」と組み合わせても動作します。

ただし、「フィールド背景色を変更する」等は、「一覧画面と詳細画面の複合画面を作成する」のに実行する必要があります。例えば「一覧画面を表示した時」に「フィールド背景色を変更する」を実行すると、複合画面がまだ作成されていないため背景色は変わりません。正しく動作させるには、「一覧画面と詳細画面の複合画面を作成する」を行ったアクションから「他のアクションの実行が完了した時」でつないだ先で「フィールド背景色を変更する」等を設定してください。

既知の問題

  • 複合画面表示時に、レコード詳細画面側で「情報ダイアログを表示する」などのダイアログを表示すると、ダイアログの表示位置が正しくない問題があります。

注意事項

  • 「表示するフィールド」に対してアクセス権がない場合、一覧の列にフィールド名は表示されますが、フィールド値は表示されません。

  • 「表示するフィールド」にセットしたフィールドのフィールドコードを後から変更したようなケースでも、一覧の列にフィールド名は表示されますがフィールド値は表示されません。

制限事項

  • スマートフォン画面には対応していません。

  • 列の幅を変更する機能はありません。