リスト ボックス、ドロップダウン リスト、ラジオ ボタンを追加するAdd a list box, a drop-down list, or radio buttons

PowerApps には、複数選択オプションと単一選択オプションがあります。リスト ボックス、ドロップダウン リスト、ラジオ ボタンなどです。PowerApps includes multi-select and single-select options, including a list box, a drop-down list, and radio buttons. このトピックでは、これらのコントロールを追加し、テーブル式を利用してリストを作成します。In this topic, we add these controls and use a Table formula to build the lists. ある項目がリストで選択されると、他のコントロールが更新されます。When an item is selected in the list, it updates other controls.

前提条件Prerequisites

リスト ボックスを追加するAdd a list box

  1. [挿入] タブで [コントロール] を選択し、[リスト ボックス] を選択します。On the Insert tab, select Controls, and then select List box:

  2. リスト ボックス コントロールの名前を MyListBox に変更します。Rename the List box control to MyListBox:

  3. その Items プロパティを次の式に設定します。Set its Items property to the following expression:
    ["circle","triangle","rectangle"]

    デザイナーは次のようになります。Your designer looks similar to the following:

  4. [挿入] タブで [アイコン] を選択し、円を選択し、それをリスト ボックス コントロールの下に移動します。On the Insert tab, select Icons, select the circle, and move it under the List box control:

  5. 三角形と四角形を追加し、リスト ボックス コントロールの下に図形を並べます。Add a triangle and a rectangle, and then arrange the shapes in a row under the List box control:

  6. 次の図形の Visible プロパティを次の関数に設定します。Set the Visible property of the following shapes to the following functions:

    図形Shape 設定する Visible 関数Set Visible function to
    circle If("circle" in MyListBox.SelectedItems.Value, true)
    三角形triangle If("triangle" in MyListBox.SelectedItems.Value, true)
    四角形rectangle If("rectangle" in MyListBox.SelectedItems.Value, true)
  7. 作成したものをプレビューします Preview what you've created . リスト ボックス コントロールでさまざまな図形を選択します。Select the different shapes in the List box control. 選択した図形のみが表示されます。Only the shape or shapes that you select appear. Esc を押すか、X を選択して自分の画面に戻ります。Press Esc or select the X to go back to your screen.

以上の手順では、式を利用し、リスト ボックス コントロールの項目リストを作成しました。In these steps, you used an expression to create a list of items in a List box control. リスト ボックス コントロールで選択した内容に基づき、さまざまな図形が表示されます。Depending on what you choose in the List box control, different shapes are displayed. これは自分の作業内の他の要素に適用できます。You can apply this to other elements within your business. たとえば、リスト ボックス コントロールを利用し、製品の画像や説明などを表示できます。For example, you can use a List box control to display product images, product descriptions, and so on.

ラジオ ボタンを追加するAdd radio buttons

  1. [ホーム] タブで [新しい画面] を選択します。On the Home tab, select New Screen.

  2. [挿入] タブで [コントロール] を選択し、ラジオ を選択します。On the Insert tab, select Controls, and then select Radio.

  3. ラジオ コントロールの名前を Choices に変更し、その Items プロパティをこの式に設定します。Rename the Radio control to Choices, and set its Items property to this formula:
    ["red","green","blue"]

    必要に応じて、すべてのオプションが表示されるようにコントロールのサイズを変更します。If needed, resize the control to show all the options.

  4. [挿入] タブで [アイコン] を選択し、円を選択します。On the Insert tab, select Icons, and then select the circle.

  5. 円の Fill プロパティを次の関数に設定します。Set the Fill property of the circle to the following function:
    If(Choices.Selected.Value = "red", RGBA(192, 0, 0, 1), Choices.Selected.Value = "green", RGBA(0, 176, 80, 1), Choices.Selected.Value = "blue", RGBA(0, 32, 96, 1))

    この数式では、選択したラジオ ボタンに基づいて円の色が変わります。In this formula, the circle changes its color depending on which radio button you choose.

  6. この例のように ラジオ コントロールの下に円を移動します。Move the circle under the Radio control, as in this example:

  7. 作成したものをプレビューします Preview what you've created: . 別のラジオ ボタンを選択すると、円の色が変わります。Select a different radio button to change the color of the circle. Esc を押すか、X を選択して自分の画面に戻ります。Press Esc or select the X to go back to your screen.

ドロップダウン リストを追加するAdd a drop-down list

  1. 画面を追加し、ドロップダウン コントロールを追加します。Add a screen, and then add a Drop down control.

  2. コントロールの名前を DDChoices に変更し、その Items プロパティをこの式に設定します。Rename the control to DDChoices, and set its Items property to this formula:
    ["red","green","blue"]["red","green","blue"]

  3. 円を追加し、ドロップダウン コントロールの下にそれを移動し、円の Fill プロパティをこの式に設定します。Add a circle, move it below the Drop down control, and set the circle's Fill property to this formula:
    If(DDChoices.Selected.Value = "red", RGBA(192, 0, 0, 1), DDChoices.Selected.Value = "green", RGBA(0, 176, 80, 1), DDChoices.Selected.Value = "blue", RGBA(0, 32, 96, 1))

  4. 作成したものをプレビューします Preview what you've created: . 別のオプションを選択すると、円の色が変わります。Select the different options to change the color of the circle.