Excel 데이터를 기반으로 처음부터 캔버스 앱 만들기

표 형식의 Excel 데이터를 기반으로 처음부터 고유한 캔버스 앱을 만든 다음 원하는 경우 다른 원본의 데이터를 추가합니다. 이 자습서를 따라 두 화면을 포함하는 앱을 만듭니다. 한 화면에서 사용자는 일련의 레코드를 검색할 수 있습니다. 다른 화면에서 사용자는 한 레코드를 만들거나, 한 레코드에서 하나 이상의 필드를 업데이트하거나, 전체 레코드를 삭제할 수 있습니다. 이 방법은 Excel에서 기본 앱 만들기보다 시간이 더 걸리지만 숙련된 앱 제작자는 이 방법으로 요구 사항에 맞는 최고의 앱을 빌드할 수 있습니다.

필수 구성 요소

이 자습서의 단계를 정확하게 수행하려면 먼저 이 샘플 데이터를 사용하여 Excel 파일을 만드십시오.

  1. 이 데이터를 복사한 다음 Excel 파일에 붙여넣습니다.

    StartDay StartTime 자원 봉사자 백업
    토요일 오전 10시~정오 Vasquez Kumashiro
    토요일 정오~오후 2시 Ice Singhal
    토요일 오후 2시~오후 4시 Myk Mueller
    일요일 오전 10시~정오 Li Adams
    일요일 정오~오후 2시 Singh Morgan
    일요일 오후 2시~오후 4시 Batye Nguyen
  2. Power Apps에서 정보를 구문 분석할 수 있도록 해당 데이터를 Schedule 이라는 테이블로 형식을 지정합니다.

    자세한 내용은 Excel에서 테이블 형식 지정을 참조하십시오.

  3. 파일을 eventsignup.xlsx 라는 이름으로 저장하고 닫은 다음 OneDrive와 같은 클라우드 스토리지 계정에 업로드합니다.

중요

사용자의 Excel 파일을 사용할 수 있으며 일반 개념에 대해서만 이 자습서를 검토할 수 있습니다. 그러나 Excel 파일의 데이터는 테이블로 형식을 지정해야 합니다. 자세한 내용은 Excel에서 테이블 형식 지정을 참조하십시오.

비어 있는 앱 열기

  1. Power Apps에 로그인합니다.

  2. 고유한 앱 만들기 에서 빈 페이지의 캔버스 앱 을 선택합니다.

    빈 캔버스 앱 만들기

  3. 앱의 이름을 지정하고, 휴대 전화 을 선택한 다음, 만들기 를 선택합니다.

    휴대폰 또는 다른 디바이스(예: 태블릿)에 사용할 앱을 처음부터 디자인할 수 있습니다. 이 항목에서는 휴대폰용 앱 디자인에 대해 중점적으로 설명합니다.

    앱의 이름 및 형식 지정

    Power Apps Studio에서는 휴대폰용 빈 앱을 만듭니다.

  4. Welcome to Power Apps Studio 대화 상자가 나타나면 Skip 을 선택합니다.

데이터에 연결

  1. 화면 가운데에서 데이터에 연결 을 선택합니다.

  2. Data 창에서 연결이 표시되면 클라우드 스토리지 계정에 대한 연결을 선택합니다. 연결이 표시되지 않으면 다음 단계에 따라 연결을 추가합니다.

    1. New connection 을 선택하고 클라우드 스토리지 계정의 타일을 선택한 다음, Create 를 선택합니다.
    2. 메시지가 표시되면 해당 계정에 대한 자격 증명을 입력합니다.
  3. Choose an Excel file 에서 eventsignup 의 첫 문자를 입력하거나 붙여넣어 목록을 필터링한 다음, 업로드한 파일을 선택합니다.

  4. Choose a table 에서 Schedule 확인란을 선택한 다음, Connect 를 선택합니다.

  5. Data 창의 오른쪽 위 모서리에서 닫기 아이콘(X)을 선택하여 창을 닫습니다.

화면 보기 만들기

  1. Home 탭에서 New screen 옆에 있는 아래쪽 화살표를 선택하여 화면 유형 목록을 연 다음, List 를 선택합니다.

    화면에 검색 상자와 Gallery 컨트롤 등 여러 기본 컨트롤이 추가됩니다. 갤러리는 검색 상자에서 전체 화면을 처리합니다.

  2. 새 화면 위쪽에서 Label 컨트롤을 선택한 다음, [Title]View records 로 바꿉니다.

    제목 표시줄 변경

  3. 왼쪽 탐색 모음에서 BrowseGallery1 을 선택합니다.

    핸들이 있는 선택 상자가 갤러리를 둘러쌉니다.

    목록 추가 화면

  4. 오른쪽 창의 Properties 탭에서 Layout 메뉴의 아래쪽 화살표를 선택합니다.

    레이아웃 메뉴를 엽니다.

  5. Title, subtitle, and body 를 선택합니다.

  6. 수식 입력줄에서 CustomGallerySampleSchedule 로 바꾸고, SampleText 의 두 인스턴스를 Volunteer 로 바꿉니다.

  7. 수식 입력줄의 오른쪽 가장자리에서 아래쪽 화살표를 선택한 다음, Format text 를 선택합니다.

    수식은 다음 예제와 일치합니다.

    SortByColumns(
        Search(
            Schedule,
            TextSearchBox1.Text,
            "Volunteer"
        ),
        "Volunteer",
        If(
            SortDescending1,
            SortOrder.Descending,
            SortOrder.Ascending
        )
    )
    
  8. 오른쪽 창의 Properties 탭에서 Fields 레이블 옆에 있는 Edit 를 선택합니다.

  9. Title2 상자에서 Volunteer 를, Subtitle2 상자에서 StartDay 를, Body1 상자에서 StartTime 을 선택합니다.

  10. Data 창의 오른쪽 위 모서리에서 닫기 아이콘(X)을 선택하여 창을 닫습니다.

사용자는 해당 수식의 SortByColumnsSearch 함수를 기반으로 갤러리를 자원봉사자 이름별로 정렬 및 필터링할 수 있습니다.

  • 사용자가 검색 상자에 하나 이상의 문자를 입력하면 갤러리에 사용자가 입력한 텍스트를 포함하는 Volunteer 필드에 대한 레코드만 표시됩니다.
  • 사용자가 제목 표시줄에서 새로 고침 단추와 더하기 단추 사이에 있는 정렬 단추를 선택하면 갤러리에 Volunteer 필드를 기준으로 사용자가 단추를 선택한 횟수에 따라 레코드가 오름차순 또는 내림차순으로 표시됩니다.

이러한 함수 및 다른 함수에 대한 자세한 내용은 수식 참조를 참조하십시오.

화면 변경 만들기

  1. Home 탭에서 New screen 옆에 있는 아래쪽 화살표를 선택한 다음 Form 을 선택합니다.

  2. 왼쪽 탐색 모음에서 EditForm1 을 선택합니다.

  3. 오른쪽 창의 Properties 탭에서 Data source 옆에 있는 아래쪽 화살표를 선택한 다음 나타나는 목록에서 Schedule 을 선택합니다.

  4. 방금 지정한 데이터 원본에서 Edit fields 를 선택합니다.

  5. Fields 창에서 Add field 를 선택하고, 각 필드에 대한 확인란을 선택한 다음, Add 를 선택합니다.

  6. 각 필드의 이름 옆에 있는 화살표를 선택하여 축소한 다음, Volunteer 필드를 위로 끌어서 필드 목록의 위쪽에 표시되도록 합니다.

    필드 순서 바꾸기

  7. Fields 창의 오른쪽 위 모서리에서 닫기 아이콘(X)을 선택하여 창을 닫습니다.

  8. 수식 입력줄에 다음 식을 입력하거나 붙여넣어 양식의 Item 속성을 다음 식으로 설정합니다.

    BrowseGallery1.Selected

  9. 화면 위쪽에서 Label 컨트롤을 선택한 다음, [Title]Change records 로 바꿉니다.

    제목 표시줄 변경

화면 삭제 및 이름 바꾸기

  1. 왼쪽 탐색 모음에서 Screen1 을 선택한 다음, Delete 를 선택합니다.

    화면 삭제

  2. Screen2 에 대한 줄임표(...)를 선택하고 Rename 을 선택한 다음, ViewScreen 을 입력하거나 붙여넣습니다.

  3. Screen3 에 대한 줄임표(...)를 선택하고 Rename 을 선택한 다음, ChangeScreen 을 입력하거나 붙여넣습니다.

화면 보기에서 아이콘 구성

  1. ViewScreen 위쪽 근처에 있는 원형 화살표 아이콘을 선택합니다.

    레코드 추가

  2. 해당 아이콘의 OnSelect 속성을 다음 수식으로 설정합니다.

    Refresh(Schedule)

    사용자가 이 아이콘을 선택하면 Schedule 의 데이터가 Excel 파일에서 새로 고쳐집니다.

    이 함수와 다른 함수에 대한 자세한 내용은 수식 참조를 참조하십시오.

  3. ViewScreen 의 오른쪽 위 모서리에서 더하기 아이콘을 선택합니다.

    레코드 추가

  4. 해당 아이콘의 OnSelect 속성을 다음 수식으로 설정합니다.

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

    사용자가 이 아이콘을 선택하면 ChangeScreen 이 각 필드가 비어 있는 상태로 나타나며, 사용자는 레코드를 보다 쉽게 만들 수 있습니다.

  5. 갤러리의 첫 번째 레코드에 대해 오른쪽 방향 화살표를 선택합니다.

    화살표 선택

  6. 화살표의 OnSelect 속성을 다음 수식으로 설정합니다.

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

    사용자가 이 아이콘을 선택하면 ChangeScreen 이 각 필드에 선택한 레코드의 데이터가 표시된 상태로 나타나며, 사용자는 레코드를 보다 쉽게 편집 또는 삭제할 수 있습니다.

화면 변경에서 아이콘 구성

  1. ChangeScreen 의 오른쪽 위 모서리에서 "X" 아이콘을 선택합니다.

    취소 아이콘

  2. 해당 아이콘의 OnSelect 속성을 다음 수식으로 설정합니다.

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

    사용자가 이 아이콘을 선택하면 이 화면에서 사용자가 변경한 모든 내용이 무시되고 화면 보기가 열립니다.

  3. 오른쪽 위 모서리에서 확인 표시 아이콘을 선택합니다.

    확인 표시 아이콘

  4. 확인 표시의 OnSelect 속성을 다음 수식으로 설정합니다.

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

    사용자가 이 아이콘을 선택하면 이 화면에서 사용자가 변경한 모든 내용이 저장되고 화면 보기가 열립니다.

  5. Insert 탭에서 Icons 을 선택한 다음, Trash 아이콘을 선택합니다.

  6. 새 아이콘의 Color 속성을 White 로 설정하고 새 아이콘을 확인 표시 아이콘 옆에 표시되도록 이동합니다.

    휴지통 아이콘

  7. 휴지통 아이콘의 Visible 속성을 다음 수식으로 설정합니다.

    EditForm1.Mode = FormMode.Edit

    양식이 New 모드가 아닌 Edit 모드인 경우에만 이 아이콘이 표시됩니다.

  8. 휴지통 아이콘의 OnSelect 속성을 다음 수식으로 설정합니다.

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

    사용자가 이 아이콘을 선택하면 선택한 레코드가 데이터 원본에서 삭제되고 화면 보기가 열립니다.

앱 테스트

  1. ViewScreen 을 선택한 다음, F5 키를 누르거나 오른쪽 위 모서리 근처의 Preview 아이콘을 선택하여 미리 보기를 엽니다.

    미리 보기 모드 열기

  2. 검색 상자에 하나 이상의 문자를 입력하거나 붙여넣어서 자원 봉사자의 이름을 기반으로 목록을 필터링합니다.

  3. 정렬 아이콘을 한 번 이상 선택하여 자원 봉사자을 기준으로 데이터를 오름차순 또는 내림차순으로 표시합니다.

  4. 레코드를 추가합니다.

  5. 추가한 레코드를 업데이트한 다음 변경 내용을 저장합니다.

  6. 추가한 레코드를 업데이트한 다음 변경 내용을 취소합니다.

  7. 추가한 레코드를 삭제합니다.

  8. Esc를 누르거나 오른쪽 위 모서리의 닫기 아이콘을 선택하여 미리 보기 모드를 닫습니다.

다음 단계

  • 다른 디바이스에서 실행할 수 있도록 앱을 클라우드에 저장하려면 Ctrl-S를 누르십시오.
  • 다른 사용자가 앱을 실행할 수 있도록 앱 공유를 수행하십시오.
  • 표준 양식을 만들지 않고 데이터를 관리하는 데 사용할 수 있는 Patch 와 같은 함수에 대해 자세히 알아봅니다.
  • 예를 들어 이 앱을 솔루션에 연결하여 다른 환경에 배포하거나 AppSource에 게시할 수 있습니다.