Part3：Power Apps導入編

それでは、前回作成したカスタムコネクタ使ってPower AppsからMF請求APIへ接続して見積情報を取得するアプリを説明させていただきます。今回はPower Appsの本領発揮で、とても簡単に導入できるので、とっても気分が楽です
カスタムコネクタについては、これで最終回になります。

※前回記事のカスタムコネクタの設定は、こちらを参照してください。
https://qiita.com/rockfun/items/ee4f491345c07b403114

アプリ作成していきましょう！

左メニューから「作成」を選び「キャンバスアプリを一から作成」を選びます。

アプリ名を設定しますが、こちらは自由で構いません。
形式はタブレットを選びます。

データソース追加

左メニューから「データソース」選択して、「コネクタ」に作成した「MFInvoiceConnector」がありますので、選択するとアプリ内から利用出来るようになります。

検索用パーツ配置

まずは画面に１～６までのパーツを配置していきます。
ラベルについては、この画面を参考につけてください。

改めまして、MF請求APIで提供している見積検索機能の仕様をおさらいすると、

q：検索文字列。
取引先(完全一致)、ステータス、件名etcを入れてみてください。見積番号でもOKでした。
range[key]： created_at
keyの部分にあたるものは、「created_at／quote_date／expired_date」のいずれかを入力。
range[from]：2020-01-01"
開始日
range[to]：2020-07-30"
終了日
page:1
ページ指定
par_page：100
１ページに表示する件数
excise_type:boolean
消費税項目のデータ型

この様なAPI仕様になっていますので、この値を設定できるように、各パーツを設定します。

見積を検索する文字列用入力ボックス
パーツ名：テキスト入力
名前SearchTextInput
HintText："見積番号、取引先(完全一致)、ステータス、件名etc"
開始日の日付選択
パーツ名：日付の選択
名前：DatePickerFrom
DefaultDate：DateAdd(Today(),-1,Years)
※開始日を今日から１年前を初期値に設定するようにしています。
終了日の日付選択
パーツ名：日付の選択
名前：DatePickerTo
DefaultDate：Today()
※終了日は、今日の日にちを初期値に設定するようにしています。
検索期間の対象
パーツ名：ドロップダウン
名前：DateKeyType
Items：["created_at","quote_date","expired_date"]
※期間検索対象に「作成日」か「見積日」か「有効期限」のどれを対象にするかを選べるようにしています。
ページ指定
パーツ名：テキスト入力
名前：PageTextInput
Default："1"
１ページ内の表示件数指定
パーツ名：テキスト入力
名前：PerPageTextInput
Default："100"
検索ボタン
パーツ名：ボタン
名前：SearchButton

このボタンのOnSelectプロパティーに、今回作成したカスタムコネクタを使用します。
私は、MF請求から取り込んだ見積データを、社内の工数管理のアプリで利用したいので、「mfCloudData」コレクションを作っています。

ClearCollect(
    mfCloudData,
    MFInvoiceConnector.GetEstimateSearch(
        {
            q: SearchTextInput.Text,
            'range[from]': Text(
                DatePickerFrom.SelectedDate,
                "[$-ja-JP]yyyy-mm-dd"
            ),
            'range[to]': Text(
                DatePickerTo.SelectedDate,
                "[$-ja-JP]yyyy-mm-dd"
            ),
            'range[key]': Text(DateKeyType.Selected.Value),
            page: PageTextInput.Text,
            per_page: PerPageTextInput.Text,
            excise_type: "boolean"
        }
    ).data
)

コピペする方は上記を使ってください。

内容を解説すると、
まずはコレクションを作るので、
ClearCollect：コレクション名（自由）,コレクションに入れるデータ）

このコレクションに入れるデータ部分に、
作成したカスタムコネクタを設定して、取得したデータを取り込みます。

MFInvoiceConnector.GetEstimateSearch(
{
q:SearchTextInput.Text,←APIで指定する検索文字を送る部分に入力値を設置
'range[from]':
　Text(←Date型のフォーマットをText型に変換
　　DatePickerFrom.SelectedDate,←APIで指定する開始日に作成したパーツDatePickerFromの選択日を設置
　"[$-ja-JP]yyyy-mm-dd"←日付フォーマットをyyyy-mm-ddに変更
),
'range[to]':
　Text(
　DatePickerTo.SelectedDate,←APIで指定する終了日に作成したパーツDatePickerToの選択日を設置
　"[$-ja-JP]yyyy-mm-dd"←日付フォーマットをyyyy-mm-ddに変更
),
'range[key]':
　　Text(
　　　DateKeyType.Selected.Value←APIで指定する期間タイプに、作成したドロップダウンDateKeyTypeの選択値を設置
　　),
page:PageTextInput.Text,←APIで指定するページ指定に入力値を設置
per_page:PerPageTextInput.Text,←APIで指定する１ページ内の表示件数指定に入力値を設置
excise_type:"boolean"←APIで指定する消費税の扱いですが、ここは固定にしています。
}
).data
)

表示用ギャラリー配置

8番以降のギャラリーに表示する内容を設置します。
まずは、「縦方向（空）」のギャラリーを画面に配置して、Itemsプロパティーにデータが入っているmfCloudDataコレクションを指定してください。

8.見積作成日を表示
パーツ名：ラベル
名前：mfCreateDate
Text：ThisItem.attributes.created_at

9. 見積作成日を表示
パーツ名：ラベル
名前：mfPartnerName
Text：ThisItem.attributes.partner_name

10. 見積番号を表示
パーツ名：ラベル
名前：mfQuoteNumber
Text：ThisItem.attributes.quote_number

11. 見積タイトルを表示
パーツ名：ラベル
名前：mfAttributesTitle
Text：ThisItem.attributes.title

12. 合計金額を表示
パーツ名：ラベル
名前：mfTotalPrice
Text：ThisItem.attributes.mfTotalPrice

以上で、パーツの設置は終了です。

それでは、検索ボタンを押して、希望のデータがPower Apps上に表示されるか、試しましょう！

これで3回に渡って解説した、MF請求APIへのカスタムコネクタ接続方法はお終いです。

このページを見た誰かが、以前の私のような躓きで無駄な時間が少しでも無くなると嬉しいです！
本質は、小さいアプリや機能を素早く作って、改善を繰り返していくことだと思いますので、カスタムコネクタは最後の方かも知れませんが、繋がると繰り返しの入力避けたりとかデータの同一化とかで、余計な手間は減らせるのは間違いありません。