オープンソースのローコード開発ツールのプリザンター(pleasanter)ブログ

オープンソースのローコード開発ツールのプリザンター(pleasanter)のブログとサービス情報サイトです

カテゴリ : お知らせプリザンターとは?使い方スクリプト・スタイル環境構築事例動画

一覧表示をカスタマイズして分かりやすいレコードを作ろう

こんにちは。

リーデックスの志和です。

 

今回は一覧表示について少し掘り下げていきたいと思います。

一覧表示は何をするにもまず目に入る画面となるので、わかりやすい表示を心掛けたいですよね。

そこで一覧表示のカスタマイズを行い、パッと見でどんなレコードか分かるように手を加えていきましょう。

※一覧の表示項目カスタマイズについては以下を参照

プリザンターのカスタム項目(3) ~カスタム項目を一覧上に表示させてみよう - オープンソースWebDBのプリザンター(pleasanter)ブログ

タイトル/内容

一覧画面ではデフォルトで「タイトル/内容」という項目があります。

f:id:h-ogawa-reedex-co-jp:20180827234732p:plain

こちらは項目名通り、タイトルと内容を一つの項目として表示してくれますので、使い方によっては一目でそのレコードの詳細まで把握することが出来ます。

 

レコード詳細画面を開くと、確かに「タイトル」に”会社A”、「内容」に”会社A概要”が入力されているのが確認出来ます。

f:id:h-ogawa-reedex-co-jp:20180828093249p:plain

 

 

 

こちらを上手く使うことで一覧のレコードを確認するだけでどんなレコードなのか、その詳細まですぐに把握することが出来そうですね。

 

一つの項目に複数の項目を表示させる

今度は自分で複数の任意の項目を一つの項目に集約して表示させてみましょう。

まずは[テーブルの管理]画面から一覧タブを選択し、適当な項目を有効化して詳細設定ボタンを押します。

f:id:h-ogawa-reedex-co-jp:20180828093328p:plain

 

次に、[項目詳細設定]画面にて表示名を変更し、「カスタムデザインを使用」にチェックを入れます。

すると、カスタムデザインの入力領域が展開されるので、複数の項目を配置してみましょう。

項目名を”[ ]”で囲むことにより、項目であると認識されます。

ここでは、会社情報として以下の項目を縦並びに表示させます。

[郵便番号]、[住所]、[電話]、[FAX]、[メール]

f:id:h-ogawa-reedex-co-jp:20180828093412p:plain

 

変更ボタンを押して[テーブルの管理]画面に戻ったら、忘れずに更新ボタンを押しましょう。

一覧画面に戻って「会社情報」項目を確認してみます。

f:id:h-ogawa-reedex-co-jp:20180828005708p:plain

 

しっかり表示されていますね。

しかし、このままだとどれが電話番号でどれがFAXなのか全然分かりません。

実は、先ほどの[項目詳細設定]画面では項目表示だけでなく、固定文言の表示も可能です。やり方は簡単で、単純にカスタムデザインで表示したい内容を入力するだけです。

早速やってみましょう。

 

f:id:h-ogawa-reedex-co-jp:20180828093657p:plain

 

あっという間に出来ました!

では出来栄えを見てみましょう。

f:id:h-ogawa-reedex-co-jp:20180828010933p:plain

だいぶ分かりやすくなりました!

 このように項目を集約することで1レコードに表示する情報が多くなった場合でも、横方向に間延びせずコンパクトにまとめることができそうです!

まとめ

いかがでしたでしょうか?

一覧の項目を集約することで、ユーザーは確認したい情報を1列ずつ順番に見ていくのではなく、まとまった情報を瞬時に見ることが出来るので負担が軽くなります。

 些細なことですが、こういった配慮があるとユーザーも「なんとなく見やすい」「何となく使いやすい」といった気持になり、長く使えるツールとなって行くのかもしれません。

 ここまで読んでくださり、ありがとうございました。