新規作成
Power Appsのサイト(https://make.powerapps.com/)に行きます。「作成」、「空のアプリ」をクリックします。
![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/73b618386e0f2bc0e8fe5faf13e19c70.png)
![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/5dd878ce5c9540550d4d1835deb58352.png)
![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/bb522524b35633ffd5d337486c8ea28d.png)
Trelloと接続する
DBアイコンをクリックし、「データの追加」ボタンをクリックします。![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/1bc14157e746d6088a0f728ee6734cda.png)
![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/1af514f64696cd3a51d090f5165d4bfe.png)
![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/c75f90554b895370091b6a0872c77135.png)
ボード一覧画面を作成する
「挿入」「ギャラリー」「縦方向(空)」をクリックし、空のリストビューを作成します。![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/37c17153bd9eae2554e6696750809303.png)
![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/d5c5ec96d4de43491596dc34e493d14c.png)
![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/692a2d5cc0f1e69a9e54398231b61d9a.png)
![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/e1f702b98f8b9f6b55be83475f71780f.png)
テキストラベルにTrelloのデータを表示する
Gallery1を選択し、右のペインから「詳細設定」を開き、 データのItemsにTrello.ListBoardsSimple()
と入力します。
![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/3a03c961e025d98aef8fca8ad36a7a07.png)
ThisItem.name
と入力します。ギャラリーの子要素ではThisItem. に続いてAPI取得値の名前を書くことで値が参照できます。
たとえばボードが持つパラメータ名のすべてを知るには https://docs.microsoft.com/ja-jp/Connectors/trello/#ボード を確認しましょう。 もう一つテキストラベルを追加し、ボードIDも表示するようにしましょう。
Textに
ThisItem.id
と入力することで表示されます。
ここまでできたらTrelloのボード名一覧が表示できるようになったと思います。ギャラリーやラベルのサイズを調整しておきましょう。
この画面にはBoardsと名付けることにします。
また、ツリービューの名称も分かりやすいようリネームしておきます。
![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/f99da2cb397d935c3e4e7b8acb17f7c1.png)
カード一覧画面を作成する
「新しい画面」から「空」を選び、同様の手順でカード一覧画面を作成します。![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/18a4cab6342b0d95836a867c7256cfc5.png)
Trello.ListCardsSimple("xxxxxxx")
というように実在するボードIDを埋め込んでおきます。これは次の手順で改善していきますが、まずはレイアウト作業のためにここでは直接値を書きます。
クリックイベントを設定し、画面遷移を作る
ボード一覧画面に戻ります。 ギャラリーを選択し、「詳細設定」「アクション」「OnSelect」にクリック時の挙動を記述することができます。今回はページ遷移させたいためNavigate()を以下のように書きます。
1 |
Navigate(Cards,ScreenTransition.Cover,{'board_id': ThisItem.id}) |
- 第一引数:Cards画面に遷移を行う
- 第二引数:遷移時にCoverというアニメーションを行う
- 第三引数:遷移先の画面で ThisItem.id を board_id という名前で参照できるようにする
Cards
は変数扱いのためダブルクォートを付与するとエラーになりますので注意してください。
次にカード一覧画面を開き、ギャラリーの詳細設定のItemsを以下のように修正します。
1 |
Trello.ListCardsSimple(board_id) |
動作確認
ここまで作ったら一度動作確認をしてみましょう。ボード一覧画面を開き、右上の再生ボタンをクリックします。
![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/27ef677fa8a634006dd1c7636a7218c7.png)
もし動作しない場合は手順を確認してみてください。 ここで、一度カード一覧に行ってしまうとボード一覧に戻れないことに気づいたと思います。
最後に戻る機能を追加します。
戻るボタンを作る
カード一覧画面を開きます。「挿入」「ボタン」から新規ボタンを作成します。
OnSelectにBack()と設定し、Textには戻ると記載しておきましょう。
![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/cf0577eaf581430882a04d10d9e1c163.png)
もう一度ボードリストから再生をクリックしてみてください。
今度は戻るボタンから戻れるようになりましたね。
![](https://techblog.gmo-ap.jp/wp-content/uploads/2022/04/1d73c534bc9d892f2187b308d6a58b1d.png)