Microsoft PowerApps 데이터 양식에 대한 이해Understand data forms in Microsoft PowerApps

세 가지 유형의 컨트롤을 추가하여 사용자가 레코드를 찾아보고, 해당 레코드에 대한 세부 정보를 표시하고, 레코드를 편집하거나 만들 수 있습니다.Add three types of controls so that the user can browse for a record, display details about that record, and edit or create a record:

작업Activity 컨트롤Control 설명Description
레코드 찾아보기Browse for a record 갤러리 컨트롤Gallery control 데이터 원본의 레코드를 필터링, 정렬, 검색 및 스크롤하고 특정 레코드를 선택합니다.Filter, sort, search, and scroll through records in a data source, and select a specific record. 작은 화면에서도 한 번에 여러 레코드를 표시할 수 있도록 각 레코드의 일부 필드만 표시합니다.Display only a few fields from each record to show several records at a time, even on a small screen.
레코드 세부 정보 표시Show details of a record 표시 양식 컨트롤Display form control 단일 레코드의 경우 해당 레코드에 여러 또는 모든 필드를 표시합니다.For a single record, display many or all fields in that record.
레코드 만들기 또는 편집Edit or create a record 편집 양식 컨트롤Edit form control 단일 레코드에서 하나 이상의 필드를 업데이트(또는 기본값으로 시작하는 레코드 만들기)하고, 변경 내용을 기본 데이터 원본에 다시 저장합니다.Update one or more fields in a single record (or create a record starting with default values), and save those changes back to the underlying data source.

더 쉽게 구분할 수 있도록 각 컨트롤을 다른 화면에 배치합니다.Put each control on a different screen to make them easier to distinguish:

3개 화면에 걸쳐 있는 레코드 찾아보기, 보기 및 편집

이 항목에서 설명한 대로 이러한 컨트롤을 수식과 결합하여 전체 사용자 환경을 만듭니다.As this topic describes, combine these controls with formulas to create the overall user experience.

필수 조건Prerequisites

  • PowerApps에 등록하여 설치하고 연 다음 등록 시 사용했던 동일한 자격 증명으로 로그인합니다.Sign up for PowerApps, install it, open it, and then sign in by providing the same credentials that you used to sign up.
  • PowerApps에서 컨트롤 구성을 어떻게 하는지 알아봅니다.Learn how to configure a control in PowerApps.

생성된 앱 탐색Explore a generated app

PowerApps는 지정한 데이터 원본을 기반으로 하는 앱을 자동으로 생성할 수 있습니다.PowerApps can automatically generate an app based on a data source that you specify. 각 앱에는 앞에서 설명한 컨트롤과 이를 연결하는 수식이 포함된 3개의 화면이 있습니다.Each app contains three screens with the controls described earlier and formulas that connect them. 이러한 앱을 "기본적으로(out of the box)" 실행하고, 특정 목표에 맞게 사용자 지정하거나 작동 방식을 검토하여 자신의 앱에 적용되는 유용한 개념을 알아봅니다.Run these apps "out of the box," customize them for your specific goals, or examine how they work so that you can learn useful concepts that apply to your own apps. 다음 섹션에서는 생성된 앱을 구동하는 화면, 컨트롤 및 수식을 검사합니다.In the following sections, inspect the screens, controls, and formulas that drive a generated app.

찾아보기 화면Browse screen

찾아보기 화면 컨트롤

이 화면에는 다음과 같은 주요 수식이 있습니다.This screen features these key formulas:

컨트롤Control 지원되는 동작Supported behavior 수식Formula
BrowseGallery1BrowseGallery1 Assets 데이터 원본의 레코드를 표시합니다.Display records from the Assets data source. 갤러리의 Items 속성이 Assets 데이터 원본을 기반으로 하는 수식으로 설정됩니다.The Items property of the gallery is set to a formula that's based on the Assets data source.
ImageNewItem1ImageNewItem1 사용자가 레코드를 쉽게 만들 수 있도록 각 필드가 기본값으로 설정된 편집 및 만들기 화면을 표시합니다.Display the Edit and Create screen with each field set to a default value, so that the user can easily create a record. 이미지의 OnSelect 속성이 다음 수식으로 설정됩니다.The OnSelect property of the image is set to this formula:
NewForm( EditForm1 );
Navigate( EditScreen1, None )
NewForm( EditForm1 );
Navigate( EditScreen1, None )
NextArrow1(갤러리에서)NextArrow1 (in the gallery) 현재 선택한 레코드의 여러 또는 모든 필드를 볼 수 있도록 세부 정보 화면을 표시합니다.Display the Details screen to view many or all fields of the currently selected record. 화살표의 OnSelect 속성이 다음 수식으로 설정됩니다.The OnSelect property of the arrow is set to this formula:
Navigate( DetailScreen1, None )Navigate( DetailScreen1, None )

이 화면의 기본 컨트롤인 BrowseGallery1은 화면의 영역 대부분을 포함합니다.The primary control on this screen, BrowseGallery1, covers most of the area of the screen. 사용자는 갤러리를 스크롤하여 더 많은 필드를 표시하거나 업데이트할 특정 레코드를 찾을 수 있습니다.The user can scroll through the gallery to find a specific record to display more fields or to update.

데이터 원본의 레코드를 표시하도록 갤러리의 Items 속성을 설정합니다.Set the Items property of a gallery to show records from a data source in it. 예를 들어 해당 속성을 Assets로 설정하여 해당 이름의 데이터 원본에 있는 레코드를 표시합니다.For example, set that property to Assets to show records from a data source of that name.

참고: 생성된 앱에서 사용자가 레코드를 정렬하고 검색할 수 있도록 Items가 기본적으로 훨씬 더 복잡한 수식으로 설정됩니다.Note: In a generated app, Items is set to a significantly more complicated formula by default so that the user can sort and search for records. 이 항목의 뒷부분에서 해당 수식을 작성하는 방법을 알아보겠지만, 지금은 간단한 버전으로도 충분합니다.You'll learn how to build that formula later in this topic; the simpler version is enough for now.

사용자는 표시하거나 편집할 레코드를 찾는 대신 갤러리 위쪽에 있는 "+" 기호를 선택하여 레코드를 만들 수 있습니다.Instead of finding a record to display or edit, the user can create a record by selecting the "+" symbol above the gallery. 이 효과는 이미지 컨트롤을 추가하고, 그 안에 "+" 기호를 표시하고, OnSelect 속성을 다음 수식으로 설정하여 만듭니다.Create this effect by adding an Image control, showing a "+" symbol in it, and setting its OnSelect property to this formula:
NewForm( EditForm1 ); Navigate( EditScreen1, None )NewForm( EditForm1 ); Navigate( EditScreen1, None )

이 수식은 EditForm1이라는 편집 양식 컨트롤이 있는 편집 및 만들기 화면을 엽니다.This formula opens the Edit and Create screen, which features an Edit form control named EditForm1. 또한 이 수식은 해당 양식을 New 모드로 전환합니다. 이 모드에서는 양식에서 데이터 원본의 기본값을 표시하므로 사용자가 처음부터 레코드를 쉽게 만들 수 있습니다.The formula also switches that form into New mode, in which the form shows default values from the data source so that the user can easily create a record from scratch.

BrowseGallery1에서 표시되는 모든 컨트롤을 검사하려면 해당 갤러리의 첫 번째 섹션에서 다른 섹션의 템플릿으로 사용되는 컨트롤을 선택합니다.To examine any control that appears in BrowseGallery1, select that control in the first section of that gallery, which serves as a template for all other sections. 예를 들어 왼쪽 가장자리에서 가운데 레이블 컨트롤을 선택합니다.For example, select the middle Label control on the left edge:

찾아보기 화면 컨트롤

이 예제에서는 컨트롤의 Text 속성이 Assets 데이터 원본의 필드인 ThisItem.AssignedTo로 설정됩니다.In this example, the control's Text property is set to ThisItem.AssignedTo, which is a field in the Assets data source. 갤러리의 다른 세 레이블 컨트롤의 Text 속성은 비슷한 수식으로 설정되며, 각 컨트롤은 데이터 원본의 다른 필드를 표시합니다.The Text property of the other three Label controls in the gallery are set to similar formulas, and each control shows a different field in the data source.

도형 컨트롤(화살표)을 선택하고, OnSelect 속성이 다음 수식으로 설정되어 있는지 확인합니다.Select the Shape control (the arrow), and confirm that its OnSelect property is set to this formula:
Navigate( DetailScreen1, None )Navigate( DetailScreen1, None )

사용자가 BrowseGallery1에서 레코드를 찾으면 해당 레코드의 화살표를 선택하여 DetailScreen1에 대한 세부 정보를 표시할 수 있습니다.If the user finds a record in BrowseGallery1, the user can select the arrow for that record to show more information about it in DetailScreen1. 화살표를 선택하여 사용자는 BrowseGallery1Selected 속성 값을 변경합니다.By selecting an arrow, the user changes the value of the Selected property of BrowseGallery1. 이 앱에서 해당 속성은 DetailScreen1뿐만 아니라 사용자가 레코드를 업데이트하도록 결정한 경우 편집 및 만들기 화면에도 표시할 레코드를 결정합니다.In this app, that property determines which record appears in not only DetailScreen1 but also, if the user decides to update the record, the Edit and Create screen.

세부 정보 화면Detail screen

세부 정보 화면 컨트롤

이 화면에는 다음과 같은 주요 수식이 있습니다.This screen features these key formulas:

컨트롤Control 지원되는 동작Supported behavior 수식Formula
DetailForm1DetailForm1 Assets 데이터 원본의 레코드를 표시합니다.Displays a record in the Assets data source DataSource 속성을 Assets로 설정합니다.Set the DataSource property to Assets.
DetailForm1DetailForm1 표시할 레코드를 결정합니다.Determines which record to display. 생성된 앱에서 사용자가 갤러리에서 선택한 레코드를 표시합니다.In a generated app, displays the record that the user selected in the gallery. 이 컨트롤의 Item 속성을 다음 값으로 설정합니다.Set the Item property of this control to this value:
BrowseGallery1.SelectedBrowseGallery1.Selected
카드 컨트롤Card controls 표시 양식 컨트롤에서 레코드의 단일 필드를 표시합니다.In a Display form control, displays a single field in a record. DataField 속성을 큰따옴표로 묶은 필드 이름으로 설정합니다(예: "Name").Set the DataField property to the name of a field, enclosed in double quotation marks (for example, "Name").
ImageBackArrow1ImageBackArrow1 사용자가 이 컨트롤을 선택하면 BrowseScreen1이 열립니다.When the user selects this control, opens BrowseScreen1. OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property to this formula:
Back()Back()
ImageDelete1ImageDelete1 사용자가 이 컨트롤을 선택하면 레코드를 삭제합니다.When the user selects this control, deletes a record. OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property to this formula:
Remove( Assets, BrowseGallery1.Selected )Remove( Assets, BrowseGallery1.Selected )
ImageEdit1ImageEdit1 사용자가 이 컨트롤을 선택하면 현재 레코드에 대한 편집 및 만들기 화면이 열립니다.When the user selects this control, opens the Edit and Create screen to the current record. OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property to this formula:
Navigate( EditScreen1, None )Navigate( EditScreen1, None )

화면 위쪽에서 세 개의 이미지가 DetailForm1 외부에 있으며 단추로 작동하여 앱의 세 화면을 오케스트레이션합니다.At the top of the screen, three images sit outside of DetailForm1 and act as buttons, orchestrating between the three screens of the app.

DetailForm1은 이 화면을 지배하고 사용자가 갤러리에서 선택한 레코드를 표시합니다(양식의 Item 속성이 BrowseGallery1.Selected로 설정되었기 때문).DetailForm1 dominates this screen and displays the record that the user selected in the gallery (because the form's Item property is set to BrowseGallery1.Selected). 양식의 DataSource 속성은 각 필드의 사용자에게 친숙한 표시 이름과 같은 데이터 원본에 대한 메타데이터도 제공합니다.The DataSource property of the form also provides metadata about the data source, such as a user-friendly display name for each field.

DetailForm1에는 여러 카드 컨트롤이 포함되어 있습니다.DetailForm1 contains several Card controls. 카드 컨트롤 자체 또는 포함된 컨트롤을 선택하여 추가 정보를 검색할 수 있습니다.You can select either the Card control itself or the control that it contains to discover additional information.

제작 환경에서 선택한 세부 정보 카드 및 카드 컨트롤

카드 컨트롤의 DataField 속성은 카드에서 표시하는 필드를 결정합니다.The DataField property of a Card control determines which field the card displays. 이 경우 해당 속성은 AssetID로 설정됩니다.In this case, that property is set to AssetID. 카드에는 Text 속성이 Parent.Default로 설정된 레이블 컨트롤이 있습니다.The card contains a Label control for which the Text property is set to Parent.Default. 이 컨트롤은 카드에 대한 Default 값을 표시하며, 이 값은 DataField 속성을 통해 설정됩니다.This control shows the Default value for the card, which is set through the DataField property.

생성된 앱에서 카드 컨트롤은 기본적으로 잠겨 있습니다.In a generated app, Card controls are locked by default. 카드가 잠겨 있으면 DataField와 같은 일부 속성을 수정할 수 없으며 해당 속성에는 수식 입력줄을 사용할 수 없습니다.When a card is locked, you can't modify some properties, such as DataField, and the formula bar is unavailable for those properties. 이 제한은 사용자 지정이 생성된 앱의 기본 기능을 손상시키지 않도록 합니다.This restriction helps ensure that your customizations don't break the basic functionality of the generated app. 그러나 오른쪽 창에서 카드 및 해당 컨트롤의 속성 일부를 변경할 수 있습니다.However, you can change some properties of a card and its controls in the right-hand pane:

옵션 창이 열려 있는 세부 정보 화면

오른쪽 창에서 표시할 필드와 각 필드에서 표시하는 컨트롤의 종류를 선택할 수 있습니다.In the right-hand pane, you can select which fields to display and in which kind of control each field displays.

편집/만들기 화면Edit/Create screen

편집 화면 컨트롤

이 화면에는 다음과 같은 주요 수식이 있습니다.This screen features these key formulas:

컨트롤Control 지원되는 동작Supported behavior 수식Formula
EditForm1EditForm1 Assets 데이터 원본의 레코드를 표시합니다.Displays a record in the Assets data source. DataSource 속성을 Assets로 설정합니다.Set the DataSource property to Assets.
EditForm1EditForm1 표시할 레코드를 결정합니다.Determines which record to display. 생성된 앱에서 사용자가 BrowseScreen1에서 선택한 레코드를 표시합니다.In a generated app, displays the record that the user selected in BrowseScreen1. Item 속성을 다음 값으로 설정합니다.Set the Item property to this value:
BrowseGallery1.SelectedBrowseGallery1.Selected
카드 컨트롤Card controls 편집 양식 컨트롤에서 사용자가 레코드의 필드를 하나 이상 편집할 수 있도록 컨트롤을 제공합니다.In a Edit form control, provides controls so that the user can edit one or more fields in a record. DataField 속성을 큰따옴표로 묶은 필드 이름으로 설정합니다(예: "Name").Set the DataField property to the name of a field, enclosed in double quotation marks (for example, "Name").
ImageCancel1ImageCancel1 사용자가 이 컨트롤을 선택하면 진행 중인 변경 내용을 삭제하고 세부 정보 화면이 열립니다.When the user selects this control, discards any changes in progress, and opens the Details screen. OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property to this formula:
ResetForm( EditForm1 ); Back()ResetForm( EditForm1 ); Back()
ImageAccept1ImageAccept1 사용자가 이 컨트롤을 선택하면 변경 내용을 데이터 원본에 제출합니다.When the user selects this control, submits changes to the data source. OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property to this formula:
SubmitForm( EditForm1 )SubmitForm( EditForm1 )
EditForm1EditForm1 변경 내용이 승인되면 이전 화면으로 돌아갑니다.If changes are accepted, returns to the previous screen. OnSuccess 속성을 다음 수식으로 설정합니다.Set the OnSuccess property to this formula:
Back()Back()
EditForm1EditForm1 변경 내용이 승인되지 않으면 사용자가 문제를 해결하고 다시 제출할 수 있도록 현재 화면에 남아 있습니다.If changes aren't accepted, remain on the current screen so that the user can fix any issues and try to submit again. OnFailure 속성을 비워둡니다.Leave the OnFailure property blank.
LblFormError1LblFormError1 변경 내용이 승인되지 않으면 오류 메시지를 표시합니다.If changes aren't accepted, shows an error message. Text 속성을 다음 값으로 설정합니다.Set the Text property to this value:
EditForm1.ErrorEditForm1.Error

세부 정보 화면에서처럼 EditForm1이라는 양식 컨트롤이 편집 및 만들기 화면을 지배합니다.As in the Details screen, a form control, named EditForm1, dominates the Edit and Create screen. 또한 EditForm1Item 속성이 BrowseGallery1.Selected로 설정되므로 사용자가 BrowseScreen1에서 선택한 레코드가 양식에 표시됩니다 .In addition, the Item property of EditForm1 is set to BrowseGallery1.Selected, so the form displays the record that the user selected in BrowseScreen1. 세부 정보 화면은 각 필드를 읽기 전용으로 표시하지만, 사용자는 EditForm1의 컨트롤을 사용하여 하나 이상의 필드 값을 업데이트할 수 있습니다.While the Details screen shows each field as read-only, the user can update the value of one or more fields by using the controls in EditForm1. 또한 DataSource 속성을 사용하여 각 필드의 사용자에게 친숙한 표시 이름과 변경 내용을 저장해야 하는 위치와 같은 이 데이터 원본에 대한 메타데이터에 액세스합니다.It also uses the DataSource property to access metadata about this data source, such as the user-friendly display name for each field and the location where changes should be saved.

사용자가 업데이트를 취소하기 위해 "X" 아이콘을 선택하면 ResetForm 함수에서 저장되지 않은 변경 내용을 삭제하고, Back 함수에서 세부 정보 화면을 엽니다.If the user selects the "X" icon to cancel an update, the ResetForm function discards any unsaved changes, and the Back function opens the Details screen. 사용자가 BrowseScreen1에서 다른 레코드를 선택할 때까지 세부 정보 화면과 편집 및 만들기 화면 모두에서 동일한 레코드를 표시합니다.Both the Details screen and the Edit and Create screen show the same record until the user selects a different one on BrowseScreen1. 해당 레코드의 필드는 사용자가 변경한 다음 중단한 변경 내용이 아니라 가장 최근에 저장된 값으로 설정된 상태로 유지됩니다.The fields in that record remain set to the values that were most recently saved, not any changes that the user made and then abandoned.

사용자가 양식에서 하나 이상의 값을 변경한 다음 "확인 표시" 아이콘을 선택하면 SubmitForm 함수에서 사용자의 변경 내용을 데이터 원본으로 보냅니다.If the user changes one or more values in the form and then selects the "checkmark" icon, the SubmitForm function sends the user's changes to the data source.

  • 변경 내용이 성공적으로 저장되면, 양식의 OnSuccess 수식이 실행되고 Back() 함수에서 세부 정보 화면을 열어 업데이트된 레코드를 표시합니다.If the changes are successfully saved, the form's OnSuccess formula runs, and the Back() function opens the detail screen to show the updated record.
  • 변경 내용이 성공적으로 저장되지 않으면, 양식의 OnFailure 수식이 실행되지만 '공백'이므로 아무 것도 변경되지 않습니다.If the changes aren't successfully saved, the form's OnFailure formula runs, but it doesn't change anything because it's blank. 사용자가 변경을 취소하거나 오류를 해결할 수 있도록 편집 및 만들기 화면이 열려 있습니다.The Edit and Create screen remains open so that the user can either cancel the changes or fix the error. LblFormError1은 양식의 Error 속성이 설정된 사용자에게 친숙한 오류 메시지를 표시합니다.LblFormError1 shows a user-friendly error message, to which the form's Error property is set.

표시 양식 컨트롤과 마찬가지로 편집 양식 컨트롤에는 레코드의 다른 필드를 표시하는 다른 컨트롤이 포함된 Card 컨트롤이 포함되어 있습니다.As with a Display form control, an Edit form control contains Card controls, which contain other controls that show different fields in a record:

제작 환경에서 선택한 편집 카드 및 카드 컨트롤

이전 이미지에서 선택한 카드는 AssetID 필드를 표시하고 사용자가 해당 필드의 값을 편집할 수 있도록 텍스트 입력 컨트롤을 포함하고 있습니다.In the previous image, the selected card shows the AssetID field and contains a Text input control so that the user can edit the value of that field. (반대로 세부 정보 화면은 읽기 전용인 레이블 컨트롤에 있는 동일한 필드를 표시합니다.) 텍스트 입력 컨트롤에는 Parent.Default로 설정된 Default 속성이 있습니다.(In contrast, the detail screen shows the same field in a Label control, which is read-only.) The Text input control has a Default property, which is set to Parent.Default. 사용자가 레코드를 편집하는 대신 레코드를 만든 경우 해당 컨트롤은 사용자가 새 레코드에 대해 변경할 수 있는 초기 값을 표시합니다.If the user were creating a record instead of editing one, that control would show an initial value that the user can change for the new record.

오른쪽 창에서 각 카드를 표시하거나, 숨기거나, 다시 정렬하거나, 다른 유형의 컨트롤에 있는 필드를 표시하도록 구성할 수 있습니다.In the right-hand pane, you can show or hide each card, rearrange them, or configure them to show fields in different types of controls.

옵션 창이 열려 있는 편집 화면

앱을 처음부터 빌드하기Build an app from scratch

PowerApps에서 앱을 생성하는 방법을 이해하면 이 항목의 앞부분에서 설명한 것과 동일한 구성 요소와 수식을 사용하여 앱을 직접 빌드할 수 있습니다.By understanding how PowerApps generates an app, you can build one yourself that uses the same building blocks and formulas discussed earlier in this topic.

테스트 데이터 식별Identify test data

이 항목을 최대한 활용하려면 실험할 수 있는 데이터 원본으로 시작합니다.To get the most from this topic, start with a data source with which you can experiment. 걱정할 필요 없이 읽고 업데이트할 수 있는 테스트 데이터가 있어야 합니다.It should contain test data that you can read and update without concern.

참고: 공백이 있는 열 이름이 데이터 원본으로 포함된 SharePoint 목록 또는 Excel 테이블을 사용하는 경우 PowerApps는 공백을 "_x0020_"으로 바꿉니다.Note: If you use a SharePoint list or an Excel table that contains column names with spaces as your data source, PowerApps will replace the spaces with "_x0020_". 예를 들어 SharePoint 또는 Excel의 "Column Name"은 데이터 레이아웃에 표시되거나 수식에 사용될 때 PowerApps에 "Column_x0020_Name"으로 나타납니다.For example, "Column Name" in SharePoint or Excel will appear as "Column_x0020_Name" in PowerApps when displayed in the data layout or used in a formula.

이 항목의 나머지 부분을 정확하게 수행하려면 다음 데이터가 포함된 "아이스크림"이라는 SharePoint 목록을 만듭니다.To follow the rest of this topic exactly, create a SharePoint list named "Ice Cream" that contains this data:

아이스크림 SharePoint 목록

  • 비어 있는 전화 앱을 만들고 데이터 원본에 연결합니다.Create an app from blank, for phones, and connect it to your data source.

    참고: 태블릿 앱은 매우 비슷하지만, 추가 화면 공간을 최대한 활용하기 위해 별도의 화면 레이아웃이 필요할 수 있습니다.Note: Tablet apps are very similar, but you may want a different screen layout to make the most of the extra screen space.

    항목의 나머지 부분에 있는 예제는 아이스크림이라는 데이터 원본을 기반으로 합니다.The examples in the rest of the topic are based on a data source named Ice Cream.

레코드 찾아보기Browse records

찾아보기 화면에 있는 갤러리에서 레코드를 찾아서 해당 레코드에 대한 정보 부분을 빠르게 가져옵니다.Get a quick piece of information from a record by finding it in a gallery on a browse screen.

  1. 세로 갤러리를 추가하고 레이아웃을 제목으로 변경합니다.Add a Vertical gallery, and change the layout to Title only.

    아이스크림 데이터 원본에 연결된 갤러리

  2. 갤러리의 Items 속성을 아이스크림으로 설정합니다.Set the gallery's Items property to Ice Cream.
  3. 갤러리에 있는 첫 번째 레이블의 Text 속성을 ThisItem.Title로 설정합니다(다르게 설정된 경우).Set the Text property of the first label in the gallery to ThisItem.Title if it's set to something else.

    레이블은 이제 각 레코드의 제목 필드에 값을 표시합니다.The label now shows the value in the Title field for each record.

    아이스크림 데이터 원본에 연결된 갤러리

  4. 화면을 채우도록 갤러리의 크기를 조정하고 TemplateSize 속성을 60으로 설정합니다.Resize the gallery to fill the screen, and set its TemplateSize property to 60.

    이 화면은 데이터 원본의 모든 레코드를 표시하는 다음 예제와 비슷합니다.The screen resembles this example, which shows all records in the data source:

    아이스크림 데이터 원본에 연결된 갤러리

세부 사항 보기View details

갤러리에서 원하는 정보가 표시되지 않으면 레코드의 화살표를 선택하여 세부 정보 화면을 엽니다.If the gallery doesn't show the information that you want, select the arrow for a record to open the details screen. 해당 화면의 표시 양식 컨트롤은 선택한 레코드의 더 많은, 아마도 모든 필드를 표시합니다.A Display form control on that screen shows more, possibly all, fields for the record that you selected.

표시 양식 컨트롤은 다음 두 가지 속성을 사용하여 레코드를 표시합니다.The Display form control uses two properties to display the record:

  • DataSource 속성 -DataSource property. 레코드를 보유하고 있는 데이터 원본의 이름입니다.The name of the data source that holds the record. 이 속성은 오른쪽 패널을 필드로 채우고 각 필드의 표시 이름 및 데이터 형식(문자열, 숫자, 날짜 등)을 결정합니다.This property populates the right-hand panel with fields and determines the display name and data type (string, number, date, etc.) of each field.
  • Item 속성 -Item property. 표시할 레코드입니다.The record to display. 이 속성은 종종 갤러리 컨트롤의 Selected 속성에 연결되므로 사용자가 갤러리 컨트롤에서 레코드를 선택한 다음 해당 레코드로 드릴할 수 있습니다.This property is often connected to the Selected property of the Gallery control so that the user can select a record in the Gallery control and then drill into that record.

DataSource 속성이 설정되면 오른쪽 창에서 필드를 추가 및 제거하고 표시 방법을 변경할 수 있습니다.When the DataSource property is set, you can add and remove fields through the right-hand pane and change how they're displayed.

이 화면에서 사용자는 레코드의 값을 의도적이거나 실수로 변경할 수 없습니다.On this screen, users can't intentionally or accidentally change any values of the record. 표시 양식 컨트롤은 읽기 전용이므로 레코드를 수정하지 않습니다.The Display form control is a read-only control, so it won't modify a record.

표시 양식 컨트롤을 추가하려면 다음을 수행합니다.To add a Display form control:

  1. 화면을 추가한 다음 이 화면에 표시 양식 컨트롤을 추가합니다Add a screen, and then add a Display form control to it
  2. 양식 컨트롤의 DataSource 속성을 '아이스크림'으로 설정합니다.Set the DataSource property of the form control to 'Ice Cream'.

오른쪽 창에서 화면에 표시할 필드와 각 필드에 표시할 카드 유형을 선택할 수 있습니다.In the right-hand pane, you can select the fields to display on your screen and which type of card to display for each field. 오른쪽 창에서 변경하면 각 카드 컨트롤의 DataField 속성이 사용자가 상호 작용할 필드로 설정됩니다.As you make changes in the right-hand pane, the DataField property on each Card control is set to the field that the user will interact with. 화면은 다음 예제와 비슷합니다.Your screen should resemble this example:

아이스크림 데이터 원본에 대한 표시 양식

마지막으로 특정 레코드의 세부 정보를 볼 수 있도록 표시 양식 컨트롤을 갤러리 컨트롤에 연결해야 합니다.Finally, we need to connect the Display form control to the Gallery control so that we can look at details for a specific record. Item 속성 설정이 완료되는 즉시 갤러리의 첫 번째 레코드가 양식에 표시됩니다.As soon as we complete setting the Item property, the first record from the gallery will appear in our form.

  1. 표시 양식 컨트롤의 Item 속성을 Gallery1.Selected로 설정합니다.Set the Item property of the Display form control to Gallery1.Selected.

    선택한 항목의 세부 정보가 양식에 표시됩니다.The details for the selected item appear in the form.

    갤러리 컨트롤에 연결된 아이스크림 데이터 원본에 대한 표시 양식

잘 했습니다!Great! 이제 사용자가 갤러리 화면에서 세부 정보 화면을 열고, 세부 정보 화면에서 갤러리 화면을 여는 방법을 탐색해 볼 시간입니다.We now turn to navigation: how a user opens the details screen from the gallery screen and opens the gallery screen from the details screen.

  1. 단추 컨트롤을 화면에 추가하고, 뒤로를 표시하도록 Text 속성을 설정하고, OnSelect 속성을 Back()으로 설정합니다.Add a Button control to the screen, set its Text property to show Back, and set its OnSelect property to Back().

    이 수식은 사용자가 세부 정보 보기를 마치면 갤러리로 돌아갑니다.This formula returns the user back to the gallery when they finish viewing details.

뒤로 단추가 있는 아이스크림 데이터 원본에 대한 표시 양식

이제 갤러리 컨트롤로 돌아가서 세부 정보 화면에 일부 탐색을 추가해 보겠습니다.Now, let's return to the Gallery control and add some navigation to our detail screen.

  1. 갤러리 컨트롤을 호스팅하는 첫 번째 화면으로 전환하고 갤러리의 첫 번째 항목에 있는 화살표를 선택합니다.Switch to the first screen, which is hosting our Gallery control, and select the arrow in the first item in the gallery.
  2. 도형의 OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property of the shape to this formula:
    Navigate( Screen2, None )Navigate( Screen2, None )

    뒤로 단추가 있는 아이스크림 데이터 원본에 대한 표시 양식

  3. F5 키를 누른 다음 갤러리에 있는 화살표를 선택하여 항목에 대한 세부 정보를 표시합니다.Press F5, and then select an arrow in the gallery to show the details for an item.
  4. 뒤로 단추를 선택하여 제품 갤러리로 돌아간 다음 Esc 키를 누릅니다.Select the Back button to return to the gallery of products, and then press Esc.

세부 정보 편집Editing details

마지막으로 최종적인 핵심 작업은 사용자가 편집 양식 컨트롤에서 수행한 레코드의 내용을 변경하는 것입니다.Finally, our last core activity is changing the contents of a record, which users accomplish in an Edit form control.

편집 양식 컨트롤은 다음 두 가지 속성을 사용하여 레코드를 표시하고 편집합니다.The Edit form control uses two properties to display and edit the record:

  • DataSource 속성 -DataSource property. 레코드를 보유하고 있는 데이터 원본의 이름입니다.The name of the data source that holds the record. 표시 양식 컨트롤과 마찬가지로 이 속성은 오른쪽 패널을 필드로 채우고 각 필드의 표시 이름 및 데이터 형식(문자열, 숫자, 날짜 등)을 결정합니다.Just as with the Display form control, this property populates the right-hand panel with fields and determines the display name and data type (string, number, date, etc.) for each field. 또한 이 속성은 기본 데이터 원본에 제출하기 전에 각 필드의 값이 유효한지 여부를 결정합니다.This property also determines whether each field's value is valid before submitting it to the underlying data source.
  • Item 속성 -Item property. 편집할 레코드이며, 종종 갤러리 컨트롤의 Selected 속성에 연결됩니다.The record to edit, which is often connected to the Selected property of the Gallery control. 이렇게 하면 갤러리 컨트롤에서 레코드를 선택하고, 세부 정보 화면에 표시하고, 편집 및 만들기 화면에서 편집할 수 있습니다.That way, you can select a record in the Gallery control, show it in the details screen, and edit it in the Edit and Create screen.

편집 양식 컨트롤을 추가하려면 다음을 수행합니다.To add an Edit form control:

  1. 화면을 추가하고, 편집 양식 컨트롤을 추가한 다음, 양식의 DataSource 속성을 '아이스크림'으로 설정합니다.Add a screen, add an Edit form control, and then set the form's DataSource property to 'Ice Cream'.
  2. Item 속성을 Gallery1.Selected로 설정합니다.Set the Item property to Gallery1.Selected.

이제 화면에 표시할 필드를 선택할 수 있습니다.You can now select the fields to display on your screen. 또한 각 필드에 표시할 카드 유형도 선택할 수 있습니다.You can also select which type of card to display for each field. 오른쪽 창에서 변경하면 각 카드 컨트롤의 DataField 속성이 사용자가 상호 작용할 필드로 설정됩니다.As you make changes in the right-hand pane, the DataField property on each Card control is set to the field your user will interact with. 화면은 다음 예제와 비슷합니다.Your screen should resemble this example:

아이스크림 데이터 원본에 대한 표시 양식

이러한 두 속성은 표시 양식 컨트롤의 속성과 동일합니다.These two properties are the same as the properties on the Display form control. 그리고 이러한 속성만으로도 레코드의 세부 정보를 표시할 수 있습니다.And with these alone, we can display the details of a record.

편집 양식 컨트롤은 SubmitForm 함수를 제공하여 데이터 원본에 대한 변경 내용을 쓰기 저장하면서 진행됩니다.The Edit form control goes further by offering the SubmitForm function to write back changes to the data source. 단추 또는 이미지 컨트롤과 함께 사용하여 사용자의 변경 내용을 저장합니다.You use this with a button or image control to save a user's changes.

  • 단추 컨트롤을 추가하고, 저장을 표시하도록 Text 속성을 설정하고, OnSelect 속성을 다음 수식으로 설정합니다.Add a Button control, set its Text property to show Save, and set its OnSelect property to this formula:
    SubmitForm( Form1 ) SubmitForm( Form1 )

아이스크림 데이터 원본에 대한 편집 양식

이 화면에서 탐색을 추가하려면 다음을 수행합니다.To add navigation to and from this screen:

  1. 다른 단추 컨트롤을 추가하고, 취소를 표시하도록 Text 속성을 설정하고, OnSelect 속성을 다음 수식으로 설정합니다.Add another Button control, set its Text property to show Cancel, and set its OnSelect property to this formula:
    ResetForm( Form1 ); Back()ResetForm( Form1 ); Back()

    이 수식은 저장되지 않은 편집 내용을 삭제하고 이전 화면을 엽니다.This formula discards any unsaved edits and opens the previous screen.

    아이스크림 데이터 원본에 대한 표시 양식

  2. 양식의 OnSuccess 속성을 Back()으로 설정합니다.Set the OnSuccess property of the form to Back().

    업데이트가 성공적으로 저장되면 이전 화면(이 경우 세부 정보 화면)이 자동으로 열립니다.When updates are successfully saved, the previous screen (in this case, the details screen) opens automatically.

    "OnSuccess" 규칙이 추가된 편집 양식

  3. 표시 화면에서 단추를 추가하고, 편집을 표시하도록 Text 속성을 설정하고, OnSelect 속성을 다음 수식으로 설정합니다.On the Display screen, add a button, set its Text property to show Edit, and set its OnSelect property to this formula:
    Navigate( Screen3, None )Navigate( Screen3, None )

    "편집" 단추가 추가된 표시 양식

데이터를 보고 입력하는 3개의 화면이 있는 기본 앱을 빌드했습니다.You've built a basic app with three screens for viewing and entering data. 이 앱을 사용해 보려면 갤러리 화면을 표시한 다음, F5 키를 누르거나 화면의 왼쪽 위 모서리 근처에 있는 앞으로 화살표 "미리 보기" 단추를 선택합니다.To try it out, show the gallery screen, and then press F5 (or select the forward arrow "Preview" button near the upper-left corner of the screen). 분홍색 점은 사용자가 각 단계에서 화면을 클릭하거나 탭하는 위치를 나타냅니다.The pink dot indicates where the user clicks or taps the screen at each step.

아이스크림 앱 사용해 보기

레코드 만들기Create a record

사용자는 동일한 편집 양식과 상호 작용하여 레코드를 업데이트하고 만듭니다.The user interacts with the same Edit form to both update and create records. 사용자가 레코드를 만들려고 할 때 NewForm 함수는 양식을 New 모드로 전환합니다.When the user wants to create a record, the NewForm function switches the form to New mode.

양식이 New 모드에 있으면 각 필드의 값은 데이터 원본의 기본값으로 설정됩니다.When the form is in New mode, the value of each field is set to the defaults of the data source. 양식의 Item 속성에 제공된 레코드는 무시됩니다.The record that's provided to the form's Item property is ignored.

사용자가 새 레코드를 저장할 준비가 되면 SubmitForm이 실행됩니다.When the user is ready to save the new record, SubmitForm runs. 양식이 성공적으로 제출되면 양식은 EditMode로 다시 전환됩니다.After the form is successfully submitted, the form is switched back to EditMode.

첫 번째 화면에서 새로 만들기 단추가 추가됩니다.On the first screen, you'll add a New button:

  1. 갤러리가 있는 화면에서 단추 컨트롤을 추가합니다.On the screen with the gallery, add a Button control.
  2. 단추의 Text 속성을 New로 설정하고, OnSelect 속성을 다음 수식으로 설정합니다.Set the button's Text property to New and its OnSelect property to this formula:
    NewForm( Form1 ); Navigate( Screen3, None ) NewForm( Form1 ); Navigate( Screen3, None )

    이 수식은 Screen3편집 양식 컨트롤을 New 모드로 전환하고 사용자가 채울 수 있도록 해당 화면을 엽니다.This formula switches the Edit form control on Screen3 to New mode and opens that screen so that the user can fill it in.

"편집" 단추가 추가된 표시 양식

편집 및 만들기 화면이 열리면 사용자가 항목을 추가할 준비가 된 양식이 비어 있습니다.When the Edit and Create screen opens, the form is empty, ready for the user to add an item. 사용자가 저장 단추를 선택하면 SubmitForm 함수는 레코드를 업데이트하는 대신 만들도록 합니다.When the user selects the Save button, the SubmitForm function ensures that a record is created instead of being updated. 사용자가 취소 단추를 선택하면, ResetForm 함수는 양식을 Edit 모드로 다시 전환하고, Back 함수는 갤러리를 탐색하기 위한 화면을 엽니다.If the user selects the Cancel button, the ResetForm function switches the form back to Edit mode, and the Back function opens the screen for browsing the gallery.

레코드 삭제Delete a record

  1. 표시 화면에서 단추를 추가하고, 삭제를 표시하도록 Text 속성을 설정합니다.On the Display screen, add a button, and set its Text property to show Delete..
  2. 단추의 OnSelect 속성을 다음 수식으로 설정합니다.Set the button's OnSelect property to this formula:
    Remove( 'Ice Cream', Gallery1.Selected ); Back()Remove( 'Ice Cream', Gallery1.Selected ); Back()

    "편집" 단추가 추가된 표시 양식

오류 처리Handling errors

이 앱에서 필드의 값이 유효하지 않거나, 필수 필드가 비어 있거나, 네트워크 연결이 끊어졌거나, 다른 문제가 발생하면 오류가 발생합니다.In this app, an error occurs when the value of a field is not valid, a required field is blank, you're disconnected from the network, or any number of other problems pop up.

어떤 이유로든 SubmitForm이 실패하면 편집 양식 컨트롤의 Error 속성에 사용자에게 표시할 오류 메시지가 포함됩니다.If SubmitForm fails for any reason, the Error property of the Edit form control contains an error message to show the user. 이 정보를 사용하면 사용자는 문제를 해결하고 변경 내용을 다시 제출하거나 업데이트를 취소할 수 있습니다.With this information, the user should be able to correct the issue and resubmit the change, or they can cancel the update.

  1. 편집 및 만들기 화면에서 레이블 컨트롤을 추가하고 저장 단추 바로 아래로 이동합니다.On the Edit and Create screen, add a Label control, and move it just below the Save button.

    사용자가 이 컨트롤을 선택하여 변경 내용을 저장한 후에는 모든 오류를 쉽게 확인할 수 있습니다.Any error will be easy to see after the user selects this control to save changes.

  2. Form1.Error를 표시하도록 레이블 컨트롤의 Text 속성을 설정합니다.Set the Text property of the Label control to show Form1.Error.

"편집" 단추가 추가된 표시 양식

PowerApps가 데이터에서 생성하는 앱에서 이 컨트롤의 AutoHeight 속성이 true로 설정되므로 오류가 발생하지 않으면 공백이 사용되지 않습니다.In an app that PowerApps generates from data, the AutoHeight property on this control is set to true so that no space is consumed if no error occurs. 또한 편집 양식 컨트롤의 HeightY 속성은 오류가 발생할 때 이 컨트롤의 증가를 고려하여 동적으로 조정됩니다.The Height and Y properties of the Edit form control are also adjusted dynamically to account for this control growing when an error occurs. 자세한 내용을 알아보려면 기존 데이터에서 앱을 생성하고 이러한 속성을 검사합니다.For more details, generate an app from existing data, and inspect these properties. 오류가 발생하지 않은 경우 오류의 텍스트 상자 컨트롤은 매우 짧습니다. 고급 보기(보기 탭에서 사용 가능)를 열어 이 컨트롤을 선택해야 할 수도 있습니다.The text-box control for errors is very short when no error has occurred, you may need to open the Advanced view (available on the View tab) to select this control.

오류 텍스트 컨트롤이 선택된 데이터 편집 양식의 앱

양식 컨트롤이 선택된 데이터 편집 양식의 앱

데이터 새로 고침Refresh data

사용자가 앱을 열 때마다 데이터 원본을 새로 고치지만, 사용자가 앱을 닫지 않고 갤러리의 레코드를 새로 고쳐야 할 수도 있습니다.The data source is refreshed whenever the user opens the app, but the user might want to refresh the records in the gallery without closing the app. 사용자가 수동으로 데이터를 새로 고칠 수 있도록 새로 고침 단추를 추가합니다.Add a Refresh button so that the user can select it to manually refresh the data:

  1. 갤러리 컨트롤이 있는 화면에서 단추 컨트롤을 추가하고, 새로 고침을 표시하도록 Text 속성을 설정합니다.On the screen with the Gallery control, add a Button control and set its Text property to show Refresh.
  2. 이 컨트롤의 OnSelect 속성을 다음 수식으로 설정합니다.Set the OnSelect property of this control to this formula:
    Refresh( 'Ice Cream' )Refresh( 'Ice Cream' )

데이터 원본 새로 고침

PowerApps가 데이터에서 생성한 앱에서 찾아보기 화면의 위쪽에 있는 두 가지 컨트롤에 대해 논의하지 않았습니다.In the app that PowerApps generated from data, we neglected to discuss two controls at the top of the Browse screen. 사용자는 이러한 컨트롤을 사용하여 하나 이상의 레코드를 검색하거나 레코드 목록을 오름차순 또는 내림차순으로 정렬하거나 둘 다 정렬할 수 있습니다.By using these controls, the user can search for one or more records, sort the list of records in ascending or descending order, or both.

찾아보기 화면에서 컨트롤 정렬 및 검색

사용자가 정렬 단추를 선택하면 갤러리의 정렬 순서가 반대로 바뀝니다.When the user selects the sort button, the sort order of the gallery reverses. 이 동작을 만들려면 '컨텍스트 변수'를 사용하여 갤러리가 정렬되는 방향을 추적합니다.To create this behavior, we use a context variable to track the direction in which the gallery is sorted. 사용자가 단추를 선택하면 변수가 업데이트되고 방향이 반대로 바뀝니다.When the user selects the button, the variable is updated, and the direction reverses. 정렬 단추의 OnSelect 속성이 UpdateContext( {SortDescending1: !SortDescending1} ) 수식으로 설정됩니다.The OnSelect property of the sort button is set to this formula: UpdateContext( {SortDescending1: !SortDescending1} )

SortDescending1 컨텍스트 변수가 아직 없으면 UpdateContext 함수에서 이 변수를 만듭니다.The UpdateContext function creates the SortDescending1 context variable if it doesn't already exist. 이 함수는 변수의 값을 읽고 ! 연산자를 사용하여 논리적 반대로 설정합니다.The function will read the value of the variable and set it to the logical opposite by using the ! 액세스합니다.operator. 값이 'true'이면 'false'가 됩니다.If the value is true, it becomes false. 값이 'false'이면 'true'가 됩니다.If the value is false, it becomes true.

갤러리 컨트롤의 Items 속성에 대한 수식은 TextSearchBox1 컨트롤의 텍스트와 함께 이 컨텍스트 변수를 사용합니다.The formula for the Items property of the Gallery control uses this context variable, along with the text in the TextSearchBox1 control:

Gallery1.Items = Sort( If( IsBlank(TextSearchBox1.Text),
                           Assets,
                           Filter( Assets,
                                   TextSearchBox1.Text in Text(ApproverEmail) ) ),
                        ApproverEmail,
                        If(SortDescending1, Descending, Ascending) )

이 수식을 분석해 보겠습니다.Let's break this down:

  • 외부에는 Sort 함수가 있습니다. 이 함수는 테이블, 정렬할 필드 및 정렬할 방향의 세 가지 인수를 사용합니다.On the outside, we have the Sort function, which takes three arguments: a table, a field on which to sort, and the direction in which to sort.

    • 정렬 방향은 사용자가 ImageSortUpDown1 컨트롤을 선택할 때 전환되는 컨텍스트 변수에서 가져옵니다.The sort direction is taken from the context variable that toggles when the user selects the ImageSortUpDown1 control. 'true'/'false' 값은 상수 내림차순오름차순으로 변환됩니다.The true/false value is translated to the constants Descending and Ascending.
    • 정렬할 필드는 ApproverEmail로 고정됩니다.The field to sort on is fixed to ApproverEmail. 갤러리에서 표시되는 필드를 변경하면 이 인수도 변경해야 합니다.If you change the fields that appear in the gallery, you'll need to change this argument too.
  • 내부에는 Filter 함수가 있습니다. 이 함수는 테이블을 인수로 사용하고, 식을 사용하여 각 레코드에 대해 평가합니다.On the inside, we have the Filter function, which takes a table as an argument and an expression to evaluate for each record.

    • 테이블은 원시 Assets 데이터 원본이며, 필터링하거나 정렬하기 전의 시작점입니다.The table is the raw Assets data source, which is the starting point before filtering or sorting.
    • 이 식은 ApproverEmail 필드 내에서 TextSearchBox1에 있는 문자열의 인스턴스를 검색합니다.The expression searches for an instance of the string in TextSearchBox1 within the ApproverEmail field. 다시 말하지만 갤러리에서 표시되는 필드를 변경하면 이 인수도 업데이트해야 합니다.Again, if you change the fields that appear in the gallery, you'll also need to update this argument.
    • TextSearchBox1이 비어 있으면 사용자가 모든 레코드를 표시하려고 하며 Filter 함수가 무시됩니다.If TextSearchBox1 is empty, the user wants to show all records, and the Filter function is bypassed.

이는 한 가지 예입니다. 앱의 요구 사항에 따라 Filter, Sort 및 다른 함수와 연산자를 함께 구성하여 Items 속성에 대한 고유의 수식을 만들 수 있습니다.This is but one example; you can craft your own formula for the Items property, depending on the needs of your app, by composing Filter, Sort, and other functions and operators together.

화면 디자인Screen design

지금까지 화면에 컨트롤을 분산하는 다른 방법에 대해서는 설명하지 않았습니다.So far, we haven't discussed other ways to distribute controls across screens. 이는 다양한 옵션이 있기 때문이며, 최상의 선택은 앱의 특정 요구 사항에 따라 다릅니다.That's because you have many options, and the best selection depends on your specific app's needs.

전화 화면에서 부동산은 이렇게 제한되므로 다른 화면에서 찾아보고, 표시하고, 편집하고, 만들려고 합니다.Because real estate on phone screens is so limited, you probably want to browse, display, and edit/create on different screens. 이 항목에서는 NavigateBack 함수에서 각 화면을 엽니다.In this topic, the Navigate and Back functions open each screen.

태블릿에서 두 화면 또는 한 화면에서도 찾아보기, 표시 및 편집/만들기를 수행할 수 있습니다.On a tablet, you can browse, display, and edit/create on two or even one screen. 후자의 경우 Navigate 또는 Back 함수가 필요하지 않습니다.For the latter, no Navigate or Back function would be required.

사용자가 동일한 화면에서 작업하는 경우 갤러리에서 선택 항목을 변경할 수 없으며, 편집 양식 컨트롤에서 편집 내용을 잃을 수 있으므로 주의해야 합니다.If the user is working on the same screen, you need to be careful that the user can't change the selection in the Gallery and potentially lose edits in the Edit form control. 다른 레코드 변경 내용이 아직 저장되지 않은 경우 사용자가 다른 레코드를 선택하지 못하게 하려면 갤러리의 Disabled 속성을 다음 수식으로 설정합니다.To keep the user from selecting a different record when changes to another record haven't been saved yet, set the Disabled property of the gallery to this formula:
EditForm.Unsaved EditForm.Unsaved