AppSheet⑭選択肢をボタンやドロップダウンで表示する手順

　AppSheetでボタンやプルダウンメニューを利用したい人は多いでしょう。今回は、AppSheetで選択肢をボタンやドロップダウンで表示する手順の記事を書きます。これで入力がしやすいアプリを作成することができます。

AppSheetアプリの下準備

　AppSheetで見た目を変える方法を説明したいと思います。まずは、スプレッドシートでデータを作ります。

　続いて、拡張機能のAppSheetからアプリを作成を選びます

　アプリ作成が完了されたら、ポップアップウィンドウを閉じて、いつも通りのレガシーモードに切り替えます。

　右側には下記のようなサンプルアプリが表示されています。

入力の選択肢をボタンやドロップダウンさせるメニュー

　入力の選択肢をボタンやドロップダウンにするにはアプリ開発側の画面の左側「Data」メニューから「Columnse」タブを選びます。

　表示された画面で「TYPE」で「Enum」または「EnumList」を選びます。これらの違いは、Enumが選択肢を1つのみ選ぶものに対して、EnumListは複数の選択が可能である点です。

　TYPEの選択が終わったら、NAMEのところにある「鉛筆マーク」を押します。

AppSheetの全体感を学ぶために、下記の本を一冊読んでおくと、開発がはかどります。

入力をボタンによる選択肢で表示する

　出てくるポップアップウィンドウは下記の画面です。Valueの右にある「Add」ボタンを押します。

　Addを押すたびに選択肢が増えていき、下記のように値を入れます。

　右上の「Done」ボタンを押して設定完了です。

　同様にEnumの方も設定します。

　設定が終わったら、右上の「SAVE」ボタンを押します。

単体選択と複数選択のアプリ表示テスト

　アプリを表示させると下記のようになります。

　項目を選ぶと、右側にリストが表示されるので「Edit」ボタンを押します。

　そうすると設定した項目がボタンになっており、EnumListは複数選択可能で、Enumは１つのみ選択という状態になっています。

ドロップダウンメニュー表示のテスト

　再び、アプリ開発画面に戻り、Columnsの対象項目の鉛筆アイコンを押します。

　同様にポップアップウィンドウが表示されるので、画面を下にスクロールさせます。

　画面の下にスクロールさせ、Input modeを表示します。

　Input modeでStackとDropdownを選んでみます。

　保存してアプリを実行すると下記のようになります。Stackはボタンが縦に並び、Dwopdownでは右側の▼を押すとドロップダウンで選択肢が選べるようになっています。

まとめ

　今回は、AppSheetのメニュー表示やボタンを日本語で表示する手順についての記事を書きました。ポイントをまとめると下記の通りとなります。

　つまり、AppSheetでボタンやドロップダウン表示するにはEnumでInput mode設定がおすすめです。また、単体と複数選択でEnumListとEnumを使い分けましょう！

AppSheetの全体感を学ぶために、下記の本を一冊読んでおくと、開発がはかどります。

　AppSheetに興味がある人は、下記の記事もチェックしてください。

あわせて読みたい

AppSheet⑮SyncがUnable to syncエラー対策 AppSheetでエラーを解決したい人は多いでしょう。今回は、Unable to syncエラー対策の記事を書きます。これでデータベースを復旧することができます。