予算アプリと実績アプリの集計表をカスタマイズビューに表示する

フォローする

Index

概要

カスタマイズビューを利用し、予算と実績の差異と達成率を集計表を作成します。 カスタマイズビューの設定方法に関しては、「カスタマイズする場合」をご確認ください。

完成形

事前準備

  • kintone アプリ(kintone アプリストア にある「予算・実績管理」を使います)
    ※該当のアプリは、https://(サブドメイン).cybozu.com/k/#/market/ から追加できます。
  • エディター

サンプルプログラム

ご注意事項

  • サンプルプログラムは、その動作を保証するものではありません
  • サンプルプログラムの技術的なサポート等は行っていません
  • kintone JavaScript APIは非同期で実行されるため、XMLHttpRequest を使って同期処理しています。 処理中はブラウザがフリーズする場合があります。 また、XMLHttpRequest は利用できないブラウザもありますので、ご注意ください。

以下はすべて、「実績管理」アプリに対して作業を行います。

カスタマイズビュー

  • 一覧を追加します。
  • 新規に一覧を作成し「レコード一覧の表示形式」を“カスタマイズ”に設定します。 (カスタマイズビューを作成するには、kintoneの管理権限が必要です。)
  • HTML欄に上記のHTMLを入力し保存します。

PC用のJavaScriptカスタマイズ

詳細設定から「JavaScript / CSSによるカスタマイズ」を開き、Cybozu CDN から次のライブラリを順番に指定します。

  • jQuery
    https://js.cybozu.com/jquery/2.2.4/jquery.min.js (version 2.2.4を利用)
  • jQuery UI
    https://js.cybozu.com/jqueryui/1.11.4/jquery-ui.min.js (version 1.11.4を利用)
  • jqGrid
    https://js.cybozu.com/jqgrid/v5.1.0/js/jquery.jqGrid.js (version 5.1.0を利用)
    https://js.cybozu.com/jqgrid/v5.1.0/js/i18n/grid.locale-ja.js (version 5.1.0を利用)

JavaScriptサンプル

  • 次のサンプルプログラムをエディターにコピーして、ファイル名を「sample_grid.js」 、文字コードを「UTF-8」、「BOMなし」で保存します
    ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください

 

PC用のCSSファイル

詳細設定から「JavaScript / CSSによるカスタマイズ」を開き、Cybozu CDN から次のライブラリを順番に指定します。

  • jQuery UI
    https://js.cybozu.com/jqueryui/1.11.4/themes/redmond/jquery-ui.css (version 1.11.4、Themeに「redmond」を利用)
  • jqGrid
    https://js.cybozu.com/jqgrid/v5.1.0/css/ui.jqgrid.css

設定した画面

「JavaScript / CSSによるカスタマイズ」画面でそれぞれ設定した例を紹介します。

  

使用したAPI

  1. イベントハンドラーを登録する
  2. レコード一覧の表示後イベント
  3. アプリのIDを取得する
  4. ルックアップフィールドの参照先のアプリIDを取得する
  5. REST APIリクエストを送信する
  6. URL を取得する(クエリ文字列無し)

参考Tips記事

  1. kintone API で Promise を使ってみよう!
  2. Promiseを利用したモダンなアプリの全レコード取得の書き方

デモ環境

(実績管理) https://dev-demo.cybozu.com/k/67/

(予算管理) https://dev-demo.cybozu.com/k/68/

※デモ環境についての説明はこちら

コメント

Avatar
Eriko

いつも大変お世話になっております。

こちらのサンプルを弊社用にカスタマイズし、利用しております。

達成率の部分なのですが、こちらの数字を「100%以下の場合赤文字にする」ということは可能でしょうか?

よろしくお願いします。

Avatar
cybozu Development team

Eriko様

お世話になっております。

達成率を「100%以下の場合赤文字にする」件ですが、以下の方法で可能と考えます。

・ $('.Difference_class').val()で値を取得
・ %をトリミング
・ トリミングした値をparse.IntでInt型にparseして比較
 
もしまたご不明な点がありましたらお気軽におたずねください。
Avatar
Eriko

cybozu Development team 様

いつも大変お世話になります。

もう一つのTIPSでもお伝えしましたが、

当方初心者のため、大変お手数ではありますが上記のサンプルコードを頂くことは可能でしょうか?

ご迷惑をおかけしますが、よろしくお願いいたします。

Avatar
cybozu Development team

Eriko様

先のご案内に誤りがありました。申し訳ありません。

$('.Difference_class').val() ではなく、達成率のため、$('.Achievemnet_class').val() がいいかと思います。

トリミングについては、developer network内のこちらの記事に参考になる方法がございます。

parseIntについては本記事の該当箇所をご参考ください。

ぜひお試しの上、またご不明な点がありましたらご連絡ください。

よろしくお願いいたします。

ログインしてコメントを残してください。
Powered by Zendesk