HapInS Developers Blog

HapInSが提供するエンジニアリングの情報サイト

AppSheetで見積管理システムを作ってみた

弊社では、こちらの記事でAppSheetのご興味を持っていただけることが増えましたので

今回は受発注管理システムの一部の機能として活用できる見積管理システムを開発してみたいと思います。

blog.hapins.net

この記事を読むことで

紙やExcelで管理することなく自動計算&ボタン一つで見積書PDFを作成することができます

用途

使うイメージとしては下記になります

  1. 取引先に対して見積&見積書PDFの作成が必要となる
  2. あらかじめ登録している商品(と販売価格)と数量を選択し見積明細を作成(自動算出)
  3. それを元に見積を作成(税や合計金額も自動算出)
  4. 最後に「PDF作成」ボタンで作成した見積情報を元に見積書PDFを作成

はじめにお見せすると、完成したものはこちらです。

DB設計

今回は簡易的に下記のように作成しました。

全てスプレッドシートで作成できます。

取引先

見積

見積明細

商品

商品はあらかじめ、自社で扱っている商品をマスタとしてデータを管理しておきます。

商品を選択するだけで、その販売価格を参照することができます。

バーチャルカラムとformulaの設定

上記のDB設計で一部見えていますが

見積と見積明細の小計・税・合計が自動算出できるように設定します。

見積明細

「小計」は販売価格と数量をかけた計算を行います

「税」は小計に0.1をかけた計算を行います

「合計」は小計と税を足した計算を行います

商品マスタから商品を選択し、数量を入力するだけです。

こんな感じ

見積

見積では上記の見積明細で計算した「小計」「税」を足していきます。

「小計」は見積に紐づく見積明細の「小計」を足します

ん?[Related quotation_details][subtotal_price]てなんですか?と思った方...

実は見積明細のquotation_idをRef型としてquotation(見積)を紐づけた際に 「is a part of?」にチェックを入れると、見積のDBにバーチャルカラムとして紐づいた見積明細のリストが作成されます。

それが[Related quotation_details]です!

つまりその[Related quotation_details]をSUM関数で合計を算出します。

そして話を戻して、「税」も同様に計算します

「合計」は上記の「小計」と「税」を足します

これで見積と見積明細が作成できます。

これなら簡単にできそうですね!

次はPDFを作成する手順を説明します。

アクションの設定

Actionのセクションでは下記を設定しました。

Action name :pdf作成 For a record of this table :quotation Do this :Data: set the values of some columns in this row

PDF作成のトリガー

PDFが作成されるためには、データの更新をトリガーにしてautomationを発火させます。

そのためにはアクションで何かしらデータ変更を行います。 このSet these columnsでは、[create_pdf]に1を足す、というアクションを設定しました。

automationの設定

automationのセクションでは、左上の「+」ボタンと「Create a new bot」をクリック。

「Configure event」という青いボタンをクリックし「Create a custom event」をクリックします。

Event name :pdf作成

Event Type :Data Change

Table :quotaion

Data change type :Updates only

Condition :[THISROW_BEFORE].[create_pdf]<>[THISROW_AFTER].[create_pdf]

次は「Add a step」→「Create a custom step」をクリック

「Run a task」のままで大丈夫です

Settingsで 「Create a new file」

Table name :quotaion

HTTP Content Type :PDF

Template :Createをクリックし、Viewでドキュメントを確認します Templateには初めは何も設定されていませんがCreateをクリックすることでGoogleドキュメントのテンプレートが作成されます

初期で作成されたテンプレートがこちら

quotationとquotation_detailのデータが配置されているのがわかるかと思います。

特にquotation_detailはquotationのRelatedとしてリスト型で作成されており、

このレイアウトでは1行で作成しても、リストが2行以上ある場合もそのリストの分だけ自動で反映されるようになっております。

見積書PDFのレイアウトの設定

これを見積書のレイアウトに加工します(自社で使っているレイアウトをコピペしてデータを入れ込みます) できたのがこちら

次はFolder PathとFile Name Prefixを設定します。

Folder Path :"Files/" & "見積書" File Name Prefix :[client_id].[name]&"御中_"&[name]&[create_pdf]

Folder Pathはファイルが保存される相対フォルダのパスの事を指します。 File Name Prefixは作成したファイル名を指します。

特にFolder Pathについてですが、自分のGoogle Driveに行ってみるとAppSheet用のフォルダが作成されていることがわかるかと思います。

階層としては、下記のような感じです。

さらにその中に入るとContentsと空のドキュメントがあります。

Contentsには先ほど作成した見積書用のテンプレートが入っています。

今回は下記のようにFilesというフォルダを作成し、その中に見積書フォルダを作成したいと思います。

そのため、Folder Pathを"Files/" & "見積書"としたわけです。

Disable Timestamp?はチェックを入れておきます。

公式ドキュメントにも説明がありますが,

「Disable Timestamp?」はタイムスタンプの利用を無効にするかどうかの設定です。

下記引用: Archive files created from a bot - AppSheet Help

Disable Timestamp?が無効の場合、

ファイル名は次のようになります

ファイル名 :MyFileName20190207_133355_804.pdf

Disable Timestamp?が有効の場合、

ファイル名は次のようになります ファイル名 :MyFileName.pdf

リンクの設定

もう一つアクションを設定します。

「Run a data action」をクリックし「Set row values」にします。

quotationにはfileというFile型のカラムを設定していますのでクリックした際にそのファイルが開けるようにします。

fileは下記のように設定

"/appsheet/data/" & "QuotationSystem-652158011" & "/Files/見積書/" &[client_id].[name]&"御中_"&[name]&[create_pdf]&".pdf"

後半の

"/Files/見積書/" &[client_id].[name]&"御中_"&[name]&[create_pdf]&".pdf"

は先ほど設定した相対フォルダのパスとファイル名にpdfを付け加えたものになります。

前半の

"/appsheet/data/" & "QuotationSystem-652158011"

このアプリのフォルダのパスになります。

先ほどちらっとお見せした部分です。

これは設定画面のDefault app folderから確認することもできます。

後はアクションやpdfのfileがわかりやす用に赤色に変更するなどデザインを整えれば完成です。

完成したもの

最後に

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

AppSheetでは社内向けシステムとしてできることが多く、

今回はその基本的な内容でもあり応用が利く部分をご紹介しました。

今回構築したプロトタイプを触ってみたい!という方は以下のお問い合わせフォームよりご連絡いただけますと幸いです。

エンドユーザー様、システム開発会社様どちらでも大丈夫です!

皆さんに色々と触っていただいて、より良いプロトタイプに仕上げていけたら何よりです。

blog.hapins.net