[Power Apps設定編]他のサービスに繋げよう！カスタム コネクタの使い方

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

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

##アプリ作成していきましょう！
左メニューから「作成」を選び「キャンバスアプリを一から作成」を選びます。
![キャンパスアプリ作成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/3bdff0c2-f495-1860-b959-ac37544c45cd.png)

アプリ名を設定しますが、こちらは自由で構いません。
形式はタブレットを選びます。
![アプリ名をつけます](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/e9eaccec-d839-29ac-a7b6-77351cc7e6be.png)

###データソース追加
左メニューから「データソース」選択して、「コネクタ」に作成した「MFInvoiceConnector」がありますので、選択するとアプリ内から利用出来るようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/d7e47c5e-6cf7-ec3b-a08d-f69e10944a4e.png)
![見積取込-Power-Apps最後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/57b57a84-a88b-71df-bebb-06478793a0fa.png)

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

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

- q：```検索文字列。```<br>取引先(完全一致)、ステータス、件名etcを入れてみてください。見積番号でもOKでした。
- range[key]： ```created_at```<br>keyの部分にあたるものは、「created_at／quote_date／expired_date」のいずれかを入力。

- range[from]：```2020-01-01"```<br>開始日
- range[to]：```2020-07-30"```<br>終了日
- page:```1```<br>ページ指定
- par_page：```100```<br>１ページに表示する件数
- excise_type:```boolean```<br>消費税項目のデータ型

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

![工数管理マスタV2-保存済み-発行取り消し済み-Power-Apps.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/046a3f1a-353f-2aed-2762-7b085ceb5cdd.png)


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

このボタンの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コレクションを指定してください。

![工数管理マスタV2-保存済み-発行取り消し済み-Power-Apps.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/0217a56a-8eb4-d695-c6b9-a9e731de4bec.png)


8.***見積作成日を表示***<br>パーツ名：ラベル<br>名前：mfCreateDate<br>Text：ThisItem.attributes.created_at<br>
9. ***見積作成日を表示***<br>パーツ名：ラベル<br>名前：mfPartnerName<br>Text：ThisItem.attributes.partner_name<br>
10. ***見積番号を表示***<br>パーツ名：ラベル<br>名前：mfQuoteNumber<br>Text：ThisItem.attributes.quote_number<br>
11. ***見積タイトルを表示***<br>パーツ名：ラベル<br>名前：mfAttributesTitle<br>Text：ThisItem.attributes.title<br>
12. ***合計金額を表示***<br>パーツ名：ラベル<br>名前：mfTotalPrice<br>Text：ThisItem.attributes.mfTotalPrice<br>

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

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

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

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