しろうとNOコード

AppSheetを勉強しています!

出席確認アプリを作ろう その5

みなさん、こんにちは。

AppSheetで出席確認アプリを作ろう 5回目です。

 

今回は、出席表のActionを実際に設定していきましょう。

 

出席表のActionの設定

 

初期設定では、

"Add"(追加)、"Delete"(削除)、"Edit"(編集)

の3つのActionがシステムにより自動生成されています。

 

f:id:shiroutonocode:20220317231404p:plain

 

下部の"Rearrange action"を開くと、Actionの表示順が設定されるようですね。

 

f:id:shiroutonocode:20220317231411p:plain

 

+ボタンを押して、新しいActionを作ろうかと思ったのですが、左に二つアクションの追加が提案されています。

せっかくなので、一番右にある「"状況"の個別ボタンを作る」を選んでみましょう。

 

f:id:shiroutonocode:20220317231420p:plain

 

そして、5つのアクションが作られました!

 

f:id:shiroutonocode:20220317231503p:plain

 

なぜか自動で”早退”の設定画面が開いたので、そちらを見ていきます。

 

f:id:shiroutonocode:20220317231428p:plain

 

まず、右側のアプリプレビュー画面に、4つのアイコンが追加されているのがわかります。

〇、無断、遅刻、早退と書いてありますね。(アイコンに×が見当たらないのはなぜだろう)。

 

”早退”アイコンを押すことで、どうなるかは左側で設定されています。

① For a recode of this table: 出席表テーブルを見ているときに、

② Do this: この行(1つのデータセット)の列の値を③のように設定します。

③ Set these columns: ”状況”列の値を”早退”に設定

 

そうそう。私のイメージと合っています。

アイコンをタップして、出席、欠席などを登録したいので、方向性は良さそうです。

 

さて、上記の画面は個別データのViewだったので、設定を保存して出席表のトップ画面にもどります。

出席表のViewは"deck"表示に設定しましたね。

 

f:id:shiroutonocode:20220317231442p:plain

 

受講者名ごとにアイコンがずらっと出ました。

 

各Actionの設定

 

自動生成された5つのActionをさらに設定していきます。

 

f:id:shiroutonocode:20220317231503p:plain

 

設定を以下のように変更しました。

 

① For a recode of this table: 

 出席表テーブルを見ているときに、 → 受講者リストを見ているときに、

(受講者の管理は受講者リストで行い、受講者リストデータを使って出席表を作るという流れ)

 

② Do this:

 この行の列の値を③のように設定 → この行(受講者リスト)の値を使って別のテーブル(出席表)に新しいデータを追加

 

③ Set these columns:

 ”状況”の値を設定 → 日時、ID、名前、状況 を設定

 

f:id:shiroutonocode:20220317231547p:plain

 

出席表に使うIDと名前は、受講者リストのIDと名前を設定します。

日付は、NOW()という関数を使って、現在の日時を取得することにしました。

= の右のフラスコマークをクリックすると、式の挿入ができます。

 

f:id:shiroutonocode:20220317231519p:plain

 

簡単な説明もあって、親切ですね。

"Save"を押して、Action設定に戻ります。

 

下部で"Appearance"と"Behavior"を設定します。

 

f:id:shiroutonocode:20220317231556p:plain

出席には、にっこりボタンを選びます。

"Behavior"に、「状況が“〇”でないときのみ、アクションを使えるようにする」という設定が残ってしまっているので、これは消します。

そもそも受講者リストに状況列はないので。

 

f:id:shiroutonocode:20220317231604p:plain

 

エラーも出ていました。

「"状況"は見つからないけど、もしかして"ID"のこと?」と。

ありがとう、AppSheet。

でも、そうじゃないから消しますね。

 

f:id:shiroutonocode:20220317231613p:plain

 

これで"出席"Actionの設定ができました。

 

ここまで作って、自動生成された他のActionは削除することにしました。

”〇”のActionがうまくできれば、それをコピーして”状況”の値だけ変えるのが早いと考えたためです。

ですので、まずは、出席、〇がうまく登録できることを目指します。

 

Main View(登録View)の追加

 

ここまで設定して、UXで表示を確認しましょう。

今は出席表しかトップ画面にありません。

受講者リストはRef View表示になっています。

 

f:id:shiroutonocode:20220317231703p:plain

 

それでは、”登録”というMain Viewを作ります。

受講者リストテーブルを"deck"表示にしましょう。

 

f:id:shiroutonocode:20220317231712p:plain

 

"Position"はとりあえず"center"のままで。

 

f:id:shiroutonocode:20220317231720p:plain

 

登録ボタンもスマイルマークも出ましたね!

しかし、少しゴミゴミしているので、出席以外のActionを表示させないように登録Viewの設定を続けます。

 

f:id:shiroutonocode:20220317231733p:plain

 

Actionsに、表示させるものだけ残します。

 

f:id:shiroutonocode:20220317231742p:plain

 

すっきり。

ためしにさとうさんの出席ボタンを押してみます。

 

f:id:shiroutonocode:20220317231756p:plain

 

右上の更新マークに 1 の数字が出ました。

 

f:id:shiroutonocode:20220317231817p:plain

 

しかし、値がおかしいよとエラーが出てしまいました・・・。

うーん。"Enum"がだめなら、状況を"text"に変えてみましょうか。

 

f:id:shiroutonocode:20220317231848p:plain

 

もう一度ぽちり。

さてさて。

 

f:id:shiroutonocode:20220317231901p:plain

 

無事登録できました!

しかし、他の行とくらべてなんだか〇が小さいですね。

なるほど。〇と○で区別されてしまって、Enumの選択肢にありませんよ!と言われちゃったんですね。

 

このあと、出席表の 状況 のデータ形式を”Enum”にもどし、出席Actionの設定値”〇”を書き直してみたところ、

 

f:id:shiroutonocode:20220317231910p:plain

 

うまく登録できるようになりました!

 

次の課題

 

しかし、まだ改善しなければならない問題があります。

SpreadSheetを見れば、新しいデータが登録されたことはわかります。

アプリの”出席表”を開ければ、登録データは見られます。

でも、登録画面に変化がないので、誰が登録済なのか、登録画面からはわからないんですよね。

 

f:id:shiroutonocode:20220317231756p:plain

 

さとうさんもすずきさんも登録後も残ったまま。

 

いちいち出席表を確認するのは面倒なので、出席確認が終わったかどうかが登録画面上で一目でわかるようにしたいですね。

 

次回は、この点を考えていこうと思います。

 

ご覧いただきありがとうございました。