Google App Maker ー デフォルトアクションの一覧

App Maker にはデフォルトで用意されているアクションが結構たくさんある。
ボタンのクリックアクションに設定することも出来るし、画面が描画されたときなどにも設定できる。

これらのアクションはコードを直接書くことでも実現できるが、可能な限りコードは書かずにデフォルトアクションを駆使してアプリをサクサク作っていくと良い。
本記事では デフォルトアクションの概要を記載する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/35595/d5cac5ad-f8fe-196e-9e90-c3e1719c3a41.png)

- [Custom Action](#custom-action)
- [None](#none)
- [Navigate to Page...](#natigato-to-page)
- [Reload Datasource](#reload-datasource)
- [Create New Item](#create-new-item)
- [Delete Current Item](#delete-current-item)
- [Open Dialog...](#open-dialog)
- [Close Dialog](#close-dialog)
- [Show Popup...](#show-popup)
- [Hide Popup...](#hide-popup)
- [Save Changes To Datasource](#save-changes-to-datasource)
- [Clear Changes To Datasource](#clear-changes-to-datasource)
- [Load Next Page](#load-next-page)
- [Load Previous Page](#load-previous-page)
- [Select Next Record](#select-next-record)
- [Select Previous Record](#select-previous-record)

## Custom Action
コードを直接記述する。
他のデフォルトアクションを選んでから `Custom Action` を選ぶと、対応するコードが出てくるので「このデフォルトアクションってコードでどうやって書くんだっけ？」みたいなときによくやる。

次の画像は `Open Dialog...` に対応するコード
![image.png](https://qiita-image-store.s3.amazonaws.com/0/35595/7c2485f6-242b-cecc-53bf-741c5a814ffe.png)


## None
未設定をあらわす。


## Natigato To Page...
ページ遷移するアクション。

```js:コードで書くと
app.showPage(app.pages.PageB);
```


## Reload Datasource
データソースを更新して画面に反映する。

データソース設定で `Automatically load data` を `false` にしている場合や再取得を行いたいときに使う。

```js:コードで書くと
widget.datasource.load();
```


## Create New Item
データソースにアイテムを追加する。

```js:コードで書くと
widget.datasource.createItem();
```


## Delete Current Item
データソースで選択しているアイテムを削除する。

```js:コードで書くと
widget.datasource.deleteItem();
```


## Open Dialog...
ページをダイアログとして開く。

```js:コードで書くと
app.showDialog(app.pages.PageB);
```


## Close Dialog
ダイアログを閉じる。

```js:コードで書くと
app.closeDialog();
```


## Show Popup...
ポップアップを開く。
※ポップアップは最近追加された機能
[Release Notes  |  Popup dialogs, new model events, and API updates](https://developers.google.com/appmaker/release-notes#popup_dialogs_new_model_events_and_api_updates)

```js:コードで書くと
app.popups.PopupA.visible = true;
```


## Hide Popup
ポップアップを閉じる。
ダイアログと違ってポップアップは複数表示可能なのでポップアップ名も指定しているのがポイント。

```js:コードで書くと
app.popups.PopupA.visible = false;
```


## Save Changes To Datasource
画面で変更した内容をデータソースに反映。
データソース設定で `Manual save mode` を `true` にしているときに使う。

```js:コードで書くと
widget.datasource.saveChanges();
```


## Clear Changes To Datasource
画面で変更した内容を元に戻す。
データソース設定で `Manual save mode` を `true` にしているときに使う。

```js:コードで書くと
widget.datasource.clearChanges();
```


## Load Next Page
データソースを一覧表示したときに次のページに遷移するときに使う。
※正確には次のページの一件目のアイテムをデータソースの選択済みアイテムにしている。
1ページあたりに表示する件数は `Query page size` で指定する。

```js:コードで書くと
widget.datasource.nextPage();
```


## Load Previous Page
データソースを一覧表示したときに前のページに遷移するときに使う。
※正確には前のページの一件目のアイテムをデータソースの選択済みアイテムにしている。
1ページあたりに表示する件数は `Query page size` で指定する。

```js:コードで書くと
widget.datasource.prevPage();
```


## Select Next Record
データソースを一覧表示したときに次のアイテムに遷移するときに使う。
※正確には次のアイテムをデータソースの選択済みアイテムにしている。
ページをまたぐことも出来る。

```js:コードで書くと
widget.datasource.nextItem();
```


## Select Previous Record
データソースを一覧表示したときに前のアイテムに遷移するときに使う。
※正確には次のアイテムをデータソースの選択済みアイテムにしている。
ページをまたぐことも出来る。

```js:コードで書くと
widget.datasource.prevItem();
```