App Makerでボタンウィジェットを設置してクリックで動作させる方法

buttons

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。

前回の記事はこちらです。

App Makerでテーブル行をクリックしたらフォームを表示するイベントを設定する方法
App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。今回は、App Makerでテーブル行をクリックしたらフォームを表示するイベントを設定する方法をお伝えしていきます。

テーブル行をクリックしたときのonClickイベントで動作させる方法をお伝えしました。

今回は、onClickイベントつながりで…ボタンを使います!

App Makerでボタンウィジェットを設置してクリックで動作させる方法をお伝えします。

では、行ってみましょう!

スポンサーリンク

前回までのおさらい

さて、シリーズ全体としては、以下のようなスプレッドシートをデータベースとするApp Makerのアプリケーションを作っていきたいと考えています。

スプレッドシートの従業員データ

これらのデータを取得して、App MakerのページTablePage上のテーブルウィジェットに反映するようにしているんですね。

そして、前回はそのテーブルの行をクリックすると…

App Makerでテーブル行をクリック

EditPageという別ページのフォームウィジェットが表示されるように、イベントによる動作を仕込んだのでした。

App MakerでEditPageに遷移した

ただ、TablePageからEditPageに遷移するのはいいのですが、逆にEditPageからTablePageに戻る方法がないんですね…

ということで、今回はその遷移をボタンを配置してできるようにしていこう!というものになります。

ボタンウィジェットを設置する

それでは、ボタンウィジェットを配置していきましょう。

ボタンを配置するのはEditPageなので、App MakerでEditPageを開きます。

左上の「Widgetsアイコン」をクリックして、Buttonウィジェットをフォーム上にドラッグしましょう。

App MakerでButtonウィジェットをドラッグ

ボタンにonClickイベントを設定する

ドラッグをしたら、その配置したボタンについてプロパティエディターの「Button」グループの各設定について、以下のように設定をしていきます。

  • name: ButtonBack
  • text: Back
  • onClick: Navigate to TablePage

App Makerでボタンのプロパティを設定する

これで、ボタンの表示が「BACK」になり、onClickイベントつまりクリックした際に、Table Pageに遷移するようになったはずです。

こちらもノンコーディングで設定できましたね。

ちなみに、Buttonウィジェットの場合は、ButtonグループもonClickイベントがありますし、前回のTableRowと同様にEventsグループ内にもonClickイベントがあります。

どちらを設定しても良いみたいです。

ボタンのonClickイベントの動作を確認する

では、ボタンウィジェットのonClickイベントの動作確認をしていきましょう。

EditPageをPREVIEWします。

「BACK」ボタンがありますのでクリック…!

App Makerでボタンをクリックする

すると、以下のようにTablePageに無事に遷移します。

App Makerでページを遷移した

これで、TablePageとEditPageとの行き来ができるようになりましたね。

まとめ

以上、App Makerでボタンウィジェットを設置してクリックで動作させる方法をお伝えしました。

ウィジェットの設置方法と、プロパティエディターの設定方法がわかれば問題ないですね。

次回は、ボタンクリックでJavaScriptを動作させる方法をお伝えしていきます。

App Makerでボタンクリックで独自のスクリプトを動作させる方法
App Makerでスプレッドシートをデータベースにしたアプリの作り方をお伝えしています。今回はApp Makerでクライアント側のスクリプトを作成し、ボタンクリックで動作させる方法をお伝えします。

どうぞお楽しみに!

連載目次:App Makerでスプレッドシートをデータベースとして使う

Googleが提供する社内アプリケーションを簡単に構築できるプラットフォームApp Maker。このシリーズでは、スプレッドシートをデータベースとして簡単なアプリケーションを作る方法をお伝えします。
  1. App Makerでスプレッドシートをベースにモデルを作成する方法
  2. App Makerでクエリスクリプトでスプレッドシートのデータを取得する方法
  3. App Makerでスプレッドシートからデータを取得するクエリスクリプトを丁寧に解説
  4. App Makerで新しいページとフォームウィジェットを配置する方法
  5. App Makerでテーブル行をクリックしたらフォームを表示するイベントを設定する方法
  6. App Makerでボタンウィジェットを設置してクリックで動作させる方法
  7. App Makerでボタンクリックで独自のスクリプトを動作させる方法
  8. App Makerでクライアントスクリプトからサーバースクリプトを呼び出す方法
  9. App Makerのボタンクリックでスプレッドシートにアクセスする方法
  10. App MakerでフォームウィジェットでLabelウィジェットを入力可能なウィジェットに差し替える
  11. App Makerでフォーム上のデータを取得してサーバースクリプトに渡す方法
  12. App Makerでフォームからデータベースとしてのスプレッドシートを更新する方法
  13. App Makerで確認用のポップアップダイアログを作成する方法
  14. App Makerでポップアップダイアログの表示の変更とバインディング式について
  15. App Makerでポップアップのボタンクリックによるイベントを設定する
  16. App Makerでポップアップダイアログのボタンで動作するレコード削除のスクリプト
  17. App Makerでデータ追加用のポップアップを作成してその表示の動作確認をする
  18. App Makerでデータベースにレコードを追加するスクリプトを作成する
タイトルとURLをコピーしました