成績管理ダッシュボード(レコード詳細画面にkrewDashboardを表示)

550-20 | 実績管理

完成イメージ:成績管理アプリ

このシナリオではkintoneアプリのレコード詳細画面にダッシュボードを表示します。

生徒の試験の結果や推移が詳細画面で確認できる

データアプリ(krewDashboardを表示するアプリと同じアプリ)

成績管理アプリ

  • 試験ごとの結果を管理するアプリ

フィールド構成はこのようになっています。

1.krewDashboardを表示するための下準備を行う

  1. krewDashboardを表示したいアプリのフォーム設定タブを開く
  2. krewDashboardを表示したい場所に「スペース」フィールドを配置する


  3. スペースの要素IDを設定する(あとでkrewDashboardの設定を行う時にここで設定したID名を使います)


2.krewDashboardの設定を行う

  1. krewDashboardのプラグインを成績管理アプリに追加する


  2. 「表示エリアを選択」をクリックして、先ほどフォーム作成画面で作成したスペースの要素IDを選択する


    この先は、詳細画面に表示するダッシュボードの設定(アプリの作成)を行います。

レーダーチャートで今回の成績を可視化する

  1. レーダーチャートグラフを追加する
  2. データアプリに「成績管理」アプリを設定する


  3. 値項目に次のフィールドを追加する
    ・国語 ・数学 ・英語 ・理科 ・社会


  4. 右側に表示されている設定のタブを「書式」に切り替える
  5. ドロップダウンリストから「グラフエリア」を選択し、次のように設定する
    ・値フィールドを軸に変換:ONにする
    ・軸の名前:科目
    ・値の名前:点数

デザイン等を調整する

科目のラベルを変更する

  1. 右側に表示されている設定タブを「フィールド」に切り替える
  2. 各科目のタイトルに「合計」とついているので、フィールド設定で次のように変更する
    名前の指定:合計なしの名前に調整する


    同様の設定を全科目分行う

グラフのタイトルを変更する

  1. グラフのタイトルをダブルクリックして右側に設定画面を表示する
  2. グラフタイトルを「今回成績」に変更する

表示中のレコードの情報をグラフで可視化するようフィルタを行う

  1. グラフのフィルタ設定を開く
  2. 次のようにフィルタする
    レコード番号 =(フィールドの値に等しい) レコード番号
    ※条件は「表示しているレコードのフィールドの値を条件に指定」から選択する

成績の推移を表す折れ線グラフを作成する

  1. 折れ線グラフを追加する
  2. データアプリに「成績管理」アプリを選択する


  3. 次のようにフィールドを設定する
    ・軸:試験
    ・値:合計

デザイン等を調整する

値項目のラベルを変更する

  1. 右側に表示されている設定タブを「フィールド」に切り替える
  2. 各科目のタイトルに「合計」とついているので、フィールド設定で次のように変更する
    名前の指定:合計点に変更する

グラフのタイトルを変更する

  1. グラフのタイトルをダブルクリックして右側に設定画面を表示する
  2. グラフタイトルを「成績推移」に変更する


各科目の点数割合を100%積み上げグラフで表現する

  1. 横棒100%積み上げグラフを追加する
  2. データアプリに「成績管理」アプリを選択する


  3. 次のようにフィールドを設定する
    ・軸:試験
    ・値:国語、数学、英語、理科、社会

デザイン等を調整する

値項目のラベルを変更する

  1. 右側に表示されている設定タブを「フィールド」に切り替える
  2. 各科目のタイトルに「合計」とついているので、フィールド設定で次のように変更する
    名前の指定:合計を外したタイトルに調整する

グラフのタイトルを変更する

  1. グラフのタイトルをダブルクリックして右側に設定画面を表示する
  2. グラフタイトルを「成績割合」に変更する


全体検索を設定する

レコード詳細画面で表示している生徒の情報だけをグラフの集計対象とする為に、全体検索機能を使いデータを絞り込みます。

  1. ホームタブ内の「全体検索」をクリックする


  2. 次のようにフィルタ条件を設定する
    ・名前 =(フィールドの値に等しい) 名前
    ※条件は「表示しているレコードのフィールドの値を条件に指定」から選択する


ワンポイント

  • レコード更新後、更新内容をkrewDashboardに反映させるためには ①ブラウザのリフレッシュ ②krewDashboardのコマンドバーで「再読み込み」をクリックするのいずれかの対応が必要です。コマンドバーを表示するためには、全般設定で下記のように設定します。


    設定すると、コマンドバーが表示され、「再読み込み」をクリックして変更内容をkrewDashboardに反映できます。

ここまでの設定を行い、アプリを更新すれば詳細画面でkrewDashboardを表示することができます。

サンプルファイルのダウンロードはこちら
https://download.krew.mescius.jp/study/krewdashboard-drill/db550-20record-management.zip