SharePoint 2010에서의 대화상자(Dialog) (2)



SharePoint 2010에서 대화 상자를 리본에서만 Show 시킬 수 있는 것은 아니고 웹 파트의 버튼에서도 손쉽게 대화 상자를 Show 시킬 수 있습니다. 여기서는 앞에서 살펴본 options의 url 뿐만 아니라 html 을 적용해보도록 하겠습니다.

Visual 웹 파트를 하나 생성하고 웹 파트에 HTML DIV 태그와 버튼을 추가하고 JavaScript로 해당 DIV를 대화상자로 Show 할 것입니다.

 

빈 SharePoint 프로젝트 이름은 DialogDemo 로 입력하고 새로운 프로젝트를 생성합니다. 프로젝트에 새로운 항목으로 비쥬열 웹 파트를 추가합니다. 웹 파트의 이름은 VisualDialogWP 으로 지정합니다.

비쥬얼 웹 파트의 ascx의 html 컨트롤은 아래와 같이 추가합니다.

 

SP.js를 추가해야 JavaScript에서 사용이 가능합니다. 아래와 같은 SharePoint Script를 Control 태그아래에 추가합니다.

자 이제 JavaScript를 아래와 같이 작성해서 클릭할 경우에 이벤트와 취소를 클릭할 경우 이벤트를 구성하면 됩니다.

 

비쥬얼 웹 파트를 배포해서 결과를 확인해보도록 하겠습니다.

 

Show ModalDialog를 클릭하면 새로운 divDialog의 내용을 대화상자로 확인할 수 있습니다.

이번 블로그에서는 Ribbon, 대화상자(Dialog)에 대해서 알아보았습니다.