Power Appsで画像を撮影して投稿するアプリに、ドロップダウンを選択して投稿できるようにする

[前の投稿](https://qiita.com/hisssa0102/items/1525eeae819c4d68df75)で、画像をコメント付きで投稿するアプリを作成したけど、もう少し実用性を持たせたい。今回は、ドロップダウンボックスからカテゴリーを選んで投稿する機能を追加する。

1. ドロップダウンの選択肢を、カスタムリストで作る
2. ドロップダウンをアプリ上に配置する
3. SharePointに列を、Flowに処理を追加する
4. PowerAppsで、Flowを追加しなおしする。

#ドロップダウンの選択肢を、カスタムリストで作る

後々のメンテナンスのしやさを考えて、カスタムリストでマスタを作成する。

SharePointサイトに、アプリの追加→カスタムリスト「photo_cat」で追加。
あとは任意の選択肢を追加しておく。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/e0a54d9b-11cc-e8e4-89e5-53c457ceb66a.png" width=50%>


#ドロップダウンをアプリ上に配置する

おおざっぱには、ドロップダウンを配置して、データソースでさっきのカスタムリストを指定する。そのうえで、ドロップダウンで選択したものを一時的に格納するラベルを作る。

1. ドロップダウンを配置する
挿入→コントロール→ドロップダウンで挿入。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/053d7a52-a412-e8e5-b960-faff4e72a3c8.png" width=50%>

2. ドロップダウンの選択肢に、さっきのカスタムリストphoto_catを指定する。
プロパティの項目で、「データソースの追加」を選択。サイトを指定して、リストを指定する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/c6dbb7aa-a7ac-db96-eecf-0a10efd48ed2.png" width=50%>

3. 一時格納用のラベルを作る。
ラベルを追加して、式を入れる。
Textに、[dropdown1.Selected.Value]と式を入れる。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/00a142ef-080c-a65e-e672-35c76b5a5d50.png" width=50%>

4. このラベルを隠す
ラベルの配置を、最背面にして、ほかのラベルの後ろに入れて隠す。ついでにユーザーのメールアドレスの箇所も、隠す。
PowerAppsでもパワーポイント同様に表示順を変更できる。これも似てる部分。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/97a4a64e-72a7-4f3a-e274-a08e995c2611.png" width=50%>
ここまでの出来姿は、こんな感じ。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/8fab9455-bbaf-5a61-9373-25d6db4cc027.png" width=50%>



#SharePointに列を、Flowに処理を追加する


1. SharePointで列を追加
画像保存先のライブラリーに、列を追加しておく。
ここは選択肢ではなく、1行テキストにしておく。今回は[category]としている。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/1c8adf59-c64e-a8ad-1681-339b22a42275.png" width=50%>

2. Flowのプロパティ更新処理を変更
基本的には、[ファイルの属性を書き換える](https://qiita.com/hisssa0102/items/1525eeae819c4d68df75#4-3%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%B1%9E%E6%80%A7%E3%82%92%E6%9B%B8%E3%81%8D%E6%8F%9B%E3%81%88%E3%82%8B)と一緒。
元のアクションを削除して、このアクションを作り直ししたほうが早いです。

|項目|| 補足   |
|:-----------------|------------------|------------------|
|サイトのURL|サイトURLを入れる。/で閉じる|サイトURL|
|ライブラリ名|ライブラリの名前（パスじゃない）|ライブラリ名|
|id|ItemID|ItemID|
|category|ファイルのプロパティの更新-category|[PowerAppsで確認]をタップすると出てくる|
|comment|ファイルのプロパティの更新-comment|[PowerAppsで確認]をタップすると出てくる|
|Sender|ファイルのプロパティの更新-SenderClaim|[PowerAppsで確認]をタップすると出てくる|

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/faae655d-829d-bed8-10f4-f73459a92e4f.png" width=50%>


#PowerAppsで、Flowを追加しなおしする。

PowerApps側で、Flowの再設定を行う。

1. Flowと接続する
改めて、ボタンを選択→アクション→Flowで、Flowを選びなおす。下図のFlowの下にあるPhotoApp選択して、追加しなおしする。(でないと反映してくれない）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/4548310b-77b1-c897-4e70-e5245acd8266.png" width=50%>

2. 式に入れる
先ほどつくったドロップダウンの中身を[Label1_3]に格納しているので、そのまんま使える。
式の指定個所に、順次カンマ区切りで入れていく。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237698/1ee6a1eb-9d8b-8fc7-2ff1-b54086e20e98.png" width=75%>



    PhotoApp.Run(Text(Now())&".jpeg",appPhoto,Label1_3,TextInput1,Label2)


これでできあがり！あとはテストするのみ。

#まとめ

使ってもらったユーザーから、「選択式にしてコメント減らしたい」と意見をもらい、早速修正。だいぶアプリっぽくなってきた。

次は、登録済みの画像を表示する画面を作ってみる。