AppSheet で請求書アプリ(第6回)請求書テンプレートを作成する

folder_openAppSheet

請求書アプリを作りながら、 AppSheet (アップシート)の使い方を学びましょう。
前回(第5回)は、アプリのビュー(画面)を設定しました。
請求書データを作成する準備ができたので、あとは、請求書をPDFで発行するだけです。
今回は、AutomationでPDFを作成する際に必要なテンプレートをGoogleドキュメントで作成します。

本ブログ記事及びサンプルデータの著作権は、当社に帰属します。AppSheetを学習する目的での個人使用を除き、無断での複製、転載、改変、翻案、公衆送信等の利用を禁止します。詳細は、ウェブサイト利用規約をご確認ください。

1. Googleドキュメントで請求書のテンプレートを作成する

それでは、請求書のテンプレートを作成していきましょう。
サンプルとしてWordのデータを用意しました。
まずは、下のWordアイコンをクリックして、データをダウンロードしてください。

Googleアカウントにログインして、GoogleドライブにWordのデータをアップロードしましょう。

WordデータをGoogleドキュメントに変換します。

今アップロードしたWordデータを開きます。
「ファイル」メニューをクリックして、「Googleドキュメントとして保存」をクリックします。

WordをGoogleドキュメントに変換して保存しました。

2. AppSheet はタグで差し込みができる

請求書は、「請求書」テーブルから作成します。

請求書に差し込みするデータは、

  • 「請求書」テーブル(赤枠):「請求日」や「件名」などは「請求書」テーブルの値をそのまま差し込みます。
  • 「取引先」テーブル(緑枠):「取引先」列(Ref)から「取引先」テーブルを参照します。
  • 「明細」テーブル(黄枠):「Related 明細s」から「明細」テーブルを参照します。

先ほど、Googleドキュメントに変換した請求書テンプレートを開きます。

AppSheetでGoogleドキュメントに列の値を差し込む時に使用されるのがタグ <<>> です。
タグは、以下のように <<>> 内に [列名] を記載して使用します。

タグの使い方

<< [ 列名 ] >>

例えば、請求書の請求日は以下のように書きます。

  • <<[請求日]>>

テンプレートでは以下のような感じになっています。

この要領で「請求書」テーブルの列の値(上の図の赤枠の箇所です)をタグで書いていきましょう。

件名は「件名」を、請求金額は「合計」(Virtual Column)を差し込むので、

  • <<[件名]>>
  • <<[合計]>>

で大丈夫です。テンプレートでは以下のようになっています。

「小計」「消費税」「合計」は、Virtual Columnを使って以下のようにします。

  • <<[小計]>>
  • <<[消費税額]>>
  • <<[合計]>>

テンプレートでは以下のようになっています。

「支払期日」と「備考」は以下の通りです。

  • <<[支払期日]>>
  • <<[備考]>>

テンプレートでは以下のようになっています。

3. 参照テーブルの値はリレーションシップを利用する

「取引先名」は「取引先」テーブルにあるので、「請求書」テーブルから直接取得できません。
このような場合は、「Ref」で設定したリレーションシップを利用して値を引っ張ってきます。

「取引先」列(Ref)から「取引先」テーブル(Source table)を参照して「取引先名」列の値を取得します(上の図の緑枠の箇所です)。
参照先テーブルから値を取得するタグの書き方は以下のようになります。

参照先テーブルの値を取得するタグの書き方

<< [ Ref を設定した列名].[参照先テーブル内の列名 ] >>

「取引先」テーブル内にある「取引先名」の値は以下のようにタグを書きます。

  • [取引先].[取引先名]

テンプレートでは以下のようになっています。

4.  StartタグとEndタグで明細行を表組にする

明細行は「請求書」テーブルにある「Related 明細s」列からリストで取得できます。

「Related 明細s」列は、「明細」テーブルの「請求書」列に「Ref」を設定した時に自動的に作成された列です。
「Related 明細s」から「明細」テーブルを参照して、明細行をリストで取得できます。

取得した明細行リストを表組にしたいので、PHPやJavaScriptの「for文」のような構文があると便利です。
AppSheetでは、StartタグとEndタグを設定することで実現できます。

[ Related 明細s ] を含めて、<<[ 列名] >>を<<Start>>と<<End>>で囲みます。

Startタグ、Endタグ

<< Start: [ Related テーブル名s ]>>
<<[列名]>><<[列名]>><<[列名]>>...
<<End>>

請求書アプリでは明細のタグを以下のように設定しました。
表組の商品名欄にStartタグ、金額欄にEndタグを含めて、「単価」と「単位」「数量」を囲みます。

  • <<Start: [Related 明細s]>><<[商品].[商品名]>>
  • <<[単価]>>
  • <<[数量]>><<[単位]>>
  • <<[金額]>><<End>>

実際のテンプレートはこのような感じです。

 

以上、請求書のテンプレートをGoogleドキュメントで作成しました。
次回(第7回)は、今回作成したテンプレートを使って、Automationで請求書をPDFで発行します。

Share Me!

前の投稿
AppSheet で請求書アプリ(第5回)画面(ビュー)を設定する
次の投稿
AppSheet で請求書アプリ(第7回)Automationで請求書をPDFで発行

関連記事

メニュー