자습서: PowerApps에서 갤러리 사용자 지정Tutorial: Customize a gallery in PowerApps

이 자습서에서는 갤러리라고 하는 레코드의 목록을 사용자 지정하고 Microsoft PowerApps에서 자동으로 생성된 앱의 다른 내용을 변경합니다.In this tutorial, you'll customize a list of records, called a gallery, and make other changes in an app that was generated automatically in Microsoft PowerApps. 이러한 변경 내용이 없어도 사용자는 앱에서 데이터를 관리할 수 있지만 조직의 요구 사항에 맞게 사용자 지정하면 앱을 더 쉽게 사용할 수 있습니다.Users can manage data in the app even if you don't make these changes, but the app will be easier to use if you customize it for your organization's needs.

예를 들어 이 자습서에 나온 갤러리는 기본적으로 다음 그래픽과 일치합니다.For example, the gallery for this tutorial matches this graphic by default. 이메일 주소는 다른 데이터 유형에 비해 더 두드러지게 나타나며, 사용자는 해당 주소의 텍스트에 따라 갤러리를 정렬 및 필터링할 수 있습니다.The email address is featured more prominently than other types of data, and users can sort and filter the gallery based on text in that address:

기본 갤러리

그러나 사용자가 이메일 주소보다 계정 이름에 더 관심이 있을 수도 있으므로 조직에 대한 핵심 데이터를 기준으로 강조 표시, 정렬 및 필터링하도록 갤러리를 다시 구성할 수 있습니다.However, your users might be more interested in the account name more than the email address, so you'll reconfigure the gallery to highlight, sort, and filter based on the key data for your organization. 또한 앱의 다른 화면과 구분되도록 기본 화면의 제목을 변경할 수도 있습니다.In addition, you'll change the title of the default screen to differentiate it from the other screens in the app.

최종 갤러리

또한 터치 스크린 또는 마우스 휠이 없는 사용자가 전체 갤러리를 탐색할 수 있도록 스크롤 막대를 추가할 수 있습니다.You'll also add a scroll bar so that users who don't have touch screens or mouse wheels can browse the entire gallery.

  • 갤러리 레이아웃 변경Change the layout of the gallery
  • 갤러리에 표시되는 데이터 형식 변경Change the type of data that appears in the gallery
  • 사용자가 데이터를 정렬 및 검색할 수 있는 기준 열 변경Change the columns by which users can sort and search the data
  • 화면 제목 변경Change the screen title
  • 스크롤 막대 표시Show a scroll bar

이 자습서는 특정 데이터 원본에서 생성된 앱으로 시작합니다.This tutorial starts with an app that was generated from a specific data source. 그러나 SharePoint 목록, Excel 테이블 또는 다른 데이터 원본을 기반으로 PowerApps에서 생성하는 모든 앱에는 동일한 개념이 적용됩니다.However, the same concepts apply to any app that you generate in PowerApps, whether from a SharePoint list, an Excel table, or some other data source.

PowerApps에 등록하지 않은 경우 시작하기 전에 체험판으로 등록합니다.If you're not signed up for PowerApps, sign up for free before you start.

필수 조건Prerequisites

앱용 CDS(Common Data Service)의 계정 엔터티에서 앱을 생성합니다.Generate an app from the Accounts entity of Common Data Service (CDS) for Apps.

생성된 앱 열기Open the generated app

  1. PowerApps에 로그인한 다음, 왼쪽 가장자리 근처에서 을 선택합니다.Sign in to PowerApps, and then select Apps near the left edge.

    PowerApps 홈페이지PowerApps home page

  2. 생성한 앱을 찾고, 앱에 대한 줄임표 아이콘(...)을 선택한 다음, 편집을 선택합니다.Find the app that you generated, select the ellipsis icon (...) for it, and then select Edit.

    편집할 앱 열기

  3. PowerApps Studio 시작 대화 상자에서 건너뛰기를 선택합니다.If the Welcome to PowerApps Studio dialog box appears, select Skip.

레이아웃 변경Change the layout

  1. 왼쪽 탐색 창에서 BrowseGallery1을 선택합니다.In the left navigation pane, select BrowseGallery1.

    갤러리가 선택되면 핸들이 있는 선택 상자가 갤러리를 둘러쌉니다.When the gallery is selected, a selection box with handles surrounds it.

    갤러리 선택

  2. 오른쪽 가장자리 근처에서 계정을 선택하여 데이터 창을 엽니다.Near the right edge, select Accounts to open the Data pane.

    데이터 창 열기

  3. 데이터 창의 레이아웃 아래에서 옵션 목록을 엽니다.In the Data pane, open the list of options under Layout.

    레이아웃 옵션 표시

  4. 옵션 목록에서 제목만 표시하는 옵션을 선택합니다.In the list of options, select the option that shows only a title.

    제목 전용 레이아웃 선택

  5. 데이터 창에서 제목에 대한 옵션 목록을 엽니다.In the Data pane, open the list of options for the title.

    이 컨트롤의 이름은 Title1과 같이 숫자로 끝납니다. 단, 숫자는 사용자가 수행한 다른 작업에 따라 달라질 수 있습니다.The name of this control will end in a numeral, such as Title1, but the numeral might differ based on other actions you might have taken.

    제목 레이블에 대한 옵션 목록 열기

  6. 옵션 목록에서 계정 이름(이름) 을 선택한 다음, 데이터 창을 닫습니다.In the list of options, select Account name (name), and then close the Data pane.

    갤러리에 각 계정의 이름이 표시됩니다.The gallery shows the name of each account.

    최종 갤러리

열 정렬 및 검색 변경Change sort and search columns

  1. 이전 섹션에서 설명한 대로 갤러리를 선택합니다.Select the gallery as the previous section describes.

    갤러리 선택

  2. 왼쪽 위 모서리 근처에서 속성 목록에 항목이 표시되는지 확인합니다.Near the upper-left corner, confirm that the property list shows Items.

    항목 속성

    이 속성의 값은 수식 입력줄에 표시됩니다.The value of this property appears in the formula bar. 이 속성을 설정하여 갤러리의 데이터 원본뿐 아니라 사용자가 데이터를 정렬하고 검색할 수 있는 기준 열도 지정합니다.You set this property to specify not only the data source for the gallery but also the columns by which users can sort and search the data.

  3. 이 수식을 복사한 다음, 수식 입력줄에 붙여넣습니다.Copy this formula, and then paste it in the formula bar.

    SortByColumns(Search(Accounts, TextSearchBox1.Text, "name"), "name", If(SortDescending1, Descending, Ascending))

    이 수식을 사용하여 다음을 확인할 수 있습니다.By using this formula, you ensure that:

    • 검색 창에 하나 이상의 문자가 있는 경우 갤러리에는 사용자가 입력한 텍스트가 포함된 계정 이름만 표시됩니다.If a user types one or more characters in the search bar, the gallery shows only those account names that contain the text that the user typed.
    • 사용자가 정렬 아이콘을 선택하면 갤러리는 사용자가 아이콘을 선택하는 횟수에 따라 오름차순 또는 내림차순의 계정 이름별로 사전순으로 정렬됩니다.If a user selects the sort icon, the gallery is sorted alphabetically by account name in either ascending or descending order, depending on how many times the user selects the icon.

    이러한 함수 및 다른 함수에 대한 자세한 내용은 수식 참조를 참조하세요.For more information about these and other functions, see the formula reference.

정렬 및 검색 테스트Test sorting and searching

  1. F5 키를 누르거나 오른쪽 위 모서리 근처에 있는 [재생] 단추를 선택하여 미리 보기 모드를 엽니다.Open Preview mode by pressing F5 (or by selecting the play button near the upper-right corner).

    미리 보기 모드 열기

  2. 브라우저 화면의 오른쪽 위 모서리 근처에서 정렬 아이콘을 한 번 이상 선택하여 사전순 정렬 순서를 오름차순과 내림차순 중에서 변경합니다.Near the upper-right corner of the browse screen, select the sort icon one or more times to change the alphabetical sort order between ascending and descending.

    정렬 아이콘 테스트

  3. 검색 상자에 k를 입력하여 입력한 문자를 포함하는 계정 이름만 표시합니다.In the search box, type k to show only those account names that contain the letter that you typed.

    검색 표시줄 테스트

  4. 검색 창에서 모든 텍스트를 제거한 다음, Esc 키를 누르거나 오른쪽 위 모서리 근처에서 닫기 아이콘을 선택하여 미리 보기 모드를 닫습니다.Remove all text from the search bar, and then close Preview mode by pressing Esc (or by selecting the close icon near the upper-right corner).

화면 제목 변경Change the screen title

  1. 화면의 제목을 클릭하거나 탭하여 선택합니다.Select the title of the screen by clicking or tapping it.

    화면 제목 선택

  2. 속성 목록에 텍스트가 표시되는지 확인하고 수식 입력줄에서 계정찾아보기(큰따옴표 유지)로 바꿉니다.Ensure that the property list shows Text and then, in the formula bar, replace Accounts with Browse (retaining the double quotation marks).

    화면 제목 업데이트

    화면은 변경 내용을 반영합니다.The screen reflects your change.

    새 화면 제목

스크롤 막대 표시Show a scrollbar

사용자가 터치 스크린 및 마우스 휠을 가지고 있지 않은 경우 사용자가 갤러리를 마우스로 가리키면 스크롤 막대가 표시되도록 갤러리를 구성합니다.If your users might have neither touch screens nor mouse wheels, configure the gallery to show a scrollbar when the user hovers over it with the mouse. 이렇게 하면 화면에 모든 계정을 한 번에 표시할 수 없는 경우에도 모든 계정을 표시할 수 있습니다.That way, users can show all accounts even if the screen can't show them all at once.

  1. 첫 번째 절차에서 설명한 대로 갤러리를 선택합니다.Select the gallery as the first procedure describes.

    갤러리 선택

  2. 갤러리 탭에서 스크롤 막대 표시를 선택하고 해당 속성 값이 true로 변경되었는지 확인합니다.On the Gallery tab, select Show scrollbar, and confirm that the value of that property has changed to true.

    스크롤 막대 표시

다음 단계Next steps

이 자습서에서는 갤러리를 사용자 지정하고 생성된 앱에서 레코드를 찾아보기 위한 기본 화면의 다른 내용을 변경했습니다.In this tutorial, you've customized the gallery and made other changes to the default screen for browsing records in a generated app. 세부 정보를 표시하고 계정을 만들거나 업데이트하는 기본 화면을 사용자 지정할 수도 있습니다.You can also customize the default screens for displaying details and creating or updating accounts. 찾아보기 화면에는 갤러리가 포함되는 것처럼 앱의 다른 두 화면에는 양식이 포함됩니다.As the browse screen contains a gallery, the other two screens in the app contain forms. 예를 들어 양식이 표시하는 데이터 형식 및 순서를 변경할 수 있습니다.You can change, for example, which types of data the forms show and in which order.