· 

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

Viewでアプリの見た目を整える

 

このブログでは、請求書アプリでAppSheetの使い方を学びます。

 

前回(第4回)はSELECT関数とSUM関数を使用して、品目明細から請求金額の合計値を計算する式を作成しました。

今回はViewを設定してアプリの見た目を整えます。

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

 

それでは、Viewを設定しましょう。

左側メニューにある「UX」をクリック、タブメニュー「Views」をクリックします。

 

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」
Scondary header 「請求書番号」
Summary column 「最終更新日時」
Actions 「Edit」
Display
Icon 「file-alt」

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

 

プレビュー画面で実際のViewを見てみましょう。

 

プレビュー画面を確認する。

 

View を見れば分かるように、「最終更新日時」が「2021/08...」となっており表示が長くなっています。

Virtual Column(ヴァーチャル・カラム)を使用して、最終更新日時を短縮表示しましょう。

Virtual Columnは列設定の機能なので、一旦、「Data」に戻ります。

 

左側メニュー「Data」 → タブメニュー「Columns」→ 「請求書」テーブルの設定パネルを開きます。

右上にある「Add Virtual Column」をクリックします。

 

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

 

Virtual Column の設定パネルが開きます。

Column name を「最終更新日時表示用」にしました。

App formula は三角フラスコアイコンをクリックします。

 

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

 

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

 

Expression Assistant を設定する。

 

入力した式にはTEXT関数を使用しています。

第1引数に「時間」に関する列や文字列を設定すると、第2引数で設定した形式で文字列を返します。

上のような式では、「最終更新日時」列の値が「2021/08/15 12:00:00」の場合、「21/8/15」という値が返ってきます。

日時や日付表示を加工できるようになります。

 

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

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

 では、Viewに戻りましょう。

左側メニュー「UX」 → タブメニュー「Views」でViewの設定をします。

 

Primary Views → 「請求書」のView設定パネルを開きましょう。

Summary columnを「最終更新日時」から「最終更新日時表示用」に変更します。

 

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

 

プレビュー画面を確認してみましょう。

最終更新日時が短縮表示されているでしょうか。

すべて終わったら、右上の「Save」をクリックして保存することを忘れずに。

 

プレビュー画面で確認する。

「請求書_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」をクリックします。

 

 

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

 

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

 

View typeは「table」のままです。

View Options の「Sort by」を設定します。

「Add」ボタンをクリックして、「作成日時」と「Ascending」を設定します。

 

View Options で Sort by を設定する。

 

続けて、View Optionsの「Column order」を設定します 。

 

「Add」ボタンで追加して並べていきます。

 

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

 

プレビュー画面で確認してみましょう。

だいぶ品目明細らしくなりました。

続けて、画面右下にある編集アイコンをクリックしてみましょう。

 

プレビュー画面で確認する。

「請求書_Form」View

 

請求書を作成したり編集したりするフォームが表示されます。

画面の下の方にある「View: 請求書_Form」をクリックして、「請求書_Form」Viewの設定をします。

 

 

「請求書_Form」Viewでは、View Optionsの「Column order」を設定します 。

「Add」ボタンで追加して並べていきます。

 

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

「品目_Form」View

 

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

 

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

 

「品目_Form」Viewが開きます。

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

 

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

 

「品目_Form」Viewも、View Optionsで「Column order」を設定します 。

「Add」ボタンで追加して並べていきます。

 

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

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

「取引先」View

 

 

続けて、「取引先」のViewを設定します。

Primary Viewsにある「取引先」をクリックして、View設定パネルを開きましょう。

「取引先」Viewは以下のように設定しました。

 

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

 

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

 

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

「取引先_Detail」View

 

では、取引先を1件表示してみましょう。

画面の下の方にある「View: 取引先_Detail」をクリックして、「取引先_Detail」Viewの設定をします。

 

「取引先」を1件表示して、「取引先_Detail」Viewを表示する。

 

「取引先_Detail」Viewでは、View Optionsの「Column order」を設定します 。

「Add」ボタンで追加して並べていきます。

 

「請求書_Inline」View

 

設定した「取引先_Detail」Viewを確認してみましょう。

取引先に対して発行した請求書のテーブルがあります。これを調整しましょう。

「View」をクリックしましょう。

 

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

 

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

 

 

View typeは「table」のままで、View Optionsの「Column order」を設定します 。

「Add」ボタンで追加して並べていきます。

 

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

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

「品目マスタ」View

 

 続けて、「品目マスタ」のViewを設定します。

Primary Viewsにある「品目マスタ」をクリックして、View設定パネルを開きましょう。

「品目マスタ」Viewは以下のように設定しました。

 

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

「品目マスタ_Detail」View

 

では、品目マスタを1件表示してみましょう。

画面の下の方にある「View: 品目マスタ_Detail」をクリックして、「品目マスタ_Detail」Viewの設定をします。

 

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

 

「品目マスタ_Detail」Viewも、View Optionsの「Column order」を設定します 。

「Add」ボタンで追加して並べていきます。

 

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

 

 

以上、請求書アプリの見た目は整いました。

これで請求書データを作成するところまではできるようになりました。

あとは、請求書を発行するだけです。

 

AppSheetでは、Automationという機能でPDFファイルを作成できます。

請求書アプリではAutomationを使用して請求書のPDFを発行しますが、請求書のひな形をGoogleドキュメントで作成できる便利な機能があります。

次回(第6回)は、Googleドキュメントで請求書のひな形を作成してみましょう。

 

 

アプリを作る前に実際に試してみたい方は、アプリスイートが作ったサンプルアプリを7日間無料体験ができます。

こちらからお問い合わせください。