· 

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

Actionで列の値を更新する

 

このブログではタスク管理アプリを通じてAppSheetの使い方を学びます。

 

前回(第5回)は、Format Rules を設定して「期日まであと何日か」により書式を変更できるようにしました。

今回は、Action を設定することで「カンバン」と「進捗」をボタンクリックで変更できるようにします。

1. Form からタスクを更新する

 

AppSheet アプリで列の値を更新するためには、

レコードを選択 → 「Edit」ボタンをクリック → 値を変更して「Save」をクリックして保存

するという手順になります。 

 

例として、「作業中」のレコードをひとつ更新してみましょう。

レコードをクリックして詳細画面を開きます。

 

「作業中」のレコードをひとつ選択する。

 

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

 

「Edit」ボタンをクリックする。

 

 Form 画面が開きます。

「カンバン」と「進捗」は Input mode を「Buttons」に設定していますので、ボタン表示されます。

ボタンをクリックして変更後、「Save」で保存します。

 

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

 

以上のように、通常の方法で列の値を更新するには少々手間がかかります。

もっと簡単に更新するために、Action という機能を活用しましょう。

 

2. Action でカンバンを更新する

 

Action を作成してみましょう。

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

 

左側メニュー「Behavior」→ タブメニュー「Actions」をクリックします。

「New Action」をクリックして新しいアクションを作成します。

 

新しい 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: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 を設定する。

 

Expression Assistant が開きます。

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

 

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

 

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

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

右上の「Save」をクリックして保存することを忘れずに。

もう一度、「未着手」アクションの設定パネルを確認してみましょう。

 

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

 

プレビューで確認してみましょう。

「カンバン」メニューで「作業中」または「完了」のレコードをクリックしてみてください。

「未着手」のアクションボタンが表示されているでしょうか。

 

プレビュー画面で確認する。

「作業中」に更新する

 

続けて「作業中」に更新するアクションを作成します。

「未着手」アクションをコピーすれば簡単に作れます。

 

「未着手」アクションをコピーする。

 

「作業中」アクションは以下のように設定しました。

「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 「[カンバン] <> "作業中"」

 

「作業中」アクションが設定できました。プレビュー画面で確認してみましょう。

「カンバン」メニューで「未着手」または「完了」のレコードをクリックしてみてください。

「作業中」のアクションボタンが表示されているでしょうか。

 

「完了」に更新する

 

最後に「完了」に更新するアクションを作成します。

「作業中」アクションをコピーして、以下のように設定しましょう。

 

「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」→ 「カンバン」「完了」

「Add」→ 「完了日」「TODAY()」

Appearance
Action icon 「arrow-alt-from-right」
Behavior
Only if this condition is true 「[カンバン] <> "完了"」

 

以上で「カンバン」の Action が完成しました。

Action ボタンをクリックして、カンバンボードの表示が変わるかを確認してください。

 

3. 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 「times-circle ( Regular )」
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 「times-circle ( Regular )」
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 「times-circle ( Regular )」
Behavior
Only if this condition is true 「[進捗] <> "Full"」

 

以上で Action の設定は完了です。

プレビュー画面でタスクを表示してみましょう。

Action ボタンが表示されているでしょうか?

「進捗」ボタンをクリックすると、ハーベイボールの表示が変わりますので試してみましょう。

 

プレビューで Action ボタンを確認する。

 

以上、Action を使ってボタンクリックで列の値を更新するアクションを作成しました。

 

今回は列の値を更新するだけでしたが、AppSheet Automationなどの自動化機能においても活用する画面が多くあります。

 

次回(第7回)は、タスク管理アプリを使って、Googleドライブにファイルをアップロードしてみます。

第2回で設定したテーブル間のリレーションシップについて確認してみます。

 

アプリを作る前に実際に試してみたい方は、アプリスイートが作ったサンプルアプリを7日間無料体験ができます。

こちらからお問い合わせください。