AppSheetで在庫管理アプリ(第4回)SHOWで列の表示を切り替える

folder_openAppSheet

在庫管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回(第3回)はAppSheet Automationで、QRコードのPDFファイル出力を自動化しました。
今回は「SHOW?」という機能を使って、列の表示を切り替えます。
条件を設定して列表示を切り替えることで、アプリの使い勝手が良くなります。是非マスターしましょう!

【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて(汗)、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。

Switch to the legacy editor」で旧エディタに切り替える。

1. 条件で列の表示を切り替える

在庫管理アプリではQRコードかバーコード、どちらかを使用します。
AppSheetで品目マスタを追加する際に「バーコード」列を切り替える必要があります。

「バーコード」列の表示または非表示
  • QRコードを使用する場合:UNIQUEID関数でコードを生成するので「バーコード」列は表示しない
  • バーコードを使用する場合:バーコードをスキャンするために「バーコード」列を表示したい

このように条件で列の表示を切り替える場合、AppSheetでは「SHOW?」 で設定します。

では、「バーコード」列の表示非表示を設定してみましょう。 AppSheetエディタ左側メニュー「Data」→ タブメニュー「Columns」→ 「品目」をクリックして列設定パネルを表示します。
「バーコード」の左にあるペン型の編集アイコンをクリックしましょう。

AppSheetエディタで「バーコード」列を設定する。

「バーコード」列の設定パネルが開きます。
「SHOW?」の所にある三角フラスコアイコンをクリックします。

AppSheetでは「Show?」で条件を設定して、列の表示非表示を設定できる。

フィールドに入力できる状態になりました。
クリックして、Expression Assistantを開きましょう。

三角フラスコアイコンをクリックすると、入力可能になる。

入力フィールドの下に、Data Explorerが表示されていると思います。
「コード選択」のところにマウスを持っていくと「Insert」と表示されるので、クリックしてみてください。

Data Explorerを使うと、クリックで列名を入力できる。

[コード選択]と入力されたと思います。
入力フィールドに文字入力しなくても、Data Explorerからクリックで入力することもできます。

Data Explorerで「コード選択」をクリックした。

条件式を以下のように入力してください。
「コード選択」列の値が「バーコード」の時に、「バーコード」列を表示するという意味になります。
「Save」をクリックして保存しましょう。

「コード選択」がバーコードの時に「バーコード」列を表示する。

このような感じになっていれば「SHOW?」の設定は大丈夫です。
「Done」をクリックして設定パネルを閉じましょう。

「Done」で設定パネルを閉じる。

2. AppSheetで品目マスタを追加する

では、AppSheetで実際に品目マスタをひとつ追加してみましょう。
「品目」テーブルに関連するViewを設定していきます。

まずは、品目マスタを追加するためのViewである「品目_Form」Viewを設定します。
AppSheetエディタ画面のプレビューで、タブメニュー「品目」をクリックして選択します。
「+」ボタンをクリックしてください。

AppSheetエディタのプレビュー画面で「品目」を選択、「+」ボタンで追加する。

プレビューの下の方にある「View: 品目_Form」のリンクをクリックします。

「品目_Form」をクリックする。

「品目_Form」Viewの設定パネルが開きます。

AppSheetエディタがUX → View設定画面になり、「品目_Form」Viewの設定パネルが表示される。

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

Column orderを追加する。

では、品目マスタをひとつ追加してみましょう。
その前に、AppSheetエディタ画面右上の「Save」をクリックして保存します。

さきほどと同じように、タブメニュー「品目」をクリック → 「+」ボタンをクリックして「品目_Form」Viewを開きます。
「コード選択」で「バーコード」をクリックして選択してみましょう。
その下に「バーコード」列が表示されているでしょうか?

実際に「コード選択」でバーコードを選択すると、「バーコード」列が表示される。

スマホアプリなら、アイコンをタップするとスキャン画面になり、バーコードスキャンができます。
品名、保管場所、数量などを入力していき、最後に「Save」で追加します。

バーコードをスキャンして読み取ることができる。

「コード選択」で「QRコード」を選択すると、その下の「バーコード」列が表示されないことを確認してください。

「コード選択」で「QRコード」を選択すると、「バーコード」列は表示されない。

QRコードを使用する場合は、UNIQUEID関数でコードを生成するので「バーコード」列は非表示でも大丈夫です。
品目名、保管場所、数量などを入力して、最後に「Save」で追加します。

QRコードはUNIQUEID関数で生成して、IDとして存される。

追加した品目はこのように表示されます。

品目を追加してみた。

データソースのGoogleスプレッドシートにも追加した品目が1行追加されていることを確認しましょう。

Googleドライブ内のスプレッドシートにも1件品目が追加されている。

3. AppSheet AutomationでQRコードのPDFを出力する

「コード選択」でQRコードを選択した場合は、Automationが実行されてQRコードのPDFファイルが作成されています。
アプリのルートフォルダ内に「QRコード」フォルダがあるでしょうか?

GoogleドライブでPDFファイルが作成されているかを確認する。

「QRコード」フォルダ内にPDFファイルが保存されていれば成功です。

QRコードのPDFファイルが保存されている。

PDFファイルを開いてみましょう。 無事にQRコードが表示できるでしょうか?

アプリ内にPDFファイルのリンクが表示されているでしょうか?
ただいま追加した品目の「QRコードファイル」を探してみましょう。

ファイル名とファイルのアイコンが表示されていますか?
クリックして、さきほどのPDFファイルが表示されたら成功です。

「QRコードファイル」にPDFのファイル名とリンクが表示されているので、クリックするとファイルが表示される。

4. 品目のViewを設定する

つづいて、「品目_Detail」Viewを設定します。
AppSheetエディタのプレビューでタブメニュー「品目」をクリックします。
さきほど追加した品目をクリックして表示しましょう。

AppSheetエディタで、メニュータブ「品目」をクリックする。「View: 品目」をクリックする。

プレビュー画面の下にある「View: 品目_Detail」のリンクをクリックします。

追加した品目をクリックすると、「品目_Detail」が表示される。

「品目_Detail」Viewの設定パネルが開きます。

AppSheetエディタが、UX → View設定に切り替わり、「品目_Detail」設定パネルが表示される。

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

Column orderを追加する。

最後に、「品目_View」を設定します。
再度、AppSheetエディタのプレビューでタブメニュー「品目」をクリックします。
プレビュー画面の下にある「View: 品目」のリンクをクリックします。

AppSheetエディタで、メニュータブ「品目」をクリックする。「View: 品目」をクリックする。

「品目」Viewの設定パネルが開きます。
ここでは「品目」Viewを以下のように設定しました。

設定項目
View name 「品目」
For this data 「品目」
View type 「table」
Position 「left most」
View Options
Sort by 「Add」→「品目名」,  Ascending
Column order 「Add」→「写真」、「品目名」、「数量」、「保管場所」、「最終更新日時」
Diplay
Icon 「boxes」

「品目」View設定パネルが開くので設定する。

設定パネルは以下のようになります。

「品目」Viewを設定した。

以上で、「品目」テーブルに関連する設定はできました。
これで品目マスタを追加、更新、削除したり、QRコードをPDFファイルで出力できるようになりました。

次回(第5回)は、QRコードやバーコードをスキャンして入出庫記録を作成してみましょう!

Share Me!

前の投稿
AppSheetで在庫管理アプリ(第5回)コードをスキャンして入出庫記録
次の投稿
AppSheetで在庫管理アプリ(第3回)AutomationでQRコードをPDF出力

関連記事

メニュー