SharePoint 통합 캔버스 앱을 처음부터 만들어 Microsoft 목록을 사용하여 만든 목록에서 항목을 보고, 편집하고, 추가 및 삭제할 수 있습니다

아티클
04/18/2023

이 시나리오 문서에서는 처음부터 SharePoint 양식 기능을 사용하여 앱을 만드는 방법을 알아봅니다. 이 앱은 SharePoint 사이트를 방문하지 않고 캔버스 앱을 사용하여 목록 항목을 보고, 편집하고, 추가하고, 삭제하는 방법을 보여줍니다.

참고

SharePoint 양식 및 추가 예시를 사용한 다른 시나리오에 관한 자세한 내용은 SharePoint 시나리오 개요로 이동하십시오.

필수 구성 요소

목록 및 목록 항목을 만들려면 SharePoint 사이트 액세스 권한이 있어야 합니다.
만들기 및 설정 목록에 대해 알고 있어야 합니다.

시나리오 세부 사항

이 시나리오의 목적은 목록 작업을 위해 캔버스 앱을 처음부터 만드는 방법을 보여 주는 것입니다. 이 예제 데모가 끝나면 목록이나 해당 항목에 액세스할 필요 없이 캔버스 앱 내에서 다음 작업을 수행할 수 있습니다.

목록에서 모든 항목을 봅니다.
특정 열의 텍스트 값을 기반으로 목록에서 항목을 검색합니다.
목록 항목을 선택합니다.
목록 항목을 편집합니다.
새 목록 항목을 만듭니다.
목록 항목을 삭제합니다.

시나리오는 SharePoint와 통합된 경우의 캔버스 앱 기능을 기본적으로 설명합니다. 개선된 디자인 또는 추가 화면으로 레이아웃을 향상시키려면 다음 문서로 이동하십시오.

중요

이 시나리오의 예에서는 목록 항목을 보고, 편집하고, 추가하고, 삭제하는 샘플 앱을 만듭니다. 선택 또는 비즈니스 목표에 따라 앱을 다르게 사용자 지정하기 위해 접근 방식을 변경할 수 있습니다. 컨트롤에 대한 사용자 지정 이름으로 앱을 사용자 지정하는 경우 이 예제의 단계를 따를 때 수식에 올바른 컨트롤 이름을 사용해야 합니다.

예제

이 시나리오 예제에서는 앱을 만들고 목록에 연결하여 목록 항목을 보고, 편집하고, 추가하고, 삭제하는 단계를 안내합니다.

1단계-Microsoft 목록을 사용하여 목록 만들기

열과 목록 항목이 있는 목록을 만듭니다. 이 시나리오에서는 다음 열과 목록 항목이 있는 목록을 사용했습니다.

목록 구조.

참고

두 열 모두 한 줄의 텍스트입니다.

2단계 - 빈 캔버스 앱 만들기

빈 캔버스 앱을 만듭니다.

3단계 - 앱을 SharePoint에 연결

왼쪽 창에서 데이터 원본을 선택합니다.
SharePoint 데이터 원본을 선택합니다. 검색 창에서 이름을 검색할 수도 있습니다.
연결 추가를 선택합니다.
연결 형식을 선택합니다. SharePoint Online에 연결하거나 구성 시 데이터 게이트웨이를 사용하여 온-프레미스 SharePoint 사이트에 연결할 수 있습니다. 이 시나리오에서는 SharePoint Online 사이트에 연결합니다.
이전에 만든 목록을 보유한 SharePoint 사이트를 선택합니다.
만든 목록을 선택합니다. 이 시나리오에서는 모양라는 목록을 사용합니다.
연결을 선택합니다. 데이터 원본이 앱에 추가됩니다.

4단계 – 데이터 테이블을 추가하여 목록 항목 보기

왼쪽 창에서 + (삽입)을 선택합니다.
레이아웃을 확장합니다.
데이터 테이블을 선택합니다.
데이터 원본을 SharePoint 연결로 선택합니다.
추가 구성 요소를 위한 공간을 확보하기 위해 데이터 테이블을 화면 오른쪽 하단으로 이동합니다.

5단계 - 항목 검색 및 선택 기능 추가

캔버스에 텍스트 입력 컨트롤을 삽입하고 드롭다운 목록 아래로 이동합니다.
검색 창 Default 속성을 Search by shape 값으로 업데이트합니다.
캔버스에 목록 상자 컨트롤을 삽입하고 이전 단계에 추가한 텍스트 입력 컨트롤 아래로 이동합니다.
이 예제에서는 Studio 화면의 오른쪽에서 목록 상자 컨트롤의 Items 속성을 모양 목록으로 설정합니다.
목록 상자 컨트롤에 대한 Value 속성을 Color 대신 도형로 설정합니다.
이전 단계에 추가된 목록 상자의 Items 속성을 다음 수식으로 업데이트합니다.
```
Filter([@Shapes], StartsWith(Shape, TextInput1.Text))
```
수식에는 다음 함수가 포함됩니다.
- Filter() – 이 수식에 사용되어 정의된 매개 변수를 기반으로 목록 상자의 항목을 필터링합니다. 이 함수에서 [@Shapes]는 필터링할 데이터 원본을 정의합니다.
- StartsWith() – 이 수식에 사용되어 이전에 추가된 TextInput1 컨트롤에 입력한 문자로 시작하는 도형 열을 기반으로 목록 항목을 필터링합니다.

6단계 - 항목 편집 기능 추가

양식 편집 컨트롤을 삽입합니다.
Studio 화면의 오른쪽에서 양식 편집 컨트롤의 데이터 원본 속성을 모양로 설정합니다.
편집 양식 컨트롤에 대해 필드 편집을 선택하고 첨부 파일 필드와 같은 다른 필드가 있는 경우 제거합니다.
모양 및 색상 필드가 있어야 합니다. 없는 경우 필드 추가를 사용하여 추가합니다.
화면 레이아웃을 재정렬하여 양식 편집 컨트롤이 표시되고 다른 컨트롤과 중첩되지 않도록 합니다.
목록 상자 컨트롤의 OnSelect 속성을 다음 함수로 설정합니다.
```
Set(TextSelected,1)
```
Set() 함수는 목록 상자의 값이 선택되면 TextSelected라는 새 변수를 1의 값으로 설정합니다. 이 시나리오에서 TextSelected 변수는 다음 섹션에서 보게 될 추가, 편집 및 삭제 기능의 작업 및 동작을 제어하는 플래그로 사용됩니다.
양식 편집 컨트롤의 항목 속성을 다음 수식으로 설정합니다.
```
If(TextSelected=1,ListBox1.Selected,DataTable1.Selected)
```
If() 함수는 TextSelected 변수의 값이 1인지 여부를 먼저 확인합니다. 그러한 경우 양식 편집에 목록 상자에서 선택된 항목이 표시됩니다. 그렇지 않은 경우 양식 편집에 데이터 테이블에서 선택된 항목이 표시됩니다.
버튼을 삽입합니다.
Studio 화면의 오른쪽에서 이전 단계에서 추가된 단추의 Text 속성을 Save로 설정합니다.
Save 단추의 OnSelect 속성을 다음 수식으로 설정합니다.
```
SubmitForm(Form1);
Set(TextSelected,0)
```
수식에는 다음 함수가 포함됩니다.
- SubmitForm() – 이 수식에서 사용되어 양식을 편집하고 값을 목록에 저장합니다.
- Set() - 목록 상자에서 새 항목을 선택할 수 있도록 TextSelected 변수를 o로 재설정합니다.
텍스트 레이블 컨트롤을 삽입합니다.
이전 단계에 추가된 텍스트 레이블 컨트롤에 대한 Text 속성을 To edit value(s) for an item, select from the table, or search. 로 업데이트합니다.
화면의 컨트롤을 재정렬하여 편집 컨트롤을 정렬합니다.

7단계 - 항목 추가 기능 추가

버튼을 삽입합니다.
단추가 표시되도록 화면의 컨트롤을 재정렬합니다.
이전 단계에서 추가된 단추의 Text 속성을 Add로 업데이트합니다.
Add 단추의 OnSelect 속성을 다음 함수로 설정합니다.
```
NewForm(Form1)
```
NewForm() 함수는 새 목록 항목을 추가할 수 있도록 Form1이라는 양식에 추가된 양식 편집 컨트롤을 지웁니다.

8단계 - 항목 삭제 기능 추가

단추를 삽입합니다.
이전 단계에서 추가된 단추를 Save 단추 아래로 이동합니다.
이전 단계에서 추가된 단추의 Text 속성을 Delete로 업데이트합니다.
Delete 단추의 OnSelect 속성을 다음 수식으로 설정합니다.
```
Remove([@Shapes], If(TextSelected=1,ListBox1.Selected,DataTable1.Selected));
Set(TextSelected,0)
```
수식에는 다음 함수가 포함됩니다.
- Remove() – 이 수식에서 사용되어 선택한 목록 항목을 삭제합니다.
- If() - TextSelected 변수의 값이 1인지 여부를 먼저 확인합니다. 그러한 경우 Delete 단추가 목록 상자에서 선택된 항목을 삭제합니다. 그렇지 않은 경우 Delete 단추가 데이터 테이블 컨트롤에서 선택된 항목을 삭제합니다.
- Set() - 목록 상자에서 새 항목을 선택할 수 있도록 TextSelected 변수를 o로 재설정합니다.

이제 모든 앱 구성 요소가 구성되었으므로 화면이 다음 예제와 같은지 확인합니다.

모든 구성 요소가 추가된 앱.

9단계 - 앱 저장

앱에 보기, 편집, 추가 및 삭제 기능이 추가되었으므로 앱을 저장합니다.

파일 메뉴를 선택합니다.
저장을 선택합니다.
처음 저장할 때 저장 옵션에서 다른 이름으로 저장으로 이동합니다. 저장을 선택하여 앱을 클라우드에 저장합니다.
Power Apps Studio를 닫습니다.

10단계 - 앱 테스트

Power Apps으로 이동합니다.
앱을 선택합니다.
만든 앱을 선택합니다.
앱 구성 요소를 테스트합니다.

팁

Power Apps Studio 내에서 앱을 편집할 때 Alt 키와 마우스 왼쪽 단추 클릭을 사용하여 구성 요소의 동작을 빠르게 미리 볼 수 있습니다.

예를 들어 오른쪽 상단에서 앱 미리 보기를 선택하거나 키보드에서 F5를 선택하여 미리 보기로 앱을 실행하는 대신 키보드에서 Alt 키를 누른 채로 데이터 테이블의 행을 하나 선택하여 양식 편집 컨트롤을 앱이 미리 보기로 실행 중인 것과 같이 선택한 행으로 변경합니다.

추가로 키보드에서 Alt 키를 누른 채로 Power Apps Studio 내부에서 미리 보기를 실행할 수 있습니다. 예를 들어 서로 다른 작업 또는 검사를 위해 여러 구성 요소를 선택합니다.

다음 단계

앱을 편집하는 경우 변경 사항이 공개되도록 게시해야 합니다.

앱을 사용할 준비가 되면 앱을 공유합니다.

참조

참고

귀사의 설명서 언어 기본 설정에 대해 말씀해 주시겠습니까? 간단한 설문 조사에 응해주세요. (이 설문 조사는 영어로 되어 있습니다.)

이 설문 조사는 약 7분 정도 걸립니다. 개인 데이터는 수집되지 않습니다(개인정보처리방침).

다음을 통해 공유