管理人がみんなに伝えたい!!と思った知識や学びを気ままに書いています(^^)

【TIPS】データタイプrefに検索機能を付ける方法

【TIPS】データタイプrefに検索機能を付ける方法

本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事!と感じた部分を記事にまとめています。

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

新UI画面の説明

まずはじめに

本記事はこんな人におすすめ!!
  • データタイプrefに検索機能をもたせたい人
本記事を読んで出来るようになること
  • Valid if(入力制限)の使い方
  • 入庫・出庫の数量に符号をもたせる方法
  • 在庫の推移をグラフ化する方法

今回は、appsheetのデータタイプrefについての記事です。

refは便利な機能ではあるのですが、値の表示がドロップダウンとなるので登録しすぎると苦労します

入力時の検索バーには、テキスト値を入力することでフィルターをかけることは可能ですが、本記事では、この検索をエクセルなどのフィルターと同じような仕様で実装できないかを検討し、その設定方法をまとめました。

それでは勉強していきましょう!

refはappsheetでは習得必須の内容です

参考記事

参照データについて

今回のアプリは、2シートでデータを作成しています。

入出庫履歴シート
入出庫履歴シート

このシートは、入出庫履歴シートで製品名と入出庫区分、その数量を記録します

製品名には、次に示す登録製品シートの登録IDの値を入力する必要があります。

登録製品シート
登録製品シート

登録製品シートは、生産している製品のマスター登録をイメージしています

シートの作成が完了したらappsheetにデータを送ってください(^^)


各シートのデータ修正

データの読み込みが完了したら次にデータカラムの設定とViewの設定を行います。

製品登録シートのデータタイプとViewを整える

データの読み込みが完了したら、先に設定が簡単な製品登録の画面を作成していきましょう!

まずはカラムの設定を確認します。

登録IDカラム
登録IDのの設定
製品No.カラム
製品No.の設定

App formulaに関数を送ることで、自動で製品No.を取得することが可能になります。

max()関数

括弧の中にリスト(number型)のデータを送ることでリストの中の最大値を抽出してくれる関数です

数字を扱う関数は知っておくと役に立つときがきます

参考記事
生産工場カラム
生産工場カラムの設定

TypeはEnumを選択し、Valuesに値を入力します。

写真カラム
写真カラムの設定

カラムの設定はこれで完了です。続いてViewの設定に移ります(^^)


新規Viewの追加
新規Viewの追加

UXペインから新規Viewを追加します。

View optionの設定

View Optionsの設定を整えます。

これで製品登録シートについては完了です。

続いて、メインである在庫管理シートの設定を行います。


入出庫管理のデータタイプとViewを整える

入出庫履歴シートのイメージ

製品登録シートと同じく、まずはカラムの設定を確認します。

IDカラム
IDカラムの設定
製品No.絞り込みカラム
生産工場絞り込みカラム

これらの2つのカラムは、本記事で伝えたい検索カラムです。

製品No.や生産工場を入力することで、refで紐ついている選択肢を少なくすることができます。

製品No.絞り込みカラムを例に挙げると

製品No.絞り込みカラムの設定

生産工場絞り込みカラムにもValid ifに登録製品[生産工場]を指定しましょう(^^)

製品名

このアプリの設定上、一番大事な構文を入力します。

製品名カラムの設定
製品名カラムの入力値制限
Valid ifに以下の構文を入力

select(登録製品[登録ID],and(
if(isnotblank([製品No.絞り込み]),[製品No.]=[_thisrow].[製品No.絞り込み],true),
if(isnotblank([生産工場絞り込み]),[生産工場]=[_thisrow].[生産工場絞り込み],true)))

かなりレベルが高いので、皆さんのアプリのカラムに置き換えてコピペでお使いください。

構文の意味を図解に表しました(^^)

検索機能を持たせる構文の解説

appsheetを習得するにはselect()関数は必修関数です

参考記事

この構文にはたくさんの関数が含まれていますが、基本はselect()関数です

select()関数のフィルター条件式にand()関数を用いて複数の条件式を繋いでいます。

Viewの設定
入出庫Viewの作成
入出庫Viewの詳細設定

検索機能の確認

それでは作成したViewの入力画面について確認してみましょう!

〇〇絞り込みのカラムを使う場合と使わない場合で、入力画面が違います。

絞り込み条件を使わない場合

上図のように絞り込み条件に何も入力しない場合は・・

絞り込み条件を使わない場合の画面

製品名にはrefに紐ついている製品データが全て表示されます。

絞り込み条件を使う場合

上図のように、生産工場を大阪と指定した場合・・

絞り込み条件を使う場合の画面

製品名には、生産工場が大阪のものしか表示されなくなります。

このように、絞り込み条件用のカラムを設置することで、入力者の手助けをしてあげることが可能です(^^)


入出庫の推移をグラフ化

ついでに、入出庫の推移をグラフ化してみたいと思います。

refの検索機能とは全く関係ありませんので、興味のない方は読み飛ばしていただいて結構です!

データ構成のポイントは、Number型の数値を持った[数量]と入庫と出庫を区別できる[入出庫区分]があることです。

用いるデータにnumber型のデータがあるなら、それをグラフにする需要は必ず出てくると思います(^^)

入庫と出庫に符号をもたせる

入庫は在庫としてはプラス、出庫は在庫としてはマイナスなので、まずはその設定を試みます。

Virtual columnに以下の関数を入力します。

数値に符号を持たせる方法
数量に符号を持たせる方法
if()関数

if(is-true?,then-do-this,else-do-this)

第一引数に はい か いいえ で答えられる条件式、第二引数に はい の場合、第三引数に いいえ の場合に何をするかを指定します。

入出庫区分が”入庫”である場合、数量はそのままそれ以外(出庫)は数量に(-1)を掛ける

つまり、if([入出庫区分]=”入庫”,[数量],[数量]*(-1))で表現できます(^^)

条件分岐ができるif()関数は必ずマスターしておきましょう

参考記事

日付を代表月としてまとめる

次に、グラフを見やすくするために日付を月単位でまとめます。

符号の時と同じく、Virtual columnに以下の関数を入力します。

日付を月単位で集約する方法
代表月を求める方法
text()関数

text(when,format)

第一引数に日付、第二引数に表示方法を渡します

text()関数は知っていると便利な関数です

参考記事

グラフのViewを作成

入出庫の区分から作成した符号のカラムと、テキスト表示をした日付でグラフを作成します。

Viewの設定
数量推移のグラフを作成
数量推移のグラフの条件

上記設定を行うとグラフとしては下図のようになります。

グラフの確認

ちなみに、appsheetのグラフはドリルダウンの状態になるのがデフォルトなので、棒グラフをクリックするとその月のデータテーブルを見ることが可能です!

appsheetでグラフを作りたい人向けに記事をまとめています

参考記事

まとめ

以上、データタイプrefに検索機能をもたせる方法の記事でした。

データタイプrefを設定すると検索タブは出現しますが、自分で文字を打つ必要があります。

この記事の設定をしておくと、事前に用意した選択肢を選ぶだけで、refの選択肢を少なくすることが可能です。

より高度なアプリ開発を行いたいときに、本記事を思い出していただけると嬉しいです(^^)

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです!

勉強お疲れさまでした(^^)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA