PowerAppsでユーザーを絞り込みたい


# お題
SharePoint リストに、コース (1行テキスト) ごとに受講者 (ユーザーまたはグループ) を登録して、これらの情報を基に新たな情報を登録する際、コース、受講者を手作業で入力するのは面倒くさい。コースをドロップダウンリストから選んだら、そのコースの受講者のみに絞り込むように入力フォームを作ります。
「ユーザーまたはグループ」列の絞り込みはカンタンにできるかと思いきや、この「ユーザーまたはグループ」型のクセが強く扱いづらいところもあり、数日間ずっとこれに悩みましたので、ここに残しておこう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/7c54d332-ca19-b350-d319-ea4cfa817e9e.png)

# PowerApps で入力フォームを作成
SharePoint リストを開き、PowerApps > フォームのカスタマイズ をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/6aaddf15-482d-8b59-236a-94bea5237aee.png)

すると、PowerApps アプリの作成画面が開きます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/57d33d2f-dc0f-3fea-0b8c-69b9fefd9470.png)

## データソースを追加
データを絞り込むために必要な SharePoint リストを追加します。今回は「受講者」リストを追加します。
メニュー [ビュー] > [データソース] をクリックすると、現在接続されている SharePoint リストが載っています。
ここで、[データソースの追加] をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/e33f7efc-45aa-0ea5-cb09-2943150b902a.png)

接続のリストから「SharePoint」を選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/5e772bf5-0c12-92e8-3a0d-f8d88d79b257.png)

SharePoint サイトの URL を入力するか、「最近利用したサイト」から選ぶかで接続します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/0fe8d78a-d4db-9709-1280-312b367d6aa6.png)

SharePoint リストの一覧から必要なリストにチェックをつけて [接続] をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/c8f36781-8ae2-8f88-066c-9f9a56261301.png)

選択した SharePoint リストが追加されました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/9c88bf1a-93c6-f54f-d5ac-164279faf274.png)

また、Office 365 ユーザーの操作を行うので、「Office 365 ユーザー」も追加します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/914c7176-7d83-0ba0-da79-7178a7b4fd60.png)


## 「タイトル」カードのカスタマイズ
まず「タイトル (コース)」列の絞り込みを実装します。
フォームのプロパティで「フィールドの編集」を開き、「タイトル」列のコントロールの種類を「許容値 (ドロップダウンリスト)」に変更します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/711f1b0a-d108-9e1a-127f-0ca11e7045f0.png)

「タイトル」カードのプロパティでロック解除し、ドロップダウンリストの Items プロパティに「Distinct(受講者,タイトル)」と指定することで、「受講者」リストの「コース (タイトル列)」がドロップダウンリストの選択肢として載ります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/cf33f10c-bfe1-47ac-b275-eb501f31c532.png)

## 「生徒」カードのカスタマイズ
次にお題の「ユーザーの「絞り込み」を実装します。
「生徒」カードのプロパティでロック解除し、メニュー [挿入] > [コントロール] > [ドロップダウンリスト] をクリックして追加します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/fde9fec4-7766-8adf-fac2-2c7259bf4e97.png)

先ほどの「タイトル」カードで選択した値で「生徒」を絞り込むようにするため、追加したドロップダウンリストの Items プロパティにその旨を表す式を入力します。

```(ex.)properties.Items
Items = Distinct(Filter(受講者,タイトル=DataCardValue4.Selected.Value),生徒.DisplayName)
```

なお、ドロップダウンリストはテキスト値しか取り扱えないので、「表示名 (DisplayName)」を出力します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/22787d93-1c70-fd39-8f20-b77508ef74ed.png)

あと、ドロップダウンリストのデフォルトに「このアイテム (成績表)」の「生徒 (ユーザーまたはグループ)」を載せたいので Default プロパティにセットします。お決まりの「Parent.Default」と書きたいところですが、型が合わないのでこのカードの Default プロパティの「表示名」をセットします。

```(ex.)properties.Default
Default = ThisItem.生徒.DisplayName
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/3e677fe5-2812-dd0f-5126-84862f67f657.png)

そして、このドロップダウンリストで選択した値をもともとこのカードに搭載されていたコントロールに反映させるため、DefaultSelectedItems プロパティを以下のようにクレーム、表示名、メールアドレスをセットします。

```(ex.)properties.DefaultSelectedItems
DefaultSelectedItems = {
  Claims:"i:0#.f|membership|" & Lower(First(Office365ユーザー.SearchUser({searchTerm: Dropdown1.Selected.Value})).UserPrincipalName),
  DisplayName:First(Office365ユーザー.SearchUser({searchTerm: Dropdown1.Selected.Value})).DisplayName,
  Email:First(Office365ユーザー.SearchUser({searchTerm: Dropdown1.Selected.Value})).Mail
}
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/07b2666d-b653-f4d3-5b50-ed9e1bff5a03.png)

# 動作確認 
まず、コースを選択すると生徒が絞り込まれていることがわかります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/be3ff8aa-e5c2-ca73-c429-92574b104354.png)

ドロップダウンリストでユーザーを選択すると、生徒カード (もともとあったコントロール) の値も変わっていることがわかります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/d250d288-8a54-e84c-66f1-c8bb961d0588.png)

ひととおり確認できたので、生徒カードのもともとあったコントロールの上に追加したドロップダウンリストを重ねて公開しましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/230264/6e84ebdc-b882-48df-3cda-9d293ed44fa4.png)