프로젝트 요청을 처리할 앱 생성Generate an app to handle project requests

참고: 이 문서는 SharePoint Online에서 PowerApps, Microsoft Flow 및 Power BI를 사용하는 방법에 대한 자습서 시리즈의 일부입니다.Note: This article is part of a tutorial series on using PowerApps, Microsoft Flow, and Power BI with SharePoint Online. 시리즈 소개를 참고하여 관련된 다운로드뿐만 아니라 전체적인 내용을 파악해야 합니다.Make sure you read the series introduction to get a sense of the big picture, as well as related downloads.

SharePoint 목록을 저장했으므로 첫 번째 앱을 빌드하고 사용자 지정할 수 있습니다.Now that the SharePoint lists are in place, we can build and customize our first app. 목록에서 직접 기본 3개 화면 앱을 쉽게 생성하도록 PowerApps는 SharePoint와 통합됩니다.PowerApps is integrated with SharePoint, so it's easy to generate a basic three screen app directly from a list. 이 앱을 사용하면 각 목록 항목에 대한 요약 및 세부 정보를 보고, 기존 목록 항목을 업데이트하고, 새 목록 항목을 만들 수 있습니다.This app allows you to view summary and detailed information for each list item, update existing list items, and create new list items. 목록에서 직접 앱을 만드는 경우 앱은 해당 목록에서 보기로 나타납니다.If you create an app directly from a list, the app appears as a view for that list. 그런 다음 휴대폰뿐만 아니라 브라우저에서 해당 앱을 실행할 수 있습니다.You can then run that app in a browser, as well as on a mobile phone.

팁: 이 시나리오에 대한 다운로드 패키지에는 이 앱의 완성된 버전인 project-requests-app.msapp이 포함되어 있습니다.Tip: The download package for this scenario includes a finished version of this app: project-requests-app.msapp.

1단계: SharePoint 목록에서 앱 생성Step 1: Generate an app from a SharePoint list

  1. 사용자가 만든 프로젝트 요청 목록에서 PowerApps앱 만들기를 클릭하거나 누릅니다.In the Project Requests list you created, click or tap PowerApps, then Create an app.

    앱 만들기

  2. "프로젝트 요청 앱"과 같은 이름을 앱에 지정한 다음 만들기를 클릭하거나 누릅니다.Give the app a name, like "Project Requests app", then click or tap Create. 앱이 준비되면 웹에 PowerApps Studio가 열립니다.When the app is ready, it opens in PowerApps Studio for web.

    앱의 이름 지정

2단계: PowerApps Studio에서 앱 검토Step 2: Review the app in PowerApps Studio

  1. PowerApps Studio의 왼쪽 탐색 모음은 기본적으로 앱에서 화면 및 컨트롤의 계층적 보기를 보여줍니다.In PowerApps Studio, the left navigation bar by default shows a hierarchical view of the screens and controls in the app.

    계층적 보기를 사용하는 PowerApps Studio

  2. 썸네일 아이콘을 클릭하거나 눌러서 보기를 전환합니다.Click or tap the thumbnail icon to switch views.

    PowerApps Studio 보기 선택기

  3. 가운데 창에서 보려는 각 화면을 클릭하거나 누릅니다.Click or tap each screen to view it in the middle pane. 화면에는 세 가지가 있습니다.There are three screens:

    1. 목록에서 데이터를 찾아보고, 정렬하고, 필터링하고 추출할 수 있는 찾아보기 화면The browse screen, where you browse, sort, and filter the data pulled in from the list.
    2. 항목에 대한 자세한 정보를 볼 수 있는 세부 정보 화면The details screen, where you view more detail about an item.
    3. 기존 항목을 편집하거나 새 항목을 만들 수 있는 편집/만들기 화면The edit/create screen, where you edit an existing item or create a new one.

      썸네일 보기를 사용하는 PowerApps Studio

3단계: 앱의 찾아보기 화면 사용자 지정Step 3: Customize the app's browse screen

  1. 찾아보기 화면을 클릭하거나 누릅니다.Click or tap the browse screen.

    이 화면에는 갤러리를 포함하는 레이아웃이 있어서 검색 표시줄 및 정렬 단추와 같은 다른 컨트롤뿐만 아니라 목록 항목을 표시합니다.This screen has a layout that contains a gallery to show list items, as well as other controls, like a search bar and sort button.

  2. 첫 번째 항목을 제외한 레코드를 클릭하거나 눌러서 BrowseGallery1 갤러리를 선택합니다.Select the BrowseGallery1 gallery by clicking or tapping any record except the first one.

    갤러리 찾아보기

  3. 오른쪽 창에서 필드를 업데이트하여 다음 목록이 일치하는지 확인합니다.In the right pane, update the fields to match the following list:

    • RequestDateRequestDate
    • 설명Description
    • 제목Title
    • 요청자Requestor

      갤러리 필드

  4. BrowseGallery1을 선택한 상태에서 항목 속성을 선택합니다.With BrowseGallery1 still selected, select the Items property.

    항목 속성

  5. 수식을 SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending))으로 변경합니다.Change the formula to SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    수식 입력줄

    그러면 PowerApps에서 선택한 기본값 대신 제목 필드별로 정렬하고 검색할 수 있습니다.This allows you to sort and search by the Title field, instead of the default that PowerApps picked. 자세한 정보는 수식 심층 분석을 참조하세요.See Formula deep-dive for more information.

  6. 파일저장을 차례로 클릭하거나 누릅니다.Click or tap File, then Save. 앱으로 돌아가기 아이콘을 클릭하거나 눌러서 앱으로 돌아갑니다.Click or tap Back to app icon to go back to the app.

4단계: 앱의 세부 정보 화면 사용자 지정 및 화면 편집Step 4: Customize the app's details screen and edit screen

  1. 세부 정보 화면을 클릭하거나 누릅니다.Click or tap the details screen.

    이 화면에는 갤러리에서 선택한 항목에 대한 정보를 표시한 표시 양식을 포함하는 다른 레이아웃이 있습니다.This screen has a different layout that contains a display form to show the details for an item selected in the gallery. 항목을 편집하거나 삭제하는 컨트롤 및 찾아보기 화면으로 돌아가는 컨트롤이 있습니다.It has controls to edit and delete items, and to go back to the browse screen.

  2. DetailForm1 표시 양식을 선택합니다.Select the DetailForm1 display form.

    세부 정보 표시 양식

  3. 오른쪽 창에서 제목 필드를 맨 위로 끌어옵니다.In the right pane, drag the Title field to the top.

    제목 필드

  4. 편집 화면을 클릭하거나 누릅니다.Click or tap the edit screen.

    이 화면에는 선택한 항목을 편집하거나 (찾아보기 화면에서 직접 이동한 경우) 새로운 항목을 만드는 편집 양식이 포함됩니다.This screen contains an edit form to edit the selected item, or create a new one (if you come here directly from the browse screen). 변경 내용을 저장하거나 취소하는 컨트롤이 있습니다.It has controls to save or discard changes.

  5. EditForm1 편집 양식을 선택합니다.Select the EditForm1 edit form.

    편집 양식

  6. 위와 같이 제목 필드를 맨 위로 끌어옵니다.As above, drag the Title field to the top.

    제목 필드

5단계: 목록에서 앱 실행Step 5: Run the app from the list

  1. 프로젝트 요청 목록에서 모든 항목프로젝트 요청 앱을 차례로 클릭하거나 누릅니다.In the Project Requests list, click or tap All Items, then Project Requests app.

    프로젝트 요청 보기 앱

  2. 열기를 클릭하면 새 브라우저 탭에서 앱이 열립니다.Click Open, which opens the app in a new browser tab.

    프로젝트 요청 열기 앱

  3. 앱의 찾아보기 갤러리에서 첫 번째 항목의In the app, click or tap 세부 정보 아이콘으로 이동 을 클릭하거나 누릅니다.for the first item in the browse gallery.

    첫 번째 갤러리 항목

  4. 연필 편집 아이콘을Click or tap 클릭하거나 눌러서 항목을 편집합니다.to edit the item.
  5. 설명 필드를 업데이트합니다. 마지막 단어를 "그룹"에서 "팀"으로 변경한 다음 확인 표시 아이콘을 클릭하거나 누릅니다.Update the Description field – change the last word from "group" to "team," then click or tap Check mark icon

    설명 필드 업데이트

  6. 브라우저 탭을 닫습니다.Close the browser tab.
  7. 프로젝트 요청 목록으로 이동하고, 프로젝트 요청 앱모든 항목을 차례로 클릭하거나 누릅니다.Go back to the Project Requests list, click or tap Project Requests app, then All Items.

    모든 항목 보기

  8. 앱에서 수행한 변경 내용을 확인합니다.Verify the change you made from the app.

    편집 확인

아주 간단한 앱이며 몇 가지 기본 사용자 지정만 수행했지만 흥미로운 기능을 신속하게 빌드할 수 있습니다.This is a pretty simple app, and we only made a few basic customizations, but you can see it's possible to quickly build something interesting. 다음 작업으로 이동하겠습니다. 하지만 원하신다면 앱에 대해 좀 더 살펴보고 컨트롤 및 수식이 함께 작동하여 앱 동작을 구현하는 방법을 확인합니다.We're going to move on to the next task, but look around the app a little more if you want, and see how the controls and formulas work together to drive app behavior.

수식 심층 분석Formula deep-dive

이 섹션은 옵션이지만 수식이 작동하는 방법에 대해 자세히 이해할 수 있습니다.This section is optional, but it will help you understand more about how formulas work. 이 작업의 3단계에서 BrowseGallery1에 있는 항목 속성의 수식을 수정했습니다.In step 3 of this task, we modified the formula for the Items property of BrowseGallery1. 특히 선택한 PowerApps 필드 대신 제목 필드를 사용하도록 정렬 및 검색 방법을 변경했습니다.Specifically, we changed the sort and search to use the Title field, instead of the field that PowerApps picked. 수정한 수식은 다음과 같습니다.Here's the modified formula:

SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )

하지만 이 수식에서 수행하는 작업은 무엇인가요?But what does this formula do? 갤러리에서 나타나는 데이터 원본을 결정하고, 검색 상자에 입력한 텍스트에 따라 데이터를 필터링하고, 앱에 표시되는 정렬 단추에 따라 결과를 정렬합니다.It determines the source of data that appears in the gallery, filters the data based on any text entered in the search box, and sorts the results based on the sort button in the app. 수식은 함수를 사용하여 해당 작업을 수행합니다.The formula uses functions to do its work. 함수는 매개 변수(예: 입력)를 사용하고, 작업(예: 필터링)을 수행하고, 값(예: 출력)을 반환합니다.Functions take parameters (i.e. input), perform an operation (like filtering), and return a value (i.e. output):

  • SortByColumns 함수는 하나 이상의 열을 기준으로 테이블을 정렬합니다.The SortByColumns function sorts a table based on one or more columns.
  • Filter 함수는 지정한 수식을 충족하는 테이블에서 레코드를 찾습니다.The Filter function finds the records in a table that satisfy a formula that you specify.
  • StartsWith 함수는 텍스트 문자열이 다른 텍스트 문자열로 시작하는지 테스트합니다.The StartsWith function tests whether one text string begins with another.
  • If 함수는 조건이 true인 경우 하나의 값을 반환하고 동일한 조건이 false인 경우 다른 값을 반환합니다.The If function returns one value if a condition is true, and returns another value if the same condition is false.

수식에 함수를 함께 배치하면 다음과 같은 상황이 발생합니다.When you put the functions together in the formula, here's what happens:

  1. 검색 상자에 텍스트를 입력하는 경우 StartsWith 함수는 해당 텍스트를 목록의 제목 열에서 각 문자열의 시작 부분과 비교합니다.If you enter text in the search box, the StartsWith function compares that text to the start of each string in the Title column of the list.

    StartsWith ( Title, TextSearchBox1.Text )StartsWith ( Title, TextSearchBox1.Text )

    예를 들어 검색 상자에 "de"를 입력하는 경우 "Desktop" 및 "Device"로 시작하는 항목을 비롯한 4개의 결과가 표시됩니다.For example, if you enter "de" in the search box, you see four results, including items that start with "Desktop" and "Device." 모든 "Mobile devices" 항목은 "de"로 시작하지 않기 때문에 표시되지 않습니다.You won't see all the "Mobile devices" items because those don't start with "de."

  2. 필터 함수는 프로젝트 요청 테이블에서 행을 반환합니다.The Filter function returns rows from the Project Requests table. 비교할 검색 상자에 텍스트가 없으면 필터는 모든 행을 반환합니다.If there is no text in the search box to compare, Filter returns all rows.

    Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )

  3. If 함수는 SortDescending1 변수가 true 또는 false로 설정되었는지를 확인합니다(앱에서 정렬 단추로 설정).The If function looks at whether the variable SortDescending1 is set to true or false (the sort button in the app sets it). 그러면 함수는 내림차순 또는 오름차순의 값을 반환합니다.The function then returns a value of Descending or Ascending.

    If ( SortDescending1, Descending, Ascending )If ( SortDescending1, Descending, Ascending )

  4. 이제 SortByColumns 함수는 갤러리를 정렬할 수 있습니다.Now the SortByColumns function can sort the gallery. 이 경우에 제목 필드에 따라 정렬하지만 검색 필드가 아닌 다른 필드일 수 있습니다.In this case, it sorts based on the Title field, but this can be a different field than the one you search on.

이 지점까지 수행한 경우 사용자가 이 수식의 작동 방식 및 함수 및 기타 요소를 결합하여 앱에서 필요한 동작을 실행하는 방법을 이해할 수 있을 것입니다.If you stuck with us up to this point, we hope you have a better sense of how this formula works, and how you can combine functions and other elements to drive the behavior your apps require. 자세한 내용은 PowerApps에 대한 수식 참조를 참조하세요.For more information, see Formula reference for PowerApps.

다음 단계Next steps

이 자습서 시리즈의 다음 단계에서는 프로젝트 승인을 관리하는 흐름을 만듭니다.The next step in this tutorial series is to Create a flow to manage project approvals.