タスク管理アプリを作りながら、AppSheetの使い方を学びましょう。
前回(第6回)は、Format Rulesで文字の書式を設定しました。
今回は、アクション(Action)を設定することで、ボタンクリックで列の値を更新できるようにします。
アクションはアプリの使い勝手を向上させたり、Automationと連携して自動化する際にも活用できる機能です。
1. AppSheetで列の値を更新する
AppSheetでは通常、フォーム(Form)画面で列の値を更新します。
- 更新したいレコードを選択する
- 「Edit」ボタンをクリックしてフォーム画面を開く
- 値を変更後、「Save」をクリックして保存する
という手順になります。
例として、タスクのステータスを更新してみましょう。
アプリエディタ右側のプレビュー画面で、タブメニュー「タスク」を選択します。
ステータスを変更するタスクを1つクリックして、詳細画面を開きます。
「Edit」ボタンをクリックします。
フォーム画面が開きます。
「ステータス」を変更して「Save」で保存します。
以上が通常の更新手順ですが、もっと簡単にできるようにアクション(Action)を活用しましょう。
2. アクションでステータスを「作業中」に更新する
アクションを作成してみましょう。
はじめに、「ステータス」列の値を「着手前」から「作業中」へ更新するアクションを作成します。
アプリエディタ左側メニュー「Actions」をクリックします。
Actionsナビゲーション内の「タスク」にカーソルを合わせると、右側に「+」ボタン(Add Action)が表示されるのでクリックします。
「Create a new action for タスク」ボタンをクリックします。
メインパネルに新規アクションの設定パネルが表示されるので、以下のように設定します。
- Action name:作業中へ
- For a record of this table:タスク
- Do this:Data: set the values of some columns in this row
- Set these columns:ステータス = 作業中
Do this と Set these columns について補足解説します。
「どのようなアクションを実行するのか」は Do this で設定します。
ここでは、「ステータス」列の値を更新するため、「Data: set the values of some columns in this row」にします(デフォルトで選択されています)。
直訳すると「この行(レコード)について、いずれかの列に値をセットする」という意味なので、列の値を更新することができます。
更新したい列と値は、Set these columns で設定します。
「Add」をクリックして更新したい列を追加しますが、デフォルトで1つ追加されているはずです。
更新したい列を「ID」から「ステータス」に変更します。
次に、更新したい値は「=」の入力フィールドをクリックします。
Expression Assistant が開きます。
以下のように「作業中」と入力して、「Save」をクリックします。
このように設定します。
アクションを設定するとボタンが表示されます。
Displayタブを開いて、Action iconでアイコンを変更してみましょう。
オススメは「arrow」(矢印)を入力して、左から右へ向かうアイコンが分かりやすくてよいでしょう。
「作業中へ」ボタンは、「着手前」ステータスのタスクを開いたときのみ表示します。
しかし、デフォルトではすべてのステータス(着手前、作業中、完了)で表示されるため、設定を変更します。
Behaviorタブを開いて、 Only if this condition is true のフィールドをクリックします。
この項目で「どのような条件の時にボタンを表示するのか」を設定することができます。
Expression Assistant が開くので、以下の式をコピペします。
1 |
[ステータス] = "着手前" |
「着手前」ステータスのタスクの時だけアクションボタンが表示されるという意味になります。
「true」を削除して、Expression Assistant に以下のように入力して「Save」します。
画面右上の「SAVE」をクリックして設定を保存してください。
アプリエディタ右側のプレビューで確認してみましょう。
「作業中」と「完了」ステータスで「作業中へ」ボタンが表示されなければ成功です。
3. アクションでステータスを「完了」に更新する
続いて、「ステータス」列の値を「作業中」から「完了」へ更新するアクションを作成します。
今作成した「作業中へ」アクションを複製しましょう。
メインパネル右上の3点ドットアイコン(More)をクリックして、「Duplicate」をクリックします。
「作業中へ」アクションを以下のように変更します。
- Action name:完了へ
- For a record of this table:タスク
- Do this:Data: set the values of some columns in this row
- Set these columns:ステータス = 完了
「完了へ」ボタンは、「作業中」ステータスのタスクを開いたときに表示したいので、Only if this condition is true の条件式を変更します。
Only if this condition is true の入力フィールドをクリックします。
Expression Assistant が開くので、以下の式をコピペします。
1 |
[ステータス] = "作業中" |
「作業中」ステータスのタスクの時だけ、「完了へ」アクションボタンが表示されるという意味になります。
Expression Assistantで式を変更して「Save」します。
画面右上の「SAVE」をクリックして設定を保存してください。
アプリエディタ右側のプレビューで確認してみましょう。
「着手前」と「完了」ステータスで「完了へ」ボタンが表示されなければ成功です。
4. アクションボタンでステータスを変更する
アクションボタンでステータスを変更してみましょう。
アプリエディタ右側のプレビュー画面をタブレットモードにします。
タブメニュー「カンバン」を選択して、「着手前」ステータスのタスクをひとつクリックして開きます。
「作業中へ」ボタンをクリックします。
「ステータス」が「作業中」に更新されました。
同時に、アクションボタンが「完了へ」に変わります。
「カンバン」に戻りましょう。
「着手前」ステータスだったタスクが「作業中」へ移動していることが分かります。
移動したタスクをクリックして開きます。
「完了へ」ボタンをクリックします。
「ステータス」が「完了」に更新されました。
同時に、「完了日」に今日の日付が入力されます。
「カンバン」に戻りましょう。
「作業中」ステータスだったタスクが「完了」へ移動していることが分かります。
既に気づいたかもしれませんが、deckビューではアクションボタンが表示されます。
なので、カンバンボード上で直接ステータス変更ができます。
「着手前」ステータスのタスクには「作業中へ」ボタンが表示されるので、クリックしてみます。
「着手前」だったタスクが「作業中」へ移動します。
「完了へ」ボタンが表示されるので、クリックしてみます。
「作業中」だったタスクが「完了」へ移動します。
タスクを開くことなく、カンバンボード上でステータス変更ができるようになりました。
以上、ボタンクリックで列の値を更新するアクションを作成しました。
今回は列の値を更新するだけでしたが、Automationなどの自動化機能においても活用する画面が多くあります。
以上で、タスク管理アプリは完成です。お疲れ様でした!
タスク管理アプリは、AppSheetの基本的な操作を一通り学ぶことができます。
スライス、Format Rules、アクションはAppSheetアプリ作成の必須テクニックなので、この機会に身につけておきましょう。