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

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 해 보도록 하겠습니다.