AppSheetで電子名刺アプリ(第4回)SHOWで列の表示を切り替える

folder_openAppSheet

電子名刺アプリを作りながら、AppSheetの使い方を学びましょう。
前回(第3回)はアプリの見た目(View)を設定しました。
今回はアプリを使いやすくするための列設定を進めていきます。

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

電子名刺アプリでは仕事用とプライベート用で使い分けできるようにしたいと思います。
そのためには、「用途」列で選択した値(「仕事」または「プライベート」)によって入力項目の表示を切り替える必要があります。

「用途」列で「仕事」と「プライベート」を切り替える。

各列は、以下の条件の時に表示するように設定します。

NAME 表示する時の「用途」の値
会社名 「仕事」
電話(勤務先) 「仕事」
電話(仕事携帯番号) 「仕事」
電話(私用携帯番号) 「プライベート」
メール(勤務先) 「仕事」
メール 「プライベート」
勤務先郵便番号 「仕事」
勤務先住所(都道府県) 「仕事」
勤務先住所(市区町村) 「仕事」
勤務先住所(番地以降) 「仕事」
自宅郵便番号 「プライベート」
自宅住所(都道府県) 「プライベート」
自宅住所(市区町村) 「プライベート」
自宅住所(番地以降) 「プライベート」
URL 「仕事」

2. 「SHOW ?」を設定する

このように条件で列の表示を切り替える場合、AppSheetでは「SHOW?」 を設定します。
AppSheetエディタ左側メニュー「Data」→ タブメニュー「Columns」→ 「連絡先」をクリックして列設定パネルを表示します。

「会社名」列を例として設定してみましょう。
「会社名」列の左にある編集アイコンをクリックして、設定パネルを開きます。

AppSheetで「Show ? 」を設定する。

「SHOW ?」にチェックが入っていると常に表示されている状態です。
右端にある三角フラスコのアイコンをクリック → 入力フィールドをクリックします。

AppSheetで「Show ? 」に条件を入力する。

Expression Assistant が表示されます。
「会社名」列は「用途」列が「仕事」の時だけ表示したいので、以下のように入力して「Save」をクリックします。
列名は角括弧 " [ " と " ] "で囲んで、[列名] と表記します。

AppSheetで「Expression Assistant」を設定する。

他の列についても同じように「SHOW ?」を設定しましょう。

設定が終わったら確認してみましょう。
「会社名」で「仕事」または「プライベート」を選択したときに、思い通りに列項目が表示、非表示されているでしょうか?

AppSheetアプリで表示の条件分岐を確認する。

3. AppSheet関数「CONCATENATE」で文字列を作成する

電子名刺アプリには当然、名前を入力する列があります。
「フルネーム」という列がありますが、ここは「姓」と「名」に入力した値を使って自動的に入力するようにします。

CONCATENATE関数

「姓」と「名」をつなげて「フルネーム」を作成したいので、CONCATENATE関数を使いましょう。
()の中に、つなげたい文字列や [ 列名 ] をカンマ(, )で区切って列挙するだけで1つの文字列にできます。

CONCATENATE関数 CONCATENATE("文字列1", "文字列2", "文字列3", ・・・)

では、「フルネーム」列を設定しましょう。
編集アイコンをクリックして設定パネルを開いてもよいですが、列設定パネルから直接設定してしまいましょう。
「フルネーム」の FORMULA の入力フィールドをクリックします。

AppSheetでFormulaを設定する。

Expression Assistant が表示されます。
以下のように入力してください。
姓名の間に半角スペースを入れたいので、 ” “ を入れておきました。

AppSheetのCONCATENATE関数を設定する。

実際に「姓」と「名」に入力した値で「フルネーム」が作成できるかを確認してみましょう。

AppSheetのCONCATENATE関数の結果を確認する。

以上、アプリを使いやすくするための設定を行いました。
今回のような設定は、誤入力を防ぐためにアプリ開発では通常よくやることです。
AppSheetのようなノーコード開発ツールでも同じように設定できることが分かりました。

次回(第5回)は、QRコードジェネレーターを使用してVCard形式のQRコードを生成し、AppSheetで電子名刺を表示します。

Share Me!

前の投稿
AppSheetで電子名刺アプリ(第3回)電子名刺用のViewを作成する
次の投稿
AppSheetで電子名刺アプリ(第5回)VCard形式のQRコードを生成する

関連記事

メニュー