연습: LightSwitch를 사용하여 SharePoint용 응용 프로그램 만들기

아티클
06/10/2015

LightSwitch를 사용하여 모바일 사용자가 전화기, 태블릿 등의 최신 터치식 장치로 원격 위치에서 SharePoint 데이터를 보고 추가하고 업데이트할 수 있는 SharePoint용 응용 프로그램을 만들 수 있습니다. 연습을 통해서 해당 앱을 만들어 가상 식품 유통 업체인 Contoso Foods의 판매 담당자가 제품 디스플레이 방식에 관한 설문 데이터를 입력할 수 있습니다.

이러한 담당자는 제품 전달 및 매장 내에서 각 제품의 현재 상태를 측정하는 품질 조사를 수행하기 위해 각 위치를 자주 방문합니다. 설문 조사 중 담당자는 일반적으로 다음과 같은 종류의 데이터를 수집합니다.

진열대의 청결 상태("매우 불량" 에서 "매우 양호"까지)
제품 조명(이 항목도 "매우 불량" 에서 "매우 양호"까지)
제품의 통로 위치(통로 가운데, 통로 끝, 또는 통로 양측)
제품의 선반 높이(위쪽 선반, 눈 높이 선반, 또는 맨 아래 선반)

또한 담당자는 전반적 평가를 입증하기 위해 제품 진열을 사진 촬영합니다.

사전 요구 사항

이 연습을 수행하려면 Visual Studio 2013이 필요합니다.

또한 다운로드 Survey App Tutorial: Developing a SharePoint Application Using LightSwitch의 샘플 파일도 필요합니다.

앱을 호스트하려면 Office 365에 SharePoint 개발자 사이트도 있어야 하며 이 사이트는 Office 및 SharePoint용 앱 개발자 센터에서 얻을 수 있습니다.

HTML로 LightSwitch 응용 프로그램 만들기

SharePoint용 LightSwitch 응용 프로그램을 개발하려면 먼저 Silverlight 또는 HTML로 클라이언트 프로젝트를 만듭니다. 이 연습에서는 모바일 장치에 대한 화면을 최적화할 수 있도록 HTML을 사용합니다.

프로젝트를 만들려면

메뉴 모음에서 파일, 새로 만들기, 프로젝트를 차례로 선택합니다.

새 프로젝트 대화 상자가 열립니다.
템플릿 목록에서 Visual Basic 또는 Visual C# 노드를 확장하고 LightSwitch 노드를 선택한 후 LightSwitch HTML 응용 프로그램(Visual Basic) 또는 LightSwitch HTML 응용 프로그램(Visual C#) 중 하나를 선택합니다.
이름 텍스트 상자에 SurveyApp을 입력한 후 확인 단추를 선택합니다.

설문 조사 데이터를 표시하기 위한 지원 추가

담당자는 데이터를 입력할 때 입력한 내용을 확인하고 나중에 해당 데이터를 검색해야 합니다. 이 기능을 추가하려면 먼저 내장 함수 데이터베이스에 설문 조사 데이터를 저장할 설문 조사 엔터티를 추가하고 데이터를 표시할 홈 화면을 추가합니다. 담당자가 응용 프로그램을 시작하면 홈 화면이 나타납니다.

설문 조사 엔터티를 추가하려면

솔루션 탐색기에서 SurveyApp.HTML Server 노드에 대한 바로 가기 메뉴를 열고 테이블 추가를 선택합니다.

엔터티 디자이너가 나타납니다.
속성 창의 이름 속성 텍스트 상자에 설문 조사를 입력합니다.
엔터티 디자이너에 다음 값을 입력합니다.

이름

형식

필수

SalesRepName

문자열

아니요

청결 상태

Integer

예

조명

Integer

예

선반 배치

Integer

예

통로 배치

Integer

예
청결도 필드를 선택한 다음 속성 창에서 선택 목록 하이퍼링크를 선택합니다.
선택 목록 대화 상자에서 다음 값을 입력하고 확인 단추를 선택합니다.

값

표시 이름

0

매우 불량

1

나쁨

2

보통

3

양호

4

매우 양호
조명 필드를 선택한 다음 속성 창에서 선택 목록 하이퍼링크를 선택합니다.
선택 목록 대화 상자에서 다음 값을 입력하고 확인 단추를 선택합니다.

값

표시 이름

0

매우 불량

1

나쁨

2

보통

3

양호

4

매우 양호
선반 배치 필드를 선택한 다음 속성 창에서 선택 목록 하이퍼링크를 선택합니다.
선택 목록 대화 상자에서 다음 값을 입력하고 확인 단추를 선택합니다.

값

표시 이름

0

위쪽 선반

1

눈 높이 선반

2

아래쪽 선반
통로 배치 필드를 선택한 다음 속성 창에서 선택 목록 하이퍼링크를 선택합니다.
선택 목록 대화 상자에서 다음 값을 입력하고 확인 단추를 선택합니다.

값

표시 이름

0

통로 가운데

1

통로 끝

2

통로 양측

이름	형식	필수
SalesRepName	문자열	아니요
청결 상태	Integer	예
조명	Integer	예
선반 배치	Integer	예
통로 배치	Integer	예

값	표시 이름
0	매우 불량
1	나쁨
2	보통
3	양호
4	매우 양호

값	표시 이름
0	매우 불량
1	나쁨
2	보통
3	양호
4	매우 양호

값	표시 이름
0	위쪽 선반
1	눈 높이 선반
2	아래쪽 선반

값	표시 이름
0	통로 가운데
1	통로 끝
2	통로 양측

홈 화면을 만들려면

솔루션 탐색기에서 SurveyApp.HTML Client 노드에 대한 바로 가기 메뉴를 열고 화면 추가를 선택합니다.

새 화면 추가 대화 상자가 나타납니다.
화면 템플릿 선택 목록에서 데이터 찾아보기 화면을 선택합니다.
화면 이름 텍스트 상자에 SurveysHome을 입력합니다.
화면 데이터 목록에서 설문 조사를 선택한 다음 확인 단추를 선택합니다.
화면 디자이너에서 화면 | 설문 조사 홈 노드를 선택합니다.
속성 창에서 표시 이름 텍스트 상자를 선택하고 Contoso 제품 설문 조사를 입력합니다.

브라우저에서 응용 프로그램을 테스트하려면

메뉴 모음에서 디버그, 디버깅 시작을 차례로 선택합니다.

응용 프로그램이 웹 브라우저에 표시되고 다음 그림과 유사합니다.

아무 데이터를 입력하지 않았기 때문에 설문 조사 항목이 표시되지 않습니다. 나중에 설문 조사 데이터를 작성 및 편집할 수 있는 화면을 추가합니다.
응용 프로그램 실행을 중지하려면 브라우저 창을 닫습니다.

SharePoint 호스팅 사용

담당자가 SharePoint 사이트로부터 시작할 수 있는 앱을 만들려면 HTML 클라이언트 프로젝트의 설정을 수정하여 SharePoint에서의 호스팅을 활성화해야 합니다.

참고

앱을 호스트하려면 Office 365에 SharePoint 개발자 사이트가 있어야 하며 이 사이트는 Office 및 SharePoint용 앱 개발자 센터에서 얻을 수 있습니다.

SharePoint 호스팅을 사용하려면

솔루션 탐색기에서 SurveyApp 노드를 선택합니다.
메뉴 모음에서 프로젝트, SharePoint 사용을 선택합니다.
SharePoint 사용 마법사에서 Office 365 개발자 사이트의 URL을 입력한 후 마침 단추를 선택합니다.

URL은 https:// MySite.sharepoint.com/sites/Developer/의 형식이어야 합니다.

일부 SharePoint 어셈블리에 대한 참조는 LightSwitch 프로젝트에 추가되고, SharePoint 웹 응용 프로그램에 대한 프로젝트는 솔루션에 추가됩니다.

호스팅된 응용 프로그램을 테스트하려면

메뉴 모음에서 디버그, 디버깅 시작을 차례로 선택합니다.

컴퓨터에서 처음 SharePoint 응용 프로그램을 실행할 때, SharePoint 호스팅을 사용할 수 있는 LightSwitch 응용 프로그램이 항상 SSL(Secure Sockets Layer)을 사용하기 때문에 Localhost 인증서를 설치하라는 메시지가 나타납니다. 이 인증서를 수락하면 응용 프로그램을 실행할 때마다 보안 경고가 표시되지 않습니다. 인증서는 Localhost에만 적용되기 때문에 시스템의 위협 요소가 없습니다.
보안 경고 대화 상자에서 예 단추를 선택합니다.
보안 경고 대화 상자가 나타나면 예 단추를 선택합니다.

웹 브라우저가 나타납니다.
로그인 페이지에서 로그인 단추를 선택합니다.
암호를 입력한 다음 로그인 단추를 선택합니다.
메시지가 표시되 면 신뢰함 단추를 선택합니다.

응용 프로그램이 브라우저에 표시되고 다음 그림과 유사합니다.

사용자가 다시 SharePoint 사이트를 탐색할 수 있도록 화면 맨 위에 막대가 표시됩니다. 모든 SharePoint 응용 프로그램에 이 SharePoint 크롬 모음이 나타납니다.
응용 프로그램 실행을 중지하려면 브라우저 창을 닫습니다.

설문 조사 데이터 작성 및 편집을 위한 지원 추가

SharePoint가 앱 프로그램에 통합됐기 때문에 사용자가 설문 데이터를 작성하고 편집하기 위해서 기능 추가를 다시 할 수 있습니다. 이 섹션에서 SharePoint 목록을 첨부하여 2개 이상의 엔터티를 추가하고 엔터티 간의 관계 추가하고, 홈 스크린을 수정하고 데이터 입력 스크린을 만들고 새 스크린을 위한 네비게이션을 설치합니다.

엔터티를 추가하려면

웹 브라우저에서 이전에 SharePoint를 설정하기 위해 입력한 것과 동일한 URL을 사용해서 SharePoint 개발자 사이트를 찾습니다.
Office 365 메뉴 모음에서 설정 아이콘을 선택하고 사이트 설정 메뉴 항목을 선택합니다.
웹 디자이너 갤러리 목록에서 목록 템플릿을 선택합니다.
웹 디자이너 갤러리 페이지의 메뉴 모음에서 파일, 문서 업로드를 선택합니다.
템플릿 추가 대화 상자에서 찾아보기를 선택하고, 샘플 다운로드에 포함된 contoso_customers_template.stp 템플릿을 찾은 후 확인 단추를 선택합니다.
목록 템플릿 갤러리 대화 상자에서 저장 단추를 선택합니다.
메뉴 모음에서 파일, 문서 업로드를 선택합니다.
템플릿 추가 대화 상자에서 찾아보기를 선택하고, 샘플 다운로드에 포함된 contoso_products_template.stp 템플릿 파일을 찾은 후 확인 단추를 선택합니다.
목록 템플릿 갤러리 대화 상자에서 저장 단추를 선택합니다.
개발자 메뉴 모음에서 사이트 콘텐츠 와 앱 추가링크를 선택하고 나서 Contoso 고객 템플릿을 선택합니다.
사용자 지정 목록 추가 대화 상자에서 목록 이름을 고객으로 지정한 다음 만들기 단추를 선택합니다.
사이트 내용 페이지에서 응용 프로그램 추가 링크를 선택한 다음 Contoso 제품 템플릿을 선택합니다.
사용자 지정 목록 추가 대화 상자에서 목록 이름을 제품으로 지정한 다음 만들기 단추를 선택합니다.
Visual Studio의 솔루션 탐색기에서 SurveyApp.HTML Server 노드에 위한 바로 가기 메뉴를 열고 나서 데이터 소스 추가를 선택합니다.
데이터 소스 연결 마법사에서 SharePoint 아이콘을 선택한 후 다음 단추를 선택합니다.
SharePoint 사이트 주소 지정 텍스트 상자에 SharePoint 개발자 사이트의 URL을 입력하고 나서 다음 단추를 선택합니다.
응용 프로그램에 사용할 개체 선택 목록에서 목록 모드를 확장하고 사용자 및 제품 확인란을 선택하고 나서 마침 단추를 선택합니다.

고객, 제품 및 UserInformationList 엔터티가 응용 프로그램에 추가됩니다.

엔터티 간의 관계를 만들려면

솔루션 탐색기에서 데이터 원본 노드를 확장하고, Surveys.lsml 노드에 대한 바로 가기 메뉴를 연 후 열기를 선택합니다.
엔터티 디자이너의 도구 모음에서 관계 링크를 선택합니다.

새 관계 추가 대화 상자가 나타납니다.
이름 행의 대상 목록에서 고객을 선택한 다음 확인 단추를 선택합니다.
엔터티 디자이너에서 관계 링크를 선택합니다.
새 관계 추가 대화 상자의 대상 열의 이름 목록에서 제품을 선택한 후 확인 단추를 선택합니다.

홈 화면을 수정하려면

솔루션 탐색기에서 SurveysHome.lsml 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.
화면 디자이너 가운데 창에서 설문 조사 노드 목록을 확장한 후 행 레이아웃을 선택합니다.
영업 담당자 이름, 청결도, 조명, 선반 배치 및 통로 배치 노드를 선택한 다음 삭제합니다.
추가 목록에서 고객을 선택합니다.
추가 목록에서 제품을 선택합니다.

설문 조사 작성 및 편집을 위한 화면을 추가하려면

화면 디자이너에서 명령 모음 노드를 확장한 다음 추가를 선택합니다.
추가 단추 대화 상자에서 기존 방법 선택 옵션 단추를 선택합니다.
showTab 목록에서 addAndEditNew를 선택합니다.
탐색 목록에서 **(새 화면)**을 선택한 다음 확인 단추를 선택합니다.

새 화면 추가 대화 상자가 열립니다.
새 화면 추가 대화 상자에서 기본값을 그대로 사용하고 확인 단추를 선택합니다.
화면 디자이너에서 사용자 및 제품 노드를 이동하면 영업 담당자 이름 노드 아래에 나타납니다.
행 레이아웃 | 오른쪽 노드를 삭제합니다.

화면 탐색을 추가하려면

솔루션 탐색기에서 Surveys Home.lsml 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.
화면 디자이너에서 목록 | 내 제품 설문 조사 노드를 선택합니다.
속성 창에서 항목 탭: 없음 하이퍼링크를 선택합니다.

ItemTap 작업 편집 대화 상자가 열립니다.
showTab 목록에서 editSelected를 선택합니다.
다음 탐색 목록에서 설문 조사 추가 편집을 선택한 다음 확인 단추를 선택합니다.

변경 내용을 테스트하려면

메뉴 모음에서 디버그, 디버깅 시작을 차례로 선택합니다.
홈 화면에서 설문 조사 추가 단추를 선택합니다.

설문 조사 추가 편집 화면이 나타납니다.
고객 목록을 확장하여 샘플 고객 데이터를 표시합니다.
제품 목록을 확장하여 샘플 제품 데이터를 표시합니다.
나머지 각 목록을 확장하여 이 연습의 앞부분에서 입력한 선택 항목을 표시합니다.
응용 프로그램 실행을 중지하려면 브라우저 창을 닫습니다.

영업 사원 이름의 논리 추가

영업 담당자가 설문 조사를 만들 때마다 자신의 이름을 입력할 필요가 없어야 합니다. 다음 단계로, 현재 인증된 사용자의 이름과 함께 영업 담당자 이름 필드를 자동으로 채우기 위한 논리적 근거를 추가합니다. 그리고 각 담당자가 작성한 설문 조사를 보여주기만 하면 됩니다.

기본값을 설정하려면

솔루션 탐색기에서 Surveys.lsml 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.

엔터티 디자이너가 열립니다.
코드 작성 목록에서 Surveys_Inserting을 선택합니다.
코드 편집기에서 Surveys_Inserting 메서드에 다음 코드를 추가합니다.
```
entity.SalesRepName = Application.User.Name
```
```
entity.SalesRepName = this.Application.User.Name;
```
이 메서드는 설문 조사 엔터티를 삽입할 때마다 서버의 저장 파이프라인 안에서 실행됩니다. 응용 프로그램이 사용자 정보를 검색하는 경우 SharePoint에 로그인된 사용자에 해당합니다.
솔루션 탐색기에서 AddEditSurvey.lsml 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.

화면 디자이너가 열립니다.
가운데 창에서 영업 담당자 이름 노드를 삭제합니다.

필터링 논리를 추가하려면

솔루션 탐색기에서 Surveys.lsml 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.

엔터티 디자이너가 열립니다.
코드 작성 목록에서 Surveys_Filter를 선택합니다.
코드 편집기에서 Surveys_Filter 메서드에 다음 코드를 추가합니다.
```
filter = Function(e) e.SalesRepName = Application.User.Name
```
```
filter = f => f.SalesRepName == this.Application.User.Name;
```
이 메서드는 설문 조사 엔터티에 대해 쿼리를 실행할 때마다 서버에서 실행됩니다.

변경 내용을 테스트하려면

메뉴 모음에서 디버그, 디버깅 시작을 차례로 선택합니다.
홈 화면에서 설문 조사 추가 단추를 선택합니다.
고객 목록에서 고객을 선택합니다.
제품 목록에서 제품을 선택합니다.
나머지 각 목록에서 값을 선택한 다음 저장 단추를 선택합니다.
설문 조사 목록에 방금 만든 설문이 포함되었는지 확인합니다.
응용 프로그램 실행을 중지하려면 브라우저 창을 닫습니다.

가장 최근 설문 조사 날짜의 논리 추가

다음 단계로 고객의 사이트에서 최근 실시된 설문 조사 일자를 보여주는 코드를 추가합니다.

최근 설문 조사의 날짜를 업데이트하려면

솔루션 탐색기에서 Surveys.lsml 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.
코드 작성 목록에서 Surveys_Inserted를 선택합니다.

코드 편집기에서 Surveys_Inserted 메서드에 다음 코드를 추가합니다.

Dim c As Customer = Me.DataWorkspace.DeveloperData.Customers.Where(
                Function(f) f.CompanyName = entity.Customer.CompanyName).FirstOrDefault()
            If (Not c Is Nothing) Then
                c.LastSurveyDate = Date.Today
                Me.DataWorkspace.DeveloperData.SaveChanges()
            End If

Customer c = this.DataWorkspace.DeveloperData.Customers.Where(f =>
 f.CompanyName == entity.Customer.CompanyName).FirstOrDefault();

            if (c != null)
            {
                c.LastSurveyDate = DateTime.Today;
                this.DataWorkspace.DeveloperData.SaveChanges();
            }

변경 내용을 테스트하려면

메뉴 모음에서 디버그, 디버깅 시작을 차례로 선택합니다.
홈 화면에서 설문 조사 추가 단추를 선택합니다.
고객 목록에서 고객을 선택합니다.
제품 목록에서 제품을 선택합니다.
나머지 각 목록에서 값을 선택한 다음 저장 단추를 선택합니다.
설문 조사 목록에 방금 만든 설문이 포함되었는지 확인합니다.
메뉴 모음에서 사이트로 돌아가기 옵션을 선택합니다.

SharePoint 개발자 사이트가 나타납니다. 고객 목록에서 방금 설문 조사한 고객의 LastSurveyDate가 업데이트되었습니다.
응용 프로그램 실행을 중지하려면 브라우저 창을 닫습니다.

시작 화면 및 제목 표시줄을 업데이트합니다.

다음으로 프로젝트 이름 대신, 앱 이름을 표시하기 위해 앱 가동 중에 나타나는 시작 화면을 업데이트합니다. 또한 제목 표시줄 또는 브라우저 탭에 표시되는 이름을 수정합니다.

표시 문자열을 업데이트하려면

솔루션 탐색기에서 SurveyApp.HTMLClient 노드를 확장하고 default.htm 파일에 대한 바로 가기 메뉴를 연 후 열기를 선택합니다.
코드 편집기에서 <div> 요소를 찾은 다음 SurveyApp을 Contoso Product Surveys로 바꿉니다.

이 문자열이 시작 화면에 나타납니다.
<title> 요소에서 SurveyApp을 Contoso Product Surveys로 바꿉니다.

변경 내용을 테스트하려면

메뉴 모음에서 디버그, 디버깅 시작을 차례로 선택합니다.

Contoso 제품 설문 조사가 시작 화면 및 제목 표시줄에 나타납니다.
응용 프로그램 실행을 중지하려면 브라우저 창을 닫습니다.

사진 업로드 및 표시를 위한 지원 추가

다음으로 SharePoint 그림 라이브러리에 사진 업로드 지원을 추가합니다. 판매 담당자가 사진을 업로드하면 SharePoint에서 해당 사진의 축소판 그림과 웹에 최적화된 버전을 자동으로 만듭니다. 이러한 추가 이미지는 영업 담당자가 LightSwitch용 SQL 데이터베이스에서보다 SharePoint에서 이미지를 보다 쉽고 빠르게 검색하고 관리할 수 있게 해줍니다.

SharePoint용 응용 프로그램은 응용 프로그램 웹에 상주하며 응용 프로그램과 함께 설치 및 제거되는 목록, 모듈, 콘텐츠 형식 및 속성 모음과 같은 다양한 자산을 포함하기도 합니다.

사진 엔터티를 추가하려면

솔루션 탐색기에서 SurveyApp.HTML Server 노드에 대한 바로 가기 메뉴를 열고 테이블 추가를 선택합니다.
속성 창의 이름 텍스트 상자에 사진을 입력합니다.
엔터티 디자이너에 다음 값을 입력합니다.

이름

형식

필수

FullImageUrl

웹 주소

예

ThumbnailUrl

웹 주소

예

OptimizedUrl

웹 주소

예

NameWithExt

문자열

예

CreatedDate

날짜 시간

예

이름	형식	필수
FullImageUrl	웹 주소	예
ThumbnailUrl	웹 주소	예
OptimizedUrl	웹 주소	예
NameWithExt	문자열	예
CreatedDate	날짜 시간	예

관계를 추가하려면

솔루션 탐색기에서 Surveys.lsml 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.
엔터티 디자이너의 도구 모음에서 관계 링크를 선택합니다.
새 관계 추가 대화 상자의 이름 행 및 대상 열에 있는 목록에서 사진을 선택합니다.
복합성 행에서 시작 열을 선택하고 목록에서 일을 선택합니다.
복합성 행에서 끝 열을 선택하고 목록에서 다수를 선택합니다.
Delete Behavior 상의 행과 From 열에서 목록의 계단식 삭제 를 선택하고 나서 확인 단추를 선택합니다.

SharePoint 그림 라이브러리를 추가하려면

솔루션 탐색기에서 SurveyApp.SharePoint 노드의 바로 가기 메뉴를 열고 추가를 선택한 다음 새 항목을 선택합니다.
새 항목 추가 대화 상자에서 목록을 선택합니다.
이름 텍스트 상자에서 Photos를 입력한 후 추가 단추를 선택합니다.
SharePoint 사용자 지정 마법사에서 기존 목록 템플릿 기반 목록 만들기 옵션 단추를 선택합니다.
알림 목록에서 그림 라이브러리를 선택한 다음 마침 단추를 선택합니다.

유틸리티 클래스를 추가하려면

솔루션 탐색기에서 SurveyApp.Server 노드에 대한 바로 가기 메뉴를 열고 추가를 선택한 후 기존 항목을 선택합니다.

그러면 기존 항목 추가 대화 상자가 열립니다.
샘플로 다운로드한 PhotoListHelper.vb 또는 PhotoListHelper.cs 파일을 검색하고 나서 추가 단추를 선택합니다.
코드 편집기의 AddPhoto 메서드에서 siteContext.ExecuteQuery() 줄을 찾은 후 다음 코드를 추가합니다.
```
siteContext.Load(siteContext.Web)
siteContext.ExecuteQuery()
```
```
siteContext.Load(siteContext.Web);
siteContext.ExecuteQuery();
```
참고

URL에 대한 후속 호출에서 예외를 방지하기 위해 Visual Studio 2013에 이 추가 코드가 필요합니다.
메뉴 모음에서 빌드, 솔루션 빌드를 선택하여 코드가 제대로 컴파일되는지 확인합니다.

WebAPI 컨트롤러를 추가하려면

솔루션 탐색기에서 SurveyApp.Server 노드의 바로 가기 메뉴를 열고 추가를 선택한 다음 새 항목을 선택합니다.
새 항목 추가 대화 상자에서 웹 노드를 선택한 후 웹 API 컨트롤러 클래스 템플릿을 선택합니다.
이름 텍스트 상자에서 PhotosController를 입력한 후 추가 단추를 선택합니다.

코드 편집기에서 내용을 다음 코드로 바꿉니다.

Imports System.Net
Imports System.Web.Http
Imports LightSwitchApplication
Imports Microsoft.SharePoint.Client
Imports System.IO
Imports System.Net.Http
Imports System.Net.Http.Headers
Imports System.Text
Imports System.Threading.Tasks

Public Class PhotosController
    Inherits ApiController


Private _appWebContext As ClientContext
    Private ReadOnly Property AppWebContext() As ClientContext
        Get
            If _appWebContext Is Nothing Then
                Using serverContext = LightSwitchApplication.ServerApplicationContext.CreateContext()
                    _appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext()
                End Using
            End If
            Return _appWebContext
        End Get
    End Property
    Public Function PostFormData() As Task(Of HttpResponseMessage)
        If Not Request.Content.IsMimeMultipartContent() Then
            Throw New HttpResponseException(HttpStatusCode.UnsupportedMediaType)
        End If
        Dim memStream = New MultipartMemoryStreamProvider()
        Dim spCtx = AppWebContext
        Dim myTask = Request.Content.ReadAsMultipartAsync(memStream).ContinueWith(
          Function(t)
                  If t.IsFaulted OrElse t.IsCanceled Then
                      Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception)
                  End If
                  Dim fileList = New StringBuilder()
                  For Each contentItem In memStream.Contents
                      Dim sourceFileName = Path.GetFileName(contentItem.Headers.ContentDisposition.FileName.Replace("""", ""))
                      Try
                          Dim fileReadTask = contentItem.ReadAsByteArrayAsync().ContinueWith(
                              Function(frt)
                                Dim photoUrl = PhotoListHelper.AddPhoto(frt.Result, sourceFileName, spCtx)
                                Return photoUrl
                            End Function
                          )
                          fileReadTask.Wait()
                          fileList.AppendLine(fileReadTask.Result)
                      Catch ex As Exception
                          fileList.AppendLine("FAILED::" + ex.Message)
                      End Try
                  Next
                  Return Request.CreateResponse(HttpStatusCode.Created, fileList.ToString(), New MediaTypeHeaderValue("application/xml"))
              End Function
        )
        Return myTask

    End Function
    Public Function DeletePhoto(url As String) As Task(Of HttpResponseMessage)
        Dim spCtx = AppWebContext
        Dim deleteTask = New Task(Of HttpResponseMessage)(
            Function()
                    Try
                        PhotoListHelper.DeletePhoto(url, spCtx)
                        Return Request.CreateResponse(HttpStatusCode.OK)
                    Catch ex As Exception
                        Return Request.CreateErrorResponse(HttpStatusCode.NotModified, ex)
                    End Try
                End Function
        )
        deleteTask.Start()
        Return deleteTask
    End Function
End Class

using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Diagnostics;
using System.Net;
using System.Web.Http;
using LightSwitchApplication;
using Microsoft.SharePoint.Client;
using System.IO;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;

public class PhotosController : ApiController
{


private ClientContext appWebContext;
private ClientContext AppWebContext
        {
            get
            {
                if (appWebContext == null)
                {
                    using (var serverContext = LightSwitchApplication. ServerApplicationContext.CreateContext())
                    {
                        appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext();
                    }
                }
                return appWebContext;
            }
        }

        public Task<HttpResponseMessage> PostFormData()
        {
            if (!Request.Content.IsMimeMultipartContent())
            {
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }


                // Since we're uploading the image to Sharepoint directly, we'll just read the Http content into memory
                var memoryStream = new MultipartMemoryStreamProvider();
                // We need to get the appweb context before forking the new task; otherwise the LightSwitch runtime will 
                // throw because there is no HttpContext available on the calling thread.
                var sharepointContext = this.AppWebContext;
                var task = Request.Content.ReadAsMultipartAsync(memoryStream).
                    ContinueWith<HttpResponseMessage>(t =>
                    {
                        if (t.IsFaulted || t.IsCanceled)
                        {
                            Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception);
                        }

                        // There can be multiple files in the POST, so we'll upload each attachment and attach its new
                        // URL (in the SP Picture Library).
                        StringBuilder fileList = new StringBuilder();
                        foreach (var contentItem in memoryStream.Contents)
                        {

                            var sourceFileName = Path.GetFileName(contentItem.Headers.ContentDisposition.FileName.Replace("\"", ""));
                            try
                            {
                                // Read the contents of the file into memory and upload it to Sharepoint
                                var fileReadTask = contentItem.ReadAsByteArrayAsync().
                                    ContinueWith<string>(frt =>
                                    {
                                        var photoURL = PhotoListHelper.AddPhoto(frt.Result, sourceFileName, sharepointContext);
                                        return photoURL;
                                    });
                                fileReadTask.Wait();
                                fileList.AppendLine(fileReadTask.Result);
                            }
                            catch (Exception ex)
                            {
                                fileList.AppendLine(@"FAILED::" + ex.Message);
                            }
                        }
                        return Request.CreateResponse(HttpStatusCode.Created, fileList.ToString(), new MediaTypeHeaderValue("application/xml"));
                    });
                return task;

        }

        public Task<HttpResponseMessage> DeletePhoto(string url)
        {
            var sharepointContext = this.AppWebContext;

            var deleteTask = new Task<HttpResponseMessage>(
                () =>
                {
                    try
                    {
                        PhotoListHelper.DeletePhoto(url, sharepointContext);
                        return Request.CreateResponse(HttpStatusCode.OK);
                    }
                    catch (Exception e)
                    {
                        return Request.CreateErrorResponse(HttpStatusCode.NotModified, e);
                    }
                });
            deleteTask.Start();
            return deleteTask;
        }
}

본 코드는 LightSwitch 서버 API를 사용하여 SharePoint호스트 개체를 appWebContext = serverContext.Application.SharePoint.GetAppWebClientContext()를 복원한다는 것을 참고하십시오. SharePoint 호스트 객체는 SharePoint 사이트와의 상호 작용을 위해 사용되는 몇 가지 유용한 속성 및 메서드에 대한 액세스를 제공합니다. 특히, GetAppWebClientContext 메서드는 앱 웹에 속하는 자산과 상호 작용하기 위한 시작점을 제공합니다. 응용 프로그램 웹의 ClientContext가 검색되면 적절한 컨텍스트 토큰이 SharePoint에 다시 전달하는 데 사용됩니다.

컨트롤러에 대한 HTTP 경로를 추가하려면

솔루션 탐색기에서 SurveyApp.Server 노드의 바로 가기 메뉴를 열고 추가를 선택한 다음 새 항목을 선택합니다.
새 항목 추가 대화 상자에서 웹 노드를 선택한 후 전역 응용 프로그램 클래스 템플릿을 선택합니다.
이름 텍스트 상자에서 Global.asax를 입력한 후 추가 단추를 선택합니다.

코드 편집기에서 다음 Imports 또는 Using 문을 추가합니다.

Imports System.Web.Routing
Imports System.Web.Http

using System.Web.Routing;
using System.Web.Http;

Application_Start 메서드에 다음 코드를 추가합니다.

RouteTable.Routes.MapHttpRoute(
       name := "DefaultApi",
      routeTemplate := "api/{controller}/{id}",
      defaults := New With { .id = System.Web.Http.RouteParameter.Optional }
  )

RouteTable.Routes.MapHttpRoute(
                           name: "DefaultApi",
                           routeTemplate: "api/{controller}/{id}",
                           defaults: new { id = System.Web.Http.RouteParameter.Optional }
                           );
    }

HTTP 경로를 사용하면 클라이언트에서 컨트롤러를 호출할 수 있습니다.

메뉴 모음에서 빌드, 솔루션 빌드를 선택하여 코드가 제대로 컴파일되는지 확인합니다.

사진 그림 라이브러리와 상호 작용하도록 응용 프로그램 인증

사진 사진 라이브러리를 포함하고 격리된 도메인에 상주하는 응용 프로그램 웹입니다. 기본적으로 응용 프로그램은 응용 프로그램 웹과 상호 작용하도록 인증되지 않으므로 간단한 스크립트를 추가하여 해당 인증을 수행해야 합니다.

인증을 추가하려면

솔루션 탐색기에서 SurveyApp.HTMLClient 노드를 확장하고 스크립트 노드에 대한 바로 가기 메뉴를 열고 추가를 선택한 후 기존 항목을 선택합니다.
기존 항목 추가 대화 상자에서 샘플 일부로 다운로드한 sharepointauthhelper.js 파일을 찾은 후 추가 단추를 선택합니다.

코드 편집기에서 내용을 다음 코드로 바꿉니다.

$(document).ready(function () {
var paramName = "SPAppWebUrl";
var match = RegExp('[?&]' + paramName + '=([^&]*)')
.exec(window.location.search);
var appWebUrl = match && decodeURIComponent(match[1].replace(/\+/g, ' '));
if (appWebUrl) {
var authproxy = appWebUrl + "/_layouts/15/appwebproxy.aspx"
var iframe = $("<iframe src='" + authproxy + "' style='width: 0px; height: 0px; border: 0px'/>");
$("body").append(iframe);
}
});

참고

Visual Studio 2013에서 SharePoint 응용 프로그램 인증은 쿠키 대신 쿼리 문자열을 사용하여 URL을 전달합니다.

솔루션 탐색기에서 default.htm 파일의 바로 가기 메뉴를 열고 열기를 선택합니다.

기본 .htm 파일에 다음 참조를 추가합니다.

<script type="text/javascript" src="Scripts/sharepointauthhelper.js"></script

메뉴 모음에서 빌드, 솔루션 빌드를 선택하여 코드가 제대로 컴파일되는지 확인합니다.

사진 업로드를 위한 사용자 지정 컨트롤 추가

다음으로 판매 담당자에게 제품별 디스플레이 사진을 업로드하라고 명령하는 고객 지정 제어 장치를 만듭니다.

사용자 지정 컨트롤을 만들려면

솔루션 탐색기에서 SurveyApp.HTMLClient 노드를 확장하고 스크립트 노드에 대한 바로 가기 메뉴를 열고 추가를 선택한 후 기존 항목을 선택합니다.
기존 항목 추가 대화 상자에서 샘플 일부로 다운로드한 photohelper.js 파일을 찾은 후 추가 단추를 선택합니다.
솔루션 탐색기에서 default.htm 파일의 바로 가기 메뉴를 열고 열기를 선택합니다.

코드 편집기에서 다음 참조를 추가합니다.

<script type="text/javascript" src="Scripts/photohelper.js"></script>

솔루션 탐색기의 도구 모음에 있는 목록에서 논리 뷰를 선택합니다.
AddEditSurvey.lsml 화면 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.
화면 디자이너에서 팝업 노드의 바로 가기 메뉴를 열고 팝업 추가를 선택합니다.
속성 창의 이름 텍스트 상자에 UploadPhotos를 입력합니다.
행 레이아웃 | 사진 업로드 노드 아래에 있는 화면 디자이너에서 추가 노드를 확장하고 나서 새 사용자 지정 컨트롤을 선택합니다.

사용자 지정 컨트롤 추가 대화 상자가 나타납니다.
확인 단추를 선택하여 화면의 기본 값을 수락하고 대화 상자를 닫습니다.
이름 텍스트 상자의 속성 창에서, UploadControl을 입력하고 나서 Render 코드 편집 하이퍼링크를 선택합니다.
코드 편집기에서 myapp.AddEditSurvey.UploadControl_render 메서드 위에 다음 코드 줄을 입력합니다.
```
var $uploadControlElement, uploadControlContentItem;
```
메서드의 본문에 다음 코드를 추가합니다.
```
$uploadControlElement = $(element);
    uploadControlContentItem = contentItem;
```
판매 담당자가 사진을 업로드하면 이 코드는 사진 라이브러리에 전체 크기, 최적화 및 축소판 이미지 URL에 대한 속성 참조를 가진 내장 데이터베이스에 사진 엔터티를 만듭니다. 이 엔터티는 나중에 설문 조사 응용 프로그램에서 이미지를 표시하는 데 사용됩니다.
솔루션 탐색기에서 AddEditSurvey.lsml 화면 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.
화면 디자이너에서 행 레이아웃 | 사진 업로드 노드를 위한 바로 가기 메뉴를 열고 나서 단추 추가를 선택합니다.
추가 단추 대화 상자에서 나만의 메서드 작성 옵션 단추를 선택합니다.
메서드 UploadPhoto의 이름을 지정한 다음 확인 단추를 선택합니다.
스크린 디자이너에서, 사진 업로드 노드를 위한 바로 가기 메뉴를 열고 나서 Execute 코드 편집을 선택합니다.
코드 편집기에서 Upload 메서드에 다음 코드를 추가합니다.
```
if ($("#fileInput").val() != "") {
        $.mobile.loading('show');
        $("#uploadForm").submit();
    }
```
이 코드는 사용자가 UploadControl에서 사진 업로드 단추를 누를 때 실행됩니다.
화면 디자이너에서 탭 노드의 바로 가기 메뉴를 열고 탭 추가를 선택합니다.
속성 창에서 탭 사진 이름을 지정합니다.
행 레이아웃 | 사진 노드에서 명령 모음 노드의 바로 가기 메뉴를 열고 단추 추가를 선택합니다.
단추 추가 대화 상자에서 나만의 메서드 작성 옵션 단추를 선택하고, 메서드 이름을 UploadPhotos로 지정한 후 확인 단추를 선택합니다.
속성 창에서 표시 이름으로 사진 업로드를 입력합니다.
아이콘 목록에서 사진 추가를 선택합니다.
스크린 디자이너에서, 사진 업로드 노드를 위한 바로 가기 메뉴를 열고 나서 Execute 코드 편집을 선택합니다.
코드 편집기에서 다음 코드를 추가합니다.
```
showUploadPopup(screen);
```
이 코드는 사용자가 사진 업로드 단추를 누를 때 팝업 정보를 표시합니다.
메뉴 모음에서 빌드, 솔루션 빌드를 선택하여 코드가 제대로 컴파일되는지 확인합니다.

사진 표시를 위한 화면 지원 추가

다음으로 AddEditSurvey 화면에 사진 표시 지원을 추가합니다. 각 사진에 대한 축소판 그림이 나타납니다. 그런 다음 영업 담당자가 축소판 그림을 선택하면 더 크고 웹에 최적화된 이미지가 대화 상자에 나타납니다. 또한 영업 담당자가 해당 사진에 대한 조사 레코드를 삭제할 때 사진 삭제를 위한 지원을 추가합니다.

축소판 그림 이미지를 표시하려면

솔루션 탐색기에서 AddEditSurvey.lsml 화면 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.
화면 디자이너의 왼쪽 창에서 사진 추가 하이퍼링크를 선택합니다.

사진 쿼리가 화면에 추가됩니다.
화면 디자이너 가운데 창에서 행 레이아웃 | 사진 노드의 추가 목록에서 사진을 선택합니다.
목록 목록에서 타일 목록을 선택합니다.
전체 이미지 Url, 최적화된 Url, 확장명이 있는 이름, 만든 날짜 및 설문 조사 노드를 삭제합니다.

축소판 그림 Url 노드만 있어야 합니다.
축소판 그림 Url 노드 목록에서 이미지를 선택합니다.
속성 창의 너비에 있는 픽셀 텍스트 상자에 60을 입력합니다.
높이의 픽셀 텍스트 상자에 60을 입력합니다.

팝업을 추가하려면

화면 디자이너에서 팝업 노드를 선택한 다음 팝업 추가를 선택합니다.
속성 창의 이름 텍스트 상자에 ViewPhotoDetails를 입력합니다.
화면 디자이너의 왼쪽 창에서 행 레이아웃 | 사진 자세히 보기 노드 아래에 표시되도록 확장명이 있는 이름 노드를 이동합니다.
확장명이 있는 이름 노드 목록에서 텍스트를 선택합니다.
만든 날짜 노드가 확장명이 있는 이름 노드 아래에 표시되도록 이동합니다.
만든 날짜 노드 목록에서 텍스트를 선택합니다.
최적화된 Url 노드가 만든 날짜 노드 아래에 표시되도록 이동합니다.
최적화된 Url 노드 목록에서 이미지를 선택합니다.
속성 창의 너비 목록에서 내용에 맞춤을 선택합니다.
높이 목록에서 내용에 맞춤을 선택합니다.
레이블 위치 목록에서 없음을 선택합니다.
화면 디자이너에서 제목 목록 | 사진 노드를 선택합니다.
속성 창에서 항목 탭 하이퍼링크를 선택합니다.

ItemTap 작업 편집 대화 상자가 나타납니다.
팝업 목록에서 사진 정보 보기를 선택한 다음 확인 단추를 선택합니다.

사진 삭제를 위한 지원을 추가하려면

솔루션 탐색기에서 Photos.lsml 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.

엔터티 디자이너가 열립니다.
코드 작성 목록에서 Photos_Deleted를 선택합니다.
코드 편집기에서 Photos_Deleted 메서드에 다음 코드를 추가합니다.
```
Try
                PhotoListHelper.DeletePhoto(entity.FullImageUrl, Application.SharePoint.GetAppWebClientContext())
            Catch ex As Exception
            End Try
```
```
try
            {
                PhotoListHelper.DeletePhoto(entity.FullImageUrl, Application.SharePoint.GetAppWebClientContext());
            }
            catch (Exception) { }
```
사진 및 설문 조사 엔터티 사이의 관계는 계단식 삭제로 설정되었으므로 설문 조사 레코드가 삭제되면 Photos_Deleted 메서드가 호출됩니다. 이 코드는 PhotoListHelper 클래스의 DeletePhoto 메서드를 호출하여 SharePoint 목록에서 사진을 삭제합니다.
솔루션 탐색기에서 AddEditSurvey.lsml 노드의 바로 가기 메뉴를 열고 열기를 선택합니다.
화면 디자이너에서, 행 레이아웃 | 사진 자세히 보기 노드를 위한 바로 가기 메뉴를 열고 나서 단추 추가를 선택합니다.
추가 단추 대화 상자에서 나만의 메서드 작성 옵션 단추를 선택합니다.
메서드 텍스트 상자에서 DeletePhoto를 입력한 후 확인 단추를 선택합니다.
사진 삭제 노드의 바로 가기 메뉴를 연 다음 Execute 코드 편집을 선택합니다.
코드 편집기에서 DeletePhoto_Execute 메서드에 다음 코드를 추가합니다.
```
deleteCurrentPhoto(screen);
```
이 JavaScript 코드를 추가했기 때문에 영업 담당자는 관련 설문 조사를 삭제하지 않고 사진을 삭제할 수 있습니다.

변경 내용을 테스트하려면

메뉴 모음에서 디버그, 디버깅 시작을 차례로 선택합니다.
홈 화면에서 추가 단추를 선택합니다.
고객 목록에서 고객을 선택합니다.
제품 목록에서 제품을 선택합니다.
나머지 각 목록에서 값을 선택한 다음 저장 단추를 선택합니다.
설문 조사 목록에서 방금 만든 설문이 표시되는지 확인합니다.
사진 탭에서 사진 업로드 단추를 선택합니다.
사진 업로드 대화 상자에서, 찾아보기를 선택하고 로컬 컴퓨터에 있는 사진을 검색하고 나서 열기 단추를 선택합니다.
사진 업로드 단추를 선택한 다음 표시되는 축소판 그림 이미지를 선택합니다.

사진 이미지 보기 대화 상자가 나타나고 전체 크기 이미지를 보여 줍니다.
사진 삭제 단추를 선택하고 축소판 그림이 제거되었는지 확인합니다.
응용 프로그램 실행을 중지하려면 브라우저 창을 닫습니다.

완성된 응용 프로그램을 SharePoint에 게시

지금까지는 SharePoint를 사용해서 인증을 제공하고 IIS Express의 로컬 컴퓨터 인스턴스로 리디렉션되는 디버그 모드에서만 앱을 실행했습니다. 이제 앱이 완성되었으며 온-프레미스 SharePoint 사이트, Microsoft Azure 또는 타사 호스팅 사이트에 게시할 수 있습니다. 앱을 게시한 후 다른 사용자가 자신의 컴퓨터와 모바일 장치를 사용하여 SharePoint에서 앱을 실행할 수 있습니다. 방법: SharePoint에 클라우드 비즈니스 앱 게시를 참조하세요.

참고 항목

기타 리소스

SharePoint용 LightSwitch 응용 프로그램

Share via

연습: LightSwitch를 사용하여 SharePoint용 응용 프로그램 만들기

사전 요구 사항

HTML로 LightSwitch 응용 프로그램 만들기

프로젝트를 만들려면

설문 조사 데이터를 표시하기 위한 지원 추가

설문 조사 엔터티를 추가하려면

홈 화면을 만들려면

브라우저에서 응용 프로그램을 테스트하려면

SharePoint 호스팅 사용

SharePoint 호스팅을 사용하려면

호스팅된 응용 프로그램을 테스트하려면

설문 조사 데이터 작성 및 편집을 위한 지원 추가

엔터티를 추가하려면

엔터티 간의 관계를 만들려면

홈 화면을 수정하려면

설문 조사 작성 및 편집을 위한 화면을 추가하려면

화면 탐색을 추가하려면

변경 내용을 테스트하려면

영업 사원 이름의 논리 추가

기본값을 설정하려면

필터링 논리를 추가하려면

변경 내용을 테스트하려면

가장 최근 설문 조사 날짜의 논리 추가

최근 설문 조사의 날짜를 업데이트하려면

변경 내용을 테스트하려면

시작 화면 및 제목 표시줄을 업데이트합니다.

표시 문자열을 업데이트하려면

변경 내용을 테스트하려면

사진 업로드 및 표시를 위한 지원 추가

사진 엔터티를 추가하려면

관계를 추가하려면

SharePoint 그림 라이브러리를 추가하려면

유틸리티 클래스를 추가하려면

WebAPI 컨트롤러를 추가하려면

컨트롤러에 대한 HTTP 경로를 추가하려면

사진 그림 라이브러리와 상호 작용하도록 응용 프로그램 인증

인증을 추가하려면

사진 업로드를 위한 사용자 지정 컨트롤 추가

사용자 지정 컨트롤을 만들려면

사진 표시를 위한 화면 지원 추가

축소판 그림 이미지를 표시하려면

팝업을 추가하려면

사진 삭제를 위한 지원을 추가하려면

변경 내용을 테스트하려면

완성된 응용 프로그램을 SharePoint에 게시

참고 항목

기타 리소스

추가 리소스