4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

kintoneAdvent Calendar 2018

Day 16

kintoneの見積書アプリにサブテーブルの四捨五入計算を実装してみる

Posted at

kintone Advent Calendar 2018の記事です。kintoneカスタマイズを通してkintone愛を語ろうと思います。

#アプリ作成が難しそう?
###アプリストアがあります。
kintoneのアプリを作る時はまずアプリストアで使えるものが無いか探します。
そのまま使えるものも多いので、アプリストアは重宝しています。

今回はアプリストアの「商品見積書パック」を使って、四捨五入の処理を追加してみました。

#カスタマイズ?無理無理!
###JSEdit for kintoneを使って簡単にカスタマイズ出来ます。
kintoneはプログラミングに詳しくなくても、気軽にカスタマイズが試せます。
kintoneをカスタマイズできるプラグインが用意されています。これを使えばJavaScriptやCSSをkintone上で作成して直ぐに結果を見ることが出来ます。
コマンド補完などの機能もあるので、ちょっとしてカスタマイズはJSEditを使って十分出来てしまいます。

今回のカスタマイズの完成イメージ

スクリーンショット 2018-12-09 20.45.01.png

フォーム画面

サブテーブルに下記のフィールドを追加しています。

フィールド名 種類 フィールドコード
四捨五入 数値 四捨五入
合計金額四捨五入 計算 合計金額四捨五入
消費税四捨五入 計算 消費税四捨五入
税込合計四捨五入 計算 税込合計四捨五入

追加した機能

  1. 四捨五入処理
  2. フィールドの編集不可設定

主な処理の説明

1. 四捨五入処理

見積明細サブテーブルに、数値フィールドを追加。四捨五入した計算結果をセットします。
今回はMath.roundを使って、小数点第一位で四捨五入しています。

changes.row.value.四捨五入.value = Math.round(event.changes.row.value.単価.value * event.changes.row.value.数量.value);

2. フィールドの編集不可設定

数値フィールドにセットした計算結果を、編集不可に設定します。
レコードの新規作成、編集、サブテーブルの追加・削除イベント時に処理を行います。

kintone.events.on(['app.record.create.show','app.record.edit.show','app.record.create.change.見積明細','app.record.edit.change.見積明細'], function(event) {
        let record = event.record;
        for (let i=0, len = record.見積明細.value.length; i<len; i++) {
            record.見積明細.value[i].value.四捨五入.disabled = true;
        }
        return event;
    });

おまけ

見積書を作ったら、納品書・請求書はそのまま利用できる方が良いですよね。

見積書・納品書・請求書をラジオボタンで選択して、タイトルを切り替えできるようにしてみました。
スクリーンショット 2018-12-09 21.35.39.png

    kintone.events.on("app.record.detail.show", function(event) {
        let record = event.record;
        let valTitle = record.帳票名.value;
        let fdTitle = kintone.app.record.getSpaceElement("title");
        fdTitle.innerHTML = '<div class="control-gaia control-label-field-gaia " style="box-sizing: border-box; width: 163px; height: auto;"><div class="control-inner-gaia"><span class="control-value-label-gaia"><font size="6"><b>' + valTitle + '</b></font></span></div></div>';
    });
スクリーンショット 2018-12-10 20.23.18.png ラジオボタンで選択した帳票名のテキストをスペースフィールドにセットしています。

#最後にまとめ
kintoneアプリストアの「商品見積書パック」にちょっとした便利機能を実装してみました。

今回のカスタマイズ内容は、「cybozu developer network」に蓄積されている情報を参考にしています。

kintoneはオープンソースではなく、サイボウズさんの製品の1つなのですが、「cybozu developer network」kintone Caféなど、ユーザーさんの情報共有の場がオンライン、オフラインで用意されているのは、個人的にとても良いなと感じています。

また来年も「cybozu developer network」kintone Caféを通じて、kintoneの良さを発信していきたいと思っています。

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?