アプリのコレクションの作成と更新Create and update a collection in your app

コレクションを使用すると、アプリで使用できるデータを格納できます。Use a collection to store data that can be used in your app. コレクションとは、類似の項目で構成されるグループです。A collection is a group of items that are similar. たとえば、MyImages というコレクションを作成して、企業が販売する製品の画像をすべてそこに格納することができます。For example, you create a MyImages collection that stores all the product images your company sells. PowerApps では、MyImages コレクションを追加できるほか、これらの製品の画像をすべて表示するアプリを作成することができます。Within PowerApps, you can add your MyImages collection and create an app that displays all the pictures of these products. 別の例では、製品と各製品の価格を一覧表示する PriceList コレクションを作成できます。In another example, you can create a PriceList collection that lists the products and the price of each product.

コレクションは PowerApps 内で作成して使用できます。You can create and use collections within PowerApps. それでは、始めましょう。Let's get started.

前提条件Prerequisites

  • PowerApps にサインアップし、インストールして開きます。その後、サインアップに使用したのと同じ資格情報を入力してサインインします。Sign up for PowerApps, install it, open it, and then sign in by providing the same credentials that you used to sign up.
  • PowerApps で、アプリを作成するか既存のアプリを開きます。Create an app or open an existing app in PowerApps.
  • PowerApps でコントロールを構成する方法について確認します。Learn how to configure a control in PowerApps.
  • この記事の手順では、サンプルの入力データとして PriceList.zip ファイルを使用します。These steps use the PriceList.zip file as sample input data. この zip ファイルには、Excel に変換できる XML ファイルが含まれています。The zip file includes an XML file that can be converted to Excel. 変換できなくても、.zip ファイル内のファイルは PowerApps によって自動的に読み取られ、正常にインポートされます。Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. このサンプル データをダウンロードして使用することも、独自のデータをインポートすることもできます。You can download and use this sample data, or import your own.

単一列コレクションの作成Create a single-column collection

次の手順では、Collect 関数を使用してアプリ内でコレクションを作成する方法と、コレクションに項目を追加する方法について説明します。The following steps show you how to create a collection within your app using the Collect function, and how to add items to your collection.

  1. アプリを開きます。Open your app.
  2. [挿入] タブで、[テキスト][テキスト入力] の順に選択します。On the Insert tab, select Text, and then select Text input:
  3. 左上隅で [Text1] を選択し、コントロールの名前を「Destinations」に変更します。In the top left corner, select Text1, and rename the control to Destination:
  4. [挿入] タブで [ボタン] を選択し、ボタン コントロールをデザイナーに追加します。On the Insert tab, select Button to add a button control to your designer. ドロップダウン リストで OnSelect プロパティを表示します。From the drop-down list, the OnSelect property is listed. それを次の関数に設定します。Set it to the following function:

    Collect(Destinations, Destination!Text)

    これは次のようになります。It should look like the following:

  5. ボタン テキストを選択し、「Add」と入力します。Select the button text, and enter Add:
  6. [Add] ボタンを選択し、テキスト コントロールの下に移動します。Select the Add button, and move it under your text control. ボタンは好きな場所に移動できます。You can move it anywhere:

上記の手順では、Collect 関数を使用して、Destinations という名前のコレクションを作成しました。In these steps, you used the Collect function to create a collection named Destinations. さらに、ボタン コントロールを追加しました。このボタンを選択すると、コレクションに新しい項目が追加されます。You also added a button control and when selected, adds new items to your collection. ここで、作成した内容を確認します。Now, see what you created:

  1. プレビューを選択します。Select Preview:
  2. 都市名をボックスに入力し、[Add] ボタンを選択します。Type a city name into the box, and then select the Add button.
  3. さらにいくつかの都市名を入力します。その都度、[Add] ボタンを選択します。Enter some additional city names and select the Add button each time.
  4. Esc キーを押してプレビュー ウィンドウを閉じます。Press the Esc key to close the Preview window.
  5. Destinations コレクションと入力したテキスト値を確認します。See the Destinations collection and the text values you entered. [ファイル] タブで [コレクション] を選択します。On the File tab, select Collections. 入力したテキストが表示されます。The text you entered is listed:

追加の手順Extra credit

ここで、Destinations コレクションをリスト ボックスに関連付けます。Now, let's bind the Destinations collection to a listbox:

  1. デザイナーに戻ります。Go back to your designer.
  2. [挿入] タブで [コントロール] を選択し、[リスト ボックス] を選択します。On the Insert tab, select Controls, and then select ListBox:
  3. 見やすいようにリスト ボックスを移動します。Move the listbox so you can easily see it. その Items プロパティを次の式に設定します。Set its Items property to the following expression:
    Destinations!Value

    この設定を行うと、Destinations コレクションで先ほど入力した項目が自動的にリスト ボックスに設定されます。When you do this, the listbox is automatically populated with the items you previously entered in the Destinations collection:

変更をプレビューします ()。Preview your changes: . リスト ボックスに、入力した各都市が表示されます。In the listbox, you can see the different cities you entered. テキスト入力コントロールで新しい都市を入力し、[追加] ボタンを選択します。In the text-input control, enter a new city, and select the Add button. リスト ボックスは自動的に更新されて、入力した新しい都市が表示されます。The listbox is automatically updated to include the new city you entered.

複数列コレクションの作成Create a multi-column collection

次の手順では、Collect 関数を使用してアプリ内のコレクションを作成する方法と、コレクションに複数の行を追加する方法について説明します。The following steps show you how to create a collection within your app using the Collect function, and how to add multiple rows to your collection.

  1. [ホーム] タブで新しい画面を開きます。On the Home tab, open a new screen.
  2. [挿入] タブで、[テキスト][テキスト入力] の順に選択します。On the Insert tab, select Text, and then select Text input.
  3. テキスト コントロールの名前を「City」に変更します。Rename the text control to City:
  4. もう 1 つテキスト入力コントロールを挿入し、名前を「States」に変更します。Insert another text-input control, and rename it to States.
  5. City と States の両方のテキスト コントロールを見やすいように移動します。Move the City and States text controls so you can see them both:

    注意

    "Text Input (テキスト入力)" は、画像のように "City" または "State" などに置き換えることができます。You can replace 'Text Input' with something like 'City' or 'State', which was done in the image.

  6. [挿入] タブの [ボタン] を選択します。On the Insert tab, select Button. その OnSelect プロパティを次の関数に設定します。Set its OnSelect property to the following function:
    Collect(Destinations, {Cities:City!Text, States:States!Text})

    これは次のようになります。It should look like the following:

    注意

    この関数は、このコレクションに列を追加する際にも使用できます。You can use this same function to add additional columns to this collection. たとえば、国を表すテキスト入力コントロールをもう 1 つ追加して、Countries 列を追加することができます。For example, you can add another text-input control for Country to add a Countries column:

    Collect(Destinations, {Cities:City!Text, States:States!Text}, {Countries:Country!Text})

  7. ボタン コントロールの名前を「AddCityStateButton」に変更し、その Text プロパティを Add City and State に設定します。Rename the button control AddCityStateButton, and set its Text property to Add City and State:

上記の手順では、City 列と States 列を Destinations コレクションに追加しました。In these steps, you added a Cities column and a States column to the Destinations collection. ボタン コントロールを使用すると、これらの新しいテキスト項目がコレクションに追加されます。The button control adds these new text items to your collection. ここで、作成した内容を確認します。Now, see what you created:

  1. プレビューを選択します。Select Preview:
  2. City ボックスと State ボックスにテキストを入力し、[Add City and State] ボタンを選択します。Type some text into the City and State boxes, and then select the Add City and State button.
  3. さらにいくつかの都市と州を追加します。Add a few more cities and states.
  4. Esc キーを押してプレビュー ウィンドウを閉じます。Press the Esc key to close the Preview window.
  5. Destinations コレクションに追加した項目を確認するには、[ファイル] タブを選択し、[コレクション] を選択します。To see the items you added to the Destinations collection, select the File tab, and then select Collections:

コレクションへの列の追加Add columns to a collection

このチュートリアルにはいくつかのセクションがあります。There are a few sections in this walk-through. このチュートリアルを完了すると、コレクションにデータをインポートする方法、価格表のデータを表示するギャラリーの作成方法、製品の数量を決定するスライダー コントロールの使用方法がわかるようになります。When complete, you'll know how to import data into your collection, create a gallery that shows data in a price list, and use a slider control that determines the quantity of a product.

価格表のインポートとコレクションの作成Import the price list and create the collection

  1. PriceList zip ファイルをダウンロードします。Download the PriceList zip file.
  2. [ホーム] タブで新しい画面を追加します。On the Home tab, add a new screen.
  3. [挿入] タブで [コントロール] を選択し、[インポート] を選択します。On the Insert tab, select Controls, and then select Import:
  4. [Action (操作)] タブで OnSelect を選択します。On the Action tab, select OnSelect. 次の関数を入力します。Enter the following function:

    Collect(PriceList, Import1!Data)

  5. アプリをプレビューします。Preview your app. [Import Data (データをインポート)] ボタンを選択し、PriceList.zip ファイルを選択して、[開く] を選択します。Select the Import Data button, select the PriceList.zip file, and select Open.
  6. プレビュー ウィンドウを閉じます。Close the Preview window.
  7. [ファイル] タブを選択し、[コレクション] を選択します。Select the File tab, and select Collections. インポートした PriceList 項目が一覧表示されます。The PriceList items you imported are listed:
  1. デザイナーに戻ります。Go back to your designer.
  2. [挿入] タブで [ギャラリー] を選択し、[カスタム ギャラリー] まで下へスクロールして、[縦] を選択します。On the Insert tab, select Gallery, scroll down to Custom Galleries, and then select Portrait:
  3. ギャラリーの名前を PriceGallery に変更し、Items プロパティを PriceList に設定します。Rename the gallery to PriceGallery and set the Items property to PriceList:
  4. [Import Data (データをインポート)] コントロールの下に PriceList ギャラリーを移動します。Move the PriceList gallery below the Import Data control. ギャラリーの枠線を選択し、クリック アンド ドラッグを使用して、3 つの四角形が見えるようにギャラリーのサイズを変更します。Select the gallery borders and use click-and-drag to resize the gallery so three squares are shown.
  5. ギャラリーの最初の四角形を選択し、3 つのラベルを追加します ([挿入] タブ、[ラベル] の順に選択)。In the gallery, select the first square, and add three labels (Insert tab > Label).
  6. ラベルのサイズを変更し、最初の四角形の上部に 1 列に並べます。Resize and arrange the labels in a row near the top of the first square. ギャラリーは次のようになります。Your gallery looks similar to the following:
  7. 各ラベルの Text プロパティを次の式に設定します。Set the Text property of each label to the following expression:

    ラベルLabel Text プロパティの設定Set Text property to
    Label1Label1 ThisItem!Name
    Label2Label2 Text(ThisItem!Price, "$#")
    Label3Label3 ThisItem!Maker

    この設定を行うと、PriceList コレクション内の名前、価格、メーカーの値でラベルが自動的に更新されます。When you do this, the labels are automatically updated with the name, price, and maker values within the PriceList collection.

  8. ラベルとギャラリーのサイズを変更して余分なスペースをなくします。Resize the labels and the gallery to remove any extra spaces. 画面は次のようになります。Your screen look similar to the following:

数量のスライダーの追加とコレクションの更新Add the quantity slider and update the collection

  1. [挿入] メニューで [コントロール] を選択し、[スライダー] を選択します。On the Insert menu, select Controls, and select Slider. スライダーの名前を OrderQty に変更し、ギャラリーの下に移動します。Rename the slider to OrderQty, and move it under the gallery.
  2. ボタンを追加してその Text プロパティを Add に設定し、OrderQty スライダーの下に移動します。Add a button, set its Text property to Add, and move it under the OrderQty slider. アプリは次のようになります。Your app looks similar to the following:
  3. [Add] ボタンの OnSelect プロパティを次の式に設定します。Set the OnSelect property of the Add button to the following expression:

    Collect(OrderList, {Name:PriceGallery!Selected!Name, Qty:OrderQty!Value, Cost:OrderQty!Value*LookUp(PriceList, PriceGallery!Selected!Name in Name, Price)});SaveData(OrderList, "orderfile")

    注意

    後でこのボタンを選択し、OrderList という名前のコレクションを作成して保存します。When you select this button later in this procedure, you'll create and save a collection named OrderList. このコレクションには、ギャラリーに入力する製品名、スライダーで選択する数量、その数量と製品の価格を掛けて計算される総コストが含まれます。The collection will contain the name of a product that you enter in the gallery, a quantity that you choose with the slider, and the total cost calculated by multiplying the quantity by the price of the product.

  4. [画面] タブを選択し、OnVisible プロパティを次の式に設定します。Select the Screen tab and set the OnVisible property to the following expression:

    If(IsEmpty(PriceList), LoadData(PriceList, "pricefile"));If(IsEmpty(OrderList), LoadData(OrderList, "orderfile"))

ここで、作成した内容を確認します。Now, see what you created:

  1. プレビューを開きます。Open Preview.
  2. ギャラリーで製品を選択し、スライダーを目的の数量に移動して、[Add] ボタンを選択します。Select a product in the gallery, move the slider to your desired quantity, and then select the Add button.

    重要

    製品を選択しても、この製品を選択したことを示すように強調表示されません。When you select a product, that product is not highlighted to indicate you selected it. 強調表示の機能はギャラリーの作成時に追加しませんでした。When we created the gallery, we didn't add this functionality. 製品をクリックすると製品が選択されることを把握しておいてください。Know that clicking the product does select it.

  3. これらの手順を繰り返し、さらにいくつかの製品を追加します。Repeat these steps to add a couple more products. Esc キーを押してプレビュー ウィンドウを閉じます。Press ESC to close the Preview window.
  4. [ファイル] タブで [コレクション] を選択し、作成した OrderList コレクションのプレビューを表示します。On the File tab, select Collections to display a preview of the OrderList collection you created:

ヒント

注文リストからすべての項目を削除するには、ボタンを追加し、その Text プロパティを Clear に設定して、OnSelect プロパティを次の式に設定します。To remove all items from the order list, add a button, set its Text property to Clear, and set its OnSelect property to the following expression:
Clear(OrderList);SaveData(OrderList, "orderfile")
項目を 1 つずつ削除するには、ギャラリーの OrderList コレクションを表示し、そのギャラリーのラベルの OnSelect プロパティを次の式に設定します。To remove one item at a time, show the OrderList collection in a gallery, and then set the OnSelect property of a label in that gallery to the following expression:
Remove(OrderList, ThisItem);SaveData(OrderList, "orderfile")

ヒントとコツTips and Tricks

  • いつでもプレビュー ボタン () を選択して、グラフを表示したり、グラフのデータがどのように表示されるかを確認したりできます。At anytime, you can select the Preview button () to view your charts, and to see how they look with data.
  • アプリの設計時に、コントロールのサイズを変更したり、クリック アンド ドラッグでコントロールを移動したりできます。When designing your app, you can re-size the controls and move them around using click-and-drag.

学習した内容What you learned

このトピックでは次の操作を行いました。In this topic, you:

  • Collect() 関数を使用して、アプリ内にコレクションを作成しました。Used the Collect() function to create a collection within your app.
  • ボタン コントロールを追加しました。このボタンを選択すると、コレクションに新しい項目が追加されます。You added a button control and when selected, the button adds new items to your collection.
  • リスト ボックスを使用してコレクションに項目を追加しました。Used a listbox to add items to your collection.
  • スライダー コントロールを追加してコレクション内の項目を更新しました。Added a slider control to update items within the collection.