Visual Studio 2010 공식 팀 블로그 @vsts2010



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의 내용을 대화상자로 확인할 수 있습니다.

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

SharePoint 2010의 사용자 인터페이스 중의 또 다른 큰 변화는 대화상자(Dialog)라고 할 수 있습니다. 목록의 항목이나 리본의 컨트롤을 클릭할 경우 아래처럼 대화 상자를 볼 수 있습니다.

여기서는 리본에 컨트롤을 추가했을 경우 컨트롤의 Command에서 해당 대화 상자를 Show 시키는 javascript를 작성해보도록 하겠습니다.

앞에서 다룬 Ribbon에서 CommandUIHandler의 내용을 아래와 구성할 수 있습니다.

<CommandUIHandlers>

        <CommandUIHandler

        Command="Demo_HelloWorld" CommandAction="javascript:

         function demoCallback(dialogResult, returnValue)

         {

         SP.UI.Notify.addNotification('Operation Successful');    

         SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);

         }

         var options={

          url:'/_layouts/RibbonDemo/hj.aspx',

          title:'HJ Dialog',

          allowMaximize: true,

          showClose: true,

          width: 600,

          height: 400,

          dialogReturnValueCallback: demoCallback };

          SP.UI.ModalDialog.showModalDialog(options);

         " />

      </CommandUIHandlers>

맨 마지막 부분을 보면  SP.UI.ModalDialog.showModalDialog(options); 으로 구성되어 있으며 대화 상자를 Show 시켜주는 구문입니다.

options에서는 해당 페이지 url, 제목, 높이, 넓이 등을 나열 할 수 있습니다.

dialogReturnValueCallback의 경우는 대화상자를 닫을 경우 호출되는 javascript 함수를 참조합니다.

SP.UI.Notify.addNotification('Operation Successful'); 는 SharePoint에서 오른쪽 상단의 알림을 나타내는 부분을 제공하고 있는데 Notify를 통해 해당 문자열을 3초간 표시해주게 됩니다.

SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK); 는 AJAX 스타일의 새로 고침을 제공해주고 있습니다.

전체 Elements.xml은 아래와 같습니다.

배포해서 결과를 확인해보도록 하겠습니다. 물론 hj.aspx가 추가되어 있어야겠죠

대화 상자를 확인 가능합니다. 오른쪽 상단의 X 를 클릭해서 창을 닫아 봅니다. 화면 오른쪽 상단에서 알림을 알아 볼 수 있습니다.

다음 블로그에서는 options에 url외에 html이 올 수 있습니다. 웹 파트에서 대화 상자를 Show 해 보도록 하겠습니다.