タスク管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第5回）は、Format Rulesで文字の書式を設定しました。
今回は、Actionを設定することで、ボタンクリックで列の値を更新できるようにします。
Actionはアプリの使い勝手を向上させたり、Automationと連携して自動化する際にも活用できる機能です。
【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて（汗）、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。
目次
1. AppSheetで列の値を更新する
AppSheetでは、Form画面で列の値を更新します。
レコードを選択 → 「Edit」ボタンをクリック → 値を変更して「Save」をクリックして保存
するという手順になります。
例として、タスク管理のステータスが「作業中」のレコードをひとつ更新してみましょう。
AppSheetのプレビューで、レコードをクリックして詳細画面を開きます。
「Edit」ボタンをクリックして、Form画面を開きます。
Form画面が開きます。
「カンバン」と「進捗」は Input mode を「Buttons」に設定していますので、ボタン表示されます。
ボタンをクリックして変更後、「Save」で保存します。
このようにForm画面で列の値を更新するには少々手間がかかります。
もっと簡単に更新するために、Actionという機能を活用しましょう。
2. Actionでカンバンを「未着手」に更新する
Actionを作成してみましょう。
まずは、「カンバン」のステータス（未着手、作業中、完了）を更新するボタンを作成します。
AppSheetエディタの左側メニュー「Behavior」→ タブメニュー「Actions」をクリックします。
「New Action」をクリックして新しいアクションを作成します。
まずは、タスクのステータスを「未着手」に更新するアクションを作成します。
はじめの3項目は以下のようにしました。
- Action name：「未着手」
- For a record of this table：「タスク」
- Do this：「Data: set the values of some columns in this row」
どのようなアクションを実行するのかを「Do this」の項目で設定します。
ここでは、「カンバン」列の値を更新するため、「Data: set the values of some columns in this row」にします。
直訳すると「この行（レコード）について、いずれかの列に値をセットする」という意味です。列の値を更新することができます。
続いて、「Set these columns」の項目を設定します。
「Add」をクリックして更新したい列を設定します。ここでは「カンバン」を選択します。
次に、更新したい値を設定します。
三角フラスコアイコンをクリックしましょう。
Expression Assistant が開きます。
以下のように「未着手」と入力して、「Save」をクリックします。
Actionを設定するとボタンが表示されます。
Behavior → Only if this condition is true の項目で「どのような条件の時にボタンを表示するのか」を設定することができます。
三角フラスコアイコンをクリックしましょう。
Expression Assistant が開きます。
「カンバン」が「未着手」の時にボタンを表示する意味はないので、以下のように設定します。
最後に、ボタンに表示するアイコンを設定します。
- Action icon：「arrow-alt-from-left」
右上の「Save」をクリックして保存することを忘れずに。
もう一度、「未着手」アクションの設定パネルを確認してみましょう。
AppSheetのプレビューで確認してみましょう。
タスク管理の「カンバン」メニューで「作業中」または「完了」のレコードをクリックしてみてください。
「未着手」のアクションボタンが表示されているでしょうか。
3. Actionでカンバンを「作業中」に更新する
続けて、タスクのステータスを「作業中」に更新するアクションを作成します。
「未着手」アクションをコピーすれば簡単に作れます。
「作業中」アクションは以下のように設定しました。
「Set this columns」 と 「Only if this condition is true」は式を設定します。
| 設定項目 | 値 |
|---|---|
| Action name | 「作業中」 |
| For a record of this table | 「タスク」 |
| Do this | 「Data: set the values of some columns in this row」 |
| Set thise columns | 「Add」→ 「カンバン」「作業中」 |
| Appearance | |
| Action icon | 「progress」 |
| Behavior | |
| Only if this condition is true | 「[カンバン] <> "作業中"」 |
「作業中」アクションが設定できました。AppSheetのプレビュー画面で確認してみましょう。
「カンバン」メニューで「未着手」または「完了」のレコードをクリックしてみてください。
「作業中」のアクションボタンが表示されているでしょうか。
4. Actionでカンバンを「完了」に更新する
最後に、タスクのステータスを「完了」に更新するアクションを作成します。
「作業中」アクションをコピーして、以下のように設定しましょう。
「Set this columns」 と 「Only if this condition is true」には式を設定します。
「完了日」列には「TODAY()」というAppSheet関数を設定して、値を今日の日付に更新するようにしました。
| 設定項目 | 値 |
|---|---|
| Action name | 「完了」 |
| For a record of this table | 「タスク」 |
| Do this | 「Data: set the values of some columns in this row」 |
| Set thise columns | 「Add」→ 「カンバン」「完了」 「Add」→ 「完了日」「TODAY()」 |
| Appearance | |
| Action icon | 「arrow-alt-from-right」 |
| Behavior | |
| Only if this condition is true | 「[カンバン] <> "完了"」 |
以上で「カンバン」の Actionが完成しました。
Action ボタンをクリックして、カンバンボードの表示が変わるかを確認してください。
5. Actionで進捗を更新する
続けて「進捗」列のステータス（Empty、Quarter、Half、Three Quarter、Full）を更新するボタンを作成します。
列の値を更新する Actionなので、「カンバン」と同じ手順で作ることができます。
「カンバン」のActionをコピーして、まずは「Empty」の Actionを作りましょう。
あとは、コピーして設定項目の値を変更するだけで量産できます。
進捗「Empty」の Action
| 設定項目 | 値 |
|---|---|
| Action name | 「0％」 |
| For a record of this table | 「タスク」 |
| Do this | 「Data: set the values of some columns in this row」 |
| Set thise columns | 「Add」→ 「進捗」「Empty」 |
| Appearance | |
| Action icon | 「times-circle」 |
| Behavior | |
| Only if this condition is true | 「[進捗] <> "Empty"」 |
「進捗」列は Progressという列タイプを設定しています。
AppSheetでは、Progressタイプの列をハーベイボール形式で表示できますが、値については「Empty」「Quarter」のようにしなければならない決まりになっています。
日本語としては分かりにくいので、ここでは Action name を「Empty」ではなく「0％」にしました。
「Quarter」以降の Action name は「25％」「50％」「75％」「100％」に設定します。
進捗「Quarter」の Action
| 設定項目 | 値 |
|---|---|
| Action name | 「25％」 |
| For a record of this table | 「タスク」 |
| Do this | 「Data: set the values of some columns in this row」 |
| Set thise columns | 「Add」→ 「進捗」「Quarter」 |
| Appearance | |
| Action icon | 「arrow-alt-circle-right」 |
| Behavior | |
| Only if this condition is true | 「[進捗] <> "Quarter"」 |
進捗「Half」の Action
| 設定項目 | 値 |
|---|---|
| Action name | 「50％」 |
| For a record of this table | 「タスク」 |
| Do this | 「Data: set the values of some columns in this row」 |
| Set thise columns | 「Add」→ 「進捗」「Half」 |
| Appearance | |
| Action icon | 「arrow-alt-circle-down」 |
| Behavior | |
| Only if this condition is true | 「[進捗] <> "Half"」 |
進捗「Three Quarter」の Action
| 設定項目 | 値 |
|---|---|
| Action name | 「75％」 |
| For a record of this table | 「タスク」 |
| Do this | 「Data: set the values of some columns in this row」 |
| Set thise columns | 「Add」→ 「進捗」「Three Quarter」 |
| Appearance | |
| Action icon | 「arrow-alt-circle-left」 |
| Behavior | |
| Only if this condition is true | 「[進捗] <> "Three Quarter"」 |
進捗「Full」の Action
| 設定項目 | 値 |
|---|---|
| Action name | 「100％」 |
| For a record of this table | 「タスク」 |
| Do this | 「Data: set the values of some columns in this row」 |
| Set thise columns | 「Add」→ 「進捗」「Full」 |
| Appearance | |
| Action icon | 「check-circle」 |
| Behavior | |
| Only if this condition is true | 「[進捗] <> "Full"」 |
以上でActionの設定は完了です。
AppSheetのプレビュー画面でタスクを表示してみましょう。
Actionボタンが表示されているでしょうか？
「進捗（0％〜100％）」ボタンをクリックすると、ハーベイボールの表示が変わりますので試してみましょう。
以上、Actionを使ってボタンクリックで列の値を更新するアクションを作成しました。
今回は列の値を更新するだけでしたが、AppSheet Automationなどの自動化機能においても活用する画面が多くあります。
次回（第7回）は、タスク管理アプリを使って、Googleドライブにファイルをアップロードしてみます。
第2回で設定したテーブル間のリレーションシップについて確認してみます。
