見出し画像

AppSheetで在庫管理アプリをノーコードで作る - 依存型ドロップダウンの作り方

カカト@ノーコード開発推し です。

引き続き、AppSheetを使い在庫管理アプリを作っていきます。

前回は、AppSheetの関数を使いデータ登録時の重複チェックを実装しました。今回も関数を利用し、在庫の登録機能を作っていきたいと思います。

ゴールとして以下の2機能をつけてみます。

1.カテゴリと商品のコンボボックスを連動させる
  カテゴリを選択した際、そのカテゴリ内の商品のみを表示させる
  (いわゆる依存型のドロップダウンリスト)
2.在庫数 x 単価 で金額を自動計算させ、画面に表示する

それでは早速作っていきましょう。

事前準備

在庫テーブルのカラム設定と、一覧画面をサクッと作ります。

Data」→「Tables」より在庫テーブルを追加し、Columnsより列の設定をします。

とりあえず、以下のようにTypeを設定しましょう。

画像3

"商品"、"カテゴリ列"は自動的に「Ref」Typeになると思いますが、ならない場合は手動で設定してください。

"金額" は 「Price」にして、以下で詳細設定します。

画像2

列設定が終わりましたら、「UX」→「Views」より在庫一覧の画面を作ります。

View Type」は 「table」としておきます。

画像3

これでひとまず設定は終わりです。

テストデータとして、カテゴリを以下で設定しましょう。

画像4

続けて、商品を以下で登録します。

画像5

これと同じデータにしなくてもオッケーですが、複数カテゴリを登録し、それぞれにいくつか商品がぶらさがるよう登録しておいてください。

登録終わりましたら在庫一覧画面にいき、新規登録してみます。

画面でカテゴリを選ぶと、

画像6

以下のようにすべての商品が表示されてしまいます。

画像7

これではカテゴリと商品の整合性が取れないので、選択したカテゴリに属した商品だけが選べるようにします。


Valid_If を使いカテゴリと商品を連動させる

ということで、今回もAppSheetの関数を使い実装していきます。

在庫テーブルの商品列の詳細画面を開きます。

まずは、商品列の「Type」を "Enum" に変更します

画像8

そして、「Data Validity」→「Valid If」に以下関数式を入力します。

IN([_THIS], SELECT(商品[商品], ([カテゴリ] = [_THISROW].[カテゴリ]), TRUE))

画像9

この式でやっていることは、「商品テーブルにある、カテゴリ列の値が対象行のカテゴリと一致した商品を取得」となります。

Select()関数の3つ目の引数ですが、ここを TRUE にすると、重複した値は除外されます。

一旦ここでSAVEし、この関数が動作するか確認してみましょう。

もう一度在庫登録画面を開き、カテゴリを選択します。

画像10

すると、今度はカテゴリがテレビと一致した商品だけが表示されました。

画像11

他のカテゴリを選んだ際もちゃんと連動されていればオッケーです。

続いて、選択した商品の単価を商品表より取得し、金額計算を実装してみます。


lookup() 関数で商品テーブルより単価を取得する

商品列ですが、カテゴリとの連動を行うため Type を Enumに設定しました。

商品テーブルの Ref 列であれば、以下で説明したように商品テーブルの列を参照することは可能ですが、

Enumにしたためその方法ではできない(多分)ため、代わりに lookup() という関数を使ってみたいと思います。

まずは、在庫テーブルに Virtual column として単価を追加します。

画像12

Column nameの下にある、「App formula」に以下の式を入力します。

LOOKUP([_THISROW].[商品], "商品", "商品", "単価")

画像13

それぞれの引数ですが、

LOOKUP(検索キー, 検索対象の表, 検索対象の列, 戻り値)

を指しています。

ですので、「対象行の商品を検索キーとして商品テーブルの商品列にぶつけ、ヒットした行の単価を戻す」といった動作となります。

SAVEして、在庫登録をしてみます。

カテゴリ、商品を選ぶと、選択した商品の単価が自動的に表示されました。

画像14

では、取得した単価を使い、金額を自動的に計算してみましょう。

"金額"列の詳細設定より、「Auto Complete」にある「App formula」をクリックします。

画像15

以下の式を入れます。

[在庫数] * [単価]

画像16

すると、在庫数の増減に応じて金額が自動的に計算・表示されるようになりました。

画像17

項目の並びがおかしいので、数量、単価、金額になるようにViewを調整しましょう。

UX」→「Views」より、"Ref Views" にある 「在庫_Form」を開き、「Column order」を弄ります。

画像18

並びを変えてみましょう。

画像19

いい感じになりました^^


ということで今回も関数を使い色々やってみましたが、前回紹介した FILTER()関数や、今回出てきた SELECT()、LOOKUP() はすごく便利なので、リファレンス参考にしつつ色々試してみることをお勧めします。

この辺の関数を使いこなせるようになれば、脱AppSheet初心者・・かもしれません。あいにくカカトはまだググらないとわからないレベルです(´;ω;`)

さて、次回ですが今回で在庫登録画面ができましたので、在庫を登録・変更した際に在庫の変更履歴を自動的に登録する機能を作りたいと思います。

それではまた。

この記事が気に入ったらサポートをしてみませんか?