Excel 데이터를 기반으로 처음부터 캔버스 앱 만들기Create a canvas app from scratch based on Excel data

표 형식의 Excel 데이터를 기반으로 처음부터 고유한 캔버스 앱을 만든 다음, 원하는 경우 다른 원본의 데이터를 추가합니다.Create your own canvas app from scratch based on Excel data, formatted as a table, and then add data from other sources if you want. 이 자습서를 따라 두 화면을 포함하는 앱을 만듭니다.By following this tutorial, you'll create an app that contains two screens. 한 화면에서 사용자는 일련의 레코드를 찾아볼 수 있습니다.On one screen, users can browse through a set of records. 다른 화면에서 사용자는 한 레코드를 만들거나, 한 레코드에서 하나 이상의 필드를 업데이트하거나, 전체 레코드를 삭제할 수 있습니다.On the other screen, users can create a record, update one or more fields in a record, or delete an entire record. 이 접근 방식은 앱을 자동으로 생성하는 것보다 시간이 더 걸리지만 숙련된 앱 제작자는 이 방법으로 요구 사항에 맞는 최고의 앱을 빌드할 수 있습니다.This approach takes more time than generating an app automatically does, but app makers who have more experience can use it to build the best app for their needs.

필수 구성 요소Prerequisites

이 자습서의 단계를 정확하게 수행하려면 먼저 이 샘플 데이터를 사용하여 Excel 파일을 만듭니다.To follow the steps in this tutorial exactly, first create an Excel file using this sample data.

  1. 이 데이터를 복사한 다음 Excel 파일에 붙여넣습니다.Copy this data, and then paste it into an Excel file.

    StartDayStartDay StartTimeStartTime 자원 봉사자Volunteer 백업Backup
    토요일Saturday 오전 10시 정오10am-noon VasquezVasquez KumashiroKumashiro
    토요일Saturday 정오~오후 2시noon-2pm IceIce SinghalSinghal
    토요일Saturday 오후 2시~오후 4시2pm-4pm MykMyk MuellerMueller
    일요일Sunday 오전 10시 정오10am-noon LiLi AdamsAdams
    일요일Sunday 정오~오후 2시noon-2pm SinghSingh MorganMorgan
    일요일Sunday 오후 2시~오후 4시2pm-4pm BatyeBatye NguyenNguyen
  2. PowerApps에서 정보를 구문 분석할 수 있도록 해당 데이터를 Schedule이라는 테이블로 형식을 지정합니다.Format that data as a table, named Schedule, so that PowerApps can parse the information.

    자세한 내용은 Excel에서 테이블 형식 지정을 참조합니다.For more information, see Format a table in Excel.

  3. Eventsignup. .xlsx이름으로 파일을 저장 하 고 닫은 다음 클라우드 저장소 계정(예: OneDrive)에 업로드 합니다.Save the file under the name eventsignup.xlsx, close it, and then upload it to a cloud-storage account, such as OneDrive.

중요

사용자의 Excel 파일을 사용할 수 있으며 일반 개념에 대해서만 이 자습서를 검토할 수 있습니다.You can use your own Excel file and review this tutorial for general concepts only. 그러나 Excel 파일의 데이터는 테이블로 형식이 지정돼야 합니다.However, the data in the Excel file must be formatted as a table. 자세한 내용은 Excel에서 테이블 형식 지정을 참조합니다.For more information, see Format a table in Excel.

비어 있는 앱 열기Open a blank app

  1. PowerApps에 로그인합니다.Sign in to PowerApps.

  2. 고유한 앱 만들기에서 빈 페이지의 캔버스 앱을 선택합니다.Under Make your own app, select Canvas app from blank.

    빈 캔버스 앱 만들기Create blank canvas app

  3. 앱의 이름을 지정하고, 휴대폰을 선택한 다음, 만들기를 선택합니다.Specify a name for your app, select Phone, and then select Create.

    전화 또는 다른 디바이스(예: 태블릿)에 사용할 앱을 처음부터 디자인할 수 있습니다.You can design an app from scratch for phones or for other devices (such as tablets). 이 항목에서는 전화용 앱 디자인에 대해 중점적으로 설명합니다.This topic focuses on designing an app for phones.

    앱의 이름 및 형식 지정Specify name and format of app

    PowerApps Studio에서는 빈 전화용 앱을 만듭니다.PowerApps Studio creates a blank app for phones.

  4. PowerApps Studio 시작 대화 상자가 열리면 건너뛰기를 선택합니다.If the Welcome to PowerApps Studio dialog box opens, select Skip.

데이터에 연결Connect to data

  1. 화면 가운데에서 데이터에 연결을 선택합니다.In the middle of the screen, select connect to data.

  2. 데이터 창에서 연결이 표시되면 클라우드 스토리지 계정에 대한 연결을 선택합니다.In the Data pane, select the connection for your cloud-storage account if it appears. 연결이 표시되지 않으면 다음 단계에 따라 연결을 추가합니다.Otherwise, follow these steps to add a connection:

    1. 새 연결을 선택하고 클라우드 스토리지 계정의 타일을 선택한 다음, 만들기를 선택합니다.Select New connection, select the tile for your cloud-storage account, and then select Create.
    2. 메시지가 표시되면 해당 계정에 대한 자격 증명을 입력합니다.If prompted, provide your credentials for that account.
  3. Excel 파일 선택에서 eventsignup의 첫 문자를 입력하거나 붙여넣어 목록을 필터링한 다음, 업로드한 파일을 선택합니다.Under Choose an Excel file, type or paste the first letters of eventsignup to filter the list, and then select the file that you uploaded.

  4. 테이블 선택에서 Schedule 확인란을 선택한 다음, 연결을 선택합니다.Under Choose a table, select the checkbox for Schedule, and then select Connect.

  5. 데이터 창의 오른쪽 위 모서리에서 닫기 아이콘(X)을 선택하여 창을 닫습니다.In the upper-right corner of the Data pane, close it by selecting the close icon (X).

보기 화면 만들기Create the view screen

  1. 탭에서 새 화면 옆에 있는 아래쪽 화살표를 선택하여 화면 유형 목록을 연 다음, 목록을 선택합니다.On the Home tab, select the down-arrow next to New screen to open a list of screen types, and then select List.

    화면에는 검색 상자와 갤러리 컨트롤 등의 여러 기본 컨트롤이 추가됩니다.A screen is added with several default controls, such as a search box and a Gallery control. 갤러리는 검색 상자에서 전체 화면을 처리합니다.The gallery covers the entire screen under the search box.

  2. 새 화면 위쪽에서 레이블 컨트롤을 선택한 다음, [제목]레코드 보기로 바꿉니다.At the top of the new screen, select the Label control, and then replace [Title] with View records.

    제목 표시줄 변경

  3. 왼쪽 탐색 표시줄에서 BrowseGallery1을 선택합니다.In the left navigation bar, select BrowseGallery1.

    핸들이 있는 선택 상자가 갤러리를 둘러쌉니다.A selection box with handles surrounds the gallery.

    목록 추가 화면

  4. 오른쪽 창의 속성 탭에서 레이아웃 메뉴의 아래쪽 화살표를 선택합니다.On the Properties tab of the right-hand pane, select the down arrow for the Layout menu.

    레이아웃 메뉴를 엽니다.

  5. 제목, 부제목 및 본문을, 선택합니다.Select Title, subtitle, and body.

  6. 수식 입력줄에서 CustomGallerySample일정으로 바꾸고, SampleText의 두 인스턴스를 자원 봉사자로 바꿉니다.In the formula bar, replace CustomGallerySample with Schedule, and replace both instances of SampleText with Volunteer.

  7. 수식 입력줄의 오른쪽 가장자리에서 아래쪽 화살표를 선택한 다음, 텍스트 서식 지정을 선택합니다.On the right edge of the formula bar, select the down arrow, and then select Format text.

    수식은 다음 예제와 일치합니다.The formula matches this example:

    SortByColumns(
        Search(
            Schedule,
            TextSearchBox1.Text,
            "Volunteer"
        ),
        "Volunteer",
        If(
            SortDescending1,
            SortOrder.Descending,
            SortOrder.Ascending
        )
    )
    
  8. 오른쪽 창의 속성 탭에서 필드 레이블 옆에 있는 편집을 선택합니다.On the Properties tab of the right-hand pane, select Edit next to the Fields label.

  9. Title2 상자에서 지원자를 선택 하 고, Subtitle2 상자에서 Startday를 선택 하 고, Body1 상자에서 StartTime을 선택 합니다.In the Title2 box, select Volunteer, in the Subtitle2 box, select StartDay, and in the Body1 box, select StartTime.

  10. 데이터 창의 오른쪽 위 모서리에서 닫기 아이콘(X)을 선택하여 창을 닫습니다.In the upper-right corner of the Data pane, close it by selecting the close icon (X).

사용자는 해당 수식의 SortByColumnsSearch 함수를 기반으로 갤러리를 자원봉사자의 이름별로 정렬 및 필터링할 수 있습니다.Users can sort and filter the gallery by volunteer name based on the SortByColumns and Search functions in that formula.

  • 사용자가 검색 상자에 하나 이상의 문자를 입력하면 갤러리에는 Volunteer 필드에 사용자가 입력한 텍스트를 포함하는 레코드만 표시됩니다.If a user types at least one letter in the search box, the gallery shows only those records for which the Volunteer field contains the text that the user typed.
  • 사용자가 제목 표시줄에서 새로 고침 단추와 더하기 단추 사이에 있는 정렬 단추를 선택하면 갤러리에는 자원 봉사자 필드를 기준으로 (사용자가 단추를 선택한 횟수에 따라) 오름차순 또는 내림차순으로 레코드가 표시됩니다.If a user selects the sort button (between the refresh button and the plus button in the title bar), the gallery shows the records in ascending or descending order (depending on how many times the user selects the button) based on the Volunteer field.

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

변경 화면 만들기Create the change screen

  1. 탭에서 새 화면 옆에 있는 아래쪽 화살표를 선택한 다음, 양식을 선택합니다.On the Home tab, select the down arrow next to New screen, and then select Form.

  2. 왼쪽 탐색 모음에서 EditForm1을 선택합니다.In the left navigation bar, select EditForm1.

  3. 오른쪽 창의 속성 탭에서 데이터 원본 옆에 있는 아래쪽 화살표를 선택한 다음, 나타나는 목록에서 일정을 선택합니다.On the Properties tab of the right-hand pane, select the down arrow next to Data source, and then select Schedule in the list that appears.

  4. 방금 지정한 데이터 원본에서 필드 편집을 선택합니다.Under the data source that you just specified, select Edit fields.

  5. 필드 창에서 필드 추가를 선택하고, 각 필드에 대한 확인란을 선택한 다음, 추가를 선택합니다.In the Fields pane, select Add field, select the check box for each field, and then select Add.

  6. 각 필드의 이름 옆에 있는 화살표를 선택하여 축소한 다음, 자원 봉사자 필드를 위로 끌어와서 필드 목록의 위쪽에 표시되도록 합니다.Select the arrow next to the name of each field to collapse it, and then drag the Volunteer field up so that it appears at the top of the list of fields.

    필드 순서 바꾸기

  7. 필드 창의 오른쪽 위 모서리에서 닫기 아이콘(X)을 선택하여 창을 닫습니다.In the upper-right corner of the Fields pane, close it by selecting the close icon (X).

  8. 수식 입력줄에 이 식을 입력하거나 붙여넣어 양식의 Item 속성을 해당 식으로 설정합니다.Set the Item property of the form to this expression by typing or pasting it in the formula bar:

    BrowseGallery1.Selected

  9. 화면 위쪽에서 레이블 컨트롤을 선택한 다음, [제목]레코드 변경으로 바꿉니다.At the top of the screen, select the Label control, and then replace [Title] with Change records.

    제목 표시줄 변경

화면 삭제 및 이름 바꾸기Delete and rename screens

  1. 왼쪽 탐색 모음에서 Screen1을 선택한 다음, 삭제를 선택합니다.In the left navigation bar, select the ellipsis (...) for Screen1, and then select Delete.

    삭제 화면

  2. Screen2에 대한 줄임표(...)를 선택하고 이름 바꾸기를 선택한 다음, ViewScreen을 입력하거나 붙여넣습니다.Select the ellipsis (...) for Screen2, select Rename, and then type or paste ViewScreen.

  3. Screen3에 대한 줄임표(...)를 선택하고 이름 바꾸기를 선택한 다음, ChangeScreen을 입력하거나 붙여넣습니다.Select the ellipsis (...) for Screen3, select Rename, and then type or paste ChangeScreen.

보기 화면에서 아이콘 구성Configure icons on the view screen

  1. ViewScreen 위쪽 근처에 있는 원형 화살표 아이콘을 선택합니다.Near the top of the ViewScreen, select the circular-arrow icon.

    레코드 추가

  2. 해당 아이콘의 OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property for that icon to this formula:

    Refresh(Schedule)

    사용자가 이 아이콘을 선택하면 Schedule의 데이터가 Excel 파일에서 새로 고쳐집니다.When the user selects this icon, the data from Schedule is refreshed from the Excel file.

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

  3. ViewScreen의 오른쪽 위 모서리에서 더하기 아이콘을 선택합니다.In the upper-right corner of the ViewScreen, select the plus icon.

    레코드 추가

  4. 해당 아이콘의 OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property for that icon to this formula:

    NewForm(EditForm1);Navigate(ChangeScreen,ScreenTransition.None)

    사용자가 이 아이콘을 선택하면 ChangeScreen은 비어 있는 각 필드를 표시하며, 사용자는 레코드를 보다 쉽게 만들 수 있습니다.When the user selects this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

  5. 갤러리의 첫 번째 레코드에 대해 오른쪽 방향 화살표를 선택합니다.Select the right-pointing arrow for the first record in the gallery.

    화살표 선택

  6. 화살표의 OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property for the arrow to this formula:

    EditForm(EditForm1); Navigate(ChangeScreen, ScreenTransition.None)

    사용자가 이 아이콘을 선택하면 ChangeScreen은 선택된 레코드의 데이터를 보여주는 각 필드를 표시하며, 사용자는 레코드를 보다 쉽게 편집 또는 삭제할 수 있습니다.When the user selects this icon, ChangeScreen appears with each field showing the data for the selected record, so that the user can edit or delete the record more easily.

변경 화면에서 아이콘 구성Configure icons on the change screen

  1. ChangeScreen의 오른쪽 위 모서리에서 "X" 아이콘을 선택합니다.On ChangeScreen, select the "X" icon in the upper-left corner.

    취소 아이콘

  2. 해당 아이콘의 OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property for that icon to this formula:

    ResetForm(EditForm1);Navigate(ViewScreen, ScreenTransition.None)

    사용자가 이 아이콘을 선택하면 이 화면에서 사용자가 변경한 모든 내용이 무시되고 보기 화면이 열립니다.When the user selects this icon, any changes that the user made in this screen are discarded, and the view screen opens.

  3. 오른쪽 위 모서리에서 확인 표시 아이콘을 선택합니다.In the upper-right corner, select the checkmark icon.

    확인 표시 아이콘

  4. 확인 표시의 OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property for the checkmark to this formula:

    SubmitForm(EditForm1); Navigate(ViewScreen, ScreenTransition.None)

    사용자가 이 아이콘을 선택하면 이 화면에서 사용자가 변경한 모든 내용이 저장되고 보기 화면이 열립니다.When the user selects this icon, any changes that the user made is this screen are saved, and the view screen opens.

  5. 삽입 탭에서 아이콘을 선택한 다음, 휴지통 아이콘을 선택합니다.On the Insert tab, select Icons, and then select the Trash icon.

  6. 새 아이콘의 Color 속성을 White로 설정하고 새 아이콘을 확인 표시 아이콘 옆에 표시되도록 이동합니다.Set the new icon's Color property to White, and move the new icon so it appears next to the checkmark icon.

    휴지통 아이콘

  7. 휴지통 아이콘의 Visible 속성을 다음 수식으로 설정합니다.Set the Visible property for the trash icon to this formula:

    EditForm1.Mode = FormMode.Edit

    양식이 새로 만들기 모드가 아닌 편집 모드인 경우에만 이 아이콘이 표시됩니다.This icon will appear only when the form is in Edit mode, not in New mode.

  8. 휴지통 아이콘의 OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property for the trash icon to this formula:

    Remove(Schedule, BrowseGallery1.Selected); Navigate(ViewScreen, ScreenTransition.None)

    사용자가 이 아이콘을 선택하면 선택된 레코드가 데이터 원본에서 삭제되고 보기 화면이 열립니다.When the user selects this icon, the selected record is deleted from the data source, and the view screen opens.

앱 테스트Test the app

  1. ViewScreen을 선택한 다음, F5 키를 누르거나 오른쪽 위 모서리 근처의 미리 보기 아이콘을 선택하여 미리 보기를 엽니다.Select the ViewScreen, and then open Preview by pressing F5 (or by selecting the Preview icon near the upper-right corner).

    미리 보기 모드 열기

  2. 검색 상자에 하나 이상의 문자를 입력하거나 붙여넣어서 자원 봉사자의 이름을 기반으로 목록을 필터링합니다.Type or paste one or more letters in the search box to filter the list based on the name of the volunteer.

  3. 정렬 아이콘을 한 번 이상 선택하여 자원 봉사자의 이름에 따라 오름차순 또는 내림차순으로 데이터를 표시합니다.Select the sort icon one or more times to show the data ascending or descending order based on the name of the volunteer.

  4. 레코드를 추가합니다.Add a record.

  5. 추가한 레코드를 업데이트한 다음, 변경 내용을 저장합니다.Update the record that you added, and then save the changes.

  6. 추가한 레코드를 업데이트한 다음, 변경 내용을 취소합니다.Update the record that you added, and then cancel the changes.

  7. 추가한 레코드를 삭제합니다.Delete the record that you added.

  8. Esc 키를 누르거나 오른쪽 위 모서리의 닫기 아이콘을 선택하여 미리 보기 모드를 닫습니다.Close Preview mode by pressing Esc (or by selecting the close icon in the upper-right corner).

다음 단계Next steps

  • 다른 디바이스에서 실행할 수 있도록 앱을 클라우드에 저장하려면 Ctrl-S를 누릅니다.Press Ctrl-S to save your app in the cloud so that you can run it from other devices.
  • 다른 사용자가 앱을 실행할 수 있도록 앱을 공유하세요.Share the app so that other people can run it.
  • 표준 양식을 만들지 않고 데이터를 관리하는 데 사용할 수 있는 Patch와 같은 함수를 자세히 알아보세요.Learn more about functions such as Patch, which you can use to manage data without creating a standard form.
  • 예를 들어 이 앱을 솔루션에 연결하여 다른 환경에 배포하거나 AppSource에 게시할 수 있습니다.Link this app to a solution so that you can, for example, deploy it to a different environment or publish it on AppSource.