AppSheetでタスク管理アプリ(第6回)Actionで列の値を更新する

folder_openAppSheet

タスク管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回(第5回)は、Format Rulesで文字の書式を設定しました。
今回は、Actionを設定することで、ボタンクリックで列の値を更新できるようにします。
Actionはアプリの使い勝手を向上させたり、Automationと連携して自動化する際にも活用できる機能です。

【お知らせ】
2022年10月以降、AppSheetエディタの画面が新しく変更されています。
AppSheetのアップデートが速すぎて(汗)、このブログ記事はまだ新エディタの画面には対応していません。
エディタ画面右上にある「Switch to the legacy editor」というアイコンをクリックすると、新エディタと旧エディタの切り替えができます。
記事のアップデートができるまでは、とりあえず、旧エディタに切り替えて解説を読んでください。

Switch to the legacy editor」で旧エディタに切り替える。

1. AppSheetで列の値を更新する

AppSheetでは、Form画面で列の値を更新します。
レコードを選択 → 「Edit」ボタンをクリック → 値を変更して「Save」をクリックして保存
するという手順になります。

例として、タスク管理のステータスが「作業中」のレコードをひとつ更新してみましょう。
AppSheetのプレビューで、レコードをクリックして詳細画面を開きます。

AppSheetアプリで「作業中」のレコードをひとつ選択する。

「Edit」ボタンをクリックして、Form画面を開きます。

AppSheetエディタ画面のプレビューで「Edit」ボタンをクリックする。

Form画面が開きます。
「カンバン」と「進捗」は Input mode を「Buttons」に設定していますので、ボタン表示されます。
ボタンをクリックして変更後、「Save」で保存します。

「カンバン」と「進捗」ボタンを選択して「Save」で保存する。

このようにForm画面で列の値を更新するには少々手間がかかります。
もっと簡単に更新するために、Actionという機能を活用しましょう。

2. Actionでカンバンを「未着手」に更新する

Actionを作成してみましょう。
まずは、「カンバン」のステータス(未着手、作業中、完了)を更新するボタンを作成します。

AppSheetエディタの左側メニュー「Behavior」→ タブメニュー「Actions」をクリックします。
「New Action」をクリックして新しいアクションを作成します。

AppSheetで新しい Action を作成する。

まずは、タスクのステータスを「未着手」に更新するアクションを作成します。
はじめの3項目は以下のようにしました。

  • Action name:「未着手」
  • For a record of this table:「タスク」
  • Do this:「Data: set the values of some columns in this row」

AppSheet、Behaviorで「未着手」のアクションを設定する。

どのようなアクションを実行するのかを「Do this」の項目で設定します。
ここでは、「カンバン」列の値を更新するため、「Data: set the values of some columns in this row」にします。
直訳すると「この行(レコード)について、いずれかの列に値をセットする」という意味です。列の値を更新することができます。

続いて、「Set these columns」の項目を設定します。
「Add」をクリックして更新したい列を設定します。ここでは「カンバン」を選択します。
次に、更新したい値を設定します。
三角フラスコアイコンをクリックしましょう。

更新したい値を設定する。

Expression Assistant が開きます。
以下のように「未着手」と入力して、「Save」をクリックします。

Expression Assistant に「未着手」を入力する。

Actionを設定するとボタンが表示されます。
Behavior → Only if this condition is true の項目で「どのような条件の時にボタンを表示するのか」を設定することができます。
三角フラスコアイコンをクリックしましょう。

Only if this condition is true を設定してAppSheetアプリ内での表示を制御する。

Expression Assistant が開きます。
「カンバン」が「未着手」の時にボタンを表示する意味はないので、以下のように設定します。

カンバンが「未着手」でないときにボタンを表示する。

最後に、ボタンに表示するアイコンを設定します。

  • Action icon:「arrow-alt-from-left」

右上の「Save」をクリックして保存することを忘れずに。
もう一度、「未着手」アクションの設定パネルを確認してみましょう。

「未着手」アクションの設定を確認する。

AppSheetのプレビューで確認してみましょう。
タスク管理の「カンバン」メニューで「作業中」または「完了」のレコードをクリックしてみてください。
「未着手」のアクションボタンが表示されているでしょうか。

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%)」ボタンをクリックすると、ハーベイボールの表示が変わりますので試してみましょう。

AppSheetエディタのプレビューで Action ボタンを確認する。

以上、Actionを使ってボタンクリックで列の値を更新するアクションを作成しました。
今回は列の値を更新するだけでしたが、AppSheet Automationなどの自動化機能においても活用する画面が多くあります。

次回(第7回)は、タスク管理アプリを使って、Googleドライブにファイルをアップロードしてみます。
第2回で設定したテーブル間のリレーションシップについて確認してみます。

Share Me!

前の投稿
AppSheetでタスク管理アプリ(第5回)Format Rulesで文字色を変える
次の投稿
AppSheetでタスク管理アプリ(第7回)Googleドライブにアップロード

関連記事

メニュー