工事管理ダッシュボードを作成する(レコードの詳細画面にダッシュボードを表示)

520-20 | 予算管理

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

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

工事の予算消化状況が確認できる

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

工事管理アプリ

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

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

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


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


2.krewDashboardの設定を行う

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


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


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

円グラフで使用した原価費用の明細を可視化する

  1. 円グラフを追加する
  2. データアプリに「工事管理」アプリを設定する


  3. 各項目に次のフィールドを追加する
    ・凡例:原価分類
    ・値:金額


  4. グラフのタイトルをダブルクリックしてタイトルを「原価分類別割合」に変更する

ゲージで予算の消化状況を可視化する

  1. ゲージを追加する
  2. データアプリに「工事管理」アプリを設定する


  3. 各項目に次のフィールドを追加する
    ・目標値:実行予算
    ・値:原価合計


  4. 右側に表示されている設定タブを「書式」に切り替える
  5. ドロップダウンリストから「ナンバー」を選択する
  6. Aというアイコンをクリックして、文字の塗りつぶしの色を好みの色に変更する
    ※ここでは赤、緑、青


  7. グラフのタイトルをダブルクリックしてタイトルを「予算消化状況」に変更する

全体検索を設定する

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

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


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


ワンポイント

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


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

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

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