PowerApps 갤러리에서 데이터 표시, 정렬 및 필터링Show, sort, and filter data in a PowerApps gallery

갤러리를 만들어 여러 제품에 대한 이미지와 텍스트를 표시하고 해당 정보를 정렬 및 필터링합니다.Create a gallery to show images and text about several products, and sort and filter that information.

카탈로그에서 표시하는 것처럼 PowerApps에서 갤러리를 사용하여 여러 관련 항목을 표시할 수 있습니다.In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. 갤러리는 이름 및 가격과 같은 제품에 대한 정보를 표시하는 데 유용합니다.Galleries are great for showing information about products, such as names and prices. 이 항목에서는 갤러리를 만들고 Excel과 비슷한 함수를 사용하여 정보를 정렬 및 필터링합니다.In this topic, we create a gallery and sort and filter the information using Excel-like functions. 또한 항목이 선택되면 항목 주위에 테두리가 배치됩니다.Also, when an item is selected, a border is placed around the item.

참고

이 항목에서는 태블릿 앱을 사용합니다.This topic uses a tablet app. 전화 앱을 사용할 수 있지만 일부 컨트롤의 크기를 조정해야 합니다.You can use a phone app but you will need to resize some of the controls.

필수 조건Prerequisites

  • PowerApps에 등록한 다음 PowerApps를 설치합니다.Sign up for PowerApps and install PowerApps. PowerApps를 열면 등록하는 데 사용한 것과 동일한 자격 증명을 사용하여 로그인합니다.When you open PowerApps, sign-in using the same credentials that you used to sign up.
  • 템플릿에서, 데이터에서 또는 처음부터 태블릿 앱을 만듭니다.Create a tablet app from a template, from data, or from scratch.
  • 컨트롤을 구성하는 방법을 알아봅니다.Learn how to configure a control.
  • 이러한 단계에서는 .jpg 이미지가 포함된 CreateFirstApp을 입력 데이터 샘플로 사용합니다.These steps use the CreateFirstApp as sample input data, which includes .jpg images. zip 파일에는 Excel로 변환할 수 있는 XML 파일이 포함되어 있습니다.The zip file includes an XML file that can be converted to Excel. 그렇지 않으면 PowerApps에서 자동으로 .zip 파일에 있는 파일을 읽고 성공적으로 가져옵니다.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.
  1. 샘플 데이터를 사용하여 Inventory라는 컬렉션을 만듭니다.Create a collection named Inventory using the sample data. 단계는 다음과 같습니다.Steps include:

    1. 삽입 탭에서 컨트롤을 선택한 다음 가져오기를 선택합니다.On the Insert tab, select Controls, and then select Import:

    2. 가져오기 컨트롤의 OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property of the import control to the following formula:
      Collect(Inventory, Import1!Data)Collect(Inventory, Import1!Data)

    3. 데이터 가져오기 단추를 선택하여 Windows 탐색기를 엽니다.Select the Import Data button to open Windows Explorer. CreateFirstApp.zip을 선택하고 열기를 선택합니다.Select CreateFirstApp.zip, and select Open.
    4. 파일 메뉴에서 컬렉션을 선택합니다.In the File menu, select Collections. 가져온 데이터가 있는 Inventory 컬렉션이 나열됩니다.The Inventory collection is listed with the data you imported:

      이제 디자인 이미지, 제품 이름 및 재고 단위 수를 포함하여 5개 제품에 대한 정보가 포함된 Inventory 컬렉션을 만들었습니다.You've just created the Inventory collection, which contains information about five products, including a design image, the name of the product, and the number of units in stock.

      참고

      가져오기 컨트롤은 Excel과 같은 데이터를 가져와서 컬렉션을 만드는 데 사용됩니다.The import control is used to import Excel-like data and create the collection. 가져오기 컨트롤은 앱을 만들고 앱을 미리 볼 때 데이터를 가져옵니다.The import control imports data when you are creating your app, and previewing your app. 현재 가져오기 컨트롤은 앱을 게시할 때는 데이터를 가져오지 않습니다.Currently, the import control does not import data when you publish your app.

  2. 뒤로 화살표를 선택하여 디자이너로 돌아갑니다.Select the back arrow to return to the designer.
  3. 삽입 탭에서 갤러리, 가로 갤러리를 차례로 클릭하거나 탭합니다.On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

  4. 오른쪽 창에서 제목과 부제목이 그래픽을 오버레이하는 옵션을 클릭하거나 탭합니다.In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:

  5. 갤러리의 Items 속성을 Inventory로 설정합니다.Set the Items property of the gallery to Inventory:

  6. 갤러리의 이름을 ProductGallery로 바꾸고 다른 컨트롤을 차단하지 않도록 갤러리를 이동합니다.Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. 갤러리의 크기를 조정하여 세 개 제품을 표시합니다.Resize the gallery so it shows three products:

  7. 갤러리의 첫 번째 항목에서 아래쪽 레이블을 선택합니다.In the first item of the gallery, select the bottom label:

    참고

    갤러리에서 첫 번째 항목을 변경하면 갤러리의 다른 모든 항목이 자동으로 변경됩니다.When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. 레이블의 Text 속성을 다음 식으로 설정합니다.Set the Text property of the label to the following expression:
    ThisItem!UnitsInStockThisItem!UnitsInStock

    이렇게 하면 레이블에 각 제품의 재고 단위가 표시됩니다.When you do this, the label shows the units in stock for each product:

참고

기본적으로 최상위 레이블의 Text 속성은 ThisItem!ProductName으로 설정됩니다.By default, the Text property of the top label is set to ThisItem!ProductName. 컬렉션의 다른 항목으로 변경할 수 있습니다.You can change it to any other item in your collection. 예를 들어 컬렉션에 'ProductDescription' 또는 'Price' 필드가 있는 경우 레이블을 ThisItem!ProductDescription 또는 ThisItem!Price로 설정할 수 있습니다.For example, if your collection has ProductDescription or Price fields, you can set the label to ThisItem!ProductDescription or ThisItem!Price.

이러한 단계를 사용하여 .jpg 이미지가 포함된 데이터를 컬렉션으로 가져왔습니다.Using these steps, you imported data that includes .jpg images into a collection. 그런 다음 데이터를 표시하는 갤러리를 추가했고 각 제품의 재고 단위를 표시하는 레이블을 구성했습니다.You then added a gallery that displays the data and configured a label to show the units in stock for each product.

  1. 갤러리에서 첫 번째 항목을 '제외한' 항목을 선택합니다.Select any item in the gallery except the first one. 편집 아이콘이 표시됩니다(왼쪽 위 모서리).The edit icon displays (upper left corner). 편집 아이콘을 선택합니다.Select the edit icon:
  2. 삽입 탭에서 도형을 선택한 다음 사각형을 선택합니다.On the Insert tab, select Shapes, and then select the rectangle. 파란색 실선의 사각형이 각 갤러리 항목에 표시됩니다.A blue solid rectangle appears in each gallery item.
  3. 탭에서 채우기를 선택한 다음 채우기 없음을 선택합니다.On the Home tab, select Fill, and then select No Fill.
  4. 테두리, 테두리 스타일, 실선을 차례로 선택합니다.Select Border, select Border Style, and then select the solid line.
  5. 테두리를 다시 선택하고 두께를 3으로 설정합니다.Select Border again, and set the thickness to 3. 갤러리 항목을 둘러싸도록 사각형의 크기를 조정합니다.Resize the rectangle so that it surrounds the gallery item. 이제 갤러리의 항목에 파란색 테두리가 있으며 다음과 비슷합니다.The items in your gallery now have a blue border and should look similar to the following:
  6. 도형 탭에서 테두리 표시를 선택한 다음, 수식 입력줄에 다음 수식을 입력합니다.On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:

    If(ThisItem!IsSelected, true)If(ThisItem!IsSelected, true)

    파란색 사각형이 갤러리에서 현재 선택한 항목을 둘러쌉니다.A blue rectangle surrounds the current selection in a gallery. 몇 가지 갤러리 항목을 선택하여 선택한 각 항목 주위에 사각형이 표시되는지 확인합니다.Select a few gallery items to confirm that the rectangle appears around each item that you select. 또한 미리 보기 를 열어 만들고 있는 항목을 보고 테스트할 수도 있습니다.Remember, you can also open Preview to see and test what you're creating.

사각형을 선택하고, 탭에서 순서 다시 매기기를 선택한 다음, 맨 뒤로 보내기를 선택합니다.Select the rectangle, select Reorder on the Home tab, and then select Send to Back. 이 기능을 사용하면 다른 항목을 차단하는 테두리가 없는 갤러리 항목을 선택할 수 있습니다.Using this feature, you can select a gallery item without the border blocking anything.

이러한 단계를 사용하여 갤러리에서 현재 선택한 항목 주위에 테두리를 추가했습니다.Using these steps, you added a border around the current selection in the gallery.

이 단계에서는 갤러리 항목을 오름차순과 내림차순으로 정렬합니다.In these steps, we are going to sort the gallery items in ascending and descending order. 또한 슬라이더 컨트롤을 추가하여 선택한 재고 단위별로 갤러리 항목을 '필터링'합니다.Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

오름차순 또는 내림차순 정렬Sort in ascending or descending order

  1. 갤러리에서 첫 번째 항목을 '제외한' 항목을 선택합니다.Select any item in the gallery except the first one.
  2. Items 속성은 현재 Inventory(컬렉션 이름)로 설정되어 있습니다.The Items property is currently set to Inventory (the name of your collection). 다음과 같이 변경합니다.Change it to the following:

    Sort(Inventory, ProductName)Sort(Inventory, ProductName)

    이렇게 하면 갤러리의 항목이 제품 이름별로 오름차순으로 정렬됩니다. When you do this, the items in the gallery are sorted by the product name in ascending order:

    내림차순으로 정렬해 보세요.Try descending order. 갤러리의 Items 속성을 다음 수식으로 설정합니다.Set the Items property of the gallery to the following formula:

    Sort(Inventory, ProductName, Descending)Sort(Inventory, ProductName, Descending)

  1. 슬라이더 컨트롤(삽입 탭> 컨트롤)을 추가하고, 이름을 StockFilter로 바꾼 다음, 갤러리 아래로 이동합니다.Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.
  2. 사용자가 재고 단위의 범위를 벗어나는 값으로 설정할 수 없도록 슬라이더를 구성합니다.Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. 용량 탭에서 최소를 선택하고 다음 식을 입력합니다.On the Content tab, select Min, and then enter the following expression:
      Min(Inventory, UnitsInStock)
    2. 용량 탭에서 최대를 선택하고 다음 식을 입력합니다.On the Content tab, select Max, and then enter the following expression:
      Max(Inventory, UnitsInStock)
  3. 갤러리에서 첫 번째 항목을 '제외한' 항목을 선택합니다.Select any item in the gallery except the first one. 갤러리의 Items 속성을 다음 식으로 설정합니다.Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value)
  4. 미리 보기에서 슬라이더를 갤러리에서 가장 높은 수량과 가장 낮은 수량 사이의 값으로 조정합니다.In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. 슬라이더를 조정하면 갤러리에는 선택한 값보다 작은 제품만 표시됩니다.As you adjust the slider, the gallery shows only those products that are less than the value you choose:

이제 필터에 추가해 보겠습니다.Now, let's add to our filter:

  1. 디자이너로 돌아갑니다.Go back to the designer.
  2. 삽입 탭에서 텍스트를 선택하고, 텍스트 입력을 선택한 다음, 새 컨트롤의 이름을 NameFilter로 바꿉니다.On the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. 텍스트 컨트롤을 슬라이더 아래로 이동합니다.Move the text control below the slider.
  3. 갤러리의 Items 속성을 다음 식으로 설정합니다.Set the Items property of the gallery to the following expression:
    Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
  4. 미리 보기에서 슬라이더를 '30'으로 설정하고, 텍스트 입력 컨트롤에 'g' 문자를 입력합니다.In Preview, set the slider to 30, and type the letter g in the text-input control. 갤러리에는 이름에 "g" 문자가 있고 재고 단위가 30개 미만인 제품만 표시됩니다.The gallery shows the only product with less than 30 units in stock and has a name with the letter "g":

팁과 요령Tips and Tricks

  • 언제든지 미리 보기() 단추를 선택하여 만든 항목을 보고 테스트할 수 있습니다.At anytime, you can select the preview button () to see what you created and test it.
  • 앱을 디자인할 때 컨트롤의 크기를 조정하고, 클릭한 다음 끌기를 사용하여 이동할 수 있습니다.When designing your app, you can re-size the controls and move them around using click-and-drag.
  • Esc 키를 누르거나 X를 선택하여 미리 보기 창을 닫습니다.Press ESC or select the X to close the preview window.
  • 갤러리를 사용할 때 갤러리의 모든 항목을 변경하려면 갤러리에서 첫 번째 항목을 선택합니다.When using a gallery, select the first item in the gallery to change all items in the gallery. 예를 들어 갤러리의 모든 항목에 테두리를 추가하려면 첫 번째 항목을 선택합니다.For example, select the first item to add a border to all items in the gallery.
  • 갤러리의 속성을 업데이트하려면 갤러리에서 첫 번째 항목을 '제외한' 항목을 선택합니다.To update the properties of the gallery, select any item in the gallery except the first one. 예를 들어 두 번째 항목을 선택하여 'Items', 'ShowScrollbar' 및 갤러리에 적용되는 기타 속성(갤러리의 항목 아님)을 업데이트합니다.For example, select the second item to update the Items, ShowScrollbar, and other properties that apply to the gallery (not the items in the gallery).

학습 내용What you learned

이 항목에서는 다음을 수행했습니다.In this topic, you:

  • 컬렉션을 만들고, .jpg 이미지가 포함된 데이터를 해당 컬렉션에 가져오고, 갤러리에서 해당 데이터를 표시했습니다.Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • 갤러리의 각 이미지 아래에서 해당 항목의 재고 단위가 나열되는 레이블을 구성했습니다.Under each image in the gallery, configured a label that lists the units in stock for that item.
  • 선택한 항목 주위에 테두리를 추가했습니다.Added a border around the item that you select.
  • 항목을 제품 이름별로 오름차순 및 내림차순으로 정렬했습니다.Sorted the items by product name in ascending and descending order.
  • 슬라이더 및 입력 텍스트 컨트롤을 추가하여 제품을 재고 단위 및 제품 이름별로 필터링했습니다.Added a slider and an input text control to filter the products by units in stock and product name.