ブログ

kinkozi のタブ表示プラグインでは、様々な入力項目をタブに分割することができます。
すべての情報をタブに振り分けると、常に表示しておきたい情報が隠れてしまい、かえって使いづらくなってしまう場合があります。
常に表示させたい情報はタブ表示とは別に共通情報として表示させつつ、関連する情報をタブでまとめて分割表示する方法をご案内します。

サンプルアプリとして、以下のSFA(営業支援)パックを使います。

https://webware.cybozu.com/k/space/5/market/app/827

フィールド名とタブ分割

「顧客管理」アプリの情報を以下のようにタブに分割してみましょう。

以下のように、管理したい項目を上から行単位で「常に表示する項目」とタブに分けます。

プラグインの設定方法

「アプリを追加」> おすすめのアプリ、から「SFA(営業支援)パック」のこのアプリパックを追加ボタンをクリックしてください。

設定前の表示イメージ

タブ表示プラグインを設定前は以下のような画面となります。

設定後の表示イメージ

タブ表示プラグインを設定後は以下のような画面となります。
基本情報の会社名と顧客ランクが共通表示され、その下にタブが二つ表示され見やすくなりました。

連絡先タブ

連絡先タブが選択された状態がデフォルトになります。

関連情報タブ

引き続き会社名と顧客ランクは共通で表示されていることが分かります。
画面下部に作成日時などの情報も共通で表示されております。
あまりタブを増やしても、かえって一覧性が低下しわかりにくくなる場合があります。タブ分けしすぎないよう注意が必要です。

プラグイン設定方法

プラグインのインストール後に、当該アプリを読み込み、設定画面で以下のように設定いたします。

タブに格納させる開始行、終了行の行番号を確認します。以下のように割り当てます。

• 連絡先タブには、「郵便番号、都道府県、住所、建物名」の行から、SPACERまでを含むとします。その場合、行番号2から8がタブ「連絡先タブ」に割り当てられます。
• 関連情報タブには、「関連情報」のラベルの行から、HRまでを含むとします。その場合、行番号9から13がタブ「関連情報タブ」に割り当てられます。
• タブに含まれない、行番号0から1、14から15が共通項目として表示されます。

いかがだったでしょうか。タブ表示プラグインで多くの入力項目をすっきり表示させつつ、共通項目を表示させる方法でした。