社内タスク管理システムがRedmineからTrelloに変更になったけどやっぱりRedmineが恋しくなったのでPower Appsでそれっぽいビューを作る

こんにちは。GMOインサイトのカネテックです。 タイトルのとおりですが、Trelloを使っているとたまにRedmineのようなリストビューが恋しくなるんですよね。最近Trelloにもワークスペースビューというリスト表示を行う機能が追加されましたが、まだ機能的には最低限です。この先欲しい機能が実装されるかもわかりません。ならば自分用のビューをMicrosoft Power Appsで作ってしまおう、というのが本記事の趣旨です。

新規作成

Power Appsのサイト（https://make.powerapps.com/）に行きます。
「作成」、「空のアプリ」をクリックします。

「空のキャンバスアプリ」の「作成」をクリックします。

名前を決めて「作成」をクリックします。

Trelloと接続する

DBアイコンをクリックし、「データの追加」ボタンをクリックします。

検索窓に「Trello」と入力するとTrelloが出てくるので、これをクリックします。

「接続」をクリックするとOAuth認証が出るので内容を確認して許可しましょう。

接続を完了したら、改めて「データの追加」から「Trello」を選択し、今接続したTrelloを選択します。

ボード一覧画面を作成する

「挿入」「ギャラリー」「縦方向（空）」をクリックし、空のリストビューを作成します。

「データソースの選択」から「Trello」をクリックします。

「挿入ペインで項目を追加する」をクリックします。

左の挿入ペインから「テキスト ラベル」を選択します。テキストラベルが挿入されますが、このときツリービューでLabel1がGallery1の子になっていることを確認してください。

Gallery1と並列に置かれている場合は挿入時に選択されているオブジェクトが正しくありません。

テキストラベルにTrelloのデータを表示する

Gallery1を選択し、右のペインから「詳細設定」を開き、 データのItemsに Trello.ListBoardsSimple()  と入力します。

ギャラリーのItemsにTrelloのAPIを記載することで、子要素がAPI応答の各パラメータに接続できるようになります。呼び出すことができるAPIの一覧はこちら（https://docs.microsoft.com/ja-jp/Connectors/trello/）です。 次にLabel1の詳細設定を開き、Textに ThisItem.name と入力します。
ギャラリーの子要素ではThisItem. に続いてAPI取得値の名前を書くことで値が参照できます。
たとえばボードが持つパラメータ名のすべてを知るには https://docs.microsoft.com/ja-jp/Connectors/trello/#ボード を確認しましょう。 もう一つテキストラベルを追加し、ボードIDも表示するようにしましょう。
TextにThisItem.idと入力することで表示されます。 ここまでできたらTrelloのボード名一覧が表示できるようになったと思います。
ギャラリーやラベルのサイズを調整しておきましょう。
この画面にはBoardsと名付けることにします。
また、ツリービューの名称も分かりやすいようリネームしておきます。

カード一覧画面を作成する

「新しい画面」から「空」を選び、同様の手順でカード一覧画面を作成します。

この画面はCardsという名前にしましょう。 手順は同じなので割愛しますが、ギャラリーのItemsには Trello.ListCardsSimple("xxxxxxx") というように実在するボードIDを埋め込んでおきます。
これは次の手順で改善していきますが、まずはレイアウト作業のためにここでは直接値を書きます。

クリックイベントを設定し、画面遷移を作る

ボード一覧画面に戻ります。 ギャラリーを選択し、「詳細設定」「アクション」「OnSelect」にクリック時の挙動を記述することができます。
今回はページ遷移させたいためNavigate()を以下のように書きます。 この１行は、クリック時に

• 第一引数：Cards画面に遷移を行う
• 第二引数：遷移時にCoverというアニメーションを行う
• 第三引数：遷移先の画面で ThisItem.id を board_id という名前で参照できるようにする

という意味になります。
Cardsは変数扱いのためダブルクォートを付与するとエラーになりますので注意してください。 次にカード一覧画面を開き、ギャラリーの詳細設定のItemsを以下のように修正します。

動作確認

ここまで作ったら一度動作確認をしてみましょう。
ボード一覧画面を開き、右上の再生ボタンをクリックします。

ボード名をクリックしたらカード一覧が表示されたら正解です。
もし動作しない場合は手順を確認してみてください。 ここで、一度カード一覧に行ってしまうとボード一覧に戻れないことに気づいたと思います。
最後に戻る機能を追加します。

戻るボタンを作る

カード一覧画面を開きます。
「挿入」「ボタン」から新規ボタンを作成します。
OnSelectにBack()と設定し、Textには戻ると記載しておきましょう。

これで完成です。
もう一度ボードリストから再生をクリックしてみてください。
今度は戻るボタンから戻れるようになりましたね。

おわりに

ビューとしてはこれから作り込んでいくところですが、ここまで作れればあとは自由にカスタマイズできると思いますので、皆さんが自由に「俺的最強ビュー」を作れると思います。 ノーコード、ローコード開発環境であるPower Appsを使いこなして、業務を爆速でカスタマイズしていきましょう！