Linking two Dropdown choices in the Power Apps Canvas app

In this article, we will explain how to select one value in a dropdown and have the contents of another dropdown change according to the selected value.

* The values of these dropdowns are held in the SharePoint List.

スポンサーリンク

Advance preparation

First, prepare the data in a SharePoint list.
Then, create a list with two columns (this time both columns are strings) in addition to the title.

I will now build the following functions
—
In the custom form of the second list, if the value of column “Selection 1” is selected from column “Title” of the first list, the value of column “Selection 2” can be selected from column “Value” of the first list.
—

Example: If you select “a” in Selection 1, you can choose from “aaa, abb, acc” in Selection 2.

Power Apps

Change Text Input to Dropdown

First, create a custom form.
The initial screen is the image below.
Change Selection 1 and Selection 2 from TextInput to Dropdown.
Change [Field] -> [Selection 1] -> [Control Type] from “Edit Text” to “Permitted Values”.
Do the same for Selection 2.

Connect with SharePoint List

Next, connect the SharePoint list containing the data to this custom form.

Select [Data Sources] → [Connectors] → [SharePoint]
Select a SharePoint site and choose the list you created in the preliminaries.

Display the contents of Option 1

First, unlock the DataCard for options 1 and 2.
Then, select the drop-down in the DataCard for Option 1 and enter the following expression in the Items property.

Distinct([Name of list],　[column name])
In the sample, we want to display the “Title” column of the list “Master 1,” so we set the following.
Distinct” is a function that returns data without duplicates, returning “a, a, a, b, . , c” in the title column will be converted to “a, b, c” with no duplicates.
公式情報：Power Apps の Distinct 関数

Now a through c will appear in Selection 1.

* If DataCard’s Update function produces an error

The Update property also needs to be changed, which is causing the error.
The error disappears when the string (Result in this case) written in the Update property is specified in the “Value” under the Items property where the “Distinct” function is entered.

Display the contents of Option 2

Select the drop-down for Option 2 and choose [Properties] -> [Dependencies].
Edit the [Dependencies] property.

Parent Control: Specify the drop-down in DataCard for Choice 1
Matching Fields: Specify the “List Name” and “Column Name” that you put in Distinct.

This will allow the two Dropdowns to work together.

If no value is displayed for choice 2, the value to be displayed in the drop-down may have been incorrectly specified.

Operation check

As shown in the image here, the value of Option 1 can now be selected to change the content of Option 2.

Of course, if you add values to the SharePoint list, the choices will be updated as well.

So far, I think the great thing about Power Apps is that there is almost zero coding.

Reference Site

キャンバス アプリで依存ドロップダウン リストを作成する - Power Apps
キャンバス アプリで別のドロップダウン リストをフィルタリングするドロップダウン リストを作成する方法について説明します。
learn.microsoft.com
*Addition on 2021/4/15:
We have received questions about how to link choices in a model-driven application, so we have written a new article.
Power Apps 2つの選択肢（ドロップダウン）を連動させる モデル駆動型アプリver
こちらの記事に「おやじ」さんから、「モデル駆動型アプリで選択肢を連動させられないか？」という質問をいただいたので、モデル駆動型アプリで実現してみた。 「おやじ」さん、コメントありがとうございます！！ 事前準備 まずはこんな感じでテーブルを3
ippu-biz.com
*Addition on 12/28/2020:
We have received questions about how to link the three dropdowns together, so we have written a new article.
Power Apps 今度は3つの選択肢（ドロップダウン）を連動させてみた
以前書いた『2つのドロップダウンを連動させる』という記事に、「3つの連動させる場合はどうするのか？」というコメントを頂いたので、3つの選択肢の連動をやってみた！ 質問をくださったユーザーさん、ありがとうございます！！ ※2つのドロップダウン
ippu-biz.com

コメント

タイトルとURLをコピーしました