AppSheetで請求書アプリ(第5回)Viewでアプリの見た目を整える

folder_openAppSheet

請求書アプリを作りながら、AppSheetの使い方を学びましょう。
前回(第4回)はSELECT関数とSUM関数を使用して、品目明細から請求金額の合計値を計算する式を作成しました。
今回はViewを設定してアプリの見た目を整えます。
また、Virtural ColumnとTEXT関数を使って、日時の短縮表示にも挑戦してみましょう!

1. 「請求書」のViewを設定する

AppSheetアプリの見た目(画面レイアウト)はViewという機能で設定します。
AppSheetに用意されている「View type」というテンプレートを選んで設定するだけなので、短時間で簡単にアプリの画面レイアウトを作成することができます。

はじめに、「請求書」テーブルに関連するViewを設定しましょう。
AppSheetエディタの左側メニューにある「UX」をクリック、タブメニュー「Views」をクリックします。

AppSheetエディタでViewを設定する。

「請求書」View

Primary Views には「取引先」「請求書」「品目マスタ」というViewが既に作成されていると思います。
「請求書」をクリックして、View設定パネルを開きます。

「請求書」Viewの設定パネルを開く。

ここでは「請求書」Viewを以下のように設定しました。

設定項目
View name 「請求書」
For this data 「請求書」
View type 「deck」
Position 「left most」
View Options
Sort by 「Add」→「最終更新日時」,  Descending
Primary header 「取引先ID」
Secondary header 「請求書番号」
Summary column 「最終更新日時」
Actions 「Edit」
Display
Icon 「file-alt」

「最終更新日時」表示用の Virtual Column

AppSheetエディタのプレビュー画面で実際のViewを見てみましょう。
画面下のタブニュー「請求書」をクリックしてみます。

AppSheetエディタでプレビュー画面を確認する。

View を見れば分かるように、「最終更新日時」が「2021/08...」となっており表示が長くなっています。
Virtual Column(ヴァーチャル・カラム)を使用して、最終更新日時を短縮表示しましょう。
Virtual Columnは列設定の機能なので、一旦、「Data」に戻ります。

AppSheetエディタの左側メニュー「Data」 → タブメニュー「Columns」→ 「請求書」テーブルの設定パネルを開きます。
右上にある「Add Virtual Column」をクリックします。

「請求書」の列設定パネルを開く。

Virtual Column の設定パネルが開きます。
Column name を「最終更新日時表示用」にしました。
App formula は三角フラスコアイコンをクリックします。

「最終更新日時」の表示用Virtual columnを作成する。

Expression Assistant に以下のように入力します。

AppSheet列設定パネルで、Expression Assistant を設定する。

入力した式にはTEXTというAppSheet関数を使用しています。
第1引数に「時間」に関する列や文字列を設定すると、第2引数で設定した形式で文字列を返します。
上のような式では、「最終更新日時」列の値が「2021/08/15 12:00:00」の場合、「21/8/15」という値が返ってきます。
日時や日付表示を加工できるようになります。

TEXT()(時間を加工する場合)

TEXT(時間, フォーマット)

では、Viewに戻りましょう。
AppSheetエディタの左側メニュー「UX」 → タブメニュー「Views」でViewの設定を続けます。

Primary Views → 「請求書」のView設定パネルを開きましょう。
Summary columnを「最終更新日時」から「最終更新日時表示用」に変更します。

Summary column を「最終更新日時表示用」に設定を変更した。

AppSheetエディタのプレビュー画面でプレビュー画面を確認してみましょう。
最終更新日時が短縮表示されているでしょうか。
すべて終わったら、右上の「Save」をクリックして保存することを忘れずに。

AppSheetエディタのプレビュー画面で確認する。

「請求書_Detail」View

では、プレビュー画面で請求書を1件表示してみましょう。
画面の下の方にある「View: 請求書_Detail」をクリックして、「請求書_Detail」Viewの設定をします。

「請求書_Detail」Viewを設定する。

「請求書_Detail」Viewは、View Optionsの「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。

「請求書_Detail」ViewでColumn order を設定する。

「品目_Inline」View

設定した「請求書_Detail」Viewを確認してみましょう。
品目明細がありますが、かなり横長のテーブル表示になっているので、これを調整しましょう。
「View」をクリックします。

「品目_Inline」Viewを設定する。

プレビュー画面の下の方にある「View: 品目_Inline」をクリックして、「品目_Inline」Viewの設定をします。

「品目_Inline」をクリックしてViewを設定する。

View typeは「table」のままです。
View Options の「Sort by」を設定します。
「Add」ボタンをクリックして、「作成日時」と「Ascending」を設定します。

View Options で Sort by を設定する。

続けて、View Optionsの「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。

AppSheetエディタのプレビュー画面で確認してみましょう。
だいぶ品目明細らしくなりました。
続けて、画面右下にある編集アイコンをクリックしてみましょう。

AppSheetエディタのプレビュー画面で確認する。

「請求書_Form」View

請求書を作成したり編集したりするフォームが表示されます。
画面の下の方にある「View: 請求書_Form」をクリックして、「請求書_Form」Viewの設定をします。

「請求書_Form」Viewを設定する。

「請求書_Form」Viewでは、View Optionsの「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。

請求書_Formを設定する。

「品目_Form」View

同じ「請求書_Form」Viewで「品目」のところにある「New」をクリックしてみます。

「請求書_Form」で「New」をクリックして「品目_Form」を表示する。

「品目_Form」Viewが開きます。
プレビュー画面下にリンクが表示されない(請求書_Formのまま)ので、Ref Viewsから「品目_Form」を探してクリックしてください。

「品目_Form」設定パネルを開く。

「品目_Form」Viewも、View Optionsで「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。

「品目_Form」を設定する。

2. 「取引先」のViewを設定する

「取引先」View

続けて、「取引先」テーブルに関連するViewを設定します。
Primary Viewsにある「取引先」をクリックして、View設定パネルを開きましょう。
「取引先」Viewは以下のように設定しました。

設定項目
View name 「取引先」
For this data 「取引先」
View type 「deck」
Position 「left」
View Options
Primary header 「取引先」
Secondary header 「担当者」
Actions 「Edit」
Display
Icon 「address-card」

このような感じになりました。

「取引先」Viewの表示をAppSheetエディタのプレビュー画面で確認する。

「取引先_Detail」View

では、取引先を1件表示してみましょう。
画面下のタブニュー「取引先」をクリック、取引先を1件選択します。
画面の下の方にある「View: 取引先_Detail」をクリックして、「取引先_Detail」Viewの設定をします。

AppSheetアプリで「取引先」を1件表示して、「取引先_Detail」Viewを表示する。

「取引先_Detail」Viewでは、View Optionsの「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。

「取引先_Detail」ViewでColumn order を設定する。

「請求書_Inline」View

設定した「取引先_Detail」Viewを確認してみましょう。
取引先に対して発行した請求書のテーブルがあります。これを調整しましょう。
「View」をクリックしましょう。

「取引先_Detail」で請求書テーブルを調整する。

プレビュー画面下にある「View: 請求書_Inline」をクリックして、「請求書_Inline」Viewの設定パネルを開きます。

「請求書_Inline」の設定パネルを開く。

View typeは「table」のままで、View Optionsの「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。

「請求書_Inline」を設定する。

3. 「品目マスタ」のViewを設定する

「品目マスタ」View

続けて、「品目マスタ」テーブルに関連するViewを設定します。
Primary Viewsにある「品目マスタ」をクリックして、View設定パネルを開きましょう。
「品目マスタ」Viewは前回(第4回)、以下のように設定しました。

設定項目
View name 「品目マスタ」
For this data 「品目マスタ」
View type 「deck」
Position 「right」
View Options
Primary header 「品目」
Secondary header 「単価」
Summary colmn 「単位」
Actions 「Edit」
Display
Icon 「boxes」

「品目マスタ_Detail」View

では、品目マスタを1件表示してみましょう。
画面下のタブニュー「品目マスタ」をクリック、品目マスタを1件選択します。
画面の下の方にある「View: 品目マスタ_Detail」をクリックして、「品目マスタ_Detail」Viewの設定をします。

「品目マスタ_Detail」Viewを設定する。

「品目マスタ_Detail」Viewも、View Optionsの「Column order」を設定します 。
下の画像のように、「Add」ボタンで追加して並べていきます。

「品目マスタ_Detail」ViewのColumn order を設定する。

以上、請求書アプリの見た目(画面レイアウト)は整いました。
これで、AppSheetで請求書データを作成するところまではできるようになりました。
あとは、請求書を発行するだけです。

AppSheetでは、AppSheet Automationという機能でPDFファイルを作成できます。
請求書アプリではAutomationを使用して請求書のPDFを発行しますが、請求書のひな形をGoogleドキュメントで作成できる便利な機能があります。
次回(第6回)は、Googleドキュメントで請求書のひな形を作成してみましょう。

Share Me!

前の投稿
AppSheetで請求書アプリ(第4回)SELECT関数とSUM関数で合計を計算
次の投稿
AppSheetで請求書アプリ(第6回)Google Docs で請求書のひな形を作成

関連記事

メニュー